@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.js

@@ -1,565 +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, { useCallback, useMemo, useRef, useState } from 'react';
-import { TextInput } from 'react-native';
-import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
-import { IconButton } from '@coinbase/cds-mobile/buttons';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { Icon } from '@coinbase/cds-mobile/icons';
-import { Box, HStack } from '@coinbase/cds-mobile/layout';
-import { Text } from '@coinbase/cds-mobile/typography';
-import { SparklineInteractive } from '../../sparkline-interactive/SparklineInteractive';
-import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
-import { useSparklineInteractiveHeaderStyles } from '../useSparklineInteractiveHeaderStyles';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_PERIOD = 'day';
-const periods = [{
-  label: '1H',
-  value: 'hour'
-}, {
-  label: '1D',
-  value: 'day'
-}, {
-  label: '1W',
-  value: 'week'
-}, {
-  label: '1M',
-  value: 'month'
-}, {
-  label: '1Y',
-  value: 'year'
-}, {
-  label: 'All',
-  value: 'all'
-}];
-const periodsAlt = [{
-  label: '1 Std.',
-  value: 'hour'
-}, {
-  label: '1 Tag',
-  value: 'day'
-}, {
-  label: '1 Wo.',
-  value: 'week'
-}, {
-  label: '1 Mon.',
-  value: 'month'
-}, {
-  label: '1 Jahr',
-  value: 'year'
-}, {
-  label: 'All',
-  value: 'all'
-}];
-const subsetOfPeriods = [{
-  label: '1D',
-  value: 'day'
-}, {
-  label: '1M',
-  value: 'month'
-}, {
-  label: '1Y',
-  value: 'year'
-}];
-function numToLocaleString(num) {
-  return num.toLocaleString('en-US', {
-    maximumFractionDigits: 2
-  });
-}
-const getFormattingConfigForPeriod = period => {
-  switch (period) {
-    case 'hour':
-    case 'day':
-      return {
-        hour: 'numeric',
-        minute: 'numeric'
-      };
-    case 'week':
-    case 'month':
-      return {
-        month: 'numeric',
-        day: 'numeric'
-      };
-    case 'year':
-    case 'all':
-      return {
-        month: 'numeric',
-        year: 'numeric'
-      };
-  }
-};
-const getDateHoverOptions = period => {
-  switch (period) {
-    case 'hour':
-    case 'day':
-    case 'week':
-    case 'month':
-      return {
-        weekday: 'short',
-        month: 'short',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: 'numeric'
-      };
-    default:
-      return {
-        weekday: 'short',
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric'
-      };
-  }
-};
-const generateSubHead = (point, period, sparklineInteractiveData) => {
-  const data = sparklineInteractiveData[period];
-  const firstPoint = data[0];
-  const increase = point.value > firstPoint.value;
-  return {
-    percent: numToLocaleString(Math.abs((point.value - firstPoint.value) / firstPoint.value) * 100) + "%",
-    sign: increase ? 'upwardTrend' : 'downwardTrend',
-    variant: increase ? 'positive' : 'negative',
-    accessibilityLabel: "" + (increase ? 'up' : 'down'),
-    priceChange: "$" + numToLocaleString(Math.abs(point.value - firstPoint.value))
-  };
-};
-const SparklineInteractiveBuild = /*#__PURE__*/React.memo(props => {
-  const formatDateWithConfig = useCallback((value, period) => {
-    const config = getFormattingConfigForPeriod(period);
-    return value.toLocaleString('en-US', _extends({}, config));
-  }, []);
-  const formatHoverDate = useCallback((date, period) => {
-    return date.toLocaleString('en-US', _extends({}, getDateHoverOptions(period)));
-  }, []);
-  const formatMinMaxLabel = useCallback(amount => {
-    return "$" + numToLocaleString(parseInt(amount, 10));
-  }, []);
-  return /*#__PURE__*/_jsx(SparklineInteractive, _extends({
-    disableScrubbing: !__DEV__
-  }, props, {
-    defaultPeriod: props.defaultPeriod || DEFAULT_PERIOD,
-    formatDate: formatDateWithConfig,
-    formatHoverDate: !props.hideHoverDate ? formatHoverDate : undefined,
-    formatMinMaxLabel: formatMinMaxLabel,
-    periods: periods,
-    strokeColor: props.strokeColor
-  }));
-});
-function handlePress() {
-  // do nothing
-}
-const HeaderLabel = () => {
-  return /*#__PURE__*/_jsxs(HStack, {
-    alignItems: "center",
-    gap: 1,
-    paddingBottom: 0,
-    children: [/*#__PURE__*/_jsx(Icon, {
-      active: true,
-      name: "wallet",
-      size: "s"
-    }), /*#__PURE__*/_jsx(Text, {
-      font: "title3",
-      children: "CustomHeader"
-    })]
-  });
-};
-const SparklineInteractiveWithHeaderBuild = /*#__PURE__*/React.memo(props => {
-  var _props$defaultPeriod;
-  const {
-    data: sparklineData,
-    trailing,
-    labelNode,
-    compact
-  } = props;
-  const sparklineInteractiveData = sparklineData;
-  const headerRef = useRef(null);
-  const [currentPeriod, setCurrentPeriod] = useState((_props$defaultPeriod = props.defaultPeriod) != null ? _props$defaultPeriod : DEFAULT_PERIOD);
-  const data = sparklineInteractiveData[currentPeriod];
-  const lastPoint = data[data.length - 1];
-  const handleScrub = useCallback(_ref => {
-    var _headerRef$current;
-    let {
-      point,
-      period
-    } = _ref;
-    (_headerRef$current = headerRef.current) == null || _headerRef$current.update({
-      title: "$" + point.value.toLocaleString('en-US'),
-      subHead: generateSubHead(point, period, sparklineInteractiveData)
-    });
-  }, [sparklineInteractiveData]);
-  const handleScrubEnd = useCallback(() => {
-    var _headerRef$current2;
-    (_headerRef$current2 = headerRef.current) == null || _headerRef$current2.update({
-      title: "$" + numToLocaleString(lastPoint.value),
-      subHead: generateSubHead(lastPoint, currentPeriod, sparklineInteractiveData)
-    });
-  }, [currentPeriod, sparklineInteractiveData, lastPoint]);
-  const handleOnPeriodChanged = useCallback(period => {
-    var _headerRef$current3;
-    setCurrentPeriod(period);
-    const newData = sparklineInteractiveData[period];
-    const newLastPoint = newData[newData.length - 1];
-    (_headerRef$current3 = headerRef.current) == null || _headerRef$current3.update({
-      title: "$" + numToLocaleString(newLastPoint.value),
-      subHead: generateSubHead(newLastPoint, period, sparklineInteractiveData)
-    });
-  }, [sparklineInteractiveData]);
-  const header = /*#__PURE__*/_jsx(SparklineInteractiveHeader, {
-    ref: headerRef,
-    compact: compact,
-    defaultLabel: labelNode ? 'CustomHeader' : 'Bitcoin Price',
-    defaultSubHead: generateSubHead(lastPoint, currentPeriod, sparklineInteractiveData),
-    defaultTitle: "$" + numToLocaleString(lastPoint.value),
-    labelNode: labelNode,
-    trailing: trailing
-  });
-  return /*#__PURE__*/_jsx(SparklineInteractiveBuild, _extends({}, props, {
-    headerNode: header,
-    onPeriodChanged: handleOnPeriodChanged,
-    onScrub: handleScrub,
-    onScrubEnd: handleScrubEnd
-  }));
-});
-const SparklineInteractiveWithAltHeader = /*#__PURE__*/React.memo(props => {
-  var _props$defaultPeriod2;
-  const {
-    data: sparklineData,
-    trailing,
-    labelNode,
-    compact
-  } = props;
-  const sparklineInteractiveData = sparklineData;
-  const headerRef = useRef(null);
-  const [currentPeriod, setCurrentPeriod] = useState((_props$defaultPeriod2 = props.defaultPeriod) != null ? _props$defaultPeriod2 : DEFAULT_PERIOD);
-  const data = sparklineInteractiveData[currentPeriod];
-  const lastPoint = data[data.length - 1];
-  const handleScrub = useCallback(_ref2 => {
-    var _headerRef$current4;
-    let {
-      point,
-      period
-    } = _ref2;
-    (_headerRef$current4 = headerRef.current) == null || _headerRef$current4.update({
-      title: "$" + point.value.toLocaleString('en-US'),
-      subHead: generateSubHead(point, period, sparklineInteractiveData)
-    });
-  }, [sparklineInteractiveData]);
-  const handleScrubEnd = useCallback(() => {
-    var _headerRef$current5;
-    (_headerRef$current5 = headerRef.current) == null || _headerRef$current5.update({
-      title: "$" + numToLocaleString(lastPoint.value),
-      subHead: generateSubHead(lastPoint, currentPeriod, sparklineInteractiveData)
-    });
-  }, [currentPeriod, sparklineInteractiveData, lastPoint]);
-  const handleOnPeriodChanged = useCallback(period => {
-    var _headerRef$current6;
-    setCurrentPeriod(period);
-    const newData = sparklineInteractiveData[period];
-    const newLastPoint = newData[newData.length - 1];
-    (_headerRef$current6 = headerRef.current) == null || _headerRef$current6.update({
-      title: "$" + numToLocaleString(newLastPoint.value),
-      subHead: generateSubHead(newLastPoint, period, sparklineInteractiveData)
-    });
-  }, [sparklineInteractiveData]);
-  const header = /*#__PURE__*/_jsx(SparklineInteractiveHeader, {
-    ref: headerRef,
-    compact: compact,
-    defaultLabel: labelNode ? 'CustomHeader' : 'Bitcoin Price',
-    defaultSubHead: generateSubHead(lastPoint, currentPeriod, sparklineInteractiveData),
-    defaultTitle: "$" + numToLocaleString(lastPoint.value),
-    labelNode: labelNode,
-    trailing: trailing
-  });
-  const formatDateWithConfig = useCallback((value, period) => {
-    const config = getFormattingConfigForPeriod(period);
-    return value.toLocaleString('en-US', _extends({}, config));
-  }, []);
-  const formatHoverDate = useCallback((date, period) => {
-    return date.toLocaleString('en-US', _extends({}, getDateHoverOptions(period)));
-  }, []);
-  const formatMinMaxLabel = useCallback(amount => {
-    return "$" + numToLocaleString(parseInt(amount, 10));
-  }, []);
-  return /*#__PURE__*/_jsx(SparklineInteractive, _extends({
-    disableScrubbing: !__DEV__
-  }, props, {
-    defaultPeriod: props.defaultPeriod || DEFAULT_PERIOD,
-    formatDate: formatDateWithConfig,
-    formatHoverDate: !props.hideHoverDate ? formatHoverDate : undefined,
-    formatMinMaxLabel: formatMinMaxLabel,
-    headerNode: header,
-    onPeriodChanged: handleOnPeriodChanged,
-    onScrub: handleScrub,
-    onScrubEnd: handleScrubEnd,
-    periods: periodsAlt,
-    strokeColor: props.strokeColor
-  }));
-});
-const SparklineInteractiveWithSmallerPeriodSet = /*#__PURE__*/React.memo(props => {
-  var _props$defaultPeriod3;
-  const {
-    data: sparklineData,
-    trailing,
-    labelNode,
-    compact
-  } = props;
-  const sparklineInteractiveData = sparklineData;
-  const headerRef = useRef(null);
-  const [currentPeriod, setCurrentPeriod] = useState((_props$defaultPeriod3 = props.defaultPeriod) != null ? _props$defaultPeriod3 : DEFAULT_PERIOD);
-  const data = sparklineInteractiveData[currentPeriod];
-  const lastPoint = data[data.length - 1];
-  const handleScrub = useCallback(_ref3 => {
-    var _headerRef$current7;
-    let {
-      point,
-      period
-    } = _ref3;
-    (_headerRef$current7 = headerRef.current) == null || _headerRef$current7.update({
-      title: "$" + point.value.toLocaleString('en-US'),
-      subHead: generateSubHead(point, period, sparklineInteractiveData)
-    });
-  }, [sparklineInteractiveData]);
-  const handleScrubEnd = useCallback(() => {
-    var _headerRef$current8;
-    (_headerRef$current8 = headerRef.current) == null || _headerRef$current8.update({
-      title: "$" + numToLocaleString(lastPoint.value),
-      subHead: generateSubHead(lastPoint, currentPeriod, sparklineInteractiveData)
-    });
-  }, [currentPeriod, sparklineInteractiveData, lastPoint]);
-  const handleOnPeriodChanged = useCallback(period => {
-    var _headerRef$current9;
-    setCurrentPeriod(period);
-    const newData = sparklineInteractiveData[period];
-    const newLastPoint = newData[newData.length - 1];
-    (_headerRef$current9 = headerRef.current) == null || _headerRef$current9.update({
-      title: "$" + numToLocaleString(newLastPoint.value),
-      subHead: generateSubHead(newLastPoint, period, sparklineInteractiveData)
-    });
-  }, [sparklineInteractiveData]);
-  const header = /*#__PURE__*/_jsx(SparklineInteractiveHeader, {
-    ref: headerRef,
-    compact: compact,
-    defaultLabel: labelNode ? 'CustomHeader' : 'Bitcoin Price',
-    defaultSubHead: generateSubHead(lastPoint, currentPeriod, sparklineInteractiveData),
-    defaultTitle: "$" + numToLocaleString(lastPoint.value),
-    labelNode: labelNode,
-    trailing: trailing
-  });
-  const formatDateWithConfig = useCallback((value, period) => {
-    const config = getFormattingConfigForPeriod(period);
-    return value.toLocaleString('en-US', _extends({}, config));
-  }, []);
-  const formatHoverDate = useCallback((date, period) => {
-    return date.toLocaleString('en-US', _extends({}, getDateHoverOptions(period)));
-  }, []);
-  const formatMinMaxLabel = useCallback(amount => {
-    return "$" + numToLocaleString(parseInt(amount, 10));
-  }, []);
-  return /*#__PURE__*/_jsx(SparklineInteractive, _extends({
-    disableScrubbing: !__DEV__
-  }, props, {
-    defaultPeriod: props.defaultPeriod || DEFAULT_PERIOD,
-    formatDate: formatDateWithConfig,
-    formatHoverDate: !props.hideHoverDate ? formatHoverDate : undefined,
-    formatMinMaxLabel: formatMinMaxLabel,
-    headerNode: header,
-    onPeriodChanged: handleOnPeriodChanged,
-    onScrub: handleScrub,
-    onScrubEnd: handleScrubEnd,
-    periods: subsetOfPeriods,
-    strokeColor: props.strokeColor
-  }));
-});
-export const SparklineInteractiveHeaderWithCustomTitle = () => {
-  const headerRef = useRef(null);
-  const [currentPeriod, setCurrentPeriod] = useState('day');
-  const data = sparklineInteractiveData[currentPeriod];
-  const lastPoint = data[data.length - 1];
-  const titleRef = useRef(null);
-  const styles = useSparklineInteractiveHeaderStyles();
-  const handleScrub = useCallback(_ref4 => {
-    var _headerRef$current0, _titleRef$current;
-    let {
-      point,
-      period
-    } = _ref4;
-    const newTitle = "$" + point.value.toLocaleString('en-US');
-    (_headerRef$current0 = headerRef.current) == null || _headerRef$current0.update({
-      subHead: generateSubHead(point, period, sparklineInteractiveData)
-    });
-    (_titleRef$current = titleRef.current) == null || _titleRef$current.setNativeProps({
-      text: newTitle,
-      style: [styles.title(newTitle), {
-        color: 'green'
-      }]
-    });
-  }, [styles]);
-  const handleScrubEnd = useCallback(() => {
-    var _headerRef$current1, _titleRef$current2;
-    const newTitle = "$" + numToLocaleString(lastPoint.value);
-    (_headerRef$current1 = headerRef.current) == null || _headerRef$current1.update({
-      subHead: generateSubHead(lastPoint, currentPeriod, sparklineInteractiveData)
-    });
-    (_titleRef$current2 = titleRef.current) == null || _titleRef$current2.setNativeProps({
-      text: newTitle,
-      style: [styles.title(newTitle), {
-        color: 'green'
-      }]
-    });
-  }, [currentPeriod, lastPoint, styles]);
-  const handleOnPeriodChanged = useCallback(period => {
-    var _headerRef$current10, _titleRef$current3;
-    setCurrentPeriod(period);
-    const newData = sparklineInteractiveData[period];
-    const newLastPoint = newData[newData.length - 1];
-    const newTitle = "$" + numToLocaleString(newLastPoint.value);
-    (_headerRef$current10 = headerRef.current) == null || _headerRef$current10.update({
-      subHead: generateSubHead(newLastPoint, period, sparklineInteractiveData)
-    });
-    (_titleRef$current3 = titleRef.current) == null || _titleRef$current3.setNativeProps({
-      text: newTitle,
-      style: [styles.title(newTitle), {
-        color: 'green'
-      }]
-    });
-  }, [styles]);
-  const defaultTitleStyle = useMemo(() => [styles.title("$" + numToLocaleString(lastPoint.value)), {
-    color: 'green'
-  }], [lastPoint.value, styles]);
-  const RenderedDefaultTitle = /*#__PURE__*/_jsx(TextInput, {
-    ref: titleRef,
-    defaultValue: "$" + numToLocaleString(lastPoint.value),
-    editable: false,
-    pointerEvents: "none",
-    style: defaultTitleStyle,
-    testID: "SparklineInteractiveHeaderTitle"
-  });
-  const header = /*#__PURE__*/_jsx(SparklineInteractiveHeader, {
-    ref: headerRef,
-    defaultLabel: "Bitcoin Price",
-    defaultSubHead: generateSubHead(lastPoint, currentPeriod, sparklineInteractiveData),
-    defaultTitle: RenderedDefaultTitle
-  });
-  return /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
-    data: sparklineInteractiveData,
-    headerNode: header,
-    onPeriodChanged: handleOnPeriodChanged,
-    onScrub: handleScrub,
-    onScrubEnd: handleScrubEnd,
-    strokeColor: "#F7931A"
-  });
-};
-const SparklineInteractiveHeaderScreen = () => {
-  const trailing = useMemo(() => {
-    return /*#__PURE__*/_jsxs(HStack, {
-      gap: 1,
-      children: [/*#__PURE__*/_jsx(IconButton, {
-        active: true,
-        accessibilityLabel: "Star",
-        feedback: "heavy",
-        name: "star",
-        onPress: handlePress,
-        variant: "secondary"
-      }), /*#__PURE__*/_jsx(IconButton, {
-        accessibilityLabel: "Share",
-        feedback: "heavy",
-        name: "share",
-        onPress: handlePress,
-        variant: "secondary"
-      })]
-    });
-  }, []);
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "SparklineInteractive Header Example"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveWithHeaderBuild, {
-          data: sparklineInteractiveData,
-          strokeColor: "#F7931A"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "SparklineInteractive Header Trailing"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveWithHeaderBuild, {
-          data: sparklineInteractiveData,
-          strokeColor: "#F7931A",
-          trailing: trailing
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "SparklineInteractive Header Custom Label"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveWithHeaderBuild, {
-          data: sparklineInteractiveData,
-          labelNode: /*#__PURE__*/_jsx(HeaderLabel, {}),
-          strokeColor: "#F7931A"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "SparklineInteractive Header Example with AltHeader"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveWithAltHeader, {
-          data: sparklineInteractiveData,
-          strokeColor: "#F7931A"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "SparklineInteractive Header Example with Smaller Period Set"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveWithSmallerPeriodSet, {
-          data: sparklineInteractiveData,
-          strokeColor: "#F7931A"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "SparklineInteractive Header Example with No Period Set"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveWithHeaderBuild, {
-          hidePeriodSelector: true,
-          data: sparklineInteractiveData,
-          strokeColor: "#F7931A"
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      padding: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          paddingX: 3,
-          paddingY: 3,
-          children: "SparklineInteractive Header Custom Title"
-        }), /*#__PURE__*/_jsx(SparklineInteractiveHeaderWithCustomTitle, {})]
-      })
-    })]
-  });
-};
-export default SparklineInteractiveHeaderScreen;

package/esm/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.js

@@ -1,117 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { StyleSheet } from 'react-native';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { getAdjustedFontScale } from '@coinbase/cds-mobile/utils/getAdjustedFontScale';
-// The – character width is larger than the width of the + character.
-// To prevent layout jank and jumping around we set a fixed width for
-// this component. Because of accessible font scaling we first get the
-// active font size and then calculate the character width, which for the –
-// character is 0.6em.
-const useSubIconWidth = () => {
-  const theme = useTheme();
-  const label1FontSize = theme.fontSize.label1;
-  return useCallback(color => {
-    const activeWidth = label1FontSize * 0.6;
-    // Hide if color is muted aka 0% change so icon is flushed to far left
-    return color === 'foregroundMuted' ? 0 : activeWidth;
-  }, [label1FontSize]);
-};
-const variantColorMap = {
-  positive: 'fgPositive',
-  negative: 'fgNegative',
-  foregroundMuted: 'fgMuted'
-};
-export const styles = StyleSheet.create({
-  // Inputs need to have these styles to make it appear as Text component
-  inputReset: {
-    padding: 0,
-    margin: 0,
-    backgroundColor: 'transparent',
-    overflow: 'visible',
-    lineHeight: undefined
-  },
-  fullWidth: {
-    width: '100%'
-  },
-  tabularNumbers: {
-    fontVariant: ['tabular-nums']
-  }
-});
-export function useSparklineInteractiveHeaderStyles() {
-  const theme = useTheme();
-  const typography = {
-    title1: {
-      fontSize: theme.fontSize.title1,
-      lineHeight: theme.lineHeight.title1,
-      fontFamily: theme.fontFamily.title1
-    },
-    label1: {
-      fontSize: theme.fontSize.label1,
-      lineHeight: theme.lineHeight.label1,
-      fontFamily: theme.fontFamily.label1
-    },
-    label2: {
-      fontSize: theme.fontSize.label2,
-      lineHeight: theme.lineHeight.label2,
-      fontFamily: theme.fontFamily.label2
-    }
-  };
-  const fontSize = {
-    title1: typography.title1.fontSize
-  };
-  const lineHeight = {
-    title1: typography.title1.lineHeight,
-    label1: typography.label1.lineHeight
-  };
-  const getSubIconWidth = useSubIconWidth();
-  return useMemo(() => {
-    return {
-      // TITLE STYLES - the large price text
-      title: text => {
-        const {
-          length
-        } = text;
-        // We manually decrease fontSize if length of new value
-        // is greater than 12 characters long
-        const {
-          fontSize: titleFontSize
-        } = getAdjustedFontScale({
-          fontSize: fontSize.title1
-        }, length, 12);
-        return [typography.title1, styles.tabularNumbers, styles.inputReset, styles.fullWidth, {
-          fontSize: titleFontSize,
-          color: theme.color.fg,
-          height: lineHeight.title1
-        }];
-      },
-      // LABEL STYLES - the small text above price
-      label: [typography.label1, styles.inputReset, styles.fullWidth, {
-        height: lineHeight.label1,
-        color: theme.color.fgMuted
-      }],
-      // SUBHEAD ICON STYLES - the + or - after price and in front of percent change)
-      subHeadIcon: color => [typography.label1, styles.inputReset, {
-        color: theme.color[variantColorMap[color]],
-        width: getSubIconWidth(color),
-        marginRight: theme.space[0.5] / 2,
-        textAlign: 'left'
-      }],
-      // SUBHEAD STYLES - the percent change text
-      subHead: function (color, useFullWidth) {
-        if (useFullWidth === void 0) {
-          useFullWidth = true;
-        }
-        return [typography.label1, styles.tabularNumbers, ...(useFullWidth ? [styles.fullWidth] : [{
-          width: 'auto'
-        }]), styles.inputReset, {
-          color: theme.color[variantColorMap[color]]
-        }];
-      },
-      subHeadAccessory: () => [typography.label2, styles.inputReset, {
-        color: theme.color.fgMuted,
-        marginLeft: theme.space[0.5],
-        textAlign: 'left'
-      }]
-    };
-  }, [typography.label1, typography.title1, typography.label2, lineHeight.label1, lineHeight.title1, theme.color, theme.space, fontSize.title1, getSubIconWidth]);
-}