From f475d4605d93b6f70180a9ada7688664ffa6aaea Mon Sep 17 00:00:00 2001 From: alexandre Date: Wed, 11 Oct 2023 15:13:22 +0200 Subject: [PATCH 01/24] [charts] Fix typo between internal/external variable --- .../x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 4 ++-- .../x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 4 ++-- .../src/context/CartesianContextProvider.tsx | 22 +++++++++---------- packages/x-charts/src/hooks/useTicks.ts | 21 +++++++++--------- packages/x-charts/src/models/axis.ts | 2 +- 5 files changed, 27 insertions(+), 26 deletions(-) diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index fccbcbc4f866..7b7b3eeab499 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -38,7 +38,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { const props = useThemeProps({ props: { ...defaultProps, ...inProps }, name: 'MuiChartsXAxis' }); const { xAxis: { - [props.axisId]: { scale: xScale, ticksNumber, ...settings }, + [props.axisId]: { scale: xScale, tickNumber, ...settings }, }, } = React.useContext(CartesianContext); @@ -63,7 +63,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { const tickSize = disableTicks ? 4 : tickSizeProp; - const xTicks = useTicks({ scale: xScale, ticksNumber, valueFormatter }); + const xTicks = useTicks({ scale: xScale, tickNumber, valueFormatter }); const positionSigne = position === 'bottom' ? 1 : -1; const labelRefPoint = { diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index 053a04bbca77..d2d532fd197a 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -38,7 +38,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { const props = useThemeProps({ props: { ...defaultProps, ...inProps }, name: 'MuiChartsYAxis' }); const { yAxis: { - [props.axisId]: { scale: yScale, ticksNumber, ...settings }, + [props.axisId]: { scale: yScale, tickNumber, ...settings }, }, } = React.useContext(CartesianContext); @@ -63,7 +63,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { const tickSize = disableTicks ? 4 : tickSizeProp; - const yTicks = useTicks({ scale: yScale, ticksNumber, valueFormatter }); + const yTicks = useTicks({ scale: yScale, tickNumber, valueFormatter }); const positionSigne = position === 'right' ? 1 : -1; diff --git a/packages/x-charts/src/context/CartesianContextProvider.tsx b/packages/x-charts/src/context/CartesianContextProvider.tsx index acbf9c9dc7c2..f35b88e2223f 100644 --- a/packages/x-charts/src/context/CartesianContextProvider.tsx +++ b/packages/x-charts/src/context/CartesianContextProvider.tsx @@ -26,7 +26,7 @@ import { ExtremumGetterResult, } from '../models/seriesType/config'; import { MakeOptional } from '../models/helpers'; -import { getTicksNumber } from '../hooks/useTicks'; +import { getTickNumber } from '../hooks/useTicks'; export type CartesianContextProviderProps = { xAxis?: MakeOptional[]; @@ -183,14 +183,14 @@ function CartesianContextProvider({ scale: scaleBand(axis.data!, range) .paddingInner(categoryGapRatio) .paddingOuter(categoryGapRatio / 2), - ticksNumber: axis.data!.length, + tickNumber: axis.data!.length, }; } if (isPointScaleConfig(axis)) { completedXAxis[axis.id] = { ...axis, scale: scalePoint(axis.data!, range), - ticksNumber: axis.data!.length, + tickNumber: axis.data!.length, }; } if (axis.scaleType === 'band' || axis.scaleType === 'point') { @@ -201,9 +201,9 @@ function CartesianContextProvider({ const scaleType = axis.scaleType ?? 'linear'; const extremums = [axis.min ?? minData, axis.max ?? maxData]; - const ticksNumber = getTicksNumber({ ...axis, range, domain: extremums }); + const tickNumber = getTickNumber({ ...axis, range, domain: extremums }); - const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber); + const niceScale = getScale(scaleType, extremums, range).nice(tickNumber); const niceDomain = niceScale.domain(); const domain = [axis.min ?? niceDomain[0], axis.max ?? niceDomain[1]]; @@ -211,7 +211,7 @@ function CartesianContextProvider({ ...axis, scaleType, scale: niceScale.domain(domain), - ticksNumber, + tickNumber, } as AxisDefaultized; }); @@ -237,14 +237,14 @@ function CartesianContextProvider({ scale: scaleBand(axis.data!, [range[1], range[0]]) .paddingInner(categoryGapRatio) .paddingOuter(categoryGapRatio / 2), - ticksNumber: axis.data!.length, + tickNumber: axis.data!.length, }; } if (isPointScaleConfig(axis)) { completedYAxis[axis.id] = { ...axis, scale: scalePoint(axis.data!, [range[1], range[0]]), - ticksNumber: axis.data!.length, + tickNumber: axis.data!.length, }; } if (axis.scaleType === 'band' || axis.scaleType === 'point') { @@ -255,9 +255,9 @@ function CartesianContextProvider({ const scaleType = axis.scaleType ?? 'linear'; const extremums = [axis.min ?? minData, axis.max ?? maxData]; - const ticksNumber = getTicksNumber({ ...axis, range, domain: extremums }); + const tickNumber = getTickNumber({ ...axis, range, domain: extremums }); - const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber); + const niceScale = getScale(scaleType, extremums, range).nice(tickNumber); const niceDomain = niceScale.domain(); const domain = [axis.min ?? niceDomain[0], axis.max ?? niceDomain[1]]; @@ -265,7 +265,7 @@ function CartesianContextProvider({ ...axis, scaleType, scale: niceScale.domain(domain), - ticksNumber, + tickNumber, } as AxisDefaultized; }); diff --git a/packages/x-charts/src/hooks/useTicks.ts b/packages/x-charts/src/hooks/useTicks.ts index c4166ea91e4a..143901bf24d4 100644 --- a/packages/x-charts/src/hooks/useTicks.ts +++ b/packages/x-charts/src/hooks/useTicks.ts @@ -22,7 +22,7 @@ export interface TickParams { tickNumber?: number; } -export function getTicksNumber( +export function getTickNumber( params: TickParams & { range: any[]; domain: any[]; @@ -40,12 +40,13 @@ export function getTicksNumber( return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber)); } -function useTicks(options: { - scale: D3Scale; - ticksNumber?: number; - valueFormatter?: (value: any) => string; -}) { - const { scale, ticksNumber, valueFormatter } = options; +function useTicks( + options: { + scale: D3Scale; + valueFormatter?: (value: any) => string; + } & Pick, +) { + const { scale, tickNumber, valueFormatter } = options; return React.useMemo(() => { // band scale @@ -77,12 +78,12 @@ function useTicks(options: { })); } - return scale.ticks(ticksNumber).map((value: any) => ({ - formattedValue: valueFormatter?.(value) ?? scale.tickFormat(ticksNumber)(value), + return scale.ticks(tickNumber).map((value: any) => ({ + formattedValue: valueFormatter?.(value) ?? scale.tickFormat(tickNumber)(value), offset: scale(value), labelOffset: 0, })); - }, [ticksNumber, scale, valueFormatter]); + }, [tickNumber, scale, valueFormatter]); } export default useTicks; diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index 3b600edda322..8bdc7b91da37 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -185,7 +185,7 @@ export type AxisDefaultized = Omit< 'scaleType' > & AxisScaleConfig[S] & { - ticksNumber: number; + tickNumber: number; }; export function isBandScaleConfig( From 19941b22f91d54b1f687e559333fe60714ef55d2 Mon Sep 17 00:00:00 2001 From: alexandre Date: Thu, 12 Oct 2023 10:06:08 +0200 Subject: [PATCH 02/24] fix demo formatter --- docs/data/charts/lines/CSSCustomization.js | 2 +- docs/data/charts/lines/CSSCustomization.tsx | 2 +- docs/data/charts/lines/StackedAreas.js | 2 +- docs/data/charts/lines/StackedAreas.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/charts/lines/CSSCustomization.js b/docs/data/charts/lines/CSSCustomization.js index 256220f5f71c..480e020b8956 100644 --- a/docs/data/charts/lines/CSSCustomization.js +++ b/docs/data/charts/lines/CSSCustomization.js @@ -71,7 +71,7 @@ export default function CSSCustomization() { id: 'Years', data: years, scaleType: 'time', - valueFormatter: (date) => date.getFullYear(), + valueFormatter: (date) => date.getFullYear().toString(), }, ]} series={[ diff --git a/docs/data/charts/lines/CSSCustomization.tsx b/docs/data/charts/lines/CSSCustomization.tsx index 256220f5f71c..480e020b8956 100644 --- a/docs/data/charts/lines/CSSCustomization.tsx +++ b/docs/data/charts/lines/CSSCustomization.tsx @@ -71,7 +71,7 @@ export default function CSSCustomization() { id: 'Years', data: years, scaleType: 'time', - valueFormatter: (date) => date.getFullYear(), + valueFormatter: (date) => date.getFullYear().toString(), }, ]} series={[ diff --git a/docs/data/charts/lines/StackedAreas.js b/docs/data/charts/lines/StackedAreas.js index 76875e7605f5..5a895f8a4b44 100644 --- a/docs/data/charts/lines/StackedAreas.js +++ b/docs/data/charts/lines/StackedAreas.js @@ -62,7 +62,7 @@ export default function StackedAreas() { id: 'Years', data: years, scaleType: 'time', - valueFormatter: (date) => date.getFullYear(), + valueFormatter: (date) => date.getFullYear().toString(), }, ]} series={[ diff --git a/docs/data/charts/lines/StackedAreas.tsx b/docs/data/charts/lines/StackedAreas.tsx index 76875e7605f5..5a895f8a4b44 100644 --- a/docs/data/charts/lines/StackedAreas.tsx +++ b/docs/data/charts/lines/StackedAreas.tsx @@ -62,7 +62,7 @@ export default function StackedAreas() { id: 'Years', data: years, scaleType: 'time', - valueFormatter: (date) => date.getFullYear(), + valueFormatter: (date) => date.getFullYear().toString(), }, ]} series={[ From c38d66fcef4063c2dcdf479182e369733a4fb530 Mon Sep 17 00:00:00 2001 From: alexandre Date: Thu, 12 Oct 2023 11:18:39 +0200 Subject: [PATCH 03/24] set scale output type to number --- packages/x-charts/src/models/axis.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index 8bdc7b91da37..182f10b2cbac 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -12,17 +12,17 @@ import { ChartsTextProps } from '../internals/components/ChartsText'; export type D3Scale = | ScaleBand - | ScaleLogarithmic + | ScaleLogarithmic | ScalePoint - | ScalePower - | ScaleTime - | ScaleLinear; + | ScalePower + | ScaleTime + | ScaleLinear; export type D3ContinuouseScale = - | ScaleLogarithmic - | ScalePower - | ScaleTime - | ScaleLinear; + | ScaleLogarithmic + | ScalePower + | ScaleTime + | ScaleLinear; export interface ChartsAxisSlotsComponent { axisLine?: React.JSXElementConstructor>; From beabeac99592ee1b162e4398278163eea2a866b4 Mon Sep 17 00:00:00 2001 From: alexandre Date: Thu, 12 Oct 2023 11:32:19 +0200 Subject: [PATCH 04/24] udpate x axis --- .../x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 82 +++++++++++++++---- packages/x-charts/src/hooks/useTicks.ts | 39 +++++++-- packages/x-charts/src/models/axis.ts | 17 ++++ 3 files changed, 115 insertions(+), 23 deletions(-) diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 7b7b3eeab499..4933778d43b5 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -5,11 +5,11 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { useThemeProps, useTheme, Theme } from '@mui/material/styles'; import { CartesianContext } from '../context/CartesianContextProvider'; import { DrawingContext } from '../context/DrawingProvider'; -import useTicks from '../hooks/useTicks'; +import useTicks, { TickItemType } from '../hooks/useTicks'; import { ChartsXAxisProps } from '../models/axis'; import { getAxisUtilityClass } from '../ChartsAxis/axisClasses'; import { AxisRoot } from '../internals/components/AxisSharedComponents'; -import { ChartsText, ChartsTextProps } from '../internals/components/ChartsText'; +import { ChartsText, ChartsTextProps, getWordsByLines } from '../internals/components/ChartsText'; const useUtilityClasses = (ownerState: ChartsXAxisProps & { theme: Theme }) => { const { classes, position } = ownerState; @@ -25,12 +25,53 @@ const useUtilityClasses = (ownerState: ChartsXAxisProps & { theme: Theme }) => { return composeClasses(slots, getAxisUtilityClass, classes); }; +type LabelExtraData = { width: number; height: number; skipLabel?: boolean }; + +function addLabelDimension( + xTicks: TickItemType[], + { + tickLabelStyle: style, + tickLabelInterval, + }: Pick, +): (TickItemType & LabelExtraData)[] { + const withDimension = xTicks.map((tick) => { + if (tick.formattedValue === undefined) { + return { ...tick, width: 0, height: 0 }; + } + const tickSizes = getWordsByLines({ style, needsComputation: true, text: tick.formattedValue }); + return { + ...tick, + width: Math.max(...tickSizes.map((size) => size.width)), + height: Math.max(tickSizes.length * tickSizes[0].height), + }; + }); + + if (typeof tickLabelInterval === 'function') { + return withDimension.map((item, index) => ({ + ...item, + skipLabel: !tickLabelInterval(item.value, index), + })); + } + // TODO: add the filetering logic + let textStart = 0; + let textEnd = 0; + return withDimension.map((item, labelIndex) => { + const { width, offset, labelOffset } = item; + textStart = offset + labelOffset - (1.5 * width) / 2; + if (labelIndex > 0 && textStart < textEnd) { + // Except for the first label, we skip all label that overlap with the last accepted. + // Notice that the early return prevent textEnd to be updated. + return { ...item, skipLabel: true }; + } + textEnd = offset + labelOffset + width / 2; + return item; + }); +} + const defaultProps = { position: 'bottom', disableLine: false, disableTicks: false, - tickFontSize: 12, - labelFontSize: 14, tickSize: 6, } as const; @@ -47,13 +88,17 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { position, disableLine, disableTicks, - tickFontSize, + tickLabelStyle, label, + labelStyle, + tickFontSize, labelFontSize, tickSize: tickSizeProp, valueFormatter, slots, slotProps, + tickInterval, + tickLabelInterval, } = defaultizedProps; const theme = useTheme(); @@ -63,14 +108,8 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { const tickSize = disableTicks ? 4 : tickSizeProp; - const xTicks = useTicks({ scale: xScale, tickNumber, valueFormatter }); const positionSigne = position === 'bottom' ? 1 : -1; - const labelRefPoint = { - x: left + width / 2, - y: positionSigne * (tickFontSize + tickSize + 10), - }; - const Line = slots?.axisLine ?? 'line'; const Tick = slots?.axisTick ?? 'line'; const TickLabel = slots?.axisTickLabel ?? ChartsText; @@ -82,13 +121,25 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { additionalProps: { textAnchor: 'middle', dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', - style: { fontSize: tickFontSize }, + style: { fontSize: tickFontSize ?? 12, ...tickLabelStyle }, className: classes.tickLabel, } as Partial, className: classes.tickLabel, ownerState: {}, }); + const xTicks = useTicks({ scale: xScale, tickNumber, valueFormatter, tickInterval }); + + const xTicksWithDimension = addLabelDimension(xTicks, { + tickLabelStyle: axisTickLabelProps.style, + tickLabelInterval, + }); + + const labelRefPoint = { + x: left + width / 2, + y: positionSigne * (tickSize + 22), + }; + const axisLabelProps = useSlotProps({ elementType: Label, externalSlotProps: slotProps?.axisLabel, @@ -96,8 +147,9 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { textAnchor: 'middle', dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', style: { - fontSize: labelFontSize, + fontSize: labelFontSize ?? 14, transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`, + ...labelStyle, }, className: classes.label, } as Partial, @@ -118,7 +170,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { /> )} - {xTicks.map(({ formattedValue, offset, labelOffset }, index) => { + {xTicksWithDimension.map(({ formattedValue, offset, labelOffset, skipLabel }, index) => { const xTickLabel = labelOffset ?? 0; const yTickLabel = positionSigne * (tickSize + 3); return ( @@ -131,7 +183,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { /> )} - {formattedValue !== undefined && ( + {formattedValue !== undefined && !skipLabel && ( boolean which is availabel only if the axis has a data property. + * @default 'auto' + */ + tickInterval?: 'auto' | ((value: any, index: number) => boolean); } export function getTickNumber( @@ -40,13 +47,23 @@ export function getTickNumber( return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber)); } +export type TickItemType = { + /** + * This property is undefined only if it's the tick closing the last band + * */ + value?: any; + formattedValue?: string; + offset: number; + labelOffset: number; +}; + function useTicks( options: { scale: D3Scale; valueFormatter?: (value: any) => string; - } & Pick, -) { - const { scale, tickNumber, valueFormatter } = options; + } & Pick, +): TickItemType[] { + const { scale, tickNumber, valueFormatter, tickInterval } = options; return React.useMemo(() => { // band scale @@ -57,7 +74,8 @@ function useTicks( // scale type = 'band' return [ ...domain.map((value) => ({ - formattedValue: valueFormatter?.(value) ?? value, + value, + formattedValue: valueFormatter?.(value) ?? `${value}`, offset: scale(value)! - (scale.step() - scale.bandwidth()) / 2, labelOffset: scale.step() / 2, })), @@ -71,19 +89,24 @@ function useTicks( } // scale type = 'point' - return domain.map((value) => ({ - formattedValue: valueFormatter?.(value) ?? value, + const filteredDomain = + typeof tickInterval === 'function' ? domain.filter(tickInterval) : domain; + return filteredDomain.map((value) => ({ + value, + formattedValue: valueFormatter?.(value) ?? `${value}`, offset: scale(value)!, labelOffset: 0, })); } - return scale.ticks(tickNumber).map((value: any) => ({ + const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber); + return ticks.map((value: any) => ({ + value, formattedValue: valueFormatter?.(value) ?? scale.tickFormat(tickNumber)(value), offset: scale(value), labelOffset: 0, })); - }, [tickNumber, scale, valueFormatter]); + }, [tickNumber, scale, valueFormatter, tickInterval]); } export default useTicks; diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index 182f10b2cbac..8b8f0c1844ae 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -61,8 +61,24 @@ export interface ChartsAxisProps extends TickParams { /** * The font size of the axis ticks text. * @default 12 + * @deprecated You can us `tickLabelStyle.fontSize` instead. */ tickFontSize?: number; + /** + * 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. */ @@ -70,6 +86,7 @@ export interface ChartsAxisProps extends TickParams { /** * The font size of the axis label. * @default 14 + * @deprecated You can us `labelStyle.fontSize` instead. */ labelFontSize?: number; /** From a6557ed599eb8a2f7ad5b81796b5a2f782edc63f Mon Sep 17 00:00:00 2001 From: alexandre Date: Thu, 12 Oct 2023 11:34:34 +0200 Subject: [PATCH 05/24] scripts --- docs/pages/x/api/charts/bar-chart.json | 8 +++---- docs/pages/x/api/charts/charts-axis.json | 8 +++---- docs/pages/x/api/charts/charts-x-axis.json | 24 +++++++++++++++++-- docs/pages/x/api/charts/charts-y-axis.json | 24 +++++++++++++++++-- docs/pages/x/api/charts/line-chart.json | 8 +++---- docs/pages/x/api/charts/pie-chart.json | 8 +++---- docs/pages/x/api/charts/scatter-chart.json | 8 +++---- docs/pages/x/api/charts/spark-line-chart.json | 2 +- .../api-docs/charts/charts-x-axis.json | 20 ++++++++++++++++ .../api-docs/charts/charts-y-axis.json | 20 ++++++++++++++++ packages/x-charts/src/BarChart/BarChart.tsx | 24 +++++++++++++++++++ .../x-charts/src/ChartsAxis/ChartsAxis.tsx | 16 +++++++++++++ .../x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 24 +++++++++++++++++++ .../x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 24 +++++++++++++++++++ packages/x-charts/src/LineChart/LineChart.tsx | 24 +++++++++++++++++++ packages/x-charts/src/PieChart/PieChart.tsx | 24 +++++++++++++++++++ .../src/ScatterChart/ScatterChart.tsx | 24 +++++++++++++++++++ .../src/SparkLineChart/SparkLineChart.tsx | 4 ++++ .../src/context/CartesianContextProvider.tsx | 8 +++++++ 19 files changed, 277 insertions(+), 25 deletions(-) diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index 90f88f7b340a..2256490ce1f2 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -13,14 +13,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -29,7 +29,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/charts-axis.json b/docs/pages/x/api/charts/charts-axis.json index 284533555f66..272809f9c2a4 100644 --- a/docs/pages/x/api/charts/charts-axis.json +++ b/docs/pages/x/api/charts/charts-axis.json @@ -3,21 +3,21 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -26,7 +26,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/charts-x-axis.json b/docs/pages/x/api/charts/charts-x-axis.json index e1aa65e21140..d468be1fb984 100644 --- a/docs/pages/x/api/charts/charts-x-axis.json +++ b/docs/pages/x/api/charts/charts-x-axis.json @@ -6,12 +6,32 @@ "disableTicks": { "type": { "name": "bool" } }, "fill": { "type": { "name": "string" }, "default": "'currentColor'" }, "label": { "type": { "name": "string" } }, - "labelFontSize": { "type": { "name": "number" }, "default": "14" }, + "labelFontSize": { + "type": { "name": "number" }, + "default": "14", + "deprecated": true, + "deprecationInfo": "You can us labelStyle.fontSize instead." + }, + "labelStyle": { "type": { "name": "object" } }, "position": { "type": { "name": "enum", "description": "'bottom'
| 'top'" } }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" }, "stroke": { "type": { "name": "string" }, "default": "'currentColor'" }, - "tickFontSize": { "type": { "name": "number" }, "default": "12" }, + "tickFontSize": { + "type": { "name": "number" }, + "default": "12", + "deprecated": true, + "deprecationInfo": "You can us tickLabelStyle.fontSize instead." + }, + "tickInterval": { + "type": { "name": "union", "description": "'auto'
| func" }, + "default": "'auto'" + }, + "tickLabelInterval": { + "type": { "name": "union", "description": "'auto'
| func" }, + "default": "'auto'" + }, + "tickLabelStyle": { "type": { "name": "object" } }, "tickMaxStep": { "type": { "name": "number" } }, "tickMinStep": { "type": { "name": "number" } }, "tickNumber": { "type": { "name": "number" } }, diff --git a/docs/pages/x/api/charts/charts-y-axis.json b/docs/pages/x/api/charts/charts-y-axis.json index e49510b31850..1f8340647a40 100644 --- a/docs/pages/x/api/charts/charts-y-axis.json +++ b/docs/pages/x/api/charts/charts-y-axis.json @@ -6,12 +6,32 @@ "disableTicks": { "type": { "name": "bool" } }, "fill": { "type": { "name": "string" }, "default": "'currentColor'" }, "label": { "type": { "name": "string" } }, - "labelFontSize": { "type": { "name": "number" }, "default": "14" }, + "labelFontSize": { + "type": { "name": "number" }, + "default": "14", + "deprecated": true, + "deprecationInfo": "You can us labelStyle.fontSize instead." + }, + "labelStyle": { "type": { "name": "object" } }, "position": { "type": { "name": "enum", "description": "'left'
| 'right'" } }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" }, "stroke": { "type": { "name": "string" }, "default": "'currentColor'" }, - "tickFontSize": { "type": { "name": "number" }, "default": "12" }, + "tickFontSize": { + "type": { "name": "number" }, + "default": "12", + "deprecated": true, + "deprecationInfo": "You can us tickLabelStyle.fontSize instead." + }, + "tickInterval": { + "type": { "name": "union", "description": "'auto'
| func" }, + "default": "'auto'" + }, + "tickLabelInterval": { + "type": { "name": "union", "description": "'auto'
| func" }, + "default": "'auto'" + }, + "tickLabelStyle": { "type": { "name": "object" } }, "tickMaxStep": { "type": { "name": "number" } }, "tickMinStep": { "type": { "name": "number" } }, "tickNumber": { "type": { "name": "number" } }, diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index 6f29efdbda6c..d1b13777a673 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -14,14 +14,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -30,7 +30,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index 5089fd20032e..68a50b3b222b 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -13,14 +13,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -28,7 +28,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index c0c77195ea16..3ce8ca911a35 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -13,14 +13,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -29,7 +29,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index 324c72d58cc7..74ae98666d4c 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -27,7 +27,7 @@ "xAxis": { "type": { "name": "shape", - "description": "{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }" + "description": "{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }" } } }, diff --git a/docs/translations/api-docs/charts/charts-x-axis.json b/docs/translations/api-docs/charts/charts-x-axis.json index 69d91b072006..6cad06e8cf7b 100644 --- a/docs/translations/api-docs/charts/charts-x-axis.json +++ b/docs/translations/api-docs/charts/charts-x-axis.json @@ -32,6 +32,11 @@ "deprecated": "", "typeDescriptions": {} }, + "labelStyle": { + "description": "The style applied to the axis label.", + "deprecated": "", + "typeDescriptions": {} + }, "position": { "description": "Position of the axis.", "deprecated": "", @@ -57,6 +62,21 @@ "deprecated": "", "typeDescriptions": {} }, + "tickInterval": { + "description": "Defines which ticks are displayed. Its value can be: - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property.", + "deprecated": "", + "typeDescriptions": {} + }, + "tickLabelInterval": { + "description": "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.", + "deprecated": "", + "typeDescriptions": {} + }, + "tickLabelStyle": { + "description": "The style applied to ticks text.", + "deprecated": "", + "typeDescriptions": {} + }, "tickMaxStep": { "description": "Maximal step between two ticks. When using time data, the value is assumed to be in ms. Not supported by categorical axis (band, points).", "deprecated": "", diff --git a/docs/translations/api-docs/charts/charts-y-axis.json b/docs/translations/api-docs/charts/charts-y-axis.json index 69d91b072006..6cad06e8cf7b 100644 --- a/docs/translations/api-docs/charts/charts-y-axis.json +++ b/docs/translations/api-docs/charts/charts-y-axis.json @@ -32,6 +32,11 @@ "deprecated": "", "typeDescriptions": {} }, + "labelStyle": { + "description": "The style applied to the axis label.", + "deprecated": "", + "typeDescriptions": {} + }, "position": { "description": "Position of the axis.", "deprecated": "", @@ -57,6 +62,21 @@ "deprecated": "", "typeDescriptions": {} }, + "tickInterval": { + "description": "Defines which ticks are displayed. Its value can be: - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property.", + "deprecated": "", + "typeDescriptions": {} + }, + "tickLabelInterval": { + "description": "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.", + "deprecated": "", + "typeDescriptions": {} + }, + "tickLabelStyle": { + "description": "The style applied to ticks text.", + "deprecated": "", + "typeDescriptions": {} + }, "tickMaxStep": { "description": "Maximal step between two ticks. When using time data, the value is assumed to be in ms. Not supported by categorical axis (band, points).", "deprecated": "", diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index 941f724b0303..b335bb582fcd 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -172,11 +172,15 @@ BarChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -209,11 +213,15 @@ BarChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -255,11 +263,15 @@ BarChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -333,11 +345,15 @@ BarChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -365,6 +381,7 @@ BarChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -373,6 +390,9 @@ BarChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -393,6 +413,7 @@ BarChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -401,6 +422,9 @@ BarChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, diff --git a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx index 805c512a5648..897976ca30ce 100644 --- a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx +++ b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx @@ -132,11 +132,15 @@ ChartsAxis.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -158,11 +162,15 @@ ChartsAxis.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -184,11 +192,15 @@ ChartsAxis.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -220,11 +232,15 @@ ChartsAxis.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 4933778d43b5..472ef3afc95f 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -240,8 +240,13 @@ ChartsXAxis.propTypes = { /** * The font size of the axis label. * @default 14 + * @deprecated You can us `labelStyle.fontSize` instead. */ labelFontSize: PropTypes.number, + /** + * The style applied to the axis label. + */ + labelStyle: PropTypes.object, /** * Position of the axis. */ @@ -264,8 +269,27 @@ ChartsXAxis.propTypes = { /** * The font size of the axis ticks text. * @default 12 + * @deprecated You can us `tickLabelStyle.fontSize` instead. */ tickFontSize: PropTypes.number, + /** + * Defines which ticks are displayed. Its value can be: + * - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. + * - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property. + * @default 'auto' + */ + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + /** + * 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: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + /** + * The style applied to ticks text. + */ + tickLabelStyle: PropTypes.object, /** * Maximal step between two ticks. * When using time data, the value is assumed to be in ms. diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index d2d532fd197a..359a93914a38 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -189,8 +189,13 @@ ChartsYAxis.propTypes = { /** * The font size of the axis label. * @default 14 + * @deprecated You can us `labelStyle.fontSize` instead. */ labelFontSize: PropTypes.number, + /** + * The style applied to the axis label. + */ + labelStyle: PropTypes.object, /** * Position of the axis. */ @@ -213,8 +218,27 @@ ChartsYAxis.propTypes = { /** * The font size of the axis ticks text. * @default 12 + * @deprecated You can us `tickLabelStyle.fontSize` instead. */ tickFontSize: PropTypes.number, + /** + * Defines which ticks are displayed. Its value can be: + * - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. + * - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property. + * @default 'auto' + */ + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + /** + * 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: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + /** + * The style applied to ticks text. + */ + tickLabelStyle: PropTypes.object, /** * Maximal step between two ticks. * When using time data, the value is assumed to be in ms. diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index fb8a7855ec35..5afa8420ab4b 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -179,11 +179,15 @@ LineChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -219,11 +223,15 @@ LineChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -265,11 +273,15 @@ LineChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -355,11 +367,15 @@ LineChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -387,6 +403,7 @@ LineChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -395,6 +412,9 @@ LineChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -415,6 +435,7 @@ LineChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -423,6 +444,9 @@ LineChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index a4153bf96394..8b64f56a8432 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -145,11 +145,15 @@ PieChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -181,11 +185,15 @@ PieChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -228,11 +236,15 @@ PieChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -323,11 +335,15 @@ PieChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -355,6 +371,7 @@ PieChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -363,6 +380,9 @@ PieChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -383,6 +403,7 @@ PieChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -391,6 +412,9 @@ PieChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 7decd47c93be..a83a5eba34d9 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -133,11 +133,15 @@ ScatterChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -169,11 +173,15 @@ ScatterChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -215,11 +223,15 @@ ScatterChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['left', 'right']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -288,11 +300,15 @@ ScatterChart.propTypes = { fill: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, position: PropTypes.oneOf(['bottom', 'top']), slotProps: PropTypes.object, slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -320,6 +336,7 @@ ScatterChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -328,6 +345,9 @@ ScatterChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -348,6 +368,7 @@ ScatterChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -356,6 +377,9 @@ ScatterChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index ba5924156fec..02641870ae69 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -304,6 +304,7 @@ SparkLineChart.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -312,6 +313,9 @@ SparkLineChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, diff --git a/packages/x-charts/src/context/CartesianContextProvider.tsx b/packages/x-charts/src/context/CartesianContextProvider.tsx index f35b88e2223f..1f4a02e0f0d3 100644 --- a/packages/x-charts/src/context/CartesianContextProvider.tsx +++ b/packages/x-charts/src/context/CartesianContextProvider.tsx @@ -309,6 +309,7 @@ CartesianContextProvider.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -317,6 +318,9 @@ CartesianContextProvider.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, @@ -337,6 +341,7 @@ CartesianContextProvider.propTypes = { id: PropTypes.string, label: PropTypes.string, labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), @@ -345,6 +350,9 @@ CartesianContextProvider.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, tickMinStep: PropTypes.number, tickNumber: PropTypes.number, From 97c6ae945801cb8d62e55885b539ea2854e3afca Mon Sep 17 00:00:00 2001 From: alexandre Date: Thu, 12 Oct 2023 15:25:32 +0200 Subject: [PATCH 06/24] support rotation --- docs/data/charts/stacking/StackOrderDemo.js | 22 ++++---- docs/data/charts/stacking/StackOrderDemo.tsx | 21 ++++---- .../src/ChartsLegend/ChartsLegend.tsx | 33 ++++++------ .../x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 41 +++++++++++---- .../x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 16 +++--- .../src/internals/components/ChartsText.tsx | 52 +++++++++---------- packages/x-charts/src/internals/domUtils.ts | 1 - 7 files changed, 100 insertions(+), 86 deletions(-) diff --git a/docs/data/charts/stacking/StackOrderDemo.js b/docs/data/charts/stacking/StackOrderDemo.js index 2a838831f476..849e21d887f4 100644 --- a/docs/data/charts/stacking/StackOrderDemo.js +++ b/docs/data/charts/stacking/StackOrderDemo.js @@ -4,8 +4,6 @@ import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import { BarChart } from '@mui/x-charts/BarChart'; -import { axisClasses } from '@mui/x-charts/ChartsAxis'; - // Data comming from https://www.insee.fr/fr/statistiques/5013868 const commonTransportation = [ 6.5, 12.5, 17.2, 19.6, 20.1, 20.0, 19.5, 18.8, 18.2, 17.3, 16.4, 15.9, 15.2, 14.7, @@ -110,22 +108,22 @@ export default function StackOrderDemo() { diff --git a/docs/data/charts/stacking/StackOrderDemo.tsx b/docs/data/charts/stacking/StackOrderDemo.tsx index abcbbb16aa82..97449aeadfac 100644 --- a/docs/data/charts/stacking/StackOrderDemo.tsx +++ b/docs/data/charts/stacking/StackOrderDemo.tsx @@ -4,7 +4,6 @@ import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import { BarChart } from '@mui/x-charts/BarChart'; import { StackOrderType } from '@mui/x-charts/models'; -import { axisClasses } from '@mui/x-charts/ChartsAxis'; // Data comming from https://www.insee.fr/fr/statistiques/5013868 const commonTransportation = [ @@ -105,22 +104,22 @@ export default function StackOrderDemo() { diff --git a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx index 3a36e0288efa..1f773fbb903f 100644 --- a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx +++ b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx @@ -9,7 +9,7 @@ import { FormattedSeries, SeriesContext } from '../context/SeriesContextProvider import { ChartsLegendClasses, getChartsLegendUtilityClass } from './chartsLegendClasses'; import { DefaultizedProps } from '../models/helpers'; import { LegendParams } from '../models/seriesType/config'; -import { ChartsText, getWordsByLines } from '../internals/components/ChartsText'; +import { ChartsText, ChartsTextStyle, getWordsByLines } from '../internals/components/ChartsText'; import { CardinalDirections } from '../models/layout'; export interface ChartsLegendSlotsComponent { @@ -91,7 +91,7 @@ export interface LegendRendererProps * Style applied to legend labels. * @default theme.typography.subtitle1 */ - labelStyle?: React.CSSProperties; + labelStyle?: ChartsTextStyle; /** * Width of the item mark (in px). * @default 20 @@ -159,20 +159,24 @@ function DefaultChartsLegend(props: LegendRendererProps) { const theme = useTheme(); const labelStyle = React.useMemo( - () => ({ - ...theme.typography.subtitle1, - color: 'inherit', - fill: (theme.vars || theme).palette.text.primary, - lineHeight: 1, - ...inLabelStyle, - }), + () => + ({ + ...theme.typography.subtitle1, + color: 'inherit', + dominantBaseline: 'central', + textAnchor: 'start', + fill: (theme.vars || theme).palette.text.primary, + lineHeight: 1, + ...inLabelStyle, + } as ChartsTextStyle), // To say to TS that the dominantBaseline and textAnchor are correct [inLabelStyle, theme], ); const padding = React.useMemo(() => getStandardizedPadding(paddingProps), [paddingProps]); const getItemSpace = React.useCallback( - (label: string, style?: React.CSSProperties) => { + (label: string, inStyle: ChartsTextStyle = {}) => { + const { rotate, dominantBaseline, ...style } = inStyle; const linesSize = getWordsByLines({ style, needsComputation: true, text: label }); const innerSize = { innerWidth: itemMarkWidth + markGap + Math.max(...linesSize.map((size) => size.width)), @@ -332,14 +336,7 @@ function DefaultChartsLegend(props: LegendRendererProps) { height={itemMarkHeight} fill={color} /> - + ))} diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 472ef3afc95f..51dda4c8b237 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -27,6 +27,20 @@ const useUtilityClasses = (ownerState: ChartsXAxisProps & { theme: Theme }) => { type LabelExtraData = { width: number; height: number; skipLabel?: boolean }; +/** + * Return a rough approximate of the needed horizontal gap between two boxes to avoid overlap. + */ +function getDistance({ width, height, angle }: Record) { + if (Math.abs(angle % 180) < 10 || Math.abs(angle % 180) > 170) { + // It's nearly horizontal + return width; + } + if (Math.abs(((angle % 180) - 90) % 180) < 10) { + // It's nearly vertical + return height; + } + return height / Math.sin(angle); +} function addLabelDimension( xTicks: TickItemType[], { @@ -52,18 +66,22 @@ function addLabelDimension( skipLabel: !tickLabelInterval(item.value, index), })); } - // TODO: add the filetering logic + + // Filter label to avoid overlap let textStart = 0; let textEnd = 0; + return withDimension.map((item, labelIndex) => { - const { width, offset, labelOffset } = item; - textStart = offset + labelOffset - (1.5 * width) / 2; + const { width, offset, labelOffset, height } = item; + + const distance = getDistance({ width, height, angle: style?.angle ?? 0 }); + textStart = offset + labelOffset - (1.8 * distance) / 2; if (labelIndex > 0 && textStart < textEnd) { // Except for the first label, we skip all label that overlap with the last accepted. // Notice that the early return prevent textEnd to be updated. return { ...item, skipLabel: true }; } - textEnd = offset + labelOffset + width / 2; + textEnd = offset + labelOffset + distance / 2; return item; }); } @@ -119,9 +137,12 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { elementType: TickLabel, externalSlotProps: slotProps?.axisTickLabel, additionalProps: { - textAnchor: 'middle', - dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', - style: { fontSize: tickFontSize ?? 12, ...tickLabelStyle }, + style: { + textAnchor: 'middle', + dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', + fontSize: tickFontSize ?? 12, + ...tickLabelStyle, + }, className: classes.tickLabel, } as Partial, className: classes.tickLabel, @@ -144,11 +165,10 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { elementType: Label, externalSlotProps: slotProps?.axisLabel, additionalProps: { - textAnchor: 'middle', - dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', style: { fontSize: labelFontSize ?? 14, - transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`, + textAnchor: 'middle', + dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', ...labelStyle, }, className: classes.label, @@ -187,7 +207,6 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index 359a93914a38..ef9f93e1bf05 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -81,9 +81,11 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { elementType: TickLabel, externalSlotProps: slotProps?.axisTickLabel, additionalProps: { - textAnchor: position === 'right' ? 'start' : 'end', - dominantBaseline: 'central', - style: { fontSize: tickFontSize }, + style: { + fontSize: tickFontSize, + textAnchor: position === 'right' ? 'start' : 'end', + dominantBaseline: 'central', + }, className: classes.tickLabel, } as Partial, ownerState: {}, @@ -93,13 +95,13 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { elementType: Label, externalSlotProps: slotProps?.axisLabel, additionalProps: { - textAnchor: 'middle', - dominantBaseline: 'auto', style: { fontSize: labelFontSize, - transform: `rotate(${positionSigne * 90}deg)`, + angle: positionSigne * 90, transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`, - }, + textAnchor: 'middle', + dominantBaseline: 'auto', + } as Partial['style'], className: classes.label, } as Partial, ownerState: {}, diff --git a/packages/x-charts/src/internals/components/ChartsText.tsx b/packages/x-charts/src/internals/components/ChartsText.tsx index 619004ddd560..8c26f69ffe6a 100644 --- a/packages/x-charts/src/internals/components/ChartsText.tsx +++ b/packages/x-charts/src/internals/components/ChartsText.tsx @@ -1,6 +1,17 @@ import * as React from 'react'; import { getStringSize } from '../domUtils'; +export type ChartsTextBaseline = 'hanging' | 'central' | 'auto'; + +export interface ChartsTextStyle extends React.CSSProperties { + angle?: number; + /** + * The text baseline + * @default 'central' + */ + dominantBaseline?: ChartsTextBaseline; +} + interface GetWordsByLinesParams { /** * Text displayed. @@ -9,7 +20,7 @@ interface GetWordsByLinesParams { /** * Style applied to text elements. */ - style?: React.SVGAttributes<'text'>['style']; + style?: ChartsTextStyle; /** * If true, the line width is computed. * @default false @@ -17,20 +28,16 @@ interface GetWordsByLinesParams { needsComputation?: boolean; } -export type ChartsTextBaseline = 'hanging' | 'central' | 'auto'; - export interface ChartsTextProps - extends Omit, 'width' | 'ref'>, + extends Omit< + React.SVGTextElementAttributes, + 'width' | 'ref' | 'style' | 'dominantBaseline' + >, GetWordsByLinesParams { /** * Height of a text line (in `em`). */ lineHeight?: number; - /** - * The text baseline - * @default 'central' - */ - dominantBaseline?: ChartsTextBaseline; ownerState?: any; } @@ -42,16 +49,9 @@ export function getWordsByLines({ style, needsComputation, text }: GetWordsByLin } export function ChartsText(props: ChartsTextProps) { - const { - x, - y, - textAnchor = 'start', - dominantBaseline = 'central', - style, - text, - ownerState, - ...textProps - } = props; + const { x, y, style: styleProps, text, ownerState, ...textProps } = props; + + const { angle, textAnchor, dominantBaseline, ...style } = styleProps ?? {}; const wordsByLines = React.useMemo( () => getWordsByLines({ style, needsComputation: text.includes('\n'), text }), @@ -71,17 +71,17 @@ export function ChartsText(props: ChartsTextProps) { break; } - // const transforms = []; + const transforms = []; // if (scaleToFit) { // const lineWidth = wordsByLines[0].width; // transforms.push(`scale(${(isNumber(width as number) ? (width as number) / lineWidth : 1) / lineWidth})`); // } - // if (angle) { - // transforms.push(`rotate(${angle}, ${x}, ${y})`); - // } - // if (transforms.length) { - // textProps.transform = transforms.join(' '); - // } + if (angle) { + transforms.push(`rotate(${angle}, ${x}, ${y})`); + } + if (transforms.length) { + textProps.transform = transforms.join(' '); + } return ( !(typeof window !== 'undefined' && window.document && window.setTimeout); From 2c0a4308cceb620ce47964e8fab99348f9b3c911 Mon Sep 17 00:00:00 2001 From: alexandre Date: Thu, 12 Oct 2023 17:12:20 +0200 Subject: [PATCH 07/24] fix y label --- packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index ef9f93e1bf05..ca8754ecfa9f 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -98,7 +98,6 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { style: { fontSize: labelFontSize, angle: positionSigne * 90, - transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`, textAnchor: 'middle', dominantBaseline: 'auto', } as Partial['style'], @@ -138,7 +137,6 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { From 7cdf18613595d018123061453918bc07d620849f Mon Sep 17 00:00:00 2001 From: alexandre Date: Fri, 13 Oct 2023 13:38:45 +0200 Subject: [PATCH 08/24] remove duplicated class --- docs/translations/api-docs/charts/charts-axis.json | 5 ++++- docs/translations/api-docs/charts/charts-x-axis.json | 5 ++++- docs/translations/api-docs/charts/charts-y-axis.json | 5 ++++- packages/x-charts/src/ChartsAxis/axisClasses.ts | 2 +- packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 1 - packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 1 - 6 files changed, 13 insertions(+), 6 deletions(-) diff --git a/docs/translations/api-docs/charts/charts-axis.json b/docs/translations/api-docs/charts/charts-axis.json index 6dba8cffb440..036b1002dee3 100644 --- a/docs/translations/api-docs/charts/charts-axis.json +++ b/docs/translations/api-docs/charts/charts-axis.json @@ -44,7 +44,10 @@ }, "tick": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks" }, "tickLabel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks label" }, - "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the axis label" }, + "label": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the group containing the axis label" + }, "directionX": { "description": "Styles applied to {{nodeName}}.", "nodeName": "x axes" }, "directionY": { "description": "Styles applied to {{nodeName}}.", "nodeName": "y axes" }, "top": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the top axis" }, diff --git a/docs/translations/api-docs/charts/charts-x-axis.json b/docs/translations/api-docs/charts/charts-x-axis.json index 6cad06e8cf7b..148b12e7f6fe 100644 --- a/docs/translations/api-docs/charts/charts-x-axis.json +++ b/docs/translations/api-docs/charts/charts-x-axis.json @@ -110,7 +110,10 @@ }, "tick": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks" }, "tickLabel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks label" }, - "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the axis label" }, + "label": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the group containing the axis label" + }, "directionX": { "description": "Styles applied to {{nodeName}}.", "nodeName": "x axes" }, "directionY": { "description": "Styles applied to {{nodeName}}.", "nodeName": "y axes" }, "top": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the top axis" }, diff --git a/docs/translations/api-docs/charts/charts-y-axis.json b/docs/translations/api-docs/charts/charts-y-axis.json index 6cad06e8cf7b..148b12e7f6fe 100644 --- a/docs/translations/api-docs/charts/charts-y-axis.json +++ b/docs/translations/api-docs/charts/charts-y-axis.json @@ -110,7 +110,10 @@ }, "tick": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks" }, "tickLabel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks label" }, - "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the axis label" }, + "label": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the group containing the axis label" + }, "directionX": { "description": "Styles applied to {{nodeName}}.", "nodeName": "x axes" }, "directionY": { "description": "Styles applied to {{nodeName}}.", "nodeName": "y axes" }, "top": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the top axis" }, diff --git a/packages/x-charts/src/ChartsAxis/axisClasses.ts b/packages/x-charts/src/ChartsAxis/axisClasses.ts index 81f4e42632a8..7386615ffa5a 100644 --- a/packages/x-charts/src/ChartsAxis/axisClasses.ts +++ b/packages/x-charts/src/ChartsAxis/axisClasses.ts @@ -14,7 +14,7 @@ export interface ChartsAxisClasses { tick: string; /** Styles applied to ticks label. */ tickLabel: string; - /** Styles applied to the axis label. */ + /** Styles applied to the group containing the axis label. */ label: string; /** Styles applied to x axes. */ directionX: string; diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 51dda4c8b237..4af0bc6c6b15 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -171,7 +171,6 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { dominantBaseline: position === 'bottom' ? 'hanging' : 'auto', ...labelStyle, }, - className: classes.label, } as Partial, ownerState: {}, }); diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index ca8754ecfa9f..0dff165d8893 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -101,7 +101,6 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { textAnchor: 'middle', dominantBaseline: 'auto', } as Partial['style'], - className: classes.label, } as Partial, ownerState: {}, }); From ca4bc0dc1390058bc24c491e631692629764ccfe Mon Sep 17 00:00:00 2001 From: alexandre Date: Fri, 13 Oct 2023 14:14:20 +0200 Subject: [PATCH 09/24] refine margins --- packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 4af0bc6c6b15..0e0424c673a5 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -75,13 +75,16 @@ function addLabelDimension( const { width, offset, labelOffset, height } = item; const distance = getDistance({ width, height, angle: style?.angle ?? 0 }); - textStart = offset + labelOffset - (1.8 * distance) / 2; + const textPosition = offset + labelOffset; + const gapRatio = 1.2; // Ratio applied to the minimal distanc eto add some margin + + textStart = textPosition - (gapRatio * distance) / 2; if (labelIndex > 0 && textStart < textEnd) { // Except for the first label, we skip all label that overlap with the last accepted. // Notice that the early return prevent textEnd to be updated. return { ...item, skipLabel: true }; } - textEnd = offset + labelOffset + distance / 2; + textEnd = textPosition + (gapRatio * distance) / 2; return item; }); } From ffe92950a08114c2a43738d5d600640ebdc515fa Mon Sep 17 00:00:00 2001 From: alexandre Date: Mon, 16 Oct 2023 09:49:35 +0200 Subject: [PATCH 10/24] work on geomerty aspect --- .../x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 17 ++--------- packages/x-charts/src/internals/geometry.ts | 28 +++++++++++++++++++ packages/x-charts/src/models/axis.ts | 2 ++ 3 files changed, 32 insertions(+), 15 deletions(-) create mode 100644 packages/x-charts/src/internals/geometry.ts diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 0e0424c673a5..8d1057c88a1f 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -10,6 +10,7 @@ import { ChartsXAxisProps } from '../models/axis'; import { getAxisUtilityClass } from '../ChartsAxis/axisClasses'; import { AxisRoot } from '../internals/components/AxisSharedComponents'; import { ChartsText, ChartsTextProps, getWordsByLines } from '../internals/components/ChartsText'; +import { getMinXTranslation } from '../internals/geometry'; const useUtilityClasses = (ownerState: ChartsXAxisProps & { theme: Theme }) => { const { classes, position } = ownerState; @@ -27,20 +28,6 @@ const useUtilityClasses = (ownerState: ChartsXAxisProps & { theme: Theme }) => { type LabelExtraData = { width: number; height: number; skipLabel?: boolean }; -/** - * Return a rough approximate of the needed horizontal gap between two boxes to avoid overlap. - */ -function getDistance({ width, height, angle }: Record) { - if (Math.abs(angle % 180) < 10 || Math.abs(angle % 180) > 170) { - // It's nearly horizontal - return width; - } - if (Math.abs(((angle % 180) - 90) % 180) < 10) { - // It's nearly vertical - return height; - } - return height / Math.sin(angle); -} function addLabelDimension( xTicks: TickItemType[], { @@ -74,7 +61,7 @@ function addLabelDimension( return withDimension.map((item, labelIndex) => { const { width, offset, labelOffset, height } = item; - const distance = getDistance({ width, height, angle: style?.angle ?? 0 }); + const distance = getMinXTranslation(width, height, style?.angle); const textPosition = offset + labelOffset; const gapRatio = 1.2; // Ratio applied to the minimal distanc eto add some margin diff --git a/packages/x-charts/src/internals/geometry.ts b/packages/x-charts/src/internals/geometry.ts new file mode 100644 index 000000000000..d9a3a30d651e --- /dev/null +++ b/packages/x-charts/src/internals/geometry.ts @@ -0,0 +1,28 @@ +const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical + +/** + * Return the minimal translation along x-axis to avoid overflow of a rectangle of a given width, height, rotation. + * @param width the side along the x axis. + * @param height the side along the y axis. + * @param angle the rotation in degree. + */ +export function getMinXTranslation(width: number, height: number, angle: number = 0) { + const standardAngle = Math.min(Math.abs(angle) % 180, Math.abs(Math.abs(angle) - 180) % 180); // Map from R to [0, 90] + + if (standardAngle < ANGLE_APPROX) { + // It's nearly horizontal + return width; + } + if (standardAngle > 90 - ANGLE_APPROX) { + // It's nearly vertical + return height; + } + + const radAngle = (standardAngle * Math.PI) / 180; + const angleSwich = Math.atan2(width, height); + + if (radAngle < angleSwich) { + return width / Math.cos(radAngle); + } + return height / Math.sin(radAngle); +} diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index 8b8f0c1844ae..2f7bf267c479 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -129,6 +129,8 @@ export interface ChartsXAxisProps extends ChartsAxisProps { position?: 'top' | 'bottom'; } + + export type ScaleName = 'linear' | 'band' | 'point' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc'; export type ContinuouseScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc'; From 04718ff3e615f5990c80c399851e40b024417284 Mon Sep 17 00:00:00 2001 From: alexandre Date: Mon, 16 Oct 2023 09:52:02 +0200 Subject: [PATCH 11/24] remove font-size --- docs/data/charts/axis/AxisCustomizationNoSnap.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/data/charts/axis/AxisCustomizationNoSnap.js b/docs/data/charts/axis/AxisCustomizationNoSnap.js index e3c0a10209a0..f33f0352d481 100644 --- a/docs/data/charts/axis/AxisCustomizationNoSnap.js +++ b/docs/data/charts/axis/AxisCustomizationNoSnap.js @@ -17,7 +17,6 @@ const defaultXAxis = { disableTicks: false, fontSize: 12, label: 'My axis', - labelFontSize: 14, tickSize: 6, }; export default function AxisCustomizationNoSnap() { @@ -27,9 +26,7 @@ export default function AxisCustomizationNoSnap() { data={[ { propName: 'disableLine', knob: 'switch', defaultValue: false }, { propName: 'disableTicks', knob: 'switch', defaultValue: false }, - { propName: 'fontSize', knom: 'number', defaultValue: 12 }, { propName: 'label', knob: 'input', defaultValue: 'my axis' }, - { propName: 'labelFontSize', knom: 'number', defaultValue: 14 }, { propName: 'tickSize', knob: 'number', defaultValue: 6 }, ]} renderDemo={(props) => ( From a072c6df08c30c8b225707f28abdbf7a03705a9a Mon Sep 17 00:00:00 2001 From: alexandre Date: Mon, 16 Oct 2023 11:47:11 +0200 Subject: [PATCH 12/24] fix geometry --- packages/x-charts/src/internals/geometry.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/x-charts/src/internals/geometry.ts b/packages/x-charts/src/internals/geometry.ts index d9a3a30d651e..8d124e3f84d0 100644 --- a/packages/x-charts/src/internals/geometry.ts +++ b/packages/x-charts/src/internals/geometry.ts @@ -2,12 +2,17 @@ const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle /** * Return the minimal translation along x-axis to avoid overflow of a rectangle of a given width, height, rotation. + * This assume that all rectangles have the same heightand angle are in -90, 90. + * Otherwise it woul dbe problematic because you need the height/width of the next rectangle to do the correct computation * @param width the side along the x axis. * @param height the side along the y axis. * @param angle the rotation in degree. */ export function getMinXTranslation(width: number, height: number, angle: number = 0) { - const standardAngle = Math.min(Math.abs(angle) % 180, Math.abs(Math.abs(angle) - 180) % 180); // Map from R to [0, 90] + const standardAngle = Math.min( + Math.abs(angle) % 180, + Math.abs((Math.abs(angle) % 180) - 180) % 180, + ); // Map from R to [0, 90] if (standardAngle < ANGLE_APPROX) { // It's nearly horizontal @@ -19,7 +24,7 @@ export function getMinXTranslation(width: number, height: number, angle: number } const radAngle = (standardAngle * Math.PI) / 180; - const angleSwich = Math.atan2(width, height); + const angleSwich = Math.atan2(height, width); if (radAngle < angleSwich) { return width / Math.cos(radAngle); From 284442f3f71c68103e5350ed3bdf821d25ea28f0 Mon Sep 17 00:00:00 2001 From: alexandre Date: Mon, 16 Oct 2023 13:19:20 +0200 Subject: [PATCH 13/24] document the new tick management --- .../axis/AxisTextCustomizationNoSnap.js | 155 ++++++++++++++++++ docs/data/charts/axis/TickLabelPosition.js | 97 +++++++++++ docs/data/charts/axis/TickLabelPosition.tsx | 96 +++++++++++ docs/data/charts/axis/TickPosition.js | 96 +++++++++++ docs/data/charts/axis/TickPosition.tsx | 95 +++++++++++ .../data/charts/axis/TickPosition.tsx.preview | 16 ++ docs/data/charts/axis/axis.md | 49 +++++- packages/x-charts/src/hooks/useTicks.ts | 8 +- .../x-charts/src/models/seriesType/line.ts | 4 +- 9 files changed, 610 insertions(+), 6 deletions(-) create mode 100644 docs/data/charts/axis/AxisTextCustomizationNoSnap.js create mode 100644 docs/data/charts/axis/TickLabelPosition.js create mode 100644 docs/data/charts/axis/TickLabelPosition.tsx create mode 100644 docs/data/charts/axis/TickPosition.js create mode 100644 docs/data/charts/axis/TickPosition.tsx create mode 100644 docs/data/charts/axis/TickPosition.tsx.preview diff --git a/docs/data/charts/axis/AxisTextCustomizationNoSnap.js b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js new file mode 100644 index 000000000000..efa0f38656c1 --- /dev/null +++ b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js @@ -0,0 +1,155 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const chartSetting = { + height: 300, +}; +const dataset = [ + { + london: 59, + paris: 57, + newYork: 86, + seoul: 21, + month: 'Jan', + }, + { + london: 50, + paris: 52, + newYork: 78, + seoul: 28, + month: 'Fev', + }, + { + london: 47, + paris: 53, + newYork: 106, + seoul: 41, + month: 'Mar', + }, + { + london: 54, + paris: 56, + newYork: 92, + seoul: 73, + month: 'Apr', + }, + { + london: 57, + paris: 69, + newYork: 92, + seoul: 99, + month: 'May', + }, + { + london: 60, + paris: 63, + newYork: 103, + seoul: 144, + month: 'June', + }, + { + london: 59, + paris: 60, + newYork: 105, + seoul: 319, + month: 'July', + }, + { + london: 65, + paris: 60, + newYork: 106, + seoul: 249, + month: 'Aug', + }, + { + london: 51, + paris: 51, + newYork: 95, + seoul: 131, + month: 'Sept', + }, + { + london: 60, + paris: 65, + newYork: 97, + seoul: 55, + month: 'Oct', + }, + { + london: 67, + paris: 64, + newYork: 76, + seoul: 48, + month: 'Nov', + }, + { + london: 61, + paris: 70, + newYork: 103, + seoul: 25, + month: 'Dec', + }, +]; + +const valueFormatter = (value) => `${value}mm`; + +export default function AxisTextCustomizationNoSnap() { + return ( + ( + + + + )} + getCode={({ props }) => + [ + `import { ScatterChart } from '@mui/x-charts/ScatterChart';`, + '', + `', + ].join('\n') + } + /> + ); +} diff --git a/docs/data/charts/axis/TickLabelPosition.js b/docs/data/charts/axis/TickLabelPosition.js new file mode 100644 index 000000000000..ea95912dce0a --- /dev/null +++ b/docs/data/charts/axis/TickLabelPosition.js @@ -0,0 +1,97 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; + +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function TickLabelPosition() { + return ( + + [0, 12].includes(time.getHours()), + tickLabelInterval: (time) => time.getHours() === 0, + }, + { + ...xAxisCommon, + id: 'topAxis', + scaleType: 'point', + }, + ]} + {...config} + /> + + ); +} + +const valueFormatter = (date) => + date.toLocaleDateString('fr-FR', { + month: '2-digit', + day: '2-digit', + }); + +const timeData = [ + new Date(2023, 7, 31), + new Date(2023, 7, 31, 3), + new Date(2023, 7, 31, 6), + new Date(2023, 7, 31, 9), + new Date(2023, 7, 31, 12), + new Date(2023, 7, 31, 15), + new Date(2023, 7, 31, 18), + new Date(2023, 8, 1), + new Date(2023, 8, 1, 3), + new Date(2023, 8, 1, 6), + new Date(2023, 8, 1, 9), + new Date(2023, 8, 1, 12), + new Date(2023, 8, 1, 15), + new Date(2023, 8, 1, 18), + new Date(2023, 8, 2), + new Date(2023, 8, 2, 3), + new Date(2023, 8, 2, 6), + new Date(2023, 8, 2, 9), + new Date(2023, 8, 2, 12), + new Date(2023, 8, 2, 15), + new Date(2023, 8, 2, 18), + new Date(2023, 8, 3), + new Date(2023, 8, 3, 3), + new Date(2023, 8, 3, 6), + new Date(2023, 8, 3, 9), + new Date(2023, 8, 3, 12), + new Date(2023, 8, 3, 15), + new Date(2023, 8, 3, 18), + new Date(2023, 8, 4), +]; + +const y1 = [ + 5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50, + 20, 30, 35, 28, 25, 27, 30, 28, 25, +]; + +const y2 = [ + 90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42, + 45, 46, 42, 39, 40, 41, 43, 50, +]; + +const showMark = (params) => { + const { position } = params; + return position.getHours() === 0; +}; + +const config = { + series: [ + { data: y1, showMark }, + { data: y2, showMark }, + ], + height: 300, + topAxis: 'topAxis', + bottomAxis: 'bottomAxis', + leftAxis: null, +}; +const xAxisCommon = { + data: timeData, + scaleType: 'time', + valueFormatter, +}; diff --git a/docs/data/charts/axis/TickLabelPosition.tsx b/docs/data/charts/axis/TickLabelPosition.tsx new file mode 100644 index 000000000000..ce2ad07ff5da --- /dev/null +++ b/docs/data/charts/axis/TickLabelPosition.tsx @@ -0,0 +1,96 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { ShowMarkParams } from '@mui/x-charts/models'; +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function TickLabelPosition() { + return ( + + [0, 12].includes(time.getHours()), + tickLabelInterval: (time) => time.getHours() === 0, + }, + { + ...xAxisCommon, + id: 'topAxis', + scaleType: 'point', + }, + ]} + {...config} + /> + + ); +} + +const valueFormatter = (date: Date) => + date.toLocaleDateString('fr-FR', { + month: '2-digit', + day: '2-digit', + }); + +const timeData = [ + new Date(2023, 7, 31), + new Date(2023, 7, 31, 3), + new Date(2023, 7, 31, 6), + new Date(2023, 7, 31, 9), + new Date(2023, 7, 31, 12), + new Date(2023, 7, 31, 15), + new Date(2023, 7, 31, 18), + new Date(2023, 8, 1), + new Date(2023, 8, 1, 3), + new Date(2023, 8, 1, 6), + new Date(2023, 8, 1, 9), + new Date(2023, 8, 1, 12), + new Date(2023, 8, 1, 15), + new Date(2023, 8, 1, 18), + new Date(2023, 8, 2), + new Date(2023, 8, 2, 3), + new Date(2023, 8, 2, 6), + new Date(2023, 8, 2, 9), + new Date(2023, 8, 2, 12), + new Date(2023, 8, 2, 15), + new Date(2023, 8, 2, 18), + new Date(2023, 8, 3), + new Date(2023, 8, 3, 3), + new Date(2023, 8, 3, 6), + new Date(2023, 8, 3, 9), + new Date(2023, 8, 3, 12), + new Date(2023, 8, 3, 15), + new Date(2023, 8, 3, 18), + new Date(2023, 8, 4), +]; + +const y1 = [ + 5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50, + 20, 30, 35, 28, 25, 27, 30, 28, 25, +]; +const y2 = [ + 90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42, + 45, 46, 42, 39, 40, 41, 43, 50, +]; + +const showMark = (params: ShowMarkParams) => { + const { position } = params as ShowMarkParams; + return position.getHours() === 0; +}; + +const config = { + series: [ + { data: y1, showMark }, + { data: y2, showMark }, + ], + height: 300, + topAxis: 'topAxis', + bottomAxis: 'bottomAxis', + leftAxis: null, +}; +const xAxisCommon = { + data: timeData, + scaleType: 'time', + valueFormatter, +} as const; diff --git a/docs/data/charts/axis/TickPosition.js b/docs/data/charts/axis/TickPosition.js new file mode 100644 index 000000000000..e4ee1e8160d4 --- /dev/null +++ b/docs/data/charts/axis/TickPosition.js @@ -0,0 +1,96 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; + +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function TickPosition() { + return ( + + time.getHours() === 0, + }, + { + ...xAxisCommon, + id: 'topAxis', + scaleType: 'point', + }, + ]} + {...config} + /> + + ); +} + +const valueFormatter = (date) => + date.toLocaleDateString('fr-FR', { + month: '2-digit', + day: '2-digit', + }); + +const timeData = [ + new Date(2023, 7, 31), + new Date(2023, 7, 31, 3), + new Date(2023, 7, 31, 6), + new Date(2023, 7, 31, 9), + new Date(2023, 7, 31, 12), + new Date(2023, 7, 31, 15), + new Date(2023, 7, 31, 18), + new Date(2023, 8, 1), + new Date(2023, 8, 1, 3), + new Date(2023, 8, 1, 6), + new Date(2023, 8, 1, 9), + new Date(2023, 8, 1, 12), + new Date(2023, 8, 1, 15), + new Date(2023, 8, 1, 18), + new Date(2023, 8, 2), + new Date(2023, 8, 2, 3), + new Date(2023, 8, 2, 6), + new Date(2023, 8, 2, 9), + new Date(2023, 8, 2, 12), + new Date(2023, 8, 2, 15), + new Date(2023, 8, 2, 18), + new Date(2023, 8, 3), + new Date(2023, 8, 3, 3), + new Date(2023, 8, 3, 6), + new Date(2023, 8, 3, 9), + new Date(2023, 8, 3, 12), + new Date(2023, 8, 3, 15), + new Date(2023, 8, 3, 18), + new Date(2023, 8, 4), +]; + +const y1 = [ + 5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50, + 20, 30, 35, 28, 25, 27, 30, 28, 25, +]; + +const y2 = [ + 90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42, + 45, 46, 42, 39, 40, 41, 43, 50, +]; + +const showMark = (params) => { + const { position } = params; + return position.getHours() === 0; +}; + +const config = { + series: [ + { data: y1, showMark }, + { data: y2, showMark }, + ], + height: 300, + topAxis: 'topAxis', + bottomAxis: 'bottomAxis', + leftAxis: null, +}; +const xAxisCommon = { + data: timeData, + scaleType: 'time', + valueFormatter, +}; diff --git a/docs/data/charts/axis/TickPosition.tsx b/docs/data/charts/axis/TickPosition.tsx new file mode 100644 index 000000000000..c18b8674dbfe --- /dev/null +++ b/docs/data/charts/axis/TickPosition.tsx @@ -0,0 +1,95 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { ShowMarkParams } from '@mui/x-charts/models'; +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function TickPosition() { + return ( + + time.getHours() === 0, + }, + { + ...xAxisCommon, + id: 'topAxis', + scaleType: 'point', + }, + ]} + {...config} + /> + + ); +} + +const valueFormatter = (date: Date) => + date.toLocaleDateString('fr-FR', { + month: '2-digit', + day: '2-digit', + }); + +const timeData = [ + new Date(2023, 7, 31), + new Date(2023, 7, 31, 3), + new Date(2023, 7, 31, 6), + new Date(2023, 7, 31, 9), + new Date(2023, 7, 31, 12), + new Date(2023, 7, 31, 15), + new Date(2023, 7, 31, 18), + new Date(2023, 8, 1), + new Date(2023, 8, 1, 3), + new Date(2023, 8, 1, 6), + new Date(2023, 8, 1, 9), + new Date(2023, 8, 1, 12), + new Date(2023, 8, 1, 15), + new Date(2023, 8, 1, 18), + new Date(2023, 8, 2), + new Date(2023, 8, 2, 3), + new Date(2023, 8, 2, 6), + new Date(2023, 8, 2, 9), + new Date(2023, 8, 2, 12), + new Date(2023, 8, 2, 15), + new Date(2023, 8, 2, 18), + new Date(2023, 8, 3), + new Date(2023, 8, 3, 3), + new Date(2023, 8, 3, 6), + new Date(2023, 8, 3, 9), + new Date(2023, 8, 3, 12), + new Date(2023, 8, 3, 15), + new Date(2023, 8, 3, 18), + new Date(2023, 8, 4), +]; + +const y1 = [ + 5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50, + 20, 30, 35, 28, 25, 27, 30, 28, 25, +]; +const y2 = [ + 90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42, + 45, 46, 42, 39, 40, 41, 43, 50, +]; + +const showMark = (params: ShowMarkParams) => { + const { position } = params as ShowMarkParams; + return position.getHours() === 0; +}; + +const config = { + series: [ + { data: y1, showMark }, + { data: y2, showMark }, + ], + height: 300, + topAxis: 'topAxis', + bottomAxis: 'bottomAxis', + leftAxis: null, +}; +const xAxisCommon = { + data: timeData, + scaleType: 'time', + valueFormatter, +} as const; diff --git a/docs/data/charts/axis/TickPosition.tsx.preview b/docs/data/charts/axis/TickPosition.tsx.preview new file mode 100644 index 000000000000..660569fb3b5c --- /dev/null +++ b/docs/data/charts/axis/TickPosition.tsx.preview @@ -0,0 +1,16 @@ + time.getHours() === 0, + }, + { + ...xAxisCommon, + id: 'topAxis', + scaleType: 'point', + }, + ]} + {...config} +/> \ No newline at end of file diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md index 553023361256..ab1be2ad12a9 100644 --- a/docs/data/charts/axis/axis.md +++ b/docs/data/charts/axis/axis.md @@ -67,7 +67,9 @@ xAxis={[{ min: 10, max: 50, }]} {{"demo": "MinMaxExample.js"}} -### Ticks positions +## Ticks positions + +### Automatic tick positions You can customize the number of ticks with the property `tickNumber`. @@ -86,6 +88,43 @@ Here the top axis has a `tickMinStep` of half a day, and the bottom axis a `tick {{"demo": "TickNumber.js"}} +### Fix tick positions + +If you want more control on the tick positions, you can use the `tickInterval` property. + +This property accept an array of values. +Ticks will be placed at those values. + +For axis with scale type `'point'`, the `tickInterval` property can be a filtering function of the type `(value, index) => boolean`. + +In the next demo, both axes are with `scaleType='point'`. +The top axis is here to display the default behavior. +It shows a tick for each point. +The bottom axis use a filtering function to only display a tick at the beginning of a day. + +{{"demo": "TickPosition.js"}} + +### Filtering ticks label + +You can display labels only on a subsets of the ticks with the `tickInterval` property. +It's a filtering function `(value, index) => boolean`. + +For example `tickInterval: (value, index) => index % 2 === 0` will show only one label every two ticks. + +:::warning +The `value` and `index` in the argument are those of the ticks, not the axis data. +::: + +By default, ticks are filtered such that their labels do not overlap. +You can override this behavior with `tickInterval: () => true` which show the tick label for each tick. + +In this example we still have the top axis as a reference for the default behavior. +Notice that tick label do not overflow. + +At the bottom, we display one tick for the beginning and the middle of the day but display the label only for the beginning. + +{{"demo": "TickLabelPosition.js"}} + ## Axis customization You can further customize the axis rendering besides the axis definition. @@ -107,7 +146,13 @@ Axes rendering can be further customized. Below is an interactive demonstration {{"demo": "AxisCustomizationNoSnap.js", "hideToolbar": true, "bg": "inline"}} -### Composition +### Text Customization + +To customize the text elements (ticks label and the axis label) use the `tickLabelStyle` and `labelStyle` properties of the axis configuration. + +{{"demo": "AxisTextCustomizationNoSnap.js", "hideToolbar": true, "bg": "inline"}} + +## Composition If you are using composition, you have to provide the axis settings in the `` by using `xAxis` and `yAxis` props. diff --git a/packages/x-charts/src/hooks/useTicks.ts b/packages/x-charts/src/hooks/useTicks.ts index b03fba7d69be..ffdfe04cb063 100644 --- a/packages/x-charts/src/hooks/useTicks.ts +++ b/packages/x-charts/src/hooks/useTicks.ts @@ -24,9 +24,10 @@ export interface TickParams { * Defines which ticks are displayed. Its value can be: * - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. * - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property. + * - an array containing the value where ticks should be displayed. * @default 'auto' */ - tickInterval?: 'auto' | ((value: any, index: number) => boolean); + tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[]; } export function getTickNumber( @@ -90,7 +91,10 @@ function useTicks( // scale type = 'point' const filteredDomain = - typeof tickInterval === 'function' ? domain.filter(tickInterval) : domain; + (typeof tickInterval === 'function' && domain.filter(tickInterval)) || + (typeof tickInterval === 'object' && tickInterval) || + domain; + return filteredDomain.map((value) => ({ value, formattedValue: valueFormatter?.(value) ?? `${value}`, diff --git a/packages/x-charts/src/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts index 24e99d4622db..b095120c7b3f 100644 --- a/packages/x-charts/src/models/seriesType/line.ts +++ b/packages/x-charts/src/models/seriesType/line.ts @@ -16,7 +16,7 @@ export type CurveType = | 'stepBefore' | 'stepAfter'; -export interface ShowMarkParams { +export interface ShowMarkParams { /** * The item index. */ @@ -32,7 +32,7 @@ export interface ShowMarkParams { /** * The item position value. It likely comes from the axis `data` property. */ - position: number | Date; + position: AxisValue; /** * The item value. It comes from the series `data` property. */ From aa4243b4d29ef46f75d0ed4725675b35cd225e64 Mon Sep 17 00:00:00 2001 From: alexandre Date: Mon, 16 Oct 2023 13:24:35 +0200 Subject: [PATCH 14/24] scripts --- docs/data/charts/axis/TickNumber.js | 2 +- docs/data/charts/axis/TickNumber.tsx | 2 +- docs/pages/x/api/charts/bar-chart.json | 8 ++--- docs/pages/x/api/charts/charts-axis.json | 8 ++--- docs/pages/x/api/charts/charts-x-axis.json | 2 +- docs/pages/x/api/charts/charts-y-axis.json | 2 +- docs/pages/x/api/charts/line-chart.json | 8 ++--- docs/pages/x/api/charts/pie-chart.json | 8 ++--- docs/pages/x/api/charts/scatter-chart.json | 8 ++--- docs/pages/x/api/charts/spark-line-chart.json | 2 +- .../api-docs/charts/charts-x-axis.json | 2 +- .../api-docs/charts/charts-y-axis.json | 2 +- packages/x-charts/src/BarChart/BarChart.tsx | 36 +++++++++++++++---- .../x-charts/src/ChartsAxis/ChartsAxis.tsx | 24 ++++++++++--- .../x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 3 +- .../x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 3 +- packages/x-charts/src/LineChart/LineChart.tsx | 36 +++++++++++++++---- packages/x-charts/src/PieChart/PieChart.tsx | 36 +++++++++++++++---- .../src/ScatterChart/ScatterChart.tsx | 36 +++++++++++++++---- .../src/SparkLineChart/SparkLineChart.tsx | 2 +- .../src/context/CartesianContextProvider.tsx | 12 +++++-- packages/x-charts/src/models/axis.ts | 2 -- 22 files changed, 182 insertions(+), 62 deletions(-) diff --git a/docs/data/charts/axis/TickNumber.js b/docs/data/charts/axis/TickNumber.js index 4a475f1ffc8b..dc3c5a63f698 100644 --- a/docs/data/charts/axis/TickNumber.js +++ b/docs/data/charts/axis/TickNumber.js @@ -29,7 +29,7 @@ const valueFormatter = (date) => const config = { series: [{ data: y1 }, { data: y2 }], - height: 400, + height: 300, topAxis: 'half days', leftAxis: null, }; diff --git a/docs/data/charts/axis/TickNumber.tsx b/docs/data/charts/axis/TickNumber.tsx index 265a7fa02023..24792c3df942 100644 --- a/docs/data/charts/axis/TickNumber.tsx +++ b/docs/data/charts/axis/TickNumber.tsx @@ -29,7 +29,7 @@ const valueFormatter = (date: Date) => const config = { series: [{ data: y1 }, { data: y2 }], - height: 400, + height: 300, topAxis: 'half days', leftAxis: null, }; diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index 2256490ce1f2..2f00b95dbb52 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -13,14 +13,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -29,7 +29,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/charts-axis.json b/docs/pages/x/api/charts/charts-axis.json index 272809f9c2a4..bf524fb1148a 100644 --- a/docs/pages/x/api/charts/charts-axis.json +++ b/docs/pages/x/api/charts/charts-axis.json @@ -3,21 +3,21 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -26,7 +26,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/charts-x-axis.json b/docs/pages/x/api/charts/charts-x-axis.json index d468be1fb984..6379dbebbdac 100644 --- a/docs/pages/x/api/charts/charts-x-axis.json +++ b/docs/pages/x/api/charts/charts-x-axis.json @@ -24,7 +24,7 @@ "deprecationInfo": "You can us tickLabelStyle.fontSize instead." }, "tickInterval": { - "type": { "name": "union", "description": "'auto'
| func" }, + "type": { "name": "union", "description": "'auto'
| array
| func" }, "default": "'auto'" }, "tickLabelInterval": { diff --git a/docs/pages/x/api/charts/charts-y-axis.json b/docs/pages/x/api/charts/charts-y-axis.json index 1f8340647a40..c1041a6c1c2e 100644 --- a/docs/pages/x/api/charts/charts-y-axis.json +++ b/docs/pages/x/api/charts/charts-y-axis.json @@ -24,7 +24,7 @@ "deprecationInfo": "You can us tickLabelStyle.fontSize instead." }, "tickInterval": { - "type": { "name": "union", "description": "'auto'
| func" }, + "type": { "name": "union", "description": "'auto'
| array
| func" }, "default": "'auto'" }, "tickLabelInterval": { diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index d1b13777a673..cea5dbd5a046 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -14,14 +14,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -30,7 +30,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index 68a50b3b222b..486f97f02594 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -13,14 +13,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -28,7 +28,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index 3ce8ca911a35..9d956a28bf6d 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -3,7 +3,7 @@ "bottomAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -13,14 +13,14 @@ "leftAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, "rightAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" }, @@ -29,7 +29,7 @@ "topAxis": { "type": { "name": "union", - "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" + "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index 74ae98666d4c..fabe4546256d 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -27,7 +27,7 @@ "xAxis": { "type": { "name": "shape", - "description": "{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }" + "description": "{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }" } } }, diff --git a/docs/translations/api-docs/charts/charts-x-axis.json b/docs/translations/api-docs/charts/charts-x-axis.json index 148b12e7f6fe..bed55fe3b19a 100644 --- a/docs/translations/api-docs/charts/charts-x-axis.json +++ b/docs/translations/api-docs/charts/charts-x-axis.json @@ -63,7 +63,7 @@ "typeDescriptions": {} }, "tickInterval": { - "description": "Defines which ticks are displayed. Its value can be: - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property.", + "description": "Defines which ticks are displayed. Its value can be: - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property. - an array containing the value where ticks should be displayed.", "deprecated": "", "typeDescriptions": {} }, diff --git a/docs/translations/api-docs/charts/charts-y-axis.json b/docs/translations/api-docs/charts/charts-y-axis.json index 148b12e7f6fe..bed55fe3b19a 100644 --- a/docs/translations/api-docs/charts/charts-y-axis.json +++ b/docs/translations/api-docs/charts/charts-y-axis.json @@ -63,7 +63,7 @@ "typeDescriptions": {} }, "tickInterval": { - "description": "Defines which ticks are displayed. Its value can be: - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property.", + "description": "Defines which ticks are displayed. Its value can be: - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property. - an array containing the value where ticks should be displayed.", "deprecated": "", "typeDescriptions": {} }, diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index b335bb582fcd..1cb0e5e246d7 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -178,7 +178,11 @@ BarChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -219,7 +223,11 @@ BarChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -269,7 +277,11 @@ BarChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -351,7 +363,11 @@ BarChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -390,7 +406,11 @@ BarChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -422,7 +442,11 @@ BarChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, diff --git a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx index 897976ca30ce..2b24b1559837 100644 --- a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx +++ b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx @@ -138,7 +138,11 @@ ChartsAxis.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -168,7 +172,11 @@ ChartsAxis.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -198,7 +206,11 @@ ChartsAxis.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -238,7 +250,11 @@ ChartsAxis.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 8d1057c88a1f..2e140628dd67 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -284,9 +284,10 @@ ChartsXAxis.propTypes = { * Defines which ticks are displayed. Its value can be: * - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. * - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property. + * - an array containing the value where ticks should be displayed. * @default 'auto' */ - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]), /** * 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. diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index 0dff165d8893..48428d27d344 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -224,9 +224,10 @@ ChartsYAxis.propTypes = { * Defines which ticks are displayed. Its value can be: * - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. * - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property. + * - an array containing the value where ticks should be displayed. * @default 'auto' */ - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]), /** * 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. diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 5afa8420ab4b..705520c22234 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -185,7 +185,11 @@ LineChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -229,7 +233,11 @@ LineChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -279,7 +287,11 @@ LineChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -373,7 +385,11 @@ LineChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -412,7 +428,11 @@ LineChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -444,7 +464,11 @@ LineChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 8b64f56a8432..a0f9c9930bcc 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -151,7 +151,11 @@ PieChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -191,7 +195,11 @@ PieChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -242,7 +250,11 @@ PieChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -341,7 +353,11 @@ PieChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -380,7 +396,11 @@ PieChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -412,7 +432,11 @@ PieChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index a83a5eba34d9..43bf0ca711cc 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -139,7 +139,11 @@ ScatterChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -179,7 +183,11 @@ ScatterChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -229,7 +237,11 @@ ScatterChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -306,7 +318,11 @@ ScatterChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -345,7 +361,11 @@ ScatterChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -377,7 +397,11 @@ ScatterChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index 02641870ae69..f12cc3e2d5d6 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -313,7 +313,7 @@ SparkLineChart.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, diff --git a/packages/x-charts/src/context/CartesianContextProvider.tsx b/packages/x-charts/src/context/CartesianContextProvider.tsx index 1f4a02e0f0d3..a8f98e6f3f2e 100644 --- a/packages/x-charts/src/context/CartesianContextProvider.tsx +++ b/packages/x-charts/src/context/CartesianContextProvider.tsx @@ -318,7 +318,11 @@ CartesianContextProvider.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, @@ -350,7 +354,11 @@ CartesianContextProvider.propTypes = { slots: PropTypes.object, stroke: PropTypes.string, tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), tickLabelStyle: PropTypes.object, tickMaxStep: PropTypes.number, diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index 2f7bf267c479..8b8f0c1844ae 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -129,8 +129,6 @@ export interface ChartsXAxisProps extends ChartsAxisProps { position?: 'top' | 'bottom'; } - - export type ScaleName = 'linear' | 'band' | 'point' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc'; export type ContinuouseScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc'; From 44089a382342d8cb47b0106cab245f422cc868c6 Mon Sep 17 00:00:00 2001 From: alexandre Date: Mon, 16 Oct 2023 17:05:26 +0200 Subject: [PATCH 15/24] fix SSR --- .../x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 9 +++++++-- packages/x-charts/src/hooks/useMounted.ts | 20 +++++++++++++++++++ 2 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 packages/x-charts/src/hooks/useMounted.ts diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 2e140628dd67..a227179a0da2 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -11,6 +11,7 @@ import { getAxisUtilityClass } from '../ChartsAxis/axisClasses'; import { AxisRoot } from '../internals/components/AxisSharedComponents'; import { ChartsText, ChartsTextProps, getWordsByLines } from '../internals/components/ChartsText'; import { getMinXTranslation } from '../internals/geometry'; +import { useMounted } from '../hooks/useMounted'; const useUtilityClasses = (ownerState: ChartsXAxisProps & { theme: Theme }) => { const { classes, position } = ownerState; @@ -33,10 +34,11 @@ function addLabelDimension( { tickLabelStyle: style, tickLabelInterval, - }: Pick, + isMounted, + }: Pick & { isMounted: boolean }, ): (TickItemType & LabelExtraData)[] { const withDimension = xTicks.map((tick) => { - if (tick.formattedValue === undefined) { + if (!isMounted || tick.formattedValue === undefined) { return { ...tick, width: 0, height: 0 }; } const tickSizes = getWordsByLines({ style, needsComputation: true, text: tick.formattedValue }); @@ -91,6 +93,8 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { }, } = React.useContext(CartesianContext); + const isMounted = useMounted(); + const defaultizedProps = { ...defaultProps, ...settings, ...props }; const { position, @@ -144,6 +148,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { const xTicksWithDimension = addLabelDimension(xTicks, { tickLabelStyle: axisTickLabelProps.style, tickLabelInterval, + isMounted, }); const labelRefPoint = { diff --git a/packages/x-charts/src/hooks/useMounted.ts b/packages/x-charts/src/hooks/useMounted.ts new file mode 100644 index 000000000000..298fc91f814c --- /dev/null +++ b/packages/x-charts/src/hooks/useMounted.ts @@ -0,0 +1,20 @@ +import * as React from 'react'; +import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; + +export function useMounted(defer = false) { + const [mountedState, setMountedState] = React.useState(false); + + useEnhancedEffect(() => { + if (!defer) { + setMountedState(true); + } + }, [defer]); + + React.useEffect(() => { + if (defer) { + setMountedState(true); + } + }, [defer]); + + return mountedState; +} From 3e42ee1f6dbc9a4af06e6c47c13de9dfab0bbb95 Mon Sep 17 00:00:00 2001 From: alexandre Date: Tue, 17 Oct 2023 09:45:36 +0200 Subject: [PATCH 16/24] add warning --- packages/x-charts/src/internals/geometry.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/x-charts/src/internals/geometry.ts b/packages/x-charts/src/internals/geometry.ts index 8d124e3f84d0..e7887c95df53 100644 --- a/packages/x-charts/src/internals/geometry.ts +++ b/packages/x-charts/src/internals/geometry.ts @@ -1,5 +1,7 @@ const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical +let warnedOnce = false; + /** * Return the minimal translation along x-axis to avoid overflow of a rectangle of a given width, height, rotation. * This assume that all rectangles have the same heightand angle are in -90, 90. @@ -9,6 +11,18 @@ const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle * @param angle the rotation in degree. */ 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 that 90° to an axis text.`, + `This could cause some text overlapping.`, + `If you encounter a uscase where it's needed, please open an issue.`, + ].join('\n'), + ); + } + } const standardAngle = Math.min( Math.abs(angle) % 180, Math.abs((Math.abs(angle) % 180) - 180) % 180, From eb581e9a9ce6d020871197ab9b745cea2a4a24d3 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:13:10 +0200 Subject: [PATCH 17/24] Apply suggestions from code review Co-authored-by: Lukas Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> --- docs/data/charts/axis/axis.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md index ab1be2ad12a9..a0f2f55577e9 100644 --- a/docs/data/charts/axis/axis.md +++ b/docs/data/charts/axis/axis.md @@ -67,9 +67,9 @@ xAxis={[{ min: 10, max: 50, }]} {{"demo": "MinMaxExample.js"}} -## Ticks positions +## Tick position -### Automatic tick positions +### Automatic tick position You can customize the number of ticks with the property `tickNumber`. @@ -88,40 +88,40 @@ Here the top axis has a `tickMinStep` of half a day, and the bottom axis a `tick {{"demo": "TickNumber.js"}} -### Fix tick positions +### Fixed tick positions -If you want more control on the tick positions, you can use the `tickInterval` property. +If you want more control over the tick position, you can use the `tickInterval` property. -This property accept an array of values. +This property accepts an array of values. Ticks will be placed at those values. For axis with scale type `'point'`, the `tickInterval` property can be a filtering function of the type `(value, index) => boolean`. In the next demo, both axes are with `scaleType='point'`. -The top axis is here to display the default behavior. +The top axis displays the default behavior. It shows a tick for each point. -The bottom axis use a filtering function to only display a tick at the beginning of a day. +The bottom axis uses a filtering function to only display a tick at the beginning of a day. {{"demo": "TickPosition.js"}} ### Filtering ticks label -You can display labels only on a subsets of the ticks with the `tickInterval` property. -It's a filtering function `(value, index) => boolean`. +You can display labels only on a subset of ticks with the `tickLabelInterval` property. +It's a filtering function in the `(value, index) => boolean` form. For example `tickInterval: (value, index) => index % 2 === 0` will show only one label every two ticks. :::warning -The `value` and `index` in the argument are those of the ticks, not the axis data. +The `value` and `index` arguments are those of the ticks, not the axis data. ::: By default, ticks are filtered such that their labels do not overlap. -You can override this behavior with `tickInterval: () => true` which show the tick label for each tick. +You can override this behavior with `tickLabelInterval: () => true` which forces showing the tick label for each tick. -In this example we still have the top axis as a reference for the default behavior. -Notice that tick label do not overflow. +In this example, the top axis is a reference for the default behavior. +Notice that tick labels do not overflow. -At the bottom, we display one tick for the beginning and the middle of the day but display the label only for the beginning. +At the bottom, you can see one tick for the beginning and the middle of the day but the tick label is only displayed for the beginning of the day. {{"demo": "TickLabelPosition.js"}} @@ -146,7 +146,7 @@ Axes rendering can be further customized. Below is an interactive demonstration {{"demo": "AxisCustomizationNoSnap.js", "hideToolbar": true, "bg": "inline"}} -### Text Customization +### Text customization To customize the text elements (ticks label and the axis label) use the `tickLabelStyle` and `labelStyle` properties of the axis configuration. From 5d2974384a14ad7c1b9a4007c4791cfdfb75f734 Mon Sep 17 00:00:00 2001 From: alexandre Date: Wed, 18 Oct 2023 17:14:21 +0200 Subject: [PATCH 18/24] signe-> sign --- packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 8 ++++---- packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index a227179a0da2..dd1775665114 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -120,7 +120,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { const tickSize = disableTicks ? 4 : tickSizeProp; - const positionSigne = position === 'bottom' ? 1 : -1; + const positionSign = position === 'bottom' ? 1 : -1; const Line = slots?.axisLine ?? 'line'; const Tick = slots?.axisTick ?? 'line'; @@ -153,7 +153,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { const labelRefPoint = { x: left + width / 2, - y: positionSigne * (tickSize + 22), + y: positionSign * (tickSize + 22), }; const axisLabelProps = useSlotProps({ @@ -186,12 +186,12 @@ function ChartsXAxis(inProps: ChartsXAxisProps) { {xTicksWithDimension.map(({ formattedValue, offset, labelOffset, skipLabel }, index) => { const xTickLabel = labelOffset ?? 0; - const yTickLabel = positionSigne * (tickSize + 3); + const yTickLabel = positionSign * (tickSize + 3); return ( {!disableTicks && ( diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index 48428d27d344..3164cc550433 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -65,10 +65,10 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { const yTicks = useTicks({ scale: yScale, tickNumber, valueFormatter }); - const positionSigne = position === 'right' ? 1 : -1; + const positionSign = position === 'right' ? 1 : -1; const labelRefPoint = { - x: positionSigne * (tickFontSize + tickSize + 10), + x: positionSign * (tickFontSize + tickSize + 10), y: top + height / 2, }; @@ -97,7 +97,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { additionalProps: { style: { fontSize: labelFontSize, - angle: positionSigne * 90, + angle: positionSign * 90, textAnchor: 'middle', dominantBaseline: 'auto', } as Partial['style'], @@ -120,13 +120,13 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { )} {yTicks.map(({ formattedValue, offset, labelOffset }, index) => { - const xTickLabel = positionSigne * (tickSize + 2); + const xTickLabel = positionSign * (tickSize + 2); const yTickLabel = labelOffset; return ( {!disableTicks && ( From b26ada4a448ade92e54716875327af52da4c2739 Mon Sep 17 00:00:00 2001 From: alexandre Date: Wed, 18 Oct 2023 17:21:26 +0200 Subject: [PATCH 19/24] typos --- packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 8 ++++---- packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 4 ++-- packages/x-charts/src/hooks/useTicks.ts | 8 ++++---- packages/x-charts/src/internals/geometry.ts | 10 +++++----- packages/x-charts/src/models/axis.ts | 4 ++-- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index dd1775665114..30036c871d3a 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -65,12 +65,12 @@ function addLabelDimension( const distance = getMinXTranslation(width, height, style?.angle); const textPosition = offset + labelOffset; - const gapRatio = 1.2; // Ratio applied to the minimal distanc eto add some margin + const gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin. textStart = textPosition - (gapRatio * distance) / 2; if (labelIndex > 0 && textStart < textEnd) { // Except for the first label, we skip all label that overlap with the last accepted. - // Notice that the early return prevent textEnd to be updated. + // Notice that the early return prevents `textEnd` from being updated. return { ...item, skipLabel: true }; } textEnd = textPosition + (gapRatio * distance) / 2; @@ -253,7 +253,7 @@ ChartsXAxis.propTypes = { /** * The font size of the axis label. * @default 14 - * @deprecated You can us `labelStyle.fontSize` instead. + * @deprecated Consider using `labelStyle.fontSize` instead. */ labelFontSize: PropTypes.number, /** @@ -282,7 +282,7 @@ ChartsXAxis.propTypes = { /** * The font size of the axis ticks text. * @default 12 - * @deprecated You can us `tickLabelStyle.fontSize` instead. + * @deprecated Consider using `tickLabelStyle.fontSize` instead. */ tickFontSize: PropTypes.number, /** diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index 3164cc550433..92940b186e8e 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -188,7 +188,7 @@ ChartsYAxis.propTypes = { /** * The font size of the axis label. * @default 14 - * @deprecated You can us `labelStyle.fontSize` instead. + * @deprecated Consider using `labelStyle.fontSize` instead. */ labelFontSize: PropTypes.number, /** @@ -217,7 +217,7 @@ ChartsYAxis.propTypes = { /** * The font size of the axis ticks text. * @default 12 - * @deprecated You can us `tickLabelStyle.fontSize` instead. + * @deprecated Consider using `tickLabelStyle.fontSize` instead. */ tickFontSize: PropTypes.number, /** diff --git a/packages/x-charts/src/hooks/useTicks.ts b/packages/x-charts/src/hooks/useTicks.ts index ffdfe04cb063..70f094628199 100644 --- a/packages/x-charts/src/hooks/useTicks.ts +++ b/packages/x-charts/src/hooks/useTicks.ts @@ -22,9 +22,9 @@ export interface TickParams { tickNumber?: number; /** * Defines which ticks are displayed. Its value can be: - * - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. - * - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property. - * - an array containing the value where ticks should be displayed. + * - 'auto' In such case the ticks are computed based on axis scale and other parameters. + * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property. + * - an array containing the values where ticks should be displayed. * @default 'auto' */ tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[]; @@ -51,7 +51,7 @@ export function getTickNumber( export type TickItemType = { /** * This property is undefined only if it's the tick closing the last band - * */ + */ value?: any; formattedValue?: string; offset: number; diff --git a/packages/x-charts/src/internals/geometry.ts b/packages/x-charts/src/internals/geometry.ts index e7887c95df53..a56ba658b4ed 100644 --- a/packages/x-charts/src/internals/geometry.ts +++ b/packages/x-charts/src/internals/geometry.ts @@ -3,12 +3,12 @@ const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle let warnedOnce = false; /** - * Return the minimal translation along x-axis to avoid overflow of a rectangle of a given width, height, rotation. - * This assume that all rectangles have the same heightand angle are in -90, 90. - * Otherwise it woul dbe problematic because you need the height/width of the next rectangle to do the correct computation + * Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation. + * This assumes that all rectangles have the same height and angle between -90 and 90. + * Otherwise it would be problematic because you need the height/width of the next rectangle to do the correct computation. * @param width the side along the x axis. * @param height the side along the y axis. - * @param angle the rotation in degree. + * @param angle the rotation in degrees. */ export function getMinXTranslation(width: number, height: number, angle: number = 0) { if (process.env.NODE_ENV !== 'production') { @@ -16,7 +16,7 @@ export function getMinXTranslation(width: number, height: number, angle: number warnedOnce = true; console.warn( [ - `MUI X: It seems you applied an angle larger that 90° to an axis text.`, + `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 uscase where it's needed, please open an issue.`, ].join('\n'), diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index 8b8f0c1844ae..cccf537ff784 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -61,7 +61,7 @@ export interface ChartsAxisProps extends TickParams { /** * The font size of the axis ticks text. * @default 12 - * @deprecated You can us `tickLabelStyle.fontSize` instead. + * @deprecated Consider using `tickLabelStyle.fontSize` instead. */ tickFontSize?: number; /** @@ -86,7 +86,7 @@ export interface ChartsAxisProps extends TickParams { /** * The font size of the axis label. * @default 14 - * @deprecated You can us `labelStyle.fontSize` instead. + * @deprecated Consider using `labelStyle.fontSize` instead. */ labelFontSize?: number; /** From 5bf368fcd538e397c54b63926e324806b1c98cf5 Mon Sep 17 00:00:00 2001 From: alexandre Date: Wed, 18 Oct 2023 17:22:38 +0200 Subject: [PATCH 20/24] scripts --- docs/pages/x/api/charts/charts-x-axis.json | 4 ++-- docs/pages/x/api/charts/charts-y-axis.json | 4 ++-- docs/translations/api-docs/charts/charts-x-axis.json | 2 +- docs/translations/api-docs/charts/charts-y-axis.json | 2 +- packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 6 +++--- packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 6 +++--- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/pages/x/api/charts/charts-x-axis.json b/docs/pages/x/api/charts/charts-x-axis.json index 6379dbebbdac..e581a0498718 100644 --- a/docs/pages/x/api/charts/charts-x-axis.json +++ b/docs/pages/x/api/charts/charts-x-axis.json @@ -10,7 +10,7 @@ "type": { "name": "number" }, "default": "14", "deprecated": true, - "deprecationInfo": "You can us labelStyle.fontSize instead." + "deprecationInfo": "Consider using labelStyle.fontSize instead." }, "labelStyle": { "type": { "name": "object" } }, "position": { "type": { "name": "enum", "description": "'bottom'
| 'top'" } }, @@ -21,7 +21,7 @@ "type": { "name": "number" }, "default": "12", "deprecated": true, - "deprecationInfo": "You can us tickLabelStyle.fontSize instead." + "deprecationInfo": "Consider using tickLabelStyle.fontSize instead." }, "tickInterval": { "type": { "name": "union", "description": "'auto'
| array
| func" }, diff --git a/docs/pages/x/api/charts/charts-y-axis.json b/docs/pages/x/api/charts/charts-y-axis.json index c1041a6c1c2e..08b16898cbdc 100644 --- a/docs/pages/x/api/charts/charts-y-axis.json +++ b/docs/pages/x/api/charts/charts-y-axis.json @@ -10,7 +10,7 @@ "type": { "name": "number" }, "default": "14", "deprecated": true, - "deprecationInfo": "You can us labelStyle.fontSize instead." + "deprecationInfo": "Consider using labelStyle.fontSize instead." }, "labelStyle": { "type": { "name": "object" } }, "position": { "type": { "name": "enum", "description": "'left'
| 'right'" } }, @@ -21,7 +21,7 @@ "type": { "name": "number" }, "default": "12", "deprecated": true, - "deprecationInfo": "You can us tickLabelStyle.fontSize instead." + "deprecationInfo": "Consider using tickLabelStyle.fontSize instead." }, "tickInterval": { "type": { "name": "union", "description": "'auto'
| array
| func" }, diff --git a/docs/translations/api-docs/charts/charts-x-axis.json b/docs/translations/api-docs/charts/charts-x-axis.json index bed55fe3b19a..68c29dd7f5f0 100644 --- a/docs/translations/api-docs/charts/charts-x-axis.json +++ b/docs/translations/api-docs/charts/charts-x-axis.json @@ -63,7 +63,7 @@ "typeDescriptions": {} }, "tickInterval": { - "description": "Defines which ticks are displayed. Its value can be: - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property. - an array containing the value where ticks should be displayed.", + "description": "Defines which ticks are displayed. Its value can be: - 'auto' In such case the ticks are computed based on axis scale and other parameters. - a filtering function of the form (value, index) => boolean which is available only if the axis has a data property. - an array containing the values where ticks should be displayed.", "deprecated": "", "typeDescriptions": {} }, diff --git a/docs/translations/api-docs/charts/charts-y-axis.json b/docs/translations/api-docs/charts/charts-y-axis.json index bed55fe3b19a..68c29dd7f5f0 100644 --- a/docs/translations/api-docs/charts/charts-y-axis.json +++ b/docs/translations/api-docs/charts/charts-y-axis.json @@ -63,7 +63,7 @@ "typeDescriptions": {} }, "tickInterval": { - "description": "Defines which ticks are displayed. Its value can be: - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property. - an array containing the value where ticks should be displayed.", + "description": "Defines which ticks are displayed. Its value can be: - 'auto' In such case the ticks are computed based on axis scale and other parameters. - a filtering function of the form (value, index) => boolean which is available only if the axis has a data property. - an array containing the values where ticks should be displayed.", "deprecated": "", "typeDescriptions": {} }, diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 30036c871d3a..725242b85907 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -287,9 +287,9 @@ ChartsXAxis.propTypes = { tickFontSize: PropTypes.number, /** * Defines which ticks are displayed. Its value can be: - * - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. - * - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property. - * - an array containing the value where ticks should be displayed. + * - 'auto' In such case the ticks are computed based on axis scale and other parameters. + * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property. + * - an array containing the values where ticks should be displayed. * @default 'auto' */ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]), diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index 92940b186e8e..89c7ca01a762 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -222,9 +222,9 @@ ChartsYAxis.propTypes = { tickFontSize: PropTypes.number, /** * Defines which ticks are displayed. Its value can be: - * - 'auto' In such case the ticks are computed based on axis sacle and other paramteres. - * - a filtering function of the form (value, index) => boolean which is availabel only if the axis has a data property. - * - an array containing the value where ticks should be displayed. + * - 'auto' In such case the ticks are computed based on axis scale and other parameters. + * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property. + * - an array containing the values where ticks should be displayed. * @default 'auto' */ tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]), From 066ffe98382e465602b0489e6247e110632f916a Mon Sep 17 00:00:00 2001 From: alexandre Date: Wed, 18 Oct 2023 17:37:35 +0200 Subject: [PATCH 21/24] add textAnchor to the demo --- docs/data/charts/axis/AxisTextCustomizationNoSnap.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/data/charts/axis/AxisTextCustomizationNoSnap.js b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js index efa0f38656c1..daaf7f69c602 100644 --- a/docs/data/charts/axis/AxisTextCustomizationNoSnap.js +++ b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js @@ -101,6 +101,12 @@ export default function AxisTextCustomizationNoSnap() { componentName="Alert" data={[ { propName: 'angle', knob: 'number', defaultValue: 45, min: -180, max: 180 }, + { + propName: 'textAnchor', + knob: 'select', + defaultValue: 'start', + options: ['start', 'middle', 'end'], + }, { propName: 'fontSize', knob: 'number', defaultValue: 12 }, { propName: 'labelFontSize', knob: 'number', defaultValue: 14 }, ]} @@ -118,6 +124,7 @@ export default function AxisTextCustomizationNoSnap() { }, tickLabelStyle: { angle: props.angle, + textAnchor: props.textAnchor, fontSize: props.fontSize, }, }, @@ -144,6 +151,7 @@ export default function AxisTextCustomizationNoSnap() { ` },`, ` tickLabelStyle: {`, ` angle: ${props.angle},`, + ` textAnchor: '${props.textAnchor}',`, ` fontSize: ${props.fontSize},`, ` },`, ' }}', From 349587ddf7f03c726c87e1c660ec175642603d13 Mon Sep 17 00:00:00 2001 From: alexandre Date: Wed, 18 Oct 2023 17:37:47 +0200 Subject: [PATCH 22/24] add a hack to avoid axis label overflow --- docs/data/charts/axis/AxisTextCustomizationNoSnap.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/data/charts/axis/AxisTextCustomizationNoSnap.js b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js index daaf7f69c602..955412c04024 100644 --- a/docs/data/charts/axis/AxisTextCustomizationNoSnap.js +++ b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js @@ -121,6 +121,9 @@ export default function AxisTextCustomizationNoSnap() { label: 'months', labelStyle: { fontSize: props.labelFontSize, + transform: `translateY(${ + 5 * Math.abs(Math.sin((Math.PI * props.angle) / 180)) + }px)`, }, tickLabelStyle: { angle: props.angle, @@ -148,6 +151,10 @@ export default function AxisTextCustomizationNoSnap() { ` bottomAxis={{`, ` labelStyle: {`, ` fontSize: ${props.labelFontSize},`, + ` transform: \`translateY(\${ + // Hack that should be adde din the lib latter. + 5 * Math.abs(Math.sin((Math.PI * props.angle) / 180)) + }px)\``, ` },`, ` tickLabelStyle: {`, ` angle: ${props.angle},`, From b02d35197a2a069187fc3ad793147cc30371bfdd Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 19 Oct 2023 09:33:32 +0200 Subject: [PATCH 23/24] Apply suggestions from code review Co-authored-by: Lukas Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> --- docs/data/charts/axis/AxisTextCustomizationNoSnap.js | 2 +- docs/data/charts/axis/axis.md | 2 +- packages/x-charts/src/internals/geometry.ts | 2 +- packages/x-charts/src/models/axis.ts | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/data/charts/axis/AxisTextCustomizationNoSnap.js b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js index 955412c04024..9f8cc6aa3d6b 100644 --- a/docs/data/charts/axis/AxisTextCustomizationNoSnap.js +++ b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js @@ -152,7 +152,7 @@ export default function AxisTextCustomizationNoSnap() { ` labelStyle: {`, ` fontSize: ${props.labelFontSize},`, ` transform: \`translateY(\${ - // Hack that should be adde din the lib latter. + // Hack that should be added in the lib latter. 5 * Math.abs(Math.sin((Math.PI * props.angle) / 180)) }px)\``, ` },`, diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md index a0f2f55577e9..d6f4392b3e73 100644 --- a/docs/data/charts/axis/axis.md +++ b/docs/data/charts/axis/axis.md @@ -109,7 +109,7 @@ The bottom axis uses a filtering function to only display a tick at the beginnin You can display labels only on a subset of ticks with the `tickLabelInterval` property. It's a filtering function in the `(value, index) => boolean` form. -For example `tickInterval: (value, index) => index % 2 === 0` will show only one label every two ticks. +For example `tickLabelInterval: (value, index) => index % 2 === 0` will show the label every two ticks. :::warning The `value` and `index` arguments are those of the ticks, not the axis data. diff --git a/packages/x-charts/src/internals/geometry.ts b/packages/x-charts/src/internals/geometry.ts index a56ba658b4ed..eb2c6b3ff8c3 100644 --- a/packages/x-charts/src/internals/geometry.ts +++ b/packages/x-charts/src/internals/geometry.ts @@ -18,7 +18,7 @@ export function getMinXTranslation(width: number, height: number, angle: number [ `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 uscase where it's needed, please open an issue.`, + `If you encounter a use case where it's needed, please open an issue.`, ].join('\n'), ); } diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index cccf537ff784..8180704031af 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -61,7 +61,7 @@ export interface ChartsAxisProps extends TickParams { /** * The font size of the axis ticks text. * @default 12 - * @deprecated Consider using `tickLabelStyle.fontSize` instead. + * @deprecated Consider using `tickLabelStyle.fontSize` instead. */ tickFontSize?: number; /** @@ -86,7 +86,7 @@ export interface ChartsAxisProps extends TickParams { /** * The font size of the axis label. * @default 14 - * @deprecated Consider using `labelStyle.fontSize` instead. + * @deprecated Consider using `labelStyle.fontSize` instead. */ labelFontSize?: number; /** From 34f0985cb7e2baceb339bebc86e25e1d3c1bb59d Mon Sep 17 00:00:00 2001 From: alexandre Date: Thu, 19 Oct 2023 10:00:20 +0200 Subject: [PATCH 24/24] scripts --- docs/pages/x/api/charts/charts-x-axis.json | 4 ++-- docs/pages/x/api/charts/charts-y-axis.json | 4 ++-- packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx | 4 ++-- packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/pages/x/api/charts/charts-x-axis.json b/docs/pages/x/api/charts/charts-x-axis.json index e581a0498718..ce99eb0bae3b 100644 --- a/docs/pages/x/api/charts/charts-x-axis.json +++ b/docs/pages/x/api/charts/charts-x-axis.json @@ -10,7 +10,7 @@ "type": { "name": "number" }, "default": "14", "deprecated": true, - "deprecationInfo": "Consider using labelStyle.fontSize instead." + "deprecationInfo": "Consider using labelStyle.fontSize instead." }, "labelStyle": { "type": { "name": "object" } }, "position": { "type": { "name": "enum", "description": "'bottom'
| 'top'" } }, @@ -21,7 +21,7 @@ "type": { "name": "number" }, "default": "12", "deprecated": true, - "deprecationInfo": "Consider using tickLabelStyle.fontSize instead." + "deprecationInfo": "Consider using tickLabelStyle.fontSize instead." }, "tickInterval": { "type": { "name": "union", "description": "'auto'
| array
| func" }, diff --git a/docs/pages/x/api/charts/charts-y-axis.json b/docs/pages/x/api/charts/charts-y-axis.json index 08b16898cbdc..812cac2fcade 100644 --- a/docs/pages/x/api/charts/charts-y-axis.json +++ b/docs/pages/x/api/charts/charts-y-axis.json @@ -10,7 +10,7 @@ "type": { "name": "number" }, "default": "14", "deprecated": true, - "deprecationInfo": "Consider using labelStyle.fontSize instead." + "deprecationInfo": "Consider using labelStyle.fontSize instead." }, "labelStyle": { "type": { "name": "object" } }, "position": { "type": { "name": "enum", "description": "'left'
| 'right'" } }, @@ -21,7 +21,7 @@ "type": { "name": "number" }, "default": "12", "deprecated": true, - "deprecationInfo": "Consider using tickLabelStyle.fontSize instead." + "deprecationInfo": "Consider using tickLabelStyle.fontSize instead." }, "tickInterval": { "type": { "name": "union", "description": "'auto'
| array
| func" }, diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 725242b85907..548e7f6a8030 100644 --- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx +++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx @@ -253,7 +253,7 @@ ChartsXAxis.propTypes = { /** * The font size of the axis label. * @default 14 - * @deprecated Consider using `labelStyle.fontSize` instead. + * @deprecated Consider using `labelStyle.fontSize` instead. */ labelFontSize: PropTypes.number, /** @@ -282,7 +282,7 @@ ChartsXAxis.propTypes = { /** * The font size of the axis ticks text. * @default 12 - * @deprecated Consider using `tickLabelStyle.fontSize` instead. + * @deprecated Consider using `tickLabelStyle.fontSize` instead. */ tickFontSize: PropTypes.number, /** diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index 89c7ca01a762..9677195cb4e5 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx @@ -188,7 +188,7 @@ ChartsYAxis.propTypes = { /** * The font size of the axis label. * @default 14 - * @deprecated Consider using `labelStyle.fontSize` instead. + * @deprecated Consider using `labelStyle.fontSize` instead. */ labelFontSize: PropTypes.number, /** @@ -217,7 +217,7 @@ ChartsYAxis.propTypes = { /** * The font size of the axis ticks text. * @default 12 - * @deprecated Consider using `tickLabelStyle.fontSize` instead. + * @deprecated Consider using `tickLabelStyle.fontSize` instead. */ tickFontSize: PropTypes.number, /**