@mui/x-charts 9.4.0 → 9.5.0

package/internals/scales/scaleBand.mjs

@@ -1,7 +1,7 @@
 /* eslint-disable func-names */
 // Adapted from d3-scale v4.0.2
 // https://github.com/d3/d3-scale/blob/d6904a4bde09e16005e0ad8ca3e25b10ce54fa0d/src/band.js
-import { InternMap, range as sequence } from '@mui/x-charts-vendor/d3-array';
+import { InternMap } from '@mui/x-charts-vendor/d3-array';
 export function keyof(value) {
   if (Array.isArray(value)) {
     return JSON.stringify(value);
@@ -13,60 +13,57 @@ export function keyof(value) {
 }
 
 /**
- * Constructs a new band scale with the specified range, no padding, no rounding and center alignment.
- * The domain defaults to the empty domain.
- * If range is not specified, it defaults to the unit range [0, 1].
- *
- * The generic corresponds to the data type of domain elements.
- *
- * @param range A two-element array of numeric values.
- */
-
-/**
- * Constructs a new band scale with the specified domain and range, no padding, no rounding and center alignment.
- *
- * The generic corresponds to the data type of domain elements.
- *
- * @param domain Array of domain values.
- * @param range A two-element array of numeric values.
+ * The internal state shared when copying a scale. The domain index (`InternMap`) is the expensive
+ * part to build — `O(domain)` — and is immutable once set (the domain setter replaces it rather than
+ * mutating it), so a copy can share the same reference instead of rebuilding it. This makes `copy()`
+ * `O(1)`, which matters because zooming copies the scale on every frame to apply a new range.
  */
 
-export function scaleBand(...args) {
+function createScaleBand(seed) {
   // @ts-expect-error, InternMap accepts two arguments, but its types are set as Map, which doesn't.
-  let index = new InternMap(undefined, keyof);
-  let domain = [];
-  let ordinalRange = [];
-  let r0 = 0;
-  let r1 = 1;
+  let index = seed ? seed.index : new InternMap(undefined, keyof);
+  let domain = seed ? seed.domain : [];
+  let r0 = seed ? seed.r0 : 0;
+  let r1 = seed ? seed.r1 : 1;
+  let isRound = seed ? seed.isRound : false;
+  let paddingInner = seed ? seed.paddingInner : 0;
+  let paddingOuter = seed ? seed.paddingOuter : 0;
+  let align = seed ? seed.align : 0.5;
+
+  // Derived on every rescale. Positions are affine in the index, so they are computed on demand in
+  // `scale()` rather than materialized into an array — keeping rescale `O(1)` instead of `O(domain)`.
   let step;
   let bandwidth;
-  let isRound = false;
-  let paddingInner = 0;
-  let paddingOuter = 0;
-  let align = 0.5;
+  let reverse = false;
+  let start = 0;
   const scale = d => {
     const i = index.get(d);
     if (i === undefined) {
       return undefined;
     }
-    return ordinalRange[i % ordinalRange.length];
+    const n = domain.length;
+    if (n === 0) {
+      return undefined;
+    }
+    const k = reverse ? n - 1 - i % n : i % n;
+    return start + step * k;
   };
   const rescale = () => {
     const n = domain.length;
-    const reverse = r1 < r0;
-    const start = reverse ? r1 : r0;
-    const stop = reverse ? r0 : r1;
-    step = (stop - start) / Math.max(1, n - paddingInner + paddingOuter * 2);
+    reverse = r1 < r0;
+    const lo = reverse ? r1 : r0;
+    const hi = reverse ? r0 : r1;
+    step = (hi - lo) / Math.max(1, n - paddingInner + paddingOuter * 2);
     if (isRound) {
       step = Math.floor(step);
     }
-    const adjustedStart = start + (stop - start - step * (n - paddingInner)) * align;
+    let adjustedStart = lo + (hi - lo - step * (n - paddingInner)) * align;
     bandwidth = step * (1 - paddingInner);
-    const finalStart = isRound ? Math.round(adjustedStart) : adjustedStart;
-    const finalBandwidth = isRound ? Math.round(bandwidth) : bandwidth;
-    bandwidth = finalBandwidth;
-    const values = sequence(n).map(i => finalStart + step * i);
-    ordinalRange = reverse ? values.reverse() : values;
+    if (isRound) {
+      adjustedStart = Math.round(adjustedStart);
+      bandwidth = Math.round(bandwidth);
+    }
+    start = adjustedStart;
     return scale;
   };
   scale.domain = function (_) {
@@ -141,19 +138,49 @@ export function scaleBand(...args) {
     align = Math.max(0, Math.min(1, _));
     return rescale();
   };
-  scale.copy = () => {
-    return scaleBand(domain, [r0, r1]).round(isRound).paddingInner(paddingInner).paddingOuter(paddingOuter).align(align);
-  };
 
-  // Initialize from arguments
+  // Shares the immutable domain index with the copy, so copying does not rebuild it.
+  scale.copy = () => createScaleBand({
+    index,
+    domain,
+    r0,
+    r1,
+    isRound,
+    paddingInner,
+    paddingOuter,
+    align
+  });
+  rescale();
+  return scale;
+}
+
+/**
+ * Constructs a new band scale with the specified range, no padding, no rounding and center alignment.
+ * The domain defaults to the empty domain.
+ * If range is not specified, it defaults to the unit range [0, 1].
+ *
+ * The generic corresponds to the data type of domain elements.
+ *
+ * @param range A two-element array of numeric values.
+ */
+
+/**
+ * Constructs a new band scale with the specified domain and range, no padding, no rounding and center alignment.
+ *
+ * The generic corresponds to the data type of domain elements.
+ *
+ * @param domain Array of domain values.
+ * @param range A two-element array of numeric values.
+ */
+
+export function scaleBand(...args) {
+  const scale = createScaleBand();
   const [arg0, arg1] = args;
   if (args.length > 1) {
     scale.domain(arg0);
     scale.range(arg1);
   } else if (arg0) {
     scale.range(arg0);
-  } else {
-    rescale();
   }
   return scale;
 }

package/models/seriesType/bar.d.mts

@@ -52,7 +52,7 @@ export interface CommonBarSeriesType {
    */
   barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
 }
-export interface BarSeriesType extends CommonSeriesType<BarValueType | null, 'bar'>, CartesianSeriesType, StackableSeriesType, CommonBarSeriesType {
+export interface BarSeriesType extends CommonSeriesType<'bar'>, CartesianSeriesType, StackableSeriesType, CommonBarSeriesType {
   type: 'bar';
   /**
    * The placement of the bar label. It accepts the following values:

package/models/seriesType/bar.d.ts

@@ -52,7 +52,7 @@ export interface CommonBarSeriesType {
    */
   barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
 }
-export interface BarSeriesType extends CommonSeriesType<BarValueType | null, 'bar'>, CartesianSeriesType, StackableSeriesType, CommonBarSeriesType {
+export interface BarSeriesType extends CommonSeriesType<'bar'>, CartesianSeriesType, StackableSeriesType, CommonBarSeriesType {
   type: 'bar';
   /**
    * The placement of the bar label. It accepts the following values:

package/models/seriesType/common.d.mts

@@ -1,7 +1,7 @@
 import type { StackOffsetType, StackOrderType } from "../stacking.mjs";
 import type { ChartsLabelMarkType } from "../../ChartsLabel/ChartsLabelMark.mjs";
 import type { AxisId } from "../axis.mjs";
-import type { ChartSeriesType, HighlightScope } from "./config.mjs";
+import type { ChartSeriesType, ChartsSeriesConfig, HighlightScope } from "./config.mjs";
 /**
  * The unique identifier of a series.
  */
@@ -33,18 +33,18 @@ export interface SeriesColor<TValue> {
    */
   colorGetter?: (data: ColorCallbackValue<TValue>) => string;
 }
-export interface CommonSeriesType<TValue, SeriesType extends ChartSeriesType> extends SeriesColor<TValue> {
+export interface CommonSeriesType<SeriesType extends ChartSeriesType> extends SeriesColor<ChartsSeriesConfig[SeriesType]['valueType']> {
   /**
    * The id of this series.
    */
   id?: SeriesId;
   /**
    * Formatter used to render values in tooltip or other data display.
-   * @param {TValue} value The series' value to render.
+   * @param {ChartsSeriesConfig[SeriesType]['valueType']} value The series' value to render.
    * @param {SeriesValueFormatterContext} context The rendering context of the value.
    * @returns {string | null} The string to display or null if the value should not be shown.
    */
-  valueFormatter?: SeriesValueFormatter<TValue>;
+  valueFormatter?: SeriesValueFormatter<ChartsSeriesConfig[SeriesType]['valueType']>;
   /**
    * The scope to apply when the series is highlighted.
    */

package/models/seriesType/common.d.ts

@@ -1,7 +1,7 @@
 import type { StackOffsetType, StackOrderType } from "../stacking.js";
 import type { ChartsLabelMarkType } from "../../ChartsLabel/ChartsLabelMark.js";
 import type { AxisId } from "../axis.js";
-import type { ChartSeriesType, HighlightScope } from "./config.js";
+import type { ChartSeriesType, ChartsSeriesConfig, HighlightScope } from "./config.js";
 /**
  * The unique identifier of a series.
  */
@@ -33,18 +33,18 @@ export interface SeriesColor<TValue> {
    */
   colorGetter?: (data: ColorCallbackValue<TValue>) => string;
 }
-export interface CommonSeriesType<TValue, SeriesType extends ChartSeriesType> extends SeriesColor<TValue> {
+export interface CommonSeriesType<SeriesType extends ChartSeriesType> extends SeriesColor<ChartsSeriesConfig[SeriesType]['valueType']> {
   /**
    * The id of this series.
    */
   id?: SeriesId;
   /**
    * Formatter used to render values in tooltip or other data display.
-   * @param {TValue} value The series' value to render.
+   * @param {ChartsSeriesConfig[SeriesType]['valueType']} value The series' value to render.
    * @param {SeriesValueFormatterContext} context The rendering context of the value.
    * @returns {string | null} The string to display or null if the value should not be shown.
    */
-  valueFormatter?: SeriesValueFormatter<TValue>;
+  valueFormatter?: SeriesValueFormatter<ChartsSeriesConfig[SeriesType]['valueType']>;
   /**
    * The scope to apply when the series is highlighted.
    */

package/models/seriesType/config.d.mts

@@ -2,7 +2,7 @@ import type { DefaultizedProps, MakeOptional, MakeRequired } from '@mui/x-intern
 import type { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier, ScatterValueType } from "./scatter.mjs";
 import type { LineSeriesType, DefaultizedLineSeriesType, LineItemIdentifier } from "./line.mjs";
 import type { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from "./bar.mjs";
-import type { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType, DefaultizedPieValueType, PieSeriesLayout } from "./pie.mjs";
+import type { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType, PieSeriesLayout } from "./pie.mjs";
 import type { DefaultizedRadarSeriesType, RadarItemIdentifier, RadarSeriesType } from "./radar.mjs";
 import type { SeriesColor, SeriesId } from "./common.mjs";
 import type { ChartsRadiusAxisProps, ChartsRotationAxisProps, ComputedXAxis, ComputedYAxis, PolarAxisDefaultized } from "../axis.mjs";
@@ -74,7 +74,7 @@ export interface ChartsSeriesConfig {
     };
   };
   scatter: {
-    seriesInput: DefaultizedProps<ScatterSeriesType, 'id'> & MakeRequired<SeriesColor<ScatterValueType | null>, 'color'>;
+    seriesInput: DefaultizedProps<ScatterSeriesType, 'id'> & MakeRequired<SeriesColor<ScatterValueType>, 'color'>;
     series: DefaultizedScatterSeriesType;
     seriesLayout: {};
     seriesProp: ScatterSeriesType;
@@ -104,7 +104,7 @@ export interface ChartsSeriesConfig {
     seriesProp: PieSeriesType<MakeOptional<PieValueType, 'id'>>;
     itemIdentifier: PieItemIdentifier;
     itemIdentifierWithData: PieItemIdentifier;
-    valueType: DefaultizedPieValueType;
+    valueType: PieValueType;
     highlightScope: CommonHighlightScope;
     descriptionGetterParams: {
       identifier: PieItemIdentifier;

package/models/seriesType/config.d.ts

@@ -2,7 +2,7 @@ import type { DefaultizedProps, MakeOptional, MakeRequired } from '@mui/x-intern
 import type { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier, ScatterValueType } from "./scatter.js";
 import type { LineSeriesType, DefaultizedLineSeriesType, LineItemIdentifier } from "./line.js";
 import type { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from "./bar.js";
-import type { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType, DefaultizedPieValueType, PieSeriesLayout } from "./pie.js";
+import type { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType, PieSeriesLayout } from "./pie.js";
 import type { DefaultizedRadarSeriesType, RadarItemIdentifier, RadarSeriesType } from "./radar.js";
 import type { SeriesColor, SeriesId } from "./common.js";
 import type { ChartsRadiusAxisProps, ChartsRotationAxisProps, ComputedXAxis, ComputedYAxis, PolarAxisDefaultized } from "../axis.js";
@@ -74,7 +74,7 @@ export interface ChartsSeriesConfig {
     };
   };
   scatter: {
-    seriesInput: DefaultizedProps<ScatterSeriesType, 'id'> & MakeRequired<SeriesColor<ScatterValueType | null>, 'color'>;
+    seriesInput: DefaultizedProps<ScatterSeriesType, 'id'> & MakeRequired<SeriesColor<ScatterValueType>, 'color'>;
     series: DefaultizedScatterSeriesType;
     seriesLayout: {};
     seriesProp: ScatterSeriesType;
@@ -104,7 +104,7 @@ export interface ChartsSeriesConfig {
     seriesProp: PieSeriesType<MakeOptional<PieValueType, 'id'>>;
     itemIdentifier: PieItemIdentifier;
     itemIdentifierWithData: PieItemIdentifier;
-    valueType: DefaultizedPieValueType;
+    valueType: PieValueType;
     highlightScope: CommonHighlightScope;
     descriptionGetterParams: {
       identifier: PieItemIdentifier;

package/models/seriesType/line.d.mts

@@ -96,7 +96,7 @@ export interface CommonLineSeriesType {
    */
   baseline?: number | 'min' | 'max';
 }
-export interface LineSeriesType extends CommonSeriesType<number | null, 'line'>, CartesianSeriesType, StackableSeriesType, CommonLineSeriesType {
+export interface LineSeriesType extends CommonSeriesType<'line'>, CartesianSeriesType, StackableSeriesType, CommonLineSeriesType {
   type: 'line';
   /**
    * Defines how stacked series handle negative values.

package/models/seriesType/line.d.ts

@@ -96,7 +96,7 @@ export interface CommonLineSeriesType {
    */
   baseline?: number | 'min' | 'max';
 }
-export interface LineSeriesType extends CommonSeriesType<number | null, 'line'>, CartesianSeriesType, StackableSeriesType, CommonLineSeriesType {
+export interface LineSeriesType extends CommonSeriesType<'line'>, CartesianSeriesType, StackableSeriesType, CommonLineSeriesType {
   type: 'line';
   /**
    * Defines how stacked series handle negative values.

package/models/seriesType/pie.d.mts

@@ -26,7 +26,7 @@ export type DefaultizedPieValueType = PieValueType & Omit<D3PieArcDatum<any>, 'd
   hidden: boolean;
 };
 export type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
-export interface PieSeriesType<TData = PieValueType> extends CommonSeriesType<TData, 'pie'> {
+export interface PieSeriesType<TData = PieValueType> extends CommonSeriesType<'pie'> {
   type: 'pie';
   data: Readonly<TData[]>;
   /**

package/models/seriesType/pie.d.ts

@@ -26,7 +26,7 @@ export type DefaultizedPieValueType = PieValueType & Omit<D3PieArcDatum<any>, 'd
   hidden: boolean;
 };
 export type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
-export interface PieSeriesType<TData = PieValueType> extends CommonSeriesType<TData, 'pie'> {
+export interface PieSeriesType<TData = PieValueType> extends CommonSeriesType<'pie'> {
   type: 'pie';
   data: Readonly<TData[]>;
   /**

package/models/seriesType/radar.d.mts

@@ -1,6 +1,6 @@
 import { type DefaultizedProps } from '@mui/x-internals/types';
 import type { SeriesId, CommonDefaultizedProps, CommonSeriesType } from "./common.mjs";
-export interface RadarSeriesType extends CommonSeriesType<number, 'radar'> {
+export interface RadarSeriesType extends CommonSeriesType<'radar'> {
   type: 'radar';
   data: number[];
   /**

package/models/seriesType/radar.d.ts

@@ -1,6 +1,6 @@
 import { type DefaultizedProps } from '@mui/x-internals/types';
 import type { SeriesId, CommonDefaultizedProps, CommonSeriesType } from "./common.js";
-export interface RadarSeriesType extends CommonSeriesType<number, 'radar'> {
+export interface RadarSeriesType extends CommonSeriesType<'radar'> {
   type: 'radar';
   data: number[];
   /**

package/models/seriesType/scatter.d.mts

@@ -22,7 +22,7 @@ export type ScatterValueType = {
    */
   id?: string | number;
 };
-export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | null, 'scatter'>, CartesianSeriesType {
+export interface ScatterSeriesType extends CommonSeriesType<'scatter'>, CartesianSeriesType {
   type: 'scatter';
   data?: readonly ScatterValueType[];
   /**

package/models/seriesType/scatter.d.ts

@@ -22,7 +22,7 @@ export type ScatterValueType = {
    */
   id?: string | number;
 };
-export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | null, 'scatter'>, CartesianSeriesType {
+export interface ScatterSeriesType extends CommonSeriesType<'scatter'>, CartesianSeriesType {
   type: 'scatter';
   data?: readonly ScatterValueType[];
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",
@@ -34,9 +34,9 @@
     "prop-types": "^15.8.1",
     "reselect": "^5.2.0",
     "use-sync-external-store": "^1.6.0",
+    "@mui/x-charts-vendor": "^9.4.0",
     "@mui/x-internal-gestures": "^9.3.0",
-    "@mui/x-internals": "^9.1.0",
-    "@mui/x-charts-vendor": "^9.4.0"
+    "@mui/x-internals": "^9.1.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",