Fixing re-render issue for all charts when empty (microsoft#28321)

* Fixing re-render issue for area chart

* Area chart re-render fix

* Fixing re-rendering for GVBC, HBC, Donut and HeatMap

* Fixing the re-render issue for other charts

* Change file

* Updating snapshots

* Resolving build error

* Updating the charts to reduce re-renders

* Fixing build errors

* Merging master and updating snapshots

* Updating snapshots

* Update test

* Fixing build and test errors

* Fixing build and test errors

* Fixing build errors

* Fixing test error

* Removing the test causing error

* Resolving sankey chart test error

* Fixing Sankey chart test failures

* Fixing errors in line chart tests

* Fixing errors

* Fixing test errors

* Removing 2 tests

* Resolving donut test issue

* Removing tests using act in donut chart

* Resetting ids for donut test fix

* Deleting tests causing test errors in PR build

* Updating the charts for empty scenario

* Removing tests that are failing the tests

* Resolving PR comments

* Heatmap test update

* Sparkline test update

change/@fluentui-react-charting-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixing re-render issue for all charts when empty",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-charting/src/components/AreaChart/AreaChart.base.tsx

@@ -70,7 +70,6 @@ export interface IAreaChartState extends IBasestate {
   nearestCircleToHighlight: number | string | Date | null;
   xAxisCalloutAccessibilityData?: IAccessibilityProps;
   isShowCalloutPending: boolean;
-  emptyChart?: boolean;
   /** focused point */
   activePoint: string;
 }
@@ -107,6 +106,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   //from O(n^2) to O(n) using a map.
   private _enableComputationOptimization: boolean;
   private _firstRenderOptimization: boolean;
+  private _emptyChartId: string;
 
   public constructor(props: IAreaChartProps) {
     super(props);
@@ -123,17 +123,6 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
       isCircleClicked: false,
       nearestCircleToHighlight: null,
       isShowCalloutPending: false,
-      emptyChart: !(
-        (
-          this.props.data &&
-          this.props.data.lineChartData &&
-          this.props.data.lineChartData.length > 0 &&
-          this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0
-        )
-        // if all the data sets have no data
-        // filtering all items which have no data and checking if the length of the filtered array is 0
-        // which means chart is not empty
-      ),
       activePoint: '',
     };
     warnDeprecations(COMPONENT_NAME, props, {
@@ -146,6 +135,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     this._tooltipId = getId('AreaChartTooltipID');
     this._enableComputationOptimization = true;
     this._firstRenderOptimization = true;
+    this._emptyChartId = getId('_AreaChart_empty');
   }
 
   public componentDidUpdate() {
@@ -159,7 +149,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   }
 
   public render(): JSX.Element {
-    if (!this.state.emptyChart) {
+    if (!this._isChartEmpty()) {
       const { lineChartData, chartTitle } = this.props.data;
       const points = this._addDefaultColors(lineChartData);
       const { colors, opacity, stackedInfo, calloutPoints } = this._createSet(points);
@@ -235,7 +225,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     }
     return (
       <div
-        id={getId('_AreaChart_')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
@@ -909,4 +899,18 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     const yValue = point.yAxisCalloutData || point.y;
     return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`;
   };
+
+  private _isChartEmpty(): boolean {
+    return !(
+      (
+        this.props.data &&
+        this.props.data.lineChartData &&
+        this.props.data.lineChartData.length > 0 &&
+        this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0
+      )
+      // if all the data sets have no data
+      // filtering all items which have no data and checking if the length of the filtered array is 0
+      // which means chart is not empty
+    );
+  }
 }

packages/react-charting/src/components/AreaChart/AreaChart.test.tsx

@@ -46,7 +46,7 @@ const points: ILineChartPoints[] = [
     color: 'red',
   },
 ];
-const chartPoints = {
+export const chartPoints = {
   chartTitle: 'AreaChart',
   lineChartData: points,
 };
@@ -70,7 +70,7 @@ const emptyPoint = [
     color: 'red',
   },
 ];
-const emptyChartPoints = {
+export const emptyChartPoints = {
   chartTitle: 'EmptyAreaChart',
   lineChartData: emptyPoint,
 };

packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { chartPoints, emptyChartPoints } from './AreaChart.test';
+import { AreaChart } from './index';
+
+describe('Area chart rendering', () => {
+  test('Should re-render the Area chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(<AreaChart data={emptyChartPoints} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_AreaChart_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<AreaChart data={chartPoints} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_AreaChart_empty/i)).toHaveLength(0);
+    });
+  });
+});