@multiplatform.one/components 7.7.4 → 7.8.0

package/src/charts/ChartDataView.tsx

@@ -0,0 +1,158 @@
+import { Button } from "@multiplatform.one/forms";
+import { isWeb } from "@multiplatform.one/platform";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { createContext, useContext, useId, useState, type ReactNode } from "react";
+import { Dialog, Paragraph, ScrollView, XStack, YStack } from "tamagui";
+import { sectionHeading } from "../componentColors";
+import { useTranslation } from "../shared/i18n";
+import { DialogContent, DialogOverlay } from "../surfaces";
+import { describeDatum } from "./accessibility";
+import { formatChartValue } from "./math";
+import { chartWebProps } from "./svg";
+import type { ChartDatum } from "./types";
+
+const ChartDataContext = createContext<{ id: string; triggerId: string } | null>(null);
+
+export interface ChartDataViewProps {
+  data: Array<number | ChartDatum>;
+  title?: string;
+  valueFormatter?: (value: number) => string;
+  /** Place the action in the chart's existing header, outside its drawing. */
+  children: (view: {
+    action: ReactNode;
+    data: ChartDatum[];
+    valueFormatter: (value: number) => string;
+  }) => ReactNode;
+}
+
+/** One complete, reachable data view. The ordinary chart keeps its short name. */
+export function ChartDataView({ data, title, valueFormatter, children }: ChartDataViewProps) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const { knobProps: datumKnobs } = useResolvedKnobs({ compact: true });
+  const [open, setOpen] = useState(false);
+  const id = `mpo-chart-data-${useId().replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+  const triggerId = `${id}-trigger`;
+  const normalized = data.map((datum, index) =>
+    typeof datum === "number" ? { label: String(index + 1), value: datum } : datum,
+  );
+  const format = valueFormatter ?? formatChartValue;
+  const actionLabel = title ? `${t("View data for")} ${title}` : t("View chart data");
+  const action = (
+    <Dialog.Trigger asChild>
+      <Button
+        compact
+        id={triggerId}
+        {...(isWeb ? { "aria-label": actionLabel } : { accessibilityLabel: actionLabel })}
+        {...chartWebProps({ "data-mpo-chart-data-trigger": id })}
+      >
+        {t("View data")}
+      </Button>
+    </Dialog.Trigger>
+  );
+  return (
+    <ChartDataContext.Provider value={{ id, triggerId }}>
+      <Dialog modal open={open} onOpenChange={setOpen}>
+        {children({ action, data: normalized, valueFormatter: format })}
+        <Dialog.Portal>
+          <DialogOverlay key="overlay" />
+          <DialogContent
+            key="content"
+            width="90%"
+            maxWidth={480}
+            maxHeight="80%"
+            {...chartWebProps({ "data-mpo-chart-data-panel": id })}
+          >
+            <Dialog.Title {...knobProps.heading} {...sectionHeading}>
+              {title ? `${title}: ${t("data")}` : t("Chart data")}
+            </Dialog.Title>
+            <Dialog.Description
+              {...knobProps.body}
+            >{`${normalized.length} ${t("data points")}`}</Dialog.Description>
+            <ScrollView flexShrink={1} minHeight={0}>
+              <YStack {...knobProps.gap}>
+                {normalized.map((datum, index) => (
+                  <XStack
+                    key={index}
+                    alignItems="flex-start"
+                    flexWrap="wrap"
+                    {...datumKnobs.gap}
+                    {...chartWebProps({ "data-mpo-chart-data-row": String(index) })}
+                    {...(!isWeb
+                      ? {
+                          accessible: true,
+                          accessibilityLabel: describeDatum({ datum, formatValue: format }),
+                        }
+                      : {})}
+                  >
+                    <Paragraph
+                      flexBasis="50%"
+                      flexGrow={1}
+                      flexShrink={1}
+                      minWidth={0}
+                      {...knobProps.body}
+                      {...chartWebProps({ "data-mpo-chart-data-label": "true" })}
+                    >
+                      {datum.label}
+                    </Paragraph>
+                    <Paragraph
+                      flexShrink={1}
+                      maxWidth="100%"
+                      {...knobProps.body}
+                      {...chartWebProps({ "data-mpo-chart-data-value": "true" })}
+                    >
+                      {format(datum.value)}
+                    </Paragraph>
+                  </XStack>
+                ))}
+              </YStack>
+            </ScrollView>
+            <XStack justifyContent="flex-end">
+              <Dialog.Close asChild aria-label={t("Close")}>
+                <Button
+                  aria-label={t("Close")}
+                  {...(!isWeb ? { accessibilityLabel: t("Close") } : {})}
+                  {...chartWebProps({ "data-mpo-chart-data-close": id })}
+                >
+                  {t("Close")}
+                </Button>
+              </Dialog.Close>
+            </XStack>
+          </DialogContent>
+        </Dialog.Portal>
+      </Dialog>
+    </ChartDataContext.Provider>
+  );
+}
+
+/** Shared chart implementations join a composed header instead of adding a second action. */
+export function ChartDataFrame({
+  data,
+  title,
+  valueFormatter,
+  width,
+  children,
+}: Omit<ChartDataViewProps, "children"> & { children: ReactNode; width?: number }) {
+  const inherited = useContext(ChartDataContext);
+  const { knobProps } = useResolvedKnobs();
+  if (inherited) return children;
+  return (
+    <ChartDataView data={data} title={title} valueFormatter={valueFormatter}>
+      {({ action }) => (
+        <YStack minWidth={0} width={width ?? "100%"} maxWidth="100%" {...knobProps.gap}>
+          {children}
+          <XStack justifyContent="flex-end">{action}</XStack>
+        </YStack>
+      )}
+    </ChartDataView>
+  );
+}
+
+export function useChartDataViewProps(): Record<string, unknown> {
+  const context = useContext(ChartDataContext);
+  if (!context) return {};
+  return chartWebProps({
+    "data-mpo-chart-data-view": context.id,
+    "aria-describedby": context.triggerId,
+  });
+}

package/src/charts/ChartSurface.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useState, type ReactNode } from "react";
 import type { LayoutChangeEvent } from "react-native";
 import { YStack, type YStackProps } from "tamagui";
-import { Svg, chartRootA11yProps } from "./svg";
+import { Svg, chartRootA11yProps, type ChartProofDeclaration } from "./svg";
+import { useChartDataViewProps } from "./ChartDataView";
 import type { ChartSize } from "./types";
 import { useChartTheme } from "./useChartTheme";
 
@@ -11,6 +12,8 @@ export interface ChartSurfaceProps extends Omit<YStackProps, "children" | "width
    * as `role="img"` + label. Build it with `describeChart()`.
    */
   label: string;
+  /** Explicit chart classification; low-level custom surfaces remain unclassified. */
+  proof?: ChartProofDeclaration;
   /** Drawing height in px (default 200). */
   height?: number;
   /**
@@ -37,11 +40,13 @@ export interface ChartSurfaceProps extends Omit<YStackProps, "children" | "width
  */
 export function ChartSurface({
   label,
+  proof,
   height = 200,
   width: widthProp,
   children,
   ...stackProps
 }: ChartSurfaceProps) {
+  const dataViewProps = useChartDataViewProps();
   const { transition, animationEnabled } = useChartTheme();
   const [measuredWidth, setMeasuredWidth] = useState(0);
   const width = widthProp ?? measuredWidth;
@@ -61,7 +66,7 @@ export function ChartSurface({
       {...stackProps}
     >
       {width > 0 ? (
-        <Svg width={width} height={height} {...chartRootA11yProps(label)}>
+        <Svg width={width} height={height} {...chartRootA11yProps(label, proof)} {...dataViewProps}>
           {children({ width, height })}
         </Svg>
       ) : null}

package/src/charts/Charts.stories.tsx

@@ -1,11 +1,15 @@
+import { useState } from "react";
+import { KPICard } from "../views/Dashboard";
 import { action } from "@multiplatform.one/storybook";
 import { Preset } from "@multiplatform.one/theme";
 import type { Meta } from "@storybook/react-native-web-vite";
 import { Text, Theme, XStack, YStack } from "tamagui";
 import { Card } from "../surfaces";
 import { AreaChart, LineChart } from "./LineChart";
+import { ChartDataView } from "./ChartDataView";
 import { BarChart } from "./BarChart";
 import { PieChart } from "./PieChart";
+import { chartWebProps } from "./svg";
 import { Sparkline } from "./Sparkline";
 import type { ChartDatum } from "./types";
 
@@ -90,18 +94,71 @@ export const Donut = {
   ),
 };
 
+export const GapBoundaries = {
+  render: () => (
+    <YStack maxWidth={560} gap="$4">
+      <PieChart data={categories} height={160} title="Pie boundary gaps" />
+      <PieChart data={categories} height={160} donut title="Donut boundary gaps" />
+    </YStack>
+  ),
+};
+
+export const GapThinSlices = {
+  render: () => (
+    <YStack maxWidth={560} gap="$4">
+      <PieChart
+        data={[
+          { label: "Large", value: 9999 },
+          { label: "Small", value: 1 },
+        ]}
+        title="Thin positive slice preserved"
+      />
+      <PieChart
+        data={[
+          { label: "Large", value: 9999 },
+          { label: "Small", value: 1 },
+        ]}
+        donut
+        title="Thin positive donut preserved"
+      />
+    </YStack>
+  ),
+};
+
+export const GapSingleDatum = {
+  render: () => <PieChart data={[{ label: "Only", value: 100 }]} title="Single full circle" />,
+};
+
+export const GapExplicitZero = {
+  render: () => <PieChart data={categories} padAngle={0} title="Explicit touching slices" />,
+};
+
 export const SparklineRow = {
   name: "Sparkline",
   render: () => (
     <XStack maxWidth={560} gap="$4" alignItems="center">
-      <YStack flex={1}>
-        <Text fontSize="$2">Weekly active</Text>
-        <Sparkline data={trend} title="Weekly active" />
-      </YStack>
-      <YStack flex={1}>
-        <Text fontSize="$2">No area</Text>
-        <Sparkline data={trend} showArea={false} title="Weekly active" />
-      </YStack>
+      <ChartDataView data={trend} title="Weekly active">
+        {({ action, data }) => (
+          <YStack flex={1} gap="$2">
+            <XStack alignItems="center" justifyContent="space-between">
+              <Text fontSize="$2">Weekly active</Text>
+              {action}
+            </XStack>
+            <Sparkline data={data} title="Weekly active" />
+          </YStack>
+        )}
+      </ChartDataView>
+      <ChartDataView data={trend} title="No area">
+        {({ action, data }) => (
+          <YStack flex={1} gap="$2">
+            <XStack alignItems="center" justifyContent="space-between">
+              <Text fontSize="$2">No area</Text>
+              {action}
+            </XStack>
+            <Sparkline data={data} showArea={false} title="Weekly active" />
+          </YStack>
+        )}
+      </ChartDataView>
     </XStack>
   ),
 };
@@ -181,7 +238,154 @@ export const NarrowViewport = {
       <BarChart data={monthly} title="Revenue" />
       <LineChart data={monthly} title="Revenue" />
       <PieChart data={categories} donut title="Tickets by status" />
-      <Sparkline data={trend} title="Weekly active" />
+      <ChartDataView data={trend} title="Weekly active">
+        {({ action, data }) => (
+          <YStack gap="$2">
+            <XStack justifyContent="space-between">
+              <Text>Weekly active</Text>
+              {action}
+            </XStack>
+            <Sparkline data={data} title="Weekly active" />
+          </YStack>
+        )}
+      </ChartDataView>
     </YStack>
   ),
 };
+
+export const CompleteDataView = {
+  render: () => (
+    <YStack width="100%" maxWidth={560} gap="$4">
+      <BarChart
+        data={Array.from({ length: 13 }, (_, index) => ({
+          label: `Region ${index + 1}`,
+          value: (index + 1) * 125,
+        }))}
+        title="Regional revenue"
+        label="Regional revenue overview"
+      />
+      <ChartDataView
+        data={Array.from({ length: 80 }, (_, index) => ({
+          label: `Day ${index + 1}`,
+          value: index * 3 + 1,
+        }))}
+        title="Daily activity"
+      >
+        {({ action, data }) => (
+          <YStack gap="$2">
+            <XStack alignItems="center" justifyContent="space-between">
+              <Text>Daily activity</Text>
+              {action}
+            </XStack>
+            <Sparkline data={data} title="Daily activity" showArea={false} />
+          </YStack>
+        )}
+      </ChartDataView>
+    </YStack>
+  ),
+};
+
+function MetricDataHarness({
+  longTitle = false,
+  consumerPress = false,
+}: {
+  longTitle?: boolean;
+  consumerPress?: boolean;
+}) {
+  const [navigationCount, setNavigationCount] = useState(0);
+  const [consumerCount, setConsumerCount] = useState(0);
+  return (
+    <YStack width="100%" maxWidth={360} gap="$3">
+      <KPICard
+        config={{
+          id: "revenue",
+          title: longTitle ? "Revenue from annual enterprise subscriptions" : "Revenue",
+          value: 240000,
+          format: "currency",
+          sparkline: trend,
+          onClick: () => setNavigationCount((count) => count + 1),
+        }}
+        {...(consumerPress ? { onPress: () => setConsumerCount((count) => count + 1) } : {})}
+      />
+      <Text>{`Metric navigation count: ${navigationCount}`}</Text>
+      {consumerPress ? <Text>{`Consumer navigation count: ${consumerCount}`}</Text> : null}
+    </YStack>
+  );
+}
+export const MetricDataActions = { render: () => <MetricDataHarness /> };
+
+export const GapPatternBackdrop = {
+  render: () => (
+    <YStack width="100%" maxWidth={560} gap="$4">
+      {[false, true].map((donut) => (
+        <YStack
+          key={String(donut)}
+          position="relative"
+          {...chartWebProps({ "data-mpo-chart-backdrop": "patterned" })}
+        >
+          <YStack
+            position="absolute"
+            top={0}
+            left={0}
+            width={160}
+            height={160}
+            pointerEvents="none"
+          >
+            {Array.from({ length: 10 }, (_, index) => (
+              <YStack key={index} height={16} backgroundColor={index % 2 ? "$color5" : "$color2"} />
+            ))}
+          </YStack>
+          <PieChart
+            data={categories}
+            height={160}
+            donut={donut}
+            title={donut ? "Donut on striped backdrop" : "Pie on striped backdrop"}
+          />
+        </YStack>
+      ))}
+    </YStack>
+  ),
+};
+
+export const MetricDataLongTitle = { render: () => <MetricDataHarness longTitle /> };
+export const MetricDataPressOverride = { render: () => <MetricDataHarness consumerPress /> };
+
+export const FixedWidthData = {
+  render: () => {
+    const data = [
+      {
+        label: "International enterprise subscriptions for the previous fiscal year",
+        value: 12345678901234,
+      },
+      {
+        label: "Domestic enterprise subscriptions for the current fiscal year",
+        value: 23456789012345,
+      },
+      { label: "Unbroken formatted value", value: 1 },
+    ];
+    const valueFormatter = (value: number) =>
+      value === 1 ? "1".repeat(120) : `${value.toFixed(2)} USD per reporting quarter`;
+    return (
+      <YStack width="100%" maxWidth={900} gap="$4">
+        <BarChart
+          width={300}
+          data={data}
+          title="Fixed width revenue"
+          label="Revenue bars"
+          valueFormatter={valueFormatter}
+          showXAxis={false}
+          showYAxis={false}
+        />
+        <LineChart
+          width={300}
+          data={data}
+          title="Fixed width trend"
+          label="Revenue trend"
+          valueFormatter={valueFormatter}
+          showXAxis={false}
+          showYAxis={false}
+        />
+      </YStack>
+    );
+  },
+};

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");
+    }
+  },
+);