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

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", "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,14 +8,18 @@ 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 { 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, 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 = "cds-axisTickMarkCss-au2toz5";
 const axisLineCss = "cds-axisLineCss-akmofp5";
 export const YAxis = /*#__PURE__*/memo(_ref => {
@@ -26,18 +30,26 @@ 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,
+      testID = 'y-axis',
+      bandGridLinePlacement = 'edges',
+      bandTickMarkPlacement = 'middle'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const registrationId = useId();
@@ -47,7 +59,8 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
     getYAxis,
     registerAxis,
     unregisterAxis,
-    getAxisBounds
+    getAxisBounds,
+    drawingArea
   } = useCartesianChartContext();
   const yScale = getYScale(axisId);
   const yAxis = getYAxis(axisId);
@@ -99,6 +112,72 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       tickInterval: tickInterval
     });
   }, [ticks, yScale, requestedTickCount, tickInterval, yAxis === null || yAxis === void 0 ? void 0 : yAxis.data]);
+  const isBandScale = useMemo(() => {
+    if (!yScale) return false;
+    return isCategoricalScale(yScale);
+  }, [yScale]);
+
+  // Compute grid line positions (including bounds closing line for band scales)
+  const gridLinePositions = useMemo(() => {
+    if (!yScale) return [];
+    return ticksData.flatMap((tick, index) => {
+      if (!isBandScale) {
+        return [{
+          y: tick.position,
+          key: "grid-".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 => {
@@ -118,65 +197,119 @@ 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 || !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));
-      })
-    }), 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
-        })
+          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);
       })
-    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx("g", {
-      "data-testid": "tick-marks",
-      children: ticksData.map((tick, index) => {
-        const tickX = position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x;
-        const tickMarkSizePixels = tickMarkSize;
-        const tickX2 = position === 'left' ? axisBounds.x + axisBounds.width - tickMarkSizePixels : axisBounds.x + tickMarkSizePixels;
-        return /*#__PURE__*/_jsx("line", {
+    }), 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),
-          style: styles === null || styles === void 0 ? void 0 : styles.tickMark,
-          x1: tickX,
-          x2: tickX2,
-          y1: tick.position,
-          y2: tick.position
-        }, "tick-mark-".concat(tick.tick, "-").concat(index));
+          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);
       })
-    }), 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
+      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
+      })
     })]
   }));
 });

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

@@ -23,6 +23,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     originY,
     dataX,
     dataY,
+    seriesId,
     BarComponent = DefaultBar,
     fill = 'var(--color-fgPrimary)',
     fillOpacity = 1,
@@ -30,7 +31,9 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     strokeWidth,
     borderRadius = 4,
     roundTop = true,
-    roundBottom = true
+    roundBottom = true,
+    transitions,
+    transition
   } = _ref;
   const barPath = useMemo(() => {
     return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
@@ -50,8 +53,11 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     originY: effectiveOriginY,
     roundBottom: roundBottom,
     roundTop: roundTop,
+    seriesId: seriesId,
     stroke: stroke,
     strokeWidth: strokeWidth,
+    transition: transition,
+    transitions: transitions,
     width: width,
     x: x,
     y: y

package/esm/chart/bar/BarChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize"],
+const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transitions", "transition"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"];
 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; }
@@ -22,7 +22,7 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       showYAxis,
       xAxis,
       yAxis,
-      inset: userInset,
+      inset,
       children,
       barPadding,
       BarComponent,
@@ -34,44 +34,27 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       BarStackComponent,
       stackGap,
       barMinSize,
-      stackMinSize
+      stackMinSize,
+      transitions,
+      transition
     } = _ref,
     chartProps = _objectWithoutProperties(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(userInset, defaultChartInset), [userInset]);
-
-  // Convert BarSeries to Series for Chart context
-  const chartSeries = useMemo(() => {
-    return series === null || series === void 0 ? void 0 : series.map(s => ({
-      id: s.id,
-      data: s.data,
-      label: s.label,
-      color: s.color,
-      yAxisId: s.yAxisId,
-      stackId: s.stackId
-    }));
-  }, [series]);
+  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
   const transformedSeries = useMemo(() => {
-    if (!stacked || !chartSeries) return chartSeries;
-    return chartSeries.map(s => {
-      var _s$stackId;
-      return _objectSpread(_objectSpread({}, s), {}, {
-        stackId: (_s$stackId = s.stackId) !== null && _s$stackId !== void 0 ? _s$stackId : defaultStackId
-      });
-    });
-  }, [chartSeries, stacked]);
-  const seriesToRender = transformedSeries !== null && transformedSeries !== void 0 ? transformedSeries : chartSeries;
-
-  // Keep the original series with bar-specific props for BarPlot
-  const barSeriesToRender = useMemo(() => {
     if (!stacked || !series) return series;
     return series.map(s => {
-      var _s$stackId2;
+      var _s$stackId;
       return _objectSpread(_objectSpread({}, s), {}, {
-        stackId: (_s$stackId2 = s.stackId) !== null && _s$stackId2 !== void 0 ? _s$stackId2 : defaultStackId
+        stackId: (_s$stackId = s.stackId) !== null && _s$stackId !== void 0 ? _s$stackId : defaultStackId
       });
     });
   }, [series, stacked]);
 
+  // Unlike other charts with custom props per series, we do not need to pick out
+  // the props from each series that shouldn't be passed to CartesianChart
+  const seriesToRender = transformedSeries !== null && transformedSeries !== void 0 ? transformedSeries : series;
+  const seriesIds = seriesToRender === null || seriesToRender === void 0 ? void 0 : seriesToRender.map(s => s.id);
+
   // Split axis props into config props for Chart and visual props for axis components
   const _ref2 = xAxis || {},
     {
@@ -137,11 +120,13 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       borderRadius: borderRadius,
       fillOpacity: fillOpacity,
       roundBaseline: roundBaseline,
-      seriesIds: barSeriesToRender === null || barSeriesToRender === void 0 ? void 0 : barSeriesToRender.map(s => s.id),
+      seriesIds: seriesIds,
       stackGap: stackGap,
       stackMinSize: stackMinSize,
       stroke: stroke,
-      strokeWidth: strokeWidth
+      strokeWidth: strokeWidth,
+      transition: transition,
+      transitions: transitions
     }), children]
   }));
 }));

package/esm/chart/bar/BarPlot.js

@@ -22,7 +22,9 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     BarStackComponent,
     stackGap,
     barMinSize,
-    stackMinSize
+    stackMinSize,
+    transitions,
+    transition
   } = _ref;
   const {
     series: allSeries,
@@ -73,7 +75,6 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
       })
     }), /*#__PURE__*/_jsx("g", {
       clipPath: "url(#".concat(clipPathId, ")"),
-      "data-testid": "whoa",
       children: stackGroups.map((group, stackIndex) => /*#__PURE__*/_jsx(BarStackGroup, {
         BarComponent: defaultBarComponent,
         BarStackComponent: BarStackComponent,
@@ -89,6 +90,8 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
         stroke: defaultStroke,
         strokeWidth: defaultStrokeWidth,
         totalStacks: stackGroups.length,
+        transition: transition,
+        transitions: transitions,
         yAxisId: group.yAxisId
       }, group.stackId))
     })]