@coinbase/cds-mobile-visualization 0.0.0 → 3.3.0

package/esm/sparkline/__stories__/Sparkline.stories.js

@@ -0,0 +1,120 @@
+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 from 'react';
+import { Dimensions } from 'react-native';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { prices, pricesWithScalingFactor } from '@coinbase/cds-common/internal/data/prices';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { useSparklineArea } from '@coinbase/cds-common/visualizations/useSparklineArea';
+import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';
+import { Cell } from '@coinbase/cds-mobile/cells/Cell';
+import { CellMedia } from '@coinbase/cds-mobile/cells/CellMedia';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { HStack } from '@coinbase/cds-mobile/layout/HStack';
+import { VStack } from '@coinbase/cds-mobile/layout/VStack';
+import { TextBody } from '@coinbase/cds-mobile/typography/TextBody';
+import { TextHeadline } from '@coinbase/cds-mobile/typography/TextHeadline';
+import { Sparkline } from '../Sparkline';
+import { SparklineArea } from '../SparklineArea';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SparklineExample = _ref => {
+  let {
+    imageUrl,
+    name,
+    symbol,
+    color
+  } = _ref;
+  const dimensions = {
+    width: 64,
+    height: 20
+  };
+  const path = useSparklinePath(_extends({}, dimensions, {
+    data: prices
+  }));
+  return /*#__PURE__*/_jsx(Cell, {
+    detail: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx(Sparkline, _extends({}, dimensions, {
+        color: color,
+        path: path
+      })), /*#__PURE__*/_jsxs(VStack, {
+        alignContent: "flex-end",
+        alignItems: "flex-end",
+        justifyContent: "center",
+        paddingStart: 2,
+        children: [/*#__PURE__*/_jsx(TextBody, {
+          align: "end",
+          numberOfLines: 1,
+          children: "$2,874.49"
+        }), /*#__PURE__*/_jsx(TextBody, {
+          align: "end",
+          color: "fgMuted",
+          numberOfLines: 1,
+          children: "+36.08%"
+        })]
+      })]
+    }),
+    media: /*#__PURE__*/_jsx(CellMedia, {
+      source: imageUrl,
+      title: "Title",
+      type: "image"
+    }),
+    children: /*#__PURE__*/_jsxs(VStack, {
+      justifyContent: "center",
+      children: [/*#__PURE__*/_jsx(TextHeadline, {
+        ellipsize: "tail",
+        numberOfLines: 1,
+        children: name
+      }), /*#__PURE__*/_jsx(TextBody, {
+        ellipsize: "tail",
+        numberOfLines: 1,
+        children: symbol
+      })]
+    })
+  });
+};
+const SparklineScalingExample = props => {
+  const theme = useTheme();
+  const chartHorizontalGutter = theme.space[gutter];
+  const width = Dimensions.get('screen').width - chartHorizontalGutter * 2;
+  const dimensions = {
+    width,
+    height: 320
+  };
+  const path = useSparklinePath(_extends({}, dimensions, props));
+  const area = useSparklineArea(_extends({}, dimensions, props));
+  return /*#__PURE__*/_jsxs(VStack, {
+    children: [/*#__PURE__*/_jsxs(TextHeadline, {
+      ellipsize: "tail",
+      numberOfLines: 1,
+      children: ["Scale: ", props.yAxisScalingFactor]
+    }), /*#__PURE__*/_jsx(Sparkline, _extends({}, dimensions, {
+      color: "#F7931A",
+      path: path,
+      yAxisScalingFactor: props.yAxisScalingFactor,
+      children: props.fill && /*#__PURE__*/_jsx(SparklineArea, {
+        area: area
+      })
+    }))]
+  });
+};
+const PressableOpacityScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Sparkline",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        marginX: -2,
+        children: [/*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.btc)), /*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.eth)), /*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.xrp)), /*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.dai)), /*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.sushi))]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "SparklineWithScale",
+      children: pricesWithScalingFactor.map(item => /*#__PURE__*/_jsx(SparklineScalingExample, _extends({}, item), item.yAxisScalingFactor))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "SparklineWithScaleAndFill",
+      children: pricesWithScalingFactor.map(item => /*#__PURE__*/_jsx(SparklineScalingExample, _extends({}, item, {
+        fill: true
+      }), item.yAxisScalingFactor))
+    })]
+  });
+};
+export default PressableOpacityScreen;

package/esm/sparkline/__stories__/SparklineGradient.stories.js

@@ -0,0 +1,123 @@
+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 from 'react';
+import { Dimensions } from 'react-native';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { prices, pricesWithScalingFactor } from '@coinbase/cds-common/internal/data/prices';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { useSparklineArea } from '@coinbase/cds-common/visualizations/useSparklineArea';
+import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';
+import { Cell } from '@coinbase/cds-mobile/cells/Cell';
+import { CellMedia } from '@coinbase/cds-mobile/cells/CellMedia';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { VStack } from '@coinbase/cds-mobile/layout';
+import { TextBody, TextHeadline } from '@coinbase/cds-mobile/typography';
+import { SparklineArea } from '../SparklineArea';
+import { SparklineGradient } from '../SparklineGradient';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const height = 320;
+const SparklineGradientExample = _ref => {
+  let {
+    imageUrl,
+    name,
+    symbol,
+    color,
+    fill
+  } = _ref;
+  const theme = useTheme();
+  const chartHorizontalGutter = theme.space[gutter];
+  const width = Dimensions.get('screen').width - chartHorizontalGutter * 2;
+  const dimensions = {
+    width,
+    height
+  };
+  const path = useSparklinePath(_extends({}, dimensions, {
+    data: prices
+  }));
+  const area = useSparklineArea(_extends({}, dimensions, {
+    data: prices
+  }));
+  return /*#__PURE__*/_jsxs(VStack, {
+    children: [/*#__PURE__*/_jsx(Cell, {
+      media: /*#__PURE__*/_jsx(CellMedia, {
+        source: imageUrl,
+        type: "image"
+      }),
+      children: /*#__PURE__*/_jsxs(VStack, {
+        justifyContent: "center",
+        children: [/*#__PURE__*/_jsx(TextHeadline, {
+          ellipsize: "tail",
+          numberOfLines: 1,
+          children: name
+        }), /*#__PURE__*/_jsx(TextBody, {
+          ellipsize: "tail",
+          numberOfLines: 1,
+          children: symbol
+        })]
+      })
+    }), /*#__PURE__*/_jsx(SparklineGradient, _extends({}, dimensions, {
+      color: color,
+      path: path,
+      children: fill && /*#__PURE__*/_jsx(SparklineArea, {
+        area: area
+      })
+    }))]
+  });
+};
+const SparklineScalingExample = props => {
+  const theme = useTheme();
+  const chartHorizontalGutter = theme.space[gutter];
+  const width = Dimensions.get('screen').width - chartHorizontalGutter * 2;
+  const dimensions = {
+    width,
+    height
+  };
+  const path = useSparklinePath(_extends({}, dimensions, props));
+  const area = useSparklineArea(_extends({}, dimensions, props));
+  return /*#__PURE__*/_jsxs(VStack, {
+    children: [/*#__PURE__*/_jsxs(TextHeadline, {
+      ellipsize: "tail",
+      numberOfLines: 1,
+      children: ["Scale: ", props.yAxisScalingFactor]
+    }), /*#__PURE__*/_jsx(SparklineGradient, _extends({}, dimensions, {
+      color: "#F7931A",
+      path: path,
+      yAxisScalingFactor: props.yAxisScalingFactor,
+      children: props.fill && /*#__PURE__*/_jsx(SparklineArea, {
+        area: area
+      })
+    }))]
+  });
+};
+const PressableOpacityScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsxs(Example, {
+      title: "SparklineGradient",
+      children: [/*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.btc)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.eth)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.ltc)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.xrp)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.dai)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.sushi))]
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "SparklineGradientWithArea",
+      children: [/*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.btc, {
+        fill: true
+      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.eth, {
+        fill: true
+      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.ltc, {
+        fill: true
+      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.xrp, {
+        fill: true
+      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.dai, {
+        fill: true
+      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.sushi, {
+        fill: true
+      }))]
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "SparklineGradientWithScale",
+      children: pricesWithScalingFactor.map(item => /*#__PURE__*/_jsx(SparklineScalingExample, _extends({}, item), item.yAxisScalingFactor))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "SparklineGradientWithAreaAndScale",
+      children: pricesWithScalingFactor.map(item => /*#__PURE__*/_jsx(SparklineScalingExample, _extends({}, item, {
+        fill: true
+      }), item.yAxisScalingFactor))
+    })]
+  });
+};
+export default PressableOpacityScreen;

package/esm/sparkline/generateSparklineWithId.js

@@ -0,0 +1,6 @@
+import { cloneElement } from 'react';
+export function generateSparklineAreaWithId(id, children) {
+  return children ? /*#__PURE__*/cloneElement(children, {
+    patternId: id
+  }) : undefined;
+}

package/esm/sparkline/index.js

@@ -0,0 +1,5 @@
+export * from './Sparkline';
+export * from './sparkline-interactive/SparklineInteractive';
+export * from './sparkline-interactive-header/SparklineInteractiveHeader';
+export * from './SparklineArea';
+export * from './SparklineGradient';

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

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

@@ -0,0 +1,303 @@
+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,
+    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,
+              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))
+  });
+}
+
+// typescript doesn't understand the memo with the generic so it gets casted to a base react component
+export const SparklineInteractive = /*#__PURE__*/memo(SparklineInteractiveWithGeneric);