@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/scrubber/ScrubberBeaconLabelGroup.js

@@ -1,212 +0,0 @@
-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); }
-import { memo, useCallback, useMemo, useState } from 'react';
-import { useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
-import { useCartesianChartContext } from '../ChartProvider';
-import { applySerializableScale, unwrapAnimatedValue, useScrubberContext } from '../utils';
-import { calculateLabelYPositions, getLabelPosition } from '../utils/scrubber';
-import { buildTransition, defaultTransition, getTransition } from '../utils/transition';
-import { DefaultScrubberBeaconLabel } from './DefaultScrubberBeaconLabel';
-import { jsx as _jsx } from "react/jsx-runtime";
-const PositionedLabel = /*#__PURE__*/memo(_ref => {
-  let {
-    index,
-    positions,
-    position,
-    isIdle,
-    updateTransition,
-    label,
-    color,
-    seriesId,
-    onDimensionsChange,
-    BeaconLabelComponent,
-    labelHorizontalOffset,
-    labelFont
-  } = _ref;
-  const opacity = useDerivedValue(() => positions.value[index] !== null ? 1 : 0, [positions, index]);
-  const x = useDerivedValue(() => {
-    var _positions$value$inde, _positions$value$inde2;
-    return (_positions$value$inde = (_positions$value$inde2 = positions.value[index]) == null ? void 0 : _positions$value$inde2.x) != null ? _positions$value$inde : 0;
-  }, [positions, index]);
-  const targetY = useDerivedValue(() => {
-    var _positions$value$inde3, _positions$value$inde4;
-    return (_positions$value$inde3 = (_positions$value$inde4 = positions.value[index]) == null ? void 0 : _positions$value$inde4.y) != null ? _positions$value$inde3 : 0;
-  }, [positions, index]);
-  const idleAnimatedY = useSharedValue(null);
-  useAnimatedReaction(() => ({
-    y: targetY.value,
-    idle: unwrapAnimatedValue(isIdle)
-  }), (current, previous) => {
-    // Only animate idle-to-idle updates, immediately set the value for other changes.
-    if (previous != null && previous.idle && current.idle) {
-      idleAnimatedY.value = buildTransition(current.y, updateTransition);
-    } else {
-      idleAnimatedY.value = current.y;
-    }
-  }, [updateTransition]);
-
-  // When scrubbing, use the targetY value, when idle, use the idleAnimatedY value.
-  const y = useDerivedValue(() => unwrapAnimatedValue(isIdle) && idleAnimatedY.value !== null ? idleAnimatedY.value : targetY.value, [isIdle, idleAnimatedY, targetY]);
-  const dx = useDerivedValue(() => {
-    return position.value === 'right' ? labelHorizontalOffset : -labelHorizontalOffset;
-  }, [position, labelHorizontalOffset]);
-  const horizontalAlignment = useDerivedValue(() => position.value === 'right' ? 'left' : 'right', [position]);
-  return /*#__PURE__*/_jsx(BeaconLabelComponent, {
-    color: color,
-    dx: dx,
-    font: labelFont,
-    horizontalAlignment: horizontalAlignment,
-    label: label,
-    onDimensionsChange: d => onDimensionsChange(seriesId, d),
-    opacity: opacity,
-    seriesId: seriesId,
-    x: x,
-    y: y
-  });
-});
-export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
-  let {
-    labels,
-    labelMinGap = 4,
-    labelHorizontalOffset = 16,
-    labelFont,
-    labelPreferredSide = 'right',
-    BeaconLabelComponent = DefaultScrubberBeaconLabel,
-    transitions
-  } = _ref2;
-  const {
-    getSeries,
-    getSeriesData,
-    getXSerializableScale,
-    getYSerializableScale,
-    getXAxis,
-    drawingArea,
-    dataLength,
-    animate
-  } = useCartesianChartContext();
-  const {
-    scrubberPosition
-  } = useScrubberContext();
-  const isIdle = useDerivedValue(() => {
-    return scrubberPosition.value === undefined;
-  }, [scrubberPosition]);
-  const updateTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.update, animate, defaultTransition), [transitions == null ? void 0 : transitions.update, animate]);
-  const [labelDimensions, setLabelDimensions] = useState({});
-  const handleDimensionsChange = useCallback((id, dimensions) => {
-    setLabelDimensions(prev => {
-      const existing = prev[id];
-      if (existing && existing.width === dimensions.width && existing.height === dimensions.height) {
-        return prev;
-      }
-      return _extends({}, prev, {
-        [id]: dimensions
-      });
-    });
-  }, []);
-  const seriesInfo = useMemo(() => {
-    return labels.map(label => {
-      const series = getSeries(label.seriesId);
-      if (!series) return null;
-      const sourceData = getSeriesData(label.seriesId);
-      const yScale = getYSerializableScale(series.yAxisId);
-      return {
-        seriesId: label.seriesId,
-        sourceData,
-        yScale
-      };
-    }).filter(info => info !== null);
-  }, [labels, getSeries, getSeriesData, getYSerializableScale]);
-  const xScale = getXSerializableScale();
-  const xAxis = getXAxis();
-  const dataIndex = useDerivedValue(() => {
-    var _scrubberPosition$val;
-    return (_scrubberPosition$val = scrubberPosition.value) != null ? _scrubberPosition$val : Math.max(0, dataLength - 1);
-  }, [scrubberPosition, dataLength]);
-  const dataX = useDerivedValue(() => {
-    if (xAxis != null && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex.value] !== undefined) {
-      const dataValue = xAxis.data[dataIndex.value];
-      return typeof dataValue === 'string' ? dataIndex.value : dataValue;
-    }
-    return dataIndex.value;
-  }, [xAxis, dataIndex]);
-  const allLabelPositions = useDerivedValue(() => {
-    const sharedPixelX = dataX.value !== undefined && xScale ? applySerializableScale(dataX.value, xScale) : 0;
-    const desiredPositions = seriesInfo.map(info => {
-      let dataY;
-      if (xScale && info.yScale) {
-        if (info.sourceData && dataIndex.value !== undefined && dataIndex.value >= 0 && dataIndex.value < info.sourceData.length) {
-          const dataValue = info.sourceData[dataIndex.value];
-          if (Array.isArray(dataValue)) {
-            const validValues = dataValue.filter(val => val !== null);
-            if (validValues.length >= 1) {
-              dataY = validValues[validValues.length - 1];
-            }
-          }
-        }
-      }
-      if (dataY !== undefined && info.yScale) {
-        return {
-          seriesId: info.seriesId,
-          x: sharedPixelX,
-          desiredY: applySerializableScale(dataY, info.yScale)
-        };
-      }
-
-      // Return null for invalid data
-      return null;
-    });
-    const maxLabelHeight = Math.max(...Object.values(labelDimensions).map(dim => dim.height));
-    const maxLabelWidth = Math.max(...Object.values(labelDimensions).map(dim => dim.width));
-    const validPositions = desiredPositions.filter(pos => pos !== null);
-
-    // Convert to LabelDimension format expected by utility
-    const dimensions = validPositions.map(pos => {
-      var _trackedDimensions$wi, _trackedDimensions$he;
-      const trackedDimensions = labelDimensions[pos.seriesId];
-      return {
-        seriesId: pos.seriesId,
-        width: (_trackedDimensions$wi = trackedDimensions == null ? void 0 : trackedDimensions.width) != null ? _trackedDimensions$wi : maxLabelWidth,
-        height: (_trackedDimensions$he = trackedDimensions == null ? void 0 : trackedDimensions.height) != null ? _trackedDimensions$he : maxLabelHeight,
-        preferredX: pos.x,
-        preferredY: pos.desiredY
-      };
-    });
-
-    // Calculate Y positions with collision resolution for valid positions only
-    const yPositions = calculateLabelYPositions(dimensions, drawingArea, maxLabelHeight, labelMinGap);
-
-    // Return all positions (including null ones)
-    return desiredPositions.map(pos => {
-      var _yPositions$get;
-      if (!pos) return null;
-      return {
-        seriesId: pos.seriesId,
-        x: pos.x,
-        y: (_yPositions$get = yPositions.get(pos.seriesId)) != null ? _yPositions$get : pos.desiredY
-      };
-    });
-  }, [seriesInfo, dataIndex, dataX, xScale, labelDimensions, labelMinGap]);
-  const currentPosition = useDerivedValue(() => {
-    const pixelX = dataX.value !== undefined && xScale ? applySerializableScale(dataX.value, xScale) : 0;
-    const maxWidth = Math.max(...Object.values(labelDimensions).map(dim => dim.width));
-    const position = getLabelPosition(pixelX, maxWidth, drawingArea, labelHorizontalOffset, labelPreferredSide);
-    return position;
-  }, [dataX, xScale, labelDimensions, drawingArea, labelHorizontalOffset, labelPreferredSide]);
-  return seriesInfo.map((info, index) => {
-    const labelInfo = labels.find(label => label.seriesId === info.seriesId);
-    if (!labelInfo) return;
-    return /*#__PURE__*/_jsx(PositionedLabel, {
-      BeaconLabelComponent: BeaconLabelComponent,
-      color: labelInfo.color,
-      index: index,
-      isIdle: isIdle,
-      label: labelInfo.label,
-      labelFont: labelFont,
-      labelHorizontalOffset: labelHorizontalOffset,
-      onDimensionsChange: handleDimensionsChange,
-      position: currentPosition,
-      positions: allLabelPositions,
-      seriesId: info.seriesId,
-      updateTransition: updateTransition
-    }, info.seriesId);
-  });
-});

package/esm/chart/scrubber/ScrubberProvider.js

@@ -1,140 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { Platform } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
-import { Haptics } from '@coinbase/cds-mobile/utils/haptics';
-import { useCartesianChartContext } from '../ChartProvider';
-import { invertSerializableScale, ScrubberContext } from '../utils';
-import { getPointOnSerializableScale } from '../utils/point';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * A component which encapsulates the ScrubberContext.
- * It depends on a ChartContext in order to provide accurate touch tracking.
- */
-export const ScrubberProvider = _ref => {
-  let {
-    children,
-    enableScrubbing,
-    onScrubberPositionChange,
-    allowOverflowGestures
-  } = _ref;
-  const chartContext = useCartesianChartContext();
-  if (!chartContext) {
-    throw new Error('ScrubberProvider must be used within a ChartContext');
-  }
-  const {
-    layout,
-    getXSerializableScale,
-    getYSerializableScale,
-    getXAxis,
-    getYAxis
-  } = chartContext;
-  const scrubberPosition = useSharedValue(undefined);
-  const categoryAxisIsX = useMemo(() => layout !== 'horizontal', [layout]);
-  const categoryAxis = useMemo(() => categoryAxisIsX ? getXAxis() : getYAxis(), [categoryAxisIsX, getXAxis, getYAxis]);
-  const categoryScale = useMemo(() => categoryAxisIsX ? getXSerializableScale() : getYSerializableScale(), [categoryAxisIsX, getXSerializableScale, getYSerializableScale]);
-  const getDataIndexFromPosition = useCallback(touchPosition => {
-    'worklet';
-
-    if (!categoryScale || !categoryAxis) return 0;
-    if (categoryScale.type === 'band') {
-      const [domainMin, domainMax] = categoryScale.domain;
-      const categoryCount = domainMax - domainMin + 1;
-      let closestIndex = 0;
-      let closestDistance = Infinity;
-      for (let i = 0; i < categoryCount; i++) {
-        const categoryPos = getPointOnSerializableScale(i, categoryScale);
-        if (categoryPos !== undefined) {
-          const distance = Math.abs(touchPosition - categoryPos);
-          if (distance < closestDistance) {
-            closestDistance = distance;
-            closestIndex = i;
-          }
-        }
-      }
-      return closestIndex;
-    } else {
-      // For numeric scales with axis data, find the nearest data point.
-      const axisData = categoryAxis.data;
-      if (axisData && Array.isArray(axisData) && typeof axisData[0] === 'number') {
-        const numericData = axisData;
-        let closestIndex = 0;
-        let closestDistance = Infinity;
-        for (let i = 0; i < numericData.length; i++) {
-          const dataValue = numericData[i];
-          const categoryPos = getPointOnSerializableScale(dataValue, categoryScale);
-          if (categoryPos !== undefined) {
-            const distance = Math.abs(touchPosition - categoryPos);
-            if (distance < closestDistance) {
-              closestDistance = distance;
-              closestIndex = i;
-            }
-          }
-        }
-        return closestIndex;
-      } else {
-        var _domain$min, _domain$max;
-        const dataValue = invertSerializableScale(touchPosition, categoryScale);
-        const dataIndex = Math.round(dataValue);
-        const domain = categoryAxis.domain;
-        return Math.max((_domain$min = domain.min) != null ? _domain$min : 0, Math.min(dataIndex, (_domain$max = domain.max) != null ? _domain$max : 0));
-      }
-    }
-  }, [categoryAxis, categoryScale]);
-  const handleStartEndHaptics = useCallback(() => {
-    void Haptics.lightImpact();
-  }, []);
-  useAnimatedReaction(() => scrubberPosition.value, (currentValue, previousValue) => {
-    // Confirm changes here and inside of our gesture handler before calling JS thread
-    // To prevent any rerenders
-    if (onScrubberPositionChange !== undefined && currentValue !== previousValue) {
-      runOnJS(onScrubberPositionChange)(currentValue);
-    }
-  }, [onScrubberPositionChange]);
-
-  // Create the long press pan gesture
-  const longPressGesture = useMemo(() => Gesture.Pan().activateAfterLongPress(110).shouldCancelWhenOutside(!allowOverflowGestures).onStart(function onStart(event) {
-    runOnJS(handleStartEndHaptics)();
-
-    // Android does not trigger onUpdate when the gesture starts. This achieves consistent behavior across both iOS and Android
-    if (Platform.OS === 'android') {
-      const pointerPosition = categoryAxisIsX ? event.x : event.y;
-      const newScrubberPosition = getDataIndexFromPosition(pointerPosition);
-      if (newScrubberPosition !== scrubberPosition.value) {
-        scrubberPosition.value = newScrubberPosition;
-      }
-    }
-  }).onUpdate(function onUpdate(event) {
-    const pointerPosition = categoryAxisIsX ? event.x : event.y;
-    const newScrubberPosition = getDataIndexFromPosition(pointerPosition);
-    if (newScrubberPosition !== scrubberPosition.value) {
-      scrubberPosition.value = newScrubberPosition;
-    }
-  }).onEnd(function onEnd() {
-    if (enableScrubbing) {
-      runOnJS(handleStartEndHaptics)();
-      scrubberPosition.value = undefined;
-    }
-  }).onTouchesCancelled(function onTouchesCancelled() {
-    if (enableScrubbing) {
-      scrubberPosition.value = undefined;
-    }
-  }), [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromPosition, categoryAxisIsX, scrubberPosition, enableScrubbing]);
-  const contextValue = useMemo(() => ({
-    enableScrubbing: !!enableScrubbing,
-    scrubberPosition
-  }), [enableScrubbing, scrubberPosition]);
-  const content = /*#__PURE__*/_jsx(ScrubberContext.Provider, {
-    value: contextValue,
-    children: children
-  });
-
-  // Wrap with gesture handler only if scrubbing is enabled
-  if (enableScrubbing) {
-    return /*#__PURE__*/_jsx(GestureDetector, {
-      gesture: longPressGesture,
-      children: content
-    });
-  }
-  return content;
-};