From 5672265cb98eba2eb032699448d46fb8688bbeb7 Mon Sep 17 00:00:00 2001 From: PhilFlash Date: Fri, 11 Nov 2022 09:44:56 +0100 Subject: [PATCH] box.component.ts: replace cloneDeep from rfdc by code proposed by bryanrideshark in pr #1763 (with rfdc, there is the same message like clone-deep: CommonJS or AMD dependencies can cause optimization bailouts) --- projects/swimlane/ngx-charts/ng-package.json | 4 +- projects/swimlane/ngx-charts/package.json | 4 +- .../lib/box-chart/box-chart.component.spec.ts | 64 +++++++++++++++++++ .../src/lib/box-chart/box.component.ts | 54 ++++++++++++---- 4 files changed, 109 insertions(+), 17 deletions(-) diff --git a/projects/swimlane/ngx-charts/ng-package.json b/projects/swimlane/ngx-charts/ng-package.json index 246446664..eb74bb846 100644 --- 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 index 1155f8650..5a3a21002 100644 --- 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 index 783fdb4e5..480d1c2e7 100644 --- 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('', () => { 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 index c839ee244..165939ebd 100644 --- 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;