@cdc/core 4.25.7 → 4.25.10

package/components/AdvancedEditor/AdvancedEditor.tsx

@@ -3,12 +3,17 @@ import MapIcon from '../../assets/map-folded.svg'
 import ChartIcon from '../../assets/icon-chart-bar.svg'
 import MarkupIncludeIcon from '../../assets/icon-code.svg'
 import { FilterFunction, JsonEditor, UpdateFunction } from 'json-edit-react'
-import { formatConfigBeforeSave as stripConfig } from '../../helpers/formatConfigBeforeSave'
 import './advanced-editor-styles.css'
 import _ from 'lodash'
 import Tooltip from '../ui/Tooltip'
 
-export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExpandCollapse = () => {} }) => {
+export const AdvancedEditor = ({
+  loadConfig,
+  config,
+  convertStateToConfig,
+  stripConfig = config => config,
+  onExpandCollapse = () => {}
+}) => {
   const [advancedToggle, _setAdvancedToggle] = useState(false)
   const [configTextboxValue, setConfigTextbox] = useState<Record<string, any>>({})
   const setAdvancedToggle = val => {
@@ -26,13 +31,29 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
   }
 
   useEffect(() => {
-    let parsedConfig = stripConfig(config)
-    if (config.type !== 'dashboard') {
-      parsedConfig = convertStateToConfig()
+    // Only process config when advanced editor is open to improve performance
+    if (advancedToggle) {
+      let parsedConfig = stripConfig(config)
+      if (config.type !== 'dashboard') {
+        parsedConfig = convertStateToConfig()
+      }
+
+      setConfigTextbox(parsedConfig)
     }
+  }, [config, advancedToggle])
 
-    setConfigTextbox(parsedConfig)
-  }, [config])
+  // Initialize config when advanced editor is first opened
+  const handleToggleOpen = () => {
+    if (!advancedToggle) {
+      // Process config only when opening for the first time
+      let parsedConfig = stripConfig(config)
+      if (config.type !== 'dashboard') {
+        parsedConfig = convertStateToConfig()
+      }
+      setConfigTextbox(parsedConfig)
+    }
+    setAdvancedToggle(!advancedToggle)
+  }
 
   const typeLookup = {
     chart: ['Charts', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
@@ -58,7 +79,7 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
         </div>
       </a>
       <div className='advanced'>
-        <span className='advanced-toggle-link' onClick={() => setAdvancedToggle(!advancedToggle)}>
+        <span className='advanced-toggle-link' onClick={handleToggleOpen}>
           <span>{advancedToggle ? `— ` : `+ `}</span>Advanced Options
         </span>
         {advancedToggle && (

package/components/DataTable/DataTable.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from 'react'
+import { useEffect, useState, useMemo, useRef } from 'react'
 import { timeParse } from 'd3-time-format'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -52,9 +52,13 @@ export type DataTableProps = {
   vizTitle?: string
   // determines if columns should be wrapped in the table
   wrapColumns?: boolean
+  interactionLabel?: string
+  // Map-specific props (optional)
+  legendMemo?: React.MutableRefObject<Map<any, any>>
+  legendSpecialClassLastMemo?: React.MutableRefObject<Map<any, any>>
+  runtimeLegend?: any
 }
 
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = (props: DataTableProps) => {
   const {
     columns,
@@ -71,7 +75,8 @@ const DataTable = (props: DataTableProps) => {
     tableTitle,
     viewport,
     vizTitle,
-    wrapColumns
+    wrapColumns,
+    interactionLabel = ''
   } = props
   const runtimeData = useMemo(() => {
     const data = removeNullColumns(parentRuntimeData)
@@ -94,6 +99,11 @@ const DataTable = (props: DataTableProps) => {
 
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
 
+  // Create default refs for map-specific props when not provided
+  const defaultLegendMemo = useRef(new Map())
+  const defaultLegendSpecialClassLastMemo = useRef(new Map())
+  const defaultRuntimeLegend = null
+
   const isVertical = !(config.type === 'chart' && !config.table?.showVertical)
 
   const rand = Math.random().toString(16).substr(2, 8)
@@ -276,9 +286,20 @@ const DataTable = (props: DataTableProps) => {
 
     const childrenMatrix =
       config.type === 'map'
-        ? mapCellMatrix({ ...props, rows, wrapColumns, runtimeData, viewport })
+        ? mapCellMatrix({
+          ...props,
+          rows,
+          wrapColumns,
+          runtimeData,
+          viewport,
+          legendMemo: props.legendMemo || defaultLegendMemo,
+          legendSpecialClassLastMemo: props.legendSpecialClassLastMemo || defaultLegendSpecialClassLastMemo,
+          runtimeLegend: props.runtimeLegend || defaultRuntimeLegend
+        })
         : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })
 
+    const useBottomExpandCollapse = config.table.showBottomCollapse && expanded && Array.isArray(childrenMatrix)
+
     // If every value in a column is a number, record the column index so the header and cells can be right-aligned
     const rightAlignedCols = childrenMatrix.length
       ? Object.fromEntries(
@@ -290,16 +311,19 @@ const DataTable = (props: DataTableProps) => {
       )
       : {}
 
+    const showCollapseButton = config.table.collapsible !== false && useBottomExpandCollapse
     const TableMediaControls = ({ belowTable }) => {
       const hasDownloadLink = config.table.download
       return (
         <MediaControls.Section classes={getMediaControlsClasses(belowTable, hasDownloadLink)}>
-          <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />
+          <MediaControls.Link config={config} dashboardDataConfig={dataConfig} interactionLabel={interactionLabel} />
           {hasDownloadLink && (
             <DownloadButton
               rawData={getDownloadData()}
               fileName={`${vizTitle || 'data-table'}.csv`}
               headerColor={headerColor}
+              interactionLabel={interactionLabel}
+              config={config}
             />
           )}
         </MediaControls.Section>
@@ -308,11 +332,21 @@ const DataTable = (props: DataTableProps) => {
 
     return (
       <ErrorBoundary component='DataTable'>
-        {!config.table.showDownloadLinkBelow && <TableMediaControls />}
+        {!config.table.showDownloadLinkBelow && (
+          <div className='w-100 d-flex justify-content-end'>
+            <TableMediaControls />
+          </div>
+        )}
         <section id={tabbingId.replace('#', '')} className={getClassNames()} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           {config.table.collapsible !== false && (
-            <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} viewport={viewport} />
+            <ExpandCollapse
+              expanded={expanded}
+              setExpanded={setExpanded}
+              tableTitle={tableTitle}
+              config={config}
+              interactionLabel={interactionLabel}
+            />
           )}
           <div className='table-container' style={limitHeight}>
             <Table
@@ -333,6 +367,7 @@ const DataTable = (props: DataTableProps) => {
                     sortBy={sortBy}
                     setSortBy={setSortBy}
                     rightAlignedCols={rightAlignedCols}
+                    interactionLabel={interactionLabel}
                   />
                 ) : (
                   <ChartHeader
@@ -344,12 +379,13 @@ const DataTable = (props: DataTableProps) => {
                     setSortBy={setSortBy}
                     viewport={viewport}
                     rightAlignedCols={rightAlignedCols}
+                    interactionLabel={interactionLabel}
                   />
                 )
               }
               tableOptions={{
-                className: `table table-striped table-width-unset ${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${isVertical ? '' : ' horizontal'
-                  }`,
+                className: `table table-striped table-width-unset ${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'
+                  }${isVertical ? '' : ' horizontal'}`,
                 'aria-live': 'assertive',
                 'aria-rowcount': config?.data?.length ? config.data.length : -1,
                 hidden: !expanded,
@@ -382,7 +418,18 @@ const DataTable = (props: DataTableProps) => {
               )}
           </div>
         </section>
-        {config.table.showDownloadLinkBelow && <TableMediaControls belowTable={true} />}
+        <div className={`w-100 d-flex ${showCollapseButton ? 'justify-content-between' : 'justify-content-end'}`}>
+          {showCollapseButton && (
+            <button
+              className='border-0 bg-transparent text-decoration-underline mt-2'
+              style={{ color: 'var(--colors-link-blue)', fontSize: '0.772rem', textUnderlineOffset: '6px' }}
+              onClick={() => setExpanded(false)}
+            >
+              - Collapse table
+            </button>
+          )}
+          {config.table.showDownloadLinkBelow && <TableMediaControls belowTable={true} />}
+        </div>
         <div id={skipId} className='cdcdataviz-sr-only'>
           Skipped data table.
         </div>
@@ -394,7 +441,12 @@ const DataTable = (props: DataTableProps) => {
       <ErrorBoundary component='DataTable'>
         <section id={tabbingId.replace('#', '')} className={getClassNames()} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
-          <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
+          <ExpandCollapse
+            expanded={expanded}
+            setExpanded={setExpanded}
+            tableTitle={tableTitle}
+            interactionLabel={interactionLabel}
+          />
           <div className='table-container' style={limitHeight}>
             <Table
               viewport={viewport}

package/components/DataTable/DataTableStandAlone.tsx

@@ -18,6 +18,7 @@ type StandAloneProps = {
   isEditor?: boolean
   updateConfig?: (Visualization) => void
   datasets?: Datasets
+  interactionLabel?: string
 }
 
 const DataTableStandAlone: React.FC<StandAloneProps> = ({
@@ -26,7 +27,8 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
   updateConfig,
   viewport,
   isEditor,
-  datasets
+  datasets,
+  interactionLabel = ''
 }) => {
   const [filteredData, setFilteredData] = useState<Record<string, any>[]>(
     filterVizData(config.filters, config.formattedData || config.data)
@@ -69,6 +71,7 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
         tabbingId={visualizationKey}
         tableTitle={config.table.label}
         viewport={viewport || 'lg'}
+        interactionLabel={interactionLabel}
       />
       <FootnotesStandAlone config={config.footnotes} filters={config.filters?.filter(f => f.filterFootnotes)} />
     </>

package/components/DataTable/components/ChartHeader.tsx

@@ -6,8 +6,20 @@ import { SortIcon } from './SortIcon'
 import { getNewSortBy } from '../helpers/getNewSortBy'
 import parse from 'html-react-parser'
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
-type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType?; viewport; rightAlignedCols }
+type ChartHeaderProps = {
+  data
+  isVertical
+  config
+  setSortBy
+  sortBy
+  hasRowType?
+  viewport
+  rightAlignedCols
+  interactionLabel: string
+}
 
 const ChartHeader = ({
   data,
@@ -17,7 +29,8 @@ const ChartHeader = ({
   sortBy,
   hasRowType,
   viewport,
-  rightAlignedCols
+  rightAlignedCols,
+  interactionLabel
 }: ChartHeaderProps) => {
   const groupBy = config.table?.groupBy
   if (!data) return
@@ -49,9 +62,8 @@ const ChartHeader = ({
     if (columnHeaderText === notApplicableText) return
 
     return (
-      <span className='cdcdataviz-sr-only'>{`Press command, modifier, or enter key to sort by ${columnHeaderText} in ${
-        sortBy.column !== columnHeaderText ? 'ascending' : sortBy.column === 'desc' ? 'descending' : 'ascending'
-      }  order`}</span>
+      <span className='cdcdataviz-sr-only'>{`Press command, modifier, or enter key to sort by ${columnHeaderText} in ${sortBy.column !== columnHeaderText ? 'ascending' : sortBy.column === 'desc' ? 'descending' : 'ascending'
+        }  order`}</span>
     )
   }
 
@@ -104,11 +116,29 @@ const ChartHeader = ({
               scope='col'
               onClick={() => {
                 if (hasRowType) return
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `data_table_sort`,
+                  eventAction: 'click',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                })
                 setSortBy(newSortBy)
               }}
               onKeyDown={e => {
                 if (hasRowType) return
-                if (e.keyCode === 13) {
+                if (e.key === 'Enter') {
+                  publishAnalyticsEvent({
+                    vizType: config.type,
+                    vizSubType: getVizSubType(config),
+                    eventType: `data_table_sort`,
+                    eventAction: 'keyboard',
+                    eventLabel: interactionLabel,
+                    vizTitle: getVizTitle(config),
+                    specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                  })
                   setSortBy(newSortBy)
                 }
               }}
@@ -118,7 +148,7 @@ const ChartHeader = ({
                   : { 'aria-sort': 'descending' }
                 : null)}
             >
-              <ColumnHeadingText text={text} column={column} config={config} />
+              <ColumnHeadingText text={text} config={config} />
               {isSortedCol && <SortIcon ascending={sortByAsc} />}
               <ScreenReaderSortByText sortBy={sortBy} config={config} text={text} />
             </th>
@@ -152,10 +182,29 @@ const ChartHeader = ({
               role='columnheader'
               scope='col'
               onClick={() => {
+                if (hasRowType) return
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `data_table_sort`,
+                  eventAction: 'click',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                })
                 setSortBy(newSortBy)
               }}
               onKeyDown={e => {
-                if (e.keyCode === 13) {
+                if (e.key === 'Enter') {
+                  publishAnalyticsEvent({
+                    vizType: config.type,
+                    vizSubType: getVizSubType(config),
+                    eventType: `data_table_sort`,
+                    eventAction: 'keyboard',
+                    eventLabel: interactionLabel,
+                    vizTitle: getVizTitle(config),
+                    specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                  })
                   setSortBy(newSortBy)
                 }
               }}
@@ -165,7 +214,7 @@ const ChartHeader = ({
                   : { 'aria-sort': 'descending' }
                 : null)}
             >
-              <ColumnHeadingText text={text} column={column} config={config} />
+              <ColumnHeadingText text={text} config={config} />
               {isSortedCol && <SortIcon ascending={sortByAsc} />}
 
               <ScreenReaderSortByText text={text} config={config} sortBy={sortBy} />

package/components/DataTable/components/ExpandCollapse.tsx

@@ -1,12 +1,32 @@
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
+import { Visualization } from '../../../types/Visualization'
 import Icon from '../../ui/Icon'
 import parse from 'html-react-parser'
 
-const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport }) => {
+interface ExpandCollapseProps {
+  expanded: boolean
+  setExpanded: (expanded: boolean) => void
+  tableTitle: string
+  config?: Visualization
+  interactionLabel?: string
+}
+
+const ExpandCollapse = ({ expanded, setExpanded, tableTitle, config, interactionLabel = '' }: ExpandCollapseProps) => {
   return (
     <div
       role='button'
       className={expanded ? 'data-table-heading p-3' : 'collapsed data-table-heading p-3'}
       onClick={() => {
+        publishAnalyticsEvent({
+          vizType: config?.type,
+          vizSubType: getVizSubType(config),
+          eventType: 'expand_collapse_toggled',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config),
+          specifics: expanded ? 'collapsed' : 'expanded'
+        })
         setExpanded(!expanded)
       }}
       tabIndex={0}

package/components/DataTable/components/MapHeader.tsx

@@ -2,10 +2,13 @@ import { DataTableProps } from '../DataTable'
 import ScreenReaderText from '../../elements/ScreenReaderText'
 import { SortIcon } from './SortIcon'
 import { getNewSortBy } from '../helpers/getNewSortBy'
+import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 type MapHeaderProps = DataTableProps & {
   sortBy: { column; asc }
   setSortBy: Function
+  interactionLabel: string
 }
 
 const ColumnHeadingText = ({ text, config }) => {
@@ -16,7 +19,15 @@ const ColumnHeadingText = ({ text, config }) => {
   return text
 }
 
-const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy, rightAlignedCols }: MapHeaderProps) => {
+const MapHeader = ({
+  columns,
+  config,
+  indexTitle,
+  sortBy,
+  setSortBy,
+  rightAlignedCols,
+  interactionLabel = ''
+}: MapHeaderProps) => {
   return (
     <tr>
       {Object.keys(columns)
@@ -46,10 +57,28 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy, rightAligne
               role='columnheader'
               scope='col'
               onClick={() => {
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `data_table_sort`,
+                  eventAction: 'click',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                })
                 setSortBy(newSortBy)
               }}
               onKeyDown={e => {
-                if (e.keyCode === 13) {
+                if (e.key === 'Enter') {
+                  publishAnalyticsEvent({
+                    vizType: config.type,
+                    vizSubType: getVizSubType(config),
+                    eventType: `data_table_sort`,
+                    eventAction: 'keyboard',
+                    eventLabel: interactionLabel,
+                    vizTitle: getVizTitle(config),
+                    specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                  })
                   setSortBy(newSortBy)
                 }
               }}
@@ -60,15 +89,14 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy, rightAligne
                   : { 'aria-sort': 'descending' }
                 : null)}
             >
-              <ColumnHeadingText text={text} config={config} column={column} />
+              <ColumnHeadingText text={text} config={config} />
               <SortIcon ascending={sortByAsc} />
-              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${
-                sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
-              } order`}</span>
+              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
+                } order`}</span>
             </th>
           )
         })}
-    </tr>
+    </tr >
   )
 }
 

package/components/DataTable/data-table.css

@@ -145,7 +145,13 @@ table.data-table {
 
     svg {
       margin-left: 1rem;
+
+      &.legend-shape-svg {
+        display: flex;
+        margin-left: 0 !important;
+      }
     }
+
   }
 
   td a {

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -31,7 +31,6 @@ const chartCellArray = ({
   const groupBy = config.table?.groupBy
   const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
 
-
   const dataSeriesColumnsSorted = () => {
     if (!sortBy && sortBy.colIndex === null) return dataSeriesColumns
     return dataSeriesColumns.sort((a, b) => {
@@ -73,10 +72,14 @@ const chartCellArray = ({
       return rows.map(row => {
         if (hasRowType) {
           const rowType = getRowType(runtimeData[row])
-          const rowValues = dataSeriesColumns.map(column => getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap))
+          const rowValues = dataSeriesColumns.map(column =>
+            getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap)
+          )
           return [rowType, ...rowValues]
         } else {
-          return dataSeriesColumns.map((column, j) => getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap))
+          return dataSeriesColumns.map((column, j) =>
+            getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap)
+          )
         }
       })
     }
@@ -86,11 +89,11 @@ const chartCellArray = ({
       let nodes: ReactNode[] =
         config.visualizationType !== 'Pie'
           ? [
-            <>
-              {colorScale && colorScale(seriesName) && <LegendShape fill={colorScale(seriesName)} />}
-              {parse(seriesName)}
-            </>
-          ]
+              <>
+                {colorScale && colorScale(seriesName) && <LegendShape fill={colorScale(seriesName)} />}
+                {parse(String(seriesName))}
+              </>
+            ]
           : []
       return nodes.concat(rows.map((row, i) => getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap)))
     })

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -6,6 +6,7 @@ import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
 import _ from 'lodash'
 import { applyLegendToRow } from '@cdc/map/src/helpers/applyLegendToRow'
 import { hashObj } from '@cdc/map/src/helpers'
+import { getPatternForRow } from '@cdc/map/src/helpers/getPatternForRow'
 
 type MapRowsProps = DataTableProps & {
   rows: string[]
@@ -104,10 +105,27 @@ const mapCellArray = ({
             type === 'bubble' && allowMapZoom && geoType === 'world' ? () => setFilteredCountryCode(row) : undefined
 
           const validColor = legendColor && legendColor.length > 0 && !noColor
+          
+          // Check for pattern information
+          const patternInfo = getPatternForRow(rowObj, config)
+          const mapId = config.runtime?.uniqueId || 'map'
+          
           return (
             <div className='col-12'>
               {validColor ? (
-                <LegendShape fill={legendColor[0]} />
+                patternInfo ? (
+                  <LegendShape
+                    fill={legendColor[0]}
+                    patternInfo={{
+                      pattern: patternInfo.pattern,
+                      patternId: `${mapId}--${patternInfo.dataKey}--${patternInfo.patternIndex}--table`,
+                      size: patternInfo.size,
+                      color: patternInfo.color
+                    }}
+                  />
+                ) : (
+                  <LegendShape fill={legendColor[0]} />
+                )
               ) : (
                 <div className='d-inline-block me-2' style={{ width: '1rem', height: '1rem' }} />
               )}

package/components/DownloadButton.tsx

@@ -1,40 +1,69 @@
+import { useRef } from 'react'
 import Papa from 'papaparse'
+import { publishAnalyticsEvent } from '../helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 type DownloadButtonProps = {
-  rawData: Object
+  rawData: any[]
   fileName: string
   headerColor: string
   skipId: string | number
+  configUrl?: string
+  interactionLabel?: string
+  title?: string
 }
 
-const DownloadButton = ({ rawData, fileName, headerColor, skipId }: DownloadButtonProps) => {
-  const csvData = Papa.unparse(rawData)
-  // Prepend a Byte Order Mark (BOM) to the CSV data.
-  // The BOM is a special marker that helps applications like Excel recognize the file as UTF-8 encoded.
-  // Adding the BOM ensures that Excel interprets special characters correctly.
-  const bom = '\uFEFF'
-  const utf8EncodedCsvData = new TextEncoder().encode(bom + csvData)
-  const blob = new Blob([utf8EncodedCsvData], { type: 'text/csv;charset=utf-8;' })
+const DownloadButton = ({ rawData, fileName, headerColor, skipId, interactionLabel, configUrl, title, config }: DownloadButtonProps) => {
+  const linkRef = useRef<HTMLAnchorElement>(null)
+
+  const handleDownload = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+
+    const csvData = Papa.unparse(rawData)
+
+    // Prepend a Byte Order Mark (BOM) to the CSV data.
+    // The BOM is a special marker that helps applications like Excel recognize the file as UTF-8 encoded.
+    // Adding the BOM ensures that Excel interprets special characters correctly.
+    const bom = '\uFEFF'
+    const utf8EncodedCsvData = new TextEncoder().encode(bom + csvData)
+    const blob = new Blob([utf8EncodedCsvData], { type: 'text/csv;charset=utf-8;' })
+
+    const url = URL.createObjectURL(blob)
 
-  const saveBlob = () => {
     //@ts-ignore
     if (typeof window.navigator.msSaveBlob === 'function') {
       //@ts-ignore
       navigator.msSaveBlob(blob, fileName)
+    } else {
+      const downloadLink = document.createElement('a')
+      downloadLink.href = url
+      downloadLink.download = fileName
+      document.body.appendChild(downloadLink)
+      downloadLink.click()
+      document.body.removeChild(downloadLink)
     }
+    URL.revokeObjectURL(url)
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'data_downloaded',
+      eventAction: 'click',
+      eventLabel: interactionLabel || configUrl,
+      vizTitle: getVizTitle(config)
+    })
   }
 
   return (
     <a
-      download={fileName}
+      ref={linkRef}
       type='button'
-      onClick={saveBlob}
-      href={URL.createObjectURL(blob)}
+      onClick={handleDownload}
       aria-label='Download this data in a CSV file format.'
       className={`${headerColor} no-border`}
       id={`${skipId}`}
       data-html2canvas-ignore
       role='button'
+      style={{ cursor: 'pointer' }}
     >
       Download Data (CSV)
     </a>