@mui/x-charts 8.13.0 → 8.14.0

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

@@ -3,12 +3,17 @@ import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/i
 import { selectorChartSeriesConfig, selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
 import { createSelector } from "../../utils/selectors.js";
 import { computeAxisValue } from "./computeAxisValue.js";
-import { createAxisFilterMapper, createGetAxisFilters } from "./createAxisFilterMapper.js";
+import { createContinuousScaleGetAxisFilter, createDiscreteScaleGetAxisFilter, createGetAxisFilters } from "./createAxisFilterMapper.js";
 import { createZoomLookup } from "./createZoomLookup.js";
+import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
 import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
 import { selectorPreferStrictDomainInLineCharts } from "../../corePlugins/useChartExperimentalFeature/index.js";
-import { getXAxesScales, getYAxesScales } from "./getAxisScale.js";
 import { getDefaultTickNumber } from "../../../ticks.js";
+import { getNormalizedAxisScale, getRange } from "./getAxisScale.js";
+import { isOrdinalScale } from "../../../scaleGuards.js";
+import { zoomScaleRange } from "./zoom.js";
+import { getAxisExtrema } from "./getAxisExtrema.js";
+import { calculateFinalDomain, calculateInitialDomainAndTickNumber } from "./domain.js";
 export const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -26,66 +31,176 @@ export const selectorChartZoomIsInteracting = createSelector([selectorChartZoomS
 export const selectorChartZoomMap = createSelector([selectorChartZoomState], zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
 export const selectorChartZoomOptionsLookup = createSelector([selectorChartRawXAxis, selectorChartRawYAxis], (xAxis, yAxis) => _extends({}, createZoomLookup('x')(xAxis), createZoomLookup('y')(yAxis)));
 export const selectorChartAxisZoomOptionsLookup = createSelector([selectorChartZoomOptionsLookup, (_, axisId) => axisId], (axisLookup, axisId) => axisLookup[axisId]);
-const selectorChartXFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup], (zoomMap, zoomOptions) => zoomMap && zoomOptions && createAxisFilterMapper(zoomMap, zoomOptions, 'x'));
-const selectorChartYFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup], (zoomMap, zoomOptions) => zoomMap && zoomOptions && createAxisFilterMapper(zoomMap, zoomOptions, 'y'));
 export const selectorDefaultXAxisTickNumber = createSelector([selectorChartDrawingArea], function selectorDefaultXAxisTickNumber(drawingArea) {
   return getDefaultTickNumber(drawingArea.width);
 });
 export const selectorDefaultYAxisTickNumber = createSelector([selectorChartDrawingArea], function selectorDefaultYAxisTickNumber(drawingArea) {
   return getDefaultTickNumber(drawingArea.height);
 });
-export const selectorChartXScales = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorPreferStrictDomainInLineCharts, selectorDefaultXAxisTickNumber], function selectorChartXScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts, defaultTickNumber) {
-  return getXAxesScales({
-    drawingArea,
-    formattedSeries,
-    axis,
-    seriesConfig,
-    zoomMap,
-    preferStrictDomainInLineCharts,
-    defaultTickNumber
+export const selectorChartXDomains = createSelector([selectorChartRawXAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorPreferStrictDomainInLineCharts, selectorDefaultXAxisTickNumber], function selectorChartXDomains(axes, formattedSeries, seriesConfig, preferStrictDomainInLineCharts, defaultTickNumber) {
+  const axisDirection = 'x';
+  const domains = {};
+  axes?.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
+    if (isBandScaleConfig(axis) || isPointScaleConfig(axis)) {
+      domains[axis.id] = {
+        domain: axis.data
+      };
+      return;
+    }
+    const axisExtrema = getAxisExtrema(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
+    domains[axis.id] = calculateInitialDomainAndTickNumber(axis, 'x', axisIndex, formattedSeries, axisExtrema, defaultTickNumber, preferStrictDomainInLineCharts);
   });
+  return domains;
 });
-export const selectorChartYScales = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorPreferStrictDomainInLineCharts, selectorDefaultYAxisTickNumber], function selectorChartYScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts, defaultTickNumber) {
-  return getYAxesScales({
-    drawingArea,
-    formattedSeries,
-    axis,
-    seriesConfig,
-    zoomMap,
-    preferStrictDomainInLineCharts,
-    defaultTickNumber
+export const selectorChartYDomains = createSelector([selectorChartRawYAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorPreferStrictDomainInLineCharts, selectorDefaultYAxisTickNumber], function selectorChartYDomains(axes, formattedSeries, seriesConfig, preferStrictDomainInLineCharts, defaultTickNumber) {
+  const axisDirection = 'y';
+  const domains = {};
+  axes?.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
+    if (isBandScaleConfig(axis) || isPointScaleConfig(axis)) {
+      domains[axis.id] = {
+        domain: axis.data
+      };
+      return;
+    }
+    const axisExtrema = getAxisExtrema(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
+    domains[axis.id] = calculateInitialDomainAndTickNumber(axis, 'y', axisIndex, formattedSeries, axisExtrema, defaultTickNumber, preferStrictDomainInLineCharts);
   });
+  return domains;
 });
-export const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter, selectorChartYFilter, selectorChartRawXAxis, selectorChartRawYAxis, selectorChartXScales, selectorChartYScales], (xMapper, yMapper, xAxis, yAxis, xScales, yScales) => {
-  if (xMapper === undefined || yMapper === undefined) {
-    // Early return if there is no zoom.
+export const selectorChartZoomAxisFilters = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartRawXAxis, selectorChartRawYAxis, selectorChartXDomains, selectorChartYDomains], (zoomMap, zoomOptions, xAxis, yAxis, xDomains, yDomains) => {
+  if (!zoomMap || !zoomOptions) {
     return undefined;
   }
-  const xFilters = xAxis?.reduce((acc, axis) => {
-    const filter = xMapper(axis.id, axis.data, xScales[axis.id].scale);
-    if (filter !== null) {
-      acc[axis.id] = filter;
+  let hasFilter = false;
+  const filters = {};
+  const axes = [...(xAxis ?? []), ...(yAxis ?? [])];
+  for (let i = 0; i < axes.length; i += 1) {
+    const axis = axes[i];
+    if (!zoomOptions[axis.id] || zoomOptions[axis.id].filterMode !== 'discard') {
+      continue;
+    }
+    const zoom = zoomMap.get(axis.id);
+    if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
+      // No zoom, or zoom with all data visible
+      continue;
     }
-    return acc;
-  }, {});
-  const yFilters = yAxis?.reduce((acc, axis) => {
-    const filter = yMapper(axis.id, axis.data, yScales[axis.id].scale);
-    if (filter !== null) {
-      acc[axis.id] = filter;
+    const axisDirection = i < (xAxis?.length ?? 0) ? 'x' : 'y';
+    if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+      filters[axis.id] = createDiscreteScaleGetAxisFilter(axis.data, zoom.start, zoom.end, axisDirection);
+    } else {
+      const {
+        domain
+      } = axisDirection === 'x' ? xDomains[axis.id] : yDomains[axis.id];
+      filters[axis.id] = createContinuousScaleGetAxisFilter(
+      // For continuous scales, the domain is always a two-value array.
+      domain, zoom.start, zoom.end, axisDirection, axis.data);
     }
-    return acc;
-  }, {});
-  if (Object.keys(xFilters ?? {}).length === 0 && Object.keys(yFilters ?? {}).length === 0) {
+    hasFilter = true;
+  }
+  if (!hasFilter) {
     return undefined;
   }
-  return createGetAxisFilters(_extends({}, xFilters, yFilters));
+  return createGetAxisFilters(filters);
+});
+export const selectorChartFilteredXDomains = createSelector([selectorChartRawXAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorPreferStrictDomainInLineCharts, selectorChartXDomains], (axes, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, domains) => {
+  const filteredDomains = {};
+  axes?.forEach((axis, axisIndex) => {
+    const domain = domains[axis.id].domain;
+    if (isBandScaleConfig(axis) || isPointScaleConfig(axis)) {
+      filteredDomains[axis.id] = domain;
+      return;
+    }
+    const zoom = zoomMap?.get(axis.id);
+    const zoomOption = zoomOptions?.[axis.id];
+    const filter = zoom === undefined && !zoomOption ? getFilters : undefined; // Do not apply filtering if zoom is already defined.
+
+    if (!filter) {
+      filteredDomains[axis.id] = domain;
+      return;
+    }
+    const rawTickNumber = domains[axis.id].tickNumber;
+    const axisExtrema = getAxisExtrema(axis, 'x', seriesConfig, axisIndex, formattedSeries, filter);
+    filteredDomains[axis.id] = calculateFinalDomain(axis, 'x', axisIndex, formattedSeries, axisExtrema, rawTickNumber, preferStrictDomainInLineCharts);
+  });
+  return filteredDomains;
+});
+export const selectorChartFilteredYDomains = createSelector([selectorChartRawYAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorPreferStrictDomainInLineCharts, selectorChartYDomains], (axes, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, domains) => {
+  const filteredDomains = {};
+  axes?.forEach((axis, axisIndex) => {
+    const domain = domains[axis.id].domain;
+    if (isBandScaleConfig(axis) || isPointScaleConfig(axis)) {
+      filteredDomains[axis.id] = domain;
+      return;
+    }
+    const zoom = zoomMap?.get(axis.id);
+    const zoomOption = zoomOptions?.[axis.id];
+    const filter = zoom === undefined && !zoomOption ? getFilters : undefined; // Do not apply filtering if zoom is already defined.
+
+    if (!filter) {
+      filteredDomains[axis.id] = domain;
+      return;
+    }
+    const rawTickNumber = domains[axis.id].tickNumber;
+    const axisExtrema = getAxisExtrema(axis, 'y', seriesConfig, axisIndex, formattedSeries, filter);
+    filteredDomains[axis.id] = calculateFinalDomain(axis, 'y', axisIndex, formattedSeries, axisExtrema, rawTickNumber, preferStrictDomainInLineCharts);
+  });
+  return filteredDomains;
+});
+export const selectorChartNormalizedXScales = createSelector([selectorChartRawXAxis, selectorChartFilteredXDomains], function selectorChartNormalizedXScales(axes, filteredDomains) {
+  const scales = {};
+  axes?.forEach(eachAxis => {
+    const axis = eachAxis;
+    const domain = filteredDomains[axis.id];
+    scales[axis.id] = getNormalizedAxisScale(axis, domain);
+  });
+  return scales;
+});
+export const selectorChartNormalizedYScales = createSelector([selectorChartRawYAxis, selectorChartFilteredYDomains], function selectorChartNormalizedYScales(axes, filteredDomains) {
+  const scales = {};
+  axes?.forEach(eachAxis => {
+    const axis = eachAxis;
+    const domain = filteredDomains[axis.id];
+    scales[axis.id] = getNormalizedAxisScale(axis, domain);
+  });
+  return scales;
+});
+export const selectorChartXScales = createSelector([selectorChartRawXAxis, selectorChartNormalizedXScales, selectorChartDrawingArea, selectorChartZoomMap], function selectorChartXScales(axes, normalizedScales, drawingArea, zoomMap) {
+  const scales = {};
+  axes?.forEach(eachAxis => {
+    const axis = eachAxis;
+    const zoom = zoomMap?.get(axis.id);
+    const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
+    const range = getRange(drawingArea, 'x', axis);
+    const scale = normalizedScales[axis.id].copy();
+    const zoomedRange = zoomScaleRange(range, zoomRange);
+    scale.range(zoomedRange);
+    scales[axis.id] = scale;
+  });
+  return scales;
+});
+export const selectorChartYScales = createSelector([selectorChartRawYAxis, selectorChartNormalizedYScales, selectorChartDrawingArea, selectorChartZoomMap], function selectorChartYScales(axes, normalizedScales, drawingArea, zoomMap) {
+  const scales = {};
+  axes?.forEach(eachAxis => {
+    const axis = eachAxis;
+    const zoom = zoomMap?.get(axis.id);
+    const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
+    const range = getRange(drawingArea, 'y', axis);
+    const scale = normalizedScales[axis.id].copy();
+    const scaleRange = isOrdinalScale(scale) ? range.reverse() : range;
+    const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
+    scale.range(zoomedRange);
+    scales[axis.id] = scale;
+  });
+  return scales;
 });
 
 /**
  * The only interesting selectors that merge axis data and zoom if provided.
  */
 
-export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorPreferStrictDomainInLineCharts, selectorChartXScales], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, scales) => computeAxisValue({
+export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartXDomains, selectorChartXScales], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, domains, scales) => computeAxisValue({
   scales,
   drawingArea,
   formattedSeries,
@@ -93,11 +208,9 @@ export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selecto
   seriesConfig,
   axisDirection: 'x',
   zoomMap,
-  zoomOptions,
-  getFilters,
-  preferStrictDomainInLineCharts
+  domains
 }));
-export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorPreferStrictDomainInLineCharts, selectorChartYScales], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, scales) => computeAxisValue({
+export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartYDomains, selectorChartYScales], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, domains, scales) => computeAxisValue({
   scales,
   drawingArea,
   formattedSeries,
@@ -105,9 +218,7 @@ export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selecto
   seriesConfig,
   axisDirection: 'y',
   zoomMap,
-  zoomOptions,
-  getFilters,
-  preferStrictDomainInLineCharts
+  domains
 }));
 export const selectorChartAxis = createSelector([selectorChartXAxis, selectorChartYAxis, (_, axisId) => axisId], (xAxes, yAxes, axisId) => xAxes?.axis[axisId] ?? yAxes?.axis[axisId]);
 export const selectorChartRawAxis = createSelector([selectorChartRawXAxis, selectorChartRawYAxis, (state, axisId) => axisId], (xAxes, yAxes, axisId) => {

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

@@ -23,9 +23,14 @@ export const useChartHighlight = ({
   }, [store, params.highlightedItem]);
   const clearHighlight = useEventCallback(() => {
     params.onHighlightChange?.(null);
+    const prevItem = store.getSnapshot().highlight.item;
+    if (prevItem === null) {
+      return;
+    }
     store.update(prev => _extends({}, prev, {
       highlight: {
-        item: null
+        item: null,
+        lastUpdate: 'pointer'
       }
     }));
   });
@@ -37,7 +42,8 @@ export const useChartHighlight = ({
     params.onHighlightChange?.(newItem);
     store.update(prev => _extends({}, prev, {
       highlight: {
-        item: newItem
+        item: newItem,
+        lastUpdate: 'pointer'
       }
     }));
   });
@@ -55,7 +61,8 @@ useChartHighlight.getDefaultizedParams = ({
 });
 useChartHighlight.getInitialState = params => ({
   highlight: {
-    item: params.highlightedItem
+    item: params.highlightedItem,
+    lastUpdate: 'pointer'
   }
 });
 useChartHighlight.params = {

package/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.d.ts

@@ -8,24 +8,24 @@ export declare const selectorChartsHighlightScopePerSeriesId: import("reselect")
 }, Map<SeriesId, Partial<HighlightScope> | undefined>, any[]>;
 export declare const selectorChartsHighlightedItem: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+} & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, HighlightItemData | null, any[]>;
 export declare const selectorChartsHighlightScope: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & import("./useChartHighlight.types.js").UseChartHighlightState, Partial<HighlightScope> | null, any[]>;
+} & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, Partial<HighlightScope> | null, any[]>;
 export declare const selectorChartsIsHighlightedCallback: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & import("./useChartHighlight.types.js").UseChartHighlightState, (item: HighlightItemData | null) => boolean, any[]>;
+} & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, (item: HighlightItemData | null) => boolean, any[]>;
 export declare const selectorChartsIsFadedCallback: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & import("./useChartHighlight.types.js").UseChartHighlightState, (item: HighlightItemData | null) => boolean, any[]>;
+} & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, (item: HighlightItemData | null) => boolean, any[]>;
 export declare const selectorChartsIsHighlighted: import("reselect").Selector<any, boolean, [item: HighlightItemData | null]>;
 export declare const selectorChartIsSeriesHighlighted: import("reselect").Selector<any, boolean, [seriesId: SeriesId]>;
 export declare const selectorChartIsSeriesFaded: import("reselect").Selector<any, boolean, [seriesId: SeriesId]>;

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

@@ -2,6 +2,7 @@ import { createSelector } from "../../utils/selectors.js";
 import { createIsHighlighted } from "./createIsHighlighted.js";
 import { createIsFaded } from "./createIsFaded.js";
 import { getSeriesHighlightedItem, getSeriesUnfadedItem, isSeriesFaded, isSeriesHighlighted } from "./highlightStates.js";
+import { selectorChartsKeyboardItem } from "../useChartKeyboardNavigation/index.js";
 const selectHighlight = state => state.highlight;
 const selectSeries = state => state.series;
 export const selectorChartsHighlightScopePerSeriesId = createSelector([selectSeries], series => {
@@ -15,8 +16,8 @@ export const selectorChartsHighlightScopePerSeriesId = createSelector([selectSer
   });
   return map;
 });
-export const selectorChartsHighlightedItem = createSelector([selectHighlight], function selectorChartsHighlightedItem(highlight) {
-  return highlight.item;
+export const selectorChartsHighlightedItem = createSelector([selectHighlight, selectorChartsKeyboardItem], function selectorChartsHighlightedItem(highlight, keyboardItem) {
+  return highlight.lastUpdate === 'pointer' ? highlight.item : keyboardItem;
 });
 export const selectorChartsHighlightScope = createSelector([selectorChartsHighlightScopePerSeriesId, selectorChartsHighlightedItem], function selectorChartsHighlightScope(seriesIdToHighlightScope, highlightedItem) {
   if (!highlightedItem) {

package/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.types.d.ts

@@ -28,6 +28,7 @@ export type HighlightItemData = {
    */
   dataIndex?: number;
 };
+export type HighlightUpdateSource = 'pointer' | 'keyboard';
 export interface UseChartHighlightInstance {
   /**
    * Remove all highlight.
@@ -59,6 +60,11 @@ export interface UseChartHighlightState {
      * The item currently highlighted.
      */
     item: HighlightItemData | null;
+    /**
+     * The last interaction highlight update.
+     * Used to decide if highlight should be based on pointer position or keyboard navigation.
+     */
+    lastUpdate: HighlightUpdateSource;
   };
 }
 export type UseChartHighlightSignature = ChartPluginSignature<{

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

@@ -132,7 +132,11 @@ export const useChartKeyboardNavigation = ({
         }
         if (newFocusedItem !== prevState.keyboardNavigation.item) {
           event.preventDefault();
-          return _extends({}, prevState, prevState.interaction && {
+          return _extends({}, prevState, prevState.highlight && {
+            highlight: _extends({}, prevState.highlight, {
+              lastUpdate: 'keyboard'
+            })
+          }, prevState.interaction && {
             interaction: _extends({}, prevState.interaction, {
               lastUpdate: 'keyboard'
             })

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.d.ts

@@ -34,4 +34,12 @@ export declare const selectorChartsKeyboardYAxisIndex: import("reselect").Select
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier | undefined, any[]>;
+} & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier | undefined, any[]>;
+export declare const selectorChartsKeyboardItem: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, {
+  seriesId: SeriesId;
+  dataIndex: number | undefined;
+} | null, any[]>;

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

@@ -30,4 +30,13 @@ const createSelectAxisHighlight = direction => (type, seriesId, dataIndex, axis,
   };
 };
 export const selectorChartsKeyboardXAxisIndex = createSelector([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, selectorChartXAxis, selectorChartSeriesProcessed], createSelectAxisHighlight('x'));
-export const selectorChartsKeyboardYAxisIndex = createSelector([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, selectorChartYAxis, selectorChartSeriesProcessed], createSelectAxisHighlight('y'));
+export const selectorChartsKeyboardYAxisIndex = createSelector([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, selectorChartYAxis, selectorChartSeriesProcessed], createSelectAxisHighlight('y'));
+export const selectorChartsKeyboardItem = createSelector([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex], function selectorChartsKeyboardItem(seriesType, seriesId, dataIndex) {
+  if (seriesId === undefined) {
+    return null;
+  }
+  return {
+    seriesId,
+    dataIndex: seriesType === 'line' ? undefined : dataIndex
+  };
+});

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.types.d.ts

@@ -2,6 +2,7 @@ import { ChartPluginSignature } from "../../models/index.js";
 import { ChartSeriesType } from "../../../../models/seriesType/config.js";
 import { SeriesId } from "../../../../models/seriesType/common.js";
 import { UseChartInteractionSignature } from "../useChartInteraction/index.js";
+import { UseChartHighlightSignature } from "../useChartHighlight/index.js";
 export interface UseChartKeyboardNavigationInstance {}
 type SeriesItemIdentifier = {
   /**
@@ -31,6 +32,6 @@ export type UseChartKeyboardNavigationSignature = ChartPluginSignature<{
   defaultizedParams: UseChartKeyboardNavigationParameters;
   instance: UseChartKeyboardNavigationInstance;
   state: UseChartKeyboardNavigationState;
-  optionalDependencies: [UseChartInteractionSignature];
+  optionalDependencies: [UseChartInteractionSignature, UseChartHighlightSignature];
 }>;
 export {};

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
-import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
+import { isBandScaleConfig, isPointScaleConfig, isContinuousScaleConfig } from "../../../../models/axis.js";
 import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
 import { getDefaultTickNumber, getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
 import { getScale } from "../../../getScale.js";
@@ -84,7 +84,7 @@ export function computeAxisValue({
         completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
       }
     }
-    if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+    if (!isContinuousScaleConfig(axis)) {
       // 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;
     }

package/esm/internals/scaleGuards.d.ts

@@ -1,11 +1,17 @@
 import type { ScaleBand } from '@mui/x-charts-vendor/d3-scale';
 import { D3OrdinalScale, D3Scale } from "../models/axis.js";
-export declare function isOrdinalScale<T extends {
+export declare function isOrdinalScale<Domain extends {
   toString(): string;
-}>(scale: D3Scale<T>): scale is D3OrdinalScale<T>;
-export declare function isBandScale<T extends {
+} = {
   toString(): string;
-}>(scale: D3Scale<T>): scale is ScaleBand<T>;
-export declare function isPointScale<T extends {
+}, Range = number, Output = number>(scale: D3Scale<Domain, Range, Output>): scale is D3OrdinalScale<Domain>;
+export declare function isBandScale<Domain extends {
   toString(): string;
-}>(scale: D3Scale<T>): scale is D3OrdinalScale<T>;
+} = {
+  toString(): string;
+}, Range = number, Output = number>(scale: D3Scale<Domain, Range, Output>): scale is ScaleBand<Domain>;
+export declare function isPointScale<Domain extends {
+  toString(): string;
+} = {
+  toString(): string;
+}, Range = number, Output = number>(scale: D3Scale<Domain, Range, Output>): scale is D3OrdinalScale<Domain>;

package/esm/internals/symlogScale.js

@@ -75,6 +75,11 @@ export function scaleSymlog(_domain, _range) {
       return tickFormat(tick);
     };
   };
+
+  /* Adaptation of https://github.com/d3/d3-scale/blob/d6904a4bde09e16005e0ad8ca3e25b10ce54fa0d/src/symlog.js#L30 */
+  scale.copy = () => {
+    return scaleSymlog(scale.domain(), scale.range()).constant(scale.constant());
+  };
   return scale;
 }
 function generateScales(scale) {

package/esm/locales/enUS.js

@@ -4,17 +4,17 @@ import { getChartsLocalization } from "./utils/getChartsLocalization.js";
 // This object is not Partial<ChartsLocaleText> because it is the default values
 
 export const enUSLocaleText = {
-  /* Overlay */
+  // Overlay
   loading: 'Loading data…',
   noData: 'No data to display',
-  /* Toolbar */
+  // Toolbar
   zoomIn: 'Zoom in',
   zoomOut: 'Zoom out',
   toolbarExport: 'Export',
-  /* Toolbar Export Menu */
+  // Toolbar Export Menu
   toolbarExportPrint: 'Print',
   toolbarExportImage: mimeType => `Export as ${imageMimeTypes[mimeType] ?? mimeType}`,
-  /* Charts renderer configuration */
+  // Charts renderer configuration
   chartTypeBar: 'Bar',
   chartTypeColumn: 'Column',
   chartTypeLine: 'Line',