@coinbase/cds-mobile-visualization 0.0.0 → 3.4.0-beta.1

package/esm/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.js

@@ -0,0 +1,82 @@
+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 React, { memo, useMemo } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { useDateLookup } from '@coinbase/cds-common/visualizations/useDateLookup';
+import { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { TextLabel2 } from '@coinbase/cds-mobile/typography';
+import times from 'lodash/times';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const numberOfLabels = 5;
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1
+  },
+  label: {
+    width: 100 / numberOfLabels + "%"
+  }
+});
+const SparklineInteractiveMarkerDate = /*#__PURE__*/memo(_ref => {
+  let {
+    getFormattedDate
+  } = _ref;
+  const [label, onLayout] = useLayout();
+  const x = useMemo(() => {
+    return label.x + label.width / 2;
+  }, [label.width, label.x]);
+  return /*#__PURE__*/_jsx(TextLabel2, {
+    align: "center",
+    color: "fgMuted",
+    onLayout: onLayout,
+    paddingTop: 3,
+    style: styles.label,
+    children: getFormattedDate(x)
+  });
+});
+function SparklineInteractiveMarkerDatesWithGeneric(_ref2) {
+  let {
+    formatDate,
+    selectedPeriod,
+    getMarker,
+    timePeriodGutter
+  } = _ref2;
+  const {
+    markerOpacity
+  } = useSparklineInteractiveContext();
+  const theme = useTheme();
+  const getFormattedDate = useDateLookup({
+    getMarker,
+    formatDate,
+    selectedPeriod
+  });
+  const paddingHorizontalStyle = useMemo(() => {
+    const localStyle = {};
+    if (timePeriodGutter) {
+      localStyle.paddingHorizontal = theme.space[timePeriodGutter];
+    }
+    return localStyle;
+  }, [theme.space, timePeriodGutter]);
+  const rootStyle = useMemo(() => {
+    return _extends({}, styles.wrapper, {
+      opacity: markerOpacity,
+      backgroundColor: theme.color.bg
+    }, paddingHorizontalStyle);
+  }, [markerOpacity, paddingHorizontalStyle, theme.color.bg]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    pointerEvents: "none",
+    style: rootStyle,
+    children: times(numberOfLabels).map((_, i) => {
+      return /*#__PURE__*/_jsx(SparklineInteractiveMarkerDate, {
+        getFormattedDate: getFormattedDate
+      }, i);
+    })
+  });
+}
+export const SparklineInteractiveMarkerDates = /*#__PURE__*/memo(SparklineInteractiveMarkerDatesWithGeneric);

package/esm/sparkline/sparkline-interactive/SparklineInteractiveMinMax.js

@@ -0,0 +1,103 @@
+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 React, { memo, useCallback, useMemo, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { TextLabel2 } from '@coinbase/cds-mobile/typography';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { useMinMaxTransform } from './useMinMaxTransform';
+import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = StyleSheet.create({
+  outer: {
+    width: '100%',
+    alignItems: 'center'
+  },
+  caption: {
+    position: 'absolute',
+    left: 0,
+    top: 0
+  }
+});
+const SparklineInteractiveMinMaxContent = /*#__PURE__*/memo(_ref => {
+  let {
+    x,
+    children
+  } = _ref;
+  const theme = useTheme();
+  const [minMaxLayout, onMinMaxLayout] = useLayout();
+  const opacity = useRef(new Animated.Value(0)).current;
+  const transform = useRef(new Animated.ValueXY({
+    x: 0,
+    y: 0
+  })).current;
+  useMinMaxTransform({
+    minMaxLayout,
+    x,
+    transform,
+    opacity
+  });
+
+  // Only do the layout if there is a new child.
+  // This prevents jitter in the case where children is
+  // set to undefined, then returned to the previous value,
+  // as is the case for privacy mode (where we hide the value)
+  const onLayout = useCallback(event => {
+    if (!children) {
+      return;
+    }
+    return onMinMaxLayout(event);
+  }, [onMinMaxLayout, children]);
+  const rootStyle = useMemo(() => {
+    return _extends({}, styles.caption, {
+      height: theme.lineHeight.label2,
+      opacity,
+      transform: transform.getTranslateTransform()
+    });
+  }, [opacity, theme.lineHeight.label2, transform]);
+  const textLabelStyle = useMemo(() => {
+    return _extends({}, styles.caption, {
+      backgroundColor: theme.color.bg
+    });
+  }, [theme.color.bg]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    pointerEvents: "none",
+    style: rootStyle,
+    children: /*#__PURE__*/_jsx(TextLabel2, {
+      color: "fgMuted",
+      onLayout: onLayout,
+      padding: 0,
+      style: textLabelStyle,
+      children: children
+    })
+  });
+});
+export const SparklineInteractiveMinMax = /*#__PURE__*/memo(_ref2 => {
+  let {
+    formatMinMaxLabel,
+    dataPoint,
+    xFunction
+  } = _ref2;
+  const theme = useTheme();
+  const {
+    minMaxOpacity
+  } = useSparklineInteractiveContext();
+  const {
+    SparklineInteractiveMinMaxLabelHeight
+  } = useSparklineInteractiveConstants({});
+  const rootStyle = useMemo(() => {
+    return _extends({}, styles.outer, {
+      opacity: minMaxOpacity,
+      backgroundColor: theme.color.bg,
+      height: SparklineInteractiveMinMaxLabelHeight
+    });
+  }, [SparklineInteractiveMinMaxLabelHeight, minMaxOpacity, theme.color.bg]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    pointerEvents: "none",
+    style: rootStyle,
+    children: !!dataPoint && /*#__PURE__*/_jsx(SparklineInteractiveMinMaxContent, {
+      x: xFunction(dataPoint.date),
+      children: formatMinMaxLabel(dataPoint.value)
+    })
+  });
+});

package/esm/sparkline/sparkline-interactive/SparklineInteractivePanGestureHandler.js

@@ -0,0 +1,104 @@
+import React, { useCallback } from 'react';
+import { Animated as RNAnimated, Platform, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS } from 'react-native-reanimated';
+import { Haptics } from '@coinbase/cds-mobile/utils/haptics';
+import { noop } from '@coinbase/cds-utils';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  lightImpact
+} = Haptics;
+// Generics do not work with React.memo or forwardRef
+// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref/58473012
+export const SparklineInteractivePanGestureHandler = function SparklineInteractivePanGestureHandler(_ref) {
+  let {
+    onScrubEnd = noop,
+    onScrubStart = noop,
+    onScrub = noop,
+    getMarker,
+    selectedPeriod,
+    children,
+    disabled,
+    allowOverflowGestures
+  } = _ref;
+  const {
+    markerXPosition,
+    markerGestureState,
+    animateMarkerIn,
+    animateMarkerOut,
+    animateMinMaxIn,
+    animateMinxMaxOut,
+    animateHoverDateIn,
+    animateHoverDateOut
+  } = useSparklineInteractiveContext();
+  const {
+    chartVerticalLineWidth,
+    endX,
+    startX
+  } = useSparklineInteractiveConstants({});
+  const handleOnStartJsThread = useCallback(() => {
+    void lightImpact();
+    onScrubStart();
+    RNAnimated.parallel([animateMarkerIn, animateMinxMaxOut, animateHoverDateIn]).start();
+  }, [animateHoverDateIn, animateMarkerIn, animateMinxMaxOut, onScrubStart]);
+  const handleOnUpdateJsThread = useCallback(() => {
+    const dataPoint = getMarker(markerXPosition.value);
+    if (dataPoint) {
+      onScrub({
+        point: dataPoint,
+        period: selectedPeriod
+      });
+    }
+  }, [getMarker, markerXPosition.value, onScrub, selectedPeriod]);
+  const handleOnEndOrCancelledJsThread = useCallback(() => {
+    onScrubEnd();
+    RNAnimated.parallel([animateMarkerOut, animateMinMaxIn, animateHoverDateOut]).start(_ref2 => {
+      let {
+        finished
+      } = _ref2;
+      if (finished) {
+        markerXPosition.value = -1;
+      }
+    });
+  }, [animateHoverDateOut, animateMarkerOut, animateMinMaxIn, markerXPosition, onScrubEnd]);
+  const handleOnEndJsThread = useCallback(() => {
+    void Haptics.lightImpact();
+    handleOnEndOrCancelledJsThread();
+  }, [handleOnEndOrCancelledJsThread]);
+  if (disabled) {
+    return /*#__PURE__*/_jsx(View, {
+      children: children
+    });
+  }
+  const longPressGesture = Gesture.Pan().activateAfterLongPress(110).shouldCancelWhenOutside(!allowOverflowGestures).onStart(function onStart(event) {
+    runOnJS(handleOnStartJsThread)();
+    markerGestureState.value = 1;
+
+    // Android does not trigger onUpdate when the gesture starts. This achieves consistent behavior across both iOS and Android
+    if (Platform.OS === 'android') {
+      const newMarkerXPosition = Math.min(endX, Math.max(startX, event.x - chartVerticalLineWidth / 2));
+      markerXPosition.value = newMarkerXPosition;
+      runOnJS(handleOnUpdateJsThread)();
+    }
+  }).onUpdate(function onUpdate(event) {
+    const newMarkerXPosition = Math.min(endX, Math.max(startX, event.x - chartVerticalLineWidth / 2));
+    markerXPosition.value = newMarkerXPosition;
+    if (markerGestureState.value === 1) {
+      runOnJS(handleOnUpdateJsThread)();
+    }
+  }).onEnd(function onEnd() {
+    markerGestureState.value = 0;
+    runOnJS(handleOnEndJsThread)();
+  }).onTouchesCancelled(function onTouchesCancelled() {
+    markerGestureState.value = 0;
+    runOnJS(handleOnEndOrCancelledJsThread)();
+  });
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: longPressGesture,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      children: children
+    })
+  });
+};

package/esm/sparkline/sparkline-interactive/SparklineInteractivePaths.js

@@ -0,0 +1,57 @@
+import React, { memo, useCallback, useRef } from 'react';
+import { SparklineInteractiveAnimatedPath } from './SparklineInteractiveAnimatedPath';
+import { SparklineInteractiveTimeseriesPaths } from './SparklineInteractiveTimeseriesPaths';
+import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function SparklineInteractivePathsWithGeneric(_ref) {
+  let {
+    showHoverData,
+    fill,
+    fillType = 'gradient',
+    path,
+    area,
+    selectedPeriod,
+    yAxisScalingFactor,
+    strokeColor,
+    hoverData,
+    compact
+  } = _ref;
+  // Map 'dotted' to 'gradientDotted' for Sparkline
+  const sparklineFillType = fillType === 'dotted' ? 'gradientDotted' : 'gradient';
+  const hoverPathRef = useRef(undefined);
+  const hoverAreaRef = useRef(undefined);
+  const shouldShowFill = !!fill;
+  const {
+    chartWidth,
+    chartHeight
+  } = useSparklineInteractiveConstants({
+    compact
+  });
+  const handleMultiTimeseriesRender = useCallback(_ref2 => {
+    let {
+      area: timeseriesArea,
+      path: timeseriesPath
+    } = _ref2;
+    hoverPathRef.current = timeseriesPath;
+    hoverAreaRef.current = timeseriesArea;
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!showHoverData && /*#__PURE__*/_jsx(SparklineInteractiveAnimatedPath, {
+      area: shouldShowFill ? area : undefined,
+      color: strokeColor,
+      d: path,
+      fillType: sparklineFillType,
+      initialArea: hoverAreaRef.current,
+      initialPath: hoverPathRef.current,
+      selectedPeriod: selectedPeriod,
+      yAxisScalingFactor: yAxisScalingFactor
+    }), !!showHoverData && /*#__PURE__*/_jsx(SparklineInteractiveTimeseriesPaths, {
+      data: hoverData == null ? void 0 : hoverData[selectedPeriod],
+      height: chartHeight,
+      initialPath: path,
+      onRender: handleMultiTimeseriesRender,
+      width: chartWidth
+    })]
+  });
+}
+export const SparklineInteractivePaths = /*#__PURE__*/memo(SparklineInteractivePathsWithGeneric);

package/esm/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.js

@@ -0,0 +1,124 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { periodLabelMap } from '@coinbase/cds-common/tokens/sparkline';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { useHorizontallyScrollingPressables } from '@coinbase/cds-mobile/hooks/useHorizontallyScrollingPressables';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Box } from '@coinbase/cds-mobile/layout/Box';
+import { HStack } from '@coinbase/cds-mobile/layout/HStack';
+import { OverflowGradient } from '@coinbase/cds-mobile/layout/OverflowGradient';
+import { Pressable } from '@coinbase/cds-mobile/system/Pressable';
+import { TextLabel1 } from '@coinbase/cds-mobile/typography';
+import { Haptics } from '@coinbase/cds-mobile/utils/haptics';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function SparklineInteractivePeriodWithGeneric(_ref) {
+  var _periodLabelMap$perio;
+  let {
+    period,
+    selectedPeriod,
+    setSelectedPeriod,
+    getLayoutHandler,
+    color
+  } = _ref;
+  const isSelected = period.value === selectedPeriod;
+  const periodLabel = (_periodLabelMap$perio = periodLabelMap[period.label]) != null ? _periodLabelMap$perio : period.label;
+  const periodHint = useMemo(() => isSelected ? "Currently showing data for the " + periodLabel + " timeframe" : "Show data for the " + periodLabel + " timeframe", [isSelected, periodLabel]);
+  const handleOnPress = useCallback(() => {
+    void Haptics.lightImpact();
+    setSelectedPeriod(period.value);
+  }, [period, setSelectedPeriod]);
+  const theme = useTheme();
+  const textStyle = useMemo(() => ({
+    color: isSelected ? color : theme.color.fgMuted
+  }), [color, isSelected, theme.color.fgMuted]);
+  const accessibilityState = useMemo(() => ({
+    selected: isSelected
+  }), [isSelected]);
+  return /*#__PURE__*/_jsx(Box, {
+    alignItems: "center",
+    justifyContent: "center",
+    onLayout: getLayoutHandler(period.value),
+    paddingY: 2,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      accessibilityHint: periodHint,
+      accessibilityLabel: periodLabel,
+      accessibilityState: accessibilityState,
+      background: isSelected ? 'bgPrimaryWash' : 'bg',
+      borderColor: "transparent",
+      borderRadius: 1000,
+      onPress: handleOnPress,
+      children: /*#__PURE__*/_jsx(TextLabel1, {
+        paddingX: 2,
+        paddingY: 1,
+        style: textStyle,
+        children: period.label
+      })
+    })
+  }, period.value);
+}
+const periodSelectorStyles = StyleSheet.create({
+  scrollViewContainer: {
+    flexGrow: 1
+  },
+  hStackContainer: {
+    flex: 1
+  }
+});
+const SparklineInteractivePeriod = /*#__PURE__*/memo(SparklineInteractivePeriodWithGeneric);
+export const SparklineInteractivePeriodSelector = _ref2 => {
+  let {
+    selectedPeriod,
+    setSelectedPeriod,
+    periods,
+    color
+  } = _ref2;
+  const theme = useTheme();
+  const accessibleForeground = color !== 'auto' ? color : getAccessibleColor({
+    background: theme.color.bg,
+    foreground: 'auto'
+  });
+  const {
+    markerOpacity
+  } = useSparklineInteractiveContext();
+  const {
+    scrollRef,
+    isScrollContentOverflowing,
+    isScrollContentOffscreenRight,
+    handleScroll,
+    handleScrollContainerLayout,
+    handleScrollContentSizeChange,
+    getPressableLayoutHandler
+  } = useHorizontallyScrollingPressables(selectedPeriod);
+  const opacity = markerOpacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0]
+  });
+  return /*#__PURE__*/_jsxs(Box, {
+    animated: true,
+    background: "bg",
+    opacity: opacity,
+    children: [/*#__PURE__*/_jsx(ScrollView, {
+      ref: scrollRef,
+      horizontal: true,
+      contentContainerStyle: periodSelectorStyles.scrollViewContainer,
+      onContentSizeChange: handleScrollContentSizeChange,
+      onLayout: handleScrollContainerLayout,
+      onScroll: handleScroll,
+      scrollEventThrottle: 1,
+      showsHorizontalScrollIndicator: false,
+      children: /*#__PURE__*/_jsx(HStack, {
+        justifyContent: "space-between",
+        padding: 0,
+        style: periodSelectorStyles.hStackContainer,
+        children: periods.map(period => /*#__PURE__*/_jsx(SparklineInteractivePeriod, {
+          color: accessibleForeground,
+          getLayoutHandler: getPressableLayoutHandler,
+          period: period,
+          selectedPeriod: selectedPeriod,
+          setSelectedPeriod: setSelectedPeriod
+        }, period.value))
+      })
+    }), isScrollContentOverflowing && isScrollContentOffscreenRight && /*#__PURE__*/_jsx(OverflowGradient, {})]
+  });
+};

package/esm/sparkline/sparkline-interactive/SparklineInteractiveProvider.js

@@ -0,0 +1,80 @@
+import React, { createContext, memo, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+import { makeMutable, useSharedValue } from 'react-native-reanimated';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { noop } from '@coinbase/cds-utils';
+import { useOpacityAnimation } from './useOpacityAnimation';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SparklineInteractiveContext = /*#__PURE__*/createContext({
+  isFallbackVisible: true,
+  markerXPosition: makeMutable(0),
+  markerGestureState: makeMutable(0),
+  showFallback: noop,
+  hideFallback: noop,
+  chartOpacity: new Animated.Value(0),
+  animateChartIn: noop,
+  markerOpacity: new Animated.Value(0),
+  animateMarkerIn: noop,
+  animateMarkerOut: noop,
+  minMaxOpacity: new Animated.Value(0),
+  animateMinMaxIn: noop,
+  animateMinxMaxOut: noop,
+  hoverDateOpacity: new Animated.Value(0),
+  animateHoverDateIn: noop,
+  animateHoverDateOut: noop,
+  compact: false,
+  gutter
+});
+export const SparklineInteractiveProvider = /*#__PURE__*/memo(_ref => {
+  let {
+    children,
+    compact = false,
+    gutter: propGutter
+  } = _ref;
+  const [isFallbackVisible, setIsFallbackVisible] = useState(true);
+  const markerXPosition = useSharedValue(-1);
+  const markerGestureState = useSharedValue(0);
+  const [chartOpacity, animateChartIn, animateChartOut] = useOpacityAnimation();
+  const [markerOpacity, animateMarkerIn, animateMarkerOut] = useOpacityAnimation();
+  const [minMaxOpacity, animateMinMaxIn, animateMinxMaxOut] = useOpacityAnimation();
+  const [hoverDateOpacity, animateHoverDateIn, animateHoverDateOut] = useOpacityAnimation();
+  const chartGutter = useRef(propGutter != null ? propGutter : gutter).current;
+  const showFallback = useCallback(() => {
+    animateChartOut.start();
+    setIsFallbackVisible(true);
+  }, [animateChartOut]);
+  const hideFallback = useCallback(() => {
+    animateChartIn.start();
+    animateMinMaxIn.start();
+    setIsFallbackVisible(false);
+  }, [animateChartIn, animateMinMaxIn]);
+  const sparklineProviderVal = useMemo(() => {
+    return {
+      isFallbackVisible,
+      markerXPosition,
+      markerGestureState,
+      showFallback,
+      hideFallback,
+      chartOpacity,
+      animateChartIn,
+      markerOpacity,
+      animateMarkerIn,
+      animateMarkerOut,
+      minMaxOpacity,
+      animateMinMaxIn,
+      animateMinxMaxOut,
+      hoverDateOpacity,
+      animateHoverDateIn,
+      animateHoverDateOut,
+      compact,
+      gutter: chartGutter
+    };
+  }, [animateChartIn, animateHoverDateIn, animateHoverDateOut, animateMarkerIn, animateMarkerOut, animateMinMaxIn, animateMinxMaxOut, chartOpacity, compact, hideFallback, hoverDateOpacity, isFallbackVisible, markerGestureState, markerOpacity, markerXPosition, minMaxOpacity, showFallback, chartGutter]);
+  return /*#__PURE__*/_jsx(SparklineInteractiveContext.Provider, {
+    value: sparklineProviderVal,
+    children: children
+  });
+});
+export function useSparklineInteractiveContext() {
+  return useContext(SparklineInteractiveContext);
+}

package/esm/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.js

@@ -0,0 +1,109 @@
+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 React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { G, Path, Svg } from 'react-native-svg';
+import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
+import { useTimeseriesPaths } from '@coinbase/cds-common/visualizations/useTimeseriesPaths';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import * as interpolate from 'd3-interpolate-path';
+import { useInterruptiblePathAnimation } from './useInterruptiblePathAnimation';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TimeseriesPath = /*#__PURE__*/memo(_ref => {
+  let {
+    timeseries,
+    lineFn,
+    initialPath,
+    onRender,
+    areaFn
+  } = _ref;
+  const theme = useTheme();
+  const pathRef = useRef(null);
+  const {
+    strokeColor
+  } = timeseries;
+  const lineColor = strokeColor !== 'auto' ? strokeColor : getAccessibleColor({
+    background: theme.color.bg,
+    foreground: 'auto',
+    usage: 'graphic'
+  });
+  const newPath = useMemo(() => lineFn(timeseries.points), [lineFn, timeseries.points]);
+  const newArea = useMemo(() => onRender ? areaFn(timeseries.points) : null, [areaFn, onRender, timeseries.points]);
+  const pathInterpolator = useMemo(() => interpolate.interpolatePath(initialPath, newPath), [initialPath, newPath]);
+  const animationListener = useCallback(_ref2 => {
+    var _pathRef$current;
+    let {
+      value
+    } = _ref2;
+    const val = Number(value.toFixed(4));
+    // BAD: We only disabled this lint rule to enable eslint upgrade after this component was implemented. These apis should never be used.
+    // Usage in this component are known making this a high risk component. Contact team for more information.
+
+    (_pathRef$current = pathRef.current) == null || _pathRef$current.setNativeProps({
+      d: pathInterpolator(val)
+    });
+  }, [pathInterpolator]);
+  const updatePathWithoutAnimation = useCallback(() => {
+    var _pathRef$current2;
+    // BAD: We only disabled this lint rule to enable eslint upgrade after this component was implemented. These apis should never be used.
+    // Usage in this component are known making this a high risk component. Contact team for more information.
+
+    (_pathRef$current2 = pathRef.current) == null || _pathRef$current2.setNativeProps({
+      d: pathInterpolator(1)
+    });
+  }, [pathInterpolator]);
+  const playAnimation = useInterruptiblePathAnimation({
+    animationListener,
+    onInterrupt: updatePathWithoutAnimation,
+    ignoreMinMax: true
+  });
+  useEffect(() => {
+    playAnimation();
+    onRender == null || onRender({
+      path: newPath,
+      area: newArea
+    });
+  }, [newArea, newPath, onRender, pathInterpolator, playAnimation]);
+  return /*#__PURE__*/_jsx(Path, {
+    ref: pathRef,
+    d: initialPath,
+    stroke: lineColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: borderWidth
+  });
+});
+export const SparklineInteractiveTimeseriesPaths = /*#__PURE__*/memo(_ref3 => {
+  let {
+    data,
+    width,
+    height,
+    initialPath,
+    onRender
+  } = _ref3;
+  const {
+    lineFn,
+    areaFn
+  } = useTimeseriesPaths({
+    data,
+    width,
+    height
+  });
+  const translateProps = useMemo(() => getSparklineTransform(width, height), [width, height]);
+  const paths = data.map((timeseries, index) => {
+    return /*#__PURE__*/_jsx(TimeseriesPath, {
+      areaFn: areaFn,
+      initialPath: initialPath,
+      lineFn: lineFn,
+      onRender: index === 0 ? onRender : undefined,
+      timeseries: timeseries
+    }, timeseries.id);
+  });
+  return /*#__PURE__*/_jsx(Svg, {
+    height: height,
+    width: width,
+    children: /*#__PURE__*/_jsx(G, _extends({}, translateProps, {
+      children: paths
+    }))
+  });
+});