From 77211c54967a867bd29edd65fa8b8fe28929cc3b Mon Sep 17 00:00:00 2001
From: Terrtia <or1994@hotmail.fr>
Date: Mon, 24 Dec 2018 11:42:55 +0100
Subject: [PATCH] chg: [hashDecoded] add top5 types piechart (v0.1)

---
 .../modules/hashDecoded/Flask_hashDecoded.py  |  57 ++++++++
 .../hashDecoded/templates/hashDecoded.html    | 125 ++++++++++--------
 2 files changed, 124 insertions(+), 58 deletions(-)

diff --git a/var/www/modules/hashDecoded/Flask_hashDecoded.py b/var/www/modules/hashDecoded/Flask_hashDecoded.py
index b1823449..62a32f75 100644
--- a/var/www/modules/hashDecoded/Flask_hashDecoded.py
+++ b/var/www/modules/hashDecoded/Flask_hashDecoded.py
@@ -404,6 +404,63 @@ def decoder_type_json():
         to_json.append({'name': decoder, 'value': nb_decoded[decoder]})
     return jsonify(to_json)
 
+@hashDecoded.route('/hashDecoded/top5_type_json')
+def top5_type_json():
+    date_from = request.args.get('date_from')
+    date_to = request.args.get('date_to')
+
+    typ = request.args.get('type')
+    decoder = request.args.get('encoding')
+
+    if decoder == 'All encoding' or decoder is None:
+        all_decoder = r_serv_metadata.smembers('all_decoder')
+    else:
+        if not r_serv_metadata.sismember('all_decoder', decoder):
+            return jsonify({'Error': 'This decoder do not exist'})
+        else:
+            all_decoder = [decoder]
+
+    if typ == 'All types' or typ is None or typ=='None':
+        all_type = r_serv_metadata.smembers('hash_all_type')
+    else:
+        typ = typ.replace(' ', '+')
+        if not r_serv_metadata.sismember('hash_all_type', typ):
+            return jsonify({'Error': 'This type do not exist'})
+        else:
+            all_type = [typ]
+
+    date_range = []
+    if date_from is not None and date_to is not None:
+        #change format
+        try:
+            if len(date_from) != 8:
+                date_from = date_from[0:4] + date_from[5:7] + date_from[8:10]
+                date_to = date_to[0:4] + date_to[5:7] + date_to[8:10]
+            date_range = substract_date(date_from, date_to)
+        except:
+            pass
+
+    if not date_range:
+        date_range.append(datetime.date.today().strftime("%Y%m%d"))
+
+    # TODO replace with ZUNIONSTORE
+    nb_types_decoded = {}
+    for date in date_range:
+        for typ in all_type:
+            for decoder in all_decoder:
+                nb_decoded = r_serv_metadata.zscore('{}_type:{}'.format(decoder, typ), date)
+                if nb_decoded is not None:
+                    if typ in nb_types_decoded:
+                        nb_types_decoded[typ] = nb_types_decoded[typ] + int(nb_decoded)
+                    else:
+                        nb_types_decoded[typ] = int(nb_decoded)
+
+    to_json = []
+    top5_types = sorted(nb_types_decoded, key=nb_types_decoded.get, reverse=True)[:5]
+    for typ in top5_types:
+        to_json.append({'name': typ, 'value': nb_types_decoded[typ]})
+    return jsonify(to_json)
+
 
 @hashDecoded.route('/hashDecoded/daily_type_json')
 def daily_type_json():
diff --git a/var/www/modules/hashDecoded/templates/hashDecoded.html b/var/www/modules/hashDecoded/templates/hashDecoded.html
index ce05332e..19ddcdaf 100644
--- a/var/www/modules/hashDecoded/templates/hashDecoded.html
+++ b/var/www/modules/hashDecoded/templates/hashDecoded.html
@@ -136,6 +136,8 @@
 									</div>
 								</div>
 								<div id="pie_chart_encoded">
+			          </div>
+								<div id="pie_chart_top5_types">
 			          </div>
 							</div>
 						</div>
@@ -257,9 +259,12 @@
 										{% elif  daily_type_chart %}
 										chart.stackBarChart =barchart_type_stack("{{ url_for('hashDecoded.range_type_json') }}?date_from={{daily_date}}&date_to={{daily_date}}", 'id');
 										{% else %}
-										chart.stackBarChart = barchart_type_stack("{{ url_for('hashDecoded.range_type_json') }}?date_from={{date_from}}&date_to={{date_to}}", 'id')
+										chart.stackBarChart = barchart_type_stack("{{ url_for('hashDecoded.range_type_json') }}?date_from={{date_from}}&date_to={{date_to}}", 'id');
 										{% endif %}
 
+										draw_pie_chart("pie_chart_encoded" ,"{{ url_for('hashDecoded.decoder_type_json') }}?date_from={{date_from}}&date_to={{date_to}}&type={{type}}", "{{ url_for('hashDecoded.hashDecoded_page') }}?date_from={{date_from}}&date_to={{date_to}}&type={{type}}&encoding=");
+										draw_pie_chart("pie_chart_top5_types" ,"{{ url_for('hashDecoded.top5_type_json') }}?date_from={{date_from}}&date_to={{date_to}}&type={{type}}", "{{ url_for('hashDecoded.hashDecoded_page') }}?date_from={{date_from}}&date_to={{date_to}}&type=");
+
 										chart.onResize();
 										$(window).on("resize", function() {
 											chart.onResize();
@@ -507,79 +512,83 @@ window.chart = chart;
 </script>
 
 <script>
+function draw_pie_chart(id, url_json, pie_on_click_url) {
 
-var width_pie = 200;
-var height_pie = 200;
-var padding_pie = 10;
-var opacity_pie = .8;
+		var width_pie = 200;
+		var height_pie = 200;
+		var padding_pie = 10;
+		var opacity_pie = .8;
 
-var radius_pie = Math.min(width_pie - padding_pie, height_pie - padding_pie) / 2;
-//var color_pie = d3.scaleOrdinal(d3.schemeCategory10);
-var color_pie = d3.scaleOrdinal(d3.schemeSet3);
+		var radius_pie = Math.min(width_pie - padding_pie, height_pie - padding_pie) / 2;
+		//var color_pie = d3.scaleOrdinal(d3.schemeCategory10);
+		var color_pie = d3.scaleOrdinal(d3.schemeSet3);
 
-var div_pie = d3.select("body").append("div")
-		.attr("class", "tooltip")
-		.style("opacity", 0);
+		var div_pie = d3.select("body").append("div")
+				.attr("class", "tooltip")
+				.style("opacity", 0);
 
-var svg_pie = d3.select("#pie_chart_encoded")
-		.append('svg')
-		.attr("width", '100%')
-		.attr("height", '100%')
-		.attr('viewBox','0 0 '+Math.min(width_pie,height_pie) +' '+Math.min(width_pie,height_pie) )
-		.attr('preserveAspectRatio','xMinYMin')
+		var svg_pie = d3.select("#"+id)
+				.append('svg')
+				.attr("width", '100%')
+				.attr("height", '100%')
+				.attr('viewBox','0 0 '+Math.min(width_pie,height_pie) +' '+Math.min(width_pie,height_pie) )
+				.attr('preserveAspectRatio','xMinYMin')
 
 
-var g_pie = svg_pie.append('g')
-		.attr('transform', 'translate(' + (width_pie/2) + ',' + (height_pie/2) + ')');
+		var g_pie = svg_pie.append('g')
+				.attr('transform', 'translate(' + (width_pie/2) + ',' + (height_pie/2) + ')');
 
-var arc_pie = d3.arc()
-		.innerRadius(0)
-		.outerRadius(radius_pie);
+		var arc_pie = d3.arc()
+				.innerRadius(0)
+				.outerRadius(radius_pie);
 
-d3.json("{{ url_for('hashDecoded.decoder_type_json') }}?date_from={{date_from}}&date_to={{date_to}}&type={{type}}")
-	.then(function(data){
+		d3.json(url_json)
+			.then(function(data){
 
-	var pie_pie = d3.pie()
-			.value(function(d) { return d.value; })
-			.sort(null);
+			var pie_pie = d3.pie()
+					.value(function(d) { return d.value; })
+					.sort(null);
 
-	var path_pie = g_pie.selectAll('path')
-		  .data(pie_pie(data))
-		  .enter()
-		  .append("g")
-		  .append('path')
-		  .attr('d', arc_pie)
-		  .attr('fill', (d,i) => color_pie(i))
-			.attr('class', 'pie_path')
-			.on("mouseover", mouseovered_pie)
-			.on("mouseout", mouseouted_pie)
-			.on("click", function (d) {window.location.href = "{{ url_for('hashDecoded.hashDecoded_page') }}?date_from={{date_from}}&date_to={{date_to}}&type={{type}}&encoding="+d.data.name })
-		  .style('opacity', opacity_pie)
-		  .style('stroke', 'white');
-	});
+			var path_pie = g_pie.selectAll('path')
+				  .data(pie_pie(data))
+				  .enter()
+				  .append("g")
+				  .append('path')
+				  .attr('d', arc_pie)
+				  .attr('fill', (d,i) => color_pie(i))
+					.attr('class', 'pie_path')
+					.on("mouseover", mouseovered_pie)
+					.on("mouseout", mouseouted_pie)
+					.on("click", function (d) {window.location.href = pie_on_click_url+d.data.name })
+				  .style('opacity', opacity_pie)
+				  .style('stroke', 'white');
+			});
 
-function mouseovered_pie(d) {
 
-	// tooltip
-	var content;
+		function mouseovered_pie(d) {
 
-	content = "<b>"+d.data.name+"</b>"+"<br/>"+
-						"<br/>"+
-						"<i>Decoded</i>: "+d.data.value+"<br/>"
+			// tooltip
+			var content;
 
-	div_pie.transition()
-		.duration(200)
-		.style("opacity", .9);
-	div_pie.html(content)
-		.style("left", (d3.event.pageX) + "px")
-		.style("top", (d3.event.pageY - 28) + "px");
+			content = "<b>"+d.data.name+"</b>"+"<br/>"+
+								"<br/>"+
+								"<i>Decoded</i>: "+d.data.value+"<br/>"
+
+			div_pie.transition()
+				.duration(200)
+				.style("opacity", .9);
+			div_pie.html(content)
+				.style("left", (d3.event.pageX) + "px")
+				.style("top", (d3.event.pageY - 28) + "px");
+		}
+
+		function mouseouted_pie() {
+			div_pie.transition()
+				.duration(500)
+				.style("opacity", 0);
+		}
 }
 
-function mouseouted_pie() {
-	div_pie.transition()
-		.duration(500)
-		.style("opacity", 0);
-}
 </script>