@beyondwork/docx-react-component 1.0.53 → 1.0.55

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

@@ -0,0 +1,134 @@
+/**
+ * Bubble chart renderer (Stage 4 Slice 4E).
+ *
+ * Each data point is drawn as a circle whose radius is proportional to
+ * `sqrt(|size|)` (the classic bubble scaling that maps size → area).
+ * Null x/y/size values skip the point. Negative sizes use |size|
+ * (matching Excel's observed behavior).
+ *
+ * `bubble3D` is collapsed to 2D per the lane non-goal.
+ */
+
+import React from "react";
+import { composeSeriesColor } from "../../../io/ooxml/chart/compose-series-color.ts";
+import type {
+  BubbleChartModel,
+  BubbleSeries,
+} from "../../../io/ooxml/chart/types.ts";
+import type { ResolvedTheme } from "../../../model/canonical-document.ts";
+import type { PlotAreaLayout } from "../layout/plot-area.ts";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface BubbleChartProps {
+  model: BubbleChartModel;
+  layout: PlotAreaLayout;
+  theme: ResolvedTheme | undefined;
+}
+
+function BubbleChartImpl({ model, layout, theme }: BubbleChartProps): React.ReactElement {
+  const plot = layout.plotRect;
+  const { xMin, xMax, yMin, yMax, maxSize } = computeRange(model);
+  const xSpan = Math.max(1e-9, xMax - xMin);
+  const ySpan = Math.max(1e-9, yMax - yMin);
+
+  // Max bubble radius = ~6% of the smaller plot dimension so bubbles
+  // don't dominate.  Scale radius linearly with sqrt(size).
+  const maxRadius = Math.max(4, Math.min(plot.w, plot.h) * 0.06);
+  const sizeScaleFactor = maxSize > 0 ? maxRadius / Math.sqrt(maxSize) : 0;
+
+  const bubbles: React.ReactElement[] = [];
+
+  for (let s = 0; s < model.series.length; s++) {
+    const series = model.series[s]!;
+    const color = composeSeriesColor(model, theme ?? { colors: {} }, s);
+    const n = Math.min(series.xValues.length, series.yValues.length, series.sizes.length);
+    for (let i = 0; i < n; i++) {
+      const x = series.xValues[i];
+      const y = series.yValues[i];
+      const size = series.sizes[i];
+      if (
+        x === null || y === null || size === null ||
+        !Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(size)
+      ) continue;
+      const cx = plot.x + ((x - xMin) / xSpan) * plot.w;
+      const cy = plot.y + plot.h - ((y - yMin) / ySpan) * plot.h;
+      const r = Math.sqrt(Math.abs(size)) * sizeScaleFactor * (series.bubbleScale ?? 1);
+      bubbles.push(
+        <circle
+          key={`bubble-${s}-${i}`}
+          cx={cx}
+          cy={cy}
+          r={Math.max(1, r)}
+          fill={color}
+          fillOpacity={0.7}
+          stroke={color}
+          strokeWidth={1}
+          data-role="bubble"
+          data-series-index={s}
+          data-point-index={i}
+        />,
+      );
+    }
+  }
+
+  return (
+    <g data-role="bubble-chart" data-bubble3d={model.bubble3D}>
+      <g data-role="bubbles">{bubbles}</g>
+      <g data-role="data-labels" />
+    </g>
+  );
+}
+
+export const BubbleChart = React.memo(
+  BubbleChartImpl,
+  (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,
+);
+
+// ---------------------------------------------------------------------------
+// Range computation
+// ---------------------------------------------------------------------------
+
+function computeRange(model: BubbleChartModel): {
+  xMin: number; xMax: number; yMin: number; yMax: number; maxSize: number;
+} {
+  const ax = model.xAxis;
+  const ay = model.yAxis;
+  let xMin = ax.min ?? Infinity;
+  let xMax = ax.max ?? -Infinity;
+  let yMin = ay.min ?? Infinity;
+  let yMax = ay.max ?? -Infinity;
+  let maxSize = 0;
+  const dataFillX = ax.min === undefined || ax.max === undefined;
+  const dataFillY = ay.min === undefined || ay.max === undefined;
+
+  for (const s of model.series) {
+    for (let i = 0; i < s.xValues.length; i++) {
+      const x = s.xValues[i];
+      const y = s.yValues[i];
+      const size = s.sizes[i];
+      if (x === null || y === null || size === null) continue;
+      if (dataFillX) {
+        if (x < xMin) xMin = x;
+        if (x > xMax) xMax = x;
+      }
+      if (dataFillY) {
+        if (y < yMin) yMin = y;
+        if (y > yMax) yMax = y;
+      }
+      const absSize = Math.abs(size);
+      if (absSize > maxSize) maxSize = absSize;
+    }
+  }
+  if (!Number.isFinite(xMin)) xMin = 0;
+  if (!Number.isFinite(xMax)) xMax = 1;
+  if (!Number.isFinite(yMin)) yMin = 0;
+  if (!Number.isFinite(yMax)) yMax = 1;
+  return { xMin, xMax, yMin, yMax, maxSize };
+}

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

@@ -0,0 +1,85 @@
+/**
+ * Combo chart renderer (Stage 4 Slice 4F).
+ *
+ * Combo charts pack multiple chart-type groups (bar/line/area) into a
+ * single plot area. Each group is a full `BarChartModel`,
+ * `LineChartModel`, or `AreaChartModel` that was produced by the
+ * parser with per-group axis objects (already cloned by
+ * `parse-chart-space.ts` so mutation in one group doesn't bleed into
+ * another).
+ *
+ * Draw order: groups render in declaration order so later groups
+ * visually stack on top. The convention is bar → line (line renders
+ * atop bar), which matches Word's observed behavior when a combo's
+ * type-group nodes appear in XML order.
+ *
+ * Secondary axes: when a group has `secondaryValueAxis`, its bars /
+ * lines project onto the secondary scale. Because per-group renderers
+ * already honor `valueAxis.min/max` when computing their range, this
+ * works without special wiring — the combo just hands each group its
+ * own layout and model.
+ */
+
+import React from "react";
+import type { ComboChartModel } from "../../../io/ooxml/chart/types.ts";
+import type { ResolvedTheme } from "../../../model/canonical-document.ts";
+import type { PlotAreaLayout } from "../layout/plot-area.ts";
+import { BarColumnChart } from "./bar-column.tsx";
+import { LineChart } from "./line.tsx";
+import { AreaChart } from "./area.tsx";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface ComboChartProps {
+  model: ComboChartModel;
+  layout: PlotAreaLayout;
+  theme: ResolvedTheme | undefined;
+}
+
+function ComboChartImpl({ model, layout, theme }: ComboChartProps): React.ReactElement {
+  // Groups render in declaration order → last group paints on top.
+  return (
+    <g
+      data-role="combo-chart"
+      data-group-count={model.groups.length}
+      data-has-secondary-axis={model.hasSecondaryAxis}
+    >
+      {model.groups.map((group, i) => (
+        <g key={`combo-group-${i}`} data-role="combo-group" data-group-index={i}>
+          {renderGroup(group, layout, theme)}
+        </g>
+      ))}
+      <g data-role="data-labels" />
+    </g>
+  );
+}
+
+export const ComboChart = React.memo(
+  ComboChartImpl,
+  (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,
+);
+
+// ---------------------------------------------------------------------------
+// Group dispatch
+// ---------------------------------------------------------------------------
+
+function renderGroup(
+  group: ComboChartModel["groups"][number],
+  layout: PlotAreaLayout,
+  theme: ResolvedTheme | undefined,
+): React.ReactElement {
+  switch (group.kind) {
+    case "bar":
+      return <BarColumnChart model={group} layout={layout} theme={theme} />;
+    case "line":
+      return <LineChart model={group} layout={layout} theme={theme} />;
+    case "area":
+      return <AreaChart model={group} layout={layout} theme={theme} />;
+  }
+}