diff --git a/src/pages/mapPage.js b/src/pages/mapPage.js index 775a9e2..a52ef9b 100644 --- a/src/pages/mapPage.js +++ b/src/pages/mapPage.js @@ -3,7 +3,7 @@ * @author Lee Mason */ import { DataTable } from "https://cdn.jsdelivr.net/npm/simple-datatables@8.0.0/+esm"; - +import { toSvg } from "https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/+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(); diff --git a/src/pages/quantilePage.js b/src/pages/quantilePage.js index 88961ce..abe71c4 100644 --- a/src/pages/quantilePage.js +++ b/src/pages/quantilePage.js @@ -1,4 +1,5 @@ import { DataTable } from "https://cdn.jsdelivr.net/npm/simple-datatables@8.0.0/+esm"; +import { toSvg } from "https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/+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);