Commit a30b11ffc2d188552e6b2252290d3ba5fe67e8c5
Committed by
hitier
1 parent
ef2e820d
Exists in
master
and in
4 other branches
Add an 'export menu' button
Included in any graphs allow to choose the export format
Showing
3 changed files
with
82 additions
and
9 deletions
Show diff stats
app/main/static/css/charges.css
... | ... | @@ -90,7 +90,53 @@ rect.bar:hover { |
90 | 90 | pointer-events: none; |
91 | 91 | } |
92 | 92 | |
93 | -button.export { | |
94 | - float: right; | |
95 | - margin-right: 0; | |
93 | +i.export { | |
94 | + padding: 7px; | |
95 | + position: absolute; | |
96 | + margin-top:8px; | |
97 | + right: 3%; | |
98 | +} | |
99 | + | |
100 | +i.export:hover { | |
101 | + background: lightgrey; | |
102 | + border-radius: 2px; | |
103 | +} | |
104 | + | |
105 | +.tooltip_hamburger { | |
106 | + border-radius: 0px; | |
107 | + box-shadow: 2px 2px 2px 2px darkgrey; | |
108 | + right: 2%; | |
109 | + pointer-events: auto; | |
110 | + width: 150px; | |
111 | + margin-top:15px; | |
112 | + padding: 0; | |
113 | +} | |
114 | + | |
115 | +.tooltip_hamburger li { | |
116 | + list-style: none; | |
117 | + padding: 5px; | |
118 | + cursor: pointer; | |
119 | + pointer-events: auto; | |
120 | +} | |
121 | + | |
122 | +.tooltip_hamburger li:hover { | |
123 | + background-color: lightgrey; | |
124 | +} | |
125 | + | |
126 | +.tooltip_hamburger span { | |
127 | + width: 90%; | |
128 | + padding: 5px; | |
129 | + margin-left: 5px; | |
130 | + display: block; | |
131 | + border-bottom: 1px solid grey; | |
132 | +} | |
133 | + | |
134 | +.rectmouseleave { | |
135 | + width: 200px; | |
136 | + height: 150px; | |
137 | + position: absolute; | |
138 | + padding: 10px; | |
139 | + top:0; | |
140 | + right: 0; | |
141 | + /*background-color: #0b2e13;*/ | |
96 | 142 | } |
97 | 143 | \ No newline at end of file | ... | ... |
app/main/static/js/charges.js
... | ... | @@ -65,11 +65,39 @@ 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 | + // Configure the tooltip to export svg to png or csv | |
69 | + var update_export_menu = function (e, d) { | |
70 | + | |
71 | + const tooltip_test = document.getElementsByClassName('tooltip_hamburger'); | |
72 | + | |
73 | + if (tooltip_test.length == 0) { | |
74 | + d3.select(".tooltip_hamburger").remove(); | |
75 | + | |
76 | + const tooltip_hamburger = hamburger.append("div") | |
77 | + .style("opacity", 0) | |
78 | + .attr("class", "tooltip tooltip_hamburger"); | |
79 | + | |
80 | + d3.select(this).transition() | |
81 | + .duration(1) | |
82 | + tooltip_hamburger | |
83 | + .transition() | |
84 | + .duration(200) | |
85 | + .style("opacity", 1) | |
86 | + tooltip_hamburger | |
87 | + .html("<span>Export </span>" + | |
88 | + "<li>To CSV</li>" + | |
89 | + "<li id='to_png'>To PNG</li>") | |
90 | + d3.select("#to_png").on("click", download_png); | |
91 | + } else { | |
92 | + d3.select(".tooltip_hamburger").remove(); | |
93 | + } | |
94 | + | |
95 | + } | |
68 | 96 | // 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) | |
97 | + const hamburger = d3.select(div_selector).append('i') | |
98 | + .attr('class', 'fas fa-bars fa-lg export') | |
99 | + .on("click", update_export_menu); | |
100 | + | |
73 | 101 | |
74 | 102 | const svg = d3.select(div_selector).append("svg") |
75 | 103 | .attr("class", "svg_chart") |
... | ... | @@ -326,7 +354,6 @@ function build_chart(div_selector, data_url, entity_name, category_type) { |
326 | 354 | .on("mouseover", mouseoverdot) |
327 | 355 | .on("mouseleave", mouseleavedot) |
328 | 356 | .lower();// set it below bars if called after |
329 | - ; | |
330 | 357 | |
331 | 358 | } |
332 | 359 | ... | ... |
app/main/static/js/svg_to_png.js
1 | 1 | var download_png = function () { |
2 | 2 | // This callback is supposed to be called on the click event of a button child of the div containing the svg. |
3 | 3 | // We then get the parent of this btn to guess the chart's title, width and heigth |
4 | - var chart_div = this.parentNode; | |
4 | + var chart_div = this.parentNode.parentNode.parentNode; | |
5 | 5 | var chart_title = chart_div.id; |
6 | 6 | width = chart_div.offsetWidth; |
7 | 7 | height = chart_div.offsetHeight; | ... | ... |