From acec508f53196ab26d1db087827de2ddeb26f36a Mon Sep 17 00:00:00 2001
From: Mokaddem <mokaddem.sami@gmail.com>
Date: Thu, 28 Jul 2016 09:52:07 +0200
Subject: [PATCH] fixed multiple binding bug in moduleStats + Added multiple
 bar display for 'other pie part' + Added ModuleStats tab in all other pages

---
 var/www/Flask_server.py                       |  2 +
 var/www/static/js/moduleTrending.js           | 63 +++++++++----------
 var/www/templates/Moduletrending.html         | 16 ++---
 var/www/templates/Trending.html               |  2 +-
 var/www/templates/index.html                  |  1 +
 .../trending_graphs/Moduletrending.html       | 16 ++---
 6 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/var/www/Flask_server.py b/var/www/Flask_server.py
index 30fdb4e2..baae91cf 100755
--- a/var/www/Flask_server.py
+++ b/var/www/Flask_server.py
@@ -196,6 +196,7 @@ def modulesCharts():
         for date in date_range:
             curr_value = r_serv_charts.hget(date, module_name+'-'+keyword_name)
             bar_values.append([date[0:4]+'/'+date[4:6]+'/'+date[6:8], int(curr_value if curr_value is not None else 0)])
+        bar_values.insert(0, keyword_name)
         return jsonify(bar_values)
  
     else:
@@ -220,6 +221,7 @@ def providersChart():
         for date in date_range:
             curr_value = r_serv_charts.hget(keyword_name+'_'+module_name, date)
             bar_values.append([date[0:4]+'/'+date[4:6]+'/'+date[6:8], float(curr_value if curr_value is not None else 0.0)])
+        bar_values.insert(0, keyword_name)
         return jsonify(bar_values)
  
     else:
diff --git a/var/www/static/js/moduleTrending.js b/var/www/static/js/moduleTrending.js
index e43887ec..9d61f518 100644
--- a/var/www/static/js/moduleTrending.js
+++ b/var/www/static/js/moduleTrending.js
@@ -34,17 +34,17 @@ function labelFormatter(label, series) {
 }
 
 
-function plot_top_graph(module_name){
+function plot_top_graph(module_name, init){
 
     /**** Pie Chart ****/
     
     // moduleCharts is used the decide the url to request data
     var moduleCharts = "size" == module_name ? "providersChart" : ("num" == module_name ? "providersChart" : "moduleCharts");
-    var tot_sum = 0; // used to detect elements putted in 'Other' pie's part
-    var data_other = []; // used to detect elements putted in 'Other' pie's part
+    var tot_sum = 0; // used to detect elements placed in 'Other' pie's part
+    var data_other = []; // used to detect elements placed in 'Other' pie's part
 
 
-    $.getJSON($SCRIPT_ROOT+"/_"+moduleCharts+"?moduleName="+module_name+"&num_day="+chart_1_num_day,
+    var createPie = $.getJSON($SCRIPT_ROOT+"/_"+moduleCharts+"?moduleName="+module_name+"&num_day="+chart_1_num_day,
         function(data) {
                   var temp_data_pie = [];
                   for(i=0; i<data.length; i++){
@@ -70,12 +70,14 @@ function plot_top_graph(module_name){
 
                   $.plot($("#flot-pie-chart-"+module_name), temp_data_pie, options);
 
-                  $("#flot-pie-chart-"+module_name).bind("plotclick", function (event, pos, item) {
-                      if (item == null)
-                          return; 
-                      var clicked_label = item.series.label;
-                      update_bar_chart(moduleCharts, "#flot-bar-chart-"+module_name, clicked_label, item.series.color, chart_1_num_day, "%m/%d");
-                  });
+                  if (init){
+                      $("#flot-pie-chart-"+module_name).bind("plotclick", function (event, pos, item) {
+                          if (item == null)
+                              return; 
+                          var clicked_label = item.series.label;
+                          update_bar_chart(moduleCharts, "#flot-bar-chart-"+module_name, clicked_label, item.series.color, chart_1_num_day, "%m/%d");
+                      });
+                  }
     });
     
         
@@ -84,8 +86,8 @@ function plot_top_graph(module_name){
     function update_bar_chart(chartUrl, chartID, involved_item, serie_color, num_day, timeformat){
         var barOptions = {
             series: {
-                bars: { show: false, barWidth: 82800000 },
-                lines: { show: true, fill: true }
+                bars: { show: true, barWidth: 82800000 },
+                lines: { show: false, fill: true }
             },
             xaxis: {
                 mode: "time",
@@ -106,36 +108,33 @@ function plot_top_graph(module_name){
             var all_other_temp_data = [];
             var temp_data_bar = [];
             var promises = []; // Use to plot when everything have been received
+            var involved_item
             for(i=0; i<data_other.length; i++){ // Get data for elements summed up in the part 'Other'
-                promises.push(
-                    $.getJSON($SCRIPT_ROOT+"/_"+chartUrl+"?keywordName="+data_other[i]+"&moduleName="+module_name+"&bar=true"+"&days="+num_day,
+                involved_item = data_other[i];
+                var request = $.getJSON($SCRIPT_ROOT+"/_"+chartUrl+"?keywordName="+involved_item+"&moduleName="+module_name+"&bar=true"+"&days="+num_day,
                         function(data) {
                             temp_data_bar = []
-                            for(i=0; i<data.length; i++){
+                            for(i=1; i<data.length; i++){
                                 var curr_date = data[i][0].split('/');
-                                temp_data_bar.push([new Date(curr_date[0], curr_date[1]-1, curr_date[2]), data[i][1]]);
+                                var offset = (data_other.length/2 - data_other.indexOf(data[0]))*10000000
+                                temp_data_bar.push([new Date(curr_date[0], curr_date[1]-1, curr_date[2]).getTime() + offset, data[i][1]]);
                             }
-                        all_other_temp_data.push(temp_data_bar);
+                            all_other_temp_data.push([ data[0], temp_data_bar ]); 
                         }
-                    )
-                );
-                var barData = {
-                    label: involved_item,
-                    data: all_other_temp_data,
-                    color: serie_color
-                };
+                )
+                promises.push(request);
             }
 
-            $.when.apply($, promises).done( function () {
+            $.when.apply($, promises).done( function (arg) {
                 var dataBar = []
-                for(i=0; i<data_other.length; i++) //format data for the plot
-                    dataBar.push({label: data_other[i], data: all_other_temp_data[i]})
-            
+                for(i=0; i<all_other_temp_data.length; i++) //format data for the plot
+                    dataBar.push({bars: { barWidth: 8280000 }, label: all_other_temp_data[i][0], data: all_other_temp_data[i][1]})
+
                 $.plot($(chartID), dataBar, {
                 	series: {
-                		stack: true,
-                		lines: { show: true, fill: true, steps: false },
-                		bars: { show: false, barWidth: 82800000 },
+                		stack: false,
+                		lines: { show: false, fill: true, steps: false },
+                		bars: { show: true},
                 	},
                     xaxis: {
                         mode: "time",
@@ -158,7 +157,7 @@ function plot_top_graph(module_name){
             $.getJSON($SCRIPT_ROOT+"/_"+chartUrl+"?keywordName="+involved_item+"&moduleName="+module_name+"&bar=true"+"&days="+num_day,
                 function(data) {
                     var temp_data_bar = []
-                    for(i=0; i<data.length; i++){
+                    for(i=1; i<data.length; i++){
                         var curr_date = data[i][0].split('/');
                         temp_data_bar.push([new Date(curr_date[0], curr_date[1]-1, curr_date[2]), data[i][1]]);
                     }
diff --git a/var/www/templates/Moduletrending.html b/var/www/templates/Moduletrending.html
index 66e2f4e4..20fba050 100644
--- a/var/www/templates/Moduletrending.html
+++ b/var/www/templates/Moduletrending.html
@@ -28,7 +28,7 @@
 		  <div class="navbar-header">
 		  <ul class="nav navbar-nav">
 		      <li><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li>
-                      <li class="active"><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li>
+                      <li><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li>
                       <li class="active"><a href="{{ url_for('moduletrending') }}"><i class="glyphicon glyphicon-stats"></i> Modules statistics</a></li>
                   </ul>
           </div>
@@ -62,18 +62,18 @@
         <script src="{{ url_for('static', filename='js/moduleTrending.js') }}"></script>
         <script>
             $(document).ready(function(){
-               refreshPlot(); 
+               refreshPlot(true); 
             });
 
-            function refreshPlot(){
+            function refreshPlot(init){
                 refreshAnimation();
 
-                plot_top_graph("credential");
-                plot_top_graph("mail");
-                plot_top_graph("size");
-                plot_top_graph("num");
+                plot_top_graph("credential", init);
+                plot_top_graph("mail", init);
+                plot_top_graph("size", init);
+                plot_top_graph("num", init);
 
-                setTimeout(refreshPlot, 10000);
+                setTimeout(function(){ refreshPlot(false); }, 10000);
             }
 
             function refreshAnimation(){
diff --git a/var/www/templates/Trending.html b/var/www/templates/Trending.html
index 177e5cc6..26493a87 100644
--- a/var/www/templates/Trending.html
+++ b/var/www/templates/Trending.html
@@ -32,7 +32,7 @@
 		  <ul class="nav navbar-nav">
 		      <li><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li>
                       <li class="active"><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li>
-                      <li class="active"><a href="{{ url_for('moduletrending') }}"><i class="glyphicon glyphicon-stats"></i> Modules statistics</a></li>
+                      <li><a href="{{ url_for('moduletrending') }}"><i class="glyphicon glyphicon-stats"></i> Modules statistics</a></li>
                   </ul>
           </div>
           <!-- /.navbar-top-links -->
diff --git a/var/www/templates/index.html b/var/www/templates/index.html
index f4559450..82448ab7 100644
--- a/var/www/templates/index.html
+++ b/var/www/templates/index.html
@@ -37,6 +37,7 @@
            <ul class="nav navbar-nav">
               <li class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li>
               <li><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li>
+              <li><a href="{{ url_for('moduletrending') }}"><i class="glyphicon glyphicon-stats"></i> Modules statistics</a></li>
            </ul>
         </div>
           <!-- /.navbar-top-links -->
diff --git a/var/www/templates/trending_graphs/Moduletrending.html b/var/www/templates/trending_graphs/Moduletrending.html
index 94dd8c27..9c970d66 100644
--- a/var/www/templates/trending_graphs/Moduletrending.html
+++ b/var/www/templates/trending_graphs/Moduletrending.html
@@ -9,8 +9,8 @@
                     </div>
                     <div class="panel-body">
                         <div class="">
-                            <div class="flot-chart-content col-lg-6" id="flot-pie-chart-credential" style="height:250px; width:48%;"></div>
-                            <div class="flot-chart-content col-lg-6" id="flot-bar-chart-credential" style="height:250px; width:48%;"><div class="alert alert-info">Click on a part</div></div>
+                            <div class="flot-chart-content col-lg-6" id="flot-pie-chart-credential" style="height:250px; width:33%;"></div>
+                            <div class="flot-chart-content col-lg-6" id="flot-bar-chart-credential" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div>
                         </div>
                         <!-- /.row -->
                     </div>
@@ -34,8 +34,8 @@
                     </div>
                     <div class="panel-body">
                         <div class="">
-                            <div class="flot-chart-content col-lg-6" id="flot-pie-chart-mail" style="height:250px; width:48%;"></div>
-                            <div class="flot-chart-content col-lg-6" id="flot-bar-chart-mail" style="height:250px; width:48%;"><div class="alert alert-info">Click on a part</div></div>
+                            <div class="flot-chart-content col-lg-6" id="flot-pie-chart-mail" style="height:250px; width:33%;"></div>
+                            <div class="flot-chart-content col-lg-6" id="flot-bar-chart-mail" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div>
                         </div>
                         <!-- /.row -->
                     </div>
@@ -60,12 +60,12 @@
                     <div class="panel-body">
                         <div class="">
                             <h4>Average paste size by provider </h4>
-                            <div class="flot-chart-content col-lg-6" id="flot-pie-chart-size" style="height:250px; width:48%;"></div>
-                            <div class="flot-chart-content col-lg-6" id="flot-bar-chart-size" style="height:250px; width:48%;"><div class="alert alert-info">Click on a part</div></div>
+                            <div class="flot-chart-content col-lg-6" id="flot-pie-chart-size" style="height:250px; width:33%;"></div>
+                            <div class="flot-chart-content col-lg-6" id="flot-bar-chart-size" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div>
 
                             <h4>Number of paste by provider </h4>
-                            <div class="flot-chart-content col-lg-6" id="flot-pie-chart-num" style="height:250px; width:48%;"></div>
-                            <div class="flot-chart-content col-lg-6" id="flot-bar-chart-num" style="height:250px; width:48%;"><div class="alert alert-info">Click on a part</div></div>
+                            <div class="flot-chart-content col-lg-6" id="flot-pie-chart-num" style="height:250px; width:33%;"></div>
+                            <div class="flot-chart-content col-lg-6" id="flot-bar-chart-num" style="height:250px; width:66%;"><div class="alert alert-info">Click on a part</div></div>
 
                         </div>
                         <!-- /.row -->