@rokkit/chart 1.3.8 → 1.3.9

package/dist/lib/brewing/index.svelte.js

@@ -1,205 +0,0 @@
-import { createDimensions, updateDimensions } from './dimensions.svelte.js'
-import { createScales, getOrigin } from './scales.svelte.js'
-import { createBars, filterBars, createGroupedBars } from './bars.svelte.js'
-import { createXAxis, createYAxis, createGrid, createTickAttributes } from './axes.svelte.js'
-import { createLegend, filterByLegend, createLegendItemAttributes } from './legends.svelte.js'
-
-/**
- * Chart Brewing - A collection of pure functions for chart data preparation
- */
-export {
-	// Dimensions
-	createDimensions,
-	updateDimensions,
-
-	// Scales
-	createScales,
-	getOrigin,
-
-	// Bars
-	createBars,
-	filterBars,
-	createGroupedBars,
-
-	// Axes
-	createXAxis,
-	createYAxis,
-	createGrid,
-	createTickAttributes,
-
-	// Legends
-	createLegend,
-	filterByLegend,
-	createLegendItemAttributes
-}
-
-/**
- * Main class that manages chart state and provides access to all brewing functions
- */
-export class ChartBrewer {
-	#data = []
-	#dimensions = createDimensions()
-	#scales = { x: null, y: null, color: null }
-	#fields = { x: null, y: null, color: null }
-	#options = {
-		padding: 0.2,
-		animationDuration: 300
-	}
-
-	/**
-	 * Creates a new ChartBrewer instance
-	 *
-	 * @param {Object} options Configuration options
-	 */
-	constructor(options = {}) {
-		this.#dimensions = createDimensions(options.width, options.height, options.margin)
-
-		if (options.padding !== undefined) this.#options.padding = options.padding
-		if (options.animationDuration !== undefined)
-			this.#options.animationDuration = options.animationDuration
-	}
-
-	/**
-	 * Sets the data for the chart
-	 *
-	 * @param {Array} data Data array
-	 * @returns {ChartBrewer} this for method chaining
-	 */
-	setData(data) {
-		this.#data = Array.isArray(data) ? data : []
-		return this
-	}
-
-	/**
-	 * Sets the field mappings for axes and color
-	 *
-	 * @param {Object} fields Field mappings
-	 * @returns {ChartBrewer} this for method chaining
-	 */
-	setFields({ x, y, color }) {
-		if (x !== undefined) this.#fields.x = x
-		if (y !== undefined) this.#fields.y = y
-		if (color !== undefined) this.#fields.color = color
-		return this
-	}
-
-	/**
-	 * Sets the dimensions of the chart
-	 *
-	 * @param {Object} dimensions Chart dimensions
-	 * @returns {ChartBrewer} this for method chaining
-	 */
-	setDimensions({ width, height, margin }) {
-		this.#dimensions = updateDimensions(this.#dimensions, { width, height, margin })
-		return this
-	}
-
-	/**
-	 * Creates scales based on data and dimensions
-	 *
-	 * @returns {ChartBrewer} this for method chaining
-	 */
-	createScales() {
-		this.#scales = createScales(this.#data, this.#fields, this.#dimensions, {
-			padding: this.#options.padding
-		})
-		return this
-	}
-
-	/**
-	 * Creates bar data for rendering
-	 *
-	 * @returns {Array} Data for rendering bars
-	 */
-	createBars() {
-		return createBars(this.#data, this.#fields, this.#scales, { dimensions: this.#dimensions })
-	}
-
-	/**
-	 * Creates x-axis tick data for rendering
-	 *
-	 * @param {Object} options Axis options
-	 * @returns {Object} Axis rendering data
-	 */
-	createXAxis(options = {}) {
-		return createXAxis(this.#scales, this.#dimensions, options)
-	}
-
-	/**
-	 * Creates y-axis tick data for rendering
-	 *
-	 * @param {Object} options Axis options
-	 * @returns {Object} Axis rendering data
-	 */
-	createYAxis(options = {}) {
-		return createYAxis(this.#scales, this.#dimensions, options)
-	}
-
-	/**
-	 * Creates grid line data for rendering
-	 *
-	 * @param {Object} options Grid options
-	 * @returns {Object} Grid rendering data
-	 */
-	createGrid(options = {}) {
-		return createGrid(this.#scales, this.#dimensions, options)
-	}
-
-	/**
-	 * Creates legend data for rendering
-	 *
-	 * @param {Object} options Legend options
-	 * @returns {Object} Legend rendering data
-	 */
-	createLegend(options = {}) {
-		return createLegend(this.#data, this.#fields, this.#scales, {
-			...options,
-			dimensions: this.#dimensions
-		})
-	}
-
-	/**
-	 * Gets all chart dimensions
-	 *
-	 * @returns {Object} Chart dimensions
-	 */
-	getDimensions() {
-		return { ...this.#dimensions }
-	}
-
-	/**
-	 * Gets all chart scales
-	 *
-	 * @returns {Object} Chart scales
-	 */
-	getScales() {
-		return { ...this.#scales }
-	}
-
-	/**
-	 * Gets the animation duration
-	 *
-	 * @returns {number} Animation duration in ms
-	 */
-	getAnimationDuration() {
-		return this.#options.animationDuration
-	}
-
-	/**
-	 * Gets the data being used
-	 *
-	 * @returns {Array} Chart data
-	 */
-	getData() {
-		return [...this.#data]
-	}
-
-	/**
-	 * Gets the fields configuration
-	 *
-	 * @returns {Object} Fields configuration
-	 */
-	getFields() {
-		return { ...this.#fields }
-	}
-}

package/dist/lib/brewing/legends.svelte.d.ts

@@ -1,48 +0,0 @@
-/**
- * Creates legend data for rendering
- *
- * @param {Array} data - Chart data
- * @param {Object} fields - Field mappings
- * @param {string} fields.color - Color field
- * @param {Object} scales - Chart scales
- * @param {Function} scales.color - Color scale
- * @param {Object} options - Legend options including dimensions
- * @param {Object} options.dimensions - Chart dimensions
- * @param {string} [options.title=''] - Legend title
- * @param {string} [options.align='right'] - Legend alignment ('left', 'center', or 'right')
- * @param {string} [options.shape='rect'] - Legend marker shape ('rect' or 'circle')
- * @param {number} [options.markerSize=10] - Size of legend markers
- * @returns {LegendData} Legend rendering data
- */
-export function createLegend(data: any[], fields: {
-    color: string;
-}, scales: {
-    color: Function;
-}, options: {
-    dimensions: Object;
-    title?: string | undefined;
-    align?: string | undefined;
-    shape?: string | undefined;
-    markerSize?: number | undefined;
-}): LegendData;
-/**
- * Filter data based on legend selection
- *
- * @param {Array} data - Chart data
- * @param {string} colorField - Field used for color mapping
- * @param {Array} selectedValues - Selected legend values
- * @returns {Array} Filtered data
- */
-export function filterByLegend(data: any[], colorField: string, selectedValues: any[]): any[];
-/**
- * Create attributes for legend items
- *
- * @param {LegendItem} item - Legend item
- * @returns {Object} Attributes for the legend item
- */
-export function createLegendItemAttributes(item: LegendItem): Object;
-export type LegendItem = import("./types").LegendItem;
-export type LegendData = import("./types").LegendData;
-export type ScaleFields = import("./types").ScaleFields;
-export type ChartScales = import("./types").ChartScales;
-export type ChartDimensions = import("./types").ChartDimensions;

package/dist/lib/brewing/legends.svelte.js

@@ -1,137 +0,0 @@
-import { SvelteSet } from 'svelte/reactivity'
-import {} from './types.js'
-
-/**
- * @typedef {import('./types').LegendItem} LegendItem
- * @typedef {import('./types').LegendData} LegendData
- * @typedef {import('./types').ScaleFields} ScaleFields
- * @typedef {import('./types').ChartScales} ChartScales
- * @typedef {import('./types').ChartDimensions} ChartDimensions
- */
-
-const LEGEND_DEFAULTS = { title: '', align: 'right', shape: 'rect', markerSize: 10 }
-
-/**
- * Compute the x-position for legend alignment
- * @param {string} align
- * @param {number} innerWidth
- * @param {number} approximateWidth
- * @returns {number}
- */
-function legendX(align, innerWidth, approximateWidth) {
-	if (align === 'right') return innerWidth - approximateWidth
-	if (align === 'center') return (innerWidth - approximateWidth) / 2
-	return 0
-}
-
-/**
- * @param {Array} colorValues
- * @param {Function} colorScale
- * @param {{ shape: string, markerSize: number, titleOffset: number }} style
- * @returns {LegendItem[]}
- */
-function buildLegendItems(colorValues, colorScale, style) {
-	const { shape, markerSize, titleOffset } = style
-	return colorValues.map((value, index) => ({
-		value,
-		color: colorScale(value),
-		y: index * (markerSize + 5) + titleOffset,
-		shape,
-		markerSize
-	}))
-}
-
-/**
- * @param {Array} colorValues
- * @param {number} markerSize
- * @returns {number}
- */
-function approximateLegendWidth(colorValues, markerSize) {
-	return Math.max(...colorValues.map((v) => v.toString().length)) * 8 + markerSize + 10
-}
-
-/**
- * @param {Object} options
- * @returns {{ dimensions: Object, title: string, align: string, shape: string, markerSize: number }}
- */
-function parseLegendOptions(options) {
-	const merged = Object.assign({}, LEGEND_DEFAULTS, options || {})
-	return {
-		dimensions: merged.dimensions,
-		title: merged.title,
-		align: merged.align,
-		shape: merged.shape,
-		markerSize: merged.markerSize
-	}
-}
-
-/**
- * @param {Object|undefined} dimensions
- * @returns {number}
- */
-function innerWidth(dimensions) {
-	return dimensions ? dimensions.innerWidth : 0
-}
-
-/**
- * Creates legend data for rendering
- *
- * @param {Array} data - Chart data
- * @param {Object} fields - Field mappings
- * @param {string} fields.color - Color field
- * @param {Object} scales - Chart scales
- * @param {Function} scales.color - Color scale
- * @param {Object} options - Legend options including dimensions
- * @param {Object} options.dimensions - Chart dimensions
- * @param {string} [options.title=''] - Legend title
- * @param {string} [options.align='right'] - Legend alignment ('left', 'center', or 'right')
- * @param {string} [options.shape='rect'] - Legend marker shape ('rect' or 'circle')
- * @param {number} [options.markerSize=10] - Size of legend markers
- * @returns {LegendData} Legend rendering data
- */
-export function createLegend(data, fields, scales, options) {
-	if (!data || !fields.color || !scales.color) {
-		return { items: [], title: '', transform: 'translate(0, 0)' }
-	}
-
-	const { dimensions, title, align, shape, markerSize } = parseLegendOptions(options)
-	const colorValues = [...new SvelteSet(data.map((d) => d[fields.color]))]
-	const titleOffset = title ? 15 : 0
-	const style = { shape, markerSize, titleOffset }
-	const items = buildLegendItems(colorValues, scales.color, style)
-	const approxWidth = approximateLegendWidth(colorValues, markerSize)
-	const x = legendX(align, innerWidth(dimensions), approxWidth)
-
-	return { items, title, transform: `translate(${x}, 0)` }
-}
-
-/**
- * Filter data based on legend selection
- *
- * @param {Array} data - Chart data
- * @param {string} colorField - Field used for color mapping
- * @param {Array} selectedValues - Selected legend values
- * @returns {Array} Filtered data
- */
-export function filterByLegend(data, colorField, selectedValues) {
-	if (!selectedValues || selectedValues.length === 0) {
-		return data
-	}
-
-	return data.filter((d) => selectedValues.includes(d[colorField]))
-}
-
-/**
- * Create attributes for legend items
- *
- * @param {LegendItem} item - Legend item
- * @returns {Object} Attributes for the legend item
- */
-export function createLegendItemAttributes(item) {
-	return {
-		'data-plot-legend-item': '',
-		transform: `translate(0, ${item.y})`,
-		role: 'img',
-		'aria-label': `Legend item for ${item.value}`
-	}
-}

package/dist/lib/brewing/marks/areas.d.ts

@@ -1,31 +0,0 @@
-/**
- * @param {Object[]} data
- * @param {{ x: string, y: string, fill?: string, pattern?: string }} channels
- *   `fill` is the primary aesthetic — drives grouping and interior color.
- * @param {Function} xScale
- * @param {Function} yScale
- * @param {Map} colors
- * @param {'linear'|'smooth'|'step'} [curve]
- * @param {Map} [patternMap]
- */
-export function buildAreas(data: Object[], channels: {
-    x: string;
-    y: string;
-    fill?: string;
-    pattern?: string;
-}, xScale: Function, yScale: Function, colors: Map<any, any>, curve?: "linear" | "smooth" | "step", patternMap?: Map<any, any>): {
-    d: string | null;
-    fill: any;
-    stroke: string;
-    key: any;
-    colorKey: any;
-    patternKey: any;
-    patternId: string | null;
-}[] | {
-    d: never;
-    fill: any;
-    stroke: string;
-    colorKey: null;
-    patternKey: null;
-    patternId: null;
-}[];

package/dist/lib/brewing/marks/areas.js

@@ -1,72 +0,0 @@
-import { area, curveCatmullRom, curveStep } from 'd3-shape'
-import { toPatternId } from '../patterns.js'
-
-/**
- * @param {Object[]} data
- * @param {{ x: string, y: string, fill?: string, pattern?: string }} channels
- *   `fill` is the primary aesthetic — drives grouping and interior color.
- * @param {Function} xScale
- * @param {Function} yScale
- * @param {Map} colors
- * @param {'linear'|'smooth'|'step'} [curve]
- * @param {Map} [patternMap]
- */
-export function buildAreas(data, channels, xScale, yScale, colors, curve, patternMap) {
-	const { x: xf, y: yf, pattern: pf } = channels
-	const cf = channels.fill // fill is the primary aesthetic for area charts
-	const innerHeight = yScale.range()[0]
-	const xPos = (d) =>
-		typeof xScale.bandwidth === 'function' ? xScale(d[xf]) + xScale.bandwidth() / 2 : xScale(d[xf])
-	const makeGen = () => {
-		const gen = area()
-			.x(xPos)
-			.y0(innerHeight)
-			.y1((d) => yScale(d[yf]))
-		if (curve === 'smooth') gen.curve(curveCatmullRom)
-		else if (curve === 'step') gen.curve(curveStep)
-		return gen
-	}
-	if (!cf) {
-		const colorEntry = colors?.values().next().value ?? { fill: '#888', stroke: '#444' }
-		return [
-			{
-				d: makeGen()(data),
-				fill: colorEntry.fill,
-				stroke: 'none',
-				colorKey: null,
-				patternKey: null,
-				patternId: null
-			}
-		]
-	}
-	const groups = groupBy(data, cf)
-	return [...groups.entries()].map(([key, rows]) => {
-		const colorEntry = colors?.get(key) ?? { fill: '#888', stroke: '#444' }
-		const patternKey = pf ? (pf === cf ? key : rows[0]?.[pf]) : null
-		const patternName =
-			patternKey !== null && patternKey !== undefined ? patternMap?.get(patternKey) : null
-		const compositePatternKey =
-			cf && pf && cf !== pf && patternKey !== null && patternKey !== undefined
-				? `${key}::${patternKey}`
-				: patternKey
-		return {
-			d: makeGen()(rows),
-			fill: colorEntry.fill,
-			stroke: 'none',
-			key,
-			colorKey: key,
-			patternKey,
-			patternId: patternName ? toPatternId(compositePatternKey) : null
-		}
-	})
-}
-
-function groupBy(arr, field) {
-	const map = new Map()
-	for (const item of arr) {
-		const key = item[field]
-		if (!map.has(key)) map.set(key, [])
-		map.get(key).push(item)
-	}
-	return map
-}

package/dist/lib/brewing/marks/bars.d.ts

@@ -1 +0,0 @@
-export function buildBars(data: any, channels: any, xScale: any, yScale: any, colors: any, patternMap: any): any;

package/dist/lib/brewing/marks/bars.js

@@ -1,49 +0,0 @@
-/**
- * @param {Object[]} data
- * @param {{ x: string, y: string, fill?: string, color?: string, pattern?: string }} channels
- *   `fill` drives the bar interior color. `color` drives the border stroke; falls back to fill.
- * @param {import('d3-scale').ScaleBand|import('d3-scale').ScaleLinear} xScale
- * @param {import('d3-scale').ScaleLinear} yScale
- * @param {Map} colors - value→{fill,stroke}
- * @param {Map} [patternMap] - value→patternName
- * @returns {Array}
- */
-import { toPatternId } from '../patterns.js'
-
-export function buildBars(data, channels, xScale, yScale, colors, patternMap) {
-	const { x: xf, y: yf, fill: ff, color: cf, pattern: pf } = channels
-	const barWidth = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 10
-	const innerHeight = yScale.range()[0]
-
-	return data.map((d) => {
-		const xVal = d[xf]
-		const fillKey = ff ? d[ff] : xVal // fill channel drives interior color
-		const strokeKey = cf ? d[cf] : null // color channel drives border; null = no border
-		const colorEntry = colors?.get(fillKey) ?? { fill: '#888', stroke: '#444' }
-		const strokeEntry = colors?.get(strokeKey) ?? colorEntry
-		const patternKey = pf ? d[pf] : null
-		const patternName =
-			patternKey !== null && patternKey !== undefined ? patternMap?.get(patternKey) : null
-		// When fill and pattern are different fields, bars need a composite pattern def id
-		// so each (region, category) pair gets its uniquely colored+textured pattern.
-		const compositePatternKey =
-			ff && pf && ff !== pf && patternKey !== null && patternKey !== undefined
-				? `${d[ff]}::${patternKey}`
-				: patternKey
-		const barX = typeof xScale.bandwidth === 'function' ? xScale(xVal) : xScale(xVal) - barWidth / 2
-		const barY = yScale(d[yf])
-		return {
-			data: d,
-			key: `${xVal}::${fillKey ?? ''}::${patternKey ?? ''}`,
-			x: barX,
-			y: barY,
-			width: barWidth,
-			height: innerHeight - barY,
-			fill: colorEntry.fill,
-			stroke: strokeKey !== null ? strokeEntry.stroke : null,
-			colorKey: fillKey,
-			patternKey,
-			patternId: patternName ? toPatternId(compositePatternKey) : null
-		}
-	})
-}

package/dist/lib/brewing/scales.svelte.d.ts

@@ -1,24 +0,0 @@
-/**
- * Creates scales based on data, fields, and dimensions
- *
- * @param {Array} data - Chart data
- * @param {ScaleFields} fields - Field mappings
- * @param {Object} dimensions - Chart dimensions
- * @param {Object} options - Scale options
- * @param {number} [options.padding=0.2] - Padding for band scales
- * @returns {ChartScales} Chart scales
- */
-export function createScales(data: any[], fields: ScaleFields, dimensions: Object, options?: {
-    padding?: number | undefined;
-}): ChartScales;
-/**
- * Gets the origin coordinates for the axes
- *
- * @param {ChartScales} scales - Chart scales
- * @param {Object} dimensions - Chart dimensions
- * @returns {Object} Origin coordinates
- */
-export function getOrigin(scales: ChartScales, dimensions: Object): Object;
-export type ChartScales = import("./types").ChartScales;
-export type ScaleFields = import("./types").ScaleFields;
-export type ChartDimensions = import("./types").ChartDimensions;

package/dist/lib/brewing/scales.svelte.js

@@ -1,82 +0,0 @@
-import { SvelteSet } from 'svelte/reactivity'
-import { min, max } from 'd3-array'
-import { scaleLinear, scaleOrdinal } from 'd3-scale'
-import { schemeCategory10 } from 'd3-scale-chromatic'
-import {} from './types.js'
-import { buildXScale } from '../xscale.js'
-
-/**
- * @typedef {import('./types').ChartScales} ChartScales
- * @typedef {import('./types').ScaleFields} ScaleFields
- * @typedef {import('./types').ChartDimensions} ChartDimensions
- */
-
-/**
- * @param {Array} data
- * @param {string} colorField
- * @returns {import('d3-scale').ScaleOrdinal}
- */
-function buildColorScale(data, colorField) {
-	const colorValues = [...new SvelteSet(data.map((d) => d[colorField]))]
-	return scaleOrdinal().domain(colorValues).range(schemeCategory10)
-}
-
-/**
- * @param {Array} data
- * @param {string} yField
- * @param {Object} dimensions
- * @returns {import('d3-scale').ScaleContinuousNumeric}
- */
-function buildYScale(data, yField, dimensions) {
-	const yValues = data.map((d) => d[yField])
-	return scaleLinear()
-		.domain([0, max(yValues) * 1.1])
-		.nice()
-		.range([dimensions.innerHeight, 0])
-}
-
-/**
- * @param {Array} data
- * @param {ScaleFields} fields
- * @returns {boolean}
- */
-function hasRequiredFields(data, fields) {
-	return Boolean(data && data.length && fields.x && fields.y)
-}
-
-/**
- * Creates scales based on data, fields, and dimensions
- *
- * @param {Array} data - Chart data
- * @param {ScaleFields} fields - Field mappings
- * @param {Object} dimensions - Chart dimensions
- * @param {Object} options - Scale options
- * @param {number} [options.padding=0.2] - Padding for band scales
- * @returns {ChartScales} Chart scales
- */
-export function createScales(data, fields, dimensions, options = {}) {
-	if (!hasRequiredFields(data, fields)) return { x: null, y: null, color: null }
-
-	const padding = options.padding ?? 0.2
-	const xValues = data.map((d) => d[fields.x])
-
-	return {
-		x: buildXScale(xValues, dimensions, padding),
-		y: buildYScale(data, fields.y, dimensions),
-		color: fields.color ? buildColorScale(data, fields.color) : null
-	}
-}
-
-/**
- * Gets the origin coordinates for the axes
- *
- * @param {ChartScales} scales - Chart scales
- * @param {Object} dimensions - Chart dimensions
- * @returns {Object} Origin coordinates
- */
-export function getOrigin(scales, dimensions) {
-	return {
-		x: scales.y ? scales.y(0) : dimensions.innerHeight,
-		y: scales.x ? (scales.x.ticks ? scales.x(Math.max(0, min(scales.x.domain()))) : 0) : 0
-	}
-}

package/dist/lib/context.d.ts

@@ -1,13 +0,0 @@
-/**
- * Creates chart context and provides it to child components
- *
- * @param {Object} options Initial chart options
- * @returns {Object} Chart context with all stores and methods
- */
-export function createChartContext(options?: Object): Object;
-/**
- * Gets chart context provided by parent component
- *
- * @returns {Object} Chart context
- */
-export function getChartContext(): Object;