@rokkit/chart 1.0.0-next.16 → 1.0.0-next.160

package/src/geoms/lib/bars.js

@@ -0,0 +1,223 @@
+import { scaleBand } from 'd3-scale'
+import { stack } from 'd3-shape'
+import { toPatternId } from '../../lib/brewing/patterns.js'
+import { isLiteralColor } from '../../lib/brewing/colors.js'
+
+/**
+ * Returns a band scale suitable for bar x-positioning.
+ * When xScale is already a band scale, returns it unchanged.
+ * When xScale is a linear scale (numeric x field like year/month),
+ * derives a band scale from the distinct values in the data.
+ */
+function ensureBandX(xScale, data, xField) {
+	if (typeof xScale?.bandwidth === 'function') return xScale
+	const [r0, r1] = xScale.range()
+	const domain = [...new Set(data.map((d) => d[xField]))]
+	return scaleBand().domain(domain).range([r0, r1]).padding(0.2)
+}
+
+/**
+ * Returns the sub-band fields: distinct non-x fields among [color, pattern].
+ * These are the fields that cause multiple bars within a single x-band.
+ */
+function subBandFields(channels) {
+	const { x: xf, color: cf, pattern: pf } = channels
+	const seen = new Set()
+	const out = []
+	for (const f of [cf, pf]) {
+		if (f && f !== xf && !seen.has(f) && !isLiteralColor(f)) {
+			seen.add(f)
+			out.push(f)
+		}
+	}
+	return out
+}
+
+export function buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns) {
+	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+
+	const bandScale = ensureBandX(xScale, data, xf)
+
+	// Sub-banding: only fields that differ from x drive grouping within a band
+	const subFields = subBandFields(channels)
+	const getSubKey = (d) => subFields.map((f) => String(d[f])).join('::')
+	const subDomain = subFields.length > 0 ? [...new Set(data.map(getSubKey))] : []
+	const subScale =
+		subDomain.length > 1
+			? scaleBand().domain(subDomain).range([0, bandScale.bandwidth()]).padding(0.05)
+			: null
+
+	// Baseline for bars: at y=0 when domain spans zero (supports negative bars),
+	// otherwise at the bottom of the chart area.
+	const yDomain = typeof yScale.bandwidth !== 'function' ? yScale.domain?.() : null
+	const baseline =
+		yDomain && yDomain[0] <= 0 && yDomain[yDomain.length - 1] >= 0
+			? (yScale(0) ?? innerHeight)
+			: innerHeight
+
+	return data.map((d, i) => {
+		const xVal = d[xf]
+		const colorKey = cf ? d[cf] : null
+		const patternKey = pf ? d[pf] : null
+		const subKey = getSubKey(d)
+
+		const colorEntry = colors?.get(colorKey) ??
+			colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+		const patternId =
+			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+				? toPatternId(String(patternKey))
+				: null
+
+		const bandX = bandScale(xVal) ?? 0
+		const subX = subScale && subKey ? (subScale(subKey) ?? 0) : 0
+		const barX = bandX + subX
+		const barWidth = subScale ? subScale.bandwidth() : bandScale.bandwidth()
+		const barY = yScale(d[yf]) ?? baseline
+
+		return {
+			data: d,
+			key: `${String(xVal)}::${subKey}::${i}`,
+			x: barX,
+			y: Math.min(barY, baseline),
+			width: barWidth,
+			height: Math.abs(baseline - barY),
+			fill: colorEntry.fill,
+			stroke: colorEntry.stroke,
+			patternId
+		}
+	})
+}
+
+export function buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns) {
+	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+
+	const bandScale = ensureBandX(xScale, data, xf)
+
+	// Stack dimension: first non-x grouping field (prefer pattern, then color)
+	const subFields = subBandFields(channels)
+	if (subFields.length === 0) {
+		return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+	}
+	const stackField = subFields[0]
+
+	const xCategories = [...new Set(data.map((d) => d[xf]))]
+	const stackCategories = [...new Set(data.map((d) => d[stackField]))]
+
+	const lookup = new Map()
+	for (const d of data) {
+		if (!lookup.has(d[xf])) lookup.set(d[xf], {})
+		lookup.get(d[xf])[d[stackField]] = Number(d[yf])
+	}
+
+	const wide = xCategories.map((xVal) => {
+		const row = { [xf]: xVal }
+		for (const sk of stackCategories) row[sk] = lookup.get(xVal)?.[sk] ?? 0
+		return row
+	})
+
+	const stackGen = stack().keys(stackCategories)
+	const layers = stackGen(wide)
+
+	const bars = []
+	for (const layer of layers) {
+		const stackKey = layer.key
+
+		for (const point of layer) {
+			const [y0, y1] = point
+			const xVal = point.data[xf]
+
+			// Color lookup: cf may equal xf (= xVal) or stackField (= stackKey)
+			const colorKey = cf ? (cf === xf ? xVal : cf === stackField ? stackKey : null) : null
+			const colorEntry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#888' }
+
+			// Pattern lookup: pf may equal xf (= xVal) or stackField (= stackKey)
+			const patternKey = pf ? (pf === xf ? xVal : pf === stackField ? stackKey : null) : null
+			const patternId =
+				patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+					? toPatternId(String(patternKey))
+					: null
+
+			bars.push({
+				data: point.data,
+				key: `${String(xVal)}::${String(stackKey)}`,
+				x: bandScale(xVal) ?? 0,
+				y: yScale(y1),
+				width: bandScale.bandwidth(),
+				height: yScale(y0) - yScale(y1),
+				fill: colorEntry.fill,
+				stroke: colorEntry.stroke,
+				patternId
+			})
+		}
+	}
+	return bars
+}
+
+export function buildHorizontalBars(data, channels, xScale, yScale, colors, _innerHeight) {
+	const { x: xf, y: yf, color: cf } = channels
+	const isBand = typeof yScale?.bandwidth === 'function'
+
+	if (!isBand) {
+		// Linear y-scale: rank-based bar chart race.
+		// Each row has a numeric _rank that tweens smoothly between frames.
+		// No sub-grouping — each rank position holds exactly one entity.
+		const [r0, r1] = yScale.range() // [innerHeight, 0]
+		const [d0, d1] = yScale.domain() // [0, N-1]
+		const step = Math.max(Math.abs(r0 - r1) / Math.max(d1 - d0, 1), 1)
+		const barH = step * 0.9
+
+		return data.map((d) => {
+			const rankVal = Number(d[yf])
+			const colorKey = cf ? d[cf] : null
+			const colorEntry =
+				colors?.get(colorKey) ??
+				colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+
+			const centerY = yScale(rankVal) ?? 0
+			return {
+				data: d,
+				// Key by entity name (_entity) so Svelte reuses elements as rank tweens
+				key: `${String(d._entity ?? d[yf])}::${String(colorKey ?? '')}`,
+				x: 0,
+				y: centerY - barH / 2,
+				width: xScale(d[xf]) ?? 0,
+				height: barH,
+				fill: colorEntry.fill,
+				stroke: colorEntry.stroke,
+				patternId: null
+			}
+		})
+	}
+
+	// Band scale: standard grouped horizontal bars.
+	// Only create sub-bands when multiple entities share the same y-band (true grouping).
+	const yVals = new Set(data.map((d) => d[yf]))
+	const colorKeys = cf && !isLiteralColor(cf) ? [...new Set(data.map((d) => d[cf]))] : []
+	const hasSubBands = colorKeys.length > 1 && data.length > yVals.size
+	const subScale = hasSubBands
+		? scaleBand().domain(colorKeys).range([0, yScale.bandwidth()]).padding(0.05)
+		: null
+
+	return data.map((d) => {
+		const yVal = d[yf]
+		const colorKey = cf ? d[cf] : null
+		const colorEntry =
+			colors?.get(colorKey) ??
+			colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+
+		const bandY = yScale(yVal) ?? 0
+		const subY = subScale ? (subScale(colorKey) ?? 0) : 0
+
+		return {
+			data: d,
+			key: `${String(yVal)}::${String(colorKey ?? '')}`,
+			x: 0,
+			y: bandY + subY,
+			width: xScale(d[xf]) ?? 0,
+			height: subScale ? subScale.bandwidth() : yScale.bandwidth(),
+			fill: colorEntry.fill,
+			stroke: colorEntry.stroke,
+			patternId: null
+		}
+	})
+}

package/src/index.js

@@ -1,16 +1,74 @@
-// export { aes } from './lib/aes'
-// export { timelapse } from './lib/timelapse'
-// export { axisTicks } from './lib/axis'
-export { timer, elapsed } from './lib/timer'
-// export { default as Chart } from './chart/Chart.svelte'
-// export { default as Axis } from './chart/Axis.svelte'
-export { default as Swatch } from './chart/Swatch.svelte'
-// export { default as AxisTicks } from './chart/AxisTicks.svelte'
-// export { default as AxisGrid } from './chart/AxisGrid.svelte'
-// export { default as AxisLabels } from './chart/AxisLabels.svelte'
-export { default as BarPlot } from './plots/BarPlot.svelte'
-export { default as LinePlot } from './plots/LinePlot.svelte'
-export { default as BoxPlot } from './plots/BoxPlot.svelte'
-export { default as ViolinPlot } from './plots/ViolinPlot.svelte'
-export { default as ScatterPlot } from './plots/ScatterPlot.svelte'
-export * from './components/lib'
+import Root from './Plot/Root.svelte'
+import Axis from './Plot/Axis.svelte'
+import Bar from './Plot/Bar.svelte'
+import Grid from './Plot/Grid.svelte'
+import Legend from './Plot/Legend.svelte'
+import Line from './Plot/Line.svelte'
+import Area from './Plot/Area.svelte'
+import Point from './Plot/Point.svelte'
+import Arc from './Plot/Arc.svelte'
+
+// Composable Plot primitives — use as <Plot.Root>, <Plot.Axis>, <Plot.Bar>, etc.
+export const Plot = {
+	Root,
+	Axis,
+	Bar,
+	Grid,
+	Legend,
+	Line,
+	Area,
+	Point,
+	Arc
+}
+
+/** @deprecated Use Plot instead */
+export const PlotLayers = Plot
+
+// New Plot system
+export { default as PlotChart } from './Plot.svelte'
+export { default as ChartProvider } from './ChartProvider.svelte'
+export { createChartPreset, defaultPreset } from './lib/preset.js'
+
+// Facets and Animation
+export { default as FacetPlot } from './FacetPlot.svelte'
+export { default as AnimatedPlot } from './AnimatedPlot.svelte'
+
+// Geom components (for declarative use inside PlotChart)
+export { default as GeomBar } from './geoms/Bar.svelte'
+export { default as GeomLine } from './geoms/Line.svelte'
+export { default as GeomArea } from './geoms/Area.svelte'
+export { default as GeomPoint } from './geoms/Point.svelte'
+export { default as GeomArc } from './geoms/Arc.svelte'
+export { default as GeomBox } from './geoms/Box.svelte'
+export { default as GeomViolin } from './geoms/Violin.svelte'
+
+// Export standalone components
+export { default as Chart } from './Chart.svelte'
+export { default as Sparkline } from './Sparkline.svelte'
+export { default as BarChart } from './charts/BarChart.svelte'
+export { default as LineChart } from './charts/LineChart.svelte'
+export { default as AreaChart } from './charts/AreaChart.svelte'
+export { default as PieChart } from './charts/PieChart.svelte'
+export { default as ScatterPlot } from './charts/ScatterPlot.svelte'
+export { default as BoxPlot } from './charts/BoxPlot.svelte'
+export { default as ViolinPlot } from './charts/ViolinPlot.svelte'
+export { default as BubbleChart } from './charts/BubbleChart.svelte'
+
+// Export state and types
+export { PlotState } from './PlotState.svelte.js'
+
+// Export utilities
+export { ChartBrewer } from './lib/brewing/index.svelte.js'
+export * from './lib/brewing/index.svelte.js'
+export { CartesianBrewer } from './lib/brewing/CartesianBrewer.svelte.js'
+export { PieBrewer } from './lib/brewing/PieBrewer.svelte.js'
+export { QuartileBrewer } from './lib/brewing/QuartileBrewer.svelte.js'
+export { BoxBrewer } from './lib/brewing/BoxBrewer.svelte.js'
+export { ViolinBrewer } from './lib/brewing/ViolinBrewer.svelte.js'
+
+// CrossFilter system
+export { createCrossFilter } from './crossfilter/createCrossFilter.svelte.js'
+export { default as CrossFilter } from './crossfilter/CrossFilter.svelte'
+export { default as FilterBar } from './crossfilter/FilterBar.svelte'
+export { default as FilterSlider } from './crossfilter/FilterSlider.svelte'
+export { default as FilterHistogram } from './crossfilter/FilterHistogram.svelte'

package/src/lib/brewer.js

@@ -0,0 +1,25 @@
+/**
+ * Get fill patterns for a set of values
+ *
+ * @param {Array} values - Array of values
+ * @param {Object} swatch - Object with keys for color, gray, and pattern
+ * @param {Boolean} gray - Boolean to determine if gray or color
+ * @returns {Object} - Object with keys for pattern and color
+ */
+export function getFillPatterns(values, swatch, gray = false) {
+	const colors = gray ? swatch.keys.gray : swatch.keys.color
+	const max_colors = colors.length
+	const max_patterns = swatch.keys.pattern.length
+
+	const mix = values
+		.map((value, index) => ({
+			[value]: {
+				pattern: swatch.keys.pattern[index % max_patterns],
+				color: colors[index % max_colors]
+			}
+		}))
+		.reduce((acc, current) => ({ ...acc, ...current }), {})
+	return mix
+}
+
+// export function getStrokePatterns() {}

package/src/lib/brewing/BoxBrewer.svelte.js

@@ -0,0 +1,14 @@
+import { QuartileBrewer } from './QuartileBrewer.svelte.js'
+import { buildBoxes } from './marks/boxes.js'
+
+/**
+ * Brewer for box plots.
+ * fill = box interior color, color = whisker/outline stroke.
+ */
+export class BoxBrewer extends QuartileBrewer {
+	boxes = $derived(
+		this.xScale && this.yScale
+			? buildBoxes(this.processedData, this.channels, this.xScale, this.yScale, this.colorMap)
+			: []
+	)
+}

package/src/lib/brewing/CartesianBrewer.svelte.js

@@ -0,0 +1,21 @@
+import { SvelteSet } from 'svelte/reactivity'
+import { ChartBrewer } from './brewer.svelte.js'
+import { applyAggregate } from './stats.js'
+
+/**
+ * Brewer for cartesian charts (Bar, Line, Area).
+ * Groups by x (and fill/color if set) and applies the given stat.
+ */
+export class CartesianBrewer extends ChartBrewer {
+	transform(data, channels, stat) {
+		if (stat === 'identity' || !channels.x || !channels.y) return data
+		// Group by all mapped aesthetic dimensions so they survive aggregation.
+		// e.g. x=region, fill=region, pattern=quarter → by=['region','quarter']
+		const by = [
+			...new SvelteSet(
+				[channels.x, channels.fill, channels.color, channels.pattern].filter(Boolean)
+			)
+		]
+		return applyAggregate(data, { by, value: channels.y, stat })
+	}
+}

package/src/lib/brewing/PieBrewer.svelte.js

@@ -0,0 +1,14 @@
+import { ChartBrewer } from './brewer.svelte.js'
+import { applyAggregate } from './stats.js'
+
+/**
+ * Brewer for pie charts. Always aggregates by the label field.
+ * 'identity' is not meaningful for pie charts — falls back to 'sum'.
+ */
+export class PieBrewer extends ChartBrewer {
+	transform(data, channels, stat) {
+		if (!channels.label || !channels.y) return data
+		const effectiveStat = stat === 'identity' ? 'sum' : (stat ?? 'sum')
+		return applyAggregate(data, { by: [channels.label], value: channels.y, stat: effectiveStat })
+	}
+}

package/src/lib/brewing/QuartileBrewer.svelte.js

@@ -0,0 +1,51 @@
+import { quantile, ascending } from 'd3-array'
+import { dataset } from '@rokkit/data'
+import { ChartBrewer } from './brewer.svelte.js'
+import { buildXScale, buildYScale } from './scales.js'
+
+function sortedQuantile(values, p) {
+	return quantile([...values].sort(ascending), p)
+}
+
+/**
+ * Shared base for box and violin plots.
+ * Groups by x + fill (primary) or x + color (fallback) and computes quartile statistics.
+ * Subclasses add their mark-specific $derived (boxes, violins, etc.).
+ */
+export class QuartileBrewer extends ChartBrewer {
+	transform(data, channels) {
+		if (!channels.x || !channels.y) return data
+		const by = [channels.x, channels.fill ?? channels.color].filter(Boolean)
+		return dataset(data)
+			.groupBy(...by)
+			.summarize((row) => row[channels.y], {
+				q1: (v) => sortedQuantile(v, 0.25),
+				median: (v) => sortedQuantile(v, 0.5),
+				q3: (v) => sortedQuantile(v, 0.75),
+				iqr_min: (v) => {
+					const q1 = sortedQuantile(v, 0.25)
+					const q3 = sortedQuantile(v, 0.75)
+					return q1 - 1.5 * (q3 - q1)
+				},
+				iqr_max: (v) => {
+					const q1 = sortedQuantile(v, 0.25)
+					const q3 = sortedQuantile(v, 0.75)
+					return q3 + 1.5 * (q3 - q1)
+				}
+			})
+			.rollup()
+			.select()
+	}
+
+	xScale = $derived(
+		this.channels.x && this.processedData.length > 0
+			? buildXScale(this.processedData, this.channels.x, this.innerWidth)
+			: null
+	)
+
+	yScale = $derived(
+		this.channels.y && this.processedData.length > 0
+			? buildYScale(this.processedData, 'iqr_max', this.innerHeight)
+			: null
+	)
+}

package/src/lib/brewing/ViolinBrewer.svelte.js

@@ -0,0 +1,14 @@
+import { QuartileBrewer } from './QuartileBrewer.svelte.js'
+import { buildViolins } from './marks/violins.js'
+
+/**
+ * Brewer for violin plots.
+ * fill = violin body color, color = outline stroke.
+ */
+export class ViolinBrewer extends QuartileBrewer {
+	violins = $derived(
+		this.xScale && this.yScale
+			? buildViolins(this.processedData, this.channels, this.xScale, this.yScale, this.colorMap)
+			: []
+	)
+}