From e506142fa40fe8deb693b435cb7e2c8eb5d7dac5 Mon Sep 17 00:00:00 2001 From: Oliver Giles Date: Fri, 6 Jul 2018 17:47:48 +0300 Subject: [PATCH] Update Chart.js to latest: 2.7.2 Adapt to new API. This removes a few workarounds and should contribute nicely to #44, #45 and #57 --- CMakeLists.txt | 8 +- src/resources.cpp | 2 - src/resources/index.html | 1 - src/resources/js/app.js | 164 +++++++++++++++++++-------------------- 4 files changed, 82 insertions(+), 93 deletions(-) diff --git a/CMakeLists.txt b/CMakeLists.txt index c3aa7fe..3f8b4c7 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -71,15 +71,13 @@ file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router js/vue-router.min.js EXPECTED_MD5 5d3e35710dbe02de78c39e3e439b8d4e) file(DOWNLOAD https://raw.githubusercontent.com/drudru/ansi_up/v1.3.0/ansi_up.js js/ansi_up.js EXPECTED_MD5 158566dc1ff8f2804de972f7e841e2f6) -file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js - js/Chart.min.js EXPECTED_MD5 0d3004601c1a855a3d203502549528a7) -file(DOWNLOAD https://raw.githubusercontent.com/tomsouthall/Chart.HorizontalBar.js/v1.04/Chart.HorizontalBar.js - js/Chart.HorizontalBar.js EXPECTED_MD5 95070a38e69bc56534e1b2086d985270) +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://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css css/bootstrap.min.css EXPECTED_MD5 5d5357cb3704e1f43a1f5bfed2aebf42) # ...and compile them generate_compressed_bins(${CMAKE_BINARY_DIR} js/vue-router.min.js js/vue.min.js - js/ansi_up.js js/Chart.min.js js/Chart.HorizontalBar.js css/bootstrap.min.css) + js/ansi_up.js js/Chart.min.js css/bootstrap.min.css) # (see resources.cpp where these are fetched) ## Server diff --git a/src/resources.cpp b/src/resources.cpp index 325995b..e7bd45d 100644 --- a/src/resources.cpp +++ b/src/resources.cpp @@ -37,13 +37,11 @@ Resources::Resources() INIT_RESOURCE("/favicon-152.png", favicon_152_png, CONTENT_TYPE_PNG); INIT_RESOURCE("/icon.png", icon_png, CONTENT_TYPE_PNG); INIT_RESOURCE("/js/app.js", js_app_js, CONTENT_TYPE_JS); - INIT_RESOURCE("/js/Chart.HorizontalBar.js", js_Chart_HorizontalBar_js, CONTENT_TYPE_JS); INIT_RESOURCE("/js/ansi_up.js", js_ansi_up_js, CONTENT_TYPE_JS); INIT_RESOURCE("/js/vue.min.js", js_vue_min_js, CONTENT_TYPE_JS); INIT_RESOURCE("/js/vue-router.min.js", js_vue_router_min_js, CONTENT_TYPE_JS); INIT_RESOURCE("/js/ansi_up.js", js_ansi_up_js, CONTENT_TYPE_JS); INIT_RESOURCE("/js/Chart.min.js", js_Chart_min_js, CONTENT_TYPE_JS); - INIT_RESOURCE("/js/Chart.HorizontalBar.js", js_Chart_HorizontalBar_js, CONTENT_TYPE_JS); INIT_RESOURCE("/css/bootstrap.min.css", css_bootstrap_min_css, CONTENT_TYPE_CSS); } diff --git a/src/resources/index.html b/src/resources/index.html index 571d02f..95de2d2 100644 --- a/src/resources/index.html +++ b/src/resources/index.html @@ -12,7 +12,6 @@ - diff --git a/src/resources/js/app.js b/src/resources/js/app.js index 8b18cdc..5a70cfd 100644 --- a/src/resources/js/app.js +++ b/src/resources/js/app.js @@ -177,8 +177,8 @@ const Home = function() { var chtUtilization, chtBuildsPerDay, chtBuildsPerJob, chtTimePerJob; var updateUtilization = function(busy) { - chtUtilization.segments[0].value += busy ? 1 : -1; - chtUtilization.segments[1].value -= busy ? 1 : -1; + chtUtilization.data.datasets[0].data[0] += busy ? 1 : -1; + chtUtilization.data.datasets[0].data[1] -= busy ? 1 : -1; chtUtilization.update(); } @@ -196,69 +196,63 @@ const Home = function() { this.$forceUpdate(); // setup charts - chtUtilization = new Chart(document.getElementById("chartUtil").getContext("2d")).Pie( - [{ - value: msg.executorsBusy, - color: "tan", - label: "Busy" - }, - { - value: msg.executorsTotal - msg.executorsBusy, - color: "darkseagreen", - label: "Idle" - } - ], { - animationEasing: 'easeInOutQuad' + chtUtilization = new Chart(document.getElementById("chartUtil"), { + type: 'pie', + data: { + labels: ["Busy", "Idle"], + datasets: [{ + data: [ msg.executorsBusy, msg.executorsTotal - msg.executorsBusy ], + backgroundColor: ["tan", "darkseagreen"] + }] + } + }); + chtBuildsPerDay = new Chart(document.getElementById("chartBpd"), { + type: 'line', + data: { + labels: (()=>{ + res = []; + var now = new Date(); + for (var i = 6; i >= 0; --i) { + var then = new Date(now.getTime() - i * 86400000); + res.push(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][then.getDay()]); + } + return res; + })(), + datasets: [{ + label: 'Successful Builds', + backgroundColor: "rgba(143,188,143,0.65)", //darkseagreen at 0.65 + borderColor: "forestgreen", + data: msg.buildsPerDay.map((e)=>{ return e.success || 0; }) + }, { + label: 'Failed Builds', + backgroundColor: "rgba(233,150,122,0.65)", //darkseagreen at 0.65 + borderColor: "crimson", + data: msg.buildsPerDay.map((e)=>{ return e.failed || 0; }) + }] + } + }); + chtBuildsPerJob = new Chart(document.getElementById("chartBpj"), { + type: 'horizontalBar', + data: { + labels: Object.keys(msg.buildsPerJob), + datasets: [{ + label: 'Most runs per job in last 24hrs', + backgroundColor: "lightsteelblue", + data: Object.keys(msg.buildsPerJob).map((e)=>{ return msg.buildsPerJob[e]; }) + }] + } + }); + chtTimePerJob = new Chart(document.getElementById("chartTpj"), { + type: 'horizontalBar', + data: { + labels: Object.keys(msg.timePerJob), + datasets: [{ + label: 'Longest average runtime this week', + backgroundColor: "lightsteelblue", + data: Object.keys(msg.timePerJob).map((e)=>{ return msg.timePerJob[e]; }) + }] } - ); - chtBuildsPerDay = new Chart(document.getElementById("chartBpd").getContext("2d")).Line({ - labels: function() { - res = []; - var now = new Date(); - for (var i = 6; i >= 0; --i) { - var then = new Date(now.getTime() - i * 86400000); - res.push(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][then.getDay()]); - } - return res; - }(), - datasets: [{ - label: "Successful Builds", - fillColor: "rgba(143,188,143,0.65)", //darkseagreen at 0.65 - strokeColor: "forestgreen", - data: msg.buildsPerDay.map(function(e) { - return e.success || 0; - }) - }, { - label: "Failed Bulids", - fillColor: "rgba(233,150,122,0.65)", //darksalmon at 0.65 - strokeColor: "crimson", - data: msg.buildsPerDay.map(function(e) { - return e.failed || 0; - }) - }] - }, { - showTooltips: false }); - chtBuildsPerJob = new Chart(document.getElementById("chartBpj").getContext("2d")).HorizontalBar({ - labels: Object.keys(msg.buildsPerJob), - datasets: [{ - fillColor: "lightsteelblue", - data: Object.keys(msg.buildsPerJob).map(function(e) { - return msg.buildsPerJob[e]; - }) - }] - }, {}); - chtTimePerJob = new Chart(document.getElementById("chartTpj").getContext("2d")).HorizontalBar({ - labels: Object.keys(msg.timePerJob), - datasets: [{ - fillColor: "lightsteelblue", - data: Object.keys(msg.timePerJob).map(function(e) { - return msg.timePerJob[e]; - }) - }] - }, {}); - - }, job_queued: function(data) { state.jobsQueued.splice(0, 0, data); @@ -272,9 +266,9 @@ const Home = function() { }, job_completed: function(data) { if (data.result === "success") - chtBuildsPerDay.datasets[0].points[6].value++; + chtBuildsPerDay.data.datasets[0].data[6]++; else - chtBuildsPerDay.datasets[1].points[6].value++; + chtBuildsPerDay.data.datasets[1].data[6]++; chtBuildsPerDay.update(); for (var i = 0; i < state.jobsRunning.length; ++i) { @@ -287,9 +281,9 @@ const Home = function() { } } updateUtilization(false); - for (var j = 0; j < chtBuildsPerJob.datasets[0].bars.length; ++j) { - if (chtBuildsPerJob.datasets[0].bars[j].label == job.name) { - chtBuildsPerJob.datasets[0].bars[j].value++; + for (var j = 0; j < chtBuildsPerJob.data.datasets[0].data.length; ++j) { + if (chtBuildsPerJob.data.labels[j] == job.name) { + chtBuildsPerJob.data.datasets[0].data[j]++; chtBuildsPerJob.update(); break; } @@ -426,27 +420,27 @@ var Job = function() { state.pages = msg.pages; state.page = msg.page; - var chtBt = new Chart(document.getElementById("chartBt").getContext("2d")).Bar({ - labels: msg.recent.map(function(e) { - return '#' + e.number; - }).reverse(), - datasets: [{ - fillColor: "darkseagreen", - strokeColor: "forestgreen", - data: msg.recent.map(function(e) { - return e.completed - e.started; - }).reverse() - }] - }, { - barValueSpacing: 1, - barStrokeWidth: 1, - barDatasetSpacing: 0 + var chtBt = new Chart(document.getElementById("chartBt"), { + type: 'bar', + data: { + labels: msg.recent.map(function(e) { + return '#' + e.number; + }).reverse(), + datasets: [{ + label: 'Build time', + backgroundColor: (new Array(msg.recent.length)).fill('darkseagreen'), + borderColor: (new Array(msg.recent.length)).fill('forestgreen'), + data: msg.recent.map(function(e) { + return e.completed - e.started; + }).reverse() + }] + } }); for (var i = 0, n = msg.recent.length; i < n; ++i) { if (msg.recent[i].result != "success") { - chtBt.datasets[0].bars[n - i - 1].fillColor = "darksalmon"; - chtBt.datasets[0].bars[n - i - 1].strokeColor = "crimson"; + chtBt.data.datasets[0].backgroundColor[n - i - 1] = "darksalmon"; + chtBt.data.datasets[0].borderColor[n - i - 1] = "crimson"; } } chtBt.update();