@cdc/chart 4.26.4 → 4.26.5

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)
@@ -579,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 = ''
@@ -870,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 })
   }
@@ -1199,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',
@@ -1219,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}
@@ -1241,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) {
@@ -1252,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))
@@ -1275,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'>
@@ -1287,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}
@@ -1403,12 +1495,13 @@ const CdcChart: React.FC<CdcChartProps> = ({
             }
             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'
               />
             }
           >
@@ -1446,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%` }}>
@@ -1481,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' && (
                     <>
@@ -1549,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
@@ -1560,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')
+  }
+}