@cdc/core 4.25.3 → 4.25.6-1

package/assets/icon-close.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 24 24" fill="currentColor">
     <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
 </svg>

package/components/Alert/components/Alert.tsx

@@ -59,7 +59,7 @@ const Alert: React.FC<AlertProps> = ({
         <span dangerouslySetInnerHTML={sanitizedData()} />
       </div>
       {showCloseButton && (
-        <button type='button' className='close pl-5' aria-label='Close' onClick={() => onDismiss()}>
+        <button type='button' className='close ps-5' aria-label='Close' onClick={() => onDismiss()}>
           X
         </button>
       )}

package/components/DataTable/DataTable.tsx

@@ -27,7 +27,6 @@ import _ from 'lodash'
 import { getDataSeriesColumns } from './helpers/getDataSeriesColumns'
 
 export type DataTableProps = {
-  applyLegendToRow?: Function
   colorScale?: Function
   columns?: Record<string, Column>
   config: TableConfig
@@ -35,7 +34,7 @@ export type DataTableProps = {
   defaultSortBy?: string
   displayGeoName?: (row: string) => string
   expandDataTable: boolean
-  formatLegendLocation?: (row: string) => string
+  formatLegendLocation?: (row: string, runtimeLookup: string) => string
   groupBy?: string
   headerColor?: string
   imageRef?: string
@@ -58,20 +57,20 @@ export type DataTableProps = {
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = (props: DataTableProps) => {
   const {
+    columns,
     config,
     dataConfig,
     defaultSortBy,
     displayGeoName,
-    tableTitle,
-    vizTitle,
-    rawData,
-    runtimeData: parentRuntimeData,
-    headerColor,
     expandDataTable,
-    columns,
-    viewport,
     formatLegendLocation,
+    headerColor,
+    rawData,
+    runtimeData: parentRuntimeData,
     tabbingId,
+    tableTitle,
+    viewport,
+    vizTitle,
     wrapColumns
   } = props
   const runtimeData = useMemo(() => {
@@ -127,9 +126,6 @@ const DataTable = (props: DataTableProps) => {
     case 'Box Plot':
       if (!config.boxplot) return <Loading />
       break
-    case 'Line' || 'Bar' || 'Combo' || 'Pie' || 'Deviation Bar' || 'Paired Bar' || 'Sankey' || 'Table':
-      if (!runtimeData) return <Loading />
-      break
     default:
       if (!runtimeData) return <Loading />
       break
@@ -248,9 +244,14 @@ const DataTable = (props: DataTableProps) => {
       const csvData = config.table?.downloadVisibleDataOnly ? visibleData : rawData
 
       // only use fullGeoName on County maps and no other
-      if (config.general?.geoType === 'us-county') {
+      if (config.general?.geoType === 'us-county' || config.table.showFullGeoNameInCSV) {
         // Add column for full Geo name along with State
-        return csvData.map(row => ({ FullGeoName: formatLegendLocation(row[config.columns.geo.name]), ...row }))
+        return csvData.map(row => {
+          return {
+            FullGeoName: formatLegendLocation(row[config.columns.geo.name]),
+            ...row
+          }
+        })
       } else {
         return csvData
       }
@@ -275,7 +276,7 @@ const DataTable = (props: DataTableProps) => {
 
     const childrenMatrix =
       config.type === 'map'
-        ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport })
+        ? mapCellMatrix({ ...props, rows, wrapColumns, runtimeData, viewport })
         : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })
 
     // If every value in a column is a number, record the column index so the header and cells can be right-aligned
@@ -352,7 +353,8 @@ const DataTable = (props: DataTableProps) => {
                 }`,
                 'aria-live': 'assertive',
                 'aria-rowcount': config?.data?.length ? config.data.length : -1,
-                hidden: !expanded
+                hidden: !expanded,
+                cellMinWidth: 100
               }}
               rightAlignedCols={rightAlignedCols}
             />

package/components/DataTable/DataTableStandAlone.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { ViewPort } from '../../types/ViewPort'
+import Footnotes from '../../types/Footnotes'
 import EditorWrapper from '../EditorWrapper/EditorWrapper'
 import DataTable from './DataTable'
 import DataTableEditorPanel from './components/DataTableEditorPanel'
@@ -7,6 +8,8 @@ import Filters from '../Filters'
 import { TableConfig } from './types/TableConfig'
 import { filterVizData } from '../../helpers/filterVizData'
 import { addValuesToFilters } from '../../helpers/addValuesToFilters'
+import FootnotesStandAlone from '../Footnotes/FootnotesStandAlone'
+import { Datasets } from '@cdc/core/types/DataSet'
 
 type StandAloneProps = {
   visualizationKey: string
@@ -14,6 +17,7 @@ type StandAloneProps = {
   viewport?: ViewPort
   isEditor?: boolean
   updateConfig?: (Visualization) => void
+  datasets?: Datasets
 }
 
 const DataTableStandAlone: React.FC<StandAloneProps> = ({
@@ -21,7 +25,8 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
   config,
   updateConfig,
   viewport,
-  isEditor
+  isEditor,
+  datasets
 }) => {
   const [filteredData, setFilteredData] = useState<Record<string, any>[]>(
     filterVizData(config.filters, config.formattedData || config.data)
@@ -33,6 +38,12 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
     setFilteredData(filterVizData(filters, config?.formattedData?.length > 0 ? config.formattedData : config.data))
   }, [config.filters])
 
+  const setFilters = (newFilters: any) => {
+    const filters = addValuesToFilters(newFilters, config.data)
+    updateConfig({ ...config, filters })
+    setFilteredData(filterVizData(filters, config?.formattedData?.length > 0 ? config.formattedData : config.data))
+  }
+
   if (isEditor)
     return (
       <EditorWrapper
@@ -43,19 +54,13 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
         type={'Table'}
         viewport={viewport}
       >
-        <DataTableEditorPanel key={visualizationKey} config={config} updateConfig={updateConfig} />
+        <DataTableEditorPanel key={visualizationKey} config={config} updateConfig={updateConfig} datasets={datasets} />
       </EditorWrapper>
     )
 
   return (
     <>
-      <Filters
-        config={config}
-        setConfig={updateConfig}
-        setFilteredData={setFilteredData}
-        filteredData={filteredData}
-        excludedData={config.formattedData}
-      />
+      <Filters config={config} setFilters={setFilters} excludedData={config.formattedData} />
       <DataTable
         expandDataTable={config.table.expanded}
         config={config}
@@ -65,6 +70,7 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
         tableTitle={config.table.label}
         viewport={viewport || 'lg'}
       />
+      <FootnotesStandAlone config={config.footnotes} filters={config.filters?.filter(f => f.filterFootnotes)} />
     </>
   )
 }

package/components/DataTable/components/CellAnchor.tsx

@@ -6,7 +6,7 @@ const CellAnchor = ({ markup, row, columns, navigationHandler, mapZoomHandler })
   if (columns.navigate && row[columns.navigate.name]) {
     return (
       <span
-        onClick={() => navigationHandler(row[columns.navigate.name])}
+        onClick={() => navigationHandler('_blank', row[columns.navigate.name])}
         className='table-link'
         title='Click for more information (Opens in a new window)'
         role='link'

package/components/DataTable/components/ChartHeader.tsx

@@ -4,6 +4,7 @@ import { getDataSeriesColumns } from '../helpers/getDataSeriesColumns'
 import ScreenReaderText from '@cdc/core/components/elements/ScreenReaderText'
 import { SortIcon } from './SortIcon'
 import { getNewSortBy } from '../helpers/getNewSortBy'
+import parse from 'html-react-parser'
 
 type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType?; viewport; rightAlignedCols }
 
@@ -47,9 +48,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>
     )
   }
 
@@ -75,7 +75,7 @@ const ChartHeader = ({
     return (
       <tr>
         {dataSeriesColumns.map((column, index) => {
-          const text = getSeriesName(column, config)
+          const text = parse(getSeriesName(column, config))
           const newSortBy = getNewSortBy(sortBy, column, index)
           const sortByAsc = sortBy.column === column ? sortBy.asc : undefined
           const isSortedCol = column === sortBy.column && !hasRowType
@@ -120,8 +120,11 @@ const ChartHeader = ({
     return (
       <tr>
         {['__series__', ...Object.keys(data)].slice(sliceVal).map((row, index) => {
+          const rightAxisItems = config.series?.filter(item => item?.axis === 'Right') || []
+          const rightAxisItemsMap = new Map(rightAxisItems.map(item => [item.dataKey, item]))
+
           let column = config.xAxis?.dataKey
-          let text = row !== '__series__' ? getChartCellValue(row, column, config, data) : '__series__'
+          let text = row !== '__series__' ? getChartCellValue(row, column, config, data, rightAxisItemsMap) : '__series__'
           const newSortBy = getNewSortBy(sortBy, column, index)
           const sortByAsc = sortBy.colIndex === index ? sortBy.asc : undefined
           const isSortedCol = index === sortBy.colIndex && !hasRowType

package/components/DataTable/components/DataTableEditorPanel.tsx

@@ -1,4 +1,10 @@
-import { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemButton,
+  AccordionItemHeading,
+  AccordionItemPanel
+} from 'react-accessible-accordion'
 import DataTableEditor from '../../EditorPanel/DataTableEditor'
 import { Visualization } from '@cdc/core/types/Visualization'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
@@ -6,13 +12,16 @@ import { useMemo } from 'react'
 import ColumnsEditor from '../../EditorPanel/ColumnsEditor'
 import VizFilterEditor from '../../EditorPanel/VizFilterEditor'
 import _ from 'lodash'
+import FootnotesEditor from '../../EditorPanel/FootnotesEditor'
+import { Datasets } from '@cdc/core/types/DataSet'
 
 type DataTableEditorProps = {
   config: Visualization
   updateConfig: Function
+  datasets?: Datasets
 }
 
-const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateConfig }) => {
+const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateConfig, datasets }) => {
   const updateField = useMemo(() => updateFieldFactory(config, updateConfig), [JSON.stringify(config)])
   const deleteColumn = columnName => {
     const newColumns = _.cloneDeep(config.columns)
@@ -33,7 +42,12 @@ const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateCo
           <AccordionItemButton>Filters</AccordionItemButton>
         </AccordionItemHeading>
         <AccordionItemPanel>
-          <VizFilterEditor config={config} updateField={updateField} rawData={config.originalFormattedData} />
+          <VizFilterEditor
+            config={config}
+            updateField={updateField}
+            rawData={config.originalFormattedData}
+            hasFootnotes={true}
+          />
         </AccordionItemPanel>
       </AccordionItem>
       <AccordionItem>
@@ -52,6 +66,14 @@ const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateCo
           <DataTableEditor config={config} columns={columns} updateField={updateField} isDashboard={true} />
         </AccordionItemPanel>
       </AccordionItem>
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>Footnotes</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          <FootnotesEditor config={config} updateField={updateField} datasets={datasets} />
+        </AccordionItemPanel>
+      </AccordionItem>
     </Accordion>
   )
 }

package/components/DataTable/components/MapHeader.tsx

@@ -36,6 +36,7 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy, rightAligne
           return (
             <th
               style={{
+                minWidth: (config.table.cellMinWidth || 0) + 'px',
                 textAlign: rightAlignedCols && rightAlignedCols[index] ? 'right' : '',
                 paddingRight: '1.3em'
               }}

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -7,6 +7,7 @@ import { getDataSeriesColumns } from './getDataSeriesColumns'
 import { ReactNode } from 'react'
 import { CellMatrix, GroupCellMatrix } from '../../Table/types/CellMatrix'
 import { getRowType } from './getRowType'
+import parse from 'html-react-parser'
 
 type ChartRowsProps = DataTableProps & {
   rows: string[]
@@ -25,9 +26,12 @@ const chartCellArray = ({
   colorScale,
   hasRowType
 }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+  const rightAxisItems = config.series?.filter(item => item?.axis === 'Right') || []
+  const rightAxisItemsMap = new Map(rightAxisItems.map(item => [item.dataKey, item]))
   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) => {
@@ -52,9 +56,9 @@ const chartCellArray = ({
         let groupValues = []
         dataSeriesColumns.forEach((column, j) => {
           if (groupBy === column) {
-            groupKey = getChartCellValue(row, column, config, runtimeData)
+            groupKey = getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap)
           } else {
-            groupValues.push(getChartCellValue(row, column, config, runtimeData))
+            groupValues.push(getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap))
           }
         })
         if (!cellMatrix.has(groupKey)) {
@@ -69,10 +73,10 @@ const chartCellArray = ({
       return rows.map(row => {
         if (hasRowType) {
           const rowType = getRowType(runtimeData[row])
-          const rowValues = dataSeriesColumns.map(column => getChartCellValue(row, column, config, runtimeData))
+          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))
+          return dataSeriesColumns.map((column, j) => getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap))
         }
       })
     }
@@ -82,13 +86,13 @@ const chartCellArray = ({
       let nodes: ReactNode[] =
         config.visualizationType !== 'Pie'
           ? [
-              <>
-                {colorScale && colorScale(seriesName) && <LegendShape fill={colorScale(seriesName)} />}
-                {seriesName}
-              </>
-            ]
+            <>
+              {colorScale && colorScale(seriesName) && <LegendShape fill={colorScale(seriesName)} />}
+              {parse(seriesName)}
+            </>
+          ]
           : []
-      return nodes.concat(rows.map((row, i) => getChartCellValue(row, column, config, runtimeData)))
+      return nodes.concat(rows.map((row, i) => getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap)))
     })
   }
 }

package/components/DataTable/helpers/getChartCellValue.ts

@@ -1,6 +1,7 @@
 import { parseDate, formatDate } from '@cdc/core/helpers/cove/date'
 import { formatNumber } from '../../../helpers/cove/number'
 import { TableConfig } from '../types/TableConfig'
+import _ from 'lodash'
 
 const isPivotColumn = (columnName, config) => {
   const tableHasPivotColumnConfigured = config.table.pivot?.valueColumns?.length
@@ -30,16 +31,28 @@ const isAdditionalColumn = (column: string, config, rowData) => {
   return formattingParams
 }
 
-export const getChartCellValue = (row: string, column: string, config: TableConfig, runtimeData: Object[]) => {
-  if (config.visualizationType === 'Sankey' || runtimeData?.[0]?.tableData) return runtimeData[row][column]
+export const getChartCellValue = (row: string, column: string, config: TableConfig, runtimeData: Object[], rightAxisItemsMap) => {
 
+  // Variables for xAxis config
+  const { type, dateDisplayFormat, dateParseFormat, dataKey: xAxisDataKey } = config.xAxis || {}
+  const { showMissingDataLabel } = config.general || {}
+  const { visualizationType } = config || {}
+
+  // Early returns...
   const rowObj = runtimeData[row]
-  let cellValue // placeholder for formatting below
-  const labelValue = rowObj[column] // just raw X axis string
-  if (column === config.xAxis?.dataKey) {
-    const { type, dateDisplayFormat, dateParseFormat } = config.xAxis || {}
-    const dateFormat = config.table?.dateDisplayFormat || dateDisplayFormat
+  if (!rowObj) return
+
+  if (visualizationType === 'Sankey' || runtimeData?.[0]?.tableData) {
+    return runtimeData?.[row]?.[column]
+  }
 
+  let cellValue
+  const rightMatch = rightAxisItemsMap.get(column)
+  const resolvedAxis = rightMatch ? 'right' : 'left'
+  const labelValue = rowObj[column]
+
+  if (column === xAxisDataKey) {
+    const dateFormat = config.table?.dateDisplayFormat || dateDisplayFormat
     if (type === 'date' || type === 'date-time') {
       cellValue = formatDate(dateFormat, parseDate(dateParseFormat, labelValue))
     } else if (type === 'continuous') {
@@ -48,27 +61,30 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
       cellValue = labelValue
     }
   } else {
-    let resolvedAxis = 'left'
-    let leftAxisItems = config.series ? config.series.filter(item => item?.axis === 'Left') : []
-    let rightAxisItems = config.series ? config.series.filter(item => item?.axis === 'Right') : []
 
-    leftAxisItems.map(leftSeriesItem => {
-      if (leftSeriesItem.dataKey === column) resolvedAxis = 'left'
-    })
+    let addColParams = isAdditionalColumn(column, config, rowObj)
 
-    rightAxisItems.map(rightSeriesItem => {
-      if (rightSeriesItem.dataKey === column) resolvedAxis = 'right'
-    })
+    let piePercent = 0
+    if (config.visualizationType === 'Pie' && !config.dataFormat.showPiePercent) {
+      piePercent = (_.toNumber(runtimeData[row][column]) / _.sumBy(runtimeData, d => _.toNumber(d[column]))) * 100 || 0
+    }
 
-    let addColParams = isAdditionalColumn(column, config, rowObj)
-    if (addColParams) {
-      cellValue = config.dataFormat
-        ? formatNumber(runtimeData[row][column], resolvedAxis, false, config, addColParams)
-        : runtimeData[row][column]
+    const valueToFormat = config.visualizationType === 'Pie' && !config.dataFormat.showPiePercent
+      ? piePercent
+      : runtimeData[row][column]
+
+    const hasAdditionalParams = Object.keys(addColParams).length > 0
+
+    if (config.dataFormat) {
+      cellValue = formatNumber(
+        valueToFormat,
+        resolvedAxis,
+        false,
+        config,
+        hasAdditionalParams ? addColParams : undefined
+      )
     } else {
-      cellValue = config.dataFormat
-        ? formatNumber(runtimeData[row][column], resolvedAxis, false, config)
-        : runtimeData[row][column]
+      cellValue = runtimeData[row][column]
     }
   }
 
@@ -101,6 +117,6 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
       }
     }
   })
-  const shoMissingDataCellValue = config.general?.showMissingDataLabel && (!labelValue || labelValue === 'null')
-  return shoMissingDataCellValue ? 'N/A' : cellValue
+  const showMissingDataCellValue = showMissingDataLabel && (!labelValue || labelValue === 'null')
+  return showMissingDataCellValue ? 'N/A' : cellValue
 }

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -4,6 +4,8 @@ import { DataTableProps } from '../DataTable'
 import { ReactNode } from 'react'
 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'
 
 type MapRowsProps = DataTableProps & {
   rows: string[]
@@ -72,27 +74,43 @@ const mapCellArray = ({
   columns,
   runtimeData,
   config,
-  applyLegendToRow,
   displayGeoName,
   formatLegendLocation,
   navigationHandler,
-  setFilteredCountryCode
+  setFilteredCountryCode,
+  legendMemo,
+  legendSpecialClassLastMemo,
+  runtimeLegend
 }: MapRowsProps): ReactNode[][] => {
+  const { allowMapZoom, geoType, type } = config.general
   return rows.map(row =>
     Object.keys(columns)
       .filter(column => columns[column].dataTable === true && columns[column].name)
       .map(column => {
         if (column === 'geo') {
           const rowObj = runtimeData[row]
-          const legendColor = applyLegendToRow(rowObj)
+          if (!rowObj) {
+            throw new Error('No row object found')
+          }
+
+          const legendColor = applyLegendToRow(rowObj, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+          const noColor = !legendMemo.current.has(hashObj(rowObj))
+
+          if (!legendColor) {
+            console.error('No legend color found') // eslint-disable-line no-console
+          }
           const labelValue = getGeoLabel(config, row, formatLegendLocation, displayGeoName)
           const mapZoomHandler =
-            config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world'
-              ? () => setFilteredCountryCode(row)
-              : undefined
+            type === 'bubble' && allowMapZoom && geoType === 'world' ? () => setFilteredCountryCode(row) : undefined
+
+          const validColor = legendColor && legendColor.length > 0 && !noColor
           return (
             <div className='col-12'>
-              <LegendShape fill={legendColor[0]} />
+              {validColor ? (
+                <LegendShape fill={legendColor[0]} />
+              ) : (
+                <div className='d-inline-block me-2' style={{ width: '1rem', height: '1rem' }} />
+              )}
               <CellAnchor
                 markup={labelValue}
                 row={rowObj}

package/components/DownloadButton.tsx

@@ -9,7 +9,12 @@ type DownloadButtonProps = {
 
 const DownloadButton = ({ rawData, fileName, headerColor, skipId }: DownloadButtonProps) => {
   const csvData = Papa.unparse(rawData)
-  const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
+  // 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 saveBlob = () => {
     //@ts-ignore
@@ -20,7 +25,17 @@ const DownloadButton = ({ rawData, fileName, headerColor, skipId }: DownloadButt
   }
 
   return (
-    <a download={fileName} type='button' onClick={saveBlob} href={URL.createObjectURL(blob)} aria-label='Download this data in a CSV file format.' className={`${headerColor} no-border`} id={`${skipId}`} data-html2canvas-ignore role='button'>
+    <a
+      download={fileName}
+      type='button'
+      onClick={saveBlob}
+      href={URL.createObjectURL(blob)}
+      aria-label='Download this data in a CSV file format.'
+      className={`${headerColor} no-border`}
+      id={`${skipId}`}
+      data-html2canvas-ignore
+      role='button'
+    >
       Download Data (CSV)
     </a>
   )

package/components/EditorPanel/DataTableEditor.tsx

@@ -196,7 +196,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         />
       )}
       {config?.visualizationType !== 'Sankey' && (
-        <label>
+        <label onClick={e => e.preventDefault()}>
           <span className='edit-label column-heading mt-1'>Exclude Columns </span>
           <MultiSelect
             key={excludedColumns.join('') + 'excluded'}