agent.html
3.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
{% extends "base_page.html" %}
{% block more_heads %}
<style type="text/css">
#charge_div {
background-color: #fAfAfA;
border: 1pt solid black;
display: inline-block;
}
rect.bar:hover {
fill: dimgrey;
}
rect.bar {
fill: rgb(127, 127, 159);
}
.tooltip {
position: absolute;
opacity: 0.8;
z-index: 1000;
text-align: left;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding: 8px;
color: #fff;
background-color: #000;
font: 12px sans-serif;
max-width: 300px;
}
</style>
{% endblock %}
{% block content %}
<div id="charge_div"></div>
{% endblock %}
{% block more_scripts %}
{% include 'd3js-includes.html' %}
<script>
const margin = {top: 40, right: 40, bottom: 90, left: 120},
width = 900 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const x = d3.scaleBand()
.range([0, width])
.padding(0.1);
const y = d3.scaleLinear()
.range([height, 0]);
const svg = d3.select("#charge_div").append("svg")
.attr("id", "svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// On demande à D3JS de charger notre fichier
d3.json("{{url_for('main.charge_agent', agent_id=agent.id)}}").then(data => {
// Conversion des caractères en nombres
data.forEach(d => d.charge = +d.charge);
// Mise en relation du scale avec les données de notre fichier
// Pour l'axe X, c'est la liste des pays
// Pour l'axe Y, c'est le max des charge
x.domain(data.map(d => d.periode));
y.domain([0, d3.max(data, d => d.charge)]);
// Ajout de l'axe X au SVG
// Déplacement de l'axe horizontal et du futur texte (via la fonction translate) au bas du SVG
// Selection des noeuds text, positionnement puis rotation
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickSize(10))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
// Ajout de l'axe Y au SVG avec 6 éléments de légende en utilisant la fonction ticks (sinon D3JS en place autant qu'il peut).
svg.append("g")
.call(d3.axisLeft(y).ticks(6));
// Ajout des bars en utilisant les données de notre fichier data.tsv
// La largeur de la barre est déterminée par la fonction x
// La hauteur par la fonction y en tenant compte de la charge
// La gestion des events de la souris pour le popup
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", d => x(d.periode))
.attr("width", x.bandwidth())
.attr("y", d => y(d.charge))
.attr("height", d => height - y(d.charge))
.on("mouseover", function (e, d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html("Charge: " + d.charge)
.style("left", (e.x + 10) + "px")
.style("top", (e.y - 50) + "px");
})
.on("mouseout", function (d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
});
</script>
{% endblock %}