@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/scrubber/index.js

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

package/esm/chart/text/ChartText.js

@@ -1,305 +0,0 @@
-import { memo, useMemo } from 'react';
-import { runOnJS, useAnimatedReaction, useDerivedValue } from 'react-native-reanimated';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { FontSlant, FontWeight, Group, Paint, Paragraph, RoundedRect, Shadow, Skia, TextAlign } from '@shopify/react-native-skia';
-import { useCartesianChartContext } from '../ChartProvider';
-import { getChartInset, getColorWithOpacity, unwrapAnimatedValue } from '../utils';
-
-/**
- * Converts a fontWeight from Theme to a Skia FontWeight
- * @note this only works when the fontWeight is a valid number (ie not 'bold')
- * @param theme - The theme to use
- * @param font - The font to use
- * @returns The FontWeight or undefined if the fontWeight is not a valid number
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getFontWeight = (theme, font) => {
-  const themeFontWeight = theme.fontWeight[font];
-  const numericWeight = typeof themeFontWeight === 'string' ? Number(themeFontWeight) : themeFontWeight;
-  const validFontWeights = Object.values(FontWeight).filter(value => typeof value === 'number');
-  return numericWeight !== undefined && validFontWeights.includes(numericWeight) ? numericWeight : undefined;
-};
-
-/**
- * The supported content types for ChartText.
- * Pass a string for simple text, or a SkParagraph for advanced rich text formatting.
- */
-
-/**
- * Horizontal alignment options for chart text.
- */
-
-/**
- * Vertical alignment options for chart text.
- */
-
-export const ChartText = /*#__PURE__*/memo(_ref => {
-  var _elevationShadow$shad, _elevationShadow$shad2, _elevationShadow$shad3, _elevationShadow$shad4, _elevationShadow$shad5, _elevationShadow$shad6, _elevationShadow$shad7;
-  let {
-    children,
-    x,
-    y,
-    dx = 0,
-    dy = 0,
-    horizontalAlignment = 'center',
-    verticalAlignment = 'middle',
-    paragraphAlignment = TextAlign.Left,
-    disableRepositioning = false,
-    bounds,
-    color,
-    background: backgroundProp,
-    borderRadius = 4,
-    inset: insetInput,
-    onDimensionsChange,
-    opacity = 1,
-    fontFamilies,
-    font = 'label2',
-    fontSize,
-    fontWeight,
-    fontStyle: fontStyleProp = FontSlant.Upright,
-    elevated
-  } = _ref;
-  const theme = useTheme();
-  const {
-    width: chartWidth,
-    height: chartHeight,
-    fontFamilies: contextFontFamilies,
-    fontProvider
-  } = useCartesianChartContext();
-  const inset = useMemo(() => getChartInset(insetInput), [insetInput]);
-  const background = backgroundProp != null ? backgroundProp : elevated ? theme.color.bgElevation1 : 'transparent';
-  const defaultParagraphStyle = useMemo(() => {
-    var _ref2;
-    return {
-      fontFamilies: (_ref2 = fontFamilies != null ? fontFamilies : contextFontFamilies) != null ? _ref2 : [],
-      fontSize: fontSize != null ? fontSize : theme.fontSize[font],
-      fontStyle: {
-        weight: fontWeight != null ? fontWeight : getFontWeight(theme, font),
-        slant: fontStyleProp
-      },
-      color: Skia.Color(color != null ? color : theme.color.fgMuted)
-    };
-  }, [fontFamilies, contextFontFamilies, fontSize, theme, font, fontWeight, fontStyleProp, color]);
-  const paragraph = useDerivedValue(() => {
-    const childrenValue = unwrapAnimatedValue(children);
-    if (typeof childrenValue !== 'string') {
-      return childrenValue;
-    }
-    const builder = Skia.ParagraphBuilder.Make({
-      textAlign: TextAlign.Left
-    }, fontProvider);
-    builder.pushStyle(defaultParagraphStyle);
-    builder.addText(childrenValue);
-    builder.pop();
-    const para = builder.build();
-    para.layout(chartWidth);
-    return para;
-  }, [children, fontProvider, defaultParagraphStyle, chartWidth]);
-  const textDimensions = useDerivedValue(() => {
-    const unwrappedParagraph = paragraph.value;
-    if (!unwrappedParagraph) return {
-      width: 0,
-      height: 0
-    };
-    return {
-      width: unwrappedParagraph.getLongestLine(),
-      height: unwrappedParagraph.getHeight()
-    };
-  }, [paragraph]);
-  const backgroundRectSize = useDerivedValue(() => ({
-    width: textDimensions.value.width + inset.left + inset.right,
-    height: textDimensions.value.height + inset.top + inset.bottom
-  }), [textDimensions, inset]);
-
-  // Calculate background rect position based on alignment
-  const backgroundRect = useDerivedValue(() => {
-    const horAlignment = unwrapAnimatedValue(horizontalAlignment);
-    const verAlignment = unwrapAnimatedValue(verticalAlignment);
-    // By default the value is top left
-    let rectX = unwrapAnimatedValue(x);
-    let rectY = unwrapAnimatedValue(y);
-    const rectSize = backgroundRectSize.value;
-
-    // Adjust for horizontal alignment
-    switch (horAlignment) {
-      case 'center':
-        rectX = rectX - rectSize.width / 2;
-        break;
-      case 'right':
-        rectX = rectX - rectSize.width;
-        break;
-    }
-
-    // Adjust for vertical alignment
-    switch (verAlignment) {
-      case 'middle':
-        rectY = rectY - rectSize.height / 2;
-        break;
-      case 'bottom':
-        rectY = rectY - rectSize.height;
-        break;
-    }
-    return {
-      x: rectX,
-      y: rectY,
-      width: rectSize.width,
-      height: rectSize.height
-    };
-  }, [x, y, backgroundRectSize, horizontalAlignment, verticalAlignment]);
-
-  // Paragraph uses top-left positioning
-  const textPosition = useDerivedValue(() => {
-    const textDims = textDimensions.value;
-
-    // Calculate horizontal offset based on paragraph alignment
-    let horizontalOffset = 0;
-    switch (paragraphAlignment) {
-      case TextAlign.Center:
-        horizontalOffset = -textDims.width / 2;
-        break;
-      case TextAlign.Right:
-      case TextAlign.End:
-        horizontalOffset = -textDims.width;
-        break;
-      default:
-        // Left-aligned text needs no offset
-        horizontalOffset = 0;
-        break;
-    }
-    return {
-      x: backgroundRect.value.x + inset.left + horizontalOffset,
-      y: backgroundRect.value.y + inset.top,
-      width: textDims.width,
-      height: textDims.height
-    };
-  }, [backgroundRect, textDimensions, inset, paragraphAlignment]);
-
-  // Calculate overflow and repositioning
-  const fullChartBounds = useMemo(() => ({
-    x: 0,
-    y: 0,
-    width: chartWidth,
-    height: chartHeight
-  }), [chartWidth, chartHeight]);
-  const overflowAmount = useDerivedValue(() => {
-    if (disableRepositioning) {
-      return {
-        x: 0,
-        y: 0
-      };
-    }
-    const parentBounds = bounds != null ? bounds : fullChartBounds;
-    if (!parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
-      return {
-        x: 0,
-        y: 0
-      };
-    }
-    let offsetX = 0;
-    let offsetY = 0;
-
-    // X-axis overflow
-    if (backgroundRect.value.x < parentBounds.x) {
-      offsetX = parentBounds.x - backgroundRect.value.x;
-    } else if (backgroundRect.value.x + backgroundRect.value.width > parentBounds.x + parentBounds.width) {
-      offsetX = parentBounds.x + parentBounds.width - (backgroundRect.value.x + backgroundRect.value.width);
-    }
-
-    // Y-axis overflow
-    if (backgroundRect.value.y < parentBounds.y) {
-      offsetY = parentBounds.y - backgroundRect.value.y;
-    } else if (backgroundRect.value.y + backgroundRect.value.height > parentBounds.y + parentBounds.height) {
-      offsetY = parentBounds.y + parentBounds.height - (backgroundRect.value.y + backgroundRect.value.height);
-    }
-    return {
-      x: offsetX,
-      y: offsetY
-    };
-  }, [backgroundRect, fullChartBounds, bounds, disableRepositioning]);
-
-  // Final adjusted positions
-  const backgroundRectWithOffset = useDerivedValue(() => {
-    const offsetX = unwrapAnimatedValue(dx);
-    const offsetY = unwrapAnimatedValue(dy);
-    return {
-      x: backgroundRect.value.x + overflowAmount.value.x + offsetX,
-      y: backgroundRect.value.y + overflowAmount.value.y + offsetY,
-      width: backgroundRect.value.width,
-      height: backgroundRect.value.height
-    };
-  }, [backgroundRect, overflowAmount, dx, dy]);
-  const textWithOffsetX = useDerivedValue(() => textPosition.value.x + overflowAmount.value.x + unwrapAnimatedValue(dx), [textPosition, overflowAmount, dx]);
-  const textWithOffsetY = useDerivedValue(() => textPosition.value.y + overflowAmount.value.y + unwrapAnimatedValue(dy), [textPosition, overflowAmount, dy]);
-  useAnimatedReaction(() => backgroundRectWithOffset.value, (rect, previous) => {
-    if (onDimensionsChange && rect !== previous) {
-      runOnJS(onDimensionsChange)(rect);
-    }
-  }, [onDimensionsChange]);
-
-  // Show group if we are ready
-  const groupOpacity = useDerivedValue(() => {
-    const textSize = textDimensions.value;
-    const hasValidContent = paragraph.value && textSize.width > 0 && textSize.height > 0;
-    return hasValidContent ? unwrapAnimatedValue(opacity) : 0;
-  }, [paragraph, textDimensions, opacity]);
-  const backgroundRectHeight = useDerivedValue(() => backgroundRectWithOffset.value.height, [backgroundRectWithOffset]);
-  const backgroundRectWidth = useDerivedValue(() => backgroundRectWithOffset.value.width, [backgroundRectWithOffset]);
-  const backgroundRectX = useDerivedValue(() => backgroundRectWithOffset.value.x, [backgroundRectWithOffset]);
-  const backgroundRectY = useDerivedValue(() => backgroundRectWithOffset.value.y, [backgroundRectWithOffset]);
-  const elevationShadow = elevated ? theme.shadow.elevation1 : undefined;
-
-  // Calculate the paragraph's internal x offset from line metrics based on text alignment
-  const paragraphTransform = useDerivedValue(() => {
-    if (!paragraph.value || !paragraphAlignment) return [];
-    const rects = paragraph.value.getLineMetrics();
-    if (rects.length === 0) return [];
-    let minOffset;
-    switch (paragraphAlignment) {
-      case TextAlign.Center:
-        // For center-aligned text, account for half the width
-        minOffset = Math.min(...rects.map(rect => rect.x - rect.width / 2));
-        break;
-      case TextAlign.Right:
-      case TextAlign.End:
-        // For right-aligned text, account for the full width
-        minOffset = Math.min(...rects.map(rect => rect.x - rect.width));
-        break;
-      default:
-        // For left-aligned text, use the x position directly
-        minOffset = Math.min(...rects.map(rect => rect.x));
-        break;
-    }
-    return [{
-      translateX: -minOffset
-    }];
-  }, [paragraph, paragraphAlignment]);
-
-  // Opacity on a group doesn't impact the paragraph so we need to apply it to Group
-  return /*#__PURE__*/_jsxs(Group, {
-    layer: /*#__PURE__*/_jsx(Paint, {
-      opacity: groupOpacity
-    }),
-    children: [background !== 'transparent' && /*#__PURE__*/_jsx(RoundedRect, {
-      color: background,
-      height: backgroundRectHeight,
-      r: borderRadius,
-      width: backgroundRectWidth,
-      x: backgroundRectX,
-      y: backgroundRectY,
-      children: elevationShadow && /*#__PURE__*/_jsx(Shadow, {
-        blur: Number((_elevationShadow$shad = elevationShadow.shadowRadius) != null ? _elevationShadow$shad : 0),
-        color: getColorWithOpacity(String((_elevationShadow$shad2 = elevationShadow.shadowColor) != null ? _elevationShadow$shad2 : '#000000'), Number((_elevationShadow$shad3 = elevationShadow.shadowOpacity) != null ? _elevationShadow$shad3 : 1)),
-        dx: Number((_elevationShadow$shad4 = (_elevationShadow$shad5 = elevationShadow.shadowOffset) == null ? void 0 : _elevationShadow$shad5.width) != null ? _elevationShadow$shad4 : 0),
-        dy: Number((_elevationShadow$shad6 = (_elevationShadow$shad7 = elevationShadow.shadowOffset) == null ? void 0 : _elevationShadow$shad7.height) != null ? _elevationShadow$shad6 : 0)
-      })
-    }), /*#__PURE__*/_jsx(Group, {
-      transform: paragraphTransform,
-      children: /*#__PURE__*/_jsx(Paragraph, {
-        paragraph: paragraph,
-        width: chartWidth,
-        x: textWithOffsetX,
-        y: textWithOffsetY
-      })
-    })]
-  });
-});

package/esm/chart/text/ChartTextGroup.js

@@ -1,211 +0,0 @@
-const _excluded = ["onDimensionsChange"];
-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); }
-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 { Group } from '@shopify/react-native-skia';
-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 : {},
-    {
-      onDimensionsChange: propsOnDimensionsChange
-    } = _ref2,
-    restChartTextProps = _objectWithoutPropertiesLoose(_ref2, _excluded);
-
-  // Generate a unique key to reference each label with.
-  const labelsWithKeys = useMemo(() => {
-    return labels.map((labelData, index) => _extends({}, labelData, {
-      key: labelData.label + "-" + 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 => {
-        labelChartTextProps == null || labelChartTextProps.onDimensionsChange == null || labelChartTextProps.onDimensionsChange(bounds);
-        propsOnDimensionsChange == null || 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) => _extends({}, 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 ? void 0 : _labelsWithKeys$.key;
-        return new Set([firstOriginal != null ? 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(Group, {
-    children: labelsWithKeys.map(labelData => {
-      const hasMeasurement = boundingBoxes.has(labelData.key);
-      const isVisible = hasMeasurement && isReady && (visibleKeySet == null ? void 0 : visibleKeySet.has(labelData.key));
-      return /*#__PURE__*/_jsx(LabelComponent, _extends({
-        opacity: isVisible ? 1 : 0,
-        x: labelData.x,
-        y: labelData.y
-      }, restChartTextProps, labelData.chartTextProps, {
-        onDimensionsChange: onDimensionsChangeByKey.get(labelData.key),
-        children: labelData.label
-      }), labelData.key);
-    })
-  });
-});

package/esm/chart/text/index.js

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