[1 of N] Optimizing Line, Area and Utility code for performance improvement

change/@fluentui-react-charting-effaa597-2236-4e8c-b8f3-91a2422c9f44.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Optimizing code for perfromance improvement",
+  "packageName": "@fluentui/react-charting",
+  "email": "ankityadav@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-charting/jest.config.js

@@ -12,6 +12,8 @@ function getEsmOnlyPackagesToCjsMapping() {
     '^d3-scale$': prefix + 'node_modules/d3-scale/dist/d3-scale.js',
     '^d3-array$': prefix + 'node_modules/d3-scale/node_modules/d3-array/dist/d3-array.js',
     '^d3-time$': prefix + 'node_modules/d3-scale/node_modules/d3-time/dist/d3-time.js',
+    '^d3-shape$': prefix + 'node_modules/d3-shape/dist/d3-shape.js',
+    '^d3-path$': prefix + 'node_modules/d3-path/dist/d3-path.js',
   };
   return cjsPathsToEsmOnlyPackages;
 }

packages/react-charting/package.json

@@ -47,7 +47,7 @@
     "@types/d3-sankey": "^0.11.0",
     "@types/d3-scale": "^4.0.0",
     "@types/d3-selection": "1.4.1",
-    "@types/d3-shape": "2.1.0",
+    "@types/d3-shape": "3.1.1",
     "@types/d3-time-format": "^2.1.0",
     "@types/d3-time": "^1.1.0",
     "@fluentui/set-version": "^8.2.11",
@@ -58,7 +58,7 @@
     "d3-sankey": "^0.12.3",
     "d3-scale": "^4.0.0",
     "d3-selection": "1.3.0",
-    "d3-shape": "2.1.0",
+    "d3-shape": "3.2.0",
     "d3-time-format": "^2.1.3",
     "d3-time": "^1.1.0",
     "tslib": "^2.1.0"

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

@@ -54,6 +54,12 @@ export interface IDPointType {
   values: { 0: number; 1: number; data: {} };
   xVal: number | Date;
 }
+export interface IMapXToDataSet {
+  [key: string]: ILineChartDataPoint[];
+  [key: number]: ILineChartDataPoint[];
+}
+
+//by default d3-shape 3.2.0 limits the< path> data point precision to 3 digits(d3/d3-path#10)
 
 export interface IAreaChartState extends IBasestate {
   lineXValue: number;
@@ -97,6 +103,9 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   private _isMultiStackChart: boolean;
   private _tooltipId: string;
   private _highlightedCircleId: string;
+  //enableComputationOptimization is used for optimized code to group data points by x value
+  //from O(n^2) to O(n) using a map.
+  private _enableComputationOptimization: boolean;
 
   public constructor(props: IAreaChartProps) {
     super(props);
@@ -134,6 +143,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     this._circleId = getId('circle');
     this._rectId = getId('rectangle');
     this._tooltipId = getId('AreaChartTooltipID');
+    this._enableComputationOptimization = true;
   }
 
   public componentDidUpdate() {
@@ -379,58 +389,116 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   };
 
   private _createDataSet = (points: ILineChartPoints[]) => {
-    const allChartPoints: ILineChartDataPoint[] = [];
-    const dataSet: IAreaChartDataSetPoint[] = [];
-    const colors: string[] = [];
-    const opacity: number[] = [];
-    const calloutPoints = calloutData(points!);
-
-    points &&
-      points.length &&
-      points.forEach((singleChartPoint: ILineChartPoints) => {
-        colors.push(singleChartPoint.color!);
-        opacity.push(singleChartPoint.opacity || 1);
-        allChartPoints.push(...singleChartPoint.data);
+    if (this.props.enablePerfOptimization && this._enableComputationOptimization) {
+      const allChartPoints: ILineChartDataPoint[] = [];
+      const dataSet: IAreaChartDataSetPoint[] = [];
+      const colors: string[] = [];
+      const opacity: number[] = [];
+      const calloutPoints = calloutData(points!);
+
+      points &&
+        points.length &&
+        points.forEach((singleChartPoint: ILineChartPoints) => {
+          colors.push(singleChartPoint.color!);
+          opacity.push(singleChartPoint.opacity || 1);
+          allChartPoints.push(...singleChartPoint.data);
+        });
+
+      const mapOfXvalToListOfDataPoints: IMapXToDataSet = {};
+      allChartPoints.forEach((dataPoint: ILineChartDataPoint) => {
+        const xValue = dataPoint.x instanceof Date ? dataPoint.x.toLocaleString() : dataPoint.x;
+        // map of x value to the list of data points which share the same x value .
+        if (mapOfXvalToListOfDataPoints[xValue]) {
+          mapOfXvalToListOfDataPoints[xValue].push(dataPoint);
+        } else {
+          mapOfXvalToListOfDataPoints[xValue] = [dataPoint];
+        }
       });
 
-    let tempArr = allChartPoints;
-    while (tempArr.length) {
-      const valToCheck = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
-      const filteredChartPoints: ILineChartDataPoint[] = tempArr.filter(
-        (point: ILineChartDataPoint) => (point.x instanceof Date ? point.x.toLocaleString() : point.x) === valToCheck,
-      );
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const singleDataset: any = {};
-      filteredChartPoints.forEach((singleDataPoint: ILineChartDataPoint, index: number) => {
-        singleDataset.xVal = singleDataPoint.x;
-        singleDataset[`chart${index}`] = singleDataPoint.y;
+      Object.keys(mapOfXvalToListOfDataPoints).forEach((key: number | string) => {
+        const value: ILineChartDataPoint[] = mapOfXvalToListOfDataPoints[key];
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const singleDataset: any = {};
+        value.forEach((singleDataPoint: ILineChartDataPoint, index: number) => {
+          singleDataset.xVal = singleDataPoint.x;
+          singleDataset[`chart${index}`] = singleDataPoint.y;
+        });
+        dataSet.push(singleDataset);
       });
-      dataSet.push(singleDataset);
-      // removing compared objects from array
-      const val = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
-      tempArr = tempArr.filter(
-        (point: ILineChartDataPoint) => (point.x instanceof Date ? point.x.toLocaleString() : point.x) !== val,
-      );
-    }
 
-    // get keys from dataset, used to create stacked data
-    const keysLength: number = dataSet && Object.keys(dataSet[0])!.length;
-    const keys: string[] = [];
-    for (let i = 0; i < keysLength - 1; i++) {
-      const keyVal = `chart${i}`;
-      keys.push(keyVal);
-    }
+      // get keys from dataset, used to create stacked data
+      const keysLength: number = dataSet && Object.keys(dataSet[0])!.length;
+      const keys: string[] = [];
+      for (let i = 0; i < keysLength - 1; i++) {
+        const keyVal = `chart${i}`;
+        keys.push(keyVal);
+      }
 
-    // Stacked Info used to draw graph
-    const stackedInfo = this._getStackedData(keys, dataSet);
+      // Stacked Info used to draw graph
+      const stackedInfo = this._getStackedData(keys, dataSet);
 
-    return {
-      colors,
-      opacity,
-      keys,
-      stackedInfo,
-      calloutPoints,
-    };
+      return {
+        colors,
+        opacity,
+        keys,
+        stackedInfo,
+        calloutPoints,
+      };
+    } else {
+      const allChartPoints: ILineChartDataPoint[] = [];
+      const dataSet: IAreaChartDataSetPoint[] = [];
+      const colors: string[] = [];
+      const opacity: number[] = [];
+      const calloutPoints = calloutData(points!);
+
+      points &&
+        points.length &&
+        points.forEach((singleChartPoint: ILineChartPoints) => {
+          colors.push(singleChartPoint.color!);
+          opacity.push(singleChartPoint.opacity || 1);
+          allChartPoints.push(...singleChartPoint.data);
+        });
+
+      let tempArr = allChartPoints;
+      while (tempArr.length) {
+        const valToCheck = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
+        const filteredChartPoints: ILineChartDataPoint[] = tempArr.filter(
+          (point: ILineChartDataPoint) => (point.x instanceof Date ? point.x.toLocaleString() : point.x) === valToCheck,
+        );
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const singleDataset: any = {};
+        filteredChartPoints.forEach((singleDataPoint: ILineChartDataPoint, index: number) => {
+          singleDataset.xVal = singleDataPoint.x;
+          singleDataset[`chart${index}`] = singleDataPoint.y;
+        });
+        dataSet.push(singleDataset);
+        // removing compared objects from array
+        const val = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
+        tempArr = tempArr.filter(
+          (point: ILineChartDataPoint) => (point.x instanceof Date ? point.x.toLocaleString() : point.x) !== val,
+        );
+      }
+
+      // get keys from dataset, used to create stacked data
+      const keysLength: number = dataSet && Object.keys(dataSet[0])!.length;
+      const keys: string[] = [];
+      for (let i = 0; i < keysLength - 1; i++) {
+        const keyVal = `chart${i}`;
+        keys.push(keyVal);
+      }
+
+      // Stacked Info used to draw graph
+      const stackedInfo = this._getStackedData(keys, dataSet);
+
+      return {
+        colors,
+        opacity,
+        keys,
+        stackedInfo,
+        calloutPoints,
+      };
+    }
   };
 
   private _getCustomizedCallout = () => {

packages/react-charting/src/components/AreaChart/AreaChart.types.ts

@@ -49,6 +49,12 @@ export interface IAreaChartProps extends ICartesianChartProps {
    */
   culture?: string;
 
+  /**
+   * @default false
+   * The prop used to enable the perf optimization
+   */
+  enablePerfOptimization?: boolean;
+
   /*
    * Optimize area chart rendering for large data set.
    */

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

@@ -2559,7 +2559,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
       </g>
       <g>
         <path
-          d="M10,17.884615384615383Z"
+          d="M10,17.885Z"
           fill="transparent"
           id="0-line-areaChart_55"
           onMouseMove={[Function]}
@@ -2585,7 +2585,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
         />
         <g
           clipPath="url(#clip)"
-          d="M10,17.884615384615383L10,-35Z"
+          d="M10,17.885L10,-35Z"
         >
           <circle
             aria-label="20. metaData1, 50."