@coinbase/cds-mobile-visualization 3.8.0 → 4.0.0

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

@@ -1,693 +0,0 @@
-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 { useTheme } from '@coinbase/cds-mobile';
-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 { AreaChart } from '../area/AreaChart';
-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__*/_jsx(AreaChart, {
-    enableScrubbing: true,
-    showLines: true,
-    height: 200,
-    inset: {
-      top: 16,
-      bottom: 16,
-      left: 16,
-      right: 16
-    },
-    series: [{
-      id: 'values',
-      data
-    }],
-    transitions: transitions,
-    children: /*#__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"
-      })
-    })]
-  });
-}
-function SessionBaselineAreaTransitionsExample() {
-  const theme = useTheme();
-  const [resetKey, setResetKey] = useState(0);
-  const [data, setData] = useState(generateInitialData());
-  const handleReset = useCallback(() => {
-    setData(generateInitialData());
-    setResetKey(k => k + 1);
-  }, []);
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      setData(d => [...d.slice(1), generateNextValue(d[d.length - 1])]);
-    }, updateInterval);
-    return () => clearInterval(intervalId);
-  }, []);
-  const baseline = data[0];
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(AreaChart, {
-      enableScrubbing: true,
-      showLines: true,
-      height: 200,
-      inset: {
-        top: 16,
-        bottom: 16,
-        left: 16,
-        right: 16
-      },
-      series: [{
-        id: 'values',
-        data,
-        type: 'gradient',
-        gradient: {
-          stops: [{
-            offset: baseline,
-            color: theme.color.fgNegative
-          }, {
-            offset: baseline,
-            color: theme.color.fgPositive
-          }]
-        }
-      }],
-      yAxis: {
-        baseline: baseline,
-        domain: {
-          min: 0,
-          max: 100
-        }
-      },
-      children: /*#__PURE__*/_jsx(Scrubber, {
-        hideOverlay: true,
-        idlePulse: true
-      })
-    }, resetKey), /*#__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: 'Area',
-    title: 'Session baseline',
-    component: /*#__PURE__*/_jsx(SessionBaselineAreaTransitionsExample, {})
-  }, {
-    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;