@cdc/chart 4.24.5 → 4.24.9

package/src/CdcChart.tsx

@@ -7,6 +7,9 @@ import * as d3 from 'd3-array'
 import Layout from '@cdc/core/components/Layout'
 import Button from '@cdc/core/components/elements/Button'
 
+//types
+import { DimensionsType } from '@cdc/core/types/Dimensions'
+
 // External Libraries
 import { scaleOrdinal } from '@visx/scale'
 import ParentSize from '@visx/responsive/lib/components/ParentSize'
@@ -29,9 +32,9 @@ import Legend from './components/Legend'
 import defaults from './data/initial-state'
 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 { filterData } from './helpers/filterData'
 import { handleChartAriaLabels } from './helpers/handleChartAriaLabels'
 import { lineOptions } from './helpers/lineOptions'
 import { handleLineType } from './helpers/handleLineType'
@@ -39,8 +42,10 @@ import { generateColorsArray } from './helpers/generateColorsArray'
 import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
 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'
@@ -50,6 +55,7 @@ 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 './scss/main.scss'
 // load both then config below determines which to use
@@ -58,10 +64,26 @@ import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
 import Title from '@cdc/core/components/ui/Title'
 import { 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'
-
-export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDebug = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link, setSharedFilter, setSharedFilterValue, dashboardConfig }) {
+import { filterVizData } from '@cdc/core/helpers/filterVizData'
+import LegendWrapper from './components/LegendWrapper'
+
+export default function CdcChart({
+  configUrl,
+  config: configObj,
+  isEditor = false,
+  isDebug = false,
+  isDashboard = false,
+  setConfig: setParentConfig,
+  setEditing,
+  hostname,
+  link,
+  setSharedFilter,
+  setSharedFilterValue,
+  dashboardConfig
+}) {
   const transform = new DataTransform()
   const [loading, setLoading] = useState(true)
   const [colorScale, setColorScale] = useState(null)
@@ -69,12 +91,15 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const [stateData, setStateData] = useState(config.data || [])
   const [excludedData, setExcludedData] = useState<Record<string, number>[] | undefined>(undefined)
   const [filteredData, setFilteredData] = useState<Record<string, any>[] | undefined>(undefined)
-  const [seriesHighlight, setSeriesHighlight] = useState<string[]>(configObj && configObj?.legend?.seriesHighlight?.length ? [...configObj?.legend?.seriesHighlight] : [])
-  const [currentViewport, setCurrentViewport] = useState('lg')
-  const [dimensions, setDimensions] = useState<[number?, number?]>([])
+  const [seriesHighlight, setSeriesHighlight] = useState<string[]>(
+    configObj && configObj?.legend?.seriesHighlight?.length ? [...configObj?.legend?.seriesHighlight] : []
+  )
+  const [currentViewport, setCurrentViewport] = useState<ViewportSize>('lg')
+  const [dimensions, setDimensions] = useState<DimensionsType>([0, 0])
   const [externalFilters, setExternalFilters] = useState<any[]>()
   const [container, setContainer] = useState()
   const [coveLoadedEventRan, setCoveLoadedEventRan] = useState(false)
+  const [isDraggingAnnotation, setIsDraggingAnnotation] = useState(false)
   const [dynamicLegendItems, setDynamicLegendItems] = useState<any[]>([])
   const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
   const [brushConfig, setBrushConfig] = useState({
@@ -82,11 +107,25 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     isActive: false,
     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 legendRef = useRef(null)
 
+  const handleDragStateChange = isDragging => {
+    setIsDraggingAnnotation(isDragging)
+  }
+
   if (isDebug) console.log('Chart config, isEditor', config, isEditor)
 
   // Destructure items from config for more readable JSX
@@ -101,7 +140,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   const { barBorderClass, lineDatapointClass, contentClasses, sparkLineStyles } = useDataVizClasses(config)
   const legendId = useId()
-  const handleChartTabbing = !config.legend?.hide ? legendId : config?.title ? `dataTableSection__${config.title.replace(/\s/g, '')}` : `dataTableSection`
+
+  const checkLineToBarGraph = () => {
+    return isConvertLineToBarGraph(config.visualizationType, filteredData, config.allowLineToBarGraph)
+  }
 
   const reloadURLData = async () => {
     if (config.dataUrl) {
@@ -164,7 +206,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       if (data) {
         setStateData(data)
         setExcludedData(data)
-        setFilteredData(filterData(config.filters, data))
+        setFilteredData(filterVizData(config.filters, data))
       }
     }
   }
@@ -175,7 +217,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     // If data is included through a URL, fetch that and store
     let data: any[] = response.data || []
 
-    const urlFilters = response.filters ? (response.filters.filter(filter => filter.type === 'url').length > 0 ? true : false) : false
+    const urlFilters = response.filters
+      ? response.filters.filter(filter => filter.type === 'url').length > 0
+        ? true
+        : false
+      : false
 
     if (response.dataUrl && !urlFilters) {
       try {
@@ -251,11 +297,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       if (!series.axis) series.axis = 'Left'
     })
 
-    if (!newConfig.data && data) {
+    if (data) {
       newConfig.data = data
     }
 
-    const processedConfig = { ...(await coveUpdateWorker(newConfig)) }
+    const processedConfig = { ...coveUpdateWorker(newConfig) }
 
     updateConfig(processedConfig, data)
   }
@@ -275,7 +321,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     if (newConfig.exclusions && newConfig.exclusions.active) {
       if (newConfig.xAxis.type === 'categorical' && newConfig.exclusions.keys?.length > 0) {
         newExcludedData = data.filter(e => !newConfig.exclusions.keys.includes(e[newConfig.xAxis.dataKey]))
-      } else if (isDateScale(newConfig.xAxis) && (newConfig.exclusions.dateStart || newConfig.exclusions.dateEnd) && newConfig.xAxis.dateParseFormat) {
+      } else if (
+        isDateScale(newConfig.xAxis) &&
+        (newConfig.exclusions.dateStart || newConfig.exclusions.dateEnd) &&
+        newConfig.xAxis.dateParseFormat
+      ) {
         // Filter dates
         const timestamp = e => new Date(e).getTime()
 
@@ -286,7 +336,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         let endDateValid = undefined !== typeof endDate && false === isNaN(endDate)
 
         if (startDateValid && endDateValid) {
-          newExcludedData = data.filter(e => timestamp(e[newConfig.xAxis.dataKey]) >= startDate && timestamp(e[newConfig.xAxis.dataKey]) <= endDate)
+          newExcludedData = data.filter(
+            e => timestamp(e[newConfig.xAxis.dataKey]) >= startDate && timestamp(e[newConfig.xAxis.dataKey]) <= endDate
+          )
         } else if (startDateValid) {
           newExcludedData = data.filter(e => timestamp(e[newConfig.xAxis.dataKey]) >= startDate)
         } else if (endDateValid) {
@@ -305,38 +357,68 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     let currentData: any[] = []
     if (newConfig.filters) {
       newConfig.filters.forEach((filter, index) => {
-        let filterValues = []
-
-        filterValues = filter.orderedValues || generateValuesForFilter(filter.columnName, newExcludedData).sort(filter.order === 'desc' ? sortDesc : sortAsc)
+        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
 
-        newConfig.filters[index].active = newConfig.filters[index].active || filterValues[0]
-        newConfig.filters[index].filterStyle = newConfig.filters[index].filterStyle ? newConfig.filters[index].filterStyle : 'dropdown'
+        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 = filterData(newConfig.filters, newExcludedData)
+      currentData = filterVizData(newConfig.filters, newExcludedData)
       setFilteredData(currentData)
     }
 
-    if (newConfig.xAxis.type === 'date-time' && newConfig.barThickness > 0.1) {
-      newConfig.barThickness = 0.035
-    } else if (newConfig.xAxis.type !== 'date-time' && newConfig.barThickness < 0.1) {
-      newConfig.barThickness = 0.35
+    if (newConfig.xAxis.type === 'date-time' && config.orientation === 'horizontal') {
+      newConfig.xAxis.type = 'date'
     }
 
     //Enforce default values that need to be calculated at runtime
     newConfig.runtime = {}
+    newConfig.runtime.series = newConfig.dynamicSeries ? [] : 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) {
+        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)
+          ) {
+            newConfig.runtime.series.push({
+              dataKey: seriesKey,
+              type: newConfig.dynamicSeriesType,
+              lineType: newConfig.dynamicSeriesLineType,
+              tooltip: true
+            })
+          }
+        })
+      }
+    }
+
     if (newConfig.visualizationType === 'Pie') {
       newConfig.runtime.seriesKeys = (dataOverride || data).map(d => d[newConfig.xAxis.dataKey])
       newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys
     } else {
-      newConfig.runtime.seriesKeys = newConfig.series
-        ? newConfig.series.map(series => {
+      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
@@ -345,8 +427,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
 
     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]))
+      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) {
@@ -366,7 +452,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           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 = newExcludedData
+            ? newExcludedData.filter(item => item[newConfig.xAxis.dataKey] === g)
+            : data.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.
@@ -454,7 +542,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         if (series.type === 'Bar' || series.type === 'Combo') {
           newConfig.runtime.barSeriesKeys.push(series.dataKey)
         }
-        if (series.type === 'Line' || series.type === 'dashed-sm' || series.type === 'dashed-md' || series.type === 'dashed-lg') {
+        if (
+          series.type === 'Line' ||
+          series.type === 'dashed-sm' ||
+          series.type === 'dashed-md' ||
+          series.type === 'dashed-lg'
+        ) {
           newConfig.runtime.lineSeriesKeys.push(series.dataKey)
         }
         if (series.type === 'Combo') {
@@ -481,13 +574,21 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       })
     }
 
-    if ((newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') || ['Deviation Bar', 'Paired Bar', 'Forest Plot'].includes(newConfig.visualizationType)) {
+    if (
+      (newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') ||
+      ['Deviation Bar', 'Paired Bar', 'Forest Plot'].includes(newConfig.visualizationType)
+    ) {
       newConfig.runtime.xAxis = newConfig.yAxis['yAxis'] ? newConfig.yAxis['yAxis'] : newConfig.yAxis
       newConfig.runtime.yAxis = newConfig.xAxis['xAxis'] ? newConfig.xAxis['xAxis'] : newConfig.xAxis
 
       newConfig.runtime.horizontal = false
       newConfig.orientation = 'horizontal'
-    } else if (['Box Plot', 'Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType)) {
+      // remove after  COVE supports categorical axis on horizonatal bars
+      newConfig.yAxis.type = newConfig.yAxis.type === 'categorical' ? 'linear' : newConfig.yAxis.type
+    } else if (
+      ['Box Plot', 'Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType) &&
+      !checkLineToBarGraph()
+    ) {
       newConfig.runtime.xAxis = newConfig.xAxis
       newConfig.runtime.yAxis = newConfig.yAxis
       newConfig.runtime.horizontal = false
@@ -499,10 +600,16 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
 
     newConfig.runtime.uniqueId = Date.now()
-    newConfig.runtime.editorErrorMessage = newConfig.visualizationType === 'Pie' && !newConfig.yAxis.dataKey ? 'Data Key property in Y Axis section must be set for pie charts.' : ''
+    newConfig.runtime.editorErrorMessage =
+      newConfig.visualizationType === 'Pie' && !newConfig.yAxis.dataKey
+        ? 'Data Key property in Y Axis section must be set for pie charts.'
+        : ''
 
     // Sankey Description box error message
-    newConfig.runtime.editorErrorMessage = newConfig.visualizationType === 'Sankey' && !newConfig.description ? 'SUBTEXT/CITATION field is empty: A description of the Sankey Diagram data must be inputted.' : ''
+    newConfig.runtime.editorErrorMessage =
+      newConfig.visualizationType === 'Sankey' && !newConfig.description
+        ? 'SUBTEXT/CITATION field is empty: A description of the Sankey Diagram data must be inputted.'
+        : ''
 
     if (newConfig.legend.seriesHighlight?.length) {
       setSeriesHighlight(newConfig.legend?.seriesHighlight)
@@ -528,7 +635,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   // Sorts data series for horizontal bar charts
   const sortData = (a, b) => {
-    let sortKey = config.visualizationType === 'Bar' && config.visualizationSubType === 'horizontal' ? config.xAxis.dataKey : config.yAxis.sortKey
+    let sortKey =
+      config.visualizationType === 'Bar' && config.visualizationSubType === 'horizontal'
+        ? config.xAxis.dataKey
+        : config.yAxis.sortKey
     let aData = parseFloat(a[sortKey])
     let bData = parseFloat(b[sortKey])
 
@@ -545,15 +655,14 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let { width, height } = entry.contentRect
-      let newViewport = getViewport(width)
       let svgMarginWidth = 32
       let editorWidth = 350
 
-      setCurrentViewport(newViewport)
+      width = isEditor ? width - editorWidth : width
 
-      if (isEditor) {
-        width = width - editorWidth
-      }
+      let newViewport = getViewport(width)
+
+      setCurrentViewport(newViewport)
 
       if (entry.target.dataset.lollipop === 'true') {
         width = width - 2.5
@@ -628,14 +737,19 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         let configCopy = { ...config }
         delete configCopy['filters']
         setConfig(configCopy)
-        setFilteredData(filterData(externalFilters, excludedData))
+        setFilteredData(filterVizData(externalFilters, excludedData))
       }
     }
 
-    if (externalFilters && externalFilters.length > 0 && externalFilters.length > 0 && externalFilters[0].hasOwnProperty('active')) {
+    if (
+      externalFilters &&
+      externalFilters.length > 0 &&
+      externalFilters.length > 0 &&
+      externalFilters[0].hasOwnProperty('active')
+    ) {
       let newConfigHere = { ...config, filters: externalFilters }
       setConfig(newConfigHere)
-      setFilteredData(filterData(externalFilters, excludedData))
+      setFilteredData(filterVizData(externalFilters, excludedData))
     }
   }, [externalFilters]) // eslint-disable-line
 
@@ -647,10 +761,25 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }, [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)) {
+      setConfig({
+        ...config,
+        xAxis: {
+          ...config.xAxis,
+          type: 'date-time'
+        }
+      })
+    }
+  }, [config.visualizationType])
+
   // Generates color palette to pass to child chart component
   useEffect(() => {
     if (stateData && config.xAxis && config.runtime?.seriesKeys) {
-      const configPalette = ['Paired Bar', 'Deviation Bar'].includes(config.visualizationType) ? config.twoColor.palette : config.palette
+      const configPalette = ['Paired Bar', 'Deviation Bar'].includes(config.visualizationType)
+        ? config.twoColor.palette
+        : config.palette
       const allPalettes: Record<string, string[]> = { ...colorPalettes, ...twoColorPalette }
       let palette = config.customColors || allPalettes[configPalette]
       let numberOfKeys = config.runtime.seriesKeys.length
@@ -754,19 +883,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return timeFormat(config.tooltips.dateDisplayFormat)(date)
   }
 
-  // function calculates the width of given text and its font-size
-  function getTextWidth(text: string, font: string): number | undefined {
-    const canvas = document.createElement('canvas')
-    const context = canvas.getContext('2d')
-    if (!context) {
-      console.error('2d context not found')
-      return
-    }
-    context.font = font || getComputedStyle(document.body).font
-
-    return Math.ceil(context.measureText(text).width)
-  }
-
   // 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.
@@ -785,7 +901,20 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
     // destructure dataFormat values
     let {
-      dataFormat: { commas, abbreviated, roundTo, prefix, suffix, rightRoundTo, bottomRoundTo, rightPrefix, rightSuffix, bottomPrefix, bottomSuffix, bottomAbbreviated }
+      dataFormat: {
+        commas,
+        abbreviated,
+        roundTo,
+        prefix,
+        suffix,
+        rightRoundTo,
+        bottomRoundTo,
+        rightPrefix,
+        rightSuffix,
+        bottomPrefix,
+        bottomSuffix,
+        bottomAbbreviated
+      }
     } = config
 
     // check if value contains comma and remove it. later will add comma below.
@@ -856,7 +985,10 @@ 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 && shouldAbbreviate) || (axis === 'bottom' && commas && abbreviated && shouldAbbreviate)) {
+    if (
+      (axis === 'left' && commas && abbreviated && shouldAbbreviate) ||
+      (axis === 'bottom' && commas && abbreviated && shouldAbbreviate)
+    ) {
       num = num // eslint-disable-line
     } else {
       num = num.toLocaleString('en-US', stringFormattingOptions)
@@ -912,21 +1044,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return String(result)
   }
 
-  // Select appropriate chart type
-  const chartComponents = {
-    'Paired Bar': <LinearChart />,
-    Forecasting: <LinearChart />,
-    Bar: <LinearChart />,
-    Line: <LinearChart />,
-    Combo: <LinearChart />,
-    Pie: <PieChart />,
-    'Box Plot': <LinearChart />,
-    'Area Chart': <LinearChart />,
-    'Scatter Plot': <LinearChart />,
-    'Deviation Bar': <LinearChart />,
-    'Forest Plot': <LinearChart />
-  }
-
   const missingRequiredSections = () => {
     if (config.visualizationType === 'Sankey') return false // skip checks for now
     if (config.visualizationType === 'Forecasting') return false // skip required checks for now.
@@ -936,7 +1053,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         return true
       }
     } else {
-      if (undefined === config?.series || false === config?.series.length > 0) {
+      if ((undefined === config?.series || false === config?.series.length > 0) && !config?.dynamicSeries) {
         return true
       }
     }
@@ -1043,7 +1160,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         <section className='waiting-container'>
           <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' style={{ margin: '1em auto' }} disabled={missingRequiredSections()} onClick={e => confirmDone(e)}>
+          <Button
+            className='btn'
+            style={{ margin: '1em auto' }}
+            disabled={missingRequiredSections()}
+            onClick={e => confirmDone(e)}
+          >
             I'm Done
           </Button>
         </section>
@@ -1107,17 +1229,40 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   // Prevent render if loading
   let body = <Loading />
 
+  const makeClassName = string => {
+    if (!string || !string.toLowerCase) return
+    return string.toLowerCase().replaceAll(/ /g, '-')
+  }
+
   const getChartWrapperClasses = () => {
+    const isLegendOnBottom = legend?.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
     const classes = ['chart-container', 'p-relative']
-    if (config.legend.position === 'bottom') classes.push('bottom')
-    if (config.legend.hide) classes.push('legend-hidden')
+    if (legend?.position) {
+      if (['sm', 'xs', 'xxs'].includes(currentViewport) && legend?.position !== 'top') {
+        classes.push('legend-bottom')
+      } else {
+        classes.push(`legend-${legend.position}`)
+      }
+    }
+    if (legend?.hide) classes.push('legend-hidden')
     if (lineDatapointClass) classes.push(lineDatapointClass)
     if (!config.barHasBorder) classes.push('chart-bar--no-border')
-    if (isDebug) classes.push('debug')
+    if (config.brush?.active && dashboardConfig?.type === 'dashboard' && (!isLegendOnBottom || legend.hide))
+      classes.push('dashboard-brush')
     classes.push(...contentClasses)
     return classes
   }
 
+  const getChartSubTextClasses = () => {
+    const classes = ['subtext ']
+    const isLegendOnBottom = legend?.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
+
+    if (config.isResponsiveTicks) classes.push('subtext--responsive-ticks ')
+    if (config.brush?.active && !isLegendOnBottom) classes.push('subtext--brush-active ')
+    if (config.brush?.active && config.legend.hide) classes.push('subtext--brush-active ')
+    return classes
+  }
+
   if (!loading) {
     const tableLink = (
       <a href={`#data-table-${config.dataKey}`} className='margin-left-href'>
@@ -1131,70 +1276,202 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           {config.newViz && <Confirm />}
           {undefined === config.newViz && isEditor && config.runtime && config.runtime?.editorErrorMessage && <Error />}
           {!missingRequiredSections() && !config.newViz && (
-            <div className='cdc-chart-inner-container cove-component__content' aria-label={handleChartAriaLabels(config)} tabIndex={0}>
-              <Title showTitle={config.showTitle} isDashboard={isDashboard} title={title} superTitle={config.superTitle} classes={['chart-title', `${config.theme}`, 'cove-component__header']} style={undefined} />
+            <div
+              className={`cdc-chart-inner-container cove-component__content type-${makeClassName(
+                config.visualizationType
+              )}`}
+              aria-label={handleChartAriaLabels(config)}
+              tabIndex={0}
+            >
+              <Title
+                showTitle={config.showTitle}
+                isDashboard={isDashboard}
+                title={title}
+                superTitle={config.superTitle}
+                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={filterData} dimensions={dimensions} />}
-              <SkipTo skipId={handleChartTabbing} skipMessage='Skip Over Chart Container' />
-              {/* Visualization */}
-              {config?.introText && config.visualizationType !== 'Spark Line' && <section className='introText'>{parse(config.introText)}</section>}
+              {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(' ')}>
-                {/* All charts except sparkline */}
-                {config.visualizationType !== 'Spark Line' && chartComponents[config.visualizationType]}
-                {/* Sparkline */}
-                {config.visualizationType === 'Spark Line' && (
-                  <>
-                    <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />
-                    {config?.introText && (
-                      <section className='introText' style={{ padding: '0px 0 35px' }}>
-                        {parse(config.introText)}
-                      </section>
-                    )}
-                    <div style={{ height: `100px`, width: `100%`, ...sparkLineStyles }}>
-                      <ParentSize>{parent => <SparkLine width={parent.width} height={parent.height} />}</ParentSize>
-                    </div>
-                    {description && (
-                      <div className='subtext' style={{ padding: '35px 0 15px' }}>
-                        {parse(description)}
+                <LegendWrapper>
+                  <div
+                    className={
+                      legend.hide || ['xxs', 'xs', 'sm'].includes(currentViewport)
+                        ? 'w-100'
+                        : legend.position === 'bottom' || legend.position === 'top' || visualizationType === 'Sankey'
+                        ? 'w-100'
+                        : 'w-75'
+                    }
+                  >
+                    {/* All charts with LinearChart */}
+                    {!['Spark Line', 'Line', 'Sankey', 'Pie', 'Sankey'].includes(config.visualizationType) && (
+                      <div style={{ height, width: `100%` }}>
+                        <ParentSize>
+                          {parent => <LinearChart 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>
+                    )}
+                    {/* Line Chart */}
+                    {config.visualizationType === 'Line' &&
+                      (checkLineToBarGraph() ? (
+                        <div style={{ height: config?.heights?.vertical, width: `100%` }}>
+                          <ParentSize>
+                            {parent => <LinearChart parentWidth={parent.width} parentHeight={parent.height} />}
+                          </ParentSize>
+                        </div>
+                      ) : (
+                        <div style={{ height, width: `100%` }}>
+                          <ParentSize>
+                            {parent => <LinearChart parentWidth={parent.width} parentHeight={parent.height} />}
+                          </ParentSize>
+                        </div>
+                      ))}
+                    {/* Sparkline */}
+                    {config.visualizationType === 'Spark Line' && (
+                      <>
+                        <Filters
+                          config={config}
+                          setConfig={setConfig}
+                          setFilteredData={setFilteredData}
+                          filteredData={filteredData}
+                          excludedData={excludedData}
+                          filterData={filterVizData}
+                          dimensions={dimensions}
+                        />
+                        {config?.introText && (
+                          <section className='introText' style={{ padding: '0px 0 35px' }}>
+                            {parse(config.introText)}
+                          </section>
+                        )}
+                        <div style={{ height: `100px`, width: `100%`, ...sparkLineStyles }}>
+                          <ParentSize>{parent => <SparkLine width={parent.width} height={parent.height} />}</ParentSize>
+                        </div>
+                        {description && (
+                          <div className='subtext' style={{ padding: '35px 0 15px' }}>
+                            {parse(description)}
+                          </div>
+                        )}
+                      </>
+                    )}
+                    {/* Sankey */}
+                    {config.visualizationType === 'Sankey' && (
+                      <ParentSize aria-hidden='true'>
+                        {parent => <SankeyChart runtime={config.runtime} width={parent.width} height={parent.height} />}
+                      </ParentSize>
+                    )}
+                  </div>
+                  {/* Legend */}
+                  {!config.legend.hide &&
+                    config.visualizationType !== 'Spark Line' &&
+                    config.visualizationType !== 'Sankey' && (
+                      <Legend ref={legendRef} skipId={handleChartTabbing(config, legendId)} />
+                    )}
+                </LegendWrapper>
+                {/* Link */}
+                {isDashboard && config.table && config.table.show && config.table.showDataTableLink
+                  ? tableLink
+                  : link && link}
+                {/* Description */}
+
+                {description && config.visualizationType !== 'Spark Line' && (
+                  <div className={getChartSubTextClasses().join('')}>{parse(description)}</div>
                 )}
-                {/* Sankey */}
-                {config.visualizationType === 'Sankey' && <ParentSize aria-hidden='true'>{parent => <SankeyChart runtime={config.runtime} width={parent.width} height={parent.height} />}</ParentSize>}
-                {!config.legend.hide && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey' && <Legend ref={legendRef} />}
+                {false && <Annotation.List />}
+
+                {/* buttons */}
+                <MediaControls.Section classes={['download-buttons']}>
+                  {config.table.showDownloadImgButton && (
+                    <MediaControls.Button
+                      text='Download Image'
+                      title='Download Chart as Image'
+                      type='image'
+                      state={config}
+                      elementToCapture={imageId}
+                    />
+                  )}
+                  {config.table.showDownloadPdfButton && (
+                    <MediaControls.Button
+                      text='Download PDF'
+                      title='Download Chart as PDF'
+                      type='pdf'
+                      state={config}
+                      elementToCapture={imageId}
+                    />
+                  )}
+                </MediaControls.Section>
+                {/* Data Table */}
+                {((config.xAxis.dataKey &&
+                  config.table.show &&
+                  config.visualizationType !== 'Spark Line' &&
+                  config.visualizationType !== 'Sankey') ||
+                  (config.visualizationType === 'Sankey' && config.table.show)) && (
+                  <DataTable
+                    config={config}
+                    rawData={
+                      config.visualizationType === 'Sankey'
+                        ? config?.data?.[0]?.tableData
+                        : config.table.customTableConfig
+                        ? filterVizData(config.filters, config.data)
+                        : config.data
+                    }
+                    runtimeData={
+                      config.visualizationType === 'Sankey'
+                        ? config?.data?.[0]?.tableData
+                        : filteredData || excludedData
+                    }
+                    expandDataTable={config.table.expanded}
+                    columns={config.columns}
+                    displayDataAsText={displayDataAsText}
+                    displayGeoName={displayGeoName}
+                    applyLegendToRow={applyLegendToRow}
+                    tableTitle={config.table.label}
+                    indexTitle={config.table.indexLabel}
+                    vizTitle={title}
+                    viewport={currentViewport}
+                    tabbingId={handleChartTabbing(config, legendId)}
+                    colorScale={colorScale}
+                  />
+                )}
+                {config?.annotations?.length > 0 && <Annotation.Dropdown />}
+                {/* show pdf or image button */}
               </div>
-              {/* Link */}
-              {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
-              {/* Description */}
-              {description && config.visualizationType !== 'Spark Line' && <div className={'column ' + config.isResponsiveTicks ? 'subtext--responsive-ticks' : 'subtext'}>{parse(description)}</div>}
-              {/* buttons */}
-              <MediaControls.Section classes={['download-buttons']}>
-                {config.table.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={config} elementToCapture={imageId} />}
-                {config.table.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={config} elementToCapture={imageId} />}
-              </MediaControls.Section>
-              {/* Data Table */}
-              {((config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey') || (config.visualizationType === 'Sankey' && config.table.show)) && (
-                <DataTable
-                  config={config}
-                  rawData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : config.table.customTableConfig ? filterData(config.filters, config.data) : config.data}
-                  runtimeData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : filteredData || excludedData}
-                  expandDataTable={config.table.expanded}
-                  columns={config.columns}
-                  displayDataAsText={displayDataAsText}
-                  displayGeoName={displayGeoName}
-                  applyLegendToRow={applyLegendToRow}
-                  tableTitle={config.table.label}
-                  indexTitle={config.table.indexLabel}
-                  vizTitle={title}
-                  viewport={currentViewport}
-                  tabbingId={handleChartTabbing}
-                  colorScale={colorScale}
-                />
-              )}
               {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
-              {/* show pdf or image button */}
             </div>
           )}
         </Layout.Responsive>
@@ -1202,7 +1479,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     )
   }
 
-  const getXAxisData = d => (isDateScale(config.runtime.xAxis) ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
+  const getXAxisData = d =>
+    isDateScale(config.runtime.xAxis)
+      ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime()
+      : d[config.runtime.originalXAxis.dataKey]
   const getYAxisData = (d, seriesKey) => d[seriesKey]
 
   const capitalize = str => {
@@ -1211,59 +1491,69 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   const contextValues = {
     brushConfig,
-    setBrushConfig,
     capitalize,
-    getXAxisData,
-    getYAxisData,
-    config,
-    setConfig,
-    rawData: stateData ?? {},
-    excludedData: excludedData,
-    transformedData: clean(filteredData || excludedData), // do this right before passing to components
-    tableData: filteredData || excludedData, // do not clean table data
-    unfilteredData: stateData,
-    seriesHighlight,
+    clean,
+    colorPalettes,
     colorScale,
-    dimensions,
+    config,
     currentViewport,
-    parseDate,
+    dashboardConfig,
+    debugSvg: isDebug,
+    dimensions,
+    dynamicLegendItems,
+    excludedData: excludedData,
     formatDate,
-    formatTooltipsDate,
     formatNumber,
-    loading,
-    updateConfig,
-    colorPalettes,
-    isDashboard,
-    setParentConfig,
-    missingRequiredSections,
-    setEditing,
-    setFilteredData,
+    formatTooltipsDate,
+    getTextWidth,
+    getXAxisData,
+    getYAxisData,
     handleChartAriaLabels,
+    handleLineType,
     highlight,
     highlightReset,
-    legend,
-    setSeriesHighlight,
-    dynamicLegendItems,
-    setDynamicLegendItems,
-    filterData,
     imageId,
-    handleLineType,
-    lineOptions,
-    isNumber,
-    getTextWidth,
-    twoColorPalette,
-    isEditor,
+    isDashboard,
+    isLegendBottom: legend?.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport),
     isDebug,
+    isDraggingAnnotation,
+    handleDragStateChange,
+    isEditor,
+    isNumber,
+    legend,
+    lineOptions,
+    loading,
+    missingRequiredSections,
+    outerContainerRef,
+    parseDate,
+    rawData: stateData ?? {},
+    seriesHighlight,
+    setBrushConfig,
+    setConfig,
+    setDynamicLegendItems,
+    setEditing,
+    setFilteredData,
+    setParentConfig,
+    setSeriesHighlight,
     setSharedFilter,
     setSharedFilterValue,
-    dashboardConfig,
-    debugSvg: isDebug,
-    clean
+    tableData: filteredData || excludedData, // do not clean table data
+    transformedData: clean(filteredData || excludedData), // do this right before passing to components
+    twoColorPalette,
+    unfilteredData: stateData,
+    updateConfig
   }
 
   return (
     <ConfigContext.Provider value={contextValues}>
-      <Layout.VisualizationWrapper config={config} isEditor={isEditor} currentViewport={currentViewport} ref={outerContainerRef} imageId={imageId} showEditorPanel={config?.showEditorPanel}>
+      <Layout.VisualizationWrapper
+        config={config}
+        isEditor={isEditor}
+        currentViewport={currentViewport}
+        ref={outerContainerRef}
+        imageId={imageId}
+        showEditorPanel={config?.showEditorPanel}
+      >
         {body}
       </Layout.VisualizationWrapper>
     </ConfigContext.Provider>