Export chart to PNG

hitier
2 parents ca2f26ea b54c4edc
Showing 8 changed files with 163 additions and 11 deletions Show diff stats
CHANGELOG.md
VERSION.txt
app/main/static/css/charges.css
app/main/static/js/charges.js
app/main/static/js/svg_to_png.js
app/main/templates/agent.html
app/main/templates/project.html
app/templates/charges-includes.html
@@ -24,6 +24,10 @@ or major refactoring improvments.
  
 ## Unreleased
  
+## [0.3.pre-4] - 2021-04-26 - Export chart 
+### New
+Export chart as png
+
 ## [0.3.pre-3] - 2021-04-20 - Nicer display
 ### New
 Left menu shows active page
-0.3.pre-3
+0.3.pre-4
@@ -45,7 +45,7 @@
     padding: 0.8em;
 }
  
-.charge_chart {
+.svg_chart {
     background-color: #fAfAfA;
     border: 1pt solid black;
     display: inline-block;
@@ -53,10 +53,11 @@
  
 text.legend {
     font-size: 12px;
+    font-family: sans-serif;
 }
  
 rect.legend {
-    stroke: white;
+    stroke: grey;
     stroke-width: 0.5pt;
 }
  
@@ -87,3 +88,8 @@ rect.bar:hover {
     max-width: 300px;
     pointer-events: none;
 }
+
+button.export {
+    float: right;
+    margin-right: 0;
+}
 \ No newline at end of file
+/* Round float to two decimals only */
 function roundToTwo(num) {
     return +(Math.round(num + "e+2")  + "e-2");
 }
@@ -64,8 +65,14 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
         alert("ALERT ! Every body shall quit the boat, we are sinking ! ALERT !")
     }
  
+    // 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 svg = d3.select(div_selector).append("svg")
-        .attr("id", "svg")
+        .attr("class", "svg_chart")
         .attr("width", width + margin.left + margin.right)
         .attr("height", height + margin.top + margin.bottom)
         .append("g")
@@ -135,7 +142,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
     var addlegend = function (color_scale) {
  
         // add horizontal legend
-        let reverse_keys = color_scale.domain().reverse();
+        let legend_keys = color_scale.domain();
         var legendSpacing = 5;
  
         var legendWrap = svg.append('g')
@@ -143,7 +150,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .attr('class', 'legendwrap');
  
         var legend = svg.select('.legendwrap').selectAll('.legend')
-            .data(reverse_keys)
+            .data(legend_keys)
             .enter()
             .append('g')
             .attr('class', 'legend');
@@ -152,7 +159,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .attr('width', legendRectSize)
             .attr('height', legendRectSize)
             .style('fill', color_scale)
-            .style('stroke', color_scale);
+            .attr('class', 'legend');
  
         legend.append('text')
             .attr('class', 'legend')
@@ -387,7 +394,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
  
         // Draw Xaxis
         svg.append("g")
-            .attr("class", "x axis")
+            .attr("class", "x_axis")
             .attr("transform", "translate(0," + height + ")")
             .call(xAxis)
             .selectAll("text")
@@ -403,7 +410,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
  
         // Draw Yaxis
         svg.append("g")
-            .attr("class", "y axis")
+            .attr("class", "y_axis")
             .call(yAxis)
  
         // Draw horizontal lines
@@ -0,0 +1,128 @@
+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_title = chart_div.id;
+    width = chart_div.offsetWidth;
+    height = chart_div.offsetHeight;
+
+    // Then we can access the svg contained in that parent
+    svg = chart_div.getElementsByTagName('svg')[0]
+
+    // Export to string and save
+    var svgString = getSVGString(svg);
+    svgString2Image(svgString, 2 * width, 2 * height, 'png', save); // passes Blob and filesize String to the callback
+
+    function save(dataBlob, filesize) {
+        saveAs(dataBlob, chart_title); // FileSaver.js function
+    }
+}
+
+
+// Below are the functions that handle actual exporting:
+// getSVGString ( svgNode ) and svgString2Image( svgString, width, height, format, callback )
+function getSVGString(svgNode) {
+    svgNode.setAttribute('xlink', 'http://www.w3.org/1999/xlink');
+    var cssStyleText = getCSSStyles(svgNode);
+    appendCSS(cssStyleText, svgNode);
+
+    var serializer = new XMLSerializer();
+    var svgString = serializer.serializeToString(svgNode);
+    svgString = svgString.replace(/(\w+)?:?xlink=/g, 'xmlns:xlink='); // Fix root xlink without namespace
+    svgString = svgString.replace(/NS\d+:href/g, 'xlink:href'); // Safari NS namespace fix
+
+    return svgString;
+
+    function getCSSStyles(parentElement) {
+        var selectorTextArr = [];
+
+        // 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)){
+                selectorTextArr.push('.' + parentElement.classList[c]);
+            }
+        }
+
+        // Add Children element Ids and Classes to the list
+        var nodes = parentElement.getElementsByTagName("*");
+        for (var i = 0; i < nodes.length; i++) {
+            var id = nodes[i].id;
+            if (!contains('#' + id, selectorTextArr))
+                selectorTextArr.push('#' + id);
+
+            var classes = nodes[i].classList;
+            for (var c = 0; c < classes.length; c++){
+                if (!contains('.' + classes[c], selectorTextArr))
+                    selectorTextArr.push('.' + classes[c]);
+            }
+        }
+
+        // Extract CSS Rules
+        var extractedCSSText = "";
+        for (var i = 0; i < document.styleSheets.length; i++) {
+            var s = document.styleSheets[i];
+
+            try {
+                if (!s.cssRules) continue;
+            } catch (e) {
+                if (e.name !== 'SecurityError') throw e; // for Firefox
+                continue;
+            }
+
+            var cssRules = s.cssRules;
+            for (var r = 0; r < cssRules.length; r++) {
+                var cssRule = cssRules[r]
+                if (typeof cssRule.selectorText === 'undefined') {
+                    continue;
+                }
+                var classFromSelector = '.'+cssRule.selectorText.split('.')[1]
+                if (contains(classFromSelector, selectorTextArr))
+                    extractedCSSText += cssRule.cssText;
+            }
+        }
+
+
+        return extractedCSSText;
+
+        function contains(str, arr) {
+            return arr.indexOf(str) === -1 ? false : true;
+        }
+
+    }
+
+    function appendCSS(cssText, element) {
+        var styleElement = document.createElement("style");
+        styleElement.setAttribute("type", "text/css");
+        styleElement.innerHTML = cssText;
+        var refNode = element.hasChildNodes() ? element.children[0] : null;
+        element.insertBefore(styleElement, refNode);
+    }
+}
+
+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
+
+    var canvas = document.createElement("canvas");
+    var context = canvas.getContext("2d");
+
+    canvas.width = width;
+    canvas.height = height;
+
+    var image = new Image();
+    image.onload = function () {
+        context.clearRect(0, 0, width, height);
+        context.drawImage(image, 0, 0, width, height);
+
+        canvas.toBlob(function (blob) {
+            var filesize = Math.round(blob.length / 1024) + ' KB';
+            if (callback) callback(blob, filesize);
+        });
+
+
+    };
+
+    image.src = imgsrc;
+}
@@ -34,7 +34,7 @@
  
 {% block more_scripts %}
 {% include 'd3js-includes.html' %}
-<script src="{{ url_for('main.static', filename='js/charges.js', version=config.VERSION) }}" type="text/javascript"></script>
+{% include 'charges-includes.html' %}
 <script>
   build_chart("#projects_chart",
       "{{url_for('main.charge_agent_csv', agent_id=agent.id)}}",
@@ -31,7 +31,7 @@
  
 {% block more_scripts %}
 {% include 'd3js-includes.html' %}
-<script src="{{ url_for('main.static', filename='js/charges.js', version=config.VERSION) }}" type="text/javascript"></script>
+{% include 'charges-includes.html' %}
 <script>
   build_chart("#project_services_chart",
       "{{url_for('main.charge_project_csv', project_id=project.id, category='service')}}",
@@ -0,0 +1,7 @@
+<script
+    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>