@mui/x-charts 8.1.0 → 8.3.0

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

@@ -1,6 +1,7 @@
+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) : acc, 0));
-export const selectorChartRightAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) : acc, 0));
-export const selectorChartTopAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) : acc, 0));
-export const selectorChartBottomAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) : acc, 0));
+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));

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

@@ -28,7 +28,7 @@ export const useChartCartesianAxis = ({
     const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
     const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
     if (duplicates.size > 0) {
-      warnOnce([`MUI X: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
+      warnOnce([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
     }
   }
   const drawingArea = useSelector(store, selectorChartDrawingArea);

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

@@ -1,12 +1,16 @@
-import type { ChartPluginSignature } from '../../models';
-import type { ChartSeriesType, DatasetType } from '../../../../models/seriesType/config';
-import type { AxisDefaultized, ScaleName, ChartsXAxisProps, ChartsYAxisProps, AxisId, AxisConfig, ChartsAxisData, YAxis, XAxis } from '../../../../models/axis';
-import type { UseChartSeriesSignature } from '../../corePlugins/useChartSeries';
-import type { ZoomData, ZoomOptions } from './zoom.types';
-import type { UseChartInteractionSignature } from '../useChartInteraction';
-import type { ChartsAxisProps } from '../../../../ChartsAxis';
-export type DefaultizedAxisConfig<AxisProps extends ChartsAxisProps> = {
-  [axisId: AxisId]: AxisDefaultized<ScaleName, any, AxisProps>;
+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 { UseChartInteractionSignature } from "../useChartInteraction/index.js";
+import type { ChartsAxisProps } from "../../../../ChartsAxis/index.js";
+/**
+ * The axes' configuration after computing.
+ * An axis in this state already contains a scale function and all the necessary properties to be rendered.
+ */
+export type ComputedAxisConfig<AxisProps extends ChartsAxisProps> = {
+  [axisId: AxisId]: ComputedAxis<ScaleName, any, AxisProps>;
 };
 export interface UseChartCartesianAxisParameters<S extends ScaleName = ScaleName> {
   /**
@@ -29,7 +33,7 @@ export interface UseChartCartesianAxisParameters<S extends ScaleName = ScaleName
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
   /**
@@ -40,12 +44,13 @@ export interface UseChartCartesianAxisParameters<S extends ScaleName = ScaleName
   disableAxisListener?: boolean;
 }
 export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = ScaleName> = UseChartCartesianAxisParameters<S> & {
-  defaultizedXAxis: AxisConfig<S, any, ChartsXAxisProps>[];
-  defaultizedYAxis: AxisConfig<S, any, ChartsYAxisProps>[];
+  defaultizedXAxis: DefaultedXAxis<S>[];
+  defaultizedYAxis: DefaultedYAxis<S>[];
 };
-export interface DefaultizedZoomOptions extends Required<ZoomOptions> {
+export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slider'>> {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
+  slider: NonNullable<Required<ZoomOptions['slider']>>;
 }
 export interface UseChartCartesianAxisState {
   /**
@@ -56,8 +61,8 @@ export interface UseChartCartesianAxisState {
     zoomData: readonly ZoomData[];
   };
   cartesianAxis: {
-    x: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
-    y: AxisConfig<ScaleName, any, ChartsYAxisProps>[];
+    x: DefaultedXAxis[];
+    y: DefaultedYAxis[];
   };
 }
 export type ExtremumFilter = (value: {

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

@@ -1,32 +1,32 @@
 import { UseChartCartesianAxisSignature } from "./useChartCartesianAxis.types.js";
 import { ChartState } from "../../models/chart.js";
 export declare const selectorChartCartesianAxisState: (state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
-  x: import("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsXAxisProps>[];
-  y: import("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsYAxisProps>[];
+  x: import("../../../index.js").DefaultedXAxis[];
+  y: import("../../../index.js").DefaultedYAxis[];
 } | undefined;
-export declare const selectorChartRawXAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
-  cacheKey: import("../../models").ChartStateCacheKey;
-}) => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsXAxisProps>[] | undefined) & {
+export declare const selectorChartRawXAxis: ((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("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsXAxisProps>[];
-    y: import("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsYAxisProps>[];
-  } | undefined) => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsXAxisProps>[] | undefined;
+    x: import("../../../index.js").DefaultedXAxis[];
+    y: import("../../../index.js").DefaultedYAxis[];
+  } | undefined) => import("../../../index.js").DefaultedXAxis[] | undefined;
   memoizedResultFunc: ((resultFuncArgs_0: {
-    x: import("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsXAxisProps>[];
-    y: import("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsYAxisProps>[];
-  } | undefined) => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsXAxisProps>[] | undefined) & {
+    x: import("../../../index.js").DefaultedXAxis[];
+    y: import("../../../index.js").DefaultedYAxis[];
+  } | undefined) => import("../../../index.js").DefaultedXAxis[] | undefined) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
-  lastResult: () => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsXAxisProps>[] | undefined;
+  lastResult: () => import("../../../index.js").DefaultedXAxis[] | undefined;
   dependencies: [(state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
-    x: import("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsXAxisProps>[];
-    y: import("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsYAxisProps>[];
+    x: import("../../../index.js").DefaultedXAxis[];
+    y: import("../../../index.js").DefaultedYAxis[];
   } | undefined];
   recomputations: () => number;
   resetRecomputations: () => void;
@@ -36,29 +36,29 @@ export declare const selectorChartRawXAxis: ((state: import("../../corePlugins/u
   memoize: typeof import("reselect").weakMapMemoize;
   argsMemoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartRawYAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types").UseChartCartesianAxisState> & {
-  cacheKey: import("../../models").ChartStateCacheKey;
-}) => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsYAxisProps>[] | undefined) & {
+export declare const selectorChartRawYAxis: ((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("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsXAxisProps>[];
-    y: import("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsYAxisProps>[];
-  } | undefined) => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsYAxisProps>[] | undefined;
+    x: import("../../../index.js").DefaultedXAxis[];
+    y: import("../../../index.js").DefaultedYAxis[];
+  } | undefined) => import("../../../index.js").DefaultedYAxis[] | undefined;
   memoizedResultFunc: ((resultFuncArgs_0: {
-    x: import("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsXAxisProps>[];
-    y: import("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsYAxisProps>[];
-  } | undefined) => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsYAxisProps>[] | undefined) & {
+    x: import("../../../index.js").DefaultedXAxis[];
+    y: import("../../../index.js").DefaultedYAxis[];
+  } | undefined) => import("../../../index.js").DefaultedYAxis[] | undefined) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
-  lastResult: () => import("../../..").AxisConfig<keyof import("../../..").AxisScaleConfig, any, import("../../..").ChartsYAxisProps>[] | undefined;
+  lastResult: () => import("../../../index.js").DefaultedYAxis[] | undefined;
   dependencies: [(state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
-    x: import("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsXAxisProps>[];
-    y: import("../../..").AxisConfig<import("../../..").ScaleName, any, import("../../..").ChartsYAxisProps>[];
+    x: import("../../../index.js").DefaultedXAxis[];
+    y: import("../../../index.js").DefaultedYAxis[];
   } | undefined];
   recomputations: () => number;
   resetRecomputations: () => void;