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

@@ -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
+file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js
-        js/Chart.min.js EXPECTED_MD5 0d3004601c1a855a3d203502549528a7)
+        js/Chart.min.js EXPECTED_MD5 f6c8efa65711e0cbbc99ba72997ecd0e)
-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://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

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);
 }
 

src/resources/index.html

@@ -12,7 +12,6 @@
  <script src="/js/vue-router.min.js"></script>
  <script src="/js/ansi_up.js"></script>
  <script src="/js/Chart.min.js"></script>
- <script src="/js/Chart.HorizontalBar.js"></script>
  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link href="/custom/style.css" rel="stylesheet">
  <script src="/js/app.js" defer></script>

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.data.datasets[0].data[0] += busy ? 1 : -1;
-    chtUtilization.segments[1].value -= busy ? 1 : -1;
+    chtUtilization.data.datasets[0].data[1] -= busy ? 1 : -1;
     chtUtilization.update();
   }
 
@@ -196,23 +196,20 @@ const Home = function() {
         this.$forceUpdate();
 
         // setup charts
-        chtUtilization = new Chart(document.getElementById("chartUtil").getContext("2d")).Pie(
+        chtUtilization = new Chart(document.getElementById("chartUtil"), {
-          [{
+          type: 'pie',
-              value: msg.executorsBusy,
+          data: {
-              color: "tan",
+            labels: ["Busy", "Idle"],
-              label: "Busy"
+            datasets: [{
-            },
+              data: [ msg.executorsBusy, msg.executorsTotal - msg.executorsBusy ],
-            {
+              backgroundColor: ["tan", "darkseagreen"]
-              value: msg.executorsTotal - msg.executorsBusy,
+            }]
-              color: "darkseagreen",
-              label: "Idle"
           }
-          ], {
+        });
-            animationEasing: 'easeInOutQuad'
+        chtBuildsPerDay = new Chart(document.getElementById("chartBpd"), {
-          }
+          type: 'line',
-        );
+          data: {
-        chtBuildsPerDay = new Chart(document.getElementById("chartBpd").getContext("2d")).Line({
+            labels: (()=>{
-          labels: function() {
               res = [];
               var now = new Date();
               for (var i = 6; i >= 0; --i) {
@@ -220,45 +217,42 @@ const Home = function() {
                 res.push(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][then.getDay()]);
               }
               return res;
-          }(),
+            })(),
             datasets: [{
-            label: "Successful Builds",
+              label: 'Successful Builds',
-            fillColor: "rgba(143,188,143,0.65)", //darkseagreen at 0.65
+              backgroundColor: "rgba(143,188,143,0.65)", //darkseagreen at 0.65
-            strokeColor: "forestgreen",
+              borderColor: "forestgreen",
-            data: msg.buildsPerDay.map(function(e) {
+              data: msg.buildsPerDay.map((e)=>{ return e.success || 0; })
-              return e.success || 0;
-            })
             }, {
-            label: "Failed Bulids",
+              label: 'Failed Builds',
-            fillColor: "rgba(233,150,122,0.65)", //darksalmon at 0.65
+              backgroundColor: "rgba(233,150,122,0.65)", //darkseagreen at 0.65
-            strokeColor: "crimson",
+              borderColor: "crimson",
-            data: msg.buildsPerDay.map(function(e) {
+              data: msg.buildsPerDay.map((e)=>{ return e.failed || 0; })
-              return e.failed || 0;
-            })
             }]
-        }, {
+          }
-          showTooltips: false
         });
-        chtBuildsPerJob = new Chart(document.getElementById("chartBpj").getContext("2d")).HorizontalBar({
+        chtBuildsPerJob = new Chart(document.getElementById("chartBpj"), {
+          type: 'horizontalBar',
+          data: {
             labels: Object.keys(msg.buildsPerJob),
             datasets: [{
-            fillColor: "lightsteelblue",
+              label: 'Most runs per job in last 24hrs',
-            data: Object.keys(msg.buildsPerJob).map(function(e) {
+              backgroundColor: "lightsteelblue",
-              return msg.buildsPerJob[e];
+              data: Object.keys(msg.buildsPerJob).map((e)=>{ return msg.buildsPerJob[e]; })
-            })
             }]
-        }, {});
+          }
-        chtTimePerJob = new Chart(document.getElementById("chartTpj").getContext("2d")).HorizontalBar({
+        });
+        chtTimePerJob = new Chart(document.getElementById("chartTpj"), {
+          type: 'horizontalBar',
+          data: {
             labels: Object.keys(msg.timePerJob),
             datasets: [{
-            fillColor: "lightsteelblue",
+              label: 'Longest average runtime this week',
-            data: Object.keys(msg.timePerJob).map(function(e) {
+              backgroundColor: "lightsteelblue",
-              return msg.timePerJob[e];
+              data: Object.keys(msg.timePerJob).map((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) {
+        for (var j = 0; j < chtBuildsPerJob.data.datasets[0].data.length; ++j) {
-          if (chtBuildsPerJob.datasets[0].bars[j].label == job.name) {
+          if (chtBuildsPerJob.data.labels[j] == job.name) {
-            chtBuildsPerJob.datasets[0].bars[j].value++;
+            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({
+        var chtBt = new Chart(document.getElementById("chartBt"), {
+          type: 'bar',
+          data: {
             labels: msg.recent.map(function(e) {
               return '#' + e.number;
             }).reverse(),
             datasets: [{
-            fillColor: "darkseagreen",
+              label: 'Build time',
-            strokeColor: "forestgreen",
+              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()
             }]
-        }, {
+          }
-          barValueSpacing: 1,
-          barStrokeWidth: 1,
-          barDatasetSpacing: 0
         });
 
         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.data.datasets[0].backgroundColor[n - i - 1] = "darksalmon";
-            chtBt.datasets[0].bars[n - i - 1].strokeColor = "crimson";
+            chtBt.data.datasets[0].borderColor[n - i - 1] = "crimson";
           }
         }
         chtBt.update();