@coinbase/cds-web-visualization 3.4.0-beta.1 → 3.4.0-beta.10

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -0,0 +1,155 @@
+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 { m as motion, useAnimate } from 'framer-motion';
+import { useCartesianChartContext } from '../ChartProvider';
+import { defaultTransition, projectPoint } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const radius = 5;
+const strokeWidth = 2;
+const pulseOpacityStart = 0.5;
+const pulseOpacityEnd = 0;
+const pulseRadiusStart = 10;
+const pulseRadiusEnd = 15;
+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,
+    transitions,
+    opacity = 1,
+    className,
+    style,
+    testID
+  } = _ref;
+  const [scope, animate] = useAnimate();
+  const {
+    getSeries,
+    getXScale,
+    getYScale,
+    drawingArea
+  } = useCartesianChartContext();
+  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 updateTransition = useMemo(() => {
+    var _transitions$update;
+    return (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : defaultTransition;
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.update]);
+  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]);
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      // Only pulse when idle and idlePulse is not enabled
+      if (isIdle && !idlePulse && scope.current) {
+        animate(scope.current, {
+          opacity: [pulseOpacityStart, pulseOpacityEnd],
+          r: [pulseRadiusStart, pulseRadiusEnd]
+        }, pulseTransition);
+      }
+    }
+  }), [isIdle, idlePulse, scope, animate, pulseTransition]);
+
+  // 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;
+  if (isIdle) {
+    return /*#__PURE__*/_jsxs("g", {
+      "data-testid": testID,
+      opacity: isWithinDrawingArea ? opacity : 0,
+      children: [/*#__PURE__*/_jsx(motion.g, {
+        animate: {
+          x: pixelCoordinate.x,
+          y: pixelCoordinate.y
+        },
+        initial: false,
+        transition: updateTransition,
+        children: /*#__PURE__*/_jsx(motion.circle, {
+          ref: scope,
+          animate: shouldPulse ? {
+            opacity: [pulseOpacityStart, pulseOpacityEnd],
+            r: [pulseRadiusStart, pulseRadiusEnd],
+            transition: continuousPulseTransition
+          } : {
+            opacity: pulseOpacityEnd,
+            r: pulseRadiusStart
+          },
+          cx: 0,
+          cy: 0,
+          fill: color,
+          initial: {
+            opacity: shouldPulse ? pulseOpacityStart : pulseOpacityEnd,
+            r: pulseRadiusStart
+          }
+        })
+      }), /*#__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: "var(--color-bg)",
+        strokeWidth: strokeWidth,
+        style: style,
+        transition: updateTransition
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx("g", {
+    "data-testid": testID,
+    opacity: isWithinDrawingArea ? opacity : 0,
+    children: /*#__PURE__*/_jsx("circle", {
+      className: className,
+      cx: pixelCoordinate.x,
+      cy: pixelCoordinate.y,
+      fill: color,
+      r: radius,
+      stroke: "var(--color-bg)",
+      strokeWidth: strokeWidth,
+      style: style
+    })
+  });
+}));

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

@@ -1,4 +1,4 @@
-const _excluded = ["background", "color", "elevation", "borderRadius", "font", "verticalAlignment"];
+const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label"];
 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; }
@@ -9,25 +9,38 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { memo } from 'react';
 import { ChartText } from '../text';
 import { jsx as _jsx } from "react/jsx-runtime";
+const labelVerticalInset = 3.5;
+const labelHorizontalInset = 4;
 /**
- * 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).
+ * 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 ScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
+export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
   let {
-      background = 'white',
+      background = 'var(--color-bg',
       color = 'var(--color-fgPrimary)',
-      elevation = background !== undefined ? 1 : undefined,
-      borderRadius = background !== undefined ? 4 : undefined,
+      elevated = true,
+      borderRadius = 4,
       font = 'label1',
-      verticalAlignment = 'middle'
+      verticalAlignment = 'middle',
+      inset = {
+        left: labelHorizontalInset,
+        right: labelHorizontalInset,
+        top: labelVerticalInset,
+        bottom: labelVerticalInset
+      },
+      label
     } = _ref,
     chartTextProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(ChartText, _objectSpread({
+  return /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
+    disableRepositioning: true,
     background: background,
     borderRadius: borderRadius,
     color: color,
-    elevation: elevation,
+    elevated: elevated,
     font: font,
+    inset: inset,
     verticalAlignment: verticalAlignment
-  }, chartTextProps));
+  }, chartTextProps), {}, {
+    children: label
+  }));
 });

package/esm/chart/scrubber/DefaultScrubberLabel.js

@@ -0,0 +1,30 @@
+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; }
+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 { useCartesianChartContext } from '../ChartProvider';
+import { DefaultReferenceLineLabel } from '../line';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DefaultScrubberLabel is the default label component for the scrubber line.
+ * It will center the label vertically with the top available area.
+ */
+export const DefaultScrubberLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      verticalAlignment = 'middle',
+      dy
+    } = _ref,
+    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
+  }, props));
+});