Commit 68fd83a86b398672e34851d28d9740bd0488e11b
1 parent
df22e6dd
Exists in
master
and in
4 other branches
Add axis
Showing
1 changed file
with
46 additions
and
12 deletions
Show diff stats
app/main/static/js/charges.js
| @@ -4,12 +4,14 @@ var margin = {top: 30, right: 30, bottom: 130, left: 90}, | @@ -4,12 +4,14 @@ var margin = {top: 30, right: 30, bottom: 130, left: 90}, | ||
| 4 | 4 | ||
| 5 | const tooltip_offset = {dx: 300, dy: 120} | 5 | const tooltip_offset = {dx: 300, dy: 120} |
| 6 | 6 | ||
| 7 | -const x = d3.scaleBand() | ||
| 8 | - .range([0, width]) | ||
| 9 | - .padding(0.2); | ||
| 10 | - | ||
| 11 | -const y = d3.scaleLinear() | ||
| 12 | - .range([height, 0]); | 7 | +// TODO: set main scales attr here then domain later |
| 8 | +// const x = d3.scaleBand() | ||
| 9 | +// .range([0, width]) | ||
| 10 | +// .padding(0.2); | ||
| 11 | +// | ||
| 12 | +// const y = d3.scaleLinear() | ||
| 13 | +// .range([height, 0]); | ||
| 14 | +// | ||
| 13 | 15 | ||
| 14 | var color = d3.scaleOrdinal() | 16 | var color = d3.scaleOrdinal() |
| 15 | .range([ | 17 | .range([ |
| @@ -47,20 +49,52 @@ function build_chart(div_selector, data_url) { | @@ -47,20 +49,52 @@ function build_chart(div_selector, data_url) { | ||
| 47 | // .offset(d3.stackOffsetNone); | 49 | // .offset(d3.stackOffsetNone); |
| 48 | var stacked_data = stack(data) | 50 | var stacked_data = stack(data) |
| 49 | 51 | ||
| 50 | - // console.log(stacked_data) | ||
| 51 | const x = d3.scaleBand() | 52 | const x = d3.scaleBand() |
| 52 | .domain(periods) | 53 | .domain(periods) |
| 53 | .range([0, width]) | 54 | .range([0, width]) |
| 54 | .padding(0.1); | 55 | .padding(0.1); |
| 55 | 56 | ||
| 56 | y_max = d3.max(stacked_data[stacked_data.length - 1], d => d[1]); | 57 | y_max = d3.max(stacked_data[stacked_data.length - 1], d => d[1]); |
| 57 | - if ( y_max == 0 ) { | ||
| 58 | - console.log(y_max) | ||
| 59 | - y_max = height | 58 | + if (y_max == 0) { |
| 59 | + y_max = 100 | ||
| 60 | } | 60 | } |
| 61 | + | ||
| 61 | const y = d3.scaleLinear() | 62 | const y = d3.scaleLinear() |
| 62 | - .domain([0, y_max]) | ||
| 63 | - .range([height, 0]); | 63 | + .range([height, 0]) |
| 64 | + .domain([0, y_max]); | ||
| 65 | + | ||
| 66 | + // Sur l'axe horizontal, on filtre les dates afficher | ||
| 67 | + const xAxis = d3.axisBottom(x) | ||
| 68 | + // .tickValues(x.domain().filter(d => (d.includes("06/0") || d.includes("21/0")))); | ||
| 69 | + | ||
| 70 | + const yAxis = d3.axisLeft(y) | ||
| 71 | + svg.append("g") | ||
| 72 | + .attr("class", "x axis") | ||
| 73 | + .attr("transform", "translate(0," + height + ")") | ||
| 74 | + .call(xAxis) | ||
| 75 | + .selectAll("text") | ||
| 76 | + .style("text-anchor", "end") | ||
| 77 | + .attr("dx", "-.9em") | ||
| 78 | + .attr("dy", ".15em") | ||
| 79 | + .attr("transform", "rotate(-65)"); | ||
| 80 | + | ||
| 81 | + svg.append("g") | ||
| 82 | + .attr("class", "y axis") | ||
| 83 | + .call(yAxis) | ||
| 84 | + // .append("text") | ||
| 85 | + // .attr("fill", "#000") | ||
| 86 | + // .attr("transform", "rotate(-90)") | ||
| 87 | + // .attr("y", 6) | ||
| 88 | + // .attr("dy", "0.91em") | ||
| 89 | + // .style("text-anchor", "end") | ||
| 90 | + // .text("rate"); | ||
| 91 | + | ||
| 92 | + svg.append("text") | ||
| 93 | + .attr("text-anchor", "end") | ||
| 94 | + .attr("transform", "rotate(-90)") | ||
| 95 | + .attr("y", -margin.left + 40) | ||
| 96 | + .attr("x", -margin.top - 70) | ||
| 97 | + .text("Charge (% ETP)") | ||
| 64 | 98 | ||
| 65 | 99 | ||
| 66 | let groups = svg.selectAll("g.category") | 100 | let groups = svg.selectAll("g.category") |