All files / src/app/shared/components/sparkline sparkline.component.ts

91.18% Statements 31/34
66.67% Branches 6/9
57.14% Functions 4/7
90% Lines 27/30

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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 12392x 92x   92x 92x             92x   92x   92x     92x   92x         92x   34x                     34x                                           1x   1x                                     34x           34x   34x   92x 34x       34x       34x             34x         34x         92x 31x 31x   92x  
import { Component, ElementRef, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { Input } from '@angular/core';
 
import { ChartTooltip } from '../../models/chart-tooltip';
import { DimlessBinaryPipe } from '../../pipes/dimless-binary.pipe';
 
@Component({
  selector: 'cd-sparkline',
  template: require('./sparkline.component.html'),
  styles: []
})
export class SparklineComponent implements OnInit, OnChanges {
  @ViewChild('sparkCanvas')
  chartCanvasRef: ElementRef;
  @ViewChild('sparkTooltip')
  chartTooltipRef: ElementRef;
 
  @Input()
  data: any;
  @Input()
  style = {
    height: '30px',
    width: '100px'
  };
  @Input()
  isBinary: boolean;
 
  public colors: Array<any> = [
    {
      backgroundColor: 'rgba(40,140,234,0.2)',
      borderColor: 'rgba(40,140,234,1)',
      pointBackgroundColor: 'rgba(40,140,234,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(40,140,234,0.8)'
    }
  ];
 
  options = {
    animation: {
      duration: 0
    },
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    elements: {
      line: {
        borderWidth: 1
      }
    },
    tooltips: {
      enabled: false,
      mode: 'index',
      intersect: false,
      custom: undefined,
      callbacks: {
        label: (tooltipItem) => {
          if (this.isBinary) {
            return this.dimlessBinaryPipe.transform(tooltipItem.yLabel);
          } else {
            return tooltipItem.yLabel;
          }
        }
      }
    },
    scales: {
      yAxes: [
        {
          display: false
        }
      ],
      xAxes: [
        {
          display: false
        }
      ]
    }
  };
 
  public datasets: Array<any> = [
    {
      data: []
    }
  ];
 
  public labels: Array<any> = [];
 
  constructor(private dimlessBinaryPipe: DimlessBinaryPipe) {}
 
  ngOnInit() {
    const getStyleTop = (tooltip) => {
      return tooltip.caretY - tooltip.height - tooltip.yPadding - 5 + 'px';
    };
 
    const getStyleLeft = (tooltip, positionX) => {
      return positionX + tooltip.caretX + 'px';
    };
 
    const chartTooltip = new ChartTooltip(
      this.chartCanvasRef,
      this.chartTooltipRef,
      getStyleLeft,
      getStyleTop
    );
 
    chartTooltip.customColors = {
      backgroundColor: this.colors[0].pointBackgroundColor,
      borderColor: this.colors[0].pointBorderColor
    };
 
    this.options.tooltips.custom = (tooltip) => {
      chartTooltip.customTooltips(tooltip);
    };
  }
 
  ngOnChanges(changes: SimpleChanges) {
    this.datasets[0].data = changes['data'].currentValue;
    this.labels = [...Array(changes['data'].currentValue.length)];
  }
}