@cdc/chart 1.3.2 → 1.3.4

package/src/components/DataTable.tsx

@@ -3,7 +3,8 @@ import React, {
   useEffect,
   useState,
   useMemo,
-  memo } from 'react';
+  memo, 
+  Fragment} from 'react';
 import {
   useTable,
   useSortBy,
@@ -19,23 +20,25 @@ import LegendCircle from '@cdc/core/components/LegendCircle';
 import Context from '../context';
 
 export default function DataTable() {
-  const { rawData, filteredData:data, config, colorScale, parseDate, formatDate, formatNumber:numberFormatter } = useContext<any>(Context);
+  const { rawData, transformedData: data, config, colorScale, parseDate, formatDate, formatNumber:numberFormatter } = useContext<any>(Context);
 
   const legendGlyphSize = 15;
   const legendGlyphSizeHalf = legendGlyphSize / 2;
-
+  const section = config.orientation ==='horizontal' ? 'yAxis' :'xAxis';
   const [tableExpanded, setTableExpanded] = useState<boolean>(config.table.expanded);
   const [accessibilityLabel, setAccessibilityLabel] = useState('');
 
-  const DownloadButton = memo(({ data }: any) => {
+  const DownloadButton = ({ data }: any) => {
     const fileName = `${config.title.substring(0, 50)}.csv`;
 
     const csvData = Papa.unparse(data);
 
     const saveBlob = () => {
-      if (navigator.msSaveBlob) {
-        const dataBlob = new Blob([csvData], {type:  "text/csv;charset=utf-8;"});
-        navigator.msSaveBlob(dataBlob, fileName);
+      //@ts-ignore
+      if (typeof window.navigator.msSaveBlob === 'function') {
+        const dataBlob = new Blob([csvData], { type: "text/csv;charset=utf-8;" });
+        //@ts-ignore
+        window.navigator.msSaveBlob(dataBlob, fileName);
       }
     }
 
@@ -50,7 +53,7 @@ export default function DataTable() {
         Download Data (CSV)
       </a>
     )
-  });
+  };
 
   // Creates columns structure for the table
   const tableColumns = useMemo(() => {
@@ -59,18 +62,18 @@ export default function DataTable() {
       Cell: ({ row }) => {
         const seriesLabel = config.runtime.seriesLabels ? config.runtime.seriesLabels[row.original] : row.original;
         return (
-          <>
+          <Fragment>
             {config.visualizationType !== 'Pie' && <LegendCircle fill={colorScale(seriesLabel)} />}
             <span>{seriesLabel}</span>
-          </>
+          </Fragment>
         )
       },
       id: 'series-label'
     }];
 
-    data.map((d) => {
+    data.forEach((d) => {
         const newCol = {
-          Header: config.runtime.xAxis.type === 'date' ? formatDate(parseDate(d[config.runtime.originalXAxis.dataKey])) : d[config.runtime.originalXAxis.dataKey],
+          Header: config.runtime[section].type === 'date' ? formatDate(parseDate(d[config.runtime.originalXAxis.dataKey])) : d[config.runtime.originalXAxis.dataKey],
           Cell: ({ row }) => {
             return (
               <>
@@ -86,10 +89,12 @@ export default function DataTable() {
     });
 
     return newTableColumns;
-  }, [config]);
+  }, [config,colorScale]);
+
+
 
   const tableData = useMemo(
-    () => config.visualizationType === 'Pie' ? [config.yAxis.dataKey] : config.runtime.seriesKeys,
+ () => config.visualizationType === 'Pie' ? [config.yAxis.dataKey] : config.runtime.seriesKeys,
     [config.runtime.seriesKeys]
   );
 
@@ -124,30 +129,48 @@ export default function DataTable() {
     rows,
     prepareRow,
   } = useTable({ columns: tableColumns, data: tableData, defaultColumn }, useSortBy, useBlockLayout, useResizeColumns);
-
   return (
     <ErrorBoundary component="DataTable">
-      <section className={`data-table-container`} aria-label={accessibilityLabel}>
+      <section id={config?.title ? `dataTableSection__${config?.title.replace(/\s/g, '')}` : `dataTableSection`}  className={`data-table-container`} aria-label={accessibilityLabel}>
           <div
+            role="button"
             className={tableExpanded ? 'data-table-heading' : 'collapsed data-table-heading'}
-            onClick={() => { setTableExpanded(!tableExpanded); }}
             tabIndex={0}
+            onClick={() => { setTableExpanded(!tableExpanded); }}
             onKeyDown={(e) => { if (e.keyCode === 13) { setTableExpanded(!tableExpanded); } }}
           >
             {config.table.label}
           </div>
           <div className="table-container">
-            <table  className={tableExpanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}  hidden={!tableExpanded} {...getTableProps()}>
+            <table  
+              className={tableExpanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}  
+              hidden={!tableExpanded} 
+              {...getTableProps()}
+              aria-rowcount={ config?.series?.length ? config?.series?.length : '-1' }
+              >
               <caption className="visually-hidden">{config.table.label}</caption>
               <thead>
-                {headerGroups.map((headerGroup) => (
-                  <tr {...headerGroup.getHeaderGroupProps()}>
+                {headerGroups.map((headerGroup,index) => (
+                  <tr {...headerGroup.getHeaderGroupProps()} key={`headerGroups--${index}`}>
                     {headerGroup.headers.map((column, index) => (
-                      <th tabIndex="0" {...column.getHeaderProps(column.getSortByToggleProps())} className={column.isSorted ? column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc' : 'sort'} title={column.Header}>
+                      <th 
+                        tabIndex="0" 
+                        title={column.Header} 
+                        key={`trth--${index}`}
+                        role="columnheader"
+                        scope="col"
+                        {...column.getHeaderProps(column.getSortByToggleProps())} 
+                        className={column.isSorted ? column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc' : 'sort'} 
+                        {...(column.isSorted ? column.isSortedDesc ? { 'aria-sort': 'descending' } : { 'aria-sort': 'ascending' } : null)}
+                        >
                         {index === 0
                           ? config.table.indexLabel
+                            ? config.table.indexLabel : column.render('Header')
                           : column.render('Header')
                         }
+                        <button>
+                          <span className="cdcdataviz-sr-only">{`Sort by ${typeof column.render('Header') === 'string' ? column.render('Header').toLowerCase() : column.render('Header') } in ${ column.isSorted ? column.isSortedDesc ? 'descending' : 'ascending' : 'no'} `} order</span>
+                        </button>
                         <div {...column.getResizerProps()} className="resizer" />
                       </th>
                     ))}
@@ -155,12 +178,16 @@ export default function DataTable() {
                 ))}
               </thead>
               <tbody {...getTableBodyProps()}>
-                {rows.map((row) => {
+                {rows.map((row, index) => {
                   prepareRow(row);
                   return (
-                    <tr {...row.getRowProps()}>
-                      {row.cells.map((cell) => (
-                        <td tabIndex="0" {...cell.getCellProps()}>
+                    <tr {...row.getRowProps()} key={`tbody__tr-${index}`}>
+                      {row.cells.map((cell, index) => (
+                        <td 
+                          tabIndex="0" 
+                          {...cell.getCellProps()} 
+                          key={`tbody__tr__td-${index}`} 
+                          role="gridcell">
                           {cell.render('Cell')}
                         </td>
                       ))}
@@ -169,7 +196,7 @@ export default function DataTable() {
                 })}
               </tbody>
             </table>
-            {config.regions ? (
+            {config.regions && config.regions.length > 0 ? (
               <table className="region-table data-table">
                 <caption className="visually-hidden">Table of the highlighted regions in the visualization</caption>
                 <thead>
@@ -180,11 +207,11 @@ export default function DataTable() {
                   </tr>
                 </thead>
                 <tbody>
-                  {config.regions.map((region) => {
+                  {config.regions.map((region,index) => {
                     if(!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
 
                     return (
-                      <tr key={`row-${region.label}`}>
+                      <tr key={`row-${region.label}--${index}`}>
                         <td>{region.label}</td>
                         <td>{formatDate(parseDate(region.from))}</td>
                         <td>{formatDate(parseDate(region.to))}</td>