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)

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 49e064a31ebeb63477e6038df48b22ff1914d75e..4632082334c57fb74068a8e027db2e7c9f0e3417 100644 (file)
--- 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();