@mui/x-charts 8.3.1 → 8.5.0

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.createZoomMap = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useChartDimensions = require("../../corePlugins/useChartDimensions");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
@@ -95,4 +95,11 @@ const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSel
   zoomMap,
   zoomOptions,
   getFilters
-}));
+}));
+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.
@@ -77,6 +78,22 @@ export interface ZoomSliderOptions {
    * If `true`, the slider will be shown.
    */
   enabled?: boolean;
+  /**
+   * The size reserved for the zoom slider. The actual size of the slider might be smaller, so
+   * increasing this value effectively increases the margin around the slider.
+   * This means the height for the x-axis and the width for the y-axis.
+   *
+   * @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/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

@@ -104,9 +104,7 @@ const useChartPolarAxis = ({
       mousePosition.current.y = svgPoint.y;
 
       // Test if it's in the drawing area
-      if (!instance.isPointInside(svgPoint, {
-        targetElement: event.target
-      })) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
         if (mousePosition.current.isInChart) {
           instance?.cleanInteraction();
           mousePosition.current.isInChart = false;

package/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.js

@@ -79,10 +79,7 @@ const useChartVoronoi = ({
       }) => {
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!instance.isPointInside({
-          x: pointX,
-          y: pointY
-        })) {
+        if (!instance.isPointInside(pointX, pointY)) {
           // If the point is not displayed we move them to a trash coordinate.
           // This avoids managing index mapping before/after filtering.
           // The trash point is far enough such that any point in the drawing area will be closer to the mouse than the trash coordinate.
@@ -108,7 +105,7 @@ const useChartVoronoi = ({
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
-      if (!instance.isPointInside(svgPoint)) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
         lastFind.current = undefined;
         return 'outside-chart';
       }

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/slots/chartsBaseSlotProps.d.ts

@@ -10,4 +10,5 @@ export type ChartBaseIconProps = ChartBaseCommonProps<SVGSVGElement> & {
 };
 export type ChartBaseIconButtonProps = ChartBaseCommonProps & {
   ref?: React.Ref<HTMLButtonElement>;
+  disabled?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.3.1",
+  "version": "8.5.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "main": "./index.js",
@@ -36,8 +36,8 @@
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-internals": "8.3.1",
-    "@mui/x-charts-vendor": "8.3.1"
+    "@mui/x-charts-vendor": "8.4.0",
+    "@mui/x-internals": "8.5.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",