Add an 'export menu' button

Included in any graphs allow to choose the export format

Add an 'export menu' button
Included in any graphs allow to choose the export format
Anais Amato · hitier
1 parent ef2e820d
Showing 3 changed files with 82 additions and 9 deletions Show diff stats
app/main/static/css/charges.css
app/main/static/js/charges.js
app/main/static/js/svg_to_png.js
@@ -90,7 +90,53 @@ rect.bar:hover {
     pointer-events: none;
 }
-button.export {
-    float: right;
-    margin-right: 0;
+i.export {
+    padding: 7px;
+    position: absolute;
+    margin-top:8px;
+    right: 3%;
+}
+
+i.export:hover {
+    background: lightgrey;
+    border-radius: 2px;
+}
+
+.tooltip_hamburger {
+    border-radius: 0px;
+    box-shadow: 2px 2px 2px 2px darkgrey;
+    right: 2%;
+    pointer-events: auto;
+    width: 150px;
+    margin-top:15px;
+    padding: 0;
+}
+
+.tooltip_hamburger li {
+    list-style: none;
+    padding: 5px;
+    cursor: pointer;
+    pointer-events: auto;
+}
+
+.tooltip_hamburger li:hover {
+    background-color: lightgrey;
+}
+
+.tooltip_hamburger span {
+    width: 90%;
+    padding: 5px;
+    margin-left: 5px;
+    display: block;
+    border-bottom: 1px solid grey;
+}
+
+.rectmouseleave {
+    width: 200px;
+    height: 150px;
+    position: absolute;
+    padding: 10px;
+    top:0;
+    right: 0;
+    /*background-color: #0b2e13;*/
 }
 \ No newline at end of file
@@ -65,11 +65,39 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
         alert("ALERT ! Every body shall quit the boat, we are sinking ! ALERT !")
     }
+    // Configure the tooltip to export svg to png or csv
+    var update_export_menu = function (e, d) {
+
+        const tooltip_test = document.getElementsByClassName('tooltip_hamburger');
+
+        if (tooltip_test.length == 0) {
+            d3.select(".tooltip_hamburger").remove();
+
+            const tooltip_hamburger = hamburger.append("div")
+                .style("opacity", 0)
+                .attr("class", "tooltip tooltip_hamburger");
+
+            d3.select(this).transition()
+                .duration(1)
+            tooltip_hamburger
+                .transition()
+                .duration(200)
+                .style("opacity", 1)
+            tooltip_hamburger
+                .html("<span>Export </span>" +
+                    "<li>To CSV</li>" +
+                    "<li id='to_png'>To PNG</li>")
+            d3.select("#to_png").on("click", download_png);
+        } else {
+            d3.select(".tooltip_hamburger").remove();
+        }
+
+    }
     // Create a download button inside the div contaning svg chart
-    var dl_btn = d3.select(div_selector).append("button")
-        .text('png')
-        .attr('class', 'export')
-        .on('click', download_png)
+    const hamburger = d3.select(div_selector).append('i')
+        .attr('class', 'fas fa-bars fa-lg export')
+        .on("click", update_export_menu);
+
     const svg = d3.select(div_selector).append("svg")
         .attr("class", "svg_chart")
@@ -326,7 +354,6 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .on("mouseover", mouseoverdot)
             .on("mouseleave", mouseleavedot)
             .lower();// set it below bars if called after
-        ;
     }
 var download_png = function () {
     // This callback is supposed to be called on the click event of a button child of the div containing the svg.
     // We then get the parent of this btn to guess the chart's title, width and heigth
-    var chart_div = this.parentNode;
+    var chart_div = this.parentNode.parentNode.parentNode;
     var chart_title = chart_div.id;
     width = chart_div.offsetWidth;
     height = chart_div.offsetHeight;