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

package/esm/chart/area/SolidArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "fillOpacity", "yAxisId", "animate", "transitions", "transition", "gradient"];
+const _excluded = ["d", "fill", "fillOpacity", "xAxisId", "yAxisId", "animate", "transitions", "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; }
@@ -21,6 +21,7 @@ export const SolidArea = /*#__PURE__*/memo(_ref => {
       d,
       fill = 'var(--color-fgPrimary)',
       fillOpacity = 1,
+      xAxisId,
       yAxisId,
       animate,
       transitions,
@@ -36,6 +37,7 @@ export const SolidArea = /*#__PURE__*/memo(_ref => {
         gradient: gradient,
         id: patternId,
         transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : transition,
+        xAxisId: xAxisId,
         yAxisId: yAxisId
       })
     }), /*#__PURE__*/_jsx(Path, _objectSpread({

package/esm/chart/axis/XAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "style", "className", "styles", "classNames", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "testID", "bandGridLinePlacement", "bandTickMarkPlacement"];
+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; }
@@ -24,6 +24,7 @@ const axisTickMarkCss = "cds-axisTickMarkCss-a6j4s2q";
 const axisLineCss = "cds-axisLineCss-a12llxjj";
 export const XAxis = /*#__PURE__*/memo(_ref => {
   let {
+      axisId,
       position = 'bottom',
       showGrid,
       requestedTickCount,
@@ -56,6 +57,7 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
   const registrationId = useId();
   const {
     animate,
+    layout,
     getXScale,
     getXAxis,
     registerAxis,
@@ -63,8 +65,8 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
     getAxisBounds,
     drawingArea
   } = useCartesianChartContext();
-  const xScale = getXScale();
-  const xAxis = getXAxis();
+  const xScale = getXScale(axisId);
+  const xAxis = getXAxis(axisId);
   const axisBounds = getAxisBounds(registrationId);
   useEffect(() => {
     registerAxis(registrationId, position, height);
@@ -75,15 +77,12 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
     // If we have string labels and no custom formatter, use the labels
     const axisData = xAxis === null || xAxis === void 0 ? void 0 : xAxis.data;
     const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
-    let finalValue = value;
-
-    // For band scales with string data, value is an index
-    if (hasStringLabels && typeof value === 'number' && axisData[value] !== undefined) {
-      finalValue = axisData[value];
+    if (hasStringLabels && !tickLabelFormatter && axisData[value] !== undefined) {
+      return axisData[value];
     }
 
-    // Use the formatter (if provided) or the value itself
-    return (_tickLabelFormatter = tickLabelFormatter === null || tickLabelFormatter === void 0 ? void 0 : tickLabelFormatter(finalValue)) !== null && _tickLabelFormatter !== void 0 ? _tickLabelFormatter : finalValue;
+    // Otherwise passes raw index to formatter
+    return (_tickLabelFormatter = tickLabelFormatter === null || tickLabelFormatter === void 0 ? void 0 : tickLabelFormatter(value)) !== null && _tickLabelFormatter !== void 0 ? _tickLabelFormatter : value;
   }, [xAxis === null || xAxis === void 0 ? void 0 : xAxis.data, tickLabelFormatter]);
   const ticksData = useMemo(() => {
     if (!xScale) return [];
@@ -105,7 +104,7 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
     return getAxisTicksData({
       scaleFunction: xScale,
       ticks,
-      requestedTickCount,
+      requestedTickCount: requestedTickCount !== null && requestedTickCount !== void 0 ? requestedTickCount : layout === 'horizontal' ? 5 : undefined,
       categories,
       possibleTickValues: axisData && Array.isArray(axisData) && typeof axisData[0] === 'string' ? Array.from({
         length: axisData.length
@@ -116,7 +115,7 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
         maxStep: tickMaxStep
       }
     });
-  }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis === null || xAxis === void 0 ? void 0 : xAxis.data]);
+  }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis === null || xAxis === void 0 ? void 0 : xAxis.data, layout]);
   const isBandScale = useMemo(() => {
     if (!xScale) return false;
     return isCategoricalScale(xScale);

package/esm/chart/axis/YAxis.js

@@ -55,6 +55,7 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
   const registrationId = useId();
   const {
     animate,
+    layout,
     getYScale,
     getYAxis,
     registerAxis,
@@ -75,11 +76,10 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
     const axisData = yAxis === null || yAxis === void 0 ? void 0 : yAxis.data;
     const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
     if (hasStringLabels && !tickLabelFormatter && axisData[value] !== undefined) {
-      // Use the string label from the data array
       return axisData[value];
     }
 
-    // Otherwise use the formatter (if provided) or the value itself
+    // Otherwise passes raw index to formatter
     return (_tickLabelFormatter = tickLabelFormatter === null || tickLabelFormatter === void 0 ? void 0 : tickLabelFormatter(value)) !== null && _tickLabelFormatter !== void 0 ? _tickLabelFormatter : value;
   }, [yAxis === null || yAxis === void 0 ? void 0 : yAxis.data, tickLabelFormatter]);
 
@@ -107,11 +107,11 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
     return getAxisTicksData({
       scaleFunction: yScale,
       ticks,
-      requestedTickCount: tickInterval !== undefined ? undefined : requestedTickCount !== null && requestedTickCount !== void 0 ? requestedTickCount : 5,
+      requestedTickCount: tickInterval !== undefined ? undefined : requestedTickCount !== null && requestedTickCount !== void 0 ? requestedTickCount : layout === 'horizontal' ? undefined : 5,
       categories,
       tickInterval: tickInterval
     });
-  }, [ticks, yScale, requestedTickCount, tickInterval, yAxis === null || yAxis === void 0 ? void 0 : yAxis.data]);
+  }, [ticks, yScale, requestedTickCount, tickInterval, yAxis === null || yAxis === void 0 ? void 0 : yAxis.data, layout]);
   const isBandScale = useMemo(() => {
     if (!yScale) return false;
     return isCategoricalScale(yScale);

package/esm/chart/bar/Bar.js

@@ -1,4 +1,5 @@
 import React, { memo, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
 import { getBarPath } from '../utils';
 import { DefaultBar } from './';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,7 +21,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     y,
     width,
     height,
-    originY,
+    origin: originProp,
     dataX,
     dataY,
     seriesId,
@@ -35,10 +36,15 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     transitions,
     transition
   } = _ref;
+  const {
+    layout
+  } = useCartesianChartContext();
   const barPath = useMemo(() => {
-    return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
-  }, [x, y, width, height, borderRadius, roundTop, roundBottom]);
-  const effectiveOriginY = originY !== null && originY !== void 0 ? originY : y + height;
+    return getBarPath(x, y, width, height, borderRadius, !!roundTop, !!roundBottom, layout);
+  }, [x, y, width, height, borderRadius, roundTop, roundBottom, layout]);
+  const origin = useMemo(() => {
+    return originProp !== null && originProp !== void 0 ? originProp : layout === 'horizontal' ? x : y + height;
+  }, [originProp, layout, x, y, height]);
   if (!barPath) {
     return null;
   }
@@ -50,7 +56,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     fill: fill,
     fillOpacity: fillOpacity,
     height: height,
-    originY: effectiveOriginY,
+    origin: origin,
     roundBottom: roundBottom,
     roundTop: roundTop,
     seriesId: seriesId,

package/esm/chart/bar/BarChart.js

@@ -1,5 +1,5 @@
 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"],
+  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
   _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; }
 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; }
@@ -11,12 +11,12 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { forwardRef, memo, useMemo } from 'react';
 import { XAxis, YAxis } from '../axis';
 import { CartesianChart } from '../CartesianChart';
-import { defaultChartInset, defaultStackId, getChartInset } from '../utils';
+import { defaultStackId } from '../utils';
 import { BarPlot } from './BarPlot';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-      series,
+      series: seriesProp,
       stacked,
       showXAxis,
       showYAxis,
@@ -39,21 +39,19 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       transition
     } = _ref,
     chartProps = _objectWithoutProperties(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
-  const transformedSeries = useMemo(() => {
-    if (!stacked || !series) return series;
-    return series.map(s => {
+  const series = useMemo(() => {
+    if (!stacked || !seriesProp) return seriesProp;
+    return seriesProp.map(s => {
       var _s$stackId;
       return _objectSpread(_objectSpread({}, s), {}, {
         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);
+  }, [seriesProp, stacked]);
+  const seriesIds = useMemo(() => series === null || series === void 0 ? void 0 : series.map(s => s.id), [series]);
+  const isHorizontal = chartProps.layout === 'horizontal';
+  const defaultXScaleType = isHorizontal ? 'linear' : 'band';
+  const defaultYScaleType = isHorizontal ? 'band' : 'linear';
 
   // Split axis props into config props for Chart and visual props for axis components
   const _ref2 = xAxis || {},
@@ -63,7 +61,8 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       categoryPadding: xCategoryPadding,
       domain: xDomain,
       domainLimit: xDomainLimit,
-      range: xRange
+      range: xRange,
+      id: xAxisId
     } = _ref2,
     xAxisVisualProps = _objectWithoutProperties(_ref2, _excluded2);
   const _ref3 = yAxis || {},
@@ -77,14 +76,6 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       id: yAxisId
     } = _ref3,
     yAxisVisualProps = _objectWithoutProperties(_ref3, _excluded3);
-  const xAxisConfig = {
-    scaleType: xScaleType !== null && xScaleType !== void 0 ? xScaleType : 'band',
-    data: xData,
-    categoryPadding: xCategoryPadding,
-    domain: xDomain,
-    domainLimit: xDomainLimit,
-    range: xRange
-  };
   const hasNegativeValues = useMemo(() => {
     if (!series) return false;
     return series.some(s => {
@@ -92,25 +83,37 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       return (_s$data = s.data) === null || _s$data === void 0 ? void 0 : _s$data.some(value => typeof value === 'number' && value < 0 || Array.isArray(value) && value.some(v => typeof v === 'number' && v < 0));
     });
   }, [series]);
+  const xAxisConfig = useMemo(() => ({
+    scaleType: xScaleType !== null && xScaleType !== void 0 ? xScaleType : defaultXScaleType,
+    data: xData,
+    categoryPadding: xCategoryPadding,
+    domain: isHorizontal && !hasNegativeValues ? _objectSpread({
+      min: 0
+    }, xDomain) : xDomain,
+    domainLimit: xDomainLimit,
+    range: xRange
+  }), [xScaleType, isHorizontal, xData, xCategoryPadding, hasNegativeValues, xDomain, xDomainLimit, xRange, defaultXScaleType]);
 
-  // Set default min domain to 0 for area chart, but only if there are no negative values
-  const yAxisConfig = {
-    scaleType: yScaleType,
+  // Set default min domain to 0 for bar chart, but only if there are no negative values
+  const yAxisConfig = useMemo(() => ({
+    scaleType: yScaleType !== null && yScaleType !== void 0 ? yScaleType : defaultYScaleType,
     data: yData,
     categoryPadding: yCategoryPadding,
-    domain: hasNegativeValues ? yDomain : _objectSpread({
+    domain: !isHorizontal && !hasNegativeValues ? _objectSpread({
       min: 0
-    }, yDomain),
+    }, yDomain) : yDomain,
     domainLimit: yDomainLimit,
     range: yRange
-  };
+  }), [yScaleType, isHorizontal, yData, yCategoryPadding, hasNegativeValues, yDomain, yDomainLimit, yRange, defaultYScaleType]);
   return /*#__PURE__*/_jsxs(CartesianChart, _objectSpread(_objectSpread({}, chartProps), {}, {
     ref: ref,
-    inset: calculatedInset,
-    series: seriesToRender,
+    inset: inset,
+    series: series,
     xAxis: xAxisConfig,
     yAxis: yAxisConfig,
-    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _objectSpread({}, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _objectSpread({
+    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _objectSpread({
+      axisId: xAxisId
+    }, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _objectSpread({
       axisId: yAxisId
     }, yAxisVisualProps)), /*#__PURE__*/_jsx(BarPlot, {
       BarComponent: BarComponent,

package/esm/chart/bar/BarPlot.js

@@ -41,16 +41,18 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
   const stackGroups = useMemo(() => {
     const groups = new Map();
 
-    // Group series into stacks based on stackId + yAxisId combination
+    // Group series into stacks based on stackId + axis ID combination
     targetSeries.forEach(series => {
-      var _series$yAxisId;
+      var _series$xAxisId, _series$yAxisId;
+      const xAxisId = (_series$xAxisId = series.xAxisId) !== null && _series$xAxisId !== void 0 ? _series$xAxisId : defaultAxisId;
       const yAxisId = (_series$yAxisId = series.yAxisId) !== null && _series$yAxisId !== void 0 ? _series$yAxisId : defaultAxisId;
       const stackId = series.stackId || "individual-".concat(series.id);
-      const stackKey = "".concat(stackId, ":").concat(yAxisId);
+      const stackKey = "".concat(stackId, ":").concat(xAxisId, ":").concat(yAxisId);
       if (!groups.has(stackKey)) {
         groups.set(stackKey, {
           stackId: stackKey,
           series: [],
+          xAxisId: series.xAxisId,
           yAxisId: series.yAxisId
         });
       }
@@ -92,6 +94,7 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
         totalStacks: stackGroups.length,
         transition: transition,
         transitions: transitions,
+        xAxisId: group.xAxisId,
         yAxisId: group.yAxisId
       }, group.stackId))
     })]