Add legend download buttons, refactor download code

Author: keller-mark

examples-src/App.vue

@@ -15,13 +15,13 @@
     <PlotContainer
       :pWidth="500"
       :pHeight="dynamicPlotHeight"
-      :pMarginTop="120"
-      :pMarginLeft="120"
-      :pMarginRight="120"
+      :pMarginTop="100"
+      :pMarginLeft="100"
+      :pMarginRight="100"
       :pMarginBottom="100"
       :showDownloadButton="true"
       :downloadButtonOffsetX="0"
-      :downloadButtonOffsetY="0"
+      :downloadButtonOffsetY="60"
       :showResizeButton="true"
     >
       <Axis
@@ -119,6 +119,7 @@
       :lWidth="250"
       :getScale="getScale"
       :getStack="getStack"
+      :showDownloadButton="true"
     />
 
     <h3>&lt;ContinuousLegend/&gt;</h3>
@@ -127,6 +128,7 @@
       :lWidth="250"
       :getScale="getScale"
       :getStack="getStack"
+      :showDownloadButton="true"
     />
 
     <h3>&lt;BarPlot/&gt;</h3>
@@ -1664,5 +1666,4 @@ a {
   margin-bottom: 5px;
 }
 
-
 </style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueplotlib",
-  "version": "1.11.4",
+  "version": "1.11.5",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve --open ./examples-src/index.js",

src/components/PlotContainer.vue

@@ -1,9 +1,11 @@
 <script>
-import { DOWNLOAD_PATH } from './../icons.js';
 import { create as d3_create, event as d3_event } from 'd3';
 import { select as d3_select } from 'd3-selection';
 import { drag as d3_drag } from 'd3-drag';
 
+import { DOWNLOAD_PATH } from './../icons.js';
+import { downloadSvg } from './../helpers.js';
+
 
 /**
  * Function that takes in array of VNodes and adds props from a provided props object.
@@ -29,33 +31,6 @@ const addProp = function(slotArray, newProps) {
     return [];
 }
 
-/**
- * Given an SVG DOM node, return the SVG contents as a data URI that can be saved to a file.
- * @private
- * @param {any} svg The SVG node.
- * @returns {string}
- */
-const svgToUri = function(svg) {
-    // Reference: https://stackoverflow.com/a/23218877
-    const serializer = new XMLSerializer();
-    var source = serializer.serializeToString(svg);
-
-    // Add namespace.
-    if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
-        source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
-    }
-    if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
-        source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
-    }
-
-    // Add xml declaration.
-    source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
-
-    // Convert svg source to URI.
-    //return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
-    return source;
-};
-
 
 /**
  * This component is a container for axis and plot components, 
@@ -310,14 +285,8 @@ export default {
     },
     methods: {
         downloadViaButton() {
-            const blob = this.download();
-            const url = URL.createObjectURL(blob);
-            const downloadAnchorNode = document.createElement('a');
-            downloadAnchorNode.setAttribute("href", url);
-            downloadAnchorNode.setAttribute("download", this.downloadName + ".svg");
-            document.body.appendChild(downloadAnchorNode); // required for firefox
-            downloadAnchorNode.click();
-            downloadAnchorNode.remove();
+            const svg = this.download();
+            downloadSvg(svg, this.downloadName);
         },
         initResizeButton() {
             if(this.showResizeButton) {
@@ -347,7 +316,8 @@ export default {
 
             const svg = d3_create("svg")
                 .attr("width", this.fullWidth)
-                .attr("height", this.fullHeight);
+                .attr("height", this.fullHeight)
+                .attr("viewBox", `0 0 ${this.fullWidth} ${this.fullHeight}`);
             
             const defs = svg
                 .append("defs");
@@ -443,11 +413,7 @@ export default {
             renderAxisToContext("axisRight");
             renderAxisToContext("axisBottom");
 
-            const svgContent = svgToUri(svg.node());
-
-            const blob = new Blob([svgContent], {'type': 'image/svg+xml'});
-
-            return blob;
+            return svg;
         }
     }
 }

src/components/legends/CategoricalLegend.vue

@@ -28,6 +28,7 @@
 <script>
 import { scaleBand as d3_scaleBand } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
+import { create as d3_create } from 'd3';
 
 
 import CategoricalScale from './../../scales/CategoricalScale.js';
@@ -37,9 +38,11 @@ import HistoryStack from './../../history/HistoryStack.js';
 import ColorScalePicker from './../modals/ColorScalePicker.vue';
 import ColorPicker from './../modals/ColorPicker.vue';
 
-import { COLOR_PICKER_PATH, EYE_PATH, EYE_DISABLED_PATH, PAINT_BUCKET_PATH } from './../../icons.js';
+import { COLOR_PICKER_PATH, EYE_PATH, EYE_DISABLED_PATH, PAINT_BUCKET_PATH, DOWNLOAD_PATH } from './../../icons.js';
 import { EVENT_TYPES, EVENT_SUBTYPES } from '../../history/base-events.js';
 
+import { downloadSvg } from './../../helpers.js';
+
 const STYLES = Object.freeze({ "BAR": 1, "DOT": 2, "LINE": 3, "SHAPE": 4 });
 
 let uuid = 0;
@@ -89,6 +92,14 @@ export default {
         },
         'clickHandler': {
             type: Function
+        },
+        'showDownloadButton': {
+            type: Boolean,
+            default: false
+        },
+        'downloadName': {
+            type: String,
+            default: 'legend'
         }
     },
     data() {
@@ -193,7 +204,7 @@ export default {
                 [scaleKey]
             ));
         },
-        drawLegend() {
+        drawLegend(d3Node) {
             const vm = this;
             vm.removeLegend();
             
@@ -204,43 +215,38 @@ export default {
             const textOffset = 30;
             const marginX = 4;
             const marginY = 2;
+            const buttonWidth = 16;
 
             vm.lHeight = vm.lItemHeight * varScale.domain.length + titleHeight;
 
             /*
              * Create the SVG elements
              */
-
-            const container = d3_select(vm.legendSelector)
-                .append("svg")
-                    .attr("width", vm.computedWidth)
-                    .attr("height", vm.computedHeight);
+            let container;
+            if(d3Node) {
+                container = d3Node;
+            } else {
+                container = d3_select(vm.legendSelector)
+                    .append("svg")
+                        .attr("width", vm.computedWidth)
+                        .attr("height", vm.computedHeight);
+            }
             
             const legend = container.append("g")
                     .attr("class", "legend")
                     .attr("transform", "translate(" + vm.computedTranslateX + "," + vm.computedTranslateY + ")");
-
-            
             
             const title = legend.append("g")
                 .attr("width", vm.lWidth);
             
             const titleText = title.append("text")
                 .style("text-anchor", "start")
+                .style("font-family", "Avenir")
                 .text(varScale.name);
             const titleTextBbox = titleText.node().getBBox();
             titleText.attr("transform", "translate(" + 0 + "," + titleTextBbox.height + ")");
 
-            title.append("path")
-                .attr("d", PAINT_BUCKET_PATH)
-                .attr("width", 20)
-                .attr("height", 20)
-                .attr("transform", "translate(" + (vm.lWidth - 1.5*marginX) + "," + (titleTextBbox.height/2) + ") scale(-0.7 0.7)")
-                .style("cursor", "pointer")
-                .attr("fill", "silver")
-                .on("click", () => {
-                    vm.showColorScalePicker = true;
-                });
+            
 
             const legendInner = legend.append("g")
                 .attr("class", "legend-inner");
@@ -254,7 +260,8 @@ export default {
                 .attr("width", vm.lWidth)
                 .attr("height", "1px")
                 .attr("fill", "black")
-                .attr("fill-opacity", 0);
+                .attr("fill-opacity", 0)
+                .style("user-select", "none");
             
             highlight.append("rect")
                 .attr("x", 0)
@@ -263,7 +270,8 @@ export default {
                 .attr("height", 1)
                 .attr("fill", "black")
                 .attr("fill-opacity", 0)
-                .attr("transform", "translate(0," + (vm.lItemHeight) + ")");
+                .attr("transform", "translate(0," + (vm.lItemHeight) + ")")
+                .style("user-select", "none");
 
             
             
@@ -299,6 +307,7 @@ export default {
 
             const itemText = items.append("text")
                 .style("text-anchor", "start")
+                .style("font-family", "Avenir")
                 .attr("y", scale.bandwidth() - 5)
                 .attr("x", (textOffset + marginX) + "px")
                 .style("font-size", "13px")
@@ -323,10 +332,49 @@ export default {
                     .attr("fill", (d) => varScale.color(d))
                     .attr("fill-opacity", (d) => varScale.domainFiltered.includes(d) ? 1 : 0);
             }
-                
+
+            if(d3Node) {
+                return; /* SVG passed in to function, so not interactive */
+            }
+            
             
             // Action buttons
-            const buttonWidth = 16;
+
+            const colorScaleButtonG = title
+                .append("g")
+                    .attr("width", 20)
+                    .attr("height", 20)
+                    .attr("transform", "translate(" + (vm.lWidth - 1.5*marginX) + "," + (titleTextBbox.height/2) + ") scale(-0.7 0.7)")
+                    .style("cursor", "pointer")
+                    .on("click", () => {
+                        vm.showColorScalePicker = true;
+                    });
+                colorScaleButtonG.append("rect")
+                        .attr("width", 20)
+                        .attr("height", 20)
+                        .attr("fill", "transparent");
+                colorScaleButtonG.append("path")
+                    .attr("d", PAINT_BUCKET_PATH)
+                    .attr("fill", "silver");
+            
+            if(vm.showDownloadButton) {
+                const downloadButtonG = title
+                    .append("g")
+                        .attr("width", 20)
+                        .attr("height", 20)
+                        .attr("transform", "translate(" + (vm.lWidth - 2*(buttonWidth) + marginX/2) + "," + (titleTextBbox.height/2) + ") scale(-0.7 0.7)")
+                        .style("cursor", "pointer")
+                        .on("click", vm.downloadViaButton);
+                    
+                    downloadButtonG.append("rect")
+                        .attr("width", 20)
+                        .attr("height", 20)
+                        .attr("fill", "transparent");
+                    downloadButtonG.append("path")
+                        .attr("d", DOWNLOAD_PATH)
+                        .attr("fill", "silver");
+                        
+            }
 
             const filterButtons = items.append("g")
                 .attr("transform", "translate(" + (vm.lWidth - 2*(buttonWidth + 2*marginX)) + ",0)")
@@ -409,6 +457,21 @@ export default {
                 .attr("transform", "scale(0.7 0.7)")
                 .attr("fill", "silver");
             
+        },
+        download() {
+            const svg = d3_create("svg")
+                .attr("width", this.computedWidth)
+                .attr("height", this.computedHeight)
+                .attr("viewBox", `0 0 ${this.computedWidth} ${this.computedHeight}`);
+            
+            this.drawLegend(svg);
+            this.drawLegend();
+
+            return svg;
+        },
+        downloadViaButton() {
+            const svg = this.download();
+            downloadSvg(svg, this.downloadName);
         }
     }
 }