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

package/esm/chart/area/GradientArea.js

@@ -0,0 +1,110 @@
+const _excluded = ["d", "fill", "fillOpacity", "peakColor", "baselineColor", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "clipRect"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useId } from 'react';
+import { Defs, LinearGradient, Stop } from 'react-native-svg';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useCartesianChartContext } from '../ChartProvider';
+import { Path } from '../Path';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A customizable gradient area component which uses Path.
+ */
+export const GradientArea = /*#__PURE__*/memo(_ref => {
+  let {
+      d,
+      fill,
+      fillOpacity = 1,
+      peakColor,
+      baselineColor,
+      peakOpacity = 0.3,
+      baselineOpacity = 0,
+      baseline,
+      yAxisId,
+      clipRect
+    } = _ref,
+    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const context = useCartesianChartContext();
+  const theme = useTheme();
+  const patternId = useId();
+
+  // Get the y-scale for the specified axis (or default)
+  const yScale = context.getYScale(yAxisId);
+  const yRange = yScale == null ? void 0 : yScale.range();
+  const yDomain = yScale == null ? void 0 : yScale.domain();
+
+  // Use chart range if available, otherwise fall back to percentage
+  const useUserSpaceUnits = yRange !== undefined;
+  const gradientY1 = useUserSpaceUnits && yRange ? String(yRange[1]) : '0%';
+  const gradientY2 = useUserSpaceUnits && yRange ? String(yRange[0]) : '100%';
+
+  // Auto-calculate baseline position based on domain
+  let baselinePosition;
+  let baselinePercentage;
+  if (yScale && yDomain) {
+    const [minValue, maxValue] = yDomain;
+    let dataBaseline;
+    if (minValue >= 0) {
+      // All positive: baseline at min
+      dataBaseline = minValue;
+    } else if (maxValue <= 0) {
+      // All negative: baseline at max
+      dataBaseline = maxValue;
+    } else {
+      // Crosses zero: baseline at 0
+      dataBaseline = 0;
+    }
+    if (useUserSpaceUnits && yRange) {
+      // Get the actual y coordinate for the baseline
+      const scaledValue = yScale(baseline != null ? baseline : dataBaseline);
+      if (typeof scaledValue === 'number') {
+        baselinePosition = scaledValue;
+      }
+    } else {
+      // Calculate percentage position
+      baselinePercentage = (maxValue - (baseline != null ? baseline : dataBaseline)) / (maxValue - minValue) * 100 + "%";
+    }
+  }
+  const effectiveFill = fill != null ? fill : theme.color.fgPrimary;
+  const effectivePeakColor = peakColor != null ? peakColor : effectiveFill;
+  const effectiveBaselineColor = baselineColor != null ? baselineColor : effectiveFill;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Defs, {
+      children: /*#__PURE__*/_jsx(LinearGradient, {
+        gradientUnits: useUserSpaceUnits ? 'userSpaceOnUse' : 'objectBoundingBox',
+        id: patternId,
+        x1: useUserSpaceUnits ? '0' : '0%',
+        x2: useUserSpaceUnits ? '0' : '0%',
+        y1: gradientY1,
+        y2: gradientY2,
+        children: baselinePosition !== undefined || baselinePercentage !== undefined ? /* Diverging gradient: peak opacity at extremes, baseline opacity at baseline */
+        [/*#__PURE__*/_jsx(Stop, {
+          offset: "0%",
+          stopColor: effectivePeakColor,
+          stopOpacity: peakOpacity
+        }, "0"), /*#__PURE__*/_jsx(Stop, {
+          offset: baselinePercentage != null ? baselinePercentage : (baselinePosition - yRange[1]) / (yRange[0] - yRange[1]) * 100 + "%",
+          stopColor: effectiveBaselineColor,
+          stopOpacity: baselineOpacity
+        }, "1"), /*#__PURE__*/_jsx(Stop, {
+          offset: "100%",
+          stopColor: effectivePeakColor,
+          stopOpacity: peakOpacity
+        }, "2")] : /* Simple gradient from peak to baseline */
+        [/*#__PURE__*/_jsx(Stop, {
+          offset: "0%",
+          stopColor: effectivePeakColor,
+          stopOpacity: peakOpacity
+        }, "0"), /*#__PURE__*/_jsx(Stop, {
+          offset: "100%",
+          stopColor: effectiveBaselineColor,
+          stopOpacity: baselineOpacity
+        }, "1")]
+      })
+    }), /*#__PURE__*/_jsx(Path, _extends({
+      clipRect: clipRect,
+      d: d,
+      fill: "url(#" + patternId + ")"
+    }, pathProps))]
+  });
+});

package/esm/chart/area/SolidArea.js

@@ -0,0 +1,24 @@
+const _excluded = ["d", "fill", "fillOpacity", "clipRect"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo } from 'react';
+import { Path } from '../Path';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A customizable solid area component which uses Path.
+ */
+export const SolidArea = /*#__PURE__*/memo(_ref => {
+  let {
+      d,
+      fill,
+      fillOpacity = 1,
+      clipRect
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Path, _extends({
+    clipRect: clipRect,
+    d: d,
+    fill: fill,
+    fillOpacity: fillOpacity
+  }, props));
+});

package/esm/chart/area/__stories__/AreaChart.stories.js

@@ -0,0 +1,100 @@
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { DottedLine } from '../../line';
+import { Scrubber } from '../../scrubber/Scrubber';
+import { AreaChart } from '..';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BasicExample = () => {
+  return /*#__PURE__*/_jsx(AreaChart, {
+    enableScrubbing: true,
+    showYAxis: true,
+    height: 400,
+    series: [{
+      id: 'pageViews',
+      data: [24, 13, 98, 39, 48, 38, 43]
+    }],
+    yAxis: {
+      showGrid: true,
+      domain: {
+        min: 0
+      }
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {})
+  });
+};
+const StackedExample = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(AreaChart, {
+    enableScrubbing: true,
+    showLines: true,
+    stacked: true,
+    curve: "natural",
+    height: 256,
+    series: [{
+      id: 'currentRewards',
+      data: [100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260, 3700, 4170],
+      color: theme.color.fg
+    }, {
+      id: 'potentialRewards',
+      data: [150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160, 3520, 3900],
+      color: theme.color.fgPositive,
+      type: 'dotted',
+      LineComponent: DottedLine
+    }],
+    type: "dotted",
+    children: /*#__PURE__*/_jsx(Scrubber, {})
+  });
+};
+const AreaChartStories = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic",
+      children: /*#__PURE__*/_jsx(BasicExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Stacked",
+      children: /*#__PURE__*/_jsx(StackedExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Negative Values",
+      children: /*#__PURE__*/_jsx(AreaChart, {
+        enableScrubbing: true,
+        showLines: true,
+        showYAxis: true,
+        height: 400,
+        series: [{
+          id: 'pageViews',
+          data: [24, 13, -98, 39, 48, 38, 43]
+        }],
+        type: "gradient",
+        yAxis: {
+          showGrid: true
+        },
+        children: /*#__PURE__*/_jsx(Scrubber, {})
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Styles",
+      children: /*#__PURE__*/_jsx(AreaChart, {
+        enableScrubbing: false,
+        height: 350,
+        series: [{
+          id: 'visitors',
+          data: [450, 520, 480, 600, 750, 680, 590],
+          label: 'Weekly Visitors',
+          color: '#fb4d3d',
+          type: 'dotted'
+        }, {
+          id: 'repeatVisitors',
+          data: [250, 200, 150, 140, 100, 80, 50],
+          label: 'Weekly Repeat Visitors',
+          color: '#16a34a'
+        }, {
+          id: 'signups',
+          data: [45, 62, 55, 250, 380, 400, 450],
+          label: 'Weekly Signups',
+          color: '#2563eb',
+          type: 'gradient'
+        }]
+      })
+    })]
+  });
+};
+export default AreaChartStories;

package/esm/chart/area/index.js

@@ -0,0 +1,7 @@
+// codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
+export * from './Area';
+export * from './AreaChart';
+export * from './DottedArea';
+export * from './GradientArea';
+export * from './SolidArea';
+// codegen:end

package/esm/chart/axis/Axis.js

@@ -0,0 +1,43 @@
+/**
+ * Animation variants for grouped axis tick labels - initial mount
+ */
+export const axisTickLabelsInitialAnimationVariants = {
+  initial: {
+    opacity: 0
+  },
+  animate: {
+    opacity: 1,
+    transition: {
+      duration: 0,
+      delay: 0
+    }
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      duration: 0.15
+    }
+  }
+};
+
+/**
+ * Animation variants for axis elements - updates (used for both grid lines and tick labels)
+ */
+export const axisUpdateAnimationVariants = {
+  initial: {
+    opacity: 0
+  },
+  animate: {
+    opacity: 1,
+    transition: {
+      duration: 0.15,
+      delay: 0.15 // For updates: fade out 150ms, then fade in 150ms
+    }
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      duration: 0.15
+    }
+  }
+};

package/esm/chart/axis/XAxis.js

@@ -0,0 +1,181 @@
+const _excluded = ["position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "style", "className", "styles", "classNames", "GridLineComponent", "tickMarkLabelGap", "height", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useCallback, useEffect, useId, useMemo } from 'react';
+import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { G, Line } from 'react-native-svg';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useCartesianChartContext } from '../ChartProvider';
+import { DottedLine } from '../line/DottedLine';
+import { ReferenceLine } from '../line/ReferenceLine';
+import { SmartChartTextGroup } from '../text/SmartChartTextGroup';
+import { getAxisTicksData, isCategoricalScale } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedG = Animated.createAnimatedComponent(G);
+export const XAxis = /*#__PURE__*/memo(_ref => {
+  let {
+      position = 'bottom',
+      showGrid,
+      requestedTickCount,
+      ticks,
+      tickLabelFormatter,
+      styles,
+      classNames,
+      GridLineComponent = DottedLine,
+      tickMarkLabelGap = 2,
+      height = 32,
+      minTickLabelGap = 4,
+      showTickMarks,
+      showLine,
+      tickMarkSize = 4,
+      tickInterval = 32,
+      tickMinStep = 1,
+      tickMaxStep
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const registrationId = useId();
+  const {
+    animate,
+    getXScale,
+    getXAxis,
+    registerAxis,
+    unregisterAxis,
+    getAxisBounds
+  } = useCartesianChartContext();
+  const xScale = getXScale();
+  const xAxis = getXAxis();
+  const axisBounds = getAxisBounds(registrationId);
+  const gridOpacity = useSharedValue(1);
+  const axisLineProps = useMemo(() => ({
+    stroke: theme.color.fg,
+    strokeLinecap: 'square',
+    strokeWidth: 1
+  }), [theme.color.fg]);
+  const axisTickMarkProps = useMemo(() => ({
+    stroke: theme.color.fg,
+    strokeLinecap: 'square',
+    strokeWidth: 1
+  }), [theme.color.fg]);
+  useEffect(() => {
+    registerAxis(registrationId, position, height);
+    return () => unregisterAxis(registrationId);
+  }, [registrationId, registerAxis, unregisterAxis, position, height]);
+  const formatTick = useCallback(value => {
+    var _tickLabelFormatter;
+    // If we have string labels and no custom formatter, use the labels
+    const axisData = xAxis == null ? void 0 : xAxis.data;
+    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
+    let finalValue = value;
+
+    // For band scales with string data, value is an index
+    if (hasStringLabels && typeof value === 'number' && axisData[value] !== undefined) {
+      finalValue = axisData[value];
+    }
+
+    // Use the formatter (if provided) or the value itself
+    return (_tickLabelFormatter = tickLabelFormatter == null ? void 0 : tickLabelFormatter(finalValue)) != null ? _tickLabelFormatter : finalValue;
+  }, [xAxis == null ? void 0 : xAxis.data, tickLabelFormatter]);
+  const ticksData = useMemo(() => {
+    if (!xScale) return [];
+
+    // Check if we have string labels
+    const axisData = xAxis == null ? void 0 : xAxis.data;
+    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
+
+    // For band scales, we need categories
+    let categories;
+    if (hasStringLabels) {
+      categories = axisData;
+    } else if (isCategoricalScale(xScale)) {
+      // For band scales without explicit string data, generate numeric categories
+      // based on the domain of the scale
+      const domain = xScale.domain();
+      categories = domain.map(String);
+    }
+    let possibleTickValues;
+
+    // If we have discrete data, we can use the indices as possible tick values
+    if (axisData && Array.isArray(axisData) && (typeof axisData[0] === 'string' || typeof axisData[0] === 'number' && isCategoricalScale(xScale))) {
+      possibleTickValues = Array.from({
+        length: axisData.length
+      }, (_, i) => i);
+    }
+    return getAxisTicksData({
+      scaleFunction: xScale,
+      ticks,
+      requestedTickCount,
+      categories,
+      possibleTickValues,
+      tickInterval: tickInterval,
+      options: {
+        minStep: tickMinStep,
+        maxStep: tickMaxStep
+      }
+    });
+  }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis == null ? void 0 : xAxis.data]);
+  const chartTextData = useMemo(() => {
+    if (!axisBounds) return null;
+    return ticksData.map(tick => {
+      const tickOffset = tickMarkLabelGap + (showTickMarks ? tickMarkSize : 0);
+      const availableSpace = axisBounds.height - tickOffset;
+      const labelOffset = availableSpace / 2;
+      const labelY = position === 'top' ? axisBounds.y + labelOffset - tickOffset : axisBounds.y + labelOffset + tickOffset;
+      return {
+        x: tick.position,
+        y: labelY,
+        label: String(formatTick(tick.tick)),
+        chartTextProps: {
+          className: classNames == null ? void 0 : classNames.tickLabel,
+          color: theme.color.fgMuted,
+          verticalAlignment: 'middle',
+          style: styles == null ? void 0 : styles.tickLabel,
+          horizontalAlignment: 'center'
+        }
+      };
+    });
+  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames == null ? void 0 : classNames.tickLabel, styles == null ? void 0 : styles.tickLabel]);
+  const gridAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: gridOpacity.value
+  }));
+  if (!xScale) return;
+  return /*#__PURE__*/_jsxs(G, _extends({
+    "data-axis": "x",
+    "data-position": position
+  }, props, {
+    children: [showGrid && /*#__PURE__*/_jsx(AnimatedG, {
+      animatedProps: gridAnimatedStyle,
+      children: ticksData.map((tick, index) => {
+        const verticalLine = /*#__PURE__*/_jsx(ReferenceLine, {
+          LineComponent: GridLineComponent,
+          dataX: tick.tick
+        });
+        return /*#__PURE__*/_jsx(G, {
+          children: verticalLine
+        }, "grid-" + tick.tick + "-" + index);
+      })
+    }), chartTextData && /*#__PURE__*/_jsx(SmartChartTextGroup, {
+      prioritizeEndLabels: true,
+      labels: chartTextData,
+      minGap: minTickLabelGap
+    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(G, {
+      "data-testid": "tick-marks",
+      children: ticksData.map((tick, index) => {
+        const tickY = position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height;
+        const tickMarkSizePixels = tickMarkSize;
+        const tickY2 = position === 'bottom' ? axisBounds.y + tickMarkSizePixels : axisBounds.y + axisBounds.height - tickMarkSizePixels;
+        return /*#__PURE__*/_jsx(Line, _extends({}, axisTickMarkProps, {
+          x1: tick.position,
+          x2: tick.position,
+          y1: tickY,
+          y2: tickY2
+        }), "tick-mark-" + tick.tick + "-" + index);
+      })
+    }), axisBounds && showLine && /*#__PURE__*/_jsx(Line, _extends({}, axisLineProps, {
+      x1: axisBounds.x,
+      x2: axisBounds.x + axisBounds.width,
+      y1: position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height,
+      y2: position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height
+    }))]
+  }));
+});

package/esm/chart/axis/YAxis.js

@@ -0,0 +1,170 @@
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "style", "className", "styles", "classNames", "GridLineComponent", "tickMarkLabelGap", "width", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useCallback, useEffect, useId, useMemo } from 'react';
+import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { G, Line } from 'react-native-svg';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useCartesianChartContext } from '../ChartProvider';
+import { DottedLine } from '../line/DottedLine';
+import { ReferenceLine } from '../line/ReferenceLine';
+import { SmartChartTextGroup } from '../text/SmartChartTextGroup';
+import { getAxisTicksData, isCategoricalScale } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedG = Animated.createAnimatedComponent(G);
+export const YAxis = /*#__PURE__*/memo(_ref => {
+  let {
+      axisId,
+      position = 'right',
+      showGrid,
+      requestedTickCount = 5,
+      ticks,
+      tickLabelFormatter,
+      styles,
+      classNames,
+      GridLineComponent = DottedLine,
+      tickMarkLabelGap = 8,
+      width = 44,
+      minTickLabelGap = 0,
+      showTickMarks,
+      showLine,
+      tickMarkSize = 4,
+      tickInterval
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const registrationId = useId();
+  const {
+    animate,
+    getYScale,
+    getYAxis,
+    registerAxis,
+    unregisterAxis,
+    getAxisBounds
+  } = useCartesianChartContext();
+  const yScale = getYScale(axisId);
+  const yAxis = getYAxis(axisId);
+  const axisBounds = getAxisBounds(registrationId);
+  const gridOpacity = useSharedValue(1);
+  const axisLineProps = useMemo(() => ({
+    stroke: theme.color.fg,
+    strokeLinecap: 'square',
+    strokeWidth: 1
+  }), [theme.color.fg]);
+  const axisTickMarkProps = useMemo(() => ({
+    stroke: theme.color.fg,
+    strokeLinecap: 'square',
+    strokeWidth: 1
+  }), [theme.color.fg]);
+  useEffect(() => {
+    registerAxis(registrationId, position, width);
+    return () => unregisterAxis(registrationId);
+  }, [registrationId, registerAxis, unregisterAxis, position, width]);
+  const formatTick = useCallback(value => {
+    var _tickLabelFormatter;
+    // If we have string labels and no custom formatter, use the labels
+    const axisData = yAxis == null ? void 0 : yAxis.data;
+    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
+    if (hasStringLabels && !tickLabelFormatter && axisData[value] !== undefined) {
+      // Use the string label from the data array
+      return axisData[value];
+    }
+
+    // Otherwise use the formatter (if provided) or the value itself
+    return (_tickLabelFormatter = tickLabelFormatter == null ? void 0 : tickLabelFormatter(value)) != null ? _tickLabelFormatter : value;
+  }, [yAxis == null ? void 0 : yAxis.data, tickLabelFormatter]);
+
+  // Use D3 to get the ticks data
+  // Result contains each tick value and its axis position
+  const ticksData = useMemo(() => {
+    if (!yScale) return [];
+
+    // Check if we have string labels
+    const axisData = yAxis == null ? void 0 : yAxis.data;
+    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
+
+    // For band scales, we need categories
+    let categories;
+    if (hasStringLabels) {
+      categories = axisData;
+    } else if (isCategoricalScale(yScale)) {
+      // For band scales without explicit string data, generate numeric categories
+      // based on the domain of the scale
+      const domain = yScale.domain();
+      categories = domain.map(String);
+    }
+
+    // For numeric data or no explicit data, use default tick generation
+    return getAxisTicksData({
+      scaleFunction: yScale,
+      ticks,
+      requestedTickCount: tickInterval !== undefined ? undefined : requestedTickCount != null ? requestedTickCount : 5,
+      categories,
+      possibleTickValues: axisData && Array.isArray(axisData) && typeof axisData[0] === 'number' ? axisData : undefined,
+      tickInterval: tickInterval
+    });
+  }, [ticks, yScale, requestedTickCount, tickInterval, yAxis == null ? void 0 : yAxis.data]);
+  const chartTextData = useMemo(() => {
+    if (!axisBounds) return null;
+    return ticksData.map(tick => {
+      const tickOffset = tickMarkLabelGap + (showTickMarks ? tickMarkSize : 0);
+      const labelX = position === 'left' ? axisBounds.x + axisBounds.width - tickOffset : axisBounds.x + tickOffset;
+      return {
+        x: labelX,
+        y: tick.position,
+        label: String(formatTick(tick.tick)),
+        chartTextProps: {
+          className: classNames == null ? void 0 : classNames.tickLabel,
+          color: theme.color.fgMuted,
+          verticalAlignment: 'middle',
+          style: styles == null ? void 0 : styles.tickLabel,
+          horizontalAlignment: position === 'left' ? 'right' : 'left'
+        }
+      };
+    });
+  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames == null ? void 0 : classNames.tickLabel, styles == null ? void 0 : styles.tickLabel]);
+  const gridAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: gridOpacity.value
+  }));
+  if (!yScale) return;
+  return /*#__PURE__*/_jsxs(G, _extends({
+    "data-axis": "y",
+    "data-position": position
+  }, props, {
+    children: [showGrid && /*#__PURE__*/_jsx(AnimatedG, {
+      animatedProps: gridAnimatedStyle,
+      children: ticksData.map((tick, index) => {
+        const horizontalLine = /*#__PURE__*/_jsx(ReferenceLine, {
+          LineComponent: GridLineComponent,
+          dataY: tick.tick,
+          yAxisId: axisId
+        });
+        return /*#__PURE__*/_jsx(G, {
+          children: horizontalLine
+        }, "grid-" + tick.tick + "-" + index);
+      })
+    }), chartTextData && /*#__PURE__*/_jsx(SmartChartTextGroup, {
+      prioritizeEndLabels: true,
+      labels: chartTextData,
+      minGap: minTickLabelGap
+    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(G, {
+      "data-testid": "tick-marks",
+      children: ticksData.map((tick, index) => {
+        const tickX = position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x;
+        const tickMarkSizePixels = tickMarkSize;
+        const tickX2 = position === 'left' ? axisBounds.x + axisBounds.width - tickMarkSizePixels : axisBounds.x + tickMarkSizePixels;
+        return /*#__PURE__*/_jsx(Line, _extends({}, axisTickMarkProps, {
+          x1: tickX,
+          x2: tickX2,
+          y1: tick.position,
+          y2: tick.position
+        }), "tick-mark-" + tick.tick + "-" + index);
+      })
+    }), axisBounds && showLine && /*#__PURE__*/_jsx(Line, _extends({}, axisLineProps, {
+      x1: position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x,
+      x2: position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x,
+      y1: axisBounds.y,
+      y2: axisBounds.y + axisBounds.height
+    }))]
+  }));
+});