From f014e3c30c4bff7530396d148cd269d421582868 Mon Sep 17 00:00:00 2001 From: alfonsomthd Date: Mon, 29 Oct 2018 21:24:03 +0100 Subject: [PATCH] mgr/dashboard: Landing Page: chart improvements - Updated chart colors. - Added border for chart slices (visual impairment help). - Adjusted chart vertical centering. MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Fixes: https://tracker.ceph.com/issues/35691 Signed-off-by: Alfonso Martínez --- .../health-pie/health-pie-color.enum.ts | 8 +++++ .../health-pie/health-pie.component.spec.ts | 14 ++++++++ .../health-pie/health-pie.component.ts | 36 +++++++++++++------ .../info-card/info-card.component.scss | 9 +++++ 4 files changed, 56 insertions(+), 11 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie-color.enum.ts 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 index 000000000000..ce6e931c5a19 --- /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 aa02082403b4..7e11a265dd87 100644 --- 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 21de404a1440..f868f62d369c 100644 --- 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 0523e9160b64..0f39efb02ce2 100644 --- 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) { -- 2.47.3