@mui/x-charts 9.2.0 → 9.4.0

package/internals/sizeScale.mjs

@@ -0,0 +1,38 @@
+import { scaleOrdinal, scaleThreshold, scaleSequential, scaleSequentialSqrt, scaleSequentialLog } from '@mui/x-charts-vendor/d3-scale';
+const isFunctionInterpolator = config => {
+  return typeof config.size === 'function';
+};
+function getClampedSize(sizes) {
+  const [minSize, maxSize] = sizes;
+  return t => {
+    const clampedT = Math.max(Math.min(t, 1), 0);
+    return minSize + clampedT * (maxSize - minSize);
+  };
+}
+export function getSequentialSizeScale(config) {
+  if (config.type === 'piecewise') {
+    return scaleThreshold(config.thresholds, config.sizes);
+  }
+  if (isFunctionInterpolator(config)) {
+    return scaleSequential([config.min ?? 0, config.max ?? 100], config.size);
+  }
+  const interpolator = config.interpolator ?? 'sqrt';
+  switch (interpolator) {
+    case 'log':
+      return scaleSequentialLog([config.min ?? 0, config.max ?? 100], getClampedSize(config.size));
+    case 'linear':
+      return scaleSequential([config.min ?? 0, config.max ?? 100], getClampedSize(config.size));
+    case 'sqrt':
+    default:
+      return scaleSequentialSqrt([config.min ?? 0, config.max ?? 100], getClampedSize(config.size));
+  }
+}
+export function getOrdinalSizeScale(config) {
+  if (config.values) {
+    return scaleOrdinal(config.values, config.sizes).unknown(config.unknownSize ?? null);
+  }
+  return scaleOrdinal(config.sizes.map((_, index) => index), config.sizes).unknown(config.unknownSize ?? null);
+}
+export function getSizeScale(config) {
+  return config.type === 'ordinal' ? getOrdinalSizeScale(config) : getSequentialSizeScale(config);
+}

package/models/axis.d.mts

@@ -6,6 +6,7 @@ import { type DatasetElementType } from "./seriesType/config.mjs";
 import type { DefaultizedZoomOptions } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
 import { type ChartsAxisClasses } from "../ChartsAxis/axisClasses.mjs";
 import type { TickParams } from "../hooks/useTicks.mjs";
+import type { AxisLinePropsOverrides, AxisTickPropsOverrides, AxisTickLabelPropsOverrides, AxisLabelPropsOverrides, XAxisPropsOverrides, YAxisPropsOverrides } from "./chartsSlotsComponentsProps.mjs";
 import type { ChartsTextProps } from "../ChartsText/index.mjs";
 import type { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from "./colorMapping.mjs";
 import type { OrdinalTimeTicks } from "./timeTicks.mjs";
@@ -28,40 +29,40 @@ export interface ChartsAxisSlots {
    * Custom component for the axis main line.
    * @default 'line'
    */
-  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement> & AxisLinePropsOverrides>;
   /**
    * Custom component for the axis tick.
    * @default 'line'
    */
-  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement> & AxisTickPropsOverrides>;
   /**
    * Custom component for tick label.
    * @default ChartsText
    */
-  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps & AxisTickLabelPropsOverrides>;
   /**
    * Custom component for axis label.
    * @default ChartsText
    */
-  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps & AxisLabelPropsOverrides>;
   /**
    * Custom component for the x-axis.
    * @default ChartsXAxis
    */
-  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps & XAxisPropsOverrides>;
   /**
    * Custom component for the y-axis.
    * @default ChartsYAxis
    */
-  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps & YAxisPropsOverrides>;
 }
 export interface ChartsAxisSlotProps {
-  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
-  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
-  axisTickLabel?: Partial<ChartsTextProps>;
-  axisLabel?: Partial<ChartsTextProps>;
-  xAxis?: Partial<ChartsXAxisProps>;
-  yAxis?: Partial<ChartsYAxisProps>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>> & AxisLinePropsOverrides;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>> & AxisTickPropsOverrides;
+  axisTickLabel?: Partial<ChartsTextProps> & AxisTickLabelPropsOverrides;
+  axisLabel?: Partial<ChartsTextProps> & AxisLabelPropsOverrides;
+  xAxis?: Partial<ChartsXAxisProps> & XAxisPropsOverrides;
+  yAxis?: Partial<ChartsYAxisProps> & YAxisPropsOverrides;
 }
 export interface ChartsAxisProps extends TickParams {
   /**
@@ -515,6 +516,11 @@ type CommonAxisConfig<S extends ScaleName = ScaleName, V = any> = {
     min: NumberValue;
     max: NumberValue;
   });
+  /**
+   * Defines the series used to compute the axis domain.
+   * @default "all"
+   */
+  domainSeries?: 'all' | 'visible';
   /**
    * If `true`, the axis will be ignored by the tooltip with `trigger='axis'`.
    */

package/models/axis.d.ts

@@ -6,6 +6,7 @@ import { type DatasetElementType } from "./seriesType/config.js";
 import type { DefaultizedZoomOptions } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { type ChartsAxisClasses } from "../ChartsAxis/axisClasses.js";
 import type { TickParams } from "../hooks/useTicks.js";
+import type { AxisLinePropsOverrides, AxisTickPropsOverrides, AxisTickLabelPropsOverrides, AxisLabelPropsOverrides, XAxisPropsOverrides, YAxisPropsOverrides } from "./chartsSlotsComponentsProps.js";
 import type { ChartsTextProps } from "../ChartsText/index.js";
 import type { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from "./colorMapping.js";
 import type { OrdinalTimeTicks } from "./timeTicks.js";
@@ -28,40 +29,40 @@ export interface ChartsAxisSlots {
    * Custom component for the axis main line.
    * @default 'line'
    */
-  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement> & AxisLinePropsOverrides>;
   /**
    * Custom component for the axis tick.
    * @default 'line'
    */
-  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement> & AxisTickPropsOverrides>;
   /**
    * Custom component for tick label.
    * @default ChartsText
    */
-  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps & AxisTickLabelPropsOverrides>;
   /**
    * Custom component for axis label.
    * @default ChartsText
    */
-  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps & AxisLabelPropsOverrides>;
   /**
    * Custom component for the x-axis.
    * @default ChartsXAxis
    */
-  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps & XAxisPropsOverrides>;
   /**
    * Custom component for the y-axis.
    * @default ChartsYAxis
    */
-  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps & YAxisPropsOverrides>;
 }
 export interface ChartsAxisSlotProps {
-  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
-  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
-  axisTickLabel?: Partial<ChartsTextProps>;
-  axisLabel?: Partial<ChartsTextProps>;
-  xAxis?: Partial<ChartsXAxisProps>;
-  yAxis?: Partial<ChartsYAxisProps>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>> & AxisLinePropsOverrides;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>> & AxisTickPropsOverrides;
+  axisTickLabel?: Partial<ChartsTextProps> & AxisTickLabelPropsOverrides;
+  axisLabel?: Partial<ChartsTextProps> & AxisLabelPropsOverrides;
+  xAxis?: Partial<ChartsXAxisProps> & XAxisPropsOverrides;
+  yAxis?: Partial<ChartsYAxisProps> & YAxisPropsOverrides;
 }
 export interface ChartsAxisProps extends TickParams {
   /**
@@ -515,6 +516,11 @@ type CommonAxisConfig<S extends ScaleName = ScaleName, V = any> = {
     min: NumberValue;
     max: NumberValue;
   });
+  /**
+   * Defines the series used to compute the axis domain.
+   * @default "all"
+   */
+  domainSeries?: 'all' | 'visible';
   /**
    * If `true`, the axis will be ignored by the tooltip with `trigger='axis'`.
    */

package/models/chartsSlotsComponentsProps.d.mts

@@ -0,0 +1,25 @@
+export interface BaseButtonPropsOverrides {}
+export interface BaseIconButtonPropsOverrides {}
+export interface BaseToggleButtonPropsOverrides {}
+export interface BaseToggleButtonGroupPropsOverrides {}
+export interface AxisLinePropsOverrides {}
+export interface AxisTickPropsOverrides {}
+export interface AxisTickLabelPropsOverrides {}
+export interface AxisLabelPropsOverrides {}
+export interface XAxisPropsOverrides {}
+export interface YAxisPropsOverrides {}
+export interface BarPropsOverrides {}
+export interface BarLabelPropsOverrides {}
+export interface LinePropsOverrides {}
+export interface AreaPropsOverrides {}
+export interface MarkPropsOverrides {}
+export interface LineHighlightPropsOverrides {}
+export interface PieArcPropsOverrides {}
+export interface PieArcLabelPropsOverrides {}
+export interface ScatterPropsOverrides {}
+export interface MarkerPropsOverrides {}
+export interface LegendPropsOverrides {}
+export interface LoadingOverlayPropsOverrides {}
+export interface NoDataOverlayPropsOverrides {}
+export interface ToolbarPropsOverrides {}
+export interface TooltipPropsOverrides {}

package/models/chartsSlotsComponentsProps.d.ts

@@ -0,0 +1,25 @@
+export interface BaseButtonPropsOverrides {}
+export interface BaseIconButtonPropsOverrides {}
+export interface BaseToggleButtonPropsOverrides {}
+export interface BaseToggleButtonGroupPropsOverrides {}
+export interface AxisLinePropsOverrides {}
+export interface AxisTickPropsOverrides {}
+export interface AxisTickLabelPropsOverrides {}
+export interface AxisLabelPropsOverrides {}
+export interface XAxisPropsOverrides {}
+export interface YAxisPropsOverrides {}
+export interface BarPropsOverrides {}
+export interface BarLabelPropsOverrides {}
+export interface LinePropsOverrides {}
+export interface AreaPropsOverrides {}
+export interface MarkPropsOverrides {}
+export interface LineHighlightPropsOverrides {}
+export interface PieArcPropsOverrides {}
+export interface PieArcLabelPropsOverrides {}
+export interface ScatterPropsOverrides {}
+export interface MarkerPropsOverrides {}
+export interface LegendPropsOverrides {}
+export interface LoadingOverlayPropsOverrides {}
+export interface NoDataOverlayPropsOverrides {}
+export interface ToolbarPropsOverrides {}
+export interface TooltipPropsOverrides {}

package/models/chartsSlotsComponentsProps.js

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

package/models/chartsSlotsComponentsProps.mjs

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

package/models/index.d.mts

@@ -2,6 +2,7 @@ export * from "./seriesType/index.mjs";
 export * from "./stacking.mjs";
 export * from "./slots/index.mjs";
 export * from "./featureFlags.mjs";
+export * from "./chartsSlotsComponentsProps.mjs";
 export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData, XAxis, YAxis, RadiusAxis, RotationAxis, AxisItemIdentifier, AxisValueFormatterContext } from "./axis.mjs";
 export type { NumberValue } from '@mui/x-charts-vendor/d3-scale';
 export type { PropsFromSlot } from '@mui/x-internals/slots';

package/models/index.d.ts

@@ -2,6 +2,7 @@ export * from "./seriesType/index.js";
 export * from "./stacking.js";
 export * from "./slots/index.js";
 export * from "./featureFlags.js";
+export * from "./chartsSlotsComponentsProps.js";
 export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData, XAxis, YAxis, RadiusAxis, RotationAxis, AxisItemIdentifier, AxisValueFormatterContext } from "./axis.js";
 export type { NumberValue } from '@mui/x-charts-vendor/d3-scale';
 export type { PropsFromSlot } from '@mui/x-internals/slots';

package/models/index.js

@@ -46,4 +46,15 @@ Object.keys(_featureFlags).forEach(function (key) {
       return _featureFlags[key];
     }
   });
+});
+var _chartsSlotsComponentsProps = require("./chartsSlotsComponentsProps");
+Object.keys(_chartsSlotsComponentsProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chartsSlotsComponentsProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartsSlotsComponentsProps[key];
+    }
+  });
 });

package/models/index.mjs

@@ -2,6 +2,7 @@ export * from "./seriesType/index.mjs";
 export * from "./stacking.mjs";
 export * from "./slots/index.mjs";
 export * from "./featureFlags.mjs";
+export * from "./chartsSlotsComponentsProps.mjs";
 
 // Utils shared across the X packages
 export {};

package/models/seriesType/line.d.mts

@@ -61,10 +61,13 @@ export interface CommonLineSeriesType {
   strictStepCurve?: boolean;
   /**
    * Define which items of the series should display a mark.
-   * If can be a boolean that applies to all items.
+   * It can be a boolean that applies to all items.
+   * It can be `'start'` or `'end'` to only display a mark on the first or last item. Such marks reuse
+   * the line highlight element, so they are replaced by the highlighted item when the pointer
+   * highlights a value.
    * Or a callback that gets some item properties and returns true if the item should be displayed.
    */
-  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  showMark?: boolean | 'start' | 'end' | ((params: ShowMarkParams) => boolean);
   /**
    * The shape of the mark elements.
    * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.

package/models/seriesType/line.d.ts

@@ -61,10 +61,13 @@ export interface CommonLineSeriesType {
   strictStepCurve?: boolean;
   /**
    * Define which items of the series should display a mark.
-   * If can be a boolean that applies to all items.
+   * It can be a boolean that applies to all items.
+   * It can be `'start'` or `'end'` to only display a mark on the first or last item. Such marks reuse
+   * the line highlight element, so they are replaced by the highlighted item when the pointer
+   * highlights a value.
    * Or a callback that gets some item properties and returns true if the item should be displayed.
    */
-  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  showMark?: boolean | 'start' | 'end' | ((params: ShowMarkParams) => boolean);
   /**
    * The shape of the mark elements.
    * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.

package/models/seriesType/scatter.d.mts

@@ -4,6 +4,18 @@ import { type DatasetElementType } from "./config.mjs";
 export type ScatterValueType = {
   x: number;
   y: number;
+  /**
+   * The value used to compute the color of the scatter point through a color axis.
+   */
+  colorValue?: any;
+  /**
+   * The value used to compute the size of the scatter point through a size axis.
+   */
+  sizeValue?: any;
+  /**
+   * The value used to compute the color of the scatter point through a color axis.
+   * @deprecated Use `colorValue` instead.
+   */
   z?: any;
   /**
    * A unique identifier for the scatter point
@@ -21,8 +33,19 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | n
    * The label to display on the tooltip or the legend. It can be a string or a function.
    */
   label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * The id of the color axis used to compute the color of the scatter points.
+   * It points to the id of an axis defined with the `zAxis` prop.
+   */
+  colorAxisId?: string;
+  /**
+   * The id of the size axis used to compute the size of the scatter points.
+   * It points to the id of an axis defined with the `zAxis` prop.
+   */
+  sizeAxisId?: string;
   /**
    * The id of the z-axis used to render the series.
+   * @deprecated Use `colorAxisId` instead.
    */
   zAxisId?: string;
   /**
@@ -36,8 +59,8 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | n
   /**
    * The keys used to retrieve data from the dataset.
    *
-   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
-   * While `z` is optional.
+   * When this prop is provided, both `x` and `y` must be provided.
+   * While `color`, `size`, and `id` are optional.
    */
   datasetKeys?: {
     /**
@@ -48,8 +71,17 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | n
      * The key used to retrieve data from the dataset for the Y axis.
      */
     y: string;
+    /**
+     * The key used to retrieve data from the dataset for the color value.
+     */
+    colorValue?: string;
+    /**
+     * The key used to retrieve data from the dataset for the size value.
+     */
+    sizeValue?: string;
     /**
      * The key used to retrieve data from the dataset for the Z axis.
+     * @deprecated Use `colorValue` instead.
      */
     z?: string;
     /**

package/models/seriesType/scatter.d.ts

@@ -4,6 +4,18 @@ import { type DatasetElementType } from "./config.js";
 export type ScatterValueType = {
   x: number;
   y: number;
+  /**
+   * The value used to compute the color of the scatter point through a color axis.
+   */
+  colorValue?: any;
+  /**
+   * The value used to compute the size of the scatter point through a size axis.
+   */
+  sizeValue?: any;
+  /**
+   * The value used to compute the color of the scatter point through a color axis.
+   * @deprecated Use `colorValue` instead.
+   */
   z?: any;
   /**
    * A unique identifier for the scatter point
@@ -21,8 +33,19 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | n
    * The label to display on the tooltip or the legend. It can be a string or a function.
    */
   label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * The id of the color axis used to compute the color of the scatter points.
+   * It points to the id of an axis defined with the `zAxis` prop.
+   */
+  colorAxisId?: string;
+  /**
+   * The id of the size axis used to compute the size of the scatter points.
+   * It points to the id of an axis defined with the `zAxis` prop.
+   */
+  sizeAxisId?: string;
   /**
    * The id of the z-axis used to render the series.
+   * @deprecated Use `colorAxisId` instead.
    */
   zAxisId?: string;
   /**
@@ -36,8 +59,8 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | n
   /**
    * The keys used to retrieve data from the dataset.
    *
-   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
-   * While `z` is optional.
+   * When this prop is provided, both `x` and `y` must be provided.
+   * While `color`, `size`, and `id` are optional.
    */
   datasetKeys?: {
     /**
@@ -48,8 +71,17 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | n
      * The key used to retrieve data from the dataset for the Y axis.
      */
     y: string;
+    /**
+     * The key used to retrieve data from the dataset for the color value.
+     */
+    colorValue?: string;
+    /**
+     * The key used to retrieve data from the dataset for the size value.
+     */
+    sizeValue?: string;
     /**
      * The key used to retrieve data from the dataset for the Z axis.
+     * @deprecated Use `colorValue` instead.
      */
     z?: string;
     /**

package/models/sizeMapping.d.mts

@@ -0,0 +1,64 @@
+type SharedContinuousSizeConfig<Value> = {
+  type: 'continuous';
+  /**
+   * The minimal value of the size scale.
+   * @default 0
+   */
+  min?: Value;
+  /**
+   * The maximal value of the size scale.
+   * @default 100
+   */
+  max?: Value;
+};
+type ContinuousSizeConfigWithNamedInterpolator<Value = number | Date> = SharedContinuousSizeConfig<Value> & {
+  /**
+   * The sizes to render. It can be an array with the extremum sizes, or an interpolation function.
+   */
+  size: readonly [number, number];
+  /**
+   * The interpolator to use when `size` is an array of two numbers. It defines how the size should interpolate between the minimum and maximum values.
+   * Default is set to 'sqrt' to map values to surfaces instead of radii.
+   * @default 'sqrt'
+   */
+  interpolator?: 'sqrt' | 'linear' | 'log';
+};
+export type ContinuousSizeConfigWithFunctionInterpolator<Value = number | Date> = SharedContinuousSizeConfig<Value> & {
+  /**
+   * The sizes to render. It can be an array with the extremum sizes, or an interpolation function.
+   * @param {number} t the interpolation factor. Varies from 0 to 1 when values are from min to max.
+   * @returns {number} The size to render for the interpolation factor `t`.
+   */
+  size: (t: number) => number;
+};
+export type ContinuousSizeConfig<Value = number | Date> = ContinuousSizeConfigWithNamedInterpolator<Value> | ContinuousSizeConfigWithFunctionInterpolator<Value>;
+export interface PiecewiseSizeConfig<Value = number | Date> {
+  type: 'piecewise';
+  /**
+   * The thresholds where size should change from one category to another.
+   */
+  thresholds: Value[];
+  /**
+   * The sizes used for each band defined by `thresholds`.
+   * Should contain N+1 sizes, where N is the number of thresholds.
+   */
+  sizes: number[];
+}
+export interface OrdinalSizeConfig<Value = number | Date | string> {
+  type: 'ordinal';
+  /**
+   * The value to map.
+   * If undefined, it will be integers from 0 to the number of sizes.
+   */
+  values?: readonly Value[];
+  /**
+   * The size palette.
+   * Items equal to `values[k]` will get the size of `sizes[k]`.
+   */
+  sizes: number[];
+  /**
+   * The size to use when an element is not part of the values.
+   */
+  unknownSize?: number;
+}
+export {};

package/models/sizeMapping.d.ts

@@ -0,0 +1,64 @@
+type SharedContinuousSizeConfig<Value> = {
+  type: 'continuous';
+  /**
+   * The minimal value of the size scale.
+   * @default 0
+   */
+  min?: Value;
+  /**
+   * The maximal value of the size scale.
+   * @default 100
+   */
+  max?: Value;
+};
+type ContinuousSizeConfigWithNamedInterpolator<Value = number | Date> = SharedContinuousSizeConfig<Value> & {
+  /**
+   * The sizes to render. It can be an array with the extremum sizes, or an interpolation function.
+   */
+  size: readonly [number, number];
+  /**
+   * The interpolator to use when `size` is an array of two numbers. It defines how the size should interpolate between the minimum and maximum values.
+   * Default is set to 'sqrt' to map values to surfaces instead of radii.
+   * @default 'sqrt'
+   */
+  interpolator?: 'sqrt' | 'linear' | 'log';
+};
+export type ContinuousSizeConfigWithFunctionInterpolator<Value = number | Date> = SharedContinuousSizeConfig<Value> & {
+  /**
+   * The sizes to render. It can be an array with the extremum sizes, or an interpolation function.
+   * @param {number} t the interpolation factor. Varies from 0 to 1 when values are from min to max.
+   * @returns {number} The size to render for the interpolation factor `t`.
+   */
+  size: (t: number) => number;
+};
+export type ContinuousSizeConfig<Value = number | Date> = ContinuousSizeConfigWithNamedInterpolator<Value> | ContinuousSizeConfigWithFunctionInterpolator<Value>;
+export interface PiecewiseSizeConfig<Value = number | Date> {
+  type: 'piecewise';
+  /**
+   * The thresholds where size should change from one category to another.
+   */
+  thresholds: Value[];
+  /**
+   * The sizes used for each band defined by `thresholds`.
+   * Should contain N+1 sizes, where N is the number of thresholds.
+   */
+  sizes: number[];
+}
+export interface OrdinalSizeConfig<Value = number | Date | string> {
+  type: 'ordinal';
+  /**
+   * The value to map.
+   * If undefined, it will be integers from 0 to the number of sizes.
+   */
+  values?: readonly Value[];
+  /**
+   * The size palette.
+   * Items equal to `values[k]` will get the size of `sizes[k]`.
+   */
+  sizes: number[];
+  /**
+   * The size to use when an element is not part of the values.
+   */
+  unknownSize?: number;
+}
+export {};

package/models/sizeMapping.js

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

package/models/sizeMapping.mjs

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

package/models/slots/chartsBaseSlots.d.mts

@@ -1,12 +1,13 @@
 import type * as React from 'react';
 import { type ChartBaseButtonProps, type ChartBaseIconButtonProps, type ChartBaseToggleButtonProps, type ChartBaseToggleButtonGroupProps } from "./chartsBaseSlotProps.mjs";
+import type { BaseButtonPropsOverrides, BaseIconButtonPropsOverrides, BaseToggleButtonPropsOverrides, BaseToggleButtonGroupPropsOverrides } from "../chartsSlotsComponentsProps.mjs";
 export interface ChartsBaseSlots {
-  baseButton: React.ComponentType<ChartBaseButtonProps>;
-  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+  baseButton: React.ComponentType<ChartBaseButtonProps & BaseButtonPropsOverrides>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps & BaseIconButtonPropsOverrides>;
   /**
    * Note: MUI's `ToggleButton` has an incompatible `href` prop, so it must be cast:
-   * `ToggleButton as unknown as React.ComponentType<ChartBaseToggleButtonProps>`.
+   * `ToggleButton as unknown as React.ComponentType<ChartBaseToggleButtonProps & BaseToggleButtonPropsOverrides>`.
    */
-  baseToggleButton: React.ComponentType<ChartBaseToggleButtonProps>;
-  baseToggleButtonGroup: React.ComponentType<ChartBaseToggleButtonGroupProps>;
+  baseToggleButton: React.ComponentType<ChartBaseToggleButtonProps & BaseToggleButtonPropsOverrides>;
+  baseToggleButtonGroup: React.ComponentType<ChartBaseToggleButtonGroupProps & BaseToggleButtonGroupPropsOverrides>;
 }

package/models/slots/chartsBaseSlots.d.ts

@@ -1,12 +1,13 @@
 import type * as React from 'react';
 import { type ChartBaseButtonProps, type ChartBaseIconButtonProps, type ChartBaseToggleButtonProps, type ChartBaseToggleButtonGroupProps } from "./chartsBaseSlotProps.js";
+import type { BaseButtonPropsOverrides, BaseIconButtonPropsOverrides, BaseToggleButtonPropsOverrides, BaseToggleButtonGroupPropsOverrides } from "../chartsSlotsComponentsProps.js";
 export interface ChartsBaseSlots {
-  baseButton: React.ComponentType<ChartBaseButtonProps>;
-  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+  baseButton: React.ComponentType<ChartBaseButtonProps & BaseButtonPropsOverrides>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps & BaseIconButtonPropsOverrides>;
   /**
    * Note: MUI's `ToggleButton` has an incompatible `href` prop, so it must be cast:
-   * `ToggleButton as unknown as React.ComponentType<ChartBaseToggleButtonProps>`.
+   * `ToggleButton as unknown as React.ComponentType<ChartBaseToggleButtonProps & BaseToggleButtonPropsOverrides>`.
    */
-  baseToggleButton: React.ComponentType<ChartBaseToggleButtonProps>;
-  baseToggleButtonGroup: React.ComponentType<ChartBaseToggleButtonGroupProps>;
+  baseToggleButton: React.ComponentType<ChartBaseToggleButtonProps & BaseToggleButtonPropsOverrides>;
+  baseToggleButtonGroup: React.ComponentType<ChartBaseToggleButtonGroupProps & BaseToggleButtonGroupPropsOverrides>;
 }