@mui/x-charts 8.3.1 → 8.5.0

package/esm/internals/plugins/allPlugins.d.ts

@@ -6,4 +6,5 @@ import { UseChartPolarAxisSignature } from "./featurePlugins/useChartPolarAxis/i
 import { UseChartVoronoiSignature } from "./featurePlugins/useChartVoronoi/index.js";
 import { UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/index.js";
 export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
+export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
 export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartVoronoiSignature>];

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

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
+import { useSelector } from "../../../store/useSelector.js";
 import { DEFAULT_MARGINS } from "../../../../constants/index.js";
 import { selectorChartDrawingArea } from "./useChartDimensions.selectors.js";
 import { defaultizeMargin } from "../../../defaultizeMargin.js";
@@ -143,28 +144,21 @@ export const useChartDimensions = ({
       stateRef.current.displayError = false;
     }
   }
-  const isPointInside = React.useCallback(({
-    x,
-    y
-  }, options) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const isXInside = React.useCallback(x => x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width, [drawingArea.left, drawingArea.width]);
+  const isYInside = React.useCallback(y => y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height, [drawingArea.height, drawingArea.top]);
+  const isPointInside = React.useCallback((x, y, targetElement) => {
     // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
-    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
+    if (targetElement && targetElement.closest('[data-drawing-container]')) {
       return true;
     }
-    const drawingArea = selectorChartDrawingArea(store.value);
-    const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
-    const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
-    if (options?.direction === 'x') {
-      return isInsideX;
-    }
-    if (options?.direction === 'y') {
-      return isInsideY;
-    }
-    return isInsideX && isInsideY;
-  }, [store.value]);
+    return isXInside(x) && isYInside(y);
+  }, [isXInside, isYInside]);
   return {
     instance: {
-      isPointInside
+      isPointInside,
+      isXInside,
+      isYInside
     }
   };
 };

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.d.ts

@@ -65,21 +65,24 @@ export interface UseChartDimensionsState {
 export interface UseChartDimensionsInstance {
   /**
    * Checks if a point is inside the drawing area.
-   * @param {Object} point The point to check.
-   * @param {number} point.x The x coordinate of the point.
-   * @param {number} point.y The y coordinate of the point.
-   * @param {Object} options The options of the check.
-   * @param {Element} [options.targetElement] The element to check if it is allowed to overflow the drawing area.
-   * @param {'x' | 'y'} [options.direction] The direction to check.
+   * @param {number} x The x coordinate of the point.
+   * @param {number} y The y coordinate of the point.
+   * @param {Element} targetElement The element to check if it is allowed to overflow the drawing area.
    * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
    */
-  isPointInside: (point: {
-    x: number;
-    y: number;
-  }, options?: {
-    targetElement?: Element;
-    direction?: 'x' | 'y';
-  }) => boolean;
+  isPointInside: (x: number, y: number, targetElement?: Element) => boolean;
+  /**
+   * Checks if the x coordinate is inside the drawing area.
+   * @param {number} x The x coordinate of the point.
+   * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
+   */
+  isXInside: (x: number) => boolean;
+  /**
+   * Checks if the y coordinate is inside the drawing area.
+   * @param {number} y The y coordinate of the point.
+   * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
+   */
+  isYInside: (y: number) => boolean;
 }
 export type UseChartDimensionsSignature = ChartPluginSignature<{
   params: UseChartDimensionsParameters;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
+import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
 import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
 import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
 import { getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
 import { getScale } from "../../../getScale.js";
+import { isDateData, createDateFormatter } from "../../../dateHelpers.js";
 import { zoomScaleRange } from "./zoom.js";
 import { getAxisExtremum } from "./getAxisExtremum.js";
 import { getAxisTriggerTooltip } from "./getAxisTriggerTooltip.js";
@@ -13,13 +14,6 @@ axis) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return axis.reverse ? [range[1], range[0]] : range;
 }
-const isDateData = data => data?.[0] instanceof Date;
-function createDateFormatter(axis, range) {
-  const timeScale = 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;
 export function computeAxisValue({

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { ZOOM_SLIDER_SIZE } from "../../../constants.js";
 import { defaultizeZoom } from "./defaultizeZoom.js";
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY, DEFAULT_AXIS_SIZE_HEIGHT, DEFAULT_AXIS_SIZE_WIDTH, AXIS_LABEL_DEFAULT_HEIGHT } from "../../../../constants/index.js";
 export function defaultizeXAxis(inAxes, dataset) {
@@ -33,7 +32,7 @@ export function defaultizeXAxis(inAxes, dataset) {
     if (position !== 'none') {
       offsets[position] += sharedConfig.height;
       if (sharedConfig.zoom?.slider.enabled) {
-        offsets[position] += ZOOM_SLIDER_SIZE;
+        offsets[position] += sharedConfig.zoom.slider.size;
       }
     }
 
@@ -83,7 +82,7 @@ export function defaultizeYAxis(inAxes, dataset) {
     if (position !== 'none') {
       offsets[position] += sharedConfig.width;
       if (sharedConfig.zoom?.slider.enabled) {
-        offsets[position] += ZOOM_SLIDER_SIZE;
+        offsets[position] += sharedConfig.zoom.slider.size;
       }
     }
 

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.d.ts

@@ -1,4 +1,18 @@
 import { AxisId } from "../../../../models/axis.js";
 import { DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
 import { ZoomOptions } from "./zoom.types.js";
+export declare const defaultZoomOptions: {
+  minStart: number;
+  maxEnd: number;
+  step: number;
+  minSpan: number;
+  maxSpan: number;
+  panning: true;
+  filterMode: "keep";
+  slider: {
+    enabled: false;
+    size: number;
+    showTooltip: import("./zoom.types.js").ZoomSliderShowTooltip;
+  };
+};
 export declare const defaultizeZoom: (zoom: boolean | ZoomOptions | undefined, axisId: AxisId, axisDirection: "x" | "y") => DefaultizedZoomOptions | undefined;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-const defaultZoomOptions = {
+import { DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, DEFAULT_ZOOM_SLIDER_SIZE } from "../../../constants.js";
+export const defaultZoomOptions = {
   minStart: 0,
   maxEnd: 100,
   step: 5,
@@ -8,7 +9,9 @@ const defaultZoomOptions = {
   panning: true,
   filterMode: 'keep',
   slider: {
-    enabled: false
+    enabled: false,
+    size: DEFAULT_ZOOM_SLIDER_SIZE,
+    showTooltip: DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP
   }
 };
 export const defaultizeZoom = (zoom, axisId, axisDirection) => {

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.js

@@ -1,7 +1,6 @@
-import { ZOOM_SLIDER_SIZE } from "../../../constants.js";
 import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
 import { createSelector } from "../../utils/selectors.js";
-export const selectorChartLeftAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
-export const selectorChartRightAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
-export const selectorChartTopAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
-export const selectorChartBottomAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
+export const selectorChartLeftAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+export const selectorChartRightAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+export const selectorChartTopAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+export const selectorChartBottomAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -71,9 +71,7 @@ export const useChartCartesianAxis = ({
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       const svgPoint = getSVGPoint(element, target);
-      if (!instance.isPointInside(svgPoint, {
-        targetElement: event.target
-      })) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
         instance.cleanInteraction?.();
         return;
       }

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

@@ -2,7 +2,7 @@ import type { ChartPluginSignature } from "../../models/index.js";
 import type { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
 import type { ComputedAxis, ScaleName, AxisId, ChartsAxisData, YAxis, XAxis, DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.js";
 import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
-import type { ZoomData, ZoomOptions } from "./zoom.types.js";
+import type { ZoomData, ZoomOptions, ZoomSliderShowTooltip } from "./zoom.types.js";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 import type { ChartsAxisProps } from "../../../../ChartsAxis/index.js";
 /**
@@ -47,10 +47,13 @@ export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = Sca
   defaultizedXAxis: DefaultedXAxis<S>[];
   defaultizedYAxis: DefaultedYAxis<S>[];
 };
+export interface DefaultedZoomSliderOptions extends Omit<NonNullable<Required<ZoomOptions['slider']>>, 'showTooltip'> {
+  showTooltip: ZoomSliderShowTooltip;
+}
 export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slider'>> {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
-  slider: NonNullable<Required<ZoomOptions['slider']>>;
+  slider: DefaultedZoomSliderOptions;
 }
 export interface UseChartCartesianAxisState {
   /**

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts

@@ -3238,4 +3238,87 @@ export declare const selectorChartYAxis: ((state: import("../../corePlugins/useC
 } & {
   memoize: typeof import("reselect").weakMapMemoize;
   argsMemoize: typeof import("reselect").weakMapMemoize;
+};
+export declare const selectorChartRawAxis: ((state: any, axisId: AxisId) => import("../../../index.js").DefaultedXAxis | import("../../../index.js").DefaultedYAxis | undefined) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: import("../../../index.js").DefaultedXAxis[] | undefined, resultFuncArgs_1: import("../../../index.js").DefaultedYAxis[] | undefined, resultFuncArgs_2: AxisId) => import("../../../index.js").DefaultedXAxis | import("../../../index.js").DefaultedYAxis | undefined;
+  memoizedResultFunc: ((resultFuncArgs_0: import("../../../index.js").DefaultedXAxis[] | undefined, resultFuncArgs_1: import("../../../index.js").DefaultedYAxis[] | undefined, resultFuncArgs_2: AxisId) => import("../../../index.js").DefaultedXAxis | import("../../../index.js").DefaultedYAxis | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => import("../../../index.js").DefaultedXAxis | import("../../../index.js").DefaultedYAxis | undefined;
+  dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+    cacheKey: import("../../models/index.js").ChartStateCacheKey;
+  }) => import("../../../index.js").DefaultedXAxis[] | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: {
+      x: import("../../../index.js").DefaultedXAxis[];
+      y: import("../../../index.js").DefaultedYAxis[];
+    } | undefined) => import("../../../index.js").DefaultedXAxis[] | undefined;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+      x: import("../../../index.js").DefaultedXAxis[];
+      y: import("../../../index.js").DefaultedYAxis[];
+    } | undefined) => import("../../../index.js").DefaultedXAxis[] | undefined) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => import("../../../index.js").DefaultedXAxis[] | undefined;
+    dependencies: [(state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
+      x: import("../../../index.js").DefaultedXAxis[];
+      y: import("../../../index.js").DefaultedYAxis[];
+    } | undefined];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+  }, ((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+    cacheKey: import("../../models/index.js").ChartStateCacheKey;
+  }) => import("../../../index.js").DefaultedYAxis[] | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: {
+      x: import("../../../index.js").DefaultedXAxis[];
+      y: import("../../../index.js").DefaultedYAxis[];
+    } | undefined) => import("../../../index.js").DefaultedYAxis[] | undefined;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+      x: import("../../../index.js").DefaultedXAxis[];
+      y: import("../../../index.js").DefaultedYAxis[];
+    } | undefined) => import("../../../index.js").DefaultedYAxis[] | undefined) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => import("../../../index.js").DefaultedYAxis[] | undefined;
+    dependencies: [(state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
+      x: import("../../../index.js").DefaultedXAxis[];
+      y: import("../../../index.js").DefaultedYAxis[];
+    } | undefined];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+  }, (state: any, axisId: AxisId) => AxisId];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  memoize: typeof import("reselect").weakMapMemoize;
+  argsMemoize: typeof import("reselect").weakMapMemoize;
 };

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

@@ -87,4 +87,11 @@ export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selecto
   zoomMap,
   zoomOptions,
   getFilters
-}));
+}));
+export const selectorChartRawAxis = createSelector([selectorChartRawXAxis, 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/esm/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/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 export const useChartHighlight = ({
   store,
   params
@@ -29,6 +30,10 @@ export const useChartHighlight = ({
     }));
   });
   const setHighlight = useEventCallback(newItem => {
+    const prevItem = store.getSnapshot().highlight.item;
+    if (fastObjectShallowCompare(prevItem, newItem)) {
+      return;
+    }
     params.onHighlightChange?.(newItem);
     store.update(prev => _extends({}, prev, {
       highlight: {

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 export const useChartInteraction = ({
   store
 }) => {
@@ -36,11 +37,16 @@ export const useChartInteraction = ({
     });
   });
   const setItemInteraction = useEventCallback(newItem => {
-    store.update(prev => _extends({}, prev, {
-      interaction: _extends({}, prev.interaction, {
-        item: newItem
-      })
-    }));
+    store.update(prev => {
+      if (fastObjectShallowCompare(prev.interaction.item, newItem)) {
+        return prev;
+      }
+      return _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          item: newItem
+        })
+      });
+    });
   });
   const setPointerCoordinate = useEventCallback(coordinate => {
     store.update(prev => _extends({}, prev, {

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

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
+import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
 import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
 import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
 import { getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
 import { getScale } from "../../../getScale.js";
+import { isDateData, createDateFormatter } from "../../../dateHelpers.js";
 import { getAxisExtremum } from "./getAxisExtremum.js";
 import { deg2rad } from "../../../angleConversion.js";
 import { getAxisTriggerTooltip } from "./getAxisTriggerTooltip.js";
@@ -22,13 +23,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 = 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;
 export function computeAxisValue({

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

@@ -97,9 +97,7 @@ export 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/esm/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.js

@@ -71,10 +71,7 @@ export 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.
@@ -100,7 +97,7 @@ export const useChartVoronoi = ({
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = getSVGPoint(element, event);
-      if (!instance.isPointInside(svgPoint)) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
         lastFind.current = undefined;
         return 'outside-chart';
       }

package/esm/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/esm/models/index.js

@@ -1,5 +1,6 @@
 export * from "./seriesType/index.js";
 export * from "./stacking.js";
+export * from "./slots/index.js";
 
 // Utils shared across the X packages
 export {};

package/esm/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/hooks/index.d.ts

@@ -10,6 +10,7 @@ export * from "./useScatterSeries.js";
 export * from "./usePieSeries.js";
 export * from "./useBarSeries.js";
 export * from "./useLineSeries.js";
+export * from "./useRadarSeries.js";
 export * from "./useItemHighlighted.js";
 export * from "./useItemHighlightedGetter.js";
 export * from "./useLegend.js";

package/hooks/index.js

@@ -163,6 +163,18 @@ Object.keys(_useLineSeries).forEach(function (key) {
     }
   });
 });
+var _useRadarSeries = require("./useRadarSeries");
+Object.keys(_useRadarSeries).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useRadarSeries[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useRadarSeries[key];
+    }
+  });
+});
 var _useItemHighlighted = require("./useItemHighlighted");
 Object.keys(_useItemHighlighted).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/hooks/useTicks.js

@@ -78,12 +78,8 @@ function useTicks(options) {
     for (let i = 0; i < ticks.length; i += 1) {
       const value = ticks[i];
       const offset = scale(value);
-      if (instance.isPointInside({
-        x: offset,
-        y: offset
-      }, {
-        direction
-      })) {
+      const isInside = direction === 'x' ? instance.isXInside(offset) : instance.isYInside(offset);
+      if (isInside) {
         visibleTicks.push({
           value,
           formattedValue: valueFormatter?.(value, {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.3.1
+ * @mui/x-charts v8.5.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/constants.d.ts

@@ -1,4 +1,6 @@
+import type { ZoomSliderShowTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/zoom.types.js";
 /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
 export declare const ZOOM_SLIDER_MARGIN = 4;
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
-export declare const ZOOM_SLIDER_SIZE: number;
+export declare const DEFAULT_ZOOM_SLIDER_SIZE: number;
+export declare const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP: ZoomSliderShowTooltip;

package/internals/constants.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZOOM_SLIDER_SIZE = exports.ZOOM_SLIDER_MARGIN = void 0;
+exports.ZOOM_SLIDER_MARGIN = exports.DEFAULT_ZOOM_SLIDER_SIZE = exports.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = void 0;
 /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
 const ZOOM_SLIDER_MARGIN = exports.ZOOM_SLIDER_MARGIN = 4;
 
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
-const ZOOM_SLIDER_SIZE = exports.ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
+const DEFAULT_ZOOM_SLIDER_SIZE = exports.DEFAULT_ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
+const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = exports.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = 'hover';

package/internals/consumeSlots.js

@@ -102,4 +102,5 @@ const consumeSlots = (name, slotPropName, options, InComponent) => {
   }
   return /*#__PURE__*/React.forwardRef(ConsumeSlotsInternal);
 };
-exports.consumeSlots = consumeSlots;
+exports.consumeSlots = consumeSlots;
+if (process.env.NODE_ENV !== "production") consumeSlots.displayName = "consumeSlots";

package/internals/consumeThemeProps.js

@@ -67,6 +67,7 @@ const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.for
   const theme = (0, _styles.useTheme)();
   const classes = options.classesResolver?.(outProps, theme);
   const OutComponent = /*#__PURE__*/React.forwardRef(InComponent);
+  if (process.env.NODE_ENV !== "production") OutComponent.displayName = "OutComponent";
   if (process.env.NODE_ENV !== 'production') {
     OutComponent.displayName = `consumeThemeProps(${name})`;
   }
@@ -75,4 +76,5 @@ const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.for
     ref: ref
   }));
 });
-exports.consumeThemeProps = consumeThemeProps;
+exports.consumeThemeProps = consumeThemeProps;
+if (process.env.NODE_ENV !== "production") consumeThemeProps.displayName = "consumeThemeProps";

package/internals/dateHelpers.d.ts

@@ -0,0 +1,15 @@
+import { AxisConfig } from "../models/index.js";
+import { ChartsAxisProps } from "../models/axis.js";
+/**
+ * Checks if the provided data array contains Date objects.
+ * @param data The data array to check.
+ * @returns A type predicate indicating if the data is an array of Date objects.
+ */
+export declare const isDateData: (data?: readonly any[]) => data is Date[];
+/**
+ * Creates a formatter function for date values.
+ * @param axis The axis configuration.
+ * @param range The range for the time scale.
+ * @returns A formatter function for date values.
+ */
+export declare function createDateFormatter(axis: AxisConfig<'band' | 'point', any, ChartsAxisProps>, range: number[]): AxisConfig<'band' | 'point', any, ChartsAxisProps>['valueFormatter'];