From bb2a1b008f2d1a430945dd80c6f97af590f6be48 Mon Sep 17 00:00:00 2001
From: Pedro Gonzalez Gomez <pegonzal@redhat.com>
Date: Tue, 12 Sep 2023 10:08:38 +0200
Subject: [PATCH] mgr/dashboard: align charts of landing page

Fixes: https://tracker.ceph.com/issues/62813
Signed-off-by: Pedro Gonzalez Gomez <pegonzal@redhat.com>
(cherry picked from commit 2c04e9407152896ffd3cd435812df0221fba57c5)
---
 .../dashboard-area-chart.component.ts         | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts
index 49e064a31eb..4632082334c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts
@@ -119,6 +119,7 @@ export class DashboardAreaChartComponent implements OnChanges, AfterViewInit {
       ],
       yAxes: [
         {
+          afterFit: (scaleInstance: any) => (scaleInstance.width = 100),
           gridLines: {
             display: false
           },
@@ -129,7 +130,7 @@ export class DashboardAreaChartComponent implements OnChanges, AfterViewInit {
               if (value === 0) {
                 return null;
               }
-              return this.fillString(this.convertUnits(value));
+              return this.convertUnits(value);
             }
           }
         }
@@ -265,18 +266,6 @@ export class DashboardAreaChartComponent implements OnChanges, AfterViewInit {
     return dataWithUnits;
   }
 
-  private fillString(str: string): string {
-    let maxNumberOfChar: number = 8;
-    let numberOfChars: number = str.length;
-    if (str.length < 4) {
-      maxNumberOfChar = 11;
-    }
-    for (; numberOfChars < maxNumberOfChar; numberOfChars++) {
-      str = '\u00A0' + str;
-    }
-    return str + '\u00A0\u00A0';
-  }
-
   private setChartTicks() {
     if (!this.chart) {
       return;
@@ -305,9 +294,9 @@ export class DashboardAreaChartComponent implements OnChanges, AfterViewInit {
         return null;
       }
       if (!maxValueDataUnits) {
-        return this.fillString(`${value}`);
+        return `${value}`;
       }
-      return this.fillString(`${value} ${maxValueDataUnits}`);
+      return `${value} ${maxValueDataUnits}`;
     };
     this.chartDataUnits = maxValueDataUnits || '';
     this.chart.chart.update();
-- 
2.39.5