@coinbase/cds-mobile-visualization 3.4.0-beta.18 → 3.4.0-beta.19

package/esm/chart/__stories__/ChartTransitions.stories.js

@@ -0,0 +1,629 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '@coinbase/cds-mobile/buttons/Button';
+import { IconButton } from '@coinbase/cds-mobile/buttons/IconButton';
+import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
+import { Text } from '@coinbase/cds-mobile/typography';
+import { Area } from '../area/Area';
+import { BarChart } from '../bar/BarChart';
+import { CartesianChart } from '../CartesianChart';
+import { Line } from '../line/Line';
+import { Scrubber } from '../scrubber';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const dataCount = 15;
+const updateInterval = 2500;
+const rapidUpdateInterval = 800;
+function generateNextValue(previousValue) {
+  const step = Math.random() * 30 - 15;
+  return Math.max(0, Math.min(100, previousValue + step));
+}
+function generateInitialData() {
+  const data = [50];
+  for (let i = 1; i < dataCount; i++) {
+    data.push(generateNextValue(data[i - 1]));
+  }
+  return data;
+}
+
+// Transition presets
+const enterOnly = {
+  update: null
+};
+const updateOnly = {
+  enter: null
+};
+const bothDisabled = {
+  enter: null,
+  update: null
+};
+const customEnterUpdate = {
+  enter: {
+    type: 'timing',
+    duration: 1500
+  },
+  update: {
+    type: 'spring',
+    stiffness: 400,
+    damping: 30
+  }
+};
+const customEnterUpdateBeacon = {
+  enter: {
+    type: 'timing',
+    duration: 500,
+    delay: 1000
+  },
+  update: {
+    type: 'spring',
+    stiffness: 400,
+    damping: 30
+  }
+};
+const slowSpringBoth = {
+  enter: {
+    type: 'spring',
+    stiffness: 100,
+    damping: 10
+  },
+  update: {
+    type: 'spring',
+    stiffness: 100,
+    damping: 10
+  }
+};
+const staggeredBoth = {
+  enter: {
+    type: 'timing',
+    duration: 750,
+    staggerDelay: 250
+  },
+  update: {
+    type: 'spring',
+    stiffness: 300,
+    damping: 20,
+    staggerDelay: 150
+  }
+};
+const slowTimingBoth = {
+  enter: {
+    type: 'timing',
+    duration: 2000
+  },
+  update: {
+    type: 'timing',
+    duration: 2000
+  }
+};
+
+// --- Reusable Chart Components ---
+
+const TransitionLineChart = /*#__PURE__*/memo(_ref => {
+  let {
+    data,
+    transitions,
+    scrubberTransitions,
+    animate: animateProp,
+    idlePulse,
+    scrubberRef,
+    enableScrubbing = true,
+    points
+  } = _ref;
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    animate: animateProp,
+    enableScrubbing: enableScrubbing,
+    height: 200,
+    inset: {
+      top: 16,
+      bottom: 16,
+      left: 16,
+      right: 16
+    },
+    series: [{
+      id: 'values',
+      data
+    }],
+    children: [/*#__PURE__*/_jsx(Line, {
+      points: points,
+      seriesId: "values",
+      strokeWidth: 3,
+      transitions: transitions
+    }), enableScrubbing && /*#__PURE__*/_jsx(Scrubber, {
+      ref: scrubberRef,
+      hideOverlay: true,
+      idlePulse: idlePulse,
+      transitions: scrubberTransitions != null ? scrubberTransitions : transitions
+    })]
+  });
+});
+const TransitionAreaChart = /*#__PURE__*/memo(_ref2 => {
+  let {
+    data,
+    transitions,
+    idlePulse,
+    scrubberRef
+  } = _ref2;
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    height: 200,
+    inset: {
+      top: 16,
+      bottom: 16,
+      left: 16,
+      right: 16
+    },
+    series: [{
+      id: 'values',
+      data
+    }],
+    children: [/*#__PURE__*/_jsx(Area, {
+      seriesId: "values",
+      transitions: transitions
+    }), /*#__PURE__*/_jsx(Line, {
+      seriesId: "values",
+      transitions: transitions
+    }), /*#__PURE__*/_jsx(Scrubber, {
+      ref: scrubberRef,
+      hideOverlay: true,
+      idlePulse: idlePulse,
+      transitions: transitions
+    })]
+  });
+});
+const MultiLineChart = /*#__PURE__*/memo(_ref3 => {
+  let {
+    data1,
+    data2,
+    transitions
+  } = _ref3;
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    height: 200,
+    inset: {
+      top: 16,
+      bottom: 16,
+      left: 16,
+      right: 16
+    },
+    series: [{
+      id: 'series1',
+      data: data1,
+      label: 'Series 1'
+    }, {
+      id: 'series2',
+      data: data2,
+      label: 'Series 2'
+    }],
+    children: [/*#__PURE__*/_jsx(Line, {
+      seriesId: "series1",
+      strokeWidth: 3,
+      transitions: transitions
+    }), /*#__PURE__*/_jsx(Line, {
+      seriesId: "series2",
+      strokeWidth: 3,
+      transitions: transitions
+    }), /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true,
+      idlePulse: true,
+      transitions: transitions
+    })]
+  });
+});
+
+// --- Self-contained Example Wrappers ---
+
+function LineExample(_ref4) {
+  let {
+    transitions,
+    scrubberTransitions,
+    pointTransitions,
+    animate,
+    idlePulse,
+    resettable = true,
+    imperative = false,
+    points
+  } = _ref4;
+  const scrubberRef = useRef(null);
+  const [data, setData] = useState(generateInitialData);
+  const [resetKey, setResetKey] = useState(0);
+  const handleReset = useCallback(() => setResetKey(k => k + 1), []);
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      var _scrubberRef$current;
+      setData(current => {
+        const last = current[current.length - 1];
+        return [...current.slice(1), generateNextValue(last)];
+      });
+      if (imperative) (_scrubberRef$current = scrubberRef.current) == null || _scrubberRef$current.pulse();
+    }, updateInterval);
+    return () => clearInterval(intervalId);
+  }, [imperative]);
+  const pointFunction = props => _extends({}, props, {
+    transitions: pointTransitions
+  });
+  const pointProps = points ? pointFunction : false;
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(TransitionLineChart, {
+      animate: animate,
+      data: data,
+      idlePulse: idlePulse,
+      points: pointProps,
+      scrubberRef: imperative ? scrubberRef : undefined,
+      scrubberTransitions: scrubberTransitions,
+      transitions: transitions
+    }, resetKey), resettable && /*#__PURE__*/_jsx(Box, {
+      paddingX: 2,
+      children: /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        onPress: handleReset,
+        variant: "secondary",
+        children: "Reset"
+      })
+    })]
+  });
+}
+function AreaExample(_ref5) {
+  let {
+    transitions,
+    idlePulse,
+    resettable = true,
+    imperative = false
+  } = _ref5;
+  const scrubberRef = useRef(null);
+  const [data, setData] = useState(generateInitialData);
+  const [resetKey, setResetKey] = useState(0);
+  const handleReset = useCallback(() => setResetKey(k => k + 1), []);
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      var _scrubberRef$current2;
+      setData(current => {
+        const last = current[current.length - 1];
+        return [...current.slice(1), generateNextValue(last)];
+      });
+      if (imperative) (_scrubberRef$current2 = scrubberRef.current) == null || _scrubberRef$current2.pulse();
+    }, updateInterval);
+    return () => clearInterval(intervalId);
+  }, [imperative]);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(TransitionAreaChart, {
+      data: data,
+      idlePulse: idlePulse,
+      scrubberRef: imperative ? scrubberRef : undefined,
+      transitions: transitions
+    }, resetKey), resettable && /*#__PURE__*/_jsx(Box, {
+      paddingX: 2,
+      children: /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        onPress: handleReset,
+        variant: "secondary",
+        children: "Reset"
+      })
+    })]
+  });
+}
+
+// --- Bar Chart Components ---
+
+const barCategories = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+function generateBarData() {
+  return barCategories.map(() => Math.round(Math.random() * 80 + 10));
+}
+const barChartProps = {
+  showXAxis: true,
+  enableScrubbing: true,
+  height: 200,
+  xAxis: {
+    data: barCategories
+  },
+  yAxis: {
+    domain: {
+      min: 0,
+      max: 100
+    }
+  }
+};
+const TransitionBarChart = /*#__PURE__*/memo(_ref6 => {
+  let {
+    data,
+    transitions
+  } = _ref6;
+  return /*#__PURE__*/_jsx(BarChart, _extends({}, barChartProps, {
+    series: [{
+      id: 'values',
+      data
+    }],
+    transitions: transitions,
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true,
+      seriesIds: [],
+      transitions: transitions
+    })
+  }));
+});
+function BarExample(_ref7) {
+  let {
+    transitions,
+    resettable = true
+  } = _ref7;
+  const [data, setData] = useState(generateBarData);
+  const [resetKey, setResetKey] = useState(0);
+  const handleReset = useCallback(() => setResetKey(k => k + 1), []);
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setData(generateBarData());
+    }, updateInterval);
+    return () => clearInterval(intervalId);
+  }, []);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(TransitionBarChart, {
+      data: data,
+      transitions: transitions
+    }, resetKey), resettable && /*#__PURE__*/_jsx(Box, {
+      paddingX: 2,
+      children: /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        onPress: handleReset,
+        variant: "secondary",
+        children: "Reset"
+      })
+    })]
+  });
+}
+function RapidLineExample(_ref8) {
+  let {
+    transitions
+  } = _ref8;
+  const [data, setData] = useState(generateInitialData);
+  const [resetKey, setResetKey] = useState(0);
+  const handleReset = useCallback(() => setResetKey(k => k + 1), []);
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setData(current => {
+        const last = current[current.length - 1];
+        return [...current.slice(1), generateNextValue(last)];
+      });
+    }, rapidUpdateInterval);
+    return () => clearInterval(intervalId);
+  }, []);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(TransitionLineChart, {
+      data: data,
+      transitions: transitions
+    }, resetKey), /*#__PURE__*/_jsx(Box, {
+      paddingX: 2,
+      children: /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        onPress: handleReset,
+        variant: "secondary",
+        children: "Reset"
+      })
+    })]
+  });
+}
+function RapidBarExample(_ref9) {
+  let {
+    transitions
+  } = _ref9;
+  const [data, setData] = useState(generateBarData);
+  const [resetKey, setResetKey] = useState(0);
+  const handleReset = useCallback(() => setResetKey(k => k + 1), []);
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setData(generateBarData());
+    }, rapidUpdateInterval);
+    return () => clearInterval(intervalId);
+  }, []);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(TransitionBarChart, {
+      data: data,
+      transitions: transitions
+    }, resetKey), /*#__PURE__*/_jsx(Box, {
+      paddingX: 2,
+      children: /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        onPress: handleReset,
+        variant: "secondary",
+        children: "Reset"
+      })
+    })]
+  });
+}
+function MultiLineExample(_ref0) {
+  let {
+    transitions
+  } = _ref0;
+  const [data1, setData1] = useState(generateInitialData);
+  const [data2, setData2] = useState(generateInitialData);
+  const [resetKey, setResetKey] = useState(0);
+  const handleReset = useCallback(() => setResetKey(k => k + 1), []);
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setData1(current => {
+        const last = current[current.length - 1];
+        return [...current.slice(1), generateNextValue(last)];
+      });
+      setData2(current => {
+        const last = current[current.length - 1];
+        return [...current.slice(1), generateNextValue(last)];
+      });
+    }, updateInterval);
+    return () => clearInterval(intervalId);
+  }, []);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(MultiLineChart, {
+      data1: data1,
+      data2: data2,
+      transitions: transitions
+    }, resetKey), /*#__PURE__*/_jsx(Box, {
+      paddingX: 2,
+      children: /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        onPress: handleReset,
+        variant: "secondary",
+        children: "Reset"
+      })
+    })]
+  });
+}
+
+// --- Main Navigator ---
+
+function ExampleNavigator() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const examples = useMemo(() => [{
+    category: 'Line',
+    title: 'Enter Only',
+    component: /*#__PURE__*/_jsx(LineExample, {
+      idlePulse: true,
+      transitions: enterOnly
+    })
+  }, {
+    category: 'Line',
+    title: 'Update Only',
+    component: /*#__PURE__*/_jsx(LineExample, {
+      idlePulse: true,
+      points: true,
+      pointTransitions: updateOnly,
+      transitions: updateOnly
+    })
+  }, {
+    category: 'Line',
+    title: 'Both Disabled',
+    component: /*#__PURE__*/_jsx(LineExample, {
+      transitions: bothDisabled
+    })
+  }, {
+    category: 'Line',
+    title: 'Custom 2',
+    component: /*#__PURE__*/_jsx(LineExample, {
+      points: true,
+      pointTransitions: customEnterUpdateBeacon,
+      scrubberTransitions: customEnterUpdateBeacon,
+      transitions: customEnterUpdate
+    })
+  }, {
+    category: 'Line',
+    title: 'Imperative Pulse',
+    component: /*#__PURE__*/_jsx(LineExample, {
+      imperative: true,
+      resettable: false,
+      transitions: updateOnly
+    })
+  }, {
+    category: 'Multi-Line',
+    title: 'Update Only',
+    component: /*#__PURE__*/_jsx(MultiLineExample, {
+      transitions: updateOnly
+    })
+  }, {
+    category: 'Area',
+    title: 'Both Disabled',
+    component: /*#__PURE__*/_jsx(AreaExample, {
+      transitions: bothDisabled
+    })
+  }, {
+    category: 'Area',
+    title: 'Imperative Pulse',
+    component: /*#__PURE__*/_jsx(AreaExample, {
+      imperative: true,
+      resettable: false,
+      transitions: updateOnly
+    })
+  }, {
+    category: 'Bar',
+    title: 'Enter Only',
+    component: /*#__PURE__*/_jsx(BarExample, {
+      transitions: enterOnly
+    })
+  }, {
+    category: 'Bar',
+    title: 'Update Only',
+    component: /*#__PURE__*/_jsx(BarExample, {
+      transitions: updateOnly
+    })
+  }, {
+    category: 'Bar',
+    title: 'Both Disabled',
+    component: /*#__PURE__*/_jsx(BarExample, {
+      transitions: bothDisabled
+    })
+  }, {
+    category: 'Bar',
+    title: 'Slow Spring Both',
+    component: /*#__PURE__*/_jsx(BarExample, {
+      transitions: slowSpringBoth
+    })
+  }, {
+    category: 'Bar',
+    title: 'Staggered Both',
+    component: /*#__PURE__*/_jsx(BarExample, {
+      transitions: staggeredBoth
+    })
+  }, {
+    category: 'Line',
+    title: 'Rapid Interrupts',
+    component: /*#__PURE__*/_jsx(RapidLineExample, {
+      transitions: slowTimingBoth
+    })
+  }, {
+    category: 'Bar',
+    title: 'Rapid Interrupts',
+    component: /*#__PURE__*/_jsx(RapidBarExample, {
+      transitions: slowTimingBoth
+    })
+  }], []);
+  const currentExample = examples[currentIndex];
+  const handlePrevious = useCallback(() => {
+    setCurrentIndex(prev => (prev - 1 + examples.length) % examples.length);
+  }, [examples.length]);
+  const handleNext = useCallback(() => {
+    setCurrentIndex(prev => (prev + 1) % examples.length);
+  }, [examples.length]);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    paddingX: 0,
+    children: /*#__PURE__*/_jsxs(VStack, {
+      gap: 4,
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingX: 1,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          accessibilityHint: "Navigate to previous example",
+          accessibilityLabel: "Previous",
+          name: "arrowLeft",
+          onPress: handlePrevious,
+          variant: "secondary"
+        }), /*#__PURE__*/_jsxs(VStack, {
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Text, {
+            color: "fgMuted",
+            font: "label2",
+            children: currentExample.category
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            children: currentExample.title
+          }), /*#__PURE__*/_jsxs(Text, {
+            color: "fgMuted",
+            font: "label1",
+            children: [currentIndex + 1, " / ", examples.length]
+          })]
+        }), /*#__PURE__*/_jsx(IconButton, {
+          accessibilityHint: "Navigate to next example",
+          accessibilityLabel: "Next",
+          name: "arrowRight",
+          onPress: handleNext,
+          variant: "secondary"
+        })]
+      }), /*#__PURE__*/_jsx(Box, {
+        children: currentExample.component
+      }, currentIndex)]
+    })
+  });
+}
+export default ExampleNavigator;

package/esm/chart/area/Area.js

@@ -16,6 +16,7 @@ export const Area = /*#__PURE__*/memo(_ref => {
     baseline,
     connectNulls,
     gradient: gradientProp,
+    transitions,
     transition,
     animate
   } = _ref;
@@ -70,6 +71,7 @@ export const Area = /*#__PURE__*/memo(_ref => {
     fillOpacity: fillOpacity,
     gradient: gradient,
     transition: transition,
+    transitions: transitions,
     yAxisId: matchedSeries == null ? void 0 : matchedSeries.yAxisId
   });
 });

package/esm/chart/area/DottedArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "gradient", "animate", "transition"];
+const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "gradient", "animate", "transitions", "transition"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo, useMemo } from 'react';
@@ -28,6 +28,7 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       yAxisId,
       gradient: gradientProp,
       animate: animateProp,
+      transitions,
       transition
     } = _ref,
     pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -50,7 +51,9 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
   }, [drawingArea, patternSize, dotSize]);
   const animatedClipPath = usePathTransition({
     currentPath: d,
-    transition
+    transitions: {
+      update: transition
+    }
   });
   const staticClipPath = useMemo(() => {
     var _Skia$Path$MakeFromSV;
@@ -69,7 +72,8 @@ export const DottedArea = /*#__PURE__*/memo(_ref => {
       animate: animateProp != null ? animateProp : animate,
       d: dottedPath,
       fill: fill,
-      transition: transition
+      transition: transition,
+      transitions: transitions
     }, pathProps, {
       children: gradient && /*#__PURE__*/_jsx(Gradient, {
         gradient: gradient,

package/esm/chart/area/GradientArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "fillOpacity", "gradient", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "animate", "transition"];
+const _excluded = ["d", "fill", "fillOpacity", "gradient", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "animate", "transitions", "transition"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo, useMemo } from 'react';
@@ -24,6 +24,7 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
       baseline,
       yAxisId,
       animate,
+      transitions,
       transition
     } = _ref,
     pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -44,7 +45,8 @@ export const GradientArea = /*#__PURE__*/memo(_ref => {
     d: d,
     fill: fill,
     fillOpacity: fillOpacity,
-    transition: transition
+    transition: transition,
+    transitions: transitions
   }, pathProps, {
     children: gradient && /*#__PURE__*/_jsx(Gradient, {
       gradient: gradient,