From 9608f557656fd5a796ba463423817a86c7f79bf0 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Sun, 7 Aug 2022 20:32:14 +0300 Subject: [PATCH] RED-4665 - "Total pages" caption in license diagram overlaps the numbers --- .../combo-chart/combo-chart.component.html | 6 +- .../combo-chart/combo-chart.component.ts | 7 +- .../screens/license/combo-chart/index.ts | 1 + .../license/combo-chart/y-axis.component.ts | 103 ++++++++++++++++++ .../admin/screens/license/license.module.ts | 3 +- 5 files changed, 116 insertions(+), 4 deletions(-) create mode 100644 apps/red-ui/src/app/modules/admin/screens/license/combo-chart/y-axis.component.ts diff --git a/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.html b/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.html index 716403b87..b1f569bc3 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.html @@ -31,7 +31,8 @@ [tickFormatting]="yAxisTickFormatting" [yOrient]="yOrientLeft" [yScale]="yScale" - ngx-charts-y-axis + [valuesMaxLength]="getValuesMaxLength(1)" + red-ngx-charts-y-axis > s.value); + return Math.max(...values).toString().length; + } + updateLineWidth(width): void { this.bandwidth = width; this.scaleLines(); diff --git a/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/index.ts b/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/index.ts index 2a0ab4f22..07ef678f5 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/index.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/index.ts @@ -1,2 +1,3 @@ export * from './combo-chart.component'; export * from './combo-series-vertical.component'; +export * from './y-axis.component'; diff --git a/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/y-axis.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/y-axis.component.ts new file mode 100644 index 000000000..91690fea4 --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/y-axis.component.ts @@ -0,0 +1,103 @@ +import { Component, Input, Output, EventEmitter, OnChanges, ViewChild, SimpleChanges, ChangeDetectionStrategy } from '@angular/core'; +import { Orientation, ViewDimensions, YAxisTicksComponent } from '@swimlane/ngx-charts'; + +@Component({ + selector: 'g[red-ngx-charts-y-axis]', + template: ` + + + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class YAxisComponent implements OnChanges { + @Input() yScale; + @Input() dims: ViewDimensions; + @Input() trimTicks: boolean; + @Input() maxTickLength: number; + @Input() tickFormatting; + @Input() ticks: any[]; + @Input() showGridLines = false; + @Input() showLabel: boolean; + @Input() labelText: string; + @Input() yAxisTickCount: any; + @Input() yOrient: Orientation = Orientation.Left; + @Input() referenceLines; + @Input() showRefLines: boolean; + @Input() showRefLabels: boolean; + @Input() yAxisOffset = 0; + @Input() valuesMaxLength = 0; + @Output() dimensionsChanged = new EventEmitter(); + + yAxisClassName = 'y axis'; + tickArguments: number[]; + offset: number; + transform: string; + labelOffset = 15; + fill = 'none'; + stroke = '#CCC'; + tickStroke = '#CCC'; + strokeWidth = 1; + padding = 5; + + @ViewChild(YAxisTicksComponent) ticksComponent: YAxisTicksComponent; + + ngOnChanges(changes: SimpleChanges): void { + this.update(); + } + + update(): void { + this.offset = -(this.yAxisOffset + this.padding); + if (this.yOrient === Orientation.Right) { + this.labelOffset = 65 + (this.valuesMaxLength + this.valuesMaxLength / 4) * 5; + this.transform = `translate(${this.offset + this.dims.width} , 0)`; + } else { + this.transform = `translate(${this.offset} , 0)`; + } + + if (this.yAxisTickCount !== undefined) { + this.tickArguments = [this.yAxisTickCount]; + } + } + + emitTicksWidth({ width }): void { + if (width !== this.labelOffset && this.yOrient === Orientation.Right) { + this.labelOffset = width + this.labelOffset + 300; + setTimeout(() => { + this.dimensionsChanged.emit({ width }); + }, 0); + } else if (width !== this.labelOffset) { + this.labelOffset = width + (this.valuesMaxLength + this.valuesMaxLength / 4) * 5; + setTimeout(() => { + this.dimensionsChanged.emit({ width }); + }, 0); + } + } +} diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts b/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts index 5830ecd7d..3ce6911f9 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts +++ b/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts @@ -7,7 +7,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { MatSelectModule } from '@angular/material/select'; import { IqserListingModule } from '@iqser/common-ui'; import { NgxChartsModule } from '@swimlane/ngx-charts'; -import { ComboChartComponent, ComboSeriesVerticalComponent } from './combo-chart'; +import { ComboChartComponent, ComboSeriesVerticalComponent, YAxisComponent } from './combo-chart'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; @@ -25,6 +25,7 @@ const routes: Routes = [ LicenseChartComponent, ComboChartComponent, ComboSeriesVerticalComponent, + YAxisComponent, ], imports: [ RouterModule.forChild(routes),