ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.ts

   1 import { Component, ElementRef, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
   2 import { Input } from '@angular/core';
   3
   4 import { ChartTooltip } from '../../models/chart-tooltip';
   5 import { DimlessBinaryPipe } from '../../pipes/dimless-binary.pipe';
   6
   7 @Component({
   8   selector: 'cd-sparkline',
   9   templateUrl: './sparkline.component.html',
  10   styleUrls: ['./sparkline.component.scss']
  11 })
  12 export class SparklineComponent implements OnInit, OnChanges {
  13   @ViewChild('sparkCanvas')
  14   chartCanvasRef: ElementRef;
  15   @ViewChild('sparkTooltip')
  16   chartTooltipRef: ElementRef;
  17
  18   @Input()
  19   data: any;
  20   @Input()
  21   style = {
  22     height: '30px',
  23     width: '100px'
  24   };
  25   @Input()
  26   isBinary: boolean;
  27
  28   public colors: Array<any> = [
  29     {
  30       backgroundColor: 'rgba(40,140,234,0.2)',
  31       borderColor: 'rgba(40,140,234,1)',
  32       pointBackgroundColor: 'rgba(40,140,234,1)',
  33       pointBorderColor: '#fff',
  34       pointHoverBackgroundColor: '#fff',
  35       pointHoverBorderColor: 'rgba(40,140,234,0.8)'
  36     }
  37   ];
  38
  39   options = {
  40     animation: {
  41       duration: 0
  42     },
  43     responsive: true,
  44     maintainAspectRatio: false,
  45     legend: {
  46       display: false
  47     },
  48     elements: {
  49       line: {
  50         borderWidth: 1
  51       }
  52     },
  53     tooltips: {
  54       enabled: false,
  55       mode: 'index',
  56       intersect: false,
  57       custom: undefined,
  58       callbacks: {
  59         label: (tooltipItem) => {
  60           if (this.isBinary) {
  61             return this.dimlessBinaryPipe.transform(tooltipItem.yLabel);
  62           } else {
  63             return tooltipItem.yLabel;
  64           }
  65         }
  66       }
  67     },
  68     scales: {
  69       yAxes: [
  70         {
  71           display: false
  72         }
  73       ],
  74       xAxes: [
  75         {
  76           display: false
  77         }
  78       ]
  79     }
  80   };
  81
  82   public datasets: Array<any> = [
  83     {
  84       data: []
  85     }
  86   ];
  87
  88   public labels: Array<any> = [];
  89
  90   constructor(private dimlessBinaryPipe: DimlessBinaryPipe) {}
  91
  92   ngOnInit() {
  93     const getStyleTop = (tooltip) => {
  94       return tooltip.caretY - tooltip.height - tooltip.yPadding - 5 + 'px';
  95     };
  96
  97     const getStyleLeft = (tooltip, positionX) => {
  98       return positionX + tooltip.caretX + 'px';
  99     };
 100
 101     const chartTooltip = new ChartTooltip(
 102       this.chartCanvasRef,
 103       this.chartTooltipRef,
 104       getStyleLeft,
 105       getStyleTop
 106     );
 107
 108     chartTooltip.customColors = {
 109       backgroundColor: this.colors[0].pointBackgroundColor,
 110       borderColor: this.colors[0].pointBorderColor
 111     };
 112
 113     this.options.tooltips.custom = (tooltip) => {
 114       chartTooltip.customTooltips(tooltip);
 115     };
 116   }
 117
 118   ngOnChanges(changes: SimpleChanges) {
 119     this.datasets[0].data = changes['data'].currentValue;
 120     this.labels = [...Array(changes['data'].currentValue.length)];
 121   }
 122 }