@cdc/chart 4.26.1 → 4.26.2

package/src/components/WarmingStripes/WarmingStripes.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react'
+import { useContext, useState, useCallback, useEffect } from 'react'
 import ConfigContext from '../../ConfigContext'
 import { Group } from '@visx/group'
 import { scaleSequential } from 'd3-scale'
@@ -6,7 +6,6 @@ import { interpolateRgbBasis } from 'd3-interpolate'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
-import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
 import { getFallbackColorPalette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
 import { paletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
 import { hasTrackedHover, markHoverTracked } from '../../utils/analyticsTracking'
@@ -16,10 +15,26 @@ type WarmingStripesProps = {
   yScale: any
   xMax: number
   yMax: number
+  synchronizedXValue?: any
+  showTooltip: (args: any) => void
+  handleTooltipMouseOff: () => void
 }
 
-const WarmingStripes = ({ xMax, yMax }: WarmingStripesProps) => {
-  const { transformedData: data, config, formatNumber, interactionLabel, currentViewport } = useContext(ConfigContext)
+const WarmingStripes = ({
+  xMax,
+  yMax,
+  synchronizedXValue,
+  showTooltip,
+  handleTooltipMouseOff
+}: WarmingStripesProps) => {
+  const {
+    transformedData: data,
+    config,
+    formatNumber,
+    interactionLabel,
+    currentViewport,
+    handleSmallMultipleHover
+  } = useContext(ConfigContext)
 
   const [currentHover, setCurrentHover] = useState<number | null>(null)
 
@@ -28,18 +43,14 @@ const WarmingStripes = ({ xMax, yMax }: WarmingStripesProps) => {
   const valueKey = config.runtime.seriesKeys?.[0]
   const xAxisDataKey = config.runtime.originalXAxis?.dataKey || config.xAxis?.dataKey
 
-  if (!valueKey || !xAxisDataKey || !data || data.length === 0) {
-    return null
-  }
-
   // Determine max stripes based on viewport
   const isMobile = ['xxs', 'xs', 'sm', 'md'].includes(currentViewport)
   const maxStripes = isMobile ? 60 : 200
 
   // Sample data if we have more than the max allowed stripes
-  let displayData = data
-  if (data.length > maxStripes) {
-    const step = data.length / maxStripes
+  let displayData = data || []
+  if (displayData.length > maxStripes) {
+    const step = displayData.length / maxStripes
     displayData = []
     for (let i = 0; i < maxStripes; i++) {
       const index = Math.floor(i * step)
@@ -48,7 +59,7 @@ const WarmingStripes = ({ xMax, yMax }: WarmingStripesProps) => {
   }
 
   // Calculate the min and max values for the color scale
-  const values = data.map(d => Number(d[valueKey])).filter(v => !isNaN(v))
+  const values = displayData.map(d => Number(d[valueKey])).filter(v => !isNaN(v))
   const minValue = Math.min(...values)
   const maxValue = Math.max(...values)
 
@@ -94,15 +105,54 @@ const WarmingStripes = ({ xMax, yMax }: WarmingStripesProps) => {
   // Calculate stripe width based on available space and display data
   const stripeWidth = xMax / displayData.length
 
-  const handleTooltip = (item: any) => {
-    const xValue = item[xAxisDataKey]
-    const yValue = item[valueKey]
-    const formattedValue = formatNumber(yValue, 'left')
+  // Build tooltip data in COVE format and trigger showTooltip
+  const showStripeTooltip = useCallback(
+    (item: any, index: number, mouseY?: number) => {
+      const value = Number(item[valueKey])
+      if (isNaN(value)) return
+
+      const formattedValue = formatNumber(value, 'left')
+
+      // Pass raw x-axis value — TooltipListItem handles date formatting
+      const tooltipItems = [
+        [xAxisDataKey, item[xAxisDataKey]],
+        [valueKey, formattedValue, 'left']
+      ]
+
+      const dataXPosition = index * stripeWidth + stripeWidth / 2 + Number(config.yAxis.size)
+      const dataYPosition = mouseY ?? yMax / 2
+
+      showTooltip({
+        tooltipLeft: dataXPosition + 10,
+        tooltipTop: dataYPosition,
+        tooltipData: {
+          data: tooltipItems,
+          dataXPosition: dataXPosition + 10,
+          dataYPosition
+        }
+      })
+    },
+    [valueKey, xAxisDataKey, stripeWidth, config.yAxis.size, yMax, formatNumber, showTooltip]
+  )
+
+  // Handle incoming synchronized tooltip from sibling small multiple tiles
+  useEffect(() => {
+    if (synchronizedXValue === null || synchronizedXValue === undefined) {
+      setCurrentHover(null)
+      handleTooltipMouseOff()
+      return
+    }
+
+    const matchIndex = displayData.findIndex(item => String(item[xAxisDataKey]) === String(synchronizedXValue))
+
+    if (matchIndex >= 0) {
+      setCurrentHover(matchIndex)
+      showStripeTooltip(displayData[matchIndex], matchIndex)
+    }
+  }, [synchronizedXValue])
 
-    return `<div>
-      <strong>${config.xAxis.label || xAxisDataKey}:</strong> ${xValue}<br/>
-      <strong>${config.runtime.seriesLabels?.[valueKey] || valueKey}:</strong> ${formattedValue}
-    </div>`
+  if (!valueKey || !xAxisDataKey || !data || data.length === 0) {
+    return null
   }
 
   return (
@@ -126,13 +176,10 @@ const WarmingStripes = ({ xMax, yMax }: WarmingStripesProps) => {
             fill={fillColor}
             fillOpacity={isMuted ? 0.5 : 1}
             stroke='none'
-            data-tooltip-html={handleTooltip(item)}
-            data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
             tabIndex={-1}
             style={{ cursor: 'pointer', transition: 'fill-opacity 0.2s ease' }}
-            onMouseEnter={() => {
+            onMouseEnter={e => {
               if (currentHover !== index) {
-                // Only publish analytics event once per visualization (shared tracking)
                 const vizId = String(config.runtime.uniqueId)
                 if (!hasTrackedHover(vizId)) {
                   publishAnalyticsEvent({
@@ -148,8 +195,31 @@ const WarmingStripes = ({ xMax, yMax }: WarmingStripesProps) => {
                 }
                 setCurrentHover(index)
               }
+
+              // Show COVE tooltip using mouse Y position
+              const svgEl = (e.currentTarget as SVGRectElement).ownerSVGElement
+              const svgRect = svgEl?.getBoundingClientRect()
+              const mouseY = svgRect ? e.clientY - svgRect.top : yMax / 2
+              showStripeTooltip(item, index, mouseY)
+
+              if (handleSmallMultipleHover) {
+                handleSmallMultipleHover(item[xAxisDataKey], yMax / 2)
+              }
+            }}
+            onMouseMove={e => {
+              // Update tooltip Y position as mouse moves within the stripe
+              const svgEl = (e.currentTarget as SVGRectElement).ownerSVGElement
+              const svgRect = svgEl?.getBoundingClientRect()
+              const mouseY = svgRect ? e.clientY - svgRect.top : yMax / 2
+              showStripeTooltip(item, index, mouseY)
+            }}
+            onMouseLeave={() => {
+              setCurrentHover(null)
+              handleTooltipMouseOff()
+              if (handleSmallMultipleHover) {
+                handleSmallMultipleHover(null, null)
+              }
             }}
-            onMouseLeave={() => setCurrentHover(null)}
           />
         )
       })}

package/src/data/initial-state.js

@@ -45,7 +45,8 @@ const createInitialState = () => {
       showSuppressedSymbol: true,
       showZeroValueData: true,
       hideNullValue: true,
-      palette: paletteDefaults
+      palette: paletteDefaults,
+      useIntelligentLineChartLabels: false
     },
     padding: {
       left: 5,
@@ -298,6 +299,18 @@ const createInitialState = () => {
     area: {
       isStacked: false
     },
+    radar: {
+      gridRings: 5,
+      showGridRings: true,
+      gridRingStyle: 'polygons',
+      scaleMin: 0,
+      scaleMax: '',
+      fillOpacity: 0.3,
+      showPoints: true,
+      pointRadius: 4,
+      strokeWidth: 2,
+      axisLabelOffset: 15
+    },
     sankey: {
       title: {
         defaultColor: 'black'

package/src/helpers/getExcludedData.ts

@@ -2,6 +2,10 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 import _ from 'lodash'
 import { ChartConfig } from '../types/ChartConfig'
 export const getExcludedData = (newConfig: ChartConfig, data: object[]) => {
+  if (!Array.isArray(data)) {
+    console.warn('COVE: getExcludedData received non-array data:', typeof data)
+    return []
+  }
   let newExcludedData = data
   if (newConfig.exclusions && newConfig.exclusions.active) {
     if (newConfig.xAxis.type === 'categorical' && newConfig.exclusions.keys?.length > 0) {

package/src/helpers/handleChartAriaLabels.ts

@@ -1,19 +1,19 @@
-export const handleChartAriaLabels = (state, testing = false) => {
-  if (testing) console.log(`handleChartAriaLabels Testing On:`, state) // eslint-disable-line
-  try {
-    if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
-    let ariaLabel = ''
-
-    if (state.visualizationType) {
-      ariaLabel += `${state.visualizationType} chart`
-    }
-
-    if (state.title && state.visualizationType) {
-      ariaLabel += ` with the title: ${state.title}`
-    }
-
-    return ariaLabel
-  } catch (e) {
-    console.error('COVE: ', e.message) // eslint-disable-line
-  }
-}
+export const handleChartAriaLabels = state => {
+  try {
+    if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
+    let ariaLabel = ''
+
+    if (state.visualizationType) {
+      ariaLabel += `${state.visualizationType} chart`
+    }
+
+    if (state.title && state.visualizationType) {
+      ariaLabel += ` with the title: ${state.title}`
+    }
+
+    return ariaLabel
+  } catch (e) {
+    console.error('COVE: ', e.message) // eslint-disable-line
+    return 'Data visualization container'
+  }
+}

package/src/helpers/handleLineType.ts

@@ -1,18 +1,22 @@
-export const handleLineType = lineType => {
-  switch (lineType) {
-    case 'dashed-sm':
-      return '5 5'
-    case 'Dashed Small':
-      return '5 5'
-    case 'dashed-md':
-      return '10 5'
-    case 'Dashed Medium':
-      return '10 5'
-    case 'dashed-lg':
-      return '15 5'
-    case 'Dashed Large':
-      return '15 5'
-    default:
-      return 0
-  }
-}
+const DASH_PATTERNS = {
+  SMALL: '5 5',
+  MEDIUM: '10 5',
+  LARGE: '15 5',
+  SOLID: 0
+} as const
+
+export const handleLineType = (lineType: string): string | number => {
+  switch (lineType) {
+    case 'dashed-sm':
+    case 'Dashed Small':
+      return DASH_PATTERNS.SMALL
+    case 'dashed-md':
+    case 'Dashed Medium':
+      return DASH_PATTERNS.MEDIUM
+    case 'dashed-lg':
+    case 'Dashed Large':
+      return DASH_PATTERNS.LARGE
+    default:
+      return DASH_PATTERNS.SOLID
+  }
+}

package/src/hooks/useProgrammaticTooltip.ts

@@ -8,6 +8,7 @@ interface UseProgrammaticTooltipProps {
   setShowHoverLine: (show: boolean) => void
   handleTooltipMouseOver: (event: MouseEvent, additionalChartData?: any) => void
   hideTooltip: () => void
+  setSynchronizedXValue?: (value: any) => void
 }
 
 /**
@@ -21,7 +22,8 @@ export const useProgrammaticTooltip = ({
   setPoint,
   setShowHoverLine,
   handleTooltipMouseOver,
-  hideTooltip
+  hideTooltip,
+  setSynchronizedXValue
 }: UseProgrammaticTooltipProps) => {
   // Internal SVG ref for DOM manipulation
   const internalSvgRef = useRef<SVGSVGElement>(null)
@@ -50,6 +52,15 @@ export const useProgrammaticTooltip = ({
          * @param {number} yCoordinate - Exact Y coordinate to use
          */
         triggerTooltipAtDataValue: (xAxisValue: any, yCoordinate: number) => {
+          // Warming Stripes positions rects by index (with data sampling), not via xScale,
+          // so synthetic mouse events won't map to the correct data points.
+          // Route through synchronizedXValue state instead, which WarmingStripes
+          // resolves to the matching stripe and calls showTooltip directly.
+          if (config.visualizationType === 'Warming Stripes') {
+            setSynchronizedXValue?.(xAxisValue)
+            return
+          }
+
           const pixelX = getCoordinateFromXValue(xAxisValue)
           const adjustedX = pixelX + Number(config.yAxis.size || 0)
 
@@ -86,10 +97,20 @@ export const useProgrammaticTooltip = ({
         hideTooltip: () => {
           hideTooltip()
           setShowHoverLine(false)
+          setSynchronizedXValue?.(null)
         }
       })
     },
-    [getCoordinateFromXValue, config.yAxis.size, setPoint, setShowHoverLine, handleTooltipMouseOver, hideTooltip]
+    [
+      getCoordinateFromXValue,
+      config.yAxis.size,
+      config.visualizationType,
+      setPoint,
+      setShowHoverLine,
+      handleTooltipMouseOver,
+      hideTooltip,
+      setSynchronizedXValue
+    ]
   )
 
   return internalSvgRef

package/src/hooks/useScales.ts

@@ -121,6 +121,11 @@ const useScales = (properties: useScaleProps) => {
     range: [0, xMax]
   })
 
+  let yScaleAnnotation = scaleLinear({
+    domain: [0, 100],
+    range: [0, yMax]
+  })
+
   // handle  Horizontal bars
   if (isHorizontal) {
     xScale = composeXScale({ min: min * 1.03, max, xMax, config })
@@ -372,6 +377,7 @@ const useScales = (properties: useScaleProps) => {
     g2xScale,
     xScaleNoPadding,
     xScaleAnnotation,
+    yScaleAnnotation,
     min,
     max,
     leftMax,
@@ -387,6 +393,7 @@ const getFirstDayOfMonth = ms => {
 }
 
 const dateFormatHasMonthButNoDays = dateFormat => {
+  if (!dateFormat) return false
   return (
     (dateFormat.includes('%b') ||
       dateFormat.includes('%B') ||

package/src/hooks/useTooltip.tsx

@@ -592,6 +592,7 @@ export const useTooltip = props => {
       case 'Line':
       case 'Area Chart':
       case 'Pie':
+      case 'Horizon Chart':
         return common
       case 'Combo':
         return [...common, ...ciItems]
@@ -600,6 +601,8 @@ export const useTooltip = props => {
 
       case 'Bar':
         return orientation === 'vertical' ? common : [runtime.yAxis.dataKey, ...runtime?.seriesKeys]
+      case 'Warming Stripes':
+        return common
       default:
         throw new Error('No visualization type found in handleTooltipMouseOver')
     }

package/src/scss/main.scss

@@ -146,6 +146,11 @@
       cursor: pointer;
       transition: 0.2s all;
 
+      &.not-clickable,
+      &.not-clickable .legend-item {
+        cursor: default;
+      }
+
       &.inactive {
         opacity: 0.5;
         transition: 0.2s all;

package/src/selectors/README.md

@@ -0,0 +1,68 @@
+# Config Selectors
+
+Typed selector functions and hooks for extracting memoizable slices of chart configuration.
+
+## Purpose
+
+These selectors help:
+1. **Reduce coupling** - Components depend on specific config slices, not the entire config object
+2. **Improve memoization** - Hooks use specific dependencies instead of the full config
+3. **Enhance testability** - Selectors can be easily mocked in tests
+4. **Document config usage** - Selectors serve as documentation for which config properties are used together
+
+## Usage
+
+### Direct Selectors
+
+```typescript
+import { selectAxisConfig, selectVisualizationConfig } from '../selectors'
+
+// In a component
+const axisConfig = selectAxisConfig(config)
+// Returns: { xAxis, yAxis, runtime: { xAxis, yAxis, originalXAxis } }
+```
+
+### Hook Versions (Memoized)
+
+```typescript
+import { useAxisConfig, useVisualizationConfig } from '../selectors'
+
+// In a component - automatically memoized
+const axisConfig = useAxisConfig(config)
+const vizConfig = useVisualizationConfig(config)
+```
+
+## Available Selectors
+
+| Selector | Hook | Description |
+|----------|------|-------------|
+| `selectAxisConfig` | `useAxisConfig` | X/Y axis configuration |
+| `selectVisualizationConfig` | `useVisualizationConfig` | Chart type and orientation |
+| `selectDisplayConfig` | `useDisplayConfig` | Animation, debug flags |
+| `selectTooltipConfig` | `useTooltipConfig` | Tooltip settings |
+| `selectLegendConfig` | - | Legend position and visibility |
+| `selectDataFormatConfig` | - | Number formatting options |
+| `selectChartMessages` | - | UI message strings |
+| `selectBrushConfig` | - | Brush/filter settings |
+| `selectForestPlotConfig` | - | Forest plot specific options |
+| `selectSmallMultiplesConfig` | - | Small multiples mode |
+
+## Type Exports
+
+Each selector has a corresponding type export:
+
+```typescript
+import type { AxisConfig, VisualizationConfig } from '../selectors'
+```
+
+## Adding New Selectors
+
+1. Add the selector function that extracts config properties
+2. Optionally add a hook version with proper dependencies
+3. Export the type using `ReturnType<typeof selectXxx>`
+4. Update this README
+
+## Notes
+
+- Selectors are created but integration into LinearChart is deferred
+- Future work: gradually replace direct `config.x.y` accesses with selector usage

package/src/store/chart.reducer.ts

@@ -75,5 +75,7 @@ export const reducer = (state: ChartState, action: ChartActions): ChartState =>
       return { ...state, isDraggingAnnotation: action.payload }
     case 'SET_BRUSH_DATA':
       return { ...state, brushData: action.payload }
+    default:
+      return state
   }
 }

package/src/types/ChartConfig.ts

@@ -1,6 +1,7 @@
 import { Axis } from '@cdc/core/types/Axis'
 import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
 import { type ForestPlotConfigSettings } from './ForestPlot'
+import { type HorizonConfigSettings } from './Horizon'
 import { type Column } from '@cdc/core/types/Column'
 import { type Series } from '@cdc/core/types/Series'
 import { Runtime } from '@cdc/core/types/Runtime'
@@ -18,6 +19,7 @@ type General = CoreGeneral & {
     customColors?: string[]
     customColorsOrdered?: string[]
   }
+  useIntelligentLineChartLabels?: boolean
 }
 import { type Link } from './../components/Sankey/types'
 import { type DataDescription } from '@cdc/core/types/DataDescription'
@@ -39,9 +41,11 @@ export type VisualizationType =
   | 'Box Plot'
   | 'Deviation Bar'
   | 'Forest Plot'
+  | 'Horizon Chart'
   | 'Line'
   | 'Paired Bar'
   | 'Pie'
+  | 'Radar'
   | 'Scatter Plot'
   | 'Spark Line'
   | 'Combo'
@@ -172,6 +176,7 @@ export type AllChartsConfig = {
     mobileVertical: number
   }
   highlightedBarValues: { value: any; color: string; borderWidth: number; legendLabel: string }[]
+  horizon?: HorizonConfigSettings
   introText: string
   isLollipopChart: boolean
   isLegendValue: boolean
@@ -267,6 +272,19 @@ export type AllChartsConfig = {
       default: string
     }
   }
+  radar?: {
+    gridRings: number
+    showGridRings: boolean
+    gridRingStyle: 'polygons' | 'circles'
+    scaleMin: number
+    scaleMax: number | string
+    showFill: boolean
+    fillOpacity: number
+    showPoints: boolean
+    pointRadius: number
+    strokeWidth: number
+    axisLabelOffset: number
+  }
 } & MarkupConfig
 
 type ForestPlotConfig = {

package/src/types/ChartContext.ts

@@ -36,6 +36,7 @@ type SharedChartContext = {
   setLegendIsolateValues?: Function
   svgRef?: React.RefObject<SVGSVGElement>
   handleSmallMultipleHover?: (xAxisValue: any, yCoordinate: number) => void
+  visibleAnnotations?: Annotation[]
 }
 
 // Line Chart Specific Context

package/src/types/Horizon.ts

@@ -0,0 +1,64 @@
+/**
+ * Configuration settings for Horizon Chart visualization
+ *
+ * Horizon charts display multiple time series as stacked rows,
+ * with each series shown as layered bands to compress vertical space.
+ */
+
+/**
+ * Palette configuration structure (matches general.palette structure)
+ */
+export type HorizonPalette = {
+  name?: string
+  version?: '1.0' | '2.0'
+  isReversed?: boolean
+  customColors?: string[]
+  customColorsOrdered?: string[]
+}
+
+export type HorizonConfigSettings = {
+  /**
+   * Number of horizon layers/bands per series
+   * More layers = finer granularity, but denser visual
+   * @default 4
+   */
+  numLayers: number
+
+  /**
+   * Rendering mode for data values
+   * - 'offset': All values treated as positive (absolute values)
+   * - 'mirror': Negative values mirrored with contrasting colors. Not currently used.
+   * @default 'offset'
+   */
+  mode: 'offset' | 'mirror'
+
+  /**
+   * Gap in pixels between series bands
+   * Bands will fill available chart height minus gaps
+   * @default 15
+   */
+  bandGap: number
+
+  /**
+   * Padding in pixels below the bottom band (above x-axis)
+   * @default 15
+   */
+  bottomPadding: number
+
+  /**
+   * Optional secondary palette for negative values (mirror mode only)
+   * Uses same structure as general.palette for consistency
+   * Not exposed in UI initially - scaffolded for future use
+   */
+  negativePalette?: HorizonPalette
+}
+
+/**
+ * Default configuration for Horizon charts
+ */
+export const HORIZON_DEFAULTS: HorizonConfigSettings = {
+  numLayers: 4,
+  mode: 'offset',
+  bandGap: 15,
+  bottomPadding: 15
+}