@mui/x-charts 9.6.0 → 9.7.0

package/ScatterChart/async/ScatterAsyncBatch.d.mts

@@ -1,20 +1,25 @@
 import * as React from 'react';
-import { type DefaultizedScatterSeriesType } from "../../models/seriesType/scatter.mjs";
+import type { DefaultizedScatterSeriesType } from "../../models/seriesType/scatter.mjs";
 import type { ColorGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
-import { type ScatterProps } from "../Scatter.mjs";
+import type { ScatterProps } from "../Scatter.mjs";
 export interface ScatterAsyncBatchProps extends Pick<ScatterProps, 'series' | 'colorGetter' | 'onItemClick' | 'slots' | 'slotProps' | 'classes'> {
   series: DefaultizedScatterSeriesType;
   colorGetter: ColorGetter<'scatter'>;
-  /** First point index of this batch (inclusive). */
+  /** First `dataIndex` this batch renders. */
   start: number;
-  /** Last point index of this batch (exclusive). */
-  end: number;
+  /** Stride between rendered `dataIndex`es, so the batch is a uniform sample. */
+  step: number;
   /**
-   * Whether this batch is allowed to render its markers yet. `ScatterAsync`
-   * ramps this up batch by batch across animation frames for a progressive
-   * paint. When `false` the `<g>` still mounts but stays empty.
+   * Whether this batch may render its markers yet. Ramped batch by batch across
+   * frames for the progressive paint. When `false` the `<g>` mounts empty.
    */
   revealed: boolean;
+  /**
+   * Whether a zoom/pan interaction is in progress. While interacting, per-marker
+   * highlight state and interaction handlers are skipped: useless mid-drag and
+   * the dominant per-frame cost.
+   */
+  isInteracting?: boolean;
 }
 /**
  * @ignore - internal component.

package/ScatterChart/async/ScatterAsyncBatch.d.ts

@@ -1,20 +1,25 @@
 import * as React from 'react';
-import { type DefaultizedScatterSeriesType } from "../../models/seriesType/scatter.js";
+import type { DefaultizedScatterSeriesType } from "../../models/seriesType/scatter.js";
 import type { ColorGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
-import { type ScatterProps } from "../Scatter.js";
+import type { ScatterProps } from "../Scatter.js";
 export interface ScatterAsyncBatchProps extends Pick<ScatterProps, 'series' | 'colorGetter' | 'onItemClick' | 'slots' | 'slotProps' | 'classes'> {
   series: DefaultizedScatterSeriesType;
   colorGetter: ColorGetter<'scatter'>;
-  /** First point index of this batch (inclusive). */
+  /** First `dataIndex` this batch renders. */
   start: number;
-  /** Last point index of this batch (exclusive). */
-  end: number;
+  /** Stride between rendered `dataIndex`es, so the batch is a uniform sample. */
+  step: number;
   /**
-   * Whether this batch is allowed to render its markers yet. `ScatterAsync`
-   * ramps this up batch by batch across animation frames for a progressive
-   * paint. When `false` the `<g>` still mounts but stays empty.
+   * Whether this batch may render its markers yet. Ramped batch by batch across
+   * frames for the progressive paint. When `false` the `<g>` mounts empty.
    */
   revealed: boolean;
+  /**
+   * Whether a zoom/pan interaction is in progress. While interacting, per-marker
+   * highlight state and interaction handlers are skipped: useless mid-drag and
+   * the dominant per-frame cost.
+   */
+  isInteracting?: boolean;
 }
 /**
  * @ignore - internal component.

package/ScatterChart/async/ScatterAsyncBatch.js

@@ -33,8 +33,9 @@ function ScatterAsyncBatchComponent(props) {
     slots,
     slotProps,
     start,
-    end,
+    step,
     revealed,
+    isInteracting,
     classes: inClasses
   } = props;
   const classes = (0, _scatterClasses.useUtilityClasses)({
@@ -65,13 +66,19 @@ function ScatterAsyncBatchComponent(props) {
       className: classes.series
     });
   }
-  const view = (0, _scatterRenderData.getScatterBatchView)(renderData, start, end);
+  const {
+    coords,
+    count
+  } = renderData;
   const markers = [];
-  const nLocal = view.length / 3;
-  for (let local = 0; local < nLocal; local += 1) {
-    const x = view[local * 3];
-    const y = view[local * 3 + 1];
-    const dataIndex = view[local * 3 + 2];
+  const safeStep = Math.max(1, step);
+  for (let dataIndex = start; dataIndex < count; dataIndex += safeStep) {
+    // Skip off-screen points (kept in-array to keep batches stable across pan).
+    if (coords[dataIndex * 3 + 2] === 0) {
+      continue;
+    }
+    const x = coords[dataIndex * 3];
+    const y = coords[dataIndex * 3 + 1];
     const dataPoint = {
       x,
       y,
@@ -79,7 +86,7 @@ function ScatterAsyncBatchComponent(props) {
       seriesId: series.id,
       type: 'scatter'
     };
-    const highlightState = getHighlightState(dataPoint);
+    const highlightState = isInteracting ? 'none' : getHighlightState(dataPoint);
     const isItemHighlighted = highlightState === 'highlighted';
     const isItemFaded = highlightState === 'faded';
     markers.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Marker, (0, _extends2.default)({
@@ -97,7 +104,7 @@ function ScatterAsyncBatchComponent(props) {
       })),
       "data-highlighted": isItemHighlighted || undefined,
       "data-faded": isItemFaded || undefined
-    }, skipInteractionHandlers ? undefined : (0, _useInteractionItemProps.getInteractionItemProps)(instance, dataPoint), markerProps), dataIndex));
+    }, skipInteractionHandlers || isInteracting ? undefined : (0, _useInteractionItemProps.getInteractionItemProps)(instance, dataPoint), markerProps), dataIndex));
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     "data-series": series.id,
@@ -106,7 +113,6 @@ function ScatterAsyncBatchComponent(props) {
   });
 }
 
-// Memoized so a reveal tick (which re-renders every `ScatterAsync`) only
-// re-renders the one batch whose `revealed` prop changed.
+// Memoized so a reveal tick only re-renders the batch whose `revealed` changed.
 const ScatterAsyncBatch = exports.ScatterAsyncBatch = /*#__PURE__*/React.memo(ScatterAsyncBatchComponent);
 if (process.env.NODE_ENV !== "production") ScatterAsyncBatch.displayName = "ScatterAsyncBatch";

package/ScatterChart/async/ScatterAsyncBatch.mjs

@@ -13,7 +13,7 @@ import { selectorChartsIsVoronoiEnabled } from "../../internals/plugins/featureP
 import { ScatterMarker } from "../ScatterMarker.mjs";
 import { useUtilityClasses } from "../scatterClasses.mjs";
 import { useChartsContext } from "../../context/ChartsProvider/index.mjs";
-import { getScatterBatchView, selectorScatterSeriesRenderData } from "./scatterRenderData.selectors.mjs";
+import { selectorScatterSeriesRenderData } from "./scatterRenderData.selectors.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -26,8 +26,9 @@ function ScatterAsyncBatchComponent(props) {
     slots,
     slotProps,
     start,
-    end,
+    step,
     revealed,
+    isInteracting,
     classes: inClasses
   } = props;
   const classes = useUtilityClasses({
@@ -58,13 +59,19 @@ function ScatterAsyncBatchComponent(props) {
       className: classes.series
     });
   }
-  const view = getScatterBatchView(renderData, start, end);
+  const {
+    coords,
+    count
+  } = renderData;
   const markers = [];
-  const nLocal = view.length / 3;
-  for (let local = 0; local < nLocal; local += 1) {
-    const x = view[local * 3];
-    const y = view[local * 3 + 1];
-    const dataIndex = view[local * 3 + 2];
+  const safeStep = Math.max(1, step);
+  for (let dataIndex = start; dataIndex < count; dataIndex += safeStep) {
+    // Skip off-screen points (kept in-array to keep batches stable across pan).
+    if (coords[dataIndex * 3 + 2] === 0) {
+      continue;
+    }
+    const x = coords[dataIndex * 3];
+    const y = coords[dataIndex * 3 + 1];
     const dataPoint = {
       x,
       y,
@@ -72,7 +79,7 @@ function ScatterAsyncBatchComponent(props) {
       seriesId: series.id,
       type: 'scatter'
     };
-    const highlightState = getHighlightState(dataPoint);
+    const highlightState = isInteracting ? 'none' : getHighlightState(dataPoint);
     const isItemHighlighted = highlightState === 'highlighted';
     const isItemFaded = highlightState === 'faded';
     markers.push(/*#__PURE__*/_jsx(Marker, _extends({
@@ -90,7 +97,7 @@ function ScatterAsyncBatchComponent(props) {
       })),
       "data-highlighted": isItemHighlighted || undefined,
       "data-faded": isItemFaded || undefined
-    }, skipInteractionHandlers ? undefined : getInteractionItemProps(instance, dataPoint), markerProps), dataIndex));
+    }, skipInteractionHandlers || isInteracting ? undefined : getInteractionItemProps(instance, dataPoint), markerProps), dataIndex));
   }
   return /*#__PURE__*/_jsx("g", {
     "data-series": series.id,
@@ -99,8 +106,7 @@ function ScatterAsyncBatchComponent(props) {
   });
 }
 
-// Memoized so a reveal tick (which re-renders every `ScatterAsync`) only
-// re-renders the one batch whose `revealed` prop changed.
+// Memoized so a reveal tick only re-renders the batch whose `revealed` changed.
 const ScatterAsyncBatch = /*#__PURE__*/React.memo(ScatterAsyncBatchComponent);
 if (process.env.NODE_ENV !== "production") ScatterAsyncBatch.displayName = "ScatterAsyncBatch";
 export { ScatterAsyncBatch };

package/ScatterChart/async/scatterRenderData.selectors.d.mts

@@ -1,38 +1,35 @@
 /**
- * Pre-computed render data for a single scatter series.
- *
- * Coordinates are stored in a packed `Float64Array` (stride 3: `[x0, y0, i0,
- * x1, y1, i1, ...]`, where `iN` is the original `dataIndex`). Only points that
- * project inside the drawing area are kept, so the progressive renderer can
- * size its batches by the number of *visible* points — when zoomed in tightly
- * the wave finishes in a single tick. Batches are contiguous slices of this
- * array, so a batch's data is obtained with a zero-copy `subarray` view (see
- * {@link getScatterBatchView}).
+ * Render data for one scatter series. Packed `Float64Array` indexed by
+ * `dataIndex` (stride 3: `[x, y, visible]`). Off-screen points keep their slot
+ * so a point's batch stays fixed across zoom/pan (no popping).
  */
 export interface ScatterSeriesRenderData {
-  /** Packed projected pixel coordinates + dataIndex, stride 3. */
+  /** Packed projected coordinates + visibility flag, stride 3. */
   coords: Float64Array;
-  /** Number of visible points (i.e. `coords.length / 3`). */
+  /** Total number of points (`coords.length / 3`). */
   count: number;
 }
-/**
- * Packed projected coordinates for every scatter series, filtered to the
- * drawing area. Recomputes when the processed series, axis scales, or drawing
- * area change.
- */
+/** Packed projected coordinates for every scatter series, indexed by `dataIndex`. */
 export declare const selectorScatterRenderData: (args_0: import("../../internals/plugins/corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../internals/index.mjs").ChartsSeriesConfig> & import("../../internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../internals/index.mjs").ChartsSeriesConfig> & import("../../internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../internals/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../internals/index.mjs").ChartStateCacheKey;
 }) => Map<string, ScatterSeriesRenderData>;
+/** Pixel bounds (inclusive) a point must fall within to be flagged visible. */
+export interface ScatterVisibilityBounds {
+  xMin: number;
+  xMax: number;
+  yMin: number;
+  yMax: number;
+}
 /**
- * Render data for a single scatter series, or `undefined` while it is not
- * available yet (processors/axes still pending).
+ * Projects `data` into a `dataIndex`-indexed packed array (stride 3:
+ * `[x, y, visible]`). Every point keeps its slot; `visible` is `1` inside
+ * `bounds`, `0` otherwise.
  */
+export declare function packScatterSeriesCoords(data: readonly {
+  x: number | Date;
+  y: number | Date;
+}[], getXPosition: (value: number | Date) => number, getYPosition: (value: number | Date) => number, bounds: ScatterVisibilityBounds): ScatterSeriesRenderData;
+/** Render data for one series, or `undefined` while processors/axes are pending. */
 export declare const selectorScatterSeriesRenderData: (args_0: import("../../internals/plugins/corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../internals/index.mjs").ChartsSeriesConfig> & import("../../internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../internals/index.mjs").ChartsSeriesConfig> & import("../../internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../internals/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../internals/index.mjs").ChartStateCacheKey;
-}, seriesId: string) => ScatterSeriesRenderData | undefined;
-/**
- * Zero-copy view of one batch's coordinates. `start`/`end` are visible-point
- * indices (not original `dataIndex` values). The returned `Float64Array` shares
- * the buffer with `renderData.coords`.
- */
-export declare function getScatterBatchView(renderData: ScatterSeriesRenderData, start: number, end: number): Float64Array;
+}, seriesId: string) => ScatterSeriesRenderData | undefined;

package/ScatterChart/async/scatterRenderData.selectors.d.ts

@@ -1,38 +1,35 @@
 /**
- * Pre-computed render data for a single scatter series.
- *
- * Coordinates are stored in a packed `Float64Array` (stride 3: `[x0, y0, i0,
- * x1, y1, i1, ...]`, where `iN` is the original `dataIndex`). Only points that
- * project inside the drawing area are kept, so the progressive renderer can
- * size its batches by the number of *visible* points — when zoomed in tightly
- * the wave finishes in a single tick. Batches are contiguous slices of this
- * array, so a batch's data is obtained with a zero-copy `subarray` view (see
- * {@link getScatterBatchView}).
+ * Render data for one scatter series. Packed `Float64Array` indexed by
+ * `dataIndex` (stride 3: `[x, y, visible]`). Off-screen points keep their slot
+ * so a point's batch stays fixed across zoom/pan (no popping).
  */
 export interface ScatterSeriesRenderData {
-  /** Packed projected pixel coordinates + dataIndex, stride 3. */
+  /** Packed projected coordinates + visibility flag, stride 3. */
   coords: Float64Array;
-  /** Number of visible points (i.e. `coords.length / 3`). */
+  /** Total number of points (`coords.length / 3`). */
   count: number;
 }
-/**
- * Packed projected coordinates for every scatter series, filtered to the
- * drawing area. Recomputes when the processed series, axis scales, or drawing
- * area change.
- */
+/** Packed projected coordinates for every scatter series, indexed by `dataIndex`. */
 export declare const selectorScatterRenderData: (args_0: import("../../internals/plugins/corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../internals/index.js").ChartsSeriesConfig> & import("../../internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../internals/index.js").ChartsSeriesConfig> & import("../../internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../internals/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../internals/index.js").ChartStateCacheKey;
 }) => Map<string, ScatterSeriesRenderData>;
+/** Pixel bounds (inclusive) a point must fall within to be flagged visible. */
+export interface ScatterVisibilityBounds {
+  xMin: number;
+  xMax: number;
+  yMin: number;
+  yMax: number;
+}
 /**
- * Render data for a single scatter series, or `undefined` while it is not
- * available yet (processors/axes still pending).
+ * Projects `data` into a `dataIndex`-indexed packed array (stride 3:
+ * `[x, y, visible]`). Every point keeps its slot; `visible` is `1` inside
+ * `bounds`, `0` otherwise.
  */
+export declare function packScatterSeriesCoords(data: readonly {
+  x: number | Date;
+  y: number | Date;
+}[], getXPosition: (value: number | Date) => number, getYPosition: (value: number | Date) => number, bounds: ScatterVisibilityBounds): ScatterSeriesRenderData;
+/** Render data for one series, or `undefined` while processors/axes are pending. */
 export declare const selectorScatterSeriesRenderData: (args_0: import("../../internals/plugins/corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../internals/index.js").ChartsSeriesConfig> & import("../../internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../internals/index.js").ChartsSeriesConfig> & import("../../internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../internals/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../internals/index.js").ChartStateCacheKey;
-}, seriesId: string) => ScatterSeriesRenderData | undefined;
-/**
- * Zero-copy view of one batch's coordinates. `start`/`end` are visible-point
- * indices (not original `dataIndex` values). The returned `Float64Array` shares
- * the buffer with `renderData.coords`.
- */
-export declare function getScatterBatchView(renderData: ScatterSeriesRenderData, start: number, end: number): Float64Array;
+}, seriesId: string) => ScatterSeriesRenderData | undefined;

package/ScatterChart/async/scatterRenderData.selectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getScatterBatchView = getScatterBatchView;
+exports.packScatterSeriesCoords = packScatterSeriesCoords;
 exports.selectorScatterSeriesRenderData = exports.selectorScatterRenderData = void 0;
 var _store = require("@mui/x-internals/store");
 var _getValueToPositionMapper = require("../../hooks/getValueToPositionMapper");
@@ -11,24 +11,14 @@ var _useChartSeries = require("../../internals/plugins/corePlugins/useChartSerie
 var _useChartDimensions = require("../../internals/plugins/corePlugins/useChartDimensions");
 var _useChartCartesianAxis = require("../../internals/plugins/featurePlugins/useChartCartesianAxis");
 /**
- * Pre-computed render data for a single scatter series.
- *
- * Coordinates are stored in a packed `Float64Array` (stride 3: `[x0, y0, i0,
- * x1, y1, i1, ...]`, where `iN` is the original `dataIndex`). Only points that
- * project inside the drawing area are kept, so the progressive renderer can
- * size its batches by the number of *visible* points — when zoomed in tightly
- * the wave finishes in a single tick. Batches are contiguous slices of this
- * array, so a batch's data is obtained with a zero-copy `subarray` view (see
- * {@link getScatterBatchView}).
+ * Render data for one scatter series. Packed `Float64Array` indexed by
+ * `dataIndex` (stride 3: `[x, y, visible]`). Off-screen points keep their slot
+ * so a point's batch stays fixed across zoom/pan (no popping).
  */
 
 const EMPTY_RENDER_DATA = new Map();
 
-/**
- * Packed projected coordinates for every scatter series, filtered to the
- * drawing area. Recomputes when the processed series, axis scales, or drawing
- * area change.
- */
+/** Packed projected coordinates for every scatter series, indexed by `dataIndex`. */
 const selectorScatterRenderData = exports.selectorScatterRenderData = (0, _store.createSelectorMemoized)(_useChartSeries.selectorChartSeriesProcessed, _useChartCartesianAxis.selectorChartXAxis, _useChartCartesianAxis.selectorChartYAxis, _useChartDimensions.selectorChartDrawingArea, function selectorScatterRenderData(processedSeries, xAxes, yAxes, drawingArea) {
   const scatter = processedSeries.scatter;
   if (scatter === undefined) {
@@ -50,44 +40,39 @@ const selectorScatterRenderData = exports.selectorScatterRenderData = (0, _store
     }
     const getXPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(xAxis.scale);
     const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yAxis.scale);
-    const data = series.data;
-    const n = data.length;
-    const packed = new Float64Array(n * 3);
-    let j = 0;
-    for (let i = 0; i < n; i += 1) {
-      const x = getXPosition(data[i].x);
-      if (!(x >= xMin && x <= xMax)) {
-        continue;
-      }
-      const y = getYPosition(data[i].y);
-      if (!(y >= yMin && y <= yMax)) {
-        continue;
-      }
-      packed[j] = x;
-      packed[j + 1] = y;
-      packed[j + 2] = i;
-      j += 3;
-    }
-    const coords = packed.slice(0, j);
-    result.set(seriesId, {
-      coords,
-      count: j / 3
-    });
+    result.set(seriesId, packScatterSeriesCoords(series.data, getXPosition, getYPosition, {
+      xMin,
+      xMax,
+      yMin,
+      yMax
+    }));
   }
   return result;
 });
 
-/**
- * Render data for a single scatter series, or `undefined` while it is not
- * available yet (processors/axes still pending).
- */
-const selectorScatterSeriesRenderData = exports.selectorScatterSeriesRenderData = (0, _store.createSelector)(selectorScatterRenderData, (renderData, seriesId) => renderData.get(seriesId));
+/** Pixel bounds (inclusive) a point must fall within to be flagged visible. */
 
 /**
- * Zero-copy view of one batch's coordinates. `start`/`end` are visible-point
- * indices (not original `dataIndex` values). The returned `Float64Array` shares
- * the buffer with `renderData.coords`.
+ * Projects `data` into a `dataIndex`-indexed packed array (stride 3:
+ * `[x, y, visible]`). Every point keeps its slot; `visible` is `1` inside
+ * `bounds`, `0` otherwise.
  */
-function getScatterBatchView(renderData, start, end) {
-  return renderData.coords.subarray(start * 3, end * 3);
-}
+function packScatterSeriesCoords(data, getXPosition, getYPosition, bounds) {
+  const n = data.length;
+  const packed = new Float64Array(n * 3);
+  for (let i = 0; i < n; i += 1) {
+    const x = getXPosition(data[i].x);
+    const y = getYPosition(data[i].y);
+    const visible = x >= bounds.xMin && x <= bounds.xMax && y >= bounds.yMin && y <= bounds.yMax;
+    packed[i * 3] = x;
+    packed[i * 3 + 1] = y;
+    packed[i * 3 + 2] = visible ? 1 : 0;
+  }
+  return {
+    coords: packed,
+    count: n
+  };
+}
+
+/** Render data for one series, or `undefined` while processors/axes are pending. */
+const selectorScatterSeriesRenderData = exports.selectorScatterSeriesRenderData = (0, _store.createSelector)(selectorScatterRenderData, (renderData, seriesId) => renderData.get(seriesId));

package/ScatterChart/async/scatterRenderData.selectors.mjs

@@ -5,24 +5,14 @@ import { selectorChartDrawingArea } from "../../internals/plugins/corePlugins/us
 import { selectorChartXAxis, selectorChartYAxis } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
 
 /**
- * Pre-computed render data for a single scatter series.
- *
- * Coordinates are stored in a packed `Float64Array` (stride 3: `[x0, y0, i0,
- * x1, y1, i1, ...]`, where `iN` is the original `dataIndex`). Only points that
- * project inside the drawing area are kept, so the progressive renderer can
- * size its batches by the number of *visible* points — when zoomed in tightly
- * the wave finishes in a single tick. Batches are contiguous slices of this
- * array, so a batch's data is obtained with a zero-copy `subarray` view (see
- * {@link getScatterBatchView}).
+ * Render data for one scatter series. Packed `Float64Array` indexed by
+ * `dataIndex` (stride 3: `[x, y, visible]`). Off-screen points keep their slot
+ * so a point's batch stays fixed across zoom/pan (no popping).
  */
 
 const EMPTY_RENDER_DATA = new Map();
 
-/**
- * Packed projected coordinates for every scatter series, filtered to the
- * drawing area. Recomputes when the processed series, axis scales, or drawing
- * area change.
- */
+/** Packed projected coordinates for every scatter series, indexed by `dataIndex`. */
 export const selectorScatterRenderData = createSelectorMemoized(selectorChartSeriesProcessed, selectorChartXAxis, selectorChartYAxis, selectorChartDrawingArea, function selectorScatterRenderData(processedSeries, xAxes, yAxes, drawingArea) {
   const scatter = processedSeries.scatter;
   if (scatter === undefined) {
@@ -44,44 +34,39 @@ export const selectorScatterRenderData = createSelectorMemoized(selectorChartSer
     }
     const getXPosition = getValueToPositionMapper(xAxis.scale);
     const getYPosition = getValueToPositionMapper(yAxis.scale);
-    const data = series.data;
-    const n = data.length;
-    const packed = new Float64Array(n * 3);
-    let j = 0;
-    for (let i = 0; i < n; i += 1) {
-      const x = getXPosition(data[i].x);
-      if (!(x >= xMin && x <= xMax)) {
-        continue;
-      }
-      const y = getYPosition(data[i].y);
-      if (!(y >= yMin && y <= yMax)) {
-        continue;
-      }
-      packed[j] = x;
-      packed[j + 1] = y;
-      packed[j + 2] = i;
-      j += 3;
-    }
-    const coords = packed.slice(0, j);
-    result.set(seriesId, {
-      coords,
-      count: j / 3
-    });
+    result.set(seriesId, packScatterSeriesCoords(series.data, getXPosition, getYPosition, {
+      xMin,
+      xMax,
+      yMin,
+      yMax
+    }));
   }
   return result;
 });
 
-/**
- * Render data for a single scatter series, or `undefined` while it is not
- * available yet (processors/axes still pending).
- */
-export const selectorScatterSeriesRenderData = createSelector(selectorScatterRenderData, (renderData, seriesId) => renderData.get(seriesId));
+/** Pixel bounds (inclusive) a point must fall within to be flagged visible. */
 
 /**
- * Zero-copy view of one batch's coordinates. `start`/`end` are visible-point
- * indices (not original `dataIndex` values). The returned `Float64Array` shares
- * the buffer with `renderData.coords`.
+ * Projects `data` into a `dataIndex`-indexed packed array (stride 3:
+ * `[x, y, visible]`). Every point keeps its slot; `visible` is `1` inside
+ * `bounds`, `0` otherwise.
  */
-export function getScatterBatchView(renderData, start, end) {
-  return renderData.coords.subarray(start * 3, end * 3);
-}
+export function packScatterSeriesCoords(data, getXPosition, getYPosition, bounds) {
+  const n = data.length;
+  const packed = new Float64Array(n * 3);
+  for (let i = 0; i < n; i += 1) {
+    const x = getXPosition(data[i].x);
+    const y = getYPosition(data[i].y);
+    const visible = x >= bounds.xMin && x <= bounds.xMax && y >= bounds.yMin && y <= bounds.yMax;
+    packed[i * 3] = x;
+    packed[i * 3 + 1] = y;
+    packed[i * 3 + 2] = visible ? 1 : 0;
+  }
+  return {
+    coords: packed,
+    count: n
+  };
+}
+
+/** Render data for one series, or `undefined` while processors/axes are pending. */
+export const selectorScatterSeriesRenderData = createSelector(selectorScatterRenderData, (renderData, seriesId) => renderData.get(seriesId));

package/ScatterChart/seriesConfig/extremums.d.mts

@@ -1,3 +1,3 @@
-import { type CartesianExtremumGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+import type { CartesianExtremumGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 export declare const getExtremumX: CartesianExtremumGetter<'scatter'>;
 export declare const getExtremumY: CartesianExtremumGetter<'scatter'>;

package/ScatterChart/seriesConfig/extremums.d.ts

@@ -1,3 +1,3 @@
-import { type CartesianExtremumGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
+import type { CartesianExtremumGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'scatter'>;
 export declare const getExtremumY: CartesianExtremumGetter<'scatter'>;

package/ScatterChart/seriesConfig/getColor.d.mts

@@ -1,3 +1,3 @@
-import { type ColorProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+import type { ColorProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 declare const getColor: ColorProcessor<'scatter'>;
 export default getColor;

package/ScatterChart/seriesConfig/getColor.d.ts

@@ -1,3 +1,3 @@
-import { type ColorProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
+import type { ColorProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getColor: ColorProcessor<'scatter'>;
 export default getColor;

package/ScatterChart/seriesConfig/getMarkerSize.d.mts

@@ -1,5 +1,5 @@
-import { type DefaultizedScatterSeriesType } from "../../models/seriesType/scatter.mjs";
-import { type ZAxisDefaultized } from "../../models/z-axis.mjs";
+import type { DefaultizedScatterSeriesType } from "../../models/seriesType/scatter.mjs";
+import type { ZAxisDefaultized } from "../../models/z-axis.mjs";
 /**
  * Returns the marker size of a scatter item given its data index.
  * @param {number} dataIndex The index of the scatter item.

package/ScatterChart/seriesConfig/getMarkerSize.d.ts

@@ -1,5 +1,5 @@
-import { type DefaultizedScatterSeriesType } from "../../models/seriesType/scatter.js";
-import { type ZAxisDefaultized } from "../../models/z-axis.js";
+import type { DefaultizedScatterSeriesType } from "../../models/seriesType/scatter.js";
+import type { ZAxisDefaultized } from "../../models/z-axis.js";
 /**
  * Returns the marker size of a scatter item given its data index.
  * @param {number} dataIndex The index of the scatter item.

package/ScatterChart/seriesConfig/index.d.mts

@@ -1,2 +1,2 @@
-import { type ChartSeriesTypeConfig } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+import type { ChartSeriesTypeConfig } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 export declare const scatterSeriesConfig: ChartSeriesTypeConfig<'scatter'>;

package/ScatterChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { type ChartSeriesTypeConfig } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
+import type { ChartSeriesTypeConfig } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const scatterSeriesConfig: ChartSeriesTypeConfig<'scatter'>;

package/ScatterChart/seriesConfig/keyboardFocusHandler.d.mts

@@ -1,4 +1,4 @@
 import type { KeyboardFocusHandler } from "../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.mjs";
-import { type ComposableCartesianChartSeriesType } from "../../models/seriesType/composition.mjs";
+import type { ComposableCartesianChartSeriesType } from "../../models/seriesType/composition.mjs";
 declare const keyboardFocusHandler: KeyboardFocusHandler<'scatter', ComposableCartesianChartSeriesType>;
 export default keyboardFocusHandler;

package/ScatterChart/seriesConfig/keyboardFocusHandler.d.ts

@@ -1,4 +1,4 @@
 import type { KeyboardFocusHandler } from "../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
-import { type ComposableCartesianChartSeriesType } from "../../models/seriesType/composition.js";
+import type { ComposableCartesianChartSeriesType } from "../../models/seriesType/composition.js";
 declare const keyboardFocusHandler: KeyboardFocusHandler<'scatter', ComposableCartesianChartSeriesType>;
 export default keyboardFocusHandler;

package/ScatterChart/seriesConfig/legend.d.mts

@@ -1,3 +1,3 @@
-import { type LegendGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+import type { LegendGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 declare const legendGetter: LegendGetter<'scatter'>;
 export default legendGetter;