@coinbase/cds-mobile-visualization 3.4.0-beta.1 → 3.4.0-beta.11

package/esm/chart/utils/point.js

@@ -1,20 +1,47 @@
-import { isCategoricalScale, isLogScale, isNumericScale } from './scale';
+import { applyBandScale, applySerializableScale, isCategoricalScale, isLogScale, isNumericScale } from './scale';
+
+/**
+ * Position a label should be placed relative to the point
+ *
+ * @example
+ * 'top' would have the label be located above the point itself,
+ * and thus the vertical alignment of that text would be bottom.
+ */
 
 /**
  * Get a point from a data value and a scale.
- * @note for categorical scales, the point will be centered within the band.
- * @note for log scales, zero and negative values are clamped to a small positive value.
- * @param data - the data value.
- * @param scale - the scale function.
- * @returns the pixel value (defaulting to 0 if data value is not defined in scale).
+ *
+ * @param dataValue - The data value to convert to a pixel position.
+ * @param scale - The scale function.
+ * @param anchor (@default 'middle') - For band scales, where to anchor the point within the band.
+ * @returns The pixel value (@default 0 if data value is not defined in scale).
  */
-export const getPointOnScale = (dataValue, scale) => {
-  var _scale2;
+export const getPointOnScale = function (dataValue, scale, anchor) {
+  var _scale;
+  if (anchor === void 0) {
+    anchor = 'middle';
+  }
   if (isCategoricalScale(scale)) {
-    var _scale, _scale$bandwidth;
-    const bandStart = (_scale = scale(dataValue)) != null ? _scale : 0;
-    const bandwidth = (_scale$bandwidth = scale.bandwidth()) != null ? _scale$bandwidth : 0;
-    return bandStart + bandwidth / 2;
+    var _bandScale$bandwidth, _bandScale$step;
+    const bandScale = scale;
+    const bandStart = bandScale(dataValue);
+    if (bandStart === undefined) return 0;
+    const bandwidth = (_bandScale$bandwidth = bandScale.bandwidth == null ? void 0 : bandScale.bandwidth()) != null ? _bandScale$bandwidth : 0;
+    const step = (_bandScale$step = bandScale.step == null ? void 0 : bandScale.step()) != null ? _bandScale$step : bandwidth;
+    const paddingOffset = (step - bandwidth) / 2;
+    const stepStart = bandStart - paddingOffset;
+    switch (anchor) {
+      case 'stepStart':
+        return stepStart;
+      case 'bandStart':
+        return bandStart;
+      case 'middle':
+        return bandStart + bandwidth / 2;
+      case 'bandEnd':
+        return bandStart + bandwidth;
+      case 'stepEnd':
+        return stepStart + step;
+    }
   }
 
   // For log scales, ensure the value is positive
@@ -22,9 +49,75 @@ export const getPointOnScale = (dataValue, scale) => {
   if (isLogScale(scale) && dataValue <= 0) {
     adjustedValue = 0.001; // Use a small positive value for log scales
   }
-  return (_scale2 = scale(adjustedValue)) != null ? _scale2 : 0;
+  return (_scale = scale(adjustedValue)) != null ? _scale : 0;
 };
 
+/**
+ * Get a point from a data value and a serializable scale (worklet-compatible).
+ *
+ * @param dataValue - The data value to convert to a pixel position.
+ * @param scale - The serializable scale function.
+ * @param anchor (@default 'middle') - For band scales, where to anchor the point within the band.
+ * @returns The pixel value (@default 0 if data value is not defined in scale).
+ */
+export function getPointOnSerializableScale(dataValue, scale, anchor) {
+  'worklet';
+
+  // Handle band scales with the specified position
+  if (anchor === void 0) {
+    anchor = 'middle';
+  }
+  if (scale.type === 'band') {
+    const bandScale = scale;
+    const [domainMin, domainMax] = bandScale.domain;
+    const index = dataValue - domainMin;
+    const n = domainMax - domainMin + 1;
+    if (index < 0 || index >= n) {
+      return 0;
+    }
+    const bandStart = applyBandScale(dataValue, bandScale);
+    const paddingOffset = (bandScale.step - bandScale.bandwidth) / 2;
+    const stepStart = bandStart - paddingOffset;
+    switch (anchor) {
+      case 'stepStart':
+        return stepStart;
+      case 'bandStart':
+        return bandStart;
+      case 'middle':
+        return bandStart + bandScale.bandwidth / 2;
+      case 'bandEnd':
+        return bandStart + bandScale.bandwidth;
+      case 'stepEnd':
+        return stepStart + bandScale.step;
+    }
+  }
+
+  // For log scales, ensure the value is positive
+  if (scale.type === 'log' && dataValue <= 0) {
+    dataValue = 0.001; // Use a small positive value for log scales
+  }
+  return applySerializableScale(dataValue, scale);
+}
+
+/**
+ * Projects a single data point to pixel coordinates using serializable scales.
+ * This is the worklet-compatible version for use in react-native-reanimated.
+ */
+export function projectPointWithSerializableScale(_ref) {
+  'worklet';
+
+  let {
+    x,
+    y,
+    xScale,
+    yScale
+  } = _ref;
+  return {
+    x: getPointOnSerializableScale(x, xScale),
+    y: getPointOnSerializableScale(y, yScale)
+  };
+}
+
 /**
  * Projects a data point to pixel coordinates using the chart scale.
  * Automatically handles log scale transformations for zero/negative values.
@@ -40,13 +133,13 @@ export const getPointOnScale = (dataValue, scale) => {
  * const pixelCoord = projectPoint({ x: 2, y: 10, chartScale, xData: ['Jan', 'Feb', 'Mar'] });
  * ```
  */
-export const projectPoint = _ref => {
+export const projectPoint = _ref2 => {
   let {
     x,
     y,
     xScale,
     yScale
-  } = _ref;
+  } = _ref2;
   return {
     x: getPointOnScale(x, xScale),
     y: getPointOnScale(y, yScale)
@@ -65,14 +158,14 @@ export const projectPoint = _ref => {
  * const pixelPoints = projectPoints({ data, chartScale, xData: ['Jan', 'Feb', 'Mar'] });
  * ```
  */
-export const projectPoints = _ref2 => {
+export const projectPoints = _ref3 => {
   let {
     data,
     xScale,
     yScale,
     xData,
     yData
-  } = _ref2;
+  } = _ref3;
   if (data.length === 0) {
     return [];
   }
@@ -115,4 +208,65 @@ export const projectPoints = _ref2 => {
       yScale
     });
   });
+};
+
+/**
+ * Determines text alignment based on label position.
+ * For example, a 'top' position needs the text aligned to the 'bottom' so it appears above the point.
+ */
+export const getAlignmentFromPosition = position => {
+  let horizontalAlignment = 'center';
+  let verticalAlignment = 'middle';
+  switch (position) {
+    case 'top':
+      verticalAlignment = 'bottom';
+      break;
+    case 'bottom':
+      verticalAlignment = 'top';
+      break;
+    case 'left':
+      horizontalAlignment = 'right';
+      break;
+    case 'right':
+      horizontalAlignment = 'left';
+      break;
+    case 'center':
+    default:
+      horizontalAlignment = 'center';
+      verticalAlignment = 'middle';
+      break;
+  }
+  return {
+    horizontalAlignment,
+    verticalAlignment
+  };
+};
+
+/**
+ * Calculates the final label coordinates by applying offset based on position.
+ */
+export const getLabelCoordinates = (x, y, position, offset) => {
+  let dx = 0;
+  let dy = 0;
+  switch (position) {
+    case 'top':
+      dy = -offset;
+      break;
+    case 'bottom':
+      dy = offset;
+      break;
+    case 'left':
+      dx = -offset;
+      break;
+    case 'right':
+      dx = offset;
+      break;
+    case 'center':
+    default:
+      break;
+  }
+  return {
+    x: x + dx,
+    y: y + dy
+  };
 };

package/esm/chart/utils/scale.js

@@ -16,6 +16,16 @@ 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
@@ -43,6 +53,236 @@ export const getCategoricalScale = _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);
+  const scale = scaleBand().domain(domainArray).range([range.min, range.max]).paddingInner(padding).paddingOuter(padding / 2);
   return scale;
-};
+};
+
+/**
+ * Anchor position for points on a scale. Currently used only for band scales.
+ *
+ * For band scales, this determines where within the band to position a point:
+ * - `'stepStart'` - At the start of the step
+ * - `'bandStart'` - At the start of the band
+ * - `'middle'` - At the center of the band
+ * - `'bandEnd'` - At the end of the band
+ * - `'stepEnd'` - At the end of the step
+ */
+
+/**
+ * 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) / 2;
+  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;
+};