@multiplatform.one/components 7.7.6 → 7.10.0

package/src/charts/ChartDataView.spec.tsx

@@ -0,0 +1,104 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { XStack, YStack } from "tamagui";
+import { ChartDataView } from "./ChartDataView";
+import { Sparkline } from "./Sparkline";
+import { PieChart } from "./PieChart";
+import { ChartCard, KPICard } from "../views/Dashboard";
+
+const data = Array.from({ length: 13 }, (_, index) => ({
+  label: `Region ${index + 1}`,
+  value: index + 1,
+}));
+afterEach(cleanup);
+
+it("opens the complete formatted dataset without expanding the concise chart name", async () => {
+  renderWithProviders(
+    <ChartDataView data={data} title="Revenue" valueFormatter={(value) => `USD ${value}`}>
+      {({ action, data: series, valueFormatter }) => (
+        <YStack>
+          <XStack>{action}</XStack>
+          <Sparkline
+            data={series}
+            label="Revenue trend"
+            width={300}
+            valueFormatter={valueFormatter}
+          />
+        </YStack>
+      )}
+    </ChartDataView>,
+  );
+  const image = document.querySelector("svg")!;
+  expect(image.getAttribute("aria-label")).toBe("Revenue trend");
+  expect(image.getAttribute("height")).toBe("36");
+  expect(image.querySelector("button")).toBeNull();
+  expect(screen.queryByText("USD 13")).toBeNull();
+  fireEvent.click(screen.getByRole("button", { name: "View data for Revenue" }));
+  expect(await screen.findByText("USD 13")).toBeInTheDocument();
+  expect(document.querySelectorAll("[data-mpo-chart-data-row]")).toHaveLength(13);
+  expect(screen.getByText("Region 13")).toBeInTheDocument();
+  fireEvent.click(screen.getByRole("button", { name: "Close" }));
+  await waitFor(() => expect(screen.queryAllByRole("dialog")).toHaveLength(0));
+});
+
+it("normalizes bare sparkline values through the same complete channel", async () => {
+  renderWithProviders(
+    <ChartDataView data={[40, 50, 60]} title="Activity">
+      {({ action, data: series, valueFormatter }) => (
+        <YStack>
+          {action}
+          <Sparkline data={series} width={300} />
+        </YStack>
+      )}
+    </ChartDataView>,
+  );
+  fireEvent.click(screen.getByRole("button", { name: "View data for Activity" }));
+  expect(await screen.findByText("60")).toBeInTheDocument();
+  expect(document.querySelectorAll("[data-mpo-chart-data-row]")).toHaveLength(3);
+});
+
+it("supplies a complete data action when the pie legend is hidden", async () => {
+  renderWithProviders(<PieChart data={data} title="Revenue" showLegend={false} />);
+  fireEvent.click(screen.getByRole("button", { name: "View data for Revenue" }));
+  expect(await screen.findByText("Region 13")).toBeInTheDocument();
+  expect(document.querySelectorAll("[data-mpo-chart-data-row]")).toHaveLength(13);
+});
+
+it("keeps a visible pie legend complete without a dangling data-action association", () => {
+  renderWithProviders(
+    <ChartCard config={{ id: "revenue", type: "pie", title: "Revenue", data }} />,
+  );
+  expect(screen.getByText("Region 13")).toBeInTheDocument();
+  expect(screen.queryByRole("button", { name: "View data for Revenue" })).toBeNull();
+  expect(document.querySelector("svg")!.getAttribute("aria-describedby")).toBeNull();
+});
+
+it("keeps a consumer metric press override separate from the data action", async () => {
+  const configured = vi.fn();
+  const consumer = vi.fn();
+  renderWithProviders(
+    <KPICard
+      config={{
+        id: "metric",
+        title: "Revenue",
+        value: 20,
+        sparkline: [10, 20],
+        onClick: configured,
+      }}
+      onPress={consumer}
+    />,
+  );
+  fireEvent.click(screen.getByRole("button", { name: "View data for Revenue" }));
+  expect(consumer).not.toHaveBeenCalled();
+  expect(configured).not.toHaveBeenCalled();
+  expect(await screen.findByText("Revenue: data")).toBeInTheDocument();
+  fireEvent.click(screen.getByRole("button", { name: "Close" }));
+  await waitFor(() => expect(screen.queryAllByRole("dialog")).toHaveLength(0));
+  const navigation = document.querySelector('[data-mpo-kpi-navigation="metric"]')!;
+  fireEvent.click(navigation);
+  fireEvent.keyDown(navigation, { key: "Enter" });
+  fireEvent.keyDown(navigation, { key: " ", repeat: true });
+  expect(consumer).toHaveBeenCalledTimes(2);
+  expect(configured).not.toHaveBeenCalled();
+});

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