@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/esm/visualizations/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 * as interpolate from 'd3-interpolate-path';
+import { useTheme } from '../../../hooks/useTheme';
+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/visualizations/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-mobile/visualizations/sparkline'"],
+  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));
+  }
+});