Switch from Google Chart API to bundled charts.js

This is for the donut chart in the bulk build overview page that gives the number of OK and failed packages. chart.js uses canvas instead of svg, which is faster in theory. It is also not deprecated, contrary to the Google Chart API. And the app no longer needs the Google JSAPI at all! Fixes issue #46
bsiegert · May 20, 2024 · 3f717dc · 3f717dc
1 parent 598f680
commit 3f717dc
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 29 deletions.
diff --git a/templates/bulk_build_info.html b/templates/bulk_build_info.html
@@ -18,40 +18,37 @@
 	  {{end}}
 	</dl>
       </div>
-      <div class="col-md-3"><div id="bulk-pie"></div></div>
+      <div class="col-md-3">
+	<canvas id="bulk-pie" width="180" height="180"></canvas>
+      </div>
     </div>
     <div class="row">
       <script type="text/javascript">
-	google.load('visualization', '1.0', {'packages':['corechart']});
 
-	function drawBulkPiechart() {
+	$(function() {
 	  // Create and populate the data table.
-	  var data = google.visualization.arrayToDataTable([
-	    ['Number', 'Status'],
-	    ['ok', {{.NumOk}}],
-	    ['prefailed', {{.NumPrefailed}}],
-	    ['indirect-failed', {{.NumIndirectFailed}}],
-	    ['failed', {{.NumFailed}}],
-	  ]);
+	  var data = {
+	    labels: ['OK', 'prefailed', 'indirect-failed', 'failed'],
+	    datasets: [{
+	      backgroundColor: ['green', 'blue', 'orange', 'red'],
+	      borderWidth: 1,
+	      data: [{{.NumOk}}, {{.NumPrefailed}}, {{.NumIndirectFailed}}, {{.NumFailed}}],
+	    }],
+	  };
 
 	  // Create and draw the visualization.
-	  new google.visualization.PieChart(document.getElementById('bulk-pie')).
-	    draw(data, {
-	      pieHole: 0.4,
-	      pieSliceText: 'value',
-	      chartArea: {
-		width: 120,
-		height: 120,
-	      },
-	      title: 'Build Status',
-	      legend: { position: 'none' },
-	      slices: {
-		0: { color: 'green' },
-		1: { color: 'blue' },
-		2: { color: 'orange' },
-		3: { color: 'red' },
+	  new Chart(document.getElementById('bulk-pie'), {
+	    type: 'doughnut',
+	    data: data,
+	    options: {
+	      animation: false,
+	      responsive: false,
+	      plugins: {
+		legend: {
+		  display: false,
+		},
 	      },
-	    });
-	}
-	google.setOnLoadCallback(drawBulkPiechart);
+	    },
+	  });
+	});
       </script>
diff --git a/templates/header.html b/templates/header.html
@@ -30,7 +30,8 @@
   <script src="{{.BasePath}}static/jquery.dataTables.min.js"></script>
   <script src="{{.BasePath}}static/dataTables.bootstrap.js"></script>
   <script src="{{.BasePath}}static/select2.min.js"></script>
-  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+  <script src="{{.BasePath}}static/chart.umd.min.js"></script>
+  <!--<script type="text/javascript" src="https://www.google.com/jsapi"></script>-->
   <div style="background:#F26711; padding: 20px; margin-bottom: 20px">
   <div class="pull-left" style="padding-right: 20px">
     <a href="{{.BasePath}}"><img src="{{.BasePath}}static/pkgsrc-white.png" width="64px" height="64px"></a>