@rokkit/chart 1.0.0-next.146 → 1.0.0-next.148

package/src/index.js

@@ -3,16 +3,65 @@ 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
-export const Plot = {
+// Export components (old Plot namespace — renamed to avoid collision with new PlotChart export)
+export const PlotLayers = {
 	Root,
 	Axis,
 	Bar,
 	Grid,
-	Legend
+	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/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,16 @@
+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 Set([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)
+      : []
+  )
+}

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

@@ -0,0 +1,229 @@
+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 }[] }[]}
+ */
+export function buildLegendGroups(channels, colorMap, patternMap, symbolMap) {
+  const cf = channels.fill ?? channels.color
+  const { pattern: pf, symbol: sf } = channels
+  const byField = new Map()
+
+  if (cf) {
+    byField.set(cf, { aesthetics: ['color'], keys: [...colorMap.keys()] })
+  }
+  if (pf) {
+    if (byField.has(pf)) {
+      byField.get(pf).aesthetics.push('pattern')
+    } else {
+      byField.set(pf, { aesthetics: ['pattern'], keys: [...patternMap.keys()] })
+    }
+  }
+  if (sf) {
+    if (byField.has(sf)) {
+      byField.get(sf).aesthetics.push('symbol')
+    } else {
+      byField.set(sf, { aesthetics: ['symbol'], keys: [...symbolMap.keys()] })
+    }
+  }
+
+  return [...byField.entries()].map(([field, { aesthetics, keys }]) => ({
+    field,
+    items: keys.filter((k) => k !== null && k !== undefined).map((key) => ({
+      label: String(key),
+      fill: aesthetics.includes('color') ? (colorMap.get(key)?.fill ?? null) : null,
+      stroke: aesthetics.includes('color') ? (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
+    }))
+  })).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 Map()
+  )
+
+  /** @type {Map<unknown, string>} */
+  patternMap = $derived(
+    this.#channels.pattern
+      ? assignPatterns(distinct(this.#rawData, this.#channels.pattern))
+      : new Map()
+  )
+
+  /**
+   * 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 Set()
+    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 Map()
+  )
+
+  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/src/lib/brewing/colors.js

@@ -0,0 +1,22 @@
+import palette from './palette.json'
+
+/**
+ * Extracts distinct values for a given field from the data array.
+ * @param {Object[]} data
+ * @param {string|null} field
+ * @returns {unknown[]}
+ */
+export function distinct(data, field) {
+  if (!field) return []
+  return [...new Set(data.map((d) => d[field]))].filter((v) => v !== null && v !== undefined)
+}
+
+/**
+ * Assigns palette colors to an array of distinct values.
+ * @param {unknown[]} values
+ * @param {'light'|'dark'} mode
+ * @returns {Map<unknown, {fill: string, stroke: string}>}
+ */
+export function assignColors(values, mode = 'light') {
+  return new Map(values.map((v, i) => [v, palette[i % palette.length].shades[mode]]))
+}

package/src/lib/brewing/marks/arcs.js

@@ -0,0 +1,43 @@
+import { pie, arc } from 'd3-shape'
+import { toPatternId } from '../../brewing/patterns.js'
+
+/**
+ * Builds arc geometry for pie/donut charts.
+ * @param {Object[]} data
+ * @param {{ color: string, y: string, pattern?: string }} channels
+ * @param {Map} colors
+ * @param {number} width
+ * @param {number} height
+ * @param {{ innerRadius?: number }} opts
+ * @param {Map<unknown, string>} [patterns]
+ */
+export function buildArcs(data, channels, colors, width, height, opts = {}, patterns) {
+  const { color: lf, y: yf } = channels
+  const radius = Math.min(width, height) / 2
+  const innerRadius = opts.innerRadius ?? 0
+  const pieGen = pie().value((d) => Number(d[yf]))
+  const arcGen = arc().innerRadius(innerRadius).outerRadius(radius)
+  const slices = pieGen(data)
+  const total = slices.reduce((s, sl) => s + (sl.endAngle - sl.startAngle), 0)
+  // Label radius: midpoint between inner and outer (or 70% out for solid pie)
+  const labelRadius = innerRadius > 0 ? (innerRadius + radius) / 2 : radius * 0.65
+  const labelArc = arc().innerRadius(labelRadius).outerRadius(labelRadius)
+  return slices.map((slice) => {
+    const key = slice.data[lf]
+    const colorEntry = colors?.get(key) ?? { fill: '#888', stroke: '#fff' }
+    const patternId = key !== null && key !== undefined && patterns?.has(key)
+      ? toPatternId(String(key)) : null
+    const pct = Math.round(((slice.endAngle - slice.startAngle) / total) * 100)
+    const [cx, cy] = labelArc.centroid(slice)
+    return {
+      d: arcGen(slice),
+      fill: colorEntry.fill,
+      stroke: colorEntry.stroke,
+      key,
+      patternId,
+      pct,
+      centroid: [cx, cy],
+      data: slice.data
+    }
+  })
+}

package/src/lib/brewing/marks/areas.js

@@ -0,0 +1,59 @@
+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/src/lib/brewing/marks/bars.js

@@ -0,0 +1,49 @@
+/**
+ * @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
+    }
+  })
+}