@rokkit/chart 1.3.7 → 1.3.9

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;

package/dist/lib/context.js

@@ -1,131 +0,0 @@
-import { getContext, setContext } from 'svelte'
-import { writable, derived } from 'svelte/store'
-import { scaleBand, scaleLinear, scaleOrdinal } from 'd3-scale'
-import { schemeCategory10 } from 'd3-scale-chromatic'
-import { max } from 'd3-array'
-
-const CHART_CONTEXT = 'chart-context'
-
-const DEFAULT_OPTIONS = {
-	width: 600,
-	height: 400,
-	margin: { top: 20, right: 30, bottom: 40, left: 50 },
-	padding: { top: 0, right: 0, bottom: 0, left: 0 },
-	responsive: true,
-	animationDuration: 300,
-	data: []
-}
-
-/**
- * @param {Object} config
- * @returns {import('svelte/store').Writable}
- */
-function createDimensionsStore(config) {
-	return writable({
-		width: config.width,
-		height: config.height,
-		margin: { ...config.margin },
-		padding: { ...config.padding }
-	})
-}
-
-/**
- * @param {import('svelte/store').Writable} dimensions
- * @returns {import('svelte/store').Readable}
- */
-function createInnerDimensions(dimensions) {
-	return derived(dimensions, ($d) => ({
-		width: $d.width - $d.margin.left - $d.margin.right - $d.padding.left - $d.padding.right,
-		height: $d.height - $d.margin.top - $d.margin.bottom - $d.padding.top - $d.padding.bottom
-	}))
-}
-
-/**
- * @param {import('svelte/store').Writable} plots
- * @returns {(plot: unknown) => () => void}
- */
-function makeAddPlot(plots) {
-	return function addPlot(plot) {
-		plots.update((currentPlots) => [...currentPlots, plot])
-		return () => {
-			plots.update((currentPlots) => currentPlots.filter((p) => p !== plot))
-		}
-	}
-}
-
-/**
- * @param {import('svelte/store').Writable} data
- * @param {import('svelte/store').Readable} innerDimensions
- * @returns {(xKey: string, yKey: string, colorKey?: string|null) => import('svelte/store').Readable}
- */
-function makeUpdateScales(data, innerDimensions) {
-	return function updateScales(xKey, yKey, colorKey = null) {
-		return derived([data, innerDimensions], ([$data, $innerDimensions]) => {
-			if (!$data || $data.length === 0) return null
-
-			const xScale = scaleBand()
-				.domain($data.map((d) => d[xKey]))
-				.range([0, $innerDimensions.width])
-				.padding(0.2)
-
-			const yScale = scaleLinear()
-				.domain([0, max($data, (d) => d[yKey])])
-				.nice()
-				.range([$innerDimensions.height, 0])
-
-			let colorScale = null
-			if (colorKey) {
-				const uniqueCategories = [...new Set($data.map((d) => d[colorKey]))]
-				colorScale = scaleOrdinal().domain(uniqueCategories).range(schemeCategory10)
-			}
-
-			return { xScale, yScale, colorScale }
-		})
-	}
-}
-
-/**
- * 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 = {}) {
-	const config = { ...DEFAULT_OPTIONS, ...options }
-
-	const dimensions = createDimensionsStore(config)
-	const data = writable(config.data)
-	const scales = writable({})
-	const innerDimensions = createInnerDimensions(dimensions)
-	const plots = writable([])
-	const axes = writable({ x: null, y: null })
-	const legend = writable({ enabled: false, items: [] })
-
-	const addPlot = makeAddPlot(plots)
-	const updateScales = makeUpdateScales(data, innerDimensions)
-
-	const chartContext = {
-		dimensions,
-		innerDimensions,
-		data,
-		scales,
-		plots,
-		axes,
-		legend,
-		addPlot,
-		updateScales
-	}
-
-	setContext(CHART_CONTEXT, chartContext)
-
-	return chartContext
-}
-
-/**
- * Gets chart context provided by parent component
- *
- * @returns {Object} Chart context
- */
-export function getChartContext() {
-	return getContext(CHART_CONTEXT)
-}