HeatMap chart bug fixes

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

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;

packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx

@@ -247,7 +247,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
       return (
         <HeatMapChart
           {...transformPlotlyJsonToHeatmapProps(plotlySchema)}
-          legendProps={legendProps}
+          legendProps={{ onChange: onActiveLegendsChange, canSelectMultipleLegends: false, selectedLegends: [] }}
           componentRef={chartRef}
           calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
         />

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',
   };
 };
 

packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx

@@ -601,38 +601,45 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
      * rectangles and then format the x and y datapoints respectively
      */
     Object.keys(yPoints).forEach((item: string) => {
-      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;
-          } else if (this._xAxisType === XAxisTypes.DateAxis) {
-            return (a.x as Date).getTime() - (b.x as Date).getTime();
-          } else if (this._xAxisType === XAxisTypes.NumericAxis) {
-            return +(a.x as string) > +(b.x as string) ? 1 : -1;
-          } else {
-            return a.x > b.x ? 1 : -1;
-          }
-        })
-        .forEach((datapoint: IHeatMapChartDataPoint) => {
-          if (this._xAxisType === XAxisTypes.DateAxis) {
-            datapoint.x = this._getStringFormattedDate(datapoint.x as string, xAxisDateFormatString);
-          }
-          if (this._xAxisType === XAxisTypes.NumericAxis) {
-            datapoint.x = this._getStringFormattedNumber(datapoint.x as string, xAxisNumberFormatString);
-          }
-          if (this._xAxisType === XAxisTypes.StringAxis) {
-            datapoint.x = this._getFormattedLabelForXAxisDataPoint(datapoint.x as string);
-          }
-          if (this._yAxisType === YAxisType.DateAxis) {
-            datapoint.y = this._getStringFormattedDate(datapoint.y as string, yAxisDateFormatString);
-          }
-          if (this._yAxisType === YAxisType.NumericAxis) {
-            datapoint.y = this._getStringFormattedNumber(datapoint.y as string, yAxisNumberFormatString);
-          }
-          if (this._yAxisType === YAxisType.StringAxis) {
-            datapoint.y = this._getFormattedLabelForYAxisDataPoint(datapoint.y as string);
-          }
-        });
+      this.props.sortOrder !== 'none'
+        ? yPoints[item]
+            .sort((a: IHeatMapChartDataPoint, b: IHeatMapChartDataPoint) => {
+              if (this._xAxisType === XAxisTypes.StringAxis) {
+                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) {
+                return +(a.x as string) > +(b.x as string) ? 1 : -1;
+              } else {
+                return a.x > b.x ? 1 : -1;
+              }
+            })
+            .forEach((datapoint: IHeatMapChartDataPoint) => {
+              if (this._xAxisType === XAxisTypes.DateAxis) {
+                datapoint.x = this._getStringFormattedDate(datapoint.x as string, xAxisDateFormatString);
+              }
+              if (this._xAxisType === XAxisTypes.NumericAxis) {
+                datapoint.x = this._getStringFormattedNumber(datapoint.x as string, xAxisNumberFormatString);
+              }
+              if (this._yAxisType === YAxisType.DateAxis) {
+                datapoint.y = this._getStringFormattedDate(datapoint.y as string, yAxisDateFormatString);
+              }
+              if (this._yAxisType === YAxisType.NumericAxis) {
+                datapoint.y = this._getStringFormattedNumber(datapoint.y as string, yAxisNumberFormatString);
+              }
+              if (this._yAxisType === YAxisType.StringAxis) {
+                datapoint.y = this._getFormattedLabelForYAxisDataPoint(datapoint.y as string);
+              }
+            })
+        : yPoints[item].forEach((datapoint: IHeatMapChartDataPoint) => {
+            if (this._xAxisType === XAxisTypes.StringAxis) {
+              datapoint.x = this._getFormattedLabelForXAxisDataPoint(datapoint.x as string);
+            }
+          });
     });
     /**
      * if  y-axis data points are of type date or number or if we have string formatter,
@@ -687,7 +694,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 +721,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) => {

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;
+
+  /**
+   * The prop used to decide order of string axis labels
+   */
+  sortOrder?: 'none' | 'alphabetical';
 }
 
 /**

packages/charts/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap

@@ -1410,132 +1410,56 @@ exports[`HeatMapChart snapshot tests should render axis labels correctly When cu
           </g>
         </g>
         <g
-          aria-label="xPoint p3, yPoint p2. Nasty, 25."
+          aria-label="xPoint p3, yPoint p2. , No data available."
           data-is-focusable="true"
-          fill-opacity="1"
           role="img"
           tabindex="0"
           transform="translate(45.8415841584158, 22.34653465346534)"
         >
           <rect
-            fill="rgb(166, 207, 226)"
+            fill="#ffffff"
             height="114.98019801980197"
             width="286.23762376237624"
           />
-          <text
-            class=
-
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  fill: #ffffff;
-                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                  font-size: 14px;
-                  font-weight: 600;
-                  pointer-events: none;
-                }
-            dominant-baseline="middle"
-            text-anchor="middle"
-            transform="translate(143.11881188118812, 57.49009900990099)"
-          >
-            25
-          </text>
         </g>
         <g
-          aria-label="xPoint p4, yPoint p2. Excellent, 100."
+          aria-label="xPoint p4, yPoint p2. , No data available."
           data-is-focusable="true"
-          fill-opacity="1"
           role="img"
           tabindex="-1"
           transform="translate(337.9207920792079, 22.34653465346534)"
         >
           <rect
-            fill="rgb(144, 180, 215)"
+            fill="#ffffff"
             height="114.98019801980197"
             width="286.23762376237624"
           />
-          <text
-            class=
-
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  fill: #ffffff;
-                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                  font-size: 14px;
-                  font-weight: 600;
-                  pointer-events: none;
-                }
-            dominant-baseline="middle"
-            text-anchor="middle"
-            transform="translate(143.11881188118812, 57.49009900990099)"
-          >
-            100
-          </text>
         </g>
         <g
-          aria-label="xPoint p3, yPoint p1. Excellent, 75."
+          aria-label="xPoint p3, yPoint p1. , No data available."
           data-is-focusable="true"
-          fill-opacity="1"
           role="img"
           tabindex="-1"
           transform="translate(45.8415841584158, 139.67326732673268)"
         >
           <rect
-            fill="rgb(151, 189, 219)"
+            fill="#ffffff"
             height="114.98019801980197"
             width="286.23762376237624"
           />
-          <text
-            class=
-
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  fill: #ffffff;
-                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                  font-size: 14px;
-                  font-weight: 600;
-                  pointer-events: none;
-                }
-            dominant-baseline="middle"
-            text-anchor="middle"
-            transform="translate(143.11881188118812, 57.49009900990099)"
-          >
-            75
-          </text>
         </g>
         <g
-          aria-label="xPoint p4, yPoint p1. Nasty, 50."
+          aria-label="xPoint p4, yPoint p1. , No data available."
           data-is-focusable="true"
-          fill-opacity="1"
           role="img"
           tabindex="-1"
           transform="translate(337.9207920792079, 139.67326732673268)"
         >
           <rect
-            fill="rgb(159, 198, 222)"
+            fill="#ffffff"
             height="114.98019801980197"
             width="286.23762376237624"
           />
-          <text
-            class=
-
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  fill: #ffffff;
-                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                  font-size: 14px;
-                  font-weight: 600;
-                  pointer-events: none;
-                }
-            dominant-baseline="middle"
-            text-anchor="middle"
-            transform="translate(143.11881188118812, 57.49009900990099)"
-          >
-            50
-          </text>
         </g>
       </svg>
     </div>