@cdc/dashboard 4.22.10 → 4.23.1

package/src/ConfigContext.js

@@ -1,5 +1,5 @@
-import { createContext } from 'react';
+import { createContext } from 'react'
 
-const ConfigContext = createContext({});
+const ConfigContext = createContext({})
 
-export default ConfigContext;
+export default ConfigContext

package/src/components/Column.jsx

@@ -7,7 +7,7 @@ import Widget from './Widget'
 const Column = ({ data, rowIdx, colIdx }) => {
   const { visualizations } = useContext(ConfigContext)
 
-  const [ { isOver, canDrop }, drop ] = useDrop(() => ({
+  const [{ isOver, canDrop }, drop] = useDrop(() => ({
     accept: 'vis-widget',
     drop: () => ({
       rowIdx,
@@ -15,7 +15,7 @@ const Column = ({ data, rowIdx, colIdx }) => {
       canDrop
     }),
     canDrop: () => !data.widget,
-    collect: (monitor) => ({
+    collect: monitor => ({
       isOver: monitor.isOver(),
       canDrop: !!monitor.canDrop()
     })
@@ -23,10 +23,7 @@ const Column = ({ data, rowIdx, colIdx }) => {
 
   const widget = data.widget ? visualizations[data.widget] : null
 
-  let classNames = [
-    'builder-column',
-    'column-size--' + data.width,
-  ]
+  let classNames = ['builder-column', 'column-size--' + data.width]
 
   if (isOver && canDrop) {
     classNames.push('column--drop')
@@ -38,9 +35,13 @@ const Column = ({ data, rowIdx, colIdx }) => {
 
   return (
     <div className={classNames.join(' ')} ref={drop}>
-      {widget ?
-        <Widget data={{ rowIdx, colIdx, ...widget }} type={widget.visualizationType ?? widget.general?.geoType}/> :
-        <p className="builder-column__text">Drag and drop <br/> visualization</p>}
+      {widget ? (
+        <Widget data={{ rowIdx, colIdx, ...widget }} type={widget.visualizationType ?? widget.general?.geoType} />
+      ) : (
+        <p className='builder-column__text'>
+          Drag and drop <br /> visualization
+        </p>
+      )}
     </div>
   )
 }

package/src/components/DataTable.tsx

@@ -1,170 +1,159 @@
-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 ErrorBoundary from '@cdc/core/components/ErrorBoundary';
+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'
 
-export default function DataTable(props) {
-
-  const { data, datasetKey, config } = props;
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
-  const [tableExpanded, setTableExpanded] = useState<boolean>(config.table ? config.table.expanded : false);
-  const [accessibilityLabel, setAccessibilityLabel] = useState('');
+export default function DataTable(props) {
+  const { data, datasetKey, config, imageRef, dataFileSourceType } = props
+  const [tableExpanded, setTableExpanded] = useState<boolean>(config.table ? config.table.expanded : false)
+  const [accessibilityLabel, setAccessibilityLabel] = useState('')
 
   const DownloadButton = memo(({ data }: any) => {
-    const fileName = `${config.title ? config.title.substring(0, 50) : 'cdc-open-viz'}.csv`;
+    const fileName = `${config.title ? config.title.substring(0, 50) : 'cdc-open-viz'}.csv`
 
-    const csvData = Papa.unparse(data);
+    const csvData = Papa.unparse(data)
 
     const saveBlob = () => {
       //@ts-ignore
       if (typeof window.navigator.msSaveBlob === 'function') {
-        const dataBlob = new Blob([csvData], { type: "text/csv;charset=utf-8;" });
+        const dataBlob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
         //@ts-ignore
-        window.navigator.msSaveBlob(dataBlob, fileName);
+        window.navigator.msSaveBlob(dataBlob, fileName)
       }
     }
 
     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>
     )
-  });
-  
+  })
+
   // Creates columns structure for the table
   const tableColumns = useMemo(() => {
-    const newTableColumns = [];
+    const newTableColumns = []
 
     // catch no data errors and update the table header.
-    if(data.length === 0) {
-      return [{
-          Header : 'No Data Found'
-      }];
+    if (data.length === 0) {
+      return [
+        {
+          Header: 'No Data Found'
+        }
+      ]
     } else {
-      Object.keys(data[0]).map((key) => {
-          const newCol = {
-            Header: key,
-            Cell: ({ row }) => {
-              return (
-                <>
-                  {row.original[key]}
-                </>
-              );
-            },
-            id: key,
-            canSort: true
-          };
-
-          newTableColumns.push(newCol);
-      });
+      Object.keys(data[0]).map(key => {
+        const newCol = {
+          Header: key,
+          Cell: ({ row }) => {
+            return <>{row.original[key]}</>
+          },
+          id: key,
+          canSort: true
+        }
+
+        newTableColumns.push(newCol)
+      })
     }
 
-    return newTableColumns;
-  }, [config]);
+    return newTableColumns
+  }, [config])
 
-  const tableData = useMemo(
-    () => data,
-    [data]
-  );
+  const tableData = useMemo(() => data, [data])
 
   // Change accessibility label depending on expanded status
   useEffect(() => {
-    const expandedLabel = 'Accessible data table.';
-    const collapsedLabel = 'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.';
+    const expandedLabel = 'Accessible data table.'
+    const collapsedLabel = 'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
 
     if (tableExpanded === true && accessibilityLabel !== expandedLabel) {
-      setAccessibilityLabel(expandedLabel);
+      setAccessibilityLabel(expandedLabel)
     }
 
     if (tableExpanded === false && accessibilityLabel !== collapsedLabel) {
-      setAccessibilityLabel(collapsedLabel);
+      setAccessibilityLabel(collapsedLabel)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tableExpanded]);
+  }, [tableExpanded])
 
   const defaultColumn = useMemo(
     () => ({
       minWidth: 150,
       width: 200,
-      maxWidth: 400,
+      maxWidth: 400
     }),
     []
-  );
+  )
 
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    rows,
-    prepareRow,
-  } = useTable({ columns: tableColumns, data: tableData, defaultColumn }, useSortBy, useBlockLayout, useResizeColumns);
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns: tableColumns, data: tableData, defaultColumn }, useSortBy, useBlockLayout, useResizeColumns)
 
   return (
-    <ErrorBoundary component="DataTable">
-      <section className={`data-table-container`} aria-label={accessibilityLabel}>
+    <ErrorBoundary component='DataTable'>
+      <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"
+            role='button'
             className={tableExpanded ? 'data-table-heading' : 'collapsed data-table-heading'}
-            onClick={() => { setTableExpanded(!tableExpanded); }}
+            onClick={() => {
+              setTableExpanded(!tableExpanded)
+            }}
             tabIndex={0}
-            onKeyDown={(e) => { if (e.keyCode === 13) { setTableExpanded(!tableExpanded); } }}
+            onKeyDown={e => {
+              if (e.keyCode === 13) {
+                setTableExpanded(!tableExpanded)
+              }
+            }}
           >
-            {config.table.label}{datasetKey ? `: ${datasetKey}` : ''}
+            {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>
+          <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>
-                ))}
+                {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 &&
+              {rows && (
                 <tbody {...getTableBodyProps()}>
-                  {rows.map((row) => {
-                    prepareRow(row);
+                  {rows.map(row => {
+                    prepareRow(row)
                     return (
                       <tr {...row.getRowProps()}>
-                        {row.cells && row.cells.map((cell) => (
-                          <td tabIndex="0" {...cell.getCellProps()}>
-                            {cell.render('Cell')}
-                          </td>
-                        ))}
+                        {row.cells &&
+                          row.cells.map(cell => (
+                            <td tabIndex='0' {...cell.getCellProps()}>
+                              {cell.render('Cell')}
+                            </td>
+                          ))}
                       </tr>
-                    );
+                    )
                   })}
                 </tbody>
-              }
+              )}
             </table>
           </div>
-          {config.table.download && <DownloadButton data={data} />}
-      </section>
+        </section>
+      )}
     </ErrorBoundary>
-  );
+  )
 }