Update Chart.js to version 3.9

Fixes #175

Following 3.x Migration Guide, here is a list of the changes:

https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#specific-changes
- Chart.scaleService was replaced with Chart.registry. Scale defaults are now in Chart.defaults.scales[type].
- scales.[x/y]Axes arrays were removed. Scales are now configured directly to options.scales object with the object key being the scale Id.
- scales.[x/y]Axes.barPercentage was moved to dataset option barPercentages
- scales.[x/y]Axes.barThickness was moved to dataset option barThickness
- scales.[x/y]Axes.scaleLabel was renamed to scales[id].title
- scales.[x/y]Axes.scaleLabel.labelString was renamed to scales[id].title.text
- scales.[x/y]Axes.ticks.userCallback was renamed to scales[id].ticks.callback
- tooltips namespace was renamed to tooltip to match the plugin name
- legend, title and tooltip namespaces were moved from options to options.plugins

https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#defaults
- legend, title and tooltip namespaces were moved from Chart.defaults to Chart.defaults.plugins.
- elements.line.fill default changed from true to false

https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#chart-types
- horizontalBar chart type was removed. Horizontal bar charts can be configured using the new indexAxis option

https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#tooltip
- xLabel and yLabel were removed. Please use label and formattedValue
- The callbacks no longer are given a data parameter. The tooltip item parameter contains the chart and dataset instead
- The tooltip item's index parameter was renamed to dataIndex and value was renamed to formattedValue

https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#ticks
- options.gridLines was renamed to options.gridLines

CMakeLists.txt

@@ -87,8 +87,8 @@ file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js
 	js/vue.min.js EXPECTED_MD5 fb192338844efe86ec759a40152fcb8e)
 file(DOWNLOAD https://raw.githubusercontent.com/drudru/ansi_up/v4.0.4/ansi_up.js
         js/ansi_up.js EXPECTED_MD5 b31968e1a8fed0fa82305e978161f7f5)
-file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js
+file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js
-        js/Chart.min.js EXPECTED_MD5 f6c8efa65711e0cbbc99ba72997ecd0e)
+        js/Chart.min.js EXPECTED_MD5 7dd5ea7d2cf22a1c42b43c40093d2669)
 # ...and compile them
 generate_compressed_bins(${CMAKE_BINARY_DIR} js/vue.min.js
     js/ansi_up.js js/Chart.min.js)

src/resources/js/app.js

@@ -159,20 +159,26 @@ const Charts = (() => {
           datasets: [{
             label: 'Failed Builds',
             backgroundColor: "#883d3d",
-            data: data.map(e => e.failed || 0)
+            data: data.map(e => e.failed || 0),
+            fill: true,
           },{
             label: 'Successful Builds',
             backgroundColor: "#74af77",
-            data: data.map(e => e.success || 0)
+            data: data.map(e => e.success || 0),
+            fill: true,
           }]
         },
         options:{
+          plugins: {
             title: { display: true, text: 'Runs per day' },
-          tooltips:{callbacks:{title: (tip, data) => dayNames[tip[0].index].long}},
+            tooltip:{callbacks:{title: (tip) => dayNames[tip[0].dataIndex].long}},
-          scales:{yAxes:[{
+          },
-            ticks:{userCallback: (label, index, labels) => Number.isInteger(label) ? label: null},
+          scales: {
+            y: {
+              ticks:{callback: (label, index, labels) => Number.isInteger(label) ? label: null},
               stacked: true
-          }]}
+            },
+          },
         }
       });
       c.jobCompleted = success => {
@@ -183,7 +189,7 @@ const Charts = (() => {
     },
     createRunsPerJobChart: (id, data) => {
       const c = new Chart(document.getElementById("chartBpj"), {
-        type: 'horizontalBar',
+        type: 'bar',
         data: {
           labels: Object.keys(data),
           datasets: [{
@@ -193,9 +199,16 @@ const Charts = (() => {
           }]
         },
         options:{
+          indexAxis: 'y',
+          plugins: {
             title: { display: true, text: 'Runs per job' },
+          },
           hover: { mode: null },
-          scales:{xAxes:[{ticks:{userCallback: (label, index, labels)=> Number.isInteger(label) ? label: null}}]}
+          scales: {
+            x: {
+              ticks:{callback: (label, index, labels)=> Number.isInteger(label) ? label: null}
+            }
+          }
         }
       });
       c.jobCompleted = name => {
@@ -216,7 +229,7 @@ const Charts = (() => {
     createTimePerJobChart: (id, data, completedCounts) => {
       const scale = timeScale(Math.max(...Object.values(data)));
       const c = new Chart(document.getElementById(id), {
-        type: 'horizontalBar',
+        type: 'bar',
         data: {
           labels: Object.keys(data),
           datasets: [{
@@ -226,18 +239,23 @@ const Charts = (() => {
           }]
         },
         options:{
+          indexAxis: 'y',
+          plugins: {
             title: { display: true, text: 'Mean run time this week' },
-          hover: { mode: null },
+            tooltip:{callbacks:{
-          scales:{xAxes:[{
+              label: (tip) => tip.dataset.label + ': ' + tip.raw.toFixed(2) + ' ' + scale.label.toLowerCase()
-            ticks:{userCallback: scale.ticks},
-            scaleLabel: {
-              display: true,
-              labelString: scale.label
-            }
-          }]},
-          tooltips:{callbacks:{
-            label: (tip, data) => data.datasets[tip.datasetIndex].label + ': ' + tip.xLabel.toFixed(2) + ' ' + scale.label.toLowerCase()
             }}
+          },
+          hover: { mode: null },
+          scales: {
+            x:{
+              ticks: {callback: scale.ticks},
+              title: {
+                display: true,
+                text: scale.label
+              }
+            }
+          },
         }
       });
       c.jobCompleted = (name, time) => {
@@ -270,22 +288,22 @@ const Charts = (() => {
           datasets: data.map(e => dataValue(e.name, e.durations))
         },
         options:{
-          title: { display: true, text: 'Run time changes' },
+          plugins: {
             legend: { display: true, position: 'bottom' },
-          scales:{
+            title: { display: true, text: 'Run time changes' },
-            xAxes:[{ticks:{display: false}}],
+            tooltip: { enabled: false },
-            yAxes:[{
-              ticks:{userCallback: scale.ticks},
-              scaleLabel: {
-                display: true,
-                labelString: scale.label
-              }
-            }]
           },
-          tooltips:{
+          scales:{
-            enabled:false
+            x: {ticks: {display: false}},
+            y: {
+              ticks: {callback: scale.ticks},
+              title: {
+                display: true,
+                text: scale.label
               }
             }
+          },
+        }
       });
       c.jobCompleted = (name, time) => {
         for (var j = 0; j < c.data.datasets.length; ++j) {
@@ -312,45 +330,42 @@ const Charts = (() => {
           datasets: [{
             label: 'Average',
             type: 'line',
-            data: [{x:0, y:avg * scale.factor}, {x:1, y:avg * scale.factor}],
+            data: Array(jobs.length).fill(avg*scale.factor),
             borderColor: '#7483af',
             backgroundColor: 'transparent',
-            xAxisID: 'avg',
             pointRadius: 0,
             pointHitRadius: 0,
             pointHoverRadius: 0,
           },{
             label: 'Build time',
             backgroundColor: jobs.map(e => e.result == 'success' ? '#74af77': '#883d3d').reverse(),
+            barPercentage: 1.0,
+            categoryPercentage: 0.95,
             data: jobs.map(e => (e.completed - e.started) * scale.factor).reverse()
           }]
         },
         options: {
+          plugins: {
             title: { display: true, text: 'Build time' },
+            tooltip: {
+              callbacks:{
+                label: (tip) => scale.ticks(tip.raw) + ' ' + scale.label.toLowerCase()
+              }
+            }
+          },
           hover: { mode: null },
           scales:{
-            xAxes:[{
+            x: {
-              categoryPercentage: 0.95,
+              grid: {
-              barPercentage: 1.0
-            },{
-              id: 'avg',
-              type: 'linear',
-              ticks: {
-                display: false
-              },
-              gridLines: {
                 display: false,
                 drawBorder: false
               }
-            }],
-            yAxes:[{
-              ticks:{userCallback: scale.ticks},
-              scaleLabel:{display: true, labelString: scale.label}
-            }]
             },
-          tooltips:{callbacks:{
+            y: {
-            label: (tip, data) => scale.ticks(tip.yLabel) + ' ' + scale.label.toLowerCase()
+              ticks: {callback: scale.ticks},
-          }}
+              title: {display: true, text: scale.label}
+            }
+          },
         }
       });
       c.jobCompleted = (num, result, time) => {
@@ -374,13 +389,11 @@ const Charts = (() => {
 })();
 
 // For all charts, set miniumum Y to 0
-Chart.scaleService.updateScaleDefaults('linear', {
+Chart.defaults.scales.linear = { ticks: { suggestedMin: 0 } };
-    ticks: { suggestedMin: 0 }
-});
 // Don't display legend by default
-Chart.defaults.global.legend.display = false;
+Chart.defaults.plugins.legend.display = false;
 // Disable tooltip hover animations
-Chart.defaults.global.hover.animationDuration = 0;
+Chart.defaults.plugins.tooltip.animation = false;
 
 // Component for the / endpoint
 const Home = templateId => {