decantr 0.9.0

package/src/chart/types/_type-base.js

@@ -0,0 +1,26 @@
+/**
+ * Backward-compatible re-exports from layouts/_layout-base.js.
+ * All layout utilities have moved to the layouts/ directory.
+ * This file preserves import paths used by tests and external code.
+ * @module types/_type-base
+ */
+
+export {
+  MARGINS,
+  MARGINS_NONE,
+  innerDimensions,
+  buildXScale,
+  buildYScale,
+  computeTicks,
+  chartColor,
+  PALETTE_SIZE
+} from '../layouts/_layout-base.js';
+
+// Re-export computeGridLines for tests
+export function computeGridLines(yScale, count = 5) {
+  const ticks = yScale.ticks(count);
+  return ticks.map(t => ({
+    position: yScale(t),
+    label: String(t)
+  }));
+}

package/src/chart/types/area.js

@@ -0,0 +1,134 @@
+/**
+ * Area chart layout — produces scene graph.
+ * Supports: stacked, 100%, range area, markers, negative values.
+ * @module types/area
+ */
+
+import { scene, group, path, circle, gradient } from '../_scene.js';
+import { areaPathD, smoothAreaPathD, pointsToPathD, smoothPathD } from '../_scene.js';
+import { cartesian } from '../layouts/cartesian.js';
+import { chartColor, buildAnnotations } from '../layouts/_layout-base.js';
+import { resolve, groupBy, downsampleLTTB } from '../_shared.js';
+
+/**
+ * @param {Object} spec — resolved chart spec
+ * @param {number} width
+ * @param {number} height
+ * @returns {Object} scene graph
+ */
+export function layoutArea(spec, width, height) {
+  const data = resolve(spec.data);
+  const coords = cartesian(spec, width, height, { yOpts: { stacked: !!spec.stacked } });
+  const { innerW, innerH, margins, xScale, yScale, xType, axisNodes, gridNodes } = coords;
+  const yFields = Array.isArray(spec.y) ? spec.y : [spec.y];
+  const baseline = yScale(0);
+
+  let series;
+  if (spec.stacked && yFields.length > 1) {
+    const prevBaselines = data.map(() => baseline);
+    series = yFields.map((f, i) => {
+      const points = data.map((d, j) => {
+        const xVal = xType === 'band' ? d[spec.x] : (xType === 'time' ? new Date(d[spec.x]) : +d[spec.x]);
+        const x = xScale(xVal) + (xType === 'band' ? xScale.bandwidth() / 2 : 0);
+        const val = +d[f] || 0;
+        const y1 = prevBaselines[j];
+        const y0 = yScale(yScale.invert(y1) + val);
+        return { x, y0: y0, y1, raw: d };
+      });
+      for (let j = 0; j < data.length; j++) prevBaselines[j] = points[j].y0;
+      return { key: f, color: chartColor(i), points };
+    });
+  } else if (spec.series) {
+    const groups = groupBy(data, spec.series);
+    series = [...groups.entries()].map(([key, rows], i) => {
+      const sampled = rows.length > innerW * 2 ? downsampleLTTB(rows, spec.x, yFields[0], Math.round(innerW * 2)) : rows;
+      return {
+        key, color: chartColor(i),
+        points: sampled.map(d => {
+          const xVal = xType === 'band' ? d[spec.x] : (xType === 'time' ? new Date(d[spec.x]) : +d[spec.x]);
+          const x = xScale(xVal) + (xType === 'band' ? xScale.bandwidth() / 2 : 0);
+          return { x, y0: yScale(+d[yFields[0]]), y1: baseline, raw: d };
+        })
+      };
+    });
+  } else {
+    series = yFields.map((f, i) => {
+      const sampled = data.length > innerW * 2 ? downsampleLTTB(data, spec.x, f, Math.round(innerW * 2)) : data;
+      return {
+        key: f, color: chartColor(i),
+        points: sampled.map(d => {
+          const xVal = xType === 'band' ? d[spec.x] : (xType === 'time' ? new Date(d[spec.x]) : +d[spec.x]);
+          const x = xScale(xVal) + (xType === 'band' ? xScale.bandwidth() / 2 : 0);
+          return { x, y0: yScale(+d[f]), y1: baseline, raw: d };
+        })
+      };
+    });
+  }
+
+  // Build scene
+  const children = [];
+  if (spec.grid !== false) children.push(...gridNodes);
+  children.push(...axisNodes);
+
+  // Collect gradient defs
+  const gradients = [];
+
+  for (let si = 0; si < series.length; si++) {
+    const s = series[si];
+    if (s.points.length < 2) continue;
+
+    // Gradient fill
+    const gradId = `area-grad-${si}`;
+    const yMin = Math.min(...s.points.map(p => p.y0));
+    const yMax = Math.max(...s.points.map(p => p.y1));
+    gradients.push(gradient({
+      id: gradId, x1: '0', y1: yMin, x2: '0', y2: yMax,
+      stops: [
+        { offset: '0%', color: s.color, opacity: 0.3 },
+        { offset: '100%', color: s.color, opacity: 0.02 }
+      ]
+    }));
+
+    // Fill area — smooth top edge when spec.smooth
+    const areaD = spec.smooth ? smoothAreaPathD(s.points) : areaPathD(s.points);
+    children.push(path({
+      d: areaD, fill: `url(#${gradId})`,
+      data: { series: s.key }, key: `area-${s.key}`
+    }));
+
+    // Stroke line on top
+    const linePts = s.points.map(p => ({ x: p.x, y: p.y0 }));
+    const lineD = spec.smooth ? smoothPathD(linePts) : pointsToPathD(linePts);
+    children.push(path({
+      d: lineD, stroke: s.color, strokeWidth: 2,
+      strokeLinecap: 'round', strokeLinejoin: 'round',
+      class: 'd-chart-line',
+      data: { series: s.key }, key: `area-line-${s.key}`
+    }));
+
+    // Data point dots (suppress when points > 50)
+    if (spec.dots !== false && s.points.length <= 50) {
+      for (const p of s.points) {
+        children.push(circle({
+          cx: p.x, cy: p.y0, r: 3,
+          fill: s.color, stroke: 'var(--d-bg)', strokeWidth: 2,
+          class: 'd-chart-point',
+          data: { series: s.key, value: p.raw[Array.isArray(spec.y) ? s.key : spec.y[0] || spec.y], label: String(p.raw[spec.x]) },
+          key: `area-dot-${s.key}-${p.x}`
+        }));
+      }
+    }
+  }
+
+  // Prepend gradients to children so SVG renderer can collect them
+  children.unshift(...gradients);
+
+  // Annotations
+  if (spec.annotations) {
+    children.push(...buildAnnotations(spec.annotations, xScale, yScale, xType, innerW, innerH));
+  }
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'area', series, xScale, yScale, xType, margins, innerW, innerH, baseline, dataLength: data.length });
+}

package/src/chart/types/bar.js

@@ -0,0 +1,173 @@
+/**
+ * Bar chart layout — produces scene graph.
+ * Supports: grouped, stacked, horizontal, 100% stacked.
+ * @module types/bar
+ */
+
+import { scene, group, rect, text } from '../_scene.js';
+import { cartesian } from '../layouts/cartesian.js';
+import { chartColor, buildYScale, MARGINS, innerDimensions, buildAnnotations } from '../layouts/_layout-base.js';
+import { resolve, unique, scaleBand } from '../_shared.js';
+
+/**
+ * @param {Object} spec — resolved chart spec
+ * @param {number} width
+ * @param {number} height
+ * @returns {Object} scene graph
+ */
+export function layoutBar(spec, width, height) {
+  const data = resolve(spec.data);
+  const yFields = Array.isArray(spec.y) ? spec.y : [spec.y];
+  const horizontal = !!spec.horizontal;
+
+  if (horizontal) return layoutHorizontalBar(spec, data, yFields, width, height);
+
+  const categories = unique(data, spec.x);
+  const margins = { ...MARGINS };
+  const { innerW, innerH } = innerDimensions(width, height, margins);
+
+  const xScale = scaleBand(categories, [0, innerW], 0.2);
+  const yScale = buildYScale(data, yFields, innerH, { stacked: !!spec.stacked });
+  const bandW = xScale.bandwidth();
+
+  // Build bars
+  const bars = buildBars(data, spec, categories, yFields, xScale, yScale, bandW);
+
+  // Build scene children
+  const coords = cartesian(spec, width, height, { bandX: true, yOpts: { stacked: !!spec.stacked } });
+  const children = [];
+
+  if (spec.grid !== false) children.push(...coords.gridNodes);
+  children.push(...coords.axisNodes);
+
+  // Render bars as rects
+  const isStacked = spec.stacked && yFields.length > 1;
+  for (const bar of bars) {
+    const segCount = bar.segments.length;
+    for (let si = 0; si < segCount; si++) {
+      const seg = bar.segments[si];
+      // Stacked: only topmost segment gets rounded corners, middle segments are flat
+      const rx = isStacked && si < segCount - 1 ? 0 : Math.min(4, seg.width / 4);
+      children.push(rect({
+        x: seg.x, y: seg.y, w: Math.max(0, seg.width), h: Math.max(0, seg.height),
+        rx, fill: seg.color,
+        class: 'd-chart-bar',
+        data: { series: seg.field, value: seg.value, label: bar.category },
+        key: `bar-${bar.category}-${seg.field}`
+      }));
+
+      // Labels
+      if (spec.labels) {
+        children.push(text({
+          x: seg.x + seg.width / 2, y: seg.y - 4,
+          content: String(seg.value), anchor: 'middle',
+          class: 'd-chart-axis', fontSize: 'var(--d-text-xs)'
+        }));
+      }
+    }
+  }
+
+  // Annotations
+  if (spec.annotations) {
+    children.push(...buildAnnotations(spec.annotations, xScale, yScale, 'band', innerW, innerH));
+  }
+
+  const series = yFields.map((f, i) => ({ key: f, color: chartColor(i) }));
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'bar', series, xScale, yScale, xType: 'band', categories, bars, margins, innerW, innerH, dataLength: data.length });
+}
+
+function layoutHorizontalBar(spec, data, yFields, width, height) {
+  const coords = cartesian({ ...spec, horizontal: true }, width, height, {
+    bandX: true, yOpts: { stacked: !!spec.stacked }
+  });
+  const { innerW, innerH, margins, xScale, yScale, categories, axisNodes, gridNodes } = coords;
+  const bandW = xScale.bandwidth();
+
+  const children = [];
+  if (spec.grid !== false) children.push(...gridNodes);
+  children.push(...axisNodes);
+
+  const bars = [];
+  for (const cat of categories) {
+    const row = data.find(d => d[spec.x] === cat);
+    if (!row) continue;
+    const segments = yFields.map((f, i) => {
+      const val = +row[f] || 0;
+      return {
+        field: f, color: chartColor(i),
+        x: 0, y: xScale(cat), width: yScale(val), height: bandW,
+        value: val, raw: row
+      };
+    });
+    bars.push({ category: cat, segments });
+    for (const seg of segments) {
+      children.push(rect({
+        x: seg.x, y: seg.y, w: Math.max(0, seg.width), h: Math.max(0, seg.height),
+        rx: Math.min(4, seg.height / 4), fill: seg.color,
+        class: 'd-chart-bar',
+        data: { series: seg.field, value: seg.value, label: cat },
+        key: `bar-h-${cat}-${seg.field}`
+      }));
+    }
+  }
+
+  const series = yFields.map((f, i) => ({ key: f, color: chartColor(i) }));
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'bar', series, bars, categories, margins, innerW, innerH, dataLength: data.length, horizontal: true });
+}
+
+function buildBars(data, spec, categories, yFields, xScale, yScale, bandW) {
+  if (spec.stacked && yFields.length > 1) {
+    return categories.map(cat => {
+      const row = data.find(d => d[spec.x] === cat);
+      if (!row) return null;
+      let cumY = 0;
+      const segments = yFields.map((f, i) => {
+        const val = +row[f] || 0;
+        const y0 = cumY;
+        cumY += val;
+        return {
+          field: f, color: chartColor(i),
+          x: xScale(cat), y: yScale(cumY), width: bandW,
+          height: yScale(y0) - yScale(cumY), value: val, raw: row
+        };
+      });
+      return { category: cat, segments };
+    }).filter(Boolean);
+  }
+
+  if (yFields.length > 1) {
+    const groupBandW = bandW / yFields.length;
+    return categories.map(cat => {
+      const row = data.find(d => d[spec.x] === cat);
+      if (!row) return null;
+      const segments = yFields.map((f, i) => {
+        const val = +row[f] || 0;
+        return {
+          field: f, color: chartColor(i),
+          x: xScale(cat) + i * groupBandW, y: yScale(val),
+          width: groupBandW * 0.85, height: yScale(0) - yScale(val),
+          value: val, raw: row
+        };
+      });
+      return { category: cat, segments };
+    }).filter(Boolean);
+  }
+
+  return data.map(d => {
+    const val = +d[yFields[0]] || 0;
+    return {
+      category: d[spec.x],
+      segments: [{
+        field: yFields[0], color: chartColor(0),
+        x: xScale(d[spec.x]), y: yScale(val), width: bandW,
+        height: yScale(0) - yScale(val), value: val, raw: d
+      }]
+    };
+  });
+}

package/src/chart/types/box-plot.js

@@ -0,0 +1,125 @@
+/**
+ * Box Plot chart layout.
+ * Supports: multi-series, horizontal, whisker types (min-max, 1.5IQR).
+ * @module types/box-plot
+ */
+
+import { scene, group, rect, line, circle, text } from '../_scene.js';
+import { cartesian } from '../layouts/cartesian.js';
+import { chartColor, MARGINS, innerDimensions, buildGridNodes, buildYAxisNodes } from '../layouts/_layout-base.js';
+import { resolve, unique, scaleBand, scaleLinear, extent } from '../_shared.js';
+
+export function layoutBoxPlot(spec, width, height) {
+  const data = resolve(spec.data);
+  const xField = spec.x;
+  const yField = Array.isArray(spec.y) ? spec.y[0] : spec.y;
+  const whiskerType = spec.whiskerType || '1.5IQR';
+  const categories = unique(data, xField);
+
+  const margins = { ...MARGINS };
+  const { innerW, innerH } = innerDimensions(width, height, margins);
+
+  const xScale = scaleBand(categories, [0, innerW], 0.3);
+  const bandW = xScale.bandwidth();
+
+  // Compute box stats per category
+  const boxes = categories.map((cat, ci) => {
+    const values = data.filter(d => d[xField] === cat).map(d => +d[yField]).sort((a, b) => a - b);
+    return { category: cat, color: chartColor(ci), ...computeBoxStats(values, whiskerType) };
+  });
+
+  // Y scale from overall range
+  let yMin = Infinity, yMax = -Infinity;
+  for (const b of boxes) {
+    if (b.whiskerLow < yMin) yMin = b.whiskerLow;
+    if (b.whiskerHigh > yMax) yMax = b.whiskerHigh;
+    for (const o of b.outliers) {
+      if (o < yMin) yMin = o;
+      if (o > yMax) yMax = o;
+    }
+  }
+  const pad = (yMax - yMin) * 0.1 || 1;
+  const yScale = scaleLinear([yMin - pad, yMax + pad], [innerH, 0]);
+
+  const children = [];
+  if (spec.grid !== false) children.push(...buildGridNodes(yScale, innerW));
+
+  // X axis labels
+  children.push(line({ x1: 0, y1: innerH, x2: innerW, y2: innerH, stroke: 'var(--d-border)', class: 'd-chart-axis' }));
+  for (const cat of categories) {
+    const x = xScale(cat) + bandW / 2;
+    children.push(text({ x, y: innerH + 18, content: String(cat), anchor: 'middle', class: 'd-chart-axis' }));
+  }
+  children.push(...buildYAxisNodes(yScale, innerH, spec));
+
+  // Draw boxes
+  for (const b of boxes) {
+    const cx = xScale(b.category) + bandW / 2;
+    const boxW = bandW * 0.6;
+    const x0 = cx - boxW / 2;
+
+    // Whisker lines
+    children.push(line({ x1: cx, y1: yScale(b.whiskerHigh), x2: cx, y2: yScale(b.q3), stroke: b.color, strokeWidth: 1.5, strokeDash: '3,2' }));
+    children.push(line({ x1: cx, y1: yScale(b.q1), x2: cx, y2: yScale(b.whiskerLow), stroke: b.color, strokeWidth: 1.5, strokeDash: '3,2' }));
+
+    // Whisker caps
+    const capW = boxW * 0.4;
+    children.push(line({ x1: cx - capW, y1: yScale(b.whiskerHigh), x2: cx + capW, y2: yScale(b.whiskerHigh), stroke: b.color, strokeWidth: 1.5 }));
+    children.push(line({ x1: cx - capW, y1: yScale(b.whiskerLow), x2: cx + capW, y2: yScale(b.whiskerLow), stroke: b.color, strokeWidth: 1.5 }));
+
+    // Box (Q1 to Q3)
+    children.push(rect({
+      x: x0, y: yScale(b.q3), w: boxW, h: yScale(b.q1) - yScale(b.q3),
+      fill: b.color, opacity: 0.3, stroke: b.color, strokeWidth: 1.5,
+      class: 'd-chart-bar',
+      data: { label: b.category, value: `Q1:${b.q1.toFixed(1)} Med:${b.median.toFixed(1)} Q3:${b.q3.toFixed(1)}`, series: b.category },
+      key: `box-${b.category}`
+    }));
+
+    // Median line
+    children.push(line({ x1: x0, y1: yScale(b.median), x2: x0 + boxW, y2: yScale(b.median), stroke: b.color, strokeWidth: 2 }));
+
+    // Outliers
+    for (const o of b.outliers) {
+      children.push(circle({ cx, cy: yScale(o), r: 3, fill: 'none', stroke: b.color, strokeWidth: 1.5, class: 'd-chart-point' }));
+    }
+  }
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'box-plot', boxes, margins, innerW, innerH, dataLength: data.length });
+}
+
+function computeBoxStats(sorted, whiskerType) {
+  const n = sorted.length;
+  if (n === 0) return { q1: 0, median: 0, q3: 0, whiskerLow: 0, whiskerHigh: 0, outliers: [] };
+
+  const median = quantile(sorted, 0.5);
+  const q1 = quantile(sorted, 0.25);
+  const q3 = quantile(sorted, 0.75);
+  const iqr = q3 - q1;
+
+  let whiskerLow, whiskerHigh, outliers = [];
+
+  if (whiskerType === 'min-max') {
+    whiskerLow = sorted[0];
+    whiskerHigh = sorted[n - 1];
+  } else {
+    // 1.5 IQR
+    const lowerFence = q1 - 1.5 * iqr;
+    const upperFence = q3 + 1.5 * iqr;
+    whiskerLow = sorted.find(v => v >= lowerFence) ?? sorted[0];
+    whiskerHigh = [...sorted].reverse().find(v => v <= upperFence) ?? sorted[n - 1];
+    outliers = sorted.filter(v => v < lowerFence || v > upperFence);
+  }
+
+  return { q1, median, q3, whiskerLow, whiskerHigh, outliers };
+}
+
+function quantile(sorted, p) {
+  const idx = (sorted.length - 1) * p;
+  const lo = Math.floor(idx);
+  const hi = Math.ceil(idx);
+  if (lo === hi) return sorted[lo];
+  return sorted[lo] + (sorted[hi] - sorted[lo]) * (idx - lo);
+}

package/src/chart/types/bubble.js

@@ -0,0 +1,63 @@
+/**
+ * Bubble chart layout — scatter with size encoding.
+ * @module types/bubble
+ */
+
+import { scene, group, circle, text } from '../_scene.js';
+import { cartesian } from '../layouts/cartesian.js';
+import { chartColor } from '../layouts/_layout-base.js';
+import { resolve, groupBy, extent } from '../_shared.js';
+
+export function layoutBubble(spec, width, height) {
+  const data = resolve(spec.data);
+  const coords = cartesian(spec, width, height);
+  const { innerW, innerH, margins, xScale, yScale, xType, axisNodes, gridNodes } = coords;
+  const yField = Array.isArray(spec.y) ? spec.y[0] : spec.y;
+  const sizeField = spec.size || spec.z || yField;
+  const [sizeMin, sizeMax] = extent(data, sizeField);
+  const minR = 4, maxR = Math.min(innerW, innerH) / 12;
+
+  function bubbleR(v) {
+    const t = sizeMax > sizeMin ? (v - sizeMin) / (sizeMax - sizeMin) : 0.5;
+    return minR + Math.sqrt(t) * (maxR - minR);
+  }
+
+  let series;
+  if (spec.series) {
+    const groups = groupBy(data, spec.series);
+    series = [...groups.entries()].map(([key, rows], i) => ({
+      key, color: chartColor(i),
+      points: rows.map(d => ({ ...mapPt(d, spec, xScale, yScale, xType, yField), r: bubbleR(+d[sizeField]) }))
+    }));
+  } else {
+    series = [{ key: yField, color: chartColor(0),
+      points: data.map(d => ({ ...mapPt(d, spec, xScale, yScale, xType, yField), r: bubbleR(+d[sizeField]) }))
+    }];
+  }
+
+  const children = [];
+  if (spec.grid !== false) children.push(...gridNodes);
+  children.push(...axisNodes);
+
+  for (const s of series) {
+    for (let i = 0; i < s.points.length; i++) {
+      const p = s.points[i];
+      children.push(circle({
+        cx: p.x, cy: p.y, r: p.r,
+        fill: s.color, opacity: 0.7, class: 'd-chart-point',
+        data: { series: s.key, value: p.raw[yField], label: String(p.raw[spec.x]) },
+        key: `bubble-${s.key}-${i}`
+      }));
+    }
+  }
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'bubble', series, margins, innerW, innerH, dataLength: data.length });
+}
+
+function mapPt(d, spec, xScale, yScale, xType, yField) {
+  const xVal = xType === 'band' ? d[spec.x] : (xType === 'time' ? new Date(d[spec.x]) : +d[spec.x]);
+  const x = xScale(xVal) + (xType === 'band' ? xScale.bandwidth() / 2 : 0);
+  return { x, y: yScale(+d[yField]), raw: d };
+}

package/src/chart/types/candlestick.js

@@ -0,0 +1,115 @@
+/**
+ * Candlestick / OHLC chart layout.
+ * Supports: hollow variant, volume overlay.
+ * @module types/candlestick
+ */
+
+import { scene, group, rect, line, text } from '../_scene.js';
+import { MARGINS, innerDimensions, buildGridNodes, buildYAxisNodes, chartColor } from '../layouts/_layout-base.js';
+import { resolve, scaleBand, scaleLinear, unique, extent } from '../_shared.js';
+
+export function layoutCandlestick(spec, width, height) {
+  const data = resolve(spec.data);
+  const xField = spec.x;
+  const openField = spec.open || 'open';
+  const highField = spec.high || 'high';
+  const lowField = spec.low || 'low';
+  const closeField = spec.close || 'close';
+  const volumeField = spec.volume;
+
+  const margins = { ...MARGINS };
+  if (volumeField) margins.bottom += 60; // extra space for volume
+  const { innerW, innerH: rawInnerH } = innerDimensions(width, height, margins);
+  const volumeH = volumeField ? 50 : 0;
+  const innerH = rawInnerH - volumeH;
+
+  const categories = data.map(d => d[xField]);
+  const xScale = scaleBand(categories, [0, innerW], 0.1);
+  const bandW = xScale.bandwidth();
+
+  // Y scale from high/low range
+  let yMin = Infinity, yMax = -Infinity;
+  for (const d of data) {
+    const lo = +d[lowField], hi = +d[highField];
+    if (lo < yMin) yMin = lo;
+    if (hi > yMax) yMax = hi;
+  }
+  const pad = (yMax - yMin) * 0.05;
+  const yScale = scaleLinear([yMin - pad, yMax + pad], [innerH, 0]);
+
+  const children = [];
+  if (spec.grid !== false) children.push(...buildGridNodes(yScale, innerW));
+
+  // X axis
+  children.push(line({ x1: 0, y1: innerH, x2: innerW, y2: innerH, stroke: 'var(--d-border)', class: 'd-chart-axis' }));
+  // Show every Nth label to avoid overlap
+  const labelInterval = Math.max(1, Math.floor(categories.length / 8));
+  for (let i = 0; i < categories.length; i++) {
+    if (i % labelInterval !== 0) continue;
+    const x = xScale(categories[i]) + bandW / 2;
+    children.push(text({ x, y: innerH + 18, content: String(categories[i]), anchor: 'middle', class: 'd-chart-axis' }));
+  }
+  children.push(...buildYAxisNodes(yScale, innerH, spec));
+
+  // Candles
+  const upColor = 'var(--d-success)';
+  const downColor = 'var(--d-error)';
+
+  for (let i = 0; i < data.length; i++) {
+    const d = data[i];
+    const open = +d[openField], close = +d[closeField];
+    const high = +d[highField], low = +d[lowField];
+    const isUp = close >= open;
+    const color = isUp ? upColor : downColor;
+    const cx = xScale(d[xField]) + bandW / 2;
+    const bodyW = bandW * 0.6;
+
+    // Wick (high to low)
+    children.push(line({ x1: cx, y1: yScale(high), x2: cx, y2: yScale(low), stroke: color, strokeWidth: 1 }));
+
+    // Body
+    const bodyTop = yScale(Math.max(open, close));
+    const bodyBottom = yScale(Math.min(open, close));
+    const bodyH = Math.max(1, bodyBottom - bodyTop);
+
+    if (spec.hollow && isUp) {
+      children.push(rect({
+        x: cx - bodyW / 2, y: bodyTop, w: bodyW, h: bodyH,
+        fill: 'none', stroke: color, strokeWidth: 1.5,
+        class: 'd-chart-bar',
+        data: { label: String(d[xField]), value: `O:${open} H:${high} L:${low} C:${close}`, series: 'candle' },
+        key: `candle-${i}`
+      }));
+    } else {
+      children.push(rect({
+        x: cx - bodyW / 2, y: bodyTop, w: bodyW, h: bodyH,
+        fill: color, class: 'd-chart-bar',
+        data: { label: String(d[xField]), value: `O:${open} H:${high} L:${low} C:${close}`, series: 'candle' },
+        key: `candle-${i}`
+      }));
+    }
+  }
+
+  // Volume overlay
+  if (volumeField) {
+    const volMax = Math.max(...data.map(d => +d[volumeField] || 0), 1);
+    const volScale = scaleLinear([0, volMax], [0, volumeH]);
+    const volY0 = innerH + 30;
+
+    for (let i = 0; i < data.length; i++) {
+      const d = data[i];
+      const vol = +d[volumeField] || 0;
+      const isUp = +d[closeField] >= +d[openField];
+      const h = volScale(vol);
+      children.push(rect({
+        x: xScale(d[xField]), y: volY0 + volumeH - h, w: bandW, h,
+        fill: isUp ? upColor : downColor, opacity: 0.3,
+        key: `vol-${i}`
+      }));
+    }
+  }
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'candlestick', margins, innerW, innerH, dataLength: data.length });
+}