From 1be755e3236d8bc2b7c91d8469cd38fb69cb96a1 Mon Sep 17 00:00:00 2001 From: Guilherme Lima Date: Fri, 23 Sep 2022 20:03:49 +0200 Subject: [PATCH] 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 | 4 +- src/resources/js/app.js | 131 ++++++++++++++++++++++------------------ 2 files changed, 74 insertions(+), 61 deletions(-) diff --git a/CMakeLists.txt b/CMakeLists.txt index 0fab9a1..ae86ce9 100644 --- a/CMakeLists.txt +++ b/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 - js/Chart.min.js EXPECTED_MD5 f6c8efa65711e0cbbc99ba72997ecd0e) +file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js + 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) diff --git a/src/resources/js/app.js b/src/resources/js/app.js index 6ef9521..ae0bf6b 100644 --- a/src/resources/js/app.js +++ b/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:{ - title: { display: true, text: 'Runs per day' }, - tooltips:{callbacks:{title: (tip, data) => dayNames[tip[0].index].long}}, - scales:{yAxes:[{ - ticks:{userCallback: (label, index, labels) => Number.isInteger(label) ? label: null}, - stacked: true - }]} + plugins: { + title: { display: true, text: 'Runs per day' }, + tooltip:{callbacks:{title: (tip) => dayNames[tip[0].dataIndex].long}}, + }, + 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:{ - title: { display: true, text: 'Runs per job' }, + 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:{ - title: { display: true, text: 'Mean run time this week' }, + indexAxis: 'y', + plugins: { + title: { display: true, text: 'Mean run time this week' }, + tooltip:{callbacks:{ + label: (tip) => tip.dataset.label + ': ' + tip.raw.toFixed(2) + ' ' + scale.label.toLowerCase() + }} + }, hover: { mode: null }, - scales:{xAxes:[{ - ticks:{userCallback: scale.ticks}, - scaleLabel: { - display: true, - labelString: scale.label + scales: { + x:{ + ticks: {callback: scale.ticks}, + title: { + display: true, + text: scale.label + } } - }]}, - tooltips:{callbacks:{ - label: (tip, data) => data.datasets[tip.datasetIndex].label + ': ' + tip.xLabel.toFixed(2) + ' ' + scale.label.toLowerCase() - }} + }, } }); c.jobCompleted = (name, time) => { @@ -270,21 +288,21 @@ const Charts = (() => { datasets: data.map(e => dataValue(e.name, e.durations)) }, options:{ - title: { display: true, text: 'Run time changes' }, - legend:{ display: true, position: 'bottom' }, + plugins: { + legend: { display: true, position: 'bottom' }, + title: { display: true, text: 'Run time changes' }, + tooltip: { enabled: false }, + }, scales:{ - xAxes:[{ticks:{display: false}}], - yAxes:[{ - ticks:{userCallback: scale.ticks}, - scaleLabel: { + x: {ticks: {display: false}}, + y: { + ticks: {callback: scale.ticks}, + title: { display: true, - labelString: scale.label + text: scale.label } - }] + } }, - tooltips:{ - enabled:false - } } }); c.jobCompleted = (name, time) => { @@ -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: { - title: { display: true, text: 'Build time' }, + plugins: { + title: { display: true, text: 'Build time' }, + tooltip: { + callbacks:{ + label: (tip) => scale.ticks(tip.raw) + ' ' + scale.label.toLowerCase() + } + } + }, hover: { mode: null }, scales:{ - xAxes:[{ - categoryPercentage: 0.95, - barPercentage: 1.0 - },{ - id: 'avg', - type: 'linear', - ticks: { - display: false - }, - gridLines: { + x: { + grid: { display: false, drawBorder: false } - }], - yAxes:[{ - ticks:{userCallback: scale.ticks}, - scaleLabel:{display: true, labelString: scale.label} - }] + }, + y: { + ticks: {callback: scale.ticks}, + title: {display: true, text: scale.label} + } }, - tooltips:{callbacks:{ - label: (tip, data) => scale.ticks(tip.yLabel) + ' ' + scale.label.toLowerCase() - }} } }); c.jobCompleted = (num, result, time) => { @@ -374,13 +389,11 @@ const Charts = (() => { })(); // For all charts, set miniumum Y to 0 -Chart.scaleService.updateScaleDefaults('linear', { - ticks: { suggestedMin: 0 } -}); +Chart.defaults.scales.linear = { 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 => {