CIRCL
/
lookyloo
mirror of https://github.com/CIRCL/lookyloo
2
0
Fork 0
Code Issues Releases Wiki Activity

chg: make stats graph more generic

pull/135/head
Raphaël Vinot 2020-12-07 13:25:16 +01:00
parent 7bba854e0a
commit 48f370f471
3 changed files with 59 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
website/web/static/stats.css
View File

@ -1,20 +0,0 @@
.line {
fill: none;
stroke: #ffab00;
stroke-width: 3;
}
.overlay {
fill: none;
pointer-events: all;
}
.dot {
fill: #ffab00;
stroke: #fff;
}
.focus circle {
fill: none;
stroke: steelblue;
}

78
website/web/static/stats_graph.js
View File

@ -1,61 +1,67 @@
"use strict";
var margin = {top: 50, right: 50, bottom: 50, left: 50};
var margin = {top: 50, right: 150, bottom: 50, left: 50};
var width = 1000;
var height = 100;
var height = 800;
var xScale = d3.scaleLinear()
.domain([0, 12])
.range([0, width]);
d3.json('/json/stats').then(json => {
json['years'].forEach(year => {
var dataset = [];
year['months'].forEach(month => {
dataset.push([month['month_number'], month['analysis']]);
height = Math.max(month['analysis'] + 50, height);
var datasets = []
json.years.forEach(year => {
var data_year = { label: `Analysis ${year.year}`, x: [], y: [] }
year.months.forEach(month => {
data_year.x.push(month.month_number)
data_year.y.push(month.analysis)
});
var yScale = d3.scaleLinear()
.domain([0, height])
datasets.push(data_year)
});
var x_scale = d3.scaleLinear()
.domain([0, 12])
.range([0, width]);
var y_scale = d3.scaleLinear()
.domain([ 0,
d3.max(datasets, function(d) { return d3.max(d.y); })
])
.range([height, 0]);
var x_axis = d3.axisBottom(x_scale);
var y_axis = d3.axisLeft(y_scale);
var line = d3.line()
.x(d => { return xScale(d[0]); })
.y(d => { return yScale(d[1]); })
.curve(d3.curveMonotoneX)
.x(d => { return x_scale(d[0]); })
.y(d => { return y_scale(d[1]); });
var svg = d3.select(".graphs").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "20px")
.text(year['year']);
svg.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(xScale));
.call(x_axis);
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(yScale));
.call(y_axis);
svg.append("path")
.datum(dataset)
var data_lines = svg.selectAll(".d3_xy_chart_line")
.data(datasets.map(d => {return d3.zip(d.x, d.y);}))
.enter().append("g")
.attr("class", "d3_xy_chart_line") ;
data_lines.append("path")
.attr("class", "line")
.attr("d", line);
.attr("d", line)
.attr("stroke", (_, i) => {return d3.schemeCategory10[i];});
data_lines.append("text")
.datum((d, i) => { return {name: datasets[i].label, final: d[d.length-1]}; })
.attr("transform", d => {
return ( `translate(${x_scale(d.final[0])}, ${y_scale(d.final[1])})` ) ; })
.attr("x", 3)
.attr("dy", ".35em")
.attr("fill", (_, i) =>{ return d3.schemeCategory10[i]; })
.text(d => { return d.name; }) ;
svg.selectAll(".dot")
.data(dataset)
.enter().append("circle")
.attr("class", "dot")
.attr("cx", d => { return xScale(d[0]) })
.attr("cy", d => { return yScale(d[1]) })
.attr("r", 5);
});
});

5
website/web/templates/stats.html
View File

@ -76,8 +76,3 @@
<script src='{{ url_for('static', filename='d3.v6.min.js') }}'></script>
<script src='{{ url_for('static', filename='stats_graph.js') }}'></script>
{% endblock %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='stats.css') }}">
{% endblock %}