From 7d42e277735e5617e61f9e561c294daad810aa81 Mon Sep 17 00:00:00 2001
From: Richard Hitier <hitier.richard@gmail.com>
Date: Mon, 17 May 2021 10:34:35 +0200
Subject: [PATCH] Download chart csv

---
 app/main/static/js/charges.js       |  3 ++-
 app/main/static/js/svg_to_png.js    | 26 +++++++++++++++++++++-----
 app/templates/charges-includes.html |  1 -
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/app/main/static/js/charges.js b/app/main/static/js/charges.js
index d88b601..9279522 100644
--- a/app/main/static/js/charges.js
+++ b/app/main/static/js/charges.js
@@ -85,9 +85,10 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
                 .style("opacity", 1)
             tooltip_hamburger
                 .html("<span>Export </span>" +
-                    "<li>To CSV</li>" +
+                    "<li id='to_csv'>To CSV</li>" +
                     "<li id='to_png'>To PNG</li>")
             d3.select("#to_png").on("click", download_png);
+            d3.select("#to_csv").on("click", function(){download_csv(this, data_url);})
         } else {
             d3.select(".tooltip_hamburger").remove();
         }
diff --git a/app/main/static/js/svg_to_png.js b/app/main/static/js/svg_to_png.js
index 1e997c6..8f570ab 100644
--- a/app/main/static/js/svg_to_png.js
+++ b/app/main/static/js/svg_to_png.js
@@ -1,3 +1,17 @@
+var download_csv = function (node, rest_csv_url) {
+    var chart_div = node.parentNode.parentNode.parentNode;
+    var chart_title = chart_div.id;
+    fetch(rest_csv_url)
+        .then(function (r) {
+            r.headers.set('content-type', 'text/csv')
+            return r.blob()
+        })
+        .then((blob) => {
+            console.log(blob)
+            saveAs(blob, chart_title + '.csv'); // FileSaver.js function
+        })
+}
+
 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
@@ -14,6 +28,7 @@ var download_png = function () {
     svgString2Image(svgString, 2 * width, 2 * height, 'png', save); // passes Blob and filesize String to the callback
 
     function save(dataBlob, filesize) {
+        console.log(dataBlob)
         saveAs(dataBlob, chart_title); // FileSaver.js function
     }
 }
@@ -38,8 +53,8 @@ function getSVGString(svgNode) {
 
         // Add Parent element Id and Classes to the list
         selectorTextArr.push('#' + parentElement.id);
-        for (var c = 0; c < parentElement.classList.length; c++){
-            if (!contains('.' + parentElement.classList[c], selectorTextArr)){
+        for (var c = 0; c < parentElement.classList.length; c++) {
+            if (!contains('.' + parentElement.classList[c], selectorTextArr)) {
                 selectorTextArr.push('.' + parentElement.classList[c]);
             }
         }
@@ -52,7 +67,7 @@ function getSVGString(svgNode) {
                 selectorTextArr.push('#' + id);
 
             var classes = nodes[i].classList;
-            for (var c = 0; c < classes.length; c++){
+            for (var c = 0; c < classes.length; c++) {
                 if (!contains('.' + classes[c], selectorTextArr))
                     selectorTextArr.push('.' + classes[c]);
             }
@@ -76,7 +91,7 @@ function getSVGString(svgNode) {
                 if (typeof cssRule.selectorText === 'undefined') {
                     continue;
                 }
-                var classFromSelector = '.'+cssRule.selectorText.split('.')[1]
+                var classFromSelector = '.' + cssRule.selectorText.split('.')[1]
                 if (contains(classFromSelector, selectorTextArr))
                     extractedCSSText += cssRule.cssText;
             }
@@ -103,7 +118,8 @@ function getSVGString(svgNode) {
 function svgString2Image(svgString, width, height, format, callback) {
     var format = format ? format : 'png';
 
-    var imgsrc = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString))); // Convert SVG string to data URL
+    // Convert SVG string to data URL
+    var imgsrc = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));
 
     var canvas = document.createElement("canvas");
     var context = canvas.getContext("2d");
diff --git a/app/templates/charges-includes.html b/app/templates/charges-includes.html
index a3fdb4d..3b6cc05 100644
--- a/app/templates/charges-includes.html
+++ b/app/templates/charges-includes.html
@@ -2,6 +2,5 @@
     src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script>
 <script
     src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
-<script src="https://d3js.org/d3.v6.min.js"></script>
 <script src="{{ url_for('main.static', filename='js/svg_to_png.js', version=config.VERSION) }}" type="text/javascript"></script>
 <script src="{{ url_for('main.static', filename='js/charges.js', version=config.VERSION) }}" type="text/javascript"></script>
--
libgit2 0.21.2