@coinbase/cds-web 8.66.2 → 9.0.0-rc.2

package/esm/visualizations/chart/axis/XAxis.js

@@ -0,0 +1,315 @@
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return 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 { m as motion } from 'framer-motion';
+import { cx } from '../../../index';
+import { useCartesianChartContext } from '../ChartProvider';
+import { DottedLine } from '../line/DottedLine';
+import { SolidLine } from '../line/SolidLine';
+import { ChartText } from '../text/ChartText';
+import { ChartTextGroup } from '../text/ChartTextGroup';
+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;
+const LABEL_SIZE = 20;
+const axisTickMarkCss = "axisTickMarkCss-a1ljkl4n";
+const axisLineCss = "axisLineCss-a1tnt2l6";
+export const XAxis = /*#__PURE__*/memo(_ref => {
+  let {
+      axisId,
+      position = 'bottom',
+      showGrid,
+      requestedTickCount,
+      ticks,
+      tickLabelFormatter,
+      TickLabelComponent = DefaultAxisTickLabel,
+      style,
+      className,
+      styles,
+      classNames,
+      GridLineComponent = DottedLine,
+      LineComponent = SolidLine,
+      TickMarkLineComponent = SolidLine,
+      tickMarkLabelGap = 2,
+      minTickLabelGap = 4,
+      showTickMarks,
+      showLine,
+      tickMarkSize = 4,
+      tickInterval = 32,
+      tickMinStep = 1,
+      tickMaxStep,
+      label,
+      labelGap = 4,
+      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,
+    drawingArea
+  } = useCartesianChartContext();
+  const xScale = getXScale(axisId);
+  const xAxis = getXAxis(axisId);
+  const axisBounds = getAxisBounds(registrationId);
+  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 || xAxis === void 0 ? void 0 : xAxis.data;
+    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
+    if (hasStringLabels && !tickLabelFormatter && axisData[value] !== undefined) {
+      return axisData[value];
+    }
+
+    // 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 [];
+
+    // Check if we have string labels
+    const axisData = xAxis === null || xAxis === void 0 ? 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);
+    }
+    return getAxisTicksData({
+      scaleFunction: xScale,
+      ticks,
+      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
+      }, (_, i) => i) : undefined,
+      tickInterval: tickInterval,
+      options: {
+        minStep: tickMinStep,
+        maxStep: tickMaxStep
+      }
+    });
+  }, [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 labelY = position === 'top' ? axisBounds.y + axisBounds.height - tickOffset - labelOffset : axisBounds.y + labelOffset + tickOffset;
+      return {
+        x: tick.position,
+        y: labelY,
+        label: formatTick(tick.tick),
+        chartTextProps: {
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel,
+          color: 'var(--color-fgMuted)',
+          verticalAlignment: 'middle',
+          style: styles === null || styles === void 0 ? void 0 : styles.tickLabel,
+          horizontalAlignment: 'center'
+        }
+      };
+    });
+  }, [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("g", {
+      "data-testid": "".concat(testID, "-grid"),
+      children: gridLinePositions.map(_ref2 => {
+        let {
+          x,
+          key
+        } = _ref2;
+        return animate ? /*#__PURE__*/_jsx(motion.g, {
+          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,
+      LabelComponent: TickLabelComponent,
+      labels: chartTextData,
+      minGap: minTickLabelGap
+    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx("g", {
+      "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(x, tickYEnd, x, tickYStart),
+          stroke: "var(--color-fg)",
+          strokeLinecap: "square",
+          strokeWidth: 1,
+          style: styles === null || styles === void 0 ? void 0 : styles.tickMark
+        }, 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,
+      style: styles === null || styles === void 0 ? void 0 : styles.line
+    }), label && /*#__PURE__*/_jsx(ChartText, {
+      disableRepositioning: true,
+      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,
+      children: label
+    })]
+  }));
+});
+import "./XAxis.css";

package/esm/visualizations/chart/axis/YAxis.css

@@ -0,0 +1,2 @@
+@layer cds{.axisTickMarkCss-a1u6pwmg{stroke:var(--color-fg);stroke-linecap:square;stroke-width:1px;}
+.axisLineCss-a5lob8{stroke:var(--color-fg);stroke-linecap:square;stroke-width:1px;}}

package/esm/visualizations/chart/axis/YAxis.js

@@ -0,0 +1,316 @@
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return 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 { m as motion } from 'framer-motion';
+import { cx } from '../../../index';
+import { useCartesianChartContext } from '../ChartProvider';
+import { DottedLine } from '../line/DottedLine';
+import { SolidLine } from '../line/SolidLine';
+import { ChartText } from '../text/ChartText';
+import { ChartTextGroup } from '../text/ChartTextGroup';
+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;
+const LABEL_SIZE = 20;
+const axisTickMarkCss = "axisTickMarkCss-a1u6pwmg";
+const axisLineCss = "axisLineCss-a5lob8";
+export const YAxis = /*#__PURE__*/memo(_ref => {
+  let {
+      axisId,
+      position = 'right',
+      showGrid,
+      requestedTickCount,
+      ticks,
+      tickLabelFormatter,
+      TickLabelComponent = DefaultAxisTickLabel,
+      style,
+      className,
+      styles,
+      classNames,
+      GridLineComponent = DottedLine,
+      LineComponent = SolidLine,
+      TickMarkLineComponent = SolidLine,
+      tickMarkLabelGap = 8,
+      minTickLabelGap = 0,
+      showTickMarks,
+      showLine,
+      tickMarkSize = 4,
+      tickInterval,
+      label,
+      labelGap = 4,
+      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,
+    drawingArea
+  } = useCartesianChartContext();
+  const yScale = getYScale(axisId);
+  const yAxis = getYAxis(axisId);
+  const axisBounds = getAxisBounds(registrationId);
+  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 || yAxis === void 0 ? void 0 : yAxis.data;
+    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
+    if (hasStringLabels && !tickLabelFormatter && axisData[value] !== undefined) {
+      return axisData[value];
+    }
+
+    // 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]);
+
+  // 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 || yAxis === void 0 ? 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 !== void 0 ? requestedTickCount : layout === 'horizontal' ? undefined : 5,
+      categories,
+      tickInterval: tickInterval
+    });
+  }, [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 => {
+      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: formatTick(tick.tick),
+        chartTextProps: {
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.tickLabel,
+          color: 'var(--color-fgMuted)',
+          verticalAlignment: 'middle',
+          style: styles === null || styles === void 0 ? void 0 : styles.tickLabel,
+          horizontalAlignment: position === 'left' ? 'right' : 'left'
+        }
+      };
+    });
+  }, [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 || !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("g", {
+      "data-testid": "".concat(testID, "-grid"),
+      children: gridLinePositions.map(_ref2 => {
+        let {
+          y,
+          key
+        } = _ref2;
+        return animate ? /*#__PURE__*/_jsx(motion.g, {
+          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,
+      LabelComponent: TickLabelComponent,
+      labels: chartTextData,
+      minGap: minTickLabelGap
+    }), showTickMarks && /*#__PURE__*/_jsx("g", {
+      "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(tickXStart, y, tickXEnd, y),
+          stroke: "var(--color-fg)",
+          strokeLinecap: "square",
+          strokeWidth: 1,
+          style: styles === null || styles === void 0 ? void 0 : styles.tickMark
+        }, 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)")
+      },
+      children: /*#__PURE__*/_jsx(ChartText, {
+        disableRepositioning: true,
+        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,
+        children: label
+      })
+    })]
+  }));
+});
+import "./YAxis.css";

package/esm/visualizations/chart/axis/index.js

@@ -0,0 +1,6 @@
+// codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
+export * from './Axis';
+export * from './DefaultAxisTickLabel';
+export * from './XAxis';
+export * from './YAxis';
+// codegen:end