@cdc/chart 4.25.10 → 4.26.1

package/src/CdcChartComponent.tsx

@@ -37,6 +37,7 @@ import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
 
 import SparkLine from './components/Sparkline'
 import Legend from './components/Legend'
+import WarmingStripesGradientLegend from './components/WarmingStripes/WarmingStripesGradientLegend'
 import defaults from './data/initial-state'
 import EditorPanel from './components/EditorPanel'
 import { abbreviateNumber } from './helpers/abbreviateNumber'
@@ -75,6 +76,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'
@@ -238,6 +240,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
   const convertLineToBarGraph = isConvertLineToBarGraph(config, filteredData)
 
+  // Declaratively calculate series keys for pie charts based on filtered data
+  const pieSeriesKeys = useMemo(() => {
+    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]))
+  }, [config.visualizationType, config.xAxis?.dataKey, filteredData, excludedData])
+
   const prepareConfig = (loadedConfig: ChartConfig) => {
     // Create defaults without version to avoid overriding legacy configs
     const defaultsWithoutPalette = { ...defaults }
@@ -275,30 +285,62 @@ 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 = cloneConfig(_config)
     let data = dataOverride || stateData
 
     data = handleRankByValue(data, newConfig)
 
-    // Process axis labels for markup variables if enabled
-    let processedXAxis = newConfig.xAxis?.label
-    let processedYAxis = newConfig.yAxis?.label
-
-    if (newConfig.enableMarkupVariables && newConfig.markupVariables?.length) {
-      if (newConfig.xAxis?.label) {
-        processedXAxis = processMarkupVariables(newConfig.xAxis.label, data || [], newConfig.markupVariables, {
-          isEditor,
-          filters: newConfig.filters || []
-        }).processedContent
-      }
-      if (newConfig.yAxis?.label) {
-        processedYAxis = processMarkupVariables(newConfig.yAxis.label, data || [], newConfig.markupVariables, {
-          isEditor,
-          filters: newConfig.filters || []
-        }).processedContent
-      }
-    }
+    const { processedXAxis, processedYAxis, runtimeXAxisLabel, runtimeYAxisLabel, isHorizontalVariant } =
+      getProcessedAxisLabels(newConfig, data || [])
 
     // Deeper copy
     Object.keys(defaults).forEach(key => {
@@ -323,6 +365,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 = {}
@@ -334,6 +384,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
       const pieData = currentData.length > 0 ? currentData : newExcludedData
       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 {
       const finalData = dataOverride || newConfig.formattedData || newConfig.data
       newConfig.runtime.seriesKeys = (newConfig.runtime.series || []).flatMap(series => {
@@ -384,6 +435,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) {
@@ -395,19 +458,17 @@ 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)
-    ) {
+    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 = {
-        ..._.cloneDeep(newConfig.yAxis.yAxis || newConfig.yAxis),
-        label: processedYAxis || (newConfig.yAxis.yAxis || newConfig.yAxis).label
+        ...horizontalXAxisSource,
+        label: runtimeXAxisLabel ?? horizontalXAxisSource?.label
       }
       newConfig.runtime.yAxis = {
-        ..._.cloneDeep(newConfig.xAxis.xAxis || newConfig.xAxis),
-        label: processedXAxis || (newConfig.xAxis.xAxis || newConfig.xAxis).label
+        ...horizontalYAxisSource,
+        label: runtimeYAxisLabel ?? horizontalYAxisSource?.label
       }
       newConfig.runtime.yAxis.labelOffset *= -1
 
@@ -419,24 +480,40 @@ const CdcChart: React.FC<CdcChartProps> = ({
       ['Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType) &&
       !convertLineToBarGraph
     ) {
-      newConfig.runtime.xAxis = { ...newConfig.xAxis, label: processedXAxis || newConfig.xAxis.label }
-      newConfig.runtime.yAxis = { ...newConfig.yAxis, label: processedYAxis || newConfig.yAxis.label }
+      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, label: processedXAxis || newConfig.xAxis.label }
-      newConfig.runtime.yAxis = { ...newConfig.yAxis, label: processedYAxis || newConfig.yAxis.label }
+      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 })
@@ -492,11 +569,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
+      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
@@ -640,6 +719,19 @@ 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)) {
+    const newConfig = {
+      ...config,
+      runtime: {
+        ...config.runtime,
+        seriesKeys: pieSeriesKeys,
+        seriesLabelsAll: pieSeriesKeys
+      }
+    }
+    setConfig(newConfig)
+  }
+
   // Generates color palette to pass to child chart component
   useEffect(() => {
     if (stateData && config.xAxis && config.runtime?.seriesKeys) {
@@ -654,6 +746,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 (
@@ -707,15 +842,17 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }
 
   const formatDate = (date, i, ticks) => {
-    let formattedDate = timeFormat(config.runtime[section].dateDisplayFormat)(date)
+    const displayFormat =
+      config.runtime[section].dateDisplayFormat || config.runtime[section].dateParseFormat || '%Y-%m-%d'
+    let formattedDate = timeFormat(displayFormat)(date)
     // Handle the case where all months work with '%b.' except for May
-    if (config.runtime[section].dateDisplayFormat?.includes('%b.') && formattedDate.includes('May.')) {
+    if (displayFormat?.includes('%b.') && formattedDate.includes('May.')) {
       formattedDate = formattedDate.replace(/May\./g, 'May')
     }
     // Show years only once
-    if (config.xAxis.showYearsOnce && config.runtime[section].dateDisplayFormat?.includes('%Y') && ticks) {
+    if (config.xAxis.showYearsOnce && displayFormat?.includes('%Y') && ticks) {
       const prevDate = ticks[i - 1] ? ticks[i - 1].value : null
-      const prevFormattedDate = timeFormat(config.runtime[section].dateDisplayFormat)(prevDate)
+      const prevFormattedDate = timeFormat(displayFormat)(prevDate)
       const year = formattedDate.match(/\d{4}/)
       const prevYear = prevFormattedDate.match(/\d{4}/)
       if (year && prevYear && year[0] === prevYear[0]) {
@@ -769,7 +906,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
         rightSuffix,
         bottomPrefix,
         bottomSuffix,
-        bottomAbbreviated
+        bottomAbbreviated,
+        preserveOriginalDecimals
       }
     } = config
 
@@ -788,32 +926,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()
+        }
       }
     }
 
@@ -992,8 +1150,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
     const isLegendOnBottom = legend?.position === 'bottom' || isLegendWrapViewport(currentViewport)
 
     if (config.isResponsiveTicks) classes.push('subtext--responsive-ticks ')
-    if (config.xAxis.brushActive && !isLegendOnBottom) classes.push('subtext--brush-active ')
-    if (config.xAxis.brushActive && config.legend.hide) classes.push('subtext--brush-active ')
     return classes
   }
 
@@ -1008,9 +1164,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(
@@ -1024,11 +1177,20 @@ const CdcChart: React.FC<CdcChartProps> = ({
                 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 */}
@@ -1067,18 +1229,27 @@ 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
@@ -1091,7 +1262,9 @@ const CdcChart: React.FC<CdcChartProps> = ({
                       </ParentSize>
                     )}
                     {/* Line Chart */}
-                    {config.visualizationType === 'Line' &&
+                    {filteredData &&
+                      filteredData.length > 0 &&
+                      config.visualizationType === 'Line' &&
                       (convertLineToBarGraph ? (
                         <div ref={parentRef} style={{ width: `100%` }}>
                           <ParentSize>
@@ -1156,13 +1329,18 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   {/* Legend */}
                   {!config.legend.hide &&
                     config.visualizationType !== 'Spark Line' &&
-                    config.visualizationType !== 'Sankey' && (
+                    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 */}
                 {isDashboard && config.table && config.table.show && config.table.showDataTableLink
@@ -1174,62 +1352,86 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   <div className={getChartSubTextClasses().join(' ')}>{parse(processedDescription)}</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}
-                      interactionLabel={interactionLabel}
-                    />
-                  )}
-                  {config.table.showDownloadPdfButton && (
-                    <MediaControls.Button
-                      text='Download PDF'
-                      title='Download Chart as PDF'
-                      type='pdf'
-                      state={config}
-                      elementToCapture={imageId}
-                      interactionLabel={interactionLabel}
-                    />
-                  )}
-                </MediaControls.Section>
                 {/* Data Table */}
-                {((config.xAxis.dataKey &&
+                {(config.xAxis.dataKey &&
                   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?.data?.[0]?.tableData
-                        : config.table.customTableConfig
-                        ? filterVizData(config.filters, config.data)
-                        : 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}
-                  />
-                )}
+                (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
+                        }
+                      }
+
+                      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}
+                          imageRef={imageId}
+                          showDownloadImgButton={config.table.showDownloadImgButton}
+                          showDownloadPdfButton={config.table.showDownloadPdfButton}
+                          includeContextInDownload={config.table?.includeContextInDownload}
+                          interactionLabel={interactionLabel}
+                        />
+                      )
+                    })()
+                  : (config.table.showDownloadImgButton || config.table.showDownloadPdfButton) && (
+                      <div className='w-100 d-flex justify-content-end'>
+                        <MediaControls.Section classes={['download-links', 'mt-4', 'mb-2']}>
+                          {config.table.showDownloadImgButton && (
+                            <MediaControls.DownloadLink
+                              type='image'
+                              title='Download Chart as Image'
+                              state={config}
+                              elementToCapture={imageId}
+                              interactionLabel={interactionLabel}
+                              includeContextInDownload={config.table?.includeContextInDownload}
+                            />
+                          )}
+                          {config.table.showDownloadPdfButton && (
+                            <MediaControls.DownloadLink
+                              type='pdf'
+                              title='Download Chart as PDF'
+                              state={config}
+                              elementToCapture={imageId}
+                              interactionLabel={interactionLabel}
+                              includeContextInDownload={config.table?.includeContextInDownload}
+                            />
+                          )}
+                        </MediaControls.Section>
+                      </div>
+                    )}
                 {config?.annotations?.length > 0 && <Annotation.Dropdown />}
                 {/* show pdf or image button */}
                 {processedLegacyFootnotes && (
@@ -1239,6 +1441,9 @@ const CdcChart: React.FC<CdcChartProps> = ({
               <FootnotesStandAlone
                 config={configObj.footnotes}
                 filters={config.filters?.filter(f => f.filterFootnotes)}
+                markupVariables={config.markupVariables}
+                enableMarkupVariables={config.enableMarkupVariables}
+                data={config.data}
               />
             </div>
           )}