[charts] Type improvements & warnOnce usage

docs/pages/x/api/charts/line-series-type.json

@@ -7,7 +7,7 @@
     "baseline": { "type": { "description": "number | 'min' | 'max'" }, "default": "0" },
     "color": { "type": { "description": "string" } },
     "connectNulls": { "type": { "description": "boolean" }, "default": "false" },
-    "curve": { "type": { "description": "CurveType" } },
+    "curve": { "type": { "description": "CurveType" }, "default": "'monotoneX'" },
     "data": { "type": { "description": "(number | null)[]" } },
     "dataKey": { "type": { "description": "string" } },
     "disableHighlight": { "type": { "description": "boolean" }, "default": "false" },

docs/translations/api-docs/charts/line-series-type.json

@@ -10,7 +10,9 @@
     "connectNulls": {
       "description": "If <code>true</code>, line and area connect points separated by <code>null</code> values."
     },
-    "curve": { "description": "" },
+    "curve": {
+      "description": "The type of curve to use for the line. Read more about curves at<br /><a href=\"https://mui.com/x/react-charts/lines/#interpolation\">line interpolation</a>."
+    },
     "data": { "description": "Data associated to the line." },
     "dataKey": { "description": "The key used to retrieve data from the dataset." },
     "disableHighlight": {

packages/x-charts/src/BarChart/formatter.ts

@@ -1,13 +1,12 @@
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
+import { warnOnce } from '@mui/x-internals/warning';
 import { getStackingGroups } from '../internals/stackSeries';
 import { ChartSeries, DatasetElementType, DatasetType } from '../models/seriesType/config';
 import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
 import { DefaultizedProps } from '../models/helpers';
 import { SeriesId } from '../models/seriesType/common';
 import { SeriesFormatter } from '../context/PluginProvider/SeriesFormatter.types';
 
-let warnOnce = false;
-
 type BarDataset = DatasetType<number | null>;
 
 const formatter: SeriesFormatter<'bar'> = (params, dataset) => {
@@ -63,14 +62,13 @@ const formatter: SeriesFormatter<'bar'> = (params, dataset) => {
           ? dataset!.map((data) => {
               const value = data[dataKey];
               if (typeof value !== 'number') {
-                if (process.env.NODE_ENV !== 'production' && !warnOnce && value !== null) {
-                  warnOnce = true;
-                  console.error(
-                    [
-                      `MUI X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`,
+                if (process.env.NODE_ENV !== 'production') {
+                  if (value !== null) {
+                    warnOnce([
+                      `MUI X: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`,
                       'Bar plots only support numbers and null values.',
-                    ].join('\n'),
-                  );
+                    ]);
+                  }
                 }
                 return 0;
               }

packages/x-charts/src/LineChart/formatter.ts

@@ -1,13 +1,12 @@
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
+import { warnOnce } from '@mui/x-internals/warning';
 import { getStackingGroups } from '../internals/stackSeries';
 import { ChartSeries, DatasetElementType, DatasetType } from '../models/seriesType/config';
 import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
 import { DefaultizedProps } from '../models/helpers';
 import { SeriesId } from '../models/seriesType/common';
 import { SeriesFormatter } from '../context/PluginProvider/SeriesFormatter.types';
 
-let warnedOnce = false;
-
 // For now it's a copy past of bar charts formatter, but maybe will diverge later
 const formatter: SeriesFormatter<'line'> = (params, dataset) => {
   const { seriesOrder, series } = params;
@@ -60,12 +59,13 @@ const formatter: SeriesFormatter<'line'> = (params, dataset) => {
           ? dataset!.map((data) => {
               const value = data[dataKey];
               if (typeof value !== 'number') {
-                if (process.env.NODE_ENV !== 'production' && !warnedOnce && value !== null) {
-                  warnedOnce = true;
-                  console.error([
-                    `MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`,
-                    'Line plots only support numbers and null values.',
-                  ]);
+                if (process.env.NODE_ENV !== 'production') {
+                  if (value !== null) {
+                    warnOnce([
+                      `MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`,
+                      'Line plots only support numbers and null values.',
+                    ]);
+                  }
                 }
                 return null;
               }

packages/x-charts/src/SparkLineChart/SparkLineChart.tsx

@@ -17,7 +17,7 @@ import {
 import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
 import { MakeOptional } from '../models/helpers';
-import { LineSeriesType } from '../models/seriesType/line';
+import { LineSeriesType, BarSeriesType } from '../models/seriesType';
 import { CardinalDirections } from '../models/layout';
 import { AreaPlotSlots, AreaPlotSlotProps } from '../LineChart/AreaPlot';
 import { LinePlotSlots, LinePlotSlotProps } from '../LineChart/LinePlot';
@@ -177,7 +177,7 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(props: SparkLine
           data,
           valueFormatter,
           ...(plotType === 'bar' ? {} : { area, curve, disableHighlight: !showHighlight }),
-        },
+        } as LineSeriesType | BarSeriesType,
       ]}
       width={width}
       height={height}

packages/x-charts/src/hooks/useSeries.ts

@@ -28,7 +28,7 @@ export function useSeries(): FormattedSeries {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined pieSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined}  pieSeries
  */
 export function usePieSeries(): FormattedSeries['pie'] {
   const series = useSeries();
@@ -41,7 +41,7 @@ export function usePieSeries(): FormattedSeries['pie'] {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined lineSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined}  lineSeries
  */
 export function useLineSeries(): FormattedSeries['line'] {
   const series = useSeries();
@@ -54,7 +54,7 @@ export function useLineSeries(): FormattedSeries['line'] {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined barSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined}  barSeries
  */
 export function useBarSeries(): FormattedSeries['bar'] {
   const series = useSeries();
@@ -67,7 +67,7 @@ export function useBarSeries(): FormattedSeries['bar'] {
  * The returned object contains:
  * - series: a mapping from ids to series attributes.
  * - seriesOrder: the array of series ids.
- * @returns { series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined scatterSeries
+ * @returns {{ series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined}  scatterSeries
  */
 export function useScatterSeries(): FormattedSeries['scatter'] {
   const series = useSeries();

packages/x-charts/src/internals/geometry.ts

@@ -1,6 +1,6 @@
-const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical
+import { warnOnce } from '@mui/x-internals/warning';
 
-let warnedOnce = false;
+const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical
 
 /**
  * Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
@@ -12,15 +12,12 @@ let warnedOnce = false;
  */
 export function getMinXTranslation(width: number, height: number, angle: number = 0) {
   if (process.env.NODE_ENV !== 'production') {
-    if (!warnedOnce && angle > 90 && angle < -90) {
-      warnedOnce = true;
-      console.warn(
-        [
-          `MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`,
-          `This could cause some text overlapping.`,
-          `If you encounter a use case where it's needed, please open an issue.`,
-        ].join('\n'),
-      );
+    if (angle > 90 && angle < -90) {
+      warnOnce([
+        `MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`,
+        `This could cause some text overlapping.`,
+        `If you encounter a use case where it's needed, please open an issue.`,
+      ]);
     }
   }
   const standardAngle = Math.min(

packages/x-charts/src/models/seriesType/line.ts

@@ -60,6 +60,11 @@ export interface LineSeriesType
    * 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 type of curve to use for the line. Read more about curves at
+   * [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'monotoneX'
+   */
   curve?: CurveType;
   /**
    * Define which items of the series should display a mark.