[FIX] runbot: wait for chart.js to be loaded

Since the frontend_assets are loaded with `defer="defer"`,
the page sometimes fail with the message:
```
stats.js:212 Uncaught ReferenceError: Chart is not defined
    at updateChart (stats.js:212)
    at stats.js:158
    at XMLHttpRequest.xhttp.onreadystatechange (stats.js:53)
```

This commit checks that Chart is available before tring to render the graph.

Thanks to @kebeclibre for the help.
This commit is contained in:
Xavier-Do 2021-08-19 15:11:44 +02:00 committed by xdo
parent 92f8c093bd
commit b55e38ae2d
2 changed files with 18 additions and 5 deletions

View File

@ -162,7 +162,7 @@ function fetchUpdateChart() {
function generateLegend() {
var legend = $("<ul></ul>");
for (data of config.data.datasets) {
var legendElement = $(`<li><span class="color" style="border: 2px solid ${data.borderColor};"></span><span class="label">${data.label}<span></li>`)
var legendElement = $(`<li><span class="color" style="border: 2px solid ${data.borderColor};"></span><span class="label" title="${data.label}">${data.label}<span></li>`)
if (data.hidden){
legendElement.addClass('disabled')
}
@ -228,6 +228,20 @@ function updateUrl(){
window.location.hash = new URLSearchParams(config.searchParams).toString();
}
async function waitForChart() {
function loop(resolve) {
if (window.Chart) {
resolve();
} else {
setTimeout(loop.bind(null, resolve),10);
}
}
return new Promise((resolve) => {
loop(resolve);
})
}
window.onload = function() {
config.searchParams = {
limit: 25,
@ -256,6 +270,5 @@ window.onload = function() {
fetchUpdateChart();
}
fetchUpdateChart();
waitForChart().then(fetchUpdateChart);
};

View File

@ -96,8 +96,8 @@
</div>
</nav>
<div class="row">
<div class="col-xs-9 col-md-10 col-lg-11"><canvas id="canvas"></canvas></div>
<div class="col-xs-3 col-md-2 col-lg-1">
<div class="col-xs-9 col-md-10"><canvas id="canvas"></canvas></div>
<div class="col-xs-3 col-md-2">
<b>Mode:</b>
<select id="mode_selector" class="form-select" aria-label="Display mode">
<option title="Real Values ordered by value" selected="selected" value="normal">Value</option>