@rokkit/chart 1.0.0-next.15 → 1.0.0-next.151

package/src/geoms/lib/bars.js

@@ -0,0 +1,172 @@
+import { scaleBand } from 'd3-scale'
+import { stack } from 'd3-shape'
+import { toPatternId } from '../../lib/brewing/patterns.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)) { 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
+
+  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])
+    const barHeight = innerHeight - barY
+
+    return {
+      data: d,
+      key: `${String(xVal)}::${subKey}::${i}`,
+      x: barX,
+      y: barY,
+      width: barWidth,
+      height: barHeight,
+      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 colorKeys = cf ? [...new Set(data.map((d) => d[cf]))] : []
+  const subScale = colorKeys.length > 1
+    ? 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]),
+      height: subScale ? subScale.bandwidth() : yScale.bandwidth(),
+      fill: colorEntry.fill,
+      stroke: colorEntry.stroke,
+      patternId: null
+    }
+  })
+}

package/src/index.js

@@ -1,16 +1,67 @@
-// 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'
+
+// Export components (old Plot namespace — renamed to avoid collision with new PlotChart export)
+export const PlotLayers = {
+	Root,
+	Axis,
+	Bar,
+	Grid,
+	Legend,
+	Line,
+	Area,
+	Point,
+	Arc
+}
+
+// New Plot system
+export { default as PlotChart }    from './Plot.svelte'
+
+// 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 { 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'

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,56 @@
+import { quantile, ascending } from 'd3-array'
+import { dataset } from '@rokkit/data'
+import { ChartBrewer } from './brewer.svelte.js'
+import { buildBoxes } from './marks/boxes.js'
+import { buildXScale, buildYScale } from './scales.js'
+
+function sortedQuantile(values, p) {
+  return quantile([...values].sort(ascending), p)
+}
+
+/**
+ * Brewer for box plots. Always computes quartile statistics regardless of the stat prop.
+ * Groups by x + fill (primary) or x + color (fallback).
+ * fill = box interior color, color = whisker/outline stroke.
+ */
+export class BoxBrewer 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()
+  }
+
+  /**
+   * Override xScale to use processedData (post-transform rows have the x field).
+   */
+  xScale = $derived(
+    this.channels.x && this.processedData.length > 0
+      ? buildXScale(this.processedData, this.channels.x, this.innerWidth)
+      : null
+  )
+
+  /**
+   * Override yScale to use iqr_max as the upper bound of the quartile data.
+   */
+  yScale = $derived(
+    this.channels.y && this.processedData.length > 0
+      ? buildYScale(this.processedData, 'iqr_max', this.innerHeight)
+      : null
+  )
+
+  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,17 @@
+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/ViolinBrewer.svelte.js

@@ -0,0 +1,55 @@
+import { quantile, ascending } from 'd3-array'
+import { dataset } from '@rokkit/data'
+import { ChartBrewer } from './brewer.svelte.js'
+import { buildViolins } from './marks/violins.js'
+import { buildXScale, buildYScale } from './scales.js'
+
+function sortedQuantile(values, p) {
+  return quantile([...values].sort(ascending), p)
+}
+
+/**
+ * Brewer for violin plots. Computes the same quartile statistics as BoxBrewer.
+ * fill = violin body color, color = outline stroke.
+ */
+export class ViolinBrewer 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()
+  }
+
+  /**
+   * Override xScale to use processedData (post-transform rows have the x field).
+   */
+  xScale = $derived(
+    this.channels.x && this.processedData.length > 0
+      ? buildXScale(this.processedData, this.channels.x, this.innerWidth)
+      : null
+  )
+
+  /**
+   * Override yScale to use iqr_max as the upper bound of the quartile data.
+   */
+  yScale = $derived(
+    this.channels.y && this.processedData.length > 0
+      ? buildYScale(this.processedData, 'iqr_max', this.innerHeight)
+      : null
+  )
+
+  violins = $derived(
+    this.xScale && this.yScale
+      ? buildViolins(this.processedData, this.channels, this.xScale, this.yScale, this.colorMap)
+      : []
+  )
+}