@cdc/chart 4.26.3 → 4.26.5

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cdc/chart",
-  "version": "4.26.3",
+  "version": "4.26.5",
   "description": "React component for visualizing tabular data in various types of charts",
   "license": "Apache-2.0",
   "author": "Matthew Pallansch <mpallansch@adittech.com>",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.3",
+    "@cdc/core": "^4.26.5",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-spring/web": "^9.7.5",
     "@rollup/plugin-dsv": "^3.0.2",
@@ -18,6 +18,7 @@
     "@visx/event": "^3.12.0",
     "@visx/glyph": "^3.12.0",
     "@visx/gradient": "^3.12.0",
+    "@visx/heatmap": "^3.12.0",
     "@visx/legend": "^3.12.0",
     "@visx/marker": "^3.12.0",
     "@visx/mock-data": "^3.12.0",
@@ -34,7 +35,7 @@
     "d3-format": "^3.1.2",
     "d3-sankey": "^0.12.3",
     "d3-time-format": "^4.1.0",
-    "dompurify": "^3.3.1",
+    "dompurify": "^3.4.0",
     "html-react-parser": "^5.2.3",
     "js-base64": "^2.5.2",
     "lodash": "^4.17.23",
@@ -56,7 +57,7 @@
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-time-format": "^4.0.3"
   },
-  "gitHead": "d50e45a074fbefa56cac904917e707d57f237737",
+  "gitHead": "61c025165d96b45a6002c34582c5a622a9d865a9",
   "main": "dist/cdcchart",
   "moduleName": "CdcChart",
   "peerDependencies": {

package/src/CdcChartComponent.tsx

@@ -27,7 +27,6 @@ import parse from 'html-react-parser'
 import cloneDeep from 'lodash/cloneDeep'
 import defaultsDeep from 'lodash/defaultsDeep'
 import lodashDefaults from 'lodash/defaults'
-import findKey from 'lodash/findKey'
 import forEach from 'lodash/forEach'
 import get from 'lodash/get'
 import isEmpty from 'lodash/isEmpty'
@@ -44,6 +43,7 @@ import ConfigContext, { ChartDispatchContext } from './ConfigContext'
 import PieChart from './components/PieChart'
 import RadarChart from './components/RadarChart'
 import SankeyChart from './components/Sankey'
+import HeatMap, { HeatMapGradientLegend } from './components/HeatMap'
 import LinearChart from './components/LinearChart'
 import { isDateScale, formatDate as coreFormatDate } from '@cdc/core/helpers/cove/date'
 
@@ -74,9 +74,11 @@ import { getVisibleAnnotations } from './components/Annotations/helpers/getVisib
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import { backfillDefaults } from '@cdc/core/helpers/backfillDefaults'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
+import { getAxisLabelFontSize } from './helpers/axisLabelFontSize'
 import { missingRequiredSections } from '@cdc/core/helpers/missingRequiredSections'
 import { filterVizData } from '@cdc/core/helpers/filterVizData'
 import { addValuesToFilters } from '@cdc/core/helpers/addValuesToFilters'
+import { hasVisibleVizFilters } from '@cdc/core/helpers/filterVisibility'
 import { publish, subscribe, unsubscribe } from '@cdc/core/helpers/events'
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import numberFromString from '@cdc/core/helpers/numberFromString'
@@ -93,8 +95,12 @@ import { getComboChartConfig } from './helpers/getComboChartConfig'
 import { getExcludedData } from './helpers/getExcludedData'
 import { getColorScale } from './helpers/getColorScale'
 import { getTransformedData } from './helpers/getTransformedData'
+import { getLegendHighlightKey, shouldResetSeriesHighlight } from './helpers/seriesHighlight'
 import { getPiePercent } from './helpers/getPiePercent'
 import { prepareSmallMultiplesDataTable } from './helpers/smallMultiplesHelpers'
+import { calcInitialHeight } from './helpers/sizeHelpers'
+import { ensureSpecialChartAxisTypes } from './helpers/ensureSpecialChartAxisTypes'
+import { findColumnConfigByName } from './helpers/seriesColumnSettings'
 
 // styles
 import './scss/main.scss'
@@ -147,6 +153,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     excludedData,
     filteredData,
     currentViewport,
+    vizViewport,
     isLoading,
     dimensions,
     container,
@@ -300,6 +307,17 @@ const CdcChart: React.FC<CdcChartProps> = ({
       }
     }
 
+    if (loadedConfig?.visualizationType === 'HeatMap' && !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
@@ -322,9 +340,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
       })
     })
 
-    if (newConfig.visualizationType === 'Bump Chart') {
-      newConfig.xAxis.type === 'date-time'
-    }
+    ensureSpecialChartAxisTypes(newConfig)
     if (!isDashboard) return coveUpdateWorker(newConfig)
     return newConfig
   }
@@ -380,6 +396,10 @@ const CdcChart: React.FC<CdcChartProps> = ({
   const updateConfig = (_config: AllChartsConfig, dataOverride?: any[]) => {
     const newConfig = cloneConfig(_config)
     let data = dataOverride || stateData
+    const shouldUseHeatMapSideTitlePlacement =
+      newConfig.visualizationType === 'HeatMap' && !newConfig.yAxis?.titlePlacement
+
+    ensureSpecialChartAxisTypes(newConfig)
 
     data = handleRankByValue(data, newConfig)
 
@@ -388,6 +408,9 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
     // Backfill missing properties from defaults, respecting legacy values
     backfillDefaults(newConfig, defaults, LEGACY_CHART_DEFAULTS)
+    if (shouldUseHeatMapSideTitlePlacement) {
+      newConfig.yAxis.titlePlacement = 'side'
+    }
 
     // Auto-populate table.defaultSort for date-axis charts if not already set by user
     const hasDateAxisType = ['date-time', 'date'].includes(newConfig.xAxis?.type)
@@ -528,6 +551,31 @@ const CdcChart: React.FC<CdcChartProps> = ({
       }
     }
 
+    if (newConfig.visualizationType === 'HeatMap') {
+      const heatMapSeriesKeys = newConfig.series.map(series => series.dataKey)
+      const heatMapSeriesLabels = newConfig.series.reduce<Record<string, string>>((acc, series) => {
+        const heatMapColumnConfig = findColumnConfigByName(newConfig.columns || {}, series.dataKey)?.columnConfig
+        const configuredColumnLabel = heatMapColumnConfig?.label
+        const hasCustomColumnLabel = configuredColumnLabel && configuredColumnLabel !== series.dataKey
+        acc[series.dataKey] = hasCustomColumnLabel ? configuredColumnLabel : series.name || series.dataKey
+        return acc
+      }, {})
+
+      newConfig.legend = {
+        ...newConfig.legend,
+        position: newConfig.legend?.position || 'top',
+        style: newConfig.legend?.style || 'gradient',
+        subStyle: newConfig.legend?.subStyle || 'smooth'
+      }
+      newConfig.yAxis = {
+        ...newConfig.yAxis,
+        type: 'categorical'
+      }
+      newConfig.runtime.seriesKeys = heatMapSeriesKeys
+      newConfig.runtime.seriesLabelsAll = heatMapSeriesKeys
+      newConfig.runtime.seriesLabels = heatMapSeriesLabels
+    }
+
     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)
@@ -540,7 +588,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
         ...horizontalYAxisSource,
         label: runtimeYAxisLabel ?? horizontalYAxisSource?.label
       }
-      newConfig.runtime.yAxis.labelOffset *= -1
 
       newConfig.runtime.horizontal = false
       newConfig.orientation = 'horizontal'
@@ -580,6 +627,19 @@ const CdcChart: React.FC<CdcChartProps> = ({
       } else {
         newConfig.runtime.editorErrorMessage = ''
       }
+    } else if (newConfig.visualizationType === 'HeatMap') {
+      const missingXColumn = !newConfig.xAxis.dataKey || newConfig.xAxis.dataKey === ''
+      const missingSeries = !Array.isArray(newConfig.series) || newConfig.series.length === 0
+
+      if (missingXColumn && missingSeries) {
+        newConfig.runtime.editorErrorMessage = 'Date/Category Axis and Data Series must be set for heatmaps.'
+      } else if (missingXColumn) {
+        newConfig.runtime.editorErrorMessage = 'Date/Category Axis must be set for heatmaps.'
+      } else if (missingSeries) {
+        newConfig.runtime.editorErrorMessage = 'Data Series must be set for heatmaps.'
+      } else {
+        newConfig.runtime.editorErrorMessage = ''
+      }
     } else {
       // No errors
       newConfig.runtime.editorErrorMessage = ''
@@ -871,17 +931,15 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }, [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 => {
+  const highlight = (label: Label | string): void => {
+    const newHighlight = getLegendHighlightKey(config.runtime.seriesLabels, label)
+
     if (
-      seriesHighlight.length + 1 === config.runtime.seriesKeys.length &&
-      config.visualizationType !== 'Forecasting' &&
-      !seriesHighlight.includes(label.datum)
+      shouldResetSeriesHighlight(seriesHighlight, config.runtime.seriesKeys, newHighlight, config.visualizationType)
     ) {
       return handleShowAll()
     }
 
-    const newHighlight = findKey(config.runtime.seriesLabels, v => v === label.datum) || label.datum
-
     const newSeriesHighlight = xor(seriesHighlight, [newHighlight])
     dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: newSeriesHighlight })
   }
@@ -1200,6 +1258,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
   // Filter annotations to only those visible in current data view
   const visibleAnnotations = getVisibleAnnotations(config.annotations, transformedData, config.xAxis?.dataKey)
+  const isHeatMap = config.visualizationType === 'HeatMap'
   const isTp5Treatment = ENABLE_CHART_MAP_TP5_TREATMENT && config.visual?.tp5Treatment
   const visualSettingClasses = new Set([
     'component--has-border-color-theme',
@@ -1220,6 +1279,12 @@ const CdcChart: React.FC<CdcChartProps> = ({
     bodyClasses.push('component--hide-background-color')
   }
   if (isTp5Treatment && !bodyClasses.includes('no-borders')) bodyClasses.push('no-borders')
+  const bodyWrapClasses = [
+    isTp5Treatment ? 'cdc-callout d-flex flex-column tp5-chart-callout' : '',
+    isHeatMap ? 'cdc-heatmap__body-wrap' : ''
+  ]
+    .filter(Boolean)
+    .join(' ')
   const chartTitle = (
     <Title
       showTitle={config.showTitle}
@@ -1242,7 +1307,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
     return kebabCase(string)
   }
   const getChartWrapperClasses = () => {
-    const isLegendOnBottom = legend?.position === 'bottom' || isLegendWrapViewport(currentViewport)
     const classes = ['chart-container', 'visualization-container', 'p-relative']
     const visualSettingClasses = ['component--has-border-color-theme', 'component--has-accent']
     if (legend?.position) {
@@ -1253,11 +1317,10 @@ const CdcChart: React.FC<CdcChartProps> = ({
       }
     }
     if (legend?.hide) classes.push('legend-hidden')
+    if (isHeatMap) classes.push('cdc-heatmap__container')
     if (contentClasses.includes('sparkline')) classes.push('sparkline')
     if (lineDatapointClass) classes.push(lineDatapointClass)
     if (!config.barHasBorder) classes.push('chart-bar--no-border')
-    if (config.xAxis.brushActive && dashboardConfig?.type === 'dashboard' && (!isLegendOnBottom || legend.hide))
-      classes.push('dashboard-brush')
 
     if (!ENABLE_CHART_VISUAL_SETTINGS) {
       const filtered = classes.filter(className => !visualSettingClasses.includes(className))
@@ -1276,6 +1339,34 @@ const CdcChart: React.FC<CdcChartProps> = ({
     return classes
   }
 
+  const showTopYAxisTitle =
+    config.yAxis?.titlePlacement === 'top' &&
+    !config.smallMultiples?.mode &&
+    !config.hideYAxisLabel &&
+    Boolean(config.runtime?.yAxis?.label)
+  const topYAxisTitleFontSize = getAxisLabelFontSize(vizViewport)
+
+  const renderTopYAxisTitle = () =>
+    showTopYAxisTitle ? (
+      <div className='y-axis-top-title' style={{ fontSize: `${topYAxisTitleFontSize}px` }}>
+        {config.runtime.yAxis.label}
+      </div>
+    ) : null
+
+  const renderLinearChartWithParentSize = (
+    getParentWidth: (parent: { width: number; height: number }) => number = parent => parent.width,
+    wrapperStyle: React.CSSProperties = { width: '100%' }
+  ) => (
+    <>
+      {renderTopYAxisTitle()}
+      <div ref={parentRef} style={wrapperStyle}>
+        <ParentSize>
+          {parent => <LinearChart ref={svgRef} parentWidth={getParentWidth(parent)} parentHeight={parent.height} />}
+        </ParentSize>
+      </div>
+    </>
+  )
+
   if (!isLoading) {
     const tableLink = (
       <a href={`#data-table-${config.dataKey}`} className='margin-left-href'>
@@ -1288,11 +1379,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
         {!missingRequiredSections(config) && !config.newViz && (
           <VisualizationContent
             innerClassName={`type-${makeClassName(config.visualizationType)}`}
-            innerProps={{ 'aria-label': handleChartAriaLabels(config), tabIndex: 0 }}
+            innerProps={{ tabIndex: 0 }}
             bodyClassName={bodyClasses.join(' ')}
-            bodyWrapClassName={isTp5Treatment ? 'cdc-callout d-flex flex-column tp5-chart-callout' : ''}
+            bodyWrapClassName={bodyWrapClasses}
             filters={
-              config.filters?.length > 0 && !externalFilters && config.visualizationType !== 'Spark Line' ? (
+              hasVisibleVizFilters(config.filters) && !externalFilters && config.visualizationType !== 'Spark Line' ? (
                 <Filters
                   config={config}
                   setFilters={setFilters}
@@ -1304,7 +1395,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
             }
             bodySubtext={
               processedDescription && config.visualizationType !== 'Spark Line' ? (
-                <div className={getChartSubTextClasses().join(' ')}>{parse(processedDescription)}</div>
+                <div className={`cove-prose ${getChartSubTextClasses().join(' ')}`}>{parse(processedDescription)}</div>
               ) : null
             }
             bodyFooter={
@@ -1391,21 +1482,26 @@ const CdcChart: React.FC<CdcChartProps> = ({
                     )}
                 {visibleAnnotations.length > 0 && <Annotation.Dropdown />}
                 {processedLegacyFootnotes && (
-                  <section className='footnotes pt-2 mt-4'>{parse(processedLegacyFootnotes)}</section>
+                  <section className='footnotes cove-prose pt-2 mt-4'>{parse(processedLegacyFootnotes)}</section>
                 )}
               </>
             }
             header={isTp5Treatment ? null : chartTitle}
             messageIsIntroText={config.visualizationType !== 'Spark Line' && !!processedIntroText}
-            message={config.visualizationType !== 'Spark Line' && processedIntroText ? parse(processedIntroText) : null}
+            message={
+              config.visualizationType !== 'Spark Line' && processedIntroText ? (
+                <div className='cove-prose'>{parse(processedIntroText)}</div>
+              ) : null
+            }
             footer={
               <FootnotesStandAlone
-                config={configObj.footnotes}
+                config={config.footnotes}
                 filters={config.filters?.filter(f => f.filterFootnotes)}
                 markupVariables={config.markupVariables}
                 enableMarkupVariables={config.enableMarkupVariables}
                 data={config.data}
                 dataMetadata={config.dataMetadata}
+                footerClassName='cove-visualization__footnotes'
               />
             }
           >
@@ -1443,15 +1539,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   {/* All charts with LinearChart */}
                   {filteredData &&
                     filteredData.length > 0 &&
-                    !['Spark Line', 'Line', 'Sankey', 'Pie', 'Radar'].includes(config.visualizationType) && (
-                      <div ref={parentRef} style={{ width: `100%` }}>
-                        <ParentSize>
-                          {parent => (
-                            <LinearChart ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
-                          )}
-                        </ParentSize>
-                      </div>
-                    )}
+                    !['Spark Line', 'Line', 'Sankey', 'Pie', 'Radar', 'HeatMap'].includes(config.visualizationType) &&
+                    renderLinearChartWithParentSize()}
 
                   {filteredData && filteredData.length > 0 && config.visualizationType === 'Pie' && (
                     <ParentSize className='justify-content-center d-flex' style={{ width: `100%` }}>
@@ -1478,38 +1567,31 @@ const CdcChart: React.FC<CdcChartProps> = ({
                       )}
                     </ParentSize>
                   )}
+                  {filteredData && filteredData.length > 0 && config.visualizationType === 'HeatMap' && (
+                    <div
+                      ref={parentRef}
+                      style={{ width: '100%', height: `${calcInitialHeight(config, currentViewport) || 400}px` }}
+                    >
+                      <ParentSize>
+                        {parent => <HeatMap parentWidth={parent.width} parentHeight={parent.height} />}
+                      </ParentSize>
+                    </div>
+                  )}
                   {/* Line Chart */}
                   {filteredData &&
                     filteredData.length > 0 &&
                     config.visualizationType === 'Line' &&
-                    (convertLineToBarGraph ? (
-                      <div ref={parentRef} style={{ width: `100%` }}>
-                        <ParentSize>
-                          {parent => (
-                            <LinearChart ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
-                          )}
-                        </ParentSize>
-                      </div>
-                    ) : (
-                      <div ref={parentRef} style={{ width: '100%' }}>
-                        <ParentSize>
-                          {parent => {
-                            const labelMargin = 120
-                            const widthReduction =
-                              config.showLineSeriesLabels && (config.legend.position !== 'right' || config.legend.hide)
-                                ? labelMargin
-                                : 0
-                            return (
-                              <LinearChart
-                                ref={svgRef}
-                                parentWidth={parent.width - widthReduction}
-                                parentHeight={parent.height}
-                              />
-                            )
-                          }}
-                        </ParentSize>
-                      </div>
-                    ))}
+                    (convertLineToBarGraph
+                      ? renderLinearChartWithParentSize()
+                      : renderLinearChartWithParentSize(parent => {
+                          const labelMargin = 120
+                          const widthReduction =
+                            config.showLineSeriesLabels && (config.legend.position !== 'right' || config.legend.hide)
+                              ? labelMargin
+                              : 0
+
+                          return parent.width - widthReduction
+                        }))}
                   {/* Sparkline */}
                   {config.visualizationType === 'Spark Line' && (
                     <>
@@ -1521,7 +1603,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                         interactionLabel={interactionLabel}
                       />
                       {processedIntroText && (
-                        <section className='introText' style={{ padding: '0px 0 35px' }}>
+                        <section className='introText cove-prose' style={{ padding: '0px 0 35px' }}>
                           {parse(processedIntroText)}
                         </section>
                       )}
@@ -1529,7 +1611,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                         <ParentSize>{parent => <SparkLine width={parent.width} height={parent.height} />}</ParentSize>
                       </div>
                       {processedDescription && (
-                        <div className='subtext' style={{ padding: '35px 0 1.5rem' }}>
+                        <div className='subtext cove-prose' style={{ padding: '35px 0 1.5rem' }}>
                           {parse(processedDescription)}
                         </div>
                       )}
@@ -1546,6 +1628,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                 {!config.legend.hide &&
                   config.visualizationType !== 'Spark Line' &&
                   config.visualizationType !== 'Sankey' &&
+                  config.visualizationType !== 'HeatMap' &&
                   !(config.visualizationType === 'Warming Stripes' && config.legend?.style === 'gradient') &&
                   !(config.visualizationType === 'Warming Stripes' && config.smallMultiples?.mode) && (
                     <Legend
@@ -1557,6 +1640,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                 {config.visualizationType === 'Warming Stripes' &&
                   config.legend?.style === 'gradient' &&
                   !config.smallMultiples?.mode && <WarmingStripesGradientLegend />}
+                {config.visualizationType === 'HeatMap' && <HeatMapGradientLegend />}
               </LegendWrapper>
             </div>
           </VisualizationContent>

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

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import Chart from '../CdcChartComponent'
+import {
+  assertVisualizationRendered,
+  waitForPresence,
+  waitForEditor,
+  openAccordion,
+  MIN_ANIMATION_DELAY_MS
+} from '@cdc/core/helpers/testing'
+import altTextConfig from './_mock/alt_text_metadata.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Accessible Alt Text',
+  component: Chart,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Demonstrates SVG accessibility: auto-generated aria-label with optional configurable description concatenated into the label for reliable screen reader support.'
+      }
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof Chart>
+
+export const MetadataDescription: Story = {
+  args: {
+    config: {
+      ...altTextConfig,
+      altText: { type: 'metadata', metadataKey: 'altDescription' }
+    },
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Description pulled from dataMetadata is concatenated into the aria-label after the auto-generated title for reliable screen reader support.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    const svg = await waitForPresence('svg[role="img"]', canvasElement)
+
+    const expected = `Line chart with the title: COVID-19 Test Positivity. ${altTextConfig.dataMetadata.altDescription}`
+    expect(svg?.getAttribute('aria-label')).toBe(expected)
+  }
+}
+
+export const StaticDescription: Story = {
+  args: {
+    config: {
+      ...altTextConfig,
+      altText: {
+        type: 'static',
+        value: 'COVID-19 positivity has doubled in 8 weeks, suggesting increased community transmission.'
+      }
+    },
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Static manually written description concatenated with the auto-generated title.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    const svg = await waitForPresence('svg[role="img"]', canvasElement)
+
+    expect(svg?.getAttribute('aria-label')).toBe(
+      'Line chart with the title: COVID-19 Test Positivity. COVID-19 positivity has doubled in 8 weeks, suggesting increased community transmission.'
+    )
+  }
+}
+
+export const AutoGenerated: Story = {
+  args: {
+    config: altTextConfig,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'No altText configured. Falls back to the auto-generated aria-label: "Line chart with the title: COVID-19 Test Positivity".'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    const svg = await waitForPresence('svg[role="img"]', canvasElement)
+
+    expect(svg?.getAttribute('aria-label')).toBe('Line chart with the title: COVID-19 Test Positivity')
+  }
+}
+
+export const EditorWithMetadata: Story = {
+  args: {
+    config: {
+      ...altTextConfig,
+      altText: { type: 'metadata', metadataKey: 'altDescription' }
+    },
+    isEditor: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Editor mode showing the alt text description control in the General accordion with metadata-driven description.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+
+    if (MIN_ANIMATION_DELAY_MS > 0) {
+      await new Promise(resolve => setTimeout(resolve, MIN_ANIMATION_DELAY_MS))
+    }
+
+    await openAccordion(canvas, 'General')
+
+    if (MIN_ANIMATION_DELAY_MS > 0) {
+      await new Promise(resolve => setTimeout(resolve, MIN_ANIMATION_DELAY_MS))
+    }
+
+    const descPreview = await waitForPresence('[data-testid="alt-text-desc-preview"]', canvasElement)
+    expect(descPreview?.textContent).toContain('COVID-19 test positivity')
+  }
+}

package/src/_stories/{Chart.HTMLInDataTable.stories.tsx → Chart.HTMLInDataTable.smoke.stories.tsx}

@@ -493,6 +493,16 @@ export const PieChartWithHTMLFootnotes: Story = {
           Footnote: '<strong>7 states</strong> with 60-79% coverage<br>Target: Move to <em>high category</em>'
         }
       ],
+      xAxis: {
+        label: 'Coverage Category',
+        dataKey: 'Category',
+        type: 'categorical'
+      },
+      yAxis: {
+        label: 'Percentage',
+        dataKey: 'Percentage',
+        type: 'linear'
+      },
       series: [
         {
           dataKey: 'Percentage',