From a827e8ca3a6f876850aed2cd9ee57bee335896fa Mon Sep 17 00:00:00 2001
From: Mokaddem <mokaddem.sami@gmail.com>
Date: Fri, 29 Jul 2016 14:30:41 +0200
Subject: [PATCH] Big refactoring and added lot of comments + fixed bug
 attaching multiple binder on barChart

---
 var/www/static/js/moduleTrending.js           | 232 +++++++++++-------
 .../trending_graphs/Moduletrending.html       |   8 +-
 2 files changed, 141 insertions(+), 99 deletions(-)

diff --git a/var/www/static/js/moduleTrending.js b/var/www/static/js/moduleTrending.js
index afb764c4..076a2e0b 100644
--- a/var/www/static/js/moduleTrending.js
+++ b/var/www/static/js/moduleTrending.js
@@ -5,31 +5,36 @@
 *
 */
 
-var pie_threshold = 0.05
-var options = {
-         series: {  pie: {  show: true,
-                            radius: 3/5,
-                            combine: {
-                                color: '#999',
-                                threshold: pie_threshold
-                            },
-                            label: {
-                                show: true,
-                                radius: 1,
-                                formatter: labelFormatter,
-                                background: {
-                                    opacity: 0.5,
-                                    color: '#000'
+
+/* VARIABLES */
+    var pie_threshold = 0.05
+    var options = {
+             series: {  pie: {  show: true,
+                                radius: 3/5,
+                                combine: {
+                                    color: '#999',
+                                    threshold: pie_threshold
+                                },
+                                label: {
+                                    show: true,
+                                    radius: 1,
+                                    formatter: labelFormatter,
+                                    background: {
+                                        opacity: 0.5,
+                                        color: '#000'
+                                    }
                                 }
                             }
-                        }
-         },
-         grid: { hoverable: true, clickable: true },
-         legend: { show: false  },
-     };
+             },
+             grid: { hoverable: true, clickable: true },
+             legend: { show: false  },
+         };
+    
+    /* Linked graph - remember the data */
+    var plot_data_old = []
+    var plot_old = []
 
-var plot_data_old = []
-var plot_old = []
+/* FUNCTIONS */
 
 function labelFormatter(label, series) {
     return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>"
@@ -37,6 +42,7 @@ function labelFormatter(label, series) {
 }
 
 
+/* Plot, and bind chart listener */
 function plot_top_graph(module_name, init){
 
     /**** Pie Chart ****/
@@ -67,26 +73,31 @@ function plot_top_graph(module_name, init){
                   }
                   for(i=0; i<temp_data_pie.length; i++){ // Detect element below a certain threshold
                       if (parseInt(temp_data_pie[i].data) / tot_sum < pie_threshold)
-                          data_other.splice(i, 0, temp_data_pie[i].label);
+                          data_other.push(temp_data_pie[i].label);
                   }
 
                   $.plot($("#flot-pie-chart-"+module_name), temp_data_pie, options);
 
-                  if (init){
+                  if (init){ //prevent multiple binding due to the refresh function
                       $("#flot-pie-chart-"+module_name).bind("plotclick", function (event, pos, item) {
                           if (item == null)
                               return; 
                           var clicked_label = item.series.label;
                           
-                          if (module_name == "size"){
-                              update_bar_chart(moduleCharts, module_name, "#flot-bar-chart-"+module_name, clicked_label, item.series.color, chart_1_num_day, "%m/%d", false);
-                              update_bar_chart(moduleCharts, "num", "#flot-bar-chart-"+"num", clicked_label, item.series.color, chart_1_num_day, "%m/%d", true);
+                          if (module_name == "size"){ // if Provider pie chart clicked, draw the two bar charts
+                              update_bar_chart(moduleCharts, module_name, "#flot-bar-chart-"+module_name, clicked_label, 
+                                               item.series.color, "%m/%d", false);
+                              update_bar_chart(moduleCharts, "num", "#flot-bar-chart-"+"num", clicked_label,
+                                               item.series.color, "%m/%d", true);
                           }
                           else if (module_name == "num"){
-                              update_bar_chart(moduleCharts, module_name, "#flot-bar-chart-"+module_name, clicked_label, item.series.color, chart_1_num_day, "%m/%d", false);
-                              update_bar_chart(moduleCharts, "size", "#flot-bar-chart-"+"size", clicked_label, item.series.color, chart_1_num_day, "%m/%d", true);
+                              update_bar_chart(moduleCharts, module_name, "#flot-bar-chart-"+module_name, clicked_label, 
+                                               item.series.color, "%m/%d", false);
+                              update_bar_chart(moduleCharts, "size", "#flot-bar-chart-"+"size", clicked_label, 
+                                               item.series.color, "%m/%d", true);
                           } else {
-                              update_bar_chart(moduleCharts, module_name, "#flot-bar-chart-"+module_name, clicked_label, item.series.color, chart_1_num_day, "%m/%d", true);
+                              update_bar_chart(moduleCharts, module_name, "#flot-bar-chart-"+module_name, clicked_label, 
+                                               item.series.color, "%m/%d", true);
                           }                          
                       });
                   }
@@ -95,7 +106,8 @@ function plot_top_graph(module_name, init){
         
     /**** Bar Chart ****/
 
-    function update_bar_chart(chartUrl, module_name, chartID, involved_item, serie_color, num_day, timeformat, can_bind){
+    function update_bar_chart(chartUrl, module_name, chartID, involved_item, serie_color, timeformat, can_bind){
+        var num_day = chart_1_num_day;
         var barOptions = {
             series: {
                 bars: { show: true, barWidth: 82800000 },
@@ -114,11 +126,15 @@ function plot_top_graph(module_name, init){
             },
         };
 
-        if (involved_item == "Other"){ // If part 'Other' has been clicked
-            var all_other_temp_data = [];
-            var temp_data_bar = [];
-            var promises = []; // Use to plot when everything have been received
+        var plot; // will contain the current plotting object
+        /* If part 'Other' has been clicked */
+        if (involved_item == "Other"){
+
+            var all_other_temp_data = []; // the data_bar of all series
+            var temp_data_bar; //the data_bar associated with one serie
+            var promises = []; // Use to plot when everything has been received
             var involved_item
+
             for(i=0; i<data_other.length; i++){ // Get data for elements summed up in the part 'Other'
                 involved_item = data_other[i];
                 var request = $.getJSON($SCRIPT_ROOT+"/_"+chartUrl+"?keywordName="+involved_item+"&moduleName="+module_name+"&bar=true"+"&days="+num_day,
@@ -127,18 +143,23 @@ function plot_top_graph(module_name, init){
                             for(i=1; i<data.length; i++){
                                 var curr_date = data[i][0].split('/');
                                 var offset = (data_other.length/2 - data_other.indexOf(data[0]))*10000000
-                                temp_data_bar.splice(i, 0, [new Date(curr_date[0], curr_date[1]-1, curr_date[2]).getTime() + offset, data[i][1]]);
+                                temp_data_bar.push([new Date(curr_date[0], curr_date[1]-1, curr_date[2]).getTime() + offset, data[i][1]]);
                             }
+                            // Insert temp_data_bar in order so that color and alignement correspond for the provider graphs
                             all_other_temp_data.splice(data_other.indexOf(data[0]), 0, [ data[0], temp_data_bar, data_other.indexOf(data[0])]); 
                         }
                 )
-                promises.splice(i, 0, request);
+                promises.push(request);
             }
+
+            /* When everything has been received, start the plotting process */
             $.when.apply($, promises).done( function (arg) {
                 var dataBar = []
+
                 for(i=0; i<all_other_temp_data.length; i++) //format data for the plot
-                    dataBar.splice(i, 0, {bars: { barWidth: 8280000, order: all_other_temp_data[i][2] }, label: all_other_temp_data[i][0], data: all_other_temp_data[i][1]});
-                var plot = $.plot($(chartID), dataBar, {
+                    dataBar.push({bars: { barWidth: 8280000, order: all_other_temp_data[i][2] }, label: all_other_temp_data[i][0], data: all_other_temp_data[i][1]});
+
+                plot = $.plot($(chartID), dataBar, {
                     series: {
                     	stack: false,
                     	lines: { show: false, fill: true, steps: false },
@@ -162,22 +183,23 @@ function plot_top_graph(module_name, init){
                     tooltipOpts: { content: "x: %x, y: %y" },
                     colors: ["#72a555", "#ab62c0", "#c57c3c", "#638ccc", "#ca5670"]
                 })
-                if (plot_data_old.length<2){
-                    plot_data_old.push(plot.getData()); 
-                    plot_old.push(plot); 
-                } else {
+
+ 
+                /* rememeber the data for the two graph */
+                if (plot_data_old.length>1){ // avoid adding plot_data for previous clicked pie part
                     plot_data_old = [];
                     plot_old = [];
-                    plot_data_old.push(plot.getData());
-                    plot_old.push(plot);
                 }
-                if (can_bind){
+                plot_data_old.push(plot.getData());
+                plot_old.push(plot);
+
+                if (can_bind){ // avoid binding two listener for provider graphs
                     binder(module_name);
-                    if (module_name == "size")
+                    if (module_name == "size") // bind the linked provider graph
                         binder("num");
                     else if (module_name == "num")
                         binder("size");
-                }
+                }               
 
             });
 
@@ -195,80 +217,100 @@ function plot_top_graph(module_name, init){
                         data: temp_data_bar,
                         color: serie_color
                     };
-                    var plot = $.plot($(chartID), [barData], barOptions);
-                    if (plot_data_old.length<2){
-                        plot_data_old.push(plot.getData()); 
-                        plot_old.push(plot); 
-                    } else {
+                    plot = $.plot($(chartID), [barData], barOptions);
+
+                    /* rememeber the data for the two graph */
+                    if (plot_data_old.length>1){ // avoid adding plot_data for previous clicked pie part
                         plot_data_old = [];
                         plot_old = [];
-                        plot_data_old.push(plot.getData());
-                        plot_old.push(plot);
                     }
-                    if (can_bind){
-                        binder(module_name);
-                        if (module_name == "size")
-                            binder("num");
-                        else if (module_name == "num")
-                            binder("size");
-                    }
-                });
-        }
-    };
-}
+                    plot_data_old.push(plot.getData());
+                    plot_old.push(plot);
 
+                    if (can_bind){ // avoid binding two listener for provider graphs
+                        $("#flot-bar-chart-"+module_name).unbind( "plothover.customHandler" );
+                        binder(module_name);
+                        if (module_name == "size"){ // bind the linked provider graph
+                            $("#flot-bar-chart-"+"num").unbind( "plothover.customHandler" );
+                            binder("num");
+                        }
+                        else if (module_name == "num"){
+                            $("#flot-bar-chart-"+"size").unbind( "plothover.customHandler" );
+                            binder("size");
+                        }
+                    }
+               });
+       }
+    
+    }; // end update_bar_chart
+
+} // end plot_top_graph
+
+
+/* Bind a listener to the graph to display the value under the cursor in the approriate div */
 function binder(module_name){
-    $("#flot-bar-chart-"+module_name).bind("plothover", function (event, pos, item) {
-       if (item) {
+    $("#flot-bar-chart-"+module_name).bind("plothover.customHandler", function (event, pos, item) {
+       if (item) { // a correct item is hovered
            var x = item.datapoint[0]
            var y = item.datapoint[1]
            var date = new Date(parseInt(x));
            var formated_date = date.getMonth()+'/'+date.getDate();
+           var color = item.series.color;
+           var color_opac = "rgba" +  color.slice(3, color.length-1)+",0.15)";
     
+           // display the hovered value in the chart div
            $("#tooltip_graph-"+module_name).html(item.series.label + " of " + formated_date + " = <b>" + y+"</b>")
-               .css({padding: "2px", width: 'auto', 'background-color': 'white', 'border': "3px solid "+item.series.color})
+               .css({padding: "2px", width: 'auto', 'background': color_opac , 'border': "3px solid "+color})
                .fadeIn(200);
-           var plot_obj = plot_data_old[0]; //contain series
-           for(serie=0; serie<plot_obj.length; serie++){
-               var data_other = plot_obj[serie].data;
-               for(i=0; i<data_other.length; i++){
-                   if (data_other[i][0] == date.getTime()){
-                       if(y == data_other[i][1]){ // Avoid swap due to race condition
-                           var other_graph_plot = plot_old[1];
-                           var curr_data_other = plot_data_old[1][serie].data[i][1];
-                           var datapoint = i;
-                           var the_serie = serie;
-                       } else {
-                           var other_graph_plot = plot_old[0];
-                           var curr_data_other = data_other[i][1];
+
+
+           /* If provider bar chart hovered, highlight and display associated value */
+           if (module_name == "size" || module_name == "num"){ 
+               new_module_name = module_name == "size" ? "num" : "size";
+
+               /* Used to get the corresponding associated value for providers charts */
+               var plot_obj = plot_data_old[0]; //contain series
+
+               for(serie=0; serie<plot_obj.length; serie++){ //for all series
+                   var data_other = plot_obj[serie].data;
+
+                   for(i=0; i<data_other.length; i++){ //for all datapoints
+                       if (data_other[i][0] == date.getTime()){
+                           if(y == data_other[i][1]){ // get the correct data and plot object
+                               var other_graph_plot = plot_old[1];
+                               var curr_data_other = plot_data_old[1][serie].data[i][1];
+                           } else {
+                               var other_graph_plot = plot_old[0];
+                               var curr_data_other = data_other[i][1];
+                           }
                            var datapoint = i;
                            var the_serie = serie;
                        }
                    }
                }
-           }
-           if (module_name == "size"){
-               $("#tooltip_graph-"+"num").html(item.series.label + " of " + formated_date + " = <b>" + curr_data_other+"</b>")
-                   .css({padding: "2px", width: 'auto', 'background-color': 'white', 'border': "3px solid "+item.series.color})
-                   .fadeIn(200);
-               for(i=0; i<data_other.length; i++)
-                   for(s=0; s<plot_obj.length; s++)
-                       other_graph_plot.unhighlight(s, i);
-               other_graph_plot.highlight(the_serie, datapoint);
-           }
-           else if (module_name == "num"){
-               $("#tooltip_graph-"+"size").html(item.series.label + " of " + formated_date + " = <b>" + curr_data_other+"</b>")
-                   .css({padding: "2px", width: 'auto', 'background-color': 'white', 'border': "3px solid "+item.series.color})
+
+               $("#tooltip_graph-"+new_module_name).html(item.series.label + " of " + formated_date + " = <b>" + curr_data_other+"</b>")
+                   .css({padding: "2px", width: 'auto', 'background': color_opac, 'border': "3px solid "+color})
                    .fadeIn(200);
+
+               // clean up other highlighted bar
+
                for(i=0; i<data_other.length; i++)
                    for(s=0; s<plot_obj.length; s++)
                        other_graph_plot.unhighlight(s, i);
+
                other_graph_plot.highlight(the_serie, datapoint);
+
            }
+
        } else {
+           // No correct item hovered, clean up the highlighted one
            for(i=0; i<plot_old.length; i++)
                for(j=0; j<plot_data_old[0][0].data.length; j++)
                    plot_old[i].unhighlight(0, j);
        }
     });
 }
+function plot_finished(module_name){
+        
+    }
diff --git a/var/www/templates/trending_graphs/Moduletrending.html b/var/www/templates/trending_graphs/Moduletrending.html
index ca5f2152..85579435 100644
--- a/var/www/templates/trending_graphs/Moduletrending.html
+++ b/var/www/templates/trending_graphs/Moduletrending.html
@@ -9,7 +9,7 @@
                     </div>
                     <div class="panel-body">
                         <div class="col-lg-12">
-                            <div class="flot-chart-content pull-right" id='tooltip_graph-credential' align="right"></div>
+                            <div class="flot-chart-content pull-right" id='tooltip_graph-credential' align="right">No bar hovered</div>
                         </div>
                         <div class="row">
                             <div class="flot-chart-content col-lg-6" id="flot-pie-chart-credential" style="height:250px; width:33%;"></div>
@@ -37,7 +37,7 @@
                     </div>
                     <div class="panel-body">
                         <div class="col-lg-12">
-                            <div class="flot-chart-content pull-right" id='tooltip_graph-mail' align="right"></div>
+                            <div class="flot-chart-content pull-right" id='tooltip_graph-mail' align="right">No bar hovered</div>
                         </div>
                         <div class="row">
                             <div class="flot-chart-content col-lg-6" id="flot-pie-chart-mail" style="height:250px; width:33%;"></div>
@@ -67,7 +67,7 @@
                         <div class="">
                             <div class="col-lg-12">
                                 <h4 class="col-lg-3">Average paste size by provider </h4>
-                                <div class="flot-chart-content pull-right" id='tooltip_graph-size' align="right"></div>
+                                <div class="flot-chart-content pull-right" id='tooltip_graph-size' align="right">No bar hovered</div>
                             </div>
                             <div class="row">
                                 <div class="flot-chart-content col-lg-6" id="flot-pie-chart-size" style="height:250px; width:33%;"></div>
@@ -76,7 +76,7 @@
 
                             <div class="col-lg-12">
                                 <h4 class="col-lg-3">Number of paste by provider </h4>
-                                <div class="flot-chart-content pull-right" id='tooltip_graph-num' align="right"></div>
+                                <div class="flot-chart-content pull-right" id='tooltip_graph-num' align="right">No bar hovered</div>
                             </div>
                             <div class="row">
                                 <div class="flot-chart-content col-lg-6" id="flot-pie-chart-num" style="height:250px; width:33%;"></div>