@mui/x-charts 8.0.0-alpha.11 → 8.0.0-alpha.12

package/modern/internals/plugins/models/seriesConfig/seriesConfig.types.d.ts

@@ -0,0 +1,16 @@
+import type { SeriesProcessor } from './seriesProcessor.types';
+import type { CartesianChartSeriesType, ChartSeriesType } from '../../../../models/seriesType/config';
+import type { ColorProcessor } from './colorProcessor.types';
+import type { CartesianExtremumGetter } from './extremumGetter.types';
+import type { LegendGetter } from './legendGetter.types';
+import type { TooltipGetter } from './tooltipGetter.types';
+export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
+  seriesProcessor: SeriesProcessor<TSeriesType>;
+  colorProcessor: ColorProcessor<TSeriesType>;
+  legendGetter: LegendGetter<TSeriesType>;
+  tooltipGetter: TooltipGetter<TSeriesType>;
+} & (TSeriesType extends CartesianChartSeriesType ? {
+  xExtremumGetter: CartesianExtremumGetter<TSeriesType>;
+  yExtremumGetter: CartesianExtremumGetter<TSeriesType>;
+} : {});
+export type ChartSeriesConfig<TSeriesType extends ChartSeriesType> = { [Key in TSeriesType]: ChartSeriesTypeConfig<Key> };

package/modern/internals/plugins/models/seriesConfig/seriesProcessor.types.d.ts

@@ -0,0 +1,16 @@
+import type { ChartSeriesDefaultized, ChartSeriesType, ChartsSeriesConfig, DatasetType } from '../../../../models/seriesType/config';
+import type { SeriesId } from '../../../../models/seriesType/common';
+import type { StackingGroupsType } from '../../../stackSeries';
+export type SeriesProcessorParams<TSeriesType extends ChartSeriesType> = {
+  series: Record<SeriesId, ChartsSeriesConfig[TSeriesType]['seriesInput']>;
+  seriesOrder: SeriesId[];
+};
+export type SeriesProcessorResult<TSeriesType extends ChartSeriesType> = {
+  series: Record<SeriesId, ChartSeriesDefaultized<TSeriesType>>;
+  seriesOrder: SeriesId[];
+} & (ChartsSeriesConfig[TSeriesType] extends {
+  canBeStacked: true;
+} ? {
+  stackingGroups: StackingGroupsType;
+} : {});
+export type SeriesProcessor<TSeriesType extends ChartSeriesType> = (params: SeriesProcessorParams<TSeriesType>, dataset?: DatasetType) => SeriesProcessorResult<TSeriesType>;

package/modern/internals/plugins/models/seriesConfig/tooltipGetter.types.d.ts

@@ -0,0 +1,7 @@
+import type { ItemTooltip } from '../../../../ChartsTooltip';
+import type { ChartItemIdentifier, ChartSeriesDefaultized, ChartSeriesType } from '../../../../models/seriesType/config';
+export type TooltipGetter<T extends ChartSeriesType> = (params: {
+  series: ChartSeriesDefaultized<T>;
+  getColor: (dataIndex: number) => string;
+  identifier: ChartItemIdentifier<T> | null;
+}) => ItemTooltip<T> | null;

package/modern/internals/plugins/utils/ChartStore.d.ts

@@ -0,0 +1,13 @@
+import type { ChartState } from '../models/chart';
+import type { ChartAnyPluginSignature } from '../models/plugin';
+type Listener<T> = (value: T) => void;
+export type StoreUpdater<TSignatures extends readonly ChartAnyPluginSignature[]> = (prevState: ChartState<TSignatures>) => ChartState<TSignatures>;
+export declare class ChartStore<TSignatures extends readonly ChartAnyPluginSignature[]> {
+  value: ChartState<TSignatures>;
+  private listeners;
+  constructor(value: ChartState<TSignatures>);
+  subscribe: (fn: Listener<ChartState<TSignatures>>) => () => void;
+  getSnapshot: () => ChartState<TSignatures>;
+  update: (updater: StoreUpdater<TSignatures>) => void;
+}
+export {};

package/modern/internals/plugins/utils/selectors.d.ts

@@ -0,0 +1,9 @@
+import { CreateSelectorFunction } from 'reselect';
+import { ChartAnyPluginSignature, ChartState } from "../models/index.js";
+export type ChartRootSelector<TSignature extends ChartAnyPluginSignature> = <TSignatures extends [TSignature]>(state: ChartState<TSignatures>) => TSignature['state'][keyof TSignature['state']];
+export type ChartsSelector<TState, TArgs, TResult> = (state: TState, args: TArgs) => TResult;
+/**
+ * Method wrapping reselect's createSelector to provide caching for chart instances.
+ *
+ */
+export declare const createSelector: CreateSelectorFunction;

package/modern/internals/stackSeries.d.ts

@@ -0,0 +1,27 @@
+import { Series } from '@mui/x-charts-vendor/d3-shape';
+import type { BarSeriesType, LineSeriesType } from '../models/seriesType';
+import type { StackOffsetType, StackOrderType } from '../models/stacking';
+import { SeriesId } from "../models/seriesType/common.js";
+type StackableSeries = Record<SeriesId, BarSeriesType> | Record<SeriesId, LineSeriesType>;
+type FormatterParams = {
+  series: StackableSeries;
+  seriesOrder: SeriesId[];
+  defaultStrategy?: {
+    stackOrder?: StackOrderType;
+    stackOffset?: StackOffsetType;
+  };
+};
+export type StackingGroupsType = {
+  ids: SeriesId[];
+  stackingOrder: (series: Series<any, any>) => number[];
+  stackingOffset: (series: Series<any, any>, order: Iterable<number>) => void;
+}[];
+export declare const StackOrder: { [key in StackOrderType]: (series: Series<any, any>) => number[] };
+export declare const StackOffset: { [key in StackOffsetType]: (series: Series<any, any>, order: Iterable<number>) => void };
+/**
+ * Takes a set of series and groups their ids
+ * @param series the object of all bars series
+ * @returns an array of groups, including the ids, the stacking order, and the stacking offset.
+ */
+export declare const getStackingGroups: (params: FormatterParams) => StackingGroupsType;
+export {};

package/modern/internals/store/extractPluginParamsFromProps.d.ts

@@ -0,0 +1,13 @@
+import { ChartCorePluginSignatures } from "../plugins/corePlugins/index.js";
+import { ChartPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../plugins/models/index.js";
+import { UseChartBaseProps } from "./useCharts.types.js";
+export declare const extractPluginParamsFromProps: <TSignatures extends readonly ChartPluginSignature<any>[], TProps extends Partial<UseChartBaseProps<TSignatures>>>({
+  props: {
+    apiRef,
+    ...props
+  },
+  plugins
+}: {
+  props: TProps;
+  plugins: ConvertSignaturesIntoPlugins<readonly [...ChartCorePluginSignatures, ...TSignatures]>;
+}) => MergeSignaturesProperty<TSignatures, "defaultizedParams">;

package/modern/internals/store/useChartModels.d.ts

@@ -0,0 +1,7 @@
+import { ChartAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../plugins/models/index.js";
+import { ChartCorePluginSignatures } from "../plugins/corePlugins/index.js";
+/**
+ * Implements the same behavior as `useControlled` but for several models.
+ * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
+ */
+export declare const useChartModels: <TSignatures extends readonly ChartAnyPluginSignature[]>(plugins: ConvertSignaturesIntoPlugins<readonly [...ChartCorePluginSignatures, ...TSignatures]>, props: MergeSignaturesProperty<TSignatures, "defaultizedParams">) => MergeSignaturesProperty<TSignatures, "models">;

package/modern/internals/store/useCharts.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ChartStore } from "../plugins/utils/ChartStore.js";
+import { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ConvertSignaturesIntoPlugins } from "../plugins/models/index.js";
+import { UseChartBaseProps } from "./useCharts.types.js";
+import { UseChartInteractionState } from "../plugins/featurePlugins/useChartInteraction/useChartInteraction.types.js";
+import { ChartSeriesType } from "../../models/seriesType/config.js";
+import { ChartSeriesConfig } from "../plugins/models/seriesConfig/index.js";
+/**
+ * This is the main hook that setups the plugin system for the chart.
+ *
+ * It manages the data used to create the charts.
+ *
+ * @param inPlugins All the plugins that will be used in the chart.
+ * @param props The props passed to the chart.
+ * @param seriesConfig The set of helpers used for series-specific computation.
+ */
+export declare function useCharts<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(inPlugins: ConvertSignaturesIntoPlugins<TSignatures>, props: Partial<UseChartBaseProps<TSignatures>>, seriesConfig: ChartSeriesConfig<TSeriesType>): {
+  contextValue: {
+    store: ChartStore<readonly [import("..").UseChartIdSignature, import("..").UseChartDimensionsSignature, import("..").UseChartSeriesSignature, ...TSignatures]> & UseChartInteractionState;
+    publicAPI: ChartPublicAPI<TSignatures>;
+    instance: ChartInstance<TSignatures>;
+    svgRef: React.RefObject<SVGSVGElement | null>;
+  };
+};
+export declare function useChartApiInitialization<T>(inputApiRef: React.RefObject<T | undefined> | undefined): T;

package/modern/internals/store/useCharts.js

@@ -4,18 +4,17 @@ import { ChartStore } from "../plugins/utils/ChartStore.js";
 import { CHART_CORE_PLUGINS } from "../plugins/corePlugins/index.js";
 import { extractPluginParamsFromProps } from "./extractPluginParamsFromProps.js";
 import { useChartModels } from "./useChartModels.js";
-export function useChartApiInitialization(inputApiRef) {
-  const fallbackPublicApiRef = React.useRef({});
-  if (inputApiRef) {
-    if (inputApiRef.current == null) {
-      // eslint-disable-next-line react-compiler/react-compiler
-      inputApiRef.current = {};
-    }
-    return inputApiRef.current;
-  }
-  return fallbackPublicApiRef.current;
-}
 let globalId = 0;
+
+/**
+ * This is the main hook that setups the plugin system for the chart.
+ *
+ * It manages the data used to create the charts.
+ *
+ * @param inPlugins All the plugins that will be used in the chart.
+ * @param props The props passed to the chart.
+ * @param seriesConfig The set of helpers used for series-specific computation.
+ */
 export function useCharts(inPlugins, props, seriesConfig) {
   const chartId = useId();
   const plugins = React.useMemo(() => [...CHART_CORE_PLUGINS, ...inPlugins], [inPlugins]);
@@ -80,4 +79,15 @@ export function useCharts(inPlugins, props, seriesConfig) {
   return {
     contextValue
   };
+}
+export function useChartApiInitialization(inputApiRef) {
+  const fallbackPublicApiRef = React.useRef({});
+  if (inputApiRef) {
+    if (inputApiRef.current == null) {
+      // eslint-disable-next-line react-compiler/react-compiler
+      inputApiRef.current = {};
+    }
+    return inputApiRef.current;
+  }
+  return fallbackPublicApiRef.current;
 }

package/modern/internals/store/useCharts.types.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ChartAnyPluginSignature, ChartPublicAPI } from "../plugins/models/index.js";
+export interface UseChartBaseProps<TSignatures extends readonly ChartAnyPluginSignature[]> {
+  apiRef?: React.RefObject<ChartPublicAPI<TSignatures> | undefined>;
+}

package/modern/internals/store/useSelector.d.ts

@@ -0,0 +1,4 @@
+import { ChartAnyPluginSignature, ChartState } from "../plugins/models/index.js";
+import { ChartsSelector } from "../plugins/utils/selectors.js";
+import { ChartStore } from "../plugins/utils/ChartStore.js";
+export declare const useSelector: <TSignatures extends readonly ChartAnyPluginSignature[], TArgs, TValue>(store: ChartStore<TSignatures>, selector: ChartsSelector<ChartState<TSignatures>, TArgs, TValue>, args?: TArgs, equals?: (a: TValue, b: TValue) => boolean) => TValue;

package/modern/internals/store/useStore.d.ts

@@ -0,0 +1,5 @@
+import { ChartStore } from "../plugins/utils/ChartStore.js";
+import { UseChartInteractionSignature } from "../plugins/featurePlugins/useChartInteraction/index.js";
+import { UseChartHighlightSignature } from "../plugins/featurePlugins/useChartHighlight/index.js";
+import { ChartAnyPluginSignature } from "../plugins/models/index.js";
+export declare function useStore<TSignatures extends ChartAnyPluginSignature[] = []>(): ChartStore<[...TSignatures, UseChartInteractionSignature, UseChartHighlightSignature]>;

package/modern/internals/ts-generic.d.ts

@@ -0,0 +1,3 @@
+type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
+export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export {};

package/modern/internals/useStringInterpolator.d.ts

@@ -0,0 +1 @@
+export declare const useStringInterpolator: (path: string) => (t: number) => string;

package/modern/models/axis.d.ts

@@ -0,0 +1,323 @@
+import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint, ScaleOrdinal, ScaleSequential, ScaleThreshold } from '@mui/x-charts-vendor/d3-scale';
+import { SxProps } from '@mui/system/styleFunctionSx';
+import { ChartsAxisClasses } from "../ChartsAxis/axisClasses.js";
+import type { TickParams } from '../hooks/useTicks';
+import { ChartsTextProps } from "../ChartsText/index.js";
+import { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from "./colorMapping.js";
+export type AxisId = string | number;
+export type D3Scale<Domain extends {
+  toString(): string;
+} = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
+export type D3ContinuousScale<Range = number, Output = number> = ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
+export interface ChartsAxisSlots {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+}
+export interface ChartsAxisSlotProps {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+}
+export interface ChartsAxisProps extends TickParams {
+  /**
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
+   */
+  axisId?: AxisId;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /**
+   * The fill color of the axis text.
+   * @default 'currentColor'
+   */
+  fill?: string;
+  /**
+   * The style applied to ticks text.
+   */
+  tickLabelStyle?: ChartsTextProps['style'];
+  /**
+   * The style applied to the axis label.
+   */
+  labelStyle?: ChartsTextProps['style'];
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The label of the axis.
+   */
+  label?: string;
+  /**
+   * The stroke color of the axis line.
+   * @default 'currentColor'
+   */
+  stroke?: string;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+}
+export interface ChartsYAxisProps extends ChartsAxisProps {
+  /**
+   * Position of the axis.
+   */
+  position?: 'left' | 'right';
+}
+export interface ChartsXAxisProps extends ChartsAxisProps {
+  /**
+   * Position of the axis.
+   */
+  position?: 'top' | 'bottom';
+}
+export interface ChartsRotationAxisProps extends ChartsAxisProps {
+  /**
+   * The start angle (in deg).
+   */
+  startAngle?: number;
+  /**
+   * The end angle (in deg).
+   */
+  endAngle?: number;
+}
+export interface ChartsRadiusAxisProps extends ChartsAxisProps {
+  /**
+   * The minimal radius.
+   */
+  minRadius?: number;
+  /**
+   * The maximal radius.
+   */
+  maxRadius?: number;
+}
+export type ScaleName = keyof AxisScaleConfig;
+export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
+export interface AxisScaleConfig {
+  band: {
+    scaleType: 'band';
+    scale: ScaleBand<number | Date | string>;
+    /**
+     * The ratio between the space allocated for padding between two categories and the category width.
+     * 0 means no gap, and 1 no data.
+     * @default 0.2
+     */
+    categoryGapRatio: number;
+    /**
+     * The ratio between the width of a bar, and the gap between two bars.
+     * 0 means no gap, and 1 no bar.
+     * @default 0.1
+     */
+    barGapRatio: number;
+    colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  } & Pick<TickParams, 'tickPlacement' | 'tickLabelPlacement'>;
+  point: {
+    scaleType: 'point';
+    scale: ScalePoint<number | Date | string>;
+    colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  };
+  log: {
+    scaleType: 'log';
+    scale: ScaleLogarithmic<number, number>;
+    colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
+  };
+  pow: {
+    scaleType: 'pow';
+    scale: ScalePower<number, number>;
+    colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
+  };
+  sqrt: {
+    scaleType: 'sqrt';
+    scale: ScalePower<number, number>;
+    colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
+  };
+  time: {
+    scaleType: 'time';
+    scale: ScaleTime<number, number>;
+    colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
+  };
+  utc: {
+    scaleType: 'utc';
+    scale: ScaleTime<number, number>;
+    colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
+  };
+  linear: {
+    scaleType: 'linear';
+    scale: ScaleLinear<number, number>;
+    colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
+  };
+}
+/**
+ * Use this type instead of `AxisScaleConfig` when the values
+ * shouldn't be provided by the user.
+ */
+export interface AxisScaleComputedConfig {
+  band: {
+    colorScale?: ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null>;
+  };
+  point: {
+    colorScale?: ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null>;
+  };
+  log: {
+    colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
+  };
+  pow: {
+    colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
+  };
+  sqrt: {
+    colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
+  };
+  time: {
+    colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null>;
+  };
+  utc: {
+    colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null>;
+  };
+  linear: {
+    colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
+  };
+}
+export type AxisValueFormatterContext<S extends ScaleName = ScaleName> = {
+  /**
+   * Location indicates where the value will be displayed.
+   * - `'tick'` The value is displayed on the axis ticks.
+   * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
+   * - `'legend'` The value is displayed in the legend when using color legend.
+   */
+  location: 'legend';
+} | {
+  /**
+   * Location indicates where the value will be displayed.
+   * - `'tick'` The value is displayed on the axis ticks.
+   * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
+   * - `'legend'` The value is displayed in the legend when using color legend.
+   */
+  location: 'tick' | 'tooltip';
+  /**
+   * The d3-scale instance associated to the axis.
+   */
+  scale: AxisScaleConfig[S]['scale'];
+};
+export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = ChartsXAxisProps | ChartsYAxisProps> = {
+  /**
+   * Id used to identify the axis.
+   */
+  id: AxisId;
+  /**
+   * The minimal value of the domain.
+   * If not provided, it gets computed to display the entire chart data.
+   */
+  min?: number | Date;
+  /**
+   * The maximal value of the domain.
+   * If not provided, it gets computed to display the entire chart data.
+   */
+  max?: number | Date;
+  /**
+   * The data used by `'band'` and `'point'` scales.
+   */
+  data?: V[];
+  /**
+   * The key used to retrieve `data` from the `dataset` prop.
+   */
+  dataKey?: string;
+  /**
+   * Formats the axis value.
+   * @param {V} value The value to format.
+   * @param {AxisValueFormatterContext} context The rendering context of the value.
+   * @returns {string} The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(value: V, context: AxisValueFormatterContext<TScaleName>) => string;
+  /**
+   * If `true`, hide this value in the tooltip
+   */
+  hideTooltip?: boolean;
+  /**
+   * If `true`, Reverse the axis scaleBand.
+   */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extras space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?: 'nice' | 'strict' | ((min: number, max: number) => {
+    min: number;
+    max: number;
+  });
+} & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & TickParams & AxisConfigExtension;
+export interface AxisConfigExtension {}
+export type AxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps = ChartsXAxisProps | ChartsYAxisProps> = Omit<AxisConfig<S, V, AxisProps>, 'scaleType'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
+  /**
+   * An indication of the expected number of ticks.
+   */
+  tickNumber: number;
+};
+export declare function isBandScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'band'> & {
+  scaleType: 'band';
+};
+export declare function isPointScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'point'> & {
+  scaleType: 'point';
+};
+/**
+ * The data format returned by onAxisClick.
+ */
+export interface ChartsAxisData {
+  /**
+   * The index in the axis' data property.
+   */
+  dataIndex: number;
+  /**
+   * Tha value associated to the axis item.
+   */
+  axisValue: number | Date | string;
+  /**
+   * The mapping of series ids to their value for this particular axis index.
+   */
+  seriesValues: Record<string, number | null | undefined>;
+}

package/modern/models/colorMapping.d.ts

@@ -0,0 +1,46 @@
+export interface ContinuousColorConfig<Value = number | Date> {
+  type: 'continuous';
+  /**
+   * The minimal value of the color scale.
+   * @default 0
+   */
+  min?: Value;
+  /**
+   * The maximal value of the color scale.
+   * @default 100
+   */
+  max?: Value;
+  /**
+   * The colors to render. It can be an array with the extremum colors, or an interpolation function.
+   */
+  color: readonly [string, string] | ((t: number) => string);
+}
+export interface PiecewiseColorConfig<Value = number | Date> {
+  type: 'piecewise';
+  /**
+   * The thresholds where color should change from one category to another.
+   */
+  thresholds: Value[];
+  /**
+   * The colors used for each band defined by `thresholds`.
+   * Should contain N+1 colors, where N is the number of thresholds.
+   */
+  colors: string[];
+}
+export interface OrdinalColorConfig<Value = number | Date | string> {
+  type: 'ordinal';
+  /**
+   * The value to map.
+   * If undefined, it will be integers from 0 to the number of colors.
+   */
+  values?: Value[];
+  /**
+   * The color palette.
+   * Items equal to `values[k]` will get the color of `colors[k]`.
+   */
+  colors: string[];
+  /**
+   * The color to use when an element is not part of the values.
+   */
+  unknownColor?: string;
+}

package/modern/models/curve.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The type of curve to use for the line.
+ * Read more about curves at
+ * [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+ */
+export type CurveType = 'catmullRom' | 'linear' | 'monotoneX' | 'monotoneY' | 'natural' | 'step' | 'stepBefore' | 'stepAfter' | 'bumpY' | 'bumpX';

package/modern/models/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./seriesType/index.js";
+export * from "./layout.js";
+export * from "./stacking.js";
+export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData } from './axis';
+export type { PropsFromSlot } from '@mui/x-internals/slots';
+export type { Position } from './position';
+export type { CurveType } from './curve';

package/modern/models/layout.d.ts

@@ -0,0 +1,18 @@
+import { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js";
+export interface CardinalDirections<T> {
+  top?: T;
+  bottom?: T;
+  left?: T;
+  right?: T;
+}
+export type LayoutConfig = {
+  width: number;
+  height: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default object Depends on the charts type.
+   */
+  margin?: Partial<ChartMargin>;
+};

package/modern/models/position.d.ts

@@ -0,0 +1,10 @@
+export type Position = {
+  /**
+   * The vertical position.
+   */
+  vertical?: 'top' | 'middle' | 'bottom';
+  /**
+   * The horizontal position.
+   */
+  horizontal?: 'start' | 'center' | 'end';
+};