@mui/x-charts 8.0.0-alpha.11 → 8.0.0-alpha.12

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

@@ -0,0 +1,127 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
+import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
+import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
+import { getTickNumber } from "../../../../hooks/useTicks.js";
+import { getScale } from "../../../getScale.js";
+import { zoomScaleRange } from "./zoom.js";
+import { getAxisExtremum } from "./getAxisExtremum.js";
+function getRange(drawingArea, axisDirection,
+// | 'rotation' | 'radius',
+axis) {
+  const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
+  return axis.reverse ? [range[1], range[0]] : range;
+}
+const isDateData = data => data?.[0] instanceof Date;
+function createDateFormatter(axis, range) {
+  const timeScale = scaleTime(axis.data, range);
+  return (v, {
+    location
+  }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
+}
+const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+const DEFAULT_BAR_GAP_RATIO = 0.1;
+export function computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis: allAxis,
+  seriesConfig,
+  axisDirection,
+  zoomMap,
+  zoomOptions,
+  getFilters
+}) {
+  if (allAxis === undefined) {
+    return {
+      axis: {},
+      axisIds: []
+    };
+  }
+  const completeAxis = {};
+  allAxis.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
+    const zoomOption = zoomOptions?.[axis.id];
+    const zoom = zoomMap?.get(axis.id);
+    const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
+    const range = getRange(drawingArea, axisDirection, axis);
+    const [minData, maxData] = getAxisExtremum(axis, axisDirection, seriesConfig, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
+    );
+    const data = axis.data ?? [];
+    if (isBandScaleConfig(axis)) {
+      const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+      const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
+      // Reverse range because ordinal scales are presented from top to bottom on y-axis
+      const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
+      const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
+      completeAxis[axis.id] = _extends({
+        categoryGapRatio,
+        barGapRatio
+      }, axis, {
+        data,
+        scale: scaleBand(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+          values: axis.data
+        }, axis.colorMap)) : getColorScale(axis.colorMap))
+      });
+      if (isDateData(axis.data)) {
+        const dateFormatter = createDateFormatter(axis, scaleRange);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
+    }
+    if (isPointScaleConfig(axis)) {
+      const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
+      const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
+      completeAxis[axis.id] = _extends({}, axis, {
+        data,
+        scale: scalePoint(axis.data, zoomedRange),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+          values: axis.data
+        }, axis.colorMap)) : getColorScale(axis.colorMap))
+      });
+      if (isDateData(axis.data)) {
+        const dateFormatter = createDateFormatter(axis, scaleRange);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
+    }
+    if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+      // 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 scaleType = axis.scaleType ?? 'linear';
+    const domainLimit = axis.domainLimit ?? 'nice';
+    const axisExtremums = [axis.min ?? minData, axis.max ?? maxData];
+    if (typeof domainLimit === 'function') {
+      const {
+        min,
+        max
+      } = domainLimit(minData, maxData);
+      axisExtremums[0] = min;
+      axisExtremums[1] = max;
+    }
+    const rawTickNumber = getTickNumber(_extends({}, axis, {
+      range,
+      domain: axisExtremums
+    }));
+    const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
+    const zoomedRange = zoomScaleRange(range, zoomRange);
+    const scale = getScale(scaleType, axisExtremums, zoomedRange);
+    const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
+    const [minDomain, maxDomain] = finalScale.domain();
+    const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
+    completeAxis[axis.id] = _extends({}, axis, {
+      data,
+      scaleType: scaleType,
+      scale: finalScale.domain(domain),
+      tickNumber,
+      colorScale: axis.colorMap && getColorScale(axis.colorMap)
+    });
+  });
+  return {
+    axis: completeAxis,
+    axisIds: allAxis.map(({
+      id
+    }) => id)
+  };
+}

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

@@ -0,0 +1,24 @@
+import type { ChartsAxisProps } from '../../../../ChartsAxis';
+import { AxisId } from "../../../../models/axis.js";
+import { CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
+import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+import { AxisConfig, ScaleName } from "../../../../models/index.js";
+import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
+import { DefaultizedZoomOptions, ExtremumFilter } from "./useChartCartesianAxis.types.js";
+import { GetZoomAxisFilters, ZoomAxisFilters, ZoomData } from "./zoom.types.js";
+type CreateAxisFilterMapperParams = {
+  zoomMap: Map<AxisId, ZoomData>;
+  zoomOptions: Record<AxisId, DefaultizedZoomOptions>;
+  seriesConfig: ChartSeriesConfig<CartesianChartSeriesType>;
+  formattedSeries: ProcessedSeries;
+  direction: 'x' | 'y';
+};
+export declare const createAxisFilterMapper: ({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction
+}: CreateAxisFilterMapperParams) => (axis: AxisConfig<ScaleName, any, ChartsAxisProps>, axisIndex: number) => ExtremumFilter | null;
+export declare const createGetAxisFilters: (filters: ZoomAxisFilters) => GetZoomAxisFilters;
+export {};

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

@@ -0,0 +1,61 @@
+import { isDefined } from "../../../isDefined.js";
+import { getAxisExtremum } from "./getAxisExtremum.js";
+import { getScale } from "../../../getScale.js";
+export const createAxisFilterMapper = ({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction
+}) => (axis, axisIndex) => {
+  const zoomOption = zoomOptions[axis.id];
+  if (!zoomOption || zoomOption.filterMode !== 'discard') {
+    return null;
+  }
+  const zoom = zoomMap?.get(axis.id);
+  if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
+    // No zoom, or zoom with all data visible
+    return null;
+  }
+  let extremums = [];
+  const scaleType = axis.scaleType;
+  if (scaleType === 'point' || scaleType === 'band') {
+    extremums = [0, (axis.data?.length ?? 1) - 1];
+  } else {
+    extremums = getAxisExtremum(axis, direction, seriesConfig, axisIndex, formattedSeries);
+  }
+  let min;
+  let max;
+  const continuousScaleType = !scaleType || scaleType === 'band' || scaleType === 'point' ? 'linear' : scaleType;
+  [min, max] = getScale(continuousScaleType, extremums, [0, 100]).nice().domain();
+  min = min instanceof Date ? min.getTime() : min;
+  max = max instanceof Date ? max.getTime() : max;
+  const minVal = min + zoom.start * (max - min) / 100;
+  const maxVal = min + zoom.end * (max - min) / 100;
+  return (value, dataIndex) => {
+    const val = value[direction] ?? axis.data?.[dataIndex];
+    if (val == null) {
+      // If the value does not exist because of missing data point, or out of range index, we just ignore.
+      return true;
+    }
+    if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
+      return dataIndex >= minVal && dataIndex <= maxVal;
+    }
+    return val >= minVal && val <= maxVal;
+  };
+};
+export const createGetAxisFilters = filters => ({
+  currentAxisId,
+  seriesXAxisId,
+  seriesYAxisId,
+  isDefaultAxis
+}) => {
+  return (value, dataIndex) => {
+    const axisId = currentAxisId === seriesXAxisId ? seriesYAxisId : seriesXAxisId;
+    if (!axisId || isDefaultAxis) {
+      return Object.values(filters ?? {})[0]?.(value, dataIndex) ?? true;
+    }
+    const data = [seriesYAxisId, seriesXAxisId].filter(id => id !== currentAxisId).map(id => filters[id ?? '']).filter(isDefined);
+    return data.every(f => f(value, dataIndex));
+  };
+};

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/createZoomLookup.d.ts

@@ -0,0 +1,4 @@
+import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from "../../../../models/index.js";
+import { AxisId } from "../../../../models/axis.js";
+import { DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
+export declare const createZoomLookup: (axisDirection: "x" | "y") => (axes?: AxisConfig<ScaleName, any, ChartsXAxisProps | ChartsYAxisProps>[]) => Record<AxisId, DefaultizedZoomOptions>;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/createZoomLookup.js

@@ -0,0 +1,13 @@
+import { defaultizeZoom } from "./defaultizeZoom.js";
+export const createZoomLookup = axisDirection => (axes = []) => axes.reduce((acc, v) => {
+  // @ts-ignore
+  const {
+    zoom,
+    id: axisId
+  } = v;
+  const defaultizedZoom = defaultizeZoom(zoom, axisId, axisDirection);
+  if (defaultizedZoom) {
+    acc[axisId] = defaultizedZoom;
+  }
+  return acc;
+}, {});

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

@@ -0,0 +1,39 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { AxisConfig, ScaleName } from "../../../../models/index.js";
+import { ChartsAxisProps } from "../../../../models/axis.js";
+import { DatasetType } from "../../../../models/seriesType/config.js";
+export declare function defaultizeAxis(inAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, 'id'>[] | undefined, dataset: DatasetType | undefined, axisName: 'x' | 'y'): {
+  label?: string | undefined;
+  reverse?: boolean | undefined;
+  fill?: string | undefined;
+  data?: any[] | undefined;
+  slots?: Partial<import("../../..").ChartsAxisSlots> | undefined;
+  slotProps?: Partial<import("../../..").ChartsAxisSlotProps> | undefined;
+  classes?: Partial<import("../../../..").ChartsAxisClasses> | undefined;
+  stroke?: string | undefined;
+  sx?: import("@mui/system").SxProps | undefined;
+  valueFormatter?: (<TScaleName extends keyof import("../../..").AxisScaleConfig>(value: any, context: import("../../..").AxisValueFormatterContext<TScaleName>) => string) | undefined;
+  dataKey?: string | undefined;
+  min?: (number | Date) | undefined;
+  max?: (number | Date) | undefined;
+  tickMaxStep?: number | undefined;
+  tickMinStep?: number | undefined;
+  tickNumber?: number | undefined;
+  disableLine?: boolean | undefined;
+  disableTicks?: boolean | undefined;
+  tickLabelStyle?: import("../../../getWordsByLines").ChartsTextStyle | undefined;
+  labelStyle?: import("../../../getWordsByLines").ChartsTextStyle | undefined;
+  tickLabelInterval?: "auto" | ((value: any, index: number) => boolean) | undefined;
+  tickSize?: number | undefined;
+  tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[] | undefined;
+  tickPlacement?: "start" | "end" | "middle" | "extremities" | undefined;
+  tickLabelPlacement?: "middle" | "tick" | undefined;
+  scaleType?: "time" | "linear" | "band" | "point" | "log" | "pow" | "sqrt" | "utc" | undefined;
+  colorMap?: import("../../../../models/colorMapping").ContinuousColorConfig<number | Date> | import("../../../../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../../../../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
+  hideTooltip?: boolean | undefined;
+  domainLimit?: "nice" | "strict" | ((min: number, max: number) => {
+    min: number;
+    max: number;
+  }) | undefined;
+  id: import("../../..").AxisId;
+}[];

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

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../../../../constants/index.js";
+export function defaultizeAxis(inAxis, dataset, axisName) {
+  const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
+  return [...(inAxis?.map((axis, index) => _extends({
+    id: `defaultized-${axisName}-axis-${index}`
+  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
+    id
+  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
+    id: DEFAULT_AXIS_KEY,
+    scaleType: 'linear'
+  }] : [])].map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw new Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+    }
+    return _extends({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  });
+}

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.d.ts

@@ -0,0 +1,4 @@
+import { AxisId } from "../../../../models/axis.js";
+import { DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
+import { ZoomOptions } from "./zoom.types.js";
+export declare const defaultizeZoom: (zoom: boolean | ZoomOptions | undefined, axisId: AxisId, axisDirection: "x" | "y") => DefaultizedZoomOptions | undefined;

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+const defaultZoomOptions = {
+  minStart: 0,
+  maxEnd: 100,
+  step: 5,
+  minSpan: 10,
+  maxSpan: 100,
+  panning: true,
+  filterMode: 'keep'
+};
+export const defaultizeZoom = (zoom, axisId, axisDirection) => {
+  if (!zoom) {
+    return undefined;
+  }
+  if (zoom === true) {
+    return _extends({
+      axisId,
+      axisDirection
+    }, defaultZoomOptions);
+  }
+  return _extends({
+    axisId,
+    axisDirection
+  }, defaultZoomOptions, zoom);
+};

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.d.ts

@@ -0,0 +1,6 @@
+import { AxisConfig } from "../../../../models/index.js";
+import { CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
+import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
+import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
+import { GetZoomAxisFilters } from "./zoom.types.js";
+export declare const getAxisExtremum: <T extends CartesianChartSeriesType>(axis: AxisConfig, axisDirection: "x" | "y", seriesConfig: ChartSeriesConfig<T>, axisIndex: number, formattedSeries: ProcessedSeries<T>, getFilters?: GetZoomAxisFilters) => number[];

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js

@@ -0,0 +1,22 @@
+import { isCartesianSeriesType } from "../../../isCartesian.js";
+const axisExtremumCallback = (acc, chartType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters) => {
+  const getter = axisDirection === 'x' ? seriesConfig[chartType].xExtremumGetter : seriesConfig[chartType].yExtremumGetter;
+  const series = formattedSeries[chartType]?.series ?? {};
+  const [minChartTypeData, maxChartTypeData] = getter?.({
+    series,
+    axis,
+    axisIndex,
+    isDefaultAxis: axisIndex === 0,
+    getFilters
+  }) ?? [Infinity, -Infinity];
+  const [minData, maxData] = acc;
+  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+};
+export const getAxisExtremum = (axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters) => {
+  const charTypes = Object.keys(seriesConfig).filter(isCartesianSeriesType);
+  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters), [Infinity, -Infinity]);
+  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+    return [Infinity, -Infinity];
+  }
+  return extremums;
+};

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

@@ -0,0 +1,9 @@
+import { AxisDefaultized } from "../../../../models/axis.js";
+/**
+ * For a pointer coordinate, this function returns the value and dataIndex associated.
+ * Returns `null` if the coordinate is outside of values.
+ */
+export declare function getAxisValue(axisConfig: AxisDefaultized, pointerValue: number): {
+  value: any;
+  index: number;
+} | null;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js

@@ -0,0 +1,59 @@
+import { isBandScale } from "../../../isBandScale.js";
+function getAsANumber(value) {
+  return value instanceof Date ? value.getTime() : value;
+}
+
+/**
+ * For a pointer coordinate, this function returns the value and dataIndex associated.
+ * Returns `null` if the coordinate is outside of values.
+ */
+export function getAxisValue(axisConfig, pointerValue) {
+  const {
+    scale,
+    data: axisData,
+    reverse
+  } = axisConfig;
+  if (!isBandScale(scale)) {
+    const value = scale.invert(pointerValue);
+    if (axisData === undefined) {
+      return {
+        value,
+        index: -1
+      };
+    }
+    const valueAsNumber = getAsANumber(value);
+    const closestIndex = axisData?.findIndex((pointValue, index) => {
+      const v = getAsANumber(pointValue);
+      if (v > valueAsNumber) {
+        if (index === 0 || Math.abs(valueAsNumber - v) <= Math.abs(valueAsNumber - getAsANumber(axisData[index - 1]))) {
+          return true;
+        }
+      }
+      if (v <= valueAsNumber) {
+        if (index === axisData.length - 1 || Math.abs(getAsANumber(value) - v) < Math.abs(getAsANumber(value) - getAsANumber(axisData[index + 1]))) {
+          return true;
+        }
+      }
+      return false;
+    });
+    return {
+      value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
+      index: closestIndex
+    };
+  }
+  const dataIndex = scale.bandwidth() === 0 ? Math.floor((pointerValue - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((pointerValue - Math.min(...scale.range())) / scale.step());
+  if (dataIndex < 0 || dataIndex >= axisData.length) {
+    return null;
+  }
+  if (reverse) {
+    const reverseIndex = axisData.length - 1 - dataIndex;
+    return {
+      index: reverseIndex,
+      value: axisData[reverseIndex]
+    };
+  }
+  return {
+    index: dataIndex,
+    value: axisData[dataIndex]
+  };
+}

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

@@ -0,0 +1,7 @@
+export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
+export type * from './useChartCartesianAxis.types';
+export * from "./useChartCartesianAxis.selectors.js";
+export { defaultizeAxis } from "./defaultizeAxis.js";
+export * from "./computeAxisValue.js";
+export * from "./createZoomLookup.js";
+export * from "./zoom.types.js";

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/index.js

@@ -0,0 +1,6 @@
+export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
+export * from "./useChartCartesianAxis.selectors.js";
+export { defaultizeAxis } from "./defaultizeAxis.js";
+export * from "./computeAxisValue.js";
+export * from "./createZoomLookup.js";
+export * from "./zoom.types.js";

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

@@ -0,0 +1,3 @@
+import { ChartPlugin } from "../../models/index.js";
+import { UseChartCartesianAxisSignature } from "./useChartCartesianAxis.types.js";
+export declare const useChartCartesianAxis: ChartPlugin<UseChartCartesianAxisSignature<any>>;

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

@@ -0,0 +1,205 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
+import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
+import { useSelector } from "../../../store/useSelector.js";
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.js";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
+import { defaultizeAxis } from "./defaultizeAxis.js";
+import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxis.selectors.js";
+import { getAxisValue } from "./getAxisValue.js";
+import { getSVGPoint } from "../../../getSVGPoint.js";
+import { selectorChartsInteractionAxis } from "../useChartInteraction/index.js";
+export const useChartCartesianAxis = ({
+  params,
+  store,
+  seriesConfig,
+  svgRef,
+  instance
+}) => {
+  const {
+    xAxis,
+    yAxis,
+    dataset
+  } = params;
+  if (process.env.NODE_ENV !== 'production') {
+    const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
+    const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
+    if (duplicates.size > 0) {
+      warnOnce([`MUI X: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
+    }
+  }
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const processedSeries = useSelector(store, selectorChartSeriesProcessed);
+  const interactionAxis = useSelector(store, selectorChartsInteractionAxis);
+  const {
+    axis: xAxisWithScale,
+    axisIds: xAxisIds
+  } = useSelector(store, selectorChartXAxis);
+  const {
+    axis: yAxisWithScale,
+    axisIds: yAxisIds
+  } = useSelector(store, selectorChartYAxis);
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartCartesianAxis`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.update(prev => _extends({}, prev, {
+      cartesianAxis: _extends({}, prev.cartesianAxis, {
+        x: defaultizeAxis(xAxis, dataset, 'x'),
+        y: defaultizeAxis(yAxis, dataset, 'y')
+      })
+    }));
+  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
+  const usedXAxis = xAxisIds[0];
+  const usedYAxis = yAxisIds[0];
+
+  // Use a ref to avoid rerendering on every mousemove event.
+  const mousePosition = React.useRef({
+    isInChart: false,
+    x: -1,
+    y: -1
+  });
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || params.disableAxisListener) {
+      return () => {};
+    }
+    const handleOut = () => {
+      mousePosition.current = {
+        isInChart: false,
+        x: -1,
+        y: -1
+      };
+      instance.cleanInteraction();
+    };
+    const handleMove = event => {
+      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
+      const svgPoint = getSVGPoint(element, target);
+      mousePosition.current.x = svgPoint.x;
+      mousePosition.current.y = svgPoint.y;
+      if (!instance.isPointInside(svgPoint, {
+        targetElement: event.target
+      })) {
+        if (mousePosition.current.isInChart) {
+          store.update(prev => _extends({}, prev, {
+            interaction: {
+              item: null,
+              axis: {
+                x: null,
+                y: null
+              }
+            }
+          }));
+          mousePosition.current.isInChart = false;
+        }
+        return;
+      }
+      mousePosition.current.isInChart = true;
+      instance.setAxisInteraction({
+        x: getAxisValue(xAxisWithScale[usedXAxis], svgPoint.x),
+        y: getAxisValue(yAxisWithScale[usedYAxis], svgPoint.y)
+      });
+    };
+    const handleDown = event => {
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      if (target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+    };
+    element.addEventListener('pointerdown', handleDown);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerout', handleOut);
+    element.addEventListener('pointercancel', handleOut);
+    element.addEventListener('pointerleave', handleOut);
+    return () => {
+      element.removeEventListener('pointerdown', handleDown);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerout', handleOut);
+      element.removeEventListener('pointercancel', handleOut);
+      element.removeEventListener('pointerleave', handleOut);
+    };
+  }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !params.onAxisClick) {
+      return () => {};
+    }
+    const handleMouseClick = event => {
+      event.preventDefault();
+      let dataIndex = null;
+      let isXaxis = false;
+      if (interactionAxis.x === null && interactionAxis.y === null) {
+        const svgPoint = getSVGPoint(element, event);
+        const xIndex = getAxisValue(xAxisWithScale[usedXAxis], svgPoint.x)?.index ?? null;
+        isXaxis = xIndex !== null && xIndex !== -1;
+        dataIndex = isXaxis ? xIndex : getAxisValue(yAxisWithScale[usedYAxis], svgPoint.y)?.index ?? null;
+      } else {
+        isXaxis = interactionAxis.x !== null && interactionAxis.x.index !== -1;
+        dataIndex = isXaxis ? interactionAxis.x && interactionAxis.x.index : interactionAxis.y && interactionAxis.y.index;
+      }
+      const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
+      if (dataIndex == null || dataIndex === -1) {
+        return;
+      }
+
+      // The .data exist because otherwise the dataIndex would be null or -1.
+      const axisValue = (isXaxis ? xAxisWithScale : yAxisWithScale)[USED_AXIS_ID].data[dataIndex];
+      const seriesValues = {};
+      Object.keys(processedSeries).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
+        processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
+          const seriesItem = processedSeries[seriesType].series[seriesId];
+          const providedXAxisId = seriesItem.xAxisId;
+          const providedYAxisId = seriesItem.yAxisId;
+          const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
+          if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+            seriesValues[seriesId] = seriesItem.data[dataIndex];
+          }
+        });
+      });
+      params.onAxisClick?.(event, {
+        dataIndex,
+        axisValue,
+        seriesValues
+      });
+    };
+    element.addEventListener('click', handleMouseClick);
+    return () => {
+      element.removeEventListener('click', handleMouseClick);
+    };
+  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, params, interactionAxis, usedXAxis, usedYAxis]);
+  return {};
+};
+useChartCartesianAxis.params = {
+  xAxis: true,
+  yAxis: true,
+  dataset: true,
+  onAxisClick: true,
+  disableAxisListener: true
+};
+useChartCartesianAxis.getDefaultizedParams = ({
+  params
+}) => {
+  return _extends({}, params, {
+    colors: params.colors ?? rainbowSurgePalette,
+    theme: params.theme ?? 'light',
+    defaultizedXAxis: defaultizeAxis(params.xAxis, params.dataset, 'x'),
+    defaultizedYAxis: defaultizeAxis(params.yAxis, params.dataset, 'y')
+  });
+};
+useChartCartesianAxis.getInitialState = params => ({
+  cartesianAxis: {
+    x: params.defaultizedXAxis,
+    y: params.defaultizedYAxis
+  }
+});