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

23.53% Statements 12/51
0% Branches 0/6
25% Functions 2/8
22.45% Lines 11/49

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

    94x

    57x

    57x

    57x
    57x
    57x
    57x

    94x

    94x

    94x

    94x
     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;
      }
    }