@coinbase/cds-web-visualization 3.4.0-beta.2 → 3.4.0-beta.21

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -0,0 +1,154 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { m as motion, useAnimate } from 'framer-motion';
+import { useCartesianChartContext } from '../ChartProvider';
+import { defaultTransition, getTransition, instantTransition, projectPoint } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultRadius = 5;
+const defaultStrokeWidth = 2;
+const defaultStroke = 'var(--color-bg)';
+const pulseOpacityStart = 0.5;
+const pulseOpacityEnd = 0;
+const pulseRadiusStartMultiplier = 2;
+const pulseRadiusEndMultiplier = 3;
+const defaultPulseTransition = {
+  duration: 1.6,
+  ease: [0.0, 0.0, 0.0, 1.0]
+};
+const defaultPulseRepeatDelay = 0.4;
+export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    seriesId,
+    color: colorProp,
+    dataX,
+    dataY,
+    isIdle,
+    idlePulse,
+    animate: animateProp,
+    transitions,
+    opacity = 1,
+    radius = defaultRadius,
+    stroke = defaultStroke,
+    strokeWidth = defaultStrokeWidth,
+    className,
+    style,
+    testID = "".concat(seriesId, "-beacon")
+  } = _ref;
+  const [scope, animateFn] = useAnimate();
+  const {
+    animate: animateContext,
+    getSeries,
+    getXScale,
+    getYScale,
+    drawingArea
+  } = useCartesianChartContext();
+  const animate = animateProp !== null && animateProp !== void 0 ? animateProp : animateContext;
+  const targetSeries = getSeries(seriesId);
+  const xScale = getXScale();
+  const yScale = getYScale(targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.yAxisId);
+  const color = useMemo(() => {
+    var _ref2;
+    return (_ref2 = colorProp !== null && colorProp !== void 0 ? colorProp : targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.color) !== null && _ref2 !== void 0 ? _ref2 : 'var(--color-fgPrimary)';
+  }, [colorProp, targetSeries]);
+  const prevIsIdle = usePreviousValue(isIdle);
+  const isIdleTransition = prevIsIdle !== undefined && isIdle !== prevIsIdle;
+  const updateTransition = useMemo(() => {
+    if (isIdleTransition) return instantTransition;
+    if (!isIdle) return instantTransition;
+    return getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.update, animate, defaultTransition);
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.update, isIdle, animate, isIdleTransition]);
+  const pulseTransition = useMemo(() => {
+    var _transitions$pulse;
+    return (_transitions$pulse = transitions === null || transitions === void 0 ? void 0 : transitions.pulse) !== null && _transitions$pulse !== void 0 ? _transitions$pulse : defaultPulseTransition;
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.pulse]);
+  const pulseRepeatDelay = useMemo(() => {
+    var _transitions$pulseRep;
+    return (_transitions$pulseRep = transitions === null || transitions === void 0 ? void 0 : transitions.pulseRepeatDelay) !== null && _transitions$pulseRep !== void 0 ? _transitions$pulseRep : defaultPulseRepeatDelay;
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.pulseRepeatDelay]);
+  const pixelCoordinate = useMemo(() => {
+    if (!xScale || !yScale) return;
+    return projectPoint({
+      x: dataX,
+      y: dataY,
+      xScale,
+      yScale
+    });
+  }, [dataX, dataY, xScale, yScale]);
+  const pulseRadiusStart = radius * pulseRadiusStartMultiplier;
+  const pulseRadiusEnd = radius * pulseRadiusEndMultiplier;
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      // Only pulse when idle and idlePulse is not enabled
+      if (isIdle && !idlePulse && scope.current) {
+        animateFn(scope.current, {
+          opacity: [pulseOpacityStart, pulseOpacityEnd],
+          r: [pulseRadiusStart, pulseRadiusEnd]
+        }, pulseTransition);
+      }
+    }
+  }), [isIdle, idlePulse, scope, animateFn, pulseTransition, pulseRadiusStart, pulseRadiusEnd]);
+
+  // Create continuous pulse transition by repeating the base pulse transition with delay
+  const continuousPulseTransition = useMemo(() => _objectSpread(_objectSpread({}, pulseTransition), {}, {
+    repeat: Infinity,
+    repeatDelay: pulseRepeatDelay
+  }), [pulseTransition, pulseRepeatDelay]);
+  const shouldPulse = isIdle && idlePulse;
+  const isWithinDrawingArea = useMemo(() => {
+    if (!pixelCoordinate) return false;
+    return pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
+  }, [pixelCoordinate, drawingArea]);
+  if (!pixelCoordinate) return;
+  const pulseCircle = /*#__PURE__*/_jsx(motion.circle, {
+    ref: scope,
+    animate: shouldPulse ? {
+      opacity: [pulseOpacityStart, pulseOpacityEnd],
+      r: [pulseRadiusStart, pulseRadiusEnd],
+      transition: continuousPulseTransition
+    } : {
+      opacity: pulseOpacityEnd,
+      r: pulseRadiusStart
+    },
+    cx: 0,
+    cy: 0,
+    "data-testid": "".concat(testID, "-pulse"),
+    fill: color,
+    initial: {
+      opacity: shouldPulse ? pulseOpacityStart : pulseOpacityEnd,
+      r: pulseRadiusStart
+    }
+  });
+  return /*#__PURE__*/_jsxs("g", {
+    "data-testid": testID,
+    opacity: isWithinDrawingArea ? opacity : 0,
+    children: [isIdle && /*#__PURE__*/_jsx(motion.g, {
+      animate: {
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y
+      },
+      initial: false,
+      transition: updateTransition,
+      children: pulseCircle
+    }), /*#__PURE__*/_jsx(motion.circle, {
+      animate: {
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y
+      },
+      className: className,
+      cx: pixelCoordinate.x,
+      cy: pixelCoordinate.y,
+      fill: color,
+      initial: false,
+      r: radius,
+      stroke: stroke,
+      strokeWidth: strokeWidth,
+      style: style,
+      transition: updateTransition
+    })]
+  });
+}));

package/esm/chart/scrubber/DefaultScrubberBeaconLabel.js

@@ -0,0 +1,57 @@
+const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label", "transition", "y"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo } from 'react';
+import { m as motion } from 'framer-motion';
+import { ChartText } from '../text';
+import { jsx as _jsx } from "react/jsx-runtime";
+const labelVerticalInset = 3.5;
+const labelHorizontalInset = 4;
+/**
+ * DefaultScrubberBeaconLabel is a special instance of ChartText used to label a series' scrubber beacon (i.e. a point on the series pinned to the scrubber position).
+ */
+export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      background = 'var(--color-bg',
+      color = 'var(--color-fgPrimary)',
+      elevated = true,
+      borderRadius = 4,
+      font = 'label1',
+      verticalAlignment = 'middle',
+      inset = {
+        left: labelHorizontalInset,
+        right: labelHorizontalInset,
+        top: labelVerticalInset,
+        bottom: labelVerticalInset
+      },
+      label,
+      transition,
+      y
+    } = _ref,
+    chartTextProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(motion.g, {
+    animate: {
+      y
+    },
+    initial: false,
+    transition: transition,
+    children: /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
+      disableRepositioning: true,
+      background: background,
+      borderRadius: borderRadius,
+      color: color,
+      elevated: elevated,
+      font: font,
+      inset: inset,
+      verticalAlignment: verticalAlignment,
+      y: transition ? 0 : y
+    }, chartTextProps), {}, {
+      children: label
+    }))
+  });
+});

package/esm/chart/scrubber/{ScrubberBeaconLabel.js → DefaultScrubberLabel.js}

@@ -1,4 +1,4 @@
-const _excluded = ["background", "color", "elevation", "borderRadius", "font", "verticalAlignment"];
+const _excluded = ["verticalAlignment", "dy"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -7,27 +7,24 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo } from 'react';
-import { ChartText } from '../text';
+import { useCartesianChartContext } from '../ChartProvider';
+import { DefaultReferenceLineLabel } from '../line';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * The ScrubberBeaconLabel is a special instance of ChartText used to label a series' scrubber beacon (i.e. a point on the series pinned to the scrubber position).
+ * DefaultScrubberLabel is the default label component for the scrubber line.
+ * It will center the label vertically with the top available area.
  */
-export const ScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
+export const DefaultScrubberLabel = /*#__PURE__*/memo(_ref => {
   let {
-      background = 'white',
-      color = 'var(--color-fgPrimary)',
-      elevation = background !== undefined ? 1 : undefined,
-      borderRadius = background !== undefined ? 4 : undefined,
-      font = 'label1',
-      verticalAlignment = 'middle'
+      verticalAlignment = 'middle',
+      dy
     } = _ref,
-    chartTextProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(ChartText, _objectSpread({
-    background: background,
-    borderRadius: borderRadius,
-    color: color,
-    elevation: elevation,
-    font: font,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    drawingArea
+  } = useCartesianChartContext();
+  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _objectSpread({
+    dy: dy !== null && dy !== void 0 ? dy : -0.5 * drawingArea.y,
     verticalAlignment: verticalAlignment
-  }, chartTextProps));
+  }, props));
 });