@cdc/map 4.25.8 → 4.25.10

package/src/components/DataTable.tsx

@@ -13,6 +13,8 @@ import Loading from '@cdc/core/components/Loading'
 import { navigationHandler } from '../helpers'
 import ConfigContext, { MapDispatchContext } from '../context'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getPatternForRow } from '../helpers/getPatternForRow'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const DataTable = props => {
   const {
@@ -34,7 +36,7 @@ const DataTable = props => {
   } = props
 
   const dispatch = useContext(MapDispatchContext)
-  const { currentViewport: viewport } = useContext(ConfigContext)
+  const { currentViewport: viewport, mapId } = useContext(ConfigContext)
   const [expanded, setExpanded] = useState(expandDataTable)
   const [sortBy, setSortBy] = useState({ column: 'geo', asc: false })
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
@@ -124,7 +126,7 @@ const DataTable = props => {
           role='link'
           tabIndex='0'
           onKeyDown={e => {
-            if (e.keyCode === 13) {
+            if (e.key === 'Enter') {
               navigationHandler(state.general.navigationTarget, row[columns.navigate.name])
             }
           }}
@@ -179,7 +181,14 @@ const DataTable = props => {
         type='button'
         onClick={() => {
           saveBlob
-          publishAnalyticsEvent('data_downloaded', 'click', interactionLabel)
+          publishAnalyticsEvent({
+            vizType: state.type,
+            vizSubType: getVizSubType(state),
+            eventType: 'data_downloaded',
+            eventAction: 'click',
+            eventLabel: interactionLabel,
+            vizTitle: getVizTitle(state)
+          })
         }}
         href={URL.createObjectURL(blob)}
         aria-label='Download this data in a CSV file format.'
@@ -197,7 +206,7 @@ const DataTable = props => {
     return (
       <MediaControls.Section classes={['download-links']}>
         <MediaControls.Link config={state} interactionLabel={interactionLabel} />
-        {state.table.download && <DownloadButton />}
+        {state.table.download && <DownloadButton config={state} />}
       </MediaControls.Section>
     )
   }
@@ -249,7 +258,7 @@ const DataTable = props => {
           }}
           tabIndex='0'
           onKeyDown={e => {
-            if (e.keyCode === 13) {
+            if (e.key === 'Enter') {
               setExpanded(!expanded)
             }
           }}
@@ -297,7 +306,7 @@ const DataTable = props => {
                           setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
                         }}
                         onKeyDown={e => {
-                          if (e.keyCode === 13) {
+                          if (e.key === 'Enter') {
                             setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
                           }
                         }}
@@ -341,9 +350,28 @@ const DataTable = props => {
 
                           labelValue = getCellAnchor(labelValue, rowObj)
 
+                          // Check for pattern information
+                          const patternInfo = getPatternForRow(rowObj, state)
+
+                          const legendShape = patternInfo ? (
+                            <LegendShape
+                              fill={legendColor[0]}
+                              patternInfo={{
+                                pattern: patternInfo.pattern,
+                                patternId: `${mapId}--${String(patternInfo.dataKey).replace(' ', '-')}--${
+                                  patternInfo.patternIndex
+                                }--table`,
+                                size: patternInfo.size,
+                                color: patternInfo.color
+                              }}
+                            />
+                          ) : (
+                            <LegendShape fill={legendColor[0]} />
+                          )
+
                           cellValue = (
                             <>
-                              <LegendShape fill={legendColor[0]} />
+                              {legendShape}
                               {labelValue}
                             </>
                           )
@@ -353,9 +381,9 @@ const DataTable = props => {
 
                         return (
                           <td
-                            tabIndex='0'
+                            tabIndex={0}
                             role='gridcell'
-                            onClick={e =>
+                            onClick={() =>
                               state.general.type === 'bubble' &&
                               state.general.allowMapZoom &&
                               state.general.geoType === 'world'