@mui/x-charts 8.18.0 → 8.20.0

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

@@ -5,22 +5,24 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getNextSeriesWithData, getPreviousSeriesWithData, seriesHasData } from "./useChartKeyboardNavigation.helpers.js";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 function getNextIndexFocusedItem(state) {
+  const processedSeries = selectorChartSeriesProcessed(state);
   let {
     type,
     seriesId
   } = state.keyboardNavigation.item ?? {};
   if (type === undefined ||
   // @ts-ignore sankey is not in MIT version
-  type === 'sankey' || seriesId === undefined || !seriesHasData(state.series.processedSeries, type, seriesId)) {
-    const nextSeries = getNextSeriesWithData(state.series.processedSeries, type, seriesId);
+  type === 'sankey' || seriesId === undefined || !seriesHasData(processedSeries, type, seriesId)) {
+    const nextSeries = getNextSeriesWithData(processedSeries, type, seriesId);
     if (nextSeries === null) {
       return null;
     }
     type = nextSeries.type;
     seriesId = nextSeries.seriesId;
   }
-  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  const dataLength = processedSeries[type].series[seriesId].data.length;
   return {
     type,
     seriesId,
@@ -28,21 +30,22 @@ function getNextIndexFocusedItem(state) {
   };
 }
 function getPreviousIndexFocusedItem(state) {
+  const processedSeries = selectorChartSeriesProcessed(state);
   let {
     type,
     seriesId
   } = state.keyboardNavigation.item ?? {};
   if (type === undefined ||
   // @ts-ignore sankey is not in MIT version
-  type === 'sankey' || seriesId === undefined || !seriesHasData(state.series.processedSeries, type, seriesId)) {
-    const previousSeries = getPreviousSeriesWithData(state.series.processedSeries, type, seriesId);
+  type === 'sankey' || seriesId === undefined || !seriesHasData(processedSeries, type, seriesId)) {
+    const previousSeries = getPreviousSeriesWithData(processedSeries, type, seriesId);
     if (previousSeries === null) {
       return null;
     }
     type = previousSeries.type;
     seriesId = previousSeries.seriesId;
   }
-  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  const dataLength = processedSeries[type].series[seriesId].data.length;
   return {
     type,
     seriesId,
@@ -50,17 +53,18 @@ function getPreviousIndexFocusedItem(state) {
   };
 }
 function getNextSeriesFocusedItem(state) {
+  const processedSeries = selectorChartSeriesProcessed(state);
   let {
     type,
     seriesId
   } = state.keyboardNavigation.item ?? {};
-  const nextSeries = getNextSeriesWithData(state.series.processedSeries, type, seriesId);
+  const nextSeries = getNextSeriesWithData(processedSeries, type, seriesId);
   if (nextSeries === null) {
     return null; // No series to move the focus to.
   }
   type = nextSeries.type;
   seriesId = nextSeries.seriesId;
-  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  const dataLength = processedSeries[type].series[seriesId].data.length;
   return {
     type,
     seriesId,
@@ -68,17 +72,18 @@ function getNextSeriesFocusedItem(state) {
   };
 }
 function getPreviousSeriesFocusedItem(state) {
+  const processedSeries = selectorChartSeriesProcessed(state);
   let {
     type,
     seriesId
   } = state.keyboardNavigation.item ?? {};
-  const previousSeries = getPreviousSeriesWithData(state.series.processedSeries, type, seriesId);
+  const previousSeries = getPreviousSeriesWithData(processedSeries, type, seriesId);
   if (previousSeries === null) {
     return null; // No series to move the focus to.
   }
   type = previousSeries.type;
   seriesId = previousSeries.seriesId;
-  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  const dataLength = processedSeries[type].series[seriesId].data.length;
   return {
     type,
     seriesId,

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.js

@@ -1,15 +1,15 @@
-import { createSelector } from "../../utils/selectors.js";
+import { createSelector } from '@mui/x-internals/store';
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
 import { selectorChartXAxis, selectorChartYAxis } from "../useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js";
 const selectKeyboardNavigation = state => state.keyboardNavigation;
-export const selectorChartsItemIsFocused = createSelector([selectKeyboardNavigation], (keyboardNavigationState, item) => {
+export const selectorChartsItemIsFocused = createSelector(selectKeyboardNavigation, (keyboardNavigationState, item) => {
   return keyboardNavigationState?.item != null && keyboardNavigationState.item.type === item.seriesType && keyboardNavigationState.item.seriesId === item.seriesId && keyboardNavigationState.item.dataIndex === item.dataIndex;
 });
-export const selectorChartsHasFocusedItem = createSelector([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item != null);
-export const selectorChartsFocusedSeriesType = createSelector([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.type);
-export const selectorChartsFocusedSeriesId = createSelector([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.seriesId);
-export const selectorChartsFocusedDataIndex = createSelector([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.dataIndex);
-export const selectorChartsIsKeyboardNavigationEnabled = createSelector([selectKeyboardNavigation], keyboardNavigationState => !!keyboardNavigationState?.enableKeyboardNavigation);
+export const selectorChartsHasFocusedItem = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item != null);
+export const selectorChartsFocusedSeriesType = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item?.type);
+export const selectorChartsFocusedSeriesId = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item?.seriesId);
+export const selectorChartsFocusedDataIndex = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item?.dataIndex);
+export const selectorChartsIsKeyboardNavigationEnabled = createSelector(selectKeyboardNavigation, keyboardNavigationState => !!keyboardNavigationState?.enableKeyboardNavigation);
 
 /**
  * Selectors to override highlight behavior.
@@ -32,9 +32,9 @@ const createSelectAxisHighlight = direction => (type, seriesId, dataIndex, axis,
     dataIndex
   };
 };
-export const selectorChartsKeyboardXAxisIndex = createSelector([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, selectorChartXAxis, selectorChartSeriesProcessed], createSelectAxisHighlight('x'));
-export const selectorChartsKeyboardYAxisIndex = createSelector([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, selectorChartYAxis, selectorChartSeriesProcessed], createSelectAxisHighlight('y'));
-export const selectorChartsKeyboardItem = createSelector([selectKeyboardNavigation], function selectorChartsKeyboardItem(keyboardState) {
+export const selectorChartsKeyboardXAxisIndex = createSelector(selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, selectorChartXAxis, selectorChartSeriesProcessed, createSelectAxisHighlight('x'));
+export const selectorChartsKeyboardYAxisIndex = createSelector(selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, selectorChartYAxis, selectorChartSeriesProcessed, createSelectAxisHighlight('y'));
+export const selectorChartsKeyboardItem = createSelector(selectKeyboardNavigation, function selectorChartsKeyboardItem(keyboardState) {
   if (keyboardState?.item == null) {
     return null;
   }
@@ -47,6 +47,6 @@ export const selectorChartsKeyboardItem = createSelector([selectKeyboardNavigati
   }
   return keyboardState.item;
 });
-export const selectorChartsKeyboardItemIsDefined = createSelector([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex], function selectorChartsKeyboardItemIsDefined(seriesType, seriesId, dataIndex) {
+export const selectorChartsKeyboardItemIsDefined = createSelector(selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, function selectorChartsKeyboardItemIsDefined(seriesType, seriesId, dataIndex) {
   return seriesId !== undefined && dataIndex !== undefined;
 });

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

@@ -1,30 +1,30 @@
+import { createSelector } from '@mui/x-internals/store';
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
 import { selectorChartSeriesConfig, selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
-import { createSelector } from "../../utils/selectors.js";
 import { computeAxisValue } from "./computeAxisValue.js";
 export const selectorChartPolarAxisState = state => state.polarAxis;
-export const selectorChartRawRotationAxis = createSelector([selectorChartPolarAxisState], axis => axis?.rotation);
-export const selectorChartRawRadiusAxis = createSelector([selectorChartPolarAxisState], axis => axis?.radius);
+export const selectorChartRawRotationAxis = createSelector(selectorChartPolarAxisState, axis => axis?.rotation);
+export const selectorChartRawRadiusAxis = createSelector(selectorChartPolarAxisState, axis => axis?.radius);
 
 /**
  * The only interesting selectors that merge axis data and zoom if provided.
  */
 
-export const selectorChartRotationAxis = createSelector([selectorChartRawRotationAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig], (axis, drawingArea, formattedSeries, seriesConfig) => computeAxisValue({
+export const selectorChartRotationAxis = createSelector(selectorChartRawRotationAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, (axis, drawingArea, formattedSeries, seriesConfig) => computeAxisValue({
   drawingArea,
   formattedSeries,
   axis,
   seriesConfig,
   axisDirection: 'rotation'
 }));
-export const selectorChartRadiusAxis = createSelector([selectorChartRawRadiusAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig], (axis, drawingArea, formattedSeries, seriesConfig) => computeAxisValue({
+export const selectorChartRadiusAxis = createSelector(selectorChartRawRadiusAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, (axis, drawingArea, formattedSeries, seriesConfig) => computeAxisValue({
   drawingArea,
   formattedSeries,
   axis,
   seriesConfig,
   axisDirection: 'radius'
 }));
-export const selectorChartPolarCenter = createSelector([selectorChartDrawingArea], drawingArea => ({
+export const selectorChartPolarCenter = createSelector(selectorChartDrawingArea, drawingArea => ({
   cx: drawingArea.left + drawingArea.width / 2,
   cy: drawingArea.top + drawingArea.height / 2
 }));

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

@@ -1,6 +1,5 @@
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
-import { createSelectorMemoizedWithOptions } from '@mui/x-internals/store';
-import { createSelector } from "../../utils/selectors.js";
+import { createSelector, createSelectorMemoizedWithOptions } from '@mui/x-internals/store';
 import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.js";
 import { generateSvg2rotation } from "./coordinateTransformation.js";
 import { getAxisIndex } from "./getAxisIndex.js";
@@ -19,15 +18,15 @@ function indexGetter(value, axes, ids) {
 /**
  * Helper to get the rotation associated to the interaction coordinate.
  */
-const selectorChartsInteractionRotationAngle = createSelector([selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartPolarCenter], (x, y, center) => {
+const selectorChartsInteractionRotationAngle = createSelector(selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartPolarCenter, (x, y, center) => {
   if (x === null || y === null) {
     return null;
   }
   return generateSvg2rotation(center)(x, y);
 });
-export const selectorChartsInteractionRotationAxisIndex = createSelector([selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisId], (rotation, rotationAxis, id = rotationAxis.axisIds[0]) => rotation === null ? null : indexGetter(rotation, rotationAxis, id));
-export const selectorChartsInteractionRotationAxisIndexes = createSelector([selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisIds], (rotation, rotationAxis, ids = rotationAxis.axisIds) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids));
-export const selectorChartsInteractionRotationAxisValue = createSelector([selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex, optionalGetAxisId], (rotationAxis, rotationIndex, id = rotationAxis.axisIds[0]) => {
+export const selectorChartsInteractionRotationAxisIndex = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisId, (rotation, rotationAxis, id = rotationAxis.axisIds[0]) => rotation === null ? null : indexGetter(rotation, rotationAxis, id));
+export const selectorChartsInteractionRotationAxisIndexes = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisIds, (rotation, rotationAxis, ids = rotationAxis.axisIds) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids));
+export const selectorChartsInteractionRotationAxisValue = createSelector(selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex, optionalGetAxisId, (rotationAxis, rotationIndex, id = rotationAxis.axisIds[0]) => {
   if (rotationIndex === null || rotationIndex === -1 || rotationAxis.axisIds.length === 0) {
     return null;
   }
@@ -37,7 +36,7 @@ export const selectorChartsInteractionRotationAxisValue = createSelector([select
   }
   return data[rotationIndex];
 });
-export const selectorChartsInteractionRotationAxisValues = createSelector([selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndexes, optionalGetAxisIds], (rotationAxis, rotationIndexes, ids = rotationAxis.axisIds) => {
+export const selectorChartsInteractionRotationAxisValues = createSelector(selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndexes, optionalGetAxisIds, (rotationAxis, rotationIndexes, ids = rotationAxis.axisIds) => {
   if (rotationIndexes === null) {
     return null;
   }
@@ -84,4 +83,4 @@ export const selectorChartsInteractionTooltipRadiusAxes = () => {
 /**
  * Return `true` if the axis tooltip has something to display.
  */
-export const selectorChartsInteractionPolarAxisTooltip = createSelector([selectorChartsInteractionTooltipRotationAxes], rotationTooltip => rotationTooltip.length > 0);
+export const selectorChartsInteractionPolarAxisTooltip = createSelector(selectorChartsInteractionTooltipRotationAxes, rotationTooltip => rotationTooltip.length > 0);

package/esm/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.selectors.js

@@ -1,3 +1,3 @@
-import { createSelector } from "../../utils/selectors.js";
+import { createSelector } from '@mui/x-internals/store';
 const selectRootState = state => state;
-export const selectorChartZAxis = createSelector([selectRootState], state => state.zAxis);
+export const selectorChartZAxis = createSelector(selectRootState, state => state.zAxis);

package/esm/internals/plugins/utils/selectors.d.ts

@@ -2,17 +2,4 @@ import type { Selector } from 'reselect';
 import { ChartAnyPluginSignature } from "../models/plugin.js";
 import { ChartState } from "../models/chart.js";
 export type ChartRootSelector<TSignature extends ChartAnyPluginSignature, T extends keyof TSignature['state'] = keyof TSignature['state']> = Selector<ChartState<[TSignature]>, TSignature['state'][T]>;
-export type ChartOptionalRootSelector<TSignature extends ChartAnyPluginSignature> = Selector<ChartState<[], [TSignature]>, TSignature['state'][keyof TSignature['state']] | undefined>;
-type StateFromSelectorList<Selectors extends readonly any[]> = Selectors extends [f: infer F, ...other: infer R] ? StateFromSelector<F> extends StateFromSelectorList<R> ? StateFromSelector<F> : StateFromSelectorList<R> : {};
-type StateFromSelector<T> = T extends ((first: infer F, ...args: any[]) => any) ? F : never;
-type Fn = (...args: any[]) => any;
-type ReturnTypes<FunctionsArray extends readonly Fn[]> = { [Index in keyof FunctionsArray]: FunctionsArray[Index] extends FunctionsArray[number] ? ReturnType<FunctionsArray[Index]> : never };
-type MergeParams<STypes extends readonly unknown[], CTypes extends readonly unknown[]> = STypes['length'] extends 0 ? CTypes : MergeParams<DropFirst<STypes>, DropFirst<CTypes>>;
-type DropFirst<T> = T extends [any, ...infer Xs] ? Xs : [];
-type SelectorArgs<Args extends any[], Selectors extends ReadonlyArray<Selector<any>>, Combiner extends (...args: readonly [...ReturnTypes<Selectors>, ...Args]) => any> = Selectors['length'] extends 0 ? MergeParams<ReturnTypes<Selectors>, Parameters<Combiner>> : [StateFromSelectorList<Selectors>, ...MergeParams<ReturnTypes<Selectors>, Parameters<Combiner>>];
-type ChartSelector<Args extends any[], Selectors extends ReadonlyArray<Selector<any>>, Combiner extends (...args: readonly [...ReturnTypes<Selectors>, ...Args]) => any> = (...args: SelectorArgs<Args, Selectors, Combiner>) => ReturnType<Combiner>;
-/**
- * Method wrapping reselect's createChartSelector to provide caching for chart instances.
- */
-export declare const createSelector: <const Args extends any[], const Selectors extends ReadonlyArray<Selector<any>>, const Combiner extends (...args: readonly [...ReturnTypes<Selectors>, ...Args]) => any>(inputSelectors: [...Selectors], combiner: Combiner) => ChartSelector<Args, Selectors, Combiner>;
-export {};
+export type ChartOptionalRootSelector<TSignature extends ChartAnyPluginSignature> = Selector<ChartState<[], [TSignature]>, TSignature['state'][keyof TSignature['state']] | undefined>;

package/esm/internals/plugins/utils/selectors.js

@@ -1,5 +1 @@
-import { createSelector as internalCreateSelector } from '@mui/x-internals/store';
-/**
- * Method wrapping reselect's createChartSelector to provide caching for chart instances.
- */
-export const createSelector = (inputSelectors, combiner) => internalCreateSelector(...inputSelectors, combiner);
+export {};

package/esm/internals/seriesSelectorOfType.d.ts

@@ -0,0 +1,20 @@
+import { ChartSeriesDefaultized, ChartsSeriesConfig } from "../models/seriesType/config.js";
+import { SeriesId } from "../models/seriesType/common.js";
+import type { ProcessedSeries } from "./plugins/corePlugins/useChartSeries/index.js";
+export declare const selectorAllSeriesOfType: (args_0: import("./plugins/corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("./plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./plugins/corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./plugins/corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof ChartsSeriesConfig> & import("./plugins/corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("./index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("./index.js").ChartStateCacheKey;
+}, seriesType: keyof ChartsSeriesConfig) => import("./index.js").SeriesProcessorResult<"line"> | import("./index.js").SeriesProcessorResult<"bar"> | {
+  series: Record<SeriesId, import("../index.js").DefaultizedScatterSeriesType>;
+  seriesOrder: SeriesId[];
+} | {
+  series: Record<SeriesId, import("../index.js").DefaultizedPieSeriesType>;
+  seriesOrder: SeriesId[];
+} | {
+  series: Record<SeriesId, import("../index.js").DefaultizedRadarSeriesType>;
+  seriesOrder: SeriesId[];
+} | undefined;
+export declare const selectorSeriesOfType: (args_0: import("./plugins/corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("./plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./plugins/corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./plugins/corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof ChartsSeriesConfig> & import("./plugins/corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("./index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("./index.js").ChartStateCacheKey;
+}, seriesType: keyof ChartsSeriesConfig, ids?: SeriesId | SeriesId[] | undefined) => import("../index.js").DefaultizedRadarSeriesType | import("../index.js").DefaultizedLineSeriesType | import("../index.js").DefaultizedBarSeriesType | import("../index.js").DefaultizedScatterSeriesType | import("../index.js").DefaultizedPieSeriesType | (import("../index.js").DefaultizedRadarSeriesType | import("../index.js").DefaultizedLineSeriesType | import("../index.js").DefaultizedBarSeriesType | import("../index.js").DefaultizedScatterSeriesType | import("../index.js").DefaultizedPieSeriesType | undefined)[] | undefined;
+export declare const useAllSeriesOfType: <T extends keyof ChartsSeriesConfig>(seriesType: T) => ProcessedSeries[T];
+export declare const useSeriesOfType: <T extends keyof ChartsSeriesConfig>(seriesType: T, seriesId?: SeriesId | SeriesId[]) => ChartSeriesDefaultized<T> | ChartSeriesDefaultized<T>[] | undefined;

package/esm/internals/seriesSelectorOfType.js

@@ -0,0 +1,38 @@
+import { warnOnce } from '@mui/x-internals/warning';
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { selectorChartSeriesProcessed } from "./plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
+import { useStore } from "./store/useStore.js";
+import { useSelector } from "./store/useSelector.js";
+export const selectorAllSeriesOfType = createSelector(selectorChartSeriesProcessed, (processedSeries, seriesType) => processedSeries[seriesType]);
+export const selectorSeriesOfType = createSelectorMemoized(selectorChartSeriesProcessed, (processedSeries, seriesType, ids) => {
+  if (!ids || Array.isArray(ids) && ids.length === 0) {
+    return processedSeries[seriesType]?.seriesOrder?.map(seriesId => processedSeries[seriesType]?.series[seriesId]) ?? [];
+  }
+  if (!Array.isArray(ids)) {
+    return processedSeries[seriesType]?.series?.[ids];
+  }
+  const result = [];
+  const failedIds = [];
+  for (const id of ids) {
+    const series = processedSeries[seriesType]?.series?.[id];
+    if (series) {
+      result.push(series);
+    } else {
+      failedIds.push(id);
+    }
+  }
+  if (process.env.NODE_ENV !== 'production' && failedIds.length > 0) {
+    const formattedIds = failedIds.map(v => JSON.stringify(v)).join(', ');
+    const fnName = `use${seriesType.charAt(0).toUpperCase()}${seriesType.slice(1)}Series`;
+    warnOnce([`MUI X Charts: The following ids provided to "${fnName}" could not be found: ${formattedIds}.`, `Make sure that they exist and their series are using the "${seriesType}" series type.`]);
+  }
+  return result;
+});
+export const useAllSeriesOfType = seriesType => {
+  const store = useStore();
+  return useSelector(store, selectorAllSeriesOfType, seriesType);
+};
+export const useSeriesOfType = (seriesType, seriesId) => {
+  const store = useStore();
+  return useSelector(store, selectorSeriesOfType, seriesType, seriesId);
+};

package/esm/models/seriesType/config.d.ts

@@ -83,6 +83,6 @@ export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConf
 export type ChartItemIdentifier<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
 export type ChartItemIdentifierWithData<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifierWithData'];
 export type DatasetElementType<T> = {
-  [key: string]: Readonly<T>;
+  [key: string]: T;
 };
-export type DatasetType<T = number | string | Date | null | undefined> = DatasetElementType<T>[];
+export type DatasetType<T = unknown> = DatasetElementType<T>[];

package/esm/utils/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Exported utility functions for the x-charts library.
+ */
+export * from "./niceDomain.js";

package/esm/utils/index.js

@@ -0,0 +1,5 @@
+/**
+ * Exported utility functions for the x-charts library.
+ */
+
+export * from "./niceDomain.js";

package/esm/utils/niceDomain.d.ts

@@ -0,0 +1,20 @@
+import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { ContinuousScaleName } from "../models/index.js";
+/**
+ * Returns a nice domain for the given scale type and domain.
+ * Does not modify the original domain.
+ *
+ * Providing a count improves the nice domain calculation by trying to align tick values to round
+ * numbers or dates.
+ *
+ * For example, if you have a domain of [29, 72] and there are 5 ticks, the nice domain will be
+ * [20, 80] so that the ticks can be at [20, 35, 50, 65, 80].
+ * However, if there are 11 ticks, the nice domain will be [25, 75] so that the ticks can be at
+ * [25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75].
+ *
+ * @param scaleType The type of the scale (e.g., 'linear', 'log', 'time', etc.).
+ * @param domain The domain to be made nicer.
+ * @param count An optional number of ticks to improve the nice domain calculation. Defaults to 5.
+ */
+export declare function niceDomain<Domain extends NumberValue>(scaleType: Exclude<ContinuousScaleName, 'time' | 'utc'>, domain: Iterable<Domain>, count?: number): Domain[];
+export declare function niceDomain<Domain extends NumberValue>(scaleType: 'time' | 'utc', domain: Iterable<Domain>, count?: number): Date[];

package/esm/utils/niceDomain.js

@@ -0,0 +1,24 @@
+import { getScale } from "../internals/getScale.js";
+
+/**
+ * Returns a nice domain for the given scale type and domain.
+ * Does not modify the original domain.
+ *
+ * Providing a count improves the nice domain calculation by trying to align tick values to round
+ * numbers or dates.
+ *
+ * For example, if you have a domain of [29, 72] and there are 5 ticks, the nice domain will be
+ * [20, 80] so that the ticks can be at [20, 35, 50, 65, 80].
+ * However, if there are 11 ticks, the nice domain will be [25, 75] so that the ticks can be at
+ * [25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75].
+ *
+ * @param scaleType The type of the scale (e.g., 'linear', 'log', 'time', etc.).
+ * @param domain The domain to be made nicer.
+ * @param count An optional number of ticks to improve the nice domain calculation. Defaults to 5.
+ */
+
+export function niceDomain(scaleType, domain, count = 5) {
+  const scale = getScale(scaleType, domain, [0, 1]);
+  scale.nice(count);
+  return scale.domain();
+}

package/hooks/useBarSeries.js

@@ -6,10 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useBarSeries = useBarSeries;
 exports.useBarSeriesContext = useBarSeriesContext;
-var _createSeriesSelectorOfType = require("../internals/createSeriesSelectorOfType");
-const useSelectorSeries = (0, _createSeriesSelectorOfType.createSeriesSelectorsOfType)('bar');
-const useSelectorSeriesContext = (0, _createSeriesSelectorOfType.createAllSeriesSelectorOfType)('bar');
-
+var _seriesSelectorOfType = require("../internals/seriesSelectorOfType");
 /**
  * Get access to the internal state of bar series.
  *
@@ -33,7 +30,7 @@ const useSelectorSeriesContext = (0, _createSeriesSelectorOfType.createAllSeries
  */
 
 function useBarSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return (0, _seriesSelectorOfType.useSeriesOfType)('bar', seriesIds);
 }
 
 /**
@@ -45,5 +42,5 @@ function useBarSeries(seriesIds) {
  * @returns the bar series
  */
 function useBarSeriesContext() {
-  return useSelectorSeriesContext();
+  return (0, _seriesSelectorOfType.useAllSeriesOfType)('bar');
 }

package/hooks/useInteractionItemProps.d.ts

@@ -9,11 +9,6 @@ export declare const useInteractionItemProps: (data: SeriesItemIdentifierWithDat
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;
 };
-export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData[], skip?: boolean) => {
-  onPointerEnter?: () => void;
-  onPointerLeave?: () => void;
-  onPointerDown?: (event: React.PointerEvent) => void;
-}[];
 export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature]>, item: ChartItemIdentifierWithData<ChartSeriesType>): {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;

package/hooks/useInteractionItemProps.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getInteractionItemProps = getInteractionItemProps;
-exports.useInteractionItemProps = exports.useInteractionAllItemProps = void 0;
+exports.useInteractionItemProps = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _ChartProvider = require("../context/ChartProvider");
@@ -48,18 +48,6 @@ const useInteractionItemProps = (data, skip) => {
   }, [skip, onPointerEnter, onPointerLeave]);
 };
 exports.useInteractionItemProps = useInteractionItemProps;
-const useInteractionAllItemProps = (data, skip) => {
-  const {
-    instance
-  } = (0, _ChartProvider.useChartContext)();
-  const results = React.useMemo(() => {
-    return data.map(item => {
-      return skip ? {} : getInteractionItemProps(instance, item);
-    });
-  }, [data, instance, skip]);
-  return results;
-};
-exports.useInteractionAllItemProps = useInteractionAllItemProps;
 function getInteractionItemProps(instance, item) {
   function onPointerEnter() {
     if (!item) {

package/hooks/useLineSeries.js

@@ -6,10 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useLineSeries = useLineSeries;
 exports.useLineSeriesContext = useLineSeriesContext;
-var _createSeriesSelectorOfType = require("../internals/createSeriesSelectorOfType");
-const useSelectorSeries = (0, _createSeriesSelectorOfType.createSeriesSelectorsOfType)('line');
-const useSelectorSeriesContext = (0, _createSeriesSelectorOfType.createAllSeriesSelectorOfType)('line');
-
+var _seriesSelectorOfType = require("../internals/seriesSelectorOfType");
 /**
  * Get access to the internal state of line series.
  *
@@ -33,7 +30,7 @@ const useSelectorSeriesContext = (0, _createSeriesSelectorOfType.createAllSeries
  */
 
 function useLineSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return (0, _seriesSelectorOfType.useSeriesOfType)('line', seriesIds);
 }
 
 /**
@@ -45,5 +42,5 @@ function useLineSeries(seriesIds) {
  * @returns the line series
  */
 function useLineSeriesContext() {
-  return useSelectorSeriesContext();
+  return (0, _seriesSelectorOfType.useAllSeriesOfType)('line');
 }

package/hooks/usePieSeries.js

@@ -6,10 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.usePieSeries = usePieSeries;
 exports.usePieSeriesContext = usePieSeriesContext;
-var _createSeriesSelectorOfType = require("../internals/createSeriesSelectorOfType");
-const useSelectorSeries = (0, _createSeriesSelectorOfType.createSeriesSelectorsOfType)('pie');
-const useSelectorSeriesContext = (0, _createSeriesSelectorOfType.createAllSeriesSelectorOfType)('pie');
-
+var _seriesSelectorOfType = require("../internals/seriesSelectorOfType");
 /**
  * Get access to the internal state of pie series.
  *
@@ -33,7 +30,7 @@ const useSelectorSeriesContext = (0, _createSeriesSelectorOfType.createAllSeries
  */
 
 function usePieSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return (0, _seriesSelectorOfType.useSeriesOfType)('pie', seriesIds);
 }
 
 /**
@@ -44,5 +41,5 @@ function usePieSeries(seriesIds) {
  * @returns the pie series
  */
 function usePieSeriesContext() {
-  return useSelectorSeriesContext();
+  return (0, _seriesSelectorOfType.useAllSeriesOfType)('pie');
 }

package/hooks/useRadarSeries.js

@@ -6,10 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useRadarSeries = useRadarSeries;
 exports.useRadarSeriesContext = useRadarSeriesContext;
-var _createSeriesSelectorOfType = require("../internals/createSeriesSelectorOfType");
-const useSelectorSeries = (0, _createSeriesSelectorOfType.createSeriesSelectorsOfType)('radar');
-const useSelectorSeriesContext = (0, _createSeriesSelectorOfType.createAllSeriesSelectorOfType)('radar');
-
+var _seriesSelectorOfType = require("../internals/seriesSelectorOfType");
 /**
  * Get access to the internal state of radar series.
  *
@@ -33,7 +30,7 @@ const useSelectorSeriesContext = (0, _createSeriesSelectorOfType.createAllSeries
  */
 
 function useRadarSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return (0, _seriesSelectorOfType.useSeriesOfType)('radar', seriesIds);
 }
 
 /**
@@ -44,5 +41,5 @@ function useRadarSeries(seriesIds) {
  * @returns the radar series
  */
 function useRadarSeriesContext() {
-  return useSelectorSeriesContext();
+  return (0, _seriesSelectorOfType.useAllSeriesOfType)('radar');
 }

package/hooks/useScatterSeries.js

@@ -6,10 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useScatterSeries = useScatterSeries;
 exports.useScatterSeriesContext = useScatterSeriesContext;
-var _createSeriesSelectorOfType = require("../internals/createSeriesSelectorOfType");
-const useSelectorSeries = (0, _createSeriesSelectorOfType.createSeriesSelectorsOfType)('scatter');
-const useSelectorSeriesContext = (0, _createSeriesSelectorOfType.createAllSeriesSelectorOfType)('scatter');
-
+var _seriesSelectorOfType = require("../internals/seriesSelectorOfType");
 /**
  * Get access to the internal state of scatter series.
  *
@@ -33,7 +30,7 @@ const useSelectorSeriesContext = (0, _createSeriesSelectorOfType.createAllSeries
  */
 
 function useScatterSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return (0, _seriesSelectorOfType.useSeriesOfType)('scatter', seriesIds);
 }
 
 /**
@@ -44,5 +41,5 @@ function useScatterSeries(seriesIds) {
  * @returns the scatter series
  */
 function useScatterSeriesContext() {
-  return useSelectorSeriesContext();
+  return (0, _seriesSelectorOfType.useAllSeriesOfType)('scatter');
 }

package/hooks/useTicks.js

@@ -17,6 +17,9 @@ const offsetRatio = {
   end: 1,
   middle: 0.5
 };
+function getTickPosition(scale, value, placement) {
+  return scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[placement] * scale.step();
+}
 function getTicks(options) {
   const {
     scale,
@@ -35,7 +38,13 @@ function getTicks(options) {
     if (scale.bandwidth() > 0) {
       // scale type = 'band'
       const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
-      return [...filteredDomain.map(value => {
+      const isReversed = scale.range()[0] > scale.range()[1];
+      // Indexes are inclusive regarding the entire band.
+      const startIndex = filteredDomain.findIndex(value => {
+        return isInside(getTickPosition(scale, value, isReversed ? 'start' : 'end'));
+      });
+      const endIndex = filteredDomain.findLastIndex(value => isInside(getTickPosition(scale, value, isReversed ? 'end' : 'start')));
+      return [...filteredDomain.slice(startIndex, endIndex + 1).map(value => {
         const defaultTickLabel = `${value}`;
         return {
           value,
@@ -45,10 +54,10 @@ function getTicks(options) {
             tickNumber,
             defaultTickLabel
           }) ?? defaultTickLabel,
-          offset: scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step(),
+          offset: getTickPosition(scale, value, tickPlacement),
           labelOffset: tickLabelPlacement === 'tick' ? 0 : scale.step() * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement])
         };
-      }), ...(tickPlacement === 'extremities' ? [{
+      }), ...(tickPlacement === 'extremities' && endIndex === domain.length - 1 && isInside(scale.range()[1]) ? [{
         formattedValue: undefined,
         offset: scale.range()[1],
         labelOffset: 0

package/index.d.ts

@@ -29,4 +29,5 @@ export type { ChartContainerProps } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";
 export * from "./ChartsWrapper/index.js";
-export * from "./ChartsBrushOverlay/index.js";
+export * from "./ChartsBrushOverlay/index.js";
+export * from "./utils/index.js";