@mui/x-charts 8.18.0 → 8.20.0

package/esm/PieChart/PieArcPlot.js

@@ -40,9 +40,11 @@ function PieArcPlot(props) {
     data
   });
   const {
-    dataIndex: focusedIndex = -1
+    dataIndex,
+    seriesId,
+    seriesType
   } = useFocusedItem() ?? {};
-  const focusedItem = focusedIndex !== -1 ? transformedData[focusedIndex] : null;
+  const focusedItem = dataIndex !== undefined && seriesId === id && seriesType === 'pie' ? transformedData[dataIndex] : null;
   if (data.length === 0) {
     return null;
   }
@@ -83,7 +85,7 @@ function PieArcPlot(props) {
       stroke: (theme.vars ?? theme).palette.text.primary,
       id: id,
       className: pieArcClasses.focusIndicator,
-      dataIndex: focusedIndex,
+      dataIndex: focusedItem.dataIndex,
       isFaded: false,
       isHighlighted: false,
       isFocused: false,

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -8,7 +8,7 @@ import { useRadarSeriesData } from "./useRadarSeriesData.js";
 import { getAreaPath } from "./getAreaPath.js";
 import { useUtilityClasses } from "./radarSeriesPlotClasses.js";
 import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
-import { useInteractionAllItemProps } from "../../hooks/useInteractionItemProps.js";
+import { useInteractionAllItemProps } from "./useInteractionAllItemProps.js";
 import { useRadarRotationIndex } from "./useRadarRotationIndex.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPathProps(params) {

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.js";
-import { useInteractionAllItemProps } from "../../hooks/useInteractionItemProps.js";
+import { useInteractionAllItemProps } from "./useInteractionAllItemProps.js";
 import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
 import { useUtilityClasses } from "./radarSeriesPlotClasses.js";
 import { getPathProps } from "./RadarSeriesArea.js";

package/esm/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SeriesItemIdentifierWithData } from "../../models/seriesType/index.js";
+export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData<"radar">[], skip?: boolean) => {
+  onPointerEnter?: () => void;
+  onPointerLeave?: () => void;
+  onPointerDown?: (event: React.PointerEvent) => void;
+}[];

package/esm/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
+import { getInteractionItemProps } from "../../hooks/useInteractionItemProps.js";
+export const useInteractionAllItemProps = (data, skip) => {
+  const {
+    instance
+  } = useChartContext();
+  const results = React.useMemo(() => {
+    return data.map(item => {
+      return skip ? {} : getInteractionItemProps(instance, {
+        type: 'radar',
+        seriesId: item.seriesId,
+        dataIndex: item.dataIndex
+      });
+    });
+  }, [data, instance, skip]);
+  return results;
+};

package/esm/hooks/useBarSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createSeriesSelectorsOfType, createAllSeriesSelectorOfType } from "../internals/createSeriesSelectorOfType.js";
-const useSelectorSeries = createSeriesSelectorsOfType('bar');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('bar');
+import { useSeriesOfType, useAllSeriesOfType } from "../internals/seriesSelectorOfType.js";
 
 /**
  * Get access to the internal state of bar series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('bar');
  */
 
 export function useBarSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('bar', seriesIds);
 }
 
 /**
@@ -39,5 +37,5 @@ export function useBarSeries(seriesIds) {
  * @returns the bar series
  */
 export function useBarSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('bar');
 }

package/esm/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/esm/hooks/useInteractionItemProps.js

@@ -39,17 +39,6 @@ export const useInteractionItemProps = (data, skip) => {
     onPointerDown
   }, [skip, onPointerEnter, onPointerLeave]);
 };
-export const useInteractionAllItemProps = (data, skip) => {
-  const {
-    instance
-  } = useChartContext();
-  const results = React.useMemo(() => {
-    return data.map(item => {
-      return skip ? {} : getInteractionItemProps(instance, item);
-    });
-  }, [data, instance, skip]);
-  return results;
-};
 export function getInteractionItemProps(instance, item) {
   function onPointerEnter() {
     if (!item) {

package/esm/hooks/useLineSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createSeriesSelectorsOfType, createAllSeriesSelectorOfType } from "../internals/createSeriesSelectorOfType.js";
-const useSelectorSeries = createSeriesSelectorsOfType('line');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('line');
+import { useSeriesOfType, useAllSeriesOfType } from "../internals/seriesSelectorOfType.js";
 
 /**
  * Get access to the internal state of line series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('line');
  */
 
 export function useLineSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('line', seriesIds);
 }
 
 /**
@@ -39,5 +37,5 @@ export function useLineSeries(seriesIds) {
  * @returns the line series
  */
 export function useLineSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('line');
 }

package/esm/hooks/usePieSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createSeriesSelectorsOfType, createAllSeriesSelectorOfType } from "../internals/createSeriesSelectorOfType.js";
-const useSelectorSeries = createSeriesSelectorsOfType('pie');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('pie');
+import { useSeriesOfType, useAllSeriesOfType } from "../internals/seriesSelectorOfType.js";
 
 /**
  * Get access to the internal state of pie series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('pie');
  */
 
 export function usePieSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('pie', seriesIds);
 }
 
 /**
@@ -38,5 +36,5 @@ export function usePieSeries(seriesIds) {
  * @returns the pie series
  */
 export function usePieSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('pie');
 }

package/esm/hooks/useRadarSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createSeriesSelectorsOfType, createAllSeriesSelectorOfType } from "../internals/createSeriesSelectorOfType.js";
-const useSelectorSeries = createSeriesSelectorsOfType('radar');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('radar');
+import { useSeriesOfType, useAllSeriesOfType } from "../internals/seriesSelectorOfType.js";
 
 /**
  * Get access to the internal state of radar series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('radar');
  */
 
 export function useRadarSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('radar', seriesIds);
 }
 
 /**
@@ -38,5 +36,5 @@ export function useRadarSeries(seriesIds) {
  * @returns the radar series
  */
 export function useRadarSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('radar');
 }

package/esm/hooks/useScatterSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createSeriesSelectorsOfType, createAllSeriesSelectorOfType } from "../internals/createSeriesSelectorOfType.js";
-const useSelectorSeries = createSeriesSelectorsOfType('scatter');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('scatter');
+import { useSeriesOfType, useAllSeriesOfType } from "../internals/seriesSelectorOfType.js";
 
 /**
  * Get access to the internal state of scatter series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('scatter');
  */
 
 export function useScatterSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('scatter', seriesIds);
 }
 
 /**
@@ -38,5 +36,5 @@ export function useScatterSeries(seriesIds) {
  * @returns the scatter series
  */
 export function useScatterSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('scatter');
 }

package/esm/hooks/useTicks.js

@@ -10,6 +10,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();
+}
 export function getTicks(options) {
   const {
     scale,
@@ -28,7 +31,13 @@ export 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,
@@ -38,10 +47,10 @@ export 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/esm/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/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.18.0
+ * @mui/x-charts v8.20.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -36,6 +36,7 @@ export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";
 export * from "./ChartsWrapper/index.js";
 export * from "./ChartsBrushOverlay/index.js";
+export * from "./utils/index.js";
 
 // Locales should be imported from `@mui/x-charts/locales`
 // export * from './locales';

package/esm/internals/domUtils.js

@@ -86,11 +86,7 @@ export 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();
@@ -134,21 +130,17 @@ export 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);
@@ -162,6 +154,30 @@ export 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/esm/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/esm/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/esm/internals/index.js

@@ -18,7 +18,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";
 
 // plugins
 export * from "./plugins/corePlugins/useChartId/index.js";

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

@@ -1,3 +1,3 @@
-import { createSelector } from "../../utils/selectors.js";
+import { createSelector } from '@mui/x-internals/store';
 const selectorChartAnimationState = state => state.animation;
-export const selectorChartSkipAnimation = createSelector([selectorChartAnimationState], state => state.skip || state.skipAnimationRequests > 0);
+export const selectorChartSkipAnimation = createSelector(selectorChartAnimationState, state => state.skip || state.skipAnimationRequests > 0);

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

@@ -1,5 +1,4 @@
-import { createSelectorMemoized } from '@mui/x-internals/store';
-import { createSelector } from "../../utils/selectors.js";
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
 import { selectorChartAxisSizes } from "../../featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.js";
 export const selectorChartDimensionsState = state => state.dimensions;
 export const selectorChartMargin = state => state.dimensions.margin;
@@ -26,7 +25,7 @@ export const selectorChartDrawingArea = createSelectorMemoized(selectorChartDime
     bottom: marginBottom + axisSizeBottom
   };
 });
-export const selectorChartSvgWidth = createSelector([selectorChartDimensionsState], dimensionsState => dimensionsState.width);
-export const selectorChartSvgHeight = createSelector([selectorChartDimensionsState], dimensionsState => dimensionsState.height);
-export const selectorChartPropsWidth = createSelector([selectorChartDimensionsState], dimensionsState => dimensionsState.propsWidth);
-export const selectorChartPropsHeight = createSelector([selectorChartDimensionsState], dimensionsState => dimensionsState.propsHeight);
+export const selectorChartSvgWidth = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.width);
+export const selectorChartSvgHeight = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.height);
+export const selectorChartPropsWidth = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.propsWidth);
+export const selectorChartPropsHeight = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.propsHeight);

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

@@ -1,3 +1,3 @@
-import { createSelector } from "../../utils/selectors.js";
+import { createSelector } from '@mui/x-internals/store';
 export const selectorChartExperimentalFeaturesState = state => state.experimentalFeatures;
-export const selectorPreferStrictDomainInLineCharts = createSelector([selectorChartExperimentalFeaturesState], features => Boolean(features?.preferStrictDomainInLineCharts));
+export const selectorPreferStrictDomainInLineCharts = createSelector(selectorChartExperimentalFeaturesState, features => Boolean(features?.preferStrictDomainInLineCharts));

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

@@ -1,4 +1,4 @@
-import { createSelector } from "../../utils/selectors.js";
+import { createSelector } from '@mui/x-internals/store';
 const selectorChartIdState = state => state.id;
 
 /**
@@ -6,4 +6,4 @@ const selectorChartIdState = state => state.id;
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-export const selectorChartId = createSelector([selectorChartIdState], idState => idState.chartId);
+export const selectorChartId = createSelector(selectorChartIdState, idState => idState.chartId);

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

@@ -44,6 +44,9 @@ export const useChartInteractionListener = ({
           name: 'zoomTurnWheel',
           sensitivity: 0.01,
           initialDelta: 1
+        }), new TurnWheelGesture({
+          name: 'panTurnWheel',
+          sensitivity: 0.5
         }), new TapAndDragGesture({
           name: 'zoomTapAndDrag',
           dragThreshold: 10
@@ -63,7 +66,7 @@ export 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/esm/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/esm/internals/plugins/corePlugins/useChartSeries/processSeries.d.ts

@@ -1,23 +1,29 @@
 import { AllSeriesType } from "../../../../models/seriesType/index.js";
 import { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
 import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
-import { SeriesProcessorResult } from "../../models/seriesConfig/seriesProcessor.types.js";
+import { DefaultizedSeriesGroups, ProcessedSeries } from "./useChartSeries.types.js";
 /**
- * This methods is the interface between what the developer is providing and what components receives
- * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
- * It also add defaultized values such as the ids, colors
+ * This method groups series by type and adds defaultized values such as the ids and colors.
+ * It does NOT apply the series processors - that happens in a selector.
  * @param series The array of series provided by the developer
  * @param colors The color palette used to defaultize series colors
- * @returns An object structuring all the series by type.
+ * @returns An object structuring all the series by type with default values.
  */
-export declare const preprocessSeries: <TSeriesType extends ChartSeriesType>({
+export declare const defaultizeSeries: <TSeriesType extends ChartSeriesType>({
   series,
   colors,
-  seriesConfig,
-  dataset
+  seriesConfig
 }: {
   series: Readonly<AllSeriesType<TSeriesType>[]>;
   colors: readonly string[];
   seriesConfig: ChartSeriesConfig<TSeriesType>;
-  dataset?: Readonly<DatasetType>;
-}) => { [type in TSeriesType]?: SeriesProcessorResult<TSeriesType> | undefined };
+}) => DefaultizedSeriesGroups<TSeriesType>;
+/**
+ * Applies series processors to the defaultized series groups.
+ * This should be called in a selector to compute processed series on-demand.
+ * @param defaultizedSeries The defaultized series groups
+ * @param seriesConfig The series configuration
+ * @param dataset The optional dataset
+ * @returns Processed series with all transformations applied
+ */
+export declare const applySeriesProcessors: <TSeriesType extends ChartSeriesType>(defaultizedSeries: DefaultizedSeriesGroups<TSeriesType>, seriesConfig: ChartSeriesConfig<TSeriesType>, dataset?: Readonly<DatasetType>) => ProcessedSeries<TSeriesType>;

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

@@ -1,22 +1,17 @@
 /**
- * This methods is the interface between what the developer is providing and what components receives
- * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
- * It also add defaultized values such as the ids, colors
+ * This method groups series by type and adds defaultized values such as the ids and colors.
+ * It does NOT apply the series processors - that happens in a selector.
  * @param series The array of series provided by the developer
  * @param colors The color palette used to defaultize series colors
- * @returns An object structuring all the series by type.
+ * @returns An object structuring all the series by type with default values.
  */
-export const preprocessSeries = ({
+export const defaultizeSeries = ({
   series,
   colors,
-  seriesConfig,
-  dataset
+  seriesConfig
 }) => {
   // Group series by type
   const seriesGroups = {};
-  // Notice the line about uses `ChartSeriesType` instead of TSeriesType.
-  // That's probably because the series.type is not propagated from the generic but hardcoded in the config.
-
   series.forEach((seriesData, seriesIndex) => {
     const seriesWithDefaultValues = seriesConfig[seriesData.type].getSeriesWithDefaultValues(seriesData, seriesIndex, colors);
     const id = seriesWithDefaultValues.id;
@@ -32,12 +27,25 @@ export const preprocessSeries = ({
     seriesGroups[seriesData.type].series[id] = seriesWithDefaultValues;
     seriesGroups[seriesData.type].seriesOrder.push(id);
   });
+  return seriesGroups;
+};
+
+/**
+ * Applies series processors to the defaultized series groups.
+ * This should be called in a selector to compute processed series on-demand.
+ * @param defaultizedSeries The defaultized series groups
+ * @param seriesConfig The series configuration
+ * @param dataset The optional dataset
+ * @returns Processed series with all transformations applied
+ */
+export const applySeriesProcessors = (defaultizedSeries, seriesConfig, dataset) => {
   const processedSeries = {};
+
   // Apply formatter on a type group
   Object.keys(seriesConfig).forEach(type => {
-    const group = seriesGroups[type];
+    const group = defaultizedSeries[type];
     if (group !== undefined) {
-      processedSeries[type] = seriesConfig[type]?.seriesProcessor?.(group, dataset) ?? seriesGroups[type];
+      processedSeries[type] = seriesConfig[type]?.seriesProcessor?.(group, dataset) ?? group;
     }
   });
   return processedSeries;

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

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
-import { preprocessSeries } from "./processSeries.js";
+import { defaultizeSeries } from "./processSeries.js";
 export const useChartSeries = ({
   params,
   store,
@@ -25,11 +25,10 @@ export const useChartSeries = ({
       return;
     }
     store.set('series', _extends({}, store.state.series, {
-      processedSeries: preprocessSeries({
+      defaultizedSeries: defaultizeSeries({
         series,
         colors: typeof colors === 'function' ? colors(theme) : colors,
-        seriesConfig,
-        dataset
+        seriesConfig
       }),
       dataset
     }));
@@ -59,11 +58,10 @@ useChartSeries.getInitialState = ({
   return {
     series: {
       seriesConfig,
-      processedSeries: preprocessSeries({
+      defaultizedSeries: defaultizeSeries({
         series,
         colors: typeof colors === 'function' ? colors(theme) : colors,
-        seriesConfig,
-        dataset
+        seriesConfig
       }),
       dataset
     }