From 970a4fc45e435cd9f5efc9acda456804276aef96 Mon Sep 17 00:00:00 2001 From: KirtiRamchandani Date: Sun, 24 May 2026 20:19:00 +0530 Subject: [PATCH] fix charting axis label prop spelling --- ...-66cc6104-7a22-4cbd-be64-a875f17cc703.json | 7 ++ .../react-charting/etc/react-charting.api.md | 14 ++++ .../CommonComponents/CartesianChart.base.tsx | 63 ++++++++++------ .../CommonComponents/CartesianChart.types.ts | 75 ++++++++++++++++--- .../HorizontalBarChartWithAxis.test.tsx | 33 ++++++++ .../VerticalBarChart.test.tsx | 32 ++++++++ 6 files changed, 189 insertions(+), 35 deletions(-) create mode 100644 change/@fluentui-react-charting-66cc6104-7a22-4cbd-be64-a875f17cc703.json diff --git a/change/@fluentui-react-charting-66cc6104-7a22-4cbd-be64-a875f17cc703.json b/change/@fluentui-react-charting-66cc6104-7a22-4cbd-be64-a875f17cc703.json new file mode 100644 index 0000000000000..da8374bd65a14 --- /dev/null +++ b/change/@fluentui-react-charting-66cc6104-7a22-4cbd-be64-a875f17cc703.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: add correctly spelled Cartesian axis label props", + "packageName": "@fluentui/react-charting", + "email": "kirtiar15502@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md index 99f2d6b9424c2..f54906b159531 100644 --- a/packages/charts/react-charting/etc/react-charting.api.md +++ b/packages/charts/react-charting/etc/react-charting.api.md @@ -429,6 +429,8 @@ export interface ICartesianChartProps { margins?: IMargins; noOfCharsToTruncate?: number; parentRef?: HTMLElement | null; + rotateXAxisLabels?: boolean; + // @deprecated (undocumented) rotateXAxisLables?: boolean; roundedTicks?: boolean; secondaryYAxistitle?: string; @@ -437,8 +439,14 @@ export interface ICartesianChartProps { yMaxValue?: number; }; secondaryYScaleType?: AxisScaleType; + showXAxisLabelsTooltip?: boolean; + // @deprecated (undocumented) showXAxisLablesTooltip?: boolean; + showYAxisLabels?: boolean; + showYAxisLabelsTooltip?: boolean; + // @deprecated (undocumented) showYAxisLables?: boolean; + // @deprecated (undocumented) showYAxisLablesTooltip?: boolean; strokeWidth?: number; styles?: IStyleFunctionOrObject; @@ -453,6 +461,8 @@ export interface ICartesianChartProps { titleStyles?: ITitleStyles; useUTC?: boolean; width?: number; + wrapXAxisLabels?: boolean; + // @deprecated (undocumented) wrapXAxisLables?: boolean; xAxis?: AxisProps & { tickLayout?: 'default' | 'auto'; @@ -1446,7 +1456,11 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps { points: any; ref?: IRefObject; showRoundOffXTickValues?: boolean; + showYAxisLabels?: boolean; + showYAxisLabelsTooltip?: boolean; + // @deprecated (undocumented) showYAxisLables?: boolean; + // @deprecated (undocumented) showYAxisLablesTooltip?: boolean; stringDatasetForYAxisDomain?: string[]; svgFocusZoneProps?: IFocusZoneProps; diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index 9080da9c5ba80..09ecef8a22dac 100644 --- a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -88,7 +88,7 @@ export class CartesianChartBase * To display the total word (space separated words), Need to have more space than usual. * This height will get total height need to disaply total word. * These value need to be removed from actual svg height/graph height. - * Defalut value is 0. And this values calculted when 'wrapXAxisLables' or 'showXAxisLablesTooltip' is true. + * Defalut value is 0. And this values calculted when x-axis labels are wrapped or tooltips are enabled. */ private _removalValueForTextTuncate: number = 0; private _yAxisTickText: string[] = []; @@ -98,6 +98,31 @@ export class CartesianChartBase private isIntegralDataset: boolean = true; private _tooltipId: string; + private get _showXAxisLabelsTooltip(): boolean { + // eslint-disable-next-line @typescript-eslint/no-deprecated + return this.props.showXAxisLabelsTooltip ?? this.props.showXAxisLablesTooltip ?? false; + } + + private get _wrapXAxisLabels(): boolean { + // eslint-disable-next-line @typescript-eslint/no-deprecated + return this.props.wrapXAxisLabels ?? this.props.wrapXAxisLables ?? false; + } + + private get _rotateXAxisLabels(): boolean { + // eslint-disable-next-line @typescript-eslint/no-deprecated + return this.props.rotateXAxisLabels ?? this.props.rotateXAxisLables ?? false; + } + + private get _showYAxisLabelsTooltip(): boolean { + // eslint-disable-next-line @typescript-eslint/no-deprecated + return this.props.showYAxisLabelsTooltip ?? this.props.showYAxisLablesTooltip ?? false; + } + + private get _showYAxisLabels(): boolean { + // eslint-disable-next-line @typescript-eslint/no-deprecated + return this.props.showYAxisLabels ?? this.props.showYAxisLables ?? false; + } + constructor(props: IModifiedCartesianChartProps) { super(props); this.state = { @@ -114,7 +139,7 @@ export class CartesianChartBase public componentDidMount(): void { this._fitParentContainer(); - if (this.props.showYAxisLables) { + if (this._showYAxisLabels) { const maxYAxisLabelLength = this.calculateMaxYAxisLabelLength(this._classNames.yAxis!); if (this.state.startFromX !== maxYAxisLabelLength) { this.setState({ @@ -139,7 +164,7 @@ export class CartesianChartBase if (prevProps.height !== this.props.height || prevProps.width !== this.props.width) { this._fitParentContainer(); } - if (this.props.showYAxisLables) { + if (this._showYAxisLabels) { const maxYAxisLabelLength = this.calculateMaxYAxisLabelLength(this._classNames.yAxis!); if (this.state.startFromX !== maxYAxisLabelLength) { this.setState({ @@ -160,7 +185,7 @@ export class CartesianChartBase public calculateMaxYAxisLabelLength = (className: string): number => { const formatTickLabel = (str: string) => { - if (this.props.showYAxisLablesTooltip) { + if (this._showYAxisLabelsTooltip) { return truncateString(str, this.props.noOfCharsToTruncate || 4); } @@ -239,13 +264,13 @@ export class CartesianChartBase showRoundOffXTickValues: this.props.showRoundOffXTickValues ?? true, xAxisCount: this.props.xAxisTickCount, xAxistickSize: this.props.xAxistickSize, - tickPadding: this.props.tickPadding || this.props.showXAxisLablesTooltip ? 5 : 10, + tickPadding: this.props.tickPadding || this._showXAxisLabelsTooltip ? 5 : 10, xAxisPadding: this.props.xAxisPadding, xAxisInnerPadding: this.props.xAxisInnerPadding, xAxisOuterPadding: this.props.xAxisOuterPadding, containerWidth: this.state.containerWidth, hideTickOverlap: - this.props.rotateXAxisLables || this.props.xAxis?.tickLayout === 'auto' ? false : this.props.hideTickOverlap, + this._rotateXAxisLabels || this.props.xAxis?.tickLayout === 'auto' ? false : this.props.hideTickOverlap, calcMaxLabelWidth: this._calcMaxLabelWidthWithTransform, xMinValue: this.props.xMinValue, xMaxValue: this.props.xMaxValue, @@ -406,7 +431,7 @@ export class CartesianChartBase // eslint-disable-next-line no-empty } catch (e) {} // Used to display tooltip at x axis labels. - if (this.props.showXAxisLablesTooltip || this.props.xAxis?.tickLayout === 'auto') { + if (this._showXAxisLabelsTooltip || this.props.xAxis?.tickLayout === 'auto') { const xAxisElement = this.xAxisElement ? d3Select(this.xAxisElement).call(xScale) : null; const tooltipProps = { tooltipCls: this._classNames.tooltip!, @@ -417,7 +442,7 @@ export class CartesianChartBase xAxisElement && tooltipOfAxislabels(tooltipProps); } // Used to display tooltip at y axis labels. - if (this.props.showYAxisLablesTooltip) { + if (this._showYAxisLabelsTooltip) { // To create y axis tick values by if specified truncating the rest of the text // and showing elipsis or showing the whole string, yScalePrimary && @@ -425,7 +450,7 @@ export class CartesianChartBase this.yAxisElement, yScalePrimary, this.props.noOfCharsToTruncate || 4, - this.props.showYAxisLablesTooltip || false, + this._showYAxisLabelsTooltip, this._isRtl, ); @@ -1029,17 +1054,13 @@ export class CartesianChartBase private _calcMaxLabelWidthWithTransform = (x: (string | number)[]) => { // Case: rotated labels - if ( - !this.props.wrapXAxisLables && - this.props.rotateXAxisLables && - this.props.xAxisType! === XAxisTypes.StringAxis - ) { + if (!this._wrapXAxisLabels && this._rotateXAxisLabels && this.props.xAxisType! === XAxisTypes.StringAxis) { const longestLabelWidth = calculateLongestLabelWidth(x, `.${this._classNames.xAxis} text`); return Math.ceil(longestLabelWidth * Math.cos(Math.PI / 4)); } // Case: truncated labels - if (this.props.showXAxisLablesTooltip) { + if (this._showXAxisLabelsTooltip) { const tickLabels = x.map(val => { const numChars = this.props.noOfCharsToTruncate || 4; return val.toString().length > numChars ? `${val.toString().slice(0, numChars)}...` : val; @@ -1050,7 +1071,7 @@ export class CartesianChartBase } // Case: wrapped labels - if (this.props.wrapXAxisLables) { + if (this._wrapXAxisLabels) { // FIXME: Calculate the max width of lines instead of words. This requires applying // the wrapping transformation earlier to obtain the actual rendered lines. const words: string[] = []; @@ -1078,7 +1099,7 @@ export class CartesianChartBase * No need to re-calculate every time the chart renders and same time need to get an update. So using setState. * Required space will be calculated first time chart rendering and if any width/height of chart updated. * */ - if (this.props.wrapXAxisLables || this.props.showXAxisLablesTooltip) { + if (this._wrapXAxisLabels || this._showXAxisLabelsTooltip) { let maxXAxisLabelWidth: number | undefined; if (this.props.xAxisType === XAxisTypes.StringAxis) { if ((this.props.datasetForXAxisDomain?.length || 0) > 1) { @@ -1091,7 +1112,7 @@ export class CartesianChartBase const wrapLabelProps = { node: this.xAxisElement, xAxis: this._xScale, - showXAxisLablesTooltip: this.props.showXAxisLablesTooltip || false, + showXAxisLablesTooltip: this._showXAxisLabelsTooltip, noOfCharsToTruncate: this.props.noOfCharsToTruncate || 4, width: maxXAxisLabelWidth, container: this.chartContainer, @@ -1099,11 +1120,7 @@ export class CartesianChartBase this._removalValueForTextTuncate = createWrapOfXLabels(wrapLabelProps) ?? 0; } - if ( - !this.props.wrapXAxisLables && - this.props.rotateXAxisLables && - this.props.xAxisType! === XAxisTypes.StringAxis - ) { + if (!this._wrapXAxisLabels && this._rotateXAxisLabels && this.props.xAxisType! === XAxisTypes.StringAxis) { const rotateLabelProps = { node: this.xAxisElement, xAxis: this._xScale, diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts index 3d54ade533a82..deadd81d18a2b 100644 --- a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts @@ -404,15 +404,22 @@ export interface ICartesianChartProps { legendProps?: Partial; /** - *@default false - *Used for to elipse x axis labes and show tooltip on x axis labels + * @default false + * Used to truncate x-axis labels and show tooltips for the full label text. + */ + showXAxisLabelsTooltip?: boolean; + + /** + * @deprecated Use `showXAxisLabelsTooltip` instead. + * @default false + * Used to truncate x-axis labels and show tooltips for the full label text. */ showXAxisLablesTooltip?: boolean; /** * @default 4 - * Used for X axis labels - * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word. + * Used for X axis labels. + * When `showXAxisLabelsTooltip` is enabled, defines after how many chars to truncate the label. */ noOfCharsToTruncate?: number; @@ -420,12 +427,26 @@ export interface ICartesianChartProps { * @default false * Used to wrap x axis labels values (whole value) */ + wrapXAxisLabels?: boolean; + + /** + * @deprecated Use `wrapXAxisLabels` instead. + * @default false + * Used to wrap x axis labels values (whole value) + */ wrapXAxisLables?: boolean; /** * @default false * Used to rotate x axis labels by 45 degrees */ + rotateXAxisLabels?: boolean; + + /** + * @deprecated Use `rotateXAxisLabels` instead. + * @default false + * Used to rotate x axis labels by 45 degrees + */ rotateXAxisLables?: boolean; /** @@ -591,14 +612,29 @@ export interface ICartesianChartProps { yAxis?: AxisProps; /** - *@default false - *Used for to elipse y axis labes and show tooltip on x axis labels + * @default false + * Used to truncate y-axis labels and show tooltips for the full label text. + */ + showYAxisLabelsTooltip?: boolean; + + /** + * @deprecated Use `showYAxisLabelsTooltip` instead. + * @default false + * Used to truncate y-axis labels and show tooltips for the full label text. */ showYAxisLablesTooltip?: boolean; /** - *@default false - *Used for showing complete y axis lables */ + * @default false + * Used for showing complete y-axis labels. + */ + showYAxisLabels?: boolean; + + /** + * @deprecated Use `showYAxisLabels` instead. + * @default false + * Used for showing complete y-axis labels. + */ showYAxisLables?: boolean; } @@ -788,14 +824,29 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps { xAxisOuterPadding?: number; /** - *@default false - *Used for to elipse y axis labes and show tooltip on x axis labels + * @default false + * Used to truncate y-axis labels and show tooltips for the full label text. + */ + showYAxisLabelsTooltip?: boolean; + + /** + * @deprecated Use `showYAxisLabelsTooltip` instead. + * @default false + * Used to truncate y-axis labels and show tooltips for the full label text. */ showYAxisLablesTooltip?: boolean; /** - *@default false - *Used for showing complete y axis lables */ + * @default false + * Used for showing complete y-axis labels. + */ + showYAxisLabels?: boolean; + + /** + * @deprecated Use `showYAxisLabels` instead. + * @default false + * Used for showing complete y-axis labels. + */ showYAxisLables?: boolean; /** diff --git a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx index 1dab08f7de7d9..efa8d5e139d37 100644 --- a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx +++ b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx @@ -15,6 +15,17 @@ function sharedBeforeEach() { resetIds(); } +function renderChartMarkup(element: React.ReactElement): string { + resetIds(); + let result: ReturnType | undefined; + act(() => { + result = render(element); + }); + const markup = result!.container.innerHTML; + result!.unmount(); + return markup; +} + const pointsForWrapLabels = [ { y: 'String One', @@ -74,6 +85,28 @@ describe('HorizontalBarChartWithAxis snapShot testing', () => { expect(result!.container.firstChild).toMatchSnapshot(); }); + it('renders showYAxisLabelsTooltip the same as showYAxisLablesTooltip', () => { + const legacyMarkup = renderChartMarkup( + , + ); + const correctedMarkup = renderChartMarkup( + , + ); + + expect(correctedMarkup).toBe(legacyMarkup); + }); + + it('renders showYAxisLabels the same as showYAxisLables', () => { + const legacyMarkup = renderChartMarkup( + , + ); + const correctedMarkup = renderChartMarkup( + , + ); + + expect(correctedMarkup).toBe(legacyMarkup); + }); + it('Should render gradients on bars', () => { const { container } = render(); expect(container.firstChild).toMatchSnapshot(); diff --git a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx index 18997747b4d28..b0ac79b48ceb3 100644 --- a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx +++ b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx @@ -19,6 +19,17 @@ function sharedAfterEach() { } } +function renderChartMarkup(element: React.ReactElement): string { + resetIds(); + let result: ReturnType | undefined; + act(() => { + result = render(element); + }); + const markup = result!.container.innerHTML; + result!.unmount(); + return markup; +} + describe('VerticalBarChart snapShot testing', () => { beforeEach(sharedBeforeEach); @@ -70,6 +81,27 @@ describe('VerticalBarChart snapShot testing', () => { expect(result!.container.firstChild).toMatchSnapshot(); }); + it('renders showXAxisLabelsTooltip the same as showXAxisLablesTooltip', () => { + const legacyMarkup = renderChartMarkup(); + const correctedMarkup = renderChartMarkup(); + + expect(correctedMarkup).toBe(legacyMarkup); + }); + + it('renders wrapXAxisLabels the same as wrapXAxisLables', () => { + const legacyMarkup = renderChartMarkup(); + const correctedMarkup = renderChartMarkup(); + + expect(correctedMarkup).toBe(legacyMarkup); + }); + + it('renders rotateXAxisLabels the same as rotateXAxisLables', () => { + const legacyMarkup = renderChartMarkup(); + const correctedMarkup = renderChartMarkup(); + + expect(correctedMarkup).toBe(legacyMarkup); + }); + it('renders yAxisTickFormat correctly', () => { let result: ReturnType | undefined; act(() => {