Build status chart flickers when hovering over the infobox

rillig commented 1 year ago

On https://releng.netbsd.org/bulktracker/build/42, hover over the build status infobox:

When the mouse cursor is both over the pie chart circle and in the infobox rectangle, the infobox flickers.

bsiegert commented 7 months ago

That's an upstream issue in the Google chart API, I assume :( I have seen it happen but it depends on the window size and browser.

Since the Chart API is deprecated anyway, maybe it's time to switch to an alternative? quickchart.io seems nice.

bsiegert commented 6 months ago

We can use chart.js instead of the Google Chart API! That also means that we can get rid of this external API dependency, which is good news.

Here is some example code to render a chart -- unfortunately, GitHub does not let me attach an HTML file to a comment.

<!doctype html>

<html>
<body>

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ['OK', 'prefailed', 'indirect-failed', 'failed'],
      datasets: [{
        data: [26991, 1202, 838, 276],
    backgroundColor: [
            'green',
            'blue',
            'orange',
            'red',
    ],
        borderWidth: 1
      }]
    }
  });
</script>

</body>

which ends up looking like the picture. Screenshot 2024-05-07 10 50 17

bsiegert commented 6 months ago

This will be in the next release.

bsiegert / BulkTracker

Build status chart flickers when hovering over the infobox #46