@mui/x-charts 8.4.0 → 8.5.1

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartZoomOptionsLookup = exports.selectorChartZoomMap = exports.selectorChartZoomIsInteracting = exports.selectorChartYAxis = exports.selectorChartXAxis = exports.selectorChartAxisZoomOptionsLookup = exports.createZoomMap = void 0;
+exports.selectorChartZoomOptionsLookup = exports.selectorChartZoomMap = exports.selectorChartZoomIsInteracting = exports.selectorChartYAxis = exports.selectorChartXAxis = exports.selectorChartRawAxis = exports.selectorChartAxisZoomOptionsLookup = exports.selectorChartAxis = exports.createZoomMap = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useChartDimensions = require("../../corePlugins/useChartDimensions");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
@@ -95,4 +95,12 @@ const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSel
   zoomMap,
   zoomOptions,
   getFilters
-}));
+}));
+const selectorChartAxis = exports.selectorChartAxis = (0, _selectors.createSelector)([selectorChartXAxis, selectorChartYAxis, (_, axisId) => axisId], (xAxes, yAxes, axisId) => xAxes?.axis[axisId] ?? yAxes?.axis[axisId]);
+const selectorChartRawAxis = exports.selectorChartRawAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis, (state, axisId) => axisId], (xAxes, yAxes, axisId) => {
+  const axis = xAxes?.find(a => a.id === axisId) ?? yAxes?.find(a => a.id === axisId) ?? null;
+  if (!axis) {
+    return undefined;
+  }
+  return axis;
+});

package/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.d.ts

@@ -15,6 +15,7 @@ export type ZoomData = {
   end: number;
 };
 export type ZoomFilterMode = 'keep' | 'discard';
+export type ZoomSliderShowTooltip = 'always' | 'hover' | 'never';
 export interface ZoomOptions {
   /**
    * The starting percentage of the zoom range. In the range of 0 to 100.
@@ -85,6 +86,14 @@ export interface ZoomSliderOptions {
    * @default 28
    */
   size?: number;
+  /**
+   * Defines when the tooltip with the zoom values should be shown.
+   * - 'always': The tooltip is always shown.
+   * - 'hover': The tooltip is shown when hovering over the track or thumb.
+   * - 'never': The tooltip is never shown.
+   * @default 'hover'
+   */
+  showTooltip?: ZoomSliderShowTooltip;
 }
 export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;
 export type GetZoomAxisFilters = (params: {

package/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.js

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 const useChartHighlight = ({
   store,
   params
@@ -36,6 +37,10 @@ const useChartHighlight = ({
     }));
   });
   const setHighlight = (0, _useEventCallback.default)(newItem => {
+    const prevItem = store.getSnapshot().highlight.item;
+    if ((0, _fastObjectShallowCompare.fastObjectShallowCompare)(prevItem, newItem)) {
+      return;
+    }
     params.onHighlightChange?.(newItem);
     store.update(prev => (0, _extends2.default)({}, prev, {
       highlight: {

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartInteraction = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 const useChartInteraction = ({
   store
 }) => {
@@ -43,11 +44,16 @@ const useChartInteraction = ({
     });
   });
   const setItemInteraction = (0, _useEventCallback.default)(newItem => {
-    store.update(prev => (0, _extends2.default)({}, prev, {
-      interaction: (0, _extends2.default)({}, prev.interaction, {
-        item: newItem
-      })
-    }));
+    store.update(prev => {
+      if ((0, _fastObjectShallowCompare.fastObjectShallowCompare)(prev.interaction.item, newItem)) {
+        return prev;
+      }
+      return (0, _extends2.default)({}, prev, {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
+          item: newItem
+        })
+      });
+    });
   });
   const setPointerCoordinate = (0, _useEventCallback.default)(coordinate => {
     store.update(prev => (0, _extends2.default)({}, prev, {

package/internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js

@@ -11,6 +11,7 @@ var _axis = require("../../../../models/axis");
 var _colorScale = require("../../../colorScale");
 var _ticks = require("../../../ticks");
 var _getScale = require("../../../getScale");
+var _dateHelpers = require("../../../dateHelpers");
 var _getAxisExtremum = require("./getAxisExtremum");
 var _angleConversion = require("../../../angleConversion");
 var _getAxisTriggerTooltip = require("./getAxisTriggerTooltip");
@@ -29,13 +30,6 @@ function getRange(drawingArea, axisDirection, axis) {
   }
   return [0, Math.min(drawingArea.height, drawingArea.width) / 2];
 }
-const isDateData = data => data?.[0] instanceof Date;
-function createDateFormatter(axis, range) {
-  const timeScale = (0, _d3Scale.scaleTime)(axis.data, range);
-  return (v, {
-    location
-  }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
-}
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
 function computeAxisValue({
@@ -75,8 +69,8 @@ function computeAxisValue({
           values: axis.data
         }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
       });
-      if (isDateData(axis.data)) {
-        const dateFormatter = createDateFormatter(axis, range);
+      if ((0, _dateHelpers.isDateData)(axis.data)) {
+        const dateFormatter = (0, _dateHelpers.createDateFormatter)(axis, range);
         completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
       }
     }
@@ -92,8 +86,8 @@ function computeAxisValue({
           values: axis.data
         }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
       });
-      if (isDateData(axis.data)) {
-        const dateFormatter = createDateFormatter(axis, range);
+      if ((0, _dateHelpers.isDateData)(axis.data)) {
+        const dateFormatter = (0, _dateHelpers.createDateFormatter)(axis, range);
         completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
       }
     }

package/locales/index.d.ts

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

package/locales/index.js

@@ -24,4 +24,26 @@ Object.keys(_frFR).forEach(function (key) {
       return _frFR[key];
     }
   });
+});
+var _ptBR = require("./ptBR");
+Object.keys(_ptBR).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ptBR[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ptBR[key];
+    }
+  });
+});
+var _ptPT = require("./ptPT");
+Object.keys(_ptPT).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ptPT[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ptPT[key];
+    }
+  });
 });

package/locales/ptBR.d.ts

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

package/locales/ptBR.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ptBRLocaleText = exports.ptBR = void 0;
+var _getChartsLocalization = require("./utils/getChartsLocalization");
+const ptBRLocaleText = exports.ptBRLocaleText = {
+  // Overlay
+  loading: 'Carregando dados…',
+  noData: 'Sem dados para exibir',
+  zoomIn: 'Aumentar zoom',
+  zoomOut: 'Diminuir zoom'
+};
+const ptBR = exports.ptBR = (0, _getChartsLocalization.getChartsLocalization)(ptBRLocaleText);

package/locales/ptPT.d.ts

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

package/locales/ptPT.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ptPTLocaleText = exports.ptPT = void 0;
+var _getChartsLocalization = require("./utils/getChartsLocalization");
+const ptPTLocaleText = exports.ptPTLocaleText = {
+  // Overlay
+  loading: 'Carregando dados…',
+  noData: 'Sem dados para mostrar',
+  zoomIn: 'Aumentar zoom',
+  zoomOut: 'Diminuir zoom'
+};
+const ptPT = exports.ptPT = (0, _getChartsLocalization.getChartsLocalization)(ptPTLocaleText);

package/models/axis.d.ts

@@ -270,8 +270,9 @@ export type AxisValueFormatterContext<S extends ScaleName = ScaleName> = {
    * - `'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.
+   * - `'zoom-slider-tooltip'` The value is displayed in the zoom slider tooltip.
    */
-  location: 'legend';
+  location: 'legend' | 'zoom-slider-tooltip';
 } | {
   /**
    * Location indicates where the value will be displayed.

package/models/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./seriesType/index.js";
 export * from "./stacking.js";
+export * from "./slots/index.js";
 export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData, XAxis, YAxis, RadiusAxis, RotationAxis } from "./axis.js";
 export type { PropsFromSlot } from '@mui/x-internals/slots';
 export type { Position } from "./position.js";
-export type { CurveType } from "./curve.js";
-export type { ChartBaseCommonProps, ChartBaseIconProps, ChartsIconSlots, ChartsBaseSlots } from "./slots/index.js";
+export type { CurveType } from "./curve.js";

package/models/index.js

@@ -24,4 +24,15 @@ Object.keys(_stacking).forEach(function (key) {
       return _stacking[key];
     }
   });
+});
+var _slots = require("./slots");
+Object.keys(_slots).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _slots[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _slots[key];
+    }
+  });
 });

package/models/seriesType/bar.d.ts

@@ -1,6 +1,6 @@
 import { DefaultizedProps } from '@mui/x-internals/types';
 import type { StackOffsetType } from "../stacking.js";
-import { CartesianSeriesType, CommonSeriesType, CommonDefaultizedProps, StackableSeriesType } from "./common.js";
+import { CartesianSeriesType, CommonSeriesType, CommonDefaultizedProps, StackableSeriesType, SeriesId } from "./common.js";
 export interface BarSeriesType extends CommonSeriesType<number | null>, CartesianSeriesType, StackableSeriesType {
   type: 'bar';
   /**
@@ -32,7 +32,7 @@ export interface BarSeriesType extends CommonSeriesType<number | null>, Cartesia
  */
 export type BarItemIdentifier = {
   type: 'bar';
-  seriesId: DefaultizedBarSeriesType['id'];
+  seriesId: SeriesId;
   dataIndex: number;
 };
 export interface DefaultizedBarSeriesType extends DefaultizedProps<BarSeriesType, CommonDefaultizedProps | 'color' | 'layout'> {}

package/models/slots/chartsBaseSlotProps.d.ts

@@ -8,6 +8,13 @@ export type ChartBaseCommonProps<T = HTMLElement> = React.DOMAttributes<T> & {
 export type ChartBaseIconProps = ChartBaseCommonProps<SVGSVGElement> & {
   titleAccess?: string;
 };
+export type ChartBaseButtonProps = ChartBaseCommonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  tabIndex?: number;
+};
 export type ChartBaseIconButtonProps = ChartBaseCommonProps & {
   ref?: React.Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  tabIndex?: number;
 };

package/models/slots/chartsBaseSlots.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ChartBaseIconButtonProps } from "./chartsBaseSlotProps.js";
+import { ChartBaseButtonProps, ChartBaseIconButtonProps } from "./chartsBaseSlotProps.js";
 export interface ChartsBaseSlots {
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
   baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.4.0",
+  "version": "8.5.1",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "main": "./index.js",
@@ -29,15 +29,15 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.1",
-    "@mui/utils": "^7.0.2",
+    "@babel/runtime": "^7.27.4",
+    "@mui/utils": "^7.1.1",
     "bezier-easing": "^2.1.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-charts-vendor": "8.4.0",
-    "@mui/x-internals": "8.4.0"
+    "@mui/x-charts-vendor": "8.5.1",
+    "@mui/x-internals": "8.5.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",