X-Git-Url: https://git.proxmox.com/?a=blobdiff_plain;f=ceph%2Fsrc%2Fpybind%2Fmgr%2Fdashboard%2Ffrontend%2Fsrc%2Fapp%2Fceph%2Fdashboard-v3%2Fdashboard-area-chart%2Fdashboard-area-chart.component.ts;h=0a4f2ae1e966737fcf9f256eaddfcdb2d4ec1cfa;hb=05a536ef04248702f72713fd2fe81cb055624784;hp=3da4334210de03d56f9b97dc369fb3b395e1690d;hpb=1e59de90020f1d8d374046ef9cca56ccd4e806e2;p=ceph.git

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts
index 3da433421..0a4f2ae1e 100644
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts
@@ -1,4 +1,4 @@
-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';
@@ -6,35 +6,38 @@ import { DimlessBinaryPerSecondPipe } from '~/app/shared/pipes/dimless-binary-pe
 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: [
       {
@@ -146,21 +149,19 @@ export class DashboardAreaChartComponent implements OnInit, OnChanges, AfterView
     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);
@@ -176,11 +177,8 @@ export class DashboardAreaChartComponent implements OnInit, OnChanges, AfterView
         this.data2[this.data2.length - 1][1]
       ).split(' ');
     }
-  }
-
-  ngAfterViewInit(): void {
-    if (this.data) {
-      this.setChartTicks();
+    if (this.chart) {
+      this.chart.chart.update();
     }
   }
 
@@ -188,16 +186,48 @@ export class DashboardAreaChartComponent implements OnInit, OnChanges, AfterView
     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']);
@@ -220,46 +250,43 @@ export class DashboardAreaChartComponent implements OnInit, OnChanges, AfterView
   }
 
   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();
   }
 }