Full y axis labels in Heatmap chart (#33509)

microsoft · Dec 26, 2024 · 3e4cc98 · 3e4cc98
1 parent 864f029
commit 3e4cc98
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 23 deletions.
diff --git a/change/@fluentui-react-charting-4a2b4230-b5e3-4cea-9777-4e1670b33156.json b/change/@fluentui-react-charting-4a2b4230-b5e3-4cea-9777-4e1670b33156.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Full Yaxis labels in HeatMap chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "74965306+Anush2303@users.noreply.github.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
@@ -721,6 +721,7 @@ export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<k
     domainValuesForColorScale: number[];
     legendProps?: Partial<ILegendsProps>;
     rangeValuesForColorScale: string[];
+    showYAxisLables?: boolean;
     styles?: IStyleFunctionOrObject<IHeatMapChartStyleProps, IHeatMapChartStyles>;
     xAxisDateFormatString?: string;
     xAxisNumberFormatString?: string;

diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -9,6 +9,7 @@ import {
   IModifiedCartesianChartProps,
   IYValueHover,
   IHorizontalBarChartWithAxisDataPoint,
+  IHeatMapChartDataPoint,
 } from '../../index';
 import { convertToLocaleString } from '../../utilities/locale-util';
 import {
@@ -38,6 +39,7 @@ const getClassNames = classNamesFunction<ICartesianChartStyleProps, ICartesianCh
 const ChartHoverCard = React.lazy(() =>
   import('../../utilities/ChartHoverCard/ChartHoverCard').then(module => ({ default: module.ChartHoverCard })),
 );
+const chartTypesToCheck = [ChartTypes.HorizontalBarChartWithAxis, ChartTypes.HeatMapChart];
 
 export interface ICartesianChartState {
   containerWidth: number;
@@ -141,14 +143,11 @@ export class CartesianChartBase
 
   public componentDidMount(): void {
     this._fitParentContainer();
-    if (
-      this.props.chartType === ChartTypes.HorizontalBarChartWithAxis &&
-      this.props.showYAxisLables &&
-      this.yAxisElement
-    ) {
-      const maxYAxisLabelLength = calculateLongestLabelWidth(
-        this.props.points.map((point: IHorizontalBarChartWithAxisDataPoint) => point.y),
-        `.${this._classNames.yAxis} text`,
+    if (chartTypesToCheck.includes(this.props.chartType) && this.props.showYAxisLables && this.yAxisElement) {
+      const maxYAxisLabelLength = this.calculateMaxYAxisLabelLength(
+        this.props.chartType,
+        this.props.points,
+        this._classNames.yAxis!,
       );
       if (this.state.startFromX !== maxYAxisLabelLength) {
         this.setState({
@@ -194,14 +193,11 @@ export class CartesianChartBase
         });
       }
     }
-    if (
-      this.props.chartType === ChartTypes.HorizontalBarChartWithAxis &&
-      this.props.showYAxisLables &&
-      this.yAxisElement
-    ) {
-      const maxYAxisLabelLength = calculateLongestLabelWidth(
-        this.props.points.map((point: IHorizontalBarChartWithAxisDataPoint) => point.y),
-        `.${this._classNames.yAxis} text`,
+    if (chartTypesToCheck.includes(this.props.chartType) && this.props.showYAxisLables && this.yAxisElement) {
+      const maxYAxisLabelLength = this.calculateMaxYAxisLabelLength(
+        this.props.chartType,
+        this.props.points,
+        this._classNames.yAxis!,
       );
       if (this.state.startFromX !== maxYAxisLabelLength) {
         this.setState({
@@ -220,6 +216,25 @@ export class CartesianChartBase
     }
   }
 
+  public calculateMaxYAxisLabelLength = (
+    chartType: ChartTypes,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    points: any[],
+    className: string,
+  ): number => {
+    if (chartType === ChartTypes.HeatMapChart) {
+      return calculateLongestLabelWidth(
+        points[0].data.map((point: IHeatMapChartDataPoint) => point.y),
+        `.${className} text`,
+      );
+    } else {
+      return calculateLongestLabelWidth(
+        points.map((point: IHorizontalBarChartWithAxisDataPoint) => point.y),
+        `.${className} text`,
+      );
+    }
+  };
+
   public render(): JSX.Element {
     const {
       calloutProps,
@@ -238,7 +253,7 @@ export class CartesianChartBase
     }
 
     const margin = { ...this.margins };
-    if (this.props.chartType === ChartTypes.HorizontalBarChartWithAxis) {
+    if (chartTypesToCheck.includes(this.props.chartType)) {
       if (!this._isRtl) {
         margin.left! += this.state.startFromX;
       } else {
@@ -415,7 +430,7 @@ export class CartesianChartBase
     truncating the rest of the text and showing elipsis
     or showing the whole string,
      * */
-      this.props.chartType === ChartTypes.HorizontalBarChartWithAxis &&
+      chartTypesToCheck.includes(this.props.chartType) &&
         yScale &&
         createYAxisLabels(
           this.yAxisElement,

diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -390,6 +390,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr
     domainValuesForColorScale,
     rangeValuesForColorScale,
     hideLegend: true,
+    showYAxisLables: true,
   };
 };
 

diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
@@ -114,6 +114,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
   private _yAxisType: YAxisType;
   private _calloutAnchorPoint: FlattenData | null;
   private _emptyChartId: string;
+  private margins: IMargins;
   private _cartesianChartRef: React.RefObject<IChart>;
 
   public constructor(props: IHeatMapChartProps) {
@@ -218,6 +219,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
         createStringYAxis={createStringYAxis}
         getDomainNRangeValues={this._getDomainNRangeValues}
         getMinMaxOfYAxis={this._getMinMaxOfYAxis}
+        getmargins={this._getMargins}
         xAxisTickCount={this._stringXAxisDataPoints.length}
         xAxistickSize={0}
         xAxisPadding={0.02}
@@ -269,7 +271,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
     if (xAxisType === XAxisTypes.NumericAxis || xAxisType === XAxisTypes.DateAxis) {
       domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
     } else {
-      domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);
+      domainNRangeValue = domainRangeOfXStringAxis(this.margins, width, isRTL);
     }
     return domainNRangeValue;
   };
@@ -287,6 +289,10 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
     return { x, y };
   };
 
+  private _getMargins = (margins: IMargins) => {
+    this.margins = margins;
+  };
+
   private _getOpacity = (legendTitle: string): string => {
     const opacity = this._legendHighlighted(legendTitle) || this._noLegendHighlighted() ? '1' : '0.1';
     return opacity;

diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts
@@ -108,6 +108,11 @@ export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<k
    * The prop used to define the culture to localized the numbers
    */
   culture?: string;
+
+  /**
+   *@default false
+   *Used for showing complete y axis lables   */
+  showYAxisLables?: boolean;
 }
 
 /**

diff --git a/...ts/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap b/...ts/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap
@@ -760,9 +760,22 @@ exports[`HeatMapChart snapshot tests should render HeatMapChart correctly with n
             <text
               dy="0.32em"
               fill="currentColor"
+              text-align="start"
               x="-10"
             >
-              10
+              <tspan
+                data-="10"
+                dy="0.32em"
+                id="BaseSpan"
+                x="-10"
+              />
+              <tspan
+                dx="1em"
+                id="LessLength"
+                x="-10"
+              >
+                10
+              </tspan>
             </text>
           </g>
           <g
@@ -777,9 +790,22 @@ exports[`HeatMapChart snapshot tests should render HeatMapChart correctly with n
             <text
               dy="0.32em"
               fill="currentColor"
+              text-align="start"
               x="-10"
             >
-              20
+              <tspan
+                data-="20"
+                dy="0.32em"
+                id="BaseSpan"
+                x="-10"
+              />
+              <tspan
+                dx="1em"
+                id="LessLength"
+                x="-10"
+              >
+                20
+              </tspan>
             </text>
           </g>
         </g>
@@ -1334,9 +1360,22 @@ exports[`HeatMapChart snapshot tests should render axis labels correctly When cu
             <text
               dy="0.32em"
               fill="currentColor"
+              text-align="start"
               x="-10"
             >
-              yPoint p1
+              <tspan
+                data-="yPoint p1"
+                dy="0.32em"
+                id="BaseSpan"
+                x="-10"
+              />
+              <tspan
+                dx="1em"
+                id="LessLength"
+                x="-10"
+              >
+                yPoint p1
+              </tspan>
             </text>
           </g>
           <g
@@ -1351,9 +1390,22 @@ exports[`HeatMapChart snapshot tests should render axis labels correctly When cu
             <text
               dy="0.32em"
               fill="currentColor"
+              text-align="start"
               x="-10"
             >
-              yPoint p2
+              <tspan
+                data-="yPoint p2"
+                dy="0.32em"
+                id="BaseSpan"
+                x="-10"
+              />
+              <tspan
+                dx="1em"
+                id="LessLength"
+                x="-10"
+              >
+                yPoint p2
+              </tspan>
             </text>
           </g>
         </g>