@cdc/dashboard 4.22.10-alpha.1 → 4.22.11

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,150 @@
-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'
 
-export default function DataTable(props) {
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
-  const { data, datasetKey, config } = props;
+export default function DataTable(props) {
+  const { data, datasetKey, config } = props
 
-  const [tableExpanded, setTableExpanded] = useState<boolean>(config.table ? config.table.expanded : false);
-  const [accessibilityLabel, setAccessibilityLabel] = useState('');
+  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={`btn btn-download no-border`}>
         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">
+    <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) { 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) => (
+        <div
+          role='button'
+          className={tableExpanded ? 'data-table-heading' : 'collapsed data-table-heading'}
+          onClick={() => {
+            setTableExpanded(!tableExpanded)
+          }}
+          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}>
+                    {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" />
+                        <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()}>
+            </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>
-          {config.table.download && <DownloadButton data={data} />}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            )}
+          </table>
+        </div>
+        {config.table.download && <DownloadButton data={data} />}
       </section>
     </ErrorBoundary>
-  );
+  )
 }