@coinbase/cds-mobile-visualization 3.4.0-beta.23 → 3.4.0-beta.25

package/esm/chart/scrubber/__stories__/Scrubber.stories.js

@@ -18,11 +18,15 @@ import { getLineData, unwrapAnimatedValue, useScrubberContext } from '../../util
 import { DefaultScrubberBeacon, DefaultScrubberBeaconLabel, DefaultScrubberLabel, Scrubber } from '..';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sampleData = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+const chartAccessibilityLabel = "Price chart with " + sampleData.length + " data points. Swipe to navigate.";
+const getScrubberAccessibilityLabel = index => "Point " + (index + 1) + ": " + sampleData[index];
 const BasicScrubber = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -48,26 +52,35 @@ const BasicScrubber = () => {
     })
   });
 };
+const seriesFilterData = {
+  top: [15, 28, 32, 44, 46, 36, 40, 45, 48, 38],
+  upperMiddle: [12, 23, 21, 29, 34, 28, 31, 38, 42, 35],
+  lowerMiddle: [8, 15, 14, 25, 20, 18, 22, 28, 24, 30],
+  bottom: [4, 8, 11, 15, 16, 14, 16, 10, 12, 14]
+};
 const SeriesFilter = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": top " + seriesFilterData.top[index] + ", lowerMiddle " + seriesFilterData.lowerMiddle[index], []);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
+    accessibilityLabel: "Chart with multiple series. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'top',
-      data: [15, 28, 32, 44, 46, 36, 40, 45, 48, 38]
+      data: seriesFilterData.top
     }, {
       id: 'upperMiddle',
-      data: [12, 23, 21, 29, 34, 28, 31, 38, 42, 35],
+      data: seriesFilterData.upperMiddle,
       color: '#ef4444',
       type: 'dotted'
     }, {
       id: 'lowerMiddle',
-      data: [8, 15, 14, 25, 20, 18, 22, 28, 24, 30],
+      data: seriesFilterData.lowerMiddle,
       color: '#f59e0b',
       curve: 'natural'
     }, {
       id: 'bottom',
-      data: [4, 8, 11, 15, 16, 14, 16, 10, 12, 14],
+      data: seriesFilterData.bottom,
       color: '#800080',
       curve: 'step',
       showArea: true
@@ -81,6 +94,8 @@ const WithLabels = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -97,6 +112,8 @@ const IdlePulse = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -115,6 +132,8 @@ const ImperativePulse = () => {
     children: [/*#__PURE__*/_jsx(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 150,
       series: [{
         id: 'prices',
@@ -145,6 +164,8 @@ const BeaconStroke = () => {
     children: /*#__PURE__*/_jsx(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 150,
       series: [{
         id: 'prices',
@@ -172,6 +193,8 @@ const CustomBeacon = () => {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -249,7 +272,9 @@ const CustomBeaconLabel = () => {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
+    accessibilityLabel: "Temperature chart with 6 data points. Swipe to navigate.",
     areaType: "dotted",
+    getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + [25, 30, 35, 45, 60, 100][index] + "\xB0F",
     height: 150,
     series: [{
       id: 'Boston',
@@ -372,7 +397,9 @@ const PercentageBeaconLabels = () => {
       children: /*#__PURE__*/_jsx(LineChart, {
         enableScrubbing: true,
         showArea: true,
+        accessibilityLabel: "NYC vs ATL comparison chart. Swipe to navigate.",
         areaType: "dotted",
+        getScrubberAccessibilityLabel: index => "Point " + (index + 1),
         height: 150,
         inset: {
           bottom: 8,
@@ -410,7 +437,9 @@ const PercentageBeaconLabels = () => {
       children: /*#__PURE__*/_jsx(LineChart, {
         enableScrubbing: true,
         showArea: true,
+        accessibilityLabel: "NYC vs ATL comparison chart. Swipe to navigate.",
         areaType: "dotted",
+        getScrubberAccessibilityLabel: index => "Point " + (index + 1),
         height: 150,
         inset: {
           bottom: 8,
@@ -449,6 +478,8 @@ const HideBeaconLabels = () => {
     enableScrubbing: true,
     legend: true,
     showArea: true,
+    accessibilityLabel: "Website visitors across 7 pages. Swipe to navigate.",
+    getScrubberAccessibilityLabel: index => "Page " + (index + 1) + ": " + [2400, 1398, 9800, 3908, 4800, 3800, 4300][index] + " views",
     height: 200,
     inset: {
       top: 60
@@ -475,6 +506,8 @@ const LabelElevated = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     inset: {
       top: 60
@@ -508,6 +541,8 @@ const CustomLabelComponent = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 200,
     inset: {
       top: 16,
@@ -523,11 +558,15 @@ const CustomLabelComponent = () => {
     })
   });
 };
+const ethData = [5, 15, 18, 30, 65, 30, 15, 35, 15, 2, 45, 12, 15, 40];
 const LabelFonts = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Day " + (index + 1) + ": BTC " + sampleData[index] + ", ETH " + ethData[index], []);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
     showYAxis: true,
+    accessibilityLabel: "BTC and ETH comparison chart. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'btc',
@@ -536,7 +575,7 @@ const LabelFonts = () => {
       color: assets.btc.color
     }, {
       id: 'eth',
-      data: [5, 15, 18, 30, 65, 30, 15, 35, 15, 2, 45, 12, 15, 40],
+      data: ethData,
       label: 'ETH',
       color: assets.eth.color
     }],
@@ -556,6 +595,8 @@ const LabelBoundsInset = () => {
     children: [/*#__PURE__*/_jsx(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 150,
       inset: {
         left: 0,
@@ -572,6 +613,8 @@ const LabelBoundsInset = () => {
     }), /*#__PURE__*/_jsx(LineChart, {
       enableScrubbing: true,
       showArea: true,
+      accessibilityLabel: chartAccessibilityLabel,
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
       height: 150,
       inset: {
         left: 0,
@@ -597,6 +640,8 @@ const CustomLine = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -629,6 +674,8 @@ const HiddenScrubberWhenIdle = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -645,6 +692,8 @@ const HideOverlay = () => {
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 150,
     series: [{
       id: 'prices',
@@ -737,10 +786,13 @@ const MatchupBeaconLabels = () => {
       seriesId: seriesId
     }));
   });
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": BLUE " + matchupBlueData[index] + "%, RED " + matchupRedData[index] + "%", []);
   return /*#__PURE__*/_jsx(LineChart, {
     enableScrubbing: true,
     showArea: true,
+    accessibilityLabel: "BLUE vs RED matchup chart. Swipe to navigate.",
     areaType: "dotted",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
     height: 300,
     inset: {
       bottom: 8,