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

package/src/geoms/Area.svelte

@@ -0,0 +1,50 @@
+<script>
+  import { getContext, onMount, onDestroy } from 'svelte'
+  import { buildAreas, buildStackedAreas } from './lib/areas.js'
+
+  let { x, y, color, pattern, stat = 'identity', options = {} } = $props()
+
+  const plotState = getContext('plot-state')
+  let id = $state(null)
+
+  onMount(() => {
+    id = plotState.registerGeom({ type: 'area', channels: { x, y, color, pattern }, stat, options: { stack: options?.stack ?? false } })
+  })
+  onDestroy(() => { if (id) plotState.unregisterGeom(id) })
+
+  $effect(() => {
+    if (id) plotState.updateGeom(id, { channels: { x, y, color, pattern }, stat, options: { stack: options?.stack ?? false } })
+  })
+
+  const data     = $derived(id ? plotState.geomData(id) : [])
+  const xScale   = $derived(plotState.xScale)
+  const yScale   = $derived(plotState.yScale)
+  const colors   = $derived(plotState.colors)
+  const patterns = $derived(plotState.patterns)
+
+  const areas = $derived.by(() => {
+    if (!data?.length || !xScale || !yScale) return []
+    const channels = { x, y, color, pattern }
+    if (options.stack) {
+      return buildStackedAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
+    }
+    return buildAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
+  })
+</script>
+
+{#if areas.length > 0}
+  <g data-plot-geom="area">
+    {#each areas as seg (seg.key ?? seg.d)}
+      <path
+        d={seg.d}
+        fill={seg.fill}
+        fill-opacity={seg.patternId ? 1 : (options.opacity ?? 0.6)}
+        stroke={seg.stroke ?? 'none'}
+        data-plot-element="area"
+      />
+      {#if seg.patternId}
+        <path d={seg.d} fill="url(#{seg.patternId})" data-plot-element="area" />
+      {/if}
+    {/each}
+  </g>
+{/if}

package/src/geoms/Bar.svelte

@@ -0,0 +1,142 @@
+<script>
+  import { getContext, onMount, onDestroy } from 'svelte'
+  import { buildGroupedBars, buildStackedBars, buildHorizontalBars } from './lib/bars.js'
+  import LabelPill from './LabelPill.svelte'
+
+  let { x, y, color, fill: fillProp, pattern, label = false, stat = 'identity', options = {}, filterable = false } = $props()
+
+  // `fill` is accepted as an alias for `color` (consistent with Arc.svelte)
+  const colorChannel = $derived(fillProp ?? color)
+
+  /**
+   * @param {Record<string, unknown>} data
+   * @param {string} defaultField
+   * @returns {string | null}
+   */
+  function resolveLabel(data, defaultField) {
+    if (!label) return null
+    if (label === true) return String(data[defaultField] ?? '')
+    if (typeof label === 'function') return String(label(data) ?? '')
+    if (typeof label === 'string') return String(data[label] ?? '')
+    return null
+  }
+
+  const plotState = getContext('plot-state')
+  const cf = getContext('crossfilter')
+  let id = $state(null)
+
+  onMount(() => {
+    id = plotState.registerGeom({ type: 'bar', channels: { x, y, color: colorChannel, pattern }, stat, options: { stack: options?.stack ?? false } })
+  })
+  onDestroy(() => {
+    if (id) plotState.unregisterGeom(id)
+  })
+
+  $effect(() => {
+    if (id) plotState.updateGeom(id, { channels: { x, y, color: colorChannel, pattern }, stat, options: { stack: options?.stack ?? false } })
+  })
+
+  const data        = $derived(id ? plotState.geomData(id) : [])
+  const xScale      = $derived(plotState.xScale)
+  const yScale      = $derived(plotState.yScale)
+  const colors      = $derived(plotState.colors)
+  const patterns    = $derived(plotState.patterns)
+  const orientation = $derived(plotState.orientation)
+  const innerHeight = $derived(plotState.innerHeight)
+
+  const bars = $derived.by(() => {
+    if (!data?.length || !xScale || !yScale) return []
+    const channels = { x, y, color: colorChannel, pattern }
+    if (orientation === 'horizontal') {
+      return buildHorizontalBars(data, channels, xScale, yScale, colors, innerHeight)
+    }
+    if (options.stack) {
+      return buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+    }
+    return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+  })
+
+  /** @type {Record<string, boolean>} */
+  let dimmedByKey = $state({})
+
+  $effect(() => {
+    if (!cf) { dimmedByKey = {}; return }
+    // cf.version is a $state counter that increments on every filter mutation.
+    // Reading it here establishes a reactive dependency so the effect re-runs
+    // whenever any filter changes — including changes from sibling FilterBars.
+    void cf.version
+    const next = /** @type {Record<string, boolean>} */ ({})
+    for (const bar of bars) {
+      const dimmedByX = x ? cf.isDimmed(x, bar.data[x]) : false
+      const dimmedByY = y ? cf.isDimmed(y, bar.data[y]) : false
+      next[bar.key] = dimmedByX || dimmedByY
+    }
+    dimmedByKey = next
+  })
+
+  function handleBarClick(barX) {
+    if (!filterable || !x || !cf) return
+    cf.toggleCategorical(x, barX)
+  }
+</script>
+
+{#if bars.length > 0}
+  <g data-plot-geom="bar">
+    {#each bars as bar (bar.key)}
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+      <rect
+        x={bar.x}
+        y={bar.y}
+        width={Math.max(0, bar.width)}
+        height={Math.max(0, bar.height)}
+        fill={bar.fill}
+        stroke={bar.stroke ?? 'none'}
+        stroke-width={bar.stroke ? 0.5 : 0}
+        data-plot-element="bar"
+        data-plot-value={bar.data[y]}
+        data-plot-category={bar.data[x]}
+        data-dimmed={dimmedByKey[bar.key] ? true : undefined}
+        style:cursor={filterable ? 'pointer' : undefined}
+        onclick={filterable && x ? () => handleBarClick(bar.data[x]) : undefined}
+        onkeydown={filterable && x ? (e) => (e.key === 'Enter' || e.key === ' ') && handleBarClick(bar.data[x]) : undefined}
+        role={filterable ? 'button' : 'graphics-symbol'}
+        tabindex={filterable ? 0 : undefined}
+        aria-label="{bar.data[x]}: {bar.data[y]}"
+        onmouseenter={() => plotState.setHovered(bar.data)}
+        onmouseleave={() => plotState.clearHovered()}
+      >
+        <title>{bar.data[x]}: {bar.data[y]}</title>
+      </rect>
+      {#if bar.patternId}
+        <rect
+          x={bar.x}
+          y={bar.y}
+          width={Math.max(0, bar.width)}
+          height={Math.max(0, bar.height)}
+          fill="url(#{bar.patternId})"
+          pointer-events="none"
+        />
+      {/if}
+      {#if label}
+        {@const text = resolveLabel(bar.data, orientation === 'horizontal' ? x : y)}
+        {#if text}
+          {#if orientation === 'horizontal'}
+            <LabelPill
+              x={bar.x + bar.width + (options.labelOffset ?? 8)}
+              y={bar.y + bar.height / 2}
+              {text}
+              color={bar.stroke ?? '#333'}
+            />
+          {:else}
+            <LabelPill
+              x={bar.x + bar.width / 2}
+              y={bar.y + (options.labelOffset ?? -8)}
+              {text}
+              color={bar.stroke ?? '#333'}
+            />
+          {/if}
+        {/if}
+      {/if}
+    {/each}
+  </g>
+{/if}

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