@mui/x-charts 7.3.2 → 7.4.0

package/esm/BarChart/BarPlot.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["skipAnimation", "onItemClick"];
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
@@ -10,6 +10,8 @@ import { BarElement } from './BarElement';
 import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import getColor from './getColor';
+import { useChartId } from '../hooks';
+import { BarClipPath } from './BarClipPath';
 
 /**
  * Solution of the equations
@@ -20,7 +22,7 @@ import getColor from './getColor';
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -46,6 +48,7 @@ const useAggregatedData = () => {
     seriesOrder: []
   };
   const axisData = React.useContext(CartesianContext);
+  const chartId = useChartId();
   const {
     series,
     stackingGroups
@@ -58,6 +61,7 @@ const useAggregatedData = () => {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
+  const masks = {};
   const data = stackingGroups.flatMap(({
     ids: groupIds
   }, groupIndex) => {
@@ -111,7 +115,8 @@ const useAggregatedData = () => {
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-        return {
+        const stackId = series[seriesId].stack;
+        const result = {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
@@ -122,14 +127,41 @@ const useAggregatedData = () => {
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
           width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
           color: colorGetter(dataIndex),
-          highlightScope: series[seriesId].highlightScope
+          highlightScope: series[seriesId].highlightScope,
+          value: series[seriesId].data[dataIndex],
+          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
+        if (!masks[result.maskId]) {
+          masks[result.maskId] = {
+            id: result.maskId,
+            width: 0,
+            height: 0,
+            hasNegative: false,
+            hasPositive: false,
+            layout: result.layout,
+            xOrigin: xScale(0),
+            yOrigin: yScale(0),
+            x: 0,
+            y: 0
+          };
+        }
+        const mask = masks[result.maskId];
+        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
+        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
+        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
+        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
+        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
+        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
+        return result;
       });
     });
   });
-  return data;
+  return {
+    completedData: data,
+    masksData: Object.values(masks)
+  };
 };
-const getOutStyle = ({
+const leaveStyle = ({
   layout,
   yOrigin,
   x,
@@ -148,7 +180,7 @@ const getOutStyle = ({
   height,
   width: 0
 });
-const getInStyle = ({
+const enterStyle = ({
   x,
   width,
   y,
@@ -172,41 +204,77 @@ const getInStyle = ({
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
 function BarPlot(props) {
-  const completedData = useAggregatedData();
+  const {
+    completedData,
+    masksData
+  } = useAggregatedData();
   const {
       skipAnimation,
-      onItemClick
+      onItemClick,
+      borderRadius
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const transition = useTransition(completedData, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: getOutStyle,
-    leave: getOutStyle,
-    enter: getInStyle,
-    update: getInStyle,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
+    immediate: skipAnimation
+  });
+  const maskTransition = useTransition(masksData, {
+    keys: v => v.id,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
     immediate: skipAnimation
   });
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: transition((style, {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [maskTransition((style, {
+      id,
+      hasPositive,
+      hasNegative,
+      layout
+    }) => {
+      return /*#__PURE__*/_jsx(BarClipPath, {
+        maskId: id,
+        borderRadius: borderRadius,
+        hasNegative: hasNegative,
+        hasPositive: hasPositive,
+        layout: layout,
+        style: style
+      });
+    }), transition((style, {
       seriesId,
       dataIndex,
       color,
-      highlightScope
-    }) => /*#__PURE__*/_jsx(BarElement, _extends({
-      id: seriesId,
-      dataIndex: dataIndex,
-      highlightScope: highlightScope,
-      color: color
-    }, other, {
-      onClick: onItemClick && (event => {
-        onItemClick(event, {
-          type: 'bar',
-          seriesId,
-          dataIndex
-        });
-      }),
-      style: style
-    })))
+      highlightScope,
+      maskId
+    }) => {
+      const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
+        id: seriesId,
+        dataIndex: dataIndex,
+        color: color,
+        highlightScope: highlightScope
+      }, other, {
+        onClick: onItemClick && (event => {
+          onItemClick(event, {
+            type: 'bar',
+            seriesId,
+            dataIndex
+          });
+        }),
+        style: style
+      }));
+      if (!borderRadius || borderRadius <= 0) {
+        return barElement;
+      }
+      return /*#__PURE__*/_jsx("g", {
+        clipPath: `url(#${maskId})`,
+        children: barElement
+      });
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
@@ -214,6 +282,10 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: PropTypes.number,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/esm/BarChart/getRadius.js

@@ -0,0 +1,30 @@
+/**
+ * Returns if the corner should have a radius or not based on the layout and the data.
+ * @param {GetRadiusCorner} corner The corner to check.
+ * @param {GetRadiusData} cornerData The data for the corner.
+ * @returns {number} The radius for the corner.
+ */
+export const getRadius = (corner, {
+  hasNegative,
+  hasPositive,
+  borderRadius,
+  layout
+}) => {
+  if (!borderRadius) {
+    return 0;
+  }
+  const isVertical = layout === 'vertical';
+  if (corner === 'top-left' && (isVertical && hasPositive || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  if (corner === 'top-right' && (isVertical && hasPositive || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-right' && (isVertical && hasNegative || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-left' && (isVertical && hasNegative || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  return 0;
+};

package/esm/BarChart/types.js

@@ -0,0 +1 @@
+export {};

package/esm/ChartsGrid/ChartsGrid.js

@@ -4,7 +4,7 @@ const _excluded = ["vertical", "horizontal"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { useTicks } from '../hooks/useTicks';
 import { getChartsGridUtilityClass, chartsGridClasses } from './chartsGridClasses';
@@ -12,15 +12,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridRoot = styled('g', {
   name: 'MuiChartsGrid',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => [{
+    [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine
+  }, {
+    [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine
+  }, styles.root]
+})({});
+const GridLine = styled('line', {
+  name: 'MuiChartsGrid',
+  slot: 'Line',
+  overridesResolver: (props, styles) => styles.line
 })(({
   theme
 }) => ({
-  [`& .${chartsGridClasses.line}`]: {
-    stroke: (theme.vars || theme).palette.divider,
-    shapeRendering: 'crispEdges',
-    strokeWidth: 1
-  }
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1
 }));
 const useUtilityClasses = ({
   classes
@@ -42,18 +49,22 @@ const useUtilityClasses = ({
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
 function ChartsGrid(props) {
+  const themeProps = useThemeProps({
+    props,
+    name: 'MuiChartsGrid'
+  });
   const {
       vertical,
       horizontal
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    } = themeProps,
+    other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const {
     xAxis,
     xAxisIds,
     yAxis,
     yAxisIds
   } = React.useContext(CartesianContext);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(themeProps);
   const horizontalAxisId = yAxisIds[0];
   const verticalAxisId = xAxisIds[0];
   const {
@@ -81,7 +92,7 @@ function ChartsGrid(props) {
     children: [vertical && xTicks.map(({
       formattedValue,
       offset
-    }) => /*#__PURE__*/_jsx("line", {
+    }) => /*#__PURE__*/_jsx(GridLine, {
       y1: yScale.range()[0],
       y2: yScale.range()[1],
       x1: offset,
@@ -90,7 +101,7 @@ function ChartsGrid(props) {
     }, `vertical-${formattedValue}`)), horizontal && yTicks.map(({
       formattedValue,
       offset
-    }) => /*#__PURE__*/_jsx("line", {
+    }) => /*#__PURE__*/_jsx(GridLine, {
       y1: offset,
       y2: offset,
       x1: xScale.range()[0],

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.3.2
+ * @mui/x-charts v7.4.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/BarChart/BarChart.js

@@ -46,6 +46,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     rightAxis,
     bottomAxis,
     skipAnimation,
+    borderRadius,
     onItemClick,
     onAxisClick,
     children,
@@ -98,7 +99,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
         slots: slots,
         slotProps: slotProps,
         skipAnimation: skipAnimation,
-        onItemClick: onItemClick
+        onItemClick: onItemClick,
+        borderRadius: borderRadius
       }), /*#__PURE__*/_jsx(ChartsOverlay, {
         loading: loading,
         slots: slots,
@@ -137,6 +139,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: PropTypes.number,
   /**
    * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.

package/modern/BarChart/BarClipPath.js

@@ -0,0 +1,42 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["style", "maskId"];
+import * as React from 'react';
+import { animated } from '@react-spring/web';
+import { getRadius } from './getRadius';
+import { jsx as _jsx } from "react/jsx-runtime";
+const buildInset = corners => `inset(0px round ${corners.topLeft}px ${corners.topRight}px ${corners.bottomRight}px ${corners.bottomLeft}px)`;
+function BarClipRect(props) {
+  const radiusData = props.ownerState;
+  return /*#__PURE__*/_jsx(animated.rect, {
+    style: _extends({}, props.style, {
+      clipPath: (props.ownerState.layout === 'vertical' ? props.style?.height : props.style?.width).to(value => buildInset({
+        topLeft: Math.min(value, getRadius('top-left', radiusData)),
+        topRight: Math.min(value, getRadius('top-right', radiusData)),
+        bottomRight: Math.min(value, getRadius('bottom-right', radiusData)),
+        bottomLeft: Math.min(value, getRadius('bottom-left', radiusData))
+      }))
+    })
+  });
+}
+/**
+ * @ignore - internal component.
+ */
+function BarClipPath(props) {
+  const {
+      style,
+      maskId
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  if (!props.borderRadius || props.borderRadius <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("clipPath", {
+    id: maskId,
+    children: /*#__PURE__*/_jsx(BarClipRect, {
+      ownerState: rest,
+      style: style
+    })
+  });
+}
+export { BarClipPath };

package/modern/BarChart/BarPlot.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["skipAnimation", "onItemClick"];
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
@@ -10,6 +10,8 @@ import { BarElement } from './BarElement';
 import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import getColor from './getColor';
+import { useChartId } from '../hooks';
+import { BarClipPath } from './BarClipPath';
 
 /**
  * Solution of the equations
@@ -20,7 +22,7 @@ import getColor from './getColor';
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -46,6 +48,7 @@ const useAggregatedData = () => {
     seriesOrder: []
   };
   const axisData = React.useContext(CartesianContext);
+  const chartId = useChartId();
   const {
     series,
     stackingGroups
@@ -58,6 +61,7 @@ const useAggregatedData = () => {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
+  const masks = {};
   const data = stackingGroups.flatMap(({
     ids: groupIds
   }, groupIndex) => {
@@ -111,7 +115,8 @@ const useAggregatedData = () => {
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-        return {
+        const stackId = series[seriesId].stack;
+        const result = {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
@@ -122,14 +127,41 @@ const useAggregatedData = () => {
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
           width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
           color: colorGetter(dataIndex),
-          highlightScope: series[seriesId].highlightScope
+          highlightScope: series[seriesId].highlightScope,
+          value: series[seriesId].data[dataIndex],
+          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
+        if (!masks[result.maskId]) {
+          masks[result.maskId] = {
+            id: result.maskId,
+            width: 0,
+            height: 0,
+            hasNegative: false,
+            hasPositive: false,
+            layout: result.layout,
+            xOrigin: xScale(0),
+            yOrigin: yScale(0),
+            x: 0,
+            y: 0
+          };
+        }
+        const mask = masks[result.maskId];
+        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
+        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
+        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
+        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
+        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
+        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
+        return result;
       });
     });
   });
-  return data;
+  return {
+    completedData: data,
+    masksData: Object.values(masks)
+  };
 };
-const getOutStyle = ({
+const leaveStyle = ({
   layout,
   yOrigin,
   x,
@@ -148,7 +180,7 @@ const getOutStyle = ({
   height,
   width: 0
 });
-const getInStyle = ({
+const enterStyle = ({
   x,
   width,
   y,
@@ -172,41 +204,77 @@ const getInStyle = ({
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
 function BarPlot(props) {
-  const completedData = useAggregatedData();
+  const {
+    completedData,
+    masksData
+  } = useAggregatedData();
   const {
       skipAnimation,
-      onItemClick
+      onItemClick,
+      borderRadius
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const transition = useTransition(completedData, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: getOutStyle,
-    leave: getOutStyle,
-    enter: getInStyle,
-    update: getInStyle,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
+    immediate: skipAnimation
+  });
+  const maskTransition = useTransition(masksData, {
+    keys: v => v.id,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
     immediate: skipAnimation
   });
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: transition((style, {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [maskTransition((style, {
+      id,
+      hasPositive,
+      hasNegative,
+      layout
+    }) => {
+      return /*#__PURE__*/_jsx(BarClipPath, {
+        maskId: id,
+        borderRadius: borderRadius,
+        hasNegative: hasNegative,
+        hasPositive: hasPositive,
+        layout: layout,
+        style: style
+      });
+    }), transition((style, {
       seriesId,
       dataIndex,
       color,
-      highlightScope
-    }) => /*#__PURE__*/_jsx(BarElement, _extends({
-      id: seriesId,
-      dataIndex: dataIndex,
-      highlightScope: highlightScope,
-      color: color
-    }, other, {
-      onClick: onItemClick && (event => {
-        onItemClick(event, {
-          type: 'bar',
-          seriesId,
-          dataIndex
-        });
-      }),
-      style: style
-    })))
+      highlightScope,
+      maskId
+    }) => {
+      const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
+        id: seriesId,
+        dataIndex: dataIndex,
+        color: color,
+        highlightScope: highlightScope
+      }, other, {
+        onClick: onItemClick && (event => {
+          onItemClick(event, {
+            type: 'bar',
+            seriesId,
+            dataIndex
+          });
+        }),
+        style: style
+      }));
+      if (!borderRadius || borderRadius <= 0) {
+        return barElement;
+      }
+      return /*#__PURE__*/_jsx("g", {
+        clipPath: `url(#${maskId})`,
+        children: barElement
+      });
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
@@ -214,6 +282,10 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: PropTypes.number,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/modern/BarChart/getRadius.js

@@ -0,0 +1,30 @@
+/**
+ * Returns if the corner should have a radius or not based on the layout and the data.
+ * @param {GetRadiusCorner} corner The corner to check.
+ * @param {GetRadiusData} cornerData The data for the corner.
+ * @returns {number} The radius for the corner.
+ */
+export const getRadius = (corner, {
+  hasNegative,
+  hasPositive,
+  borderRadius,
+  layout
+}) => {
+  if (!borderRadius) {
+    return 0;
+  }
+  const isVertical = layout === 'vertical';
+  if (corner === 'top-left' && (isVertical && hasPositive || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  if (corner === 'top-right' && (isVertical && hasPositive || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-right' && (isVertical && hasNegative || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-left' && (isVertical && hasNegative || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  return 0;
+};

package/modern/BarChart/types.js

@@ -0,0 +1 @@
+export {};