@cdc/chart 4.24.9 → 4.24.11

package/src/CdcChart.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef, useId } from 'react'
+import React, { useState, useEffect, useCallback, useRef, useId, useMemo } from 'react'
 
 // IE11
 import ResizeObserver from 'resize-observer-polyfill'
@@ -9,6 +9,7 @@ import Button from '@cdc/core/components/elements/Button'
 
 //types
 import { DimensionsType } from '@cdc/core/types/Dimensions'
+import { type DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
 
 // External Libraries
 import { scaleOrdinal } from '@visx/scale'
@@ -34,10 +35,10 @@ import EditorPanel from './components/EditorPanel'
 import { abbreviateNumber } from './helpers/abbreviateNumber'
 import { handleChartTabbing } from './helpers/handleChartTabbing'
 import { getQuartiles } from './helpers/getQuartiles'
-import { sortAsc, sortDesc } from './helpers/sort'
 import { handleChartAriaLabels } from './helpers/handleChartAriaLabels'
 import { lineOptions } from './helpers/lineOptions'
 import { handleLineType } from './helpers/handleLineType'
+import { handleRankByValue } from './helpers/handleRankByValue'
 import { generateColorsArray } from './helpers/generateColorsArray'
 import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
@@ -45,7 +46,6 @@ import MediaControls from '@cdc/core/components/MediaControls'
 import Annotation from './components/Annotations'
 
 // Helpers
-import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { publish, subscribe, unsubscribe } from '@cdc/core/helpers/events'
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import numberFromString from '@cdc/core/helpers/numberFromString'
@@ -54,23 +54,42 @@ import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 import isNumber from '@cdc/core/helpers/isNumber'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
-import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
 import { isConvertLineToBarGraph } from './helpers/isConvertLineToBarGraph'
+import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 
 import './scss/main.scss'
 // load both then config below determines which to use
 import DataTable from '@cdc/core/components/DataTable'
+import type { TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
 import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
 import Title from '@cdc/core/components/ui/Title'
-import { ChartConfig } from './types/ChartConfig'
+import { AllChartsConfig, ChartConfig } from './types/ChartConfig'
 import { Label } from './types/Label'
 import { type ViewportSize } from './types/ChartConfig'
 import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
 import SkipTo from '@cdc/core/components/elements/SkipTo'
 import { filterVizData } from '@cdc/core/helpers/filterVizData'
 import LegendWrapper from './components/LegendWrapper'
-
-export default function CdcChart({
+import _ from 'lodash'
+import { addValuesToFilters } from '@cdc/core/helpers/addValuesToFilters'
+import { Runtime } from '@cdc/core/types/Runtime'
+import { Pivot } from '@cdc/core/types/Table'
+
+interface CdcChartProps {
+  configUrl?: string
+  config?: ChartConfig
+  isEditor?: boolean
+  isDebug?: boolean
+  isDashboard?: boolean
+  setConfig?: (config: ChartConfig) => void
+  setEditing?: (editing: boolean) => void
+  hostname?: string
+  link?: string
+  setSharedFilter?: (filter: any) => void
+  setSharedFilterValue?: (value: any) => void
+  dashboardConfig?: DashboardConfig
+}
+const CdcChart = ({
   configUrl,
   config: configObj,
   isEditor = false,
@@ -83,12 +102,13 @@ export default function CdcChart({
   setSharedFilter,
   setSharedFilterValue,
   dashboardConfig
-}) {
+}: CdcChartProps) => {
   const transform = new DataTransform()
   const [loading, setLoading] = useState(true)
+  const svgRef = useRef(null)
   const [colorScale, setColorScale] = useState(null)
   const [config, setConfig] = useState<ChartConfig>({} as ChartConfig)
-  const [stateData, setStateData] = useState(config.data || [])
+  const [stateData, setStateData] = useState(_.cloneDeep(configObj?.data) || [])
   const [excludedData, setExcludedData] = useState<Record<string, number>[] | undefined>(undefined)
   const [filteredData, setFilteredData] = useState<Record<string, any>[] | undefined>(undefined)
   const [seriesHighlight, setSeriesHighlight] = useState<string[]>(
@@ -108,19 +128,10 @@ export default function CdcChart({
     isBrushing: false
   })
 
-  let [width] = dimensions
-  const useVertical = config.orientation === 'vertical'
-  const useMobileVertical = config.heights?.mobileVertical && ['xs', 'xxs'].includes(currentViewport)
-  const responsiveVertical = useMobileVertical ? 'mobileVertical' : 'vertical'
-  const renderedOrientation = useVertical ? responsiveVertical : 'horizontal'
-  let height = config.aspectRatio ? width * config.aspectRatio : config?.heights?.[renderedOrientation]
-  if (config.visualizationType === 'Pie') height = config?.heights?.[renderedOrientation]
-  height = height + Number(config?.xAxis?.size) + 45
-
-  type Config = typeof config
-  let legendMemo = useRef(new Map()) // map collection
-  let innerContainerRef = useRef()
+  const { description, visualizationType } = config
+
   const legendRef = useRef(null)
+  const parentRef = useRef(null)
 
   const handleDragStateChange = isDragging => {
     setIsDraggingAnnotation(isDragging)
@@ -129,7 +140,7 @@ export default function CdcChart({
   if (isDebug) console.log('Chart config, isEditor', config, isEditor)
 
   // Destructure items from config for more readable JSX
-  let { legend, title, description, visualizationType } = config
+  let { legend, title } = config
 
   // set defaults on titles if blank AND only in editor
   if (isEditor) {
@@ -138,7 +149,7 @@ export default function CdcChart({
 
   if (config.table && (!config.table?.label || config.table?.label === '')) config.table.label = 'Data Table'
 
-  const { barBorderClass, lineDatapointClass, contentClasses, sparkLineStyles } = useDataVizClasses(config)
+  const { lineDatapointClass, contentClasses, sparkLineStyles } = useDataVizClasses(config)
   const legendId = useId()
 
   const checkLineToBarGraph = () => {
@@ -201,6 +212,8 @@ export default function CdcChart({
 
       Object.assign(data, { urlFiltered: true })
 
+      data = handleRankByValue(data, config)
+
       updateConfig({ ...config, runtimeDataUrl: dataUrlFinal, data, formattedData: data })
 
       if (data) {
@@ -212,7 +225,7 @@ export default function CdcChart({
   }
 
   const loadConfig = async () => {
-    let response = configObj || (await (await fetch(configUrl)).json())
+    const response = _.cloneDeep(configObj) || (await (await fetch(configUrl)).json())
 
     // If data is included through a URL, fetch that and store
     let data: any[] = response.data || []
@@ -263,6 +276,8 @@ export default function CdcChart({
       data = transform.developerStandardize(data, response.dataDescription)
     }
 
+    data = handleRankByValue(data, response)
+
     if (data) {
       setStateData(data)
       setExcludedData(data)
@@ -276,18 +291,7 @@ export default function CdcChart({
       }
     }
     let newConfig = { ...defaults, ...response }
-    if (newConfig.filters) {
-      newConfig.filters.forEach((filter, index) => {
-        const queryStringFilterValue = getQueryStringFilterValue(filter)
-        if (queryStringFilterValue) {
-          newConfig.filters[index].active = queryStringFilterValue
-        }
-      })
-    }
 
-    if (newConfig.visualizationType === 'Box Plot') {
-      newConfig.legend.hide = true
-    }
     if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
 
     newConfig.series.forEach(series => {
@@ -306,9 +310,12 @@ export default function CdcChart({
     updateConfig(processedConfig, data)
   }
 
-  const updateConfig = (newConfig, dataOverride?: any[]) => {
+  const updateConfig = (_config: AllChartsConfig, dataOverride?: any[]) => {
+    const newConfig = _.cloneDeep(_config)
     let data = dataOverride || stateData
 
+    data = handleRankByValue(data, newConfig)
+
     // Deeper copy
     Object.keys(defaults).forEach(key => {
       if (newConfig[key] && 'object' === typeof newConfig[key] && !Array.isArray(newConfig[key])) {
@@ -356,28 +363,8 @@ export default function CdcChart({
     // After data is grabbed, loop through and generate filter column values if there are any
     let currentData: any[] = []
     if (newConfig.filters) {
-      newConfig.filters.forEach((filter, index) => {
-        const filterValues =
-          filter.filterStyle === 'nested-dropdown'
-            ? filter.values
-            : filter.orderedValues ||
-              generateValuesForFilter(filter.columnName, newExcludedData).sort(
-                filter.order === 'desc' ? sortDesc : sortAsc
-              )
-
-        newConfig.filters[index].values = filterValues
-        // Initial filter should be active
-
-        const includes = (arr: any[], val: any): boolean => (arr || []).map(val => String(val)).includes(String(val))
-        newConfig.filters[index].active =
-          !newConfig.filters[index].active || !includes(filterValues, newConfig.filters[index].active)
-            ? filterValues[0]
-            : newConfig.filters[index].active
-        newConfig.filters[index].filterStyle = newConfig.filters[index].filterStyle
-          ? newConfig.filters[index].filterStyle
-          : 'dropdown'
-      })
-      currentData = filterVizData(newConfig.filters, newExcludedData)
+      const filtersWithValues = addValuesToFilters(newConfig.filters, newExcludedData)
+      currentData = filterVizData(filtersWithValues, newExcludedData)
       setFilteredData(currentData)
     }
 
@@ -386,19 +373,18 @@ export default function CdcChart({
     }
 
     //Enforce default values that need to be calculated at runtime
-    newConfig.runtime = {}
-    newConfig.runtime.series = newConfig.dynamicSeries ? [] : newConfig.series
+    newConfig.runtime = {} as Runtime
+    newConfig.runtime.series = newConfig.dynamicSeries ? [] : _.cloneDeep(newConfig.series)
     newConfig.runtime.seriesLabels = {}
     newConfig.runtime.seriesLabelsAll = []
     newConfig.runtime.originalXAxis = newConfig.xAxis
 
     if (newConfig.dynamicSeries) {
       let finalData = dataOverride || newConfig.formattedData || newConfig.data
-      if (finalData && finalData.length && finalData.length > 0) {
+      if (finalData?.length) {
         Object.keys(finalData[0]).forEach(seriesKey => {
           if (
             seriesKey !== newConfig.xAxis.dataKey &&
-            finalData[0][seriesKey] &&
             (!newConfig.filters || newConfig.filters.filter(filter => filter.columnName === seriesKey).length === 0) &&
             (!newConfig.columns || Object.keys(newConfig.columns).indexOf(seriesKey) === -1)
           ) {
@@ -417,30 +403,42 @@ export default function CdcChart({
       newConfig.runtime.seriesKeys = (dataOverride || data).map(d => d[newConfig.xAxis.dataKey])
       newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys
     } else {
-      newConfig.runtime.seriesKeys = newConfig.runtime.series
-        ? newConfig.runtime.series.map(series => {
-            newConfig.runtime.seriesLabels[series.dataKey] = series.name || series.label || series.dataKey
-            newConfig.runtime.seriesLabelsAll.push(series.name || series.dataKey)
-            return series.dataKey
+      const finalData = dataOverride || newConfig.formattedData || newConfig.data
+      newConfig.runtime.seriesKeys = (newConfig.runtime.series || []).flatMap(series => {
+        if (series.dynamicCategory) {
+          _.remove(newConfig.runtime.seriesLabelsAll, label => label === series.dataKey)
+          _.remove(newConfig.runtime.series, s => s.dataKey === series.dataKey)
+          // grab the dynamic series keys from the data
+          const seriesKeys: string[] = _.uniq(finalData.map(d => d[series.dynamicCategory]))
+          // for each of those keys perform side effects
+          seriesKeys.forEach(dataKey => {
+            newConfig.runtime.seriesLabels[dataKey] = dataKey
+            newConfig.runtime.seriesLabelsAll.push(dataKey)
+            newConfig.runtime.series.push({
+              dataKey,
+              type: series.type,
+              lineType: series.lineType,
+              originalDataKey: series.dataKey,
+              dynamicCategory: series.dynamicCategory,
+              tooltip: true
+            })
           })
-        : []
+          // return the series keys
+          return seriesKeys
+        } else {
+          newConfig.runtime.seriesLabels[series.dataKey] = series.name || series.label || series.dataKey
+          newConfig.runtime.seriesLabelsAll.push(series.name || series.dataKey)
+          // return the series keys
+          return [series.dataKey]
+        }
+      })
     }
 
     if (newConfig.visualizationType === 'Box Plot' && newConfig.series) {
-      let allKeys = newExcludedData
-        ? newExcludedData.map(d => d[newConfig.xAxis.dataKey])
-        : data.map(d => d[newConfig.xAxis.dataKey])
-      let allValues = newExcludedData
-        ? newExcludedData.map(d => Number(d[newConfig?.series[0]?.dataKey]))
-        : data.map(d => Number(d[newConfig?.series[0]?.dataKey]))
-
-      const uniqueArray = function (arrArg) {
-        return arrArg.filter(function (elem, pos, arr) {
-          return arr.indexOf(elem) === pos
-        })
-      }
+      const combinedData = filteredData || data
+      let allKeys = combinedData.map(d => d[newConfig.xAxis.dataKey])
+      const groups = _.uniq(allKeys)
 
-      const groups = uniqueArray(allKeys)
       let tableData: any[] = []
       const plots: any[] = []
 
@@ -452,9 +450,8 @@ export default function CdcChart({
           if (!g) throw new Error('No groups resolved in box plots')
 
           // filter data by group
-          let filteredData = newExcludedData
-            ? newExcludedData.filter(item => item[newConfig.xAxis.dataKey] === g)
-            : data.filter(item => item[newConfig.xAxis.dataKey] === g)
+          let filteredData = combinedData.filter(item => item[newConfig.xAxis.dataKey] === g)
+
           let filteredDataValues: number[] = filteredData.map(item => Number(item[newConfig?.series[0]?.dataKey]))
 
           // Sort the data for upcoming functions.
@@ -463,16 +460,18 @@ export default function CdcChart({
           // ! - 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')
+          const getValuesBySeriesKey = () => {
+            const allSeriesKeys = newConfig.series.map(item => item?.dataKey)
+            const result = {}
+            allSeriesKeys.forEach(key => {
+              result[key] = filteredData.map(item => item[key])
+            })
 
-          if (newConfig.boxplot.firstQuartilePercentage === '') {
-            newConfig.boxplot.firstQuartilePercentage = 0
+            return result
           }
 
-          if (newConfig.boxplot.thirdQuartilePercentage === '') {
-            newConfig.boxplot.thirdQuartilePercentage = 0
-          }
+          if (!filteredData) throw new Error('boxplots dont have data yet')
+          if (!plots) throw new Error('boxplots dont have plots yet')
 
           const q1 = quartiles.q1
           const q3 = quartiles.q3
@@ -481,9 +480,7 @@ export default function CdcChart({
           const upperBounds = q3 + (q3 - q1) * 1.5
 
           const outliers = sortedData.filter(v => v < lowerBounds || v > upperBounds)
-          let nonOutliers = filteredDataValues
 
-          nonOutliers = nonOutliers.filter(item => !outliers.includes(item))
           const minValue: number = d3.min<number>(filteredDataValues) || 0
           const _colMin = d3.max<number>([minValue, q1 - 1.5 * iqr])
           plots.push({
@@ -493,7 +490,7 @@ export default function CdcChart({
             columnMedian: Number(d3.median(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
             columnFirstQuartile: q1.toFixed(newConfig.dataFormat.roundTo),
             columnMin: _colMin,
-            columnTotal: filteredDataValues.reduce((partialSum, a) => partialSum + a, 0),
+            columnCount: filteredData.length,
             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),
@@ -501,7 +498,7 @@ export default function CdcChart({
             columnUpperBounds: d3.min([d3.max(sortedData), q1 + 1.5 * iqr]),
             columnOutliers: outliers,
             values: filteredDataValues,
-            nonOutlierValues: nonOutliers
+            keyValues: getValuesBySeriesKey()
           })
         } catch (e) {
           console.error('COVE: ', e.message) // eslint-disable-line
@@ -519,8 +516,6 @@ export default function CdcChart({
         return null // resolve eslint
       })
 
-      // any other data we can add to boxplots
-      newConfig.boxplot['allValues'] = allValues
       newConfig.boxplot['categories'] = groups
       newConfig.boxplot.plots = plots
       newConfig.boxplot.tableData = tableData
@@ -580,6 +575,7 @@ export default function CdcChart({
     ) {
       newConfig.runtime.xAxis = newConfig.yAxis['yAxis'] ? newConfig.yAxis['yAxis'] : newConfig.yAxis
       newConfig.runtime.yAxis = newConfig.xAxis['xAxis'] ? newConfig.xAxis['xAxis'] : newConfig.xAxis
+      newConfig.runtime.yAxis.labelOffset *= -1
 
       newConfig.runtime.horizontal = false
       newConfig.orientation = 'horizontal'
@@ -618,21 +614,6 @@ export default function CdcChart({
     setConfig(newConfig)
   }
 
-  // Gets filter values from dataset
-  const generateValuesForFilter = (columnName, data = this.state.data) => {
-    const values: any[] = []
-
-    data.forEach(row => {
-      const value = row[columnName]
-      //@ts-ignore
-      if (value && false === values.includes(value)) {
-        values.push(value)
-      }
-    })
-
-    return values
-  }
-
   // Sorts data series for horizontal bar charts
   const sortData = (a, b) => {
     let sortKey =
@@ -655,7 +636,6 @@ export default function CdcChart({
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let { width, height } = entry.contentRect
-      let svgMarginWidth = 32
       let editorWidth = 350
 
       width = isEditor ? width - editorWidth : width
@@ -668,7 +648,7 @@ export default function CdcChart({
         width = width - 2.5
       }
 
-      width = width - svgMarginWidth
+      width = width
 
       setDimensions([width, height])
     }
@@ -682,14 +662,14 @@ export default function CdcChart({
     setContainer(node)
   }, []) // eslint-disable-line
 
-  function isEmpty(obj) {
+  const isEmpty = obj => {
     return Object.keys(obj).length === 0
   }
 
   // Load data when component first mounts
   useEffect(() => {
     loadConfig()
-  }, []) // eslint-disable-line
+  }, [configObj?.data?.length ? configObj.data : null]) // eslint-disable-line
 
   useEffect(() => {
     reloadURLData()
@@ -753,14 +733,6 @@ export default function CdcChart({
     }
   }, [externalFilters]) // eslint-disable-line
 
-  // Load data when configObj data changes
-  if (configObj) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-      loadConfig()
-    }, [configObj.data]) // eslint-disable-line
-  }
-
   // This will set the bump chart's default scaling type to date-time
   useEffect(() => {
     if (['Bump Chart'].includes(config.visualizationType)) {
@@ -875,8 +847,23 @@ export default function CdcChart({
     }
   }
 
-  const formatDate = date => {
-    return timeFormat(config.runtime[section].dateDisplayFormat)(date)
+  const formatDate = (date, i, ticks) => {
+    let formattedDate = timeFormat(config.runtime[section].dateDisplayFormat)(date)
+    // Handle the case where all months work with '%b.' except for May
+    if (config.runtime[section].dateDisplayFormat?.includes('%b.') && formattedDate.includes('May.')) {
+      formattedDate = formattedDate.replace(/May\./g, 'May')
+    }
+    // Show years only once
+    if (config.xAxis.showYearsOnce && config.runtime[section].dateDisplayFormat?.includes('%Y') && ticks) {
+      const prevDate = ticks[i - 1] ? ticks[i - 1].value : null
+      const prevFormattedDate = timeFormat(config.runtime[section].dateDisplayFormat)(prevDate)
+      const year = formattedDate.match(/\d{4}/)
+      const prevYear = prevFormattedDate.match(/\d{4}/)
+      if (year && prevYear && year[0] === prevYear[0]) {
+        formattedDate = formattedDate.replace(year, '')
+      }
+    }
+    return formattedDate
   }
 
   const formatTooltipsDate = date => {
@@ -886,7 +873,16 @@ export default function CdcChart({
   // Format numeric data based on settings in config OR from passed in settings for Additional Columns
   // - use only for old horizontal data - newer formatNumber is in helper/formatNumber
   // TODO: we should combine various formatNumber functions across this project.
-  const formatNumber = (num, axis, shouldAbbreviate = false, addColPrefix, addColSuffix, addColRoundTo) => {
+  // TODO suggestion: pass all options as object key/values to allow for more flexibility
+  const formatNumber = (
+    num,
+    axis,
+    shouldAbbreviate = false,
+    addColPrefix,
+    addColSuffix,
+    addColRoundTo,
+    { index, length } = { index: null, length: null }
+  ) => {
     // if num is NaN return num
     if (isNaN(num) || !num) return num
     // Check if the input number is negative
@@ -913,7 +909,8 @@ export default function CdcChart({
         rightSuffix,
         bottomPrefix,
         bottomSuffix,
-        bottomAbbreviated
+        bottomAbbreviated,
+        onlyShowTopPrefixSuffix
       }
     } = config
 
@@ -1006,7 +1003,9 @@ export default function CdcChart({
     if (addColPrefix && axis === 'left') {
       result = addColPrefix + result
     } else {
-      if (prefix && axis === 'left') {
+      // if onlyShowTopPrefixSuffix only show top prefix
+      const suppressAllButLast = onlyShowTopPrefixSuffix && length - 1 !== index
+      if (prefix && axis === 'left' && !suppressAllButLast) {
         result += prefix
       }
     }
@@ -1025,7 +1024,7 @@ export default function CdcChart({
     if (addColSuffix && axis === 'left') {
       result += addColSuffix
     } else {
-      if (suffix && axis === 'left') {
+      if (suffix && axis === 'left' && !onlyShowTopPrefixSuffix) {
         result += suffix
       }
     }
@@ -1161,7 +1160,7 @@ export default function CdcChart({
           <h3>Finish Configuring</h3>
           <p>Set all required options to the left and confirm below to display a preview of the chart.</p>
           <Button
-            className='btn'
+            className='btn btn-primary'
             style={{ margin: '1em auto' }}
             disabled={missingRequiredSections()}
             onClick={e => confirmDone(e)}
@@ -1218,12 +1217,31 @@ export default function CdcChart({
     // cleaning is deleting data we need in forecasting charts.
     if (!Array.isArray(data)) return []
     if (config.visualizationType === 'Forecasting') return data
+    if (config.series?.some(series => !!series.dynamicCategory)) return data
     return config?.xAxis?.dataKey ? transform.cleanData(data, config.xAxis.dataKey) : data
   }
 
-  // required for DataTable
-  const displayGeoName = key => {
-    return key
+  const getTableRuntimeData = () => {
+    if (visualizationType === 'Sankey') return config?.data?.[0]?.tableData
+    const data = filteredData || excludedData
+    const dynamicSeries = config.series.find(series => !!series.dynamicCategory)
+    if (!dynamicSeries) return data
+    const usedColumns = Object.values(config.columns)
+      .filter(col => col.dataTable)
+      .map(col => col.name)
+      .concat([dynamicSeries.dynamicCategory, dynamicSeries.dataKey])
+    if (config.xAxis?.dataKey) usedColumns.push(config.xAxis.dataKey)
+    return data.map(d => _.pick(d, usedColumns))
+  }
+
+  const pivotDynamicSeries = (config: ChartConfig): TableConfig => {
+    const tableConfig: TableConfig = _.cloneDeep(config)
+    const dynamicSeries = tableConfig.series.find(series => !!series.dynamicCategory)
+    if (dynamicSeries) {
+      const pivot: Pivot = { columnName: dynamicSeries.dynamicCategory, valueColumns: [dynamicSeries.dataKey] }
+      tableConfig.table.pivot = pivot
+    }
+    return tableConfig
   }
 
   // Prevent render if loading
@@ -1235,10 +1253,10 @@ export default function CdcChart({
   }
 
   const getChartWrapperClasses = () => {
-    const isLegendOnBottom = legend?.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
+    const isLegendOnBottom = legend?.position === 'bottom' || isLegendWrapViewport(currentViewport)
     const classes = ['chart-container', 'p-relative']
     if (legend?.position) {
-      if (['sm', 'xs', 'xxs'].includes(currentViewport) && legend?.position !== 'top') {
+      if (isLegendWrapViewport(currentViewport) && legend?.position !== 'top') {
         classes.push('legend-bottom')
       } else {
         classes.push(`legend-${legend.position}`)
@@ -1255,7 +1273,7 @@ export default function CdcChart({
 
   const getChartSubTextClasses = () => {
     const classes = ['subtext ']
-    const isLegendOnBottom = legend?.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
+    const isLegendOnBottom = legend?.position === 'bottom' || isLegendWrapViewport(currentViewport)
 
     if (config.isResponsiveTicks) classes.push('subtext--responsive-ticks ')
     if (config.brush?.active && !isLegendOnBottom) classes.push('subtext--brush-active ')
@@ -1291,42 +1309,38 @@ export default function CdcChart({
                 classes={['chart-title', `${config.theme}`, 'cove-component__header']}
                 style={undefined}
               />
-              {/* Intro Text/Message */}
-              {config?.introText && config.visualizationType !== 'Spark Line' && (
-                <section
-                  className={`introText legend_${config.legend.hide ? 'hidden' : 'visible'}_${config.legend.position} `}
-                >
-                  {parse(config.introText)}
-                </section>
-              )}
-
-              {/* Filters */}
-              {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && (
-                <Filters
-                  config={config}
-                  setConfig={setConfig}
-                  setFilteredData={setFilteredData}
-                  filteredData={filteredData}
-                  excludedData={excludedData}
-                  filterData={filterVizData}
-                  dimensions={dimensions}
-                />
-              )}
-              <SkipTo skipId={handleChartTabbing(config, legendId)} skipMessage='Skip Over Chart Container' />
-              {config.annotations?.length > 0 && (
-                <SkipTo
-                  skipId={handleChartTabbing(config, legendId)}
-                  skipMessage={`Skip over annotations`}
-                  key={`skip-annotations`}
-                />
-              )}
 
               {/* Visualization Wrapper */}
               <div className={getChartWrapperClasses().join(' ')}>
+                {/* Intro Text/Message */}
+                {config?.introText && config.visualizationType !== 'Spark Line' && (
+                  <section className={`introText `}>{parse(config.introText)}</section>
+                )}
+
+                {/* Filters */}
+                {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && (
+                  <Filters
+                    config={config}
+                    setConfig={setConfig}
+                    setFilteredData={setFilteredData}
+                    filteredData={filteredData}
+                    excludedData={excludedData}
+                    filterData={filterVizData}
+                    dimensions={dimensions}
+                  />
+                )}
+                <SkipTo skipId={handleChartTabbing(config, legendId)} skipMessage='Skip Over Chart Container' />
+                {config.annotations?.length > 0 && (
+                  <SkipTo
+                    skipId={handleChartTabbing(config, legendId)}
+                    skipMessage={`Skip over annotations`}
+                    key={`skip-annotations`}
+                  />
+                )}
                 <LegendWrapper>
                   <div
                     className={
-                      legend.hide || ['xxs', 'xs', 'sm'].includes(currentViewport)
+                      legend.hide || isLegendWrapViewport(currentViewport)
                         ? 'w-100'
                         : legend.position === 'bottom' || legend.position === 'top' || visualizationType === 'Sankey'
                         ? 'w-100'
@@ -1335,30 +1349,36 @@ export default function CdcChart({
                   >
                     {/* All charts with LinearChart */}
                     {!['Spark Line', 'Line', 'Sankey', 'Pie', 'Sankey'].includes(config.visualizationType) && (
-                      <div style={{ height, width: `100%` }}>
+                      <div ref={parentRef} style={{ width: `100%` }}>
                         <ParentSize>
-                          {parent => <LinearChart parentWidth={parent.width} parentHeight={parent.height} />}
+                          {parent => (
+                            <LinearChart ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
+                          )}
                         </ParentSize>
                       </div>
                     )}
 
                     {config.visualizationType === 'Pie' && (
-                      <ParentSize className='justify-content-center d-flex' style={{ height, width: `100%` }}>
-                        {parent => <PieChart parentWidth={parent.width} parentHeight={parent.height} />}
+                      <ParentSize className='justify-content-center d-flex' style={{ width: `100%` }}>
+                        {parent => <PieChart ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />}
                       </ParentSize>
                     )}
                     {/* Line Chart */}
                     {config.visualizationType === 'Line' &&
                       (checkLineToBarGraph() ? (
-                        <div style={{ height: config?.heights?.vertical, width: `100%` }}>
+                        <div ref={parentRef} style={{ width: `100%` }}>
                           <ParentSize>
-                            {parent => <LinearChart parentWidth={parent.width} parentHeight={parent.height} />}
+                            {parent => (
+                              <LinearChart ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
+                            )}
                           </ParentSize>
                         </div>
                       ) : (
-                        <div style={{ height, width: `100%` }}>
+                        <div ref={parentRef} style={{ width: `100%` }}>
                           <ParentSize>
-                            {parent => <LinearChart parentWidth={parent.width} parentHeight={parent.height} />}
+                            {parent => (
+                              <LinearChart ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
+                            )}
                           </ParentSize>
                         </div>
                       ))}
@@ -1412,7 +1432,6 @@ export default function CdcChart({
                 {description && config.visualizationType !== 'Spark Line' && (
                   <div className={getChartSubTextClasses().join('')}>{parse(description)}</div>
                 )}
-                {false && <Annotation.List />}
 
                 {/* buttons */}
                 <MediaControls.Section classes={['download-buttons']}>
@@ -1442,7 +1461,7 @@ export default function CdcChart({
                   config.visualizationType !== 'Sankey') ||
                   (config.visualizationType === 'Sankey' && config.table.show)) && (
                   <DataTable
-                    config={config}
+                    config={pivotDynamicSeries(config)}
                     rawData={
                       config.visualizationType === 'Sankey'
                         ? config?.data?.[0]?.tableData
@@ -1450,15 +1469,11 @@ export default function CdcChart({
                         ? filterVizData(config.filters, config.data)
                         : config.data
                     }
-                    runtimeData={
-                      config.visualizationType === 'Sankey'
-                        ? config?.data?.[0]?.tableData
-                        : filteredData || excludedData
-                    }
+                    runtimeData={getTableRuntimeData()}
                     expandDataTable={config.table.expanded}
                     columns={config.columns}
                     displayDataAsText={displayDataAsText}
-                    displayGeoName={displayGeoName}
+                    displayGeoName={name => name}
                     applyLegendToRow={applyLegendToRow}
                     tableTitle={config.table.label}
                     indexTitle={config.table.indexLabel}
@@ -1501,32 +1516,35 @@ export default function CdcChart({
     debugSvg: isDebug,
     dimensions,
     dynamicLegendItems,
-    excludedData: excludedData,
+    excludedData,
     formatDate,
     formatNumber,
     formatTooltipsDate,
-    getTextWidth,
     getXAxisData,
     getYAxisData,
     handleChartAriaLabels,
     handleLineType,
+    handleChartTabbing,
     highlight,
     highlightReset,
     imageId,
     isDashboard,
-    isLegendBottom: legend?.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport),
+    isLegendBottom: legend?.position === 'bottom' || isLegendWrapViewport(currentViewport),
     isDebug,
     isDraggingAnnotation,
     handleDragStateChange,
     isEditor,
     isNumber,
     legend,
+    legendId,
+    legendRef,
     lineOptions,
     loading,
     missingRequiredSections,
     outerContainerRef,
+    parentRef,
     parseDate,
-    rawData: stateData ?? {},
+    rawData: _.cloneDeep(stateData) ?? {},
     seriesHighlight,
     setBrushConfig,
     setConfig,
@@ -1537,10 +1555,11 @@ export default function CdcChart({
     setSeriesHighlight,
     setSharedFilter,
     setSharedFilterValue,
+    svgRef,
     tableData: filteredData || excludedData, // do not clean table data
     transformedData: clean(filteredData || excludedData), // do this right before passing to components
     twoColorPalette,
-    unfilteredData: stateData,
+    unfilteredData: _.cloneDeep(stateData),
     updateConfig
   }
 
@@ -1559,3 +1578,5 @@ export default function CdcChart({
     </ConfigContext.Provider>
   )
 }
+
+export default CdcChart