@coinbase/cds-web 8.66.2 → 9.0.0-rc.1

package/esm/visualizations/chart/text/ChartText.js

@@ -0,0 +1,231 @@
+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 React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { m as motion } from 'framer-motion';
+import { cx } from '../../../index';
+import { Box } from '../../../layout';
+import { Text } from '../../../typography';
+import { useCartesianChartContext } from '../ChartProvider';
+import { getChartInset } from '../utils';
+import { accessoryFadeTransitionDuration } from '../utils/transition';
+
+/**
+ * The supported content types for ChartText.
+ */
+
+/**
+ * Horizontal alignment options for chart text.
+ */
+
+/**
+ * Vertical alignment options for chart text.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Get text anchor based on horizontal alignment.
+ */
+const getTextAnchor = alignment => {
+  switch (alignment) {
+    case 'left':
+      return 'start';
+    case 'center':
+      return 'middle';
+    case 'right':
+      return 'end';
+  }
+};
+
+/**
+ * Get dominant baseline based on vertical alignment.
+ */
+const getDominantBaseline = alignment => {
+  switch (alignment) {
+    case 'top':
+      return 'hanging';
+    case 'middle':
+      return 'central';
+    case 'bottom':
+      return 'ideographic';
+  }
+};
+export const ChartText = /*#__PURE__*/memo(_ref => {
+  let {
+    children,
+    x,
+    y,
+    horizontalAlignment = 'center',
+    verticalAlignment = 'middle',
+    dx,
+    dy,
+    disableRepositioning,
+    bounds,
+    opacity,
+    testID,
+    font = 'label2',
+    fontFamily,
+    fontSize,
+    fontWeight,
+    elevated,
+    color = 'var(--color-fgMuted)',
+    background = elevated ? 'var(--color-bgElevation1)' : 'transparent',
+    borderRadius,
+    inset: insetInput,
+    onDimensionsChange,
+    style,
+    styles,
+    className,
+    classNames
+  } = _ref;
+  const {
+    animate,
+    width: chartWidth,
+    height: chartHeight
+  } = useCartesianChartContext();
+  const fullChartBounds = useMemo(() => ({
+    x: 0,
+    y: 0,
+    width: chartWidth,
+    height: chartHeight
+  }), [chartWidth, chartHeight]);
+  const textRef = useRef(null);
+  const [textBBox, setTextBBox] = useState(null);
+  const isDimensionsReady = disableRepositioning || textRef.current !== null;
+  const backgroundRectDimensions = useMemo(() => {
+    if (!textBBox) {
+      return null;
+    }
+    const inset = getChartInset(insetInput);
+    return {
+      x: textBBox.x - inset.left,
+      y: textBBox.y - inset.top,
+      width: textBBox.width + inset.left + inset.right,
+      height: textBBox.height + inset.top + inset.bottom
+    };
+  }, [textBBox, insetInput]);
+  const overflowAmount = useMemo(() => {
+    if (disableRepositioning) {
+      return {
+        x: 0,
+        y: 0
+      };
+    }
+    const parentBounds = bounds !== null && bounds !== void 0 ? bounds : fullChartBounds;
+    if (!backgroundRectDimensions || !parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
+      return {
+        x: 0,
+        y: 0
+      };
+    }
+    let x = 0;
+    let y = 0;
+    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
+    }
+    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
+    };
+  }, [backgroundRectDimensions, fullChartBounds, bounds, disableRepositioning]);
+
+  // Compose the final reported rect including any overflow translation applied
+  const reportedRect = useMemo(() => {
+    if (!backgroundRectDimensions) return null;
+    return {
+      x: backgroundRectDimensions.x + overflowAmount.x,
+      y: backgroundRectDimensions.y + overflowAmount.y,
+      width: backgroundRectDimensions.width,
+      height: backgroundRectDimensions.height
+    };
+  }, [backgroundRectDimensions, overflowAmount.x, overflowAmount.y]);
+  useEffect(() => {
+    if (onDimensionsChange && reportedRect !== null) {
+      onDimensionsChange(reportedRect);
+    }
+  }, [reportedRect, onDimensionsChange]);
+  useEffect(() => {
+    if (textRef.current) {
+      const observer = new ResizeObserver(entries => {
+        for (const entry of entries) {
+          setTextBBox(entry.target.getBBox());
+        }
+      });
+      observer.observe(textRef.current);
+
+      // Cleanup function
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, []);
+  const textAnchor = useMemo(() => getTextAnchor(horizontalAlignment), [horizontalAlignment]);
+  const dominantBaseline = useMemo(() => getDominantBaseline(verticalAlignment), [verticalAlignment]);
+
+  // forces state update the bounding box when any properties that can affect the bounding box change
+  useEffect(() => {
+    if (textRef.current) {
+      setTextBBox(textRef.current.getBBox());
+    }
+  }, [textAnchor, dominantBaseline, dx, dy, x, y]);
+  const containerStyle = useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), {}, {
+    transform: "translate(".concat(overflowAmount.x, "px, ").concat(overflowAmount.y, "px)")
+  }), [overflowAmount.x, overflowAmount.y, style, styles === null || styles === void 0 ? void 0 : styles.root]);
+  return /*#__PURE__*/_jsx(Box, {
+    "aria-hidden": "true",
+    as: "g",
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    opacity: opacity,
+    style: containerStyle,
+    testID: testID,
+    children: /*#__PURE__*/_jsxs(motion.g, {
+      animate: {
+        opacity: isDimensionsReady ? 1 : 0
+      },
+      transition: animate ? {
+        duration: accessoryFadeTransitionDuration,
+        ease: 'easeOut'
+      } : undefined,
+      children: [/*#__PURE__*/_jsx(Box, {
+        as: "rect",
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.backgroundRect,
+        fill: background,
+        filter: elevated ? 'drop-shadow(var(--shadow-elevation1))' : undefined,
+        height: backgroundRectDimensions === null || backgroundRectDimensions === void 0 ? void 0 : backgroundRectDimensions.height,
+        rx: borderRadius,
+        ry: borderRadius,
+        style: styles === null || styles === void 0 ? void 0 : styles.backgroundRect,
+        width: backgroundRectDimensions === null || backgroundRectDimensions === void 0 ? void 0 : backgroundRectDimensions.width,
+        x: backgroundRectDimensions === null || backgroundRectDimensions === void 0 ? void 0 : backgroundRectDimensions.x,
+        y: backgroundRectDimensions === null || backgroundRectDimensions === void 0 ? void 0 : backgroundRectDimensions.y
+      }), /*#__PURE__*/_jsx(Text, {
+        ref: textRef,
+        as: "text",
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.text,
+        dominantBaseline: dominantBaseline,
+        dx: dx,
+        dy: dy,
+        fill: color,
+        font: font,
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        style: styles === null || styles === void 0 ? void 0 : styles.text,
+        textAnchor: textAnchor,
+        x: x,
+        y: y,
+        children: /*#__PURE__*/_jsx("tspan", {
+          children: children
+        })
+      })]
+    })
+  });
+});

package/esm/visualizations/chart/text/ChartTextGroup.js

@@ -0,0 +1,227 @@
+const _excluded = ["onDimensionsChange"];
+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, useEffect, useMemo, useState } from 'react';
+import { ChartText } from './ChartText';
+
+/**
+ * Configuration for a single text label in the display list
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Overlap check that enforces a minimum pixel gap between two rectangles.
+ * We inflate each rect by gap/2 on all sides so two neighbors must be at
+ * least `gap` pixels apart to be considered non-overlapping.
+ */
+function doRectsOverlapWithGap(a, b, gap) {
+  const g = gap / 2;
+  const overlapX = a.x - g < b.x + b.width + g && a.x + a.width + g > b.x - g;
+  const overlapY = a.y - g < b.y + b.height + g && a.y + a.height + g > b.y - g;
+  return overlapX && overlapY;
+}
+
+// Suppress state churn due to sub-pixel jitter in measurements
+const EPSILON_PX = 0.5;
+
+/**
+ * A smart text display component that prevents label overlap through collision detection.
+ *
+ * This component renders a list of ChartText components and automatically hides overlapping elements
+ * to ensure readability.
+ *
+ * The component focuses solely on overlap prevention logic for better separation of concerns.
+ */
+export const ChartTextGroup = /*#__PURE__*/memo(_ref => {
+  let {
+    labels,
+    minGap = 8,
+    prioritizeEndLabels = true,
+    chartTextProps,
+    LabelComponent = ChartText
+  } = _ref;
+  const [boundingBoxes, setBoundingBoxes] = useState(new Map());
+  const _ref2 = chartTextProps !== null && chartTextProps !== void 0 ? chartTextProps : {},
+    {
+      onDimensionsChange: propsOnDimensionsChange
+    } = _ref2,
+    restChartTextProps = _objectWithoutProperties(_ref2, _excluded);
+
+  // Generate a unique key to reference each label with.
+  const labelsWithKeys = useMemo(() => {
+    return labels.map((labelData, index) => _objectSpread(_objectSpread({}, labelData), {}, {
+      key: "".concat(labelData.label, "-").concat(index)
+    }));
+  }, [labels]);
+
+  // Cleans up `boundingBoxes` state so that it only includes entries for the current set of labels
+  useEffect(() => {
+    const allLabelsKeys = new Set(labelsWithKeys.map(l => l.key));
+    setBoundingBoxes(prev => {
+      let changed = false;
+      const next = new Map();
+      for (const [k, v] of prev) {
+        if (allLabelsKeys.has(k)) next.set(k, v);else changed = true;
+      }
+      return changed ? next : prev;
+    });
+  }, [labelsWithKeys]);
+
+  // Build stable per-label measurement callbacks that recreate when labels change
+  const onDimensionsChangeByKey = useMemo(() => {
+    const map = new Map();
+    for (const labelData of labelsWithKeys) {
+      const {
+        key,
+        chartTextProps: labelChartTextProps
+      } = labelData;
+      map.set(key, bounds => {
+        var _labelChartTextProps$;
+        labelChartTextProps === null || labelChartTextProps === void 0 || (_labelChartTextProps$ = labelChartTextProps.onDimensionsChange) === null || _labelChartTextProps$ === void 0 || _labelChartTextProps$.call(labelChartTextProps, bounds);
+        propsOnDimensionsChange === null || propsOnDimensionsChange === void 0 || propsOnDimensionsChange(bounds);
+        // Ignore zero-sized bounds and no-op updates (epsilon compare)
+        if (bounds.width === 0 || bounds.height === 0) return;
+        setBoundingBoxes(prev => {
+          const prevRect = prev.get(key);
+          const nearlyEqual = (a, b) => Math.abs(a - b) <= EPSILON_PX;
+          const isSame = prevRect !== undefined && nearlyEqual(prevRect.x, bounds.x) && nearlyEqual(prevRect.y, bounds.y) && nearlyEqual(prevRect.width, bounds.width) && nearlyEqual(prevRect.height, bounds.height);
+          if (isSame) return prev;
+          const newMap = new Map(prev);
+          newMap.set(key, bounds);
+          return newMap;
+        });
+      });
+    }
+    return map;
+  }, [labelsWithKeys, propsOnDimensionsChange]);
+
+  // Determine readiness: all current labels have measured bounding boxes
+  const isReady = useMemo(() => labelsWithKeys.every(l => boundingBoxes.has(l.key)), [labelsWithKeys, boundingBoxes]);
+
+  // Compute visible keys using stride attempts then greedy fallback
+  const visibleKeySet = useMemo(() => {
+    // Build ordered set of labels with rects for collision detection algorithm
+    const orderedWithRects = labelsWithKeys.map((l, idx) => _objectSpread(_objectSpread({}, l), {}, {
+      rect: boundingBoxes.get(l.key)
+    })).filter(x => x.rect !== undefined);
+
+    // 1) Sort by horizontal position so neighbor checks are O(1)
+    //    For ties, sort bottom-to-top (higher y first) to get stable ordering
+    orderedWithRects.sort((a, b) => a.x === b.x ? b.y - a.y : a.x - b.x);
+
+    // 2) Defer selection until all labels have measured to avoid flicker and early hiding
+    if (!isReady) return null;
+    const n = orderedWithRects.length;
+    // 3) Trivial cases
+    if (n === 0) return new Set();
+    if (n === 1) return new Set([orderedWithRects[0].key]);
+
+    // 4) Two-label rule: if overlapping, prefer the first label (original order)
+    if (n === 2) {
+      const a = orderedWithRects[0];
+      const b = orderedWithRects[1];
+      const overlap = doRectsOverlapWithGap(a.rect, b.rect, minGap);
+      if (overlap) {
+        var _labelsWithKeys$;
+        const firstOriginal = (_labelsWithKeys$ = labelsWithKeys[0]) === null || _labelsWithKeys$ === void 0 ? void 0 : _labelsWithKeys$.key;
+        return new Set([firstOriginal !== null && firstOriginal !== void 0 ? firstOriginal : a.key]);
+      }
+      return new Set([a.key, b.key]);
+    }
+
+    // 5) Utility: check only adjacent neighbors in x-order for overlap with gap
+    const hasNeighborOverlap = keysOrdered => {
+      for (let i = 0; i < keysOrdered.length - 1; i++) {
+        const ra = boundingBoxes.get(keysOrdered[i]);
+        const rb = boundingBoxes.get(keysOrdered[i + 1]);
+        if (doRectsOverlapWithGap(ra, rb, minGap)) return true;
+      }
+      return false;
+    };
+
+    // 6) Fast path: if every label fits, show them all without reduction
+    const allKeys = orderedWithRects.map(l => l.key);
+    if (!hasNeighborOverlap(allKeys)) {
+      return new Set(allKeys);
+    }
+
+    // 7) Try stride patterns: every 2nd, every 3rd, ... while ensuring ends when prioritized
+    const tryStride = stride => {
+      const selected = [];
+      for (let i = 0; i < n; i += stride) selected.push(orderedWithRects[i].key);
+      if (prioritizeEndLabels) {
+        const firstKey = orderedWithRects[0].key;
+        const lastKey = orderedWithRects[n - 1].key;
+        if (selected[0] !== firstKey) selected.unshift(firstKey);
+        if (selected[selected.length - 1] !== lastKey) selected.push(lastKey);
+      }
+      // Deduplicate while preserving order
+      const unique = Array.from(new Set(selected));
+      return hasNeighborOverlap(unique) ? new Set() : new Set(unique);
+    };
+
+    // 8) Increase stride until something fits or we exhaust options
+    for (let stride = 2; stride <= n; stride++) {
+      const attempt = tryStride(stride);
+      if (attempt.size > 0) return attempt;
+    }
+
+    // 9) Greedy fallback: walk left-to-right and keep a label only if it
+    //    does not overlap the previously accepted label. Optionally ensure last.
+    const greedy = [];
+    const firstKey = orderedWithRects[0].key;
+    const lastKey = orderedWithRects[n - 1].key;
+    greedy.push(firstKey);
+    for (let i = 1; i < n - 1; i++) {
+      const k = orderedWithRects[i].key;
+      const prevKey = greedy[greedy.length - 1];
+      const ra = boundingBoxes.get(prevKey);
+      const rb = boundingBoxes.get(k);
+      if (!doRectsOverlapWithGap(ra, rb, minGap)) {
+        greedy.push(k);
+      }
+    }
+    // Ensure last key when prioritized
+    if (prioritizeEndLabels) {
+      const lastIncluded = greedy[greedy.length - 1];
+      const ra = boundingBoxes.get(lastIncluded);
+      const rb = boundingBoxes.get(lastKey);
+      if (doRectsOverlapWithGap(ra, rb, minGap)) {
+        // Replace the last conflicting with the lastKey
+        greedy[greedy.length - 1] = lastKey;
+      } else if (lastIncluded !== lastKey) {
+        greedy.push(lastKey);
+      }
+    }
+    return new Set(greedy);
+  }, [isReady, boundingBoxes, minGap, prioritizeEndLabels, labelsWithKeys]);
+  return /*#__PURE__*/_jsx("g", {
+    children: labelsWithKeys.map(labelData => {
+      var _restChartTextProps$s, _restChartTextProps$s2, _labelData$chartTextP, _labelData$chartTextP2, _restChartTextProps$s3, _restChartTextProps$s4, _labelData$chartTextP3, _labelData$chartTextP4;
+      const hasMeasurement = boundingBoxes.has(labelData.key);
+      const isVisible = hasMeasurement && isReady && (visibleKeySet === null || visibleKeySet === void 0 ? void 0 : visibleKeySet.has(labelData.key));
+      const mergedStyles = {
+        text: _objectSpread(_objectSpread(_objectSpread({}, (_restChartTextProps$s = restChartTextProps === null || restChartTextProps === void 0 || (_restChartTextProps$s2 = restChartTextProps.styles) === null || _restChartTextProps$s2 === void 0 ? void 0 : _restChartTextProps$s2.text) !== null && _restChartTextProps$s !== void 0 ? _restChartTextProps$s : {}), (_labelData$chartTextP = (_labelData$chartTextP2 = labelData.chartTextProps) === null || _labelData$chartTextP2 === void 0 || (_labelData$chartTextP2 = _labelData$chartTextP2.styles) === null || _labelData$chartTextP2 === void 0 ? void 0 : _labelData$chartTextP2.text) !== null && _labelData$chartTextP !== void 0 ? _labelData$chartTextP : {}), !isVisible ? {
+          visibility: 'hidden',
+          opacity: 0,
+          pointerEvents: 'none'
+        } : {}),
+        backgroundRect: _objectSpread(_objectSpread(_objectSpread({}, (_restChartTextProps$s3 = restChartTextProps === null || restChartTextProps === void 0 || (_restChartTextProps$s4 = restChartTextProps.styles) === null || _restChartTextProps$s4 === void 0 ? void 0 : _restChartTextProps$s4.backgroundRect) !== null && _restChartTextProps$s3 !== void 0 ? _restChartTextProps$s3 : {}), (_labelData$chartTextP3 = (_labelData$chartTextP4 = labelData.chartTextProps) === null || _labelData$chartTextP4 === void 0 || (_labelData$chartTextP4 = _labelData$chartTextP4.styles) === null || _labelData$chartTextP4 === void 0 ? void 0 : _labelData$chartTextP4.backgroundRect) !== null && _labelData$chartTextP3 !== void 0 ? _labelData$chartTextP3 : {}), !isVisible ? {
+          display: 'none'
+        } : {})
+      };
+      return /*#__PURE__*/_jsx(LabelComponent, _objectSpread(_objectSpread(_objectSpread({
+        x: labelData.x,
+        y: labelData.y
+      }, restChartTextProps), labelData.chartTextProps), {}, {
+        onDimensionsChange: onDimensionsChangeByKey.get(labelData.key),
+        styles: mergedStyles,
+        children: labelData.label
+      }), labelData.key);
+    })
+  });
+});

package/esm/visualizations/chart/text/index.js

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