From 66f1e2b207a4690f1998a3f43f08ac34560241bb Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Mon, 17 Jan 2022 13:40:49 +0200 Subject: [PATCH] update ngx-charts --- .../combo-chart/combo-chart.component.ts | 69 ++++++++++--------- .../combo-series-vertical.component.ts | 36 ++++++---- .../admin/components/combo-chart/models.ts | 11 +++ .../license-information-screen.component.ts | 11 +-- package.json | 2 +- yarn.lock | 21 ++++-- 6 files changed, 95 insertions(+), 55 deletions(-) create mode 100644 apps/red-ui/src/app/modules/admin/components/combo-chart/models.ts diff --git a/apps/red-ui/src/app/modules/admin/components/combo-chart/combo-chart.component.ts b/apps/red-ui/src/app/modules/admin/components/combo-chart/combo-chart.component.ts index fff29fbc4..0f949194c 100644 --- a/apps/red-ui/src/app/modules/admin/components/combo-chart/combo-chart.component.ts +++ b/apps/red-ui/src/app/modules/admin/components/combo-chart/combo-chart.component.ts @@ -12,7 +12,18 @@ import { import { curveLinear } from 'd3-shape'; import { scaleBand, scaleLinear, scalePoint, scaleTime } from 'd3-scale'; -import { BaseChartComponent, calculateViewDimensions, ColorHelper, LineSeriesComponent, ViewDimensions } from '@swimlane/ngx-charts'; +import { + BaseChartComponent, + calculateViewDimensions, + Color, + ColorHelper, + LegendPosition, + LineSeriesComponent, + Orientation, + ScaleType, + ViewDimensions, +} from '@swimlane/ngx-charts'; +import { ILineChartSeries } from './models'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -25,7 +36,7 @@ export class ComboChartComponent extends BaseChartComponent { @Input() curve: any = curveLinear; @Input() legend = false; @Input() legendTitle = 'Legend'; - @Input() legendPosition = 'right'; + @Input() legendPosition: LegendPosition = LegendPosition.Right; @Input() xAxis; @Input() yAxis; @Input() showXAxisLabel; @@ -38,33 +49,33 @@ export class ComboChartComponent extends BaseChartComponent { @Input() gradient: boolean; @Input() showGridLines = true; @Input() activeEntries: any[] = []; - @Input() schemeType: string; + @Input() schemeType: ScaleType; @Input() xAxisTickFormatting: any; @Input() yAxisTickFormatting: any; @Input() yRightAxisTickFormatting: any; @Input() roundDomains = false; - @Input() colorSchemeLine: any; + @Input() colorSchemeLine: Color; @Input() autoScale; - @Input() lineChart: any; + @Input() lineChart: ILineChartSeries[]; @Input() yLeftAxisScaleFactor: any; @Input() yRightAxisScaleFactor: any; @Input() rangeFillOpacity: number; @Input() animations = true; @Input() noBarWhenZero = true; - @Output() activate: EventEmitter = new EventEmitter(); - @Output() deactivate: EventEmitter = new EventEmitter(); + @Output() activate = new EventEmitter<{ value; entries: unknown[] }>(); + @Output() deactivate = new EventEmitter<{ value; entries: unknown[] }>(); - @ContentChild('tooltipTemplate') tooltipTemplate: TemplateRef; - @ContentChild('seriesTooltipTemplate') seriesTooltipTemplate: TemplateRef; + @ContentChild('tooltipTemplate') tooltipTemplate: TemplateRef; + @ContentChild('seriesTooltipTemplate') seriesTooltipTemplate: TemplateRef; @ViewChild(LineSeriesComponent) lineSeriesComponent: LineSeriesComponent; dims: ViewDimensions; xScale: any; yScale: any; - xDomain: any; - yDomain: any; + xDomain: string[] | number[]; + yDomain: string[] | number[]; transform: string; colors: ColorHelper; colorsLine: ColorHelper; @@ -72,19 +83,19 @@ export class ComboChartComponent extends BaseChartComponent { xAxisHeight = 0; yAxisWidth = 0; legendOptions: any; - scaleType = 'linear'; + scaleType: ScaleType = ScaleType.Linear; xScaleLine; yScaleLine; xDomainLine; yDomainLine; seriesDomain; scaledAxis; - combinedSeries; + combinedSeries: ILineChartSeries[]; xSet; filteredDomain; hoveredVertical; - yOrientLeft = 'left'; - yOrientRight = 'right'; + yOrientLeft: Orientation = Orientation.Left; + yOrientRight: Orientation = Orientation.Right; legendSpacing = 0; bandwidth: number; barPadding = 8; @@ -176,15 +187,11 @@ export class ComboChartComponent extends BaseChartComponent { return this.combinedSeries.map(d => d.name); } - isDate(value): boolean { - if (value instanceof Date) { - return true; - } - - return false; + isDate(value): value is Date { + return value instanceof Date; } - getScaleType(values): string { + getScaleType(values): ScaleType { let date = true; let num = true; @@ -199,16 +206,16 @@ export class ComboChartComponent extends BaseChartComponent { } if (date) { - return 'time'; + return ScaleType.Time; } if (num) { - return 'linear'; + return ScaleType.Linear; } - return 'ordinal'; + return ScaleType.Ordinal; } getXDomainLine(): any[] { - let values = []; + let values: number[] = []; for (const results of this.lineChart) { for (const d of results.series) { @@ -239,7 +246,7 @@ export class ComboChartComponent extends BaseChartComponent { } getYDomainLine(): any[] { - const domain = []; + const domain: number[] = []; for (const results of this.lineChart) { for (const d of results.series) { @@ -263,7 +270,7 @@ export class ComboChartComponent extends BaseChartComponent { const max = Math.max(...domain); if (this.yRightAxisScaleFactor) { const minMax = this.yRightAxisScaleFactor(min, max); - return [Math.min(0, minMax.min), minMax.max]; + return [Math.min(0, minMax.min as number), minMax.max]; } else { min = Math.min(0, min); return [min, max]; @@ -317,12 +324,12 @@ export class ComboChartComponent extends BaseChartComponent { } getYDomain() { - const values = this.results.map(d => d.value); + const values: number[] = this.results.map(d => d.value); const min = Math.min(0, ...values); const max = Math.max(...values); if (this.yLeftAxisScaleFactor) { const minMax = this.yLeftAxisScaleFactor(min, max); - return [Math.min(0, minMax.min), minMax.max]; + return [Math.min(0, minMax.min as number), minMax.max]; } else { return [min, max]; } @@ -333,7 +340,7 @@ export class ComboChartComponent extends BaseChartComponent { } setColors(): void { - let domain; + let domain: number[] | string[]; if (this.schemeType === 'ordinal') { domain = this.xDomain; } else { diff --git a/apps/red-ui/src/app/modules/admin/components/combo-chart/combo-series-vertical.component.ts b/apps/red-ui/src/app/modules/admin/components/combo-chart/combo-series-vertical.component.ts index 6289f88d6..483125c2a 100644 --- a/apps/red-ui/src/app/modules/admin/components/combo-chart/combo-series-vertical.component.ts +++ b/apps/red-ui/src/app/modules/admin/components/combo-chart/combo-series-vertical.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'; import { animate, style, transition, trigger } from '@angular/animations'; -import { formatLabel } from '@swimlane/ngx-charts'; +import { Bar, BarOrientation, formatLabel, PlacementTypes, StyleTypes } from '@swimlane/ngx-charts'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -17,7 +17,7 @@ import { formatLabel } from '@swimlane/ngx-charts'; [fill]="bar.color" [stops]="bar.gradientStops" [data]="bar.data" - [orientation]="'vertical'" + [orientation]="orientations.Vertical" [roundEdges]="bar.roundEdges" [gradient]="gradient" [isActive]="isActive(bar.data)" @@ -27,8 +27,8 @@ import { formatLabel } from '@swimlane/ngx-charts'; (deactivate)="deactivate.emit($event)" ngx-tooltip [tooltipDisabled]="tooltipDisabled" - [tooltipPlacement]="0" - [tooltipType]="1" + [tooltipPlacement]="tooltipPlacements.Top" + [tooltipType]="tooltipTypes.tooltip" [tooltipTitle]="bar.tooltipText" > `, @@ -67,6 +67,9 @@ export class ComboSeriesVerticalComponent implements OnChanges { bars: any; x: any; y: any; + readonly tooltipTypes = StyleTypes; + readonly tooltipPlacements = PlacementTypes; + readonly orientations = BarOrientation; ngOnChanges(): void { this.update(); @@ -91,7 +94,7 @@ export class ComboSeriesVerticalComponent implements OnChanges { const formattedLabel = formatLabel(label); const roundEdges = this.type === 'standard'; - const bar: any = { + const bar: Bar = { value, label, roundEdges, @@ -101,8 +104,15 @@ export class ComboSeriesVerticalComponent implements OnChanges { height: 0, x: 0, y: 0, + ariaLabel: label, + tooltipText: label, + color: undefined, + gradientStops: undefined, }; + let offset0 = d0; + let offset1 = offset0 + value; + if (this.type === 'standard') { bar.height = Math.abs(this.yScale(value) - this.yScale(0)); bar.x = this.xScale(label); @@ -113,18 +123,14 @@ export class ComboSeriesVerticalComponent implements OnChanges { bar.y = this.yScale(value); } } else if (this.type === 'stacked') { - const offset0 = d0; - const offset1 = offset0 + value; d0 += value; bar.height = this.yScale(offset0) - this.yScale(offset1); bar.x = 0; bar.y = this.yScale(offset1); - bar.offset0 = offset0; - bar.offset1 = offset1; + // bar.offset0 = offset0; + // bar.offset1 = offset1; } else if (this.type === 'normalized') { - let offset0 = d0; - let offset1 = offset0 + value; d0 += value; if (total > 0) { @@ -138,8 +144,8 @@ export class ComboSeriesVerticalComponent implements OnChanges { bar.height = this.yScale(offset0) - this.yScale(offset1); bar.x = 0; bar.y = this.yScale(offset1); - bar.offset0 = offset0; - bar.offset1 = offset1; + // bar.offset0 = offset0; + // bar.offset1 = offset1; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore value = (offset1 - offset0).toFixed(2) + '%'; @@ -152,8 +158,8 @@ export class ComboSeriesVerticalComponent implements OnChanges { bar.color = this.colors.getColor(value); bar.gradientStops = this.colors.getLinearGradientStops(value); } else { - bar.color = this.colors.getColor(bar.offset1); - bar.gradientStops = this.colors.getLinearGradientStops(bar.offset1, bar.offset0); + bar.color = this.colors.getColor(offset1); + bar.gradientStops = this.colors.getLinearGradientStops(offset1, offset0); } } diff --git a/apps/red-ui/src/app/modules/admin/components/combo-chart/models.ts b/apps/red-ui/src/app/modules/admin/components/combo-chart/models.ts new file mode 100644 index 000000000..7358f8e55 --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/components/combo-chart/models.ts @@ -0,0 +1,11 @@ +export interface ISeries { + name: number; + value: number; + min: number; + max: number; +} + +export interface ILineChartSeries { + name: string; + series: ISeries[]; +} diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts index 00006cde9..35abc60ff 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts @@ -8,6 +8,7 @@ import { UserService } from '@services/user.service'; import { RouterHistoryService } from '@services/router-history.service'; import { LicenseReportService } from '../../services/licence-report.service'; import { ILicenseReport } from '@red/domain'; +import { Color, ScaleType } from '@swimlane/ngx-charts'; @Component({ selector: 'redaction-license-information-screen', @@ -31,14 +32,16 @@ export class LicenseInformationScreenComponent implements OnInit { analysisPercentageOfLicense = 100; barChart: any[]; lineChartSeries: any[] = []; - lineChartScheme = { + lineChartScheme: Color = { + name: 'Line chart scheme', selectable: true, - group: 'Ordinal', + group: ScaleType.Ordinal, domain: ['#dd4d50', '#5ce594', '#0389ec'], }; - comboBarScheme = { + comboBarScheme: Color = { + name: 'Combo bar scheme', selectable: true, - group: 'Ordinal', + group: ScaleType.Ordinal, domain: ['#0389ec'], }; diff --git a/package.json b/package.json index 556a0ac6d..4ed7d428b 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "@ngx-translate/http-loader": "^7.0.0", "@nrwl/angular": "13.4.5", "@pdftron/webviewer": "8.2.0", - "@swimlane/ngx-charts": "^17.0.1", + "@swimlane/ngx-charts": "^20.0.1", "file-saver": "^2.0.5", "jwt-decode": "^3.1.2", "keycloak-angular": "^9.0.0", diff --git a/yarn.lock b/yarn.lock index 771524a79..0d56cf786 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2350,11 +2350,12 @@ dependencies: "@sinonjs/commons" "^1.7.0" -"@swimlane/ngx-charts@^17.0.1": - version "17.0.1" - resolved "https://registry.yarnpkg.com/@swimlane/ngx-charts/-/ngx-charts-17.0.1.tgz#7d86d4725f864d798659c0c0a2eabb6f9f60982c" - integrity sha512-4pvSznkFo/vM59YUnXH0Y/f8n9cUBBelHuh7UoNlMchl1jI083eFk0zK5fEL2sF3c+vvEpBeYB523GxWvWoifw== +"@swimlane/ngx-charts@^20.0.1": + version "20.0.1" + resolved "https://registry.yarnpkg.com/@swimlane/ngx-charts/-/ngx-charts-20.0.1.tgz#6bcbf31b1ba88a53bc5796ed23e7ddf65189a493" + integrity sha512-gceTOLm4vZHBvNPyNAFqQf96xM+NLy56nRGX1cGR0dBQJq/0PtexrbEttg3AiZy5DvyXNF6rNdeZynUMZUi61Q== dependencies: + "@types/d3-shape" "^2.0.0" d3-array "^2.9.1" d3-brush "^2.1.0" d3-color "^2.0.0" @@ -2433,6 +2434,18 @@ dependencies: cypress "*" +"@types/d3-path@^2": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-2.0.1.tgz#ca03dfa8b94d8add97ad0cd97e96e2006b4763cb" + integrity sha512-6K8LaFlztlhZO7mwsZg7ClRsdLg3FJRzIIi6SZXDWmmSJc2x8dd2VkESbLXdk3p8cuvz71f36S0y8Zv2AxqvQw== + +"@types/d3-shape@^2.0.0": + version "2.1.3" + resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-2.1.3.tgz#35d397b9e687abaa0de82343b250b9897b8cacf3" + integrity sha512-HAhCel3wP93kh4/rq+7atLdybcESZ5bRHDEZUojClyZWsRuEMo3A52NGYJSh48SxfxEU6RZIVbZL2YFZ2OAlzQ== + dependencies: + "@types/d3-path" "^2" + "@types/eslint-scope@^3.7.0": version "3.7.1" resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.1.tgz#8dc390a7b4f9dd9f1284629efce982e41612116e"