mirror of https://github.com/CIRCL/AIL-framework
chg: [hashDecoded] add top5 types piechart (v0.1)
parent
f023f41ae5
commit
77211c5496
|
@ -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():
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue