diff --git a/docs/pages/x/api/charts/line-series-type.json b/docs/pages/x/api/charts/line-series-type.json index 61608bfce9c6..147f90302c1d 100644 --- a/docs/pages/x/api/charts/line-series-type.json +++ b/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" }, diff --git a/docs/translations/api-docs/charts/line-series-type.json b/docs/translations/api-docs/charts/line-series-type.json index 824efbcd4acb..c7c871a6b8e8 100644 --- a/docs/translations/api-docs/charts/line-series-type.json +++ b/docs/translations/api-docs/charts/line-series-type.json @@ -10,7 +10,9 @@ "connectNulls": { "description": "If true, line and area connect points separated by null values." }, - "curve": { "description": "" }, + "curve": { + "description": "The type of curve to use for the line.
Read more about curves at line interpolation." + }, "data": { "description": "Data associated to the line." }, "dataKey": { "description": "The key used to retrieve data from the dataset." }, "disableHighlight": { diff --git a/packages/x-charts/src/BarChart/formatter.ts b/packages/x-charts/src/BarChart/formatter.ts index 35d2cb3ae7e3..d2c5639f7973 100644 --- a/packages/x-charts/src/BarChart/formatter.ts +++ b/packages/x-charts/src/BarChart/formatter.ts @@ -1,4 +1,5 @@ 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'; @@ -6,8 +7,6 @@ import { DefaultizedProps } from '../models/helpers'; import { SeriesId } from '../models/seriesType/common'; import { SeriesFormatter } from '../context/PluginProvider/SeriesFormatter.types'; -let warnOnce = false; - type BarDataset = DatasetType; 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; } diff --git a/packages/x-charts/src/LineChart/formatter.ts b/packages/x-charts/src/LineChart/formatter.ts index bf5261999f63..ec0ec804abb5 100644 --- a/packages/x-charts/src/LineChart/formatter.ts +++ b/packages/x-charts/src/LineChart/formatter.ts @@ -1,4 +1,5 @@ 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'; @@ -6,8 +7,6 @@ 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; } diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index 455b8eda8526..6e600868512e 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/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} diff --git a/packages/x-charts/src/hooks/useSeries.ts b/packages/x-charts/src/hooks/useSeries.ts index 727a94300fcf..4f68bfa6ef1e 100644 --- a/packages/x-charts/src/hooks/useSeries.ts +++ b/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; seriesOrder: SeriesId[]; } | undefined pieSeries + * @returns {{ series: Record; 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; seriesOrder: SeriesId[]; } | undefined lineSeries + * @returns {{ series: Record; 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; seriesOrder: SeriesId[]; } | undefined barSeries + * @returns {{ series: Record; 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; seriesOrder: SeriesId[]; } | undefined scatterSeries + * @returns {{ series: Record; seriesOrder: SeriesId[]; } | undefined} scatterSeries */ export function useScatterSeries(): FormattedSeries['scatter'] { const series = useSeries(); diff --git a/packages/x-charts/src/internals/geometry.ts b/packages/x-charts/src/internals/geometry.ts index 43fd024cacc3..5bef1a35eec1 100644 --- a/packages/x-charts/src/internals/geometry.ts +++ b/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( diff --git a/packages/x-charts/src/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts index 744749d66833..f27c6f4eec49 100644 --- a/packages/x-charts/src/models/seriesType/line.ts +++ b/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.