@diagrammo/dgmo 0.46.0 → 0.48.0

package/src/charts-d3/funnel.ts

@@ -1,104 +0,0 @@
-// ============================================================
-// Hand-built funnel renderer — SPIKE (Tier 2).
-// Descending-sorted trapezoids, width ∝ value, minSize 8%, names left /
-// values right with leader lines (ECharts parity).
-// ============================================================
-
-import type { ParsedFunnel } from '../data-chart-parser';
-import type { PaletteColors } from '../palettes';
-import { FONT_FAMILY } from '../fonts';
-import { shapeFill } from '../palettes/color-utils';
-import { type Svg, fmtNum, tagDatum } from './shared';
-
-export function renderFunnel(
-  svg: Svg,
-  chart: ParsedFunnel,
-  width: number,
-  height: number,
-  colors: string[],
-  palette: PaletteColors,
-  isDark: boolean,
-  textColor: string,
-  topInset: number
-): void {
-  const sorted = [...chart.data].sort((a, b) => b.value - a.value);
-  const n = sorted.length;
-  if (n === 0) return;
-  const solid = chart.solidFill === true;
-
-  const plotLeft = width * 0.2;
-  const plotW = width * 0.6;
-  const cx = width / 2;
-  const top = topInset + 8;
-  const bottom = height - 30;
-  const H = bottom - top;
-  const bandH = H / n;
-  const maxValue = sorted[0]!.value || 1;
-  const minW = plotW * 0.08;
-  const scaleW = (v: number) => Math.max(minW, (v / maxValue) * plotW);
-
-  sorted.forEach((d, i) => {
-    const stroke = d.color ?? colors[chart.data.indexOf(d) % colors.length]!;
-    const fill = solid ? stroke : shapeFill(palette, stroke, isDark);
-    const topW = scaleW(d.value);
-    const botW = i < n - 1 ? scaleW(sorted[i + 1]!.value) : minW;
-    const y0 = top + i * bandH;
-    const y1 = y0 + bandH;
-    const seg = svg
-      .append('polygon')
-      .attr(
-        'points',
-        `${cx - topW / 2},${y0} ${cx + topW / 2},${y0} ${cx + botW / 2},${y1} ${cx - botW / 2},${y1}`
-      )
-      .attr('fill', fill)
-      .attr('stroke', stroke)
-      .attr('stroke-width', 2);
-    tagDatum(seg, {
-      line: d.lineNumber,
-      key: d.label,
-      name: d.label,
-      value: fmtNum(d.value),
-      color: stroke,
-    });
-
-    const yMid = (y0 + y1) / 2;
-    if (!chart.noName) {
-      svg
-        .append('line')
-        .attr('x1', plotLeft - 8)
-        .attr('y1', yMid)
-        .attr('x2', cx - topW / 2)
-        .attr('y2', yMid)
-        .attr('stroke', textColor)
-        .attr('stroke-opacity', 0.3);
-      svg
-        .append('text')
-        .attr('x', plotLeft - 12)
-        .attr('y', yMid + 4)
-        .attr('text-anchor', 'end')
-        .attr('fill', textColor)
-        .attr('font-size', 13)
-        .attr('font-family', FONT_FAMILY)
-        .text(d.label);
-    }
-    if (!chart.noValue) {
-      svg
-        .append('line')
-        .attr('x1', cx + topW / 2)
-        .attr('y1', yMid)
-        .attr('x2', plotLeft + plotW + 8)
-        .attr('y2', yMid)
-        .attr('stroke', textColor)
-        .attr('stroke-opacity', 0.3);
-      svg
-        .append('text')
-        .attr('x', plotLeft + plotW + 12)
-        .attr('y', yMid + 4)
-        .attr('text-anchor', 'start')
-        .attr('fill', textColor)
-        .attr('font-size', 13)
-        .attr('font-family', FONT_FAMILY)
-        .text(fmtNum(d.value));
-    }
-  });
-}

package/src/charts-d3/heatmap.ts

@@ -1,145 +0,0 @@
-// ============================================================
-// Hand-built heatmap renderer — SPIKE (Tier 2).
-// Matrix of cells, 4-color gradient fill (primary→cyan→yellow→orange),
-// per-cell label tint matching the cell color (ECharts parity).
-// ============================================================
-
-import type { ParsedHeatmap } from '../data-chart-parser';
-import type { PaletteColors } from '../palettes';
-import { FONT_FAMILY } from '../fonts';
-import { shapeFill, mix, hexToHSL, hslToHex } from '../palettes/color-utils';
-import { measureText } from '../utils/text-measure';
-import type { Svg } from './shared';
-import { fmtNum, tagDatum } from './shared';
-
-export function renderHeatmap(
-  svg: Svg,
-  chart: ParsedHeatmap,
-  width: number,
-  height: number,
-  palette: PaletteColors,
-  isDark: boolean,
-  textColor: string,
-  bgColor: string,
-  topInset: number
-): void {
-  const rows = chart.heatmapRows ?? [];
-  if (rows.length === 0) return;
-  const ncols = Math.max(
-    chart.columns?.length ?? 0,
-    ...rows.map((r) => r.values.length)
-  );
-  const nrows = rows.length;
-  const cols = chart.columns ?? [];
-
-  let minValue = Infinity;
-  let maxValue = -Infinity;
-  for (const r of rows)
-    for (const v of r.values) {
-      minValue = Math.min(minValue, v);
-      maxValue = Math.max(maxValue, v);
-    }
-
-  const solid = chart.solidFill === true;
-  const gradientStops = [
-    shapeFill(palette, palette.primary, isDark, { solid }),
-    shapeFill(palette, palette.colors.cyan, isDark, { solid }),
-    shapeFill(palette, palette.colors.yellow, isDark, { solid }),
-    shapeFill(palette, palette.colors.orange, isDark, { solid }),
-  ];
-  const gradientAt = (t: number): string => {
-    const tt = Math.max(0, Math.min(1, t));
-    const seg = 1 / (gradientStops.length - 1);
-    const idx = Math.min(gradientStops.length - 2, Math.floor(tt / seg));
-    const localT = (tt - idx * seg) / seg;
-    return mix(gradientStops[idx + 1]!, gradientStops[idx]!, localT * 100);
-  };
-  const labelTint = (cellColor: string): string => {
-    const { h, s } = hexToHSL(cellColor);
-    const targetS = Math.min(75, Math.max(s + 25, 50));
-    const targetL = isDark ? 72 : 30;
-    return hslToHex(h, targetS, targetL);
-  };
-
-  const rowLabelW =
-    Math.max(0, ...rows.map((r) => measureText(r.label, 13))) + 16;
-  const left = 20 + rowLabelW;
-  const top = topInset + 28; // room for column labels
-  const right = 24;
-  const bottom = 24;
-  const plotW = width - left - right;
-  const plotH = height - top - bottom;
-  const cw = plotW / ncols;
-  const ch = plotH / nrows;
-  const cellFont = Math.max(11, Math.min(18, Math.min(cw, ch) * 0.28));
-
-  // column labels (rotate if wide)
-  const rotate = cols.some((c) => measureText(c, 12) > cw * 0.85);
-  cols.forEach((c, ci) => {
-    const x = left + ci * cw + cw / 2;
-    const t = svg
-      .append('text')
-      .attr('fill', textColor)
-      .attr('font-size', 12)
-      .attr('font-family', FONT_FAMILY)
-      .text(c);
-    if (rotate) {
-      t.attr('transform', `translate(${x},${top - 8}) rotate(-40)`).attr(
-        'text-anchor',
-        'start'
-      );
-    } else {
-      t.attr('x', x)
-        .attr('y', top - 8)
-        .attr('text-anchor', 'middle');
-    }
-  });
-
-  rows.forEach((row, ri) => {
-    // row label
-    svg
-      .append('text')
-      .attr('x', left - 10)
-      .attr('y', top + ri * ch + ch / 2 + 4)
-      .attr('text-anchor', 'end')
-      .attr('fill', textColor)
-      .attr('font-size', 13)
-      .attr('font-family', FONT_FAMILY)
-      .text(row.label);
-
-    row.values.forEach((v, ci) => {
-      const t =
-        maxValue === minValue ? 0.5 : (v - minValue) / (maxValue - minValue);
-      const cell = gradientAt(t);
-      const colLabel = cols[ci] ?? `Col ${ci + 1}`;
-      const r = svg
-        .append('rect')
-        .attr('x', left + ci * cw)
-        .attr('y', top + ri * ch)
-        .attr('width', cw)
-        .attr('height', ch)
-        .attr('fill', cell)
-        .attr('stroke', bgColor)
-        .attr('stroke-width', 2);
-      tagDatum(r, {
-        line: row.lineNumber,
-        key: row.label,
-        name: `${row.label} · ${colLabel}`,
-        value: fmtNum(v),
-        color: cell,
-      });
-      if (!chart.noValue) {
-        svg
-          .append('text')
-          .attr('x', left + ci * cw + cw / 2)
-          .attr('y', top + ri * ch + ch / 2 + cellFont / 3)
-          .attr('text-anchor', 'middle')
-          .attr('fill', labelTint(cell))
-          .attr('font-size', cellFont)
-          .attr('font-weight', 600)
-          .attr('font-family', FONT_FAMILY)
-          .text(fmtNum(v));
-      }
-    });
-  });
-}

package/src/charts-d3/index.ts

@@ -1,337 +0,0 @@
-// ============================================================
-// Hand-built (D3) data-chart renderer — SPIKE entry point.
-//
-// Drop-in alternative to the ECharts path. render() routes here when
-// `engine: 'd3'` is requested; everything else still flows through echarts.ts.
-// Tier 1: bar/line/pie (parseChart).
-// Tier 2: radar/polar-area (parseChart) + funnel/heatmap/scatter
-// (parseExtendedChart).
-// ============================================================
-
-import { parseChart } from '../chart';
-import { getSimpleChartLegendGroups } from '../data-chart-parser';
-import {
-  parseExtendedChart,
-  getExtendedChartLegendGroups,
-  type ParsedFunnel,
-  type ParsedHeatmap,
-  type ParsedScatter,
-  type ParsedSankey,
-  type ParsedChord,
-  type ParsedFunctionChart,
-} from '../data-chart-parser';
-import type { PaletteColors } from '../palettes';
-import { getSeriesColors } from '../palettes/color-utils';
-import {
-  initD3Chart,
-  renderChartTitle,
-  createExportContainer,
-  finalizeSvgExport,
-  resolveExportPalette,
-  EXPORT_WIDTH,
-  EXPORT_HEIGHT,
-} from '../utils/d3-helpers';
-import { injectLegendGroups, type Svg } from './shared';
-import { renderBar } from './bar';
-import { renderLine } from './line';
-import { renderPie } from './pie';
-import { renderRadar } from './radar';
-import { renderPolarArea } from './polar';
-import { renderFunnel } from './funnel';
-import { renderHeatmap } from './heatmap';
-import { renderScatter } from './scatter';
-import { renderSankey } from './sankey';
-import { renderChord } from './chord';
-import { renderFunction } from './function';
-
-/** Types parsed by parseChart → ParsedChart. */
-const STANDARD = new Set(['bar', 'line', 'pie', 'radar', 'polar-area']);
-/** Types parsed by parseExtendedChart → ParsedExtendedChart. */
-const EXTENDED = new Set([
-  'funnel',
-  'heatmap',
-  'scatter',
-  'sankey',
-  'chord',
-  'function',
-]);
-
-/** All data-chart types the hand-built renderers currently cover. */
-export const D3_DATA_CHART_TYPES = new Set<string>([...STANDARD, ...EXTENDED]);
-
-export function supportsD3DataChart(type: string): boolean {
-  return D3_DATA_CHART_TYPES.has(type);
-}
-
-/** First non-empty, non-comment line's leading token, lowercased. */
-function firstNonCommentToken(content: string): string {
-  for (const raw of content.split('\n')) {
-    const l = raw.trim();
-    if (!l || l.startsWith('//')) continue;
-    return l.split(/\s+/)[0]!.toLowerCase();
-  }
-  return '';
-}
-
-export async function renderDataChartD3(
-  content: string,
-  theme: 'light' | 'dark' | 'transparent',
-  palette?: PaletteColors,
-  dims?: { width?: number; height?: number }
-): Promise<string> {
-  const effectivePalette = await resolveExportPalette(theme, palette);
-  const isDark = theme === 'dark';
-
-  const w =
-    dims?.width && dims.width > 0 ? Math.round(dims.width) : EXPORT_WIDTH;
-  const h =
-    dims?.height && dims.height > 0 ? Math.round(dims.height) : EXPORT_HEIGHT;
-  const container = createExportContainer(w, h);
-  const init = initD3Chart(container, effectivePalette, {
-    width: w,
-    height: h,
-  });
-  if (!init) {
-    document.body.removeChild(container);
-    return '';
-  }
-  const { svg, width, height, textColor, mutedColor, bgColor, colors } = init;
-
-  const ok = renderInto(
-    svg,
-    content,
-    effectivePalette,
-    isDark,
-    width,
-    height,
-    textColor,
-    mutedColor,
-    bgColor,
-    colors
-  );
-  if (!ok) {
-    document.body.removeChild(container);
-    return '';
-  }
-  return finalizeSvgExport(container, theme, effectivePalette);
-}
-
-function renderInto(
-  s: Svg,
-  content: string,
-  palette: PaletteColors,
-  isDark: boolean,
-  width: number,
-  height: number,
-  textColor: string,
-  mutedColor: string,
-  bgColor: string,
-  colors: string[]
-): boolean {
-  // Route by the declared first-token type. Extended types (incl. the `chord`
-  // circular preset re-emitted by the arc `layout chord` override, #29) MUST go
-  // to parseExtendedChart — `chord` is no longer a top-level keyword, so the
-  // simple parseChart would silently treat `chord …` as a fallback bar chart.
-  const firstTok = firstNonCommentToken(content);
-  const forceExtended = EXTENDED.has(firstTok);
-
-  // Standard (parseChart) path.
-  const std = forceExtended ? null : parseChart(content, palette);
-  if (std && !std.error && std.data.length > 0 && STANDARD.has(std.type)) {
-    const hasTitle = !std.noTitle && !!std.title;
-    if (hasTitle)
-      renderChartTitle(s, std.title, std.titleLineNumber, width, textColor);
-    switch (std.type) {
-      case 'bar':
-        renderBar(
-          s,
-          std,
-          width,
-          height,
-          colors,
-          palette,
-          isDark,
-          textColor,
-          mutedColor,
-          hasTitle
-        );
-        return true;
-      case 'line':
-        renderLine(
-          s,
-          std,
-          width,
-          height,
-          colors,
-          palette,
-          isDark,
-          textColor,
-          mutedColor,
-          bgColor,
-          hasTitle
-        );
-        return true;
-      case 'pie':
-        renderPie(
-          s,
-          std,
-          width,
-          height,
-          palette,
-          isDark,
-          textColor,
-          hasTitle ? 52 : 24
-        );
-        return true;
-      case 'radar': {
-        // Multi-series radar (§15.1) gets the shared series legend; single-series
-        // yields no groups, so injectLegendGroups returns the same top inset as
-        // before (52 with title, 24 without) — no regression.
-        const groups = getSimpleChartLegendGroups(std, colors);
-        const top = injectLegendGroups(
-          s,
-          groups,
-          palette,
-          isDark,
-          hasTitle,
-          width
-        );
-        renderRadar(
-          s,
-          std,
-          width,
-          height,
-          colors,
-          palette,
-          isDark,
-          textColor,
-          mutedColor,
-          top
-        );
-        return true;
-      }
-      case 'polar-area':
-        renderPolarArea(
-          s,
-          std,
-          width,
-          height,
-          palette,
-          isDark,
-          textColor,
-          hasTitle ? 52 : 24
-        );
-        return true;
-    }
-  }
-
-  // Extended (parseExtendedChart) path.
-  const ext = parseExtendedChart(content, palette);
-  if (ext.error || !EXTENDED.has(ext.type)) return false;
-  const seriesColors = getSeriesColors(palette);
-  const hasTitle = !ext.noTitle && !!ext.title;
-  if (hasTitle)
-    renderChartTitle(s, ext.title, ext.titleLineNumber, width, textColor);
-
-  switch (ext.type) {
-    case 'funnel':
-      renderFunnel(
-        s,
-        ext as ParsedFunnel,
-        width,
-        height,
-        seriesColors,
-        palette,
-        isDark,
-        textColor,
-        hasTitle ? 52 : 24
-      );
-      return true;
-    case 'heatmap':
-      renderHeatmap(
-        s,
-        ext as ParsedHeatmap,
-        width,
-        height,
-        palette,
-        isDark,
-        textColor,
-        bgColor,
-        hasTitle ? 52 : 24
-      );
-      return true;
-    case 'scatter': {
-      const groups = getExtendedChartLegendGroups(ext, seriesColors);
-      const top = injectLegendGroups(
-        s,
-        groups,
-        palette,
-        isDark,
-        hasTitle,
-        width
-      );
-      renderScatter(
-        s,
-        ext as ParsedScatter,
-        width,
-        height,
-        seriesColors,
-        palette,
-        isDark,
-        textColor,
-        mutedColor,
-        top
-      );
-      return true;
-    }
-    case 'sankey':
-      renderSankey(
-        s,
-        ext as ParsedSankey,
-        width,
-        height,
-        seriesColors,
-        bgColor,
-        textColor,
-        hasTitle ? 52 : 24
-      );
-      return true;
-    case 'chord':
-      renderChord(
-        s,
-        ext as ParsedChord,
-        width,
-        height,
-        seriesColors,
-        palette,
-        isDark,
-        textColor,
-        hasTitle ? 52 : 24
-      );
-      return true;
-    case 'function': {
-      const groups = getExtendedChartLegendGroups(ext, seriesColors);
-      const top = injectLegendGroups(
-        s,
-        groups,
-        palette,
-        isDark,
-        hasTitle,
-        width
-      );
-      renderFunction(
-        s,
-        ext as ParsedFunctionChart,
-        width,
-        height,
-        seriesColors,
-        textColor,
-        mutedColor,
-        top
-      );
-      return true;
-    }
-    default:
-      return false;
-  }
-}