@cdc/chart 4.26.2 → 4.26.4

package/src/CdcChartComponent.tsx

@@ -5,7 +5,7 @@ import ResizeObserver from 'resize-observer-polyfill'
 import 'whatwg-fetch'
 // Core components
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
-import Layout from '@cdc/core/components/Layout'
+import { VisualizationContainer, VisualizationContent } from '@cdc/core/components/Layout'
 import Confirm from '@cdc/core/components/elements/Confirm'
 import Error from '@cdc/core/components/elements/Error'
 import SkipTo from '@cdc/core/components/elements/SkipTo'
@@ -24,7 +24,21 @@ import { Label } from './types/Label'
 import ParentSize from '@visx/responsive/lib/components/ParentSize'
 import { timeParse } from 'd3-time-format'
 import parse from 'html-react-parser'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import defaultsDeep from 'lodash/defaultsDeep'
+import lodashDefaults from 'lodash/defaults'
+import findKey from 'lodash/findKey'
+import forEach from 'lodash/forEach'
+import get from 'lodash/get'
+import isEmpty from 'lodash/isEmpty'
+import isEqual from 'lodash/isEqual'
+import isString from 'lodash/isString'
+import kebabCase from 'lodash/kebabCase'
+import pick from 'lodash/pick'
+import remove from 'lodash/remove'
+import set from 'lodash/set'
+import uniq from 'lodash/uniq'
+import xor from 'lodash/xor'
 // Primary Components
 import ConfigContext, { ChartDispatchContext } from './ConfigContext'
 import PieChart from './components/PieChart'
@@ -40,6 +54,7 @@ import SparkLine from './components/Sparkline'
 import Legend from './components/Legend'
 import WarmingStripesGradientLegend from './components/WarmingStripes/WarmingStripesGradientLegend'
 import defaults from './data/initial-state'
+import { LEGACY_CHART_DEFAULTS } from './data/legacy-defaults'
 import EditorPanel from './components/EditorPanel'
 import { abbreviateNumber } from './helpers/abbreviateNumber'
 import { handleChartTabbing } from './helpers/handleChartTabbing'
@@ -57,6 +72,7 @@ import Annotation from './components/Annotations'
 import { getVisibleAnnotations } from './components/Annotations/helpers/getVisibleAnnotations'
 // Core Helpers
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
+import { backfillDefaults } from '@cdc/core/helpers/backfillDefaults'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 import { missingRequiredSections } from '@cdc/core/helpers/missingRequiredSections'
 import { filterVizData } from '@cdc/core/helpers/filterVizData'
@@ -90,6 +106,8 @@ import { Datasets } from '@cdc/core/types/DataSet'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import cloneConfig from '@cdc/core/helpers/cloneConfig'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { ENABLE_CHART_MAP_TP5_TREATMENT, ENABLE_CHART_VISUAL_SETTINGS } from '@cdc/core/helpers/constants'
+import CalloutFlag from '@cdc/core/assets/callout-flag.svg?url'
 
 interface CdcChartProps {
   config?: ChartConfig
@@ -174,36 +192,32 @@ const CdcChart: React.FC<CdcChartProps> = ({
       }
     }
 
+    const markupOptions = {
+      isEditor,
+      filters: config.filters || [],
+      locale: config.locale,
+      dataMetadata: config.dataMetadata
+    }
+
     return {
       title: title
-        ? processMarkupVariables(title, config.data || [], config.markupVariables, {
-            isEditor,
-            filters: config.filters || []
-          }).processedContent
+        ? processMarkupVariables(title, config.data || [], config.markupVariables, markupOptions).processedContent
         : title,
       superTitle: config.superTitle
-        ? processMarkupVariables(config.superTitle, config.data || [], config.markupVariables, {
-            isEditor,
-            filters: config.filters || []
-          }).processedContent
+        ? processMarkupVariables(config.superTitle, config.data || [], config.markupVariables, markupOptions)
+            .processedContent
         : config.superTitle,
       introText: config.introText
-        ? processMarkupVariables(config.introText, config.data || [], config.markupVariables, {
-            isEditor,
-            filters: config.filters || []
-          }).processedContent
+        ? processMarkupVariables(config.introText, config.data || [], config.markupVariables, markupOptions)
+            .processedContent
         : config.introText,
       legacyFootnotes: config.legacyFootnotes
-        ? processMarkupVariables(config.legacyFootnotes, config.data || [], config.markupVariables, {
-            isEditor,
-            filters: config.filters || []
-          }).processedContent
+        ? processMarkupVariables(config.legacyFootnotes, config.data || [], config.markupVariables, markupOptions)
+            .processedContent
         : config.legacyFootnotes,
       description: config.description
-        ? processMarkupVariables(config.description, config.data || [], config.markupVariables, {
-            isEditor,
-            filters: config.filters || []
-          }).processedContent
+        ? processMarkupVariables(config.description, config.data || [], config.markupVariables, markupOptions)
+            .processedContent
         : config.description
     }
   }, [
@@ -237,10 +251,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
   const { lineDatapointClass, contentClasses, sparkLineStyles } = useDataVizClasses(config)
   const legendId = useId()
 
-  const hasDateAxis =
-    (config.xAxis || config.yAxis) && ['date-time', 'date'].includes((config.xAxis || config.yAxis).type)
-  const dataTableDefaultSortBy = hasDateAxis && config.xAxis.dataKey
-
   const convertLineToBarGraph = isConvertLineToBarGraph(config, filteredData)
 
   // Declaratively calculate series keys for pie charts based on filtered data
@@ -248,7 +258,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (config.visualizationType !== 'Pie' || !config.xAxis?.dataKey) return null
     const data = filteredData?.length > 0 ? filteredData : excludedData
     if (!data) return null
-    return _.uniq(data.map(d => d[config.xAxis.dataKey]))
+    return uniq(data.map(d => d[config.xAxis.dataKey]))
   }, [config.visualizationType, config.xAxis?.dataKey, filteredData, excludedData])
 
   const prepareConfig = (loadedConfig: ChartConfig) => {
@@ -295,18 +305,18 @@ const CdcChart: React.FC<CdcChartProps> = ({
     // Ensure Horizon Chart has enough palette colors for all layers
     if (newConfig.visualizationType === 'Horizon Chart') {
       const numLayers = newConfig.horizon?.numLayers ?? 4
-      const currentCount = _.get(newConfig, 'general.paletteColorCount', 4)
-      _.set(newConfig, 'general.paletteColorCount', Math.max(currentCount, numLayers))
+      const currentCount = get(newConfig, 'general.paletteColorCount', 4)
+      set(newConfig, 'general.paletteColorCount', Math.max(currentCount, numLayers))
     }
 
-    _.defaultsDeep(newConfig, {
+    defaultsDeep(newConfig, {
       table: { showVertical: false }
     })
 
-    _.set(newConfig, 'table.show', _.get(newConfig, 'table.show', !isDashboard))
+    set(newConfig, 'table.show', get(newConfig, 'table.show', !isDashboard))
 
-    _.forEach(newConfig.series, series => {
-      _.defaults(series, {
+    forEach(newConfig.series, series => {
+      lodashDefaults(series, {
         tooltip: true,
         axis: 'Left'
       })
@@ -325,15 +335,18 @@ const CdcChart: React.FC<CdcChartProps> = ({
       let processedYAxis = targetConfig.yAxis?.label
 
       if (targetConfig.enableMarkupVariables && targetConfig.markupVariables?.length) {
+        const axisMarkupOptions = {
+          isEditor,
+          filters: targetConfig.filters || [],
+          locale: targetConfig.locale,
+          dataMetadata: targetConfig.dataMetadata
+        }
         if (targetConfig.xAxis?.label) {
           processedXAxis = processMarkupVariables(
             targetConfig.xAxis.label,
             dataSource || [],
             targetConfig.markupVariables,
-            {
-              isEditor,
-              filters: targetConfig.filters || []
-            }
+            axisMarkupOptions
           ).processedContent
         }
         if (targetConfig.yAxis?.label) {
@@ -341,10 +354,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
             targetConfig.yAxis.label,
             dataSource || [],
             targetConfig.markupVariables,
-            {
-              isEditor,
-              filters: targetConfig.filters || []
-            }
+            axisMarkupOptions
           ).processedContent
         }
       }
@@ -376,12 +386,17 @@ const CdcChart: React.FC<CdcChartProps> = ({
     const { processedXAxis, processedYAxis, runtimeXAxisLabel, runtimeYAxisLabel, isHorizontalVariant } =
       getProcessedAxisLabels(newConfig, data || [])
 
-    // Deeper copy
-    Object.keys(defaults).forEach(key => {
-      if (newConfig[key] && 'object' === typeof newConfig[key] && !Array.isArray(newConfig[key])) {
-        newConfig[key] = { ...defaults[key], ...newConfig[key] }
+    // Backfill missing properties from defaults, respecting legacy values
+    backfillDefaults(newConfig, defaults, LEGACY_CHART_DEFAULTS)
+
+    // Auto-populate table.defaultSort for date-axis charts if not already set by user
+    const hasDateAxisType = ['date-time', 'date'].includes(newConfig.xAxis?.type)
+    if (hasDateAxisType && newConfig.xAxis?.dataKey && !newConfig.table?.defaultSort?.column) {
+      newConfig.table = {
+        ...newConfig.table,
+        defaultSort: { column: newConfig.xAxis.dataKey, sortDirection: 'desc' }
       }
-    })
+    }
 
     const newExcludedData: any[] = getExcludedData(newConfig, dataOverride || stateData)
     dispatch({ type: 'SET_EXCLUDED_DATA', payload: newExcludedData })
@@ -408,7 +423,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     const shouldPreserveError = existingErrorMessage && !isPieChartValidationError
 
     newConfig.runtime = {} as Runtime
-    newConfig.runtime.series = _.cloneDeep(newConfig.series)
+    newConfig.runtime.series = cloneDeep(newConfig.series)
     newConfig.runtime.seriesLabels = {}
     newConfig.runtime.seriesLabelsAll = []
     newConfig.runtime.originalXAxis = newConfig.xAxis
@@ -416,22 +431,22 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (newConfig.visualizationType === 'Pie') {
       // Use the same data that will be passed to PieChart (after exclusions and filters)
       const pieData = currentData.length > 0 ? currentData : newExcludedData
-      newConfig.runtime.seriesKeys = _.uniq(pieData.map(d => d[newConfig.xAxis.dataKey]))
+      newConfig.runtime.seriesKeys = uniq(pieData.map(d => d[newConfig.xAxis.dataKey]))
       newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys
       newConfig.runtime.isPieChart = true // Flag to know when to use derived keys
     } else if (newConfig.visualizationType === 'Radar') {
       // Radar chart: seriesKeys are the entity names from xAxis.dataKey
       const radarData = currentData.length > 0 ? currentData : newExcludedData
-      newConfig.runtime.seriesKeys = _.uniq(radarData.map(d => d[newConfig.xAxis.dataKey]))
+      newConfig.runtime.seriesKeys = uniq(radarData.map(d => d[newConfig.xAxis.dataKey]))
       newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys
     } else {
       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)
+          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]))
+          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
@@ -515,8 +530,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
     if (isHorizontalVariant) {
       // For horizontal charts, axes are swapped, so processedYAxis goes to runtime.xAxis and vice versa
-      const horizontalXAxisSource = _.cloneDeep((newConfig.yAxis as any)?.yAxis || newConfig.yAxis)
-      const horizontalYAxisSource = _.cloneDeep((newConfig.xAxis as any)?.xAxis || newConfig.xAxis)
+      const horizontalXAxisSource = cloneDeep((newConfig.yAxis as any)?.yAxis || newConfig.yAxis)
+      const horizontalYAxisSource = cloneDeep((newConfig.xAxis as any)?.xAxis || newConfig.xAxis)
       newConfig.runtime.xAxis = {
         ...horizontalXAxisSource,
         label: runtimeXAxisLabel ?? horizontalXAxisSource?.label
@@ -525,7 +540,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
         ...horizontalYAxisSource,
         label: runtimeYAxisLabel ?? horizontalYAxisSource?.label
       }
-      newConfig.runtime.yAxis.labelOffset *= -1
 
       newConfig.runtime.horizontal = false
       newConfig.orientation = 'horizontal'
@@ -659,7 +673,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
       if (newConfig.dataUrl && !urlFilters) {
         // handle urls with spaces in the name.
         if (newConfig.dataUrl) newConfig.dataUrl = `${newConfig.dataUrl}`
-        let newData = await fetchRemoteData(newConfig.dataUrl)
+        let { data: newData, dataMetadata } = await fetchRemoteData(newConfig.dataUrl)
+        newConfig.dataMetadata = dataMetadata
 
         if (newConfig.vegaConfig) {
           newData = extractCoveData(updateVegaData(newConfig.vegaConfig, newData))
@@ -720,7 +735,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
    * When cove has a config and container ref publish the cove_loaded event.
    */
   useEffect(() => {
-    if (container && !isLoading && !_.isEmpty(config) && !coveLoadedEventRan) {
+    if (container && !isLoading && !isEmpty(config) && !coveLoadedEventRan) {
       publish('cove_loaded', { config: config })
       dispatch({ type: 'SET_LOADED_EVENT', payload: true })
     }
@@ -775,7 +790,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }, [externalFilters]) // eslint-disable-line
 
   // Declaratively update runtime series keys for pie charts when derived value changes
-  if (config.runtime?.isPieChart && pieSeriesKeys && !_.isEqual(pieSeriesKeys, config.runtime?.seriesKeys)) {
+  if (config.runtime?.isPieChart && pieSeriesKeys && !isEqual(pieSeriesKeys, config.runtime?.seriesKeys)) {
     const newConfig = {
       ...config,
       runtime: {
@@ -815,7 +830,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
   useEffect(() => {
     if (
       !config?.runtime ||
-      _.isEmpty(config.runtime) ||
+      isEmpty(config.runtime) ||
       (!config.runtime.xAxis && !config.runtime.yAxis) ||
       !config.markupVariables?.length
     ) {
@@ -825,7 +840,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     const dataSource = (stateData && stateData.length ? stateData : config.data) || []
     const { runtimeXAxisLabel, runtimeYAxisLabel, isHorizontalVariant } = getProcessedAxisLabels(config, dataSource)
 
-    const runtimeClone = _.cloneDeep(config.runtime)
+    const runtimeClone = cloneDeep(config.runtime)
 
     if (!runtimeClone?.xAxis || !runtimeClone?.yAxis) {
       return
@@ -864,9 +879,9 @@ const CdcChart: React.FC<CdcChartProps> = ({
       return handleShowAll()
     }
 
-    const newHighlight = _.findKey(config.runtime.seriesLabels, v => v === label.datum) || label.datum
+    const newHighlight = findKey(config.runtime.seriesLabels, v => v === label.datum) || label.datum
 
-    const newSeriesHighlight = _.xor(seriesHighlight, [newHighlight])
+    const newSeriesHighlight = xor(seriesHighlight, [newHighlight])
     dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: newSeriesHighlight })
   }
   // Called on reset button click, unhighlights all data series
@@ -909,11 +924,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
   const formatDate = (date, i, ticks) => {
     const displayFormat =
       config.runtime[section].dateDisplayFormat || config.runtime[section].dateParseFormat || '%Y-%m-%d'
-    let formattedDate = coreFormatDate(displayFormat, date)
+    let formattedDate = coreFormatDate(displayFormat, date, config.locale)
     // Show years only once
     if (config.xAxis.showYearsOnce && displayFormat?.includes('%Y') && ticks) {
       const prevDate = ticks[i - 1] ? ticks[i - 1].value : null
-      const prevFormattedDate = coreFormatDate(displayFormat, prevDate)
+      const prevFormattedDate = coreFormatDate(displayFormat, prevDate, config.locale)
       const year = formattedDate.match(/\d{4}/)
       const prevYear = prevFormattedDate.match(/\d{4}/)
       if (year && prevYear && year[0] === prevYear[0]) {
@@ -924,7 +939,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }
 
   const formatTooltipsDate = date => {
-    return coreFormatDate(config.tooltips.dateDisplayFormat, date)
+    return coreFormatDate(config.tooltips.dateDisplayFormat, date, config.locale)
   }
 
   // Format numeric data based on settings in config OR from passed in settings for Additional Columns
@@ -1066,16 +1081,16 @@ const CdcChart: React.FC<CdcChartProps> = ({
     ) {
       num = num // eslint-disable-line
     } else {
-      num = num.toLocaleString('en-US', stringFormattingOptions)
+      num = num.toLocaleString(config.locale, stringFormattingOptions)
     }
     let result = ''
 
     if (abbreviated && axis === 'left' && shouldAbbreviate) {
-      num = abbreviateNumber(parseFloat(num))
+      num = abbreviateNumber(parseFloat(num), config.locale)
     }
 
     if (bottomAbbreviated && axis === 'bottom' && shouldAbbreviate) {
-      num = abbreviateNumber(parseFloat(num))
+      num = abbreviateNumber(parseFloat(num), config.locale)
     }
 
     if (addColPrefix && axis === 'left') {
@@ -1143,8 +1158,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (!Array.isArray(data)) return []
     if (config.visualizationType === 'Forecasting') return data
     //  specify keys that needs  to be cleaned to render chart and skip rest
-    const CIkeys: string[] = Object.values(_.get(config, 'confidenceKeys', {})) as string[]
-    const seriesKeys: string[] = _.get(config, 'series', []).map((s: any) => s.dataKey)
+    const CIkeys: string[] = Object.values(get(config, 'confidenceKeys', {})) as string[]
+    const seriesKeys: string[] = get(config, 'series', []).map((s: any) => s.dataKey)
     const keysToClean: string[] = [...(seriesKeys ?? []), ...(CIkeys ?? [])]
 
     // key that does not need to be cleaned
@@ -1166,7 +1181,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
       .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))
+    return data.map(d => pick(d, usedColumns))
   }
 
   const pivotDynamicSeries = (config: ChartConfig): TableConfig => {
@@ -1184,18 +1199,51 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
   // Filter annotations to only those visible in current data view
   const visibleAnnotations = getVisibleAnnotations(config.annotations, transformedData, config.xAxis?.dataKey)
+  const isTp5Treatment = ENABLE_CHART_MAP_TP5_TREATMENT && config.visual?.tp5Treatment
+  const visualSettingClasses = new Set([
+    'component--has-border-color-theme',
+    'component--has-accent',
+    'component--has-background',
+    'component--hide-background-color'
+  ])
+  const tp5Classes = new Set(['component--tp5-treatment', 'component--tp5-treatment-background'])
+  const bodyClasses = contentClasses.filter(className => {
+    if (!ENABLE_CHART_VISUAL_SETTINGS && visualSettingClasses.has(className)) return false
+    if (!ENABLE_CHART_MAP_TP5_TREATMENT && tp5Classes.has(className)) return false
+    return true
+  })
+  if (config.visualizationType === 'Spark Line' && config.visual?.background) {
+    bodyClasses.push('component--has-background')
+  }
+  if (config.visualizationType === 'Spark Line' && config.visual?.hideBackgroundColor) {
+    bodyClasses.push('component--hide-background-color')
+  }
+  if (isTp5Treatment && !bodyClasses.includes('no-borders')) bodyClasses.push('no-borders')
+  const chartTitle = (
+    <Title
+      showTitle={config.showTitle}
+      isDashboard={isDashboard}
+      title={title}
+      superTitle={processedSuperTitle}
+      titleStyle={isTp5Treatment ? 'small' : config.titleStyle}
+      classes={['chart-title', `${config.theme}`, 'cove-visualization__title', isTp5Treatment ? '' : 'mb-3']}
+      style={undefined}
+      config={config}
+    />
+  )
 
   // Prevent render if loading
   let body = <Loading />
 
   const makeClassName = string => {
-    if (!_.isString(string)) return undefined
+    if (!isString(string)) return undefined
 
-    return _.kebabCase(string)
+    return kebabCase(string)
   }
   const getChartWrapperClasses = () => {
     const isLegendOnBottom = legend?.position === 'bottom' || isLegendWrapViewport(currentViewport)
-    const classes = ['chart-container', 'p-relative']
+    const classes = ['chart-container', 'visualization-container', 'p-relative']
+    const visualSettingClasses = ['component--has-border-color-theme', 'component--has-accent']
     if (legend?.position) {
       if (isLegendWrapViewport(currentViewport) && legend?.position !== 'top') {
         classes.push('legend-bottom')
@@ -1204,16 +1252,23 @@ const CdcChart: React.FC<CdcChartProps> = ({
       }
     }
     if (legend?.hide) classes.push('legend-hidden')
+    if (contentClasses.includes('sparkline')) classes.push('sparkline')
     if (lineDatapointClass) classes.push(lineDatapointClass)
     if (!config.barHasBorder) classes.push('chart-bar--no-border')
     if (config.xAxis.brushActive && dashboardConfig?.type === 'dashboard' && (!isLegendOnBottom || legend.hide))
       classes.push('dashboard-brush')
-    classes.push(...contentClasses)
+
+    if (!ENABLE_CHART_VISUAL_SETTINGS) {
+      const filtered = classes.filter(className => !visualSettingClasses.includes(className))
+      if (!filtered.includes('no-borders')) filtered.push('no-borders')
+      return filtered
+    }
+
     return classes
   }
 
   const getChartSubTextClasses = () => {
-    const classes = ['subtext mt-4']
+    const classes = ['subtext']
     const isLegendOnBottom = legend?.position === 'bottom' || isLegendWrapViewport(currentViewport)
 
     if (config.isResponsiveTicks) classes.push('subtext--responsive-ticks ')
@@ -1228,211 +1283,34 @@ const CdcChart: React.FC<CdcChartProps> = ({
     )
     body = (
       <>
-        {isEditor && <EditorPanel datasets={datasets} />}
-        <Layout.Responsive isEditor={isEditor}>
-          {config.newViz && <Confirm updateConfig={updateConfig} config={config} />}
-          {!missingRequiredSections(config) && !config.newViz && (
-            <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={processedSuperTitle}
-                titleStyle={config.titleStyle}
-                classes={['chart-title', `${config.theme}`, 'cove-component__header', 'mb-3']}
-                style={undefined}
-                config={config}
-              />
-
-              {/* Error Message Display - Show at top before visualization wrapper */}
-              {/* {(() => {
-                const errorMessage = config.runtime?.editorErrorMessage
-                const hasError = errorMessage && typeof errorMessage === 'string' && errorMessage.trim() !== ''
-                const shouldShow = undefined === config.newViz && isEditor && config.runtime && hasError
-                return shouldShow ? <Error errorMessage={errorMessage} /> : null
-              })()} */}
-
-              {/* Visualization Wrapper */}
-              <div className={getChartWrapperClasses().join(' ')}>
-                {/* Intro Text/Message */}
-                {processedIntroText && config.visualizationType !== 'Spark Line' && (
-                  <section className={`introText mb-4`}>{parse(processedIntroText)}</section>
-                )}
-
-                {/* Filters */}
-                {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && (
-                  <Filters
-                    config={config}
-                    setFilters={setFilters}
-                    excludedData={excludedData}
-                    dimensions={dimensions}
-                    interactionLabel={interactionLabel}
-                  />
-                )}
-                <SkipTo skipId={handleChartTabbing(config, legendId)} skipMessage='Skip Over Chart Container' />
-                {visibleAnnotations.length > 0 && (
-                  <SkipTo
-                    skipId={handleChartTabbing(config, legendId)}
-                    skipMessage={`Skip over annotations`}
-                    key={`skip-annotations`}
-                  />
-                )}
-                <LegendWrapper>
-                  <div
-                    className={
-                      legend.hide || isLegendWrapViewport(currentViewport)
-                        ? 'w-100'
-                        : legend.position === 'bottom' ||
-                          legend.position === 'top' ||
-                          visualizationType === 'Sankey' ||
-                          visualizationType === 'Spark Line'
-                        ? 'w-100'
-                        : 'w-75'
-                    }
-                  >
-                    {/* Check if there is data to display */}
-                    {(!filteredData || filteredData.length === 0) && (
-                      <div className='no-data-message' style={{ padding: '2rem', textAlign: 'center', color: '#666' }}>
-                        {config.chartMessage?.noData || 'No Data Available'}
-                      </div>
-                    )}
-
-                    {/* All charts with LinearChart */}
-                    {filteredData &&
-                      filteredData.length > 0 &&
-                      !['Spark Line', 'Line', 'Sankey', 'Pie', 'Radar'].includes(config.visualizationType) && (
-                        <div ref={parentRef} style={{ width: `100%` }}>
-                          <ParentSize>
-                            {parent => (
-                              <LinearChart ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
-                            )}
-                          </ParentSize>
-                        </div>
-                      )}
-
-                    {filteredData && filteredData.length > 0 && config.visualizationType === 'Pie' && (
-                      <ParentSize className='justify-content-center d-flex' style={{ width: `100%` }}>
-                        {parent => (
-                          <PieChart
-                            ref={svgRef}
-                            parentWidth={parent.width}
-                            parentHeight={parent.height}
-                            interactionLabel={interactionLabel}
-                          />
-                        )}
-                      </ParentSize>
-                    )}
-                    {/* Radar Chart */}
-                    {filteredData && filteredData.length > 0 && config.visualizationType === 'Radar' && (
-                      <ParentSize className='justify-content-center d-flex' style={{ width: `100%` }}>
-                        {parent => (
-                          <RadarChart
-                            ref={svgRef}
-                            parentWidth={parent.width}
-                            parentHeight={parent.height}
-                            interactionLabel={interactionLabel}
-                          />
-                        )}
-                      </ParentSize>
-                    )}
-                    {/* Line Chart */}
-                    {filteredData &&
-                      filteredData.length > 0 &&
-                      config.visualizationType === 'Line' &&
-                      (convertLineToBarGraph ? (
-                        <div ref={parentRef} style={{ width: `100%` }}>
-                          <ParentSize>
-                            {parent => (
-                              <LinearChart ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
-                            )}
-                          </ParentSize>
-                        </div>
-                      ) : (
-                        <div ref={parentRef} style={{ width: '100%' }}>
-                          <ParentSize>
-                            {parent => {
-                              const labelMargin = 120
-                              const widthReduction =
-                                config.showLineSeriesLabels &&
-                                (config.legend.position !== 'right' || config.legend.hide)
-                                  ? labelMargin
-                                  : 0
-                              return (
-                                <LinearChart
-                                  ref={svgRef}
-                                  parentWidth={parent.width - widthReduction}
-                                  parentHeight={parent.height}
-                                />
-                              )
-                            }}
-                          </ParentSize>
-                        </div>
-                      ))}
-                    {/* Sparkline */}
-                    {config.visualizationType === 'Spark Line' && (
-                      <>
-                        <Filters
-                          config={config}
-                          setFilters={setFilters}
-                          excludedData={excludedData}
-                          dimensions={dimensions}
-                          interactionLabel={interactionLabel}
-                        />
-                        {processedIntroText && (
-                          <section className='introText mb-4' style={{ padding: '0px 0 35px' }}>
-                            {parse(processedIntroText)}
-                          </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' &&
-                    !(config.visualizationType === 'Warming Stripes' && config.legend?.style === 'gradient') &&
-                    !(config.visualizationType === 'Warming Stripes' && config.smallMultiples?.mode) && (
-                      <Legend
-                        ref={legendRef}
-                        skipId={handleChartTabbing(config, legendId)}
-                        interactionLabel={interactionLabel}
-                      />
-                    )}
-                  {config.visualizationType === 'Warming Stripes' &&
-                    config.legend?.style === 'gradient' &&
-                    !config.smallMultiples?.mode && <WarmingStripesGradientLegend />}
-                </LegendWrapper>
-                {/* Link */}
+        {config.newViz && <Confirm updateConfig={updateConfig} config={config} />}
+        {!missingRequiredSections(config) && !config.newViz && (
+          <VisualizationContent
+            innerClassName={`type-${makeClassName(config.visualizationType)}`}
+            innerProps={{ 'aria-label': handleChartAriaLabels(config), tabIndex: 0 }}
+            bodyClassName={bodyClasses.join(' ')}
+            bodyWrapClassName={isTp5Treatment ? 'cdc-callout d-flex flex-column tp5-chart-callout' : ''}
+            filters={
+              config.filters?.length > 0 && !externalFilters && config.visualizationType !== 'Spark Line' ? (
+                <Filters
+                  config={config}
+                  setFilters={setFilters}
+                  excludedData={excludedData}
+                  dimensions={dimensions}
+                  interactionLabel={interactionLabel}
+                />
+              ) : undefined
+            }
+            bodySubtext={
+              processedDescription && config.visualizationType !== 'Spark Line' ? (
+                <div className={`cove-prose ${getChartSubTextClasses().join(' ')}`}>{parse(processedDescription)}</div>
+              ) : null
+            }
+            bodyFooter={
+              <>
                 {isDashboard && config.table && config.table.show && config.table.showDataTableLink
                   ? tableLink
                   : link && link}
-                {/* Description */}
-
-                {processedDescription && config.visualizationType !== 'Spark Line' && (
-                  <div className={getChartSubTextClasses().join(' ')}>{parse(processedDescription)}</div>
-                )}
-
-                {/* Data Table */}
                 {(config.xAxis.dataKey &&
                   config.table.show &&
                   config.visualizationType !== 'Spark Line' &&
@@ -1461,15 +1339,12 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
                       return (
                         <DataTable
-                          /* changing the "key" will force the table to re-render
-                              when the default sort changes while editing */
-                          key={dataTableDefaultSortBy}
+                          key={config.table?.defaultSort?.column || ''}
                           config={dataTableConfig}
                           rawData={dataTableRawData}
                           runtimeData={dataTableRuntimeData}
                           expandDataTable={config.table.expanded}
                           columns={dataTableColumns}
-                          defaultSortBy={dataTableDefaultSortBy}
                           displayGeoName={name => name}
                           applyLegendToRow={applyLegendToRow}
                           tableTitle={config.table.label}
@@ -1482,6 +1357,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                           showDownloadImgButton={config.table.showDownloadImgButton}
                           showDownloadPdfButton={config.table.showDownloadPdfButton}
                           includeContextInDownload={config.table?.includeContextInDownload}
+                          hasSubtextAbove={Boolean(processedDescription && config.visualizationType !== 'Spark Line')}
                           interactionLabel={interactionLabel}
                         />
                       )
@@ -1513,21 +1389,181 @@ const CdcChart: React.FC<CdcChartProps> = ({
                       </div>
                     )}
                 {visibleAnnotations.length > 0 && <Annotation.Dropdown />}
-                {/* show pdf or image button */}
                 {processedLegacyFootnotes && (
-                  <section className='footnotes pt-2 mt-4'>{parse(processedLegacyFootnotes)}</section>
+                  <section className='footnotes cove-prose pt-2 mt-4'>{parse(processedLegacyFootnotes)}</section>
                 )}
-              </div>
+              </>
+            }
+            header={isTp5Treatment ? null : chartTitle}
+            messageIsIntroText={config.visualizationType !== 'Spark Line' && !!processedIntroText}
+            message={
+              config.visualizationType !== 'Spark Line' && processedIntroText ? (
+                <div className='cove-prose'>{parse(processedIntroText)}</div>
+              ) : null
+            }
+            footer={
               <FootnotesStandAlone
                 config={configObj.footnotes}
                 filters={config.filters?.filter(f => f.filterFootnotes)}
                 markupVariables={config.markupVariables}
                 enableMarkupVariables={config.enableMarkupVariables}
                 data={config.data}
+                dataMetadata={config.dataMetadata}
               />
+            }
+          >
+            {isTp5Treatment && <img src={CalloutFlag} alt='' className='cdc-callout__flag' aria-hidden='true' />}
+            {isTp5Treatment && chartTitle}
+            <div className={getChartWrapperClasses().join(' ')}>
+              <SkipTo skipId={handleChartTabbing(config, legendId)} skipMessage='Skip Over Chart Container' />
+              {visibleAnnotations.length > 0 && (
+                <SkipTo
+                  skipId={handleChartTabbing(config, legendId)}
+                  skipMessage={`Skip over annotations`}
+                  key={`skip-annotations`}
+                />
+              )}
+              <LegendWrapper>
+                <div
+                  className={
+                    legend.hide || isLegendWrapViewport(currentViewport)
+                      ? 'w-100'
+                      : legend.position === 'bottom' ||
+                        legend.position === 'top' ||
+                        visualizationType === 'Sankey' ||
+                        visualizationType === 'Spark Line'
+                      ? 'w-100'
+                      : 'w-75'
+                  }
+                >
+                  {/* Check if there is data to display */}
+                  {(!filteredData || filteredData.length === 0) && (
+                    <div className='no-data-message' style={{ padding: '2rem', textAlign: 'center', color: '#666' }}>
+                      {config.chartMessage?.noData || 'No Data Available'}
+                    </div>
+                  )}
+
+                  {/* All charts with LinearChart */}
+                  {filteredData &&
+                    filteredData.length > 0 &&
+                    !['Spark Line', 'Line', 'Sankey', 'Pie', 'Radar'].includes(config.visualizationType) && (
+                      <div ref={parentRef} style={{ width: `100%` }}>
+                        <ParentSize>
+                          {parent => (
+                            <LinearChart ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
+                          )}
+                        </ParentSize>
+                      </div>
+                    )}
+
+                  {filteredData && filteredData.length > 0 && config.visualizationType === 'Pie' && (
+                    <ParentSize className='justify-content-center d-flex' style={{ width: `100%` }}>
+                      {parent => (
+                        <PieChart
+                          ref={svgRef}
+                          parentWidth={parent.width}
+                          parentHeight={parent.height}
+                          interactionLabel={interactionLabel}
+                        />
+                      )}
+                    </ParentSize>
+                  )}
+                  {/* Radar Chart */}
+                  {filteredData && filteredData.length > 0 && config.visualizationType === 'Radar' && (
+                    <ParentSize className='justify-content-center d-flex' style={{ width: `100%` }}>
+                      {parent => (
+                        <RadarChart
+                          ref={svgRef}
+                          parentWidth={parent.width}
+                          parentHeight={parent.height}
+                          interactionLabel={interactionLabel}
+                        />
+                      )}
+                    </ParentSize>
+                  )}
+                  {/* Line Chart */}
+                  {filteredData &&
+                    filteredData.length > 0 &&
+                    config.visualizationType === 'Line' &&
+                    (convertLineToBarGraph ? (
+                      <div ref={parentRef} style={{ width: `100%` }}>
+                        <ParentSize>
+                          {parent => (
+                            <LinearChart ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
+                          )}
+                        </ParentSize>
+                      </div>
+                    ) : (
+                      <div ref={parentRef} style={{ width: '100%' }}>
+                        <ParentSize>
+                          {parent => {
+                            const labelMargin = 120
+                            const widthReduction =
+                              config.showLineSeriesLabels && (config.legend.position !== 'right' || config.legend.hide)
+                                ? labelMargin
+                                : 0
+                            return (
+                              <LinearChart
+                                ref={svgRef}
+                                parentWidth={parent.width - widthReduction}
+                                parentHeight={parent.height}
+                              />
+                            )
+                          }}
+                        </ParentSize>
+                      </div>
+                    ))}
+                  {/* Sparkline */}
+                  {config.visualizationType === 'Spark Line' && (
+                    <>
+                      <Filters
+                        config={config}
+                        setFilters={setFilters}
+                        excludedData={excludedData}
+                        dimensions={dimensions}
+                        interactionLabel={interactionLabel}
+                      />
+                      {processedIntroText && (
+                        <section className='introText cove-prose' style={{ padding: '0px 0 35px' }}>
+                          {parse(processedIntroText)}
+                        </section>
+                      )}
+                      <div style={{ height: `100px`, width: `100%`, ...sparkLineStyles }}>
+                        <ParentSize>{parent => <SparkLine width={parent.width} height={parent.height} />}</ParentSize>
+                      </div>
+                      {processedDescription && (
+                        <div className='subtext cove-prose' style={{ padding: '35px 0 1.5rem' }}>
+                          {parse(processedDescription)}
+                        </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' &&
+                  !(config.visualizationType === 'Warming Stripes' && config.legend?.style === 'gradient') &&
+                  !(config.visualizationType === 'Warming Stripes' && config.smallMultiples?.mode) && (
+                    <Legend
+                      ref={legendRef}
+                      skipId={handleChartTabbing(config, legendId)}
+                      interactionLabel={interactionLabel}
+                    />
+                  )}
+                {config.visualizationType === 'Warming Stripes' &&
+                  config.legend?.style === 'gradient' &&
+                  !config.smallMultiples?.mode && <WarmingStripesGradientLegend />}
+              </LegendWrapper>
             </div>
-          )}
-        </Layout.Responsive>
+          </VisualizationContent>
+        )}
       </>
     )
   }
@@ -1595,16 +1631,16 @@ const CdcChart: React.FC<CdcChartProps> = ({
   return (
     <ConfigContext.Provider value={contextValues}>
       <ChartDispatchContext.Provider value={dispatch}>
-        <Layout.VisualizationWrapper
+        <VisualizationContainer
           config={config}
           isEditor={isEditor}
           currentViewport={currentViewport}
           ref={outerContainerRef}
           imageId={imageId}
-          showEditorPanel={config?.showEditorPanel}
+          editorPanel={!isLoading ? <EditorPanel datasets={datasets} /> : null}
         >
           {body}
-        </Layout.VisualizationWrapper>
+        </VisualizationContainer>
       </ChartDispatchContext.Provider>
     </ConfigContext.Provider>
   )