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
|
import { ElementRef } from '@angular/core';
export class ChartTooltip {
tooltipEl: any;
chartEl: any;
getStyleLeft: Function;
getStyleTop: Function;
customColors: Record<string, any> = {
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: any) {
// 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: any) => {
return bodyItem.lines;
});
let innerHtml = '<thead>';
titleLines.forEach((title: string) => {
innerHtml += '<tr><th>' + this.getTitle(title) + '</th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach((body: string, i: number) => {
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: string) {
return body;
}
getTitle(title: string) {
return title;
}
}
|
