-import { AfterViewInit, Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, Input, OnChanges, ViewChild } from '@angular/core';
import { CssHelper } from '~/app/shared/classes/css-helper';
import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe';
import { FormatterService } from '~/app/shared/services/formatter.service';
import { BaseChartDirective, PluginServiceGlobalRegistrationAndOptions } from 'ng2-charts';
import { DimlessPipe } from '~/app/shared/pipes/dimless.pipe';
+import { NumberFormatterService } from '~/app/shared/services/number-formatter.service';
@Component({
selector: 'cd-dashboard-area-chart',
templateUrl: './dashboard-area-chart.component.html',
styleUrls: ['./dashboard-area-chart.component.scss']
})
-export class DashboardAreaChartComponent implements OnInit, OnChanges, AfterViewInit {
+export class DashboardAreaChartComponent implements OnChanges, AfterViewInit {
@ViewChild(BaseChartDirective) chart: BaseChartDirective;
@Input()
chartTitle: string;
@Input()
- maxValue?: any;
+ maxValue?: number;
@Input()
dataUnits: string;
@Input()
- data: any;
+ data: Array<[number, string]>;
@Input()
- data2?: any;
+ data2?: Array<[number, string]>;
@Input()
- label: any;
+ label: string;
@Input()
- label2?: any;
+ label2?: string;
currentDataUnits: string;
currentData: number;
currentDataUnits2?: string;
currentData2?: number;
+ chartDataUnits: string;
+
chartData: any = {
dataset: [
{
private dimlessBinary: DimlessBinaryPipe,
private dimlessBinaryPerSecond: DimlessBinaryPerSecondPipe,
private dimlessPipe: DimlessPipe,
- private formatter: FormatterService
+ private formatter: FormatterService,
+ private numberFormatter: NumberFormatterService
) {}
- ngOnInit(): void {
- this.currentData = Number(
- this.chartData.dataset[0].data[this.chartData.dataset[0].data.length - 1].y
- );
- if (this.data2) {
- this.currentData2 = Number(
- this.chartData.dataset[1].data[this.chartData.dataset[1].data.length - 1].y
- );
- }
+ ngOnChanges(): void {
+ this.updateChartData();
}
- ngOnChanges(): void {
+ ngAfterViewInit(): void {
+ this.updateChartData();
+ }
+
+ private updateChartData(): void {
if (this.data) {
this.setChartTicks();
this.chartData.dataset[0].data = this.formatData(this.data);
this.data2[this.data2.length - 1][1]
).split(' ');
}
- }
-
- ngAfterViewInit(): void {
- if (this.data) {
- this.setChartTicks();
+ if (this.chart) {
+ this.chart.chart.update();
}
}
let formattedData = {};
formattedData = array.map((data: any) => ({
x: data[0] * 1000,
- y: Number(this.convertUnits(data[1]).replace(/[^\d,.]+/g, ''))
+ y: Number(this.convertToChartDataUnits(data[1]).replace(/[^\d,.]+/g, ''))
}));
return formattedData;
}
+ private convertToChartDataUnits(data: any): any {
+ let dataWithUnits: string = '';
+ if (this.chartDataUnits) {
+ if (this.dataUnits === 'B') {
+ dataWithUnits = this.numberFormatter.formatBytesFromTo(
+ data,
+ this.dataUnits,
+ this.chartDataUnits
+ );
+ } else if (this.dataUnits === 'B/s') {
+ dataWithUnits = this.numberFormatter.formatBytesPerSecondFromTo(
+ data,
+ this.dataUnits,
+ this.chartDataUnits
+ );
+ } else if (this.dataUnits === 'ms') {
+ dataWithUnits = this.numberFormatter.formatSecondsFromTo(
+ data,
+ this.dataUnits,
+ this.chartDataUnits
+ );
+ } else {
+ dataWithUnits = this.numberFormatter.formatUnitlessFromTo(
+ data,
+ this.dataUnits,
+ this.chartDataUnits
+ );
+ }
+ }
+ return dataWithUnits;
+ }
+
private convertUnits(data: any): any {
- let dataWithUnits: string;
- if (this.dataUnits === 'bytes') {
+ let dataWithUnits: string = '';
+ if (this.dataUnits === 'B') {
dataWithUnits = this.dimlessBinary.transform(data);
- } else if (this.dataUnits === 'bytesPerSecond') {
+ } else if (this.dataUnits === 'B/s') {
dataWithUnits = this.dimlessBinaryPerSecond.transform(data);
} else if (this.dataUnits === 'ms') {
dataWithUnits = this.formatter.format_number(data, 1000, ['ms', 's']);
}
private setChartTicks() {
- if (this.chart && this.maxValue) {
- let [maxValue, maxValueDataUnits] = this.convertUnits(this.maxValue).split(' ');
- this.chart.chart.options.scales.yAxes[0].ticks.suggestedMax = maxValue;
- this.chart.chart.options.scales.yAxes[0].ticks.suggestedMin = 0;
- this.chart.chart.options.scales.yAxes[0].ticks.stepSize = Number((maxValue / 2).toFixed(0));
- this.chart.chart.options.scales.yAxes[0].ticks.callback = (value: any) => {
- if (value === 0) {
- return null;
- }
- return this.fillString(`${value} ${maxValueDataUnits}`);
- };
- this.chart.chart.update();
- } else if (this.chart && this.data) {
- let maxValue = 0,
- maxValueDataUnits = '';
+ if (!this.chart) {
+ return;
+ }
+
+ let maxValue = 0;
+ let maxValueDataUnits = '';
+ let extraRoom = 1.2;
+
+ if (this.maxValue) {
+ extraRoom = 1.0;
+ [maxValue, maxValueDataUnits] = this.convertUnits(this.maxValue).split(' ');
+ } else if (this.data) {
+ extraRoom = 1.2;
let maxValueData = Math.max(...this.data.map((values: any) => values[1]));
if (this.data2) {
- var maxValueData2 = Math.max(...this.data2.map((values: any) => values[1]));
- [maxValue, maxValueDataUnits] = this.convertUnits(
- Math.max(maxValueData, maxValueData2)
- ).split(' ');
+ let maxValueData2 = Math.max(...this.data2.map((values: any) => values[1]));
+ maxValue = Math.max(maxValueData, maxValueData2);
} else {
- [maxValue, maxValueDataUnits] = this.convertUnits(Math.max(maxValueData)).split(' ');
+ maxValue = maxValueData;
}
-
- this.chart.chart.options.scales.yAxes[0].ticks.suggestedMax = maxValue * 1.2;
- this.chart.chart.options.scales.yAxes[0].ticks.suggestedMin = 0;
- this.chart.chart.options.scales.yAxes[0].ticks.stepSize = Number(
- ((maxValue * 1.2) / 2).toFixed(0)
- );
- this.chart.chart.options.scales.yAxes[0].ticks.callback = (value: any) => {
- if (value === 0) {
- return null;
- }
- if (!maxValueDataUnits) {
- return this.fillString(`${value}`);
- }
- return this.fillString(`${value} ${maxValueDataUnits}`);
- };
- this.chart.chart.update();
+ [maxValue, maxValueDataUnits] = this.convertUnits(maxValue).split(' ');
}
+
+ const yAxesTicks = this.chart.chart.options.scales.yAxes[0].ticks;
+ yAxesTicks.suggestedMax = maxValue * extraRoom;
+ yAxesTicks.suggestedMin = 0;
+ yAxesTicks.stepSize = Number((yAxesTicks.suggestedMax / 2).toFixed(0));
+ yAxesTicks.callback = (value: any) => {
+ if (value === 0) {
+ return null;
+ }
+ if (!maxValueDataUnits) {
+ return this.fillString(`${value}`);
+ }
+ return this.fillString(`${value} ${maxValueDataUnits}`);
+ };
+ this.chartDataUnits = maxValueDataUnits || '';
+ this.chart.chart.update();
}
}
projects / ceph.git / blobdiff