@coinbase/cds-mobile-visualization 3.3.0 → 3.4.0-beta.10

package/esm/chart/utils/scale.js

@@ -0,0 +1,277 @@
+import { scaleBand, scaleLinear, scaleLog } from 'd3-scale';
+
+// https://d3js.org/d3-scale - ideal next scale would be time
+
+export const isCategoricalScale = scale => {
+  return scale !== undefined && 'bandwidth' in scale && typeof scale.bandwidth === 'function';
+};
+export const isNumericScale = scale => {
+  return scale !== undefined && !isCategoricalScale(scale);
+};
+
+/**
+ * Type guard to check if a scale is logarithmic.
+ */
+export const isLogScale = scale => {
+  return scale !== undefined && 'base' in scale && typeof scale.base === 'function';
+};
+
+/**
+ * Type guard to check if a scale is a SerializableScale.
+ * This can be used in worklets to differentiate between scale objects and scale functions.
+ */
+export const isSerializableScale = scale => {
+  'worklet';
+
+  return typeof scale === 'object' && scale !== null && 'type' in scale && 'domain' in scale && 'range' in scale;
+};
+
+/**
+ * Create a numeric scale (linear or logarithmic)
+ * @returns A numeric scale function
+ */
+export const getNumericScale = _ref => {
+  let {
+    scaleType,
+    domain,
+    range
+  } = _ref;
+  const scale = scaleType === 'log' ? scaleLog() : scaleLinear();
+  return scale.domain([domain.min, domain.max]).range([range.min, range.max]);
+};
+
+/**
+ * Create a categorical scale (band)
+ * @returns A categorical scale function
+ */
+export const getCategoricalScale = _ref2 => {
+  let {
+    domain,
+    range,
+    padding = 0.1
+  } = _ref2;
+  const domainArray = Array.from({
+    length: domain.max - domain.min + 1
+  }, (_, i) => i);
+  const scale = scaleBand().domain(domainArray).range([range.min, range.max]).padding(padding);
+  return scale;
+};
+
+/**
+ * Convert a D3 scale to a serializable scale configuration that can be used in worklets
+ */
+export function convertToSerializableScale(d3Scale) {
+  if (!d3Scale) return undefined;
+  const domain = d3Scale.domain();
+  const range = d3Scale.range();
+
+  // Handle band/categorical scales
+  if (isCategoricalScale(d3Scale)) {
+    var _step;
+    const bandScale = d3Scale;
+    const bandwidth = bandScale.bandwidth();
+    const step = (_step = bandScale.step == null ? void 0 : bandScale.step()) != null ? _step : (range[1] - range[0]) / domain.length;
+    return {
+      type: 'band',
+      domain: [domain[0], domain[domain.length - 1]],
+      range: [range[0], range[range.length - 1]],
+      bandwidth,
+      step
+    };
+  }
+
+  // Handle log scales
+  if (isLogScale(d3Scale)) {
+    var _base;
+    const logScale = d3Scale;
+    // D3 log scales default to base 10
+    const base = (_base = logScale.base == null ? void 0 : logScale.base()) != null ? _base : 10;
+    return {
+      type: 'log',
+      domain: [domain[0], domain[domain.length - 1]],
+      range: [range[0], range[range.length - 1]],
+      base
+    };
+  }
+
+  // Handle linear scales (default)
+  if (isNumericScale(d3Scale)) {
+    return {
+      type: 'linear',
+      domain: [domain[0], domain[domain.length - 1]],
+      range: [range[0], range[range.length - 1]]
+    };
+  }
+  return undefined;
+}
+
+/**
+ * Convert multiple D3 scales to serializable scales
+ */
+export function convertScalesToSerializableScales(xScale, yScales) {
+  const result = {
+    yScales: {}
+  };
+
+  // Convert X scale
+  if (xScale) {
+    result.xScale = convertToSerializableScale(xScale);
+  }
+
+  // Convert Y scales
+  if (yScales) {
+    yScales.forEach((scale, id) => {
+      const serializableScale = convertToSerializableScale(scale);
+      if (serializableScale) {
+        result.yScales[id] = serializableScale;
+      }
+    });
+  }
+  return result;
+}
+
+/**
+ * Serializable scale implementations based on D3 scale concepts.
+ * These scales can be used directly on the UI thread in Reanimated worklets.
+ */
+
+/**
+ * Serializable linear scale function
+ */
+export function applyLinearScale(value, scale) {
+  'worklet';
+
+  const [d0, d1] = scale.domain;
+  const [r0, r1] = scale.range;
+  const t = (value - d0) / (d1 - d0); // normalize to [0, 1]
+  return r0 + t * (r1 - r0); // interpolate in range
+}
+
+/**
+ * Serializable log scale function
+ */
+export function applyLogScale(value, scale) {
+  'worklet';
+
+  var _scale$base;
+  const [d0, d1] = scale.domain;
+  const [r0, r1] = scale.range;
+  const base = (_scale$base = scale.base) != null ? _scale$base : 10;
+  const logBase = base === 10 ? Math.log10 : base === Math.E ? Math.log : x => Math.log(x) / Math.log(base);
+  const t = (logBase(value) - logBase(d0)) / (logBase(d1) - logBase(d0));
+  return r0 + t * (r1 - r0);
+}
+
+/**
+ * Serializable band scale function
+ */
+export function applyBandScale(value, scale) {
+  'worklet';
+
+  const [r0, r1] = scale.range;
+  const [domainMin, domainMax] = scale.domain;
+  const n = domainMax - domainMin + 1;
+  const step = scale.step;
+  const index = value - domainMin;
+  if (index < 0 || index >= n) {
+    return r0;
+  }
+  const paddingOffset = step - scale.bandwidth;
+  const bandStart = r0 + step * index + paddingOffset;
+  return bandStart;
+}
+
+/**
+ * Universal serializable scale function that handles any scale type
+ */
+export function applySerializableScale(value, scale) {
+  'worklet';
+
+  switch (scale.type) {
+    case 'linear':
+      return applyLinearScale(value, scale);
+    case 'log':
+      return applyLogScale(value, scale);
+    case 'band':
+      return applyBandScale(value, scale);
+    default:
+      return 0;
+  }
+}
+
+/**
+ * Get bandwidth for band scales (returns 0 for other scale types)
+ */
+export function getScaleBandwidth(scale) {
+  'worklet';
+
+  if (scale.type === 'band') {
+    return scale.bandwidth;
+  }
+  return 0;
+}
+
+/**
+ * Invert a linear scale - convert from range value back to domain value
+ */
+export function invertLinearScale(rangeValue, scale) {
+  'worklet';
+
+  const [d0, d1] = scale.domain;
+  const [r0, r1] = scale.range;
+  const t = (rangeValue - r0) / (r1 - r0); // normalize to [0, 1]
+  return d0 + t * (d1 - d0); // interpolate in domain
+}
+
+/**
+ * Invert a log scale - convert from range value back to domain value
+ */
+export function invertLogScale(rangeValue, scale) {
+  'worklet';
+
+  var _scale$base2;
+  const [d0, d1] = scale.domain;
+  const [r0, r1] = scale.range;
+  const base = (_scale$base2 = scale.base) != null ? _scale$base2 : 10;
+  const logBase = base === 10 ? Math.log10 : base === Math.E ? Math.log : x => Math.log(x) / Math.log(base);
+  const t = (rangeValue - r0) / (r1 - r0); // normalize to [0, 1]
+  const logValue = logBase(d0) + t * (logBase(d1) - logBase(d0));
+
+  // Convert back from log space
+  return base === 10 ? Math.pow(10, logValue) : base === Math.E ? Math.exp(logValue) : Math.pow(base, logValue);
+}
+
+/**
+ * Invert a band scale - convert from range value back to domain index
+ */
+export function invertBandScale(rangeValue, scale) {
+  'worklet';
+
+  const [r0, r1] = scale.range;
+  const n = scale.domain.length;
+  const step = (r1 - r0) / n;
+
+  // Find which band this range value falls into
+  const index = Math.floor((rangeValue - r0) / step);
+
+  // Clamp to valid range
+  return Math.max(0, Math.min(index, n - 1));
+}
+
+/**
+ * Universal serializable scale invert function that handles any scale type
+ */
+export function invertSerializableScale(rangeValue, scale) {
+  'worklet';
+
+  switch (scale.type) {
+    case 'linear':
+      return invertLinearScale(rangeValue, scale);
+    case 'log':
+      return invertLogScale(rangeValue, scale);
+    case 'band':
+      return invertBandScale(rangeValue, scale);
+    default:
+      return 0;
+  }
+}

package/esm/chart/utils/scrubber.js

@@ -0,0 +1,139 @@
+/**
+ * Determines which side (left/right) to place scrubber labels based on available space.
+ * Prefers right side, switches to left when labels would overflow.
+ */
+export const getLabelPosition = function (beaconX, maxLabelWidth, drawingArea, xOffset) {
+  'worklet';
+
+  // any regular functions in ui thread must be marked with 'worklet'
+  if (xOffset === void 0) {
+    xOffset = 16;
+  }
+  if (drawingArea.width <= 0 || drawingArea.height <= 0) {
+    return 'right';
+  }
+  const availableRightSpace = drawingArea.x + drawingArea.width - beaconX;
+  const requiredSpace = maxLabelWidth + xOffset;
+  return requiredSpace <= availableRightSpace ? 'right' : 'left';
+};
+/**
+ * Calculates Y positions for all labels avoiding overlaps while maintaining order.
+ */
+export const calculateLabelYPositions = (dimensions, drawingArea, labelHeight, minGap) => {
+  'worklet';
+
+  if (dimensions.length === 0) {
+    return new Map();
+  }
+
+  // Sort by preferred Y values and create working labels
+  const sortedLabels = [...dimensions].sort((a, b) => a.preferredY - b.preferredY).map(dim => ({
+    seriesId: dim.seriesId,
+    preferredY: dim.preferredY,
+    finalY: dim.preferredY
+  }));
+
+  // Initial bounds fitting
+  const minY = drawingArea.y + labelHeight / 2;
+  const maxY = drawingArea.y + drawingArea.height - labelHeight / 2;
+  const requiredDistance = labelHeight + minGap;
+  for (const label of sortedLabels) {
+    // Clamp each label to the drawing area
+    label.finalY = Math.max(minY, Math.min(maxY, label.preferredY));
+  }
+
+  // First pass: push down any overlapping labels
+  for (let i = 1; i < sortedLabels.length; i++) {
+    const prev = sortedLabels[i - 1];
+    const current = sortedLabels[i];
+    const minAllowedY = prev.finalY + requiredDistance;
+    if (current.finalY < minAllowedY) {
+      current.finalY = minAllowedY;
+    }
+  }
+
+  // Find collision groups - groups of labels that are tightly packed (gap < minGap between them)
+  const collisionGroups = [];
+  let currentGroup = [sortedLabels[0]];
+  for (let i = 1; i < sortedLabels.length; i++) {
+    const prev = sortedLabels[i - 1];
+    const current = sortedLabels[i];
+    const gap = current.finalY - prev.finalY - labelHeight;
+    if (gap < minGap + 0.01) {
+      // Labels are touching or very close - part of same collision group
+      currentGroup.push(current);
+    } else {
+      // Gap is large enough - start new group
+      collisionGroups.push(currentGroup);
+      currentGroup = [current];
+    }
+  }
+  collisionGroups.push(currentGroup);
+
+  // Process each collision group - optimize positioning to minimize displacement
+  for (const group of collisionGroups) {
+    if (group.length === 1) {
+      // Single label, already at best position
+      continue;
+    }
+    const groupLastLabel = group[group.length - 1];
+    const groupFirstLabel = group[0];
+    const groupOverflow = groupLastLabel.finalY + labelHeight / 2 - (drawingArea.y + drawingArea.height);
+
+    // Calculate the ideal center point for this group
+    const groupPreferredCenter = group.reduce((sum, label) => sum + label.preferredY, 0) / group.length;
+    const groupTotalNeeded = group.length * labelHeight + (group.length - 1) * minGap;
+    if (groupOverflow <= 0) {
+      // Group fits, but let's center it better if possible
+      // Calculate how much we can shift up/down to center around preferred positions
+      const currentCenter = (groupFirstLabel.finalY + groupLastLabel.finalY) / 2;
+      const desiredShift = groupPreferredCenter - currentCenter;
+
+      // Calculate max shift in each direction
+      const maxShiftUp = groupFirstLabel.finalY - minY;
+      const maxShiftDown = maxY - groupLastLabel.finalY;
+
+      // Apply the shift, constrained by boundaries
+      const actualShift = Math.max(-maxShiftUp, Math.min(maxShiftDown, desiredShift));
+      if (Math.abs(actualShift) > 0.01) {
+        for (const label of group) {
+          label.finalY += actualShift;
+        }
+      }
+    } else {
+      // Group overflows - need to adjust
+      const groupStartY = groupFirstLabel.finalY - labelHeight / 2;
+      const availableSpace = drawingArea.y + drawingArea.height - groupStartY;
+      const maxShiftUp = groupFirstLabel.finalY - minY;
+      if (maxShiftUp >= groupOverflow) {
+        // Can shift entire group up to fit
+        for (const label of group) {
+          label.finalY -= groupOverflow;
+        }
+      } else if (groupTotalNeeded <= availableSpace) {
+        // Can't shift enough, but there's room - redistribute with proper spacing
+        let currentY = Math.max(minY, groupFirstLabel.finalY - maxShiftUp);
+        const gap = (availableSpace - group.length * labelHeight) / Math.max(1, group.length - 1);
+        for (const label of group) {
+          label.finalY = currentY;
+          currentY += labelHeight + gap;
+        }
+      } else {
+        // Not enough space even with compression - compress gaps and fit to bottom
+        const compressedGap = Math.max(1, (availableSpace - group.length * labelHeight) / Math.max(1, group.length - 1));
+        // Position so last label is at maxY
+        let currentY = maxY - (group.length - 1) * (labelHeight + compressedGap);
+        currentY = Math.max(minY, currentY);
+        for (const label of group) {
+          label.finalY = currentY;
+          currentY += labelHeight + compressedGap;
+        }
+      }
+    }
+  }
+  const result = new Map();
+  for (const label of sortedLabels) {
+    result.set(label.seriesId, label.finalY);
+  }
+  return result;
+};

package/esm/chart/utils/transition.js

@@ -0,0 +1,185 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useAnimatedReaction, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { notifyChange, Skia } from '@shopify/react-native-skia';
+import { interpolatePath } from 'd3-interpolate-path';
+
+/**
+ * Transition for animations.
+ * Supports timing and spring animation types.
+ * Used for paths, positions, opacity, and any other animated properties.
+ *
+ * @example
+ * // Spring animation
+ * { type: 'spring', damping: 10, stiffness: 100 }
+ *
+ * @example
+ * // Timing animation
+ * { type: 'timing', duration: 500, easing: Easing.inOut(Easing.ease) }
+ */
+
+/**
+ * Default transition configuration used across all chart components.
+ */
+export const defaultTransition = {
+  type: 'spring',
+  stiffness: 900,
+  damping: 120
+};
+
+/**
+ * Duration in milliseconds for accessory elements to fade in.
+ */
+export const accessoryFadeTransitionDuration = 150;
+
+/**
+ * Delay in milliseconds before accessory elements fade in.
+ */
+export const accessoryFadeTransitionDelay = 350;
+
+/**
+ * Custom hook that uses d3-interpolate-path for more robust path interpolation.
+ * then use Skia's native interpolation in the worklet.
+ *
+ * @param progress - Shared value between 0 and 1
+ * @param fromPath - Starting path as SVG string
+ * @param toPath - Ending path as SVG string
+ * @returns Interpolated SkPath as a shared value
+ */
+export const useD3PathInterpolation = (progress, fromPath, toPath) => {
+  // Pre-compute intermediate paths on JS thread using d3-interpolate-path
+  const {
+    fromSkiaPath,
+    i0,
+    i1,
+    toSkiaPath
+  } = useMemo(() => {
+    var _Skia$Path$MakeFromSV, _Skia$Path$MakeFromSV2, _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4;
+    const pathInterpolator = interpolatePath(fromPath, toPath);
+    const d = 1e-3;
+    return {
+      fromSkiaPath: (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(fromPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make(),
+      i0: (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(pathInterpolator(d))) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make(),
+      i1: (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(1 - d))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make(),
+      toSkiaPath: (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(toPath)) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make()
+    };
+  }, [fromPath, toPath]);
+  const result = useSharedValue(fromSkiaPath);
+  useAnimatedReaction(() => progress.value, t => {
+    'worklet';
+
+    var _i1$interpolate;
+    result.value = (_i1$interpolate = i1.interpolate(i0, t)) != null ? _i1$interpolate : toSkiaPath;
+    notifyChange(result);
+  }, [fromSkiaPath, i0, i1, toSkiaPath]);
+  return result;
+};
+
+// Interpolator and useInterpolator are brought over from non exported code in @shopify/react-native-skia
+/**
+ * @worklet
+ */
+
+export const useInterpolator = (factory, value, interpolator, input, output, options) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const init = useMemo(() => factory(), []);
+  const result = useSharedValue(init);
+  useAnimatedReaction(() => value.value, val => {
+    result.value = interpolator(val, input, output, options, result.value);
+    notifyChange(result);
+  }, [input, output, options]);
+  return result;
+};
+
+/**
+ * Builds a react-native-reanimated animation based on the configuration.
+ *
+ * @param targetValue - The target value to animate to
+ * @param config - The transition configuration
+ * @returns The animation value to assign to a shared value
+ *
+ * @example
+ * // Use directly for animation
+ * progress.value = 0;
+ * progress.value = buildTransition(1, { type: 'spring', damping: 10, stiffness: 100 });
+ *
+ * @example
+ * // Coordinate animations
+ * animatedX.value = buildTransition(100, { type: 'spring', damping: 10, stiffness: 100 });
+ * animatedY.value = buildTransition(200, { type: 'spring', damping: 10, stiffness: 100 });
+ *
+ * @example
+ * // Timing animation
+ * progress.value = buildTransition(1, { type: 'timing', duration: 500 });
+ */
+export const buildTransition = (targetValue, transition) => {
+  'worklet';
+
+  switch (transition.type) {
+    case 'timing':
+      {
+        return withTiming(targetValue, transition);
+      }
+    case 'spring':
+      {
+        return withSpring(targetValue, transition);
+      }
+    default:
+      {
+        // Fallback to default transition config
+        return withSpring(targetValue, defaultTransition);
+      }
+  }
+};
+
+/**
+ * Hook for path animation state and transitions.
+ *
+ * @param currentPath - Current target path to animate to
+ * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
+ * @param transition - Transition configuration
+ * @returns Animated SkPath as a shared value
+ *
+ * @example
+ * // Simple path transition
+ * const path = usePathTransition({
+ *   currentPath: d ?? '',
+ *   animate: shouldAnimate,
+ *   transition: { type: 'timing', duration: 3000 }
+ * });
+ *
+ * @example
+ * // Enter animation with different initial config (like DefaultBar)
+ * const path = usePathTransition({
+ *   currentPath: targetPath,
+ *   initialPath: baselinePath,
+ *   animate: true,
+ *   transition: { type: 'timing', duration: 300 }
+ * });
+ */
+export const usePathTransition = _ref => {
+  let {
+    currentPath,
+    initialPath,
+    transition = defaultTransition
+  } = _ref;
+  // Track the previous path - updated in useEffect AFTER render,
+  // so during render it naturally holds the "from" path value
+  const previousPathRef = useRef(initialPath != null ? initialPath : currentPath);
+  const progress = useSharedValue(0);
+
+  // During render: previousPathRef still has old value, currentPath is new
+  const fromPath = previousPathRef.current;
+  const toPath = currentPath;
+  useEffect(() => {
+    const shouldAnimate = previousPathRef.current !== currentPath;
+    if (shouldAnimate) {
+      // Update ref for next path change (happens after this render)
+      previousPathRef.current = currentPath;
+
+      // Animate from old path to new path
+      progress.value = 0;
+      progress.value = buildTransition(1, transition);
+    }
+  }, [currentPath, transition, progress]);
+  return useD3PathInterpolation(progress, fromPath, toPath);
+};

package/esm/index.js

@@ -1 +1,4 @@
-export * from './sparkline';
+// codegen:start {preset: barrel, include: ./*/index.ts}
+export * from './chart';
+export * from './sparkline';
+// codegen:end