@cdc/chart 4.25.8 → 4.25.11

package/src/CdcChartComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef, useId, useContext, useReducer } from 'react'
+import React, { useState, useEffect, useCallback, useRef, useId, useContext, useReducer, useMemo } from 'react'
 
 // IE11
 import ResizeObserver from 'resize-observer-polyfill'
@@ -24,7 +24,6 @@ import { Label } from './types/Label'
 import ParentSize from '@visx/responsive/lib/components/ParentSize'
 import { timeParse, timeFormat } from 'd3-time-format'
 import parse from 'html-react-parser'
-import 'react-tooltip/dist/react-tooltip.css'
 import _ from 'lodash'
 // Primary Components
 import ConfigContext, { ChartDispatchContext } from './ConfigContext'
@@ -33,7 +32,8 @@ import SankeyChart from './components/Sankey'
 import LinearChart from './components/LinearChart'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 
-import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
+import { twoColorPalette } from '@cdc/core/data/colorPalettes'
+import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
 
 import SparkLine from './components/Sparkline'
 import Legend from './components/Legend'
@@ -46,7 +46,8 @@ 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 { generateColorsArray } from '@cdc/core/helpers/generateColorsArray'
+import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
 import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
 import MediaControls from '@cdc/core/components/MediaControls'
@@ -63,7 +64,7 @@ import numberFromString from '@cdc/core/helpers/numberFromString'
 import getViewport from '@cdc/core/helpers/getViewport'
 import isNumber from '@cdc/core/helpers/isNumber'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
-import EditorContext from '../../editor/src/ConfigContext'
+import EditorContext from '@cdc/core/contexts/EditorContext'
 import { EDITOR_WIDTH } from '@cdc/core/helpers/constants'
 import { extractCoveData, updateVegaData } from '@cdc/core/helpers/vegaConfig'
 // Local helpers
@@ -74,6 +75,7 @@ import { getExcludedData } from './helpers/getExcludedData'
 import { getColorScale } from './helpers/getColorScale'
 import { getTransformedData } from './helpers/getTransformedData'
 import { getPiePercent } from './helpers/getPiePercent'
+import { prepareSmallMultiplesDataTable } from './helpers/smallMultiplesHelpers'
 
 // styles
 import './scss/main.scss'
@@ -83,6 +85,8 @@ import { getNewRuntime } from './helpers/getNewRuntime'
 import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
 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'
 
 interface CdcChartProps {
   config?: ChartConfig
@@ -152,6 +156,73 @@ const CdcChart: React.FC<CdcChartProps> = ({
   // Destructure items from config for more readable JSX
   let { legend, title } = config
 
+  // Process markup variables for text fields (memoized to prevent re-processing on every render)
+  // Note: XSS Safety - The processed content is parsed using html-react-parser which sanitizes
+  // HTML input by default. The markup processor returns plain text with user data substituted.
+  const processedTextFields = useMemo(() => {
+    if (!config.enableMarkupVariables || !config.markupVariables?.length) {
+      return {
+        title,
+        superTitle: config.superTitle,
+        introText: config.introText,
+        legacyFootnotes: config.legacyFootnotes,
+        description: config.description
+      }
+    }
+
+    return {
+      title: title
+        ? processMarkupVariables(title, config.data || [], config.markupVariables, {
+            isEditor,
+            filters: config.filters || []
+          }).processedContent
+        : title,
+      superTitle: config.superTitle
+        ? processMarkupVariables(config.superTitle, config.data || [], config.markupVariables, {
+            isEditor,
+            filters: config.filters || []
+          }).processedContent
+        : config.superTitle,
+      introText: config.introText
+        ? processMarkupVariables(config.introText, config.data || [], config.markupVariables, {
+            isEditor,
+            filters: config.filters || []
+          }).processedContent
+        : config.introText,
+      legacyFootnotes: config.legacyFootnotes
+        ? processMarkupVariables(config.legacyFootnotes, config.data || [], config.markupVariables, {
+            isEditor,
+            filters: config.filters || []
+          }).processedContent
+        : config.legacyFootnotes,
+      description: config.description
+        ? processMarkupVariables(config.description, config.data || [], config.markupVariables, {
+            isEditor,
+            filters: config.filters || []
+          }).processedContent
+        : config.description
+    }
+  }, [
+    config.enableMarkupVariables,
+    config.markupVariables,
+    config.data,
+    config.filters,
+    title,
+    config.superTitle,
+    config.introText,
+    config.legacyFootnotes,
+    config.description,
+    isEditor
+  ])
+
+  // Destructure processed values
+  title = processedTextFields.title
+  const processedSuperTitle = processedTextFields.superTitle
+  const processedIntroText = processedTextFields.introText
+  const processedLegacyFootnotes = processedTextFields.legacyFootnotes
+  const processedDescription = processedTextFields.description
+  // Note: Axis labels are processed within updateConfig to ensure they use the correct data
+
   // set defaults on titles if blank AND only in editor
   if (isEditor) {
     if (!title || title === '') title = 'Chart Title'
@@ -169,7 +240,22 @@ const CdcChart: React.FC<CdcChartProps> = ({
   const convertLineToBarGraph = isConvertLineToBarGraph(config, filteredData)
 
   const prepareConfig = (loadedConfig: ChartConfig) => {
-    let newConfig = _.defaultsDeep(loadedConfig, defaults)
+    // Create defaults without version to avoid overriding legacy configs
+    const defaultsWithoutPalette = { ...defaults }
+
+    // Only remove palette defaults for legacy (v1) configs
+    // New configs and v2 configs should get the v2 palette defaults
+    if (loadedConfig?.general?.palette || (!loadedConfig?.general && !loadedConfig?.color)) {
+      // Keep palette defaults for:
+      // 1. Configs that already have general.palette (v2 configs)
+      // 2. New configs (no general section and no legacy color property)
+    } else {
+      // Remove palette defaults for legacy configs that have color but no general.palette
+      delete defaultsWithoutPalette.general?.palette
+    }
+
+    let newConfig = { ...defaultsWithoutPalette, ...loadedConfig }
+
     _.defaultsDeep(newConfig, {
       table: { showVertical: false }
     })
@@ -190,12 +276,63 @@ const CdcChart: React.FC<CdcChartProps> = ({
     return newConfig
   }
 
+  const getProcessedAxisLabels = useCallback(
+    (targetConfig: AllChartsConfig, dataSource: any[] = []) => {
+      let processedXAxis = targetConfig.xAxis?.label
+      let processedYAxis = targetConfig.yAxis?.label
+
+      if (targetConfig.enableMarkupVariables && targetConfig.markupVariables?.length) {
+        if (targetConfig.xAxis?.label) {
+          processedXAxis = processMarkupVariables(
+            targetConfig.xAxis.label,
+            dataSource || [],
+            targetConfig.markupVariables,
+            {
+              isEditor,
+              filters: targetConfig.filters || []
+            }
+          ).processedContent
+        }
+        if (targetConfig.yAxis?.label) {
+          processedYAxis = processMarkupVariables(
+            targetConfig.yAxis.label,
+            dataSource || [],
+            targetConfig.markupVariables,
+            {
+              isEditor,
+              filters: targetConfig.filters || []
+            }
+          ).processedContent
+        }
+      }
+
+      const isHorizontalVariant =
+        ((targetConfig.visualizationType === 'Bar' || targetConfig.visualizationType === 'Box Plot') &&
+          targetConfig.orientation === 'horizontal') ||
+        ['Deviation Bar', 'Paired Bar', 'Forest Plot'].includes(targetConfig.visualizationType)
+
+      const runtimeXAxisLabel = isHorizontalVariant
+        ? processedYAxis ?? (targetConfig.yAxis as any)?.yAxis?.label ?? targetConfig.yAxis?.label
+        : processedXAxis ?? targetConfig.xAxis?.label
+
+      const runtimeYAxisLabel = isHorizontalVariant
+        ? processedXAxis ?? (targetConfig.xAxis as any)?.xAxis?.label ?? targetConfig.xAxis?.label
+        : processedYAxis ?? targetConfig.yAxis?.label
+
+      return { processedXAxis, processedYAxis, runtimeXAxisLabel, runtimeYAxisLabel, isHorizontalVariant }
+    },
+    [isEditor]
+  )
+
   const updateConfig = (_config: AllChartsConfig, dataOverride?: any[]) => {
-    const newConfig = _.cloneDeep(_config)
+    const newConfig = cloneConfig(_config)
     let data = dataOverride || stateData
 
     data = handleRankByValue(data, newConfig)
 
+    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])) {
@@ -219,6 +356,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
 
     //Enforce default values that need to be calculated at runtime
+    // Preserve error messages that were set outside of updateConfig (e.g., from pattern settings)
+    const existingErrorMessage = _config.runtime?.editorErrorMessage || ''
+    const isPieChartValidationError =
+      existingErrorMessage === 'Data column section must be set for pie charts.' ||
+      existingErrorMessage === 'Segment labels section must be set for pie charts.' ||
+      existingErrorMessage === 'Data column and Segment labels sections must be set for pie charts.'
+    const shouldPreserveError = existingErrorMessage && !isPieChartValidationError
+
     newConfig.runtime = {} as Runtime
     newConfig.runtime.series = _.cloneDeep(newConfig.series)
     newConfig.runtime.seriesLabels = {}
@@ -226,7 +371,9 @@ const CdcChart: React.FC<CdcChartProps> = ({
     newConfig.runtime.originalXAxis = newConfig.xAxis
 
     if (newConfig.visualizationType === 'Pie') {
-      newConfig.runtime.seriesKeys = (dataOverride || data).map(d => d[newConfig.xAxis.dataKey])
+      // 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.seriesLabelsAll = newConfig.runtime.seriesKeys
     } else {
       const finalData = dataOverride || newConfig.formattedData || newConfig.data
@@ -278,6 +425,18 @@ const CdcChart: React.FC<CdcChartProps> = ({
           newConfig.runtime.forecastingSeriesKeys.push(series)
         }
       })
+
+      // Default to date scaling type for Forecasting charts
+      if (newConfig.xAxis.type === 'categorical') {
+        newConfig.xAxis.type = 'date'
+        // Initialize date parsing formats if they don't exist
+        if (!newConfig.xAxis.dateParseFormat) {
+          newConfig.xAxis.dateParseFormat = '%Y-%m-%d'
+        }
+        if (!newConfig.xAxis.dateDisplayFormat) {
+          newConfig.xAxis.dateDisplayFormat = '%Y-%m-%d'
+        }
+      }
     }
 
     if (newConfig.visualizationType === 'Area Chart' && newConfig.series) {
@@ -289,13 +448,18 @@ const CdcChart: React.FC<CdcChartProps> = ({
       newConfig.visualizationSubType = 'stacked'
     }
 
-    if (
-      ((newConfig.visualizationType === 'Bar' || newConfig.visualizationType === 'Box Plot') &&
-        newConfig.orientation === 'horizontal') ||
-      ['Deviation Bar', 'Paired Bar', 'Forest Plot'].includes(newConfig.visualizationType)
-    ) {
-      newConfig.runtime.xAxis = _.cloneDeep(newConfig.yAxis.yAxis || newConfig.yAxis)
-      newConfig.runtime.yAxis = _.cloneDeep(newConfig.xAxis.xAxis || newConfig.xAxis)
+    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)
+      newConfig.runtime.xAxis = {
+        ...horizontalXAxisSource,
+        label: runtimeXAxisLabel ?? horizontalXAxisSource?.label
+      }
+      newConfig.runtime.yAxis = {
+        ...horizontalYAxisSource,
+        label: runtimeYAxisLabel ?? horizontalYAxisSource?.label
+      }
       newConfig.runtime.yAxis.labelOffset *= -1
 
       newConfig.runtime.horizontal = false
@@ -306,24 +470,40 @@ const CdcChart: React.FC<CdcChartProps> = ({
       ['Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType) &&
       !convertLineToBarGraph
     ) {
-      newConfig.runtime.xAxis = newConfig.xAxis
-      newConfig.runtime.yAxis = newConfig.yAxis
+      newConfig.runtime.xAxis = { ...newConfig.xAxis, label: runtimeXAxisLabel ?? newConfig.xAxis.label }
+      newConfig.runtime.yAxis = { ...newConfig.yAxis, label: runtimeYAxisLabel ?? newConfig.yAxis.label }
       newConfig.runtime.horizontal = false
       newConfig.orientation = 'vertical'
     } else {
-      newConfig.runtime.xAxis = newConfig.xAxis
-      newConfig.runtime.yAxis = newConfig.yAxis
+      newConfig.runtime.xAxis = { ...newConfig.xAxis, label: runtimeXAxisLabel ?? newConfig.xAxis.label }
+      newConfig.runtime.yAxis = { ...newConfig.yAxis, label: runtimeYAxisLabel ?? newConfig.yAxis.label }
       newConfig.runtime.horizontal = false
     }
 
     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.'
-        : ''
 
-    // Sankey Description box error message
-    newConfig.runtime.editorErrorMessage = ''
+    // Set error messages: preserve external errors (from pattern settings, etc.) or set validation errors
+    if (shouldPreserveError) {
+      // Preserve error messages set by editor panels (e.g., pattern contrast errors)
+      newConfig.runtime.editorErrorMessage = existingErrorMessage
+    } else if (newConfig.visualizationType === 'Pie') {
+      // Check for Pie chart validation errors
+      const missingDataColumn = !newConfig.yAxis.dataKey || newConfig.yAxis.dataKey === ''
+      const missingSegmentLabels = !newConfig.xAxis.dataKey || newConfig.xAxis.dataKey === ''
+
+      if (missingDataColumn && missingSegmentLabels) {
+        newConfig.runtime.editorErrorMessage = 'Data column and Segment labels sections must be set for pie charts.'
+      } else if (missingDataColumn) {
+        newConfig.runtime.editorErrorMessage = 'Data column section must be set for pie charts.'
+      } else if (missingSegmentLabels) {
+        newConfig.runtime.editorErrorMessage = 'Segment labels section must be set for pie charts.'
+      } else {
+        newConfig.runtime.editorErrorMessage = ''
+      }
+    } else {
+      // No errors
+      newConfig.runtime.editorErrorMessage = ''
+    }
 
     if (newConfig.legend.seriesHighlight?.length) {
       dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: newConfig.legend?.seriesHighlight })
@@ -379,11 +559,13 @@ const CdcChart: React.FC<CdcChartProps> = ({
     for (let entry of entries) {
       let { width, height } = entry.contentRect
 
-      width = isEditor ? width - EDITOR_WIDTH : width
+      const editorIsOpen = isEditor && !!document.querySelector('.editor-panel:not(.hidden)')
+      width = editorIsOpen ? width - EDITOR_WIDTH : width
 
       const newViewport = getViewport(width)
 
       dispatch({ type: 'SET_VIEWPORT', payload: newViewport })
+      dispatch({ type: 'SET_VIZ_VIEWPORT', payload: newViewport })
 
       if (entry.target.dataset.lollipop === 'true') {
         width = width - 2.5
@@ -429,8 +611,16 @@ const CdcChart: React.FC<CdcChartProps> = ({
       } else if (newConfig.formattedData) {
         newConfig.data = newConfig.formattedData
       } else if (newConfig.dataDescription) {
-        newConfig.data = transform.autoStandardize(newConfig.data)
-        newConfig.data = transform.developerStandardize(newConfig.data, newConfig.dataDescription)
+        // For dashboard contexts, get data from datasets if config.data is undefined
+        let dataToProcess = newConfig.data
+        if (!dataToProcess && isDashboard && datasets && newConfig.dataKey) {
+          dataToProcess = datasets[newConfig.dataKey]?.data
+        }
+
+        if (dataToProcess) {
+          newConfig.data = transform.autoStandardize(dataToProcess)
+          newConfig.data = transform.developerStandardize(newConfig.data, newConfig.dataDescription)
+        }
       }
     } catch (err) {
       console.error('Error on prepareData function ', err)
@@ -468,7 +658,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (container && !isLoading && !_.isEmpty(config) && !coveLoadedEventRan) {
       publish('cove_loaded', { config: config })
       dispatch({ type: 'SET_LOADED_EVENT', payload: true })
-      publishAnalyticsEvent('chart_loaded', 'load', interactionLabel, 'chart')
     }
   }, [container, config, isLoading]) // eslint-disable-line
 
@@ -534,6 +723,49 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
   }, [config, stateData]) // eslint-disable-line
 
+  // Updates runtime axis labels when config or data changes when using markup variables
+  useEffect(() => {
+    if (
+      !config?.runtime ||
+      _.isEmpty(config.runtime) ||
+      (!config.runtime.xAxis && !config.runtime.yAxis) ||
+      !config.markupVariables?.length
+    ) {
+      return
+    }
+
+    const dataSource = (stateData && stateData.length ? stateData : config.data) || []
+    const { runtimeXAxisLabel, runtimeYAxisLabel, isHorizontalVariant } = getProcessedAxisLabels(config, dataSource)
+
+    const runtimeClone = _.cloneDeep(config.runtime)
+
+    if (!runtimeClone?.xAxis || !runtimeClone?.yAxis) {
+      return
+    }
+
+    let shouldUpdateLabels = false
+
+    if (typeof runtimeXAxisLabel !== 'undefined' && runtimeClone.xAxis.label !== runtimeXAxisLabel) {
+      runtimeClone.xAxis = { ...runtimeClone.xAxis, label: runtimeXAxisLabel }
+      shouldUpdateLabels = true
+    }
+
+    if (typeof runtimeYAxisLabel !== 'undefined' && runtimeClone.yAxis.label !== runtimeYAxisLabel) {
+      runtimeClone.yAxis = { ...runtimeClone.yAxis, label: runtimeYAxisLabel }
+      shouldUpdateLabels = true
+    }
+
+    if (shouldUpdateLabels) {
+      runtimeClone.uniqueId = Date.now()
+      const updatedConfig = { ...config, runtime: runtimeClone } as ChartConfig
+      dispatch({ type: 'SET_CONFIG', payload: updatedConfig })
+
+      if (isEditor && !isDashboard) {
+        editorContext.setTempConfig(updatedConfig)
+      }
+    }
+  }, [config, stateData, getProcessedAxisLabels, dispatch, editorContext, isEditor, isDashboard])
+
   // Called on legend click, highlights/unhighlights the data series with the given label
   const highlight = (label: Label): void => {
     if (
@@ -558,7 +790,17 @@ const CdcChart: React.FC<CdcChartProps> = ({
     } catch (e) {
       console.error('COVE:', e.message)
     }
-    publishAnalyticsEvent('chart_legend_reset', 'click', interactionLabel, 'chart')
+    publishAnalyticsEvent({
+      vizType: config?.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'chart_legend_reset',
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      ...(config.visualizationType === 'Bar' && {
+        specifics: `orientation: ${config.orientation === 'horizontal' ? 'horizontal' : 'vertical'}`
+      })
+    })
     dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [] })
   }
 
@@ -639,7 +881,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
         rightSuffix,
         bottomPrefix,
         bottomSuffix,
-        bottomAbbreviated
+        bottomAbbreviated,
+        preserveOriginalDecimals
       }
     } = config
 
@@ -658,32 +901,52 @@ const CdcChart: React.FC<CdcChartProps> = ({
       } else {
         roundToPlace = roundTo ? Number(roundTo) : 0
       }
-      stringFormattingOptions = {
-        useGrouping: addColRoundTo ? true : config.dataFormat.commas ? true : false,
-        minimumFractionDigits: roundToPlace,
-        maximumFractionDigits: roundToPlace
+
+      // If preserveOriginalDecimals is enabled, don't force decimal places
+      if (preserveOriginalDecimals) {
+        stringFormattingOptions = {
+          useGrouping: addColRoundTo ? true : config.dataFormat.commas ? true : false
+        }
+      } else {
+        stringFormattingOptions = {
+          useGrouping: addColRoundTo ? true : config.dataFormat.commas ? true : false,
+          minimumFractionDigits: roundToPlace,
+          maximumFractionDigits: roundToPlace
+        }
       }
     }
 
     if (axis === 'right') {
-      stringFormattingOptions = {
-        useGrouping: config.dataFormat.rightCommas ? true : false,
-        minimumFractionDigits: rightRoundTo ? Number(rightRoundTo) : 0,
-        maximumFractionDigits: rightRoundTo ? Number(rightRoundTo) : 0
+      if (preserveOriginalDecimals) {
+        stringFormattingOptions = {
+          useGrouping: config.dataFormat.rightCommas ? true : false
+        }
+      } else {
+        stringFormattingOptions = {
+          useGrouping: config.dataFormat.rightCommas ? true : false,
+          minimumFractionDigits: rightRoundTo ? Number(rightRoundTo) : 0,
+          maximumFractionDigits: rightRoundTo ? Number(rightRoundTo) : 0
+        }
       }
     }
 
     const resolveBottomTickRounding = () => {
-      if (config.forestPlot.type === 'Logarithmic' && !bottomRoundTo) return 2
+      if (config.forestPlot?.type === 'Logarithmic' && !bottomRoundTo) return 2
       if (Number(bottomRoundTo)) return Number(bottomRoundTo)
       return 0
     }
 
     if (axis === 'bottom') {
-      stringFormattingOptions = {
-        useGrouping: config.dataFormat.bottomCommas ? true : false,
-        minimumFractionDigits: resolveBottomTickRounding(),
-        maximumFractionDigits: resolveBottomTickRounding()
+      if (preserveOriginalDecimals) {
+        stringFormattingOptions = {
+          useGrouping: config.dataFormat.bottomCommas ? true : false
+        }
+      } else {
+        stringFormattingOptions = {
+          useGrouping: config.dataFormat.bottomCommas ? true : false,
+          minimumFractionDigits: resolveBottomTickRounding(),
+          maximumFractionDigits: resolveBottomTickRounding()
+        }
       }
     }
 
@@ -821,7 +1084,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }
 
   const pivotDynamicSeries = (config: ChartConfig): TableConfig => {
-    const tableConfig: TableConfig = _.cloneDeep(config)
+    const tableConfig: TableConfig = cloneConfig(config)
     const dynamicSeries = tableConfig.series.find(series => !!series.dynamicCategory)
     if (dynamicSeries) {
       const pivot: Pivot = { columnName: dynamicSeries.dynamicCategory, valueColumns: [dynamicSeries.dataKey] }
@@ -878,9 +1141,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
         {isEditor && <EditorPanel datasets={datasets} />}
         <Layout.Responsive isEditor={isEditor}>
           {config.newViz && <Confirm updateConfig={updateConfig} config={config} />}
-          {undefined === config.newViz && isEditor && config.runtime && config.runtime?.editorErrorMessage && (
-            <Error errorMessage={config.runtime.editorErrorMessage} />
-          )}
           {!missingRequiredSections(config) && !config.newViz && (
             <div
               className={`cdc-chart-inner-container cove-component__content type-${makeClassName(
@@ -893,16 +1153,25 @@ const CdcChart: React.FC<CdcChartProps> = ({
                 showTitle={config.showTitle}
                 isDashboard={isDashboard}
                 title={title}
-                superTitle={config.superTitle}
+                superTitle={processedSuperTitle}
                 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 */}
-                {config?.introText && config.visualizationType !== 'Spark Line' && (
-                  <section className={`introText mb-4`}>{parse(config.introText)}</section>
+                {processedIntroText && config.visualizationType !== 'Spark Line' && (
+                  <section className={`introText mb-4`}>{parse(processedIntroText)}</section>
                 )}
 
                 {/* Filters */}
@@ -936,24 +1205,42 @@ const CdcChart: React.FC<CdcChartProps> = ({
                         : 'w-75'
                     }
                   >
-                    {/* All charts with LinearChart */}
-                    {!['Spark Line', 'Line', 'Sankey', 'Pie', 'Sankey'].includes(config.visualizationType) && (
-                      <div ref={parentRef} style={{ width: `100%` }}>
-                        <ParentSize>
-                          {parent => (
-                            <LinearChart ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
-                          )}
-                        </ParentSize>
+                    {/* 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>
                     )}
 
-                    {config.visualizationType === 'Pie' && (
+                    {/* All charts with LinearChart */}
+                    {filteredData &&
+                      filteredData.length > 0 &&
+                      !['Spark Line', 'Line', 'Sankey', 'Pie', 'Sankey'].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} />}
+                        {parent => (
+                          <PieChart
+                            ref={svgRef}
+                            parentWidth={parent.width}
+                            parentHeight={parent.height}
+                            interactionLabel={interactionLabel}
+                          />
+                        )}
                       </ParentSize>
                     )}
                     {/* Line Chart */}
-                    {config.visualizationType === 'Line' &&
+                    {filteredData &&
+                      filteredData.length > 0 &&
+                      config.visualizationType === 'Line' &&
                       (convertLineToBarGraph ? (
                         <div ref={parentRef} style={{ width: `100%` }}>
                           <ParentSize>
@@ -993,9 +1280,9 @@ const CdcChart: React.FC<CdcChartProps> = ({
                           dimensions={dimensions}
                           interactionLabel={interactionLabel}
                         />
-                        {config?.introText && (
+                        {processedIntroText && (
                           <section className='introText mb-4' style={{ padding: '0px 0 35px' }}>
-                            {parse(config.introText)}
+                            {parse(processedIntroText)}
                           </section>
                         )}
                         <div style={{ height: `100px`, width: `100%`, ...sparkLineStyles }}>
@@ -1032,8 +1319,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   : link && link}
                 {/* Description */}
 
-                {config.description && config.visualizationType !== 'Spark Line' && (
-                  <div className={getChartSubTextClasses().join(' ')}>{parse(config.description)}</div>
+                {processedDescription && config.visualizationType !== 'Spark Line' && (
+                  <div className={getChartSubTextClasses().join(' ')}>{parse(processedDescription)}</div>
                 )}
 
                 {/* buttons */}
@@ -1064,43 +1351,63 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   config.table.show &&
                   config.visualizationType !== 'Spark Line' &&
                   config.visualizationType !== 'Sankey') ||
-                  (config.visualizationType === 'Sankey' && config.table.show)) && (
-                  <DataTable
-                    /* changing the "key" will force the table to re-render
-                          when the default sort changes while editing */
-                    key={dataTableDefaultSortBy}
-                    config={pivotDynamicSeries(config)}
-                    rawData={
+                  (config.visualizationType === 'Sankey' && config.table.show)) &&
+                  (() => {
+                    let dataTableConfig = pivotDynamicSeries(config)
+                    let dataTableColumns = config.columns
+                    let dataTableRuntimeData = getTableRuntimeData()
+                    let dataTableRawData =
                       config.visualizationType === 'Sankey'
                         ? config?.data?.[0]?.tableData
                         : config.table.customTableConfig
                         ? filterVizData(config.filters, config.data)
                         : config.data
+
+                    if (config.smallMultiples?.mode) {
+                      const prepared = prepareSmallMultiplesDataTable(config, config.columns, dataTableRuntimeData)
+                      dataTableConfig = prepared.config
+                      dataTableColumns = prepared.columns
+                      dataTableRuntimeData = prepared.runtimeData
+                      if (config.smallMultiples.mode === 'by-column') {
+                        dataTableRawData = prepared.config.data
+                      }
                     }
-                    runtimeData={getTableRuntimeData()}
-                    expandDataTable={config.table.expanded}
-                    columns={config.columns}
-                    defaultSortBy={dataTableDefaultSortBy}
-                    displayGeoName={name => name}
-                    applyLegendToRow={applyLegendToRow}
-                    tableTitle={config.table.label}
-                    indexTitle={config.table.indexLabel}
-                    vizTitle={title}
-                    viewport={currentViewport}
-                    tabbingId={handleChartTabbing(config, legendId)}
-                    colorScale={colorScale}
-                    interactionLabel={interactionLabel}
-                  />
-                )}
+
+                    return (
+                      <DataTable
+                        /* changing the "key" will force the table to re-render
+                                    when the default sort changes while editing */
+                        key={dataTableDefaultSortBy}
+                        config={dataTableConfig}
+                        rawData={dataTableRawData}
+                        runtimeData={dataTableRuntimeData}
+                        expandDataTable={config.table.expanded}
+                        columns={dataTableColumns}
+                        defaultSortBy={dataTableDefaultSortBy}
+                        displayGeoName={name => name}
+                        applyLegendToRow={applyLegendToRow}
+                        tableTitle={config.table.label}
+                        indexTitle={config.table.indexLabel}
+                        vizTitle={title}
+                        viewport={currentViewport}
+                        tabbingId={handleChartTabbing(config, legendId)}
+                        colorScale={colorScale}
+                        interactionLabel={interactionLabel}
+                      />
+                    )
+                  })()}
                 {config?.annotations?.length > 0 && <Annotation.Dropdown />}
                 {/* show pdf or image button */}
-                {config?.legacyFootnotes && (
-                  <section className='footnotes pt-2 mt-4'>{parse(config.legacyFootnotes)}</section>
+                {processedLegacyFootnotes && (
+                  <section className='footnotes pt-2 mt-4'>{parse(processedLegacyFootnotes)}</section>
                 )}
               </div>
               <FootnotesStandAlone
                 config={configObj.footnotes}
                 filters={config.filters?.filter(f => f.filterFootnotes)}
+                markupVariables={config.markupVariables}
+                enableMarkupVariables={config.enableMarkupVariables}
+                data={config.data}
               />
             </div>
           )}
@@ -1119,6 +1426,9 @@ const CdcChart: React.FC<CdcChartProps> = ({
     return str.charAt(0).toUpperCase() + str.slice(1)
   }
 
+  // Get version-specific color palettes based on current config
+  const colorPalettes = filterChartColorPalettes(config)
+
   const contextValues = {
     ...state,
     capitalize,
@@ -1137,6 +1447,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     handleChartTabbing,
     highlight,
     handleShowAll,
+    interactionLabel,
     isDashboard,
     isDebug,
     handleDragStateChange,
@@ -1150,7 +1461,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     outerContainerRef,
     parentRef,
     parseDate,
-    rawData: _.cloneDeep(stateData) ?? {},
+    rawData: stateData ?? {},
     setConfig,
     setEditing,
     setParentConfig,
@@ -1160,7 +1471,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     tableData: filteredData || excludedData,
     transformedData: getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean }),
     twoColorPalette,
-    unfilteredData: _.cloneDeep(stateData),
+    unfilteredData: stateData,
     updateConfig
   }