@cdc/map 2.6.2 → 2.6.4

package/src/components/DataTable.js

@@ -10,8 +10,12 @@ import ExternalIcon from '../images/external-link.svg';
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
 import LegendCircle from '@cdc/core/components/LegendCircle';
 
+
+import Loading from '@cdc/core/components/Loading';
+
 const DataTable = (props) => {
   const {
+    state,
     tableTitle,
     indexTitle,
     mapTitle,
@@ -27,12 +31,20 @@ const DataTable = (props) => {
     displayGeoName,
     navigationHandler,
     viewport,
+    formatLegendLocation,
+    tabbingId,
+    setFilteredCountryCode
   } = props;
 
   const [expanded, setExpanded] = useState(expandDataTable);
 
   const [accessibilityLabel, setAccessibilityLabel] = useState('');
 
+  const [ready, setReady] = useState(false)
+
+  const fileName = `${mapTitle || 'data-table'}.csv`;
+
+
   // Catch all sorting method used on load by default but also on user click
   // Having a custom method means we can add in any business logic we want going forward
   const customSort = useCallback((a, b) => {
@@ -132,28 +144,32 @@ const DataTable = (props) => {
   }, [columns.navigate, navigationHandler]);
 
   const DownloadButton = memo(() => {
-    const fileName = `${mapTitle}.csv`;
     const csvData = Papa.unparse(rawData);
 
     const blob = new Blob([csvData], {type:  "text/csv;charset=utf-8;"});
 
     const saveBlob = () => {
-      if (navigator.msSaveBlob) {
+      //@ts-ignore
+      if (typeof window.navigator.msSaveBlob === 'function') {
+        //@ts-ignore
         navigator.msSaveBlob(blob, fileName);
       }
     }
 
     return (
-      <a
-        download={fileName}
-        onClick={saveBlob}
-        href={URL.createObjectURL(blob)}
-        aria-label="Download this data in a CSV file format."
-        className={`${headerColor} btn btn-download no-border`}
-        data-html2canvas-ignore
-      >
-        Download Data (CSV)
-      </a>
+        <a
+          download={fileName}
+          type="button"
+          onClick={saveBlob}
+          href={URL.createObjectURL(blob)}
+          aria-label="Download this data in a CSV file format."
+          className={`${headerColor} btn btn-download no-border`}
+          id={`${skipId}`}
+          data-html2canvas-ignore
+          role="button"
+        >
+          Download Data (CSV)
+        </a>
     )
   }, [rawData]);
 
@@ -162,12 +178,19 @@ const DataTable = (props) => {
     const newTableColumns = [];
 
     Object.keys(columns).forEach((column) => {
-      if (columns[column].dataTable === true && '' !== columns[column].name) {
+      if (columns[column].dataTable === true && columns[column].name) {
         const newCol = {
-          Header: columns[column].label || columns[column].name,
+          Header: columns[column].label ? columns[column].label : columns[column].name,
           id: column,
           accessor: (row) => {
             if (runtimeData) {
+              if(state.legend.specialClasses && state.legend.specialClasses.length && typeof state.legend.specialClasses[0] === 'object'){
+                for(let i = 0; i < state.legend.specialClasses.length; i++){
+                  if(String(runtimeData[row][state.legend.specialClasses[i].key]) === state.legend.specialClasses[i].value){
+                    return state.legend.specialClasses[i].label;
+                  }
+                }
+              }
               return runtimeData[row][columns[column].name] ?? null;
             }
 
@@ -183,7 +206,11 @@ const DataTable = (props) => {
 
             const legendColor = applyLegendToRow(rowObj);
 
-            let labelValue = displayGeoName(row.original);
+            if(state.general.geoType !== 'us-county') {
+              var labelValue = displayGeoName(row.original);
+            } else {
+              var labelValue = formatLegendLocation(row.original)
+            }
 
             labelValue = getCellAnchor(labelValue, rowObj);
 
@@ -209,11 +236,11 @@ const DataTable = (props) => {
     });
 
     return newTableColumns;
-  }, [indexTitle, columns, runtimeData, runtimeLegend]);
+  }, [indexTitle, columns, runtimeData,getCellAnchor,displayDataAsText,applyLegendToRow,customSort,displayGeoName,state.legend.specialClasses]);
 
   const tableData = useMemo(
     () => Object.keys(runtimeData).filter((key) => applyLegendToRow(runtimeData[key])).sort((a, b) => customSort(a, b)),
-    [runtimeLegend, runtimeData, applyLegendToRow, customSort]
+    [ runtimeData, applyLegendToRow, customSort]
   );
 
   // Change accessibility label depending on expanded status
@@ -240,6 +267,13 @@ const DataTable = (props) => {
     []
   );
 
+  const mapLookup = {
+    'us-county': 'United States County Map',
+    'single-state': 'State Map',
+    'us': 'United States Map',
+    'world': 'World Map'
+  }
+
   const {
     getTableProps,
     getTableBodyProps,
@@ -248,30 +282,57 @@ const DataTable = (props) => {
     prepareRow,
   } = useTable({ columns: tableColumns, data: tableData, defaultColumn }, useSortBy, useBlockLayout, useResizeColumns);
 
+  const rand = Math.random().toString(16).substr(2, 8);
+  const skipId = `btn__${rand}`
+
+  if(!state.data) return <Loading />
   return (
     <ErrorBoundary component="DataTable">
-      <section className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
+      <section id={state.general.title ? `dataTableSection__${state.general.title.replace(/\s/g, '')}` : `dataTableSection`} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
+        <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>
+          Skip Navigation or Skip to Content
+        </a>
       <div
         className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
         onClick={() => { setExpanded(!expanded); }}
         tabIndex="0"
         onKeyDown={(e) => { if (e.keyCode === 13) { setExpanded(!expanded); } }}
       >
+ 
         {tableTitle}
       </div>
-      <div className="table-container">
-        <table className={expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'} height={expanded ? null : 0} {...getTableProps()} aria-live="assertive" >
-          <thead>
+      <div 
+        className="table-container"
+        style={ { maxHeight: state.dataTable.limitHeight && `${state.dataTable.height}px`, overflowY: 'scroll' } } 
+      >
+        <table
+          height={expanded ? null : 0} {...getTableProps()} 
+          aria-live="assertive" 
+          className={expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}  
+          hidden={!expanded}
+          aria-rowcount={state?.data.length ? state.data.length : '-1' }
+        >
+          <caption className='cdcdataviz-sr-only'>{state.dataTable.caption ?  state.dataTable.caption : `Datatable showing data for the ${mapLookup[state.general.geoType]} figure.`}</caption>
+          <thead style={{position: 'sticky', top: 0, zIndex: 999}}>
             {headerGroups.map((headerGroup) => (
               <tr {...headerGroup.getHeaderGroupProps()}>
                 {headerGroup.headers.map((column) => (
-                  <th tabIndex="0"
+                  <th 
+                    tabIndex="0"
                     title={column.Header}
+                    role="columnheader"
+                    scope="col"
                     {...column.getHeaderProps(column.getSortByToggleProps())}
                     className={column.isSorted ? column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc' : 'sort'}
                     onKeyDown={(e) => { if (e.keyCode === 13) { column.toggleSortBy(); } }}
+                    //aria-sort={column.isSorted ? column.isSortedDesc ? 'descending' : 'ascending' : 'none' }
+                    {...(column.isSorted ? column.isSortedDesc ? { 'aria-sort': 'descending' } : { 'aria-sort': 'ascending' } : null)}
+
                   >
                     {column.render('Header')}
+                    <button>
+                      <span className="cdcdataviz-sr-only">{`Sort by ${(column.render('Header')).toLowerCase() } in ${ column.isSorted ? column.isSortedDesc ? 'descending' : 'ascending' : 'no'} `} order</span>
+                    </button>
                     <div {...column.getResizerProps()} className="resizer" />
                   </th>
                 ))}
@@ -282,9 +343,9 @@ const DataTable = (props) => {
             {rows.map((row) => {
               prepareRow(row);
               return (
-                <tr {...row.getRowProps()}>
+                <tr {...row.getRowProps()} role="row">
                   {row.cells.map((cell) => (
-                    <td tabIndex="0" {...cell.getCellProps()}>
+                    <td tabIndex="0" {...cell.getCellProps()} role="gridcell" onClick={ (e) => (state.general.type === 'bubble' && state.general.allowMapZoom && state.general.geoType === 'world') ? setFilteredCountryCode(cell.row.original) : true }>
                       {cell.render('Cell')}
                     </td>
                   ))}