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 | 100x 38x 38x 38x 38x 38x 38x 100x 100x 100x 100x | 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; } } |