@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

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

@@ -1,75 +0,0 @@
-import React, { memo, useCallback } from 'react';
-import { StyleSheet, View } from 'react-native';
-import chunk from 'lodash/chunk';
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    flex: 1,
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0
-  }
-});
-
-/**
- * SparklineAccessibleView renders an accessible view for Sparkline Chart.
- *
- * It chunks the sparkline data into 10 (or fewer) pieces, rendering each as a View with
- * flex width proportional to the chunk size. The first data point in each chunk is used
- * to generate an accessibilityLabel with the date and value.
- *
- * @param data - The sparkline data mapped by time period
- * @param selectedPeriod - The currently selected time period
- */
-export const SparklineAccessibleView = /*#__PURE__*/memo(function SparklineAccessibleView(_ref) {
-  let {
-    data,
-    selectedPeriod
-  } = _ref;
-  const chunkedData = data ? chunk(data[selectedPeriod], data[selectedPeriod].length / 10) : [];
-  // if the data is not evenly divisible by 10, the last chunk will be smaller than the rest
-  // so we need to combine it with the previous chunk
-  if (chunkedData.length === 11) {
-    const lastChunk = chunkedData.pop();
-    chunkedData[chunkedData.length - 1] = chunkedData[chunkedData.length - 1].concat(lastChunk != null ? lastChunk : []);
-  }
-  const getStyleByLength = useCallback(length => ({
-    flex: length
-  }), []);
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: chunkedData.map(dataChunk => {
-      // use the first data point in chunk for accessibility label
-      const item = dataChunk[0];
-
-      // only announce time for hour and day
-      const shouldAnnounceTime = selectedPeriod === 'hour' || selectedPeriod === 'day';
-
-      // Extract date formatting options
-      const timeOptions = {
-        hour: 'numeric',
-        minute: 'numeric',
-        hour12: true
-      };
-      const dateOptions = {
-        month: 'long',
-        day: 'numeric',
-        year: 'numeric'
-      };
-
-      // TODO: localize date and time
-      const dateTime = item.date.toLocaleString('en-US', shouldAnnounceTime ? timeOptions : dateOptions);
-      const price = item.value.toFixed(2);
-      return /*#__PURE__*/_jsx(View, {
-        accessible: true,
-        accessibilityLabel: dateTime + ", $" + price
-        // variable width base on chunk length
-        ,
-        style: getStyleByLength(dataChunk.length)
-      }, String(item.date));
-    })
-  });
-});

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

@@ -1,308 +0,0 @@
-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. This will be removed in a future major release.
- * @deprecationExpectedRemoval v4
- */
-export const SparklineInteractive = /*#__PURE__*/memo(SparklineInteractiveWithGeneric);

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

@@ -1,116 +0,0 @@
-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

@@ -1,131 +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 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;