Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-4665 - "Total pages" caption in license diagram overlaps the numbers

Browse Source
This commit is contained in:
Valentin Mihai 2022-08-07 20:32:14 +03:00
parent 340d268a9e
commit 9608f55765
5 changed files with 116 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.html
View File

@ -31,7 +31,8 @@
[tickFormatting]="yAxisTickFormatting"
[yOrient]="yOrientLeft"
[yScale]="yScale"
ngx-charts-y-axis
[valuesMaxLength]="getValuesMaxLength(1)"
red-ngx-charts-y-axis
></svg:g>
<svg:g
(dimensionsChanged)="updateYAxisWidth($event)"
@ -43,7 +44,8 @@
[tickFormatting]="yRightAxisTickFormatting"
[yOrient]="yOrientRight"
[yScale]="yScaleLine"
ngx-charts-y-axis
[valuesMaxLength]="getValuesMaxLength(0)"
red-ngx-charts-y-axis
></svg:g>
<svg:g
(activate)="onActivate($event)"

7
apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.ts
View File

@ -107,7 +107,7 @@ export class ComboChartComponent extends BaseChartComponent {
if (!this.yAxis) {
this.legendSpacing = 0;
} else if (this.showYAxisLabel && this.yAxis) {
this.legendSpacing = 100;
this.legendSpacing = 150;
} else {
this.legendSpacing = 40;
}
@ -343,6 +343,11 @@ export class ComboChartComponent extends BaseChartComponent {
return opts;
}
getValuesMaxLength(index: number): number {
const values = this.lineChart[index].series.map(s => s.value);
return Math.max(...values).toString().length;
}
updateLineWidth(width): void {
this.bandwidth = width;
this.scaleLines();

1
apps/red-ui/src/app/modules/admin/screens/license/combo-chart/index.ts
View File

@ -1,2 +1,3 @@
export * from './combo-chart.component';
export * from './combo-series-vertical.component';
export * from './y-axis.component';

103
apps/red-ui/src/app/modules/admin/screens/license/combo-chart/y-axis.component.ts Normal file
View File

@ -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: `
<svg:g [attr.class]="yAxisClassName" [attr.transform]="transform">
<svg:g
ngx-charts-y-axis-ticks
*ngIf="yScale"
[trimTicks]="trimTicks"
[maxTickLength]="maxTickLength"
[tickFormatting]="tickFormatting"
[tickArguments]="tickArguments"
[tickValues]="ticks"
[tickStroke]="tickStroke"
[scale]="yScale"
[orient]="yOrient"
[showGridLines]="showGridLines"
[gridLineWidth]="dims.width"
[referenceLines]="referenceLines"
[showRefLines]="showRefLines"
[showRefLabels]="showRefLabels"
[height]="dims.height"
(dimensionsChanged)="emitTicksWidth($event)"
/>
<svg:g
ngx-charts-axis-label
*ngIf="showLabel"
[label]="labelText"
[offset]="labelOffset"
[orient]="yOrient"
[height]="dims.height"
[width]="dims.width"
></svg:g>
</svg:g>
`,
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);
}
}
}

3
apps/red-ui/src/app/modules/admin/screens/license/license.module.ts
View File

@ -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),