@coinbase/cds-web-visualization 3.4.0-beta.9 → 3.4.0

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", "transition"],
-  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
+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", "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,
@@ -35,24 +35,23 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       stackGap,
       barMinSize,
       stackMinSize,
+      transitions,
       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 isHorizontalLayout = chartProps.layout === 'horizontal';
+  const defaultXScaleType = isHorizontalLayout ? 'linear' : 'band';
+  const defaultYScaleType = isHorizontalLayout ? 'band' : 'linear';
 
   // Split axis props into config props for Chart and visual props for axis components
   const _ref2 = xAxis || {},
@@ -62,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 || {},
@@ -76,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 => {
@@ -91,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: isHorizontalLayout && !hasNegativeValues ? _objectSpread({
+      min: 0
+    }, xDomain) : xDomain,
+    domainLimit: xDomainLimit,
+    range: xRange
+  }), [xScaleType, isHorizontalLayout, 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: !isHorizontalLayout && !hasNegativeValues ? _objectSpread({
       min: 0
-    }, yDomain),
+    }, yDomain) : yDomain,
     domainLimit: yDomainLimit,
     range: yRange
-  };
+  }), [yScaleType, isHorizontalLayout, 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,
@@ -124,7 +128,8 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       stackMinSize: stackMinSize,
       stroke: stroke,
       strokeWidth: strokeWidth,
-      transition: transition
+      transition: transition,
+      transitions: transitions
     }), children]
   }));
 }));

package/esm/chart/bar/BarPlot.js

@@ -1,6 +1,7 @@
 import { memo, useId, useMemo } from 'react';
+import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { defaultAxisId } from '../utils';
+import { getStackGroups, instantTransition } from '../utils';
 import { BarStackGroup } from './BarStackGroup';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -10,6 +11,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * cross-axis stacking (e.g., comparing $1M vs $1B companies on different scales).
  */
 export const BarPlot = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
   let {
     seriesIds,
     barPadding = 0.1,
@@ -23,9 +25,11 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     stackGap,
     barMinSize,
     stackMinSize,
+    transitions,
     transition
   } = _ref;
   const {
+    animate,
     series: allSeries,
     drawingArea
   } = useCartesianChartContext();
@@ -37,35 +41,24 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     }
     return allSeries;
   }, [allSeries, seriesIds]);
-  const stackGroups = useMemo(() => {
-    const groups = new Map();
+  const stackGroups = useMemo(() => getStackGroups(targetSeries), [targetSeries]);
+  if (!drawingArea) return;
+
+  // Clip path animation for bar is just for chart size changes, not for
+  // enter transition. One caveat, bar update transitions are staggered
+  // but clip path is not, so some bars could be clipped in rare cases
 
-    // Group series into stacks based on stackId + yAxisId combination
-    targetSeries.forEach(series => {
-      var _series$yAxisId;
-      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);
-      if (!groups.has(stackKey)) {
-        groups.set(stackKey, {
-          stackId: stackKey,
-          series: [],
-          yAxisId: series.yAxisId
-        });
-      }
-      const group = groups.get(stackKey);
-      group.series.push(series);
-    });
-    return Array.from(groups.values());
-  }, [targetSeries]);
-  if (!drawingArea) {
-    return null;
-  }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
         id: clipPathId,
-        children: /*#__PURE__*/_jsx("rect", {
+        children: animate ? /*#__PURE__*/_jsx(motion.rect, {
+          height: drawingArea.height,
+          transition: (_transitions$update = transitions === null || transitions === void 0 ? void 0 : transitions.update) !== null && _transitions$update !== void 0 ? _transitions$update : instantTransition,
+          width: drawingArea.width,
+          x: drawingArea.x,
+          y: drawingArea.y
+        }) : /*#__PURE__*/_jsx("rect", {
           height: drawingArea.height,
           width: drawingArea.width,
           x: drawingArea.x,
@@ -90,6 +83,8 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
         strokeWidth: defaultStrokeWidth,
         totalStacks: stackGroups.length,
         transition: transition,
+        transitions: transitions,
+        xAxisId: group.xAxisId,
         yAxisId: group.yAxisId
       }, group.stackId))
     })]