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 | 4 | |
| 5 | 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 | 16 | var color = d3.scaleOrdinal() |
| 15 | 17 | .range([ |
| ... | ... | @@ -47,20 +49,52 @@ function build_chart(div_selector, data_url) { |
| 47 | 49 | // .offset(d3.stackOffsetNone); |
| 48 | 50 | var stacked_data = stack(data) |
| 49 | 51 | |
| 50 | - // console.log(stacked_data) | |
| 51 | 52 | const x = d3.scaleBand() |
| 52 | 53 | .domain(periods) |
| 53 | 54 | .range([0, width]) |
| 54 | 55 | .padding(0.1); |
| 55 | 56 | |
| 56 | 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 | 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 | 100 | let groups = svg.selectAll("g.category") | ... | ... |