build line chart for packages by day

debomatic-webui/public/javascripts/page_history.js

@@ -9,13 +9,37 @@
 function Page_History() {
 
     var distributions_counter = {};
+    var days_counter = {};
+    var all_days = {};
 
-    // init table
+    function _get_short_day(timestamp) {
+        var date = new Date(timestamp * 1000);
+        var locale = navigator.language || 'en-US';
+        var options = {
+            month: "numeric",
+            day: "numeric",
+        };
+        return date.toLocaleDateString(locale, options);
+    }
+
+    // init table and some objects
     for (var i = 0; i < dom_history.length; i++) {
         var p = dom_history[i];
+        var day = _get_short_day(p.start);
+        // count total packages by distributions
         if (distributions_counter.hasOwnProperty(p.distribution))
             distributions_counter[p.distribution]++;
         else distributions_counter[p.distribution] = 1;
+        if (days_counter.hasOwnProperty(p.distribution)) {
+            if (days_counter[p.distribution].hasOwnProperty(day))
+                days_counter[p.distribution][day]++;
+            else
+                days_counter[p.distribution][day] = 1;
+        } else {
+            days_counter[p.distribution] = {};
+            days_counter[p.distribution][day] = 1;
+        }
+        all_days[day] = 0;
         var info = Utils.get_status_icon_and_class(p);
         var label = info.label || 'building';
         var distribution_url = Utils.get_url_to_package({
@@ -58,22 +82,46 @@ function Page_History() {
     $("table input").addClass('form-control');
     $("table select").addClass('form-control');
 
-    // build the graphs
+    // build the distribution Pie graph
     var distributions_data = {
         series: [],
         labels: []
     };
-
+    var all_distibutions = [];
     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] + ")");
+            all_distibutions.push(distro);
         }
     }
 
     Chartist.Pie('#distributions-chart', distributions_data, {
         donut: true,
-        donutWidth: 20,
+        donutWidth: 15,
     });
 
+    // build the days Line graph
+    var days_data = {
+        series: [],
+        labels: []
+    };
+    for (var day in all_days) {
+        if (all_days.hasOwnProperty(day))
+            days_data.labels.push(day);
+    }
+    for (var i = 0; i < all_distibutions.length; i++) {
+        var info = [];
+        var distro = all_distibutions[i];
+        for (var day in all_days) {
+            if (!all_days.hasOwnProperty(day))
+                continue;
+            if (days_counter[distro].hasOwnProperty(day))
+                info.push(days_counter[distro][day]);
+            else
+                info.push(0);
+        }
+        days_data.series.push(info);
+    }
+    Chartist.Line('#days-chart', days_data);
 }

debomatic-webui/public/stylesheets/style.css

@@ -258,12 +258,11 @@ footer .info {
   cursor: pointer;
 }
 
-#charts {
-  margin-bottom: 30px;
-}
-
 .ct-chart {
-  height: 150px;
+  height: 180px;
+  width: 45%;
+  float: left;
+  margin-bottom: 30px;
 }
 
 .ct-chart .ct-label {

debomatic-webui/views/history.ejs

@@ -7,6 +7,7 @@
     </p>
     <script> var dom_history = <%- JSON.stringify(history) %> </script>
     <div id="charts">
+        <div id="days-chart" class="ct-chart"></div>
         <div id="distributions-chart" class="ct-chart"></div>
     </div>
     <table id="history" class="tablesorter">