All files / src/app/shared/models chart-tooltip.ts

21.05% Statements 12/57
0% Branches 0/18
25% Functions 2/8
20% Lines 11/55

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    100x         38x       38x                               38x 38x 38x 38x                 100x                                                                                                                                       100x       100x     100x  
import { ElementRef } from '@angular/core';
 
export class ChartTooltip {
  tooltipEl: any;
  chartEl: any;
  getStyleLeft: Function;
  getStyleTop: Function;
  customColors = {
    backgroundColor: undefined,
    borderColor: undefined
  };
  checkOffset = false;
 
  /**
   * Creates an instance of ChartTooltip.
   * @param {ElementRef} chartCanvas Canvas Element
   * @param {ElementRef} chartTooltip Tooltip Element
   * @param {Function} getStyleLeft Function that calculates the value of Left
   * @param {Function} getStyleTop Function that calculates the value of Top
   * @memberof ChartTooltip
   */
  constructor(
    chartCanvas: ElementRef,
    chartTooltip: ElementRef,
    getStyleLeft: Function,
    getStyleTop: Function
  ) {
    this.chartEl = chartCanvas.nativeElement;
    this.getStyleLeft = getStyleLeft;
    this.getStyleTop = getStyleTop;
    this.tooltipEl = chartTooltip.nativeElement;
  }
 
  /**
   * Implementation of a ChartJS custom tooltip function.
   *
   * @param {any} tooltip
   * @memberof ChartTooltip
   */
  customTooltips(tooltip) {
    // Hide if no tooltip
    if (tooltip.opacity === 0) {
      this.tooltipEl.style.opacity = 0;
      return;
    }
 
    // Set caret Position
    this.tooltipEl.classList.remove('above', 'below', 'no-transform');
    if (tooltip.yAlign) {
      this.tooltipEl.classList.add(tooltip.yAlign);
    } else {
      this.tooltipEl.classList.add('no-transform');
    }
 
    // Set Text
    if (tooltip.body) {
      const titleLines = tooltip.title || [];
      const bodyLines = tooltip.body.map((bodyItem) => {
        return bodyItem.lines;
      });
 
      let innerHtml = '<thead>';
 
      titleLines.forEach((title) => {
        innerHtml += '<tr><th>' + this.getTitle(title) + '</th></tr>';
      });
      innerHtml += '</thead><tbody>';
 
      bodyLines.forEach((body, i) => {
        const colors = tooltip.labelColors[i];
        let style = 'background:' + (this.customColors.backgroundColor || colors.backgroundColor);
        style += '; border-color:' + (this.customColors.borderColor || colors.borderColor);
        style += '; border-width: 2px';
        const span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
        innerHtml += '<tr><td nowrap>' + span + this.getBody(body) + '</td></tr>';
      });
      innerHtml += '</tbody>';
 
      const tableRoot = this.tooltipEl.querySelector('table');
      tableRoot.innerHTML = innerHtml;
    }
 
    const positionY = this.chartEl.offsetTop;
    const positionX = this.chartEl.offsetLeft;
 
    // Display, position, and set styles for font
    if (this.checkOffset) {
      const halfWidth = tooltip.width / 2;
      this.tooltipEl.classList.remove('transform-left');
      this.tooltipEl.classList.remove('transform-right');
      if (tooltip.caretX - halfWidth < 0) {
        this.tooltipEl.classList.add('transform-left');
      } else if (tooltip.caretX + halfWidth > this.chartEl.width) {
        this.tooltipEl.classList.add('transform-right');
      }
    }
 
    this.tooltipEl.style.left = this.getStyleLeft(tooltip, positionX);
    this.tooltipEl.style.top = this.getStyleTop(tooltip, positionY);
 
    this.tooltipEl.style.opacity = 1;
    this.tooltipEl.style.fontFamily = tooltip._fontFamily;
    this.tooltipEl.style.fontSize = tooltip.fontSize;
    this.tooltipEl.style.fontStyle = tooltip._fontStyle;
    this.tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
  }
 
  getBody(body) {
    return body;
  }
 
  getTitle(title) {
    return title;
  }
}