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

package/src/geoms/Box.svelte

@@ -0,0 +1,101 @@
+<script>
+  import { getContext, onMount, onDestroy } from 'svelte'
+  import { buildBoxes } from '../lib/brewing/marks/boxes.js'
+
+  let { x, y, fill, stat = 'boxplot', options = {} } = $props()
+
+  const plotState = getContext('plot-state')
+  let id = $state(null)
+
+  // fill ?? x drives the colors map for both box interior and whisker strokes
+  onMount(() => {
+    id = plotState.registerGeom({ type: 'box', channels: { x, y, color: fill ?? x }, stat, options })
+  })
+  onDestroy(() => { if (id) plotState.unregisterGeom(id) })
+
+  $effect(() => {
+    if (id) plotState.updateGeom(id, { channels: { x, y, color: fill ?? x }, stat })
+  })
+
+  const data   = $derived(id ? plotState.geomData(id) : [])
+  const xScale = $derived(plotState.xScale)
+  const yScale = $derived(plotState.yScale)
+  const colors = $derived(plotState.colors)
+
+  const boxes = $derived.by(() => {
+    if (!data?.length || !xScale || !yScale) return []
+    return buildBoxes(data, { x, fill: fill ?? x }, xScale, yScale, colors)
+  })
+</script>
+
+{#if boxes.length > 0}
+  <g data-plot-geom="box">
+    {#each boxes as box, i (`${String(box.cx)  }::${  i}`)}
+      {@const x0 = box.cx - box.width / 2}
+      {@const xMid = box.cx}
+      {@const xCap0 = box.cx - box.whiskerWidth / 2}
+      {@const xCap1 = box.cx + box.whiskerWidth / 2}
+      <!-- Box body (IQR): lighter fill shade -->
+      <rect
+        x={x0}
+        y={box.q3}
+        width={box.width}
+        height={Math.max(0, box.q1 - box.q3)}
+        fill={box.fill}
+        fill-opacity="0.5"
+        stroke={box.stroke}
+        stroke-width="1"
+        data-plot-element="box-body"
+      />
+      <!-- Median line: darker stroke shade -->
+      <line
+        x1={x0}
+        y1={box.median}
+        x2={x0 + box.width}
+        y2={box.median}
+        stroke={box.stroke}
+        stroke-width="2"
+        data-plot-element="box-median"
+      />
+      <!-- Lower whisker (q1 to iqr_min) -->
+      <line
+        x1={xMid}
+        y1={box.q1}
+        x2={xMid}
+        y2={box.iqr_min}
+        stroke={box.stroke}
+        stroke-width="1"
+        data-plot-element="box-whisker"
+      />
+      <!-- Upper whisker (q3 to iqr_max) -->
+      <line
+        x1={xMid}
+        y1={box.q3}
+        x2={xMid}
+        y2={box.iqr_max}
+        stroke={box.stroke}
+        stroke-width="1"
+        data-plot-element="box-whisker"
+      />
+      <!-- Lower whisker cap -->
+      <line
+        x1={xCap0}
+        y1={box.iqr_min}
+        x2={xCap1}
+        y2={box.iqr_min}
+        stroke={box.stroke}
+        stroke-width="1"
+      />
+      <!-- Upper whisker cap -->
+      <line
+        x1={xCap0}
+        y1={box.iqr_max}
+        x2={xCap1}
+        y2={box.iqr_max}
+        stroke={box.stroke}
+        stroke-width="1"
+      />
+      <!-- Outlier rendering deferred: buildBoxes does not compute outliers yet -->
+    {/each}
+  </g>
+{/if}

package/src/geoms/LabelPill.svelte

@@ -0,0 +1,17 @@
+<script>
+  /** @type {{ x: number, y: number, text: string, color?: string }} */
+  let { x, y, text, color = '#333' } = $props()
+
+  const w = $derived(Math.max(36, String(text).length * 7 + 12))
+</script>
+
+<g transform="translate({x},{y})" pointer-events="none" data-plot-element="label">
+  <rect x={-w / 2} y="-9" width={w} height="18" rx="4" fill="white" fill-opacity="0.82" />
+  <text
+    text-anchor="middle"
+    dominant-baseline="central"
+    font-size="11"
+    font-weight="600"
+    fill={color}
+  >{text}</text>
+</g>

package/src/geoms/Line.svelte

@@ -0,0 +1,100 @@
+<script>
+  import { getContext, onMount, onDestroy } from 'svelte'
+  import { buildLines } from '../lib/brewing/marks/lines.js'
+  import { buildSymbolPath } from '../lib/brewing/marks/points.js'
+  import LabelPill from './LabelPill.svelte'
+
+  let { x, y, color, symbol: symbolField, label = false, stat = 'identity', options = {} } = $props()
+
+  /**
+   * @param {Record<string, unknown>} data
+   * @returns {string | null}
+   */
+  function resolveLabel(data) {
+    if (!label) return null
+    if (label === true) return String(data[y] ?? '')
+    if (typeof label === 'function') return String(label(data) ?? '')
+    if (typeof label === 'string') return String(data[label] ?? '')
+    return null
+  }
+
+  const plotState = getContext('plot-state')
+  let id = $state(null)
+
+  onMount(() => {
+    id = plotState.registerGeom({ type: 'line', channels: { x, y, color, symbol: symbolField }, stat, options })
+  })
+  onDestroy(() => { if (id) plotState.unregisterGeom(id) })
+
+  $effect(() => {
+    if (id) plotState.updateGeom(id, { channels: { x, y, color, symbol: symbolField }, stat })
+  })
+
+  const data      = $derived(id ? plotState.geomData(id) : [])
+  const xScale    = $derived(plotState.xScale)
+  const yScale    = $derived(plotState.yScale)
+  const colors    = $derived(plotState.colors)
+  const symbolMap = $derived(plotState.symbols)
+
+  const lines = $derived.by(() => {
+    if (!data?.length || !xScale || !yScale) return []
+    return buildLines(data, { x, y, color }, xScale, yScale, colors, options.curve)
+  })
+
+  const markerRadius = $derived(options.markerRadius ?? 4)
+</script>
+
+{#if lines.length > 0}
+  <g data-plot-geom="line">
+    {#each lines as seg (seg.key ?? seg.d)}
+      <path
+        d={seg.d}
+        fill="none"
+        stroke={seg.stroke}
+        stroke-width={options.strokeWidth ?? 2}
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        data-plot-element="line"
+      />
+      {#if symbolField && symbolMap}
+        {#each seg.points as pt (`${pt.x}::${pt.y}`)}
+          <path
+            transform="translate({pt.x},{pt.y})"
+            d={buildSymbolPath(symbolMap.get(pt.data[symbolField]) ?? 'circle', markerRadius)}
+            fill={seg.stroke}
+            stroke={seg.stroke}
+            stroke-width="1"
+            data-plot-element="line-marker"
+          />
+        {/each}
+      {/if}
+      {#if label}
+        {#each seg.points as pt (`label::${pt.x}::${pt.y}`)}
+          {@const text = resolveLabel(pt.data)}
+          {#if text}
+            <LabelPill
+              x={pt.x + (options.labelOffset?.x ?? 0)}
+              y={pt.y + (options.labelOffset?.y ?? -12)}
+              {text}
+              color={seg.stroke ?? '#333'}
+            />
+          {/if}
+        {/each}
+      {/if}
+      <!-- Invisible hit areas for tooltip -->
+      {#each seg.points as pt (`hover::${pt.x}::${pt.y}`)}
+        <circle
+          cx={pt.x}
+          cy={pt.y}
+          r="8"
+          fill="transparent"
+          stroke="none"
+          role="presentation"
+          data-plot-element="line-hover"
+          onmouseenter={() => plotState.setHovered(pt.data)}
+          onmouseleave={() => plotState.clearHovered()}
+        />
+      {/each}
+    {/each}
+  </g>
+{/if}

package/src/geoms/Point.svelte

@@ -0,0 +1,100 @@
+<script>
+  import { getContext, onMount, onDestroy } from 'svelte'
+  import { scaleSqrt } from 'd3-scale'
+  import { buildPoints } from '../lib/brewing/marks/points.js'
+  import LabelPill from './LabelPill.svelte'
+
+  let { x, y, color, size, symbol: symbolField, label = false, stat = 'identity', options = {} } = $props()
+
+  /**
+   * @param {Record<string, unknown>} data
+   * @returns {string | null}
+   */
+  function resolveLabel(data) {
+    if (!label) return null
+    if (label === true) return String(data[y] ?? '')
+    if (typeof label === 'function') return String(label(data) ?? '')
+    if (typeof label === 'string') return String(data[label] ?? '')
+    return null
+  }
+
+  const plotState = getContext('plot-state')
+  let id = $state(null)
+
+  onMount(() => {
+    id = plotState.registerGeom({ type: 'point', channels: { x, y, color, size, symbol: symbolField }, stat, options })
+  })
+  onDestroy(() => { if (id) plotState.unregisterGeom(id) })
+
+  $effect(() => {
+    if (id) plotState.updateGeom(id, { channels: { x, y, color, size, symbol: symbolField }, stat })
+  })
+
+  const data      = $derived(id ? plotState.geomData(id) : [])
+  const xScale    = $derived(plotState.xScale)
+  const yScale    = $derived(plotState.yScale)
+  const colors    = $derived(plotState.colors)
+  const symbolMap = $derived(plotState.symbols)
+
+  const sizeScale = $derived.by(() => {
+    if (!size || !data?.length) return null
+    const vals = data.map((d) => Number(d[size])).filter((v) => !isNaN(v))
+    if (!vals.length) return null
+    const maxVal = Math.max(...vals)
+    const minVal = Math.min(...vals)
+    return scaleSqrt().domain([minVal, maxVal]).range([options.minRadius ?? 3, options.maxRadius ?? 20])
+  })
+
+  const points = $derived.by(() => {
+    if (!data?.length || !xScale || !yScale) return []
+    return buildPoints(data, { x, y, color, size, symbol: symbolField }, xScale, yScale, colors, sizeScale, symbolMap, options.radius ?? 4)
+  })
+</script>
+
+{#if points.length > 0}
+  <g data-plot-geom="point">
+    {#each points as pt, i (`${i}::${pt.data[x]}::${pt.data[y]}`)}
+      {#if pt.symbolPath}
+        <path
+          transform="translate({pt.cx},{pt.cy})"
+          d={pt.symbolPath}
+          fill={pt.fill}
+          stroke={pt.stroke}
+          stroke-width="1"
+          fill-opacity={options.opacity ?? 0.8}
+          data-plot-element="point"
+          role="graphics-symbol"
+          aria-label="{pt.data[x]}, {pt.data[y]}"
+          onmouseenter={() => plotState.setHovered(pt.data)}
+          onmouseleave={() => plotState.clearHovered()}
+        />
+      {:else}
+        <circle
+          cx={pt.cx}
+          cy={pt.cy}
+          r={pt.r}
+          fill={pt.fill}
+          stroke={pt.stroke}
+          stroke-width="1"
+          fill-opacity={options.opacity ?? 0.8}
+          data-plot-element="point"
+          role="graphics-symbol"
+          aria-label="{pt.data[x]}, {pt.data[y]}"
+          onmouseenter={() => plotState.setHovered(pt.data)}
+          onmouseleave={() => plotState.clearHovered()}
+        />
+      {/if}
+      {#if label}
+        {@const text = resolveLabel(pt.data)}
+        {#if text}
+          <LabelPill
+            x={pt.cx + (options.labelOffset?.x ?? 0)}
+            y={pt.cy - pt.r + (options.labelOffset?.y ?? -12)}
+            {text}
+            color={pt.stroke ?? '#333'}
+          />
+        {/if}
+      {/if}
+    {/each}
+  </g>
+{/if}

package/src/geoms/Violin.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { getContext, onMount, onDestroy } from 'svelte'
+  import { buildViolins } from '../lib/brewing/marks/violins.js'
+
+  let { x, y, fill, stat = 'boxplot', options = {} } = $props()
+
+  const plotState = getContext('plot-state')
+  let id = $state(null)
+
+  // fill ?? x drives the colors map for both violin interior and outline
+  onMount(() => {
+    id = plotState.registerGeom({ type: 'violin', channels: { x, y, color: fill ?? x }, stat, options })
+  })
+  onDestroy(() => { if (id) plotState.unregisterGeom(id) })
+
+  $effect(() => {
+    if (id) plotState.updateGeom(id, { channels: { x, y, color: fill ?? x }, stat })
+  })
+
+  const data   = $derived(id ? plotState.geomData(id) : [])
+  const xScale = $derived(plotState.xScale)
+  const yScale = $derived(plotState.yScale)
+  const colors = $derived(plotState.colors)
+
+  const violins = $derived.by(() => {
+    if (!data?.length || !xScale || !yScale) return []
+    return buildViolins(data, { x, fill: fill ?? x }, xScale, yScale, colors)
+  })
+</script>
+
+{#if violins.length > 0}
+  <g data-plot-geom="violin">
+    {#each violins as v, i (`${String(v.cx)  }::${  i}`)}
+      <path
+        d={v.d}
+        fill={v.fill}
+        fill-opacity="0.5"
+        stroke={v.stroke}
+        stroke-width="1.5"
+        data-plot-element="violin"
+      />
+    {/each}
+  </g>
+{/if}

package/src/geoms/lib/areas.js

@@ -0,0 +1,131 @@
+import { area, stack, curveCatmullRom, curveStep } from 'd3-shape'
+import { toPatternId } from '../../lib/brewing/patterns.js'
+
+/**
+ * Builds area path geometry for multi-series area charts.
+ *
+ * @param {Object[]} data
+ * @param {{ x: string, y: string, color?: string }} channels
+ * @param {Function} xScale
+ * @param {Function} yScale
+ * @param {Map<unknown, {fill: string, stroke: string}>} colors
+ * @param {'linear'|'smooth'|'step'} [curve]
+ * @param {Map<unknown, string>} [patterns]
+ * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
+ */
+export function buildAreas(data, channels, xScale, yScale, colors, curve, patterns) {
+  const { x: xf, y: yf, color: cf, pattern: pf } = channels
+  const baseline = yScale.range()[0]   // bottom of the chart (y pixel max)
+
+  const xPos = (d) => typeof xScale.bandwidth === 'function'
+    ? xScale(d[xf]) + xScale.bandwidth() / 2
+    : xScale(d[xf])
+
+  const makeGen = () => {
+    const gen = area()
+      .x(xPos)
+      .y0(baseline)
+      .y1((d) => yScale(d[yf]))
+    if (curve === 'smooth') gen.curve(curveCatmullRom)
+    else if (curve === 'step') gen.curve(curveStep)
+    return gen
+  }
+
+  const sortByX = (rows) => [...rows].sort((a, b) => a[xf] < b[xf] ? -1 : a[xf] > b[xf] ? 1 : 0)
+
+  if (!cf) {
+    const entry = colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+    const patternKey = pf ? data[0]?.[pf] : null
+    const patternId = patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+      ? toPatternId(String(patternKey)) : null
+    return [{ d: makeGen()(sortByX(data)), fill: entry.fill, stroke: 'none', key: null, patternId }]
+  }
+
+  // Group by color field
+  const groups = new Map()
+  for (const d of data) {
+    const key = d[cf]
+    if (!groups.has(key)) groups.set(key, [])
+    groups.get(key).push(d)
+  }
+  // For different-field patterns, assign positionally so each area gets a distinct pattern
+  const orderedPatternKeys = pf && pf !== cf ? [...(patterns?.keys() ?? [])] : null
+
+  return [...groups.entries()].map(([key, rows], i) => {
+    const entry = colors?.get(key) ?? { fill: '#888', stroke: '#888' }
+    // Same field or no pf: look up by colorKey. Different field: assign positionally.
+    const patternKey = !pf ? key : pf === cf ? key : (orderedPatternKeys?.[i % orderedPatternKeys.length] ?? null)
+    const patternId = patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+      ? toPatternId(String(patternKey)) : null
+    return { d: makeGen()(sortByX(rows)), fill: entry.fill, stroke: 'none', key, patternId }
+  })
+}
+
+/**
+ * Builds stacked area paths using d3 stack layout.
+ *
+ * @param {Object[]} data
+ * @param {{ x: string, y: string, color: string }} channels
+ * @param {Function} xScale
+ * @param {Function} yScale
+ * @param {Map<unknown, {fill: string, stroke: string}>} colors
+ * @param {'linear'|'smooth'|'step'} [curve]
+ * @param {Map<unknown, string>} [patterns]
+ * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
+ */
+export function buildStackedAreas(data, channels, xScale, yScale, colors, curve, patterns) {
+  const { x: xf, y: yf, color: cf, pattern: pf } = channels
+  if (!cf) return buildAreas(data, channels, xScale, yScale, colors, curve, patterns)
+
+  const xCategories = [...new Set(data.map((d) => d[xf]))]
+    .sort((a, b) => a < b ? -1 : a > b ? 1 : 0)
+  const colorCategories = [...new Set(data.map((d) => d[cf]))]
+
+  // Build wide-form lookup: xVal → { colorKey: yVal }
+  const lookup = new Map()
+  for (const d of data) {
+    if (!lookup.has(d[xf])) lookup.set(d[xf], {})
+    lookup.get(d[xf])[d[cf]] = Number(d[yf])
+  }
+
+  const wide = xCategories.map((xVal) => {
+    const row = { [xf]: xVal }
+    for (const c of colorCategories) row[c] = lookup.get(xVal)?.[c] ?? 0
+    return row
+  })
+
+  const xPos = (d) => typeof xScale.bandwidth === 'function'
+    ? xScale(d.data[xf]) + xScale.bandwidth() / 2
+    : xScale(d.data[xf])
+
+  const makeGen = () => {
+    const gen = area()
+      .x(xPos)
+      .y0((d) => yScale(d[0]))
+      .y1((d) => yScale(d[1]))
+    if (curve === 'smooth') gen.curve(curveCatmullRom)
+    else if (curve === 'step') gen.curve(curveStep)
+    return gen
+  }
+
+  const stackGen = stack().keys(colorCategories)
+  const layers = stackGen(wide)
+
+  const orderedPatternKeys = pf && pf !== cf ? [...(patterns?.keys() ?? [])] : null
+
+  return layers.map((layer, i) => {
+    const colorKey = layer.key
+    const entry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#888' }
+    // Same field (or no pf): look up by colorKey. Different field: assign positionally.
+    const patternKey = !pf ? colorKey : pf === cf ? colorKey : (orderedPatternKeys?.[i % orderedPatternKeys.length] ?? null)
+    const patternId = patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+      ? toPatternId(String(patternKey)) : null
+    return {
+      d: makeGen()(layer) ?? '',
+      fill: entry.fill,
+      stroke: 'none',
+      key: colorKey,
+      patternId
+    }
+  })
+}

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
+    }
+  })
+}