@cdc/core 4.22.10 → 4.23.1

package/data/dataDesignerTables.js

@@ -4,40 +4,40 @@ export const DATA_TABLE_VERTICAL = (
   <>
     <table>
       <tbody>
-      <tr>
-        <th>Date</th>
-        <th>Value</th>
-        <th>...</th>
-      </tr>
-      <tr>
-        <td>01/01/2020</td>
-        <td>150</td>
-        <td>...</td>
-      </tr>
-      <tr>
-        <td>02/01/2020</td>
-        <td>150</td>
-        <td>...</td>
-      </tr>
+        <tr>
+          <th>Date</th>
+          <th>Value</th>
+          <th>...</th>
+        </tr>
+        <tr>
+          <td>01/01/2020</td>
+          <td>150</td>
+          <td>...</td>
+        </tr>
+        <tr>
+          <td>02/01/2020</td>
+          <td>150</td>
+          <td>...</td>
+        </tr>
       </tbody>
     </table>
     <table>
       <tbody>
-      <tr>
-        <th>State</th>
-        <th>Value</th>
-        <th>...</th>
-      </tr>
-      <tr>
-        <td>Georgia</td>
-        <td>150</td>
-        <td>...</td>
-      </tr>
-      <tr>
-        <td>Florida</td>
-        <td>150</td>
-        <td>...</td>
-      </tr>
+        <tr>
+          <th>State</th>
+          <th>Value</th>
+          <th>...</th>
+        </tr>
+        <tr>
+          <td>Georgia</td>
+          <td>150</td>
+          <td>...</td>
+        </tr>
+        <tr>
+          <td>Florida</td>
+          <td>150</td>
+          <td>...</td>
+        </tr>
       </tbody>
     </table>
   </>
@@ -47,34 +47,34 @@ export const DATA_TABLE_HORIZONTAL = (
   <>
     <table>
       <tbody>
-      <tr>
-        <th>Date</th>
-        <td>01/01/2020</td>
-        <td>02/01/2020</td>
-        <td>...</td>
-      </tr>
-      <tr>
-        <th>Value</th>
-        <td>100</td>
-        <td>150</td>
-        <td>...</td>
-      </tr>
+        <tr>
+          <th>Date</th>
+          <td>01/01/2020</td>
+          <td>02/01/2020</td>
+          <td>...</td>
+        </tr>
+        <tr>
+          <th>Value</th>
+          <td>100</td>
+          <td>150</td>
+          <td>...</td>
+        </tr>
       </tbody>
     </table>
     <table>
       <tbody>
-      <tr>
-        <th>State</th>
-        <td>Georgia</td>
-        <td>Florida</td>
-        <td>...</td>
-      </tr>
-      <tr>
-        <th>Value</th>
-        <td>100</td>
-        <td>150</td>
-        <td>...</td>
-      </tr>
+        <tr>
+          <th>State</th>
+          <td>Georgia</td>
+          <td>Florida</td>
+          <td>...</td>
+        </tr>
+        <tr>
+          <th>Value</th>
+          <td>100</td>
+          <td>150</td>
+          <td>...</td>
+        </tr>
       </tbody>
     </table>
   </>
@@ -83,24 +83,24 @@ export const DATA_TABLE_HORIZONTAL = (
 export const DATA_TABLE_SINGLE_ROW = (
   <table>
     <tbody>
-    <tr>
-      <th>Date</th>
-      <th>Virus 1</th>
-      <th>Virus 2</th>
-      <th>...</th>
-    </tr>
-    <tr>
-      <td>01/01/2020</td>
-      <td>100</td>
-      <td>150</td>
-      <td>...</td>
-    </tr>
-    <tr>
-      <td>02/01/2020</td>
-      <td>15</td>
-      <td>20</td>
-      <td>...</td>
-    </tr>
+      <tr>
+        <th>Date</th>
+        <th>Virus 1</th>
+        <th>Virus 2</th>
+        <th>...</th>
+      </tr>
+      <tr>
+        <td>01/01/2020</td>
+        <td>100</td>
+        <td>150</td>
+        <td>...</td>
+      </tr>
+      <tr>
+        <td>02/01/2020</td>
+        <td>15</td>
+        <td>20</td>
+        <td>...</td>
+      </tr>
     </tbody>
   </table>
 )
@@ -108,41 +108,41 @@ export const DATA_TABLE_SINGLE_ROW = (
 export const DATA_TABLE_MULTI_ROW = (
   <table>
     <tbody>
-    <tr>
-      <th>Virus</th>
-      <th>Date</th>
-      <th>Value</th>
-    </tr>
-    <tr>
-      <td>Virus 1</td>
-      <td>01/01/2020</td>
-      <td>100</td>
-    </tr>
-    <tr>
-      <td>Virus 1</td>
-      <td>02/01/2020</td>
-      <td>150</td>
-    </tr>
-    <tr>
-      <td>...</td>
-      <td>...</td>
-      <td>...</td>
-    </tr>
-    <tr>
-      <td>Virus 2</td>
-      <td>01/01/2020</td>
-      <td>15</td>
-    </tr>
-    <tr>
-      <td>Virus 2</td>
-      <td>02/01/2020</td>
-      <td>20</td>
-    </tr>
-    <tr>
-      <td>...</td>
-      <td>...</td>
-      <td>...</td>
-    </tr>
+      <tr>
+        <th>Virus</th>
+        <th>Date</th>
+        <th>Value</th>
+      </tr>
+      <tr>
+        <td>Virus 1</td>
+        <td>01/01/2020</td>
+        <td>100</td>
+      </tr>
+      <tr>
+        <td>Virus 1</td>
+        <td>02/01/2020</td>
+        <td>150</td>
+      </tr>
+      <tr>
+        <td>...</td>
+        <td>...</td>
+        <td>...</td>
+      </tr>
+      <tr>
+        <td>Virus 2</td>
+        <td>01/01/2020</td>
+        <td>15</td>
+      </tr>
+      <tr>
+        <td>Virus 2</td>
+        <td>02/01/2020</td>
+        <td>20</td>
+      </tr>
+      <tr>
+        <td>...</td>
+        <td>...</td>
+        <td>...</td>
+      </tr>
     </tbody>
   </table>
 )

package/data/themes.js

@@ -1,70 +1,70 @@
 const themes = {
   'theme-blue': {
-    primary: 	'#005eaa',
+    primary: '#005eaa',
     secondary: '#88c3ea',
-    tertiary: 	'#c0e9ff',
+    tertiary: '#c0e9ff',
     quaternary: '#edf9ff'
   },
   'theme-purple': {
     primary: '#712177',
     secondary: '#b890bb',
     tertiary: '#e3d3e4',
-    quaternary: '#f7f2f7',
+    quaternary: '#f7f2f7'
   },
   'theme-brown': {
     primary: '#705043',
     secondary: '#ad907b',
     tertiary: '#d7ccc8',
-    quaternary: '#f2ebe8',
+    quaternary: '#f2ebe8'
   },
   'theme-teal': {
     primary: '#00695c',
     secondary: '#4ebaaa',
     tertiary: '#ceece7',
-    quaternary: '#ebf7f5',
+    quaternary: '#ebf7f5'
   },
   'theme-pink': {
     primary: '#af4448',
     secondary: '#e57373',
     tertiary: '#ffc2c2',
-    quaternary: '#ffe7e7',
+    quaternary: '#ffe7e7'
   },
   'theme-orange': {
     primary: '#bb4d00',
     secondary: '#ffad42',
     tertiary: '#ffe97d',
-    quaternary: '#fff4cf',
+    quaternary: '#fff4cf'
   },
   'theme-slate': {
     primary: '#29434e',
     secondary: '#7e9ba5',
     tertiary: '#b6c6d2',
-    quaternary: '#e2e8ed',
+    quaternary: '#e2e8ed'
   },
   'theme-indigo': {
     primary: '#26418f',
     secondary: '#92a6dd',
     tertiary: '#dee8ff',
-    quaternary: '#f2f6ff',
+    quaternary: '#f2f6ff'
   },
   'theme-cyan': {
     primary: '#006778',
     secondary: '#65b0bd',
     tertiary: '#cce5e9',
-    quaternary: '#ebf5f6',
+    quaternary: '#ebf5f6'
   },
   'theme-green': {
     primary: '#4b830d',
     secondary: '#84bc49',
     tertiary: '#dcedc8',
-    quaternary: '#f1f8e9',
+    quaternary: '#f1f8e9'
   },
   'theme-amber': {
     primary: '#fbab18',
     secondary: '#ffd54f',
     tertiary: '#ffecb3',
     quaternary: '#fff7e1'
-  },
+  }
 }
 
-export default themes;
+export default themes

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