@coinbase/cds-mobile-visualization 0.0.0 → 3.3.0

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

@@ -0,0 +1,113 @@
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useValueChanges } from '@coinbase/cds-common/hooks/useValueChanges';
+import * as interpolate from 'd3-interpolate-path';
+import { SparklineArea } from '../SparklineArea';
+import { SparklineGradient } from '../SparklineGradient';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { useInterruptiblePathAnimation } from './useInterruptiblePathAnimation';
+import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SparklineInteractiveAnimatedPath = /*#__PURE__*/memo(_ref => {
+  let {
+    d = '',
+    color,
+    selectedPeriod,
+    area,
+    yAxisScalingFactor,
+    initialPath,
+    initialArea
+  } = _ref;
+  const {
+    isFallbackVisible,
+    hideFallback,
+    animateMinMaxIn,
+    compact
+  } = useSparklineInteractiveContext();
+  const pathRef = useRef(null);
+  const areaRef = useRef(null);
+
+  // Only tween animation on period changes
+  const {
+    hasNotChanged: skipAnimation,
+    addPreviousValue: addPreviousPeriod
+  } = useValueChanges(selectedPeriod);
+  const {
+    previousValue: previousPath,
+    newValue: newPath,
+    hasChanged: shouldUpdatePath,
+    addPreviousValue: addPreviousPath
+  } = useValueChanges(d);
+  const {
+    previousValue: previousArea,
+    newValue: newArea,
+    hasChanged: shouldUpdateArea,
+    addPreviousValue: addPreviousArea
+  } = useValueChanges(area != null ? area : '');
+  const pathInterpolator = useMemo(() => interpolate.interpolatePath(previousPath != null ? previousPath : initialPath, newPath), [previousPath, initialPath, newPath]);
+  const areaInterpolator = useMemo(() => interpolate.interpolatePath(previousArea != null ? previousArea : initialArea, newArea), [previousArea, initialArea, newArea]);
+  const animationListener = useCallback(_ref2 => {
+    var _pathRef$current, _areaRef$current;
+    let {
+      value
+    } = _ref2;
+    const val = Number(value.toFixed(4));
+    (_pathRef$current = pathRef.current) == null || _pathRef$current.setNativeProps({
+      d: pathInterpolator(val)
+    });
+    (_areaRef$current = areaRef.current) == null || _areaRef$current.setNativeProps({
+      d: areaInterpolator(val)
+    });
+  }, [areaInterpolator, pathInterpolator]);
+  const updatePathWithoutAnimation = useCallback(() => {
+    var _pathRef$current2, _areaRef$current2;
+    (_pathRef$current2 = pathRef.current) == null || _pathRef$current2.setNativeProps({
+      d: pathInterpolator(1)
+    });
+    (_areaRef$current2 = areaRef.current) == null || _areaRef$current2.setNativeProps({
+      d: areaInterpolator(1)
+    });
+    animateMinMaxIn.start();
+  }, [animateMinMaxIn, areaInterpolator, pathInterpolator]);
+  const playAnimation = useInterruptiblePathAnimation({
+    animationListener,
+    onInterrupt: updatePathWithoutAnimation
+  });
+  useEffect(() => {
+    addPreviousPeriod(selectedPeriod);
+  }, [addPreviousPeriod, selectedPeriod]);
+  useEffect(() => {
+    // only update these values when they are used
+    addPreviousArea(newArea);
+    addPreviousPath(newPath);
+    if (shouldUpdatePath) {
+      if (isFallbackVisible) {
+        hideFallback();
+        updatePathWithoutAnimation();
+      } else if (skipAnimation) {
+        updatePathWithoutAnimation();
+      } else {
+        playAnimation();
+      }
+    } else if (shouldUpdateArea) {
+      updatePathWithoutAnimation();
+    }
+  }, [hideFallback, shouldUpdatePath, shouldUpdateArea, skipAnimation, updatePathWithoutAnimation, playAnimation, isFallbackVisible, addPreviousPath, addPreviousArea, newArea, newPath]);
+  const {
+    chartWidth,
+    chartHeight
+  } = useSparklineInteractiveConstants({
+    compact
+  });
+  return /*#__PURE__*/_jsx(SparklineGradient, {
+    ref: pathRef,
+    color: color,
+    height: chartHeight,
+    path: initialPath,
+    width: chartWidth,
+    yAxisScalingFactor: yAxisScalingFactor,
+    children: !!area && /*#__PURE__*/_jsx(SparklineArea, {
+      ref: areaRef,
+      area: initialArea
+    })
+  });
+});

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

@@ -0,0 +1,131 @@
+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, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { Animated, StyleSheet, TextInput } from 'react-native';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function setTransform(x, elWidth, containerWidth, transform, gutter) {
+  let newX = x - elWidth / 2;
+  newX = Math.max(gutter, newX);
+  newX = Math.min(newX, containerWidth - elWidth - gutter);
+  transform.setValue({
+    x: newX,
+    y: 0
+  });
+}
+const styles = StyleSheet.create({
+  outer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%'
+  },
+  caption: {
+    alignSelf: 'center',
+    position: 'absolute',
+    left: 0
+  }
+});
+const MAX_MEASURE_ITERATIONS = 5;
+const SparklineInteractiveHoverDateWithGeneric = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    formatHoverDate,
+    shouldTakeUpHeight
+  } = _ref;
+  const theme = useTheme();
+  const {
+    hoverDateOpacity,
+    gutter
+  } = useSparklineInteractiveContext();
+  const {
+    SparklineInteractiveMinMaxLabelHeight,
+    chartWidth
+  } = useSparklineInteractiveConstants({});
+  const transform = useRef(new Animated.ValueXY({
+    x: 0,
+    y: 0
+  })).current;
+  const textInputRef = useRef(null);
+
+  // period => number mapping
+  const measuredWidth = useRef({});
+  const measureIterations = useRef({});
+  // if we have no gutter the min/max label needs some space so it's not right up against the edge of the screen
+  const minGutter = gutter === 0 ? theme.space['1'] : 0;
+  useImperativeHandle(ref, () => ({
+    update: params => {
+      var _textInputRef$current, _measureIterations$cu;
+      const {
+        point: {
+          x,
+          date
+        },
+        period
+      } = params;
+
+      // the second conditional is to let typescript know x is always defined after this line
+      if (!Number.isFinite(x) || x === undefined) {
+        return;
+      }
+      const text = formatHoverDate == null ? void 0 : formatHoverDate(date, period);
+      if (!text) {
+        return;
+      }
+
+      // 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.
+
+      (_textInputRef$current = textInputRef.current) == null || _textInputRef$current.setNativeProps({
+        text: formatHoverDate == null ? void 0 : formatHoverDate(date, period)
+      });
+      measureIterations.current[period] = (_measureIterations$cu = measureIterations.current[period]) != null ? _measureIterations$cu : 0;
+      if (measureIterations.current[period] > MAX_MEASURE_ITERATIONS) {
+        const currWidth = measuredWidth.current[period];
+        setTransform(x, currWidth, chartWidth, transform, minGutter);
+      } else {
+        var _textInputRef$current2;
+        (_textInputRef$current2 = textInputRef.current) == null || _textInputRef$current2.measure((ox, oy, width) => {
+          var _measuredWidth$curren;
+          measureIterations.current[period] += 1;
+          measuredWidth.current[period] = Math.max(width, (_measuredWidth$curren = measuredWidth.current[period]) != null ? _measuredWidth$curren : 0);
+          setTransform(x, measuredWidth.current[period], chartWidth, transform, minGutter);
+        });
+      }
+    }
+  }));
+  const rootStyle = useMemo(() => {
+    return _extends({
+      position: shouldTakeUpHeight ? 'relative' : 'absolute',
+      opacity: hoverDateOpacity,
+      backgroundColor: theme.color.bg,
+      height: SparklineInteractiveMinMaxLabelHeight
+    }, styles.outer);
+  }, [SparklineInteractiveMinMaxLabelHeight, hoverDateOpacity, shouldTakeUpHeight, theme.color.bg]);
+  const innerStyle = useMemo(() => {
+    return _extends({}, styles.caption, {
+      transform: transform.getTranslateTransform()
+    });
+  }, [transform]);
+  const textInputStyle = useMemo(() => {
+    return {
+      fontSize: theme.fontSize.label2,
+      lineHeight: theme.lineHeight.label2,
+      fontFamily: theme.fontFamily.label2,
+      color: theme.color.fgMuted
+    };
+  }, [theme.color.fgMuted, theme.fontFamily.label2, theme.fontSize.label2, theme.lineHeight.label2]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    pointerEvents: "none",
+    style: rootStyle,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: innerStyle,
+      children: /*#__PURE__*/_jsx(TextInput, {
+        ref: textInputRef,
+        accessibilityHint: "Text input field",
+        accessibilityLabel: "Text input field",
+        style: textInputStyle
+      })
+    })
+  });
+});
+export const SparklineInteractiveHoverDate = SparklineInteractiveHoverDateWithGeneric;

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

@@ -0,0 +1,99 @@
+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 as RNAnimated, StyleSheet } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { Line, Svg } from 'react-native-svg';
+import { maskOpacity } from '@coinbase/cds-common/tokens/sparkline';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
+import { useSparklineInteractiveLineStyles } from './useSparklineInteractiveLineStyles';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = StyleSheet.create({
+  wrapper: _extends({}, StyleSheet.absoluteFillObject, {
+    zIndex: 2
+  })
+});
+const SparklineInteractiveDottedLine = /*#__PURE__*/memo(_ref => {
+  let {
+    color,
+    showHoverDate
+  } = _ref;
+  const theme = useTheme();
+  const {
+    markerXPosition,
+    compact
+  } = useSparklineInteractiveContext();
+  const {
+    lineProps
+  } = useSparklineInteractiveLineStyles();
+  const {
+    chartHeight,
+    SparklineInteractiveMinMaxLabelHeight,
+    chartVerticalLineWidth,
+    chartWidth
+  } = useSparklineInteractiveConstants({
+    compact
+  });
+  const dottedLineHeight = chartHeight + SparklineInteractiveMinMaxLabelHeight * (showHoverDate ? 1 : 2);
+  const lineStyles = useMemo(() => {
+    return {
+      width: chartVerticalLineWidth,
+      height: dottedLineHeight,
+      top: showHoverDate ? 0 : -SparklineInteractiveMinMaxLabelHeight,
+      zIndex: 2
+    };
+  }, [SparklineInteractiveMinMaxLabelHeight, chartVerticalLineWidth, dottedLineHeight, showHoverDate]);
+  const animatedTranslateX = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: markerXPosition.value
+    }]
+  }));
+  const dottedLinePositionStyles = useMemo(() => [lineStyles, animatedTranslateX], [lineStyles, animatedTranslateX]);
+  const maskStyles = useMemo(() => {
+    return _extends({}, StyleSheet.absoluteFillObject, {
+      height: dottedLineHeight,
+      width: chartWidth,
+      top: showHoverDate ? 0 : -SparklineInteractiveMinMaxLabelHeight,
+      backgroundColor: theme.color.bg,
+      opacity: maskOpacity,
+      zIndex: 1
+    });
+  }, [SparklineInteractiveMinMaxLabelHeight, chartWidth, dottedLineHeight, showHoverDate, theme.color.bg]);
+  const maskPositionStyles = useMemo(() => [maskStyles, animatedTranslateX], [maskStyles, animatedTranslateX]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: dottedLinePositionStyles,
+      children: /*#__PURE__*/_jsx(Svg, {
+        children: /*#__PURE__*/_jsx(Line, _extends({}, lineProps, {
+          stroke: color,
+          y2: dottedLineHeight
+        }))
+      })
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: maskPositionStyles
+    })]
+  });
+});
+export const SparklineInteractiveLineVertical = /*#__PURE__*/memo(_ref2 => {
+  let {
+    color,
+    showHoverDate
+  } = _ref2;
+  const {
+    markerOpacity
+  } = useSparklineInteractiveContext();
+  const rootStyle = useMemo(() => {
+    return _extends({}, styles.wrapper, {
+      opacity: markerOpacity
+    });
+  }, [markerOpacity]);
+  return /*#__PURE__*/_jsx(RNAnimated.View, {
+    pointerEvents: "none",
+    style: rootStyle,
+    children: /*#__PURE__*/_jsx(SparklineInteractiveDottedLine, {
+      color: color,
+      showHoverDate: showHoverDate
+    })
+  });
+});

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,53 @@
+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,
+    path,
+    area,
+    selectedPeriod,
+    yAxisScalingFactor,
+    strokeColor,
+    hoverData,
+    compact
+  } = _ref;
+  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,
+      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);