@mui/x-charts 8.18.0 → 8.19.0

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").DefaultizedLineSeriesType | import("../index.js").DefaultizedBarSeriesType | import("../index.js").DefaultizedRadarSeriesType | import("../index.js").DefaultizedScatterSeriesType | import("../index.js").DefaultizedPieSeriesType | (import("../index.js").DefaultizedLineSeriesType | import("../index.js").DefaultizedBarSeriesType | import("../index.js").DefaultizedRadarSeriesType | 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/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/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";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.18.0
+ * @mui/x-charts v8.19.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -379,4 +379,16 @@ Object.keys(_ChartsBrushOverlay).forEach(function (key) {
       return _ChartsBrushOverlay[key];
     }
   });
+});
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
 });

package/internals/domUtils.js

@@ -96,11 +96,7 @@ const getStringSize = (text, style = {}) => {
     });
     measurementElem.textContent = str;
     measurementSpanContainer.replaceChildren(measurementElem);
-    const rect = measurementElem.getBoundingClientRect();
-    const result = {
-      width: rect.width,
-      height: rect.height
-    };
+    const result = measureSVGTextElement(measurementElem);
     stringCache.set(cacheKey, result);
     if (stringCache.size + 1 > MAX_CACHE_NUM) {
       stringCache.clear();
@@ -145,21 +141,17 @@ function batchMeasureStrings(texts, style = {}) {
     measurementContainer.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, measurementSpanStyle[styleKey]);
     return styleKey;
   });
-  const measurementElems = [];
+  const measurementElements = [];
   for (const string of textToMeasure) {
     const measurementElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
     measurementElem.textContent = `${string}`;
-    measurementElems.push(measurementElem);
+    measurementElements.push(measurementElem);
   }
-  measurementContainer.replaceChildren(...measurementElems);
+  measurementContainer.replaceChildren(...measurementElements);
   for (let i = 0; i < textToMeasure.length; i += 1) {
     const text = textToMeasure[i];
-    const measurementSpan = measurementContainer.children[i];
-    const rect = measurementSpan.getBoundingClientRect();
-    const result = {
-      width: rect.width,
-      height: rect.height
-    };
+    const measurementElem = measurementContainer.children[i];
+    const result = measureSVGTextElement(measurementElem);
     const cacheKey = `${text}-${styleString}`;
     stringCache.set(cacheKey, result);
     sizeMap.set(text, result);
@@ -173,6 +165,30 @@ function batchMeasureStrings(texts, style = {}) {
   }
   return sizeMap;
 }
+
+/**
+ * Measures an SVG text element using getBBox() with fallback to getBoundingClientRect()
+ * @param element SVG text element to measure
+ * @returns width and height of the text element
+ */
+function measureSVGTextElement(element) {
+  // getBBox() is more reliable across browsers for SVG elements
+  try {
+    const result = element.getBBox();
+    return {
+      width: result.width,
+      height: result.height
+    };
+  } catch {
+    // Fallback to getBoundingClientRect if getBBox fails
+    // This can happen in tests
+    const result = element.getBoundingClientRect();
+    return {
+      width: result.width,
+      height: result.height
+    };
+  }
+}
 let measurementContainer = null;
 
 /**

package/internals/getScale.d.ts

@@ -1,2 +1,3 @@
+import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { ContinuousScaleName, D3ContinuousScale } from "../models/axis.js";
-export declare function getScale(scaleType: ContinuousScaleName, domain: readonly any[], range: readonly any[]): D3ContinuousScale;
+export declare function getScale<Domain extends NumberValue = any, Range = any>(scaleType: ContinuousScaleName, domain: Iterable<Domain>, range: readonly Range[]): D3ContinuousScale<Range, Range>;

package/internals/index.d.ts

@@ -15,7 +15,7 @@ export { useBarPlotData } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
-export * from "./createSeriesSelectorOfType.js";
+export * from "./seriesSelectorOfType.js";
 export * from "./plugins/corePlugins/useChartId/index.js";
 export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";

package/internals/index.js

@@ -182,15 +182,15 @@ Object.keys(_useChartDataProviderProps).forEach(function (key) {
     }
   });
 });
-var _createSeriesSelectorOfType = require("./createSeriesSelectorOfType");
-Object.keys(_createSeriesSelectorOfType).forEach(function (key) {
+var _seriesSelectorOfType = require("./seriesSelectorOfType");
+Object.keys(_seriesSelectorOfType).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _createSeriesSelectorOfType[key]) return;
+  if (key in exports && exports[key] === _seriesSelectorOfType[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _createSeriesSelectorOfType[key];
+      return _seriesSelectorOfType[key];
     }
   });
 });

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

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorChartSkipAnimation = void 0;
-var _selectors = require("../../utils/selectors");
+var _store = require("@mui/x-internals/store");
 const selectorChartAnimationState = state => state.animation;
-const selectorChartSkipAnimation = exports.selectorChartSkipAnimation = (0, _selectors.createSelector)([selectorChartAnimationState], state => state.skip || state.skipAnimationRequests > 0);
+const selectorChartSkipAnimation = exports.selectorChartSkipAnimation = (0, _store.createSelector)(selectorChartAnimationState, state => state.skip || state.skipAnimationRequests > 0);

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.selectorChartSvgWidth = exports.selectorChartSvgHeight = exports.selectorChartPropsWidth = exports.selectorChartPropsHeight = exports.selectorChartMargin = exports.selectorChartDrawingArea = exports.selectorChartDimensionsState = void 0;
 var _store = require("@mui/x-internals/store");
-var _selectors = require("../../utils/selectors");
 var _useChartAxisSize = require("../../featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors");
 const selectorChartDimensionsState = state => state.dimensions;
 exports.selectorChartDimensionsState = selectorChartDimensionsState;
@@ -34,7 +33,7 @@ const selectorChartDrawingArea = exports.selectorChartDrawingArea = (0, _store.c
     bottom: marginBottom + axisSizeBottom
   };
 });
-const selectorChartSvgWidth = exports.selectorChartSvgWidth = (0, _selectors.createSelector)([selectorChartDimensionsState], dimensionsState => dimensionsState.width);
-const selectorChartSvgHeight = exports.selectorChartSvgHeight = (0, _selectors.createSelector)([selectorChartDimensionsState], dimensionsState => dimensionsState.height);
-const selectorChartPropsWidth = exports.selectorChartPropsWidth = (0, _selectors.createSelector)([selectorChartDimensionsState], dimensionsState => dimensionsState.propsWidth);
-const selectorChartPropsHeight = exports.selectorChartPropsHeight = (0, _selectors.createSelector)([selectorChartDimensionsState], dimensionsState => dimensionsState.propsHeight);
+const selectorChartSvgWidth = exports.selectorChartSvgWidth = (0, _store.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.width);
+const selectorChartSvgHeight = exports.selectorChartSvgHeight = (0, _store.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.height);
+const selectorChartPropsWidth = exports.selectorChartPropsWidth = (0, _store.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.propsWidth);
+const selectorChartPropsHeight = exports.selectorChartPropsHeight = (0, _store.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.propsHeight);

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorPreferStrictDomainInLineCharts = exports.selectorChartExperimentalFeaturesState = void 0;
-var _selectors = require("../../utils/selectors");
+var _store = require("@mui/x-internals/store");
 const selectorChartExperimentalFeaturesState = state => state.experimentalFeatures;
 exports.selectorChartExperimentalFeaturesState = selectorChartExperimentalFeaturesState;
-const selectorPreferStrictDomainInLineCharts = exports.selectorPreferStrictDomainInLineCharts = (0, _selectors.createSelector)([selectorChartExperimentalFeaturesState], features => Boolean(features?.preferStrictDomainInLineCharts));
+const selectorPreferStrictDomainInLineCharts = exports.selectorPreferStrictDomainInLineCharts = (0, _store.createSelector)(selectorChartExperimentalFeaturesState, features => Boolean(features?.preferStrictDomainInLineCharts));

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorChartId = void 0;
-var _selectors = require("../../utils/selectors");
+var _store = require("@mui/x-internals/store");
 const selectorChartIdState = state => state.id;
 
 /**
@@ -12,4 +12,4 @@ const selectorChartIdState = state => state.id;
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-const selectorChartId = exports.selectorChartId = (0, _selectors.createSelector)([selectorChartIdState], idState => idState.chartId);
+const selectorChartId = exports.selectorChartId = (0, _store.createSelector)(selectorChartIdState, idState => idState.chartId);

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.js

@@ -50,6 +50,9 @@ const useChartInteractionListener = ({
           name: 'zoomTurnWheel',
           sensitivity: 0.01,
           initialDelta: 1
+        }), new _core.TurnWheelGesture({
+          name: 'panTurnWheel',
+          sensitivity: 0.5
         }), new _core.TapAndDragGesture({
           name: 'zoomTapAndDrag',
           dragThreshold: 10
@@ -69,7 +72,7 @@ const useChartInteractionListener = ({
     if (!svg || !gestureManager) {
       return undefined;
     }
-    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag', 'zoomPressAndDrag', 'zoomDoubleTapReset', 'brush'], svg);
+    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'panTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag', 'zoomPressAndDrag', 'zoomDoubleTapReset', 'brush'], svg);
     return () => {
       // Cleanup gesture manager
       gestureManager.unregisterAllGestures(svg);

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

@@ -1,6 +1,6 @@
 import { MoveEvent, PanEvent, PanGestureOptions, PinchEvent, PinchGestureOptions, PressEvent, TapEvent, TurnWheelEvent, type PressAndDragEvent, type PressAndDragGestureOptions, type TapAndDragEvent, type TapAndDragGestureOptions, type TapGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
 import { ChartPluginSignature } from "../../models/index.js";
-export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'zoomTurnWheel' | 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd' | 'zoomPressAndDrag' | 'zoomPressAndDragStart' | 'zoomPressAndDragEnd' | 'move' | 'moveStart' | 'moveEnd' | 'tap' | 'quickPress' | 'quickPressEnd' | 'zoomDoubleTapReset' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd';
+export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'zoomTurnWheel' | 'panTurnWheel' | 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd' | 'zoomPressAndDrag' | 'zoomPressAndDragStart' | 'zoomPressAndDragEnd' | 'move' | 'moveStart' | 'moveEnd' | 'tap' | 'quickPress' | 'quickPressEnd' | 'zoomDoubleTapReset' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd';
 export type InteractionListenerResult = {
   cleanup: () => void;
 };
@@ -8,6 +8,7 @@ export type AddInteractionListener = {
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd', callback: (event: PanEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd', callback: (event: PinchEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomTurnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'panTurnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'move' | 'moveStart' | 'moveEnd', callback: (event: MoveEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'tap' | 'zoomDoubleTapReset', callback: (event: TapEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'quickPress' | 'quickPressEnd', callback: (event: PressEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
@@ -18,6 +19,7 @@ export type UpdateZoomInteractionListeners = {
   (interaction: 'zoomPan', options?: Omit<PanGestureOptions<'zoomPan'>, 'name'>): void;
   (interaction: 'zoomPinch', options?: Omit<PinchGestureOptions<'zoomPinch'>, 'name'>): void;
   (interaction: 'zoomTurnWheel', options?: Omit<TurnWheelGestureOptions<'zoomTurnWheel'>, 'name'>): void;
+  (interaction: 'panTurnWheel', options?: Omit<TurnWheelGestureOptions<'panTurnWheel'>, 'name'>): void;
   (interaction: 'zoomTapAndDrag', options?: Omit<TapAndDragGestureOptions<'zoomTapAndDrag'>, 'name'>): void;
   (interaction: 'zoomPressAndDrag', options?: Omit<PressAndDragGestureOptions<'zoomPressAndDrag'>, 'name'>): void;
   (interaction: 'zoomDoubleTapReset', options?: Omit<TapGestureOptions<'zoomDoubleTapReset'>, 'name'>): void;

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

@@ -14,4 +14,4 @@ export declare const selectorChartSeriesConfig: (args_0: import("../useChartId/u
  */
 export declare const selectorChartDataset: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => readonly import("../../../index.js").DatasetElementType<string | number | Date | null | undefined>[] | undefined;
+}) => readonly import("../../../index.js").DatasetElementType<unknown>[] | undefined;