@mui/x-charts 8.0.0 → 8.1.0

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorChartsInteractionTooltipRotationAxes = exports.selectorChartsInteractionTooltipRadiusAxes = exports.selectorChartsInteractionRotationAxisValues = exports.selectorChartsInteractionRotationAxisValue = exports.selectorChartsInteractionRotationAxisIndexes = exports.selectorChartsInteractionRotationAxisIndex = exports.selectorChartsInteractionPolarAxisTooltip = void 0;
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _selectors = require("../../utils/selectors");
 var _useChartInteraction = require("../useChartInteraction/useChartInteraction.selectors");
 var _coordinateTransformation = require("./coordinateTransformation");
@@ -68,6 +69,13 @@ const selectorChartsInteractionTooltipRotationAxes = exports.selectorChartsInter
     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.isDeepEqual
+  }
 });
 
 /**

package/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/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/internals/store/useCharts.js

@@ -36,6 +36,7 @@ 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) {
@@ -60,6 +61,7 @@ function useCharts(inPlugins, props, seriesConfig) {
       plugins: plugins,
       store: storeRef.current,
       svgRef: innerSvgRef,
+      chartRootRef: innerChartRootRef,
       seriesConfig,
       models
     });
@@ -75,7 +77,8 @@ function useCharts(inPlugins, props, seriesConfig) {
     store: storeRef.current,
     publicAPI,
     instance,
-    svgRef: innerSvgRef
+    svgRef: innerSvgRef,
+    chartRootRef: innerChartRootRef
   }), [instance, publicAPI]);
   return {
     contextValue

package/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/locales/enUS.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.enUSLocaleText = exports.enUS = exports.DEFAULT_LOCALE = void 0;
+var _getChartsLocalization = require("./utils/getChartsLocalization");
+// This object is not Partial<ChartsLocaleText> because it is the default values
+
+const enUSLocaleText = exports.enUSLocaleText = {
+  // Overlay
+  loading: 'Loading data…',
+  noData: 'No data to display'
+};
+const DEFAULT_LOCALE = exports.DEFAULT_LOCALE = enUSLocaleText;
+const enUS = exports.enUS = (0, _getChartsLocalization.getChartsLocalization)(enUSLocaleText);

package/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/locales/frFR.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.frFRLocalText = exports.frFR = void 0;
+var _getChartsLocalization = require("./utils/getChartsLocalization");
+const frFRLocalText = exports.frFRLocalText = {
+  // Overlay
+  loading: 'Chargement…',
+  noData: 'Pas de données'
+};
+const frFR = exports.frFR = (0, _getChartsLocalization.getChartsLocalization)(frFRLocalText);

package/locales/index.d.ts

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

package/locales/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _enUS = require("./enUS");
+Object.keys(_enUS).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _enUS[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _enUS[key];
+    }
+  });
+});
+var _frFR = require("./frFR");
+Object.keys(_frFR).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _frFR[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _frFR[key];
+    }
+  });
+});

package/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/locales/utils/chartsLocaleTextApi.js

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

package/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/locales/utils/getChartsLocalization.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getChartsLocalization = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/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
+ */
+const getChartsLocalization = chartsTranslations => {
+  return {
+    components: {
+      MuiChartsLocalizationProvider: {
+        defaultProps: {
+          localeText: (0, _extends2.default)({}, chartsTranslations)
+        }
+      }
+    }
+  };
+};
+exports.getChartsLocalization = getChartsLocalization;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -34,7 +34,6 @@
     "bezier-easing": "^2.1.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "react-is": "^18.3.1 || ^19.0.0",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
     "@mui/x-charts-vendor": "8.0.0",

package/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/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;