@coinbase/cds-web-visualization 3.4.0-beta.5 → 3.4.0-beta.6

package/esm/chart/scrubber/ScrubberBeaconGroup.js

@@ -0,0 +1,166 @@
+import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from 'react';
+import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
+import { useCartesianChartContext } from '../ChartProvider';
+import { evaluateGradientAtValue, getGradientConfig, useScrubberContext } from '../utils';
+import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
+import { jsx as _jsx } from "react/jsx-runtime";
+// Helper component to calculate beacon data for a specific series
+const BeaconWithData = /*#__PURE__*/memo(_ref => {
+  let {
+    seriesId,
+    dataIndex,
+    dataX,
+    isIdle,
+    BeaconComponent,
+    idlePulse,
+    transitions,
+    className,
+    style,
+    testID,
+    beaconRef
+  } = _ref;
+  const {
+    getSeries,
+    getSeriesData,
+    getXScale,
+    getYScale
+  } = useCartesianChartContext();
+  const series = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
+  const sourceData = useMemo(() => getSeriesData(seriesId), [getSeriesData, seriesId]);
+  const gradient = series === null || series === void 0 ? void 0 : series.gradient;
+
+  // Get dataY from series data
+  const dataY = useMemo(() => {
+    if (sourceData && dataIndex >= 0 && dataIndex < sourceData.length) {
+      const dataValue = sourceData[dataIndex];
+      if (typeof dataValue === 'number') {
+        return dataValue;
+      } else if (Array.isArray(dataValue)) {
+        const validValues = dataValue.filter(val => val !== null);
+        if (validValues.length >= 1) {
+          return validValues[validValues.length - 1];
+        }
+      }
+    }
+    return undefined;
+  }, [sourceData, dataIndex]);
+
+  // Evaluate gradient color
+  const color = useMemo(() => {
+    var _series$color, _series$color2;
+    if (dataY === undefined) return (_series$color = series === null || series === void 0 ? void 0 : series.color) !== null && _series$color !== void 0 ? _series$color : 'var(--color-fgPrimary)';
+    if (gradient) {
+      const xScale = getXScale();
+      const yScale = getYScale(series === null || series === void 0 ? void 0 : series.yAxisId);
+      if (xScale && yScale) {
+        const gradientScale = gradient.axis === 'x' ? xScale : yScale;
+        const stops = getGradientConfig(gradient, xScale, yScale);
+        if (stops) {
+          var _gradient$axis;
+          const gradientAxis = (_gradient$axis = gradient.axis) !== null && _gradient$axis !== void 0 ? _gradient$axis : 'y';
+          const dataValue = gradientAxis === 'x' ? dataX : dataY;
+          const evaluatedColor = evaluateGradientAtValue(stops, dataValue, gradientScale);
+          if (evaluatedColor) {
+            return evaluatedColor;
+          }
+        }
+      }
+    }
+    return (_series$color2 = series === null || series === void 0 ? void 0 : series.color) !== null && _series$color2 !== void 0 ? _series$color2 : 'var(--color-fgPrimary)';
+  }, [gradient, dataX, dataY, series === null || series === void 0 ? void 0 : series.color, series === null || series === void 0 ? void 0 : series.yAxisId, getXScale, getYScale]);
+  if (dataY === undefined) return null;
+  return /*#__PURE__*/_jsx(BeaconComponent, {
+    ref: beaconRef,
+    className: className,
+    color: color,
+    dataX: dataX,
+    dataY: dataY,
+    idlePulse: idlePulse,
+    isIdle: isIdle,
+    seriesId: seriesId,
+    style: style,
+    testID: testID,
+    transitions: transitions
+  });
+});
+export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    seriesIds,
+    idlePulse,
+    transitions,
+    BeaconComponent = DefaultScrubberBeacon,
+    className,
+    style,
+    testID
+  } = _ref2;
+  const ScrubberBeaconRefs = useRefMap();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    getXScale,
+    getXAxis,
+    dataLength,
+    series
+  } = useCartesianChartContext();
+
+  // Expose imperative handle with pulse method
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      Object.values(ScrubberBeaconRefs.refs).forEach(beaconRef => {
+        beaconRef === null || beaconRef === void 0 || beaconRef.pulse();
+      });
+    }
+  }));
+  const filteredSeries = useMemo(() => {
+    var _series$filter;
+    return (_series$filter = series === null || series === void 0 ? void 0 : series.filter(s => seriesIds.includes(s.id))) !== null && _series$filter !== void 0 ? _series$filter : [];
+  }, [series, seriesIds]);
+  const {
+    dataX,
+    dataIndex
+  } = useMemo(() => {
+    const xScale = getXScale();
+    const xAxis = getXAxis();
+    if (!xScale) return {
+      dataX: undefined,
+      dataIndex: undefined
+    };
+    const dataIndex = scrubberPosition !== null && scrubberPosition !== void 0 ? scrubberPosition : Math.max(0, dataLength - 1);
+
+    // Convert index to actual x value if axis has data
+    let dataX;
+    if (xAxis !== null && xAxis !== void 0 && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex] !== undefined) {
+      const dataValue = xAxis.data[dataIndex];
+      dataX = typeof dataValue === 'string' ? dataIndex : dataValue;
+    } else {
+      dataX = dataIndex;
+    }
+    return {
+      dataX,
+      dataIndex
+    };
+  }, [getXScale, getXAxis, scrubberPosition, dataLength]);
+  const isIdle = scrubberPosition === undefined;
+  const createBeaconRef = useCallback(seriesId => {
+    return beaconRef => {
+      if (beaconRef) {
+        ScrubberBeaconRefs.registerRef(seriesId, beaconRef);
+      }
+    };
+  }, [ScrubberBeaconRefs]);
+  if (dataX === undefined || dataIndex === undefined) return null;
+  return filteredSeries.map(s => /*#__PURE__*/_jsx(BeaconWithData, {
+    BeaconComponent: BeaconComponent,
+    beaconRef: createBeaconRef(s.id),
+    className: className,
+    dataIndex: dataIndex,
+    dataX: dataX,
+    idlePulse: idlePulse,
+    isIdle: isIdle,
+    seriesId: s.id,
+    style: style,
+    testID: testID ? "".concat(testID !== null && testID !== void 0 ? testID : 'beacon', "-").concat(s.id) : undefined,
+    transitions: transitions
+  }, s.id));
+}));

package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js

@@ -0,0 +1,186 @@
+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 { memo, useCallback, useMemo, useState } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { getPointOnScale, useScrubberContext } from '../utils';
+import { calculateLabelYPositions, getLabelPosition } from '../utils/scrubber';
+import { DefaultScrubberBeaconLabel } from './DefaultScrubberBeaconLabel';
+import { jsx as _jsx } from "react/jsx-runtime";
+const PositionedLabel = /*#__PURE__*/memo(_ref => {
+  let {
+    index,
+    positions,
+    position,
+    label,
+    color,
+    seriesId,
+    onDimensionsChange,
+    BeaconLabelComponent,
+    labelHorizontalOffset,
+    labelFont
+  } = _ref;
+  const pos = positions[index];
+
+  // Don't render if position is null (invalid data)
+  if (!pos) {
+    return null;
+  }
+  const x = pos.x;
+  const y = pos.y;
+  const dx = position === 'right' ? labelHorizontalOffset : -labelHorizontalOffset;
+  const horizontalAlignment = position === 'right' ? 'left' : 'right';
+  return /*#__PURE__*/_jsx(BeaconLabelComponent, {
+    color: color,
+    dx: dx,
+    font: labelFont,
+    horizontalAlignment: horizontalAlignment,
+    label: label,
+    onDimensionsChange: d => onDimensionsChange(seriesId, d),
+    seriesId: seriesId,
+    x: x,
+    y: y
+  });
+});
+export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
+  let {
+    labels,
+    labelMinGap = 4,
+    labelHorizontalOffset = 16,
+    labelFont,
+    BeaconLabelComponent = DefaultScrubberBeaconLabel
+  } = _ref2;
+  const {
+    getSeries,
+    getSeriesData,
+    getXScale,
+    getYScale,
+    getXAxis,
+    drawingArea,
+    dataLength
+  } = useCartesianChartContext();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const [labelDimensions, setLabelDimensions] = useState({});
+  const handleDimensionsChange = useCallback((seriesId, dimensions) => {
+    setLabelDimensions(prev => {
+      const existing = prev[seriesId];
+      if (existing && existing.width === dimensions.width && existing.height === dimensions.height) {
+        return prev;
+      }
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        [seriesId]: dimensions
+      });
+    });
+  }, []);
+  const seriesInfo = useMemo(() => {
+    return labels.map(label => {
+      const series = getSeries(label.seriesId);
+      if (!series) return null;
+      const sourceData = getSeriesData(label.seriesId);
+      const yScale = getYScale(series.yAxisId);
+      return {
+        seriesId: label.seriesId,
+        sourceData,
+        yScale
+      };
+    }).filter(info => info !== null);
+  }, [labels, getSeries, getSeriesData, getYScale]);
+  const xScale = getXScale();
+  const xAxis = getXAxis();
+  const dataIndex = useMemo(() => {
+    return scrubberPosition !== null && scrubberPosition !== void 0 ? scrubberPosition : Math.max(0, dataLength - 1);
+  }, [scrubberPosition, dataLength]);
+  const dataX = useMemo(() => {
+    if (xAxis !== null && xAxis !== void 0 && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex] !== undefined) {
+      const dataValue = xAxis.data[dataIndex];
+      return typeof dataValue === 'string' ? dataIndex : dataValue;
+    }
+    return dataIndex;
+  }, [xAxis, dataIndex]);
+  const allLabelPositions = useMemo(() => {
+    if (!xScale || dataX === undefined) return [];
+    const sharedPixelX = getPointOnScale(dataX, xScale);
+    const desiredPositions = seriesInfo.map(info => {
+      let dataY;
+      if (info.yScale) {
+        if (info.sourceData && dataIndex !== undefined && dataIndex >= 0 && dataIndex < info.sourceData.length) {
+          const dataValue = info.sourceData[dataIndex];
+          if (Array.isArray(dataValue)) {
+            const validValues = dataValue.filter(val => val !== null);
+            if (validValues.length >= 1) {
+              dataY = validValues[validValues.length - 1];
+            }
+          }
+        }
+      }
+      if (dataY !== undefined && info.yScale) {
+        return {
+          seriesId: info.seriesId,
+          x: sharedPixelX,
+          desiredY: getPointOnScale(dataY, info.yScale)
+        };
+      }
+
+      // Return null for invalid data
+      return null;
+    });
+    const maxLabelHeight = Math.max(...Object.values(labelDimensions).map(dim => dim.height));
+    const maxLabelWidth = Math.max(...Object.values(labelDimensions).map(dim => dim.width));
+
+    // Only apply collision detection to valid positions
+    const validPositions = desiredPositions.filter(pos => pos !== null);
+
+    // Convert to LabelDimension format expected by utility
+    const dimensions = validPositions.map(pos => {
+      var _trackedDimensions$wi, _trackedDimensions$he;
+      const trackedDimensions = labelDimensions[pos.seriesId];
+      return {
+        seriesId: pos.seriesId,
+        width: (_trackedDimensions$wi = trackedDimensions === null || trackedDimensions === void 0 ? void 0 : trackedDimensions.width) !== null && _trackedDimensions$wi !== void 0 ? _trackedDimensions$wi : maxLabelWidth,
+        height: (_trackedDimensions$he = trackedDimensions === null || trackedDimensions === void 0 ? void 0 : trackedDimensions.height) !== null && _trackedDimensions$he !== void 0 ? _trackedDimensions$he : maxLabelHeight,
+        preferredX: pos.x,
+        preferredY: pos.desiredY
+      };
+    });
+
+    // Calculate Y positions with collision resolution for valid positions only
+    const yPositions = calculateLabelYPositions(dimensions, drawingArea, maxLabelHeight, labelMinGap);
+
+    // Return all positions (including null ones)
+    return desiredPositions.map(pos => {
+      var _yPositions$get;
+      if (!pos) return null;
+      return {
+        seriesId: pos.seriesId,
+        x: pos.x,
+        y: (_yPositions$get = yPositions.get(pos.seriesId)) !== null && _yPositions$get !== void 0 ? _yPositions$get : pos.desiredY
+      };
+    });
+  }, [seriesInfo, dataIndex, dataX, xScale, labelDimensions, drawingArea, labelMinGap]);
+  const currentPosition = useMemo(() => {
+    if (!xScale || dataX === undefined) return 'right';
+    const pixelX = getPointOnScale(dataX, xScale);
+    const maxWidth = Math.max(...Object.values(labelDimensions).map(dim => dim.width));
+    return getLabelPosition(pixelX, maxWidth, drawingArea, labelHorizontalOffset);
+  }, [dataX, xScale, labelDimensions, drawingArea, labelHorizontalOffset]);
+  return seriesInfo.map((info, index) => {
+    const labelInfo = labels.find(label => label.seriesId === info.seriesId);
+    if (!labelInfo) return;
+    return /*#__PURE__*/_jsx(PositionedLabel, {
+      BeaconLabelComponent: BeaconLabelComponent,
+      color: labelInfo.color,
+      index: index,
+      label: labelInfo.label,
+      labelFont: labelFont,
+      labelHorizontalOffset: labelHorizontalOffset,
+      onDimensionsChange: handleDimensionsChange,
+      position: currentPosition,
+      positions: allLabelPositions,
+      seriesId: info.seriesId
+    }, info.seriesId);
+  });
+});

package/esm/chart/scrubber/index.js

@@ -1,2 +1,4 @@
-// Only export Scrubber component
+export * from './DefaultScrubberBeacon';
+export * from './DefaultScrubberBeaconLabel';
+export * from './DefaultScrubberLabel';
 export * from './Scrubber';

package/esm/chart/text/ChartText.js

@@ -67,9 +67,9 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     fontFamily,
     fontSize,
     fontWeight,
-    elevation,
+    elevated,
     color = 'var(--color-fgMuted)',
-    background = elevation && elevation > 0 ? 'var(--color-bg)' : 'transparent',
+    background = elevated ? 'var(--color-bg)' : 'transparent',
     borderRadius,
     inset: insetInput,
     onDimensionsChange,
@@ -112,7 +112,7 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
       };
     }
     const parentBounds = bounds !== null && bounds !== void 0 ? bounds : fullChartBounds;
-    if (!textBBox || !parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
+    if (!backgroundRectDimensions || !parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
       return {
         x: 0,
         y: 0
@@ -120,25 +120,21 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     }
     let x = 0;
     let y = 0;
-
-    // X-axis overflow
-    if (textBBox.x < parentBounds.x) {
-      x = parentBounds.x - textBBox.x; // positive = shift right
-    } else if (textBBox.x + textBBox.width > parentBounds.x + parentBounds.width) {
-      x = parentBounds.x + parentBounds.width - (textBBox.x + textBBox.width); // negative = shift left
+    if (backgroundRectDimensions.x < parentBounds.x) {
+      x = parentBounds.x - backgroundRectDimensions.x; // positive = shift right
+    } else if (backgroundRectDimensions.x + backgroundRectDimensions.width > parentBounds.x + parentBounds.width) {
+      x = parentBounds.x + parentBounds.width - (backgroundRectDimensions.x + backgroundRectDimensions.width); // negative = shift left
     }
-
-    // Y-axis overflow
-    if (textBBox.y < parentBounds.y) {
-      y = parentBounds.y - textBBox.y; // positive = shift down
-    } else if (textBBox.y + textBBox.height > parentBounds.y + parentBounds.height) {
-      y = parentBounds.y + parentBounds.height - (textBBox.y + textBBox.height); // negative = shift up
+    if (backgroundRectDimensions.y < parentBounds.y) {
+      y = parentBounds.y - backgroundRectDimensions.y; // positive = shift down
+    } else if (backgroundRectDimensions.y + backgroundRectDimensions.height > parentBounds.y + parentBounds.height) {
+      y = parentBounds.y + parentBounds.height - (backgroundRectDimensions.y + backgroundRectDimensions.height); // negative = shift up
     }
     return {
       x,
       y
     };
-  }, [textBBox, fullChartBounds, bounds, disableRepositioning]);
+  }, [backgroundRectDimensions, fullChartBounds, bounds, disableRepositioning]);
 
   // Compose the final reported rect including any overflow translation applied
   const reportedRect = useMemo(() => {
@@ -150,8 +146,6 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
       height: backgroundRectDimensions.height
     };
   }, [backgroundRectDimensions, overflowAmount.x, overflowAmount.y]);
-
-  // send latest calculated dimensions (adjusted for translation) to parent
   useEffect(() => {
     if (onDimensionsChange && reportedRect !== null) {
       onDimensionsChange(reportedRect);
@@ -203,7 +197,7 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
         as: "rect",
         className: classNames === null || classNames === void 0 ? void 0 : classNames.backgroundRect,
         fill: background,
-        filter: elevation && elevation > 0 ? "drop-shadow(var(--shadow-elevation".concat(elevation, "))") : undefined,
+        filter: elevated ? 'drop-shadow(var(--shadow-elevation1))' : undefined,
         height: backgroundRectDimensions === null || backgroundRectDimensions === void 0 ? void 0 : backgroundRectDimensions.height,
         rx: borderRadius,
         ry: borderRadius,

package/esm/chart/text/{SmartChartTextGroup.js → ChartTextGroup.js}

@@ -36,12 +36,13 @@ const EPSILON_PX = 0.5;
  *
  * The component focuses solely on overlap prevention logic for better separation of concerns.
  */
-export const SmartChartTextGroup = /*#__PURE__*/memo(_ref => {
+export const ChartTextGroup = /*#__PURE__*/memo(_ref => {
   let {
     labels,
     minGap = 8,
     prioritizeEndLabels = true,
-    chartTextProps
+    chartTextProps,
+    LabelComponent = ChartText
   } = _ref;
   const [boundingBoxes, setBoundingBoxes] = useState(new Map());
   const _ref2 = chartTextProps !== null && chartTextProps !== void 0 ? chartTextProps : {},
@@ -213,7 +214,7 @@ export const SmartChartTextGroup = /*#__PURE__*/memo(_ref => {
           display: 'none'
         } : {})
       };
-      return /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread(_objectSpread({
+      return /*#__PURE__*/_jsx(LabelComponent, _objectSpread(_objectSpread(_objectSpread({
         x: labelData.x,
         y: labelData.y
       }, restChartTextProps), labelData.chartTextProps), {}, {

package/esm/chart/text/index.js

@@ -1,4 +1,4 @@
 // codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
 export * from './ChartText';
-export * from './SmartChartTextGroup';
+export * from './ChartTextGroup';
 // codegen:end

package/esm/chart/utils/chart.js

@@ -19,13 +19,13 @@ export const getChartDomain = (series, min, max) => {
     return domain;
   }
   if (series.length > 0) {
-    const maxDataLength = Math.max(...series.map(s => {
+    const dataLength = Math.max(...series.map(s => {
       var _s$data;
       return ((_s$data = s.data) === null || _s$data === void 0 ? void 0 : _s$data.length) || 0;
     }));
-    if (maxDataLength > 0) {
+    if (dataLength > 0) {
       if (domain.min === undefined) domain.min = 0;
-      if (domain.max === undefined) domain.max = maxDataLength - 1;
+      if (domain.max === undefined) domain.max = dataLength - 1;
     }
   }
   return domain;
@@ -111,6 +111,32 @@ export const getStackedSeriesData = series => {
   return stackedDataMap;
 };
 
+/**
+ * Extracts line data values from series data that may contain tuples.
+ * For tuple data [[baseline, value]], extracts the last value.
+ * For numeric data [value], returns as-is.
+ *
+ * @param data - Array of numbers, tuples, or null values
+ * @returns Array of numbers or null values
+ */
+export const getLineData = data => {
+  if (!data) return [];
+
+  // Check if this is tuple data by finding first non-null entry
+  const firstNonNull = data.find(d => d !== null);
+  if (Array.isArray(firstNonNull)) {
+    return data.map(d => {
+      var _d$at;
+      if (d === null) return null;
+      if (Array.isArray(d)) return (_d$at = d.at(-1)) !== null && _d$at !== void 0 ? _d$at : null;
+      return d;
+    });
+  }
+
+  // Already numeric data
+  return data;
+};
+
 /**
  * Calculates the range of a chart from series data.
  * Range represents the range of y-values from the data.