@mui/x-charts 9.0.0-alpha.4 → 9.0.0-beta.0

package/locales/utils/getChartsLocalization.d.mts

@@ -116,6 +116,82 @@ export declare const getChartsLocalization: (chartsTranslations: Partial<ChartsL
           high?: string | undefined;
           low?: string | undefined;
           close?: string | undefined;
+          a11yNoValue?: string | undefined;
+          a11yConnector?: string | undefined;
+          barDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            categoryValue: string | number | null;
+            formattedCategoryValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          lineDescription?: ((params: {
+            x: number | null;
+            y: number | null;
+            formattedXValue: string;
+            formattedYValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          scatterDescription?: ((params: {
+            x: number | null;
+            y: number | null;
+            formattedXValue: string;
+            formattedYValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          pieDescription?: ((params: {
+            value: number | null;
+            totalValue: number;
+            formattedValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          radarDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            categoryValue: string | number | null;
+            formattedCategoryValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          funnelDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          heatmapDescription?: ((params: {
+            x: number | string | null;
+            y: number | string | null;
+            value: number | null;
+            formattedValue: string;
+            formattedXValue: string;
+            formattedYValue: string;
+          }) => string) | undefined;
+          sankeyNodeDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            nodeLabel: string;
+          }) => string) | undefined;
+          sankeyLinkDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            sourceLabel: string;
+            targetLabel: string;
+          }) => string) | undefined;
+          rangeBarDescription?: ((params: {
+            value: [number, number] | null;
+            formattedValue: string;
+            categoryValue: string | number | null;
+            formattedCategoryValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          ohlcDescription?: ((params: {
+            open: number | null;
+            high: number | null;
+            low: number | null;
+            close: number | null;
+            date: Date | null;
+            formattedDate: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
         };
       };
     };

package/locales/utils/getChartsLocalization.d.ts

@@ -116,6 +116,82 @@ export declare const getChartsLocalization: (chartsTranslations: Partial<ChartsL
           high?: string | undefined;
           low?: string | undefined;
           close?: string | undefined;
+          a11yNoValue?: string | undefined;
+          a11yConnector?: string | undefined;
+          barDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            categoryValue: string | number | null;
+            formattedCategoryValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          lineDescription?: ((params: {
+            x: number | null;
+            y: number | null;
+            formattedXValue: string;
+            formattedYValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          scatterDescription?: ((params: {
+            x: number | null;
+            y: number | null;
+            formattedXValue: string;
+            formattedYValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          pieDescription?: ((params: {
+            value: number | null;
+            totalValue: number;
+            formattedValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          radarDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            categoryValue: string | number | null;
+            formattedCategoryValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          funnelDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          heatmapDescription?: ((params: {
+            x: number | string | null;
+            y: number | string | null;
+            value: number | null;
+            formattedValue: string;
+            formattedXValue: string;
+            formattedYValue: string;
+          }) => string) | undefined;
+          sankeyNodeDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            nodeLabel: string;
+          }) => string) | undefined;
+          sankeyLinkDescription?: ((params: {
+            value: number | null;
+            formattedValue: string;
+            sourceLabel: string;
+            targetLabel: string;
+          }) => string) | undefined;
+          rangeBarDescription?: ((params: {
+            value: [number, number] | null;
+            formattedValue: string;
+            categoryValue: string | number | null;
+            formattedCategoryValue: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
+          ohlcDescription?: ((params: {
+            open: number | null;
+            high: number | null;
+            low: number | null;
+            close: number | null;
+            date: Date | null;
+            formattedDate: string;
+            seriesLabel?: string;
+          }) => string) | undefined;
         };
       };
     };

package/models/axis.d.mts

@@ -151,9 +151,10 @@ type AxisSideConfig<AxisProps extends ChartsAxisProps> = AxisProps extends Chart
   position?: 'top' | 'bottom' | 'none';
   /**
    * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
    * @default 45 if an axis label is provided, 25 otherwise.
    */
-  height?: number;
+  height?: number | 'auto';
 } : AxisProps extends ChartsYAxisProps ? {
   /**
    * Position of the axis.
@@ -167,13 +168,14 @@ type AxisSideConfig<AxisProps extends ChartsAxisProps> = AxisProps extends Chart
   position?: 'left' | 'right' | 'none';
   /**
    * The width of the axis.
+   * Set to `'auto'` to automatically calculate the width based on tick label measurements.
    * @default 65 if an axis label is provided, 45 otherwise.
    */
-  width?: number;
+  width?: number | 'auto';
 } : {
   position?: 'top' | 'bottom' | 'left' | 'right' | 'none';
-  height?: number;
-  width?: number;
+  height?: number | 'auto';
+  width?: number | 'auto';
 };
 export interface ChartsRotationAxisProps extends ChartsAxisProps {
   /**
@@ -511,7 +513,11 @@ export type ComputedAxis<S extends ScaleName = ScaleName, V = any, AxisProps ext
    * Indicate if the axis should be consider by a tooltip with `trigger='axis'`.
    */
   triggerTooltip?: boolean;
-} & (AxisProps extends ChartsXAxisProps ? MakeRequired<AxisSideConfig<AxisProps>, 'height'> : AxisProps extends ChartsYAxisProps ? MakeRequired<AxisSideConfig<AxisProps>, 'width'> : AxisSideConfig<AxisProps>);
+} & (AxisProps extends ChartsXAxisProps ? AxisSideConfig<AxisProps> & {
+  height: number;
+} : AxisProps extends ChartsYAxisProps ? AxisSideConfig<AxisProps> & {
+  width: number;
+} : AxisSideConfig<AxisProps>);
 export type ComputedXAxis<S extends ScaleName = ScaleName, V = any> = ComputedAxis<S, V, ChartsXAxisProps>;
 export type ComputedYAxis<S extends ScaleName = ScaleName, V = any> = ComputedAxis<S, V, ChartsYAxisProps>;
 export declare function isBandScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'band'> & {

package/models/axis.d.ts

@@ -151,9 +151,10 @@ type AxisSideConfig<AxisProps extends ChartsAxisProps> = AxisProps extends Chart
   position?: 'top' | 'bottom' | 'none';
   /**
    * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
    * @default 45 if an axis label is provided, 25 otherwise.
    */
-  height?: number;
+  height?: number | 'auto';
 } : AxisProps extends ChartsYAxisProps ? {
   /**
    * Position of the axis.
@@ -167,13 +168,14 @@ type AxisSideConfig<AxisProps extends ChartsAxisProps> = AxisProps extends Chart
   position?: 'left' | 'right' | 'none';
   /**
    * The width of the axis.
+   * Set to `'auto'` to automatically calculate the width based on tick label measurements.
    * @default 65 if an axis label is provided, 45 otherwise.
    */
-  width?: number;
+  width?: number | 'auto';
 } : {
   position?: 'top' | 'bottom' | 'left' | 'right' | 'none';
-  height?: number;
-  width?: number;
+  height?: number | 'auto';
+  width?: number | 'auto';
 };
 export interface ChartsRotationAxisProps extends ChartsAxisProps {
   /**
@@ -511,7 +513,11 @@ export type ComputedAxis<S extends ScaleName = ScaleName, V = any, AxisProps ext
    * Indicate if the axis should be consider by a tooltip with `trigger='axis'`.
    */
   triggerTooltip?: boolean;
-} & (AxisProps extends ChartsXAxisProps ? MakeRequired<AxisSideConfig<AxisProps>, 'height'> : AxisProps extends ChartsYAxisProps ? MakeRequired<AxisSideConfig<AxisProps>, 'width'> : AxisSideConfig<AxisProps>);
+} & (AxisProps extends ChartsXAxisProps ? AxisSideConfig<AxisProps> & {
+  height: number;
+} : AxisProps extends ChartsYAxisProps ? AxisSideConfig<AxisProps> & {
+  width: number;
+} : AxisSideConfig<AxisProps>);
 export type ComputedXAxis<S extends ScaleName = ScaleName, V = any> = ComputedAxis<S, V, ChartsXAxisProps>;
 export type ComputedYAxis<S extends ScaleName = ScaleName, V = any> = ComputedAxis<S, V, ChartsYAxisProps>;
 export declare function isBandScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'band'> & {

package/models/seriesType/config.d.mts

@@ -5,6 +5,7 @@ import type { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from
 import type { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType, DefaultizedPieValueType, 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";
 import type { CommonHighlightScope } from "../../internals/plugins/featurePlugins/useChartHighlight/highlightConfig.types.mjs";
 export interface ChartsSeriesConfig {
   bar: {
@@ -37,6 +38,12 @@ export interface ChartsSeriesConfig {
     canBeStacked: true;
     axisType: 'cartesian';
     highlightScope: CommonHighlightScope;
+    descriptionGetterParams: {
+      identifier: BarItemIdentifier;
+      xAxis: ComputedXAxis;
+      yAxis: ComputedYAxis;
+      series: DefaultizedBarSeriesType;
+    };
     highlightIdentifier: {
       type: 'bar';
       seriesId: SeriesId;
@@ -54,6 +61,12 @@ export interface ChartsSeriesConfig {
     canBeStacked: true;
     axisType: 'cartesian';
     highlightScope: CommonHighlightScope;
+    descriptionGetterParams: {
+      identifier: LineItemIdentifier;
+      xAxis: ComputedXAxis;
+      yAxis: ComputedYAxis;
+      series: DefaultizedLineSeriesType;
+    };
     highlightIdentifier: {
       type: 'line';
       seriesId: SeriesId;
@@ -70,6 +83,12 @@ export interface ChartsSeriesConfig {
     itemIdentifierWithData: ScatterItemIdentifier;
     axisType: 'cartesian';
     highlightScope: CommonHighlightScope;
+    descriptionGetterParams: {
+      identifier: ScatterItemIdentifier;
+      xAxis: ComputedXAxis;
+      yAxis: ComputedYAxis;
+      series: DefaultizedScatterSeriesType;
+    };
     highlightIdentifier: {
       type: 'scatter';
       seriesId: SeriesId;
@@ -87,6 +106,10 @@ export interface ChartsSeriesConfig {
     itemIdentifierWithData: PieItemIdentifier;
     valueType: DefaultizedPieValueType;
     highlightScope: CommonHighlightScope;
+    descriptionGetterParams: {
+      identifier: PieItemIdentifier;
+      series: DefaultizedPieSeriesType;
+    };
     highlightIdentifier: {
       type: 'pie';
       seriesId: SeriesId;
@@ -103,6 +126,12 @@ export interface ChartsSeriesConfig {
     valueType: number;
     axisType: 'polar';
     highlightScope: CommonHighlightScope;
+    descriptionGetterParams: {
+      identifier: RadarItemIdentifier;
+      rotationAxis: PolarAxisDefaultized<any, any, ChartsRotationAxisProps>;
+      radiusAxis: PolarAxisDefaultized<any, any, ChartsRadiusAxisProps>;
+      series: DefaultizedRadarSeriesType;
+    };
     highlightIdentifier: {
       type: 'radar';
       seriesId: SeriesId;

package/models/seriesType/config.d.ts

@@ -5,6 +5,7 @@ import type { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from
 import type { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType, DefaultizedPieValueType, 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";
 import type { CommonHighlightScope } from "../../internals/plugins/featurePlugins/useChartHighlight/highlightConfig.types.js";
 export interface ChartsSeriesConfig {
   bar: {
@@ -37,6 +38,12 @@ export interface ChartsSeriesConfig {
     canBeStacked: true;
     axisType: 'cartesian';
     highlightScope: CommonHighlightScope;
+    descriptionGetterParams: {
+      identifier: BarItemIdentifier;
+      xAxis: ComputedXAxis;
+      yAxis: ComputedYAxis;
+      series: DefaultizedBarSeriesType;
+    };
     highlightIdentifier: {
       type: 'bar';
       seriesId: SeriesId;
@@ -54,6 +61,12 @@ export interface ChartsSeriesConfig {
     canBeStacked: true;
     axisType: 'cartesian';
     highlightScope: CommonHighlightScope;
+    descriptionGetterParams: {
+      identifier: LineItemIdentifier;
+      xAxis: ComputedXAxis;
+      yAxis: ComputedYAxis;
+      series: DefaultizedLineSeriesType;
+    };
     highlightIdentifier: {
       type: 'line';
       seriesId: SeriesId;
@@ -70,6 +83,12 @@ export interface ChartsSeriesConfig {
     itemIdentifierWithData: ScatterItemIdentifier;
     axisType: 'cartesian';
     highlightScope: CommonHighlightScope;
+    descriptionGetterParams: {
+      identifier: ScatterItemIdentifier;
+      xAxis: ComputedXAxis;
+      yAxis: ComputedYAxis;
+      series: DefaultizedScatterSeriesType;
+    };
     highlightIdentifier: {
       type: 'scatter';
       seriesId: SeriesId;
@@ -87,6 +106,10 @@ export interface ChartsSeriesConfig {
     itemIdentifierWithData: PieItemIdentifier;
     valueType: DefaultizedPieValueType;
     highlightScope: CommonHighlightScope;
+    descriptionGetterParams: {
+      identifier: PieItemIdentifier;
+      series: DefaultizedPieSeriesType;
+    };
     highlightIdentifier: {
       type: 'pie';
       seriesId: SeriesId;
@@ -103,6 +126,12 @@ export interface ChartsSeriesConfig {
     valueType: number;
     axisType: 'polar';
     highlightScope: CommonHighlightScope;
+    descriptionGetterParams: {
+      identifier: RadarItemIdentifier;
+      rotationAxis: PolarAxisDefaultized<any, any, ChartsRotationAxisProps>;
+      radiusAxis: PolarAxisDefaultized<any, any, ChartsRadiusAxisProps>;
+      series: DefaultizedRadarSeriesType;
+    };
     highlightIdentifier: {
       type: 'radar';
       seriesId: SeriesId;