@mui/x-charts 9.5.0 → 9.7.0

package/internals/plugins/featurePlugins/useGeoProjection/useGeoProjection.selectors.mjs

@@ -0,0 +1,117 @@
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { geoPath } from '@mui/x-charts-vendor/d3-geo';
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.mjs";
+const isConicProjection = projection => {
+  return 'parallels' in projection && typeof projection.parallels === 'function';
+};
+export const selectorChartGeoProjectionState = state => state.geoProjection;
+export const selectorChartGeoData = createSelector(selectorChartGeoProjectionState, geoProjection => geoProjection?.geoData ?? null);
+export const selectorChartGeoFeatureKey = createSelector(selectorChartGeoProjectionState, geoProjection => geoProjection?.geoFeatureKey ?? 'name');
+export const selectorChartRawProjection = createSelector(selectorChartGeoProjectionState, geoProjection => geoProjection?.projection ?? null);
+export const selectorChartProjectionFactory = createSelector(selectorChartGeoProjectionState, geoProjection => geoProjection?.factories ?? null);
+export const selectorChartRawScale = createSelector(selectorChartGeoProjectionState, geoProjection => geoProjection?.scale ?? null);
+const selectorChartRotate = createSelectorMemoized(selectorChartGeoProjectionState, geoProjection => geoProjection?.rotate ?? null);
+const selectorChartTranslate = createSelectorMemoized(selectorChartGeoProjectionState, geoProjection => geoProjection?.translate ?? null);
+const selectorChartParallels = createSelectorMemoized(selectorChartGeoProjectionState, selectorChartRotate, (geoProjection, rotate) => geoProjection?.parallels ?? (rotate ? [rotate[1] - 15, rotate[1] + 15] : [30, 30]));
+/**
+ * Map a feature's `properties.name` to its index in `geoData.features`,
+ * for fast lookup by name when joining series rows to features.
+ *
+ * Features without a string `properties.name` are skipped; on duplicates,
+ * the first occurrence wins.
+ */
+export const selectorChartGeoFeatureIndexesByName = createSelectorMemoized(selectorChartGeoData, selectorChartGeoFeatureKey, (geoData, geoFeatureKey) => {
+  const map = new Map();
+  if (!geoData) {
+    return map;
+  }
+  geoData.features.forEach((feature, index) => {
+    const name = typeof geoFeatureKey === 'function' ? geoFeatureKey(feature) : feature.properties?.[geoFeatureKey];
+    if (typeof name !== 'string') {
+      return;
+    }
+    if (map.has(name)) {
+      map.get(name).push(index);
+      return;
+    }
+    map.set(name, [index]);
+  });
+  return map;
+});
+
+/**
+ * Resolves the raw `projection` input into a ready-to-use `GeoProjection` instance
+ * fitted to the chart's drawing area.
+ *
+ * - String inputs (e.g. `'mercator'`) are mapped to the matching d3-geo factory.
+ * - `GeoProjection` instances are used as-is, then fitted.
+ * - Returns `null` when no projection is registered or the name is unknown.
+ */
+export const selectorChartProjection = createSelectorMemoized(selectorChartRawProjection, selectorChartProjectionFactory, selectorChartGeoData, selectorChartParallels, selectorChartRotate, selectorChartTranslate, selectorChartRawScale, selectorChartDrawingArea, (projectionInput, projectionFactory, geoData, parallels, rotate, translate, scale, drawingArea) => {
+  if (!projectionInput || !projectionFactory) {
+    return null;
+  }
+  let projection;
+  if (typeof projectionInput === 'string') {
+    const factory = projectionFactory[projectionInput];
+    if (!factory) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(`MUI X Charts: Unknown projection name '${projectionInput}'. ` + `Expected one of: ${Object.keys(projectionFactory).join(', ')}.`);
+      }
+      return null;
+    }
+    projection = factory();
+    if (isConicProjection(projection)) {
+      projection.parallels(parallels);
+    }
+  } else {
+    projection = projectionInput;
+  }
+  if (geoData) {
+    if (isConicProjection(projection)) {
+      if (rotate) {
+        projection.rotate?.(rotate);
+      }
+      if (!scale) {
+        const [[x0, y0], [x1, y1]] = geoPath(projection).bounds(geoData);
+        const currentScale = projection.scale();
+        const fitScale = Math.min(currentScale * (drawingArea.width / (x1 - x0)), currentScale * (drawingArea.height / (y1 - y0)));
+        projection.scale(fitScale);
+      } else {
+        projection.scale(scale);
+      }
+      return projection;
+    }
+    if (rotate) {
+      projection.rotate?.(rotate);
+    }
+    if (scale) {
+      projection.scale(scale);
+      projection.clipExtent?.([[drawingArea.left, drawingArea.top], [drawingArea.left + drawingArea.width, drawingArea.top + drawingArea.height]]);
+    } else {
+      projection.fitExtent?.([[drawingArea.left, drawingArea.top], [drawingArea.left + drawingArea.width, drawingArea.top + drawingArea.height]], geoData);
+    }
+    if (translate) {
+      projection.translate(translate);
+    }
+  }
+  return projection;
+});
+
+/**
+ * Resolves the raw `projection` input into a ready-to-use `GeoPath` instance
+ * fitted to the chart's drawing area.
+ */
+export const selectorChartGeoPath = createSelectorMemoized(selectorChartProjection, projection => {
+  if (!projection) {
+    return null;
+  }
+  return geoPath(projection);
+});
+export const selectorGeoTooltipPosition = createSelectorMemoized(selectorChartGeoData, selectorChartProjection, selectorChartGeoFeatureIndexesByName, (geoData, projection, featureIndexesByName) => {
+  return {
+    geoData,
+    projection,
+    featureIndexesByName
+  };
+});

package/internals/plugins/featurePlugins/useGeoProjection/useGeoProjection.types.d.mts

@@ -0,0 +1,64 @@
+import type { GeoProjection, ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo';
+import type { ChartPluginSignature } from "../../models/plugin.mjs";
+export type D3NamedProjection = 'azimuthalEqualArea' | 'azimuthalEquidistant' | 'gnomonic' | 'orthographic' | 'stereographic' | 'conicConformal' | 'conicEqualArea' | 'conicEquidistant' | 'albers' | 'albersUsa' | 'equirectangular' | 'mercator' | 'transverseMercator' | 'equalEarth' | 'naturalEarth1';
+/**
+ * A d3-geo projection accepted by `useGeoProjection`.
+ *
+ * Either a built-in projection name (e.g. `'mercator'`, `'naturalEarth1'`)
+ * or a `GeoProjection` instance returned by a d3-geo factory.
+ */
+export type GeoProjectionInput = D3NamedProjection | GeoProjection;
+export interface UseGeoProjectionParameters {
+  /**
+   * The GeoJSON `FeatureCollection` whose features will be rendered on the map.
+   */
+  geoData?: ExtendedFeatureCollection;
+  /**
+   * The key, or value getter, used to identify each feature in `geoData`.
+   * - If a string is provided, `feature.properties[geoFeatureKey]` will be used.
+   * - If a function is provided, it will be called with each feature and should return a key for that feature.
+   * @default 'name'
+   */
+  geoFeatureKey?: string | ((feature: ExtendedFeatureCollection['features'][number]) => string | null);
+  /**
+   * The d3-geo projection used to map geographic coordinates to SVG coordinates.
+   * Accepts a d3-geo projection name (e.g. `'mercator'`, `'naturalEarth1'`)
+   * or a custom `GeoProjection` instance.
+   */
+  projection?: GeoProjectionInput;
+  /**
+   * The center of the projection, specified as a `[longitude, latitude]` pair in degrees.
+   */
+  translate?: [number, number];
+  /**
+   * The rotation of the projection, specified as a `[longitude, latitude]` pair in degrees.
+   */
+  rotate?: [number, number];
+  /**
+   * The scale of the projection.
+   * If not provided, the scale will default to fit the entire geoData in the drawing area.
+   */
+  scale?: number;
+}
+export type UseGeoProjectionDefaultizedParameters = UseGeoProjectionParameters;
+export interface UseGeoProjectionState {
+  geoProjection: {
+    geoData: ExtendedFeatureCollection | null;
+    geoFeatureKey: string | ((feature: ExtendedFeatureCollection['features'][number]) => string | null);
+    projection: GeoProjectionInput | null;
+    translate: [number, number] | null;
+    rotate: [number, number] | null;
+    scale: number | null;
+    factories: Record<D3NamedProjection, (() => GeoProjection) | undefined>;
+    /**
+     * The two standard parallels used by conic projections, if applicable.
+     * Used for projection 'conicConformal', 'conicEqualArea', 'conicEquidistant'.
+     */
+    parallels?: [number, number] | null;
+  };
+}
+export type UseGeoProjectionSignature = ChartPluginSignature<{
+  params: UseGeoProjectionParameters;
+  defaultizedParams: UseGeoProjectionDefaultizedParameters;
+  state: UseGeoProjectionState;
+}>;

package/internals/plugins/featurePlugins/useGeoProjection/useGeoProjection.types.d.ts

@@ -0,0 +1,64 @@
+import type { GeoProjection, ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo';
+import type { ChartPluginSignature } from "../../models/plugin.js";
+export type D3NamedProjection = 'azimuthalEqualArea' | 'azimuthalEquidistant' | 'gnomonic' | 'orthographic' | 'stereographic' | 'conicConformal' | 'conicEqualArea' | 'conicEquidistant' | 'albers' | 'albersUsa' | 'equirectangular' | 'mercator' | 'transverseMercator' | 'equalEarth' | 'naturalEarth1';
+/**
+ * A d3-geo projection accepted by `useGeoProjection`.
+ *
+ * Either a built-in projection name (e.g. `'mercator'`, `'naturalEarth1'`)
+ * or a `GeoProjection` instance returned by a d3-geo factory.
+ */
+export type GeoProjectionInput = D3NamedProjection | GeoProjection;
+export interface UseGeoProjectionParameters {
+  /**
+   * The GeoJSON `FeatureCollection` whose features will be rendered on the map.
+   */
+  geoData?: ExtendedFeatureCollection;
+  /**
+   * The key, or value getter, used to identify each feature in `geoData`.
+   * - If a string is provided, `feature.properties[geoFeatureKey]` will be used.
+   * - If a function is provided, it will be called with each feature and should return a key for that feature.
+   * @default 'name'
+   */
+  geoFeatureKey?: string | ((feature: ExtendedFeatureCollection['features'][number]) => string | null);
+  /**
+   * The d3-geo projection used to map geographic coordinates to SVG coordinates.
+   * Accepts a d3-geo projection name (e.g. `'mercator'`, `'naturalEarth1'`)
+   * or a custom `GeoProjection` instance.
+   */
+  projection?: GeoProjectionInput;
+  /**
+   * The center of the projection, specified as a `[longitude, latitude]` pair in degrees.
+   */
+  translate?: [number, number];
+  /**
+   * The rotation of the projection, specified as a `[longitude, latitude]` pair in degrees.
+   */
+  rotate?: [number, number];
+  /**
+   * The scale of the projection.
+   * If not provided, the scale will default to fit the entire geoData in the drawing area.
+   */
+  scale?: number;
+}
+export type UseGeoProjectionDefaultizedParameters = UseGeoProjectionParameters;
+export interface UseGeoProjectionState {
+  geoProjection: {
+    geoData: ExtendedFeatureCollection | null;
+    geoFeatureKey: string | ((feature: ExtendedFeatureCollection['features'][number]) => string | null);
+    projection: GeoProjectionInput | null;
+    translate: [number, number] | null;
+    rotate: [number, number] | null;
+    scale: number | null;
+    factories: Record<D3NamedProjection, (() => GeoProjection) | undefined>;
+    /**
+     * The two standard parallels used by conic projections, if applicable.
+     * Used for projection 'conicConformal', 'conicEqualArea', 'conicEquidistant'.
+     */
+    parallels?: [number, number] | null;
+  };
+}
+export type UseGeoProjectionSignature = ChartPluginSignature<{
+  params: UseGeoProjectionParameters;
+  defaultizedParams: UseGeoProjectionDefaultizedParameters;
+  state: UseGeoProjectionState;
+}>;

package/internals/plugins/featurePlugins/useGeoProjection/useGeoProjection.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/plugins/featurePlugins/useGeoProjection/useGeoProjection.types.mjs

@@ -0,0 +1 @@
+export {};

package/internals/plugins/featurePlugins/useProgressiveRendering/useProgressiveRendering.d.mts

@@ -1,13 +1,9 @@
-import { type ChartPlugin } from "../../models/index.mjs";
-import { type UseProgressiveRenderingSignature } from "./useProgressiveRendering.types.mjs";
+import type { ChartPlugin } from "../../models/index.mjs";
+import type { UseProgressiveRenderingSignature } from "./useProgressiveRendering.types.mjs";
 /**
- * Chart-wide progressive rendering coordinator.
- *
- * Lives on the chart store, so every renderer composed into the same chart
- * (e.g. several `ScatterPlot` instances under one `ChartsContainer`) shares
- * the same scheduler. Each renderer registers a plan via
- * `setProgressivePlan(plotId, plan)`; the plugin aggregates them, computes a
- * single per-tick budget, and ramps a global "rounds" counter — one round
- * adds one batch in every registered series at once.
+ * Chart-wide progressive rendering coordinator. Lives on the store so every
+ * renderer in the chart shares one scheduler: each registers a plan via
+ * `registerProgressivePlan`, and the plugin ramps a global "rounds" counter,
+ * one round adding a batch to every series at once.
  */
 export declare const useProgressiveRendering: ChartPlugin<UseProgressiveRenderingSignature>;

package/internals/plugins/featurePlugins/useProgressiveRendering/useProgressiveRendering.d.ts

@@ -1,13 +1,9 @@
-import { type ChartPlugin } from "../../models/index.js";
-import { type UseProgressiveRenderingSignature } from "./useProgressiveRendering.types.js";
+import type { ChartPlugin } from "../../models/index.js";
+import type { UseProgressiveRenderingSignature } from "./useProgressiveRendering.types.js";
 /**
- * Chart-wide progressive rendering coordinator.
- *
- * Lives on the chart store, so every renderer composed into the same chart
- * (e.g. several `ScatterPlot` instances under one `ChartsContainer`) shares
- * the same scheduler. Each renderer registers a plan via
- * `setProgressivePlan(plotId, plan)`; the plugin aggregates them, computes a
- * single per-tick budget, and ramps a global "rounds" counter — one round
- * adds one batch in every registered series at once.
+ * Chart-wide progressive rendering coordinator. Lives on the store so every
+ * renderer in the chart shares one scheduler: each registers a plan via
+ * `registerProgressivePlan`, and the plugin ramps a global "rounds" counter,
+ * one round adding a batch to every series at once.
  */
 export declare const useProgressiveRendering: ChartPlugin<UseProgressiveRenderingSignature>;

package/internals/plugins/featurePlugins/useProgressiveRendering/useProgressiveRendering.js

@@ -11,34 +11,26 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useProgressiveRendering = require("./useProgressiveRendering.selectors");
+var _useChartCartesianAxis = require("../useChartCartesianAxis");
 const EMPTY_PLANS = new Map();
 
-/**
- * How many *rounds* are revealed per reveal tick once the render data is ready.
- * A round reveals one batch in every series simultaneously, so the chart looks
- * complete from the first paint rather than appearing series-by-series. Lower
- * spreads the paint over more ticks (smoother, more visibly progressive);
- * higher finishes sooner.
- */
+/** Rounds revealed per tick. One round adds a batch to every series at once. */
 const REVEAL_ROUNDS_PER_FRAME = 1;
 
-/**
- * How many animation frames are skipped between two reveal ticks. `0` reveals
- * on every frame; `1` reveals every other frame, leaving the browser an idle
- * frame for layout, paint and input handling between commits. Higher values
- * give the browser more CPU headroom at the cost of a slower paint.
- */
+/** Frames skipped between reveal ticks. `0` = every frame; higher = more headroom. */
 const REVEAL_FRAMES_SKIPPED = 0;
 
+/** Rounds kept visible during a zoom/pan interaction (first level only). */
+const INTERACTION_REVEALED_ROUNDS = 1;
+
+/** Settle delay before the reveal resumes after an interaction ends (ms). */
+const RESUME_AFTER_INTERACTION_DELAY = 200;
+
 /**
- * Chart-wide progressive rendering coordinator.
- *
- * Lives on the chart store, so every renderer composed into the same chart
- * (e.g. several `ScatterPlot` instances under one `ChartsContainer`) shares
- * the same scheduler. Each renderer registers a plan via
- * `setProgressivePlan(plotId, plan)`; the plugin aggregates them, computes a
- * single per-tick budget, and ramps a global "rounds" counter — one round
- * adds one batch in every registered series at once.
+ * Chart-wide progressive rendering coordinator. Lives on the store so every
+ * renderer in the chart shares one scheduler: each registers a plan via
+ * `registerProgressivePlan`, and the plugin ramps a global "rounds" counter,
+ * one round adding a batch to every series at once.
  */
 const useProgressiveRendering = ({
   store
@@ -69,11 +61,24 @@ const useProgressiveRendering = ({
     };
   });
   const plans = store.use(_useProgressiveRendering.selectorProgressivePlans) ?? EMPTY_PLANS;
+  const isZoomInteracting = store.use(_useChartCartesianAxis.selectorChartZoomIsInteracting);
   React.useEffect(() => {
     const startTotal = (0, _useProgressiveRendering.selectorProgressiveTotalRounds)(store.state);
     if (startTotal === 0) {
       return undefined;
     }
+
+    // While interacting, keep only the first level and pause; resets the wave
+    // so it restarts from the first level once the interaction ends.
+    if (isZoomInteracting) {
+      const target = Math.min(INTERACTION_REVEALED_ROUNDS, startTotal);
+      if ((0, _useProgressiveRendering.selectorProgressiveRevealedRounds)(store.state) !== target) {
+        store.set('progressiveRendering', (0, _extends2.default)({}, store.state.progressiveRendering, {
+          revealedRounds: target
+        }));
+      }
+      return undefined;
+    }
     if (typeof requestAnimationFrame !== 'function') {
       store.set('progressiveRendering', (0, _extends2.default)({}, store.state.progressiveRendering, {
         revealedRounds: startTotal
@@ -81,11 +86,12 @@ const useProgressiveRendering = ({
       return undefined;
     }
     let frame = 0;
+    let resumeTimeout;
     let cancelled = false;
-    // Tracked in a closure variable, not derived inside a state updater (those
-    // must be pure and StrictMode double-invokes them, which would schedule
-    // the animation-frame chain twice).
-    let revealed = 0;
+    // Resume from the rounds already revealed (keeps the first level on screen).
+    // Closure var, not a state-updater derivation: StrictMode double-invokes
+    // those, scheduling the frame chain twice.
+    let revealed = (0, _useProgressiveRendering.selectorProgressiveRevealedRounds)(store.state);
     function scheduleNext() {
       let remaining = REVEAL_FRAMES_SKIPPED;
       const tick = () => {
@@ -114,12 +120,27 @@ const useProgressiveRendering = ({
         scheduleNext();
       }
     }
-    frame = requestAnimationFrame(step);
+    if (revealed >= startTotal) {
+      return undefined;
+    }
+
+    // `revealed > 0` means resuming after an interaction: wait the settle delay.
+    // Initial paint (`revealed === 0`) starts immediately.
+    if (revealed > 0) {
+      resumeTimeout = setTimeout(() => {
+        frame = requestAnimationFrame(step);
+      }, RESUME_AFTER_INTERACTION_DELAY);
+    } else {
+      frame = requestAnimationFrame(step);
+    }
     return () => {
       cancelled = true;
       cancelAnimationFrame(frame);
+      if (resumeTimeout !== undefined) {
+        clearTimeout(resumeTimeout);
+      }
     };
-  }, [plans, store]);
+  }, [plans, isZoomInteracting, store]);
   return {
     instance: {
       registerProgressivePlan

package/internals/plugins/featurePlugins/useProgressiveRendering/useProgressiveRendering.mjs

@@ -3,35 +3,27 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { sameSeriesIds, selectorProgressivePlans, selectorProgressiveTotalRounds, selectorShouldUseProgressiveRenderer } from "./useProgressiveRendering.selectors.mjs";
+import { sameSeriesIds, selectorProgressivePlans, selectorProgressiveRevealedRounds, selectorProgressiveTotalRounds, selectorShouldUseProgressiveRenderer } from "./useProgressiveRendering.selectors.mjs";
+import { selectorChartZoomIsInteracting } from "../useChartCartesianAxis/index.mjs";
 const EMPTY_PLANS = new Map();
 
-/**
- * How many *rounds* are revealed per reveal tick once the render data is ready.
- * A round reveals one batch in every series simultaneously, so the chart looks
- * complete from the first paint rather than appearing series-by-series. Lower
- * spreads the paint over more ticks (smoother, more visibly progressive);
- * higher finishes sooner.
- */
+/** Rounds revealed per tick. One round adds a batch to every series at once. */
 const REVEAL_ROUNDS_PER_FRAME = 1;
 
-/**
- * How many animation frames are skipped between two reveal ticks. `0` reveals
- * on every frame; `1` reveals every other frame, leaving the browser an idle
- * frame for layout, paint and input handling between commits. Higher values
- * give the browser more CPU headroom at the cost of a slower paint.
- */
+/** Frames skipped between reveal ticks. `0` = every frame; higher = more headroom. */
 const REVEAL_FRAMES_SKIPPED = 0;
 
+/** Rounds kept visible during a zoom/pan interaction (first level only). */
+const INTERACTION_REVEALED_ROUNDS = 1;
+
+/** Settle delay before the reveal resumes after an interaction ends (ms). */
+const RESUME_AFTER_INTERACTION_DELAY = 200;
+
 /**
- * Chart-wide progressive rendering coordinator.
- *
- * Lives on the chart store, so every renderer composed into the same chart
- * (e.g. several `ScatterPlot` instances under one `ChartsContainer`) shares
- * the same scheduler. Each renderer registers a plan via
- * `setProgressivePlan(plotId, plan)`; the plugin aggregates them, computes a
- * single per-tick budget, and ramps a global "rounds" counter — one round
- * adds one batch in every registered series at once.
+ * Chart-wide progressive rendering coordinator. Lives on the store so every
+ * renderer in the chart shares one scheduler: each registers a plan via
+ * `registerProgressivePlan`, and the plugin ramps a global "rounds" counter,
+ * one round adding a batch to every series at once.
  */
 export const useProgressiveRendering = ({
   store
@@ -62,11 +54,24 @@ export const useProgressiveRendering = ({
     };
   });
   const plans = store.use(selectorProgressivePlans) ?? EMPTY_PLANS;
+  const isZoomInteracting = store.use(selectorChartZoomIsInteracting);
   React.useEffect(() => {
     const startTotal = selectorProgressiveTotalRounds(store.state);
     if (startTotal === 0) {
       return undefined;
     }
+
+    // While interacting, keep only the first level and pause; resets the wave
+    // so it restarts from the first level once the interaction ends.
+    if (isZoomInteracting) {
+      const target = Math.min(INTERACTION_REVEALED_ROUNDS, startTotal);
+      if (selectorProgressiveRevealedRounds(store.state) !== target) {
+        store.set('progressiveRendering', _extends({}, store.state.progressiveRendering, {
+          revealedRounds: target
+        }));
+      }
+      return undefined;
+    }
     if (typeof requestAnimationFrame !== 'function') {
       store.set('progressiveRendering', _extends({}, store.state.progressiveRendering, {
         revealedRounds: startTotal
@@ -74,11 +79,12 @@ export const useProgressiveRendering = ({
       return undefined;
     }
     let frame = 0;
+    let resumeTimeout;
     let cancelled = false;
-    // Tracked in a closure variable, not derived inside a state updater (those
-    // must be pure and StrictMode double-invokes them, which would schedule
-    // the animation-frame chain twice).
-    let revealed = 0;
+    // Resume from the rounds already revealed (keeps the first level on screen).
+    // Closure var, not a state-updater derivation: StrictMode double-invokes
+    // those, scheduling the frame chain twice.
+    let revealed = selectorProgressiveRevealedRounds(store.state);
     function scheduleNext() {
       let remaining = REVEAL_FRAMES_SKIPPED;
       const tick = () => {
@@ -107,12 +113,27 @@ export const useProgressiveRendering = ({
         scheduleNext();
       }
     }
-    frame = requestAnimationFrame(step);
+    if (revealed >= startTotal) {
+      return undefined;
+    }
+
+    // `revealed > 0` means resuming after an interaction: wait the settle delay.
+    // Initial paint (`revealed === 0`) starts immediately.
+    if (revealed > 0) {
+      resumeTimeout = setTimeout(() => {
+        frame = requestAnimationFrame(step);
+      }, RESUME_AFTER_INTERACTION_DELAY);
+    } else {
+      frame = requestAnimationFrame(step);
+    }
     return () => {
       cancelled = true;
       cancelAnimationFrame(frame);
+      if (resumeTimeout !== undefined) {
+        clearTimeout(resumeTimeout);
+      }
     };
-  }, [plans, store]);
+  }, [plans, isZoomInteracting, store]);
   return {
     instance: {
       registerProgressivePlan

package/internals/plugins/featurePlugins/useProgressiveRendering/useProgressiveRendering.selectors.d.mts

@@ -1,4 +1,4 @@
-import { type SeriesId } from "../../../../models/seriesType/common.mjs";
+import type { SeriesId } from "../../../../models/seriesType/common.mjs";
 import type { RendererType } from "../../../../ScatterChart/index.mjs";
 /** Map of registered plots → their set of series ids. */
 export declare const selectorProgressivePlans: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useProgressiveRendering.types.mjs").UseProgressiveRenderingState> & {
@@ -9,10 +9,9 @@ export declare const selectorProgressiveRevealedRounds: (args_0: import("../../c
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => number;
 /**
- * Aggregated view of every registered plan: the per-series batch counts, the
- * total number of rounds, and the per-series batch size (so every consumer
- * sizes its batches the same way). Point counts are read straight from the
- * processed series rather than carried by the registration.
+ * Aggregate of every plan: per-series batch counts, total rounds, and batch
+ * size (so every consumer sizes batches the same). Point counts read from the
+ * processed series, not the registration.
  */
 export declare const selectorProgressiveAggregate: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useProgressiveRendering.types.mjs").UseProgressiveRenderingState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
@@ -28,9 +27,13 @@ export declare const selectorProgressiveTotalRounds: (args_0: import("../../core
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => number;
 /**
- * How many of `seriesId`'s own batches are revealed so far. Capped at that
- * series' total batch count, so series with fewer batches simply stop
- * progressing while longer ones keep filling in.
+ * Revealed batch count for a series: `revealed` rounds normally, clamped to the
+ * first batch while interacting, never above `total`.
+ */
+export declare function getRevealedBatchCount(total: number, revealed: number, isInteracting: boolean | undefined): number;
+/**
+ * How many of `seriesId`'s batches are revealed, capped at its total batch
+ * count. Clamped to the first batch while interacting.
  */
 export declare const selectorProgressiveSeriesRevealedBatches: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useProgressiveRendering.types.mjs").UseProgressiveRenderingState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;

package/internals/plugins/featurePlugins/useProgressiveRendering/useProgressiveRendering.selectors.d.ts

@@ -1,4 +1,4 @@
-import { type SeriesId } from "../../../../models/seriesType/common.js";
+import type { SeriesId } from "../../../../models/seriesType/common.js";
 import type { RendererType } from "../../../../ScatterChart/index.js";
 /** Map of registered plots → their set of series ids. */
 export declare const selectorProgressivePlans: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & 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("./useProgressiveRendering.types.js").UseProgressiveRenderingState> & {
@@ -9,10 +9,9 @@ export declare const selectorProgressiveRevealedRounds: (args_0: import("../../c
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number;
 /**
- * Aggregated view of every registered plan: the per-series batch counts, the
- * total number of rounds, and the per-series batch size (so every consumer
- * sizes its batches the same way). Point counts are read straight from the
- * processed series rather than carried by the registration.
+ * Aggregate of every plan: per-series batch counts, total rounds, and batch
+ * size (so every consumer sizes batches the same). Point counts read from the
+ * processed series, not the registration.
  */
 export declare const selectorProgressiveAggregate: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & 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("./useProgressiveRendering.types.js").UseProgressiveRenderingState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -28,9 +27,13 @@ export declare const selectorProgressiveTotalRounds: (args_0: import("../../core
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number;
 /**
- * How many of `seriesId`'s own batches are revealed so far. Capped at that
- * series' total batch count, so series with fewer batches simply stop
- * progressing while longer ones keep filling in.
+ * Revealed batch count for a series: `revealed` rounds normally, clamped to the
+ * first batch while interacting, never above `total`.
+ */
+export declare function getRevealedBatchCount(total: number, revealed: number, isInteracting: boolean | undefined): number;
+/**
+ * How many of `seriesId`'s batches are revealed, capped at its total batch
+ * count. Clamped to the first batch while interacting.
  */
 export declare const selectorProgressiveSeriesRevealedBatches: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & 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("./useProgressiveRendering.types.js").UseProgressiveRenderingState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;