@mui/x-charts 7.9.0 → 7.11.0

package/internals/index.js

@@ -8,10 +8,11 @@ var _exportNames = {
   useSeries: true,
   useInteractionItemProps: true,
   useDrawingArea: true,
-  useChartContainerHooks: true,
   useScatterChartProps: true,
   useLineChartProps: true,
-  useBarChartProps: true
+  useBarChartProps: true,
+  useResponsiveChartContainerProps: true,
+  useChartContainerProps: true
 };
 Object.defineProperty(exports, "useBarChartProps", {
   enumerable: true,
@@ -19,10 +20,10 @@ Object.defineProperty(exports, "useBarChartProps", {
     return _useBarChartProps.useBarChartProps;
   }
 });
-Object.defineProperty(exports, "useChartContainerHooks", {
+Object.defineProperty(exports, "useChartContainerProps", {
   enumerable: true,
   get: function () {
-    return _useChartContainerHooks.useChartContainerHooks;
+    return _useChartContainerProps.useChartContainerProps;
   }
 });
 Object.defineProperty(exports, "useDrawingArea", {
@@ -49,6 +50,12 @@ Object.defineProperty(exports, "useReducedMotion", {
     return _useReducedMotion.useReducedMotion;
   }
 });
+Object.defineProperty(exports, "useResponsiveChartContainerProps", {
+  enumerable: true,
+  get: function () {
+    return _useResponsiveChartContainerProps.useResponsiveChartContainerProps;
+  }
+});
 Object.defineProperty(exports, "useScatterChartProps", {
   enumerable: true,
   get: function () {
@@ -101,10 +108,11 @@ var _useReducedMotion = require("../hooks/useReducedMotion");
 var _useSeries = require("../hooks/useSeries");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");
-var _useChartContainerHooks = require("../ChartContainer/useChartContainerHooks");
 var _useScatterChartProps = require("../ScatterChart/useScatterChartProps");
 var _useLineChartProps = require("../LineChart/useLineChartProps");
 var _useBarChartProps = require("../BarChart/useBarChartProps");
+var _useResponsiveChartContainerProps = require("../ResponsiveChartContainer/useResponsiveChartContainerProps");
+var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 var _defaultizeValueFormatter = require("./defaultizeValueFormatter");
 Object.keys(_defaultizeValueFormatter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -153,6 +161,18 @@ Object.keys(_getSVGPoint).forEach(function (key) {
     }
   });
 });
+var _isDefined = require("./isDefined");
+Object.keys(_isDefined).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _isDefined[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _isDefined[key];
+    }
+  });
+});
 var _CartesianProvider = require("../context/CartesianProvider");
 Object.keys(_CartesianProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/isDefined.d.ts

@@ -0,0 +1 @@
+export declare function isDefined<T>(value: T | null | undefined): value is NonNullable<T>;

package/internals/isDefined.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDefined = isDefined;
+function isDefined(value) {
+  return value !== null && value !== undefined;
+}

package/internals/notNull.d.ts

@@ -0,0 +1 @@
+export declare function notNull<T>(value: T): value is NonNullable<T>;

package/internals/notNull.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.notNull = notNull;
+function notNull(value) {
+  return value !== null;
+}

package/internals/ts-generic.d.ts

@@ -0,0 +1,5 @@
+type Without<T, U> = {
+    [P in Exclude<keyof T, keyof U>]?: never;
+};
+export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export {};

package/internals/ts-generic.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/models/axis.d.ts

@@ -212,8 +212,9 @@ export type AxisValueFormatterContext = {
      * Location indicates where the value will be displayed.
      * - `'tick'` The value is displayed on the axis ticks.
      * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
+     * - `'legend'` The value is displayed in the legend when using color legend.
      */
-    location: 'tick' | 'tooltip';
+    location: 'tick' | 'tooltip' | 'legend';
 };
 export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = ChartsXAxisProps | ChartsYAxisProps> = {
     /**
@@ -253,7 +254,9 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = Cha
      * If `true`, Reverse the axis scaleBand.
      */
     reverse?: boolean;
-} & Partial<AxisProps> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & TickParams;
+} & Partial<AxisProps> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & TickParams & AxisConfigExtension;
+export interface AxisConfigExtension {
+}
 export type AxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps = ChartsXAxisProps | ChartsYAxisProps> = Omit<AxisConfig<S, V, AxisProps>, 'scaleType'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
     /**
      * An indication of the expected number of ticks.

package/models/helpers.d.ts

@@ -1,2 +1,3 @@
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export type MakeRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
 export type DefaultizedProps<P extends {}, RequiredProps extends keyof P, AdditionalProps extends {} = {}> = Omit<P, RequiredProps | keyof AdditionalProps> & Required<Pick<P, RequiredProps>> & AdditionalProps;

package/models/seriesType/config.d.ts

@@ -6,6 +6,7 @@ import { AxisConfig } from '../axis';
 import { DefaultizedProps, MakeOptional } from '../helpers';
 import { StackingGroupsType } from '../../internals/stackSeries';
 import { SeriesId } from './common';
+import { LegendItemParams } from '../../ChartsLegend/chartsLegend.types';
 export interface ChartsSeriesConfig {
     bar: {
         /**
@@ -102,20 +103,5 @@ export type DatasetElementType<T> = {
 };
 export type DatasetType<T = number | string | Date | null | undefined> = DatasetElementType<T>[];
 export type Formatter<T extends ChartSeriesType> = (params: FormatterParams<T>, dataset?: DatasetType) => FormatterResult<T>;
-export type LegendParams = {
-    /**
-     * The color used in the legend
-     */
-    color: string;
-    /**
-     * The label displayed in the legend
-     */
-    label: string;
-    /**
-     * The identifier of the legend element.
-     * Used for internal purpose such as `key` props
-     */
-    id: SeriesId;
-};
-export type LegendGetter<T extends ChartSeriesType> = (series: FormatterResult<T>) => LegendParams[];
+export type LegendGetter<T extends ChartSeriesType> = (series: FormatterResult<T>) => LegendItemParams[];
 export {};

package/modern/BarChart/BarChart.js

@@ -43,8 +43,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
-      children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps))]
-    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+      children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
+    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {

package/modern/BarChart/formatter.js

@@ -52,7 +52,7 @@ const formatter = (params, dataset) => {
           if (typeof value !== 'number') {
             if (process.env.NODE_ENV !== 'production' && !warnOnce && value !== null) {
               warnOnce = true;
-              console.error([`MUI-X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
+              console.error([`MUI X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
             }
             return 0;
           }

package/modern/BarChart/useBarChartProps.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 /**
@@ -10,36 +12,38 @@ import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
  */
 export const useBarChartProps = props => {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    tooltip,
-    onAxisClick,
-    axisHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    children,
-    slots,
-    slotProps,
-    skipAnimation,
-    loading,
-    layout,
-    onItemClick,
-    highlightedItem,
-    onHighlightChange,
-    borderRadius,
-    barLabel
-  } = props;
+      xAxis,
+      yAxis,
+      series,
+      width,
+      height,
+      margin,
+      colors,
+      dataset,
+      sx,
+      tooltip,
+      onAxisClick,
+      axisHighlight,
+      legend,
+      grid,
+      topAxis,
+      leftAxis,
+      rightAxis,
+      bottomAxis,
+      children,
+      slots,
+      slotProps,
+      skipAnimation,
+      loading,
+      layout,
+      onItemClick,
+      highlightedItem,
+      onHighlightChange,
+      borderRadius,
+      barLabel,
+      className
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
   const clipPathId = `${id}-clip-path`;
   const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
@@ -49,7 +53,7 @@ export const useBarChartProps = props => {
       length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
     }, (_, index) => index)
   };
-  const chartContainerProps = {
+  const chartContainerProps = _extends({}, rest, {
     series: series.map(s => _extends({
       type: 'bar'
     }, s, {
@@ -69,8 +73,9 @@ export const useBarChartProps = props => {
     sx,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick
-  };
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    className
+  });
   const barPlotProps = {
     onItemClick,
     slots,

package/modern/ChartContainer/ChartContainer.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DrawingProvider } from '../context/DrawingProvider';
@@ -8,78 +9,36 @@ import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
 import { HighlightedProvider, ZAxisContextProvider } from '../context';
-import { useChartContainerHooks } from './useChartContainerHooks';
+import { useChartContainerProps } from './useChartContainerProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
-    width,
-    height,
-    series,
-    margin,
-    xAxis,
-    yAxis,
-    zAxis,
-    colors,
-    dataset,
-    sx,
-    title,
-    desc,
-    disableAxisListener,
-    highlightedItem,
-    onHighlightChange,
-    plugins,
-    children
-  } = props;
-  const {
-    svgRef,
-    handleRef,
-    xExtremumGetters,
-    yExtremumGetters,
-    seriesFormatters,
-    colorProcessors
-  } = useChartContainerHooks(ref, plugins);
-  return /*#__PURE__*/_jsx(DrawingProvider, {
-    width: width,
-    height: height,
-    margin: margin,
-    svgRef: svgRef,
-    children: /*#__PURE__*/_jsx(ColorProvider, {
-      colorProcessors: colorProcessors,
-      children: /*#__PURE__*/_jsx(SeriesContextProvider, {
-        series: series,
-        colors: colors,
-        dataset: dataset,
-        seriesFormatters: seriesFormatters,
-        children: /*#__PURE__*/_jsx(CartesianContextProvider, {
-          xAxis: xAxis,
-          yAxis: yAxis,
-          dataset: dataset,
-          xExtremumGetters: xExtremumGetters,
-          yExtremumGetters: yExtremumGetters,
-          children: /*#__PURE__*/_jsx(ZAxisContextProvider, {
-            zAxis: zAxis,
-            dataset: dataset,
+    children,
+    drawingProviderProps,
+    colorProviderProps,
+    seriesContextProps,
+    cartesianContextProps,
+    zAxisContextProps,
+    highlightedProviderProps,
+    chartsSurfaceProps
+  } = useChartContainerProps(props, ref);
+  return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
+    children: /*#__PURE__*/_jsx(ColorProvider, _extends({}, colorProviderProps, {
+      children: /*#__PURE__*/_jsx(SeriesContextProvider, _extends({}, seriesContextProps, {
+        children: /*#__PURE__*/_jsx(CartesianContextProvider, _extends({}, cartesianContextProps, {
+          children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
             children: /*#__PURE__*/_jsx(InteractionProvider, {
-              children: /*#__PURE__*/_jsx(HighlightedProvider, {
-                highlightedItem: highlightedItem,
-                onHighlightChange: onHighlightChange,
-                children: /*#__PURE__*/_jsxs(ChartsSurface, {
-                  width: width,
-                  height: height,
-                  ref: handleRef,
-                  sx: sx,
-                  title: title,
-                  desc: desc,
-                  disableAxisListener: disableAxisListener,
+              children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
+                children: /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
                   children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), children]
-                })
-              })
+                }))
+              }))
             })
-          })
-        })
-      })
-    })
-  });
+          }))
+        }))
+      }))
+    }))
+  }));
 });
 process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/ChartContainer/useChartContainerHooks.js

@@ -4,7 +4,7 @@ import { usePluginsMerge } from './usePluginsMerge';
 import { useReducedMotion } from '../hooks/useReducedMotion';
 export const useChartContainerHooks = (ref, plugins) => {
   const svgRef = React.useRef(null);
-  const handleRef = useForkRef(ref, svgRef);
+  const chartSurfaceRef = useForkRef(ref, svgRef);
   const {
     xExtremumGetters,
     yExtremumGetters,
@@ -15,7 +15,7 @@ export const useChartContainerHooks = (ref, plugins) => {
 
   return {
     svgRef,
-    handleRef,
+    chartSurfaceRef,
     xExtremumGetters,
     yExtremumGetters,
     seriesFormatters,

package/modern/ChartContainer/useChartContainerProps.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children"];
+import { useChartContainerHooks } from './useChartContainerHooks';
+import { useDefaultizeAxis } from './useDefaultizeAxis';
+export const useChartContainerProps = (props, ref) => {
+  const {
+      width,
+      height,
+      series,
+      margin,
+      xAxis,
+      yAxis,
+      zAxis,
+      colors,
+      dataset,
+      sx,
+      title,
+      desc,
+      disableAxisListener,
+      highlightedItem,
+      onHighlightChange,
+      plugins,
+      children
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    svgRef,
+    chartSurfaceRef,
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
+  } = useChartContainerHooks(ref, plugins);
+  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis);
+  const drawingProviderProps = {
+    width,
+    height,
+    margin,
+    svgRef
+  };
+  const colorProviderProps = {
+    colorProcessors
+  };
+  const seriesContextProps = {
+    series,
+    colors,
+    dataset,
+    seriesFormatters
+  };
+  const cartesianContextProps = {
+    xAxis: defaultizedXAxis,
+    yAxis: defaultizedYAxis,
+    dataset,
+    xExtremumGetters,
+    yExtremumGetters
+  };
+  const zAxisContextProps = {
+    zAxis,
+    dataset
+  };
+  const highlightedProviderProps = {
+    highlightedItem,
+    onHighlightChange
+  };
+  const chartsSurfaceProps = _extends({}, other, {
+    width,
+    height,
+    ref: chartSurfaceRef,
+    sx,
+    title,
+    desc,
+    disableAxisListener
+  });
+  return {
+    children,
+    drawingProviderProps,
+    colorProviderProps,
+    seriesContextProps,
+    cartesianContextProps,
+    zAxisContextProps,
+    highlightedProviderProps,
+    chartsSurfaceProps,
+    xAxis: defaultizedXAxis,
+    yAxis: defaultizedYAxis
+  };
+};

package/modern/ChartContainer/useDefaultizeAxis.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+const defaultizeAxis = (inAxis, axisName) => {
+  const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
+  return [...(inAxis?.map((axis, index) => _extends({
+    id: `defaultized-${axisName}-axis-${index}`
+  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
+    id
+  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
+    id: DEFAULT_AXIS_KEY,
+    scaleType: 'linear'
+  }] : [])];
+};
+export const useDefaultizeAxis = (inXAxis, inYAxis) => {
+  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, 'x'), [inXAxis]);
+  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, 'y'), [inYAxis]);
+  return [xAxis, yAxis];
+};