From a30b11ffc2d188552e6b2252290d3ba5fe67e8c5 Mon Sep 17 00:00:00 2001
From: Anaïs Amato <anais.amato@irap.omp.eu>
Date: Tue, 4 May 2021 16:59:07 +0200
Subject: [PATCH] Add an 'export menu' button

---
 app/main/static/css/charges.css  | 52 +++++++++++++++++++++++++++++++++++++++++++++++++---
 app/main/static/js/charges.js    | 37 ++++++++++++++++++++++++++++++++-----
 app/main/static/js/svg_to_png.js |  2 +-
 3 files changed, 82 insertions(+), 9 deletions(-)

diff --git a/app/main/static/css/charges.css b/app/main/static/css/charges.css
index 903f15f..c2b02bf 100644
--- a/app/main/static/css/charges.css
+++ b/app/main/static/css/charges.css
@@ -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
diff --git a/app/main/static/js/charges.js b/app/main/static/js/charges.js
index 2500a34..d352b9d 100644
--- a/app/main/static/js/charges.js
+++ b/app/main/static/js/charges.js
@@ -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
-        ;
 
     }
 
diff --git a/app/main/static/js/svg_to_png.js b/app/main/static/js/svg_to_png.js
index f7764e1..1e997c6 100644
--- a/app/main/static/js/svg_to_png.js
+++ b/app/main/static/js/svg_to_png.js
@@ -1,7 +1,7 @@
 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;
--
libgit2 0.21.2