@coinbase/cds-mobile-visualization 3.4.0-beta.8 → 3.4.0

package/esm/chart/scrubber/ScrubberProvider.js

@@ -23,25 +23,29 @@ export const ScrubberProvider = _ref => {
     throw new Error('ScrubberProvider must be used within a ChartContext');
   }
   const {
+    layout,
     getXSerializableScale,
-    getXAxis
+    getYSerializableScale,
+    getXAxis,
+    getYAxis
   } = chartContext;
   const scrubberPosition = useSharedValue(undefined);
-  const xAxis = useMemo(() => getXAxis(), [getXAxis]);
-  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
-  const getDataIndexFromX = useCallback(touchX => {
+  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 (!xScale || !xAxis) return 0;
-    if (xScale.type === 'band') {
-      const [domainMin, domainMax] = xScale.domain;
+    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 xPos = getPointOnSerializableScale(i, xScale);
-        if (xPos !== undefined) {
-          const distance = Math.abs(touchX - xPos);
+        const categoryPos = getPointOnSerializableScale(i, categoryScale);
+        if (categoryPos !== undefined) {
+          const distance = Math.abs(touchPosition - categoryPos);
           if (distance < closestDistance) {
             closestDistance = distance;
             closestIndex = i;
@@ -50,18 +54,17 @@ export const ScrubberProvider = _ref => {
       }
       return closestIndex;
     } else {
-      // For numeric scales with axis data, find the nearest data point
-      const axisData = xAxis.data;
+      // For numeric scales with axis data, find the nearest data point.
+      const axisData = categoryAxis.data;
       if (axisData && Array.isArray(axisData) && typeof axisData[0] === 'number') {
-        // We have numeric axis data - find the closest data point
         const numericData = axisData;
         let closestIndex = 0;
         let closestDistance = Infinity;
         for (let i = 0; i < numericData.length; i++) {
-          const xValue = numericData[i];
-          const xPos = getPointOnSerializableScale(xValue, xScale);
-          if (xPos !== undefined) {
-            const distance = Math.abs(touchX - xPos);
+          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;
@@ -71,13 +74,13 @@ export const ScrubberProvider = _ref => {
         return closestIndex;
       } else {
         var _domain$min, _domain$max;
-        const xValue = invertSerializableScale(touchX, xScale);
-        const dataIndex = Math.round(xValue);
-        const domain = xAxis.domain;
+        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));
       }
     }
-  }, [xAxis, xScale]);
+  }, [categoryAxis, categoryScale]);
   const handleStartEndHaptics = useCallback(() => {
     void Haptics.lightImpact();
   }, []);
@@ -95,13 +98,15 @@ export const ScrubberProvider = _ref => {
 
     // Android does not trigger onUpdate when the gesture starts. This achieves consistent behavior across both iOS and Android
     if (Platform.OS === 'android') {
-      const newScrubberPosition = getDataIndexFromX(event.x);
+      const pointerPosition = categoryAxisIsX ? event.x : event.y;
+      const newScrubberPosition = getDataIndexFromPosition(pointerPosition);
       if (newScrubberPosition !== scrubberPosition.value) {
         scrubberPosition.value = newScrubberPosition;
       }
     }
   }).onUpdate(function onUpdate(event) {
-    const newScrubberPosition = getDataIndexFromX(event.x);
+    const pointerPosition = categoryAxisIsX ? event.x : event.y;
+    const newScrubberPosition = getDataIndexFromPosition(pointerPosition);
     if (newScrubberPosition !== scrubberPosition.value) {
       scrubberPosition.value = newScrubberPosition;
     }
@@ -114,7 +119,7 @@ export const ScrubberProvider = _ref => {
     if (enableScrubbing) {
       scrubberPosition.value = undefined;
     }
-  }), [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromX, scrubberPosition, enableScrubbing]);
+  }), [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromPosition, categoryAxisIsX, scrubberPosition, enableScrubbing]);
   const contextValue = useMemo(() => ({
     enableScrubbing: !!enableScrubbing,
     scrubberPosition