@diagrammo/dgmo 0.47.0 → 0.48.1

package/src/charts-d3/bar.ts

@@ -1,338 +0,0 @@
-// ============================================================
-// Hand-built bar renderer.
-// Handles: single-series bar, multi-series `stack` (stacked) and `group`
-// (clustered side-by-side) layouts (chart.barLayout), horizontal orientation.
-// Matches the house style: 25% tint fill + full-strength border, per-category
-// colors for single series, value labels, 0-baseline.
-// ============================================================
-
-import { scaleBand, scaleLinear } from 'd3-scale';
-import { max as d3max } from 'd3-array';
-import type { ParsedChart } from '../chart';
-import type { PaletteColors } from '../palettes';
-import { FONT_FAMILY } from '../fonts';
-import { shapeFill } from '../palettes/color-utils';
-import {
-  type Svg,
-  type Margins,
-  TICK_FONT,
-  fmtNum,
-  reserveHeader,
-  computeLeftMargin,
-  drawXAxisTitle,
-  drawYAxisTitle,
-  drawValueLabel,
-  tagDatum,
-} from './shared';
-
-function seriesValues(
-  pt: { value: number; extraValues?: number[] },
-  seriesCount: number
-): number[] {
-  const out = [pt.value];
-  for (let s = 1; s < seriesCount; s++) out.push(pt.extraValues?.[s - 1] ?? 0);
-  return out;
-}
-
-export function renderBar(
-  svg: Svg,
-  chart: ParsedChart,
-  width: number,
-  height: number,
-  colors: string[],
-  palette: PaletteColors,
-  isDark: boolean,
-  textColor: string,
-  mutedColor: string,
-  hasTitle: boolean
-): void {
-  const data = chart.data;
-  const seriesNames = chart.seriesNames?.length
-    ? chart.seriesNames
-    : [chart.series ?? ''];
-  const stacked = chart.barLayout === 'stack';
-  const grouped = chart.barLayout === 'group';
-  // A `stack` or `group` block header makes it multi-series; plain `bar` (no
-  // layout header) is single-series. `stack` sums into one bar; `group` draws
-  // the series side by side via the `inner` band below.
-  const seriesCount =
-    stacked || grouped
-      ? Math.max(
-          1,
-          seriesNames.length,
-          1 + Math.max(0, ...data.map((d) => d.extraValues?.length ?? 0))
-        )
-      : 1;
-  const horizontal = chart.orientation === 'horizontal';
-  const multiSeries = seriesCount > 1;
-  const solid = chart.solidFill === true;
-
-  // Single series → each category gets its own palette color (ECharts parity).
-  // Multi series → color by series index.
-  const colorFor = (seriesIdx: number, catIdx: number, override?: string) => {
-    if (override) return override;
-    return multiSeries
-      ? colors[seriesIdx % colors.length]!
-      : colors[catIdx % colors.length]!;
-  };
-  const fillOf = (c: string) => (solid ? c : shapeFill(palette, c, isDark));
-
-  const top = reserveHeader(
-    svg,
-    chart,
-    colors,
-    palette,
-    isDark,
-    hasTitle,
-    width
-  );
-
-  const perCat = data.map((d) => seriesValues(d, seriesCount));
-  const maxVal = stacked
-    ? (d3max(perCat, (vals) => vals.reduce((a, b) => a + b, 0)) ?? 0)
-    : (d3max(perCat, (vals) => d3max(vals) ?? 0) ?? 0);
-  const niceMax = maxVal === 0 ? 1 : maxVal;
-
-  // Left margin must fit the rotated y-title + the left-edge labels: category
-  // names for horizontal bars, value ticks for vertical.
-  const leftLabels = horizontal
-    ? data.map((d) => d.label)
-    : [fmtNum(niceMax), fmtNum(niceMax / 2)];
-  const m: Margins = {
-    top: top + 8,
-    right: 32,
-    bottom: 64,
-    left: computeLeftMargin(chart.ylabel, leftLabels),
-  };
-
-  const plotW = width - m.left - m.right;
-  const plotH = height - m.top - m.bottom;
-  const horiz = horizontal;
-
-  const catRange: [number, number] = horiz
-    ? [m.top, m.top + plotH]
-    : [m.left, m.left + plotW];
-  const cat = scaleBand<string>()
-    .domain(data.map((d) => d.label))
-    .range(catRange)
-    .padding(0.3);
-  const valRange: [number, number] = horiz
-    ? [m.left, m.left + plotW]
-    : [m.top + plotH, m.top];
-  const val = scaleLinear().domain([0, niceMax]).nice().range(valRange);
-
-  // value-axis gridlines + ticks
-  for (const t of val.ticks(6)) {
-    if (horiz) {
-      const x = val(t);
-      svg
-        .append('line')
-        .attr('x1', x)
-        .attr('x2', x)
-        .attr('y1', m.top)
-        .attr('y2', m.top + plotH)
-        .attr('stroke', mutedColor)
-        .attr('stroke-opacity', t === 0 ? 0.6 : 0.25);
-      svg
-        .append('text')
-        .attr('x', x)
-        .attr('y', m.top + plotH + 18)
-        .attr('text-anchor', 'middle')
-        .attr('fill', textColor)
-        .attr('font-size', TICK_FONT)
-        .attr('font-family', FONT_FAMILY)
-        .text(fmtNum(t));
-    } else {
-      const y = val(t);
-      svg
-        .append('line')
-        .attr('x1', m.left)
-        .attr('x2', m.left + plotW)
-        .attr('y1', y)
-        .attr('y2', y)
-        .attr('stroke', mutedColor)
-        .attr('stroke-opacity', t === 0 ? 0.6 : 0.25);
-      svg
-        .append('text')
-        .attr('x', m.left - 10)
-        .attr('y', y + 4)
-        .attr('text-anchor', 'end')
-        .attr('fill', textColor)
-        .attr('font-size', TICK_FONT)
-        .attr('font-family', FONT_FAMILY)
-        .text(fmtNum(t));
-    }
-  }
-
-  // category labels
-  for (const d of data) {
-    const c = (cat(d.label) ?? 0) + cat.bandwidth() / 2;
-    if (horiz) {
-      svg
-        .append('text')
-        .attr('x', m.left - 10)
-        .attr('y', c + 4)
-        .attr('text-anchor', 'end')
-        .attr('fill', textColor)
-        .attr('font-size', TICK_FONT)
-        .attr('font-family', FONT_FAMILY)
-        .text(d.label);
-    } else {
-      svg
-        .append('text')
-        .attr('x', c)
-        .attr('y', m.top + plotH + 18)
-        .attr('text-anchor', 'middle')
-        .attr('fill', textColor)
-        .attr('font-size', TICK_FONT)
-        .attr('font-family', FONT_FAMILY)
-        .text(d.label);
-    }
-  }
-
-  const zero = val(0);
-  const inner = stacked
-    ? null
-    : scaleBand<number>()
-        .domain(seriesNames.map((_, i) => i))
-        .range([0, cat.bandwidth()])
-        .padding(0.12);
-
-  data.forEach((d, ci) => {
-    const base = cat(d.label) ?? 0;
-    const vals = seriesValues(d, seriesCount);
-    let acc = 0;
-    vals.forEach((v, s) => {
-      const stroke = colorFor(s, ci, seriesCount === 1 ? d.color : undefined);
-      const fill = fillOf(stroke);
-      const sName = seriesNames[s] ?? '';
-      const tag = {
-        line: d.lineNumber,
-        key: multiSeries ? sName : d.label,
-        name: multiSeries ? `${d.label} · ${sName}` : d.label,
-        value: v,
-        color: stroke,
-      };
-      if (stacked) {
-        if (horiz) {
-          const x0 = val(acc);
-          const x1 = val(acc + v);
-          rect(
-            svg,
-            Math.min(x0, x1),
-            base,
-            Math.abs(x1 - x0),
-            cat.bandwidth(),
-            fill,
-            stroke,
-            tag
-          );
-          if (Math.abs(x1 - x0) > 26)
-            drawValueLabel(
-              svg,
-              fmtNum(v),
-              (x0 + x1) / 2,
-              base + cat.bandwidth() / 2 + 4,
-              textColor
-            );
-        } else {
-          const y0 = val(acc);
-          const y1 = val(acc + v);
-          rect(
-            svg,
-            base,
-            Math.min(y0, y1),
-            cat.bandwidth(),
-            Math.abs(y1 - y0),
-            fill,
-            stroke,
-            tag
-          );
-          if (Math.abs(y1 - y0) > 18)
-            drawValueLabel(
-              svg,
-              fmtNum(v),
-              base + cat.bandwidth() / 2,
-              (y0 + y1) / 2 + 4,
-              textColor
-            );
-        }
-        acc += v;
-      } else {
-        const off = inner!(s) ?? 0;
-        const bw = inner!.bandwidth();
-        if (horiz) {
-          const x1 = val(v);
-          rect(
-            svg,
-            Math.min(zero, x1),
-            base + off,
-            Math.abs(x1 - zero),
-            bw,
-            fill,
-            stroke,
-            tag
-          );
-          drawValueLabel(
-            svg,
-            fmtNum(v),
-            x1 + 6,
-            base + off + bw / 2 + 4,
-            textColor,
-            'start'
-          );
-        } else {
-          const y1 = val(v);
-          rect(
-            svg,
-            base + off,
-            Math.min(zero, y1),
-            bw,
-            Math.abs(zero - y1),
-            fill,
-            stroke,
-            tag
-          );
-          drawValueLabel(
-            svg,
-            fmtNum(v),
-            base + off + bw / 2,
-            y1 - 6,
-            textColor
-          );
-        }
-      }
-    });
-  });
-
-  drawXAxisTitle(
-    svg,
-    chart.xlabel,
-    m.left + plotW / 2,
-    m.top + plotH + 46,
-    textColor
-  );
-  drawYAxisTitle(svg, chart.ylabel, m.top + plotH / 2, 20, textColor);
-}
-
-function rect(
-  svg: Svg,
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  fill: string,
-  stroke: string,
-  tag: { line: number; key: string; name: string; value: number; color: string }
-): void {
-  const r = svg
-    .append('rect')
-    .attr('x', x)
-    .attr('y', y)
-    .attr('width', w)
-    .attr('height', h)
-    .attr('fill', fill)
-    .attr('stroke', stroke)
-    .attr('stroke-width', 1.5);
-  tagDatum(r, tag);
-}

package/src/charts-d3/chord.ts

@@ -1,140 +0,0 @@
-// ============================================================
-// Hand-built chord renderer — SPIKE (Tier 3).
-// Mirrors the ECharts treatment: a CIRCULAR GRAPH (nodes evenly on a circle,
-// curved bezier edges, width ∝ value, arrowheads for directed links), NOT
-// true chord ribbons.
-// ============================================================
-
-import type { ParsedChord } from '../data-chart-parser';
-import type { PaletteColors } from '../palettes';
-import { FONT_FAMILY } from '../fonts';
-import { shapeFill } from '../palettes/color-utils';
-import { measureText } from '../utils/text-measure';
-import { type Svg, tagDatum } from './shared';
-
-export function renderChord(
-  svg: Svg,
-  chart: ParsedChord,
-  width: number,
-  height: number,
-  colors: string[],
-  palette: PaletteColors,
-  isDark: boolean,
-  textColor: string,
-  topInset: number
-): void {
-  const links = chart.links ?? [];
-  if (links.length === 0) return;
-  const solid = chart.solidFill === true;
-
-  const names = Array.from(new Set(links.flatMap((l) => [l.source, l.target])));
-  const n = names.length;
-  const idx = new Map(names.map((nm, i) => [nm, i]));
-  const colorOf = (i: number) => colors[i % colors.length]!;
-
-  const top = topInset + 8;
-  const cx = width / 2;
-  const cy = top + (height - top) / 2;
-  const maxLabel = Math.max(0, ...names.map((nm) => measureText(nm, 14)));
-  const radius = Math.min(width / 2 - maxLabel - 60, (height - top) / 2 - 50);
-
-  const angle = (i: number) => -Math.PI / 2 + (i * 2 * Math.PI) / n;
-  const pos = (i: number): [number, number] => [
-    cx + Math.cos(angle(i)) * radius,
-    cy + Math.sin(angle(i)) * radius,
-  ];
-
-  // opposing-pair detection (offset curvature so A→B and B→A don't overlap)
-  const pairKeys = new Set<string>();
-  for (const l of links) {
-    if (
-      links.some(
-        (r) => r.source === l.target && r.target === l.source && r !== l
-      )
-    )
-      pairKeys.add(`${l.source}\0${l.target}`);
-  }
-
-  // edges (drawn under nodes)
-  for (const link of links) {
-    const si = idx.get(link.source)!;
-    const ti = idx.get(link.target)!;
-    const [x0, y0] = pos(si);
-    const [x1, y1] = pos(ti);
-    const hasOpp = pairKeys.has(`${link.source}\0${link.target}`);
-    const base = 0.3;
-    const curve = hasOpp
-      ? link.source < link.target
-        ? base + 0.15
-        : base - 0.15
-      : base;
-    // control point pulled toward center → chord-like inward arc
-    const mx = (x0 + x1) / 2;
-    const my = (y0 + y1) / 2;
-    const ctrlX = mx + (cx - mx) * curve * 2;
-    const ctrlY = my + (cy - my) * curve * 2;
-    const w = Math.max(1, Math.min(link.value / 20, 10));
-    const stroke = colorOf(si);
-    const edge = svg
-      .append('path')
-      .attr('d', `M${x0},${y0} Q${ctrlX},${ctrlY} ${x1},${y1}`)
-      .attr('fill', 'none')
-      .attr('stroke', stroke)
-      .attr('stroke-width', w)
-      .attr('stroke-opacity', 0.6);
-    tagDatum(edge, {
-      line: link.lineNumber,
-      key: `edge:${link.source} ${link.target}`,
-      name: `${link.source} → ${link.target}`,
-      value: String(link.value),
-      color: stroke,
-    });
-    if (link.directed) {
-      // arrowhead at target, oriented along tangent (from control point)
-      const ang = Math.atan2(y1 - ctrlY, x1 - ctrlX);
-      const ah = 11;
-      const tipX = x1 - Math.cos(ang) * 10;
-      const tipY = y1 - Math.sin(ang) * 10;
-      const a1 = ang + Math.PI - 0.4;
-      const a2 = ang + Math.PI + 0.4;
-      svg
-        .append('polygon')
-        .attr(
-          'points',
-          `${tipX},${tipY} ${tipX + Math.cos(a1) * ah},${tipY + Math.sin(a1) * ah} ${tipX + Math.cos(a2) * ah},${tipY + Math.sin(a2) * ah}`
-        )
-        .attr('fill', stroke)
-        .attr('fill-opacity', 0.7);
-    }
-  }
-
-  // nodes + labels
-  names.forEach((nm, i) => {
-    const [px, py] = pos(i);
-    const stroke = colorOf(i);
-    const dot = svg
-      .append('circle')
-      .attr('cx', px)
-      .attr('cy', py)
-      .attr('r', 10)
-      .attr('fill', solid ? stroke : shapeFill(palette, stroke, isDark))
-      .attr('stroke', stroke)
-      .attr('stroke-width', 2);
-    tagDatum(dot, { key: `node:${nm}`, name: nm, color: stroke });
-    const c = Math.cos(angle(i));
-    const lx = px + c * 16;
-    const ly = py + Math.sin(angle(i)) * 16;
-    svg
-      .append('text')
-      .attr('x', lx)
-      .attr('y', ly + 4)
-      .attr(
-        'text-anchor',
-        Math.abs(c) < 0.3 ? 'middle' : c > 0 ? 'start' : 'end'
-      )
-      .attr('fill', textColor)
-      .attr('font-size', 14)
-      .attr('font-family', FONT_FAMILY)
-      .text(nm);
-  });
-}

package/src/charts-d3/function.ts

@@ -1,147 +0,0 @@
-// ============================================================
-// Hand-built function-plot renderer — SPIKE (Tier 3).
-// Evaluates each expression over the x-range and draws one line per function.
-// ============================================================
-
-import { scaleLinear } from 'd3-scale';
-import { line as d3line } from 'd3-shape';
-import type { ParsedFunctionChart } from '../data-chart-parser';
-import { FONT_FAMILY } from '../fonts';
-import { evaluateExpression } from '../utils/expr-eval';
-import {
-  type Svg,
-  type Margins,
-  TICK_FONT,
-  fmtNum,
-  computeLeftMargin,
-  drawXAxisTitle,
-  drawYAxisTitle,
-  tagDatum,
-} from './shared';
-
-const SAMPLES = 200;
-
-export function renderFunction(
-  svg: Svg,
-  chart: ParsedFunctionChart,
-  width: number,
-  height: number,
-  colors: string[],
-  textColor: string,
-  mutedColor: string,
-  topInset: number
-): void {
-  const fns = chart.functions ?? [];
-  if (fns.length === 0) return;
-  const xr = chart.xRange ?? { min: -10, max: 10 };
-  const step = (xr.max - xr.min) / SAMPLES;
-  const xs: number[] = [];
-  for (let i = 0; i <= SAMPLES; i++) xs.push(xr.min + i * step);
-
-  const curves = fns.map((fn, i) => ({
-    color: fn.color ?? colors[i % colors.length]!,
-    name: fn.name,
-    line: fn.lineNumber,
-    pts: xs.map(
-      (x) => [x, evaluateExpression(fn.expression, x)] as [number, number]
-    ),
-  }));
-
-  let yLo = Infinity;
-  let yHi = -Infinity;
-  for (const c of curves)
-    for (const [, y] of c.pts)
-      if (isFinite(y)) {
-        yLo = Math.min(yLo, y);
-        yHi = Math.max(yHi, y);
-      }
-  if (!isFinite(yLo)) {
-    yLo = -1;
-    yHi = 1;
-  }
-  if (yLo === yHi) yHi = yLo + 1;
-
-  const m: Margins = {
-    top: topInset + 8,
-    right: 32,
-    bottom: 64,
-    left: computeLeftMargin(chart.ylabel, [fmtNum(yHi), fmtNum(yLo)]),
-  };
-  const plotW = width - m.left - m.right;
-  const plotH = height - m.top - m.bottom;
-  const x = scaleLinear()
-    .domain([xr.min, xr.max])
-    .range([m.left, m.left + plotW]);
-  const y = scaleLinear()
-    .domain([yLo, yHi])
-    .nice()
-    .range([m.top + plotH, m.top]);
-
-  // gridlines + ticks
-  for (const t of y.ticks(8)) {
-    const yy = y(t);
-    svg
-      .append('line')
-      .attr('x1', m.left)
-      .attr('x2', m.left + plotW)
-      .attr('y1', yy)
-      .attr('y2', yy)
-      .attr('stroke', mutedColor)
-      .attr('stroke-opacity', t === 0 ? 0.6 : 0.2);
-    svg
-      .append('text')
-      .attr('class', 'dgmo-tick')
-      .attr('x', m.left - 10)
-      .attr('y', yy + 4)
-      .attr('text-anchor', 'end')
-      .attr('fill', textColor)
-      .attr('font-size', TICK_FONT)
-      .attr('font-family', FONT_FAMILY)
-      .text(fmtNum(t));
-  }
-  for (const t of x.ticks(10)) {
-    const xx = x(t);
-    svg
-      .append('line')
-      .attr('x1', xx)
-      .attr('x2', xx)
-      .attr('y1', m.top)
-      .attr('y2', m.top + plotH)
-      .attr('stroke', mutedColor)
-      .attr('stroke-opacity', t === 0 ? 0.6 : 0.2);
-    svg
-      .append('text')
-      .attr('class', 'dgmo-tick')
-      .attr('x', xx)
-      .attr('y', m.top + plotH + 18)
-      .attr('text-anchor', 'middle')
-      .attr('fill', textColor)
-      .attr('font-size', TICK_FONT)
-      .attr('font-family', FONT_FAMILY)
-      .text(fmtNum(t));
-  }
-
-  const gen = d3line<[number, number]>()
-    .defined((p) => isFinite(p[1]) && p[1] >= yLo - 1 && p[1] <= yHi + 1)
-    .x((p) => x(p[0]))
-    .y((p) => y(p[1]));
-  for (const c of curves) {
-    const path = svg
-      .append('path')
-      .attr('d', gen(c.pts) ?? '')
-      .attr('fill', 'none')
-      .attr('stroke', c.color)
-      .attr('stroke-width', 2.5)
-      .attr('stroke-linejoin', 'round');
-    tagDatum(path, { line: c.line, key: c.name, name: c.name, color: c.color });
-  }
-
-  drawXAxisTitle(
-    svg,
-    chart.xlabel,
-    m.left + plotW / 2,
-    m.top + plotH + 46,
-    textColor
-  );
-  drawYAxisTitle(svg, chart.ylabel, m.top + plotH / 2, 20, textColor);
-}