[charts] Fix zoom slider preview with discard filter mode (@JCQuintas)

docs/data/charts/zoom-and-pan/ZoomSliderPreview.js

@@ -37,6 +37,16 @@ const gdpPerCapitaFormatter = new Intl.NumberFormat('en-US', {
 });
 const populationFormatter = new Intl.NumberFormat('en-US', { notation: 'compact' });
 
+const commonXAxisProps = {
+  id: 'x',
+  zoom: { filterMode: 'discard', slider: { enabled: true, preview: true } },
+};
+
+const commonProps = {
+  initialZoom: [{ axisId: 'x', start: 20, end: 80 }],
+  height: 400,
+};
+
 const lineXAxis = {
   scaleType: 'time',
   id: 'x',
@@ -60,7 +70,6 @@ const lineSettings = {
       valueFormatter: (v) => percentageFormatter.format(v),
     },
   ],
-  height: 400,
 };
 
 const areaXAxis = {
@@ -88,7 +97,6 @@ const areaSettings = {
     stack: 'population',
     valueFormatter: (v) => populationFormatter.format(v),
   })),
-  height: 400,
 };
 
 const scatterXAxis = {
@@ -108,7 +116,6 @@ const scatterSettings = {
     valueFormatter: (value) =>
       `${countryData[value.id].country} - Birth rate: ${value.y} - GDP per capita: ${gdpPerCapitaFormatter.format(value.x)}`,
   })),
-  height: 400,
 };
 
 const sortedShareOfRenewables = shareOfRenewables.toSorted(
@@ -126,7 +133,6 @@ const barSettings = {
       valueFormatter: (v) => percentageFormatter.format(v),
     },
   ],
-  height: 400,
 };
 
 const rangeBarXAxis = {
@@ -153,7 +159,6 @@ const rangeBarSettings = {
       data: temperatureBerlinPorto.berlin,
     },
   ],
-  height: 300,
 };
 
 export default function ZoomSliderPreview() {
@@ -196,10 +201,9 @@ function LineChartPreview() {
         Unemployment Rate in United States (1948-2025)
       </Typography>
       <LineChartPro
+        {...commonProps}
         {...lineSettings}
-        xAxis={[
-          { ...lineXAxis, zoom: { slider: { enabled: true, preview: true } } },
-        ]}
+        xAxis={[{ ...lineXAxis, ...commonXAxisProps }]}
       />
       <Typography variant="caption">
         Source: Federal Reserve Bank of St. Louis. Updated: Jun 6, 2025 7:46 AM CDT.
@@ -215,10 +219,9 @@ function AreaChartPreview() {
         Population by Age Group in 2050 (Projected)
       </Typography>
       <LineChartPro
+        {...commonProps}
         {...areaSettings}
-        xAxis={[
-          { ...areaXAxis, zoom: { slider: { enabled: true, preview: true } } },
-        ]}
+        xAxis={[{ ...areaXAxis, ...commonXAxisProps }]}
       />
       <Typography variant="caption">
         Source: World Population Prospects: The 2024 Revision, United Nations.
@@ -234,8 +237,9 @@ function BarChartPreview() {
         Share of Primary Energy Consumption from Renewables (2023)
       </Typography>
       <BarChartPro
+        {...commonProps}
         {...barSettings}
-        xAxis={[{ ...barXAxis, zoom: { slider: { enabled: true, preview: true } } }]}
+        xAxis={[{ ...barXAxis, ...commonXAxisProps }]}
       />
       <Typography variant="caption">
         Source: Our World in Data. Updated: 2023.
@@ -251,10 +255,9 @@ function RangeBarChartPreview() {
         Average monthly temperature ranges in °C for Porto and Berlin in 1991-2020
       </Typography>
       <BarChartPremium
+        {...commonProps}
         {...rangeBarSettings}
-        xAxis={[
-          { ...rangeBarXAxis, zoom: { slider: { enabled: true, preview: true } } },
-        ]}
+        xAxis={[{ ...rangeBarXAxis, ...commonXAxisProps }]}
       />
       <Typography variant="caption">
         Source: IPMA (Porto), climate-data.org (Berlin)
@@ -270,10 +273,9 @@ function ScatterChartPreview() {
         Births per woman vs GDP per capita (USD, 2023)
       </Typography>
       <ScatterChartPro
+        {...commonProps}
         {...scatterSettings}
-        xAxis={[
-          { ...scatterXAxis, zoom: { slider: { enabled: true, preview: true } } },
-        ]}
+        xAxis={[{ ...scatterXAxis, ...commonXAxisProps }]}
       />
       <Typography variant="caption">
         GDP per capita is expressed in international dollars at 2021 prices. <br />

docs/data/charts/zoom-and-pan/ZoomSliderPreview.tsx

@@ -47,6 +47,16 @@ const gdpPerCapitaFormatter = new Intl.NumberFormat('en-US', {
 });
 const populationFormatter = new Intl.NumberFormat('en-US', { notation: 'compact' });
 
+const commonXAxisProps = {
+  id: 'x',
+  zoom: { filterMode: 'discard', slider: { enabled: true, preview: true } },
+} as const;
+
+const commonProps = {
+  initialZoom: [{ axisId: 'x', start: 20, end: 80 }],
+  height: 400,
+} as const;
+
 const lineXAxis = {
   scaleType: 'time',
   id: 'x',
@@ -70,7 +80,6 @@ const lineSettings = {
       valueFormatter: (v: number | null) => percentageFormatter.format(v!),
     },
   ],
-  height: 400,
 } satisfies Partial<LineChartProProps>;
 
 const areaXAxis = {
@@ -99,7 +108,6 @@ const areaSettings = {
     stack: 'population',
     valueFormatter: (v: number | null) => populationFormatter.format(v!),
   })),
-  height: 400,
 } satisfies Partial<LineChartProProps>;
 
 const scatterXAxis = {
@@ -122,7 +130,6 @@ const scatterSettings = {
     valueFormatter: (value: ScatterValueType | null) =>
       `${countryData[value!.id as keyof typeof countryData].country} - Birth rate: ${value!.y} - GDP per capita: ${gdpPerCapitaFormatter.format(value!.x)}`,
   })),
-  height: 400,
 } satisfies Partial<ScatterChartProProps>;
 
 const sortedShareOfRenewables = shareOfRenewables.toSorted(
@@ -140,7 +147,6 @@ const barSettings = {
       valueFormatter: (v: number | null) => percentageFormatter.format(v!),
     },
   ],
-  height: 400,
 } satisfies Partial<BarChartProProps>;
 
 const rangeBarXAxis = {
@@ -168,7 +174,6 @@ const rangeBarSettings = {
       data: temperatureBerlinPorto.berlin,
     },
   ],
-  height: 300,
 } satisfies BarChartPremiumProps;
 
 export default function ZoomSliderPreview() {
@@ -211,10 +216,9 @@ function LineChartPreview() {
         Unemployment Rate in United States (1948-2025)
       </Typography>
       <LineChartPro
+        {...commonProps}
         {...lineSettings}
-        xAxis={[
-          { ...lineXAxis, zoom: { slider: { enabled: true, preview: true } } },
-        ]}
+        xAxis={[{ ...lineXAxis, ...commonXAxisProps }]}
       />
       <Typography variant="caption">
         Source: Federal Reserve Bank of St. Louis. Updated: Jun 6, 2025 7:46 AM CDT.
@@ -230,10 +234,9 @@ function AreaChartPreview() {
         Population by Age Group in 2050 (Projected)
       </Typography>
       <LineChartPro
+        {...commonProps}
         {...areaSettings}
-        xAxis={[
-          { ...areaXAxis, zoom: { slider: { enabled: true, preview: true } } },
-        ]}
+        xAxis={[{ ...areaXAxis, ...commonXAxisProps }]}
       />
       <Typography variant="caption">
         Source: World Population Prospects: The 2024 Revision, United Nations.
@@ -249,8 +252,9 @@ function BarChartPreview() {
         Share of Primary Energy Consumption from Renewables (2023)
       </Typography>
       <BarChartPro
+        {...commonProps}
         {...barSettings}
-        xAxis={[{ ...barXAxis, zoom: { slider: { enabled: true, preview: true } } }]}
+        xAxis={[{ ...barXAxis, ...commonXAxisProps }]}
       />
       <Typography variant="caption">
         Source: Our World in Data. Updated: 2023.
@@ -266,10 +270,9 @@ function RangeBarChartPreview() {
         Average monthly temperature ranges in °C for Porto and Berlin in 1991-2020
       </Typography>
       <BarChartPremium
+        {...commonProps}
         {...rangeBarSettings}
-        xAxis={[
-          { ...rangeBarXAxis, zoom: { slider: { enabled: true, preview: true } } },
-        ]}
+        xAxis={[{ ...rangeBarXAxis, ...commonXAxisProps }]}
       />
       <Typography variant="caption">
         Source: IPMA (Porto), climate-data.org (Berlin)
@@ -285,10 +288,9 @@ function ScatterChartPreview() {
         Births per woman vs GDP per capita (USD, 2023)
       </Typography>
       <ScatterChartPro
+        {...commonProps}
         {...scatterSettings}
-        xAxis={[
-          { ...scatterXAxis, zoom: { slider: { enabled: true, preview: true } } },
-        ]}
+        xAxis={[{ ...scatterXAxis, ...commonXAxisProps }]}
       />
       <Typography variant="caption">
         GDP per capita is expressed in international dollars at 2021 prices. <br />

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPreview.selectors.ts

@@ -10,8 +10,6 @@ import {
 } from '../../corePlugins/useChartSeries';
 import { computeAxisValue } from './computeAxisValue';
 import {
-  selectorChartNormalizedXScales,
-  selectorChartNormalizedYScales,
   selectorChartXAxisWithDomains,
   selectorChartYAxisWithDomains,
   selectorChartZoomOptionsLookup,
@@ -26,7 +24,7 @@ import {
 import { type ZoomData } from './zoom.types';
 import { selectorChartDrawingArea } from '../../corePlugins/useChartDimensions';
 import { ZOOM_SLIDER_PREVIEW_SIZE } from '../../../constants';
-import { getRange } from './getAxisScale';
+import { getNormalizedAxisScale, getRange } from './getAxisScale';
 import { zoomScaleRange } from './zoom';
 import { isOrdinalScale } from '../../../scaleGuards';
 
@@ -57,12 +55,12 @@ export const selectorChartPreviewXScales = createSelectorMemoized(
   selectorChartRawXAxis,
   selectorChartDrawingArea,
   selectorChartZoomOptionsLookup,
-  selectorChartNormalizedXScales,
+  selectorChartXAxisWithDomains,
   function selectorChartPreviewXScales(
     xAxes,
     chartDrawingArea,
     zoomOptions,
-    normalizedXScales,
+    { domains: unfilteredDomains },
     axisId: AxisId,
   ) {
     const hasAxis = xAxes?.some((axis) => axis.id === axisId);
@@ -74,7 +72,7 @@ export const selectorChartPreviewXScales = createSelectorMemoized(
     xAxes?.forEach((eachAxis) => {
       const axis = eachAxis as Readonly<DefaultedAxis<ScaleName, any, Readonly<ChartsAxisProps>>>;
 
-      const scale = normalizedXScales[axis.id].copy();
+      const scale = getNormalizedAxisScale(axis, unfilteredDomains[axis.id].domain);
       const range = getRange(drawingArea, 'x', axis);
       const zoomedRange = zoomScaleRange(range, [options.minStart, options.maxEnd]);
 
@@ -134,12 +132,12 @@ export const selectorChartPreviewYScales = createSelectorMemoized(
   selectorChartRawYAxis,
   selectorChartDrawingArea,
   selectorChartZoomOptionsLookup,
-  selectorChartNormalizedYScales,
+  selectorChartYAxisWithDomains,
   function selectorChartPreviewYScales(
     yAxes,
     chartDrawingArea,
     zoomOptions,
-    normalizedYScales,
+    { domains: unfilteredDomains },
     axisId: AxisId,
   ) {
     const hasAxis = yAxes?.some((axis) => axis.id === axisId);
@@ -151,7 +149,7 @@ export const selectorChartPreviewYScales = createSelectorMemoized(
     yAxes?.forEach((eachAxis) => {
       const axis = eachAxis as Readonly<DefaultedAxis<ScaleName, any, Readonly<ChartsAxisProps>>>;
 
-      const scale = normalizedYScales[axis.id].copy();
+      const scale = getNormalizedAxisScale(axis, unfilteredDomains[axis.id].domain);
       let range = getRange(drawingArea, 'y', axis);
 
       if (isOrdinalScale(scale)) {