Merge pull request #250 from episphere/downloadSVG

download SVG

src/pages/mapPage.js

@@ -3,7 +3,7 @@
  * @author Lee Mason <[email protected]>
  */
 import { DataTable } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
-
+import { toSvg } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
 import { start } from "../../main.js";
 import { EpiTrackerData } from "../utils/EpiTrackerData.js";
 import { State } from "../utils/State.js";
@@ -688,6 +688,7 @@ function addGroupDownloadButton() {
         downloadMortalityData(state.mortalityData, baseFilename, "json"),
     },
     { label: "Download maps (PNG)", listener: downloadMapGrid },
+    { label: "Download maps (SVG)", listener: downloadMapSVG },
   ]);
   groupDownloadContainer.appendChild(downloadButton);
 }
@@ -725,6 +726,17 @@ function resizeMap(mapCellElement, previousSize) {
   // console.log(cellWidth, previousSize[0])
 }
 
+function downloadMapSVG() {
+  toSvg(document.getElementById("plots")).then((data) => {
+    const link = document.createElement('a')
+    link.download = 'map-svg';
+    link.href = data;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  })
+}
+
 function downloadMapGrid() {
   const mapGrid = document.getElementById("map-grid");
   const temporaryGrid = mapGrid.cloneNode();

src/pages/quantilePage.js

@@ -1,4 +1,5 @@
 import { DataTable } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
+import { toSvg } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
 import { start } from "../../main.js";
 import { EpiTrackerData } from "../utils/EpiTrackerData.js";
 import { State } from "../utils/State.js";
@@ -500,10 +501,22 @@ function addDownloadButton() {
         downloadMortalityData(state.mortalityData, baseFilename, "json"),
     },
     { label: "Download plot (PNG)", listener: downloadGraph },
+    { label: "Download plot (SVG)", listener: downloadGraphSVG },
   ]);
   groupDownloadContainer.appendChild(downloadButton);
 }
 
+function downloadGraphSVG() {
+  toSvg(document.getElementById("plots")).then((data) => {
+    const link = document.createElement('a')
+    link.download = 'plot-svg';
+    link.href = data;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  })
+}
+
 function downloadGraph() {
   const temporaryContainer = elements.graphContainer.cloneNode(true);
   const temporaryLegend = elements.plotLegend.cloneNode(true);