@cdc/chart 4.23.3 → 4.23.5

package/src/CdcChart.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useRef } from 'react'
 
 // IE11
 import ResizeObserver from 'resize-observer-polyfill'
@@ -9,10 +9,10 @@ import * as d3 from 'd3-array'
 import { scaleOrdinal } from '@visx/scale'
 import ParentSize from '@visx/responsive/lib/components/ParentSize'
 import { timeParse, timeFormat } from 'd3-time-format'
-import { format } from 'd3-format'
 import Papa from 'papaparse'
 import parse from 'html-react-parser'
 import 'react-tooltip/dist/react-tooltip.css'
+import chroma from 'chroma-js'
 
 // Primary Components
 import ConfigContext from './ConfigContext'
@@ -27,11 +27,10 @@ import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 
 import SparkLine from './components/SparkLine'
 import Legend from './components/Legend'
-import DataTable from './components/DataTable'
 import defaults from './data/initial-state'
 import EditorPanel from './components/EditorPanel'
 import Loading from '@cdc/core/components/Loading'
-import Filters from './components/Filters'
+import Filters from '@cdc/core/components/Filters'
 import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
 
 // Helpers
@@ -40,11 +39,40 @@ import getViewport from '@cdc/core/helpers/getViewport'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 import isNumber from '@cdc/core/helpers/isNumber'
-import cleanData from '@cdc/core/helpers/cleanData'
 
 import './scss/main.scss'
+// load both then config below determines which to use
+import DataTable_horiz from './components/DataTable'
+import DataTable_vert from '@cdc/core/components/DataTable'
 
-export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link }) {
+const generateColorsArray = (color = '#000000', special = false) => {
+  let colorObj = chroma(color)
+  let hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
+
+  return [color, hoverColor, colorObj.darken(0.3).hex()]
+}
+const hashObj = row => {
+  try {
+    if (!row) throw new Error('No row supplied to hashObj')
+
+    let str = JSON.stringify(row)
+    let hash = 0
+
+    if (str.length === 0) return hash
+
+    for (let i = 0; i < str.length; i++) {
+      let char = str.charCodeAt(i)
+      hash = (hash << 5) - hash + char
+      hash = hash & hash
+    }
+
+    return hash
+  } catch (e) {
+    console.error('COVE: ', e) // eslint-disable-line
+  }
+}
+
+export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDebug = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link }) {
   const transform = new DataTransform()
   const [loading, setLoading] = useState(true)
   const [colorScale, setColorScale] = useState(null)
@@ -61,6 +89,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const [dynamicLegendItems, setDynamicLegendItems] = useState([])
   const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
 
+  let legendMemo = useRef(new Map()) // map collection
+  let innerContainerRef = useRef()
+
+  if (isDebug) console.log('Chart config', config)
+
+  const DataTable = config?.table?.showVertical ? DataTable_vert : DataTable_horiz
+
   // Destructure items from config for more readable JSX
   let { legend, title, description, visualizationType } = config
 
@@ -84,7 +119,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   const handleChartAriaLabels = (state, testing = false) => {
-    if (testing) console.log(`handleChartAriaLabels Testing On:`, state)
+    if (testing) console.log(`handleChartAriaLabels Testing On:`, state) // eslint-disable-line
     try {
       if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
       let ariaLabel = ''
@@ -103,26 +138,121 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
   }
 
+  const reloadURLData = async () => {
+    if (config.dataUrl) {
+      const dataUrl = new URL(config.runtimeDataUrl || config.dataUrl)
+      let qsParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
+
+      let isUpdateNeeded = false
+      config.filters.forEach(filter => {
+        if (filter.type === 'url' && qsParams[filter.queryParameter] !== decodeURIComponent(filter.active)) {
+          qsParams[filter.queryParameter] = filter.active
+          isUpdateNeeded = true
+        }
+      })
+
+      if ((!config.formattedData || config.formattedData.urlFiltered) && !isUpdateNeeded) return
+
+      let dataUrlFinal = `${dataUrl.origin}${dataUrl.pathname}${Object.keys(qsParams)
+        .map((param, i) => {
+          let qs = i === 0 ? '?' : '&'
+          qs += param + '='
+          qs += qsParams[param]
+          return qs
+        })
+        .join('')}`
+
+      let data
+
+      try {
+        const regex = /(?:\.([^.]+))?$/
+
+        const ext = regex.exec(dataUrl.pathname)[1]
+        if ('csv' === ext) {
+          data = await fetch(dataUrlFinal)
+            .then(response => response.text())
+            .then(responseText => {
+              const parsedCsv = Papa.parse(responseText, {
+                header: true,
+                dynamicTyping: true,
+                skipEmptyLines: true
+              })
+              return parsedCsv.data
+            })
+        } else if ('json' === ext) {
+          data = await fetch(dataUrlFinal).then(response => response.json())
+        } else {
+          data = []
+        }
+      } catch {
+        console.error(`Cannot parse URL: ${dataUrlFinal}`)
+        data = []
+      }
+
+      if (config.dataDescription) {
+        data = transform.autoStandardize(data)
+        data = transform.developerStandardize(data, config.dataDescription)
+      }
+
+      Object.assign(data, { urlFiltered: true })
+
+      updateConfig({ ...config, runtimeDataUrl: dataUrlFinal, data, formattedData: data })
+
+      if (data) {
+        setStateData(data)
+        setExcludedData(data)
+        setFilteredData(filterData(config.filters, data))
+      }
+    }
+  }
+
   const handleLineType = lineType => {
     switch (lineType) {
       case 'dashed-sm':
         return '5 5'
+      case 'Dashed Small':
+        return '5 5'
       case 'dashed-md':
         return '10 5'
+      case 'Dashed Medium':
+        return '10 5'
       case 'dashed-lg':
         return '15 5'
+      case 'Dashed Large':
+        return '15 5'
       default:
         return 0
     }
   }
 
+  const lineOptions = [
+    {
+      value: 'Dashed Small',
+      key: 'dashed-sm'
+    },
+    {
+      value: 'Dashed Medium',
+      key: 'dashed-md'
+    },
+    {
+      value: 'Dashed Large',
+      key: 'dashed-lg'
+    },
+    {
+      value: 'Solid Line',
+      key: 'solid-line'
+    }
+  ]
+
   const loadConfig = async () => {
     let response = configObj || (await (await fetch(configUrl)).json())
 
     // If data is included through a URL, fetch that and store
     let data = response.formattedData || response.data || {}
 
-    if (response.dataUrl) {
+    const urlFilters = response.filters ? (response.filters.filter(filter => filter.type === 'url').length > 0 ? true : false) : false
+
+    if (response.dataUrl && !urlFilters) {
       try {
         const regex = /(?:\.([^.]+))?$/
 
@@ -144,7 +274,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`).then(response => response.json())
         }
       } catch {
-        console.error(`COVE: Cannot parse URL: ${response.dataUrl}`)
+        console.error(`COVE: Cannot parse URL: ${response.dataUrl}`) // eslint-disable-line
         data = []
       }
 
@@ -159,11 +289,19 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       setExcludedData(data)
     }
 
+    // force showVertical for data tables false if it does not exist
+    if (response !== undefined && response.table !== undefined) {
+      if (!response.table || !response.table.showVertical) {
+        response.table = response.table || {}
+        response.table.showVertical = false
+      }
+    }
     let newConfig = { ...defaults, ...response }
     if (newConfig.visualizationType === 'Box Plot') {
       newConfig.legend.hide = true
     }
     if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
+
     updateConfig(newConfig, data)
   }
 
@@ -219,7 +357,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
         newConfig.filters[index].values = filterValues
         // Initial filter should be active
-        newConfig.filters[index].active = filterValues[0]
+
+        newConfig.filters[index].active = newConfig.filters[index].active || filterValues[0]
+        newConfig.filters[index].filterStyle = newConfig.filters[index].filterStyle ? newConfig.filters[index].filterStyle : 'dropdown'
       })
       currentData = filterData(newConfig.filters, newExcludedData)
       setFilteredData(currentData)
@@ -258,6 +398,37 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       let tableData = []
       const plots = []
 
+      /**
+       * Calculates the first quartile (q1) and third quartile (q3) from an array of integers or decimals.
+       *
+       * @param {Array} arr - The array of integers or decimals.
+       * @returns {Object} An object containing the q1 and q3 values.
+       */
+      const getQuartiles = arr => {
+        arr.sort((a, b) => a - b)
+
+        // Calculate the index of the median value of the array
+        const medianIndex = Math.floor(arr.length / 2)
+
+        // Check if the length of the array is even or odd
+        const isEvenLength = arr.length % 2 === 0
+
+        // Split the array into two subarrays based on the median index
+        const q1Array = isEvenLength ? arr.slice(0, medianIndex) : arr.slice(0, medianIndex + 1)
+        const q3Array = isEvenLength ? arr.slice(medianIndex) : arr.slice(medianIndex + 1)
+
+        // Calculate the median of the first subarray to get the q1 value
+        const q1Index = Math.floor(q1Array.length / 2)
+        const q1 = isEvenLength ? (q1Array[q1Index - 1] + q1Array[q1Index]) / 2 : q1Array[q1Index]
+
+        // Calculate the median of the second subarray to get the q3 value
+        const q3Index = Math.floor(q3Array.length / 2)
+        const q3 = isEvenLength ? (q3Array[q3Index - 1] + q3Array[q3Index]) / 2 : q3Array[q3Index]
+
+        // Return an object containing the q1 and q3 values
+        return { q1, q3 }
+      }
+
       // group specific statistics
       // prevent re-renders
       if (!groups) return
@@ -268,10 +439,16 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           // filter data by group
           let filteredData = newExcludedData ? newExcludedData.filter(item => item[newConfig.xAxis.dataKey] === g) : data.filter(item => item[newConfig.xAxis.dataKey] === g)
           let filteredDataValues = filteredData.map(item => Number(item[newConfig?.series[0]?.dataKey]))
-          // let filteredDataValues = filteredData.map(item => Number(item[newConfig.yAxis.dataKey]))
+
+          // Sort the data for upcoming functions.
+          let sortedData = filteredDataValues.sort((a, b) => a - b)
+
+          // ! - Notice d3.quantile doesn't work here, and we had to take a custom route.
+          const quartiles = getQuartiles(sortedData)
 
           if (!filteredData) throw new Error('boxplots dont have data yet')
           if (!plots) throw new Error('boxplots dont have plots yet')
+
           if (newConfig.boxplot.firstQuartilePercentage === '') {
             newConfig.boxplot.firstQuartilePercentage = 0
           }
@@ -280,27 +457,30 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             newConfig.boxplot.thirdQuartilePercentage = 0
           }
 
-          const q1 = d3.quantile(filteredDataValues, parseFloat(newConfig.boxplot.firstQuartilePercentage) / 100)
-          const q3 = d3.quantile(filteredDataValues, parseFloat(newConfig.boxplot.thirdQuartilePercentage) / 100)
+          const q1 = quartiles.q1
+          const q3 = quartiles.q3
           const iqr = q3 - q1
           const lowerBounds = q1 - (q3 - q1) * 1.5
           const upperBounds = q3 + (q3 - q1) * 1.5
-          const outliers = filteredDataValues.filter(v => v < lowerBounds || v > upperBounds)
+
+          const outliers = sortedData.filter(v => v < lowerBounds || v > upperBounds)
           let nonOutliers = filteredDataValues
 
           nonOutliers = nonOutliers.filter(item => !outliers.includes(item))
 
           plots.push({
             columnCategory: g,
-            columnMax: Number(q3 + 1.5 * iqr).toFixed(newConfig.dataFormat.roundTo),
+            columnMax: d3.min([d3.max(filteredDataValues), q1 + 1.5 * iqr]),
             columnThirdQuartile: Number(q3).toFixed(newConfig.dataFormat.roundTo),
             columnMedian: Number(d3.median(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
             columnFirstQuartile: q1.toFixed(newConfig.dataFormat.roundTo),
-            columnMin: Number(q1 - 1.5 * iqr).toFixed(newConfig.dataFormat.roundTo),
+            columnMin: d3.max([d3.min(filteredDataValues), q1 - 1.5 * iqr]),
             columnTotal: filteredDataValues.reduce((partialSum, a) => partialSum + a, 0),
             columnSd: Number(d3.deviation(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
             columnMean: Number(d3.mean(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
             columnIqr: Number(iqr).toFixed(newConfig.dataFormat.roundTo),
+            columnLowerBounds: d3.max([d3.min(filteredDataValues), q1 - 1.5 * iqr]),
+            columnUpperBounds: d3.min([d3.max(sortedData), q1 + 1.5 * iqr]),
             columnOutliers: outliers,
             values: filteredDataValues,
             nonOutlierValues: nonOutliers
@@ -316,6 +496,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       tableData.map(table => {
         delete table.columnIqr
         delete table.nonOutlierValues
+        delete table.columnLowerBounds
+        delete table.columnUpperBounds
         return null // resolve eslint
       })
 
@@ -329,7 +511,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     if (newConfig.visualizationType === 'Combo' && newConfig.series) {
       newConfig.runtime.barSeriesKeys = []
       newConfig.runtime.lineSeriesKeys = []
+      newConfig.runtime.areaSeriesKeys = []
+
       newConfig.series.forEach(series => {
+        if (series.type === 'Area Chart') {
+          newConfig.runtime.areaSeriesKeys.push(series)
+        }
         if (series.type === 'Bar') {
           newConfig.runtime.barSeriesKeys.push(series.dataKey)
         }
@@ -338,6 +525,15 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         }
       })
     }
+    if (newConfig.visualizationType === 'Area Chart' && newConfig.series) {
+      newConfig.runtime.areaSeriesKeys = []
+
+      newConfig.series.forEach(series => {
+        if (series.type === 'Area Chart') {
+          newConfig.runtime.areaSeriesKeys.push(series)
+        }
+      })
+    }
 
     if (((newConfig.visualizationType === 'Bar' || newConfig.visualizationType === 'Deviation Bar') && newConfig.orientation === 'horizontal') || newConfig.visualizationType === 'Paired Bar') {
       newConfig.runtime.xAxis = newConfig.yAxis
@@ -359,18 +555,21 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
     data.forEach(row => {
       let add = true
-      filters.forEach(filter => {
-        if (row[filter.columnName] !== filter.active) {
-          add = false
-        }
-      })
+      filters
+        .filter(filter => filter.type !== 'url')
+        .forEach(filter => {
+          if (row[filter.columnName] != filter.active) {
+            add = false
+          }
+        })
 
       if (add) filteredData.push(row)
     })
+
     return filteredData
   }
 
-  // Gets filer values from dataset
+  // Gets filter values from dataset
   const generateValuesForFilter = (columnName, data = this.state.data) => {
     const values = []
 
@@ -441,6 +640,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     loadConfig()
   }, []) // eslint-disable-line
 
+  useEffect(() => {
+    reloadURLData()
+  }, [JSON.stringify(config.filters)])
+
   /**
    * When cove has a config and container ref publish the cove_loaded event.
    */
@@ -575,10 +778,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
 
-  const parseDate = dateString => {
+  const parseDate = (dateString, showError = true) => {
     let date = timeParse(config.runtime[section].dateParseFormat)(dateString)
     if (!date) {
-      config.runtime.editorErrorMessage = `Error parsing date "${dateString}". Try reviewing your data and date parse settings in the X Axis section.`
+      if (showError) {
+        config.runtime.editorErrorMessage = `Error parsing date "${dateString}". Try reviewing your data and date parse settings in the X Axis section.`
+      }
       return new Date()
     } else {
       return date
@@ -599,8 +804,26 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return Math.ceil(context.measureText(text).width)
   }
 
+  const abbreviateNumber = num => {
+    let unit = ''
+    let absNum = Math.abs(num)
+
+    if (absNum >= 1e9) {
+      unit = 'B'
+      num = num / 1e9
+    } else if (absNum >= 1e6) {
+      unit = 'M'
+      num = num / 1e6
+    } else if (absNum >= 1e3) {
+      unit = 'K'
+      num = num / 1e3
+    }
+
+    return num + unit
+  }
+
   // Format numeric data based on settings in config
-  const formatNumber = (num, axis) => {
+  const formatNumber = (num, axis, shouldAbbreviate = false) => {
     // if num is NaN return num
     if (isNaN(num) || !num) return num
     // Check if the input number is negative
@@ -616,8 +839,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       dataFormat: { commas, abbreviated, roundTo, prefix, suffix, rightRoundTo, bottomRoundTo, rightPrefix, rightSuffix, bottomPrefix, bottomSuffix, bottomAbbreviated }
     } = config
 
-    let formatSuffix = format('.2s')
-
     // check if value contains comma and remove it. later will add comma below.
     if (String(num).indexOf(',') !== -1) num = num.replaceAll(',', '')
 
@@ -670,19 +891,20 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     //
     // Edge case for small numbers with decimals
     // - if roundTo undefined which means it is blank, then do not round
-    if ((axis === 'left' && commas && abbreviated) || (axis === 'bottom' && commas && abbreviated)) {
+
+    if ((axis === 'left' && commas && abbreviated && shouldAbbreviate) || (axis === 'bottom' && commas && abbreviated && shouldAbbreviate)) {
       num = num // eslint-disable-line
     } else {
       num = num.toLocaleString('en-US', stringFormattingOptions)
     }
     let result = ''
 
-    if (abbreviated && axis === 'left') {
-      num = formatSuffix(parseFloat(num)).replace('G', 'B')
+    if (abbreviated && axis === 'left' && shouldAbbreviate) {
+      num = abbreviateNumber(parseFloat(num))
     }
 
-    if (bottomAbbreviated && axis === 'bottom') {
-      num = formatSuffix(parseFloat(num)).replace('G', 'B')
+    if (bottomAbbreviated && axis === 'bottom' && shouldAbbreviate) {
+      num = abbreviateNumber(parseFloat(num))
     }
 
     if (prefix && axis === 'left') {
@@ -748,17 +970,128 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return false
   }
 
+  // used for Additional Column
+  const displayDataAsText = (value, columnName) => {
+    if (value === null || value === '' || value === undefined) {
+      return ''
+    }
+
+    if (typeof value === 'string' && value.length > 0 && config.legend.type === 'equalnumber') {
+      return value
+    }
+
+    let formattedValue = value
+
+    let columnObj //= config.columns[columnName]
+    // config.columns not an array but a hash of objects
+    if (Object.keys(config.columns).length > 0) {
+      Object.keys(config.columns).forEach(function (key) {
+        var column = config.columns[key]
+        // add if not the index AND it is enabled to be added to data table
+        if (column.name === columnName) {
+          columnObj = column
+        }
+      })
+    }
+
+    if (columnObj === undefined) {
+      // then use left axis config
+      columnObj = config.type === 'chart' ? config.dataFormat : config.primary
+      // NOTE: Left Value Axis uses different names
+      // so map them below so the code below works
+      // - copy commas to useCommas to work below
+      columnObj['useCommas'] = columnObj.commas
+      // - copy roundTo to roundToPlace to work below
+      columnObj['roundToPlace'] = columnObj.roundTo ? columnObj.roundTo : ''
+    }
+
+    if (columnObj) {
+      // If value is a number, apply specific formattings
+      let hasDecimal = false
+      let decimalPoint = 0
+      if (Number(value)) {
+        if (columnObj.roundToPlace >= 0) {
+          hasDecimal = columnObj.roundToPlace ? columnObj.roundToPlace !== '' || columnObj.roundToPlace !== null : false
+          decimalPoint = columnObj.roundToPlace ? Number(columnObj.roundToPlace) : 0
+
+          // Rounding
+          if (columnObj.hasOwnProperty('roundToPlace') && hasDecimal) {
+            formattedValue = Number(value).toFixed(decimalPoint)
+          }
+        }
+
+        if (columnObj.hasOwnProperty('useCommas') && columnObj.useCommas === true) {
+          // Formats number to string with commas - allows up to 5 decimal places, if rounding is not defined.
+          // Otherwise, uses the rounding value set at 'columnObj.roundToPlace'.
+          formattedValue = Number(value).toLocaleString('en-US', {
+            style: 'decimal',
+            minimumFractionDigits: hasDecimal ? decimalPoint : 0,
+            maximumFractionDigits: hasDecimal ? decimalPoint : 5
+          })
+        }
+      }
+
+      // add prefix and suffix if set
+      formattedValue = (columnObj.prefix || '') + formattedValue + (columnObj.suffix || '')
+    }
+
+    return formattedValue
+  }
+
+  // this is passed DOWN into the various components
+  // then they do a lookup based on the bin number as index into here (TT)
+  const applyLegendToRow = rowObj => {
+    try {
+      if (!rowObj) throw new Error('COVE: No rowObj in applyLegendToRow')
+      // Navigation map
+      if ('navigation' === config.type) {
+        let mapColorPalette = colorPalettes[config.color] || colorPalettes['bluegreenreverse']
+        return generateColorsArray(mapColorPalette[3])
+      }
+
+      let hash = hashObj(rowObj)
+
+      if (legendMemo.current.has(hash)) {
+        let idx = legendMemo.current.get(hash)
+        if (runtimeLegend[idx]?.disabled) return false
+
+        // DEV-784 changed to use bin prop to get color instead of idx
+        // bc we re-order legend when showSpecialClassesLast is checked
+        let legendBinColor = runtimeLegend.find(o => o.bin === idx)?.color
+        return generateColorsArray(legendBinColor, runtimeLegend[idx]?.special)
+      }
+
+      // Fail state
+      return generateColorsArray()
+    } catch (e) {
+      console.error('COVE: ', e) // eslint-disable-line
+    }
+  }
+
+  const clean = data => {
+    return config?.xAxis?.dataKey ? transform.cleanData(data, config.xAxis.dataKey) : data
+  }
+
+  // required for DataTable
+  const displayGeoName = key => {
+    return key
+  }
+
   // Prevent render if loading
   let body = <Loading />
 
   if (!loading) {
+    const tableLink = (
+      <a href={`#data-table-${config.dataKey}`} className='margin-left-href'>
+        {config.dataKey} (Go to Table)
+      </a>
+    )
     body = (
       <>
         {isEditor && <EditorPanel />}
         {!missingRequiredSections() && !config.newViz && (
           <div className='cdc-chart-inner-container'>
             {/* Title */}
-
             {title && config.showTitle && (
               <div role='heading' className={`chart-title ${config.theme} cove-component__header`} aria-level={2}>
                 {config && <sup className='superTitle'>{parse(config.superTitle || '')}</sup>}
@@ -769,11 +1102,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               Skip Over Chart Container
             </a>
             {/* Filters */}
-            {config.filters && !externalFilters && <Filters />}
+            {config.filters && !externalFilters && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} isNumber={isNumber} dimensions={dimensions} />}
             {/* Visualization */}
             {config?.introText && <section className='introText'>{parse(config.introText)}</section>}
             <div
-              style={{ marginBottom: config.legend.position !== 'bottom' && currentViewport !== 'sm' && currentViewport !== 'xs' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px' }}
+              style={{ marginBottom: config.legend.position !== 'bottom' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px' }}
               className={`chart-container  ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
             >
               {/* All charts except sparkline */}
@@ -797,7 +1130,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               {!config.legend.hide && config.visualizationType !== 'Spark Line' && <Legend />}
             </div>
             {/* Link */}
-            {link && link}
+            {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
+
             {/* Description */}
             {description && config.visualizationType !== 'Spark Line' && <div className='subtext'>{parse(description)}</div>}
 
@@ -808,7 +1142,36 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             </CoveMediaControls.Section>
 
             {/* Data Table */}
-            {config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && <DataTable />}
+            {config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && (
+              <DataTable
+                config={config}
+                rawData={config.data}
+                runtimeData={filteredData || excludedData}
+                //navigationHandler={navigationHandler}
+                expandDataTable={config.table.expanded}
+                //headerColor={general.headerColor}
+                columns={config.columns}
+                showDownloadButton={config.general.showDownloadButton}
+                runtimeLegend={dynamicLegendItems}
+                displayDataAsText={displayDataAsText}
+                displayGeoName={displayGeoName}
+                applyLegendToRow={applyLegendToRow}
+                tableTitle={config.table.label}
+                indexTitle={config.table.indexLabel}
+                vizTitle={title}
+                viewport={currentViewport}
+                parseDate={parseDate}
+                formatDate={formatDate}
+                formatNumber={formatNumber}
+                tabbingId={handleChartTabbing}
+                showDownloadImgButton={config.showDownloadImgButton}
+                showDownloadPdfButton={config.showDownloadPdfButton}
+                innerContainerRef={innerContainerRef}
+                outerContainerRef={outerContainerRef}
+                imageRef={imageId}
+                isDebug={isDebug}
+              />
+            )}
             {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
             {/* show pdf or image button */}
           </div>
@@ -827,7 +1190,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     setConfig,
     rawData: stateData ?? {},
     excludedData: excludedData,
-    transformedData: filteredData || excludedData,
+    transformedData: clean(filteredData || excludedData), // do this right before passing to components
+    tableData: filteredData || excludedData, // do not clean table data
     unfilteredData: stateData,
     seriesHighlight,
     colorScale,
@@ -854,10 +1218,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     filterData,
     imageId,
     handleLineType,
+    lineOptions,
     isNumber,
-    cleanData,
     getTextWidth,
-    twoColorPalette
+    twoColorPalette,
+    isDebug
   }
 
   const classes = ['cdc-open-viz-module', 'type-chart', `${currentViewport}`, `font-${config.fontSize}`, `${config.theme}`]