fixed tooltip errors
This commit is contained in:
parent
495677478b
commit
551d9539bc
129
tmpl/master.pug
129
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 = `
|
||||
<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);
|
||||
}
|
||||
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');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user