Add correctly spelled chart axis label props

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"
+}

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<ICartesianChartStyleProps, ICartesianChartStyles>;
@@ -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<IChart>;
     showRoundOffXTickValues?: boolean;
+    showYAxisLabels?: boolean;
+    showYAxisLabelsTooltip?: boolean;
+    // @deprecated (undocumented)
     showYAxisLables?: boolean;
+    // @deprecated (undocumented)
     showYAxisLablesTooltip?: boolean;
     stringDatasetForYAxisDomain?: string[];
     svgFocusZoneProps?: IFocusZoneProps;

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,15 +442,15 @@ 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 &&
           createYAxisLabels(
             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,19 +1112,15 @@ 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,
       };
       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,

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts

@@ -404,28 +404,49 @@ export interface ICartesianChartProps {
   legendProps?: Partial<ILegendsProps>;
 
   /**
-   *@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;
 
   /**
    * @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;
 
   /**

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<typeof render> | 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(
+      <HorizontalBarChartWithAxis data={pointsForWrapLabels} showYAxisLablesTooltip={true} />,
+    );
+    const correctedMarkup = renderChartMarkup(
+      <HorizontalBarChartWithAxis data={pointsForWrapLabels} showYAxisLabelsTooltip={true} />,
+    );
+
+    expect(correctedMarkup).toBe(legacyMarkup);
+  });
+
+  it('renders showYAxisLabels the same as showYAxisLables', () => {
+    const legacyMarkup = renderChartMarkup(
+      <HorizontalBarChartWithAxis data={pointsForWrapLabels} showYAxisLables={true} showYAxisLablesTooltip={false} />,
+    );
+    const correctedMarkup = renderChartMarkup(
+      <HorizontalBarChartWithAxis data={pointsForWrapLabels} showYAxisLabels={true} showYAxisLabelsTooltip={false} />,
+    );
+
+    expect(correctedMarkup).toBe(legacyMarkup);
+  });
+
   it('Should render gradients on bars', () => {
     const { container } = render(<HorizontalBarChartWithAxis data={pointsHBCWA} enableGradient={true} />);
     expect(container.firstChild).toMatchSnapshot();