mgr/dashboard: Landing Page: chart improvements

- Updated chart colors.
- Added border for chart slices (visual impairment help).
- Adjusted chart vertical centering.

Fixes: https://tracker.ceph.com/issues/35691
Signed-off-by: Alfonso Martínez <almartin@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie-color.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie-color.enum.ts
new file mode 100644 (file)
index 0000000..ce6e931
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie-color.enum.ts
@@ -0,0 +1,8 @@
+export enum HealthPieColor {
+  // Names inspired by https://encycolorpedia.com
+  MEDIUM_LIGHT_SHADE_PINK_RED = '#ff7592',
+  MEDIUM_DARK_SHADE_CYAN_BLUE = '#1d699d',
+  LIGHT_SHADE_BROWN = '#fcd0a1',
+  MEDIUM_DARK_SHADE_BLUE_MAGENTA = '#564d65',
+  SHADE_GREEN_CYAN = '#2cda9d'
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.spec.ts
index aa02082403b40c5f4c26e34bb095b7b0c759bb8c..7e11a265dd87917175a86e07d1975614be880e00 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.spec.ts
@@ -52,4 +52,18 @@ describe('HealthPieComponent', () => {
 
     expect(component.chart.chartType).toEqual('pie');
   });
+
+  it('Remove slice border if there is only one slice with non zero value', () => {
+    component.chart.dataset[0].data = [48, 0, 0, 0];
+    component.ngOnChanges();
+
+    expect(component.chart.dataset[0].borderWidth).toEqual(0);
+  });
+
+  it('Keep slice border if there is more than one slice with non zero value', () => {
+    component.chart.dataset[0].data = [48, 0, 1, 0];
+    component.ngOnChanges();
+
+    expect(component.chart.dataset[0].borderWidth).toEqual(1);
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts
index 21de404a14400f4db9e929f1b840ebb8a1e95499..f868f62d369caaa9da33a94272488ded095a3336 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts
@@ -10,9 +10,11 @@ import {
 } from '@angular/core';
 
 import * as Chart from 'chart.js';
+import * as _ from 'lodash';
 
 import { ChartTooltip } from '../../../shared/models/chart-tooltip';
 import { DimlessBinaryPipe } from '../../../shared/pipes/dimless-binary.pipe';
+import { HealthPieColor } from './health-pie-color.enum';
 
 @Component({
   selector: 'cd-health-pie',
@@ -56,12 +58,7 @@ export class HealthPieComponent implements OnChanges, OnInit {
       tooltips: {
         enabled: false
       }
-    },
-    colors: [
-      {
-        borderColor: 'transparent'
-      }
-    ]
+    }
   };
 
   constructor(private dimlessBinary: DimlessBinaryPipe) {}
@@ -122,13 +119,15 @@ export class HealthPieComponent implements OnChanges, OnInit {
 
     this.chart.options.legend.display = this.displayLegend;
 
-    const redColor = '#FF6384';
-    const blueColor = '#36A2EB';
-    const yellowColor = '#FFCD56';
-    const greenColor = '#4BC0C0';
     this.chart.colors = [
       {
-        backgroundColor: [redColor, blueColor, yellowColor, greenColor]
+        backgroundColor: [
+          HealthPieColor.MEDIUM_LIGHT_SHADE_PINK_RED,
+          HealthPieColor.MEDIUM_DARK_SHADE_CYAN_BLUE,
+          HealthPieColor.LIGHT_SHADE_BROWN,
+          HealthPieColor.SHADE_GREEN_CYAN,
+          HealthPieColor.MEDIUM_DARK_SHADE_BLUE_MAGENTA
+        ]
       }
     ];
 
@@ -137,6 +136,8 @@ export class HealthPieComponent implements OnChanges, OnInit {
 
   ngOnChanges() {
     this.prepareFn.emit([this.chart, this.data]);
+
+    this.setChartSliceBorderWidth(this.chart.dataset[0]);
   }
 
   private getChartTooltipBody(body) {
@@ -159,4 +160,17 @@ export class HealthPieComponent implements OnChanges, OnInit {
       this.chart.chartType = chartTypes[0];
     }
   }
+
+  private setChartSliceBorderWidth(dataset) {
+    let nonZeroValueSlices = 0;
+    _.forEach(dataset.data, function(slice) {
+      if (slice > 0) {
+        nonZeroValueSlices += 1;
+      }
+    });
+
+    if (nonZeroValueSlices > 1) {
+      this.chart.dataset[0].borderWidth = 1;
+    }
+  }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
index 0523e9160b64dc8abe0ecddbf8c56b558a1e6d46..0f39efb02ce2a3d4d1926d9e031890a443f4ef5a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
@@ -43,6 +43,7 @@ $logs-text-font-size: $card-font-min-size;
 }
 
 .content-chart {
+  margin-top: -0.7vw;
   position: unset;
   top: unset;
   left: unset;
@@ -99,12 +100,20 @@ $logs-text-font-size: $card-font-min-size;
   .card-medium {
     min-height: $card-medium-height * 1.5;
   }
+
+  .content-chart {
+    margin-top: -0.6vw;
+  }
 }
 
 @media (max-width: 991px) {
   .card {
     min-height: $card-height * 2;
   }
+
+  .content-chart {
+    margin-top: -0.3vw;
+  }
 }
 
 @media (max-width: 991px) and (min-width: 768px) {