HeatMap chart bug fixes (#33525)

microsoft · Dec 31, 2024 · bf1b91f · bf1b91f
1 parent db1eb85
commit bf1b91f
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 4 deletions.
diff --git a/change/@fluentui-react-charting-d2171258-9397-47d2-b063-9e1b96df4f2d.json b/change/@fluentui-react-charting-d2171258-9397-47d2-b063-9e1b96df4f2d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "HeatMap chart bug fixes",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md
@@ -722,6 +722,7 @@ export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<k
     legendProps?: Partial<ILegendsProps>;
     rangeValuesForColorScale: string[];
     showYAxisLables?: boolean;
+    sortOrder?: 'none' | 'alphabetical';
     styles?: IStyleFunctionOrObject<IHeatMapChartStyleProps, IHeatMapChartStyles>;
     xAxisDateFormatString?: string;
     xAxisNumberFormatString?: string;

diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
@@ -247,7 +247,6 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
       return (
         <HeatMapChart
           {...transformPlotlyJsonToHeatmapProps(plotlySchema)}
-          legendProps={legendProps}
           componentRef={chartRef}
           calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
         />

diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -399,6 +399,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr
         x: layout.xaxis?.type === 'date' ? new Date(xVal) : xVal,
         y: layout.yaxis?.type === 'date' ? new Date(yVal) : yVal,
         value: zVal,
+        rectText: zVal,
       });
 
       zMin = Math.min(zMin, zVal);
@@ -423,6 +424,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr
     rangeValuesForColorScale,
     hideLegend: true,
     showYAxisLables: true,
+    sortOrder: 'none',
   };
 };
 

diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
@@ -604,7 +604,11 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       yPoints[item]
         .sort((a: IHeatMapChartDataPoint, b: IHeatMapChartDataPoint) => {
           if (this._xAxisType === XAxisTypes.StringAxis) {
-            return (a.x as string).toLowerCase() > (b.x as string).toLowerCase() ? 1 : -1;
+            return this.props.sortOrder === 'none'
+              ? 0
+              : (a.x as string).toLowerCase() > (b.x as string).toLowerCase()
+              ? 1
+              : -1;
           } else if (this._xAxisType === XAxisTypes.DateAxis) {
             return (a.x as Date).getTime() - (b.x as Date).getTime();
           } else if (this._xAxisType === XAxisTypes.NumericAxis) {
@@ -687,7 +691,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       if (this._xAxisType === XAxisTypes.DateAxis || this._xAxisType === XAxisTypes.NumericAxis) {
         return +a - +b;
       } else {
-        return a.toLowerCase() > b.toLowerCase() ? 1 : -1;
+        return this.props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
       }
     });
     xAxisPoints = unFormattedXAxisDataPoints.map((xPoint: string) => {
@@ -714,7 +718,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       if (this._yAxisType === YAxisType.DateAxis || this._yAxisType === YAxisType.NumericAxis) {
         return +a - +b;
       } else {
-        return a.toLowerCase() > b.toLowerCase() ? 1 : -1;
+        return this.props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
       }
     });
     yAxisPoints = unFormattedYAxisDataPoints.map((yPoint: string) => {

diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts
@@ -113,6 +113,11 @@ export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<k
    *@default false
    *Used for showing complete y axis lables   */
   showYAxisLables?: boolean;
+
+  /**
+   * @default alphabetical
+   * The prop used to decide order of string axis labels */
+  sortOrder?: 'none' | 'alphabetical';
 }
 
 /**