@rokkit/chart 1.3.7 → 1.3.9

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

@@ -1,277 +0,0 @@
-import { SvelteMap, SvelteSet } from 'svelte/reactivity'
-import { distinct, assignColors } from './colors.js'
-import { assignPatterns, toPatternId, PATTERN_ORDER } from './patterns.js'
-import { assignSymbols } from './symbols.js'
-import { buildXScale, buildYScale, buildSizeScale } from './scales.js'
-import { buildBars } from './marks/bars.js'
-import { buildLines } from './marks/lines.js'
-import { buildAreas } from './marks/areas.js'
-import { buildArcs } from './marks/arcs.js'
-import { buildPoints } from './marks/points.js'
-
-const DEFAULT_MARGIN = { top: 20, right: 20, bottom: 40, left: 50 }
-
-/**
- * Groups aesthetic channel mappings by field name, merging aesthetics that
- * share the same field into one legend section.
- *
- * @param {{ fill?: string, color?: string, pattern?: string, symbol?: string }} channels
- *   `fill` takes precedence over `color` for polygon charts (bars, areas, pie slices).
- * @param {Map<unknown, {fill:string, stroke:string}>} colorMap
- * @param {Map<unknown, string>} patternMap
- * @param {Map<unknown, string>} symbolMap
- * @returns {{ field: string, items: { label: string, fill: string|null, stroke: string|null, patternId: string|null, shape: string|null }[] }[]}
- */
-function addAesthetic(byField, field, aesthetic, keys) {
-	if (byField.has(field)) {
-		byField.get(field).aesthetics.push(aesthetic)
-	} else {
-		byField.set(field, { aesthetics: [aesthetic], keys })
-	}
-}
-
-function buildLegendItem(key, aesthetics, colorMap, patternMap, symbolMap) {
-	const hasColor = aesthetics.includes('color')
-	return {
-		label: String(key),
-		fill: hasColor ? (colorMap.get(key)?.fill ?? null) : null,
-		stroke: hasColor ? (colorMap.get(key)?.stroke ?? null) : null,
-		patternId: aesthetics.includes('pattern') && patternMap.has(key) ? toPatternId(key) : null,
-		shape: aesthetics.includes('symbol') ? (symbolMap.get(key) ?? 'circle') : null
-	}
-}
-
-export function buildLegendGroups(channels, colorMap, patternMap, symbolMap) {
-	const cf = channels.fill ?? channels.color
-	const { pattern: pf, symbol: sf } = channels
-	const byField = new SvelteMap()
-
-	if (cf) byField.set(cf, { aesthetics: ['color'], keys: [...colorMap.keys()] })
-	if (pf) addAesthetic(byField, pf, 'pattern', [...patternMap.keys()])
-	if (sf) addAesthetic(byField, sf, 'symbol', [...symbolMap.keys()])
-
-	return [...byField.entries()]
-		.map(([field, { aesthetics, keys }]) => ({
-			field,
-			items: keys
-				.filter((k) => k !== null && k !== undefined)
-				.map((key) => buildLegendItem(key, aesthetics, colorMap, patternMap, symbolMap))
-		}))
-		.filter((group) => group.items.length > 0)
-}
-
-export class ChartBrewer {
-	#rawData = $state([])
-	#channels = $state({})
-	#width = $state(600)
-	#height = $state(400)
-	#mode = $state('light')
-	#margin = $state(DEFAULT_MARGIN)
-	#layers = $state([])
-	#curve = $state(/** @type {'linear'|'smooth'|'step'|undefined} */ (undefined))
-	#stat = $state('identity')
-
-	/**
-	 * Override in subclasses to apply stat aggregation.
-	 * @param {Object[]} data
-	 * @param {Object} channels
-	 * @param {string|Function} stat
-	 * @returns {Object[]}
-	 */
-	transform(data, _channels, _stat) {
-		return data
-	}
-
-	/** Aggregated data — all derived marks read this, not #rawData */
-	processedData = $derived(this.transform(this.#rawData, this.#channels, this.#stat))
-
-	/** Exposes channels to subclasses for use in their own $derived properties */
-	get channels() {
-		return this.#channels
-	}
-
-	// Maps are built from rawData so the legend always reflects the full set of
-	// original values — independent of whichever stat aggregation is applied.
-	// e.g. pattern=quarter with stat=sum still shows all 8 quarters in the legend.
-
-	/** @type {Map<unknown, {fill:string,stroke:string}>} */
-	colorMap = $derived(
-		(this.#channels.fill ?? this.#channels.color)
-			? assignColors(
-					distinct(this.#rawData, this.#channels.fill ?? this.#channels.color),
-					this.#mode
-				)
-			: new SvelteMap()
-	)
-
-	/** @type {Map<unknown, string>} */
-	patternMap = $derived(
-		this.#channels.pattern
-			? assignPatterns(distinct(this.#rawData, this.#channels.pattern))
-			: new SvelteMap()
-	)
-
-	/**
-	 * Unified pattern defs for ChartPatternDefs.
-	 * When fill and pattern map the same field, pattern key = color key (simple case).
-	 * When they differ, each unique (fillKey, patternKey) pair gets its own pattern def
-	 * so bars/areas can have distinct colors per region AND distinct textures per category.
-	 * @type {Array<{ id: string, name: string, fill: string, stroke: string }>}
-	 */
-	patternDefs = $derived(
-		(() => {
-			const pf = this.#channels.pattern
-			const ff = this.#channels.fill ?? this.#channels.color
-			if (!pf || this.patternMap.size === 0) return []
-			if (!ff || pf === ff) {
-				// Same field: pattern key = fill key — simple 1:1 lookup
-				return Array.from(this.patternMap.entries()).map(([key, name]) => {
-					const color = this.colorMap.get(key) ?? { fill: '#ddd', stroke: '#666' }
-					return { id: toPatternId(key), name, fill: color.fill, stroke: color.stroke }
-				})
-			}
-			// Different fields: need two sets of defs in the SVG:
-			// 1. Simple defs (neutral background) — referenced by legend swatches via toPatternId(patternKey)
-			// 2. Composite defs (fill-colored background) — referenced by bars via toPatternId(fillKey::patternKey)
-			const defs = []
-			for (const [pk, name] of this.patternMap.entries()) {
-				defs.push({ id: toPatternId(pk), name, fill: '#ddd', stroke: '#666' })
-			}
-			const seenComposite = new SvelteSet()
-			for (const d of this.processedData) {
-				const fk = d[ff]
-				const pk = d[pf]
-				if (pk === null || pk === undefined) continue
-				const compositeKey = `${fk}::${pk}`
-				if (seenComposite.has(compositeKey)) continue
-				seenComposite.add(compositeKey)
-				const name = this.patternMap.get(pk) ?? PATTERN_ORDER[0]
-				const color = this.colorMap.get(fk) ?? { fill: '#ddd', stroke: '#666' }
-				defs.push({ id: toPatternId(compositeKey), name, fill: color.fill, stroke: color.stroke })
-			}
-			return defs
-		})()
-	)
-
-	/** @type {Map<unknown, string>} */
-	symbolMap = $derived(
-		this.#channels.symbol
-			? assignSymbols(distinct(this.#rawData, this.#channels.symbol))
-			: new SvelteMap()
-	)
-
-	get innerWidth() {
-		return this.#width - this.#margin.left - this.#margin.right
-	}
-	get innerHeight() {
-		return this.#height - this.#margin.top - this.#margin.bottom
-	}
-
-	xScale = $derived(
-		this.#channels.x ? buildXScale(this.processedData, this.#channels.x, this.innerWidth) : null
-	)
-
-	yScale = $derived(
-		this.#channels.y
-			? buildYScale(this.processedData, this.#channels.y, this.innerHeight, this.#layers)
-			: null
-	)
-
-	sizeScale = $derived(
-		this.#channels.size ? buildSizeScale(this.processedData, this.#channels.size) : null
-	)
-
-	bars = $derived(
-		this.xScale && this.yScale
-			? buildBars(
-					this.processedData,
-					this.#channels,
-					this.xScale,
-					this.yScale,
-					this.colorMap,
-					this.patternMap
-				)
-			: []
-	)
-
-	lines = $derived(
-		this.xScale && this.yScale
-			? buildLines(
-					this.processedData,
-					this.#channels,
-					this.xScale,
-					this.yScale,
-					this.colorMap,
-					this.#curve
-				)
-			: []
-	)
-
-	areas = $derived(
-		this.xScale && this.yScale
-			? buildAreas(
-					this.processedData,
-					this.#channels,
-					this.xScale,
-					this.yScale,
-					this.colorMap,
-					this.#curve,
-					this.patternMap
-				)
-			: []
-	)
-
-	arcs = $derived(
-		this.#channels.y
-			? buildArcs(this.processedData, this.#channels, this.colorMap, this.#width, this.#height)
-			: []
-	)
-
-	points = $derived(
-		this.xScale && this.yScale
-			? buildPoints(
-					this.processedData,
-					this.#channels,
-					this.xScale,
-					this.yScale,
-					this.colorMap,
-					this.sizeScale,
-					this.symbolMap
-				)
-			: []
-	)
-
-	legendGroups = $derived(
-		buildLegendGroups(this.#channels, this.colorMap, this.patternMap, this.symbolMap)
-	)
-
-	get margin() {
-		return this.#margin
-	}
-	get width() {
-		return this.#width
-	}
-	get height() {
-		return this.#height
-	}
-	get mode() {
-		return this.#mode
-	}
-
-	/**
-	 * @param {{ data?: Object[], channels?: Object, width?: number, height?: number, mode?: string, margin?: Object, layers?: Object[], curve?: string, stat?: string|Function }} opts
-	 *   Supported channel keys: `x`, `y`, `fill`, `color`, `pattern`, `symbol`, `size`, `label`.
-	 *   `frame` is reserved for future animation use (no-op).
-	 */
-	update(opts = {}) {
-		if (opts.data !== undefined) this.#rawData = opts.data
-		if (opts.channels !== undefined) this.#channels = opts.channels
-		if (opts.width !== undefined) this.#width = opts.width
-		if (opts.height !== undefined) this.#height = opts.height
-		if (opts.mode !== undefined) this.#mode = opts.mode
-		if (opts.margin !== undefined) this.#margin = { ...DEFAULT_MARGIN, ...opts.margin }
-		if (opts.layers !== undefined) this.#layers = opts.layers
-		if (opts.curve !== undefined) this.#curve = opts.curve
-		if (opts.stat !== undefined) this.#stat = opts.stat
-	}
-}

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

@@ -1,35 +0,0 @@
-/**
- * Creates chart dimensions based on width, height and margins
- *
- * @param {number} width - Total chart width
- * @param {number} height - Total chart height
- * @param {ChartMargin} margin - Chart margins
- * @returns {ChartDimensions} Chart dimensions
- */
-export function createDimensions(width?: number, height?: number, margin?: ChartMargin): ChartDimensions;
-/**
- * Updates existing dimensions with new values
- *
- * @param {ChartDimensions} dimensions - Current dimensions
- * @param {Object} updates - Values to update
- * @param {number} [updates.width] - New width
- * @param {number} [updates.height] - New height
- * @param {ChartMargin} [updates.margin] - New margin
- * @returns {ChartDimensions} Updated dimensions
- */
-export function updateDimensions(dimensions: ChartDimensions, updates?: {
-    width?: number | undefined;
-    height?: number | undefined;
-    margin?: import("./types.js").ChartMargin | undefined;
-}): ChartDimensions;
-/**
- * @typedef {import('./types').ChartMargin} ChartMargin
- * @typedef {import('./types').ChartDimensions} ChartDimensions
- */
-/**
- * Default chart margin
- * @type {ChartMargin}
- */
-export const DEFAULT_MARGIN: ChartMargin;
-export type ChartMargin = import("./types").ChartMargin;
-export type ChartDimensions = import("./types").ChartDimensions;

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

@@ -1,56 +0,0 @@
-import {} from './types.js'
-
-/**
- * @typedef {import('./types').ChartMargin} ChartMargin
- * @typedef {import('./types').ChartDimensions} ChartDimensions
- */
-
-/**
- * Default chart margin
- * @type {ChartMargin}
- */
-export const DEFAULT_MARGIN = { top: 20, right: 30, bottom: 40, left: 50 }
-
-/**
- * Creates chart dimensions based on width, height and margins
- *
- * @param {number} width - Total chart width
- * @param {number} height - Total chart height
- * @param {ChartMargin} margin - Chart margins
- * @returns {ChartDimensions} Chart dimensions
- */
-export function createDimensions(width = 600, height = 400, margin = DEFAULT_MARGIN) {
-	return {
-		width,
-		height,
-		margin: { ...margin },
-		innerWidth: width - margin.left - margin.right,
-		innerHeight: height - margin.top - margin.bottom
-	}
-}
-
-/**
- * Updates existing dimensions with new values
- *
- * @param {ChartDimensions} dimensions - Current dimensions
- * @param {Object} updates - Values to update
- * @param {number} [updates.width] - New width
- * @param {number} [updates.height] - New height
- * @param {ChartMargin} [updates.margin] - New margin
- * @returns {ChartDimensions} Updated dimensions
- */
-export function updateDimensions(dimensions, updates = {}) {
-	const newDimensions = { ...dimensions }
-
-	if (updates.width !== undefined) newDimensions.width = updates.width
-	if (updates.height !== undefined) newDimensions.height = updates.height
-	if (updates.margin !== undefined) newDimensions.margin = { ...updates.margin }
-
-	// Recalculate inner dimensions
-	newDimensions.innerWidth =
-		newDimensions.width - newDimensions.margin.left - newDimensions.margin.right
-	newDimensions.innerHeight =
-		newDimensions.height - newDimensions.margin.top - newDimensions.margin.bottom
-
-	return newDimensions
-}

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

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

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 }
-	}
-}