@coinbase/cds-web-visualization 3.4.0-beta.9 → 3.4.0

package/esm/chart/axis/XAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height"];
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "testID", "bandGridLinePlacement", "bandTickMarkPlacement"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -8,15 +8,14 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 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 { cx } from '@coinbase/cds-web';
-import { AnimatePresence, m as motion } from 'framer-motion';
+import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DottedLine } from '../line/DottedLine';
-import { ReferenceLine } from '../line/ReferenceLine';
 import { SolidLine } from '../line/SolidLine';
 import { ChartText } from '../text/ChartText';
 import { ChartTextGroup } from '../text/ChartTextGroup';
-import { getAxisTicksData, isCategoricalScale, lineToPath } from '../utils';
-import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationVariants } from './Axis';
+import { getAxisTicksData, getPointOnScale, isCategoricalScale, lineToPath, toPointAnchor } from '../utils';
+import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationTransition } from './Axis';
 import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AXIS_HEIGHT = 32;
@@ -25,6 +24,7 @@ const axisTickMarkCss = "cds-axisTickMarkCss-a6j4s2q";
 const axisLineCss = "cds-axisLineCss-a12llxjj";
 export const XAxis = /*#__PURE__*/memo(_ref => {
   let {
+      axisId,
       position = 'bottom',
       showGrid,
       requestedTickCount,
@@ -48,20 +48,25 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       tickMaxStep,
       label,
       labelGap = 4,
-      height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT
+      height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT,
+      testID = 'x-axis',
+      bandGridLinePlacement = 'edges',
+      bandTickMarkPlacement = 'middle'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const registrationId = useId();
   const {
     animate,
+    layout,
     getXScale,
     getXAxis,
     registerAxis,
     unregisterAxis,
-    getAxisBounds
+    getAxisBounds,
+    drawingArea
   } = useCartesianChartContext();
-  const xScale = getXScale();
-  const xAxis = getXAxis();
+  const xScale = getXScale(axisId);
+  const xAxis = getXAxis(axisId);
   const axisBounds = getAxisBounds(registrationId);
   useEffect(() => {
     registerAxis(registrationId, position, height);
@@ -72,15 +77,12 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
     // If we have string labels and no custom formatter, use the labels
     const axisData = xAxis === null || xAxis === void 0 ? 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];
+    if (hasStringLabels && !tickLabelFormatter && axisData[value] !== undefined) {
+      return axisData[value];
     }
 
-    // Use the formatter (if provided) or the value itself
-    return (_tickLabelFormatter = tickLabelFormatter === null || tickLabelFormatter === void 0 ? void 0 : tickLabelFormatter(finalValue)) !== null && _tickLabelFormatter !== void 0 ? _tickLabelFormatter : finalValue;
+    // Otherwise passes raw index to formatter
+    return (_tickLabelFormatter = tickLabelFormatter === null || tickLabelFormatter === void 0 ? void 0 : tickLabelFormatter(value)) !== null && _tickLabelFormatter !== void 0 ? _tickLabelFormatter : value;
   }, [xAxis === null || xAxis === void 0 ? void 0 : xAxis.data, tickLabelFormatter]);
   const ticksData = useMemo(() => {
     if (!xScale) return [];
@@ -99,16 +101,10 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       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,
+      requestedTickCount: requestedTickCount !== null && requestedTickCount !== void 0 ? requestedTickCount : layout === 'horizontal' ? 5 : undefined,
       categories,
       possibleTickValues: axisData && Array.isArray(axisData) && typeof axisData[0] === 'string' ? Array.from({
         length: axisData.length
@@ -119,15 +115,80 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
         maxStep: tickMaxStep
       }
     });
-  }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis === null || xAxis === void 0 ? void 0 : xAxis.data]);
+  }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis === null || xAxis === void 0 ? void 0 : xAxis.data, layout]);
+  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-".concat(tick.tick, "-").concat(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-".concat(tick.tick, "-").concat(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-".concat(tick.tick, "-").concat(index, "-end")
+        });
+      }
+      return positions;
+    });
+  }, [ticksData, xScale, isBandScale, bandGridLinePlacement]);
+
+  // Compute tick mark positions (including bounds closing tick mark for band scales)
+  const tickMarkPositions = useMemo(() => {
+    if (!xScale) return [];
+    return ticksData.flatMap((tick, index) => {
+      if (!isBandScale) {
+        return [{
+          x: tick.position,
+          key: "tick-mark-".concat(tick.tick, "-").concat(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-".concat(tick.tick, "-").concat(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-".concat(tick.tick, "-").concat(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 = AXIS_HEIGHT - tickOffset;
       const labelOffset = availableSpace / 2;
-      const baseY = position === 'top' && label ? axisBounds.y + LABEL_SIZE : axisBounds.y;
-      const labelY = position === 'top' ? baseY + labelOffset - tickOffset : baseY + labelOffset + tickOffset;
+      const labelY = position === 'top' ? axisBounds.y + axisBounds.height - tickOffset - labelOffset : axisBounds.y + labelOffset + tickOffset;
       return {
         x: tick.position,
         y: labelY,
@@ -141,32 +202,51 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
         }
       };
     });
-  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel, styles === null || styles === void 0 ? void 0 : styles.tickLabel, label]);
-  if (!xScale || !axisBounds) return;
+  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel, styles === null || styles === void 0 ? void 0 : styles.tickLabel]);
+  if (!xScale || !axisBounds || !drawingArea) return;
   const labelX = axisBounds.x + axisBounds.width / 2;
   const labelY = position === 'bottom' ? axisBounds.y + axisBounds.height - LABEL_SIZE / 2 : axisBounds.y + LABEL_SIZE / 2;
+  const tickYTop = axisBounds.y;
+  const tickYBottom = axisBounds.y + axisBounds.height;
+  const tickYStart = position === 'bottom' ? tickYTop : tickYBottom;
+  const tickYEnd = position === 'bottom' ? tickYTop + tickMarkSize : tickYBottom - tickMarkSize;
   return /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({
     className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     "data-axis": "x",
     "data-position": position,
     style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
   }, props), {}, {
-    children: [showGrid && /*#__PURE__*/_jsx(AnimatePresence, {
-      initial: false,
-      children: ticksData.map((tick, index) => {
-        const verticalLine = /*#__PURE__*/_jsx(ReferenceLine, {
-          LineComponent: GridLineComponent,
-          dataX: tick.tick
-        });
+    children: [showGrid && /*#__PURE__*/_jsx("g", {
+      "data-testid": "".concat(testID, "-grid"),
+      children: gridLinePositions.map(_ref2 => {
+        let {
+          x,
+          key
+        } = _ref2;
         return animate ? /*#__PURE__*/_jsx(motion.g, {
-          animate: "animate",
-          exit: "exit",
-          initial: "initial",
-          variants: axisUpdateAnimationVariants,
-          children: verticalLine
-        }, "grid-".concat(tick.tick, "-").concat(index)) : /*#__PURE__*/_jsx("g", {
-          children: verticalLine
-        }, "grid-".concat(tick.tick, "-").concat(index));
+          animate: {
+            opacity: 1
+          },
+          initial: {
+            opacity: 0
+          },
+          transition: axisUpdateAnimationTransition,
+          children: /*#__PURE__*/_jsx(GridLineComponent, {
+            animate: false,
+            className: classNames === null || classNames === void 0 ? void 0 : classNames.gridLine,
+            clipRect: null,
+            d: lineToPath(x, drawingArea.y, x, drawingArea.y + drawingArea.height),
+            stroke: "var(--color-bgLine)",
+            style: styles === null || styles === void 0 ? void 0 : styles.gridLine
+          })
+        }, key) : /*#__PURE__*/_jsx(GridLineComponent, {
+          animate: false,
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.gridLine,
+          clipRect: null,
+          d: lineToPath(x, drawingArea.y, x, drawingArea.y + drawingArea.height),
+          stroke: "var(--color-bgLine)",
+          style: styles === null || styles === void 0 ? void 0 : styles.gridLine
+        }, key);
       })
     }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
       prioritizeEndLabels: true,
@@ -174,25 +254,47 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       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 tickY2 = position === 'bottom' ? tickY + tickMarkSize : tickY - tickMarkSize;
-        return /*#__PURE__*/_jsx(TickMarkLineComponent, {
+      "data-testid": "".concat(testID, "-tick-marks"),
+      children: tickMarkPositions.map(_ref3 => {
+        let {
+          x,
+          key
+        } = _ref3;
+        return animate ? /*#__PURE__*/_jsx(motion.g, {
+          animate: {
+            opacity: 1
+          },
+          initial: {
+            opacity: 0
+          },
+          transition: axisUpdateAnimationTransition,
+          children: /*#__PURE__*/_jsx(TickMarkLineComponent, {
+            animate: false,
+            className: cx(axisTickMarkCss, classNames === null || classNames === void 0 ? void 0 : classNames.tickMark),
+            clipRect: null,
+            d: lineToPath(x, tickYEnd, x, tickYStart),
+            stroke: "var(--color-fg)",
+            strokeLinecap: "square",
+            strokeWidth: 1,
+            style: styles === null || styles === void 0 ? void 0 : styles.tickMark
+          })
+        }, key) : /*#__PURE__*/_jsx(TickMarkLineComponent, {
           animate: false,
           className: cx(axisTickMarkCss, classNames === null || classNames === void 0 ? void 0 : classNames.tickMark),
           clipRect: null,
-          d: lineToPath(tick.position, tickY2, tick.position, tickY),
+          d: lineToPath(x, tickYEnd, x, tickYStart),
           stroke: "var(--color-fg)",
           strokeLinecap: "square",
           strokeWidth: 1,
           style: styles === null || styles === void 0 ? void 0 : styles.tickMark
-        }, "tick-mark-".concat(tick.tick, "-").concat(index));
+        }, key);
       })
     }), showLine && /*#__PURE__*/_jsx(LineComponent, {
       animate: false,
       className: cx(axisLineCss, classNames === null || classNames === void 0 ? void 0 : classNames.line),
+      clipRect: 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),
+      "data-testid": "".concat(testID, "-line"),
       stroke: "var(--color-fg)",
       strokeLinecap: "square",
       strokeWidth: 1,
@@ -202,6 +304,7 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
       horizontalAlignment: "center",
       style: styles === null || styles === void 0 ? void 0 : styles.label,
+      testID: "".concat(testID, "-label"),
       verticalAlignment: "middle",
       x: labelX,
       y: labelY,

package/esm/chart/axis/YAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width"];
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "testID", "bandGridLinePlacement", "bandTickMarkPlacement"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -8,15 +8,14 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 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 { cx } from '@coinbase/cds-web';
-import { AnimatePresence, m as motion } from 'framer-motion';
+import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DottedLine } from '../line/DottedLine';
-import { ReferenceLine } from '../line/ReferenceLine';
 import { SolidLine } from '../line/SolidLine';
 import { ChartText } from '../text/ChartText';
 import { ChartTextGroup } from '../text/ChartTextGroup';
-import { getAxisTicksData, isCategoricalScale, lineToPath } from '../utils';
-import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationVariants } from './Axis';
+import { getAxisTicksData, getPointOnScale, isCategoricalScale, lineToPath, toPointAnchor } from '../utils';
+import { axisLineStyles, axisTickMarkStyles, axisUpdateAnimationTransition } from './Axis';
 import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AXIS_WIDTH = 44;
@@ -47,17 +46,22 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       tickInterval,
       label,
       labelGap = 4,
-      width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH
+      width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH,
+      testID = 'y-axis',
+      bandGridLinePlacement = 'edges',
+      bandTickMarkPlacement = 'middle'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const registrationId = useId();
   const {
     animate,
+    layout,
     getYScale,
     getYAxis,
     registerAxis,
     unregisterAxis,
-    getAxisBounds
+    getAxisBounds,
+    drawingArea
   } = useCartesianChartContext();
   const yScale = getYScale(axisId);
   const yAxis = getYAxis(axisId);
@@ -72,11 +76,10 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
     const axisData = yAxis === null || yAxis === void 0 ? 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
+    // Otherwise passes raw index to formatter
     return (_tickLabelFormatter = tickLabelFormatter === null || tickLabelFormatter === void 0 ? void 0 : tickLabelFormatter(value)) !== null && _tickLabelFormatter !== void 0 ? _tickLabelFormatter : value;
   }, [yAxis === null || yAxis === void 0 ? void 0 : yAxis.data, tickLabelFormatter]);
 
@@ -104,11 +107,77 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
     return getAxisTicksData({
       scaleFunction: yScale,
       ticks,
-      requestedTickCount: tickInterval !== undefined ? undefined : requestedTickCount !== null && requestedTickCount !== void 0 ? requestedTickCount : 5,
+      requestedTickCount: tickInterval !== undefined ? undefined : requestedTickCount !== null && requestedTickCount !== void 0 ? requestedTickCount : layout === 'horizontal' ? undefined : 5,
       categories,
       tickInterval: tickInterval
     });
-  }, [ticks, yScale, requestedTickCount, tickInterval, yAxis === null || yAxis === void 0 ? void 0 : yAxis.data]);
+  }, [ticks, yScale, requestedTickCount, tickInterval, yAxis === null || yAxis === void 0 ? void 0 : yAxis.data, layout]);
+  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-".concat(tick.tick, "-").concat(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-".concat(tick.tick, "-").concat(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-".concat(tick.tick, "-").concat(index, "-end")
+        });
+      }
+      return positions;
+    });
+  }, [ticksData, yScale, isBandScale, bandGridLinePlacement]);
+
+  // Compute tick mark positions (including bounds closing tick mark for band scales)
+  const tickMarkPositions = useMemo(() => {
+    if (!yScale) return [];
+    return ticksData.flatMap((tick, index) => {
+      if (!isBandScale) {
+        return [{
+          y: tick.position,
+          key: "tick-mark-".concat(tick.tick, "-").concat(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-".concat(tick.tick, "-").concat(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-".concat(tick.tick, "-").concat(index, "-end")
+        });
+      }
+      return positions;
+    });
+  }, [ticksData, yScale, isBandScale, bandTickMarkPlacement]);
   const chartTextData = useMemo(() => {
     if (!axisBounds) return null;
     return ticksData.map(tick => {
@@ -128,32 +197,50 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       };
     });
   }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel, styles === null || styles === void 0 ? void 0 : styles.tickLabel]);
-  if (!yScale || !axisBounds) return;
+  if (!yScale || !axisBounds || !drawingArea) return;
   const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
   const labelY = axisBounds.y + axisBounds.height / 2;
+  const tickXLeft = axisBounds.x;
+  const tickXRight = axisBounds.x + axisBounds.width;
+  const tickXStart = position === 'left' ? tickXRight : tickXLeft;
+  const tickXEnd = position === 'left' ? tickXRight - tickMarkSize : tickXLeft + tickMarkSize;
   return /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({
     className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     "data-axis": "y",
     "data-position": position,
     style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
   }, props), {}, {
-    children: [showGrid && /*#__PURE__*/_jsx(AnimatePresence, {
-      initial: false,
-      children: ticksData.map((tick, index) => {
-        const horizontalLine = /*#__PURE__*/_jsx(ReferenceLine, {
-          LineComponent: GridLineComponent,
-          dataY: tick.tick,
-          yAxisId: axisId
-        });
+    children: [showGrid && /*#__PURE__*/_jsx("g", {
+      "data-testid": "".concat(testID, "-grid"),
+      children: gridLinePositions.map(_ref2 => {
+        let {
+          y,
+          key
+        } = _ref2;
         return animate ? /*#__PURE__*/_jsx(motion.g, {
-          animate: "animate",
-          exit: "exit",
-          initial: "initial",
-          variants: axisUpdateAnimationVariants,
-          children: horizontalLine
-        }, "grid-".concat(tick.tick, "-").concat(index)) : /*#__PURE__*/_jsx("g", {
-          children: horizontalLine
-        }, "grid-".concat(tick.tick, "-").concat(index));
+          animate: {
+            opacity: 1
+          },
+          initial: {
+            opacity: 0
+          },
+          transition: axisUpdateAnimationTransition,
+          children: /*#__PURE__*/_jsx(GridLineComponent, {
+            animate: false,
+            className: classNames === null || classNames === void 0 ? void 0 : classNames.gridLine,
+            clipRect: null,
+            d: lineToPath(drawingArea.x, y, drawingArea.x + drawingArea.width, y),
+            stroke: "var(--color-bgLine)",
+            style: styles === null || styles === void 0 ? void 0 : styles.gridLine
+          })
+        }, key) : /*#__PURE__*/_jsx(GridLineComponent, {
+          animate: false,
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.gridLine,
+          clipRect: null,
+          d: lineToPath(drawingArea.x, y, drawingArea.x + drawingArea.width, y),
+          stroke: "var(--color-bgLine)",
+          style: styles === null || styles === void 0 ? void 0 : styles.gridLine
+        }, key);
       })
     }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
       prioritizeEndLabels: true,
@@ -161,31 +248,53 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       labels: chartTextData,
       minGap: minTickLabelGap
     }), 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(TickMarkLineComponent, {
+      "data-testid": "".concat(testID, "-tick-marks"),
+      children: tickMarkPositions.map(_ref3 => {
+        let {
+          y,
+          key
+        } = _ref3;
+        return animate ? /*#__PURE__*/_jsx(motion.g, {
+          animate: {
+            opacity: 1
+          },
+          initial: {
+            opacity: 0
+          },
+          transition: axisUpdateAnimationTransition,
+          children: /*#__PURE__*/_jsx(TickMarkLineComponent, {
+            animate: false,
+            className: cx(axisTickMarkCss, classNames === null || classNames === void 0 ? void 0 : classNames.tickMark),
+            clipRect: null,
+            d: lineToPath(tickXStart, y, tickXEnd, y),
+            stroke: "var(--color-fg)",
+            strokeLinecap: "square",
+            strokeWidth: 1,
+            style: styles === null || styles === void 0 ? void 0 : styles.tickMark
+          })
+        }, key) : /*#__PURE__*/_jsx(TickMarkLineComponent, {
           animate: false,
           className: cx(axisTickMarkCss, classNames === null || classNames === void 0 ? void 0 : classNames.tickMark),
           clipRect: null,
-          d: lineToPath(tickX, tick.position, tickX2, tick.position),
+          d: lineToPath(tickXStart, y, tickXEnd, y),
           stroke: "var(--color-fg)",
           strokeLinecap: "square",
           strokeWidth: 1,
           style: styles === null || styles === void 0 ? void 0 : styles.tickMark
-        }, "tick-mark-".concat(tick.tick, "-").concat(index));
+        }, key);
       })
     }), showLine && /*#__PURE__*/_jsx(LineComponent, {
       animate: false,
       className: cx(axisLineCss, classNames === null || classNames === void 0 ? void 0 : classNames.line),
+      clipRect: 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),
+      "data-testid": "".concat(testID, "-line"),
       stroke: "var(--color-fg)",
       strokeLinecap: "square",
       strokeWidth: 1,
       style: styles === null || styles === void 0 ? void 0 : styles.line
     }), label && /*#__PURE__*/_jsx("g", {
+      "data-testid": "".concat(testID, "-label"),
       style: {
         transformOrigin: "".concat(labelX, "px ").concat(labelY, "px"),
         transform: "rotate(".concat(position === 'left' ? -90 : 90, "deg)")
@@ -195,6 +304,7 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
         className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
         horizontalAlignment: "center",
         style: styles === null || styles === void 0 ? void 0 : styles.label,
+        testID: "".concat(testID, "-label-text"),
         verticalAlignment: "middle",
         x: labelX,
         y: labelY,

package/esm/chart/bar/Bar.js

@@ -1,4 +1,5 @@
 import React, { memo, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
 import { getBarPath } from '../utils';
 import { DefaultBar } from './';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,9 +21,10 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     y,
     width,
     height,
-    originY,
+    origin: originProp,
     dataX,
     dataY,
+    seriesId,
     BarComponent = DefaultBar,
     fill = 'var(--color-fgPrimary)',
     fillOpacity = 1,
@@ -31,15 +33,18 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
+    minSize,
+    transitions,
     transition
   } = _ref;
+  const {
+    layout
+  } = useCartesianChartContext();
   const barPath = useMemo(() => {
-    return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
-  }, [x, y, width, height, borderRadius, roundTop, roundBottom]);
-  const effectiveOriginY = originY !== null && originY !== void 0 ? originY : y + height;
-  if (!barPath) {
-    return null;
-  }
+    return getBarPath(x, y, width, height, borderRadius, !!roundTop, !!roundBottom, layout);
+  }, [x, y, width, height, borderRadius, roundTop, roundBottom, layout]);
+  const origin = useMemo(() => originProp !== null && originProp !== void 0 ? originProp : layout === 'horizontal' ? x : y + height, [originProp, layout, x, y, height]);
+  if (!barPath) return;
   return /*#__PURE__*/_jsx(BarComponent, {
     borderRadius: borderRadius,
     d: barPath,
@@ -48,12 +53,15 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     fill: fill,
     fillOpacity: fillOpacity,
     height: height,
-    originY: effectiveOriginY,
+    minSize: minSize,
+    origin: origin,
     roundBottom: roundBottom,
     roundTop: roundTop,
+    seriesId: seriesId,
     stroke: stroke,
     strokeWidth: strokeWidth,
     transition: transition,
+    transitions: transitions,
     width: width,
     x: x,
     y: y