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