@cdc/chart 4.25.11 → 4.26.2

package/package.json

@@ -1,83 +1,82 @@
 {
   "name": "@cdc/chart",
-  "version": "4.25.11",
+  "version": "4.26.2",
   "description": "React component for visualizing tabular data in various types of charts",
-  "moduleName": "CdcChart",
-  "main": "dist/cdcchart",
-  "type": "module",
-  "scripts": {
-    "start": "vite --open",
-    "build": "vite build",
-    "preview": "vite preview",
-    "graph": "nx graph",
-    "prepublishOnly": "lerna run --scope @cdc/chart build",
-    "test": "vitest run --reporter verbose",
-    "test-watch": "vitest watch --reporter verbose",
-    "test-watch:ui": "vitest --ui"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/CDCgov/cdc-open-viz",
-    "directory": "packages/chart"
-  },
-  "author": "Matthew Pallansch <mpallansch@adittech.com>",
-  "bugs": {
-    "url": "https://github.com/CDCgov/cdc-open-viz/issues"
-  },
   "license": "Apache-2.0",
+  "author": "Matthew Pallansch <mpallansch@adittech.com>",
+  "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.25.11",
+    "@cdc/core": "^4.26.2",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-spring/web": "^9.7.5",
     "@rollup/plugin-dsv": "^3.0.2",
-    "@visx/annotation": "^3.3.0",
-    "@visx/axis": "3.12.0",
+    "@visx/annotation": "^3.12.0",
+    "@visx/axis": "^3.12.0",
     "@visx/brush": "^3.12.0",
-    "@visx/curve": "3.12.0",
+    "@visx/curve": "^3.12.0",
     "@visx/drag": "^3.12.0",
-    "@visx/event": "3.12.0",
-    "@visx/glyph": "3.12.0",
-    "@visx/gradient": "3.12.0",
-    "@visx/legend": "3.12.0",
-    "@visx/marker": "3.12.0",
-    "@visx/mock-data": "3.12.0",
-    "@visx/pattern": "^3.0.0",
-    "@visx/responsive": "^2.10.0",
-    "@visx/scale": "3.12.0",
-    "@visx/shape": "3.12.0",
-    "@visx/stats": "3.12.0",
-    "@visx/text": "3.12.0",
-    "@visx/tooltip": "3.12.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "chroma-js": "3.1.2",
-    "d3-array": "3.2.4",
-    "d3-format": "^3.1.0",
+    "@visx/event": "^3.12.0",
+    "@visx/glyph": "^3.12.0",
+    "@visx/gradient": "^3.12.0",
+    "@visx/legend": "^3.12.0",
+    "@visx/marker": "^3.12.0",
+    "@visx/mock-data": "^3.12.0",
+    "@visx/pattern": "^3.12.0",
+    "@visx/responsive": "^3.12.0",
+    "@visx/scale": "^3.12.0",
+    "@visx/shape": "^3.12.0",
+    "@visx/stats": "^3.12.0",
+    "@visx/text": "^3.12.0",
+    "@visx/tooltip": "^3.12.0",
+    "@vitejs/plugin-react": "^5.1.2",
+    "chroma-js": "^3.1.2",
+    "d3-array": "^3.2.4",
+    "d3-format": "^3.1.2",
     "d3-sankey": "^0.12.3",
-    "d3-time-format": "4.1.0",
-    "dompurify": "^3.1.5",
-    "html-react-parser": "5.2.3",
+    "d3-time-format": "^4.1.0",
+    "dompurify": "^3.3.1",
+    "html-react-parser": "^5.2.3",
     "js-base64": "^2.5.2",
-    "lodash": "^4.17.21",
-    "papaparse": "5.5.2",
+    "lodash": "^4.17.23",
+    "papaparse": "^5.5.2",
     "react-accessible-accordion": "^5.0.1",
-    "react-icons": "5.5.0",
+    "react-icons": "^5.5.0",
     "react-tooltip": "5.8.2-beta.3",
     "resize-observer-polyfill": "^1.5.1",
-    "use-debounce": "^6.0.1",
-    "vite": "^5.4.21",
+    "sass": "^1.89.2",
+    "use-debounce": "^10.1.0",
+    "vite": "^7.3.1",
     "vite-plugin-css-injected-by-js": "^2.4.0",
-    "vite-plugin-svgr": "^2.4.0",
-    "whatwg-fetch": "3.6.20"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "vite-plugin-svgr": "^4.2.0",
+    "whatwg-fetch": "^3.6.20"
   },
-  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd",
   "devDependencies": {
     "@types/d3-array": "^3.2.1",
     "@types/d3-format": "^3.0.4",
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-time-format": "^4.0.3"
-  }
+  },
+  "gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "main": "dist/cdcchart",
+  "moduleName": "CdcChart",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CDCgov/cdc-open-viz",
+    "directory": "packages/chart"
+  },
+  "scripts": {
+    "build": "vite build",
+    "graph": "nx graph",
+    "prepublishOnly": "lerna run --scope @cdc/chart build",
+    "preview": "vite preview",
+    "start": "vite --open",
+    "test": "vitest run --reporter verbose",
+    "test-watch": "vitest watch --reporter verbose",
+    "test-watch:ui": "vitest --ui"
+  },
+  "type": "module"
 }

package/src/CdcChartComponent.tsx

@@ -22,21 +22,23 @@ import { Runtime } from '@cdc/core/types/Runtime'
 import { Label } from './types/Label'
 // External Libraries
 import ParentSize from '@visx/responsive/lib/components/ParentSize'
-import { timeParse, timeFormat } from 'd3-time-format'
+import { timeParse } from 'd3-time-format'
 import parse from 'html-react-parser'
 import _ from 'lodash'
 // Primary Components
 import ConfigContext, { ChartDispatchContext } from './ConfigContext'
 import PieChart from './components/PieChart'
+import RadarChart from './components/RadarChart'
 import SankeyChart from './components/Sankey'
 import LinearChart from './components/LinearChart'
-import { isDateScale } from '@cdc/core/helpers/cove/date'
+import { isDateScale, formatDate as coreFormatDate } from '@cdc/core/helpers/cove/date'
 
 import { twoColorPalette } from '@cdc/core/data/colorPalettes'
 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'
@@ -52,6 +54,7 @@ import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
 import MediaControls from '@cdc/core/components/MediaControls'
 import Annotation from './components/Annotations'
+import { getVisibleAnnotations } from './components/Annotations/helpers/getVisibleAnnotations'
 // Core Helpers
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
@@ -132,7 +135,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
     coveLoadedEventRan,
     imageId,
     seriesHighlight,
-    colorScale
+    colorScale,
+    brushData
   } = state
   const { description, visualizationType } = config
   const svgRef = useRef(null)
@@ -239,6 +243,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 }
@@ -254,8 +266,39 @@ const CdcChart: React.FC<CdcChartProps> = ({
       delete defaultsWithoutPalette.general?.palette
     }
 
+    // Override palette defaults for Line charts specifically
+    if (loadedConfig?.visualizationType === 'Line' && !loadedConfig?.general?.palette) {
+      if (!defaultsWithoutPalette.general) {
+        defaultsWithoutPalette.general = {}
+      }
+      defaultsWithoutPalette.general.palette = {
+        isReversed: false,
+        version: '2.0',
+        name: 'divergent_blue_cyan'
+      }
+    }
+
+    // Override palette defaults for Horizon Chart specifically
+    if (loadedConfig?.visualizationType === 'Horizon Chart' && !loadedConfig?.general?.palette) {
+      if (!defaultsWithoutPalette.general) {
+        defaultsWithoutPalette.general = {}
+      }
+      defaultsWithoutPalette.general.palette = {
+        isReversed: false,
+        version: '2.0',
+        name: 'sequential_blue'
+      }
+    }
+
     let newConfig = { ...defaultsWithoutPalette, ...loadedConfig }
 
+    // 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))
+    }
+
     _.defaultsDeep(newConfig, {
       table: { showVertical: false }
     })
@@ -375,6 +418,12 @@ 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 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.seriesLabelsAll = newConfig.runtime.seriesKeys
     } else {
       const finalData = dataOverride || newConfig.formattedData || newConfig.data
       newConfig.runtime.seriesKeys = (newConfig.runtime.series || []).flatMap(series => {
@@ -448,6 +497,22 @@ const CdcChart: React.FC<CdcChartProps> = ({
       newConfig.visualizationSubType = 'stacked'
     }
 
+    if (newConfig.visualizationType === 'Horizon Chart' && newConfig.series) {
+      // Apply horizon defaults if not set
+      newConfig.horizon = {
+        numLayers: 4,
+        mode: 'offset', // Always offset for now, mirror hidden from UI
+        bandGap: 15,
+        bottomPadding: 15,
+        ...newConfig.horizon
+      }
+
+      // Set categorical as default xAxis type for horizon charts if not already set
+      if (!newConfig.xAxis.type) {
+        newConfig.xAxis.type = 'categorical'
+      }
+    }
+
     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)
@@ -559,7 +624,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     for (let entry of entries) {
       let { width, height } = entry.contentRect
 
-      const editorIsOpen = isEditor && !!document.querySelector('.editor-panel:not(.hidden)')
+      const editorIsOpen = isEditor
       width = editorIsOpen ? width - EDITOR_WIDTH : width
 
       const newViewport = getViewport(width)
@@ -608,7 +673,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
         if (newData) {
           newConfig.data = newData
         }
-      } else if (newConfig.formattedData) {
+      } else if (newConfig.formattedData && Array.isArray(newConfig.formattedData)) {
         newConfig.data = newConfig.formattedData
       } else if (newConfig.dataDescription) {
         // For dashboard contexts, get data from datasets if config.data is undefined
@@ -644,7 +709,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
           updateConfig(preparedConfig, preppedData.data)
         }
       } catch (err) {
-        console.error('Could not Load!')
+        console.error('Could not Load!', err)
       }
     }
 
@@ -709,6 +774,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) {
@@ -723,6 +801,16 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
   }, [config, stateData]) // eslint-disable-line
 
+  // Clear brush selection when brush slider is disabled
+  useEffect(() => {
+    const isBrushDisabled = !config?.xAxis?.brushActive
+    const hasBrushData = Array.isArray(brushData) && brushData.length > 0
+
+    if (isBrushDisabled && hasBrushData) {
+      dispatch({ type: 'SET_BRUSH_DATA', payload: [] })
+    }
+  }, [config?.xAxis?.brushActive, brushData])
+
   // Updates runtime axis labels when config or data changes when using markup variables
   useEffect(() => {
     if (
@@ -819,15 +907,13 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }
 
   const formatDate = (date, i, ticks) => {
-    let formattedDate = timeFormat(config.runtime[section].dateDisplayFormat)(date)
-    // Handle the case where all months work with '%b.' except for May
-    if (config.runtime[section].dateDisplayFormat?.includes('%b.') && formattedDate.includes('May.')) {
-      formattedDate = formattedDate.replace(/May\./g, 'May')
-    }
+    const displayFormat =
+      config.runtime[section].dateDisplayFormat || config.runtime[section].dateParseFormat || '%Y-%m-%d'
+    let formattedDate = coreFormatDate(displayFormat, date)
     // 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 = coreFormatDate(displayFormat, prevDate)
       const year = formattedDate.match(/\d{4}/)
       const prevYear = prevFormattedDate.match(/\d{4}/)
       if (year && prevYear && year[0] === prevYear[0]) {
@@ -838,7 +924,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }
 
   const formatTooltipsDate = date => {
-    return timeFormat(config.tooltips.dateDisplayFormat)(date)
+    return coreFormatDate(config.tooltips.dateDisplayFormat, date)
   }
 
   // Format numeric data based on settings in config OR from passed in settings for Additional Columns
@@ -1093,6 +1179,12 @@ const CdcChart: React.FC<CdcChartProps> = ({
     return tableConfig
   }
 
+  // Transform and clean data for chart rendering
+  const transformedData = getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean })
+
+  // Filter annotations to only those visible in current data view
+  const visibleAnnotations = getVisibleAnnotations(config.annotations, transformedData, config.xAxis?.dataKey)
+
   // Prevent render if loading
   let body = <Loading />
 
@@ -1125,8 +1217,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
   }
 
@@ -1154,6 +1244,7 @@ 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}
@@ -1185,7 +1276,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   />
                 )}
                 <SkipTo skipId={handleChartTabbing(config, legendId)} skipMessage='Skip Over Chart Container' />
-                {config.annotations?.length > 0 && (
+                {visibleAnnotations.length > 0 && (
                   <SkipTo
                     skipId={handleChartTabbing(config, legendId)}
                     skipMessage={`Skip over annotations`}
@@ -1215,7 +1306,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                     {/* All charts with LinearChart */}
                     {filteredData &&
                       filteredData.length > 0 &&
-                      !['Spark Line', 'Line', 'Sankey', 'Pie', 'Sankey'].includes(config.visualizationType) && (
+                      !['Spark Line', 'Line', 'Sankey', 'Pie', 'Radar'].includes(config.visualizationType) && (
                         <div ref={parentRef} style={{ width: `100%` }}>
                           <ParentSize>
                             {parent => (
@@ -1237,6 +1328,19 @@ const CdcChart: React.FC<CdcChartProps> = ({
                         )}
                       </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 &&
@@ -1305,13 +1409,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
@@ -1323,80 +1432,87 @@ 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)) &&
-                  (() => {
-                    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
+                (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}
-                        interactionLabel={interactionLabel}
-                      />
-                    )
-                  })()}
-                {config?.annotations?.length > 0 && <Annotation.Dropdown />}
+                      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>
+                    )}
+                {visibleAnnotations.length > 0 && <Annotation.Dropdown />}
                 {/* show pdf or image button */}
                 {processedLegacyFootnotes && (
                   <section className='footnotes pt-2 mt-4'>{parse(processedLegacyFootnotes)}</section>
@@ -1469,10 +1585,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
     setSharedFilterValue,
     svgRef,
     tableData: filteredData || excludedData,
-    transformedData: getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean }),
+    transformedData,
     twoColorPalette,
     unfilteredData: stateData,
-    updateConfig
+    updateConfig,
+    visibleAnnotations
   }
 
   return (

package/src/_stories/Chart.Anchors.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, Story } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import exampleComboBarNonNumeric from './../../examples/feature/tests-date-exclusions/date-exclusions-config.json'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 export default {
   title: 'Components/Templates/Chart/Anchors',
@@ -15,17 +16,26 @@ export const Anchor_DateLinear: Story = {
   args: {
     config: exampleComboBarNonNumeric,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Anchor_Categorical: Story = {
   args: {
     config: editConfigKeys(exampleComboBarNonNumeric, [{ path: ['xAxis', 'type'], value: 'categorical' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Anchor_Date_Time: Story = {
   args: {
     config: editConfigKeys(exampleComboBarNonNumeric, [{ path: ['xAxis', 'type'], value: 'date-time' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }