mirror of https://github.com/CIRCL/lookyloo
chg: Use d3js instead of chart.js
Raphaël Vinot
parent
1ad1c50540
commit
28ed2b168c
|
|
@ -0,0 +1,64 @@
|
|||
"use strict";
|
||||
var margin = {top: 50, right: 50, bottom: 50, left: 50};
|
||||
var width = 1000;
|
||||
var height = 100;
|
||||
|
||||
var xScale = d3.scaleLinear()
|
||||
.domain([0, 12])
|
||||
.range([0, width]);
|
||||
|
||||
d3.json('/json/stats').then(json => {
|
||||
for (var year in json['years']) {
|
||||
var dataset = [];
|
||||
for (var month in json['years'][year]) {
|
||||
var i_month = parseInt(month)
|
||||
if (Number.isInteger(i_month)) {
|
||||
dataset.push([month, json['years'][year][month]['analysis']]);
|
||||
height = Math.max(json['years'][year][month]['analysis'] + 50, height);
|
||||
};
|
||||
};
|
||||
var yScale = d3.scaleLinear()
|
||||
.domain([0, height])
|
||||
.range([height, 0]);
|
||||
|
||||
var line = d3.line()
|
||||
.x(d => { return xScale(d[0]); })
|
||||
.y(d => { return yScale(d[1]); })
|
||||
.curve(d3.curveMonotoneX)
|
||||
|
||||
var svg = d3.select(".graphs").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.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);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", `translate(0, ${height})`)
|
||||
.call(d3.axisBottom(xScale));
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(d3.axisLeft(yScale));
|
||||
|
||||
svg.append("path")
|
||||
.datum(dataset)
|
||||
.attr("class", "line")
|
||||
.attr("d", line);
|
||||
|
||||
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);
|
||||
};
|
||||
});
|
||||
|
|
@ -12,11 +12,6 @@
|
|||
{{ bootstrap.load_css() }}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='tree.css') }}">
|
||||
{% endblock %}
|
||||
{% block scripts %}
|
||||
<!-- Optional JavaScript -->
|
||||
{{ bootstrap.load_js() }}
|
||||
{% endblock %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
|
||||
<title>
|
||||
{% block title %}{% endblock%}
|
||||
</title>
|
||||
|
|
@ -28,5 +23,9 @@
|
|||
{% block content %}{% endblock%}
|
||||
</div>
|
||||
|
||||
{% block scripts %}
|
||||
<!-- Optional JavaScript -->
|
||||
{{ bootstrap.load_js() }}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@
|
|||
|
||||
{% block title %}Statistics{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div>
|
||||
{% for weeks in stats['weeks'] %}
|
||||
<h2> Week: {{ weeks['week'] }}</h2>
|
||||
|
|
@ -15,8 +13,8 @@
|
|||
<th>Submissions</th>
|
||||
<th>Submissions with redirects</th>
|
||||
<th>Redirects</th>
|
||||
<th>Uniq urls</th>
|
||||
<th>Uniq domains</th>
|
||||
<th>Unique urls (including redirects)</th>
|
||||
<th>Unique domains (including redirects)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -51,8 +49,8 @@
|
|||
<th>Submissions</th>
|
||||
<th>Submissions with redirects</th>
|
||||
<th>Redirects</th>
|
||||
<th>Uniq urls</th>
|
||||
<th>Uniq domains</th>
|
||||
<th>Unique urls (including redirects)</th>
|
||||
<th>Unique domains (including redirects)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -72,69 +70,11 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% for name, dict_ in stats['years'].items() %}
|
||||
<h5>Total Submissions {{ name }}</h5>
|
||||
<canvas id="global_submissions{{ name }}" width="800" height="350"></canvas>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
new Chart(document.getElementById("global_submissions{{ name }}"), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [
|
||||
{% for monthnumber, month in dict_.items() %}
|
||||
{% if monthnumber is number %}
|
||||
"{{ month_name(monthnumber) }}",
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
datasets: [{
|
||||
label: "{{ name }}",
|
||||
fill: false,
|
||||
backgroundColor:"#FE9700",
|
||||
borderColor:"#FE9700",
|
||||
data: [
|
||||
{% for monthnumber, month in dict_.items() %}
|
||||
{% if monthnumber is number %}
|
||||
"{{ month['analysis'] }}",
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: "Total Submissions {{ name }}"
|
||||
},
|
||||
hover: {
|
||||
animationDuration: 0
|
||||
},
|
||||
animation: {
|
||||
duration: 1,
|
||||
onComplete: function () {
|
||||
var chartInstance = this.chart,
|
||||
ctx = chartInstance.ctx;
|
||||
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'bottom';
|
||||
this.data.datasets.forEach(function (dataset, i) {
|
||||
var meta = chartInstance.controller.getDatasetMeta(i);
|
||||
meta.data.forEach(function (bar, index) {
|
||||
var data = dataset.data[index];
|
||||
ctx.fillText(data, bar._model.x, bar._model.y - 5);
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class='graphs'></div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script src='{{ url_for('static', filename='d3.v6.min.js') }}'></script>
|
||||
<script src='{{ url_for('static', filename='stats_graph.js') }}'></script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue