fixed tooltip errors

tmpl/master.pug

@@ -31,6 +31,19 @@ html
 			#hero-tooltip th, #hero-tooltip td {
 				padding: 2px 4px;
 			}
+			#hero-tooltip {
+				position: absolute;
+				pointer-events: none;
+				background-image: linear-gradient(to bottom, rgba(52, 52, 52, 0.75), rgba(24, 24, 24, 0.75));
+				color: white;
+				text-shadow: 1px 1px 1px black;
+				border-radius: 2px;
+				box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.75);
+				z-index: 1;
+			}
+			.tooltip-bordered {
+				border-top: 1px solid #707070;
+			}
 			[class^="tooltip-color-"] {
 				width: 10px;
 				height: 10px;
@@ -113,14 +126,6 @@ html
 				}
 			});
 
-			Chart.Tooltip.positioners.middle = function(elements, eventPosition) {
-				const chartArea = this._chartInstance.chartArea;
-				return {
-					x: eventPosition.x,
-					y: chartArea.top + ((chartArea.bottom - chartArea.top) / 2),
-				};
-			};
-
 			const charts = {
 				logarithmic: false,
 				heroChart: null,
@@ -347,73 +352,36 @@ html
 						},
 						tooltips: {
 							intersect: false,
-							position: 'middle',
 							axis: 'x',
 							enabled: false,
 							custom: function(tooltipModel) {
-								let tooltipEl = document.getElementById('hero-tooltip');
+								const tooltipEl = document.getElementById('hero-tooltip');
-
-								// Create element on first render
-								if (!tooltipEl) {
-									tooltipEl = document.createElement('div');
-									tooltipEl.id = 'hero-tooltip';
-									const border = '1px solid #606060';
-									tooltipEl.innerHTML = `
-										<div class="text-center" style="font-size: 125%; border-bottom: ${border};">
-											<strong class="tooltip-title"></strong>
-										</div>
-										<table>
-											<tr>
-												<td><span class="tooltip-color-cases-total"></span></td>
-												<th>Total Cases</th>
-												<td class="tooltip-value-cases-total"></td>
-											</tr>
-											<tr>
-												<td><span class="tooltip-color-cases-new"></span></td>
-												<th>New Cases</th>
-												<td class="tooltip-value-cases-new"></td>
-											</tr>
-											<tr>
-												<td><span class="tooltip-color-deaths-total"></span></td>
-												<th>Total Deaths</th>
-												<td class="tooltip-value-deaths-total"></td>
-											</tr>
-											<tr>
-												<td><span class="tooltip-color-deaths-new"></span></td>
-												<th>New Deaths</th>
-												<td class="tooltip-value-deaths-new"></td>
-											</tr>
-										</table>
-										<div class="text-center pt-1" style="border-top: ${border}">
-											Deaths 2x every <strong class="tooltip-2x-deaths"></strong><br />
-											Cases 2x every <strong class="tooltip-2x-cases"></strong><br />
-										</div>
-									`;
-									tooltipEl.style.zIndex = '1000';
-									document.body.appendChild(tooltipEl);
-								}
 
 								if (tooltipModel.opacity === 0) {
 									tooltipEl.style.opacity = '0';
 									return;
 								}
 
-								tooltipEl.style.backgroundImage = 'linear-gradient(to bottom, rgba(52, 52, 52, 0.75), rgba(24, 24, 24, 0.75))';
-								tooltipEl.style.color = 'white';
-								tooltipEl.style.textShadow = '1px 1px 1px black';
-								tooltipEl.style.borderRadius = '2px';
-								tooltipEl.style.boxShadow = '2px 2px 3px rgba(0, 0, 0, 0.75)';
-
 								if (tooltipModel.dataPoints) {
+									const getDataPoint = (index) => tooltipModel.dataPoints.find(point => point.datasetIndex === index);
+
 									tooltipEl.querySelector('.tooltip-title').textContent = tooltipModel.title.join(' ');
 									const setData = (cls, index, colorIndex) => {
 										colorIndex = typeof(colorIndex) === 'number' ? colorIndex : index;
-										const color = tooltipModel.labelColors[colorIndex];
+										const dataPoint = getDataPoint(index);
-										const value = Number(tooltipModel.dataPoints[index].value).toLocaleString();
+										tooltipEl.querySelector('.tooltip-value-' + cls).textContent = dataPoint ?
-										tooltipEl.querySelector('.tooltip-value-' + cls).textContent = value;
+											Number(dataPoint.value).toLocaleString() :
-										const colorEl = tooltipEl.querySelector('.tooltip-color-' + cls);
+											'n/a';
-										colorEl.style.backgroundColor = color.backgroundColor;
+										const colorDataPoint = getDataPoint(colorIndex);
-										colorEl.style.borderColor = color.borderColor;
+										if (colorDataPoint) {
+											const realColorIndex = tooltipModel.dataPoints.indexOf(colorDataPoint);
+											const color = tooltipModel.labelColors[realColorIndex];
+											if (color) {
+												const colorEl = tooltipEl.querySelector('.tooltip-color-' + cls);
+												colorEl.style.backgroundColor = color.backgroundColor;
+												colorEl.style.borderColor = color.borderColor;
+											}
+										}
 									};
 
 									setData('cases-total', 0);
@@ -421,23 +389,19 @@ html
 									setData('deaths-total', 2);
 									setData('deaths-new', 4, 3);
 
-									const daysToDoubleDeaths = Number(tooltipModel.dataPoints[5].value).toLocaleString();
+									const daysToDoubleDeaths = getDataPoint(5) ? Number(getDataPoint(5).value).toLocaleString() : 'n/a';
-									const daysToDoubleCases = Number(tooltipModel.dataPoints[6].value).toLocaleString();
+									const daysToDoubleCases = getDataPoint(6) ? Number(getDataPoint(6).value).toLocaleString() : 'n/a';
 									tooltipEl.querySelector('.tooltip-2x-deaths').textContent = daysToDoubleDeaths + ' days';
 									tooltipEl.querySelector('.tooltip-2x-cases').textContent = daysToDoubleCases + ' days';
 								}
 
 								const position = this._chart.canvas.getBoundingClientRect();
 
-								// Display, position, and set styles for font
 								tooltipEl.style.opacity = '1';
-								tooltipEl.style.position = 'absolute';
-
 								tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
 								tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
 								tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
 								tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
-								tooltipEl.style.pointerEvents = 'none';
 
 								const tooltipSize = tooltipEl.getBoundingClientRect();
 								const chartArea = this._chart.chartArea;
@@ -461,11 +425,8 @@ html
 									afterBuildTicks: (axis, ticks) => {
 										if (axis.type === 'logarithmic') {
 											return ticks.filter((value) => {
-												if (value > 0 && value < 10) {
-													return false;
-												}
 												const logValue = Math.log10(value);
-												return Math.round(logValue) === logValue;
+												return value === 0 || Math.round(logValue) === logValue;
 											});
 										}
 
@@ -657,6 +618,30 @@ html
 			div.main-content.mt-4.position-relative
 				block main
 
+		div#hero-tooltip
+			div.text-center(style="font-size: 125%"): strong.tooltip-title
+			table.tooltip-bordered
+				tr
+					td: span.tooltip-color-cases-total
+					th Total Cases
+					td.tooltip-value-cases-total
+				tr
+					td: span.tooltip-color-cases-new
+					th New Cases
+					td.tooltip-value-cases-new
+				tr
+					td: span.tooltip-color-deaths-total
+					th Total Deaths
+					td.tooltip-value-deaths-total
+				tr
+					td: span.tooltip-color-deaths-new
+					th New Deaths
+					td.tooltip-value-deaths-new
+			div.text-center.pt-1.tooltip-bordered
+				| Cases 2x every #[strong.tooltip-2x-cases]
+				br
+				| Deaths 2x every #[strong.tooltip-2x-deaths]
+
 		script.
 			(function() {
 				const table = document.getElementById('table');