From f049f3961645e46044479d8d00c0e90d3c621e5b Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Tue, 1 Oct 2024 14:25:09 +0200 Subject: [PATCH 1/8] add fixes --- packages/x-charts/src/BarChart/formatter.ts | 16 ++++++---------- .../src/SparkLineChart/SparkLineChart.tsx | 4 ++-- packages/x-charts/src/hooks/useSeries.ts | 8 ++++---- packages/x-charts/src/models/seriesType/line.ts | 6 ++++++ 4 files changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/x-charts/src/BarChart/formatter.ts b/packages/x-charts/src/BarChart/formatter.ts index 35d2cb3ae7e3..e4db285e885d 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,11 @@ 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.`, - 'Bar plots only support numbers and null values.', - ].join('\n'), - ); + if (process.env.NODE_ENV !== 'production' && 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.', + ]); } return 0; } 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..eb9ee4f696a1 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/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts index 744749d66833..319a56dd69e3 100644 --- a/packages/x-charts/src/models/seriesType/line.ts +++ b/packages/x-charts/src/models/seriesType/line.ts @@ -60,6 +60,12 @@ 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 'linear' + */ curve?: CurveType; /** * Define which items of the series should display a mark. From 43f836b90bc9100af40279b22b859c0cf80e7011 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Tue, 1 Oct 2024 14:30:44 +0200 Subject: [PATCH 2/8] Inform about correct curve default --- docs/pages/x/api/charts/line-series-type.json | 2 +- docs/translations/api-docs/charts/line-series-type.json | 4 +++- packages/x-charts/src/models/seriesType/line.ts | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) 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..56c271962a08 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/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts index 319a56dd69e3..027a807c96a7 100644 --- a/packages/x-charts/src/models/seriesType/line.ts +++ b/packages/x-charts/src/models/seriesType/line.ts @@ -64,7 +64,7 @@ export interface LineSeriesType * 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 'linear' + * @default 'monotoneX' */ curve?: CurveType; /** From 0905cf51782e3f2236364982ce92ef271e0454fd Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Tue, 1 Oct 2024 14:35:07 +0200 Subject: [PATCH 3/8] use warnonce --- packages/x-charts/src/LineChart/formatter.ts | 8 +++----- packages/x-charts/src/internals/geometry.ts | 19 ++++++++----------- 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/packages/x-charts/src/LineChart/formatter.ts b/packages/x-charts/src/LineChart/formatter.ts index bf5261999f63..aa690cb05a99 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,9 +59,8 @@ 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([ + if (process.env.NODE_ENV !== 'production' && 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.', ]); 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( From 6038beb77929e83aaee55ad51028350282e93e4a Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Tue, 1 Oct 2024 14:59:34 +0200 Subject: [PATCH 4/8] Update packages/x-charts/src/models/seriesType/line.ts Co-authored-by: Olivier Tassinari Signed-off-by: Jose C Quintas Jr --- packages/x-charts/src/models/seriesType/line.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/x-charts/src/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts index 027a807c96a7..fef6d67d3aab 100644 --- a/packages/x-charts/src/models/seriesType/line.ts +++ b/packages/x-charts/src/models/seriesType/line.ts @@ -63,7 +63,6 @@ export interface LineSeriesType /** * 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; From 90076d90c366ed6cc6f3cc3fef4b6517099c3887 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Tue, 1 Oct 2024 15:03:00 +0200 Subject: [PATCH 5/8] leave NODE_ENV as single condition --- packages/x-charts/src/BarChart/formatter.ts | 12 +++++++----- packages/x-charts/src/LineChart/formatter.ts | 12 +++++++----- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/x-charts/src/BarChart/formatter.ts b/packages/x-charts/src/BarChart/formatter.ts index e4db285e885d..d2c5639f7973 100644 --- a/packages/x-charts/src/BarChart/formatter.ts +++ b/packages/x-charts/src/BarChart/formatter.ts @@ -62,11 +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' && 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.', - ]); + 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.', + ]); + } } return 0; } diff --git a/packages/x-charts/src/LineChart/formatter.ts b/packages/x-charts/src/LineChart/formatter.ts index aa690cb05a99..ec0ec804abb5 100644 --- a/packages/x-charts/src/LineChart/formatter.ts +++ b/packages/x-charts/src/LineChart/formatter.ts @@ -59,11 +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' && 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.', - ]); + 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; } From e3ee398a7f6b784476b80ab7cc47cd8adebcf216 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Tue, 1 Oct 2024 15:07:09 +0200 Subject: [PATCH 6/8] move undefined into typedoc --- packages/x-charts/src/hooks/useSeries.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/x-charts/src/hooks/useSeries.ts b/packages/x-charts/src/hooks/useSeries.ts index eb9ee4f696a1..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(); From 33753986a628a3a0b913bdebdee362a28934c0f5 Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Tue, 1 Oct 2024 16:58:10 +0200 Subject: [PATCH 7/8] Update packages/x-charts/src/models/seriesType/line.ts Co-authored-by: Lukas Tyla Signed-off-by: Jose C Quintas Jr --- packages/x-charts/src/models/seriesType/line.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/x-charts/src/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts index fef6d67d3aab..f27c6f4eec49 100644 --- a/packages/x-charts/src/models/seriesType/line.ts +++ b/packages/x-charts/src/models/seriesType/line.ts @@ -61,8 +61,8 @@ export interface LineSeriesType */ 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). + * 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; From 50ded0598ef308044d1cdb23ffa884b4b2ba3091 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Tue, 1 Oct 2024 17:00:06 +0200 Subject: [PATCH 8/8] Fix line break location --- docs/translations/api-docs/charts/line-series-type.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/translations/api-docs/charts/line-series-type.json b/docs/translations/api-docs/charts/line-series-type.json index 56c271962a08..c7c871a6b8e8 100644 --- a/docs/translations/api-docs/charts/line-series-type.json +++ b/docs/translations/api-docs/charts/line-series-type.json @@ -11,7 +11,7 @@ "description": "If true, line and area connect points separated by null values." }, "curve": { - "description": "The type of curve to use for the line. Read more about curves at
line interpolation." + "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." },