@rokkit/chart 1.3.8 → 1.3.9

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

@@ -1,124 +0,0 @@
-export function buildLegendGroups(channels: any, colorMap: any, patternMap: any, symbolMap: any): {
-    field: any;
-    items: any;
-}[];
-export class ChartBrewer {
-    /**
-     * Override in subclasses to apply stat aggregation.
-     * @param {Object[]} data
-     * @param {Object} channels
-     * @param {string|Function} stat
-     * @returns {Object[]}
-     */
-    transform(data: Object[], _channels: any, _stat: any): Object[];
-    /** Aggregated data — all derived marks read this, not #rawData */
-    processedData: Object[];
-    /** Exposes channels to subclasses for use in their own $derived properties */
-    get channels(): {};
-    /** @type {Map<unknown, {fill:string,stroke:string}>} */
-    colorMap: Map<unknown, {
-        fill: string;
-        stroke: string;
-    }>;
-    /** @type {Map<unknown, string>} */
-    patternMap: Map<unknown, string>;
-    /**
-     * 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: Array<{
-        id: string;
-        name: string;
-        fill: string;
-        stroke: string;
-    }>;
-    /** @type {Map<unknown, string>} */
-    symbolMap: Map<unknown, string>;
-    get innerWidth(): number;
-    get innerHeight(): number;
-    xScale: import("d3-scale").ScaleBand<string> | (number[] & import("d3-scale").ScaleLinear<number, number, never>) | null;
-    yScale: import("d3-scale").ScaleLinear<number, number, never> | null;
-    sizeScale: import("d3-scale").ScalePower<number, number, never> | null;
-    bars: any;
-    lines: {
-        d: string | null;
-        fill: string;
-        stroke: string;
-        points: {
-            x: number;
-            y: number;
-            data: Record<string, unknown>;
-            i: number;
-        }[];
-        key?: unknown;
-    }[];
-    areas: {
-        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;
-    }[];
-    arcs: {
-        d: string | null;
-        fill: string;
-        stroke: string;
-        key: unknown;
-        patternId: string | null;
-        pct: number;
-        centroid: [number, number];
-        data: Record<string, unknown>;
-    }[];
-    points: {
-        data: Record<string, unknown>;
-        cx: number;
-        cy: number;
-        r: number;
-        fill: string;
-        stroke: string;
-        symbolPath: string | null;
-        key: unknown;
-    }[];
-    legendGroups: {
-        field: any;
-        items: any;
-    }[];
-    get margin(): {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    };
-    get width(): number;
-    get height(): number;
-    get mode(): string;
-    /**
-     * @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?: {
-        data?: Object[];
-        channels?: Object;
-        width?: number;
-        height?: number;
-        mode?: string;
-        margin?: Object;
-        layers?: Object[];
-        curve?: string;
-        stat?: string | Function;
-    }): void;
-    #private;
-}

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