@mui/x-charts 8.1.0 → 8.3.0

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartPropsSize = exports.selectorChartDrawingArea = exports.selectorChartDimensionsState = exports.selectorChartContainerSize = void 0;
+exports.selectorChartPropsSize = exports.selectorChartMargin = exports.selectorChartDrawingArea = exports.selectorChartDimensionsState = exports.selectorChartContainerSize = void 0;
 var _selectors = require("../../utils/selectors");
 var _useChartAxisSize = require("../../featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors");
 const selectorChartDimensionsState = state => state.dimensions;
 exports.selectorChartDimensionsState = selectorChartDimensionsState;
-const selectorChartMargin = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.margin);
+const selectorChartMargin = exports.selectorChartMargin = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.margin);
 const selectorChartWidth = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.width);
 const selectorChartHeight = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.height);
 const selectorChartTopMargin = (0, _selectors.createSelector)(selectorChartMargin, margin => margin.top);

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

@@ -1,5 +1,5 @@
 import { ChartPluginSignature } from "../../models/index.js";
-import type { UseChartCartesianAxisSignature } from '../../featurePlugins/useChartCartesianAxis';
+import type { UseChartCartesianAxisSignature } from "../../featurePlugins/useChartCartesianAxis/index.js";
 export interface ChartMargin {
   /**
    * The gap between the left border of the SVG and the drawing area.

package/internals/plugins/corePlugins/useChartId/index.d.ts

@@ -1,3 +1,3 @@
 export { useChartId } from "./useChartId.js";
-export type { UseChartIdSignature, UseChartIdParameters, UseChartIdDefaultizedParameters } from './useChartId.types';
+export type { UseChartIdSignature, UseChartIdParameters, UseChartIdDefaultizedParameters } from "./useChartId.types.js";
 export * from "./useChartId.selectors.js";

package/internals/plugins/corePlugins/useChartId/useChartId.selectors.d.ts

@@ -5,8 +5,8 @@ import { UseChartIdSignature } from "./useChartId.types.js";
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-export declare const selectorChartId: ((state: import("./useChartId.types").UseChartIdState & import("../useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<{}> & {
-  cacheKey: import("../../models").ChartStateCacheKey;
+export declare const selectorChartId: ((state: import("./useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => string | undefined) & {
   clearCache: () => void;
   resultsCount: () => number;

package/internals/plugins/corePlugins/useChartSeries/index.d.ts

@@ -1,3 +1,3 @@
 export { useChartSeries } from "./useChartSeries.js";
-export type { UseChartSeriesSignature, UseChartSeriesParameters, UseChartSeriesDefaultizedParameters, ProcessedSeries } from './useChartSeries.types';
+export type { UseChartSeriesSignature, UseChartSeriesParameters, UseChartSeriesDefaultizedParameters, ProcessedSeries } from "./useChartSeries.types.js";
 export * from "./useChartSeries.selectors.js";

package/internals/plugins/corePlugins/useChartSeries/processSeries.js

@@ -33,7 +33,7 @@ const preprocessSeries = ({
       };
     }
     if (seriesGroups[seriesData.type]?.series[id] !== undefined) {
-      throw new Error(`MUI X: series' id "${id}" is not unique.`);
+      throw new Error(`MUI X Charts: series' id "${id}" is not unique.`);
     }
     seriesGroups[seriesData.type].series[id] = seriesWithDefaultValues;
     seriesGroups[seriesData.type].seriesOrder.push(id);

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.ts

@@ -1,26 +1,26 @@
 import { ChartRootSelector } from "../../utils/selectors.js";
 import { UseChartSeriesSignature } from "./useChartSeries.types.js";
 export declare const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature>;
-export declare const selectorChartSeriesProcessed: ((state: import("../useChartId/useChartId.types").UseChartIdState & import("../useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("./useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<{}> & {
-  cacheKey: import("../../models").ChartStateCacheKey;
-}) => import("./useChartSeries.types").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>) & {
+export declare const selectorChartSeriesProcessed: ((state: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>) & {
   clearCache: () => void;
   resultsCount: () => number;
   resetResultsCount: () => void;
 } & {
   resultFunc: (resultFuncArgs_0: {
-    processedSeries: import("./useChartSeries.types").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>;
-    seriesConfig: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>;
-  }) => import("./useChartSeries.types").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>;
+    processedSeries: import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;
+    seriesConfig: import("../../models/index.js").ChartSeriesConfig<keyof import("../../../index.js").ChartsSeriesConfig>;
+  }) => import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;
   memoizedResultFunc: ((resultFuncArgs_0: {
-    processedSeries: import("./useChartSeries.types").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>;
-    seriesConfig: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>;
-  }) => import("./useChartSeries.types").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>) & {
+    processedSeries: import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;
+    seriesConfig: import("../../models/index.js").ChartSeriesConfig<keyof import("../../../index.js").ChartsSeriesConfig>;
+  }) => import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
-  lastResult: () => import("./useChartSeries.types").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>;
+  lastResult: () => import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;
   dependencies: [ChartRootSelector<UseChartSeriesSignature>];
   recomputations: () => number;
   resetRecomputations: () => void;
@@ -30,26 +30,26 @@ export declare const selectorChartSeriesProcessed: ((state: import("../useChartI
   memoize: typeof import("reselect").weakMapMemoize;
   argsMemoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartSeriesConfig: ((state: import("../useChartId/useChartId.types").UseChartIdState & import("../useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("./useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<{}> & {
-  cacheKey: import("../../models").ChartStateCacheKey;
-}) => import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>) & {
+export declare const selectorChartSeriesConfig: ((state: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => import("../../models/index.js").ChartSeriesConfig<keyof import("../../../index.js").ChartsSeriesConfig>) & {
   clearCache: () => void;
   resultsCount: () => number;
   resetResultsCount: () => void;
 } & {
   resultFunc: (resultFuncArgs_0: {
-    processedSeries: import("./useChartSeries.types").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>;
-    seriesConfig: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>;
-  }) => import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>;
+    processedSeries: import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;
+    seriesConfig: import("../../models/index.js").ChartSeriesConfig<keyof import("../../../index.js").ChartsSeriesConfig>;
+  }) => import("../../models/index.js").ChartSeriesConfig<keyof import("../../../index.js").ChartsSeriesConfig>;
   memoizedResultFunc: ((resultFuncArgs_0: {
-    processedSeries: import("./useChartSeries.types").ProcessedSeries<keyof import("../../..").ChartsSeriesConfig>;
-    seriesConfig: import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>;
-  }) => import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>) & {
+    processedSeries: import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;
+    seriesConfig: import("../../models/index.js").ChartSeriesConfig<keyof import("../../../index.js").ChartsSeriesConfig>;
+  }) => import("../../models/index.js").ChartSeriesConfig<keyof import("../../../index.js").ChartsSeriesConfig>) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
-  lastResult: () => import("../../models").ChartSeriesConfig<keyof import("../../..").ChartsSeriesConfig>;
+  lastResult: () => import("../../models/index.js").ChartSeriesConfig<keyof import("../../../index.js").ChartsSeriesConfig>;
   dependencies: [ChartRootSelector<UseChartSeriesSignature>];
   recomputations: () => number;
   resetRecomputations: () => void;

package/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.d.ts

@@ -1,13 +1,12 @@
-import { AxisConfig, ScaleName } from "../../../../models/index.js";
-import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, AxisId } from "../../../../models/axis.js";
+import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, AxisId, DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.js";
 import { ChartSeriesType } from "../../../../models/seriesType/config.js";
-import type { ChartDrawingArea } from '../../../../hooks';
+import type { ChartDrawingArea } from "../../../../hooks/index.js";
 import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
-import { DefaultizedAxisConfig, DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
+import { ComputedAxisConfig, DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
 import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
 import { GetZoomAxisFilters, ZoomData } from "./zoom.types.js";
 export type ComputeResult<T extends ChartsAxisProps> = {
-  axis: DefaultizedAxisConfig<T>;
+  axis: ComputedAxisConfig<T>;
   axisIds: string[];
 };
 type ComputeCommonParams<T extends ChartSeriesType = ChartSeriesType> = {
@@ -19,11 +18,11 @@ type ComputeCommonParams<T extends ChartSeriesType = ChartSeriesType> = {
   getFilters?: GetZoomAxisFilters;
 };
 export declare function computeAxisValue<T extends ChartSeriesType>(options: ComputeCommonParams<T> & {
-  axis?: AxisConfig<ScaleName, any, ChartsYAxisProps>[];
+  axis?: DefaultedYAxis[];
   axisDirection: 'y';
 }): ComputeResult<ChartsYAxisProps>;
 export declare function computeAxisValue<T extends ChartSeriesType>(options: ComputeCommonParams<T> & {
-  axis?: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
+  axis?: DefaultedXAxis[];
   axisDirection: 'x';
 }): ComputeResult<ChartsXAxisProps>;
 export {};

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.d.ts

@@ -1,6 +1,13 @@
-import { MakeOptional } from '@mui/x-internals/types';
-import { AxisConfig, ScaleName } from "../../../../models/index.js";
-import { ChartsXAxisProps, ChartsYAxisProps } from "../../../../models/axis.js";
+import { ZoomOptions } from "./zoom.types.js";
+import { XAxis, YAxis } from "../../../../models/index.js";
+import { DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.js";
 import { DatasetType } from "../../../../models/seriesType/config.js";
-export declare function defaultizeXAxis(inAxis: readonly MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[] | undefined, dataset: Readonly<DatasetType> | undefined): Array<AxisConfig<ScaleName, any, ChartsXAxisProps>>;
-export declare function defaultizeYAxis(inAxis: readonly MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[] | undefined, dataset: Readonly<DatasetType> | undefined): Array<AxisConfig<ScaleName, any, ChartsYAxisProps>>;
+type InXAxis = XAxis & {
+  zoom?: boolean | ZoomOptions;
+};
+export declare function defaultizeXAxis(inAxes: readonly InXAxis[] | undefined, dataset: Readonly<DatasetType> | undefined): DefaultedXAxis[];
+type InYAxis = YAxis & {
+  zoom?: boolean | ZoomOptions;
+};
+export declare function defaultizeYAxis(inAxes: readonly InYAxis[] | undefined, dataset: Readonly<DatasetType> | undefined): DefaultedYAxis[];
+export {};

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

@@ -7,15 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultizeXAxis = defaultizeXAxis;
 exports.defaultizeYAxis = defaultizeYAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _constants = require("../../../../constants");
-function defaultizeXAxis(inAxis, dataset) {
+var _constants = require("../../../constants");
+var _defaultizeZoom = require("./defaultizeZoom");
+var _constants2 = require("../../../../constants");
+function defaultizeXAxis(inAxes, dataset) {
   const offsets = {
     top: 0,
     bottom: 0,
     none: 0
   };
-  const inputAxes = inAxis && inAxis.length > 0 ? inAxis : [{
-    id: _constants.DEFAULT_X_AXIS_KEY,
+  const inputAxes = inAxes && inAxes.length > 0 ? inAxes : [{
+    id: _constants2.DEFAULT_X_AXIS_KEY,
     scaleType: 'linear'
   }];
   const parsedAxes = inputAxes.map((axisConfig, index) => {
@@ -24,18 +26,23 @@ function defaultizeXAxis(inAxis, dataset) {
     // The first x-axis is defaultized to the bottom
     const defaultPosition = index === 0 ? 'bottom' : 'none';
     const position = axisConfig.position ?? defaultPosition;
-    const defaultHeight = _constants.DEFAULT_AXIS_SIZE_HEIGHT + (axisConfig.label ? _constants.AXIS_LABEL_DEFAULT_HEIGHT : 0);
+    const defaultHeight = _constants2.DEFAULT_AXIS_SIZE_HEIGHT + (axisConfig.label ? _constants2.AXIS_LABEL_DEFAULT_HEIGHT : 0);
+    const id = axisConfig.id ?? `defaultized-x-axis-${index}`;
     const sharedConfig = (0, _extends2.default)({
-      id: `defaultized-x-axis-${index}`,
       offset: offsets[position]
     }, axisConfig, {
+      id,
       position,
-      height: axisConfig.height ?? defaultHeight
+      height: axisConfig.height ?? defaultHeight,
+      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'x')
     });
 
     // Increment the offset for the next axis
     if (position !== 'none') {
       offsets[position] += sharedConfig.height;
+      if (sharedConfig.zoom?.slider.enabled) {
+        offsets[position] += _constants.ZOOM_SLIDER_SIZE;
+      }
     }
 
     // If `dataKey` is NOT provided
@@ -43,7 +50,7 @@ function defaultizeXAxis(inAxis, dataset) {
       return sharedConfig;
     }
     if (dataset === undefined) {
-      throw new Error(`MUI X: x-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      throw new Error(`MUI X Charts: x-axis uses \`dataKey\` but no \`dataset\` is provided.`);
     }
 
     // If `dataKey` is provided
@@ -53,14 +60,14 @@ function defaultizeXAxis(inAxis, dataset) {
   });
   return parsedAxes;
 }
-function defaultizeYAxis(inAxis, dataset) {
+function defaultizeYAxis(inAxes, dataset) {
   const offsets = {
     right: 0,
     left: 0,
     none: 0
   };
-  const inputAxes = inAxis && inAxis.length > 0 ? inAxis : [{
-    id: _constants.DEFAULT_Y_AXIS_KEY,
+  const inputAxes = inAxes && inAxes.length > 0 ? inAxes : [{
+    id: _constants2.DEFAULT_Y_AXIS_KEY,
     scaleType: 'linear'
   }];
   const parsedAxes = inputAxes.map((axisConfig, index) => {
@@ -69,18 +76,23 @@ function defaultizeYAxis(inAxis, dataset) {
     // The first y-axis is defaultized to the left
     const defaultPosition = index === 0 ? 'left' : 'none';
     const position = axisConfig.position ?? defaultPosition;
-    const defaultWidth = _constants.DEFAULT_AXIS_SIZE_WIDTH + (axisConfig.label ? _constants.AXIS_LABEL_DEFAULT_HEIGHT : 0);
+    const defaultWidth = _constants2.DEFAULT_AXIS_SIZE_WIDTH + (axisConfig.label ? _constants2.AXIS_LABEL_DEFAULT_HEIGHT : 0);
+    const id = axisConfig.id ?? `defaultized-y-axis-${index}`;
     const sharedConfig = (0, _extends2.default)({
-      id: `defaultized-y-axis-${index}`,
       offset: offsets[position]
     }, axisConfig, {
+      id,
       position,
-      width: axisConfig.width ?? defaultWidth
+      width: axisConfig.width ?? defaultWidth,
+      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'y')
     });
 
     // Increment the offset for the next axis
     if (position !== 'none') {
       offsets[position] += sharedConfig.width;
+      if (sharedConfig.zoom?.slider.enabled) {
+        offsets[position] += _constants.ZOOM_SLIDER_SIZE;
+      }
     }
 
     // If `dataKey` is NOT provided
@@ -88,7 +100,7 @@ function defaultizeYAxis(inAxis, dataset) {
       return sharedConfig;
     }
     if (dataset === undefined) {
-      throw new Error(`MUI X: y-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      throw new Error(`MUI X Charts: y-axis uses \`dataKey\` but no \`dataset\` is provided.`);
     }
 
     // If `dataKey` is provided

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

@@ -13,7 +13,10 @@ const defaultZoomOptions = {
   minSpan: 10,
   maxSpan: 100,
   panning: true,
-  filterMode: 'keep'
+  filterMode: 'keep',
+  slider: {
+    enabled: false
+  }
 };
 const defaultizeZoom = (zoom, axisId, axisDirection) => {
   if (!zoom) {
@@ -28,6 +31,8 @@ const defaultizeZoom = (zoom, axisId, axisDirection) => {
   return (0, _extends2.default)({
     axisId,
     axisDirection
-  }, defaultZoomOptions, zoom);
+  }, defaultZoomOptions, zoom, {
+    slider: (0, _extends2.default)({}, defaultZoomOptions.slider, zoom.slider)
+  });
 };
 exports.defaultizeZoom = defaultizeZoom;

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.d.ts

@@ -1,11 +1,11 @@
-import { AxisDefaultized } from "../../../../models/axis.js";
+import { ComputedAxis } from "../../../../models/axis.js";
 /**
  * For a pointer coordinate, this function returns the dataIndex associated.
  * Returns `-1` if no dataIndex matches.
  */
-export declare function getAxisIndex(axisConfig: AxisDefaultized, pointerValue: number): number;
+export declare function getAxisIndex(axisConfig: ComputedAxis, pointerValue: number): number;
 /**
  * For a pointer coordinate, this function returns the value associated.
  * Returns `null` if the coordinate has no value associated.
  */
-export declare function getAxisValue(axisConfig: AxisDefaultized, pointerValue: number, dataIndex: number): number | Date | null;
+export declare function getAxisValue(axisConfig: ComputedAxis, pointerValue: number, dataIndex: number): number | Date | null;

package/internals/plugins/featurePlugins/useChartCartesianAxis/index.d.ts

@@ -1,5 +1,5 @@
 export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
-export type * from './useChartCartesianAxis.types';
+export type * from "./useChartCartesianAxis.types.js";
 export * from "./useChartCartesianAxisRendering.selectors.js";
 export * from "./useChartCartesianAxisLayout.selectors.js";
 export * from "./useChartCartesianInteraction.selectors.js";