@multiplatform.one/components 7.7.6 → 7.10.0

package/src/charts/LineChart.tsx

@@ -1,8 +1,9 @@
 import { useTranslation } from "../shared/i18n";
 import type { YStackProps } from "tamagui";
 import { XAxis, YAxis } from "./Axis";
+import { ChartDataFrame } from "./ChartDataView";
 import { ChartSurface } from "./ChartSurface";
-import { describeChart, describeDatum } from "./accessibility";
+import { chartDatumText, describeChart, describeDatum } from "./accessibility";
 import { computeCartesianPlot, thinCategories } from "./composeChart";
 import {
   createLinearScale,
@@ -89,84 +90,98 @@ export function LineChart({
   const interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
 
   return (
-    <ChartSurface label={ariaLabel} height={height} width={width} {...stackProps}>
-      {(size) => {
-        const domain = valueDomain(data.map((datum) => datum.value));
-        const marginScale = createLinearScale({ domain, range: [0, 1] });
-        const tickValues = getLinearTicks(marginScale, yTicks);
-        const plot = computeCartesianPlot(size, {
-          showXAxis,
-          showYAxis,
-          yTickLabels: tickValues.map((value) => format(value)),
-          fontSize: labelFontSize,
-        });
-        if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
-        const xScale = createPointScale({
-          domain: data.map((datum) => datum.label),
-          range: [plot.x, plot.x + plot.width],
-          padding: 0.5,
-        });
-        const yScale = createLinearScale({
-          domain,
-          range: [plot.y + plot.height, plot.y],
-        });
-        const points = data.map((datum) => ({
-          x: xScale(datum.label) ?? plot.x,
-          y: yScale(datum.value),
-        }));
-        return (
-          <>
-            {showYAxis || showGrid ? (
-              <YAxis
-                plot={plot}
-                scale={yScale}
-                ticks={yTicks}
-                tickFormat={(value) => format(value)}
-                showLabels={showYAxis}
-                showGrid={showGrid}
-              />
-            ) : null}
-            {showArea ? (
-              <AreaSeries
+    <ChartDataFrame data={data} title={title} valueFormatter={valueFormatter} width={width}>
+      <ChartSurface
+        label={ariaLabel}
+        proof={{
+          kind: showArea ? "area" : "line",
+          separated: false,
+          datumText: false,
+          datumValues: chartDatumText(data, valueFormatter),
+          datumCount: data.length,
+        }}
+        height={height}
+        width={width}
+        {...stackProps}
+      >
+        {(size) => {
+          const domain = valueDomain(data.map((datum) => datum.value));
+          const marginScale = createLinearScale({ domain, range: [0, 1] });
+          const tickValues = getLinearTicks(marginScale, yTicks);
+          const plot = computeCartesianPlot(size, {
+            showXAxis,
+            showYAxis,
+            yTickLabels: tickValues.map((value) => format(value)),
+            fontSize: labelFontSize,
+          });
+          if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
+          const xScale = createPointScale({
+            domain: data.map((datum) => datum.label),
+            range: [plot.x, plot.x + plot.width],
+            padding: 0.5,
+          });
+          const yScale = createLinearScale({
+            domain,
+            range: [plot.y + plot.height, plot.y],
+          });
+          const points = data.map((datum) => ({
+            x: xScale(datum.label) ?? plot.x,
+            y: yScale(datum.value),
+          }));
+          return (
+            <>
+              {showYAxis || showGrid ? (
+                <YAxis
+                  plot={plot}
+                  scale={yScale}
+                  ticks={yTicks}
+                  tickFormat={(value) => format(value)}
+                  showLabels={showYAxis}
+                  showGrid={showGrid}
+                />
+              ) : null}
+              {showArea ? (
+                <AreaSeries
+                  points={points}
+                  baseline={plot.y + plot.height}
+                  color={stroke}
+                  opacity={areaOpacity}
+                  curve={curve}
+                />
+              ) : null}
+              <LineSeries
+                data={data}
                 points={points}
-                baseline={plot.y + plot.height}
                 color={stroke}
-                opacity={areaOpacity}
+                strokeWidth={strokeWidth}
                 curve={curve}
+                showPoints={showPoints}
+                bounds={size}
+                onDatumPress={onDatumPress}
+                onDatumHoverIn={onDatumHoverIn}
+                onDatumHoverOut={onDatumHoverOut}
+                datumLabel={
+                  interactive
+                    ? (datum) => describeDatum({ datum, formatValue: valueFormatter })
+                    : undefined
+                }
               />
-            ) : null}
-            <LineSeries
-              data={data}
-              points={points}
-              color={stroke}
-              strokeWidth={strokeWidth}
-              curve={curve}
-              showPoints={showPoints}
-              bounds={size}
-              onDatumPress={onDatumPress}
-              onDatumHoverIn={onDatumHoverIn}
-              onDatumHoverOut={onDatumHoverOut}
-              datumLabel={
-                interactive
-                  ? (datum) => describeDatum({ datum, formatValue: valueFormatter })
-                  : undefined
-              }
-            />
-            {showXAxis ? (
-              <XAxis
-                plot={plot}
-                scale={xScale}
-                tickValues={thinCategories(
-                  data.map((datum) => datum.label),
-                  plot.width,
-                  labelFontSize,
-                )}
-              />
-            ) : null}
-          </>
-        );
-      }}
-    </ChartSurface>
+              {showXAxis ? (
+                <XAxis
+                  plot={plot}
+                  scale={xScale}
+                  tickValues={thinCategories(
+                    data.map((datum) => datum.label),
+                    plot.width,
+                    labelFontSize,
+                  )}
+                />
+              ) : null}
+            </>
+          );
+        }}
+      </ChartSurface>
+    </ChartDataFrame>
   );
 }
 

package/src/charts/PieChart.knobs.spec.tsx

@@ -0,0 +1,25 @@
+import { Preset } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import { afterEach, expect, it } from "vitest";
+import { PieChart } from "./PieChart";
+
+afterEach(cleanup);
+
+it.each(["regular", "bold"] as const)(
+  "propagates %s body weight to legend labels and values",
+  (fontWeight) => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ fontWeight, bodyFont: "mono" }}>
+        <PieChart data={[{ label: "Enterprise", value: 55 }]} />
+      </Preset>,
+    );
+    const label = container.querySelector("[data-mpo-chart-datum-label]")!;
+    const value = container.querySelector("[data-mpo-chart-datum-value]")!;
+    expect(label.textContent).toBe("Enterprise");
+    expect(value.textContent).toBe("55");
+    for (const node of [label, value]) {
+      expect(getComputedStyle(node).fontWeight).toBe(fontWeight === "bold" ? "700" : "400");
+    }
+  },
+);

package/src/charts/PieChart.tsx

@@ -1,12 +1,13 @@
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "../shared/i18n";
 import { Text, XStack, YStack, type YStackProps } from "tamagui";
-import { componentColors } from "../componentColors";
+import { ChartDataFrame } from "./ChartDataView";
 import { ChartSurface } from "./ChartSurface";
-import { describeChart, describeDatum } from "./accessibility";
+import { chartDatumText, describeChart, describeDatum } from "./accessibility";
 import { resolveSeriesFills } from "./composeChart";
-import { formatChartValue } from "./math";
+import { formatChartValue, pieSlices, canMaskPieSlices } from "./math";
 import { PieSeries } from "./series";
+import { chartDatumTextProps, chartWebProps } from "./svg";
 import type { ChartDatum, ChartDatumEvents } from "./types";
 import { useChartTheme } from "./useChartTheme";
 
@@ -21,7 +22,7 @@ export interface PieChartProps
    * innerRadius) — the card surface shows through on every platform.
    */
   donut?: boolean | number;
-  /** Radians between slices (default 0). */
+  /** Explicit radians between slices. Omit for the default boundary mask. */
   padAngle?: number;
   /** Explicit slice colors (data values — pass through untouched). */
   colors?: string[];
@@ -51,7 +52,7 @@ export function PieChart({
   data,
   height = 200,
   donut = false,
-  padAngle = 0,
+  padAngle,
   colors,
   showLegend = true,
   valueFormatter,
@@ -81,7 +82,7 @@ export function PieChart({
   const innerRatio =
     donut === false ? 0 : donut === true ? DEFAULT_DONUT_RATIO : Math.min(Math.max(donut, 0), 0.9);
 
-  return (
+  const chart = (
     // LC-10: `flexShrink` + `minWidth 0` let a row parent (e.g. Card.Footer)
     // constrain the chart below its intrinsic width — the wrap then stacks
     // the legend under the pie instead of painting past the frame.
@@ -91,10 +92,25 @@ export function PieChart({
       flexShrink={1}
       minWidth={0}
       {...knobProps.gap}
+      {...chartWebProps({ "data-mpo-chart-owner": "true" })}
       {...stackProps}
     >
       <YStack width={height} height={height}>
-        <ChartSurface label={ariaLabel} height={height} width={height}>
+        <ChartSurface
+          label={ariaLabel}
+          proof={{
+            kind: innerRatio > 0 ? "donut" : "pie",
+            separated:
+              padAngle === undefined
+                ? canMaskPieSlices(pieSlices(data), (height / 2) * innerRatio, height / 2)
+                : padAngle > 0,
+            datumText: showLegend,
+            datumValues: chartDatumText(data, valueFormatter),
+            datumCount: data.length,
+          }}
+          height={height}
+          width={height}
+        >
           {(size) => {
             const outerRadius = Math.min(size.width, size.height) / 2;
             return (
@@ -129,7 +145,13 @@ export function PieChart({
           {...{ "data-pie-legend": "true" }}
         >
           {data.map((datum, index) => (
-            <XStack key={`${datum.label}-${index}`} gap="$2" alignItems="center" minWidth={0}>
+            <XStack
+              key={`${datum.label}-${index}`}
+              {...chartDatumTextProps(index)}
+              gap="$2"
+              alignItems="center"
+              minWidth={0}
+            >
               {/* Legend keys are chart CHROME, not marks: the swatch follows
                   the radius knob and goes square in the `none` world (Axiom 3
                   NULL). The pinned $2 arc was knob-dead (D-09 / LC-60). */}
@@ -142,10 +164,22 @@ export function PieChart({
               />
               {/* The label yields (truncates) before the value — values are
                   data and never truncate (Axiom 11). */}
-              <Text fontSize="$2" color={componentColors.text.muted} flex={1} numberOfLines={1}>
+              <Text
+                {...chartWebProps({ "data-mpo-chart-datum-label": "true" })}
+                {...knobProps.body}
+                fontSize="$2"
+                color={knobProps.textAccentColor}
+                flex={1}
+                numberOfLines={1}
+              >
                 {datum.label}
               </Text>
-              <Text fontSize="$2" fontWeight="500" flexShrink={0}>
+              <Text
+                {...chartWebProps({ "data-mpo-chart-datum-value": "true" })}
+                {...knobProps.body}
+                fontSize="$2"
+                flexShrink={0}
+              >
                 {format(datum.value)}
               </Text>
             </XStack>
@@ -154,4 +188,11 @@ export function PieChart({
       ) : null}
     </XStack>
   );
+  return showLegend ? (
+    chart
+  ) : (
+    <ChartDataFrame data={data} title={title} valueFormatter={valueFormatter}>
+      {chart}
+    </ChartDataFrame>
+  );
 }

package/src/charts/Sparkline.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "../shared/i18n";
 import type { YStackProps } from "tamagui";
 import { ChartSurface } from "./ChartSurface";
-import { describeChart } from "./accessibility";
+import { chartDatumText, describeChart } from "./accessibility";
 import { createLinearScale, createPointScale, valueDomain } from "./math";
 import { AreaSeries, LineSeries } from "./series";
 import type { ChartCurve, ChartDatum } from "./types";
@@ -24,6 +24,8 @@ export interface SparklineProps extends Omit<YStackProps, "children" | "width" |
   title?: string;
   /** Override the generated accessible summary. */
   label?: string;
+  /** Format spoken and complete data-view values consistently. */
+  valueFormatter?: (value: number) => string;
 }
 
 /**
@@ -41,6 +43,7 @@ export function Sparkline({
   strokeWidth = 1.5,
   title,
   label,
+  valueFormatter,
   ...stackProps
 }: SparklineProps) {
   const { t } = useTranslation();
@@ -49,10 +52,29 @@ export function Sparkline({
   const normalized: ChartDatum[] = data.map((entry, index) =>
     typeof entry === "number" ? { label: String(index + 1), value: entry } : entry,
   );
-  const ariaLabel = label ?? describeChart({ typeLabel: t("Sparkline"), title, data: normalized });
+  const ariaLabel =
+    label ??
+    describeChart({
+      typeLabel: t("Sparkline"),
+      title,
+      data: normalized,
+      formatValue: valueFormatter,
+    });
 
   return (
-    <ChartSurface label={ariaLabel} height={height} width={width} {...stackProps}>
+    <ChartSurface
+      label={ariaLabel}
+      proof={{
+        kind: showArea ? "area" : "line",
+        separated: false,
+        datumText: false,
+        datumValues: chartDatumText(normalized, valueFormatter),
+        datumCount: normalized.length,
+      }}
+      height={height}
+      width={width}
+      {...stackProps}
+    >
       {(size) => {
         if (normalized.length === 0) return null;
         const inset = strokeWidth + 1;

package/src/charts/accessibility.ts

@@ -74,3 +74,11 @@ export function describeDatum(input: DescribeDatumInput): string {
   }
   return base;
 }
+
+/** Exact datum text for the independently opened data view, separate from the image name. */
+export function chartDatumText(
+  data: ChartDatum[],
+  formatValue = formatChartValue,
+): Array<[string, string]> {
+  return data.map((datum) => [datum.label.trim(), formatValue(datum.value).trim()]);
+}

package/src/charts/charts.spec.tsx

@@ -46,7 +46,26 @@ function targetRects(): Element[] {
 // In happy-dom onLayout never fires, so every chart passes an explicit width.
 const WIDTH = 400;
 
+it("routes stock Sparkline as a declared area or line with its complete data count", () => {
+  const { rerender } = renderWithProviders(<Sparkline data={[1, 2, 3]} width={WIDTH} />);
+  expect(document.querySelector("svg")?.getAttribute("data-mpo-chart")).toBe("area");
+  expect(document.querySelector("svg")?.getAttribute("data-mpo-chart-datum-count")).toBe("3");
+  expect(document.querySelector("svg")?.getAttribute("data-mpo-chart-datum-text")).toBe("false");
+  rerender(<Sparkline data={[1, 2, 3]} width={WIDTH} showArea={false} />);
+  expect(document.querySelector("svg")?.getAttribute("data-mpo-chart")).toBe("line");
+});
+
 describe("BarChart", () => {
+  it("declares chart kind and marks without claiming a complete datum alternative", () => {
+    renderWithProviders(<BarChart data={data} width={WIDTH} onDatumPress={vi.fn()} />);
+    const root = document.querySelector("svg")!;
+    expect(root.getAttribute("data-mpo-chart")).toBe("bar");
+    expect(root.getAttribute("data-mpo-chart-datum-count")).toBe(String(data.length));
+    expect(root.getAttribute("data-mpo-chart-datum-text")).toBe("false");
+    expect(root.querySelectorAll("[data-mpo-chart-mark]").length).toBe(data.length);
+    expect(targetRects().every((target) => !target.hasAttribute("data-mpo-chart-mark"))).toBe(true);
+  });
+
   it("renders one identity-colored bar per datum (single series, LC-27)", () => {
     const palette: { current?: ChartPalette } = {};
     renderWithProviders(
@@ -167,6 +186,12 @@ describe("BarChart", () => {
 });
 
 describe("LineChart / AreaChart", () => {
+  it("distinguishes area composition from a plain line", () => {
+    const { rerender } = renderWithProviders(<LineChart data={data} width={WIDTH} />);
+    expect(document.querySelector("svg")?.getAttribute("data-mpo-chart")).toBe("line");
+    rerender(<AreaChart data={data} width={WIDTH} />);
+    expect(document.querySelector("svg")?.getAttribute("data-mpo-chart")).toBe("area");
+  });
   it("strokes the line and dots with the palette identity", () => {
     const palette: { current?: ChartPalette } = {};
     renderWithProviders(
@@ -201,7 +226,7 @@ describe("LineChart / AreaChart", () => {
         <AreaChart data={data} width={WIDTH} />
       </>,
     );
-    const area = Array.from(document.querySelectorAll("svg path")).find(
+    const area = Array.from(document.querySelectorAll("svg [data-mpo-chart-mark]")).find(
       (p) => p.getAttribute("fill") !== "none" && p.getAttribute("opacity"),
     );
     expect(area).toBeDefined();
@@ -210,12 +235,61 @@ describe("LineChart / AreaChart", () => {
 });
 
 describe("PieChart", () => {
+  it("exposes every datum alternative without a twelve-item cap", () => {
+    const many = Array.from({ length: 13 }, (_, index) => ({
+      label: `Region ${index}`,
+      value: index + 1,
+    }));
+    renderWithProviders(<PieChart data={many} donut />);
+    const root = document.querySelector("svg")!;
+    expect(root.getAttribute("data-mpo-chart")).toBe("donut");
+    expect(root.getAttribute("data-mpo-chart-datum-count")).toBe("13");
+    expect(root.getAttribute("data-mpo-chart-separated")).toBe("true");
+    expect(document.querySelectorAll("[data-mpo-chart-datum-label]").length).toBe(13);
+    expect(document.querySelectorAll("[data-mpo-chart-datum-value]").length).toBe(13);
+    expect(root.querySelectorAll("[data-mpo-chart-mark]").length).toBe(13);
+  });
+
   const pieData: ChartDatum[] = [
     { label: "A", value: 4 },
     { label: "B", value: 3 },
     { label: "C", value: 2 },
   ];
 
+  it("keeps mask IDs unique across mounted charts and preserves the actual slice path", () => {
+    renderWithProviders(
+      <>
+        <PieChart data={pieData} />
+        <PieChart data={pieData} donut />
+      </>,
+    );
+    const masks = Array.from(document.querySelectorAll("mask"));
+    expect(masks).toHaveLength(6);
+    expect(new Set(masks.map((mask) => mask.id)).size).toBe(6);
+    for (const mark of document.querySelectorAll("[data-mpo-chart-mark]")) {
+      const id = mark.getAttribute("mask")!.slice(5, -1);
+      const mask = document.getElementById(id)!;
+      expect(mask.getAttribute("mask-type")).toBe("luminance");
+      expect(mask.children[0].getAttribute("d")).toBe(mark.getAttribute("d"));
+    }
+  });
+
+  it.each([
+    { data: pieData, padAngle: 0 },
+    {
+      data: [
+        { label: "Large", value: 9999 },
+        { label: "Small", value: 1 },
+      ],
+    },
+    { data: [{ label: "Only", value: 1 }] },
+  ])("preserves explicit zero, thin positives and single-datum geometry: %j", (props) => {
+    renderWithProviders(<PieChart {...props} />);
+    expect(document.querySelectorAll("mask")).toHaveLength(0);
+    expect(document.querySelectorAll("[data-mpo-chart-mark]")).toHaveLength(props.data.length);
+    expect(document.querySelector("svg")?.getAttribute("data-mpo-chart-separated")).toBe("false");
+  });
+
   it("slices take the categorical palette in data order", () => {
     const palette: { current?: ChartPalette } = {};
     renderWithProviders(
@@ -224,7 +298,7 @@ describe("PieChart", () => {
         <PieChart data={pieData} showLegend={false} />
       </>,
     );
-    const fills = Array.from(document.querySelectorAll("svg path")).map((p) =>
+    const fills = Array.from(document.querySelectorAll("svg [data-mpo-chart-mark]")).map((p) =>
       p.getAttribute("fill"),
     );
     expect(fills).toEqual(palette.current?.categorical.slice(0, pieData.length));
@@ -239,7 +313,7 @@ describe("PieChart", () => {
   it("per-slice press targets carry share-aware names", () => {
     const onDatumPress = vi.fn();
     renderWithProviders(<PieChart data={pieData} showLegend={false} onDatumPress={onDatumPress} />);
-    const slices = Array.from(document.querySelectorAll("svg path"));
+    const slices = Array.from(document.querySelectorAll("svg [data-mpo-chart-mark]"));
     expect(slices[0].getAttribute("aria-label")).toBe("A: 4 (44%)");
     fireEvent.click(slices[1]);
     expect(onDatumPress).toHaveBeenCalledWith(pieData[1], 1);

package/src/charts/index.ts

@@ -77,3 +77,5 @@ export { BarChart, type BarChartProps } from "./BarChart";
 export { AreaChart, LineChart, type AreaChartProps, type LineChartProps } from "./LineChart";
 export { PieChart, type PieChartProps } from "./PieChart";
 export { Sparkline, type SparklineProps } from "./Sparkline";
+
+export { ChartDataView, type ChartDataViewProps } from "./ChartDataView";

package/src/charts/math.spec.ts

@@ -13,10 +13,29 @@ import {
   getTimeTicks,
   linePath,
   pieSlices,
+  canMaskPieSlices,
   truncateLabel,
   valueDomain,
 } from "./math";
 
+describe("pie mask preserves a positive interior", () => {
+  const slices = (values: number[]) => pieSlices(values.map((value) => ({ value })));
+  it("accepts ordinary pie and donut slices including a wedge larger than pi", () => {
+    expect(canMaskPieSlices(slices([70, 20, 10]), 0, 100)).toBe(true);
+    expect(canMaskPieSlices(slices([70, 20, 10]), 55, 100)).toBe(true);
+  });
+  it("keeps the whole original chart when one positive slice is too thin", () => {
+    expect(canMaskPieSlices(slices([9999, 1]), 0, 100)).toBe(false);
+    expect(canMaskPieSlices(slices([9999, 1]), 55, 100)).toBe(false);
+    expect(canMaskPieSlices(slices([50, 50]), 99, 100)).toBe(false);
+  });
+  it("does not erode a single positive full circle or invalid geometry", () => {
+    expect(canMaskPieSlices(slices([100]), 0, 100)).toBe(false);
+    expect(canMaskPieSlices(slices([0, 100]), 55, 100)).toBe(false);
+    expect(canMaskPieSlices(slices([50, 50]), 0, NaN)).toBe(false);
+  });
+});
+
 describe("charts/math scales", () => {
   it("band scale maps categories into the pixel range with padding", () => {
     const scale = createBandScale({ domain: ["a", "b", "c"], range: [0, 300] });

package/src/charts/math.ts

@@ -234,6 +234,42 @@ export function pieSlices<T extends { value: number }>(
   }));
 }
 
+/**
+ * Sufficient interior witness for a two-unit boundary erosion. The bisector
+ * at the annulus midpoint must stay more than one unit from every boundary.
+ * Distance to a radial segment uses clamped projection, including its inner
+ * endpoint for wedges larger than pi. A small margin covers SVG's three-digit
+ * path rounding. One thin positive slice keeps the whole chart unmasked.
+ */
+export function canMaskPieSlices(
+  slices: ReadonlyArray<{ value: number; startAngle: number; endAngle: number }>,
+  innerRadius: number,
+  outerRadius: number,
+): boolean {
+  const positive = slices.filter((slice) => slice.value > 0);
+  if (
+    positive.length < 2 ||
+    !Number.isFinite(innerRadius) ||
+    !Number.isFinite(outerRadius) ||
+    innerRadius < 0 ||
+    outerRadius <= innerRadius
+  )
+    return false;
+  const radius = (innerRadius + outerRadius) / 2;
+  const clearance = 1.002;
+  if (outerRadius - radius <= clearance || radius - innerRadius <= clearance) return false;
+  return positive.every((slice) => {
+    const span = slice.endAngle - slice.startAngle;
+    if (!Number.isFinite(span) || span <= 0 || span >= Math.PI * 2) return false;
+    const cosine = Math.cos(span / 2);
+    const projection = Math.min(outerRadius, Math.max(innerRadius, radius * cosine));
+    const radialDistance = Math.sqrt(
+      Math.max(0, radius ** 2 + projection ** 2 - 2 * radius * projection * cosine),
+    );
+    return radialDistance > clearance;
+  });
+}
+
 export interface ArcPathInput {
   startAngle: number;
   endAngle: number;