@coinbase/cds-mobile-visualization 0.0.0 → 3.3.0

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

@@ -0,0 +1,124 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { periodLabelMap } from '@coinbase/cds-common/tokens/sparkline';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { useHorizontallyScrollingPressables } from '@coinbase/cds-mobile/hooks/useHorizontallyScrollingPressables';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Box } from '@coinbase/cds-mobile/layout/Box';
+import { HStack } from '@coinbase/cds-mobile/layout/HStack';
+import { OverflowGradient } from '@coinbase/cds-mobile/layout/OverflowGradient';
+import { Pressable } from '@coinbase/cds-mobile/system/Pressable';
+import { TextLabel1 } from '@coinbase/cds-mobile/typography';
+import { Haptics } from '@coinbase/cds-mobile/utils/haptics';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function SparklineInteractivePeriodWithGeneric(_ref) {
+  var _periodLabelMap$perio;
+  let {
+    period,
+    selectedPeriod,
+    setSelectedPeriod,
+    getLayoutHandler,
+    color
+  } = _ref;
+  const isSelected = period.value === selectedPeriod;
+  const periodLabel = (_periodLabelMap$perio = periodLabelMap[period.label]) != null ? _periodLabelMap$perio : period.label;
+  const periodHint = useMemo(() => isSelected ? "Currently showing data for the " + periodLabel + " timeframe" : "Show data for the " + periodLabel + " timeframe", [isSelected, periodLabel]);
+  const handleOnPress = useCallback(() => {
+    void Haptics.lightImpact();
+    setSelectedPeriod(period.value);
+  }, [period, setSelectedPeriod]);
+  const theme = useTheme();
+  const textStyle = useMemo(() => ({
+    color: isSelected ? color : theme.color.fgMuted
+  }), [color, isSelected, theme.color.fgMuted]);
+  const accessibilityState = useMemo(() => ({
+    selected: isSelected
+  }), [isSelected]);
+  return /*#__PURE__*/_jsx(Box, {
+    alignItems: "center",
+    justifyContent: "center",
+    onLayout: getLayoutHandler(period.value),
+    paddingY: 2,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      accessibilityHint: periodHint,
+      accessibilityLabel: periodLabel,
+      accessibilityState: accessibilityState,
+      background: isSelected ? 'bgPrimaryWash' : 'bg',
+      borderColor: "transparent",
+      borderRadius: 1000,
+      onPress: handleOnPress,
+      children: /*#__PURE__*/_jsx(TextLabel1, {
+        paddingX: 2,
+        paddingY: 1,
+        style: textStyle,
+        children: period.label
+      })
+    })
+  }, period.value);
+}
+const periodSelectorStyles = StyleSheet.create({
+  scrollViewContainer: {
+    flexGrow: 1
+  },
+  hStackContainer: {
+    flex: 1
+  }
+});
+const SparklineInteractivePeriod = /*#__PURE__*/memo(SparklineInteractivePeriodWithGeneric);
+export const SparklineInteractivePeriodSelector = _ref2 => {
+  let {
+    selectedPeriod,
+    setSelectedPeriod,
+    periods,
+    color
+  } = _ref2;
+  const theme = useTheme();
+  const accessibleForeground = color !== 'auto' ? color : getAccessibleColor({
+    background: theme.color.bg,
+    foreground: 'auto'
+  });
+  const {
+    markerOpacity
+  } = useSparklineInteractiveContext();
+  const {
+    scrollRef,
+    isScrollContentOverflowing,
+    isScrollContentOffscreenRight,
+    handleScroll,
+    handleScrollContainerLayout,
+    handleScrollContentSizeChange,
+    getPressableLayoutHandler
+  } = useHorizontallyScrollingPressables(selectedPeriod);
+  const opacity = markerOpacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0]
+  });
+  return /*#__PURE__*/_jsxs(Box, {
+    animated: true,
+    background: "bg",
+    opacity: opacity,
+    children: [/*#__PURE__*/_jsx(ScrollView, {
+      ref: scrollRef,
+      horizontal: true,
+      contentContainerStyle: periodSelectorStyles.scrollViewContainer,
+      onContentSizeChange: handleScrollContentSizeChange,
+      onLayout: handleScrollContainerLayout,
+      onScroll: handleScroll,
+      scrollEventThrottle: 1,
+      showsHorizontalScrollIndicator: false,
+      children: /*#__PURE__*/_jsx(HStack, {
+        justifyContent: "space-between",
+        padding: 0,
+        style: periodSelectorStyles.hStackContainer,
+        children: periods.map(period => /*#__PURE__*/_jsx(SparklineInteractivePeriod, {
+          color: accessibleForeground,
+          getLayoutHandler: getPressableLayoutHandler,
+          period: period,
+          selectedPeriod: selectedPeriod,
+          setSelectedPeriod: setSelectedPeriod
+        }, period.value))
+      })
+    }), isScrollContentOverflowing && isScrollContentOffscreenRight && /*#__PURE__*/_jsx(OverflowGradient, {})]
+  });
+};

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

@@ -0,0 +1,80 @@
+import React, { createContext, memo, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+import { makeMutable, useSharedValue } from 'react-native-reanimated';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { noop } from '@coinbase/cds-utils';
+import { useOpacityAnimation } from './useOpacityAnimation';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SparklineInteractiveContext = /*#__PURE__*/createContext({
+  isFallbackVisible: true,
+  markerXPosition: makeMutable(0),
+  markerGestureState: makeMutable(0),
+  showFallback: noop,
+  hideFallback: noop,
+  chartOpacity: new Animated.Value(0),
+  animateChartIn: noop,
+  markerOpacity: new Animated.Value(0),
+  animateMarkerIn: noop,
+  animateMarkerOut: noop,
+  minMaxOpacity: new Animated.Value(0),
+  animateMinMaxIn: noop,
+  animateMinxMaxOut: noop,
+  hoverDateOpacity: new Animated.Value(0),
+  animateHoverDateIn: noop,
+  animateHoverDateOut: noop,
+  compact: false,
+  gutter
+});
+export const SparklineInteractiveProvider = /*#__PURE__*/memo(_ref => {
+  let {
+    children,
+    compact = false,
+    gutter: propGutter
+  } = _ref;
+  const [isFallbackVisible, setIsFallbackVisible] = useState(true);
+  const markerXPosition = useSharedValue(-1);
+  const markerGestureState = useSharedValue(0);
+  const [chartOpacity, animateChartIn, animateChartOut] = useOpacityAnimation();
+  const [markerOpacity, animateMarkerIn, animateMarkerOut] = useOpacityAnimation();
+  const [minMaxOpacity, animateMinMaxIn, animateMinxMaxOut] = useOpacityAnimation();
+  const [hoverDateOpacity, animateHoverDateIn, animateHoverDateOut] = useOpacityAnimation();
+  const chartGutter = useRef(propGutter != null ? propGutter : gutter).current;
+  const showFallback = useCallback(() => {
+    animateChartOut.start();
+    setIsFallbackVisible(true);
+  }, [animateChartOut]);
+  const hideFallback = useCallback(() => {
+    animateChartIn.start();
+    animateMinMaxIn.start();
+    setIsFallbackVisible(false);
+  }, [animateChartIn, animateMinMaxIn]);
+  const sparklineProviderVal = useMemo(() => {
+    return {
+      isFallbackVisible,
+      markerXPosition,
+      markerGestureState,
+      showFallback,
+      hideFallback,
+      chartOpacity,
+      animateChartIn,
+      markerOpacity,
+      animateMarkerIn,
+      animateMarkerOut,
+      minMaxOpacity,
+      animateMinMaxIn,
+      animateMinxMaxOut,
+      hoverDateOpacity,
+      animateHoverDateIn,
+      animateHoverDateOut,
+      compact,
+      gutter: chartGutter
+    };
+  }, [animateChartIn, animateHoverDateIn, animateHoverDateOut, animateMarkerIn, animateMarkerOut, animateMinMaxIn, animateMinxMaxOut, chartOpacity, compact, hideFallback, hoverDateOpacity, isFallbackVisible, markerGestureState, markerOpacity, markerXPosition, minMaxOpacity, showFallback, chartGutter]);
+  return /*#__PURE__*/_jsx(SparklineInteractiveContext.Provider, {
+    value: sparklineProviderVal,
+    children: children
+  });
+});
+export function useSparklineInteractiveContext() {
+  return useContext(SparklineInteractiveContext);
+}

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

@@ -0,0 +1,109 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { G, Path, Svg } from 'react-native-svg';
+import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
+import { useTimeseriesPaths } from '@coinbase/cds-common/visualizations/useTimeseriesPaths';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import * as interpolate from 'd3-interpolate-path';
+import { useInterruptiblePathAnimation } from './useInterruptiblePathAnimation';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TimeseriesPath = /*#__PURE__*/memo(_ref => {
+  let {
+    timeseries,
+    lineFn,
+    initialPath,
+    onRender,
+    areaFn
+  } = _ref;
+  const theme = useTheme();
+  const pathRef = useRef(null);
+  const {
+    strokeColor
+  } = timeseries;
+  const lineColor = strokeColor !== 'auto' ? strokeColor : getAccessibleColor({
+    background: theme.color.bg,
+    foreground: 'auto',
+    usage: 'graphic'
+  });
+  const newPath = useMemo(() => lineFn(timeseries.points), [lineFn, timeseries.points]);
+  const newArea = useMemo(() => onRender ? areaFn(timeseries.points) : null, [areaFn, onRender, timeseries.points]);
+  const pathInterpolator = useMemo(() => interpolate.interpolatePath(initialPath, newPath), [initialPath, newPath]);
+  const animationListener = useCallback(_ref2 => {
+    var _pathRef$current;
+    let {
+      value
+    } = _ref2;
+    const val = Number(value.toFixed(4));
+    // 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.
+
+    (_pathRef$current = pathRef.current) == null || _pathRef$current.setNativeProps({
+      d: pathInterpolator(val)
+    });
+  }, [pathInterpolator]);
+  const updatePathWithoutAnimation = useCallback(() => {
+    var _pathRef$current2;
+    // 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.
+
+    (_pathRef$current2 = pathRef.current) == null || _pathRef$current2.setNativeProps({
+      d: pathInterpolator(1)
+    });
+  }, [pathInterpolator]);
+  const playAnimation = useInterruptiblePathAnimation({
+    animationListener,
+    onInterrupt: updatePathWithoutAnimation,
+    ignoreMinMax: true
+  });
+  useEffect(() => {
+    playAnimation();
+    onRender == null || onRender({
+      path: newPath,
+      area: newArea
+    });
+  }, [newArea, newPath, onRender, pathInterpolator, playAnimation]);
+  return /*#__PURE__*/_jsx(Path, {
+    ref: pathRef,
+    d: initialPath,
+    stroke: lineColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: borderWidth
+  });
+});
+export const SparklineInteractiveTimeseriesPaths = /*#__PURE__*/memo(_ref3 => {
+  let {
+    data,
+    width,
+    height,
+    initialPath,
+    onRender
+  } = _ref3;
+  const {
+    lineFn,
+    areaFn
+  } = useTimeseriesPaths({
+    data,
+    width,
+    height
+  });
+  const translateProps = useMemo(() => getSparklineTransform(width, height), [width, height]);
+  const paths = data.map((timeseries, index) => {
+    return /*#__PURE__*/_jsx(TimeseriesPath, {
+      areaFn: areaFn,
+      initialPath: initialPath,
+      lineFn: lineFn,
+      onRender: index === 0 ? onRender : undefined,
+      timeseries: timeseries
+    }, timeseries.id);
+  });
+  return /*#__PURE__*/_jsx(Svg, {
+    height: height,
+    width: width,
+    children: /*#__PURE__*/_jsx(G, _extends({}, translateProps, {
+      children: paths
+    }))
+  });
+});

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

@@ -0,0 +1,85 @@
+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 { figma } from '@figma/code-connect';
+import { SparklineInteractive } from '../SparklineInteractive';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(SparklineInteractive, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=320-14858&m=dev', {
+  imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  props: {
+    compact: figma.boolean('compact'),
+    disableScrubbing: figma.boolean('scrubbing', {
+      false: true,
+      true: false
+    })
+  },
+  example: props => {
+    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 data = {
+      hour: [],
+      day: [{
+        value: 49259.38,
+        date: new Date('2021-12-05T04:00:00.000Z')
+      }, {
+        value: 49163.79,
+        date: new Date('2021-12-05T04:05:00.000Z')
+      }, {
+        value: 49146.66,
+        date: new Date('2021-12-05T04:10:00.000Z')
+      }, {
+        value: 49083.92,
+        date: new Date('2021-12-05T04:15:00.000Z')
+      }, {
+        value: 49115.3,
+        date: new Date('2021-12-05T04:20:00.000Z')
+      }, {
+        value: 48992.14,
+        date: new Date('2021-12-05T04:25:00.000Z')
+      }, {
+        value: 49075.75,
+        date: new Date('2021-12-05T04:30:00.000Z')
+      }, {
+        value: 49025.78,
+        date: new Date('2021-12-05T04:35:00.000Z')
+      }, {
+        value: 49066.23,
+        date: new Date('2021-12-05T04:40:00.000Z')
+      }, {
+        value: 49247.82,
+        date: new Date('2021-12-05T04:45:00.000Z')
+      }],
+      week: [],
+      month: [],
+      year: [],
+      all: []
+    };
+    return /*#__PURE__*/_jsx(SparklineInteractive, _extends({
+      data: data,
+      defaultPeriod: "day",
+      formatDate: date => date.toLocaleString('en-US', {
+        timeZone: 'America/New_York',
+        hour: 'numeric',
+        minute: 'numeric'
+      }),
+      periods: periods,
+      strokeColor: "#cb51bb"
+    }, props));
+  }
+});