@beyondwork/docx-react-component 1.0.53 → 1.0.54

package/src/ui-tailwind/chart/ChartSurface.tsx

@@ -0,0 +1,236 @@
+/**
+ * ChartSurface — top-level chart renderer dispatch (Stage 4 Slice 4H).
+ *
+ * Accepts a `ChartModel` discriminated union and dispatches to the
+ * appropriate per-family renderer. Emits a single `<svg>` root with:
+ *
+ *   - `role="img"` + `aria-label={describeChart(model)}` for
+ *     accessibility (Stage 4 exit criteria).
+ *   - `<defs>` block mounted from a shared `DefsRegistry` so gradient
+ *     fills registered by sub-renderers surface once in the root.
+ *   - Deterministic FNV-1a gradient IDs from Stage 3B (no `Math.random`,
+ *     no counter state — important for Stage 7 pixel-diff stability).
+ *
+ * ChartSurface is the component consumed by Stage 6's PM `NodeView`
+ * bridge (`chart-node-view.tsx`) — it renders independently of
+ * `refreshRenderSnapshot()` so it doesn't widen the wholesale-snapshot
+ * path (perf invariant #4).
+ *
+ * The component is wrapped in `React.memo` with a structural hash
+ * comparator so re-renders are skipped when `rawXml + width + height`
+ * haven't changed.
+ */
+
+import React from "react";
+import type { ChartModel } from "../../io/ooxml/chart/types.ts";
+import type { ResolvedTheme } from "../../model/canonical-document.ts";
+import { layoutPlotArea, type PlotAreaLayout } from "./layout/plot-area.ts";
+import { AreaChart } from "./render/area.tsx";
+import { BarColumnChart } from "./render/bar-column.tsx";
+import { BubbleChart } from "./render/bubble.tsx";
+import { ComboChart } from "./render/combo.tsx";
+import { DataLabels } from "./render/data-labels.tsx";
+import { DefsRegistry } from "./render/svg-primitives.ts";
+import { LineChart } from "./render/line.tsx";
+import { PieChart } from "./render/pie.tsx";
+import { ScatterChart } from "./render/scatter.tsx";
+import { UnsupportedChart } from "./render/unsupported.tsx";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface ChartSurfaceProps {
+  model: ChartModel;
+  /** Rendered size in pixels. */
+  width: number;
+  height: number;
+  theme?: ResolvedTheme;
+  /** Optional pre-computed layout; falls back to `layoutPlotArea(...)`. */
+  layout?: PlotAreaLayout;
+  /** Fallback-image resolver for unsupported chart types. */
+  resolveMediaUrl?: (mediaId: string) => string | undefined;
+  /** The chart-preview's media ID, if one was cached in `mc:Fallback`. */
+  previewMediaId?: string;
+}
+
+function ChartSurfaceImpl({
+  model,
+  width,
+  height,
+  theme,
+  layout,
+  resolveMediaUrl,
+  previewMediaId,
+}: ChartSurfaceProps): React.ReactElement {
+  const resolvedLayout = layout ?? layoutPlotArea({ w: width, h: height }, model, theme);
+  const defs = new DefsRegistry();
+
+  const body = dispatchBody({
+    model,
+    layout: resolvedLayout,
+    theme,
+    defs,
+    resolveMediaUrl,
+    previewMediaId,
+  });
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label={describeChart(model)}
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      data-role="chart-surface"
+      data-chart-kind={model.kind}
+    >
+      {!defs.isEmpty() && (
+        <defs data-role="chart-defs">
+          {renderDefs(defs)}
+        </defs>
+      )}
+      {body}
+      <g data-role="data-labels-root">
+        <DataLabels model={model} layout={resolvedLayout} theme={theme} />
+      </g>
+    </svg>
+  );
+}
+
+export const ChartSurface = React.memo(
+  ChartSurfaceImpl,
+  (prev, next) =>
+    prev.model.rawXml === next.model.rawXml &&
+    prev.width === next.width &&
+    prev.height === next.height &&
+    prev.theme === next.theme &&
+    prev.previewMediaId === next.previewMediaId,
+);
+
+// ---------------------------------------------------------------------------
+// Body dispatch
+// ---------------------------------------------------------------------------
+
+interface DispatchInput {
+  model: ChartModel;
+  layout: PlotAreaLayout;
+  theme: ResolvedTheme | undefined;
+  defs: DefsRegistry;
+  resolveMediaUrl: ChartSurfaceProps["resolveMediaUrl"];
+  previewMediaId: ChartSurfaceProps["previewMediaId"];
+}
+
+function dispatchBody({
+  model,
+  layout,
+  theme,
+  defs,
+  resolveMediaUrl,
+  previewMediaId,
+}: DispatchInput): React.ReactElement {
+  switch (model.kind) {
+    case "bar":
+      return <BarColumnChart model={model} layout={layout} theme={theme} defs={defs} />;
+    case "line":
+      return <LineChart model={model} layout={layout} theme={theme} />;
+    case "pie":
+      return <PieChart model={model} layout={layout} theme={theme} defs={defs} />;
+    case "area":
+      return <AreaChart model={model} layout={layout} theme={theme} />;
+    case "scatter":
+      return <ScatterChart model={model} layout={layout} theme={theme} />;
+    case "bubble":
+      return <BubbleChart model={model} layout={layout} theme={theme} />;
+    case "combo":
+      return <ComboChart model={model} layout={layout} theme={theme} />;
+    case "unsupported":
+      return (
+        <UnsupportedChart
+          model={model}
+          layout={layout}
+          theme={theme}
+          {...(resolveMediaUrl ? { resolveMediaUrl } : {})}
+          {...(previewMediaId ? { previewMediaId } : {})}
+        />
+      );
+  }
+}
+
+// ---------------------------------------------------------------------------
+// DefsRegistry → SVG <defs> children
+// ---------------------------------------------------------------------------
+
+function renderDefs(defs: DefsRegistry): React.ReactElement[] {
+  return defs.toDefsEntries().map((entry) => {
+    if (entry.kind === "linearGradient") {
+      const { x1, y1, x2, y2 } = angleToCoords(entry.angle);
+      return (
+        <linearGradient
+          key={entry.id}
+          id={entry.id}
+          x1={x1}
+          y1={y1}
+          x2={x2}
+          y2={y2}
+        >
+          {entry.stops.map((stop, i) => (
+            <stop key={i} offset={stop.offset} stopColor={stop.color} />
+          ))}
+        </linearGradient>
+      );
+    }
+    return <React.Fragment key="__empty__" />;
+  });
+}
+
+/**
+ * Convert a gradient angle (degrees, OOXML clockwise-from-horizontal)
+ * to SVG `x1/y1/x2/y2` percentage values. 0° = left-to-right,
+ * 90° = top-to-bottom.
+ */
+function angleToCoords(angleDeg: number): {
+  x1: string; y1: string; x2: string; y2: string;
+} {
+  const rad = (angleDeg * Math.PI) / 180;
+  const dx = Math.cos(rad);
+  const dy = Math.sin(rad);
+  const x1 = dx < 0 ? "100%" : "0%";
+  const x2 = dx < 0 ? "0%" : "100%";
+  const y1 = dy < 0 ? "100%" : "0%";
+  const y2 = dy < 0 ? "0%" : "100%";
+  return { x1, y1, x2, y2 };
+}
+
+// ---------------------------------------------------------------------------
+// Accessibility labels
+// ---------------------------------------------------------------------------
+
+function describeChart(model: ChartModel): string {
+  const title = model.kind !== "unsupported" ? model.title?.text : undefined;
+  const kindLabel = kindToLabel(model);
+  if (title) return `${kindLabel}: ${title}`;
+  return kindLabel;
+}
+
+function kindToLabel(model: ChartModel): string {
+  switch (model.kind) {
+    case "bar":
+      return model.direction === "bar" ? "Bar chart" : "Column chart";
+    case "line":
+      return "Line chart";
+    case "pie":
+      return model.doughnut ? "Doughnut chart" : "Pie chart";
+    case "area":
+      return "Area chart";
+    case "scatter":
+      return "Scatter chart";
+    case "bubble":
+      return "Bubble chart";
+    case "combo":
+      return "Combination chart";
+    case "unsupported":
+      return "Chart (unsupported type)";
+  }
+}

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

@@ -86,17 +86,19 @@ export function generateValueTicks(input: ValueTickInput): TickResult {
   );
   const minorStep = input.minorUnit ?? step / 5;
 
-  const firstMajor = Math.ceil(min / step - 1e-9) * step;
+  // C6: Use step-relative epsilon so tiny ranges (e.g. max ≈ 1e-15) never
+  // produce millions of iterations from an absolute 1e-9 overshoot.
+  const firstMajor = Math.ceil(min / step - step * 1e-9) * step;
   const major: number[] = [];
-  for (let t = firstMajor; t <= max + 1e-9; t += step) {
+  for (let t = firstMajor; t <= max + step * 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) {
+    const firstMinor = Math.ceil(min / minorStep - minorStep * 1e-9) * minorStep;
+    for (let t = firstMinor; t <= max + minorStep * 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);
@@ -265,11 +267,17 @@ export function generateDateTicks(input: DateTickInput): TickResult {
 
   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),
-      )
-    : [];
+  // C7: Use a Set with rounded keys for the major-position filter so that
+  // serial-date round-trip drift (sub-ms) doesn't leak duplicate ticks.
+  // Rounding to the nearest integer is safe because date serial positions
+  // differ by at least 1 (minimum granularity is 1 day).
+  let minor: number[] = [];
+  if (input.minorUnit !== undefined || input.minorTimeUnit !== undefined) {
+    const majorSet = new Set(major.map((v) => Math.round(v)));
+    minor = stepByTimeUnit(min, max, minorUnit, minorStepSize).filter(
+      (pos) => !majorSet.has(Math.round(pos)),
+    );
+  }
 
   return { major, minor };
 }

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

@@ -0,0 +1,231 @@
+/**
+ * Legend layout — entry placement with multi-row wrapping (Stage 3C).
+ *
+ * The layout is pure geometry: given a rectangle the plot-area reserved
+ * for the legend, a list of entries (label + swatch color), and the
+ * declared position (`b`/`t`/`l`/`r`/`tr`), compute the position of each
+ * swatch + label and the bounding box actually consumed.
+ *
+ * Rules (matching Word's observed behavior at 100% zoom):
+ *
+ *   - Horizontal legends (position `b` / `t`) flow entries left-to-right
+ *     and wrap to a new row when the next entry would overflow the
+ *     available width. Entries within a row are gap-separated.
+ *
+ *   - Vertical legends (position `l` / `r` / `tr`) stack entries top-to-
+ *     bottom, one per row. Excess entries are not clipped — the bbox
+ *     grows downward and the caller is responsible for deciding how to
+ *     handle overflow.
+ *
+ *   - Every entry gets a swatch of a fixed pixel width, followed by a
+ *     gap, followed by the label. The label width is computed from the
+ *     real `measureText` helper (Slice 3B).
+ *
+ * The returned `entries` array preserves input order so renderers can
+ * walk entries alongside their swatch color without a second lookup.
+ */
+
+import type { Rect } from "./plot-area.ts";
+import type { ResolvedTheme } from "../../../model/canonical-document.ts";
+import { measureText } from "../render/font-metrics.ts";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export type LegendPosition = "b" | "t" | "l" | "r" | "tr";
+
+export interface LegendEntryInput {
+  label: string;
+  /** Resolved sRGB color for the swatch (e.g. "#4472C4"). */
+  color: string;
+}
+
+export interface LegendEntryRect {
+  label: string;
+  color: string;
+  swatchRect: Rect;
+  labelRect: Rect;
+}
+
+export interface LegendLayout {
+  /** Bounding box actually consumed inside the input `rect`. */
+  bbox: Rect;
+  /** Per-entry placement, in input order. */
+  entries: LegendEntryRect[];
+}
+
+export interface LegendLayoutOptions {
+  /** Font size in points for the legend label. Word default: 10pt. */
+  labelFontSizePt?: number;
+  /** Swatch width in pixels. Word default: ~10px for chart legends. */
+  swatchWidthPx?: number;
+  /** Swatch height in pixels. Defaults to `swatchWidthPx`. */
+  swatchHeightPx?: number;
+  /** Gap between swatch and label in pixels. Word default: 4px. */
+  swatchToLabelGapPx?: number;
+  /** Horizontal gap between entries in a row. Word default: 12px. */
+  entryGapPx?: number;
+  /** Vertical gap between rows. Default 2px. */
+  rowGapPx?: number;
+}
+
+// ---------------------------------------------------------------------------
+// Defaults
+// ---------------------------------------------------------------------------
+
+const DEFAULT_LABEL_FONT_PT = 10;
+const DEFAULT_SWATCH_WIDTH = 10;
+const DEFAULT_SWATCH_TO_LABEL_GAP = 4;
+const DEFAULT_ENTRY_GAP = 12;
+const DEFAULT_ROW_GAP = 2;
+
+// ---------------------------------------------------------------------------
+// Implementation
+// ---------------------------------------------------------------------------
+
+/**
+ * Compute the layout of legend entries inside `rect`, honoring
+ * `position`. Returns the consumed `bbox` (so callers can re-tighten
+ * the plot-area rectangle) and per-entry swatch + label sub-rects.
+ */
+export function layoutLegend(
+  entries: ReadonlyArray<LegendEntryInput>,
+  rect: Rect,
+  position: LegendPosition,
+  theme: ResolvedTheme | undefined,
+  options: LegendLayoutOptions = {},
+): LegendLayout {
+  if (entries.length === 0) {
+    return {
+      bbox: { x: rect.x, y: rect.y, w: 0, h: 0 },
+      entries: [],
+    };
+  }
+
+  const labelFontPt = options.labelFontSizePt ?? DEFAULT_LABEL_FONT_PT;
+  const swatchW = options.swatchWidthPx ?? DEFAULT_SWATCH_WIDTH;
+  const swatchH = options.swatchHeightPx ?? swatchW;
+  const swatchGap = options.swatchToLabelGapPx ?? DEFAULT_SWATCH_TO_LABEL_GAP;
+  const entryGap = options.entryGapPx ?? DEFAULT_ENTRY_GAP;
+  const rowGap = options.rowGapPx ?? DEFAULT_ROW_GAP;
+  const txPr = { fontSizePt: labelFontPt };
+
+  // Pre-measure every label so wrap decisions can be made without
+  // re-measuring (the LRU cache in font-metrics makes this O(unique)).
+  const measured = entries.map((e) => {
+    const m = measureText(e.label, txPr, theme);
+    return {
+      entry: e,
+      labelWidth: m.width,
+      lineHeight: m.lineHeight,
+    };
+  });
+  const rowHeight = Math.max(swatchH, measured[0]!.lineHeight);
+  const entryWidth = (m: typeof measured[0]): number =>
+    swatchW + swatchGap + m.labelWidth;
+
+  // Vertical legends (l / r / tr) — one entry per row, no wrapping.
+  if (position === "l" || position === "r" || position === "tr") {
+    const maxWidth = Math.max(...measured.map(entryWidth));
+    const outEntries: LegendEntryRect[] = [];
+    let cursorY = rect.y;
+    for (const m of measured) {
+      const entryRect = placeVertical(m, rect.x, cursorY, swatchW, swatchH, swatchGap, rowHeight);
+      outEntries.push(entryRect);
+      cursorY += rowHeight + rowGap;
+    }
+    const consumedH = measured.length * rowHeight + (measured.length - 1) * rowGap;
+    return {
+      bbox: { x: rect.x, y: rect.y, w: maxWidth, h: consumedH },
+      entries: outEntries,
+    };
+  }
+
+  // Horizontal legends (b / t) — row-flow with wrapping.
+  const outEntries: LegendEntryRect[] = [];
+  let cursorX = rect.x;
+  let cursorY = rect.y;
+  let rowStart = 0; // index of first entry in current row
+  let maxConsumedW = 0;
+
+  for (let i = 0; i < measured.length; i++) {
+    const m = measured[i]!;
+    const w = entryWidth(m);
+    const isRowStart = i === rowStart;
+    const nextX = isRowStart ? cursorX + w : cursorX + entryGap + w;
+    const overflows = !isRowStart && nextX > rect.x + rect.w;
+    if (overflows) {
+      // Wrap: center-align current row inside rect.w, move cursor.
+      const consumed = cursorX - rect.x;
+      if (consumed > maxConsumedW) maxConsumedW = consumed;
+      cursorX = rect.x;
+      cursorY += rowHeight + rowGap;
+      rowStart = i;
+    }
+    const xStart = cursorX + (i === rowStart ? 0 : entryGap);
+    outEntries.push(placeHorizontal(m, xStart, cursorY, swatchW, swatchH, swatchGap, rowHeight));
+    cursorX = xStart + w;
+  }
+  const finalRowConsumed = cursorX - rect.x;
+  if (finalRowConsumed > maxConsumedW) maxConsumedW = finalRowConsumed;
+  const totalHeight = cursorY + rowHeight - rect.y;
+
+  return {
+    bbox: { x: rect.x, y: rect.y, w: maxConsumedW, h: totalHeight },
+    entries: outEntries,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Placement helpers
+// ---------------------------------------------------------------------------
+
+function placeHorizontal(
+  m: { entry: LegendEntryInput; labelWidth: number; lineHeight: number },
+  x: number,
+  y: number,
+  swatchW: number,
+  swatchH: number,
+  swatchGap: number,
+  rowH: number,
+): LegendEntryRect {
+  // Vertically center swatch + label inside the row.
+  const swatchY = y + (rowH - swatchH) / 2;
+  const labelY = y + (rowH - m.lineHeight) / 2;
+  return {
+    label: m.entry.label,
+    color: m.entry.color,
+    swatchRect: { x, y: swatchY, w: swatchW, h: swatchH },
+    labelRect: {
+      x: x + swatchW + swatchGap,
+      y: labelY,
+      w: m.labelWidth,
+      h: m.lineHeight,
+    },
+  };
+}
+
+function placeVertical(
+  m: { entry: LegendEntryInput; labelWidth: number; lineHeight: number },
+  x: number,
+  y: number,
+  swatchW: number,
+  swatchH: number,
+  swatchGap: number,
+  rowH: number,
+): LegendEntryRect {
+  const swatchY = y + (rowH - swatchH) / 2;
+  const labelY = y + (rowH - m.lineHeight) / 2;
+  return {
+    label: m.entry.label,
+    color: m.entry.color,
+    swatchRect: { x, y: swatchY, w: swatchW, h: swatchH },
+    labelRect: {
+      x: x + swatchW + swatchGap,
+      y: labelY,
+      w: m.labelWidth,
+      h: m.lineHeight,
+    },
+  };
+}