]>
Commit | Line | Data |
---|---|---|
11fdf7f2 TL |
1 | import { ElementRef } from '@angular/core'; |
2 | ||
3 | export class ChartTooltip { | |
4 | tooltipEl: any; | |
5 | chartEl: any; | |
6 | getStyleLeft: Function; | |
7 | getStyleTop: Function; | |
9f95a23c | 8 | customColors: Record<string, any> = { |
11fdf7f2 TL |
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 | */ | |
9f95a23c | 40 | customTooltips(tooltip: any) { |
11fdf7f2 TL |
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 || []; | |
9f95a23c | 58 | const bodyLines = tooltip.body.map((bodyItem: any) => { |
11fdf7f2 TL |
59 | return bodyItem.lines; |
60 | }); | |
61 | ||
62 | let innerHtml = '<thead>'; | |
63 | ||
9f95a23c | 64 | titleLines.forEach((title: string) => { |
11fdf7f2 TL |
65 | innerHtml += '<tr><th>' + this.getTitle(title) + '</th></tr>'; |
66 | }); | |
67 | innerHtml += '</thead><tbody>'; | |
68 | ||
9f95a23c | 69 | bodyLines.forEach((body: string, i: number) => { |
11fdf7f2 TL |
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 | ||
9f95a23c | 108 | getBody(body: string) { |
11fdf7f2 TL |
109 | return body; |
110 | } | |
111 | ||
9f95a23c | 112 | getTitle(title: string) { |
11fdf7f2 TL |
113 | return title; |
114 | } | |
115 | } |