diff --git a/app/main/templates/agent.html b/app/main/templates/agent.html
index 293641f..455f73c 100644
--- a/app/main/templates/agent.html
+++ b/app/main/templates/agent.html
@@ -48,6 +48,8 @@
width = 900 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
+ const tooltip_offset = {dx: 300, dy: 120}
+
const x = d3.scaleBand()
.range([0, width])
.padding(0.2);
@@ -97,10 +99,20 @@
.domain(periods)
.range([0, width])
.padding(0.2)
-
- svg.append('g')
- .attr('transform', 'translate(20, ' + height + ')')
- .call(d3.axisBottom(x).tickSizeOuter(0));
+ // 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(20, ' + height + ')')
+ // .call(d3.axisBottom(x).tickSizeOuter(0));
+ svg.append("g")
+ .attr("transform", "translate(20," + height + ")")
+ .call(d3.axisBottom(x).tickSize(5))
+ .selectAll("text")
+ .style("text-anchor", "end")
+ .attr("dx", "-.8em")
+ .attr("dy", ".15em")
+ .attr("transform", "rotate(-65)");
var y = d3.scaleLinear()
.domain([0, 100])
@@ -110,6 +122,15 @@
.attr('transform', 'translate(20, 0)')
.call(d3.axisLeft(y))
+
+ svg.append("text")
+ .attr("text-anchor", "end")
+ .attr("transform", "rotate(-90)")
+ .attr("y", -margin.left + 60)
+ .attr("x", -margin.top - 70)
+ .text("Charge (ETP)")
+
+
var color = d3.scaleOrdinal()
.domain(projects)
.range(['#e41a1c', '#377eb8', '#4daf4a',
@@ -160,8 +181,8 @@
var mousemove = function (e, d) {
tooltip
- .style("left", (e.x - 400) + "px")
- .style("top", (e.y - 90) + "px")
+ .style("left", (e.x - tooltip_offset.dx) + "px")
+ .style("top", (e.y - tooltip_offset.dy) + "px")
}
var mouseleave = function (d) {
@@ -174,11 +195,12 @@
var mouseover = function (e, d) {
var project_name = d3.select(this.parentNode).datum().key
var project_charge = d.data[project_name]
- tooltip.transition()
+ tooltip
+ .transition()
.duration(200)
.style("opacity", 1);
tooltip
- .html("Project: " + project_name + "
" + "Charge: " + project_charge+"%")
+ .html("Project: " + project_name + "
" + "Charge: " + project_charge + "%")
.style("left", (e.x - 400) + "px")
.style("top", (e.y - 90) + "px");
}
--
libgit2 0.21.2