@cdc/chart 4.25.11 → 4.26.2

package/src/hooks/useChartHoverAnalytics.tsx

@@ -1,6 +1,6 @@
-import { useRef } from 'react'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { hasTrackedHover, markHoverTracked } from '../utils/analyticsTracking'
 
 type UseChartHoverAnalyticsParams = {
   config: any
@@ -9,14 +9,16 @@ type UseChartHoverAnalyticsParams = {
 
 /**
  * Hook to track analytics when user enters the chart area
- * Fires once per chart entry, not on every hover interaction
+ * Fires once per visualization, persists across component remounts
  */
 export const useChartHoverAnalytics = ({ config, interactionLabel = '' }: UseChartHoverAnalyticsParams) => {
-  const hasTrackedRef = useRef(false)
-
   const handleChartMouseEnter = () => {
-    // Only track if we have an interaction label and haven't tracked yet
-    if (!interactionLabel || hasTrackedRef.current) return
+    // Only track if we have an interaction label
+    if (!interactionLabel) return
+
+    // Use unique ID to track per visualization
+    const vizId = String(config.runtime.uniqueId)
+    if (hasTrackedHover(vizId)) return
 
     // Publish the analytics event
     publishAnalyticsEvent({
@@ -29,12 +31,11 @@ export const useChartHoverAnalytics = ({ config, interactionLabel = '' }: UseCha
     })
 
     // Mark as tracked so we don't fire again
-    hasTrackedRef.current = true
+    markHoverTracked(vizId)
   }
 
   const handleChartMouseLeave = () => {
-    // Reset tracking when mouse leaves so next entry will track
-    hasTrackedRef.current = false
+    // No-op: We no longer reset tracking on mouse leave
   }
 
   return {

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 })
@@ -133,7 +138,17 @@ const useScales = (properties: useScaleProps) => {
   // handle  Vertical bars
   if (!isHorizontal) {
     xScale = composeScaleBand(xAxisDataMapped, [0, xMax], paddingRange)
-    yScale = composeYScale({ min, max, yMax, config, leftMax })
+    // For categorical y-axis, use [0, max] domain and [yMax, 0] range to match CategoricalYAxis
+    // This ensures line data aligns with categorical bars and bars go to 100% height
+    if (config.yAxis.type === 'categorical') {
+      yScale = scaleLinear({
+        domain: [0, max],
+        range: [yMax, 0],
+        clamp: true
+      })
+    } else {
+      yScale = composeYScale({ min, max, yMax, config, leftMax })
+    }
     seriesScale = composeScaleBand(seriesDomain, [0, xScale.bandwidth()], 0)
   }
 
@@ -362,6 +377,7 @@ const useScales = (properties: useScaleProps) => {
     g2xScale,
     xScaleNoPadding,
     xScaleAnnotation,
+    yScaleAnnotation,
     min,
     max,
     leftMax,
@@ -377,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

@@ -105,7 +105,7 @@ export const useTooltip = props => {
         addColCommas: column.commas
       }
 
-      const pieColumnData = additionalChartData?.arc?.data[column.name]
+      const pieColumnData = additionalChartData?.data?.[column.name]
       const columnData =
         config.tooltips.singleSeries && visualizationType === 'Line'
           ? resolvedScaleValues.filter(
@@ -145,7 +145,7 @@ export const useTooltip = props => {
         tooltipItems.push(
           [config.xAxis.dataKey, pieData[config.xAxis.dataKey]],
           [
-            config.runtime.yAxis.dataKey,
+            config.runtime.yAxis.label || config.runtime.yAxis.dataKey,
             showPiePercent ? pctString(actualPieValue) : formatNumber(pieData[config.runtime.yAxis.dataKey])
           ],
           showPiePercent ? [] : ['Percent', pctString(pctOf360)]
@@ -260,11 +260,30 @@ export const useTooltip = props => {
     const dataXPosition = eventSvgCoords.x + 10
     const dataYPosition = eventSvgCoords.y
 
+    // Helper to strip <a> tags and only show link text
+    function stripLinkTags(str) {
+      if (typeof str !== 'string') return str
+      // Remove HTML <a> tags, keep inner text
+      return str.replace(/<a [^>]*>(.*?)<\/a>/gi, '$1')
+    }
+
+    // Strip link tags from all tooltip values
+    const cleanTooltipItems = [...tooltipItems, ...additionalTooltipItems].map(item => {
+      // item can be [key, value] or [key, value, axisPosition]
+      if (Array.isArray(item)) {
+        // Only strip from value (item[1])
+        const newItem = [...item]
+        newItem[1] = stripLinkTags(newItem[1])
+        return newItem
+      }
+      return item
+    })
+
     const tooltipInformation = {
       tooltipLeft: dataXPosition,
       tooltipTop: dataYPosition,
       tooltipData: {
-        data: [...tooltipItems, ...additionalTooltipItems],
+        data: cleanTooltipItems,
         dataXPosition,
         dataYPosition
       }
@@ -523,14 +542,16 @@ export const useTooltip = props => {
     includedSeries.push(...dynamicDataCategories)
 
     if (config.visualizationType === 'Forecasting') {
-      config.runtime.series.map(s => {
-        s.confidenceIntervals.map(c => {
-          if (c.showInTooltip) {
-            includedSeries.push(c.high)
-            includedSeries.push(c.low)
-          }
+      config.runtime.series
+        .filter(s => s.type === 'Forecasting' && s.confidenceIntervals)
+        .forEach(s => {
+          s.confidenceIntervals.forEach(c => {
+            if (c.showInTooltip) {
+              includedSeries.push(c.high)
+              includedSeries.push(c.low)
+            }
+          })
         })
-      })
     }
 
     const colNames = Object.values(config.columns).map(column => column.name)
@@ -571,6 +592,7 @@ export const useTooltip = props => {
       case 'Line':
       case 'Area Chart':
       case 'Pie':
+      case 'Horizon Chart':
         return common
       case 'Combo':
         return [...common, ...ciItems]
@@ -579,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/DataTable.scss

@@ -1,8 +1,4 @@
 .data-table-container {
-  &.brush-active {
-    margin: 80px 0 0;
-  }
-
   width: 100%;
 }
 

package/src/scss/main.scss

@@ -50,9 +50,6 @@
   .subtext,
   .subtext--responsive-ticks,
   .section-subtext {
-    &--brush-active {
-      margin-top: 3rem !important;
-    }
   }
 
   .type-pie {
@@ -149,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;
@@ -325,6 +327,23 @@
       margin-bottom: 2.5em;
     }
 
+    // Brush touch support
+    .brush-overlay {
+      touch-action: none;
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      user-select: none;
+
+      .visx-brush,
+      .visx-brush-overlay,
+      .visx-brush-selection,
+      .visx-brush-handle-left,
+      .visx-brush-handle-right {
+        touch-action: none;
+        cursor: pointer;
+      }
+    }
+
     svg.dragging-annotation * {
       user-select: none;
     }

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/test/CdcChart.test.jsx

@@ -7,5 +7,5 @@ describe('Chart', () => {
     const pkgDir = path.join(__dirname, '..')
     const result = testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
-  })
+  }, 300000)
 })

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,15 +41,18 @@ export type VisualizationType =
   | 'Box Plot'
   | 'Deviation Bar'
   | 'Forest Plot'
+  | 'Horizon Chart'
   | 'Line'
   | 'Paired Bar'
   | 'Pie'
+  | 'Radar'
   | 'Scatter Plot'
   | 'Spark Line'
   | 'Combo'
   | 'Forecasting'
   | 'Sankey'
   | 'Bump Chart'
+  | 'Warming Stripes'
 export interface PreliminaryDataItem {
   column: string
   displayLegend: boolean
@@ -103,6 +108,7 @@ type Legend = CoreLegend & {
   order: 'dataColumn' | 'asc' | 'desc'
   orderedValues: Label[]
   tickRotation: string
+  warmingStripesIntervals?: number
   hideBorder: {
     side: boolean
     topBottom: boolean
@@ -170,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
@@ -218,6 +225,7 @@ export type AllChartsConfig = {
   table: Table
   tipRounding: string
   title: string
+  titleStyle?: 'legacy' | 'large' | 'small'
   tooltips: {
     singleSeries: boolean
     opacity: number
@@ -264,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
+}

package/src/types/Label.ts

@@ -4,4 +4,5 @@ export type Label = {
   text: string
   value: string
   icon?: any
+  colors?: string[]
 }

package/src/utils/analyticsTracking.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared analytics tracking to ensure events only fire once per visualization
+ * Tracks at module level to persist across component remounts
+ */
+const trackedHoverEvents = new Set<string>()
+
+/**
+ * Check if a hover event has been tracked for a given visualization ID
+ */
+export const hasTrackedHover = (vizId: string): boolean => {
+  return trackedHoverEvents.has(vizId)
+}
+
+/**
+ * Mark a visualization as having had its hover event tracked
+ */
+export const markHoverTracked = (vizId: string): void => {
+  trackedHoverEvents.add(vizId)
+}