Commit cfc5bded2cfaa338b02905fed0247f356c00e7d9
1 parent
207a8628
Exists in
master
and in
4 other branches
More chart classes (svg, button)
Showing
2 changed files
with
18 additions
and
11 deletions
Show diff stats
app/main/static/css/charges.css
| ... | ... | @@ -45,7 +45,7 @@ |
| 45 | 45 | padding: 0.8em; |
| 46 | 46 | } |
| 47 | 47 | |
| 48 | -.charge_chart svg { | |
| 48 | +.svg_chart { | |
| 49 | 49 | background-color: #fAfAfA; |
| 50 | 50 | border: 1pt solid black; |
| 51 | 51 | display: inline-block; |
| ... | ... | @@ -53,10 +53,11 @@ |
| 53 | 53 | |
| 54 | 54 | text.legend { |
| 55 | 55 | font-size: 12px; |
| 56 | + font-family: sans-serif; | |
| 56 | 57 | } |
| 57 | 58 | |
| 58 | 59 | rect.legend { |
| 59 | - stroke: white; | |
| 60 | + stroke: grey; | |
| 60 | 61 | stroke-width: 0.5pt; |
| 61 | 62 | } |
| 62 | 63 | |
| ... | ... | @@ -87,3 +88,8 @@ rect.bar:hover { |
| 87 | 88 | max-width: 300px; |
| 88 | 89 | pointer-events: none; |
| 89 | 90 | } |
| 91 | + | |
| 92 | +button.export { | |
| 93 | + float: right; | |
| 94 | + margin-right: 0; | |
| 95 | +} | |
| 90 | 96 | \ No newline at end of file | ... | ... |
app/main/static/js/charges.js
| ... | ... | @@ -65,18 +65,19 @@ function build_chart(div_selector, data_url, entity_name, category_type) { |
| 65 | 65 | alert("ALERT ! Every body shall quit the boat, we are sinking ! ALERT !") |
| 66 | 66 | } |
| 67 | 67 | |
| 68 | + // Create a download button inside the div contaning svg chart | |
| 69 | + var dl_btn = d3.select(div_selector).append("button") | |
| 70 | + .text('png') | |
| 71 | + .attr('class', 'export') | |
| 72 | + .on('click', download_png) | |
| 73 | + | |
| 68 | 74 | const svg = d3.select(div_selector).append("svg") |
| 69 | - .attr("id", "svg") | |
| 75 | + .attr("class", "svg_chart") | |
| 70 | 76 | .attr("width", width + margin.left + margin.right) |
| 71 | 77 | .attr("height", height + margin.top + margin.bottom) |
| 72 | 78 | .append("g") |
| 73 | 79 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
| 74 | 80 | |
| 75 | - // Create a download button inside the div contaning svg chart | |
| 76 | - var dl_btn = d3.select(div_selector).append("button") | |
| 77 | - .text('png') | |
| 78 | - .on('click', download_png) | |
| 79 | - | |
| 80 | 81 | const tooltip = d3.select('html') |
| 81 | 82 | .append("div") |
| 82 | 83 | .style("opacity", 0) |
| ... | ... | @@ -158,7 +159,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) { |
| 158 | 159 | .attr('width', legendRectSize) |
| 159 | 160 | .attr('height', legendRectSize) |
| 160 | 161 | .style('fill', color_scale) |
| 161 | - .style('stroke', color_scale); | |
| 162 | + .attr('class', 'legend'); | |
| 162 | 163 | |
| 163 | 164 | legend.append('text') |
| 164 | 165 | .attr('class', 'legend') |
| ... | ... | @@ -393,7 +394,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) { |
| 393 | 394 | |
| 394 | 395 | // Draw Xaxis |
| 395 | 396 | svg.append("g") |
| 396 | - .attr("class", "x axis") | |
| 397 | + .attr("class", "x_axis") | |
| 397 | 398 | .attr("transform", "translate(0," + height + ")") |
| 398 | 399 | .call(xAxis) |
| 399 | 400 | .selectAll("text") |
| ... | ... | @@ -409,7 +410,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) { |
| 409 | 410 | |
| 410 | 411 | // Draw Yaxis |
| 411 | 412 | svg.append("g") |
| 412 | - .attr("class", "y axis") | |
| 413 | + .attr("class", "y_axis") | |
| 413 | 414 | .call(yAxis) |
| 414 | 415 | |
| 415 | 416 | // Draw horizontal lines | ... | ... |