Add a ring chart when comparing branches

app/app.py

@@ -81,6 +81,16 @@ def appci_compare(ref, target):
         ref_r.level_compare = next((r.level for r in target_results
                                                 if r.app == ref_r.app),
                                     -1)
+        if ref_r.level == -1 or ref_r.level_compare == -1:
+            ref_r.compare = "unknown"
+        elif ref_r.level == ref_r.level_compare:
+            ref_r.compare = "same"
+        elif ref_r.level > ref_r.level_compare:
+            ref_r.compare = "regression"
+        elif ref_r.level < ref_r.level_compare:
+            ref_r.compare = "improvement"
+        else:
+            ref_r.compare = "unknown"
 
     return render_template("appci_compare.html", ref=ref,
                                                  target=target,

app/templates/appci_compare.html

@@ -2,6 +2,7 @@
 {% block content %}
 
 <h2 class="text-center my-3">{{ ref.display_name }} vs. {{ target.display_name }}</h2>
+<div id="compareSummary" style="height: 270px;" class="col-sm-6 offset-sm-3 my-3"></div>
 
 <div class="row">
     <div class="mx-auto">
@@ -17,7 +18,7 @@
                 </thead>
                 <tbody>
                 {% for result in results %}
-                <tr app="{{ result.app.name }}">
+                <tr class="ci-branch-comparison" value="{{ result.compare }}" app="{{ result.app.name }}">
                     <td class="ci-app-row-title">
                         {% if result.app.list.name == "official" %}
                             <span class="official-star oi oi-star" title="Official" aria-hidden="true"></span>
@@ -52,4 +53,30 @@
     </div>
 </div>
 
+<script src="{{ url_for('static', filename='js/canvasjs.min.js') }}"></script>
+<script>
+window.onload = function () {
+  var chart = new CanvasJS.Chart("compareSummary", {
+      animationEnabled: false,
+      data: [{
+          type: "doughnut",
+          startAngle: -90,
+          //innerRadius: 60,
+          indexLabelFontSize: 17,
+          indexLabel: "{label} - #percent%",
+          toolTipContent: "<b>{label}:</b> {y} (#percent%)",
+          dataPoints: [
+              { y: $(".ci-branch-comparison[value=unknown]").length, label: "Unknown", color:"#cccccc" },
+              { y: $(".ci-branch-comparison[value=regression]").length,  label: "Regressions", color: "#d9534f" },
+              { y: $(".ci-branch-comparison[value=same]").length,  label: "Same", color: "#67e0d0" },
+              { y: $(".ci-branch-comparison[value=improvement]").length,  label: "Improvements", color: "#46bd32" }
+          ]
+      }]
+  });
+  chart.render();
+}
+</script>
+
+
+
 {% endblock %}