@diagrammo/dgmo 0.47.0 → 0.48.0

package/src/charts-d3/line.ts

@@ -1,344 +0,0 @@
-// ============================================================
-// Hand-built line / multi-line / area renderer.
-// Series-tinted value labels, 0-baseline, era bands (markArea parity),
-// dual y-axis (§15.1: y-label / y-right-label grouped series).
-// ============================================================
-
-import { scalePoint, scaleLinear, type ScaleLinear } from 'd3-scale';
-import { line as d3line, area as d3area } from 'd3-shape';
-import type { ParsedChart } from '../chart';
-import type { PaletteColors } from '../palettes';
-import { FONT_FAMILY } from '../fonts';
-import { mix, shapeFill } from '../palettes/color-utils';
-import {
-  type Svg,
-  type Margins,
-  TICK_FONT,
-  fmtNum,
-  reserveHeader,
-  computeLeftMargin,
-  drawXAxisTitle,
-  drawYAxisTitle,
-  drawValueLabel,
-} from './shared';
-
-function seriesValue(
-  pt: { value: number; extraValues?: number[] },
-  s: number
-): number {
-  return s === 0 ? pt.value : (pt.extraValues?.[s - 1] ?? 0);
-}
-
-export function renderLine(
-  svg: Svg,
-  chart: ParsedChart,
-  width: number,
-  height: number,
-  colors: string[],
-  palette: PaletteColors,
-  isDark: boolean,
-  textColor: string,
-  mutedColor: string,
-  bgColor: string,
-  hasTitle: boolean
-): void {
-  const data = chart.data;
-  // `line` + a `fill` directive → filled (area) rendering. (#25)
-  const isArea = chart.fill === true;
-  const seriesNames = chart.seriesNames?.length
-    ? chart.seriesNames
-    : [chart.series ?? ''];
-  const seriesCount = Math.max(
-    1,
-    seriesNames.length,
-    1 + Math.max(0, ...data.map((d) => d.extraValues?.length ?? 0))
-  );
-  const seriesColor = (s: number): string =>
-    chart.seriesNameColors?.[s] ?? colors[s % colors.length]!;
-
-  // Dual-axis (§15.1): per-series left/right assignment; absent ⇒ all left.
-  const axisOf = (s: number): 'left' | 'right' =>
-    chart.seriesAxes?.[s] ?? 'left';
-  const dual = (chart.seriesAxes ?? []).includes('right');
-  // An axis owned by exactly one series adopts that series' color.
-  const soleAxisColor = (side: 'left' | 'right'): string | undefined => {
-    const owners: number[] = [];
-    for (let s = 0; s < seriesCount; s++)
-      if (axisOf(s) === side) owners.push(s);
-    return owners.length === 1 ? seriesColor(owners[0]!) : undefined;
-  };
-
-  const top = reserveHeader(
-    svg,
-    chart,
-    colors,
-    palette,
-    isDark,
-    hasTitle,
-    width
-  );
-
-  // Per-axis value extent (0-baseline for all-positive data, ECharts parity).
-  const extentFor = (side: 'left' | 'right'): [number, number] => {
-    let lo = Infinity;
-    let hi = -Infinity;
-    for (const d of data)
-      for (let s = 0; s < seriesCount; s++)
-        if (axisOf(s) === side) {
-          const v = seriesValue(d, s);
-          lo = Math.min(lo, v);
-          hi = Math.max(hi, v);
-        }
-    if (!isFinite(lo)) return [0, 1];
-    if (lo > 0) lo = 0;
-    if (lo === hi) hi = lo + 1;
-    return [lo, hi];
-  };
-  const [loL, hiL] = extentFor('left');
-  const [loR, hiR] = dual ? extentFor('right') : [0, 1];
-
-  const m: Margins = {
-    top: top + 8,
-    right: dual
-      ? computeLeftMargin(chart.yrlabel, [fmtNum(hiR), fmtNum(loR)])
-      : 32,
-    bottom: 64,
-    left: computeLeftMargin(chart.ylabel, [fmtNum(hiL), fmtNum(loL)]),
-  };
-  const plotW = width - m.left - m.right;
-  const plotH = height - m.top - m.bottom;
-
-  const x = scalePoint<string>()
-    .domain(data.map((d) => d.label))
-    .range([m.left, m.left + plotW])
-    .padding(0.5);
-  const yL = scaleLinear()
-    .domain([loL, hiL])
-    .nice()
-    .range([m.top + plotH, m.top]);
-  const yR: ScaleLinear<number, number> | null = dual
-    ? scaleLinear()
-        .domain([loR, hiR])
-        .nice()
-        .range([m.top + plotH, m.top])
-    : null;
-  const yFor = (s: number): ScaleLinear<number, number> =>
-    dual && axisOf(s) === 'right' && yR ? yR : yL;
-  const leftTint = dual ? soleAxisColor('left') : undefined;
-  const rightTint = soleAxisColor('right');
-
-  // era bands (markArea parity) — positioned on the left axis
-  if (chart.eras?.length) {
-    chart.eras.forEach((era, i) => {
-      const xs = x(era.start);
-      const xe = x(era.end);
-      if (xs == null || xe == null) return;
-      const fill = era.color ?? colors[i % colors.length]!;
-      svg
-        .append('rect')
-        .attr('x', Math.min(xs, xe))
-        .attr('y', m.top)
-        .attr('width', Math.abs(xe - xs))
-        .attr('height', plotH)
-        .attr('fill', mix(fill, bgColor, 12));
-      svg
-        .append('text')
-        .attr('x', (xs + xe) / 2)
-        .attr('y', m.top + 14)
-        .attr('text-anchor', 'middle')
-        .attr('fill', textColor)
-        .attr('font-size', TICK_FONT)
-        .attr('font-family', FONT_FAMILY)
-        .attr('opacity', 0.8)
-        .text(era.label);
-    });
-  }
-
-  // left y gridlines + ticks (only the left axis draws gridlines)
-  for (const t of yL.ticks(6)) {
-    const yy = yL(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.25);
-    svg
-      .append('text')
-      .attr('class', 'dgmo-tick')
-      .attr('x', m.left - 10)
-      .attr('y', yy + 4)
-      .attr('text-anchor', 'end')
-      .attr('fill', leftTint ?? textColor)
-      .attr('font-size', TICK_FONT)
-      .attr('font-family', FONT_FAMILY)
-      .text(fmtNum(t));
-  }
-
-  // right y ticks (no gridlines)
-  if (dual && yR) {
-    for (const t of yR.ticks(6)) {
-      svg
-        .append('text')
-        .attr('class', 'dgmo-tick')
-        .attr('x', m.left + plotW + 10)
-        .attr('y', yR(t) + 4)
-        .attr('text-anchor', 'start')
-        .attr('fill', rightTint ?? textColor)
-        .attr('font-size', TICK_FONT)
-        .attr('font-family', FONT_FAMILY)
-        .text(fmtNum(t));
-    }
-  }
-
-  // x category labels
-  for (const d of data) {
-    svg
-      .append('text')
-      .attr('class', 'dgmo-tick')
-      .attr('x', x(d.label) ?? 0)
-      .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);
-  }
-
-  // Transparent hit-target over the plot area — the interaction adapter reads
-  // its bounds for crosshair extent and snapping (see charts-d3/interactions.ts).
-  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');
-
-  for (let s = 0; s < seriesCount; s++) {
-    const color = seriesColor(s);
-    const yy = yFor(s);
-    const name = seriesNames[s] ?? `Series ${s + 1}`;
-    const pts = data.map((d, i) => ({
-      label: d.label,
-      v: seriesValue(d, s),
-      xIndex: i,
-      lineNumber: d.lineNumber,
-    }));
-    const g = svg
-      .append('g')
-      .attr('class', 'dgmo-series')
-      .attr('data-series-index', s)
-      .attr('data-series-name', name)
-      .attr('data-axis', axisOf(s))
-      .attr('data-color', color);
-    const seriesLine = chart.seriesNameLineNumbers?.[s];
-    if (seriesLine !== undefined) g.attr('data-line-number', seriesLine);
-
-    if (isArea) {
-      const areaGen = d3area<(typeof pts)[number]>()
-        .x((p) => x(p.label) ?? 0)
-        .y0(yy(Math.max(yy.domain()[0]!, 0)))
-        .y1((p) => yy(p.v));
-      g.append('path')
-        .attr('class', 'dgmo-series-area')
-        .attr('d', areaGen(pts) ?? '')
-        .attr('fill', shapeFill(palette, color, isDark))
-        .attr('stroke', 'none');
-    }
-
-    const lineGen = d3line<(typeof pts)[number]>()
-      .x((p) => x(p.label) ?? 0)
-      .y((p) => yy(p.v));
-    g.append('path')
-      .attr('class', 'dgmo-series-line')
-      .attr('d', lineGen(pts) ?? '')
-      .attr('fill', 'none')
-      .attr('stroke', color)
-      .attr('stroke-width', 2.5)
-      .attr('stroke-linejoin', 'round')
-      .attr('stroke-linecap', 'round');
-
-    const labelColor = mix(color, textColor, 60);
-    for (const p of pts) {
-      g.append('circle')
-        .attr('class', 'dgmo-pt')
-        .attr('data-series-index', s)
-        .attr('data-series-name', name)
-        .attr('data-color', color)
-        .attr('data-x-index', p.xIndex)
-        .attr('data-x-label', p.label)
-        .attr('data-value', p.v)
-        .attr('data-line-number', p.lineNumber)
-        .attr('cx', x(p.label) ?? 0)
-        .attr('cy', yy(p.v))
-        .attr('r', 3.5)
-        .attr('fill', bgColor)
-        .attr('stroke', color)
-        .attr('stroke-width', 2);
-      if (!chart.noValue) {
-        drawValueLabel(
-          svg,
-          fmtNum(p.v),
-          x(p.label) ?? 0,
-          yy(p.v) - 10,
-          labelColor
-        );
-      }
-    }
-  }
-
-  drawXAxisTitle(
-    svg,
-    chart.xlabel,
-    m.left + plotW / 2,
-    m.top + plotH + 46,
-    textColor
-  );
-  drawYAxisTitle(
-    svg,
-    chart.ylabel,
-    m.top + plotH / 2,
-    20,
-    leftTint ?? textColor
-  );
-  if (dual) {
-    drawYAxisTitle(
-      svg,
-      chart.yrlabel,
-      m.top + plotH / 2,
-      width - 18,
-      rightTint ?? textColor
-    );
-
-    // Axis-legend hover targets (§ interactions.ts): a transparent strip over
-    // each axis's title + ticks. Appended last so each strip is the topmost
-    // (single, flicker-free) mouseenter target while the tinted title/ticks
-    // still show through. Only for dual-axis — a sole axis owns every series,
-    // so hovering it could not distinguish anything. Sits entirely outside the
-    // plot's x-range, so it never shadows point/crosshair hover.
-    svg
-      .append('rect')
-      .attr('class', 'dgmo-axis-legend')
-      .attr('data-axis-legend', 'left')
-      .attr('x', 0)
-      .attr('y', m.top)
-      .attr('width', m.left)
-      .attr('height', plotH)
-      .attr('fill', 'transparent')
-      .attr('style', 'cursor:pointer');
-    svg
-      .append('rect')
-      .attr('class', 'dgmo-axis-legend')
-      .attr('data-axis-legend', 'right')
-      .attr('x', m.left + plotW)
-      .attr('y', m.top)
-      .attr('width', m.right)
-      .attr('height', plotH)
-      .attr('fill', 'transparent')
-      .attr('style', 'cursor:pointer');
-  }
-}

package/src/charts-d3/mount.ts

@@ -1,151 +0,0 @@
-// ============================================================
-// Framework-agnostic mount controller for hand-built data charts — SPIKE.
-//
-// The imperative glue a host (React preview, Obsidian, plain DOM) wraps to get
-// a live, interactive D3 data-chart with NO ECharts: render the SVG, inject it,
-// attach the DOM interaction adapter, and expose update()/destroy() for the
-// host's lifecycle. Keeping this here (not in the React component) means it is
-// testable headlessly and reusable across every consumer.
-//
-// A React wrapper is ~15 lines:
-//   useEffect(() => {
-//     const c = mountD3DataChart(ref.current, content, { theme, palette, onNavigate });
-//     return () => c.destroy();
-//   }, []);
-//   useEffect(() => { ctrl.update(content, { theme, palette }); }, [content, theme, palette]);
-// ============================================================
-
-import { render } from '../render';
-import { getPalette } from '../palettes';
-import { renderDataChartD3 } from './index';
-import {
-  attachDataChartInteractions,
-  type DataChartController,
-} from './interactions';
-
-export interface MountD3Opts {
-  theme?: 'light' | 'dark' | 'transparent';
-  palette?: string;
-  /** Forwarded to the interaction adapter: source-line navigation on click. */
-  onNavigate?: (line: number) => void;
-  mutedColor?: string;
-  surface?: string;
-  text?: string;
-}
-
-export interface MountedD3Chart {
-  /** Re-render with new content and/or theme/palette; re-attaches interactions. */
-  update: (content: string, opts?: Partial<MountD3Opts>) => Promise<void>;
-  /** Emphasize the chart element on the given source line (editor cursor sync);
-   *  pass null to clear. */
-  highlight: (line: number | null) => void;
-  /** Tear down listeners + overlays and clear the container. */
-  destroy: () => void;
-}
-
-/**
- * Render + mount an interactive D3 data chart into `container`. Returns a
- * controller; call `destroy()` on unmount. No-op interactions if the rendered
- * type carries no interactive markup.
- */
-function paletteOf(o: MountD3Opts) {
-  const theme = o.theme ?? 'light';
-  return getPalette(o.palette ?? 'slate')[theme === 'dark' ? 'dark' : 'light'];
-}
-
-export function mountD3DataChart(
-  container: HTMLElement,
-  content: string,
-  opts: MountD3Opts = {}
-): MountedD3Chart {
-  let interaction: DataChartController | null = null;
-  let current: MountD3Opts = { ...opts };
-  let text = content;
-  let token = 0;
-  let pinnedLine: number | null = null;
-  let lastW = 0;
-  let lastH = 0;
-  let resizeTimer: ReturnType<typeof setTimeout> | null = null;
-
-  const paint = async (): Promise<void> => {
-    const mine = ++token;
-    // Render at the container's actual size so the chart fills the pane and
-    // re-lays-out (not CSS-scales) — matching ECharts' resize behavior. When
-    // unmeasured (no layout yet / headless), renderDataChartD3 falls back to
-    // its default export dimensions and the ResizeObserver repaints once sized.
-    const width = container.clientWidth;
-    const height = container.clientHeight;
-    lastW = width;
-    lastH = height;
-    const dims = width > 0 && height > 0 ? { width, height } : undefined;
-
-    let svg = await renderDataChartD3(
-      text,
-      current.theme ?? 'light',
-      paletteOf(current),
-      dims
-    );
-    // Fallback (parse error / unsupported type) → error card via render().
-    if (!svg) {
-      const r = await render(text, {
-        ...(current.theme && { theme: current.theme }),
-        ...(current.palette && { palette: current.palette }),
-      });
-      svg = r.svg;
-    }
-    if (mine !== token) return; // a newer paint superseded this one
-
-    if (interaction) {
-      interaction.destroy();
-      interaction = null;
-    }
-    container.innerHTML = svg;
-    const el = container.querySelector('svg');
-    if (el) {
-      const pal = paletteOf(current);
-      interaction = attachDataChartInteractions(el, {
-        ...(current.onNavigate && { onNavigate: current.onNavigate }),
-        mutedColor: current.mutedColor ?? pal.border,
-        surface: current.surface ?? pal.surface,
-        text: current.text ?? pal.text,
-      });
-      // re-apply the editor cursor highlight after a re-render
-      if (pinnedLine != null) interaction.highlight(pinnedLine);
-    }
-  };
-
-  // Re-render (debounced) when the pane size changes.
-  const ro =
-    typeof ResizeObserver !== 'undefined'
-      ? new ResizeObserver(() => {
-          const w = container.clientWidth;
-          const h = container.clientHeight;
-          if (w === lastW && h === lastH) return;
-          if (resizeTimer) clearTimeout(resizeTimer);
-          resizeTimer = setTimeout(() => void paint(), 120);
-        })
-      : null;
-  ro?.observe(container);
-
-  void paint();
-
-  return {
-    update: async (nextContent: string, patch?: Partial<MountD3Opts>) => {
-      text = nextContent;
-      current = { ...current, ...patch };
-      await paint();
-    },
-    highlight: (line: number | null) => {
-      pinnedLine = line;
-      interaction?.highlight(line);
-    },
-    destroy: () => {
-      token++;
-      if (resizeTimer) clearTimeout(resizeTimer);
-      ro?.disconnect();
-      if (interaction) interaction.destroy();
-      interaction = null;
-      container.innerHTML = '';
-    },
-  };
-}

package/src/charts-d3/pie.ts

@@ -1,117 +0,0 @@
-// ============================================================
-// Hand-built pie / doughnut renderer — SPIKE.
-// ECharts-style: 25% tint fill + full-strength border, external leader-line
-// labels ("Name — value (pct%)"), doughnut center total.
-// ============================================================
-
-import { pie as d3pie, arc as d3arc } from 'd3-shape';
-import type { ParsedChart } from '../chart';
-import type { PaletteColors } from '../palettes';
-import { getSegmentColors, shapeFill } from '../palettes/color-utils';
-import { FONT_FAMILY } from '../fonts';
-import { type Svg, fmtNum, tagDatum } from './shared';
-
-const LABEL_FONT = 14;
-
-export function renderPie(
-  svg: Svg,
-  chart: ParsedChart,
-  width: number,
-  height: number,
-  palette: PaletteColors,
-  isDark: boolean,
-  textColor: string,
-  topInset: number
-): void {
-  const data = chart.data.filter((d) => d.value > 0);
-  if (data.length === 0) return;
-  // A hole turns the pie into a ring — `pie` + a `hole` directive. (#23)
-  const holeRatio = chart.hole;
-  const hasHole = holeRatio !== undefined;
-  const solid = chart.solidFill === true;
-  const total = data.reduce((a, d) => a + d.value, 0);
-
-  const cx = width / 2;
-  const top = topInset + 12;
-  const cy = top + (height - top) / 2;
-  // Leave horizontal room for the external labels + leader lines.
-  const radius = Math.min(width / 2 - 220, (height - top) / 2 - 40);
-
-  const segColors = getSegmentColors(palette, data.length);
-  const strokeFor = (i: number, override?: string) =>
-    override ?? segColors[i % segColors.length]!;
-
-  const arcs = d3pie<{ value: number }>()
-    .sort(null)
-    .value((d) => d.value)(data.map((d) => ({ value: d.value })));
-
-  const arcGen = d3arc<(typeof arcs)[number]>()
-    .innerRadius(hasHole ? radius * holeRatio! : 0)
-    .outerRadius(radius);
-
-  const g = svg.append('g').attr('transform', `translate(${cx},${cy})`);
-
-  arcs.forEach((a, i) => {
-    const stroke = strokeFor(i, data[i]!.color);
-    const fill = solid ? stroke : shapeFill(palette, stroke, isDark);
-    const pct = Math.round((data[i]!.value / total) * 100);
-    const slice = g
-      .append('path')
-      .attr('d', arcGen(a) ?? '')
-      .attr('fill', fill)
-      .attr('stroke', stroke)
-      .attr('stroke-width', 1.5);
-    tagDatum(slice, {
-      line: data[i]!.lineNumber,
-      key: data[i]!.label,
-      name: data[i]!.label,
-      value: `${fmtNum(data[i]!.value)} (${pct}%)`,
-      color: stroke,
-    });
-
-    // External leader-line label.
-    const mid = (a.startAngle + a.endAngle) / 2 - Math.PI / 2;
-    const rightSide = Math.cos(mid) >= 0;
-    const x0 = Math.cos(mid) * radius;
-    const y0 = Math.sin(mid) * radius;
-    const x1 = Math.cos(mid) * (radius + 16);
-    const y1 = Math.sin(mid) * (radius + 16);
-    const x2 = x1 + (rightSide ? 28 : -28);
-    const nm = chart.noName ? '' : data[i]!.label;
-    const tail = [
-      chart.noValue ? '' : fmtNum(data[i]!.value),
-      chart.noPercent ? '' : `(${pct}%)`,
-    ]
-      .filter(Boolean)
-      .join(' ');
-    const label = [nm, tail].filter(Boolean).join(' — ');
-    if (label) {
-      g.append('polyline')
-        .attr('points', `${x0},${y0} ${x1},${y1} ${x2},${y1}`)
-        .attr('fill', 'none')
-        .attr('stroke', stroke)
-        .attr('stroke-width', 1);
-      g.append('text')
-        .attr('x', x2 + (rightSide ? 4 : -4))
-        .attr('y', y1 + 4)
-        .attr('text-anchor', rightSide ? 'start' : 'end')
-        .attr('fill', textColor)
-        .attr('font-size', LABEL_FONT)
-        .attr('font-family', FONT_FAMILY)
-        .text(label);
-    }
-  });
-
-  // Center total — shown by default whenever there is a hole, unless suppressed
-  // with `no-center-total`. (#23)
-  if (hasHole && !chart.noCenterTotal) {
-    g.append('text')
-      .attr('text-anchor', 'middle')
-      .attr('y', 8)
-      .attr('fill', textColor)
-      .attr('font-size', 26)
-      .attr('font-weight', 700)
-      .attr('font-family', FONT_FAMILY)
-      .text(fmtNum(total));
-  }
-}

package/src/charts-d3/polar.ts

@@ -1,89 +0,0 @@
-// ============================================================
-// Hand-built polar-area (rose) renderer — SPIKE (Tier 2).
-// Equal-angle sectors; radius proportional to value (ECharts roseType:radius).
-// ============================================================
-
-import { arc as d3arc } from 'd3-shape';
-import type { ParsedChart } from '../chart';
-import type { PaletteColors } from '../palettes';
-import { FONT_FAMILY } from '../fonts';
-import { getSegmentColors, shapeFill } from '../palettes/color-utils';
-import { type Svg, fmtNum, tagDatum } from './shared';
-
-export function renderPolarArea(
-  svg: Svg,
-  chart: ParsedChart,
-  width: number,
-  height: number,
-  palette: PaletteColors,
-  isDark: boolean,
-  textColor: string,
-  topInset: number
-): void {
-  const data = chart.data.filter((d) => d.value > 0);
-  const n = data.length;
-  if (n === 0) return;
-  const solid = chart.solidFill === true;
-  const total = data.reduce((a, d) => a + d.value, 0);
-  const maxValue = Math.max(...data.map((d) => d.value)) || 1;
-
-  const cx = width / 2;
-  const top = topInset + 8;
-  const cy = top + (height - top) / 2;
-  const outerR = Math.min(width / 2 - 200, (height - top) / 2 - 40);
-  const innerR = outerR * 0.14;
-
-  const segColors = getSegmentColors(palette, n);
-  const g = svg.append('g').attr('transform', `translate(${cx},${cy})`);
-  const seg = (2 * Math.PI) / n;
-
-  data.forEach((d, i) => {
-    const stroke = d.color ?? segColors[i % segColors.length]!;
-    const r = innerR + (d.value / maxValue) * (outerR - innerR);
-    const a0 = i * seg;
-    const a1 = a0 + seg;
-    const arcGen = d3arc<unknown>()
-      .innerRadius(innerR)
-      .outerRadius(r)
-      .startAngle(a0)
-      .endAngle(a1);
-    const pct = Math.round((d.value / total) * 100);
-    const sector = g
-      .append('path')
-      .attr('d', arcGen({}) ?? '')
-      .attr('fill', solid ? stroke : shapeFill(palette, stroke, isDark))
-      .attr('stroke', stroke)
-      .attr('stroke-width', 2);
-    tagDatum(sector, {
-      line: d.lineNumber,
-      key: d.label,
-      name: d.label,
-      value: `${fmtNum(d.value)} (${pct}%)`,
-      color: stroke,
-    });
-
-    // external label at sector mid-angle (d3 angle 0 = top, clockwise)
-    const mid = a0 + seg / 2 - Math.PI / 2;
-    const rightSide = Math.cos(mid) >= 0;
-    const lx = Math.cos(mid) * (outerR + 14);
-    const ly = Math.sin(mid) * (outerR + 14);
-    const nm = chart.noName ? '' : d.label;
-    const tail = [
-      chart.noValue ? '' : fmtNum(d.value),
-      chart.noPercent ? '' : `(${pct}%)`,
-    ]
-      .filter(Boolean)
-      .join(' ');
-    const label = [nm, tail].filter(Boolean).join(' — ');
-    if (label) {
-      g.append('text')
-        .attr('x', lx + (rightSide ? 4 : -4))
-        .attr('y', ly + 4)
-        .attr('text-anchor', rightSide ? 'start' : 'end')
-        .attr('fill', textColor)
-        .attr('font-size', 13)
-        .attr('font-family', FONT_FAMILY)
-        .text(label);
-    }
-  });
-}