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

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

@@ -0,0 +1,307 @@
+const _excluded = ["compact", "gutter"];
+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 React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import { minMax } from '@coinbase/cds-common/utils/chart';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { useSparklineCoordinates } from '@coinbase/cds-common/visualizations/useSparklineCoordinates';
+import { chartFallbackNegative, chartFallbackPositive } from '@coinbase/cds-lottie-files';
+import { Lottie } from '@coinbase/cds-mobile/animation';
+import { useScreenReaderStatus } from '@coinbase/cds-mobile/hooks/useScreenReaderStatus';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Box } from '@coinbase/cds-mobile/layout';
+import { emptyArray, noop } from '@coinbase/cds-utils';
+import isEqual from 'lodash/isEqual';
+import isObject from 'lodash/isObject';
+import { SparklineAccessibleView } from './SparklineAccessibleView';
+import { SparklineInteractiveHoverDate } from './SparklineInteractiveHoverDate';
+import { SparklineInteractiveLineVertical } from './SparklineInteractiveLineVertical';
+import { SparklineInteractiveMarkerDates } from './SparklineInteractiveMarkerDates';
+import { SparklineInteractiveMinMax } from './SparklineInteractiveMinMax';
+import { SparklineInteractivePanGestureHandler } from './SparklineInteractivePanGestureHandler';
+import { SparklineInteractivePaths } from './SparklineInteractivePaths';
+import { SparklineInteractivePeriodSelector } from './SparklineInteractivePeriodSelector';
+import { SparklineInteractiveProvider, useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export * from '@coinbase/cds-common/types/Chart';
+const DefaultFallback = /*#__PURE__*/memo(_ref => {
+  let {
+    fallbackType
+  } = _ref;
+  const source = fallbackType === 'negative' ? chartFallbackNegative : chartFallbackPositive;
+  return /*#__PURE__*/_jsx(Box, {
+    alignItems: "center",
+    justifyContent: "center",
+    children: /*#__PURE__*/_jsx(Lottie, {
+      autoplay: true,
+      loop: true,
+      height: "100%",
+      source: source
+    })
+  });
+});
+function defaultFormatMinMaxLabel(value) {
+  return "" + value;
+}
+function BelowChartWithGeneric(_ref2) {
+  let {
+    color,
+    formatDate,
+    getMarker,
+    periods,
+    selectedPeriod,
+    setSelectedPeriod,
+    timePeriodGutter
+  } = _ref2;
+  const theme = useTheme();
+  const style = useMemo(() => {
+    if (timePeriodGutter) {
+      return {
+        paddingHorizontal: theme.space[timePeriodGutter]
+      };
+    }
+    return {};
+  }, [theme.space, timePeriodGutter]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: style,
+    children: [/*#__PURE__*/_jsx(SparklineInteractiveMarkerDates, {
+      formatDate: formatDate,
+      getMarker: getMarker,
+      selectedPeriod: selectedPeriod,
+      timePeriodGutter: timePeriodGutter
+    }), /*#__PURE__*/_jsx(SparklineInteractivePeriodSelector, {
+      color: color,
+      periods: periods,
+      selectedPeriod: selectedPeriod,
+      setSelectedPeriod: setSelectedPeriod
+    })]
+  });
+}
+const BelowChart = /*#__PURE__*/memo(BelowChartWithGeneric);
+function SparklineInteractiveContentWithGeneric(_ref3) {
+  let {
+    data,
+    periods,
+    defaultPeriod,
+    onPeriodChanged,
+    strokeColor,
+    onScrub = noop,
+    onScrubStart = noop,
+    onScrubEnd = noop,
+    formatMinMaxLabel = defaultFormatMinMaxLabel,
+    formatDate,
+    fallback = null,
+    hideMinMaxLabel = false,
+    hidePeriodSelector = false,
+    disableScrubbing = false,
+    fill = true,
+    fillType = 'gradient',
+    yAxisScalingFactor = 1.0,
+    formatHoverDate,
+    headerNode,
+    fallbackType = 'positive',
+    disableHorizontalPadding = false,
+    hoverData,
+    timePeriodGutter,
+    allowOverflowGestures,
+    style,
+    styles,
+    headerTestID
+  } = _ref3;
+  const [isScrubbing, setIsScrubbing] = useState(false);
+  const {
+    isFallbackVisible,
+    showFallback,
+    chartOpacity,
+    minMaxOpacity,
+    compact
+  } = useSparklineInteractiveContext();
+  const color = strokeColor;
+  const [selectedPeriod, setSelectedPeriod] = useState(defaultPeriod);
+  const chartHoverTextInputRef = useRef(null);
+  const theme = useTheme();
+  const isScreenReaderEnabled = useScreenReaderStatus();
+  const lineVerticalColor = useMemo(() => {
+    const lineColor = color !== 'auto' ? color : getAccessibleColor({
+      background: theme.color.bg,
+      foreground: 'auto',
+      usage: 'graphic'
+    });
+    return hoverData ? theme.color.bgLineHeavy : lineColor;
+  }, [hoverData, color, theme.color.bg, theme.color.bgLineHeavy]);
+  const dataForPeriod = useMemo(() => {
+    var _data$selectedPeriod;
+    if (!data) {
+      return emptyArray;
+    }
+    return (_data$selectedPeriod = data[selectedPeriod]) != null ? _data$selectedPeriod : emptyArray;
+  }, [data, selectedPeriod]);
+
+  // If dataForPeriod is empty we know that we are either loading
+  // or backend returned bad data and we should show fallback UI.
+  const hasData = dataForPeriod.length > 0;
+  const [min, max] = useMemo(() => {
+    return minMax(dataForPeriod, d => d.value);
+  }, [dataForPeriod]);
+  const chartOpacityStyle = useMemo(() => {
+    return {
+      opacity: chartOpacity
+    };
+  }, [chartOpacity]);
+  useEffect(() => {
+    var _data$selectedPeriod2;
+    // If there is no data for selected period show fallback loader
+    if (isObject(data) && !((_data$selectedPeriod2 = data[selectedPeriod]) != null && _data$selectedPeriod2.length) && !isFallbackVisible) {
+      showFallback();
+    }
+  }, [data, isFallbackVisible, selectedPeriod, showFallback]);
+  const updatePeriod = useCallback(period => {
+    if (isObject(data) && period !== selectedPeriod) {
+      // This can sometimes happen for newer assets which
+      // will have their 'all' chart data be the same as
+      // their 'year' chart data. In those cases we don't
+      // want to animate out the min/max since we rely on
+      // AnimatedChartPath to animate those components back in -
+      // and AnimatedChartPath will not trigger an animation
+      // if it's chartData is the same between re-renders
+      if (!isEqual(data[period], data[selectedPeriod])) {
+        minMaxOpacity.setValue(0);
+      }
+      setSelectedPeriod(period);
+      onPeriodChanged == null || onPeriodChanged(period);
+    }
+  }, [data, selectedPeriod, onPeriodChanged, minMaxOpacity]);
+  const {
+    chartHorizontalGutter,
+    chartDimensionStyles,
+    chartWidth,
+    chartHeight
+  } = useSparklineInteractiveConstants({
+    compact
+  });
+  const {
+    xFunction,
+    path,
+    area,
+    getMarker
+  } = useSparklineCoordinates({
+    data: dataForPeriod,
+    width: chartWidth,
+    height: chartHeight,
+    yAxisScalingFactor
+  });
+  const handleScrub = useCallback(params => {
+    var _chartHoverTextInputR;
+    (_chartHoverTextInputR = chartHoverTextInputRef.current) == null || _chartHoverTextInputR.update(params);
+    onScrub == null || onScrub(params);
+  }, [onScrub]);
+  const handleScrubStart = useCallback(() => {
+    if (hoverData) {
+      setIsScrubbing(true);
+    }
+    onScrubStart == null || onScrubStart();
+  }, [hoverData, onScrubStart]);
+  const handleScrubEnd = useCallback(() => {
+    if (hoverData) {
+      setIsScrubbing(false);
+    }
+    onScrubEnd == null || onScrubEnd();
+  }, [hoverData, onScrubEnd]);
+  let header;
+  if (headerNode) {
+    header = /*#__PURE__*/_jsx(Box, {
+      paddingBottom: 2,
+      style: styles == null ? void 0 : styles.header,
+      testID: headerTestID,
+      children: headerNode
+    });
+  }
+  const rootStyles = useMemo(() => {
+    return [!disableHorizontalPadding && {
+      paddingHorizontal: chartHorizontalGutter
+    }, style, styles == null ? void 0 : styles.root];
+  }, [style, styles == null ? void 0 : styles.root, chartHorizontalGutter, disableHorizontalPadding]);
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: rootStyles,
+    children: [header, /*#__PURE__*/_jsxs(SparklineInteractivePanGestureHandler, {
+      allowOverflowGestures: allowOverflowGestures,
+      disabled: disableScrubbing,
+      getMarker: getMarker,
+      onScrub: handleScrub,
+      onScrubEnd: handleScrubEnd,
+      onScrubStart: handleScrubStart,
+      selectedPeriod: selectedPeriod,
+      children: [!!formatHoverDate && /*#__PURE__*/_jsx(SparklineInteractiveHoverDate, {
+        ref: chartHoverTextInputRef,
+        formatHoverDate: formatHoverDate,
+        shouldTakeUpHeight: hideMinMaxLabel
+      }), !hideMinMaxLabel && /*#__PURE__*/_jsx(SparklineInteractiveMinMax, {
+        dataPoint: max,
+        formatMinMaxLabel: formatMinMaxLabel,
+        xFunction: xFunction
+      }), /*#__PURE__*/_jsxs(View, {
+        style: chartDimensionStyles,
+        children: [isScreenReaderEnabled && /*#__PURE__*/_jsx(SparklineAccessibleView, {
+          data: data,
+          selectedPeriod: selectedPeriod
+        }), !!isFallbackVisible && /*#__PURE__*/_jsx(View, {
+          style: StyleSheet.absoluteFill,
+          children: fallback != null ? fallback : /*#__PURE__*/_jsx(DefaultFallback, {
+            fallbackType: fallbackType
+          })
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: chartOpacityStyle,
+          children: !!hasData && !!path && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(SparklineInteractiveLineVertical, {
+              color: lineVerticalColor,
+              showHoverDate: !!formatHoverDate
+            }), /*#__PURE__*/_jsx(SparklineInteractivePaths, {
+              area: area,
+              compact: compact,
+              fill: fill,
+              fillType: fillType,
+              hoverData: hoverData,
+              path: path,
+              selectedPeriod: selectedPeriod,
+              showHoverData: isScrubbing,
+              strokeColor: color,
+              yAxisScalingFactor: yAxisScalingFactor
+            })]
+          })
+        })]
+      }), !hideMinMaxLabel && /*#__PURE__*/_jsx(SparklineInteractiveMinMax, {
+        dataPoint: min,
+        formatMinMaxLabel: formatMinMaxLabel,
+        xFunction: xFunction
+      })]
+    }), !hidePeriodSelector && /*#__PURE__*/_jsx(BelowChart, {
+      color: color,
+      formatDate: formatDate,
+      getMarker: getMarker,
+      periods: periods,
+      selectedPeriod: selectedPeriod,
+      setSelectedPeriod: updatePeriod,
+      timePeriodGutter: timePeriodGutter
+    })]
+  });
+}
+const SparklineInteractiveContent = /*#__PURE__*/memo(SparklineInteractiveContentWithGeneric);
+function SparklineInteractiveWithGeneric(_ref4) {
+  let {
+      compact,
+      gutter
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded);
+  return /*#__PURE__*/_jsx(SparklineInteractiveProvider, {
+    compact: compact,
+    gutter: gutter,
+    children: /*#__PURE__*/_jsx(SparklineInteractiveContent, _extends({}, props))
+  });
+}
+
+/**
+ * @deprecated Use LineChart instead.
+ */
+export const SparklineInteractive = /*#__PURE__*/memo(SparklineInteractiveWithGeneric);

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

@@ -0,0 +1,116 @@
+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 { Sparkline } from '../Sparkline';
+import { SparklineArea } from '../SparklineArea';
+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,
+    fillType = 'gradient',
+    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(Sparkline, {
+    ref: pathRef,
+    color: color,
+    fillType: fillType,
+    height: chartHeight,
+    path: initialPath,
+    strokeType: "solid",
+    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
+    })
+  });
+});