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);
  }
  }
 }