ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/models/chart-tooltip.ts

   1 import { ElementRef } from '@angular/core';
   2
   3 export class ChartTooltip {
   4   tooltipEl: any;
   5   chartEl: any;
   6   getStyleLeft: Function;
   7   getStyleTop: Function;
   8   customColors: Record<string, any> = {
   9     backgroundColor: undefined,
  10     borderColor: undefined
  11   };
  12   checkOffset = false;
  13
  14   /**
  15    * Creates an instance of ChartTooltip.
  16    * @param {ElementRef} chartCanvas Canvas Element
  17    * @param {ElementRef} chartTooltip Tooltip Element
  18    * @param {Function} getStyleLeft Function that calculates the value of Left
  19    * @param {Function} getStyleTop Function that calculates the value of Top
  20    * @memberof ChartTooltip
  21    */
  22   constructor(
  23     chartCanvas: ElementRef,
  24     chartTooltip: ElementRef,
  25     getStyleLeft: Function,
  26     getStyleTop: Function
  27   ) {
  28     this.chartEl = chartCanvas.nativeElement;
  29     this.getStyleLeft = getStyleLeft;
  30     this.getStyleTop = getStyleTop;
  31     this.tooltipEl = chartTooltip.nativeElement;
  32   }
  33
  34   /**
  35    * Implementation of a ChartJS custom tooltip function.
  36    *
  37    * @param {any} tooltip
  38    * @memberof ChartTooltip
  39    */
  40   customTooltips(tooltip: any) {
  41     // Hide if no tooltip
  42     if (tooltip.opacity === 0) {
  43       this.tooltipEl.style.opacity = 0;
  44       return;
  45     }
  46
  47     // Set caret Position
  48     this.tooltipEl.classList.remove('above', 'below', 'no-transform');
  49     if (tooltip.yAlign) {
  50       this.tooltipEl.classList.add(tooltip.yAlign);
  51     } else {
  52       this.tooltipEl.classList.add('no-transform');
  53     }
  54
  55     // Set Text
  56     if (tooltip.body) {
  57       const titleLines = tooltip.title || [];
  58       const bodyLines = tooltip.body.map((bodyItem: any) => {
  59         return bodyItem.lines;
  60       });
  61
  62       let innerHtml = '<thead>';
  63
  64       titleLines.forEach((title: string) => {
  65         innerHtml += '<tr><th>' + this.getTitle(title) + '</th></tr>';
  66       });
  67       innerHtml += '</thead><tbody>';
  68
  69       bodyLines.forEach((body: string, i: number) => {
  70         const colors = tooltip.labelColors[i];
  71         let style = 'background:' + (this.customColors.backgroundColor || colors.backgroundColor);
  72         style += '; border-color:' + (this.customColors.borderColor || colors.borderColor);
  73         style += '; border-width: 2px';
  74         const span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
  75         innerHtml += '<tr><td nowrap>' + span + this.getBody(body) + '</td></tr>';
  76       });
  77       innerHtml += '</tbody>';
  78
  79       const tableRoot = this.tooltipEl.querySelector('table');
  80       tableRoot.innerHTML = innerHtml;
  81     }
  82
  83     const positionY = this.chartEl.offsetTop;
  84     const positionX = this.chartEl.offsetLeft;
  85
  86     // Display, position, and set styles for font
  87     if (this.checkOffset) {
  88       const halfWidth = tooltip.width / 2;
  89       this.tooltipEl.classList.remove('transform-left');
  90       this.tooltipEl.classList.remove('transform-right');
  91       if (tooltip.caretX - halfWidth < 0) {
  92         this.tooltipEl.classList.add('transform-left');
  93       } else if (tooltip.caretX + halfWidth > this.chartEl.width) {
  94         this.tooltipEl.classList.add('transform-right');
  95       }
  96     }
  97
  98     this.tooltipEl.style.left = this.getStyleLeft(tooltip, positionX);
  99     this.tooltipEl.style.top = this.getStyleTop(tooltip, positionY);
 100
 101     this.tooltipEl.style.opacity = 1;
 102     this.tooltipEl.style.fontFamily = tooltip._fontFamily;
 103     this.tooltipEl.style.fontSize = tooltip.fontSize;
 104     this.tooltipEl.style.fontStyle = tooltip._fontStyle;
 105     this.tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
 106   }
 107
 108   getBody(body: string) {
 109     return body;
 110   }
 111
 112   getTitle(title: string) {
 113     return title;
 114   }
 115 }