@beyondwork/docx-react-component 1.0.50 → 1.0.51

package/src/ui-tailwind/chart/layout/axis-layout.ts

@@ -0,0 +1,344 @@
+/**
+ * Axis tick generation for chart rendering (Stage 3A, pure math).
+ *
+ * Three axis kinds:
+ *   - **value** — numeric axis with a "nice" auto-step (when the model
+ *     doesn't pin `majorUnit`) derived from a d3-style heuristic:
+ *     pick from {1, 2, 2.5, 5} × 10^n targeting 5-8 major ticks.
+ *     Log-scale value axes use `logBase` (default 10) to generate
+ *     ticks at base^k covering the domain.
+ *   - **category** — axis labels come from the model's pre-resolved
+ *     category array; `tickLabelSkip` lets Word-authored charts skip
+ *     every N-th label.
+ *   - **date** — Excel serial dates (days since 1899-12-30). We respect
+ *     `baseTimeUnit` ∈ {days, months, years} by stepping through the
+ *     domain in units of that period; `majorTimeUnit` overrides the
+ *     step when present.
+ *
+ * All functions are pure (no DOM, no React, no runtime imports) so
+ * Stage 3 layout math is unit-testable without a browser.
+ */
+
+// ---------------------------------------------------------------------------
+// Value axis — linear + log
+// ---------------------------------------------------------------------------
+
+export interface ValueTickInput {
+  min: number;
+  max: number;
+  /** Override for major step. When present, ticks are strictly multiples. */
+  majorUnit?: number;
+  /** Override for minor step. Defaults to majorUnit / 5 when omitted. */
+  minorUnit?: number;
+  /** Log-scale base. Omitted for linear axes. */
+  logBase?: number;
+  /** Target major-tick count range for the auto-step heuristic. */
+  targetTickCount?: number;
+}
+
+export interface TickResult {
+  /** Major tick positions, sorted ascending. */
+  major: number[];
+  /** Minor tick positions (between majors), sorted ascending. */
+  minor: number[];
+}
+
+const DEFAULT_TARGET_TICK_COUNT = 6;
+// d3-scale convention. Omitting 2.5 keeps ticks on "round" values
+// (multiples of 1/2/5/10/20/50/…) that match Word's tick choices more
+// closely than the extended-Wilkinson mantissa list.
+const NICE_STEP_MANTISSAS = [1, 2, 5, 10];
+
+/**
+ * Generate tick positions for a value axis.
+ *
+ * When `majorUnit` is supplied, ticks are strict multiples of it
+ * covering `[min, max]`. Otherwise the auto-step heuristic picks a
+ * "nice" step from `NICE_STEP_MANTISSAS × 10^n` that produces roughly
+ * `targetTickCount` (default 6) major ticks.
+ *
+ * Log-scale axes generate ticks at `logBase^k` for integer k covering
+ * the domain, plus minor ticks at {2,3,…,base-1} × logBase^k between
+ * majors (standard log-axis convention, matching Word's output).
+ *
+ * Degenerate domains (min > max, min === max, non-finite values) fall
+ * back to a single `[min, min]` tick so callers always get at least
+ * one position to render an axis line.
+ */
+export function generateValueTicks(input: ValueTickInput): TickResult {
+  if (!Number.isFinite(input.min) || !Number.isFinite(input.max)) {
+    return { major: [input.min], minor: [] };
+  }
+  if (input.min === input.max) {
+    return { major: [input.min], minor: [] };
+  }
+  const [min, max] = input.min < input.max
+    ? [input.min, input.max]
+    : [input.max, input.min];
+
+  if (input.logBase && input.logBase > 1) {
+    return generateLogTicks(min, max, input.logBase);
+  }
+
+  const step = input.majorUnit ?? niceStep(
+    max - min,
+    input.targetTickCount ?? DEFAULT_TARGET_TICK_COUNT,
+  );
+  const minorStep = input.minorUnit ?? step / 5;
+
+  const firstMajor = Math.ceil(min / step - 1e-9) * step;
+  const major: number[] = [];
+  for (let t = firstMajor; t <= max + 1e-9; t += step) {
+    // Round to the step's decimal precision to avoid floating drift.
+    major.push(roundToStep(t, step));
+  }
+
+  const minor: number[] = [];
+  if (minorStep > 0 && minorStep < step) {
+    const firstMinor = Math.ceil(min / minorStep - 1e-9) * minorStep;
+    for (let t = firstMinor; t <= max + 1e-9; t += minorStep) {
+      // Skip positions that coincide with major ticks (mod epsilon).
+      const snapped = roundToStep(t, minorStep);
+      if (!isMajorPosition(snapped, step)) minor.push(snapped);
+    }
+  }
+
+  return { major, minor };
+}
+
+/**
+ * Pick a "nice" step size for a given range + target tick count using
+ * the d3-scale-style heuristic: find the power-of-ten bucket, then
+ * pick from {1, 2, 2.5, 5, 10} the mantissa that yields the closest
+ * number of ticks to `target`.
+ */
+export function niceStep(range: number, target: number): number {
+  if (range <= 0 || !Number.isFinite(range)) return 1;
+  const rough = range / Math.max(1, target);
+  const magnitude = Math.pow(10, Math.floor(Math.log10(rough)));
+  const normalized = rough / magnitude;
+  // Pick the mantissa producing tick count closest to target.
+  let best = NICE_STEP_MANTISSAS[0]!;
+  let bestDelta = Infinity;
+  for (const m of NICE_STEP_MANTISSAS) {
+    if (m < normalized) continue;
+    const step = m * magnitude;
+    const count = Math.floor(range / step) + 1;
+    const delta = Math.abs(count - target);
+    if (delta < bestDelta) {
+      bestDelta = delta;
+      best = m;
+    }
+  }
+  return best * magnitude;
+}
+
+function generateLogTicks(min: number, max: number, base: number): TickResult {
+  // For log scale, clamp min > 0 to avoid -Infinity.
+  const safeMin = Math.max(min, Number.MIN_VALUE);
+  const lo = Math.floor(logBase(safeMin, base));
+  const hi = Math.ceil(logBase(max, base));
+  const major: number[] = [];
+  const minor: number[] = [];
+  for (let k = lo; k <= hi; k++) {
+    const power = Math.pow(base, k);
+    if (power >= min - 1e-12 && power <= max + 1e-12) {
+      major.push(power);
+    }
+    // Minor ticks at 2×, 3×, …, (base-1)× within each decade.
+    for (let m = 2; m < base; m++) {
+      const minorPos = m * power;
+      if (minorPos >= min && minorPos <= max) {
+        minor.push(minorPos);
+      }
+    }
+  }
+  return { major, minor };
+}
+
+function logBase(x: number, base: number): number {
+  return Math.log(x) / Math.log(base);
+}
+
+function roundToStep(value: number, step: number): number {
+  // Round to the decimal precision implied by the step so e.g.
+  // `step=0.2` produces values like 0.2, 0.4, 0.6 without 0.30000004.
+  // Also normalise -0 to 0 since `Math.ceil(-1e-9) * step === -0` and
+  // `deepStrictEqual` distinguishes -0 from 0.
+  if (step === 0) return value;
+  const precision = Math.max(0, -Math.floor(Math.log10(Math.abs(step))) + 2);
+  const factor = Math.pow(10, precision);
+  const rounded = Math.round(value * factor) / factor;
+  return rounded === 0 ? 0 : rounded;
+}
+
+function isMajorPosition(value: number, step: number): boolean {
+  const mod = Math.abs(value / step - Math.round(value / step));
+  return mod < 1e-6;
+}
+
+// ---------------------------------------------------------------------------
+// Category axis — label pass-through with optional skip
+// ---------------------------------------------------------------------------
+
+export interface CategoryTickInput {
+  labels: ReadonlyArray<string>;
+  /** c:tickLabelSkip — show every N-th label. 1 (default) shows all. */
+  tickLabelSkip?: number;
+  /** c:tickMarkSkip — show tick mark every N-th category. */
+  tickMarkSkip?: number;
+}
+
+export interface CategoryTickResult {
+  /**
+   * Emitted tick positions as category index → label pairs. Index is
+   * the position in the original `labels` array; label is the rendered
+   * string ("" when skipped by `tickLabelSkip`). Renderers map index
+   * to plot-area coordinate via the category slot width.
+   */
+  ticks: Array<{ index: number; label: string; major: boolean }>;
+}
+
+export function generateCategoryTicks(input: CategoryTickInput): CategoryTickResult {
+  const labelSkip = Math.max(1, Math.floor(input.tickLabelSkip ?? 1));
+  const markSkip = Math.max(1, Math.floor(input.tickMarkSkip ?? 1));
+  const ticks: CategoryTickResult["ticks"] = [];
+  for (let i = 0; i < input.labels.length; i++) {
+    const isLabeled = i % labelSkip === 0;
+    const isMajor = i % markSkip === 0;
+    ticks.push({
+      index: i,
+      label: isLabeled ? input.labels[i]! : "",
+      major: isMajor,
+    });
+  }
+  return { ticks };
+}
+
+// ---------------------------------------------------------------------------
+// Date axis — Excel serial dates
+// ---------------------------------------------------------------------------
+
+export type TimeUnit = "days" | "months" | "years";
+
+export interface DateTickInput {
+  /** Excel serial date (days since 1899-12-30). */
+  min: number;
+  max: number;
+  /** c:baseTimeUnit — sets the default step for auto-generation. */
+  baseTimeUnit?: TimeUnit;
+  /** c:majorUnit + c:majorTimeUnit — pinned major step. */
+  majorUnit?: number;
+  majorTimeUnit?: TimeUnit;
+  /** c:minorUnit + c:minorTimeUnit — pinned minor step. */
+  minorUnit?: number;
+  minorTimeUnit?: TimeUnit;
+}
+
+/**
+ * Generate tick positions for a date axis. Returns Excel serial-date
+ * numbers so the renderer can format them via the chart's number-format
+ * code (`"mmm-yy"`, `"yyyy-mm-dd"`, etc.) using `formatNumber` from
+ * `number-format.ts`.
+ *
+ * When the domain spans ≤ 2 months and no explicit unit, ticks fall at
+ * day boundaries; ≤ 2 years → month boundaries; larger → year boundaries.
+ * This mirrors Excel's default tick auto-selection.
+ */
+export function generateDateTicks(input: DateTickInput): TickResult {
+  if (!Number.isFinite(input.min) || !Number.isFinite(input.max)) {
+    return { major: [input.min], minor: [] };
+  }
+  if (input.min === input.max) {
+    return { major: [input.min], minor: [] };
+  }
+  const [min, max] = input.min < input.max
+    ? [input.min, input.max]
+    : [input.max, input.min];
+
+  const unit = input.majorTimeUnit
+    ?? input.baseTimeUnit
+    ?? autoPickTimeUnit(max - min);
+  const step = Math.max(1, Math.floor(input.majorUnit ?? 1));
+
+  const major = stepByTimeUnit(min, max, unit, step);
+
+  const minorUnit = input.minorTimeUnit ?? unit;
+  const minorStepSize = Math.max(1, Math.floor(input.minorUnit ?? 1));
+  const minor = input.minorUnit !== undefined || input.minorTimeUnit !== undefined
+    ? stepByTimeUnit(min, max, minorUnit, minorStepSize).filter(
+        (pos) => !major.includes(pos),
+      )
+    : [];
+
+  return { major, minor };
+}
+
+function autoPickTimeUnit(rangeDays: number): TimeUnit {
+  if (rangeDays <= 62) return "days";
+  if (rangeDays <= 730) return "months";
+  return "years";
+}
+
+function stepByTimeUnit(
+  min: number,
+  max: number,
+  unit: TimeUnit,
+  stepN: number,
+): number[] {
+  const ticks: number[] = [];
+  if (unit === "days") {
+    const start = Math.ceil(min / stepN) * stepN;
+    for (let t = start; t <= max; t += stepN) {
+      ticks.push(t);
+    }
+    return ticks;
+  }
+  // Month / year: walk via Date to respect variable month lengths.
+  let { y, m, d } = serialToYMD(Math.ceil(min));
+  // Snap d to 1st for month/year stepping.
+  d = 1;
+  // Snap m to 1st for year stepping.
+  if (unit === "years") m = 1;
+  let serial = ymdToSerial(y, m, d);
+  if (serial < min) {
+    if (unit === "months") {
+      m += 1;
+      if (m > 12) { m = 1; y += 1; }
+    } else {
+      y += 1;
+    }
+    serial = ymdToSerial(y, m, d);
+  }
+  while (serial <= max) {
+    ticks.push(serial);
+    if (unit === "months") {
+      m += stepN;
+      while (m > 12) { m -= 12; y += 1; }
+    } else {
+      y += stepN;
+    }
+    serial = ymdToSerial(y, m, d);
+  }
+  return ticks;
+}
+
+/**
+ * Convert an Excel serial date to a {y, m, d} triple. Excel's epoch is
+ * 1899-12-30 (treating the bogus 1900-02-29 leap-day as day 60).
+ */
+function serialToYMD(serial: number): { y: number; m: number; d: number } {
+  // 1899-12-30 baseline → offset of 25569 aligns with Unix epoch.
+  const ms = (serial - 25569) * 86_400_000;
+  const d = new Date(ms);
+  return {
+    y: d.getUTCFullYear(),
+    m: d.getUTCMonth() + 1,
+    d: d.getUTCDate(),
+  };
+}
+
+function ymdToSerial(y: number, m: number, d: number): number {
+  const ms = Date.UTC(y, m - 1, d);
+  return ms / 86_400_000 + 25569;
+}

package/src/ui-tailwind/chart/layout/plot-area.ts

@@ -0,0 +1,344 @@
+/**
+ * Plot-area layout: partition the canvas into title / legend / axis /
+ * plot rectangles (Stage 3A, pure math).
+ *
+ * Call shape:
+ *
+ *   layoutPlotArea({ w, h }, model, theme) → PlotAreaLayout
+ *
+ * Algorithm (Word's observed order):
+ *   1. Reserve title band at top (if `model.title` present and not overlaid).
+ *   2. Reserve legend band on the declared side (b/t/l/r/tr).
+ *   3. Reserve Y-axis band on the left (and right if secondary axis).
+ *   4. Reserve X-axis band on the bottom.
+ *   5. Remaining rectangle is the plot area.
+ *
+ * **Text measurement is a fixed-stub at Slice 3A.** `measureTextWidth`
+ * and `measureTextHeight` use a deterministic avg-glyph / line-height
+ * approximation so the layout math is unit-testable without a browser.
+ * Slice 3B swaps in the real `measureText(text, txPr, theme)` helper
+ * that calls `ctx.measureText` (browser) or an empirical LRU (SSR) —
+ * the stub keeps the public API stable so Slice 3B is a pure
+ * implementation swap.
+ */
+
+import type { ChartModel } from "../../../io/ooxml/chart/types.ts";
+import type { ResolvedTheme } from "../../../model/canonical-document.ts";
+import {
+  generateCategoryTicks,
+  generateValueTicks,
+  type TickResult,
+} from "./axis-layout.ts";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface Rect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface PlotAreaLayout {
+  plotRect: Rect;
+  titleRect?: Rect;
+  legendRect?: Rect;
+  xAxisRect?: Rect;
+  yAxisRect?: Rect;
+  secondaryYAxisRect?: Rect;
+}
+
+export interface CanvasRect {
+  w: number;
+  h: number;
+}
+
+/**
+ * Partition the canvas into labelled sub-rectangles. The returned
+ * `plotRect` is the rectangle the chart-type renderer draws into.
+ *
+ * The current implementation uses the fixed-stub text measurement
+ * (`GLYPH_WIDTH_PX` × font size, `LINE_HEIGHT_RATIO` × font size). Slice
+ * 3B replaces those constants with a call-through to the real
+ * font-metrics helper.
+ */
+export function layoutPlotArea(
+  canvas: CanvasRect,
+  model: ChartModel,
+  theme: ResolvedTheme | undefined,
+): PlotAreaLayout {
+  void theme; // consumed by Slice 3B's real font-metrics wrapper.
+
+  let top = 0;
+  let bottom = canvas.h;
+  let left = 0;
+  let right = canvas.w;
+
+  const out: PlotAreaLayout = {
+    plotRect: { x: 0, y: 0, w: canvas.w, h: canvas.h },
+  };
+
+  // 1. Title band (top).
+  if (model.kind !== "unsupported" && model.title && !model.title.overlay) {
+    const titleHeight = measureTitleHeight(model.title.text ?? "");
+    out.titleRect = { x: 0, y: 0, w: canvas.w, h: titleHeight };
+    top += titleHeight + BAND_GAP_PX;
+  }
+
+  // 2. Legend band — on the side indicated by `legend.position`.
+  if (model.kind !== "unsupported" && model.legend && !model.legend.overlay) {
+    const entryCount = countLegendEntries(model);
+    const { w: legendW, h: legendH } = measureLegendBox(entryCount);
+    switch (model.legend.position) {
+      case "t":
+        out.legendRect = { x: 0, y: top, w: canvas.w, h: legendH };
+        top += legendH + BAND_GAP_PX;
+        break;
+      case "b":
+        out.legendRect = {
+          x: 0,
+          y: bottom - legendH,
+          w: canvas.w,
+          h: legendH,
+        };
+        bottom -= legendH + BAND_GAP_PX;
+        break;
+      case "l":
+        out.legendRect = { x: left, y: top, w: legendW, h: bottom - top };
+        left += legendW + BAND_GAP_PX;
+        break;
+      case "r":
+      case "tr":
+      default:
+        out.legendRect = {
+          x: right - legendW,
+          y: top,
+          w: legendW,
+          h: bottom - top,
+        };
+        right -= legendW + BAND_GAP_PX;
+        break;
+    }
+  }
+
+  // 3. Axis bands. Only cartesian families (bar/line/area/scatter/bubble/
+  // combo) reserve axis space; pie/doughnut/unsupported skip this entirely.
+  const axes = pickAxes(model);
+  if (axes) {
+    // Y-axis on the left: width = max(tick label width) + axis-title
+    // rotated height.
+    const yTickLabels = axisTickLabels(axes.y);
+    const yWidth =
+      maxLabelWidth(yTickLabels) + (axes.yTitle ? AXIS_TITLE_BAND_PX : 0);
+    out.yAxisRect = { x: left, y: top, w: yWidth, h: bottom - top };
+    left += yWidth + BAND_GAP_PX;
+
+    // Secondary Y-axis on the right.
+    if (axes.secondaryY) {
+      const y2TickLabels = axisTickLabels(axes.secondaryY);
+      const y2Width =
+        maxLabelWidth(y2TickLabels) + (axes.secondaryYTitle ? AXIS_TITLE_BAND_PX : 0);
+      out.secondaryYAxisRect = {
+        x: right - y2Width,
+        y: top,
+        w: y2Width,
+        h: bottom - top,
+      };
+      right -= y2Width + BAND_GAP_PX;
+    }
+
+    // X-axis on the bottom: height = label height + axis-title band.
+    const xLabelHeight = X_AXIS_LABEL_HEIGHT_PX;
+    const xHeight = xLabelHeight + (axes.xTitle ? AXIS_TITLE_BAND_PX : 0);
+    out.xAxisRect = {
+      x: left,
+      y: bottom - xHeight,
+      w: right - left,
+      h: xHeight,
+    };
+    bottom -= xHeight + BAND_GAP_PX;
+  }
+
+  out.plotRect = {
+    x: left,
+    y: top,
+    w: Math.max(0, right - left),
+    h: Math.max(0, bottom - top),
+  };
+  return out;
+}
+
+// ---------------------------------------------------------------------------
+// Text measurement — fixed stub (Slice 3B replaces with real metrics)
+// ---------------------------------------------------------------------------
+
+/**
+ * Approximate glyph width in pixels at font size 1. The real value
+ * depends on font + character; Calibri averages ~0.44 em for narrow
+ * body text, but chart labels tend to be digits which are monospace-
+ * like. 0.55 em is a conservative average that matches Word's default
+ * axis-label font (Calibri 10pt ≈ 13.3px) well enough for layout
+ * reservation. Replaced in Slice 3B.
+ */
+const GLYPH_WIDTH_EM = 0.55;
+
+const LINE_HEIGHT_RATIO = 1.2;
+const BAND_GAP_PX = 4;
+const AXIS_TITLE_BAND_PX = 14;
+const X_AXIS_LABEL_HEIGHT_PX = 14;
+const DEFAULT_AXIS_FONT_PX = 10;
+const DEFAULT_TITLE_FONT_PX = 14;
+const DEFAULT_LEGEND_FONT_PX = 10;
+const LEGEND_SWATCH_WIDTH_PX = 16;
+const LEGEND_SWATCH_GAP_PX = 6;
+const LEGEND_ENTRY_GAP_PX = 12;
+const LEGEND_MIN_WIDTH_PX = 80;
+
+function measureTitleHeight(text: string): number {
+  if (!text) return 0;
+  return DEFAULT_TITLE_FONT_PX * LINE_HEIGHT_RATIO;
+}
+
+function measureLegendBox(entryCount: number): { w: number; h: number } {
+  if (entryCount <= 0) return { w: 0, h: 0 };
+  const avgLabelChars = 8;
+  const entryWidth =
+    LEGEND_SWATCH_WIDTH_PX +
+    LEGEND_SWATCH_GAP_PX +
+    GLYPH_WIDTH_EM * DEFAULT_LEGEND_FONT_PX * avgLabelChars;
+  // Reserve a one-column stack: width = entryWidth, height = N lines.
+  return {
+    w: Math.max(LEGEND_MIN_WIDTH_PX, entryWidth + LEGEND_ENTRY_GAP_PX),
+    h: entryCount * DEFAULT_LEGEND_FONT_PX * LINE_HEIGHT_RATIO,
+  };
+}
+
+function maxLabelWidth(labels: ReadonlyArray<string>): number {
+  if (labels.length === 0) return 0;
+  let maxChars = 0;
+  for (const label of labels) {
+    if (label.length > maxChars) maxChars = label.length;
+  }
+  return maxChars * GLYPH_WIDTH_EM * DEFAULT_AXIS_FONT_PX;
+}
+
+// ---------------------------------------------------------------------------
+// Model introspection helpers
+// ---------------------------------------------------------------------------
+
+interface AxisBundle {
+  y: TickResult;
+  yTitle: boolean;
+  x?: TickResult;
+  xTitle: boolean;
+  secondaryY?: TickResult;
+  secondaryYTitle: boolean;
+}
+
+/**
+ * Inspect the model and produce tick lists for each axis position so
+ * the layout can reserve space based on the widest label. Pie /
+ * doughnut / unsupported return null (no axis bands).
+ */
+function pickAxes(model: ChartModel): AxisBundle | null {
+  switch (model.kind) {
+    case "bar":
+    case "line":
+    case "area": {
+      const yTicks = axisTicks(model.valueAxis);
+      const y2Ticks = model.secondaryValueAxis
+        ? axisTicks(model.secondaryValueAxis)
+        : undefined;
+      const bundle: AxisBundle = {
+        y: yTicks,
+        yTitle: !!model.valueAxis.title,
+        xTitle: model.categoryAxis.kind === "category"
+          ? !!model.categoryAxis.title
+          : !!model.categoryAxis.title,
+        secondaryYTitle: !!model.secondaryValueAxis?.title,
+      };
+      if (y2Ticks) bundle.secondaryY = y2Ticks;
+      return bundle;
+    }
+    case "scatter":
+    case "bubble": {
+      return {
+        y: axisTicks(model.yAxis),
+        yTitle: !!model.yAxis.title,
+        x: axisTicks(model.xAxis),
+        xTitle: !!model.xAxis.title,
+        secondaryYTitle: false,
+      };
+    }
+    case "combo": {
+      // Use the first group's axes as representative.
+      const first = model.groups[0];
+      if (!first) return null;
+      return pickAxes(first);
+    }
+    case "pie":
+    case "unsupported":
+      return null;
+  }
+}
+
+function axisTicks(axis: {
+  kind: string;
+  min?: number;
+  max?: number;
+  majorUnit?: number;
+  categoryLabels?: ReadonlyArray<string>;
+}): TickResult {
+  if (axis.kind === "category") {
+    const cat = generateCategoryTicks({
+      labels: axis.categoryLabels ?? [],
+    });
+    return {
+      major: cat.ticks.map((t) => t.index),
+      minor: [],
+    };
+  }
+  const min = axis.min ?? 0;
+  const max = axis.max ?? 1;
+  return generateValueTicks({
+    min,
+    max,
+    ...(axis.majorUnit !== undefined ? { majorUnit: axis.majorUnit } : {}),
+  });
+}
+
+/**
+ * Produce string labels for an axis's major ticks. Category axis uses
+ * the source labels directly; value axis stringifies numeric positions.
+ * Real number-format handling lands in Slice 4G via `number-format.ts`;
+ * the fixed-width stub here is sufficient for plot-area reservation
+ * (within ~1 glyph-width of the real rendered size).
+ */
+function axisTickLabels(ticks: TickResult): string[] {
+  return ticks.major.map((t) => String(t));
+}
+
+function countLegendEntries(model: ChartModel): number {
+  switch (model.kind) {
+    case "bar":
+    case "line":
+    case "area":
+    case "scatter":
+    case "bubble":
+      return model.series.length;
+    case "pie": {
+      // Pie legends show one entry per slice.
+      const first = model.series[0];
+      return first ? first.values.length : 0;
+    }
+    case "combo": {
+      let total = 0;
+      for (const g of model.groups) total += g.series.length;
+      return total;
+    }
+    case "unsupported":
+      return 0;
+  }
+}