@coinbase/cds-mobile-visualization 0.0.0 → 3.3.0

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

@@ -0,0 +1,555 @@
+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 { TextTitle3 } from '@coinbase/cds-mobile/typography/TextTitle3';
+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(TextTitle3, {
+      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,
+        feedback: "heavy",
+        name: "star",
+        onPress: handlePress,
+        variant: "secondary"
+      }), /*#__PURE__*/_jsx(IconButton, {
+        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(TextTitle3, {
+          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(TextTitle3, {
+          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(TextTitle3, {
+          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(TextTitle3, {
+          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(TextTitle3, {
+          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(TextTitle3, {
+          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(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "SparklineInteractive Header Custom Title"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveHeaderWithCustomTitle, {})]
+      })
+    })]
+  });
+};
+export default SparklineInteractiveHeaderScreen;

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

@@ -0,0 +1,117 @@
+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]);
+}