box.component.ts: replace cloneDeep from rfdc by code proposed by bry…

…anrideshark in pr swimlane#1763 (with rfdc, there is the same message like clone-deep: CommonJS or AMD dependencies can cause optimization bailouts)
PhilFlash · Nov 11, 2022 · 5672265 · 5672265
1 parent 22c1f74
commit 5672265
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 17 deletions.
diff --git a/projects/swimlane/ngx-charts/ng-package.json b/projects/swimlane/ngx-charts/ng-package.json
@@ -4,5 +4,7 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "allowedNonPeerDependencies": ["d3", "rfdc"]
+  "allowedNonPeerDependencies": [
+    "d3"
+  ]
 }
diff --git a/projects/swimlane/ngx-charts/package.json b/projects/swimlane/ngx-charts/package.json
@@ -57,8 +57,6 @@
     "d3-shape": "^3.1.0",
     "d3-time-format": "^4.1.0",
     "d3-transition": "^3.0.1",
-    "rfdc": "^1.3.0",
-    "tslib": "^2.4.0",
-    "@types/d3-shape": "^3.1.0"
+    "tslib": "^2.4.0"
   }
 }
diff --git a/projects/swimlane/ngx-charts/src/lib/box-chart/box-chart.component.spec.ts b/projects/swimlane/ngx-charts/src/lib/box-chart/box-chart.component.spec.ts
@@ -5,6 +5,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { boxData } from '../../../../../../src/app/data';
 import { BoxChartModule } from './box-chart.module';
+import { cloneLineCoordinates } from '@swimlane/ngx-charts/box-chart/box.component';
+import { IVector2D } from '@swimlane/ngx-charts/models/coordinates.model';
 
 @Component({
   selector: 'test-component',
@@ -50,5 +52,67 @@ describe('<ngx-charts-box-chart>', () => {
       expect(svg.getAttribute('width')).toBe('400');
       expect(svg.getAttribute('height')).toBe('800');
     });
+
+    it('test simple clone for LineCoordinates', () => {
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+      type LineCoordinates = [IVector2D, IVector2D, IVector2D, IVector2D];
+      const line1Coordinates: LineCoordinates = [{
+        "v1": { "x": 109.5, "y": 245 },
+        "v2": { "x": 109.5, "y": 107.96610169491527 }
+      }, {
+        "v1": { "x": 121.66666666666667, "y": 245 },
+        "v2": { "x": 97.33333333333333, "y": 245 }
+      }, {
+        "v1": { "x": 150, "y": 191.01694915254237 },
+        "v2": { "x": 69, "y": 191.01694915254237 }
+      }, {
+        "v1": { "x": 121.66666666666667, "y": 107.96610169491527 },
+        "v2": { "x": 97.33333333333333, "y": 107.96610169491527 }
+      }];
+      const line2Coordinates: LineCoordinates = [{
+        "v1": { "x": 254.5, "y": 211.77966101694915 },
+        "v2": { "x": 254.5, "y": 41.52542372881356 }
+      }, {
+        "v1": { "x": 266.6666666666667, "y": 211.77966101694915 },
+        "v2": { "x": 242.33333333333334, "y": 211.77966101694915 }
+      }, {
+        "v1": { "x": 295, "y": 149.4915254237288 },
+        "v2": { "x": 214, "y": 149.4915254237288 }
+      }, {
+        "v1": { "x": 266.6666666666667, "y": 41.52542372881356 },
+        "v2": { "x": 242.33333333333334, "y": 41.52542372881356 }
+      }];
+
+      const cloneLine1Coordinates = cloneLineCoordinates(line1Coordinates);
+      const cloneLine2Coordinates = cloneLineCoordinates(line2Coordinates);
+
+      expect(cloneLine1Coordinates).toEqual([{
+        "v1": { "x": 109.5, "y": 245 },
+        "v2": { "x": 109.5, "y": 107.96610169491527 }
+      }, {
+        "v1": { "x": 121.66666666666667, "y": 245 },
+        "v2": { "x": 97.33333333333333, "y": 245 }
+      }, {
+        "v1": { "x": 150, "y": 191.01694915254237 },
+        "v2": { "x": 69, "y": 191.01694915254237 }
+      }, {
+        "v1": { "x": 121.66666666666667, "y": 107.96610169491527 },
+        "v2": { "x": 97.33333333333333, "y": 107.96610169491527 }
+      }]);
+      expect(cloneLine2Coordinates).toEqual([{
+        "v1": { "x": 254.5, "y": 211.77966101694915 },
+        "v2": { "x": 254.5, "y": 41.52542372881356 }
+      }, {
+        "v1": { "x": 266.6666666666667, "y": 211.77966101694915 },
+        "v2": { "x": 242.33333333333334, "y": 211.77966101694915 }
+      }, {
+        "v1": { "x": 295, "y": 149.4915254237288 },
+        "v2": { "x": 214, "y": 149.4915254237288 }
+      }, {
+        "v1": { "x": 266.6666666666667, "y": 41.52542372881356 },
+        "v2": { "x": 242.33333333333334, "y": 41.52542372881356 }
+      }]);
+    });
   });
 });
diff --git a/projects/swimlane/ngx-charts/src/lib/box-chart/box.component.ts b/projects/swimlane/ngx-charts/src/lib/box-chart/box.component.ts
@@ -1,31 +1,60 @@
 import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
-  Input,
-  Output,
+  ElementRef,
   EventEmitter,
   HostListener,
-  ElementRef,
-  SimpleChanges,
+  Input,
   OnChanges,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef
+  Output,
+  SimpleChanges
 } from '@angular/core';
-import { select, BaseType } from 'd3-selection';
+import { BaseType, select } from 'd3-selection';
 import { interpolate } from 'd3-interpolate';
 import { easeSinInOut } from 'd3-ease';
 
-import rfdc from 'rfdc';
 import { roundedRect } from '../common/shape.helper';
 import { id } from '../utils/id';
 import { IBoxModel } from '../models/chart-data.model';
-import { IVector2D } from '../models/coordinates.model';
+import { IPoint, IVector2D } from '../models/coordinates.model';
 import { BarOrientation } from '../common/types/bar-orientation.enum';
 import { Gradient } from '../common/types/gradient.interface';
 
-const cloneDeep = rfdc();
-
 type LineCoordinates = [IVector2D, IVector2D, IVector2D, IVector2D];
 
+export function clonePoint(original: IPoint): IPoint {
+  if (!original) {
+    return original;
+  }
+  return {
+    x: original.x,
+    y: original.y
+  };
+}
+
+export function cloneVector2d(original: IVector2D): IVector2D {
+  if (!original) {
+    return original;
+  }
+  return {
+    v1: clonePoint(original.v1),
+    v2: clonePoint(original.v2)
+  };
+}
+
+export function cloneLineCoordinates(original: LineCoordinates): LineCoordinates {
+  if (!original) {
+    return original;
+  }
+  return [
+    cloneVector2d(original[0]),
+    cloneVector2d(original[1]),
+    cloneVector2d(original[2]),
+    cloneVector2d(original[3])
+  ]
+}
+
 @Component({
   selector: 'g[ngx-charts-box]',
   template: `
@@ -280,8 +309,7 @@ export class BoxComponent implements OnChanges {
       return [...this.lineCoordinates];
     }
 
-    const lineCoordinates: LineCoordinates = cloneDeep(this.lineCoordinates);
-
+    const lineCoordinates: LineCoordinates = cloneLineCoordinates(this.lineCoordinates);
     lineCoordinates[1].v1.y = lineCoordinates[1].v2.y = lineCoordinates[3].v1.y = lineCoordinates[3].v2.y = lineCoordinates[0].v1.y = lineCoordinates[0].v2.y =
       lineCoordinates[2].v1.y;