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