Adding perf changes thriugh prop

microsoft · May 25, 2023 · 0494a4b · 0494a4b
1 parent 0afaceb
commit 0494a4b
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 47 deletions.
diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
@@ -360,61 +360,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) {
+      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];
+        }
+      });
+
+      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);
       });
 
-    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];
+      // 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);
       }
-    });
 
-    Object.keys(mapOfXvalToListOfDataPoints).forEach((key: number | string) => {
-      const value: ILineChartDataPoint[] = mapOfXvalToListOfDataPoints[key];
+      // Stacked Info used to draw graph
+      const stackedInfo = this._getStackedData(keys, dataSet);
 
-      // 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);
-    });
+      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);
+        });
 
-    // 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);
-    }
+      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,
+        );
+      }
 
-    // Stacked Info used to draw graph
-    const stackedInfo = this._getStackedData(keys, dataSet);
+      // 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);
+      }
 
-    return {
-      colors,
-      opacity,
-      keys,
-      stackedInfo,
-      calloutPoints,
-    };
+      // Stacked Info used to draw graph
+      const stackedInfo = this._getStackedData(keys, dataSet);
+
+      return {
+        colors,
+        opacity,
+        keys,
+        stackedInfo,
+        calloutPoints,
+      };
+    }
   };
 
   private _getCustomizedCallout = () => {

diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.types.ts b/packages/react-charting/src/components/AreaChart/AreaChart.types.ts
@@ -48,6 +48,12 @@ export interface IAreaChartProps extends ICartesianChartProps {
    * The prop used to define the culture to localized the numbers
    */
   culture?: string;
+
+  /**
+   * @default false
+   * The prop used to enable the perf optimization
+   */
+  enablePerfOptimization?: boolean;
 }
 
 export interface IAreaChartStyles extends ICartesianChartStyles {}

diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx
@@ -183,6 +183,7 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt
             width={this.state.width}
             data={chartData}
             showYAxisGridLines={true}
+            enablePerfOptimization={true}
             // eslint-disable-next-line react/jsx-no-bind
             onRenderCalloutPerDataPoint={(props: ICustomizedCalloutData) =>
               props && this.state.isCalloutselected ? (

diff --git a/...ges/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx b/...ges/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx
@@ -172,6 +172,7 @@ export class AreaChartCustomAccessibilityExample extends React.Component<{}, IAr
             data={chartData}
             legendsOverflowText={'Overflow Items'}
             yAxisTickFormat={d3.format('$,')}
+            enablePerfOptimization={true}
             legendProps={{
               allowFocusOnLegends: true,
             }}

diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx
@@ -208,6 +208,7 @@ export class AreaChartMultipleExample extends React.Component<{}, IAreaChartBasi
             data={chartData}
             legendsOverflowText={'Overflow Items'}
             yAxisTickFormat={d3.format('$,')}
+            enablePerfOptimization={true}
             legendProps={{
               allowFocusOnLegends: true,
             }}

diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Styled.Example.tsx
@@ -137,6 +137,7 @@ export class AreaChartStyledExample extends React.Component<{}, IAreaChartBasicS
             width={this.state.width}
             data={chartData}
             showYAxisGridLines={false}
+            enablePerfOptimization={true}
           />
         </div>
       </>