@beyondwork/docx-react-component 1.0.53 → 1.0.54

package/src/ui-tailwind/chart/render/line.tsx

@@ -0,0 +1,363 @@
+/**
+ * Line chart renderer (Stage 4 Slice 4B).
+ *
+ * Handles straight + smoothed + markers + gap handling. Respects
+ * `dispBlanksAs` (B3):
+ *   - `"gap"`: break the polyline at null indices — emit separate path
+ *     segments on either side of each gap.
+ *   - `"zero"`: substitute null → 0 before rendering.
+ *   - `"span"`: connect across null indices as if they were absent
+ *     (the neighbors' chord closes the gap).
+ *
+ * Smoothing uses the in-tree Catmull-Rom → cubic-Bézier helper from
+ * `smooth-curve.ts` (Slice 4B). Per-series `smooth` override trumps the
+ * model-level `smooth` flag; same for `marker`.
+ *
+ * Stacked / percentStacked groupings sum values per category to derive
+ * cumulative y coordinates, matching Word's behavior.
+ */
+
+import React from "react";
+import { composeSeriesColor } from "../../../io/ooxml/chart/compose-series-color.ts";
+import type {
+  LineChartModel,
+  LineSeries,
+  MarkerSpec,
+} from "../../../io/ooxml/chart/types.ts";
+import type { ResolvedTheme } from "../../../model/canonical-document.ts";
+import type { PlotAreaLayout } from "../layout/plot-area.ts";
+import { smoothPath, type Point } from "./smooth-curve.ts";
+import { useProgressiveCount } from "./progressive-render.ts";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface LineChartProps {
+  model: LineChartModel;
+  layout: PlotAreaLayout;
+  theme: ResolvedTheme | undefined;
+}
+
+function LineChartImpl({ model, layout, theme }: LineChartProps): React.ReactElement {
+  const plot = layout.plotRect;
+  const { valueMin, valueMax } = computeValueRange(model);
+  const categoryCount = Math.max(
+    1,
+    model.categoryAxis.kind === "category"
+      ? model.categoryAxis.categoryLabels.length
+      : model.series[0]?.values.length ?? 1,
+  );
+  const visibleCategories = useProgressiveCount(categoryCount);
+  const slotWidth = plot.w / categoryCount;
+  const valueSpan = Math.max(1e-9, valueMax - valueMin);
+
+  /** Map (categoryIdx, value) → plot-coordinate point. */
+  const toPoint = (c: number, v: number): Point => {
+    const x = plot.x + (c + 0.5) * slotWidth;
+    const frac = (v - valueMin) / valueSpan;
+    const y = plot.y + plot.h - frac * plot.h;
+    return [x, y];
+  };
+
+  const lines: React.ReactElement[] = [];
+  const markers: React.ReactElement[] = [];
+
+  // Pre-compute per-series values (handling stacking).
+  const effectiveValues = computeEffectiveValues(model);
+
+  for (let s = 0; s < model.series.length; s++) {
+    const series = model.series[s]!;
+    const values = effectiveValues[s]!;
+    const color = composeSeriesColor(model, theme ?? { colors: {} }, s);
+    const smooth = series.smooth ?? model.smooth;
+    const showMarkers = (series.marker?.symbol ?? null) !== "none"
+      && ((series.marker !== undefined) || model.marker);
+
+    // Apply dispBlanksAs (B3); limit to visibleCategories for progressive render.
+    const visibleValues = visibleCategories < values.length
+      ? values.slice(0, visibleCategories)
+      : values;
+    const segments = applyDispBlanksAs(visibleValues, model.dispBlanksAs);
+
+    for (let segIdx = 0; segIdx < segments.length; segIdx++) {
+      const segment = segments[segIdx]!;
+      const points: Point[] = segment.map(({ c, v }) => toPoint(c, v));
+      if (points.length === 0) continue;
+      const d = smooth ? smoothPath(points) : polylinePath(points);
+      lines.push(
+        <path
+          key={`line-${s}-${segIdx}`}
+          d={d}
+          fill="none"
+          stroke={color}
+          strokeWidth={2}
+          data-role="line"
+          data-series-index={s}
+          data-segment-index={segIdx}
+        />,
+      );
+
+      if (showMarkers) {
+        for (const [i, pt] of points.entries()) {
+          markers.push(
+            renderMarker({
+              key: `m-${s}-${segIdx}-${i}`,
+              spec: series.marker,
+              point: pt,
+              color,
+              seriesIdx: s,
+              categoryIdx: segment[i]!.c,
+            }),
+          );
+        }
+      }
+    }
+  }
+
+  return (
+    <g data-role="line-chart" data-grouping={model.grouping}>
+      <g data-role="lines">{lines}</g>
+      <g data-role="markers">{markers}</g>
+      <g data-role="data-labels" />
+    </g>
+  );
+}
+
+export const LineChart = React.memo(
+  LineChartImpl,
+  (prev, next) =>
+    prev.model.rawXml === next.model.rawXml &&
+    prev.layout.plotRect.w === next.layout.plotRect.w &&
+    prev.layout.plotRect.h === next.layout.plotRect.h &&
+    prev.theme === next.theme,
+);
+
+// ---------------------------------------------------------------------------
+// Path helpers
+// ---------------------------------------------------------------------------
+
+function polylinePath(points: ReadonlyArray<Point>): string {
+  if (points.length === 0) return "";
+  const first = points[0]!;
+  let d = `M ${first[0]} ${first[1]}`;
+  for (let i = 1; i < points.length; i++) {
+    const p = points[i]!;
+    d += ` L ${p[0]} ${p[1]}`;
+  }
+  return d;
+}
+
+// ---------------------------------------------------------------------------
+// Value extraction (B3 — dispBlanksAs)
+// ---------------------------------------------------------------------------
+
+interface PointValue {
+  c: number;
+  v: number;
+}
+
+/**
+ * Convert a series' raw value array into contiguous segments based on
+ * `dispBlanksAs`. Each segment is a list of {categoryIdx, value} pairs
+ * that the renderer emits as a single path.
+ *
+ * - `"gap"`: nulls split the series into multiple segments (the path
+ *   literally breaks at the gap).
+ * - `"zero"`: nulls become 0; single continuous segment.
+ * - `"span"`: nulls dropped; single segment connects neighbors directly.
+ */
+function applyDispBlanksAs(
+  values: ReadonlyArray<number | null>,
+  mode: "gap" | "zero" | "span",
+): PointValue[][] {
+  switch (mode) {
+    case "gap": {
+      const segments: PointValue[][] = [];
+      let current: PointValue[] = [];
+      for (let c = 0; c < values.length; c++) {
+        const v = values[c];
+        if (v === null || v === undefined || !Number.isFinite(v)) {
+          if (current.length > 0) {
+            segments.push(current);
+            current = [];
+          }
+          continue;
+        }
+        current.push({ c, v });
+      }
+      if (current.length > 0) segments.push(current);
+      return segments;
+    }
+    case "zero": {
+      const out: PointValue[] = [];
+      for (let c = 0; c < values.length; c++) {
+        const v = values[c];
+        out.push({ c, v: v === null || v === undefined || !Number.isFinite(v) ? 0 : v });
+      }
+      return [out];
+    }
+    case "span": {
+      const out: PointValue[] = [];
+      for (let c = 0; c < values.length; c++) {
+        const v = values[c];
+        if (v === null || v === undefined || !Number.isFinite(v)) continue;
+        out.push({ c, v });
+      }
+      return out.length > 0 ? [out] : [];
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Stacking
+// ---------------------------------------------------------------------------
+
+function computeEffectiveValues(
+  model: LineChartModel,
+): Array<Array<number | null>> {
+  if (model.grouping === "standard") {
+    return model.series.map((s) => s.values.slice());
+  }
+  const categoryCount = Math.max(
+    0,
+    model.series[0]?.values.length ?? 0,
+  );
+  const out: Array<Array<number | null>> = [];
+
+  if (model.grouping === "stacked") {
+    const running = new Array<number>(categoryCount).fill(0);
+    for (const series of model.series) {
+      const row: Array<number | null> = [];
+      for (let c = 0; c < categoryCount; c++) {
+        const v = series.values[c];
+        if (v === null || v === undefined || !Number.isFinite(v)) {
+          row.push(null);
+        } else {
+          running[c] = running[c]! + v;
+          row.push(running[c]!);
+        }
+      }
+      out.push(row);
+    }
+    return out;
+  }
+  // percentStacked
+  const totals = new Array<number>(categoryCount).fill(0);
+  for (const series of model.series) {
+    for (let c = 0; c < categoryCount; c++) {
+      const v = series.values[c];
+      if (v === null || v === undefined || !Number.isFinite(v)) continue;
+      totals[c] = totals[c]! + v;
+    }
+  }
+  const running = new Array<number>(categoryCount).fill(0);
+  for (const series of model.series) {
+    const row: Array<number | null> = [];
+    for (let c = 0; c < categoryCount; c++) {
+      const v = series.values[c];
+      const total = totals[c]!;
+      if (v === null || v === undefined || !Number.isFinite(v) || total === 0) {
+        row.push(null);
+      } else {
+        running[c] = running[c]! + (v / total) * 100;
+        row.push(running[c]!);
+      }
+    }
+    out.push(row);
+  }
+  return out;
+}
+
+function computeValueRange(model: LineChartModel): {
+  valueMin: number;
+  valueMax: number;
+} {
+  if (model.valueAxis.min !== undefined && model.valueAxis.max !== undefined) {
+    return { valueMin: model.valueAxis.min, valueMax: model.valueAxis.max };
+  }
+  if (model.grouping === "percentStacked") {
+    return { valueMin: 0, valueMax: 100 };
+  }
+  const effective = computeEffectiveValues(model);
+  let min = 0;
+  let max = 0;
+  for (const row of effective) {
+    for (const v of row) {
+      if (v === null) continue;
+      if (v > max) max = v;
+      if (v < min) min = v;
+    }
+  }
+  return { valueMin: min, valueMax: max };
+}
+
+// ---------------------------------------------------------------------------
+// Markers
+// ---------------------------------------------------------------------------
+
+interface MarkerRenderInput {
+  key: string;
+  spec: MarkerSpec | undefined;
+  point: Point;
+  color: string;
+  seriesIdx: number;
+  categoryIdx: number;
+}
+
+function renderMarker({ key, spec, point, color, seriesIdx, categoryIdx }: MarkerRenderInput): React.ReactElement {
+  const symbol = spec?.symbol && spec.symbol !== "auto" ? spec.symbol : "circle";
+  const size = spec?.size ?? 5;
+  const [cx, cy] = point;
+  const shared = {
+    fill: color,
+    stroke: color,
+    strokeWidth: 1,
+    "data-role": "marker",
+    "data-series-index": seriesIdx,
+    "data-category-index": categoryIdx,
+  } as const;
+
+  switch (symbol) {
+    case "square":
+      return <rect key={key} x={cx - size / 2} y={cy - size / 2} width={size} height={size} {...shared} />;
+    case "diamond":
+      return (
+        <polygon
+          key={key}
+          points={`${cx},${cy - size / 2} ${cx + size / 2},${cy} ${cx},${cy + size / 2} ${cx - size / 2},${cy}`}
+          {...shared}
+        />
+      );
+    case "triangle":
+      return (
+        <polygon
+          key={key}
+          points={`${cx},${cy - size / 2} ${cx + size / 2},${cy + size / 2} ${cx - size / 2},${cy + size / 2}`}
+          {...shared}
+        />
+      );
+    case "x":
+    case "plus": {
+      const half = size / 2;
+      const rot = symbol === "x" ? 45 : 0;
+      return (
+        <g key={key} transform={rot === 0 ? undefined : `rotate(${rot} ${cx} ${cy})`} data-role="marker" data-series-index={seriesIdx} data-category-index={categoryIdx}>
+          <line x1={cx - half} y1={cy} x2={cx + half} y2={cy} stroke={color} strokeWidth={1.5} />
+          <line x1={cx} y1={cy - half} x2={cx} y2={cy + half} stroke={color} strokeWidth={1.5} />
+        </g>
+      );
+    }
+    case "dash":
+      return <line key={key} x1={cx - size / 2} y1={cy} x2={cx + size / 2} y2={cy} stroke={color} strokeWidth={2} data-role="marker" data-series-index={seriesIdx} data-category-index={categoryIdx} />;
+    case "dot":
+      return <circle key={key} cx={cx} cy={cy} r={Math.max(1, size / 4)} {...shared} />;
+    case "star":
+    case "picture":
+    case "circle":
+    case "none":
+    default:
+      // Fallback: circle.
+      return <circle key={key} cx={cx} cy={cy} r={size / 2} {...shared} />;
+  }
+}

package/src/ui-tailwind/chart/render/number-format.ts

@@ -3,7 +3,10 @@
  * (Stage 3A, pure math).
  *
  * Supports the top ~20 real-world format codes:
- *   - Digit placeholders: `0` (required digit), `#` (optional digit).
+ *   - Multi-section: `positive;negative;zero;text` — `;` outside quoted
+ *     literals separates sections; value sign selects the active section.
+ *   - Digit placeholders: `0` (required digit), `#` (optional digit —
+ *     suppresses trailing zeros and leading integer zero when unneeded).
  *   - Decimal point: `.`.
  *   - Thousands separator: `,` between digit placeholders.
  *   - Percent: `%` — scales value by 100 and appends `%`.
@@ -24,6 +27,48 @@
  * renderer never produces `NaN` or an exception at render time.
  */
 
+// ---------------------------------------------------------------------------
+// Section splitting — C1
+// ---------------------------------------------------------------------------
+
+/**
+ * Split a format code on `;` separators that appear outside quoted
+ * literal strings. Returns a 1-4 element array:
+ *   [positive, negative?, zero?, text?]
+ *
+ * Semicolons inside `"..."` quoted strings are NOT treated as separators.
+ */
+function splitFormatSections(code: string): string[] {
+  const sections: string[] = [];
+  let current = "";
+  let i = 0;
+  while (i < code.length) {
+    const ch = code[i]!;
+    if (ch === '"') {
+      // Include the entire quoted substring verbatim (no split inside).
+      const end = code.indexOf('"', i + 1);
+      if (end === -1) {
+        current += code.slice(i);
+        i = code.length;
+      } else {
+        current += code.slice(i, end + 1);
+        i = end + 1;
+      }
+      continue;
+    }
+    if (ch === ";") {
+      sections.push(current);
+      current = "";
+      i += 1;
+      continue;
+    }
+    current += ch;
+    i += 1;
+  }
+  sections.push(current);
+  return sections;
+}
+
 // ---------------------------------------------------------------------------
 // Public entry point
 // ---------------------------------------------------------------------------
@@ -36,6 +81,20 @@ export function formatNumber(value: number, code: string | undefined): string {
 
   if (!Number.isFinite(value)) return "";
 
+  // C1: Multi-section format (positive;negative;zero;text). Split first,
+  // before routing to date/scientific/decimal, so each section is treated
+  // as an independent single-section code. Negative section receives
+  // Math.abs(value) so its template governs sign presentation (e.g. "(#,##0)").
+  const sections = splitFormatSections(code);
+  if (sections.length > 1) {
+    let idx = 0;
+    if (value < 0 && sections.length >= 2) idx = 1;
+    else if (value === 0 && sections.length >= 3) idx = 2;
+    const selectedSection = sections[idx]!;
+    const selectedValue = idx === 1 ? Math.abs(value) : value;
+    return formatNumber(selectedValue, selectedSection);
+  }
+
   // Date/time codes contain y/m/d/h/s letter tokens outside literals.
   // Detect and route to the date formatter.
   if (isDateFormatCode(code)) {
@@ -71,6 +130,10 @@ function formatDecimal(value: number, code: string): string {
   const hasPercent = tokens.some((t) => t.kind === "percent");
   if (hasPercent) working *= 100;
 
+  // C2: Track sign separately — the negative prefix is emitted at the very
+  // front of the stitch output (before any currency symbol or digit run).
+  const isNegative = working < 0;
+
   const decimalIdx = digitRun.indexOf(".");
   const fractionDigits = decimalIdx >= 0 ? digitRun.length - decimalIdx - 1 : 0;
   const useThousands = /,(?=[0#])/.test(digitRun);
@@ -80,35 +143,72 @@ function formatDecimal(value: number, code: string): string {
     .toFixed(Math.max(0, fractionDigits))
     .split(".");
 
+  // C3: Optional-digit (#) handling.
+  // Count trailing `#` chars in the fraction part of the format template.
+  // These are optional: trim the corresponding trailing zeros from the
+  // formatted fraction so "1.5" never renders as "1.50" under "#.##".
+  const fracFormat = decimalIdx >= 0 ? digitRun.slice(decimalIdx + 1) : "";
+  const trailingOptional = fracFormat.match(/#*$/)?.[0].length ?? 0;
+
+  // Suppress the leading "0" when the integer format is all-optional (#)
+  // and the integer value is actually zero (e.g. "#.##" on 0.5 → ".5").
+  const intFormat = decimalIdx >= 0 ? digitRun.slice(0, decimalIdx) : digitRun;
+  const suppressLeadingZero = !intFormat.includes("0") && intPart === "0";
+
+  let trimmedFrac = fracPart;
+  if (trailingOptional > 0 && trimmedFrac !== undefined) {
+    let trimCount = 0;
+    for (let fi = trimmedFrac.length - 1; fi >= 0 && trimCount < trailingOptional; fi--) {
+      if (trimmedFrac[fi] === "0") trimCount++;
+      else break;
+    }
+    if (trimCount > 0) trimmedFrac = trimmedFrac.slice(0, trimmedFrac.length - trimCount);
+  }
+
   const intGrouped = useThousands ? groupThousands(intPart!) : intPart!;
+  const intDisplay = suppressLeadingZero ? "" : intGrouped;
   const formatted =
-    fracPart !== undefined && fracPart.length > 0
-      ? `${intGrouped}.${fracPart}`
-      : intGrouped;
-  const signed = working < 0 ? `-${formatted}` : formatted;
-
-  // Stitch back prefix/suffix literals around the numeric body. We
-  // replace the first run of digit placeholders with the formatted
-  // number; other literals (currency symbols, spaces, "%") stay.
+    trimmedFrac !== undefined && trimmedFrac.length > 0
+      ? `${intDisplay}.${trimmedFrac}`
+      : intDisplay;
+
+  // C2 + C3: Stitch prefix/suffix literals around the numeric body.
+  // The negative sign is prepended exactly once, immediately before the
+  // first currency symbol or digit run — so "$-1,234.50" never appears;
+  // the output is always "-$1,234.50".
+  let negativeEmitted = false;
   let produced = false;
   const parts: string[] = [];
   for (const t of tokens) {
-    if (t.kind === "digits") {
+    if (t.kind === "currency") {
+      if (isNegative && !negativeEmitted) {
+        parts.push("-");
+        negativeEmitted = true;
+      }
+      parts.push(t.value);
+    } else if (t.kind === "digits") {
       if (!produced) {
-        parts.push(signed);
+        if (isNegative && !negativeEmitted) {
+          parts.push("-");
+          negativeEmitted = true;
+        }
+        parts.push(formatted);
         produced = true;
       }
-      // drop subsequent digit runs — they were part of the numeric
-      // template we already substituted.
+      // Drop subsequent digit runs — single-section numeric templates emit
+      // one run. Multi-section formats (positive;negative;zero;text) are
+      // handled by C1's section splitter above, so two-run single-section
+      // formats are unusual; the first run governs intentionally.
     } else if (t.kind === "literal") {
       parts.push(t.value);
     } else if (t.kind === "percent") {
       parts.push("%");
-    } else if (t.kind === "currency") {
-      parts.push(t.value);
     }
   }
-  if (!produced) parts.push(signed);
+  if (!produced) {
+    if (isNegative && !negativeEmitted) parts.push("-");
+    parts.push(formatted);
+  }
   return parts.join("");
 }
 
@@ -130,6 +230,10 @@ function formatScientific(value: number, code: string): string {
   const exp = value === 0 ? 0 : Math.floor(Math.log10(Math.abs(value)));
   const mantissa = value / Math.pow(10, exp);
   const mantissaStr = mantissa.toFixed(Math.max(0, fracDigits));
+  // signToken "+" emits sign for both positive and negative exponents.
+  // signToken "" (no explicit sign) emits only "-" for negative exponents.
+  // Verified: "0.0E00" on 0.0001 → "1.0E-04" (the negative case emits "-"
+  // via the right branch of the ternary below).
   const sign = signToken === "+" ? (exp >= 0 ? "+" : "-") : exp < 0 ? "-" : "";
   const expStr = String(Math.abs(exp)).padStart(match[4]!.length, "0");
   return `${mantissaStr}E${sign}${expStr}`;