@cdc/chart 4.22.11 → 4.23.2

package/src/components/{DataTable.tsx → DataTable.jsx}

@@ -1,23 +1,27 @@
-import React, { useContext, useEffect, useState, useMemo, memo, Fragment } from 'react'
+import React, { useContext, useEffect, useState, useMemo } 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 LegendCircle from '@cdc/core/components/LegendCircle'
+import Icon from '@cdc/core/components/ui/Icon'
 
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
+
+import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
 
 export default function DataTable() {
-  const { rawData, transformedData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes } = useContext<any>(Context)
+  const { rawData, transformedData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes, imageId } = useContext(ConfigContext)
+
+  // Debugging.
+  // if (config.visualizationType === 'Box Plot') return null
 
-  const legendGlyphSize = 15
-  const legendGlyphSizeHalf = legendGlyphSize / 2
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
-  const [tableExpanded, setTableExpanded] = useState<boolean>(config.table.expanded)
+  const [tableExpanded, setTableExpanded] = useState(config.table.expanded)
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
 
-  const DownloadButton = ({ data }: any) => {
+  const DownloadButton = ({ data }, type) => {
     const fileName = `${config.title.substring(0, 50)}.csv`
 
     const csvData = Papa.unparse(data)
@@ -31,11 +35,20 @@ export default function DataTable() {
       }
     }
 
-    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`}>
-        Download Data (CSV)
-      </a>
-    )
+    switch (type) {
+      case 'download':
+        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`}>
+            Download Data (CSV)
+          </a>
+        )
+      default:
+        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={`no-border`}>
+            Download Data (CSV)
+          </a>
+        )
+    }
   }
 
   // Creates columns structure for the table
@@ -43,52 +56,127 @@ export default function DataTable() {
     const newTableColumns =
       config.visualizationType === 'Pie'
         ? []
-        : [
+        : config.visualizationType === 'Box Plot'
+          ? [
+            {
+              Header: 'Measures',
+              Cell: props => {
+                const resolveName = () => {
+                  let {
+                    boxplot: { labels }
+                  } = config
+                  const columnLookup = {
+                    columnMean: labels.mean,
+                    columnMax: labels.maximum,
+                    columnMin: labels.minimum,
+                    columnIqr: labels.iqr,
+                    columnCategory: 'Category',
+                    columnMedian: labels.median,
+                    columnFirstQuartile: labels.q1,
+                    columnThirdQuartile: labels.q3,
+                    columnOutliers: labels.outliers,
+                    values: labels.values,
+                    columnCount: labels.count,
+                    columnSd: 'Standard Deviation',
+                    nonOutlierValues: 'Non Outliers'
+                  }
+
+                  let resolvedName = columnLookup[props.row.original[0]]
+
+                  return resolvedName
+                }
+
+                return resolveName()
+              }
+            }
+          ]
+          : [
             {
               Header: '',
               Cell: ({ row }) => {
                 const seriesLabel = config.runtime.seriesLabels ? config.runtime.seriesLabels[row.original] : row.original
                 return (
-                  <Fragment>
+                  <>
                     {config.visualizationType !== 'Pie' && (
                       <LegendCircle
                         fill={
-                          // non dynamic leged
+                          // non-dynamic leged
                           !config.legend.dynamicLegend
                             ? colorScale(seriesLabel)
                             : // dynamic legend
                             config.legend.dynamicLegend
-                            ? colorPalettes[config.palette][row.index]
-                            : // fallback
+                              ? colorPalettes[config.palette][row.index]
+                              : // fallback
                               '#000'
                         }
                       />
                     )}
                     <span>{seriesLabel}</span>
-                  </Fragment>
+                  </>
                 )
               },
               id: 'series-label'
             }
           ]
+    if (config.visualizationType !== 'Box Plot') {
+      data.forEach((d, index) => {
+        const resolveTableHeader = () => {
+          if (config.runtime[section].type === 'date') return formatDate(parseDate(d[config.runtime.originalXAxis.dataKey]))
+          return d[config.runtime.originalXAxis.dataKey]
+        }
+        const newCol = {
+          Header: resolveTableHeader(),
+          Cell: ({ row }) => {
+            return <>{numberFormatter(d[row.original])}</>
+          },
+          id: `${d[config.runtime.originalXAxis.dataKey]}--${index}`,
+          canSort: true
+        }
 
-    data.forEach(d => {
-      const newCol = {
-        Header: config.runtime[section].type === 'date' ? formatDate(parseDate(d[config.runtime.originalXAxis.dataKey])) : d[config.runtime.originalXAxis.dataKey],
-        Cell: ({ row }) => {
-          return <>{numberFormatter(d[row.original])}</>
-        },
-        id: d[config.runtime.originalXAxis.dataKey],
-        canSort: true
-      }
+        newTableColumns.push(newCol)
+      })
+    }
 
-      newTableColumns.push(newCol)
-    })
+    if (config.visualizationType === 'Box Plot') {
+      config.boxplot.tableData.map((plot, index) => {
+        const newCol = {
+          Header: plot.columnCategory,
+          Cell: props => {
+            let resolveCell = () => {
+              if (Number(props.row.id) === 0) return true
+              if (Number(props.row.id) === 1) return plot.columnMax
+              if (Number(props.row.id) === 2) return plot.columnThirdQuartile
+              if (Number(props.row.id) === 3) return plot.columnMedian
+              if (Number(props.row.id) === 4) return plot.columnFirstQuartile
+              if (Number(props.row.id) === 5) return plot.columnMin
+              if (Number(props.row.id) === 6) return plot.columnCount
+              if (Number(props.row.id) === 7) return plot.columnSd
+              if (Number(props.row.id) === 8) return plot.columnMean
+              if (Number(props.row.id) === 9) return plot.columnOutliers.length > 0 ? plot.columnOutliers.toString() : '-'
+              if (Number(props.row.id) === 10) return plot.values.length > 0 ? plot.values.toString() : '-'
+              return <p>-</p>
+            }
+            return resolveCell()
+          },
+          id: `${index}`,
+          canSort: false
+        }
+
+        newTableColumns.push(newCol)
+      })
+    }
 
     return newTableColumns
   }, [config, colorScale])
 
-  const tableData = useMemo(() => (config.visualizationType === 'Pie' ? [config.yAxis.dataKey] : config.runtime.seriesKeys), [config.runtime.seriesKeys])
+  // prettier-ignore
+  const tableData = useMemo(() => (
+    config.visualizationType === 'Pie'
+      ? [config.yAxis.dataKey]
+      : config.visualizationType === 'Box Plot'
+        ? Object.entries(config.boxplot.tableData[0])
+        : config.runtime.seriesKeys),
+    [config.runtime.seriesKeys])
 
   // Change accessibility label depending on expanded status
   useEffect(() => {
@@ -117,6 +205,11 @@ export default function DataTable() {
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns: tableColumns, data: tableData, defaultColumn }, useSortBy, useBlockLayout, useResizeColumns)
   return (
     <ErrorBoundary component='DataTable'>
+      <CoveMediaControls.Section classes={['download-links']}>
+        <CoveMediaControls.Link config={config} />
+        {config.table.download && <DownloadButton data={rawData} type='link' />}
+      </CoveMediaControls.Section>
+
       <section id={config?.title ? `dataTableSection__${config?.title.replace(/\s/g, '')}` : `dataTableSection`} className={`data-table-container`} aria-label={accessibilityLabel}>
         <div
           role='button'
@@ -131,6 +224,7 @@ export default function DataTable() {
             }
           }}
         >
+          <Icon display={tableExpanded ? 'minus' : 'plus'} base/>
           {config.table.label}
         </div>
         <div className='table-container' hidden={!tableExpanded} style={{ maxHeight: config.table.limitHeight && `${config.table.height}px`, overflowY: 'scroll' }}>
@@ -165,7 +259,7 @@ export default function DataTable() {
               {rows.map((row, index) => {
                 prepareRow(row)
                 return (
-                  <tr {...row.getRowProps()} key={`tbody__tr-${index}`}>
+                  <tr {...row.getRowProps()} key={`tbody__tr-${index}`} className={`row-${String(config.visualizationType).replace(' ', '-')}--${index}`}>
                     {row.cells.map((cell, index) => {
                       return (
                         <td tabIndex='0' {...cell.getCellProps()} key={`tbody__tr__td-${index}`} role='gridcell'>
@@ -206,7 +300,6 @@ export default function DataTable() {
             ''
           )}
         </div>
-        {config.table.download && <DownloadButton data={rawData} />}
       </section>
     </ErrorBoundary>
   )