@diagrammo/dgmo 0.47.0 → 0.48.0

package/src/charts-d3/scatter.ts

@@ -1,185 +0,0 @@
-// ============================================================
-// Hand-built scatter / bubble renderer — SPIKE (Tier 2).
-// Auto-fit axes (10% pad), per-point or per-category color, bubble sizing,
-// point labels. (Spike uses simple above-point labels, not the full ECharts
-// greedy collision graphic.)
-// ============================================================
-
-import { scaleLinear } from 'd3-scale';
-import type { ParsedScatter } from '../data-chart-parser';
-import type { PaletteColors } from '../palettes';
-import { FONT_FAMILY } from '../fonts';
-import { shapeFill } from '../palettes/color-utils';
-import {
-  type Svg,
-  type Margins,
-  TICK_FONT,
-  fmtNum,
-  computeLeftMargin,
-  drawXAxisTitle,
-  drawYAxisTitle,
-  tagDatum,
-} from './shared';
-
-const FILL_OPACITY = 0.65;
-const DEFAULT_SIZE = 15; // diameter
-
-export function renderScatter(
-  svg: Svg,
-  chart: ParsedScatter,
-  width: number,
-  height: number,
-  colors: string[],
-  palette: PaletteColors,
-  isDark: boolean,
-  textColor: string,
-  mutedColor: string,
-  topInset: number
-): void {
-  const points = chart.scatterPoints ?? [];
-  if (points.length === 0) return;
-  const solid = chart.solidFill === true;
-  const hasSize = points.some((p) => p.size !== undefined);
-
-  const categories = [
-    ...new Set(points.map((p) => p.category).filter(Boolean)),
-  ] as string[];
-  const catColor = (cat: string, i: number) =>
-    chart.categoryColors?.[cat] ?? colors[i % colors.length]!;
-  const catIndex = new Map(categories.map((c, i) => [c, i]));
-
-  const xs = points.map((p) => p.x);
-  const ys = points.map((p) => p.y);
-  const xMin = Math.min(...xs);
-  const xMax = Math.max(...xs);
-  const yMin = Math.min(...ys);
-  const yMax = Math.max(...ys);
-  const xPad = (xMax - xMin) * 0.1 || 1;
-  const yPad = (yMax - yMin) * 0.1 || 1;
-
-  const m: Margins = {
-    top: topInset + 8,
-    right: 32,
-    bottom: 64,
-    left: computeLeftMargin(chart.ylabel, [
-      fmtNum(Math.ceil(yMax + yPad)),
-      fmtNum(Math.floor(yMin - yPad)),
-    ]),
-  };
-  const plotW = width - m.left - m.right;
-  const plotH = height - m.top - m.bottom;
-
-  const x = scaleLinear()
-    .domain([Math.floor(xMin - xPad), Math.ceil(xMax + xPad)])
-    .range([m.left, m.left + plotW]);
-  const y = scaleLinear()
-    .domain([Math.floor(yMin - yPad), Math.ceil(yMax + yPad)])
-    .range([m.top + plotH, m.top]);
-
-  // Hit/bounds target so the interaction adapter knows axis positions for the
-  // dotted leader-line + on-axis value projection.
-  svg
-    .append('rect')
-    .attr('class', 'dgmo-plot-rect')
-    .attr('x', m.left)
-    .attr('y', m.top)
-    .attr('width', plotW)
-    .attr('height', plotH)
-    .attr('fill', 'transparent')
-    .attr('pointer-events', 'none');
-
-  // gridlines + ticks
-  for (const t of y.ticks(6)) {
-    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', 0.25);
-    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(6)) {
-    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', 0.25);
-    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));
-  }
-
-  // points
-  points.forEach((p, i) => {
-    const stroke =
-      p.color ??
-      (p.category
-        ? catColor(p.category, catIndex.get(p.category) ?? 0)
-        : colors[i % colors.length]!);
-    const r = (hasSize ? (p.size ?? DEFAULT_SIZE) : DEFAULT_SIZE) / 2;
-    const dot = svg
-      .append('circle')
-      .attr('cx', x(p.x))
-      .attr('cy', y(p.y))
-      .attr('r', r)
-      .attr('fill', solid ? stroke : shapeFill(palette, stroke, isDark))
-      .attr('fill-opacity', FILL_OPACITY)
-      .attr('stroke', stroke)
-      .attr('stroke-width', 2);
-    tagDatum(dot, {
-      line: p.lineNumber,
-      key: p.name,
-      name: p.category ? `${p.name} · ${p.category}` : p.name,
-      value: `(${fmtNum(p.x)}, ${fmtNum(p.y)})`,
-      color: stroke,
-    });
-    // Per-axis values for the adapter's on-axis projection (no tooltip).
-    dot.attr('data-axval-x', fmtNum(p.x)).attr('data-axval-y', fmtNum(p.y));
-    // Category key for baked-CSS cross-highlight (hover a point → dim other
-    // categories). Only when the point actually declares a category.
-    if (p.category) dot.attr('data-category', p.category);
-    if (!chart.noName) {
-      svg
-        .append('text')
-        .attr('x', x(p.x))
-        .attr('y', y(p.y) - r - 5)
-        .attr('text-anchor', 'middle')
-        .attr('fill', textColor)
-        .attr('font-size', 11)
-        .attr('font-family', FONT_FAMILY)
-        .text(p.name);
-    }
-  });
-
-  drawXAxisTitle(
-    svg,
-    chart.xlabel,
-    m.left + plotW / 2,
-    m.top + plotH + 46,
-    textColor
-  );
-  drawYAxisTitle(svg, chart.ylabel, m.top + plotH / 2, 20, textColor);
-}

package/src/charts-d3/shared.ts

@@ -1,208 +0,0 @@
-// ============================================================
-// Shared helpers for the hand-built (D3) data-chart renderers — SPIKE.
-//
-// These renderers replace the ECharts path for the Tier-1 data-chart types
-// (bar / line / pie families). They draw directly into a d3-selection SVG using
-// d3-scale + d3-shape — both already first-class dependencies — and reuse the
-// same export-container lifecycle, legend, and tint helpers as the rest of the
-// repo so the output matches the ECharts path's house style.
-// ============================================================
-
-import type * as d3Selection from 'd3-selection';
-import { FONT_FAMILY } from '../fonts';
-import { measureText } from '../utils/text-measure';
-import type { ParsedChart } from '../chart';
-import type { PaletteColors } from '../palettes';
-import { getSimpleChartLegendGroups } from '../data-chart-parser';
-import { renderLegendSvg } from '../utils/legend-svg';
-import type { LegendGroupData } from '../utils/legend-types';
-
-export type Svg = d3Selection.Selection<
-  SVGSVGElement,
-  unknown,
-  null,
-  undefined
->;
-
-/** Cartesian plot margins. Top is set by reserveHeader (title + legend). */
-export interface Margins {
-  top: number;
-  right: number;
-  bottom: number;
-  left: number;
-}
-
-export const AXIS_LABEL_FONT = 13;
-export const TICK_FONT = 12;
-export const VALUE_FONT = 12;
-
-/** Format a numeric tick/value: trim trailing zeros, keep it compact. */
-export function fmtNum(n: number): string {
-  if (!isFinite(n)) return '';
-  if (Math.abs(n) >= 1000) return n.toLocaleString('en-US');
-  return String(Math.round(n * 100) / 100);
-}
-
-/**
- * Render the standard top-center legend (capsule + pills) for a multi-series
- * chart, mirroring the ECharts path exactly: same `getSimpleChartLegendGroups`
- * input and same `<g transform="translate(0,legendY)">` injection. Returns the
- * y-coordinate where plot content may begin (below title + legend).
- */
-export function reserveHeader(
-  svg: Svg,
-  chart: ParsedChart,
-  colors: string[],
-  palette: PaletteColors,
-  isDark: boolean,
-  hasTitle: boolean,
-  width: number
-): number {
-  return injectLegendGroups(
-    svg,
-    getSimpleChartLegendGroups(chart, colors),
-    palette,
-    isDark,
-    hasTitle,
-    width
-  );
-}
-
-/**
- * Inject a top-center capsule legend from pre-built groups (mirrors the
- * ECharts path's `<g transform="translate(0,legendY)">` placement) and return
- * the y where plot content may begin. Empty groups → just clear the title.
- */
-export function injectLegendGroups(
-  svg: Svg,
-  groups: LegendGroupData[],
-  palette: PaletteColors,
-  isDark: boolean,
-  hasTitle: boolean,
-  width: number
-): number {
-  const titleH = hasTitle ? 40 : 0;
-  if (groups.length === 0) return hasTitle ? titleH + 12 : 24;
-
-  const legendY = 8 + titleH;
-  const { svg: legendSvg, height: legendH } = renderLegendSvg(groups, {
-    palette,
-    isDark,
-    containerWidth: width,
-    activeGroup: groups[0]!.name,
-    className: 'chart-legend',
-  });
-  const node = svg.node();
-  if (node && legendSvg) {
-    node.insertAdjacentHTML(
-      'beforeend',
-      `<g transform="translate(0,${legendY})">${legendSvg}</g>`
-    );
-  }
-  return legendY + legendH + 14;
-}
-
-/**
- * Compute a left margin that fits both the rotated y-axis title (when present)
- * and the widest left-edge label (value ticks for vertical charts, category
- * names for horizontal bars). Fixes axis-title / tick-label collisions.
- */
-export function computeLeftMargin(
-  yLabel: string | undefined,
-  leftLabels: string[]
-): number {
-  const pad = 16;
-  const titleBand = yLabel ? 22 : 0;
-  const labelW = leftLabels.length
-    ? Math.max(...leftLabels.map((t) => measureText(t, TICK_FONT)))
-    : 0;
-  return Math.max(56, pad + titleBand + labelW + 14);
-}
-
-/** Draw a centered axis title below the x-axis. */
-export function drawXAxisTitle(
-  svg: Svg,
-  label: string | undefined,
-  cx: number,
-  y: number,
-  textColor: string
-): void {
-  if (!label) return;
-  svg
-    .append('text')
-    .attr('x', cx)
-    .attr('y', y)
-    .attr('text-anchor', 'middle')
-    .attr('fill', textColor)
-    .attr('font-size', AXIS_LABEL_FONT)
-    .attr('font-family', FONT_FAMILY)
-    .attr('font-weight', 600)
-    .text(label);
-}
-
-/** Draw a rotated axis title to the left of the y-axis. */
-export function drawYAxisTitle(
-  svg: Svg,
-  label: string | undefined,
-  cy: number,
-  x: number,
-  textColor: string
-): void {
-  if (!label) return;
-  svg
-    .append('text')
-    .attr('transform', `translate(${x},${cy}) rotate(-90)`)
-    .attr('text-anchor', 'middle')
-    .attr('fill', textColor)
-    .attr('font-size', AXIS_LABEL_FONT)
-    .attr('font-family', FONT_FAMILY)
-    .attr('font-weight', 600)
-    .text(label);
-}
-
-/**
- * Tag a rendered datum element with the shared interaction convention so the
- * framework-agnostic adapter (interactions.ts) and the app's generic
- * data-line-number path can drive it: click-to-source, hover-emphasis/dim,
- * and tooltip content — all from these attributes, no per-type wiring.
- */
-export function tagDatum<E extends Element>(
-  sel: d3Selection.Selection<E, unknown, null, undefined>,
-  o: {
-    line?: number;
-    key?: string;
-    name?: string;
-    value?: string | number;
-    color?: string;
-  }
-): d3Selection.Selection<E, unknown, null, undefined> {
-  const cls = (sel.attr('class') ?? '').split(/\s+/).filter(Boolean);
-  if (!cls.includes('dgmo-datum')) cls.push('dgmo-datum');
-  sel.attr('class', cls.join(' '));
-  if (o.line != null) sel.attr('data-line-number', o.line);
-  if (o.key != null) sel.attr('data-emph-key', o.key);
-  if (o.name != null) sel.attr('data-name', o.name);
-  if (o.value != null) sel.attr('data-value', String(o.value));
-  if (o.color != null) sel.attr('data-color', o.color);
-  return sel;
-}
-
-/** Draw a value label (data point / bar) in the given color. */
-export function drawValueLabel(
-  svg: Svg,
-  text: string,
-  x: number,
-  y: number,
-  color: string,
-  anchor: 'middle' | 'start' | 'end' = 'middle'
-): void {
-  svg
-    .append('text')
-    .attr('x', x)
-    .attr('y', y)
-    .attr('text-anchor', anchor)
-    .attr('fill', color)
-    .attr('font-size', VALUE_FONT)
-    .attr('font-family', FONT_FAMILY)
-    .text(text);
-}