@coinbase/cds-mobile-visualization 3.4.0-beta.2 → 3.4.0-beta.21

package/esm/chart/axis/XAxis.js

@@ -1,17 +1,18 @@
-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); }
+const _excluded = ["position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "bandGridLinePlacement", "bandTickMarkPlacement"];
 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 { Group } from '@shopify/react-native-skia';
 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 { SolidLine } from '../line/SolidLine';
+import { ChartText } from '../text/ChartText';
+import { ChartTextGroup } from '../text/ChartTextGroup';
+import { getAxisTicksData, getPointOnScale, isCategoricalScale, lineToPath, toPointAnchor } from '../utils';
+import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AnimatedG = Animated.createAnimatedComponent(G);
+const AXIS_HEIGHT = 32;
+const LABEL_SIZE = 20;
 export const XAxis = /*#__PURE__*/memo(_ref => {
   let {
       position = 'bottom',
@@ -19,24 +20,30 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       requestedTickCount,
       ticks,
       tickLabelFormatter,
-      styles,
-      classNames,
+      TickLabelComponent = DefaultAxisTickLabel,
       GridLineComponent = DottedLine,
+      LineComponent = SolidLine,
+      TickMarkLineComponent = SolidLine,
       tickMarkLabelGap = 2,
-      height = 32,
       minTickLabelGap = 4,
       showTickMarks,
       showLine,
       tickMarkSize = 4,
       tickInterval = 32,
       tickMinStep = 1,
-      tickMaxStep
+      tickMaxStep,
+      label,
+      labelGap = 4,
+      height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT,
+      bandGridLinePlacement = 'edges',
+      bandTickMarkPlacement = 'middle'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   const registrationId = useId();
   const {
     animate,
+    drawingArea,
     getXScale,
     getXAxis,
     registerAxis,
@@ -46,17 +53,6 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
   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);
@@ -114,68 +110,154 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       }
     });
   }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis == null ? void 0 : xAxis.data]);
+  const isBandScale = useMemo(() => {
+    if (!xScale) return false;
+    return isCategoricalScale(xScale);
+  }, [xScale]);
+
+  // Compute grid line positions (including bounds closing line for band scales)
+  const gridLinePositions = useMemo(() => {
+    if (!xScale) return [];
+    return ticksData.flatMap((tick, index) => {
+      if (!isBandScale) {
+        return [{
+          x: tick.position,
+          key: "grid-" + tick.tick + "-" + index
+        }];
+      }
+      const bandScale = xScale;
+      const isLastTick = index === ticksData.length - 1;
+      const isEdges = bandGridLinePlacement === 'edges';
+      const startX = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandGridLinePlacement));
+      const positions = [{
+        x: startX,
+        key: "grid-" + tick.tick + "-" + index
+      }];
+
+      // For edges on last tick, add the closing line at stepEnd
+      if (isLastTick && isEdges) {
+        const endX = getPointOnScale(tick.tick, bandScale, 'stepEnd');
+        positions.push({
+          x: endX,
+          key: "grid-" + tick.tick + "-" + index + "-end"
+        });
+      }
+      return positions;
+    });
+  }, [ticksData, xScale, isBandScale, bandGridLinePlacement]);
+
+  // Compute tick mark positions (including bounds closing tick for band scales)
+  const tickMarkPositions = useMemo(() => {
+    if (!xScale) return [];
+    return ticksData.flatMap((tick, index) => {
+      if (!isBandScale) {
+        return [{
+          x: tick.position,
+          key: "tick-mark-" + tick.tick + "-" + index
+        }];
+      }
+      const bandScale = xScale;
+      const isLastTick = index === ticksData.length - 1;
+      const isEdges = bandTickMarkPlacement === 'edges';
+      const startX = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandTickMarkPlacement));
+      const positions = [{
+        x: startX,
+        key: "tick-mark-" + tick.tick + "-" + index
+      }];
+
+      // For edges on last tick, add the closing tick mark at stepEnd
+      if (isLastTick && isEdges) {
+        const endX = getPointOnScale(tick.tick, bandScale, 'stepEnd');
+        positions.push({
+          x: endX,
+          key: "tick-mark-" + tick.tick + "-" + index + "-end"
+        });
+      }
+      return positions;
+    });
+  }, [ticksData, xScale, isBandScale, bandTickMarkPlacement]);
   const chartTextData = useMemo(() => {
     if (!axisBounds) return null;
     return ticksData.map(tick => {
       const tickOffset = tickMarkLabelGap + (showTickMarks ? tickMarkSize : 0);
-      const availableSpace = axisBounds.height - tickOffset;
+
+      // Use AXIS_HEIGHT for centering, not full axisBounds.height
+      // This ensures tick labels are centered in the axis area, not including label space
+      const availableSpace = AXIS_HEIGHT - tickOffset;
       const labelOffset = availableSpace / 2;
-      const labelY = position === 'top' ? axisBounds.y + labelOffset - tickOffset : axisBounds.y + labelOffset + tickOffset;
+      const labelY = position === 'top' ? axisBounds.y + axisBounds.height - tickOffset - labelOffset : 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);
+  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick]);
+  if (!xScale || !axisBounds) return;
+  const labelX = axisBounds.x + axisBounds.width / 2;
+  const labelY = position === 'bottom' ? axisBounds.y + axisBounds.height - LABEL_SIZE / 2 : axisBounds.y + LABEL_SIZE / 2;
+
+  // Pre-compute tick mark Y coordinates
+  const tickYTop = axisBounds.y;
+  const tickYBottom = axisBounds.y + axisBounds.height;
+  const tickYStart = position === 'bottom' ? tickYTop : tickYBottom;
+  const tickYEnd = position === 'bottom' ? tickYTop + tickMarkSize : tickYBottom - tickMarkSize;
+
+  // Note: Unlike web, mobile renders grid lines and tick marks immediately without fade animation.
+  // This is because Skia can measure text dimensions synchronously, so there's no need to hide
+  // elements while waiting for measurements (web uses async ResizeObserver).
+  return /*#__PURE__*/_jsxs(Group, {
+    children: [showGrid && /*#__PURE__*/_jsx(Group, {
+      children: gridLinePositions.map(_ref2 => {
+        let {
+          x,
+          key
+        } = _ref2;
+        return /*#__PURE__*/_jsx(GridLineComponent, {
+          animate: false,
+          clipPath: null,
+          d: lineToPath(x, drawingArea.y, x, drawingArea.y + drawingArea.height),
+          stroke: theme.color.bgLine
+        }, key);
       })
-    }), chartTextData && /*#__PURE__*/_jsx(SmartChartTextGroup, {
+    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
       prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
       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 && showTickMarks && /*#__PURE__*/_jsx(Group, {
+      children: tickMarkPositions.map(_ref3 => {
+        let {
+          x,
+          key
+        } = _ref3;
+        return /*#__PURE__*/_jsx(TickMarkLineComponent, {
+          animate: false,
+          clipPath: null,
+          d: lineToPath(x, tickYStart, x, tickYEnd),
+          stroke: theme.color.fg,
+          strokeCap: "square",
+          strokeWidth: 1
+        }, key);
       })
-    }), 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
-    }))]
-  }));
+    }), showLine && /*#__PURE__*/_jsx(LineComponent, {
+      animate: false,
+      clipPath: null,
+      d: lineToPath(axisBounds.x, position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height, axisBounds.x + axisBounds.width, position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height),
+      stroke: theme.color.fg,
+      strokeCap: "square",
+      strokeWidth: 1
+    }), label && /*#__PURE__*/_jsx(ChartText, {
+      horizontalAlignment: "center",
+      verticalAlignment: "middle",
+      x: labelX,
+      y: labelY,
+      children: label
+    })]
+  });
 });

package/esm/chart/axis/YAxis.js

@@ -1,17 +1,18 @@
-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); }
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "bandGridLinePlacement", "bandTickMarkPlacement"];
 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 { Group, vec } from '@shopify/react-native-skia';
 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 { SolidLine } from '../line/SolidLine';
+import { ChartText } from '../text/ChartText';
+import { ChartTextGroup } from '../text/ChartTextGroup';
+import { getAxisTicksData, getPointOnScale, isCategoricalScale, lineToPath, toPointAnchor } from '../utils';
+import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AnimatedG = Animated.createAnimatedComponent(G);
+const AXIS_WIDTH = 44;
+const LABEL_SIZE = 20;
 export const YAxis = /*#__PURE__*/memo(_ref => {
   let {
       axisId,
@@ -20,22 +21,28 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       requestedTickCount = 5,
       ticks,
       tickLabelFormatter,
-      styles,
-      classNames,
+      TickLabelComponent = DefaultAxisTickLabel,
       GridLineComponent = DottedLine,
+      LineComponent = SolidLine,
+      TickMarkLineComponent = SolidLine,
       tickMarkLabelGap = 8,
-      width = 44,
       minTickLabelGap = 0,
       showTickMarks,
       showLine,
       tickMarkSize = 4,
-      tickInterval
+      tickInterval,
+      label,
+      labelGap = 4,
+      width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH,
+      bandGridLinePlacement = 'edges',
+      bandTickMarkPlacement = 'middle'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   const registrationId = useId();
   const {
     animate,
+    drawingArea,
     getYScale,
     getYAxis,
     registerAxis,
@@ -45,17 +52,6 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
   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);
@@ -104,6 +100,72 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       tickInterval: tickInterval
     });
   }, [ticks, yScale, requestedTickCount, tickInterval, yAxis == null ? void 0 : yAxis.data]);
+  const isBandScale = useMemo(() => {
+    if (!yScale) return false;
+    return isCategoricalScale(yScale);
+  }, [yScale]);
+
+  // Compute grid line positions (including bounds closing line for band scales)
+  const gridLinePositions = useMemo(() => {
+    if (!yScale) return [];
+    return ticksData.flatMap((tick, index) => {
+      if (!isBandScale) {
+        return [{
+          y: tick.position,
+          key: "grid-" + tick.tick + "-" + index
+        }];
+      }
+      const bandScale = yScale;
+      const isLastTick = index === ticksData.length - 1;
+      const isEdges = bandGridLinePlacement === 'edges';
+      const startY = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandGridLinePlacement));
+      const positions = [{
+        y: startY,
+        key: "grid-" + tick.tick + "-" + index
+      }];
+
+      // For edges on last tick, add the closing line at stepEnd
+      if (isLastTick && isEdges) {
+        const endY = getPointOnScale(tick.tick, bandScale, 'stepEnd');
+        positions.push({
+          y: endY,
+          key: "grid-" + tick.tick + "-" + index + "-end"
+        });
+      }
+      return positions;
+    });
+  }, [ticksData, yScale, isBandScale, bandGridLinePlacement]);
+
+  // Compute tick mark positions (including bounds closing tick for band scales)
+  const tickMarkPositions = useMemo(() => {
+    if (!yScale) return [];
+    return ticksData.flatMap((tick, index) => {
+      if (!isBandScale) {
+        return [{
+          y: tick.position,
+          key: "tick-mark-" + tick.tick + "-" + index
+        }];
+      }
+      const bandScale = yScale;
+      const isLastTick = index === ticksData.length - 1;
+      const isEdges = bandTickMarkPlacement === 'edges';
+      const startY = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandTickMarkPlacement));
+      const positions = [{
+        y: startY,
+        key: "tick-mark-" + tick.tick + "-" + index
+      }];
+
+      // For edges on last tick, add the closing tick mark at stepEnd
+      if (isLastTick && isEdges) {
+        const endY = getPointOnScale(tick.tick, bandScale, 'stepEnd');
+        positions.push({
+          y: endY,
+          key: "tick-mark-" + tick.tick + "-" + index + "-end"
+        });
+      }
+      return positions;
+    });
+  }, [ticksData, yScale, isBandScale, bandTickMarkPlacement]);
   const chartTextData = useMemo(() => {
     if (!axisBounds) return null;
     return ticksData.map(tick => {
@@ -114,57 +176,79 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
         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);
+  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, theme.color.fgMuted]);
+  if (!yScale || !axisBounds) return;
+  const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
+  const labelY = axisBounds.y + axisBounds.height / 2;
+
+  // Pre-compute tick mark X coordinates
+  const tickXLeft = axisBounds.x;
+  const tickXRight = axisBounds.x + axisBounds.width;
+  const tickXStart = position === 'left' ? tickXRight : tickXLeft;
+  const tickXEnd = position === 'left' ? tickXRight - tickMarkSize : tickXLeft + tickMarkSize;
+
+  // Note: Unlike web, mobile renders grid lines and tick marks immediately without fade animation.
+  // This is because Skia can measure text dimensions synchronously, so there's no need to hide
+  // elements while waiting for measurements (web uses async ResizeObserver).
+  return /*#__PURE__*/_jsxs(Group, {
+    children: [showGrid && /*#__PURE__*/_jsx(Group, {
+      children: gridLinePositions.map(_ref2 => {
+        let {
+          y,
+          key
+        } = _ref2;
+        return /*#__PURE__*/_jsx(GridLineComponent, {
+          animate: false,
+          clipPath: null,
+          d: lineToPath(drawingArea.x, y, drawingArea.x + drawingArea.width, y),
+          stroke: theme.color.bgLine
+        }, key);
       })
-    }), chartTextData && /*#__PURE__*/_jsx(SmartChartTextGroup, {
+    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
       prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
       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 && showTickMarks && /*#__PURE__*/_jsx(Group, {
+      children: tickMarkPositions.map(_ref3 => {
+        let {
+          y,
+          key
+        } = _ref3;
+        return /*#__PURE__*/_jsx(TickMarkLineComponent, {
+          animate: false,
+          clipPath: null,
+          d: lineToPath(tickXStart, y, tickXEnd, y),
+          stroke: theme.color.fg,
+          strokeCap: "square",
+          strokeWidth: 1
+        }, key);
+      })
+    }), showLine && /*#__PURE__*/_jsx(LineComponent, {
+      animate: false,
+      clipPath: null,
+      d: lineToPath(position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x, axisBounds.y, position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x, axisBounds.y + axisBounds.height),
+      stroke: theme.color.fg,
+      strokeCap: "square",
+      strokeWidth: 1
+    }), label && /*#__PURE__*/_jsx(Group, {
+      origin: vec(labelX, labelY),
+      transform: [{
+        rotate: position === 'left' ? -Math.PI / 2 : Math.PI / 2
+      }],
+      children: /*#__PURE__*/_jsx(ChartText, {
+        horizontalAlignment: "center",
+        verticalAlignment: "middle",
+        x: labelX,
+        y: labelY,
+        children: label
       })
-    }), 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
-    }))]
-  }));
+    })]
+  });
 });