add chart for distributions in the history page

debomatic-webui/public/javascripts/page_distribution.js

@@ -787,7 +787,7 @@ function Page_Distrubion(socket) {
         // Init sticky-package back_on_top on click
         $('#sticky-package').on('click', function () {
             back_on_top_pressed = true;
-            debug(1, 'back on top pressed, disabling autoscroll')
+            debug(1, 'back on top pressed, disabling autoscroll');
             page.go.up(100);
         });
 

debomatic-webui/public/javascripts/page_history.js

 'use strict';
 
 /* global Utils: false */
-/* global page_generic: false */
+/* global Chartist: false */
 /* global debug: false */
 /* global debug_socket: false */
 /* global dom_history: false */
 
 function Page_History() {
 
+    var distributions_counter = {};
+
     // init table
     for (var i = 0; i < dom_history.length; i++) {
         var p = dom_history[i];
+        if (distributions_counter.hasOwnProperty(p.distribution))
+            distributions_counter[p.distribution]++;
+        else distributions_counter[p.distribution] = 1;
         var info = Utils.get_status_icon_and_class(p);
         var label = info.label || 'building';
-        var row = '<tr>';
         var distribution_url = Utils.get_url_to_package({
             'distribution': p.distribution
         });
+        var row = '<tr>';
         var package_url = Utils.get_url_to_package(p);
         row += '<td><a href="' + distribution_url + '">' + p.distribution + '</a></td>';
         row += '<td><a href="' + package_url + '">' + p.package + '</td>';
@@ -49,7 +54,26 @@ function Page_History() {
         ]
     });
 
-    // add some funcy class to inputs field
+    // add some fancy class to input fields
     $("table input").addClass('form-control');
     $("table select").addClass('form-control');
+
+    // build the graphs
+    var distributions_data = {
+        series: [],
+        labels: []
+    };
+
+    for (var distro in distributions_counter) {
+        if (distributions_counter.hasOwnProperty(distro)) {
+            distributions_data.series.push(distributions_counter[distro]);
+            distributions_data.labels.push(distro + " (" + distributions_counter[distro] + ")");
+        }
+    }
+
+    Chartist.Pie('#distributions-chart', distributions_data, {
+        donut: true,
+        donutWidth: 20,
+    });
+
 }

debomatic-webui/public/stylesheets/style.css

@@ -257,3 +257,15 @@ footer .info {
   padding-top: 10px;
   cursor: pointer;
 }
+
+#charts {
+  margin-bottom: 30px;
+}
+
+.ct-chart {
+  height: 150px;
+}
+
+.ct-chart .ct-label {
+  font-size: 0.9em;
+}

debomatic-webui/views/footer.ejs

@@ -19,6 +19,7 @@
     <script src="/external_libs/tablesorter/jquery.tablesorter.min.js"></script>
     <script src="/external_libs/tablesorter/jquery.tablesorter.widgets.min.js"></script>
     <script src="/external_libs/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
+    <script src="/external_libs/chartist-js-0.1.11/libdist/chartist.min.js"></script>
 
     <script>
     var config = <%- JSON.stringify(web) %>

debomatic-webui/views/header.ejs

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/external_libs/bootstrap-3.2.0-dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="/external_libs/bootstrap-3.2.0-dist/css/bootstrap-theme.min.css">
+    <link rel="stylesheet" href="/external_libs/chartist-js-0.1.11/libdist/chartist.min.css">
     <link rel="stylesheet" href="/external_libs/tablesorter/theme.bootstrap.css">
     <link rel="stylesheet" href="/stylesheets/style.css?<%= version %>">
   </head>

debomatic-webui/views/history.ejs

@@ -6,6 +6,9 @@
         The log of packages
     </p>
     <script> var dom_history = <%- JSON.stringify(history) %> </script>
+    <div id="charts">
+        <div id="distributions-chart" class="ct-chart"></div>
+    </div>
     <table id="history" class="tablesorter">
         <thead>
             <tr>