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("Export " + - "
  • To CSV
  • " + + "
  • To CSV
  • " + "
  • To PNG
  • ") 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"> - -- libgit2 0.21.2