@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

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

@@ -1,109 +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, { 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

@@ -1,85 +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 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-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));
-  }
-});