From 551d9539bc400285f7bf2cfa47b6bf4637b19fad Mon Sep 17 00:00:00 2001 From: tmont Date: Sat, 9 May 2020 09:44:51 -0700 Subject: [PATCH] fixed tooltip errors --- tmpl/master.pug | 129 +++++++++++++++++++++--------------------------- 1 file changed, 57 insertions(+), 72 deletions(-) diff --git a/tmpl/master.pug b/tmpl/master.pug index 3c36f1b..276cf18 100644 --- a/tmpl/master.pug +++ b/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'); - - // Create element on first render - if (!tooltipEl) { - tooltipEl = document.createElement('div'); - tooltipEl.id = 'hero-tooltip'; - const border = '1px solid #606060'; - tooltipEl.innerHTML = ` -
- -
- - - - - - - - - - - - - - - - - - - - - -
Total Cases
New Cases
Total Deaths
New Deaths
-
- Deaths 2x every
- Cases 2x every
-
- `; - tooltipEl.style.zIndex = '1000'; - document.body.appendChild(tooltipEl); - } + const tooltipEl = document.getElementById('hero-tooltip'); 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 value = Number(tooltipModel.dataPoints[index].value).toLocaleString(); - tooltipEl.querySelector('.tooltip-value-' + cls).textContent = value; - const colorEl = tooltipEl.querySelector('.tooltip-color-' + cls); - colorEl.style.backgroundColor = color.backgroundColor; - colorEl.style.borderColor = color.borderColor; + const dataPoint = getDataPoint(index); + tooltipEl.querySelector('.tooltip-value-' + cls).textContent = dataPoint ? + Number(dataPoint.value).toLocaleString() : + 'n/a'; + const colorDataPoint = getDataPoint(colorIndex); + 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 daysToDoubleCases = Number(tooltipModel.dataPoints[6].value).toLocaleString(); + const daysToDoubleDeaths = getDataPoint(5) ? Number(getDataPoint(5).value).toLocaleString() : 'n/a'; + 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');