@cdc/core 4.22.11 → 4.23.1

package/helpers/CoveMediaControls.js

@@ -0,0 +1,139 @@
+import React from 'react'
+import html2pdf from 'html2pdf.js'
+import html2canvas from 'html2canvas'
+
+const buttonText = {
+  pdf: 'Download PDF',
+  image: 'Download Image',
+  csv: 'Download Data (CSV)',
+  link: 'Link to Dataset'
+}
+
+const saveImageAs = (uri, filename) => {
+  const ie = navigator.userAgent.match(/MSIE\s([\d.]+)/)
+  const ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/)
+  const ieEdge = navigator.userAgent.match(/Edge/g)
+  const ieVer = ie ? ie[1] : ie11 ? 11 : ieEdge ? 12 : -1
+
+  if (ieVer > -1) {
+    const fileAsBlob = new Blob([uri], {
+      type: 'image/png'
+    })
+    window.navigator.msSaveBlob(fileAsBlob, filename)
+  } else {
+    const link = document.createElement('a')
+    if (typeof link.download === 'string') {
+      link.href = uri
+      link.download = filename
+      link.onclick = e => document.body.removeChild(e.target)
+      document.body.appendChild(link)
+      link.click()
+    } else {
+      window.open(uri)
+    }
+  }
+}
+
+const generateMedia = (state, type, elementToCapture) => {
+  // Identify Selector
+  const baseSvg = document.querySelector(`[data-download-id=${elementToCapture}]`)
+
+  // Handles different state title locations between components
+  // Apparently some packages use state.title where others use state.general.title
+  const handleFileName = state => {
+    // dashboard titles
+    if (state?.dashboard?.title) return state.dashboard.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
+
+    // map titles
+    if (state?.general?.title) return state.general.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
+
+    // chart titles
+    if (state?.title) return state.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
+
+    return 'no-title'
+  }
+
+  // Construct filename with timestamp
+  const date = new Date()
+  const filename = handleFileName(state)
+
+  switch (type) {
+    case 'image':
+      html2canvas(baseSvg).then(canvas => {
+        saveImageAs(canvas.toDataURL(), filename + '.png')
+      })
+      return
+    case 'pdf':
+      let opt = {
+        margin: 0.2,
+        filename: filename + '.pdf',
+        image: { type: 'png' },
+        html2canvas: { scale: 2, logging: false },
+        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
+      }
+
+      html2pdf()
+        .set(opt)
+        .from(baseSvg)
+        .save()
+        .then(() => {
+          generatedImage.remove() // Remove generated png
+          baseSvg.style.display = null // Re-display initial svg map
+        })
+      break
+    default:
+      console.warn("generateMedia param 2 type must be 'image' or 'pdf'")
+      break
+  }
+}
+
+// Handles different state theme locations between components
+// Apparently some packages use state.headerColor where others use state.theme
+const handleTheme = state => {
+  if (state?.headerColor) return state.headerColor // ie. maps
+  if (state?.theme) return state.theme // ie. charts
+  return 'theme-notFound'
+}
+
+// Download CSV
+const Button = ({ state, text, type, title, elementToCapture }) => {
+  const buttonClasses = ['btn', 'btn-download', `${handleTheme(state)}`]
+  return (
+    <button className={buttonClasses.join(' ')} title={title} onClick={() => generateMedia(state, type, elementToCapture)} style={{ lineHeight: '1.4em' }}>
+      {buttonText[type]}
+    </button>
+  )
+}
+
+// Link to CSV/JSON data
+const Link = ({ config }) => {
+  // Handles Maps & Charts
+  if (config.dataFileSourceType === 'url' && config.dataFileName && config.table.showDownloadUrl) {
+    return (
+      <a href={config.dataFileName} title={buttonText.link} target='_blank'>
+        {buttonText.link}
+      </a>
+    )
+  }
+
+  // Handles Dashboards
+  return config?.table?.showDownloadUrl && config.dataUrl ? (
+    <a href={config.dataUrl} title='Link to view full data set' target='_blank'>
+      {buttonText.link}
+    </a>
+  ) : null
+}
+
+// TODO: convert to standardized COVE section
+const Section = ({ children, classes }) => {
+  return <section className={classes.join(' ')}>{children}</section>
+}
+
+const CoveMediaControls = () => null
+
+CoveMediaControls.Section = Section
+CoveMediaControls.Link = Link
+CoveMediaControls.Button = Button
+CoveMediaControls.generateMedia = generateMedia
+
+export default CoveMediaControls

package/helpers/fetchRemoteData.js

@@ -1,8 +1,10 @@
 import Papa from 'papaparse'
 
-export default async function (url) {
+export default async function (url, visualizationType = '') {
   try {
     // Using URL Object to get pathname without URL paramaters on regex.
+    if (visualizationType === 'map') url = decodeURI(url)
+
     url = new URL(url)
 
     const path = url.pathname

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.22.11",
+  "version": "4.23.1",
   "description": "Core elements of the CDC Open Visualization project",
   "author": "Daniel Immke <npm@daniel.do>",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
@@ -20,6 +20,8 @@
     "react-dom": ">=16"
   },
   "dependencies": {
+    "html2canvas": "^1.4.1",
+    "html2pdf.js": "^0.10.1",
     "papaparse": "^5.3.0",
     "prop-types": "^15.8.1",
     "react-accessible-accordion": "^3.3.4",
@@ -30,5 +32,5 @@
   "resolutions": {
     "@types/react": "17.x"
   },
-  "gitHead": "9768d1ea0e2383044977d988e33531bcdfe33ea6"
+  "gitHead": "58163844cc9ce2c379235413b19f49679eab4bef"
 }

package/styles/_button-section.scss

@@ -0,0 +1,35 @@
+// buttons that appear above data tables
+.download-buttons {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 1em; // align w/ data table
+
+  .btn:not(:last-child) {
+    margin-right: 10px;
+  }
+  .btn-download {
+    float: unset;
+  }
+}
+
+// links that appear above data tables
+.download-links {
+  padding: 0px 1em;
+  display: flex;
+  justify-content: flex-end;
+
+  a:not(:last-child) {
+    margin-right: 10px;
+  }
+}
+
+// odd wrapper thats different on dashboards
+.cdc-dashboard-inner-container {
+  .download-links {
+    padding: unset;
+    margin-bottom: 5px;
+  }
+  .download-buttons {
+    margin: unset;
+  }
+}

package/styles/_data-table.scss

@@ -258,3 +258,10 @@ table.data-table {
     transition: 0.3s all;
   }
 }
+.cove,
+.cdc-open-viz-module {
+  .download-links a:not(:last-child) {
+    margin-right: 10px;
+    display: inline-block;
+  }
+}

package/styles/base.scss

@@ -63,6 +63,7 @@
   }
   @import 'data-table';
   @import 'global';
+  @import 'button-section';
 }
 
 $theme: (