# All files / src/app/ceph/cluster/osd/osd-performance-histogram osd-performance-histogram.component.ts

38.71% Statements 12/31
0% Branches 0/12
11.11% Functions 1/9
35.71% Lines 10/28

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    617x

    7x

    7x

    7x

    1x

    7x

    7x

    7x

    7x

    7x
     import { Component, Input, OnChanges } from '@angular/core';

    import * as _ from 'lodash';

    @Component({
      selector: 'cd-osd-performance-histogram',
      template: require('./osd-performance-histogram.component.html'),
      styles: []
    })
    export class OsdPerformanceHistogramComponent implements OnChanges {
      @Input()
      histogram: any;
      valuesStyle: any;
      last = {};

      constructor() {}

      ngOnChanges() {
        this.render();
      }

      hexdigits(v): string {
        const i = Math.floor(v * 255).toString(16);
        return i.length === 1 ? '0' + i : i;
      }

      hexcolor(r, g, b) {
        return '#' + this.hexdigits(r) + this.hexdigits(g) + this.hexdigits(b);
      }

      render() {
        if (!this.histogram) {
          return;
        }
        let max = 0;

        _.each(this.histogram.values, (row, i) => {
          _.each(row, (col, j) => {
            let val;
            if (this.last && this.last[i] && this.last[i][j]) {
              val = col - this.last[i][j];
            } else {
              val = col;
            }
            max = Math.max(max, val);
          });
        });

        this.valuesStyle = this.histogram.values.map((row, i) => {
          return row.map((col, j) => {
            const val = this.last && this.last[i] && this.last[i][j] ? col - this.last[i][j] : col;
            const g = max ? val / max : 0;
            const r = 1 - g;
            return { backgroundColor: this.hexcolor(r, g, 0) };
          });
        });

        this.last = this.histogram.values;
      }
    }