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

package/esm/chart/utils/chart.js

@@ -0,0 +1,270 @@
+import { isSharedValue } from 'react-native-reanimated';
+import { stack as d3Stack, stackOffsetDiverging, stackOrderNone } from 'd3-shape';
+export const defaultStackId = 'DEFAULT_STACK_ID';
+/**
+ * Type guard to check if bounds are complete with both min and max values.
+ * @param bounds - The bounds to validate
+ * @returns True if bounds has both min and max defined
+ */
+export const isValidBounds = bounds => bounds.min !== undefined && bounds.max !== undefined;
+/**
+ * Calculates the domain of a chart from series data.
+ * Domain represents the range of x-values from the data.
+ */
+export const getChartDomain = (series, min, max) => {
+  const domain = {
+    min,
+    max
+  };
+  if (domain.min !== undefined && domain.max !== undefined) {
+    return domain;
+  }
+  if (series.length > 0) {
+    const dataLength = Math.max(...series.map(s => {
+      var _s$data;
+      return ((_s$data = s.data) == null ? void 0 : _s$data.length) || 0;
+    }));
+    if (dataLength > 0) {
+      if (domain.min === undefined) domain.min = 0;
+      if (domain.max === undefined) domain.max = dataLength - 1;
+    }
+  }
+  return domain;
+};
+
+/**
+ * Creates a composite stack key that includes both stack ID and y-axis ID.
+ * This ensures series with different y-scales don't get stacked together.
+ */
+const createStackKey = series => {
+  if (series.stackId === undefined) return undefined;
+
+  // Include y-axis ID to prevent cross-scale stacking
+  const yAxisId = series.yAxisId || 'default';
+  return series.stackId + ":" + yAxisId;
+};
+
+/**
+ * Transforms series data into stacked data using D3's stack algorithm.
+ * Returns a map of series ID to transformed [baseline, value] tuples.
+ *
+ * @param series - Array of series with potential stack properties
+ * @returns Map of series ID to stacked data arrays
+ */
+export const getStackedSeriesData = series => {
+  const stackedDataMap = new Map();
+  const numericStackGroups = new Map();
+  const individualSeries = [];
+  series.forEach(s => {
+    var _s$data2;
+    const stackKey = createStackKey(s);
+    const hasTupleData = (_s$data2 = s.data) == null ? void 0 : _s$data2.some(val => Array.isArray(val));
+    if (hasTupleData || stackKey === undefined) {
+      individualSeries.push(s);
+    } else {
+      if (!numericStackGroups.has(stackKey)) {
+        numericStackGroups.set(stackKey, []);
+      }
+      numericStackGroups.get(stackKey).push(s);
+    }
+  });
+  individualSeries.forEach(s => {
+    if (!s.data) return;
+    const normalizedData = s.data.map(val => {
+      if (val === null) return null;
+      if (Array.isArray(val)) {
+        return val;
+      }
+      if (typeof val === 'number') {
+        return [0, val];
+      }
+      return null;
+    });
+    stackedDataMap.set(s.id, normalizedData);
+  });
+  numericStackGroups.forEach((groupSeries, stackKey) => {
+    const maxLength = Math.max(...groupSeries.map(s => {
+      var _s$data3;
+      return ((_s$data3 = s.data) == null ? void 0 : _s$data3.length) || 0;
+    }));
+    if (maxLength === 0) return;
+    const dataset = new Array(maxLength).fill(undefined).map((_, i) => {
+      const row = {};
+      for (const s of groupSeries) {
+        var _s$data4;
+        const val = (_s$data4 = s.data) == null ? void 0 : _s$data4[i];
+        const num = typeof val === 'number' ? val : 0;
+        row[s.id] = num;
+      }
+      return row;
+    });
+    const keys = groupSeries.map(s => s.id);
+    const stackedSeries = d3Stack().keys(keys).order(stackOrderNone).offset(stackOffsetDiverging)(dataset);
+    stackedSeries.forEach((layer, layerIndex) => {
+      const seriesId = keys[layerIndex];
+      const stackedData = layer.map(_ref => {
+        let [bottom, top] = _ref;
+        return [bottom, top];
+      });
+      stackedDataMap.set(seriesId, stackedData);
+    });
+  });
+  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 : 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.
+ * Handles stacking by transforming data when series have stack properties.
+ */
+export const getChartRange = (series, min, max) => {
+  const range = {
+    min,
+    max
+  };
+  if (range.min !== undefined && range.max !== undefined) {
+    return range;
+  }
+  if (series.length === 0) {
+    return range;
+  }
+
+  // Group series by composite stack key for proper calculation
+  const stackGroups = new Map();
+  series.forEach(s => {
+    const stackKey = createStackKey(s);
+    if (!stackGroups.has(stackKey)) {
+      stackGroups.set(stackKey, []);
+    }
+    stackGroups.get(stackKey).push(s);
+  });
+
+  // Check if we have any stacked series
+  const hasStacks = Array.from(stackGroups.keys()).some(k => k !== undefined);
+  if (hasStacks) {
+    // Get stacked data using the shared function
+    const stackedDataMap = getStackedSeriesData(series);
+
+    // Find the extreme values from the stacked data
+    let stackedMax = 0;
+    let stackedMin = 0;
+    stackedDataMap.forEach(stackedData => {
+      stackedData.forEach(point => {
+        if (point !== null) {
+          const [bottom, top] = point;
+          if (top > stackedMax) stackedMax = top;
+          if (bottom < stackedMin) stackedMin = bottom;
+        }
+      });
+    });
+
+    // Don't add padding - let D3's nice() function handle axis padding
+    if (range.min === undefined) range.min = Math.min(0, stackedMin);
+    if (range.max === undefined) range.max = Math.max(0, stackedMax);
+  } else {
+    // No stacking, calculate range from raw values
+    const allValues = [];
+    series.forEach(s => {
+      if (s.data) {
+        s.data.forEach(point => {
+          if (typeof point === 'number') {
+            allValues.push(point);
+          } else if (Array.isArray(point)) {
+            // Filter out null values from tuples
+            const validValues = point.filter(val => val !== null);
+            allValues.push(...validValues);
+          }
+        });
+      }
+    });
+    if (allValues.length > 0) {
+      const minValue = Math.min(...allValues);
+      const maxValue = Math.max(...allValues);
+      if (range.min === undefined) range.min = minValue;
+      if (range.max === undefined) range.max = maxValue;
+    }
+  }
+  return range;
+};
+export const defaultChartInset = {
+  top: 32,
+  left: 16,
+  bottom: 16,
+  right: 16
+};
+
+/**
+ * Normalize padding to include all sides with a value.
+ * @param padding - The padding to get.
+ * @param defaults - Optional complete default values to use instead of 0.
+ * @returns The calculated padding.
+ */
+/**
+ * Normalize inset to include all sides with a value.
+ * @param inset - The inset to get.
+ * @param defaults - Optional complete default values to use instead of 0.
+ * @returns The calculated inset.
+ */
+export const getChartInset = (inset, defaults) => {
+  var _inset$top, _inset$left, _inset$bottom, _inset$right;
+  const baseDefaults = defaults != null ? defaults : {
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  };
+  if (typeof inset === 'number') {
+    return {
+      top: inset,
+      left: inset,
+      bottom: inset,
+      right: inset
+    };
+  }
+  return {
+    top: (_inset$top = inset == null ? void 0 : inset.top) != null ? _inset$top : baseDefaults.top,
+    left: (_inset$left = inset == null ? void 0 : inset.left) != null ? _inset$left : baseDefaults.left,
+    bottom: (_inset$bottom = inset == null ? void 0 : inset.bottom) != null ? _inset$bottom : baseDefaults.bottom,
+    right: (_inset$right = inset == null ? void 0 : inset.right) != null ? _inset$right : baseDefaults.right
+  };
+};
+
+/**
+ * Unwraps an optionally animated value to get the raw value.
+ * @param value - The value to unwrap.
+ * @returns The raw value.
+ */
+export const unwrapAnimatedValue = value => {
+  'worklet';
+
+  if (isSharedValue(value)) {
+    return value.value;
+  }
+  return value;
+};

package/esm/chart/utils/context.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Context value for Cartesian (X/Y) coordinate charts.
+ * Contains axis-specific methods and properties for rectangular coordinate systems.
+ */
+
+export const ScrubberContext = /*#__PURE__*/createContext(undefined);
+export const useScrubberContext = () => {
+  const context = useContext(ScrubberContext);
+  if (!context) {
+    throw new Error('useScrubberContext must be used within a Chart component');
+  }
+  return context;
+};

package/esm/chart/utils/gradient.js

@@ -0,0 +1,305 @@
+import { Skia } from '@shopify/react-native-skia';
+import { applySerializableScale, isCategoricalScale, isSerializableScale } from './scale';
+
+/**
+ * Defines a color transition point in the gradient
+ */
+
+/**
+ * Defines a gradient.
+ */
+
+/**
+ * Resolves gradient stops, handling both static arrays and function forms.
+ * When stops is a function, calls it with the domain bounds.
+ */
+export const getGradientStops = (stops, domain) => {
+  if (typeof stops === 'function') {
+    return stops(domain);
+  }
+  return stops;
+};
+
+/**
+ * Processes Gradient to gradient configuration for SVG linearGradient.
+ * Colors are smoothly interpolated between stops by the browser.
+ * Multiple stops at the same offset create hard color transitions.
+ */
+const processGradientStops = (stops, scale) => {
+  if (stops.length === 0) {
+    console.warn('Gradient has no stops - falling back to default');
+    return;
+  }
+
+  // Check if stops are in ascending order
+  const isOutOfOrder = stops.some((stop, i) => {
+    return i > 0 && stop.offset < stops[i - 1].offset;
+  });
+  if (isOutOfOrder) {
+    console.warn("Gradient: stop offsets must be in ascending order");
+    return;
+  }
+  const [rangeMin, rangeMax] = scale.range();
+  const rangeSpan = Math.abs(rangeMax - rangeMin);
+
+  // Convert data value offsets to normalized positions (0-1) using scale
+  const normalizedStops = stops.map(stop => {
+    var _stop$opacity;
+    const stopPosition = scale(stop.offset);
+    const normalized = stopPosition === undefined ? 0 : Math.max(0, Math.min(1, Math.abs(stopPosition - rangeMin) / rangeSpan));
+    return {
+      offset: normalized,
+      // Now 0-1 normalized (not data space)
+      color: stop.color,
+      opacity: (_stop$opacity = stop.opacity) != null ? _stop$opacity : 1
+    };
+  }).sort((a, b) => a.offset - b.offset);
+  return normalizedStops;
+};
+
+/**
+ * Interpolates between two colors using linear interpolation.
+ * Returns an rgba string.
+ */
+const interpolateColor = (color1, color2, t) => {
+  'worklet';
+
+  const c1 = Skia.Color(color1);
+  const c2 = Skia.Color(color2);
+  const r = Math.round((c1[0] + (c2[0] - c1[0]) * t) * 255);
+  const g = Math.round((c1[1] + (c2[1] - c1[1]) * t) * 255);
+  const b = Math.round((c1[2] + (c2[2] - c1[2]) * t) * 255);
+  const a = c1[3] + (c2[3] - c1[3]) * t;
+  return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
+};
+
+/**
+ * Adds an opacity to a color
+ * Returns an rgba string.
+ */
+export const getColorWithOpacity = (color1, opacity) => {
+  const c = Skia.Color(color1);
+  return "rgba(" + c[0] * 255 + ", " + c[1] * 255 + ", " + c[2] * 255 + ", " + opacity + ")";
+};
+
+/**
+ * Creates a gradient configuration for SVG components.
+ * Processes a GradientDefinition into a renderable GradientConfig.
+ * Supports both numeric scales (linear, log) and categorical scales (band).
+ *
+ * @param gradient - GradientDefinition configuration (required)
+ * @param xScale - X-axis scale (required)
+ * @param yScale - Y-axis scale (required)
+ * @returns GradientConfig or null if gradient processing fails
+ *
+ * @example
+ * const gradientConfig = useMemo(() => {
+ *   if (!gradient || !xScale || !yScale) return;
+ *   return getGradientConfig(gradient, xScale, yScale);
+ * }, [gradient, xScale, yScale]);
+ *
+ * if (gradientConfig) {
+ *   return (
+ *     <defs>
+ *       <Gradient
+ *         config={gradientConfig}
+ *         direction={gradient.axis === 'x' ? 'horizontal' : 'vertical'}
+ *         id={gradientId}
+ *       />
+ *     </defs>
+ *   );
+ * }
+ */
+export const getGradientConfig = (gradient, xScale, yScale) => {
+  if (!gradient) return;
+
+  // Get the scale based on axis
+  const scale = gradient.axis === 'x' ? xScale : yScale;
+  if (!scale) return;
+
+  // Extract domain from scale
+  const scaleDomain = scale.domain();
+  let domain;
+  if (isCategoricalScale(scale)) {
+    const domainArray = scaleDomain;
+    domain = {
+      min: domainArray[0],
+      max: domainArray[domainArray.length - 1]
+    };
+  } else {
+    const [min, max] = scaleDomain;
+    domain = {
+      min,
+      max
+    };
+  }
+  const resolvedStops = getGradientStops(gradient.stops, domain);
+  return processGradientStops(resolvedStops, scale);
+};
+
+/**
+ * Evaluates the color at a specific data value based on the gradient stops, ignoring opacity.
+ * @param stops - The gradient stops configuration
+ * @param dataValue - The data value to evaluate (for band scales, this is the index)
+ * @param scale - The scale to use for value mapping (handles log scales correctly)
+ * @returns The color string at this data value, or undefined if invalid
+ */
+export const evaluateGradientAtValue = (stops, dataValue, scale) => {
+  'worklet';
+
+  if (stops.length === 0) return;
+
+  // Determine range based on scale type
+  let rangeMin;
+  let rangeMax;
+  if (isSerializableScale(scale)) {
+    // SerializableScale has range as [number, number]
+    [rangeMin, rangeMax] = scale.range;
+  } else {
+    // ChartScaleFunction has range() method
+    const scaleRange = scale.range();
+    [rangeMin, rangeMax] = Array.isArray(scaleRange) ? scaleRange : [scaleRange, scaleRange]; // fallback for band scales
+  }
+  const rangeSpan = Math.abs(rangeMax - rangeMin);
+  if (rangeSpan === 0) return stops[0].color;
+
+  // Map dataValue through scale to get position
+  let dataPosition;
+  if (isSerializableScale(scale)) {
+    dataPosition = applySerializableScale(dataValue, scale);
+  } else {
+    const result = scale(dataValue);
+    if (result === undefined) return stops[0].color;
+    dataPosition = result;
+  }
+
+  // Normalize to 0-1 based on range
+  const normalizedValue = Math.max(0, Math.min(1, Math.abs(dataPosition - rangeMin) / rangeSpan));
+
+  // Map stop offsets through scale and normalize to 0-1
+  const positions = stops.map(stop => {
+    let stopPosition;
+    if (isSerializableScale(scale)) {
+      stopPosition = applySerializableScale(stop.offset, scale);
+    } else {
+      const result = scale(stop.offset);
+      if (result === undefined) return 0;
+      stopPosition = result;
+    }
+    return Math.max(0, Math.min(1, Math.abs(stopPosition - rangeMin) / rangeSpan));
+  });
+
+  // Find which segment we're in
+  if (normalizedValue < positions[0]) {
+    return stops[0].color;
+  }
+  if (normalizedValue >= positions[positions.length - 1]) {
+    return stops[stops.length - 1].color;
+  }
+
+  // Check if dataValue matches any stop offset exactly (for hard transitions)
+  for (let i = 0; i < stops.length; i++) {
+    if (dataValue === stops[i].offset) {
+      // Found exact match - check if there are multiple stops at this offset (hard transition)
+      // Use the LAST color at this offset for hard transitions
+      let lastIndexAtOffset = i;
+      while (lastIndexAtOffset + 1 < stops.length && stops[lastIndexAtOffset + 1].offset === stops[i].offset) {
+        lastIndexAtOffset++;
+      }
+      return stops[lastIndexAtOffset].color;
+    }
+  }
+
+  // Find the segment to interpolate between
+  for (let i = 0; i < positions.length - 1; i++) {
+    if (normalizedValue >= positions[i] && normalizedValue <= positions[i + 1]) {
+      const segmentStart = positions[i];
+      const segmentEnd = positions[i + 1];
+      if (segmentEnd === segmentStart) {
+        return stops[i].color;
+      }
+      const t = (normalizedValue - segmentStart) / (segmentEnd - segmentStart);
+      return interpolateColor(stops[i].color, stops[i + 1].color, t);
+    }
+  }
+  return stops[0].color;
+};
+
+/**
+ * Determines the baseline value for the gradient area by finding the value
+ * within the axis bounds that is closest to the target baseline.
+ *
+ * @param axisBounds - The min and max bounds of the axis
+ * @param baseline - The target baseline value (defaults to 0)
+ * @returns The value within bounds closest to the baseline
+ */
+export const getBaseline = function (axisBounds, baseline) {
+  if (baseline === void 0) {
+    baseline = 0;
+  }
+  const {
+    min,
+    max
+  } = axisBounds;
+
+  // Normalize to ensure lowerBound <= upperBound
+  const lowerBound = Math.min(min, max);
+  const upperBound = Math.max(min, max);
+
+  // If baseline is within the range, use it
+  if (lowerBound <= baseline && baseline <= upperBound) return baseline;
+
+  // Otherwise, return the bound closest to baseline
+  return Math.abs(lowerBound - baseline) < Math.abs(upperBound - baseline) ? lowerBound : upperBound;
+};
+
+/**
+ * Generates a gradient definition for the area chart based on the axis bounds
+ * and styling parameters. Ensures gradient stops are in ascending order.
+ *
+ * @param axisBounds - The min and max bounds of the axis
+ * @param baselineValue - The baseline value for the gradient
+ * @param fill - The color to use for the gradient
+ * @param peakOpacity - Opacity at the peak of the gradient
+ * @param baselineOpacity - Opacity at the baseline
+ * @returns A gradient definition with y-axis stops in ascending order
+ */
+export const createGradient = (axisBounds, baselineValue, fill, peakOpacity, baselineOpacity) => {
+  const {
+    min,
+    max
+  } = axisBounds;
+  const lowerBound = Math.min(min, max);
+  const upperBound = Math.max(min, max);
+  if (lowerBound < baselineValue && baselineValue < upperBound) {
+    return {
+      axis: 'y',
+      stops: [{
+        offset: lowerBound,
+        color: fill,
+        opacity: peakOpacity
+      }, {
+        offset: baselineValue,
+        color: fill,
+        opacity: baselineOpacity
+      }, {
+        offset: upperBound,
+        color: fill,
+        opacity: peakOpacity
+      }]
+    };
+  }
+  const peakValue = Math.abs(min - baselineValue) > Math.abs(max - baselineValue) ? min : max;
+  return {
+    axis: 'y',
+    stops: [{
+      offset: peakValue,
+      color: fill,
+      opacity: peakOpacity
+    }, {
+      offset: baselineValue,
+      color: fill,
+      opacity: baselineOpacity
+    }].sort((a, b) => a.offset - b.offset)
+  };
+};

package/esm/chart/utils/index.js

@@ -0,0 +1,12 @@
+// codegen:start {preset: barrel, include: ./*.ts, exclude: ./__tests__/*.ts}
+export * from './axis';
+export * from './bar';
+export * from './chart';
+export * from './context';
+export * from './gradient';
+export * from './path';
+export * from './point';
+export * from './scale';
+export * from './scrubber';
+export * from './transition';
+// codegen:end