chg: [hashDecoded] add top5 types piechart (v0.1)

This commit is contained in:
Terrtia 2018-12-24 11:42:55 +01:00
parent f023f41ae5
commit 77211c5496
No known key found for this signature in database
GPG key ID: 1E1B1F50D84613D0
2 changed files with 124 additions and 58 deletions

View file

@ -404,6 +404,63 @@ def decoder_type_json():
to_json.append({'name': decoder, 'value': nb_decoded[decoder]}) to_json.append({'name': decoder, 'value': nb_decoded[decoder]})
return jsonify(to_json) 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') @hashDecoded.route('/hashDecoded/daily_type_json')
def daily_type_json(): def daily_type_json():

View file

@ -136,6 +136,8 @@
</div> </div>
</div> </div>
<div id="pie_chart_encoded"> <div id="pie_chart_encoded">
</div>
<div id="pie_chart_top5_types">
</div> </div>
</div> </div>
</div> </div>
@ -257,9 +259,12 @@
{% elif daily_type_chart %} {% elif daily_type_chart %}
chart.stackBarChart =barchart_type_stack("{{ url_for('hashDecoded.range_type_json') }}?date_from={{daily_date}}&date_to={{daily_date}}", 'id'); chart.stackBarChart =barchart_type_stack("{{ url_for('hashDecoded.range_type_json') }}?date_from={{daily_date}}&date_to={{daily_date}}", 'id');
{% else %} {% 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 %} {% 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(); chart.onResize();
$(window).on("resize", function() { $(window).on("resize", function() {
chart.onResize(); chart.onResize();
@ -507,79 +512,83 @@ window.chart = chart;
</script> </script>
<script> <script>
function draw_pie_chart(id, url_json, pie_on_click_url) {
var width_pie = 200; var width_pie = 200;
var height_pie = 200; var height_pie = 200;
var padding_pie = 10; var padding_pie = 10;
var opacity_pie = .8; var opacity_pie = .8;
var radius_pie = Math.min(width_pie - padding_pie, height_pie - padding_pie) / 2; 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.schemeCategory10);
var color_pie = d3.scaleOrdinal(d3.schemeSet3); var color_pie = d3.scaleOrdinal(d3.schemeSet3);
var div_pie = d3.select("body").append("div") var div_pie = d3.select("body").append("div")
.attr("class", "tooltip") .attr("class", "tooltip")
.style("opacity", 0); .style("opacity", 0);
var svg_pie = d3.select("#pie_chart_encoded") var svg_pie = d3.select("#"+id)
.append('svg') .append('svg')
.attr("width", '100%') .attr("width", '100%')
.attr("height", '100%') .attr("height", '100%')
.attr('viewBox','0 0 '+Math.min(width_pie,height_pie) +' '+Math.min(width_pie,height_pie) ) .attr('viewBox','0 0 '+Math.min(width_pie,height_pie) +' '+Math.min(width_pie,height_pie) )
.attr('preserveAspectRatio','xMinYMin') .attr('preserveAspectRatio','xMinYMin')
var g_pie = svg_pie.append('g') var g_pie = svg_pie.append('g')
.attr('transform', 'translate(' + (width_pie/2) + ',' + (height_pie/2) + ')'); .attr('transform', 'translate(' + (width_pie/2) + ',' + (height_pie/2) + ')');
var arc_pie = d3.arc() var arc_pie = d3.arc()
.innerRadius(0) .innerRadius(0)
.outerRadius(radius_pie); .outerRadius(radius_pie);
d3.json("{{ url_for('hashDecoded.decoder_type_json') }}?date_from={{date_from}}&date_to={{date_to}}&type={{type}}") d3.json(url_json)
.then(function(data){ .then(function(data){
var pie_pie = d3.pie() var pie_pie = d3.pie()
.value(function(d) { return d.value; }) .value(function(d) { return d.value; })
.sort(null); .sort(null);
var path_pie = g_pie.selectAll('path') var path_pie = g_pie.selectAll('path')
.data(pie_pie(data)) .data(pie_pie(data))
.enter() .enter()
.append("g") .append("g")
.append('path') .append('path')
.attr('d', arc_pie) .attr('d', arc_pie)
.attr('fill', (d,i) => color_pie(i)) .attr('fill', (d,i) => color_pie(i))
.attr('class', 'pie_path') .attr('class', 'pie_path')
.on("mouseover", mouseovered_pie) .on("mouseover", mouseovered_pie)
.on("mouseout", mouseouted_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 }) .on("click", function (d) {window.location.href = pie_on_click_url+d.data.name })
.style('opacity', opacity_pie) .style('opacity', opacity_pie)
.style('stroke', 'white'); .style('stroke', 'white');
}); });
function mouseovered_pie(d) {
// tooltip function mouseovered_pie(d) {
var content;
content = "<b>"+d.data.name+"</b>"+"<br/>"+ // tooltip
"<br/>"+ var content;
"<i>Decoded</i>: "+d.data.value+"<br/>"
div_pie.transition() content = "<b>"+d.data.name+"</b>"+"<br/>"+
.duration(200) "<br/>"+
.style("opacity", .9); "<i>Decoded</i>: "+d.data.value+"<br/>"
div_pie.html(content)
.style("left", (d3.event.pageX) + "px") div_pie.transition()
.style("top", (d3.event.pageY - 28) + "px"); .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> </script>