From 24318f6a8678582936ec4c8e1e1fdf26312d1a84 Mon Sep 17 00:00:00 2001
From: Mokaddem <mokaddem.sami@gmail.com>
Date: Wed, 10 Aug 2016 10:42:06 +0200
Subject: [PATCH] Added the part 'other' in Trending chartscd

---
 var/www/Flask_server.py             |   1 +
 var/www/static/js/moduleTrending.js |  10 +--
 var/www/static/js/trendingchart.js  | 129 +++++++++++++++++++++++++---
 var/www/templates/Trending.html     |   4 +-
 4 files changed, 123 insertions(+), 21 deletions(-)

diff --git a/var/www/Flask_server.py b/var/www/Flask_server.py
index 254b3d2d..8e9f8c23 100755
--- a/var/www/Flask_server.py
+++ b/var/www/Flask_server.py
@@ -235,6 +235,7 @@ def progressionCharts():
         for date in date_range:
             curr_value = r_serv_charts.hget(attribute_name, date)
             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, attribute_name)
         return jsonify(bar_values)
  
     else:
diff --git a/var/www/static/js/moduleTrending.js b/var/www/static/js/moduleTrending.js
index 6333c02b..1a10e616 100644
--- a/var/www/static/js/moduleTrending.js
+++ b/var/www/static/js/moduleTrending.js
@@ -59,16 +59,16 @@ function plot_top_graph(module_name, init){
                       if (i==0 && data[0][0] == "passed_days"){ // If there is no data today, take it from the past
                          if (data[0][1] > 0 && data[0][1] < 7){ // If data is [1:6] day(s) old, put the panel in yellow
                              $("#day-"+module_name).text(data[0][1] + " Day(s) ago "); 
-                             $("#panel-"+module_name).removeClass("panel-green")
-                             $("#panel-"+module_name).addClass("panel-yellow")
+                             $("#panel-"+module_name).removeClass("panel-green");
+                             $("#panel-"+module_name).addClass("panel-yellow");
                          } else if (data[0][1] > 6) { // data old of more than 7 days, put the panel in red
                              $("#day-"+module_name).text(data[0][1] + " Day(s) ago "); 
-                             $("#panel-"+module_name).removeClass("panel-green")
-                             $("#panel-"+module_name).addClass("panel-red")
+                             $("#panel-"+module_name).removeClass("panel-green");
+                             $("#panel-"+module_name).addClass("panel-red");
                          }
                       } else {
                           temp_data_pie.push({label: data[i][0], data: data[i][1]});
-                          tot_sum += data[i][1]
+                          tot_sum += data[i][1];
                       }
                   }
                   for(i=0; i<temp_data_pie.length; i++){ // Detect element below a certain threshold
diff --git a/var/www/static/js/trendingchart.js b/var/www/static/js/trendingchart.js
index 0afda40b..793a9779 100644
--- a/var/www/static/js/trendingchart.js
+++ b/var/www/static/js/trendingchart.js
@@ -6,14 +6,42 @@
 *
 */
 
-function plot_top_graph(trendingName){
+function plot_top_graph(trendingName, init){
     /**** Flot Pie Chart ****/
+    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
+
+    var pie_threshold = 0.05
     var options = {
-                      series: {  pie: {  show: true  } },
+                      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  }
                   };
     
+    function labelFormatter(label, series) {
+        return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>"
+               + label + "<br/>" + Math.round(series.percent) + "%</div>";
+    }
+
+
     
     // Graph1
     $.getJSON($SCRIPT_ROOT+"/_progressionCharts?trendingName="+trendingName+"&num_day="+chart_1_num_day,
@@ -21,18 +49,27 @@ function plot_top_graph(trendingName){
                   temp_data_pie = [];
                   for(i=0; i<data.length; i++){
                       temp_data_pie.push({label: data[i][0], data: data[i][1]});
+                      tot_sum += data[i][1];
                   }
+
+                  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.push(temp_data_pie[i].label);
+                  }
+
                   $.plot($("#flot-pie-chart1-"+trendingName), temp_data_pie, options);
 
-                  setTimeout(function() { 
-                     $("#flot-pie-chart1-"+trendingName).bind("plotclick", function (event, pos, item) {
-                         if (item == null)
-                             return; 
-                         var clicked_label = item.series.label;
-                         update_bar_chart("#flot-bar-chart1-"+trendingName, clicked_label, item.series.color, chart_1_num_day, "%m/%d");
-                         update_bar_chart("#flot-bar-chart2-"+trendingName, clicked_label, item.series.color, chart_2_num_day);
-                     });
-                  }, 500);
+                  if (init){ //prevent multiple binding due to the refresh function
+                      setTimeout(function() { 
+                         $("#flot-pie-chart1-"+trendingName).bind("plotclick", function (event, pos, item) {
+                             if (item == null)
+                                 return; 
+                             var clicked_label = item.series.label;
+                             update_bar_chart("#flot-bar-chart1-"+trendingName, clicked_label, item.series.color, chart_1_num_day, "%m/%d");
+                             update_bar_chart("#flot-bar-chart2-"+trendingName, clicked_label, item.series.color, chart_2_num_day);
+                         });
+                      }, 500);
+                  }
     });
     
         
@@ -54,12 +91,74 @@ function plot_top_graph(trendingName){
             tooltipOpts: { content: "x: %x, y: %y" }
         };
     
-        $.getJSON($SCRIPT_ROOT+"/_progressionCharts?attributeName="+involved_item+"&bar=true"+"&days="+num_day,
+        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+"/_progressionCharts?attributeName="+involved_item+"&bar=true"+"&days="+num_day,
+                        function(data) {
+                            temp_data_bar = []
+                            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.push([new Date(curr_date[0], curr_date[1]-1, curr_date[2]).getTime() + offset, data[i][1].toFixed(2)]);
+                                //console.log(new Date(curr_date[0], curr_date[1]-1, curr_date[2]).getTime() + offset);
+                                
+                            }
+                            // 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.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.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($(chartID), dataBar, {
+                    series: {
+                    	stack: false,
+                    	lines: { show: false, fill: true, steps: false },
+                    	bars: { show: true},
+                    },
+                    xaxis: {
+                        mode: "time",
+                        timeformat: timeformat,
+                        tickSize: [1, 'day'],
+                        minTickSize: [1, "day"]
+                    },
+                    yaxis: {
+                        //transform: function (v) { return v < 1 ? v : Math.log(v); }
+                    },
+                    grid: { hoverable: true },
+                    legend: { show: true,
+                      noColumns: 1,
+                      position: "nw"
+                    },
+                    tooltip: true,
+                    tooltipOpts: { content: "x: %x, y: %y" },
+                    colors: ["#72a555", "#ab62c0", "#c57c3c", "#638ccc", "#ca5670"]
+                })
+
+            });
+
+        } else {
+
+            $.getJSON($SCRIPT_ROOT+"/_progressionCharts?attributeName="+involved_item+"&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]]);
+                    temp_data_bar.push([new Date(curr_date[0], curr_date[1]-1, curr_date[2]).getTime(), data[i][1].toFixed(2)]);
                 }
                 var barData = {
                     label: involved_item,
@@ -68,5 +167,7 @@ function plot_top_graph(trendingName){
                 };
                 $.plot($(chartID), [barData], barOptions);
             });
+
+        }// end else
     };
 };
diff --git a/var/www/templates/Trending.html b/var/www/templates/Trending.html
index edd9ecc8..f8dd8fc0 100644
--- a/var/www/templates/Trending.html
+++ b/var/www/templates/Trending.html
@@ -109,14 +109,14 @@ $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
             var active_tab_name = "tld";    //Avoid a redraw of the graph is the tab is not active
             function refresh_top_chart(attr_name, immediate){
                 if (immediate){
-                    plot_top_graph(attr_name);
+                    plot_top_graph(attr_name, true);
                 }
                 setTimeout(function() {
                     $("[flash-"+attr_name+"]").css('color', '#fece00');
                     setTimeout(function() { $("[flash-"+attr_name+"]").css('color', 'black'); }, 1000);
                     refresh_top_chart(attr_name, false);
                     if (active_tab_name == attr_name) 
-                        plot_top_graph(attr_name);
+                        plot_top_graph(attr_name, false);
                 }, refresh_interval);
             }
         </script>