decantr 0.9.0

package/src/chart/types/scatter.js

@@ -0,0 +1,66 @@
+/**
+ * Scatter chart layout — produces scene graph.
+ * Supports: multi-series, custom markers, labels, multi-axis.
+ * @module types/scatter
+ */
+
+import { scene, group, circle, text } from '../_scene.js';
+import { cartesian } from '../layouts/cartesian.js';
+import { chartColor } from '../layouts/_layout-base.js';
+import { resolve, groupBy } from '../_shared.js';
+
+export function layoutScatter(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 markerSize = spec.markerSize || 4;
+
+  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 => mapPoint(d, spec, xScale, yScale, xType, yField))
+    }));
+  } else {
+    series = [{
+      key: yField, color: chartColor(0),
+      points: data.map(d => mapPoint(d, spec, xScale, yScale, xType, yField))
+    }];
+  }
+
+  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: markerSize,
+        fill: s.color, class: 'd-chart-point',
+        data: { series: s.key, value: p.raw[yField], label: String(p.raw[spec.x]) },
+        key: `scatter-${s.key}-${i}`
+      }));
+
+      if (spec.labels) {
+        children.push(text({
+          x: p.x, y: p.y - markerSize - 4,
+          content: String(p.raw[yField]), anchor: 'middle',
+          class: 'd-chart-axis', fontSize: 'var(--d-text-xs)'
+        }));
+      }
+    }
+  }
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'scatter', series, margins, innerW, innerH, dataLength: data.length });
+}
+
+function mapPoint(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/sparkline.js

@@ -0,0 +1,81 @@
+/**
+ * Sparkline layout — produces scene graph.
+ * Supports: line (default), bar, area variants.
+ * @module types/sparkline
+ */
+
+import { scene, path, rect } from '../_scene.js';
+import { pointsToPathD, areaPathD } from '../_scene.js';
+import { scaleLinear } from '../_shared.js';
+
+/**
+ * @param {Object} spec — resolved sparkline spec
+ * @param {number} width
+ * @param {number} height
+ * @returns {Object} scene graph
+ */
+export function layoutSparkline(spec, width, height) {
+  const data = Array.isArray(spec.data) ? spec.data : [];
+
+  const isFlat = data.length > 0 && typeof data[0] === 'number';
+  const points = isFlat
+    ? data.map((v, i) => ({ x: i, y: v }))
+    : data.map(d => ({ x: +d[spec.x], y: +d[spec.y] }));
+
+  if (points.length === 0) {
+    return scene(width, height, [], { type: 'sparkline', dataLength: 0 });
+  }
+
+  let xMin = Infinity, xMax = -Infinity, yMin = Infinity, yMax = -Infinity;
+  for (const p of points) {
+    if (p.x < xMin) xMin = p.x;
+    if (p.x > xMax) xMax = p.x;
+    if (p.y < yMin) yMin = p.y;
+    if (p.y > yMax) yMax = p.y;
+  }
+
+  const pad = 2;
+  const xScale = scaleLinear([xMin, xMax], [pad, width - pad]);
+  const yScale = scaleLinear([yMin, yMax], [height - pad, pad]);
+  const scaled = points.map(p => ({ x: xScale(p.x), y: yScale(p.y) }));
+
+  const variant = spec.variant || 'line';
+  const children = [];
+
+  if (variant === 'bar') {
+    // Bar sparkline
+    const barWidth = Math.max(1, (width - pad * 2) / points.length * 0.8);
+    const baseline = yScale(Math.max(0, yMin));
+    for (let i = 0; i < scaled.length; i++) {
+      children.push(rect({
+        x: scaled[i].x - barWidth / 2, y: Math.min(scaled[i].y, baseline),
+        w: barWidth, h: Math.abs(scaled[i].y - baseline),
+        fill: 'var(--d-chart-0,var(--d-primary))',
+        key: `spark-bar-${i}`
+      }));
+    }
+  } else if (variant === 'area') {
+    // Area sparkline
+    const baseline = height - pad;
+    const areaPoints = scaled.map(p => ({ x: p.x, y0: p.y, y1: baseline }));
+    children.push(path({
+      d: areaPathD(areaPoints),
+      fill: 'var(--d-chart-0,var(--d-primary))',
+      opacity: 0.15, class: 'd-chart-area'
+    }));
+    children.push(path({
+      d: pointsToPathD(scaled),
+      stroke: 'var(--d-chart-0,var(--d-primary))',
+      strokeWidth: 1.5, class: 'd-chart-line'
+    }));
+  } else {
+    // Line sparkline (default)
+    children.push(path({
+      d: pointsToPathD(scaled),
+      stroke: 'var(--d-chart-0,var(--d-primary))',
+      strokeWidth: 1.5, class: 'd-chart-line'
+    }));
+  }
+
+  return scene(width, height, children, { type: 'sparkline', dataLength: points.length });
+}

package/src/chart/types/sunburst.js

@@ -0,0 +1,69 @@
+/**
+ * Sunburst chart layout.
+ * Supports: nesting, color range, drill-down.
+ * @module types/sunburst
+ */
+
+import { scene, arc, text } from '../_scene.js';
+import { buildHierarchy, sunburstLayout } from '../layouts/hierarchy.js';
+import { polar, polarPoint } from '../layouts/polar.js';
+import { chartColor, MARGINS_NONE } from '../layouts/_layout-base.js';
+import { resolve } from '../_shared.js';
+
+export function layoutSunburst(spec, width, height) {
+  const data = resolve(spec.data);
+  const idField = spec.id || 'id';
+  const parentField = spec.parent || 'parent';
+  const valueField = spec.value || (Array.isArray(spec.y) ? spec.y[0] : (spec.y !== 'y' ? spec.y : null)) || 'value';
+  const labelField = spec.label || spec.x || idField;
+  const maxDepth = spec.maxDepth || 4;
+
+  const coords = polar(width, height, { innerRadiusRatio: 0.15, padding: 16 });
+  const { cx, cy, radius, innerRadius } = coords;
+
+  const root = buildHierarchy(data, idField, parentField, valueField);
+  const segments = sunburstLayout(root, cx, cy, radius, innerRadius, maxDepth);
+
+  const children = [];
+  const series = [];
+
+  for (const seg of segments) {
+    const color = chartColor((seg.depth - 1) % 8);
+    const opacity = 0.4 + 0.5 * (1 - (seg.depth - 1) / maxDepth);
+
+    children.push(arc({
+      cx: seg.cx, cy: seg.cy,
+      innerR: seg.innerR, outerR: seg.outerR,
+      startAngle: seg.startAngle, endAngle: seg.endAngle,
+      fill: color, opacity, class: 'd-chart-slice',
+      data: {
+        label: seg.data?.[labelField] || seg.id,
+        value: seg.value, series: 'sunburst',
+        ariaLabel: `${seg.data?.[labelField] || seg.id}: ${seg.value}`
+      },
+      key: `sunburst-${seg.id}`
+    }));
+
+    // Label for large enough segments
+    const angleSpan = seg.endAngle - seg.startAngle;
+    if (angleSpan > 0.3 && seg.outerR - seg.innerR > 20) {
+      const midAngle = (seg.startAngle + seg.endAngle) / 2;
+      const midR = (seg.innerR + seg.outerR) / 2;
+      const pt = polarPoint(cx, cy, midR, midAngle);
+      children.push(text({
+        x: pt.x, y: pt.y + 4,
+        content: String(seg.data?.[labelField] || seg.id).slice(0, 10),
+        anchor: 'middle', fill: 'var(--d-fg)',
+        fontSize: 'var(--d-text-xs)'
+      }));
+    }
+
+    series.push({ key: seg.id, color });
+  }
+
+  return scene(width, height, children, {
+    type: 'sunburst', series, segments,
+    margins: MARGINS_NONE, innerW: width, innerH: height,
+    cx, cy, radius, innerRadius, dataLength: data.length
+  });
+}

package/src/chart/types/swimlane.js

@@ -0,0 +1,88 @@
+/**
+ * Swimlane / Kanban chart layout.
+ * Supports: lanes, cards, drag-reorder callbacks.
+ * @module types/swimlane
+ */
+
+import { scene, group, rect, text, line } from '../_scene.js';
+import { chartColor, MARGINS } from '../layouts/_layout-base.js';
+import { resolve, groupBy, unique } from '../_shared.js';
+
+export function layoutSwimlane(spec, width, height) {
+  const rawData = resolve(spec.data);
+  // Support structured {lanes, items} or flat array
+  const data = Array.isArray(rawData) ? rawData : (rawData && rawData.items) || [];
+  const laneField = spec.lane || spec.x || 'lane';
+  const labelField = spec.label || spec.y || 'label';
+  const idField = spec.id || 'id';
+
+  const margins = { top: 40, right: 8, bottom: 8, left: 8 };
+  const innerW = width - margins.left - margins.right;
+  const innerH = height - margins.top - margins.bottom;
+
+  // Use explicit lanes array or derive from data
+  const lanesDef = rawData && rawData.lanes;
+  const lanes = lanesDef ? lanesDef.map(l => typeof l === 'string' ? l : l.label || l.id) : unique(data, laneField);
+  const laneIds = lanesDef ? lanesDef.map(l => typeof l === 'string' ? l : l.id) : lanes;
+  const laneW = innerW / (lanes.length || 1);
+  const cardPad = 8;
+  const cardH = 36;
+  const headerH = 28;
+
+  const children = [];
+
+  for (let li = 0; li < lanes.length; li++) {
+    const laneName = lanes[li];
+    const lx = li * laneW;
+    const color = chartColor(li);
+
+    // Lane background
+    children.push(rect({
+      x: lx + 2, y: 0, w: laneW - 4, h: innerH,
+      rx: 4, fill: color, opacity: 0.05,
+      key: `lane-bg-${li}`
+    }));
+
+    // Lane separator
+    if (li > 0) {
+      children.push(line({ x1: lx, y1: 0, x2: lx, y2: innerH, stroke: 'var(--d-border)', strokeWidth: 1 }));
+    }
+
+    // Lane header
+    children.push(text({
+      x: lx + laneW / 2, y: headerH / 2 + 4,
+      content: String(laneName), anchor: 'middle',
+      fill: 'var(--d-fg)', fontSize: 'var(--d-text-sm)',
+      fontWeight: 'var(--d-fw-title)'
+    }));
+
+    // Cards — match by lane ID or lane label
+    const laneId = laneIds[li];
+    const laneData = data.filter(d => d[laneField] === laneId || d[laneField] === laneName);
+    for (let ci = 0; ci < laneData.length; ci++) {
+      const d = laneData[ci];
+      const cy = headerH + cardPad + ci * (cardH + cardPad);
+
+      children.push(rect({
+        x: lx + cardPad, y: cy, w: laneW - cardPad * 2, h: cardH,
+        rx: 4, fill: 'var(--d-surface-1)', stroke: 'var(--d-border)', strokeWidth: 1,
+        class: 'd-chart-bar',
+        data: { label: d[labelField] || d[idField], value: laneName, series: 'swimlane' },
+        key: `card-${d[idField] || `${li}-${ci}`}`
+      }));
+
+      children.push(text({
+        x: lx + cardPad + 8, y: cy + cardH / 2 + 4,
+        content: String(d[labelField] || d[idField] || '').slice(0, 25),
+        anchor: 'start', fill: 'var(--d-fg)',
+        fontSize: 'var(--d-text-xs)'
+      }));
+    }
+  }
+
+  const series = lanes.map((l, i) => ({ key: l, color: chartColor(i) }));
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'swimlane', series, lanes, margins, innerW, innerH, dataLength: data.length });
+}

package/src/chart/types/treemap.js

@@ -0,0 +1,62 @@
+/**
+ * Treemap chart layout.
+ * Supports: squarify/binary/slice, nesting, color range, drill-down.
+ * @module types/treemap
+ */
+
+import { scene, group, rect, text } from '../_scene.js';
+import { buildHierarchy, treemapLayout } from '../layouts/hierarchy.js';
+import { chartColor, MARGINS } from '../layouts/_layout-base.js';
+import { resolve } from '../_shared.js';
+
+export function layoutTreemap(spec, width, height) {
+  const data = resolve(spec.data);
+  const idField = spec.id || 'id';
+  const parentField = spec.parent || 'parent';
+  const valueField = spec.value || (Array.isArray(spec.y) ? spec.y[0] : (spec.y !== 'y' ? spec.y : null)) || 'value';
+  const labelField = spec.label || spec.x || idField;
+  const tile = spec.tile || 'squarify';
+
+  const margins = { top: 8, right: 8, bottom: 8, left: 8 };
+  const innerW = width - margins.left - margins.right;
+  const innerH = height - margins.top - margins.bottom;
+
+  const root = buildHierarchy(data, idField, parentField, valueField);
+  const rects = treemapLayout(root, 0, 0, innerW, innerH, tile);
+
+  const children = [];
+  const maxDepth = Math.max(...rects.map(r => r.depth), 1);
+
+  for (const r of rects) {
+    if (r.w < 2 || r.h < 2) continue;
+
+    const color = chartColor(r.depth % 8);
+    const opacity = r.depth === 0 ? 0 : 0.3 + 0.4 * (1 - r.depth / maxDepth);
+
+    children.push(rect({
+      x: r.x, y: r.y, w: r.w, h: r.h,
+      rx: 2, fill: color, opacity,
+      stroke: 'var(--d-bg)', strokeWidth: 2,
+      class: 'd-chart-bar',
+      data: {
+        label: r.data?.[labelField] || r.id,
+        value: r.value, series: 'treemap'
+      },
+      key: `treemap-${r.id}`
+    }));
+
+    // Label (only if cell is large enough)
+    if (r.w > 40 && r.h > 20 && r.children && r.data) {
+      children.push(text({
+        x: r.x + 4, y: r.y + 14,
+        content: r.data[labelField] || r.id,
+        anchor: 'start', fill: 'var(--d-fg)',
+        fontSize: 'var(--d-text-xs)'
+      }));
+    }
+  }
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'treemap', rects, margins, innerW, innerH, dataLength: data.length });
+}

package/src/chart/types/waterfall.js

@@ -0,0 +1,100 @@
+/**
+ * Waterfall chart layout.
+ * Supports: horizontal, connectors, subtotals.
+ * @module types/waterfall
+ */
+
+import { scene, group, rect, line, text } from '../_scene.js';
+import { MARGINS, innerDimensions, buildGridNodes, buildYAxisNodes } from '../layouts/_layout-base.js';
+import { resolve, unique, scaleBand, scaleLinear } from '../_shared.js';
+
+export function layoutWaterfall(spec, width, height) {
+  const data = resolve(spec.data);
+  const xField = spec.x;
+  const yField = Array.isArray(spec.y) ? spec.y[0] : spec.y;
+  const categories = data.map(d => d[xField]);
+
+  const margins = { ...MARGINS };
+  const { innerW, innerH } = innerDimensions(width, height, margins);
+  const xScale = scaleBand(categories, [0, innerW], 0.2);
+  const bandW = xScale.bandwidth();
+
+  // Compute running totals
+  const items = [];
+  let running = 0;
+  for (const d of data) {
+    const val = +d[yField] || 0;
+    const isTotal = d.total === true || d.subtotal === true;
+
+    if (isTotal) {
+      items.push({ label: d[xField], start: 0, end: running, value: running, isTotal: true, raw: d });
+    } else {
+      const start = running;
+      running += val;
+      items.push({ label: d[xField], start, end: running, value: val, isTotal: false, raw: d });
+    }
+  }
+
+  // Y scale
+  let yMin = 0, yMax = 0;
+  for (const it of items) {
+    yMin = Math.min(yMin, it.start, it.end);
+    yMax = Math.max(yMax, it.start, it.end);
+  }
+  const pad = (yMax - yMin) * 0.1 || 10;
+  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' }));
+  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));
+
+  // Bars + connectors
+  for (let i = 0; i < items.length; i++) {
+    const it = items[i];
+    const x = xScale(it.label);
+    const top = yScale(Math.max(it.start, it.end));
+    const bottom = yScale(Math.min(it.start, it.end));
+    const h = Math.max(1, bottom - top);
+
+    let color;
+    if (it.isTotal) color = 'var(--d-primary)';
+    else if (it.value >= 0) color = 'var(--d-success)';
+    else color = 'var(--d-error)';
+
+    children.push(rect({
+      x, y: top, w: bandW, h, rx: Math.min(4, bandW / 4), fill: color, class: 'd-chart-bar',
+      data: { label: it.label, value: it.value, series: 'waterfall' },
+      key: `wf-${i}`
+    }));
+
+    // Connector line to next bar
+    if (i < items.length - 1 && !items[i + 1].isTotal) {
+      const nextX = xScale(items[i + 1].label);
+      children.push(line({
+        x1: x + bandW, y1: yScale(it.end),
+        x2: nextX, y2: yScale(it.end),
+        stroke: 'var(--d-muted)', strokeDash: '3,2', strokeWidth: 1
+      }));
+    }
+
+    // Value label
+    if (spec.labels) {
+      children.push(text({
+        x: x + bandW / 2, y: top - 6,
+        content: it.value >= 0 ? `+${it.value}` : String(it.value),
+        anchor: 'middle', class: 'd-chart-axis', fontSize: 'var(--d-text-xs)'
+      }));
+    }
+  }
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'waterfall', items, margins, innerW, innerH, dataLength: data.length });
+}