git.apps.os.sepia.ceph.com Git - ceph.git/blob

   1 import { Component, Input, OnChanges } from '@angular/core';
   2
   3 import * as _ from 'lodash';
   4
   5 @Component({
   6   selector: 'cd-osd-performance-histogram',
   7   templateUrl: './osd-performance-histogram.component.html',
   8   styleUrls: ['./osd-performance-histogram.component.scss']
   9 })
  10 export class OsdPerformanceHistogramComponent implements OnChanges {
  11   @Input() histogram: any;
  12   valuesStyle: any;
  13   last = {};
  14
  15   constructor() {}
  16
  17   ngOnChanges() {
  18     this.render();
  19   }
  20
  21   hexdigits(v): string {
  22     const i = Math.floor(v * 255).toString(16);
  23     return i.length === 1 ? '0' + i : i;
  24   }
  25
  26   hexcolor(r, g, b) {
  27     return '#' + this.hexdigits(r) + this.hexdigits(g) + this.hexdigits(b);
  28   }
  29
  30   render() {
  31     if (!this.histogram) {
  32       return;
  33     }
  34     let max = 0;
  35
  36     _.each(this.histogram.values, (row, i) => {
  37       _.each(row, (col, j) => {
  38         let val;
  39         if (this.last && this.last[i] && this.last[i][j]) {
  40           val = col - this.last[i][j];
  41         } else {
  42           val = col;
  43         }
  44         max = Math.max(max, val);
  45       });
  46     });
  47
  48     this.valuesStyle = this.histogram.values.map((row, i) => {
  49       return row.map((col, j) => {
  50         const val = this.last && this.last[i] && this.last[i][j] ? col - this.last[i][j] : col;
  51         const g = max ? val / max : 0;
  52         const r = 1 - g;
  53         return { backgroundColor: this.hexcolor(r, g, 0) };
  54       });
  55     });
  56
  57     this.last = this.histogram.values;
  58   }
  59 }