@coinbase/cds-mobile-visualization 3.4.0-beta.22 → 3.4.0-beta.24

package/esm/chart/scrubber/ScrubberAccessibilityView.js

@@ -0,0 +1,177 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useScreenReaderStatus } from '@coinbase/cds-mobile/hooks/useScreenReaderStatus';
+import { useCartesianChartContext } from '../ChartProvider';
+import { useScrubberContext } from '../utils';
+import { getPointOnSerializableScale } from '../utils/point';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const normalizeScrubberAccessibilityStep = function (step, defaultStep) {
+  if (defaultStep === void 0) {
+    defaultStep = 1;
+  }
+  const resolvedDefaultStep = Number.isFinite(defaultStep) ? Math.max(1, Math.floor(defaultStep)) : 1;
+  if (step === undefined || !Number.isFinite(step)) {
+    return resolvedDefaultStep;
+  }
+  return Math.max(1, Math.floor(step));
+};
+const getScrubberSampledIndices = (dataLength, step) => {
+  if (dataLength <= 0) return [];
+  const lastIndex = dataLength - 1;
+  if (lastIndex === 0) return [0];
+  const normalizedStep = Math.max(1, Math.floor(step));
+  const sampledIndices = [0];
+  for (let dataIndex = normalizedStep; dataIndex < lastIndex; dataIndex += normalizedStep) {
+    sampledIndices.push(dataIndex);
+  }
+  sampledIndices.push(lastIndex);
+  return sampledIndices;
+};
+const getCategoryValueForIndex = (index, scale, axis) => {
+  if (scale.type === 'band') {
+    return index;
+  }
+  const axisData = axis == null ? void 0 : axis.data;
+  if (axisData && Array.isArray(axisData) && typeof axisData[0] === 'number') {
+    var _numericData$index;
+    const numericData = axisData;
+    return (_numericData$index = numericData[index]) != null ? _numericData$index : index;
+  }
+  return index;
+};
+const getScrubberSegmentWeights = function (sampledIndices, dataLength, categoryScale, categoryAxis, drawingArea, orientation) {
+  if (orientation === void 0) {
+    orientation = 'horizontal';
+  }
+  const dimensionSize = orientation === 'horizontal' ? drawingArea.width : drawingArea.height;
+  const dimensionStart = orientation === 'horizontal' ? drawingArea.x : drawingArea.y;
+  const dimensionEnd = dimensionStart + dimensionSize;
+  if (sampledIndices.length === 0 || !categoryScale || !categoryAxis || dimensionSize <= 0) {
+    const segmentWeights = sampledIndices.map((index, position) => {
+      var _sampledIndices;
+      const nextIndex = (_sampledIndices = sampledIndices[position + 1]) != null ? _sampledIndices : dataLength;
+      return Math.max(1, nextIndex - index);
+    });
+    return {
+      leading: 0,
+      segmentWeights,
+      trailing: 0
+    };
+  }
+  if (categoryScale.type === 'band') {
+    const bandScale = categoryScale;
+    const segmentWeights = [];
+    let leading = 0;
+    let trailing = 0;
+    for (let i = 0; i < sampledIndices.length; i++) {
+      const categoryValue = getCategoryValueForIndex(sampledIndices[i], categoryScale, categoryAxis);
+      const posStart = getPointOnSerializableScale(categoryValue, bandScale, 'stepStart');
+      const posEnd = getPointOnSerializableScale(categoryValue, bandScale, 'stepEnd');
+      segmentWeights.push(Math.max(1, Math.abs(posEnd - posStart)));
+      if (i === 0) {
+        leading = Math.max(0, Math.min(posStart, posEnd) - dimensionStart);
+      }
+      if (i === sampledIndices.length - 1) {
+        trailing = Math.max(0, dimensionEnd - Math.max(posStart, posEnd));
+      }
+    }
+    return {
+      leading,
+      segmentWeights,
+      trailing
+    };
+  }
+  const segmentWeights = sampledIndices.map((index, position) => {
+    const prevIndex = position > 0 ? sampledIndices[position - 1] : -1;
+    const categoryValue = getCategoryValueForIndex(index, categoryScale, categoryAxis);
+    const posEnd = getPointOnSerializableScale(categoryValue, categoryScale);
+    const posStart = prevIndex < 0 ? dimensionStart : getPointOnSerializableScale(getCategoryValueForIndex(prevIndex, categoryScale, categoryAxis), categoryScale);
+    return Math.max(1, Math.abs(posEnd - posStart));
+  });
+  return {
+    leading: 0,
+    segmentWeights,
+    trailing: 0
+  };
+};
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute'
+  },
+  segments: {
+    flex: 1
+  }
+});
+export const ScrubberAccessibilityView = /*#__PURE__*/memo(_ref => {
+  let {
+    accessibilityLabel,
+    accessibilityStep
+  } = _ref;
+  const isScreenReaderEnabled = useScreenReaderStatus();
+  const {
+    dataLength,
+    drawingArea,
+    layout,
+    getXAxis,
+    getYAxis,
+    getXSerializableScale,
+    getYSerializableScale
+  } = useCartesianChartContext();
+  const {
+    enableScrubbing
+  } = useScrubberContext();
+  const isHorizontalLayout = layout === 'horizontal';
+  const categoryAxis = useMemo(() => isHorizontalLayout ? getYAxis() : getXAxis(), [isHorizontalLayout, getXAxis, getYAxis]);
+  const categoryScale = useMemo(() => isHorizontalLayout ? getYSerializableScale() : getXSerializableScale(), [isHorizontalLayout, getXSerializableScale, getYSerializableScale]);
+  const resolvedStep = useMemo(() => normalizeScrubberAccessibilityStep(accessibilityStep), [accessibilityStep]);
+  const sampledIndices = useMemo(() => getScrubberSampledIndices(dataLength, resolvedStep), [dataLength, resolvedStep]);
+  const segmentOrientation = isHorizontalLayout ? 'vertical' : 'horizontal';
+  const {
+    leading,
+    segmentWeights,
+    trailing
+  } = useMemo(() => getScrubberSegmentWeights(sampledIndices, dataLength, categoryScale, categoryAxis, drawingArea, segmentOrientation), [sampledIndices, dataLength, categoryScale, categoryAxis, drawingArea, segmentOrientation]);
+  const sampledSegments = useMemo(() => {
+    if (accessibilityLabel === undefined) return [];
+    return sampledIndices.map((index, position) => {
+      var _segmentWeights$posit;
+      const weight = (_segmentWeights$posit = segmentWeights[position]) != null ? _segmentWeights$posit : 1;
+      const pointLabel = accessibilityLabel(index);
+      return {
+        index,
+        weight,
+        accessibilityLabel: pointLabel || "Data point " + (index + 1)
+      };
+    });
+  }, [accessibilityLabel, sampledIndices, segmentWeights]);
+  const getSegmentStyle = useCallback(weight => ({
+    flex: weight
+  }), []);
+  const overlayStyle = useMemo(() => ({
+    left: drawingArea.x,
+    top: drawingArea.y,
+    width: drawingArea.width,
+    height: drawingArea.height
+  }), [drawingArea.x, drawingArea.y, drawingArea.width, drawingArea.height]);
+  const shouldHide = useMemo(() => !isScreenReaderEnabled || !enableScrubbing || !accessibilityLabel || dataLength <= 0 || drawingArea.width <= 0 || drawingArea.height <= 0 || sampledSegments.length === 0, [isScreenReaderEnabled, enableScrubbing, accessibilityLabel, dataLength, drawingArea.width, drawingArea.height, sampledSegments.length]);
+  if (shouldHide) return;
+  const segmentsFlexDirection = isHorizontalLayout ? 'column' : 'row';
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "box-none",
+    style: [styles.container, overlayStyle],
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.segments, {
+        flexDirection: segmentsFlexDirection
+      }],
+      children: [leading > 0 && /*#__PURE__*/_jsx(View, {
+        style: getSegmentStyle(leading)
+      }), sampledSegments.map(segment => /*#__PURE__*/_jsx(Pressable, {
+        accessible: true,
+        accessibilityLabel: segment.accessibilityLabel,
+        style: getSegmentStyle(segment.weight)
+      }, segment.index)), trailing > 0 && /*#__PURE__*/_jsx(View, {
+        style: getSegmentStyle(trailing)
+      })]
+    })
+  });
+});

package/esm/chart/scrubber/ScrubberBeaconGroup.js

@@ -12,7 +12,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
   let {
     seriesId,
     dataIndex,
-    dataX,
+    dataIndexValue,
     isIdle,
     BeaconComponent,
     idlePulse,
@@ -22,6 +22,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     stroke
   } = _ref;
   const {
+    layout,
     getSeries,
     getSeriesData,
     getXScale,
@@ -49,10 +50,10 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
   // Get scales for gradient evaluation
   const gradientScale = useMemo(() => {
     if (!gradient) return undefined;
-    const scale = gradient.axis === 'x' ? getXScale() : getYScale(series == null ? void 0 : series.yAxisId);
+    const scale = gradient.axis === 'x' ? getXScale(series == null ? void 0 : series.xAxisId) : getYScale(series == null ? void 0 : series.yAxisId);
     if (!scale) return undefined;
     return convertToSerializableScale(scale);
-  }, [gradient, getXScale, getYScale, series == null ? void 0 : series.yAxisId]);
+  }, [gradient, getXScale, getYScale, series == null ? void 0 : series.xAxisId, series == null ? void 0 : series.yAxisId]);
   const gradientStops = useMemo(() => {
     if (!gradient || !gradientScale) return undefined;
     const domain = {
@@ -70,25 +71,25 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     var _series$color;
     if (gradient && gradientScale && gradientStops) {
       var _gradient$axis;
-      const axis = (_gradient$axis = gradient.axis) != null ? _gradient$axis : 'y';
-      const dataValue = axis === 'x' ? dataX.value : dataY.value;
-      if (dataValue !== undefined) {
-        const evaluatedColor = evaluateGradientAtValue(gradientStops, dataValue, gradientScale);
-        if (evaluatedColor) {
-          return evaluatedColor;
-        }
+      const categoryAxisIsX = layout !== 'horizontal';
+      const gradientAxis = (_gradient$axis = gradient.axis) != null ? _gradient$axis : 'y';
+      const valueForAxis = gradientAxis === 'x' ? categoryAxisIsX ? dataIndexValue.value : dataY.value : categoryAxisIsX ? dataY.value : dataIndexValue.value;
+      const evaluatedColor = evaluateGradientAtValue(gradientStops, valueForAxis, gradientScale);
+      if (evaluatedColor) {
+        return evaluatedColor;
       }
     }
 
     // Fallback to series color
     return (_series$color = series == null ? void 0 : series.color) != null ? _series$color : theme.color.fgPrimary;
-  }, [gradient, gradientScale, gradientStops, dataX, dataY, series == null ? void 0 : series.color, theme.color.fgPrimary]);
+  }, [gradient, gradientScale, gradientStops, dataIndexValue, dataY, series == null ? void 0 : series.color, theme.color.fgPrimary, layout]);
+  const categoryAxisIsX = layout !== 'horizontal';
   return /*#__PURE__*/_jsx(BeaconComponent, {
     ref: beaconRef,
     animate: animate,
     color: color,
-    dataX: dataX,
-    dataY: dataY,
+    dataX: categoryAxisIsX ? dataIndexValue : dataY,
+    dataY: categoryAxisIsX ? dataY : dataIndexValue,
     idlePulse: idlePulse,
     isIdle: isIdle,
     seriesId: seriesId,
@@ -109,12 +110,15 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     scrubberPosition
   } = useScrubberContext();
   const {
+    layout,
     getXAxis,
+    getYAxis,
     series,
     dataLength,
     animate
   } = useCartesianChartContext();
-  const xAxis = useMemo(() => getXAxis(), [getXAxis]);
+  const categoryAxisIsX = useMemo(() => layout !== 'horizontal', [layout]);
+  const indexAxis = useMemo(() => categoryAxisIsX ? getXAxis() : getYAxis(), [categoryAxisIsX, getXAxis, getYAxis]);
 
   // Expose imperative handle with pulse method
   useImperativeHandle(ref, () => ({
@@ -132,14 +136,14 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     var _scrubberPosition$val;
     return (_scrubberPosition$val = scrubberPosition.value) != null ? _scrubberPosition$val : Math.max(0, dataLength - 1);
   }, [scrubberPosition, dataLength]);
-  const dataX = useDerivedValue(() => {
-    // Convert index to actual x value if axis has data
-    if (xAxis != null && xAxis.data && Array.isArray(xAxis.data) && xAxis.data[dataIndex.value] !== undefined) {
-      const dataValue = xAxis.data[dataIndex.value];
+  const dataIndexValue = useDerivedValue(() => {
+    // Convert index to actual category-axis value if axis has data.
+    if (indexAxis != null && indexAxis.data && Array.isArray(indexAxis.data) && indexAxis.data[dataIndex.value] !== undefined) {
+      const dataValue = indexAxis.data[dataIndex.value];
       return typeof dataValue === 'string' ? dataIndex.value : dataValue;
     }
     return dataIndex.value;
-  }, [xAxis, dataIndex]);
+  }, [indexAxis, dataIndex]);
   const isIdle = useDerivedValue(() => {
     return scrubberPosition.value === undefined;
   }, [scrubberPosition]);
@@ -155,7 +159,7 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     animate: animate,
     beaconRef: createBeaconRef(s.id),
     dataIndex: dataIndex,
-    dataX: dataX,
+    dataIndexValue: dataIndexValue,
     idlePulse: idlePulse,
     isIdle: isIdle,
     seriesId: s.id,

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