Merge pull request #215 from episphere/download_buttons

download_buttons

src/pages/quantilePage.js

@@ -370,21 +370,27 @@ function addDownloadButton() {
   groupDownloadContainer.appendChild(downloadButton)
 }
 
-
 function downloadGraph() {
   const temporaryContainer = elements.graphContainer.cloneNode(true)
-  const legend = temporaryContainer.querySelector("#plot-legend")
+  const temporaryLegend = elements.plotLegend.cloneNode(true)
+  const temporaryTitle = elements.graphTitle.cloneNode(true)
 
-  const legendChecks = temporaryContainer.querySelectorAll(".legend-check")
+  const legendChecks = temporaryLegend.querySelectorAll(".legend-check")
   legendChecks.forEach(check => {
     if (!check.hasAttribute("checked")) {
       check.style.display = "none"
     }
   })
 
-  const checkPaths = legend.querySelectorAll(".legend-check path")
+  console.log({elements});
+  const checkPaths = temporaryLegend.querySelectorAll(".legend-check path")
   checkPaths.forEach(path => path.style.visibility = "hidden")
-  return downloadElementAsImage(temporaryContainer, "epitracker-quantile-plot")
+
+  const wrapperElement = document.createElement('div')
+  wrapperElement.appendChild(temporaryLegend)
+  wrapperElement.appendChild(temporaryTitle)
+  wrapperElement.appendChild(temporaryContainer)
+  return downloadElementAsImage(wrapperElement, "epitracker-quantile-plot")
 }
 
 /**

src/utils/mapPlots.js

@@ -241,7 +241,7 @@ export function plotMortalityMapGrid(container, legendContainer, mortalityData,
     );
 
     mapDiv.appendChild(plot);
-    addIndividualDownloadButton(mapDiv, config)
+    //addIndividualDownloadButton(mapDiv, config)
     mapsContainer.appendChild(mapDiv)
 
     addChoroplethInteractivity(plot, mapDiv, config.data, mortalityData, options.level, options.measureField, 
@@ -572,22 +572,22 @@ function generateCombinations(arr1, arr2, varName1, varName2) {
 // Handle download buttons
 // ========================
 
-function addIndividualDownloadButton(element, config) {
-  // TODO: More detailed filename based on inputs and grid plot
-  const baseFilename = "epitracker_data"
-
-  const buttonElement = createDropdownDownloadButton(true, [
-    {label: "Download data (CSV)", listener: () => downloadMortalityData(config.data, baseFilename, "csv")},
-    {label: "Download data (TSV)", listener: () => downloadMortalityData(config.data, baseFilename, "tsv")},
-    {label: "Download data (JSON)", listener: () => downloadMortalityData(config.data, baseFilename, "json")},
-    {label: "Download map (PNG)", listener: () => downloadMap(element)},
-  ])
-  buttonElement.style.position = "absolute"
-  buttonElement.style.top = "5px"
-  buttonElement.style.right = "5px"
-
-  element.appendChild(buttonElement)
-}
+// function addIndividualDownloadButton(element, config) {
+//   // TODO: More detailed filename based on inputs and grid plot
+//   const baseFilename = "epitracker_data"
+
+//   const buttonElement = createDropdownDownloadButton(true, [
+//     {label: "Download data (CSV)", listener: () => downloadMortalityData(config.data, baseFilename, "csv")},
+//     {label: "Download data (TSV)", listener: () => downloadMortalityData(config.data, baseFilename, "tsv")},
+//     {label: "Download data (JSON)", listener: () => downloadMortalityData(config.data, baseFilename, "json")},
+//     {label: "Download map (PNG)", listener: () => downloadMap(element)},
+//   ])
+//   buttonElement.style.position = "absolute"
+//   buttonElement.style.top = "5px"
+//   buttonElement.style.right = "5px"
+
+//   element.appendChild(buttonElement)
+// }
 
 function downloadMap(element) {
   const svg = element.querySelector("svg")

visualization/quantile.html

@@ -169,6 +169,9 @@ <h4>Other</h4>
       integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS"
       crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/scripts/choices.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
+    integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
   <script type="module" src="../src/pages/quantilePage.js"></script>
 </body>