feat(showcase): expose accessibility data details

Author: iexitdev

apps/expo-showcase/App.tsx

@@ -397,6 +397,7 @@ export default function App() {
                   <View style={styles.storyGrid}>
                     {group.stories.map((story) => {
                       const StoryComponent = story.Component;
+                      const StoryDetails = story.Details;
                       const tags = storyFeatureTags[story.id] ?? [];
 
                       return (
@@ -413,6 +414,9 @@ export default function App() {
                             onScrubStart={() => setIsScrubbing(true)}
                             onScrubEnd={() => setIsScrubbing(false)}
                           />
+                          {StoryDetails ? (
+                            <StoryDetails width={chartWidth} />
+                          ) : null}
                           {tags.length > 0 ? (
                             <Text
                               style={[

apps/expo-showcase/src/showcaseAccessibilityDetails.test.ts

@@ -0,0 +1,116 @@
+import { describe, expect, it, vi } from "vitest";
+
+const { makeDataTable } = vi.hoisted(() => ({
+  makeDataTable: () => ({
+    columns: [{ key: "value", label: "Value" }],
+    rows: [
+      {
+        dateLabel: "Jan 1",
+        formattedClose: "$104",
+        formattedHigh: "$108",
+        formattedLow: "$98",
+        formattedOpen: "$101",
+        formattedValue: "Value",
+        formattedValues: { value: "Value" },
+        index: 0,
+        label: "Sample",
+        percentageLabel: "50%",
+        xLabel: "Sample"
+      }
+    ]
+  })
+}));
+
+vi.mock("react-native", () => ({
+  Pressable: () => null,
+  StyleSheet: { create: (styles: unknown) => styles },
+  Text: () => null,
+  View: () => null
+}));
+
+vi.mock("@chart-kit/react-native", () => ({
+  BarChart: () => null,
+  ContributionGraph: () => null,
+  DonutChart: () => null,
+  LineChart: () => null,
+  PieChart: () => null,
+  ProgressChart: () => null,
+  ProgressRing: () => null,
+  getBarChartDataTable: makeDataTable,
+  getContributionGraphDataTable: makeDataTable,
+  getLineChartDataTable: makeDataTable,
+  getPieChartDataTable: makeDataTable,
+  getProgressChartDataTable: makeDataTable,
+  useChartKitTheme: () => ({ mode: "light" })
+}));
+
+vi.mock("@chart-kit/react-native/pro-preview", () => ({
+  CandlestickChart: () => null,
+  CombinedChart: () => null,
+  LineChartRangeSelector: () => null,
+  getCandlestickEmergencyClosureSessions: () => [],
+  getCandlestickChartDataTable: makeDataTable,
+  getCombinedChartDataTable: makeDataTable
+}));
+
+vi.mock("@chart-kit/svg-renderer", () => ({
+  SvgRect: () => null
+}));
+
+import { publicChartMode } from "./publicChartMode";
+import { barOverviewStories } from "./stories/barOverviewStories";
+import { combinedOverviewStories } from "./stories/combinedOverviewStories";
+import { contributionOverviewStories } from "./stories/contributionOverviewStories";
+import { financialOverviewStories } from "./stories/financialOverviewStories";
+import { lineOverviewStories } from "./stories/lineOverviewStories";
+import { pieOverviewStories } from "./stories/pieOverviewStories";
+import { progressOverviewStories } from "./stories/progressOverviewStories";
+import type { ShowcasePage, ShowcaseStory } from "./stories/storyPrimitives";
+
+const pagesRequiringTableFallback = [
+  "line-charts",
+  "bar-charts",
+  "combined-charts",
+  "financial-charts",
+  "pie-donut",
+  "progress",
+  "heatmaps"
+];
+
+const storiesWithAccessibilityDetails: ShowcaseStory[] = [
+  ...lineOverviewStories,
+  ...barOverviewStories,
+  ...combinedOverviewStories,
+  ...financialOverviewStories,
+  ...pieOverviewStories,
+  ...progressOverviewStories,
+  ...contributionOverviewStories
+];
+
+const getPageStoryIds = (page: ShowcasePage) =>
+  page.storyGroups?.flatMap((group) => group.storyIds) ?? page.storyIds ?? [];
+
+describe("showcase accessibility data details", () => {
+  it("keeps a table fallback story on every accessibility QA page", () => {
+    for (const pageId of pagesRequiringTableFallback) {
+      const page = publicChartMode.pages.find((item) => item.id === pageId);
+      expect(
+        page,
+        `${pageId} should be part of the public chart mode`
+      ).toBeDefined();
+
+      if (!page) {
+        continue;
+      }
+
+      const pageStories = getPageStoryIds(page).map((storyId) =>
+        storiesWithAccessibilityDetails.find((story) => story.id === storyId)
+      );
+
+      expect(
+        pageStories.some((story) => story?.Details !== undefined),
+        `${pageId} should expose at least one collapsed data details panel`
+      ).toBe(true);
+    }
+  });
+});

apps/expo-showcase/src/stories/barOverviewStories.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { Pressable, Text } from "react-native";
 
-import { BarChart } from "@chart-kit/react-native";
+import { BarChart, getBarChartDataTable } from "@chart-kit/react-native";
 import { SvgRect } from "@chart-kit/svg-renderer";
 
 import {
@@ -16,6 +16,7 @@ import {
   storyStyles,
   type NativeStoryProps
 } from "./storyPrimitives";
+import { ChartDataDetails, createFormattedValueDetails } from "./dataDetails";
 
 const formatThousands = (value: number) => `${value}k`;
 const formatPercent = (value: number) => `${value}%`;
@@ -181,6 +182,20 @@ const V2GroupedBar = ({ width }: NativeStoryProps) => (
   </ChartSection>
 );
 
+const acquisitionMixDetails = createFormattedValueDetails({
+  categoryLabel: "Month",
+  table: getBarChartDataTable({
+    data: acquisitionByChannel,
+    formatYLabel: formatThousands,
+    xKey: "month",
+    yKeys: ["organic", "paid"]
+  })
+});
+
+const V2GroupedBarDetails = () => (
+  <ChartDataDetails title="Acquisition mix" {...acquisitionMixDetails} />
+);
+
 const V2SelectableBar = ({ width }: NativeStoryProps) => (
   <ChartSection title="Paid acquisition" kicker="Tap selection">
     <BarChart
@@ -380,7 +395,8 @@ export const barOverviewStories = [
   {
     id: "v2-bar-grouped",
     title: "Grouped Bars",
-    Component: V2GroupedBar
+    Component: V2GroupedBar,
+    Details: V2GroupedBarDetails
   },
   {
     id: "v2-bar-selection",

apps/expo-showcase/src/stories/combinedOverviewStories.tsx

@@ -2,10 +2,14 @@ import { useState } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
 
 import { useChartKitTheme } from "@chart-kit/react-native";
-import { CombinedChart } from "@chart-kit/react-native/pro-preview";
+import {
+  CombinedChart,
+  getCombinedChartDataTable
+} from "@chart-kit/react-native/pro-preview";
 
 import { revenueMargin } from "../fixtures/v2Combined";
 import { ChartSection, type NativeStoryProps } from "./storyPrimitives";
+import { ChartDataDetails, createFormattedValueDetails } from "./dataDetails";
 
 const formatCurrency = (value: number) => `$${value}k`;
 const formatPercent = (value: number) => `${value}%`;
@@ -61,6 +65,22 @@ const V2CombinedRevenueMargin = ({ width }: NativeStoryProps) => (
   </ChartSection>
 );
 
+const revenueMarginDetails = createFormattedValueDetails({
+  categoryLabel: "Month",
+  table: getCombinedChartDataTable({
+    bars: [{ yKey: "revenue", label: "Revenue" }],
+    data: revenueMargin,
+    formatLeftYLabel: formatCurrency,
+    formatRightYLabel: formatPercent,
+    lines: [{ yKey: "margin", label: "Margin" }],
+    xKey: "month"
+  })
+});
+
+const V2CombinedRevenueMarginDetails = () => (
+  <ChartDataDetails title="Revenue and margin" {...revenueMarginDetails} />
+);
+
 const V2CombinedSharedTooltip = ({ width }: NativeStoryProps) => (
   <ChartSection title="Pipeline inspection" kicker="Shared tooltip">
     <CombinedChart
@@ -179,7 +199,8 @@ export const combinedOverviewStories = [
   {
     id: "v2-combined-revenue-margin",
     title: "Revenue + Margin",
-    Component: V2CombinedRevenueMargin
+    Component: V2CombinedRevenueMargin,
+    Details: V2CombinedRevenueMarginDetails
   },
   {
     id: "v2-combined-shared-tooltip",

apps/expo-showcase/src/stories/contributionOverviewStories.tsx

@@ -1,4 +1,7 @@
-import { ContributionGraph } from "@chart-kit/react-native";
+import {
+  ContributionGraph,
+  getContributionGraphDataTable
+} from "@chart-kit/react-native";
 
 import {
   productUsage,
@@ -9,6 +12,24 @@ import {
   quietUsageNumDays
 } from "../fixtures/v2Contribution";
 import { ChartSection, type NativeStoryProps } from "./storyPrimitives";
+import { ChartDataDetails } from "./dataDetails";
+
+const productUsageTable = getContributionGraphDataTable({
+  endDate: productUsageEndDate,
+  formatValue: (value) => `${value} events`,
+  numDays: productUsageNumDays,
+  values: productUsage
+});
+const productUsageDetails = {
+  columns: [
+    { key: "date", label: "Date" },
+    { key: "events", label: "Events" }
+  ],
+  rows: productUsageTable.rows.slice(-8).map((row) => ({
+    key: `${row.index}`,
+    values: [row.dateLabel, row.formattedValue]
+  }))
+};
 
 const V2ContributionUsage = ({ width }: NativeStoryProps) => (
   <ChartSection title="Product usage" kicker="Contribution heatmap">
@@ -24,6 +45,10 @@ const V2ContributionUsage = ({ width }: NativeStoryProps) => (
   </ChartSection>
 );
 
+const V2ContributionUsageDetails = () => (
+  <ChartDataDetails title="Product usage" {...productUsageDetails} />
+);
+
 const V2ContributionQuiet = ({ width }: NativeStoryProps) => (
   <ChartSection title="Quiet workspace" kicker="Empty heatmap">
     <ContributionGraph
@@ -43,7 +68,8 @@ export const contributionOverviewStories = [
   {
     id: "v2-contribution-usage",
     title: "Product Usage Heatmap",
-    Component: V2ContributionUsage
+    Component: V2ContributionUsage,
+    Details: V2ContributionUsageDetails
   },
   {
     id: "v2-contribution-empty",