@mui/x-charts 8.13.0 → 8.14.0

package/esm/locales/ptBR.js

@@ -10,106 +10,104 @@ export const ptBRLocaleText = {
   toolbarExport: 'Exportar',
   // Toolbar Export Menu
   toolbarExportPrint: 'Imprimir',
-  toolbarExportImage: mimeType => `Exportar como ${imageMimeTypes[mimeType] ?? mimeType}`
-
+  toolbarExportImage: mimeType => `Exportar como ${imageMimeTypes[mimeType] ?? mimeType}`,
   // Charts renderer configuration
-  // chartTypeBar: 'Bar',
-  // chartTypeColumn: 'Column',
-  // chartTypeLine: 'Line',
-  // chartTypeArea: 'Area',
-  // chartTypePie: 'Pie',
-  // chartPaletteLabel: 'Color palette',
-  // chartPaletteNameRainbowSurge: 'Rainbow Surge',
-  // chartPaletteNameBlueberryTwilight: 'Blueberry Twilight',
-  // chartPaletteNameMangoFusion: 'Mango Fusion',
-  // chartPaletteNameCheerfulFiesta: 'Cheerful Fiesta',
-  // chartPaletteNameStrawberrySky: 'Strawberry Sky',
-  // chartPaletteNameBlue: 'Blue',
-  // chartPaletteNameGreen: 'Green',
-  // chartPaletteNamePurple: 'Purple',
-  // chartPaletteNameRed: 'Red',
-  // chartPaletteNameOrange: 'Orange',
-  // chartPaletteNameYellow: 'Yellow',
-  // chartPaletteNameCyan: 'Cyan',
-  // chartPaletteNamePink: 'Pink',
-  // chartConfigurationSectionChart: 'Chart',
-  // chartConfigurationSectionColumns: 'Columns',
-  // chartConfigurationSectionBars: 'Bars',
-  // chartConfigurationSectionAxes: 'Axes',
-  // chartConfigurationGrid: 'Grid',
-  // chartConfigurationBorderRadius: 'Border radius',
-  // chartConfigurationCategoryGapRatio: 'Category gap ratio',
-  // chartConfigurationBarGapRatio: 'Series gap ratio',
-  // chartConfigurationStacked: 'Stacked',
-  // chartConfigurationShowToolbar: 'Show toolbar',
-  // chartConfigurationSkipAnimation: 'Skip animation',
-  // chartConfigurationInnerRadius: 'Inner radius',
-  // chartConfigurationOuterRadius: 'Outer radius',
-  // chartConfigurationColors: 'Colors',
-  // chartConfigurationHideLegend: 'Hide legend',
-  // chartConfigurationShowMark: 'Show mark',
-  // chartConfigurationHeight: 'Height',
-  // chartConfigurationWidth: 'Width',
-  // chartConfigurationSeriesGap: 'Series gap',
-  // chartConfigurationTickPlacement: 'Tick placement',
-  // chartConfigurationTickLabelPlacement: 'Tick label placement',
-  // chartConfigurationCategoriesAxisLabel: 'Categories axis label',
-  // chartConfigurationSeriesAxisLabel: 'Series axis label',
-  // chartConfigurationXAxisPosition: 'X-axis position',
-  // chartConfigurationYAxisPosition: 'Y-axis position',
-  // chartConfigurationSeriesAxisReverse: 'Reverse series axis',
-  // chartConfigurationTooltipPlacement: 'Placement',
-  // chartConfigurationTooltipTrigger: 'Trigger',
-  // chartConfigurationLegendPosition: 'Position',
-  // chartConfigurationLegendDirection: 'Direction',
-  // chartConfigurationBarLabels: 'Bar labels',
-  // chartConfigurationColumnLabels: 'Column labels',
-  // chartConfigurationInterpolation: 'Interpolation',
-  // chartConfigurationSectionTooltip: 'Tooltip',
-  // chartConfigurationSectionLegend: 'Legend',
-  // chartConfigurationSectionLines: 'Lines',
-  // chartConfigurationSectionAreas: 'Areas',
-  // chartConfigurationSectionArcs: 'Arcs',
-  // chartConfigurationPaddingAngle: 'Padding angle',
-  // chartConfigurationCornerRadius: 'Corner radius',
-  // chartConfigurationArcLabels: 'Arc labels',
-  // chartConfigurationStartAngle: 'Start angle',
-  // chartConfigurationEndAngle: 'End angle',
-  // chartConfigurationPieTooltipTrigger: 'Trigger',
-  // chartConfigurationPieLegendPosition: 'Position',
-  // chartConfigurationPieLegendDirection: 'Direction',
-
+  chartTypeBar: 'Barra',
+  chartTypeColumn: 'Coluna',
+  chartTypeLine: 'Linha',
+  chartTypeArea: 'Área',
+  chartTypePie: 'Pizza',
+  chartPaletteLabel: 'Paleta de cores',
+  chartPaletteNameRainbowSurge: 'Onda de Arco-íris',
+  chartPaletteNameBlueberryTwilight: 'Crepúsculo de Blueberry',
+  chartPaletteNameMangoFusion: 'Fusão de Manga',
+  chartPaletteNameCheerfulFiesta: 'Festa Alegre',
+  chartPaletteNameStrawberrySky: 'Céu de Morango',
+  chartPaletteNameBlue: 'Azul',
+  chartPaletteNameGreen: 'Verde',
+  chartPaletteNamePurple: 'Roxo',
+  chartPaletteNameRed: 'Vermelho',
+  chartPaletteNameOrange: 'Laranja',
+  chartPaletteNameYellow: 'Amarelo',
+  chartPaletteNameCyan: 'Ciano',
+  chartPaletteNamePink: 'Rosa',
+  chartConfigurationSectionChart: 'Gráfico',
+  chartConfigurationSectionColumns: 'Colunas',
+  chartConfigurationSectionBars: 'Barras',
+  chartConfigurationSectionAxes: 'Eixos',
+  chartConfigurationGrid: 'Grade',
+  chartConfigurationBorderRadius: 'Arredondamento da borda',
+  chartConfigurationCategoryGapRatio: 'Proporção de espaço entre categorias',
+  chartConfigurationBarGapRatio: 'Proporção de espaço entre séries',
+  chartConfigurationStacked: 'Empilhado',
+  chartConfigurationShowToolbar: 'Mostrar barra de ferramentas',
+  chartConfigurationSkipAnimation: 'Ignorar animação',
+  chartConfigurationInnerRadius: 'Raio interno',
+  chartConfigurationOuterRadius: 'Raio externo',
+  chartConfigurationColors: 'Cores',
+  chartConfigurationHideLegend: 'Ocultar legenda',
+  chartConfigurationShowMark: 'Mostrar marcação',
+  chartConfigurationHeight: 'Altura',
+  chartConfigurationWidth: 'Largura',
+  chartConfigurationSeriesGap: 'Espaçamento entre séries',
+  chartConfigurationTickPlacement: 'Posição da marcação',
+  chartConfigurationTickLabelPlacement: 'Posição do título da marcação',
+  chartConfigurationCategoriesAxisLabel: 'Título do eixo de categorias',
+  chartConfigurationSeriesAxisLabel: 'Título do eixo de séries',
+  chartConfigurationXAxisPosition: 'Posição do eixo X',
+  chartConfigurationYAxisPosition: 'Posição do eixo Y',
+  chartConfigurationSeriesAxisReverse: 'Inverter eixo de séries',
+  chartConfigurationTooltipPlacement: 'Posição',
+  chartConfigurationTooltipTrigger: 'Gatilho',
+  chartConfigurationLegendPosition: 'Posição',
+  chartConfigurationLegendDirection: 'Direção',
+  chartConfigurationBarLabels: 'Títulos das barras',
+  chartConfigurationColumnLabels: 'Títulos das colunas',
+  chartConfigurationInterpolation: 'Interpolação',
+  chartConfigurationSectionTooltip: 'Tooltip',
+  chartConfigurationSectionLegend: 'Legenda',
+  chartConfigurationSectionLines: 'Linhas',
+  chartConfigurationSectionAreas: 'Áreas',
+  chartConfigurationSectionArcs: 'Arcos',
+  chartConfigurationPaddingAngle: 'Ângulo de preenchimento',
+  chartConfigurationCornerRadius: 'Raio do canto',
+  chartConfigurationArcLabels: 'Títulos dos arcos',
+  chartConfigurationStartAngle: 'Ângulo inicial',
+  chartConfigurationEndAngle: 'Ângulo final',
+  chartConfigurationPieTooltipTrigger: 'Gatilho',
+  chartConfigurationPieLegendPosition: 'Posição',
+  chartConfigurationPieLegendDirection: 'Direção',
   // Common option labels
-  // chartConfigurationOptionNone: 'None',
-  // chartConfigurationOptionValue: 'Value',
-  // chartConfigurationOptionAuto: 'Auto',
-  // chartConfigurationOptionTop: 'Top',
-  // chartConfigurationOptionTopLeft: 'Top Left',
-  // chartConfigurationOptionTopRight: 'Top Right',
-  // chartConfigurationOptionBottom: 'Bottom',
-  // chartConfigurationOptionBottomLeft: 'Bottom Left',
-  // chartConfigurationOptionBottomRight: 'Bottom Right',
-  // chartConfigurationOptionLeft: 'Left',
-  // chartConfigurationOptionRight: 'Right',
-  // chartConfigurationOptionAxis: 'Axis',
-  // chartConfigurationOptionItem: 'Item',
-  // chartConfigurationOptionHorizontal: 'Horizontal',
-  // chartConfigurationOptionVertical: 'Vertical',
-  // chartConfigurationOptionBoth: 'Both',
-  // chartConfigurationOptionStart: 'Start',
-  // chartConfigurationOptionMiddle: 'Middle',
-  // chartConfigurationOptionEnd: 'End',
-  // chartConfigurationOptionExtremities: 'Extremities',
-  // chartConfigurationOptionTick: 'Tick',
-  // chartConfigurationOptionMonotoneX: 'Monotone X',
-  // chartConfigurationOptionMonotoneY: 'Monotone Y',
-  // chartConfigurationOptionCatmullRom: 'Catmull-Rom',
-  // chartConfigurationOptionLinear: 'Linear',
-  // chartConfigurationOptionNatural: 'Natural',
-  // chartConfigurationOptionStep: 'Step',
-  // chartConfigurationOptionStepBefore: 'Step Before',
-  // chartConfigurationOptionStepAfter: 'Step After',
-  // chartConfigurationOptionBumpX: 'Bump X',
-  // chartConfigurationOptionBumpY: 'Bump Y',
+  chartConfigurationOptionNone: 'Nenhum',
+  chartConfigurationOptionValue: 'Valor',
+  chartConfigurationOptionAuto: 'Automático',
+  chartConfigurationOptionTop: 'Topo',
+  chartConfigurationOptionTopLeft: 'Topo Esquerdo',
+  chartConfigurationOptionTopRight: 'Topo Direito',
+  chartConfigurationOptionBottom: 'Inferior',
+  chartConfigurationOptionBottomLeft: 'Inferior Esquerdo',
+  chartConfigurationOptionBottomRight: 'Inferior Direito',
+  chartConfigurationOptionLeft: 'Esquerda',
+  chartConfigurationOptionRight: 'Direita',
+  chartConfigurationOptionAxis: 'Eixo',
+  chartConfigurationOptionItem: 'Item',
+  chartConfigurationOptionHorizontal: 'Horizontal',
+  chartConfigurationOptionVertical: 'Vertical',
+  chartConfigurationOptionBoth: 'Ambos',
+  chartConfigurationOptionStart: 'Início',
+  chartConfigurationOptionMiddle: 'Meio',
+  chartConfigurationOptionEnd: 'Fim',
+  chartConfigurationOptionExtremities: 'Extremidades',
+  chartConfigurationOptionTick: 'Marcação',
+  chartConfigurationOptionMonotoneX: 'Monótono X',
+  chartConfigurationOptionMonotoneY: 'Monótono Y',
+  chartConfigurationOptionCatmullRom: 'Catmull-Rom',
+  chartConfigurationOptionLinear: 'Linear',
+  chartConfigurationOptionNatural: 'Natural',
+  chartConfigurationOptionStep: 'Passo',
+  chartConfigurationOptionStepBefore: 'Passo Anterior',
+  chartConfigurationOptionStepAfter: 'Passo Posterior',
+  chartConfigurationOptionBumpX: 'Colisão X',
+  chartConfigurationOptionBumpY: 'Colisão Y'
 };
 export const ptBR = getChartsLocalization(ptBRLocaleText);

package/esm/models/axis.d.ts

@@ -1,4 +1,4 @@
-import type { ScaleBand, ScaleLinear, ScaleLogarithmic, ScaleOrdinal, ScalePoint, ScalePower, ScaleSequential, ScaleThreshold, ScaleTime, ScaleSymLog } from '@mui/x-charts-vendor/d3-scale';
+import type { ScaleBand, ScaleLinear, ScaleLogarithmic, ScaleOrdinal, ScalePoint, ScalePower, ScaleSequential, ScaleThreshold, ScaleTime, ScaleSymLog, NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { SxProps } from '@mui/system/styleFunctionSx';
 import { type MakeOptional, MakeRequired } from '@mui/x-internals/types';
 import type { DefaultizedZoomOptions } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
@@ -9,11 +9,15 @@ import { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from
 export type AxisId = string | number;
 export type D3Scale<Domain extends {
   toString(): string;
-} = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleSymLog<Range, Output> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
+} = {
+  toString(): string;
+}, Range = number, Output = number> = ScaleBand<Domain> | ScaleSymLog<Range, Output> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
 export type D3ContinuousScale<Range = number, Output = number> = ScaleSymLog<Range, Output> | ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
 export type D3OrdinalScale<Domain extends {
   toString(): string;
-} = number | Date | string> = ScaleBand<Domain> | ScalePoint<Domain>;
+} = {
+  toString(): string;
+}> = ScaleBand<Domain> | ScalePoint<Domain>;
 export interface ChartsAxisSlots {
   /**
    * Custom component for the axis main line.
@@ -220,7 +224,9 @@ export type AxisGroups = {
 export interface AxisScaleConfig {
   band: {
     scaleType: 'band';
-    scale: ScaleBand<number | Date | string>;
+    scale: ScaleBand<{
+      toString(): string;
+    }>;
     /**
      * The ratio between the space allocated for padding between two categories and the category width.
      * 0 means no gap, and 1 no data.
@@ -237,7 +243,9 @@ export interface AxisScaleConfig {
   } & AxisGroups & Pick<TickParams, 'tickPlacement' | 'tickLabelPlacement'>;
   point: {
     scaleType: 'point';
-    scale: ScalePoint<number | Date | string>;
+    scale: ScalePoint<{
+      toString(): string;
+    }>;
     colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
   } & AxisGroups;
   log: {
@@ -363,26 +371,39 @@ export type AxisValueFormatterContext<S extends ScaleName = ScaleName> = {
    */
   tickNumber?: number;
 };
-/**
- * Config that is shared between cartesian and polar axes.
- */
-type CommonAxisConfig<S extends ScaleName = ScaleName, V = any> = {
+type MinMaxConfig<S extends ScaleName = ScaleName> = S extends ContinuousScaleName ? S extends 'utc' | 'time' ? {
   /**
-   * ID used to identify the axis.
-   *
-   * The ID must be unique across all axes in this chart.
+   * The minimal value of the domain.
+   * If not provided, it gets computed to display the entire chart data.
    */
-  id: AxisId;
+  min?: NumberValue;
+  /**
+   * The maximal value of the domain.
+   * If not provided, it gets computed to display the entire chart data.
+   */
+  max?: NumberValue;
+} : {
   /**
    * The minimal value of the domain.
    * If not provided, it gets computed to display the entire chart data.
    */
-  min?: number | Date;
+  min?: number;
   /**
    * The maximal value of the domain.
    * If not provided, it gets computed to display the entire chart data.
    */
-  max?: number | Date;
+  max?: number;
+} : {};
+/**
+ * Config that is shared between cartesian and polar axes.
+ */
+type CommonAxisConfig<S extends ScaleName = ScaleName, V = any> = {
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id: AxisId;
   /**
    * The data used by `'band'` and `'point'` scales.
    */
@@ -429,7 +450,7 @@ export type PolarAxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps
    * @default 0
    */
   offset?: number;
-} & CommonAxisConfig<S, V> & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & AxisConfigExtension;
+} & CommonAxisConfig<S, V> & MinMaxConfig<S> & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & AxisConfigExtension;
 /**
  * Use this type for advanced typing. For basic usage, use `XAxis`, `YAxis`, `RotationAxis` or `RadiusAxis`.
  */
@@ -441,7 +462,7 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps exten
    * @default 0
    */
   offset?: number;
-} & CommonAxisConfig<S, V> & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & AxisSideConfig<AxisProps> & TickParams & AxisConfigExtension;
+} & CommonAxisConfig<S, V> & MinMaxConfig<S> & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & AxisSideConfig<AxisProps> & TickParams & AxisConfigExtension;
 export interface AxisConfigExtension {}
 export type PolarAxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsRotationAxisProps | ChartsRadiusAxisProps> = Omit<PolarAxisConfig<S, V, AxisProps>, 'scaleType'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
   /**
@@ -467,6 +488,7 @@ export declare function isBandScaleConfig(scaleConfig: AxisConfig<ScaleName>): s
 export declare function isPointScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'point'> & {
   scaleType: 'point';
 };
+export declare function isContinuousScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<ContinuousScaleName>;
 export declare function isSymlogScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'symlog'> & {
   scaleType: 'symlog';
 };

package/esm/models/axis.js

@@ -17,6 +17,9 @@ export function isBandScaleConfig(scaleConfig) {
 export function isPointScaleConfig(scaleConfig) {
   return scaleConfig.scaleType === 'point';
 }
+export function isContinuousScaleConfig(scaleConfig) {
+  return scaleConfig.scaleType !== 'point' && scaleConfig.scaleType !== 'band';
+}
 export function isSymlogScaleConfig(scaleConfig) {
   return scaleConfig.scaleType === 'symlog';
 }

package/hooks/animation/useAnimate.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -41,14 +42,14 @@ function useAnimate(props, {
   ref
 }) {
   const transform = transformProps ?? (p => p);
-  const animateRef = (0, _useAnimateInternal.useAnimateInternal)(props, {
+  const [animateRef, lastInterpolatedProps] = (0, _useAnimateInternal.useAnimateInternal)(props, {
     initialProps,
     createInterpolator,
     applyProps: (element, animatedProps) => applyProps(element, transform(animatedProps)),
     skip
   });
-  const usedProps = skip ? props : initialProps;
-  return (0, _extends2.default)({}, transformProps(usedProps), {
+  const usedProps = skip ? transformProps(props) : transformProps(lastInterpolatedProps);
+  return (0, _extends2.default)({}, usedProps, {
     ref: (0, _useForkRef.default)(animateRef, ref)
   });
 }

package/hooks/useScale.d.ts

@@ -5,7 +5,11 @@ import { AxisId, AxisScaleConfig, D3Scale, ScaleName } from "../models/axis.js";
  * @param {D3Scale} scale The scale to use
  * @returns {(value: any) => number} A function that map value to their position
  */
-export declare function getValueToPositionMapper(scale: D3Scale): (value: any) => number;
+export declare function getValueToPositionMapper<Domain extends {
+  toString(): string;
+} = {
+  toString(): string;
+}, Range = number>(scale: D3Scale<Domain, Range>): (value: any) => number;
 /**
  * Get the X scale.
  *

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.13.0
+ * @mui/x-charts v8.14.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/animation/useAnimateInternal.d.ts

@@ -18,4 +18,4 @@ export declare function useAnimateInternal<Props extends {}, Elem extends Elemen
   applyProps: (element: Elem, props: Props) => void;
   skip?: boolean;
   initialProps?: Props;
-}): (element: Elem | null) => void;
+}): readonly [(element: Elem | null) => void, Props];

package/internals/animation/useAnimateInternal.js

@@ -78,5 +78,5 @@ function useAnimateInternal(props, {
       animate(element);
     }
   }, [animate, props, skip]);
-  return setRef;
+  return [setRef, lastInterpolatedPropsRef.current];
 }

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

@@ -28,7 +28,7 @@ const useChartInteractionListener = ({
           name: 'zoomPan',
           threshold: 0,
           maxPointers: 1,
-          preventIf: ['zoomTapAndDrag']
+          preventIf: ['zoomTapAndDrag', 'zoomPressAndDrag']
         }), new _core.MoveGesture({
           name: 'move',
           preventIf: ['pan', 'zoomPinch', 'zoomPan'] // Prevent move gesture when pan is active
@@ -42,17 +42,17 @@ const useChartInteractionListener = ({
           initialDelta: 1
         }), new _core.TapGesture({
           name: 'tap',
-          maxDistance: 10,
           preventIf: ['pan', 'zoomPan', 'zoomPinch']
         }), new _core.PressGesture({
           name: 'quickPress',
-          duration: 50,
-          maxDistance: 10
+          duration: 50
         }), new _core.TapAndDragGesture({
           name: 'zoomTapAndDrag',
-          tapMaxDistance: 10,
+          dragThreshold: 10
+        }), new _core.PressAndDragGesture({
+          name: 'zoomPressAndDrag',
           dragThreshold: 10,
-          dragTimeout: 1000
+          preventIf: ['zoomPinch']
         })]
       });
     }
@@ -62,7 +62,7 @@ const useChartInteractionListener = ({
     if (!svg || !gestureManager) {
       return undefined;
     }
-    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag'], svg);
+    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag', 'zoomPressAndDrag'], 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 TapAndDragEvent, type TapAndDragGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
+import { MoveEvent, PanEvent, PanGestureOptions, PinchEvent, PinchGestureOptions, PressEvent, TapEvent, TurnWheelEvent, type PressAndDragEvent, type PressAndDragGestureOptions, type TapAndDragEvent, type TapAndDragGestureOptions, 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' | 'move' | 'moveStart' | 'moveEnd' | 'quickPress' | 'quickPressEnd' | 'zoomTurnWheel' | 'tap';
+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';
 export type InteractionListenerResult = {
   cleanup: () => void;
 };
@@ -12,12 +12,14 @@ export type AddInteractionListener = {
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'tap', 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;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd', callback: (event: TapAndDragEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomPressAndDrag' | 'zoomPressAndDragStart' | 'zoomPressAndDragEnd', callback: (event: PressAndDragEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
 };
 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: 'zoomTapAndDrag', options?: Omit<TapAndDragGestureOptions<'zoomTapAndDrag'>, 'name'>): void;
+  (interaction: 'zoomPressAndDrag', options?: Omit<PressAndDragGestureOptions<'zoomPressAndDrag'>, 'name'>): void;
 };
 export interface UseChartInteractionListenerParameters {}
 export interface UseChartInteractionListenerState {}

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

@@ -1,27 +1,25 @@
-import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, AxisId, DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.js";
+import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, AxisId, DefaultedXAxis, DefaultedYAxis, D3Scale } from "../../../../models/axis.js";
 import { ChartSeriesType } from "../../../../models/seriesType/config.js";
 import type { ChartDrawingArea } from "../../../../hooks/index.js";
 import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
-import { ComputedAxisConfig, DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
+import { ComputedAxisConfig } from "./useChartCartesianAxis.types.js";
 import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
-import { GetZoomAxisFilters, ZoomData } from "./zoom.types.js";
-import { ScaleDefinition } from "./getAxisScale.js";
+import { ZoomData } from "./zoom.types.js";
 export type ComputeResult<T extends ChartsAxisProps> = {
   axis: ComputedAxisConfig<T>;
   axisIds: AxisId[];
 };
 type ComputeCommonParams<T extends ChartSeriesType = ChartSeriesType> = {
-  scales: Record<AxisId, ScaleDefinition>;
+  scales: Record<AxisId, D3Scale>;
   drawingArea: ChartDrawingArea;
   formattedSeries: ProcessedSeries<T>;
   seriesConfig: ChartSeriesConfig<T>;
   zoomMap?: Map<AxisId, ZoomData>;
-  zoomOptions?: Record<AxisId, DefaultizedZoomOptions>;
-  getFilters?: GetZoomAxisFilters;
-  /**
-   * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
-   */
-  preferStrictDomainInLineCharts?: boolean;
+  domains: Record<AxisId, {
+    domain: ReadonlyArray<string | NumberValue>;
+    tickNumber?: number;
+  }>;
 };
 export declare function computeAxisValue<T extends ChartSeriesType>(options: ComputeCommonParams<T> & {
   axis?: DefaultedYAxis[];

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

@@ -12,9 +12,7 @@ var _colorScale = require("../../../colorScale");
 var _ticks = require("../../../ticks");
 var _getScale = require("../../../getScale");
 var _dateHelpers = require("../../../dateHelpers");
-var _getAxisExtrema = require("./getAxisExtrema");
 var _getAxisTriggerTooltip = require("./getAxisTriggerTooltip");
-var _getAxisScale = require("./getAxisScale");
 var _scaleGuards = require("../../../scaleGuards");
 function getRange(drawingArea, axisDirection,
 // | 'rotation' | 'radius',
@@ -32,9 +30,7 @@ function computeAxisValue({
   seriesConfig,
   axisDirection,
   zoomMap,
-  zoomOptions,
-  getFilters,
-  preferStrictDomainInLineCharts
+  domains
 }) {
   if (allAxis === undefined) {
     return {
@@ -44,11 +40,9 @@ function computeAxisValue({
   }
   const axisIdsTriggeringTooltip = (0, _getAxisTriggerTooltip.getAxisTriggerTooltip)(axisDirection, seriesConfig, formattedSeries, allAxis[0].id);
   const completeAxis = {};
-  allAxis.forEach((eachAxis, axisIndex) => {
+  allAxis.forEach(eachAxis => {
     const axis = eachAxis;
-    const scaleDefinition = scales[axis.id];
-    let scale = scaleDefinition.scale;
-    const zoomOption = zoomOptions?.[axis.id];
+    const scale = scales[axis.id];
     const zoom = zoomMap?.get(axis.id);
     const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
     const range = getRange(drawingArea, axisDirection, axis.reverse ?? false);
@@ -99,28 +93,10 @@ function computeAxisValue({
       // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
       return;
     }
-    const rawTickNumber = scaleDefinition.tickNumber;
+    const rawTickNumber = domains[axis.id].tickNumber;
     const continuousAxis = axis;
     const scaleType = continuousAxis.scaleType ?? 'linear';
     const tickNumber = (0, _ticks.scaleTickNumberByRange)(rawTickNumber, zoomRange);
-    const filter = zoom === undefined && !zoomOption ? getFilters : undefined; // Do not apply filtering if zoom is already defined.
-    if (filter) {
-      const [minData, maxData] = (0, _getAxisExtrema.getAxisExtrema)(axis, axisDirection, seriesConfig, axisIndex, formattedSeries, filter);
-      scale = scale.copy();
-      scale.domain([minData, maxData]);
-      const domainLimit = (0, _getAxisScale.getDomainLimit)(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
-      const axisExtrema = (0, _getAxisScale.getActualAxisExtrema)(axis, minData, maxData);
-      if (typeof domainLimit === 'function') {
-        const {
-          min,
-          max
-        } = domainLimit(minData, maxData);
-        axisExtrema[0] = min;
-        axisExtrema[1] = max;
-      }
-      scale.domain(axisExtrema);
-      (0, _getAxisScale.applyDomainLimit)(scale, axis, domainLimit, rawTickNumber);
-    }
     completeAxis[axis.id] = (0, _extends2.default)({
       offset: 0,
       height: 0,

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

@@ -1,8 +1,7 @@
-import { AxisId, D3ContinuousScale, D3Scale } from "../../../../models/axis.js";
+import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { AxisConfig } from "../../../../models/index.js";
-import { DefaultizedZoomOptions, ExtremumFilter } from "./useChartCartesianAxis.types.js";
-import { GetZoomAxisFilters, ZoomAxisFilters, ZoomData } from "./zoom.types.js";
-export declare function createAxisFilterMapper(zoomMap: Map<AxisId, ZoomData>, zoomOptions: Record<AxisId, DefaultizedZoomOptions>, direction: 'x' | 'y'): (axisId: AxisId, axisData: AxisConfig['data'], scale: D3Scale) => ExtremumFilter | null;
+import { ExtremumFilter } from "./useChartCartesianAxis.types.js";
+import { GetZoomAxisFilters, ZoomAxisFilters } from "./zoom.types.js";
 export declare function createDiscreteScaleGetAxisFilter(axisData: AxisConfig['data'], zoomStart: number, zoomEnd: number, direction: 'x' | 'y'): ExtremumFilter;
-export declare function createContinuousScaleGetAxisFilter(scale: D3ContinuousScale, zoomStart: number, zoomEnd: number, direction: 'x' | 'y', axisData: AxisConfig['data']): ExtremumFilter;
+export declare function createContinuousScaleGetAxisFilter(domain: readonly NumberValue[], zoomStart: number, zoomEnd: number, direction: 'x' | 'y', axisData: AxisConfig['data']): ExtremumFilter;
 export declare const createGetAxisFilters: (filters: ZoomAxisFilters) => GetZoomAxisFilters;

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

@@ -3,29 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createAxisFilterMapper = createAxisFilterMapper;
 exports.createContinuousScaleGetAxisFilter = createContinuousScaleGetAxisFilter;
 exports.createDiscreteScaleGetAxisFilter = createDiscreteScaleGetAxisFilter;
 exports.createGetAxisFilters = void 0;
 var _isDefined = require("../../../isDefined");
-var _scaleGuards = require("../../../scaleGuards");
-function createAxisFilterMapper(zoomMap, zoomOptions, direction) {
-  return (axisId, axisData, scale) => {
-    const zoomOption = zoomOptions[axisId];
-    if (!zoomOption || zoomOption.filterMode !== 'discard') {
-      return null;
-    }
-    const zoom = zoomMap?.get(axisId);
-    if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
-      // No zoom, or zoom with all data visible
-      return null;
-    }
-    if ((0, _scaleGuards.isOrdinalScale)(scale)) {
-      return createDiscreteScaleGetAxisFilter(axisData, zoom.start, zoom.end, direction);
-    }
-    return createContinuousScaleGetAxisFilter(scale, zoom.start, zoom.end, direction, axisData);
-  };
-}
 function createDiscreteScaleGetAxisFilter(axisData, zoomStart, zoomEnd, direction) {
   const maxIndex = axisData?.length ?? 0;
   const minVal = Math.floor(zoomStart * maxIndex / 100);
@@ -39,12 +20,9 @@ function createDiscreteScaleGetAxisFilter(axisData, zoomStart, zoomEnd, directio
     return dataIndex >= minVal && dataIndex < maxVal;
   };
 }
-function createContinuousScaleGetAxisFilter(scale, zoomStart, zoomEnd, direction, axisData) {
-  let min;
-  let max;
-  [min, max] = scale.domain();
-  min = min instanceof Date ? min.getTime() : min;
-  max = max instanceof Date ? max.getTime() : max;
+function createContinuousScaleGetAxisFilter(domain, zoomStart, zoomEnd, direction, axisData) {
+  const min = domain[0].valueOf();
+  const max = domain[1].valueOf();
   const minVal = min + zoomStart * (max - min) / 100;
   const maxVal = min + zoomEnd * (max - min) / 100;
   return function filterAxis(value, dataIndex) {