Commit a30b11ffc2d188552e6b2252290d3ba5fe67e8c5

Authored by Anais Amato
Committed by hitier
1 parent ef2e820d

Add an 'export menu' button

Included in any graphs allow to choose the export format
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;
... ...