mgr/dashboard: Round off y-axis value of area chart

- by default y-axos set to 1 for all
- the value round off for area chart is seperated from y-axis ticks
- also fixes a bug where all IOPS y-ticks being repeated 1,1,0,0

The following values are set for now:

IOPS: valueDecimals=0, axisDecimals=1
Latency: valueDecimals=2, axisDecimals=1
Throughput: valueDecimals=2, axisDecimals=1
Consumption: valueDecimals=2, axisDecimals=1

Fixes https://tracker.ceph.com/issues/76191

Signed-off-by: Afreen Misbah <afreen@ibm.com>
(cherry picked from commit a6012c3954830f4b60ef49218d40d4e8ed3bd14c)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.html
index a2e9437cd31b013427f0c1ae1226d918b9d94d3f..b6bccde8964f8ad75e92462acfd0df1e2110b273 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.html
@@ -80,6 +80,7 @@
                      [rawData]="consumptionTrendData"
                      [subHeading]="'Shows last 7 days of storage consumption trends based on recent usage'"
                      [height]="'200px'"
+                     [decimals]="2"
                      [chartType]="'area'">
       </cd-area-chart>
     </div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/area-chart/area-chart.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/area-chart/area-chart.component.ts
index b0b84bae63081ac55f3aa8faeb7210b0c8ebff00..3c42299d49dc82d7c5bec0d8c23920e132668154 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/area-chart/area-chart.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/area-chart/area-chart.component.ts
@@ -41,6 +41,7 @@ export class AreaChartComponent implements OnChanges {
   @Input() rawData!: ChartPoint[];
   @Input() chartKey = '';
   @Input() decimals = DECIMAL;
+  @Input() axisDecimals?: number = 1;
   @Input() customOptions?: Partial<AreaChartOptions>;
   @Input() legendEnabled = true;
   @Input() subHeading = '';
@@ -150,9 +151,9 @@ export class AreaChartComponent implements OnChanges {
           ticks: {
             // Only return numeric part of the formatted string (exclude units)
             formatter: (tick: number | Date): string => {
-              const raw = this.formatValueForChart(tick, labels, divisor);
+              const raw = this.formatValueForChart(tick, labels, divisor, this.axisDecimals);
               const num = parseFloat(raw);
-              return num.toString();
+              return Number.isNaN(num) ? '' : num.toString();
             }
           }
         }
@@ -161,7 +162,7 @@ export class AreaChartComponent implements OnChanges {
         enabled: true,
         showTotal: false,
         valueFormatter: (value: number): string =>
-          (this.formatValueForChart(value, labels, divisor) || value).toString(),
+          (this.formatValueForChart(value, labels, divisor, this.decimals) || value).toString(),
         customHTML: (data, defaultHTML) => this.formatChartTooltip(defaultHTML, data)
       },
       points: {
@@ -204,7 +205,12 @@ export class AreaChartComponent implements OnChanges {
   }
 
   // Uses number formatter service to convert chart value based on unit and divisor.
-  private formatValueForChart(input: number | Date, labels: string[], divisor: number): string {
+  private formatValueForChart(
+    input: number | Date,
+    labels: string[],
+    divisor: number,
+    decimals: number
+  ): string {
     if (typeof input !== 'number') return '';
     return this.numberFormatter.formatFromTo(
       input,
@@ -212,7 +218,7 @@ export class AreaChartComponent implements OnChanges {
       this.chartDisplayUnit,
       divisor,
       labels,
-      this.decimals
+      decimals
     );
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/performance-card/performance-card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/performance-card/performance-card.component.html
index 2f207ea75106b1773e3ed86858c769b0f1a62177..3a10040ca1a58ff07b1c0b5aa933cd70c1b464f9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/performance-card/performance-card.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/performance-card/performance-card.component.html
@@ -54,7 +54,8 @@
             chartTitle="Latency"
             [chartKey]="performanceTypes?.Latency"
             [dataUnit]="metricUnitMap?.latency"
-            [rawData]="chartDataSignal()?.latency">
+            [rawData]="chartDataSignal()?.latency"
+            [decimals]="2">
           </cd-area-chart>
         </div>
         <div cdsCol
@@ -64,7 +65,8 @@
             chartTitle="Throughput"
             [chartKey]="performanceTypes?.Throughput"
             [dataUnit]="metricUnitMap?.throughput"
-            [rawData]="chartDataSignal()?.throughput">
+            [rawData]="chartDataSignal()?.throughput"
+            [decimals]="2">
           </cd-area-chart>
         </div>
       </div>