@coinbase/cds-web-visualization 3.3.0 → 3.4.0-beta.2

package/esm/chart/area/DottedArea.js

@@ -0,0 +1,141 @@
+const _excluded = ["d", "fill", "className", "style", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "classNames", "styles", "animate"];
+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, useId } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { Path } from '../Path';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const DottedArea = /*#__PURE__*/memo(_ref => {
+  let {
+      d,
+      fill,
+      className,
+      style,
+      patternSize = 4,
+      dotSize = 1,
+      peakOpacity = 1,
+      baselineOpacity = 0,
+      baseline,
+      yAxisId,
+      classNames,
+      styles,
+      animate
+    } = _ref,
+    pathProps = _objectWithoutProperties(_ref, _excluded);
+  const context = useCartesianChartContext();
+  const patternId = useId();
+  const gradientId = useId();
+  const maskId = useId();
+  const dotCenterPosition = patternSize / 2;
+
+  // Get the y-scale for the specified axis (or default)
+  const yScale = context.getYScale(yAxisId);
+  const yRange = yScale === null || yScale === void 0 ? void 0 : yScale.range();
+  const yDomain = yScale === null || yScale === void 0 ? void 0 : yScale.domain();
+
+  // Use chart range if available, otherwise fall back to percentage
+  const useUserSpaceUnits = yRange !== undefined;
+
+  // 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) {
+      // Get the actual y coordinate for the baseline
+      const scaledValue = yScale(baseline !== null && baseline !== void 0 ? baseline : dataBaseline);
+      if (typeof scaledValue === 'number') {
+        baselinePosition = scaledValue;
+      }
+    } else {
+      // Calculate percentage position
+      baselinePercentage = "".concat((maxValue - (baseline !== null && baseline !== void 0 ? baseline : dataBaseline)) / (maxValue - minValue) * 100, "%");
+    }
+  }
+  const gradientY1 = useUserSpaceUnits ? yRange[1] : '0%';
+  const gradientY2 = useUserSpaceUnits ? yRange[0] : '100%';
+  return /*#__PURE__*/_jsxs("g", {
+    className: className !== null && className !== void 0 ? className : classNames === null || classNames === void 0 ? void 0 : classNames.root,
+    style: style !== null && style !== void 0 ? style : styles === null || styles === void 0 ? void 0 : styles.root,
+    children: [/*#__PURE__*/_jsxs("defs", {
+      children: [/*#__PURE__*/_jsx("pattern", {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.pattern,
+        height: patternSize,
+        id: patternId,
+        patternUnits: "userSpaceOnUse",
+        style: styles === null || styles === void 0 ? void 0 : styles.pattern,
+        width: patternSize,
+        x: "0",
+        y: "0",
+        children: /*#__PURE__*/_jsx("circle", {
+          cx: dotCenterPosition,
+          cy: dotCenterPosition,
+          fill: fill,
+          r: dotSize
+        })
+      }), /*#__PURE__*/_jsx("linearGradient", {
+        gradientUnits: useUserSpaceUnits ? 'userSpaceOnUse' : 'objectBoundingBox',
+        id: gradientId,
+        x1: useUserSpaceUnits ? 0 : '0%',
+        x2: useUserSpaceUnits ? 0 : '0%',
+        y1: gradientY1,
+        y2: gradientY2,
+        children: baselinePosition !== undefined || baselinePercentage !== undefined ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("stop", {
+            offset: "0%",
+            stopColor: "white",
+            stopOpacity: peakOpacity
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: baselinePercentage !== null && baselinePercentage !== void 0 ? baselinePercentage : "".concat((baselinePosition - yRange[1]) / (yRange[0] - yRange[1]) * 100, "%"),
+            stopColor: "white",
+            stopOpacity: baselineOpacity
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: "100%",
+            stopColor: "white",
+            stopOpacity: peakOpacity
+          })]
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("stop", {
+            offset: "0%",
+            stopColor: "white",
+            stopOpacity: peakOpacity
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: "100%",
+            stopColor: "white",
+            stopOpacity: baselineOpacity
+          })]
+        })
+      }), /*#__PURE__*/_jsx("mask", {
+        id: maskId,
+        children: /*#__PURE__*/_jsx(Path, {
+          animate: animate,
+          d: d,
+          fill: "url(#".concat(gradientId, ")")
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Path, _objectSpread({
+      animate: animate,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.path,
+      d: d,
+      fill: "url(#".concat(patternId, ")"),
+      mask: "url(#".concat(maskId, ")"),
+      style: styles === null || styles === void 0 ? void 0 : styles.path
+    }, pathProps))]
+  });
+});

package/esm/chart/area/GradientArea.js

@@ -0,0 +1,111 @@
+const _excluded = ["d", "fill", "fillOpacity", "peakColor", "baselineColor", "peakOpacity", "baselineOpacity", "baseline", "yAxisId"];
+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, useId } from 'react';
+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 = 'var(--color-fgPrimary)',
+      fillOpacity = 1,
+      peakColor,
+      baselineColor,
+      peakOpacity = 0.3,
+      baselineOpacity = 0,
+      baseline,
+      yAxisId
+    } = _ref,
+    pathProps = _objectWithoutProperties(_ref, _excluded);
+  const context = useCartesianChartContext();
+  const patternId = useId();
+
+  // Get the y-scale for the specified axis (or default)
+  const yScale = context.getYScale(yAxisId);
+  const yRange = yScale === null || yScale === void 0 ? void 0 : yScale.range();
+  const yDomain = yScale === null || yScale === void 0 ? void 0 : yScale.domain();
+
+  // Use chart range if available, otherwise fall back to percentage
+  const useUserSpaceUnits = yRange !== undefined;
+  const gradientY1 = useUserSpaceUnits ? yRange[1] : '0%';
+  const gradientY2 = useUserSpaceUnits ? 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) {
+      // Get the actual y coordinate for the baseline
+      const scaledValue = yScale(baseline !== null && baseline !== void 0 ? baseline : dataBaseline);
+      if (typeof scaledValue === 'number') {
+        baselinePosition = scaledValue;
+      }
+    } else {
+      // Calculate percentage position
+      baselinePercentage = "".concat((maxValue - (baseline !== null && baseline !== void 0 ? baseline : dataBaseline)) / (maxValue - minValue) * 100, "%");
+    }
+  }
+  const effectivePeakColor = peakColor !== null && peakColor !== void 0 ? peakColor : fill;
+  const effectiveBaselineColor = baselineColor !== null && baselineColor !== void 0 ? baselineColor : fill;
+  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 ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("stop", {
+            offset: "0%",
+            stopColor: effectivePeakColor,
+            stopOpacity: peakOpacity
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: baselinePercentage !== null && baselinePercentage !== void 0 ? baselinePercentage : "".concat((baselinePosition - yRange[1]) / (yRange[0] - yRange[1]) * 100, "%"),
+            stopColor: effectiveBaselineColor,
+            stopOpacity: baselineOpacity
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: "100%",
+            stopColor: effectivePeakColor,
+            stopOpacity: peakOpacity
+          })]
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("stop", {
+            offset: "0%",
+            stopColor: effectivePeakColor,
+            stopOpacity: peakOpacity
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: "100%",
+            stopColor: effectiveBaselineColor,
+            stopOpacity: baselineOpacity
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(Path, _objectSpread({
+      d: d,
+      fill: "url(#".concat(patternId, ")")
+    }, pathProps))]
+  });
+});

package/esm/chart/area/SolidArea.js

@@ -0,0 +1,29 @@
+const _excluded = ["d", "fill", "fillOpacity", "yAxisId", "baseline"];
+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 } 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,
+      yAxisId,
+      baseline
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Path, _objectSpread({
+    d: d,
+    fill: fill,
+    fillOpacity: fillOpacity
+  }, props));
+});

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,46 @@
+export const axisLineStyles = "\n  stroke: var(--color-fg);\n  stroke-linecap: square;\n  stroke-width: 1px;\n";
+export const axisTickMarkStyles = "\n  stroke: var(--color-fg);\n  stroke-linecap: square;\n  stroke-width: 1px;\n";
+
+/**
+ * Animation variants for grouped axis tick labels - initial mount
+ */
+export const axisTickLabelsInitialAnimationVariants = {
+  initial: {
+    opacity: 0
+  },
+  animate: {
+    opacity: 1,
+    transition: {
+      duration: 0.15,
+      delay: 0.85 // Initial animation: wait 850ms then fade in over 150ms
+    }
+  },
+  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.css

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

package/esm/chart/axis/XAxis.js

@@ -0,0 +1,195 @@
+const _excluded = ["position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "style", "className", "styles", "classNames", "GridLineComponent", "tickMarkLabelGap", "height", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep"];
+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 { cx } from '@coinbase/cds-web';
+import { AnimatePresence, m as motion } from 'framer-motion';
+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 { axisLineStyles, axisTickLabelsInitialAnimationVariants, axisTickMarkStyles, axisUpdateAnimationVariants } from './Axis';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const axisTickMarkCss = "cds-axisTickMarkCss-a6j4s2q";
+const axisLineCss = "cds-axisLineCss-a12llxjj";
+export const XAxis = /*#__PURE__*/memo(_ref => {
+  let {
+      position = 'bottom',
+      showGrid,
+      requestedTickCount,
+      ticks,
+      tickLabelFormatter,
+      style,
+      className,
+      styles,
+      classNames,
+      GridLineComponent = DottedLine,
+      tickMarkLabelGap = 2,
+      height = 32,
+      minTickLabelGap = 4,
+      showTickMarks,
+      showLine,
+      tickMarkSize = 4,
+      tickInterval = 32,
+      tickMinStep = 1,
+      tickMaxStep
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const registrationId = useId();
+  const {
+    animate,
+    getXScale,
+    getXAxis,
+    registerAxis,
+    unregisterAxis,
+    getAxisBounds
+  } = useCartesianChartContext();
+  const xScale = getXScale();
+  const xAxis = getXAxis();
+  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';
+    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 || tickLabelFormatter === void 0 ? void 0 : tickLabelFormatter(finalValue)) !== null && _tickLabelFormatter !== void 0 ? _tickLabelFormatter : finalValue;
+  }, [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);
+    }
+    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: 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]);
+  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: 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) return;
+  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
+        });
+        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));
+      })
+    }), chartTextData && /*#__PURE__*/_jsx(AnimatePresence, {
+      children: /*#__PURE__*/_jsx(motion.g, {
+        animate: "animate",
+        exit: "exit",
+        initial: "initial",
+        variants: animate ? axisTickLabelsInitialAnimationVariants : undefined,
+        children: /*#__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", {
+          className: cx(axisTickMarkCss, classNames === null || classNames === void 0 ? void 0 : classNames.tickMark),
+          style: styles === null || styles === void 0 ? void 0 : styles.tickMark,
+          x1: tick.position,
+          x2: tick.position,
+          y1: tickY,
+          y2: tickY2
+        }, "tick-mark-".concat(tick.tick, "-").concat(index));
+      })
+    }), axisBounds && showLine && /*#__PURE__*/_jsx("line", {
+      className: cx(axisLineCss, classNames === null || classNames === void 0 ? void 0 : classNames.line),
+      style: styles === null || styles === void 0 ? void 0 : styles.line,
+      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
+    })]
+  }));
+});
+import "./XAxis.css";

package/esm/chart/axis/YAxis.css

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