@coinbase/cds-web-visualization 3.4.0-beta.4 → 3.4.0-beta.6

package/esm/chart/area/GradientArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "fillOpacity", "peakColor", "baselineColor", "peakOpacity", "baselineOpacity", "baseline", "yAxisId"];
+const _excluded = ["d", "fill", "fillOpacity", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "gradient", "animate", "transition"];
 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; }
@@ -6,106 +6,60 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 { memo, useId, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
+import { Gradient } from '../gradient';
 import { Path } from '../Path';
+import { createGradient, getBaseline } from '../utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * A customizable gradient area component which uses Path.
+ * A customizable gradient area component which uses Path with SVG linearGradient.
+ *
+ * When no gradient is provided, automatically creates an appropriate gradient:
+ * - For data crossing zero: Creates a diverging gradient with peak opacity at both extremes
+ *   and baseline opacity at zero (or the specified baseline).
+ * - For all-positive or all-negative data: Creates a simple gradient from baseline to peak.
  */
 export const GradientArea = /*#__PURE__*/memo(_ref => {
   let {
       d,
       fill = 'var(--color-fgPrimary)',
       fillOpacity = 1,
-      peakColor,
-      baselineColor,
       peakOpacity = 0.3,
       baselineOpacity = 0,
       baseline,
-      yAxisId
+      yAxisId,
+      gradient: gradientProp,
+      animate,
+      transition
     } = _ref,
     pathProps = _objectWithoutProperties(_ref, _excluded);
-  const context = useCartesianChartContext();
+  const {
+    getYAxis
+  } = 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;
+  const yAxisConfig = getYAxis(yAxisId);
+  const gradient = useMemo(() => {
+    if (gradientProp) return gradientProp;
+    if (!yAxisConfig) return;
+    const baselineValue = getBaseline(yAxisConfig.domain, baseline);
+    return createGradient(yAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity);
+  }, [gradientProp, yAxisConfig, fill, baseline, peakOpacity, baselineOpacity]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("defs", {
-      children: /*#__PURE__*/_jsx("linearGradient", {
-        gradientUnits: useUserSpaceUnits ? 'userSpaceOnUse' : 'objectBoundingBox',
+    children: [gradient && /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx(Gradient, {
+        animate: animate,
+        gradient: gradient,
         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
-          })]
-        })
+        transition: transition,
+        yAxisId: yAxisId
       })
     }), /*#__PURE__*/_jsx(Path, _objectSpread({
+      animate: animate,
       d: d,
-      fill: "url(#".concat(patternId, ")")
+      fill: gradient ? "url(#".concat(patternId, ")") : fill,
+      fillOpacity: fillOpacity,
+      transition: transition
     }, pathProps))]
   });
 });

package/esm/chart/area/SolidArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "fillOpacity", "yAxisId", "baseline"];
+const _excluded = ["d", "fill", "fillOpacity", "yAxisId", "animate", "transition", "gradient"];
 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; }
@@ -6,24 +6,42 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 { memo, useId } from 'react';
+import { Gradient } from '../gradient';
 import { Path } from '../Path';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A customizable solid area component which uses Path.
+ * When a gradient is provided, renders with gradient fill.
+ * Otherwise, renders with solid fill.
  */
 export const SolidArea = /*#__PURE__*/memo(_ref => {
   let {
       d,
-      fill,
+      fill = 'var(--color-fgPrimary)',
       fillOpacity = 1,
       yAxisId,
-      baseline
+      animate,
+      transition,
+      gradient
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(Path, _objectSpread({
-    d: d,
-    fill: fill,
-    fillOpacity: fillOpacity
-  }, props));
+    pathProps = _objectWithoutProperties(_ref, _excluded);
+  const patternId = useId();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [gradient && /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx(Gradient, {
+        animate: animate,
+        gradient: gradient,
+        id: patternId,
+        transition: transition,
+        yAxisId: yAxisId
+      })
+    }), /*#__PURE__*/_jsx(Path, _objectSpread({
+      animate: animate,
+      d: d,
+      fill: gradient ? "url(#".concat(patternId, ")") : fill,
+      fillOpacity: fillOpacity,
+      transition: transition
+    }, pathProps))]
+  });
 });

package/esm/chart/axis/Axis.js

@@ -1,28 +1,7 @@
+import { accessoryFadeTransitionDuration } from '../utils';
 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)
  */
@@ -33,14 +12,14 @@ export const axisUpdateAnimationVariants = {
   animate: {
     opacity: 1,
     transition: {
-      duration: 0.15,
-      delay: 0.15 // For updates: fade out 150ms, then fade in 150ms
+      duration: accessoryFadeTransitionDuration,
+      delay: accessoryFadeTransitionDuration
     }
   },
   exit: {
     opacity: 0,
     transition: {
-      duration: 0.15
+      duration: accessoryFadeTransitionDuration
     }
   }
 };

package/esm/chart/axis/DefaultAxisTickLabel.js

@@ -0,0 +1,15 @@
+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); }
+import { memo } from 'react';
+import { ChartText } from '../text';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DefaultAxisTickLabel is the default label component for axis tick labels.
+ * Provides standard styling for both X and Y axis tick labels.
+ */
+export const DefaultAxisTickLabel = /*#__PURE__*/memo(props => {
+  return /*#__PURE__*/_jsx(ChartText, _objectSpread({}, props));
+});

package/esm/chart/axis/XAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "style", "className", "styles", "classNames", "GridLineComponent", "tickMarkLabelGap", "height", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep"];
+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"];
 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; }
@@ -12,10 +12,15 @@ 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 { 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 { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AXIS_HEIGHT = 32;
+const LABEL_SIZE = 20;
 const axisTickMarkCss = "cds-axisTickMarkCss-a6j4s2q";
 const axisLineCss = "cds-axisLineCss-a12llxjj";
 export const XAxis = /*#__PURE__*/memo(_ref => {
@@ -25,20 +30,25 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       requestedTickCount,
       ticks,
       tickLabelFormatter,
+      TickLabelComponent = DefaultAxisTickLabel,
       style,
       className,
       styles,
       classNames,
       GridLineComponent = DottedLine,
+      LineComponent = SolidLine,
+      TickMarkLineComponent = SolidLine,
       tickMarkLabelGap = 2,
-      height = 32,
       minTickLabelGap = 4,
       showTickMarks,
       showLine,
       tickMarkSize = 4,
       tickInterval = 32,
       tickMinStep = 1,
-      tickMaxStep
+      tickMaxStep,
+      label,
+      labelGap = 4,
+      height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const registrationId = useId();
@@ -114,9 +124,10 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
     if (!axisBounds) return null;
     return ticksData.map(tick => {
       const tickOffset = tickMarkLabelGap + (showTickMarks ? tickMarkSize : 0);
-      const availableSpace = axisBounds.height - tickOffset;
+      const availableSpace = AXIS_HEIGHT - tickOffset;
       const labelOffset = availableSpace / 2;
-      const labelY = position === 'top' ? axisBounds.y + labelOffset - tickOffset : axisBounds.y + labelOffset + tickOffset;
+      const baseY = position === 'top' && label ? axisBounds.y + LABEL_SIZE : axisBounds.y;
+      const labelY = position === 'top' ? baseY + labelOffset - tickOffset : baseY + labelOffset + tickOffset;
       return {
         x: tick.position,
         y: labelY,
@@ -130,8 +141,10 @@ 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]);
-  if (!xScale) 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, label]);
+  if (!xScale || !axisBounds) return;
+  const labelX = axisBounds.x + axisBounds.width / 2;
+  const labelY = position === 'bottom' ? axisBounds.y + axisBounds.height - LABEL_SIZE / 2 : axisBounds.y + LABEL_SIZE / 2;
   return /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({
     className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     "data-axis": "x",
@@ -155,40 +168,44 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
           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
-        })
-      })
+    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
+      prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
+      labels: chartTextData,
+      minGap: minTickLabelGap
     }), axisBounds && showTickMarks && /*#__PURE__*/_jsx("g", {
       "data-testid": "tick-marks",
       children: ticksData.map((tick, index) => {
         const tickY = position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height;
-        const tickMarkSizePixels = tickMarkSize;
-        const tickY2 = position === 'bottom' ? axisBounds.y + tickMarkSizePixels : axisBounds.y + axisBounds.height - tickMarkSizePixels;
-        return /*#__PURE__*/_jsx("line", {
+        const tickY2 = position === 'bottom' ? tickY + tickMarkSize : tickY - tickMarkSize;
+        return /*#__PURE__*/_jsx(TickMarkLineComponent, {
+          animate: false,
           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
+          clipRect: null,
+          d: lineToPath(tick.position, tickY2, tick.position, tickY),
+          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));
       })
-    }), axisBounds && showLine && /*#__PURE__*/_jsx("line", {
+    }), showLine && /*#__PURE__*/_jsx(LineComponent, {
+      animate: false,
       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
+      d: lineToPath(axisBounds.x, position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height, axisBounds.x + axisBounds.width, position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height),
+      stroke: "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,
+      verticalAlignment: "middle",
+      x: labelX,
+      y: labelY,
+      children: label
     })]
   }));
 });

package/esm/chart/axis/YAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "style", "className", "styles", "classNames", "GridLineComponent", "tickMarkLabelGap", "width", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval"];
+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"];
 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; }
@@ -12,10 +12,15 @@ 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 { 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 { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AXIS_WIDTH = 44;
+const LABEL_SIZE = 20;
 const axisTickMarkCss = "cds-axisTickMarkCss-au2toz5";
 const axisLineCss = "cds-axisLineCss-akmofp5";
 export const YAxis = /*#__PURE__*/memo(_ref => {
@@ -26,18 +31,23 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       requestedTickCount,
       ticks,
       tickLabelFormatter,
+      TickLabelComponent = DefaultAxisTickLabel,
       style,
       className,
       styles,
       classNames,
       GridLineComponent = DottedLine,
+      LineComponent = SolidLine,
+      TickMarkLineComponent = SolidLine,
       tickMarkLabelGap = 8,
-      width = 44,
       minTickLabelGap = 0,
       showTickMarks,
       showLine,
       tickMarkSize = 4,
-      tickInterval
+      tickInterval,
+      label,
+      labelGap = 4,
+      width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const registrationId = useId();
@@ -118,7 +128,9 @@ 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) return;
+  if (!yScale || !axisBounds) return;
+  const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
+  const labelY = axisBounds.y + axisBounds.height / 2;
   return /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({
     className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     "data-axis": "y",
@@ -143,40 +155,51 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
           children: horizontalLine
         }, "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", {
+    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
+      prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
+      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("line", {
+        return /*#__PURE__*/_jsx(TickMarkLineComponent, {
+          animate: false,
           className: cx(axisTickMarkCss, classNames === null || classNames === void 0 ? void 0 : classNames.tickMark),
-          style: styles === null || styles === void 0 ? void 0 : styles.tickMark,
-          x1: tickX,
-          x2: tickX2,
-          y1: tick.position,
-          y2: tick.position
+          clipRect: null,
+          d: lineToPath(tickX, tick.position, tickX2, tick.position),
+          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));
       })
-    }), axisBounds && showLine && /*#__PURE__*/_jsx("line", {
+    }), showLine && /*#__PURE__*/_jsx(LineComponent, {
+      animate: false,
       className: cx(axisLineCss, classNames === null || classNames === void 0 ? void 0 : classNames.line),
-      style: styles === null || styles === void 0 ? void 0 : styles.line,
-      x1: position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x,
-      x2: position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x,
-      y1: axisBounds.y,
-      y2: axisBounds.y + axisBounds.height
+      d: lineToPath(position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x, axisBounds.y, position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x, axisBounds.y + axisBounds.height),
+      stroke: "var(--color-fg)",
+      strokeLinecap: "square",
+      strokeWidth: 1,
+      style: styles === null || styles === void 0 ? void 0 : styles.line
+    }), label && /*#__PURE__*/_jsx("g", {
+      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,
+        verticalAlignment: "middle",
+        x: labelX,
+        y: labelY,
+        children: label
+      })
     })]
   }));
 });

package/esm/chart/axis/index.js

@@ -1,5 +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

package/esm/chart/bar/Bar.js

@@ -30,7 +30,8 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     strokeWidth,
     borderRadius = 4,
     roundTop = true,
-    roundBottom = true
+    roundBottom = true,
+    transition
   } = _ref;
   const barPath = useMemo(() => {
     return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
@@ -52,6 +53,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     roundTop: roundTop,
     stroke: stroke,
     strokeWidth: strokeWidth,
+    transition: transition,
     width: width,
     x: x,
     y: y