@mui/x-charts 7.3.1 → 7.4.0

package/modern/LineChart/LineChart.js

@@ -15,6 +15,7 @@ import { ChartsClipPath } from '../ChartsClipPath';
 import { LineHighlightPlot } from './LineHighlightPlot';
 import { ChartsGrid } from '../ChartsGrid';
 import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
+import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -55,7 +56,8 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     children,
     slots,
     slotProps,
-    skipAnimation
+    skipAnimation,
+    loading
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -97,6 +99,10 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
         slotProps: slotProps,
         onItemClick: onLineClick,
         skipAnimation: skipAnimation
+      }), /*#__PURE__*/_jsx(ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
       })]
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
@@ -116,7 +122,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+    })), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
       slots: slots,
       slotProps: slotProps
     })), /*#__PURE__*/_jsx(ChartsClipPath, {
@@ -197,6 +203,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object
   }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   */
+  loading: PropTypes.bool,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/modern/PieChart/PieArcLabel.js

@@ -39,7 +39,7 @@ const PieArcLabelRoot = styled(animated.text, {
 }));
 /**
  * Helper to compute label position.
- * It's not an inline function because we need it in inerpolation.
+ * It's not an inline function because we need it in interpolation.
  */
 const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, arcLabelRadius, cornerRadius) => {
   if (!formattedArcLabel) {

package/modern/PieChart/PieArcLabelPlot.js

@@ -129,7 +129,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     value: PropTypes.number.isRequired
   })).isRequired,
   /**
-   * Override the arc attibutes when it is faded.
+   * Override the arc attributes when it is faded.
    * @default { additionalRadius: -5 }
    */
   faded: PropTypes.shape({
@@ -142,7 +142,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     paddingAngle: PropTypes.number
   }),
   /**
-   * Override the arc attibutes when it is highlighted.
+   * Override the arc attributes when it is highlighted.
    */
   highlighted: PropTypes.shape({
     additionalRadius: PropTypes.number,
@@ -159,7 +159,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
   }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
-   * The radius between circle center and the begining of the arc.
+   * The radius between circle center and the beginning of the arc.
    * @default 0
    */
   innerRadius: PropTypes.number,

package/modern/PieChart/PieArcPlot.js

@@ -109,7 +109,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     value: PropTypes.number.isRequired
   })).isRequired,
   /**
-   * Override the arc attibutes when it is faded.
+   * Override the arc attributes when it is faded.
    * @default { additionalRadius: -5 }
    */
   faded: PropTypes.shape({
@@ -122,7 +122,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     paddingAngle: PropTypes.number
   }),
   /**
-   * Override the arc attibutes when it is highlighted.
+   * Override the arc attributes when it is highlighted.
    */
   highlighted: PropTypes.shape({
     additionalRadius: PropTypes.number,
@@ -139,7 +139,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
-   * The radius between circle center and the begining of the arc.
+   * The radius between circle center and the beginning of the arc.
    * @default 0
    */
   innerRadius: PropTypes.number,

package/modern/PieChart/PieChart.js

@@ -9,6 +9,7 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { PiePlot } from './PiePlot';
 import { useIsRTL } from '../internals/useIsRTL';
+import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
   top: 5,
@@ -59,7 +60,8 @@ function PieChart(props) {
     children,
     slots,
     slotProps,
-    onItemClick
+    onItemClick,
+    loading
   } = props;
   const isRTL = useIsRTL();
   const margin = _extends({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
@@ -98,10 +100,17 @@ function PieChart(props) {
       slotProps: slotProps,
       onItemClick: onItemClick,
       skipAnimation: skipAnimation
+    }), /*#__PURE__*/_jsx(ChartsOverlay, {
+      loading: loading,
+      slots: slots,
+      slotProps: slotProps
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), children]
   });
 }
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
@@ -168,6 +177,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object
   }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   */
+  loading: PropTypes.bool,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/modern/ScatterChart/ScatterChart.js

@@ -6,6 +6,7 @@ import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
+import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsVoronoiHandler } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { ChartsGrid } from '../ChartsGrid';
@@ -45,7 +46,8 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     onItemClick,
     children,
     slots,
-    slotProps
+    slotProps,
+    loading
   } = props;
   return /*#__PURE__*/_jsx(ResponsiveChartContainer, {
     ref: ref,
@@ -78,13 +80,17 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
         slots: slots,
         slotProps: slotProps,
         onItemClick: disableVoronoi ? onItemClick : undefined
+      }), /*#__PURE__*/_jsx(ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
       }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
         slots: slots,
         slotProps: slotProps
       })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
         x: "none",
         y: "none"
-      }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({
+      }, axisHighlight)), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({
         trigger: "item"
       }, tooltip)), children]
     })
@@ -164,6 +170,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object
   }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   */
+  loading: PropTypes.bool,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/modern/context/SeriesContextProvider.js

@@ -50,7 +50,7 @@ const formatSeries = (series, colors, dataset) => {
     seriesGroups[type].seriesOrder.push(id);
   });
   const formattedSeries = {};
-  // Apply formater on a type group
+  // Apply formatter on a type group
   Object.keys(seriesTypeFormatter).forEach(type => {
     if (seriesGroups[type] !== undefined) {
       formattedSeries[type] = seriesTypeFormatter[type]?.(seriesGroups[type], dataset) ?? seriesGroups[type];

package/modern/hooks/useReducedMotion.js

@@ -5,7 +5,7 @@ import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
  * set skipAnimations to the value of the user's
  * `prefers-reduced-motion` query.
  *
- * The return value, post-effect, is the value of their prefered setting
+ * The return value, post-effect, is the value of their preferred setting
  */
 export const useReducedMotion = () => {
   // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13

package/modern/hooks/useScale.js

@@ -3,7 +3,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { isBandScale } from '../internals/isBandScale';
 /**
  * For a given scale return a function that map value to their position.
- * Usefull when dealing with specific scale such as band.
+ * Useful when dealing with specific scale such as band.
  * @param scale The scale to use
  * @returns (value: any) => number
  */

package/modern/hooks/useTicks.js

@@ -59,6 +59,10 @@ export function useTicks(options) {
         labelOffset: 0
       }));
     }
+    if (scale.domain().length === 0 || scale.domain()[0] === scale.domain()[1]) {
+      // The axis should not be visible, so ticks should also be hidden.
+      return [];
+    }
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
     return ticks.map(value => ({
       value,

package/modern/index.js

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

package/modern/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -9,7 +9,7 @@ export function useChartGradient() {
   const {
     chartId
   } = React.useContext(DrawingContext);
-  return React.useCallback((axisId, direction) => `${chartId}-graient-${direction}-${axisId}`, [chartId]);
+  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
 export function ChartsAxesGradients() {
   const {
@@ -40,7 +40,7 @@ export function ChartsAxesGradients() {
       } = yAxis[axisId];
       if (colorMap?.type === 'piecewise') {
         return /*#__PURE__*/_jsx(ChartsPiecewiseGradient, {
-          isReveresed: !reverse,
+          isReversed: !reverse,
           scale: scale,
           colorMap: colorMap,
           size: svgHeight,
@@ -50,7 +50,7 @@ export function ChartsAxesGradients() {
       }
       if (colorMap?.type === 'continuous') {
         return /*#__PURE__*/_jsx(ChartsContinuousGradient, {
-          isReveresed: !reverse,
+          isReversed: !reverse,
           scale: scale,
           colorScale: colorScale,
           colorMap: colorMap,
@@ -70,7 +70,7 @@ export function ChartsAxesGradients() {
       } = xAxis[axisId];
       if (colorMap?.type === 'piecewise') {
         return /*#__PURE__*/_jsx(ChartsPiecewiseGradient, {
-          isReveresed: reverse,
+          isReversed: reverse,
           scale: scale,
           colorMap: colorMap,
           size: svgWidth,
@@ -80,7 +80,7 @@ export function ChartsAxesGradients() {
       }
       if (colorMap?.type === 'continuous') {
         return /*#__PURE__*/_jsx(ChartsContinuousGradient, {
-          isReveresed: reverse,
+          isReversed: reverse,
           scale: scale,
           colorScale: colorScale,
           colorMap: colorMap,

package/modern/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -4,7 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PX_PRECISION = 10;
 export default function ChartsContinuousGradient(props) {
   const {
-    isReveresed,
+    isReversed,
     gradientId,
     size,
     direction,
@@ -26,7 +26,7 @@ export default function ChartsContinuousGradient(props) {
     x2: "0",
     y1: "0",
     y2: "0",
-    [`${direction}${isReveresed ? 1 : 2}`]: `${size}px`,
+    [`${direction}${isReversed ? 1 : 2}`]: `${size}px`,
     gradientUnits: "userSpaceOnUse" // Use the SVG coordinate instead of the component ones.
     ,
     children: Array.from({
@@ -40,7 +40,7 @@ export default function ChartsContinuousGradient(props) {
       if (x === undefined) {
         return null;
       }
-      const offset = isReveresed ? 1 - x / size : x / size;
+      const offset = isReversed ? 1 - x / size : x / size;
       const color = colorScale(value);
       if (color === null) {
         return null;

package/modern/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function ChartsPiecewiseGradient(props) {
   const {
-    isReveresed,
+    isReversed,
     gradientId,
     size,
     direction,
@@ -15,7 +15,7 @@ export default function ChartsPiecewiseGradient(props) {
     x2: "0",
     y1: "0",
     y2: "0",
-    [`${direction}${isReveresed ? 1 : 2}`]: `${size}px`,
+    [`${direction}${isReversed ? 1 : 2}`]: `${size}px`,
     gradientUnits: "userSpaceOnUse" // Use the SVG coordinate instead of the component ones.
     ,
     children: colorMap.thresholds.map((threshold, index) => {
@@ -23,7 +23,7 @@ export default function ChartsPiecewiseGradient(props) {
       if (x === undefined) {
         return null;
       }
-      const offset = isReveresed ? 1 - x / size : x / size;
+      const offset = isReversed ? 1 - x / size : x / size;
       return /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsx("stop", {
           offset: offset,

package/modern/internals/utils.js

@@ -4,7 +4,7 @@ export function getSymbol(shape) {
   return symbolNames.indexOf(shape) || 0;
 }
 /**
- * Transform mouse event position to corrdinates inside the SVG.
+ * Transform mouse event position to coordinates inside the SVG.
  * @param svg The SVG element
  * @param event The mouseEvent to transform
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.3.1",
+  "version": "7.4.0",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -35,7 +35,7 @@
     "@mui/utils": "^5.15.14",
     "@react-spring/rafz": "^9.7.3",
     "@react-spring/web": "^9.7.3",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
     "d3-interpolate": "^3.0.1",

package/themeAugmentation/components.d.ts

@@ -18,6 +18,10 @@ export interface ChartsComponents {
   MuiChartsClipPath?: {
     defaultProps?: ComponentsProps['MuiChartsClipPath'];
   };
+  MuiChartsGrid?: {
+    defaultProps?: ComponentsProps['MuiChartsGrid'];
+    styleOverrides?: ComponentsOverrides['MuiChartsGrid'];
+  };
   MuiChartsLegend?: {
     defaultProps?: ComponentsProps['MuiChartsLegend'];
     styleOverrides?: ComponentsOverrides['MuiChartsLegend'];

package/themeAugmentation/overrides.d.ts

@@ -1,6 +1,7 @@
 import { BarElementClassKey } from '../BarChart/BarElement';
 import { ChartsAxisClassKey } from '../ChartsAxis';
 import { ChartsAxisHighlightClassKey } from '../ChartsAxisHighlight';
+import { ChartsGridClassKey } from '../ChartsGrid';
 import { ChartsLegendClassKey } from '../ChartsLegend';
 import { ChartsTooltipClassKey } from '../ChartsTooltip';
 import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart';
@@ -9,6 +10,7 @@ import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '.
 export interface PickersComponentNameToClassKey {
   MuiChartsAxis: ChartsAxisClassKey;
   MuiChartsAxisHighlight: ChartsAxisHighlightClassKey;
+  MuiChartsGrid: ChartsGridClassKey;
   MuiChartsLegend: ChartsLegendClassKey;
   MuiChartsTooltip: ChartsTooltipClassKey;
 

package/themeAugmentation/props.d.ts

@@ -3,6 +3,7 @@ import { BarElementProps } from '../BarChart/BarElement';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsClipPathProps } from '../ChartsClipPath';
+import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsLegendProps } from '../ChartsLegend';
 import { ChartsSurfaceProps } from '../ChartsSurface';
 import { ChartsTooltipProps } from '../ChartsTooltip';
@@ -18,6 +19,7 @@ export interface ChartsComponentsPropsList {
   MuiChartsYAxis: ChartsYAxisProps;
   MuiChartsAxisHighlight: ChartsAxisHighlightProps;
   MuiChartsClipPath: ChartsClipPathProps;
+  MuiChartsGrid: ChartsGridProps;
   MuiChartsLegend: ChartsLegendProps;
   MuiChartsTooltip: ChartsTooltipProps;
   MuiChartsSurface: ChartsSurfaceProps;