@cdc/dashboard 4.22.11 → 4.23.1

package/examples/default-filter-control.json

@@ -73,13 +73,29 @@
         "key": "sharedFilter1",
         "columnName": "state",
         "setBy": "map1",
-        "usedBy": ["chart1"]
+        "usedBy": [
+          "chart1"
+        ]
       }
     ]
   },
   "rows": [
-    [{ "width": 12, "widget": "map1" }, {}, {}],
-    [{ "width": 12, "widget": "chart1" }, {}, {}]
+    [
+      {
+        "width": 12,
+        "widget": "map1"
+      },
+      {},
+      {}
+    ],
+    [
+      {
+        "width": 12,
+        "widget": "chart1"
+      },
+      {},
+      {}
+    ]
   ],
   "visualizations": {
     "map1": {
@@ -128,7 +144,9 @@
         "title": "Legend Title",
         "description": "Legend Text",
         "type": "equalnumber",
-        "specialClasses": ["N/A"]
+        "specialClasses": [
+          "N/A"
+        ]
       }
     },
     "chart1": {
@@ -138,7 +156,12 @@
       "title": "Test",
       "description": "<p>Test</p>",
       "visualizationType": "Line",
-      "series": [{ "dataKey": "Insured Rate", "label": "Insured Rate" }],
+      "series": [
+        {
+          "dataKey": "Insured Rate",
+          "label": "Insured Rate"
+        }
+      ],
       "fontSize": "large",
       "dataFormat": {
         "commas": false,
@@ -173,5 +196,11 @@
         "download": true
       }
     }
+  },
+  "table": {
+    "downloadImageButton": true,
+    "downloadPdfButton": true,
+    "download": true,
+    "show": true
   }
 }

package/examples/private/totals.json

@@ -86,7 +86,7 @@
       "newViz": true,
       "uid": "data-bite1661201913029",
       "visualizationType": "data-bite",
-      "editing": true
+      "editing": false
     }
   },
   "table": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.22.11",
+  "version": "4.23.1",
   "description": "React component for combining multiple visualizations into a single dashboard",
   "main": "dist/cdcdashboard",
   "scripts": {
@@ -20,12 +20,12 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@cdc/chart": "^9.22.9",
-    "@cdc/core": "^4.22.11",
-    "@cdc/data-bite": "^4.22.11",
+    "@cdc/core": "^4.23.1",
+    "@cdc/data-bite": "^4.23.1",
     "@cdc/filtered-text": "^0.0.1",
-    "@cdc/map": "^4.22.11",
-    "@cdc/markup-include": "^4.22.11",
-    "@cdc/waffle-chart": "^4.22.11",
+    "@cdc/map": "^4.23.1",
+    "@cdc/markup-include": "^4.23.1",
+    "@cdc/waffle-chart": "^4.23.1",
     "html-react-parser": "1.4.9",
     "js-base64": "^2.5.2",
     "papaparse": "^5.3.0",
@@ -44,5 +44,5 @@
   "resolutions": {
     "@types/react": "17.x"
   },
-  "gitHead": "9768d1ea0e2383044977d988e33531bcdfe33ea6"
+  "gitHead": "58163844cc9ce2c379235413b19f49679eab4bef"
 }

package/src/CdcDashboard.jsx

@@ -32,6 +32,8 @@ import Header from './components/Header'
 import defaults from './data/initial-state'
 import Widget from './components/Widget'
 import DataTable from './components/DataTable'
+import CoveMediaControls from '@cdc/core/helpers/CoveMediaControls'
+
 
 import './scss/main.scss'
 import '@cdc/core/styles/v2/main.scss'
@@ -106,6 +108,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
   const [preview, setPreview] = useState(false)
   const [tabSelected, setTabSelected] = useState(0)
   const [currentViewport, setCurrentViewport] = useState('lg')
+  const [imageId, setImageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
 
   const { title, description } = config.dashboard || config
 
@@ -331,7 +334,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
       setFilteredData(newFilteredData)
     }
 
-    const announceChange = text => {}
+    const announceChange = text => { }
 
     return config.dashboard.sharedFilters.map((singleFilter, index) => {
       if (!singleFilter.showDropdown) return
@@ -617,10 +620,15 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
                 )
               })}
 
+          {/* Image or PDF Inserts */}
+          <section className='download-buttons'>
+            {config.table.downloadImageButton && <CoveMediaControls.Button title='Download Dashboard as Image' type='image' state={config} text='Download Dashboard Image' elementToCapture={imageId} />}
+            {config.table.downloadPdfButton && <CoveMediaControls.Button title='Download Dashboard as PDF' type='pdf' state={config} text='Download Dashboard PDF' elementToCapture={imageId} />}
+          </section>
+
           {/* Data Table */}
-          {config.table && config.table.show && config.data && <DataTable data={config.data} config={config} />}
+          {config.table && config.data && <DataTable data={config.data} config={config} imageRef={imageId} />}
           {config.table &&
-            config.table.show &&
             config.datasets &&
             Object.keys(config.datasets).map(datasetKey => {
               //For each dataset, find any shared filters that apply to all visualizations using the dataset
@@ -655,9 +663,12 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
                 }
               }
 
+
+              let dataFileSourceType = config.datasets[datasetKey]?.dataFileSourceType
+
               return (
                 <div className='multi-table-container' id={`data-table-${datasetKey}`} key={`data-table-${datasetKey}`}>
-                  <DataTable data={filteredTableData || config.datasets[datasetKey].data} datasetKey={datasetKey} config={config}></DataTable>
+                  <DataTable data={filteredTableData || config.datasets[datasetKey].data} dataFileSourceType={dataFileSourceType} datasetKey={datasetKey} config={config} imageRef={imageId}></DataTable>
                 </div>
               )
             })}
@@ -675,13 +686,21 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
     loading,
     updateConfig,
     setParentConfig,
-    setPreview
+    setPreview,
+    outerContainerRef
   }
 
+
+  const dashboardContainerClasses = [
+    'cdc-open-viz-module',
+    'type-dashboard',
+    `${currentViewport}`
+  ]
+
   return (
     <GlobalContextProvider>
       <ConfigContext.Provider value={contextValues}>
-        <div className={`cdc-open-viz-module type-dashboard ${currentViewport}`} ref={outerContainerRef}>
+        <div className={dashboardContainerClasses.join(' ')} ref={outerContainerRef} data-download-id={imageId} >
           {body}
         </div>
         <OverlayFrame />

package/src/components/DataTable.tsx

@@ -2,12 +2,12 @@ import React, { useContext, useEffect, useState, useMemo, memo } from 'react'
 import { useTable, useSortBy, useResizeColumns, useBlockLayout } from 'react-table'
 import Papa from 'papaparse'
 import { Base64 } from 'js-base64'
+import CoveMediaControls from '@cdc/core/helpers/CoveMediaControls'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 export default function DataTable(props) {
-  const { data, datasetKey, config } = props
-
+  const { data, datasetKey, config, imageRef, dataFileSourceType } = props
   const [tableExpanded, setTableExpanded] = useState<boolean>(config.table ? config.table.expanded : false)
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
 
@@ -26,7 +26,7 @@ export default function DataTable(props) {
     }
 
     return (
-      <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn btn-download no-border`}>
+      <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`no-border dashboard-download-link`}>
         Download {datasetKey ? `"${datasetKey}"` : 'Data'} (CSV)
       </a>
     )
@@ -91,60 +91,69 @@ export default function DataTable(props) {
 
   return (
     <ErrorBoundary component='DataTable'>
-      <section className={`data-table-container`} aria-label={accessibilityLabel}>
-        <div
-          role='button'
-          className={tableExpanded ? 'data-table-heading' : 'collapsed data-table-heading'}
-          onClick={() => {
-            setTableExpanded(!tableExpanded)
-          }}
-          tabIndex={0}
-          onKeyDown={e => {
-            if (e.keyCode === 13) {
+      <CoveMediaControls.Section classes={['download-links']}>
+        {config.table.showDownloadUrl && dataFileSourceType === 'url' && (
+          <a className='dashboard-download-link' href={config.datasets[datasetKey].dataFileName} title='Link to View Dataset' target='_blank'>
+            Link to View Dataset
+          </a>
+        )}
+        {config.table.download && <DownloadButton data={data} />}
+      </CoveMediaControls.Section>
+      {config.table.show && (
+        <section className={`data-table-container`} aria-label={accessibilityLabel}>
+          <div
+            role='button'
+            className={tableExpanded ? 'data-table-heading' : 'collapsed data-table-heading'}
+            onClick={() => {
               setTableExpanded(!tableExpanded)
-            }
-          }}
-        >
-          {config.table.label}
-          {datasetKey ? `: ${datasetKey}` : ''}
-        </div>
-        <div className='table-container' style={{ maxHeight: config.table && config.table.limitHeight && `${config.table.height}px`, overflowY: 'scroll' }}>
-          <table className={tableExpanded ? 'data-table' : 'data-table cdcdataviz-sr-only'} hidden={!tableExpanded} {...getTableProps()}>
-            <caption className='visually-hidden'>{config.table.label}</caption>
-            <thead>
-              {headerGroups &&
-                headerGroups.map(headerGroup => (
-                  <tr {...headerGroup.getHeaderGroupProps()}>
-                    {headerGroup.headers.map(column => (
-                      <th tabIndex='0' {...column.getHeaderProps(column.getSortByToggleProps())} className={column.isSorted ? (column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc') : 'sort'} title={column.Header}>
-                        {column.render('Header')}
-                        <div {...column.getResizerProps()} className='resizer' />
-                      </th>
-                    ))}
-                  </tr>
-                ))}
-            </thead>
-            {rows && (
-              <tbody {...getTableBodyProps()}>
-                {rows.map(row => {
-                  prepareRow(row)
-                  return (
-                    <tr {...row.getRowProps()}>
-                      {row.cells &&
-                        row.cells.map(cell => (
-                          <td tabIndex='0' {...cell.getCellProps()}>
-                            {cell.render('Cell')}
-                          </td>
-                        ))}
+            }}
+            tabIndex={0}
+            onKeyDown={e => {
+              if (e.keyCode === 13) {
+                setTableExpanded(!tableExpanded)
+              }
+            }}
+          >
+            {config.table.label}
+            {datasetKey ? `: ${datasetKey}` : ''}
+          </div>
+          <div className='table-container' style={{ maxHeight: config.table && config.table.limitHeight && `${config.table.height}px`, overflowY: 'scroll' }}>
+            <table className={tableExpanded ? 'data-table' : 'data-table cdcdataviz-sr-only'} hidden={!tableExpanded} {...getTableProps()}>
+              <caption className='visually-hidden'>{config.table.label}</caption>
+              <thead>
+                {headerGroups &&
+                  headerGroups.map(headerGroup => (
+                    <tr {...headerGroup.getHeaderGroupProps()}>
+                      {headerGroup.headers.map(column => (
+                        <th tabIndex='0' {...column.getHeaderProps(column.getSortByToggleProps())} className={column.isSorted ? (column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc') : 'sort'} title={column.Header}>
+                          {column.render('Header')}
+                          <div {...column.getResizerProps()} className='resizer' />
+                        </th>
+                      ))}
                     </tr>
-                  )
-                })}
-              </tbody>
-            )}
-          </table>
-        </div>
-        {config.table.download && <DownloadButton data={data} />}
-      </section>
+                  ))}
+              </thead>
+              {rows && (
+                <tbody {...getTableBodyProps()}>
+                  {rows.map(row => {
+                    prepareRow(row)
+                    return (
+                      <tr {...row.getRowProps()}>
+                        {row.cells &&
+                          row.cells.map(cell => (
+                            <td tabIndex='0' {...cell.getCellProps()}>
+                              {cell.render('Cell')}
+                            </td>
+                          ))}
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              )}
+            </table>
+          </div>
+        </section>
+      )}
     </ErrorBoundary>
   )
 }

package/src/components/Header.jsx

@@ -257,7 +257,7 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
         </div>
       )}
       {!subEditor && (
-        <div>
+        <div className="toggle-bar__wrapper">
           <ul className='toggle-bar'>
             <li
               className={tabSelected === 0 ? 'active' : 'inactive'}
@@ -316,21 +316,55 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
             )}
             {tabSelected === 2 && (
               <>
-                <label>Show Table</label>
-                <input type='checkbox' defaultChecked={config.table.show} onChange={e => changeConfigValue('table', 'show', e.target.checked)} />
-                <label>Expanded by Default</label>
-                <input type='checkbox' defaultChecked={config.table.expanded} onChange={e => changeConfigValue('table', 'expanded', e.target.checked)} />
-                <label>Display Download Button</label>
-                <input type='checkbox' defaultChecked={config.table.download} onChange={e => changeConfigValue('table', 'download', e.target.checked)} />
-                <label>Limit Table Height</label>
-                <input type='checkbox' defaultChecked={config.table.limitHeight} onChange={e => changeConfigValue('table', 'limitHeight', e.target.checked)} />
-                {config.table.limitHeight && <input class='table-height-input' type='text' placeholder='Height (px)' defaultValue={config.table.height} onChange={e => changeConfigValue('table', 'height', e.target.value)} />}
+
+                <div className="wrap">
+                  <label>
+                    <input type='checkbox' defaultChecked={config.table.show} onChange={e => changeConfigValue('table', 'show', e.target.checked)} />
+                    Show Table
+                  </label><br />
+
+                  <label>
+                    <input type='checkbox' defaultChecked={config.table.expanded} onChange={e => changeConfigValue('table', 'expanded', e.target.checked)} />
+                    Expanded by Default
+                  </label><br />
+                </div>
+
+                {/* <div className="wrap">
+                  <label>
+                    <input type='checkbox' defaultChecked={config.table.downloadPdfButton} onChange={e => changeConfigValue('table', 'downloadPdfButton', e.target.checked)} />
+                    Show PDF Button
+                  </label>
+                  <label>
+                    <input type='checkbox' defaultChecked={config.table.downloadImageButton} onChange={e => changeConfigValue('table', 'downloadImageButton', e.target.checked)} />
+                    Show Image Button
+                  </label>
+                </div> */}
+
+                <div className="wrap">
+                  <label>
+                    <input type='checkbox' defaultChecked={config.table.limitHeight} onChange={e => changeConfigValue('table', 'limitHeight', e.target.checked)} />
+                    Limit Table Height
+                  </label>
+                  {config.table.limitHeight && <input class='table-height-input' type='text' placeholder='Height (px)' defaultValue={config.table.height} onChange={e => changeConfigValue('table', 'height', e.target.value)} />}
+                </div>
+
+                <div className="wrap">
+                  <label>
+                    <input type='checkbox' defaultChecked={config.table.download} onChange={e => changeConfigValue('table', 'download', e.target.checked)} />
+                    Show CSV Button
+                  </label>
+                  <label>
+                    <input type='checkbox' defaultChecked={config.table.showDownloadUrl} onChange={e => changeConfigValue('table', 'showDownloadUrl', e.target.checked)} />
+                    Show Link to Dataset
+                  </label>
+                </div>
               </>
             )}
           </div>
-        </div>
-      )}
-    </div>
+        </div >
+      )
+      }
+    </div >
   )
 }
 

package/src/data/initial-state.js

@@ -6,6 +6,7 @@ export default {
   visualizations: {},
   table: {
     label: 'Data Table',
-    show: true
+    show: true,
+    showDownloadUrl: false
   }
 }

package/src/index.html

@@ -1,29 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <style>
-      body {
-        margin: 0 auto !important;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        min-height: unset !important;
-      }
 
-      .react-container + .react-container {
-        margin-top: 3rem;
-      }
-    </style>
-  </head>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <style>
+    body {
+      margin: 0 auto !important;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      min-height: unset !important;
+    }
+
+    .react-container+.react-container {
+      margin-top: 3rem;
+    }
+  </style>
+</head>
+
+<body>
+  <!-- <div class="react-container" data-config="/examples/default.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/default-multi-dataset.json"></div> -->
+  <div class="react-container" data-config="/examples/default-filter-control.json"></div>
+  <!-- <div class="react-container" data-config="/examples/private/totals.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/private/totals-two.json"></div> -->
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+</body>
 
-  <body>
-    <div class="react-container" data-config="/examples/default.json"></div>
-    <!--<div class="react-container" data-config="/examples/default-multi-dataset.json"></div>-->
-    <!-- <div class="react-container" data-config="/examples/default-filter-control.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/private/totals.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/private/totals-two.json"></div> -->
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-  </body>
 </html>

package/src/scss/main.scss

@@ -24,6 +24,7 @@
       height: 3em;
     }
     .heading-1 {
+      min-width: 335px;
       font-size: 1.2em;
       padding-right: 1em;
       margin: 0.5em 1em 0.5em 0;
@@ -35,13 +36,40 @@
           padding-right: 0.3em;
         }
       }
+      input[type='text'] {
+        width: 100%;
+        margin-top: 10px;
+      }
+    }
+
+    .heading-body {
+      display: flex;
+
+      .wrap {
+        display: inline-flex;
+        flex-wrap: wrap;
+        width: 20%;
+
+        .table-height-input {
+          width: 100%;
+          height: 25px;
+        }
+
+        label {
+          display: block;
+          width: 100%;
+        }
+      }
+    }
+
+    .heading-2 {
     }
 
     .heading-body {
       padding: 0.5em;
 
       input[type='checkbox'] {
-        margin-right: 2em;
+        margin-right: 5px;
         margin-left: 0.5em;
       }
 
@@ -57,17 +85,18 @@
       align-self: stretch;
       position: relative;
       bottom: -1px;
+      border-bottom: #c7c7c7 1px solid;
       li {
         padding: 0.3em 1.5em;
         color: $mediumGray;
-        border-bottom: #c7c7c7 1px solid;
         cursor: pointer;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
         &.active {
-          border-bottom-width: 5px;
           border-bottom-color: $mediumGray;
+          border-bottom-style: inherit;
+          border-bottom-width: 5px;
           color: $darkGray;
         }
         &:hover {
@@ -75,6 +104,10 @@
           color: $darkGray;
         }
       }
+
+      &__wrapper {
+        width: 100%;
+      }
     }
 
     .description-input {
@@ -137,6 +170,17 @@
     }
   }
 
+  .multi-table-container {
+    margin: 15px 0 0;
+  }
+
+  .data-table-container {
+    margin: 0;
+    @include breakpointClass(md) {
+      margin: 15px 0;
+    }
+  }
+
   div.dashboard-title {
     color: white;
     padding: 0.6em 0.8em;
@@ -160,6 +204,10 @@
     }
   }
 
+  .dashboard-download-link {
+    font-size: 14px;
+  }
+
   .dashboard-description {
     margin-bottom: 20px;
   }