@mui/x-charts 8.0.0 → 8.1.0

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js

@@ -1,3 +1,4 @@
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { createSelector } from "../../utils/selectors.js";
 import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.js";
 import { generateSvg2rotation } from "./coordinateTransformation.js";
@@ -62,6 +63,13 @@ export const selectorChartsInteractionTooltipRotationAxes = createSelector([sele
     axisId,
     dataIndex
   }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
+}, {
+  memoizeOptions: {
+    // Keep the same reference if array content is the same.
+    // If possible, avoid this pattern by creating selectors that
+    // uses string/number as arguments.
+    resultEqualityCheck: isDeepEqual
+  }
 });
 
 /**

package/esm/internals/plugins/models/plugin.d.ts

@@ -25,6 +25,10 @@ export interface ChartPluginOptions<TSignature extends ChartAnyPluginSignature>
    * Reference to the main svg element.
    */
   svgRef: React.RefObject<SVGSVGElement | null>;
+  /**
+   * Reference to the chart root element.
+   */
+  chartRootRef: React.RefObject<HTMLDivElement | null>;
   /**
    * All the plugins that are used in the chart.
    */

package/esm/internals/store/useCharts.d.ts

@@ -20,6 +20,7 @@ export declare function useCharts<TSeriesType extends ChartSeriesType, TSignatur
     publicAPI: ChartPublicAPI<TSignatures>;
     instance: ChartInstance<TSignatures>;
     svgRef: React.RefObject<SVGSVGElement | null>;
+    chartRootRef: React.RefObject<HTMLDivElement | null>;
   };
 };
 export declare function useChartApiInitialization<T>(inputApiRef: React.RefObject<T | undefined> | undefined): T;

package/esm/internals/store/useCharts.js

@@ -27,6 +27,7 @@ export function useCharts(inPlugins, props, seriesConfig) {
   const instanceRef = React.useRef({});
   const instance = instanceRef.current;
   const publicAPI = useChartApiInitialization(props.apiRef);
+  const innerChartRootRef = React.useRef(null);
   const innerSvgRef = React.useRef(null);
   const storeRef = React.useRef(null);
   if (storeRef.current == null) {
@@ -51,6 +52,7 @@ export function useCharts(inPlugins, props, seriesConfig) {
       plugins: plugins,
       store: storeRef.current,
       svgRef: innerSvgRef,
+      chartRootRef: innerChartRootRef,
       seriesConfig,
       models
     });
@@ -66,7 +68,8 @@ export function useCharts(inPlugins, props, seriesConfig) {
     store: storeRef.current,
     publicAPI,
     instance,
-    svgRef: innerSvgRef
+    svgRef: innerSvgRef,
+    chartRootRef: innerChartRootRef
   }), [instance, publicAPI]);
   return {
     contextValue

package/esm/locales/enUS.d.ts

@@ -0,0 +1,15 @@
+import { ChartsLocaleText } from "./utils/chartsLocaleTextApi.js";
+export declare const enUSLocaleText: ChartsLocaleText;
+export declare const DEFAULT_LOCALE: ChartsLocaleText;
+export declare const enUS: {
+  components: {
+    MuiChartsLocalizationProvider: {
+      defaultProps: {
+        localeText: {
+          loading?: string | undefined;
+          noData?: string | undefined;
+        };
+      };
+    };
+  };
+};

package/esm/locales/enUS.js

@@ -0,0 +1,11 @@
+import { getChartsLocalization } from "./utils/getChartsLocalization.js";
+
+// This object is not Partial<ChartsLocaleText> because it is the default values
+
+export const enUSLocaleText = {
+  // Overlay
+  loading: 'Loading data…',
+  noData: 'No data to display'
+};
+export const DEFAULT_LOCALE = enUSLocaleText;
+export const enUS = getChartsLocalization(enUSLocaleText);

package/esm/locales/frFR.d.ts

@@ -0,0 +1,14 @@
+import { ChartsLocaleText } from "./utils/chartsLocaleTextApi.js";
+export declare const frFRLocalText: Partial<ChartsLocaleText>;
+export declare const frFR: {
+  components: {
+    MuiChartsLocalizationProvider: {
+      defaultProps: {
+        localeText: {
+          loading?: string | undefined;
+          noData?: string | undefined;
+        };
+      };
+    };
+  };
+};

package/esm/locales/frFR.js

@@ -0,0 +1,7 @@
+import { getChartsLocalization } from "./utils/getChartsLocalization.js";
+export const frFRLocalText = {
+  // Overlay
+  loading: 'Chargement…',
+  noData: 'Pas de données'
+};
+export const frFR = getChartsLocalization(frFRLocalText);

package/esm/locales/index.d.ts

@@ -0,0 +1,3 @@
+export type { ChartsLocaleText } from './utils/chartsLocaleTextApi';
+export * from "./enUS.js";
+export * from "./frFR.js";

package/esm/locales/index.js

@@ -0,0 +1,3 @@
+export * from "./enUS.js";
+export * from "./frFR.js";
+export {};

package/esm/locales/utils/chartsLocaleTextApi.d.ts

@@ -0,0 +1,11 @@
+export interface ChartsLocaleText {
+  /**
+   * Title displayed in the overlay if `loading` is `true`.
+   */
+  loading: string;
+  /**
+   * Title displayed in the overlay if there is no data to display.
+   */
+  noData: string;
+}
+export type ChartsTranslationKeys = keyof ChartsLocaleText;

package/esm/locales/utils/chartsLocaleTextApi.js

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

package/esm/locales/utils/getChartsLocalization.d.ts

@@ -0,0 +1,18 @@
+import { ChartsLocaleText } from "./chartsLocaleTextApi.js";
+/**
+ * Helper to pass translation to all charts thanks to the MUI theme.
+ * @param chartsTranslations The translation object.
+ * @returns an object to pass the translation by using the MUI theme default props
+ */
+export declare const getChartsLocalization: (chartsTranslations: Partial<ChartsLocaleText>) => {
+  components: {
+    MuiChartsLocalizationProvider: {
+      defaultProps: {
+        localeText: {
+          loading?: string | undefined;
+          noData?: string | undefined;
+        };
+      };
+    };
+  };
+};

package/esm/locales/utils/getChartsLocalization.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+/**
+ * Helper to pass translation to all charts thanks to the MUI theme.
+ * @param chartsTranslations The translation object.
+ * @returns an object to pass the translation by using the MUI theme default props
+ */
+export const getChartsLocalization = chartsTranslations => {
+  return {
+    components: {
+      MuiChartsLocalizationProvider: {
+        defaultProps: {
+          localeText: _extends({}, chartsTranslations)
+        }
+      }
+    }
+  };
+};

package/esm/themeAugmentation/components.d.ts

@@ -22,6 +22,9 @@ export interface ChartsComponents<Theme = unknown> {
     defaultProps?: ComponentsProps['MuiChartsLegend'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiChartsLegend'];
   };
+  MuiChartsLocalizationProvider?: {
+    defaultProps?: ComponentsProps['MuiChartsLocalizationProvider'];
+  };
   MuiChartsTooltip?: {
     defaultProps?: ComponentsProps['MuiChartsTooltip'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiChartsTooltip'];

package/esm/themeAugmentation/props.d.ts

@@ -8,11 +8,13 @@ import { LineChartProps } from "../LineChart/LineChart.js";
 import { ScatterChartProps } from "../ScatterChart/ScatterChart.js";
 import { PieChartProps } from "../PieChart/PieChart.js";
 import { ChartsXAxisProps, ChartsYAxisProps } from "../models/axis.js";
+import { ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
 export interface ChartsComponentsPropsList {
   MuiChartsXAxis: ChartsXAxisProps;
   MuiChartsYAxis: ChartsYAxisProps;
   MuiChartsGrid: ChartsGridProps;
   MuiChartsLegend: ChartsLegendProps;
+  MuiChartsLocalizationProvider: ChartsLocalizationProviderProps;
   MuiChartsTooltip: ChartsTooltipProps;
   MuiChartsSurface: ChartsSurfaceProps;
 

package/hooks/index.d.ts

@@ -14,4 +14,6 @@ export * from "./useItemHighlighted.js";
 export * from "./useItemHighlightedGetter.js";
 export * from "./useLegend.js";
 export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
-export * from "./animation/index.js";
+export * from "./animation/index.js";
+export * from "./useChartRootRef.js";
+export * from "./useChartsLocalization.js";

package/hooks/index.js

@@ -211,4 +211,28 @@ Object.keys(_animation).forEach(function (key) {
       return _animation[key];
     }
   });
+});
+var _useChartRootRef = require("./useChartRootRef");
+Object.keys(_useChartRootRef).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartRootRef[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartRootRef[key];
+    }
+  });
+});
+var _useChartsLocalization = require("./useChartsLocalization");
+Object.keys(_useChartsLocalization).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartsLocalization[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartsLocalization[key];
+    }
+  });
 });

package/hooks/useChartRootRef.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Get the ref for the root chart element.
+ * @returns The root chart element ref.
+ */
+export declare function useChartRootRef(): React.RefObject<HTMLDivElement | null>;

package/hooks/useChartRootRef.js

@@ -0,0 +1,16 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartRootRef = useChartRootRef;
+var _ChartProvider = require("../context/ChartProvider");
+/**
+ * Get the ref for the root chart element.
+ * @returns The root chart element ref.
+ */
+function useChartRootRef() {
+  const context = (0, _ChartProvider.useChartContext)();
+  return context.chartRootRef;
+}

package/hooks/useChartsLocalization.d.ts

@@ -0,0 +1 @@
+export declare const useChartsLocalization: () => import("../ChartsLocalizationProvider/ChartsLocalizationProvider").ChartsLocalizationContextValue;

package/hooks/useChartsLocalization.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartsLocalization = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ChartsLocalizationProvider = require("../ChartsLocalizationProvider/ChartsLocalizationProvider");
+const useChartsLocalization = () => {
+  const localization = React.useContext(_ChartsLocalizationProvider.ChartsLocalizationContext);
+  if (localization === null) {
+    throw new Error(['MUI X: Can not find the charts localization context.', 'It looks like you forgot to wrap your component in ChartsLocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-charts` package'].join('\n'));
+  }
+  return localization;
+};
+exports.useChartsLocalization = useChartsLocalization;

package/index.d.ts

@@ -13,6 +13,7 @@ export * from "./ChartsText/index.js";
 export * from "./ChartsTooltip/index.js";
 export * from "./ChartsLabel/index.js";
 export * from "./ChartsLegend/index.js";
+export * from "./ChartsLocalizationProvider/index.js";
 export * from "./ChartsAxisHighlight/index.js";
 export * from "./BarChart/index.js";
 export * from "./LineChart/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0
+ * @mui/x-charts v8.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -175,6 +175,17 @@ Object.keys(_ChartsLegend).forEach(function (key) {
     }
   });
 });
+var _ChartsLocalizationProvider = require("./ChartsLocalizationProvider");
+Object.keys(_ChartsLocalizationProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsLocalizationProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsLocalizationProvider[key];
+    }
+  });
+});
 var _ChartsAxisHighlight = require("./ChartsAxisHighlight");
 Object.keys(_ChartsAxisHighlight).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/components/AxisSharedComponents.js

@@ -10,8 +10,7 @@ var _styles = require("@mui/material/styles");
 var _axisClasses = require("../../ChartsAxis/axisClasses");
 const AxisRoot = exports.AxisRoot = (0, _styles.styled)('g', {
   name: 'MuiChartsAxis',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })(({
   theme
 }) => ({

package/internals/components/ChartsWrapper/ChartsWrapper.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsWrapper = ChartsWrapper;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
+var _useChartRootRef = require("../../../hooks/useChartRootRef");
 var _jsxRuntime = require("react/jsx-runtime");
 const getDirection = (direction, position) => {
   if (direction === 'vertical') {
@@ -41,8 +42,7 @@ const getAlign = (direction, position) => {
 };
 const Root = (0, _styles.styled)('div', {
   name: 'MuiChartsWrapper',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })(({
   ownerState
 }) => ({
@@ -64,7 +64,9 @@ function ChartsWrapper(props) {
     children,
     sx
   } = props;
+  const chartRootRef = (0, _useChartRootRef.useChartRootRef)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    ref: chartRootRef,
     ownerState: props,
     sx: sx,
     children: children

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -1,7 +1,6 @@
 "use strict";
 'use client';
 
-/* eslint-disable react-compiler/react-compiler */
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {