ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts

   1 import {
   2   Component,
   3   ElementRef,
   4   EventEmitter,
   5   Input,
   6   OnChanges,
   7   OnInit,
   8   Output,
   9   ViewChild
  10 } from '@angular/core';
  11
  12 import * as Chart from 'chart.js';
  13 import _ from 'lodash';
  14 import { PluginServiceGlobalRegistrationAndOptions } from 'ng2-charts';
  15
  16 import { CssHelper } from '~/app/shared/classes/css-helper';
  17 import { ChartTooltip } from '~/app/shared/models/chart-tooltip';
  18 import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe';
  19 import { DimlessPipe } from '~/app/shared/pipes/dimless.pipe';
  20
  21 @Component({
  22   selector: 'cd-health-pie',
  23   templateUrl: './health-pie.component.html',
  24   styleUrls: ['./health-pie.component.scss']
  25 })
  26 export class HealthPieComponent implements OnChanges, OnInit {
  27   @ViewChild('chartCanvas', { static: true })
  28   chartCanvasRef: ElementRef;
  29   @ViewChild('chartTooltip', { static: true })
  30   chartTooltipRef: ElementRef;
  31
  32   @Input()
  33   data: any;
  34   @Input()
  35   config = {};
  36   @Input()
  37   isBytesData = false;
  38   @Input()
  39   tooltipFn: any;
  40   @Input()
  41   showLabelAsTooltip = false;
  42   @Output()
  43   prepareFn = new EventEmitter();
  44
  45   chartConfig: any = {
  46     chartType: 'doughnut',
  47     dataset: [
  48       {
  49         label: null,
  50         borderWidth: 0
  51       }
  52     ],
  53     colors: [
  54       {
  55         backgroundColor: [
  56           this.cssHelper.propertyValue('chart-color-green'),
  57           this.cssHelper.propertyValue('chart-color-yellow'),
  58           this.cssHelper.propertyValue('chart-color-orange'),
  59           this.cssHelper.propertyValue('chart-color-red'),
  60           this.cssHelper.propertyValue('chart-color-blue')
  61         ]
  62       }
  63     ],
  64     options: {
  65       cutoutPercentage: 90,
  66       events: ['click', 'mouseout', 'touchstart'],
  67       legend: {
  68         display: true,
  69         position: 'right',
  70         labels: {
  71           boxWidth: 10,
  72           usePointStyle: false
  73         }
  74       },
  75       plugins: {
  76         center_text: true
  77       },
  78       tooltips: {
  79         enabled: true,
  80         displayColors: false,
  81         backgroundColor: this.cssHelper.propertyValue('chart-color-tooltip-background'),
  82         cornerRadius: 0,
  83         bodyFontSize: 14,
  84         bodyFontStyle: '600',
  85         position: 'nearest',
  86         xPadding: 12,
  87         yPadding: 12,
  88         callbacks: {
  89           label: (item: Record<string, any>, data: Record<string, any>) => {
  90             let text = data.labels[item.index];
  91             if (!text.includes('%')) {
  92               text = `${text} (${data.datasets[item.datasetIndex].data[item.index]}%)`;
  93             }
  94             return text;
  95           }
  96         }
  97       },
  98       title: {
  99         display: false
 100       }
 101     }
 102   };
 103
 104   public doughnutChartPlugins: PluginServiceGlobalRegistrationAndOptions[] = [
 105     {
 106       id: 'center_text',
 107       beforeDraw(chart: Chart) {
 108         const cssHelper = new CssHelper();
 109         const defaultFontFamily = 'Helvetica Neue, Helvetica, Arial, sans-serif';
 110         Chart.defaults.global.defaultFontFamily = defaultFontFamily;
 111         const ctx = chart.ctx;
 112         if (!chart.options.plugins.center_text || !chart.data.datasets[0].label) {
 113           return;
 114         }
 115
 116         ctx.save();
 117         const label = chart.data.datasets[0].label.split('\n');
 118
 119         const centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
 120         const centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
 121         ctx.textAlign = 'center';
 122         ctx.textBaseline = 'middle';
 123
 124         ctx.font = `24px ${defaultFontFamily}`;
 125         ctx.fillStyle = cssHelper.propertyValue('chart-color-center-text');
 126         ctx.fillText(label[0], centerX, centerY - 10);
 127
 128         if (label.length > 1) {
 129           ctx.font = `14px ${defaultFontFamily}`;
 130           ctx.fillStyle = cssHelper.propertyValue('chart-color-center-text-description');
 131           ctx.fillText(label[1], centerX, centerY + 10);
 132         }
 133         ctx.restore();
 134       }
 135     }
 136   ];
 137
 138   constructor(
 139     private dimlessBinary: DimlessBinaryPipe,
 140     private dimless: DimlessPipe,
 141     private cssHelper: CssHelper
 142   ) {}
 143
 144   ngOnInit() {
 145     const getStyleTop = (tooltip: any, positionY: number) => {
 146       return positionY + tooltip.caretY - tooltip.height - 10 + 'px';
 147     };
 148
 149     const getStyleLeft = (tooltip: any, positionX: number) => {
 150       return positionX + tooltip.caretX + 'px';
 151     };
 152
 153     const chartTooltip = new ChartTooltip(
 154       this.chartCanvasRef,
 155       this.chartTooltipRef,
 156       getStyleLeft,
 157       getStyleTop
 158     );
 159
 160     chartTooltip.getBody = (body: any) => {
 161       return this.getChartTooltipBody(body);
 162     };
 163
 164     _.merge(this.chartConfig, this.config);
 165
 166     this.prepareFn.emit([this.chartConfig, this.data]);
 167   }
 168
 169   ngOnChanges() {
 170     this.prepareFn.emit([this.chartConfig, this.data]);
 171     this.setChartSliceBorderWidth();
 172   }
 173
 174   private getChartTooltipBody(body: string[]) {
 175     const bodySplit = body[0].split(': ');
 176
 177     if (this.showLabelAsTooltip) {
 178       return bodySplit[0];
 179     }
 180
 181     bodySplit[1] = this.isBytesData
 182       ? this.dimlessBinary.transform(bodySplit[1])
 183       : this.dimless.transform(bodySplit[1]);
 184
 185     return bodySplit.join(': ');
 186   }
 187
 188   private setChartSliceBorderWidth() {
 189     let nonZeroValueSlices = 0;
 190     _.forEach(this.chartConfig.dataset[0].data, function (slice) {
 191       if (slice > 0) {
 192         nonZeroValueSlices += 1;
 193       }
 194     });
 195
 196     this.chartConfig.dataset[0].borderWidth = nonZeroValueSlices > 1 ? 1 : 0;
 197   }
 198 }