@cdc/chart 4.26.1 → 4.26.3

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -16,9 +16,11 @@ export const useEditorPermissions = () => {
     'Deviation Bar',
     'Forecasting',
     // 'Forest Plot',
+    'Horizon Chart',
     'Line',
     'Paired Bar',
     'Pie',
+    'Radar',
     'Scatter Plot',
     'Spark Line',
     'Sankey',
@@ -26,7 +28,7 @@ export const useEditorPermissions = () => {
   ]
 
   const visSupportsDateCategoryAxis = () => {
-    const disabledCharts = ['Forest Plot', 'Sankey']
+    const disabledCharts = ['Forest Plot', 'Radar', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -55,16 +57,30 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const visSupportsClickingLegend = () => {
+    const disabledCharts = ['Horizon Chart']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsDataAnnotations = () => {
+    const enabledCharts = ['Line', 'Bar', 'Combo', 'Area Chart', 'Forecasting']
+    if (enabledCharts.includes(visualizationType) && config.orientation !== 'horizontal') return true
+    return false
+  }
+
   const visHasLabelOnData = () => {
     const disabledCharts = [
       'Area Chart',
       'Box Plot',
+      'Bump Chart',
+      'Forest Plot',
+      'Horizon Chart',
       'Pie',
+      'Radar',
+      'Sankey',
       'Scatter Plot',
-      'Forest Plot',
       'Spark Line',
-      'Sankey',
-      'Bump Chart',
       'Warming Stripes'
     ]
     if (disabledCharts.includes(visualizationType)) return false
@@ -74,12 +90,13 @@ export const useEditorPermissions = () => {
   const visCanAnimate = () => {
     const disabledCharts = [
       'Area Chart',
-      'Scatter Plot',
       'Box Plot',
+      'Bump Chart',
       'Forest Plot',
-      'Spark Line',
+      'Radar',
       'Sankey',
-      'Bump Chart',
+      'Scatter Plot',
+      'Spark Line',
       'Warming Stripes'
     ]
     if (disabledCharts.includes(visualizationType)) return false
@@ -145,10 +162,11 @@ export const useEditorPermissions = () => {
   }
   const visHasBrushChart = () => {
     if (config.xAxis.type === 'categorical') return false
-    // Allow Line charts, vertical Bar charts (both stacked and grouped), and vertical Area charts
+    // Allow Line charts, vertical Bar charts (both stacked and grouped), vertical Area charts, and Combo charts
     if (visualizationType === 'Line' && orientation === 'vertical') return true
     if (visualizationType === 'Bar' && orientation === 'vertical') return true
     if (visualizationType === 'Area Chart' && orientation === 'vertical') return true
+    if (visualizationType === 'Combo' && orientation === 'vertical') return true
     return false
   }
 
@@ -256,7 +274,16 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsRegions = () => {
-    const disabledCharts = ['Forest Plot', 'Pie', 'Paired Bar', 'Spark Line', 'Sankey', 'Warming Stripes']
+    const disabledCharts = [
+      'Forest Plot',
+      'Horizon Chart',
+      'Pie',
+      'Paired Bar',
+      'Radar',
+      'Spark Line',
+      'Sankey',
+      'Warming Stripes'
+    ]
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -326,13 +353,13 @@ export const useEditorPermissions = () => {
   }
   const visSupportsMobileChartHeight = () => {
     // TODO: this is a soft release. Support should eventually match visSupportsChartHeight
-    const enabledCharts = ['Bar', 'Line', 'Combo', 'Area Chart']
+    const enabledCharts = ['Bar', 'Line', 'Combo', 'Area Chart', 'Radar']
     if (enabledCharts.includes(visualizationType)) return true
     return false
   }
 
   const visSupportsLeftValueAxis = () => {
-    const disabledCharts = ['Spark Line', 'Sankey', 'Warming Stripes']
+    const disabledCharts = ['Radar', 'Spark Line', 'Sankey', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -417,56 +444,58 @@ export const useEditorPermissions = () => {
   return {
     enabledChartTypes,
     visCanAnimate,
+    visHasaAdditionalLabelsOnBars,
     visHasAnchors,
     visHasBarBorders,
+    visHasBrushChart,
+    visHasCategoricalAxis,
     visHasDataCutoff,
-    visHasLabelOnData,
     visHasDataSuppression,
+    visHasLabelOnData,
     visHasLegend,
     visHasLegendAxisAlign,
     visHasLegendColorCategory,
-    visHasBrushChart,
     visHasNumbersOnBars,
-    visHasaAdditionalLabelsOnBars,
+    visHasSelectableLegendValues,
+    visHasSingleSeriesTooltip,
     visSupportsBarSpace,
     visSupportsBarThickness,
     visSupportsChartHeight,
-    visSupportsMobileChartHeight,
+    visSupportsClickingLegend,
+    visSupportsDataAnnotations,
     visSupportsDateCategoryAxis,
-    visSupportsDateCategoryAxisMin,
-    visSupportsDateCategoryAxisMax,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
+    visSupportsDateCategoryAxisMax,
+    visSupportsDateCategoryAxisMin,
+    visSupportsDateCategoryAxisPadding,
     visSupportsDateCategoryAxisTicks,
     visSupportsDateCategoryHeight,
     visSupportsDateCategoryNumTicks,
     visSupportsDateCategoryTickRotation,
-    visSupportsDateCategoryAxisPadding,
+    visSupportsDynamicSeries,
     visSupportsFilters,
     visSupportsFootnotes,
     visSupportsLeftValueAxis,
+    visSupportsMobileChartHeight,
     visSupportsNonSequentialPallete,
     visSupportsPreliminaryData,
     visSupportsRankByValue,
+    visSupportsReactTooltip,
     visSupportsRegions,
     visSupportsResponsiveTicks,
     visSupportsReverseColorPalette,
     visSupportsSequentialPallete,
+    visSupportsSmallMultiples,
     visSupportsSuperTitle,
     visSupportsTooltipLines,
-    visHasSelectableLegendValues,
     visSupportsTooltipOpacity,
     visSupportsValueAxisGridLines,
     visSupportsValueAxisLabels,
     visSupportsValueAxisLine,
-    visSupportsValueAxisTicks,
-    visSupportsReactTooltip,
     visSupportsValueAxisMax,
     visSupportsValueAxisMin,
-    visSupportsDynamicSeries,
-    visSupportsSmallMultiples,
-    visSupportsYPadding,
-    visHasSingleSeriesTooltip,
-    visHasCategoricalAxis
+    visSupportsValueAxisTicks,
+    visSupportsYPadding
   }
 }

package/src/components/ForestPlot/ForestPlot.tsx

@@ -26,7 +26,7 @@ const ForestPlot = ({
   handleTooltipMouseOver,
   forestPlotRightLabelRef
 }: ForestPlotProps) => {
-  const { rawData: data, updateConfig } = useContext<ChartContext>(ConfigContext)
+  const { transformedData: data, updateConfig } = useContext<ChartContext>(ConfigContext)
   const { forestPlot } = config as ChartConfig
   const labelPosition = config.xAxis.tickWidthMax + 10
   const [initialLogTicksSet, setInitialLogTicks] = useState(false)
@@ -90,7 +90,9 @@ const ForestPlot = ({
     }
   }, [config.forestPlot.type])
 
-  const pooledData = config.data.find(d => d[config.xAxis.dataKey] === config.forestPlot.pooledResult.column)
+  const pooledData = data.find(d => d[config.xAxis.dataKey] === config.forestPlot.pooledResult.column)
+  const [plotStart, plotEnd] = [...xScale.range()].sort((a, b) => a - b)
+  const plotWidth = plotEnd - plotStart
 
   const regressionPoints = pooledData
     ? [
@@ -112,12 +114,12 @@ const ForestPlot = ({
 
   const topLine = [
     { x: 0, y: topMarginOffset },
-    { x: width, y: topMarginOffset }
+    { x: plotEnd, y: topMarginOffset }
   ]
 
   const bottomLine = [
     { x: 0, y: height },
-    { x: width, y: height }
+    { x: plotEnd, y: height }
   ]
 
   type Columns = {
@@ -289,30 +291,21 @@ const ForestPlot = ({
             {forestPlot.regression.description}
           </Text>
         )}
-
-        <Bar
-          key='forest-plot-tooltip-area'
-          className='forest-plot-tooltip-area'
-          width={width}
-          height={height}
-          fill={false ? 'red' : 'transparent'}
-          fillOpacity={0.5}
-          onMouseMove={e => handleTooltipMouseOver(e, data)}
-          onMouseOut={handleTooltipMouseOff}
-        />
       </Group>
       <Line
         from={topLine[0]}
         to={topLine[1]}
-        style={{ stroke: 'black', strokeWidth: 2 }}
+        style={{ stroke: '#333', strokeWidth: 1 }}
         className='forestplot__top-line'
       />
-      <Line
-        from={bottomLine[0]}
-        to={bottomLine[1]}
-        style={{ stroke: 'black', strokeWidth: 2 }}
-        className='forestplot__bottom-line'
-      />
+      {config.xAxis.hideAxis && (
+        <Line
+          from={bottomLine[0]}
+          to={bottomLine[1]}
+          style={{ stroke: '#333', strokeWidth: 1 }}
+          className='forestplot__bottom-line'
+        />
+      )}
 
       {/* column data */}
       {columnsOnChart.map((column, colIndex) => {
@@ -400,6 +393,17 @@ const ForestPlot = ({
           {forestPlot.rightLabel}
         </Text>
       )}
+      <Bar
+        key='forest-plot-tooltip-area'
+        className='forest-plot-tooltip-area'
+        x={0}
+        width={width}
+        height={height}
+        fill={false ? 'red' : 'transparent'}
+        fillOpacity={0.5}
+        onMouseMove={e => handleTooltipMouseOver(e, data)}
+        onMouseOut={handleTooltipMouseOff}
+      />
     </>
   )
 }

package/src/components/HorizonChart/HorizonChart.tsx

@@ -0,0 +1,131 @@
+import React, { useContext, memo, useMemo } from 'react'
+
+// cdc
+import ConfigContext from '../../ConfigContext'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+
+// visx
+import { Bar } from '@visx/shape'
+import { Group } from '@visx/group'
+
+// components
+import HorizonBand from './components/HorizonBand'
+
+// helpers
+import { calculateHorizonBands } from './helpers/calculateHorizonBands'
+
+// types
+import { HORIZON_DEFAULTS } from '../../types/Horizon'
+
+type HorizonChartProps = {
+  xScale: any
+  yScale: any
+  xMax: number
+  yMax: number
+  handleTooltipMouseOver: (e: any, additionalData?: any) => void
+  handleTooltipMouseOff: () => void
+  tooltipData?: any
+  showTooltip?: boolean
+}
+
+const HorizonChart = ({ xScale, xMax, yMax, handleTooltipMouseOver, handleTooltipMouseOff }: HorizonChartProps) => {
+  // Get data and config from context
+  const { transformedData: data, config, colorScale, rawData, parseDate } = useContext(ConfigContext)
+
+  const horizonConfig = {
+    ...HORIZON_DEFAULTS,
+    ...config.horizon
+  }
+
+  // Get series keys for rendering rows
+  const seriesKeys =
+    (config.runtime?.seriesKeys?.length ? config.runtime.seriesKeys : config.series?.map(s => s.dataKey)) || []
+
+  // Calculate value range across all horizon series (for consistent scaling)
+  // Must be called before early returns to satisfy React hooks rules
+  const valueRange = useMemo(() => {
+    if (!data || data.length === 0 || seriesKeys.length === 0) {
+      return { min: 0, max: 0 }
+    }
+
+    let min = Infinity
+    let max = -Infinity
+
+    data.forEach((row: any) => {
+      seriesKeys.forEach((key: string) => {
+        const value = Math.abs(Number(row[key]) || 0)
+        if (value > 0) {
+          min = Math.min(min, value)
+          max = Math.max(max, value)
+        }
+      })
+    })
+
+    return {
+      min: min === Infinity ? 0 : min,
+      max: max === -Infinity ? 0 : max
+    }
+  }, [data, seriesKeys])
+
+  // Early returns after all hooks
+  if (!data || data.length === 0) return null
+  if (seriesKeys.length === 0) return null
+  if (xMax <= 0 || yMax <= 0) return null
+
+  // Calculate band dimensions to fill available space
+  const { bandHeight, getRowY } = calculateHorizonBands(
+    seriesKeys.length,
+    yMax,
+    horizonConfig.bandGap,
+    horizonConfig.bottomPadding
+  )
+
+  const getXPosition = value => {
+    if (config.xAxis.type === 'categorical') {
+      return xScale(value) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    }
+    if (isDateScale(config.xAxis)) {
+      const scaledValue = xScale(parseDate(value, false))
+      return scaledValue + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    }
+    return xScale(value)
+  }
+
+  return (
+    <ErrorBoundary component='HorizonChart'>
+      <Group className='horizon-chart' key='horizon-wrapper' left={Number(config.yAxis.size)} height={Number(yMax)}>
+        {seriesKeys.map((seriesKey, index) => {
+          const rowY = getRowY(index)
+          return (
+            <Group key={seriesKey} top={rowY} className='horizon-band-row'>
+              {/* Horizon band for this series */}
+              <HorizonBand
+                data={data}
+                seriesKey={seriesKey}
+                xAxisKey={config.xAxis.dataKey}
+                getXPosition={getXPosition}
+                bandHeight={bandHeight}
+                xMax={xMax}
+                numLayers={horizonConfig.numLayers}
+                colorScale={colorScale}
+                config={config}
+                globalMax={valueRange.max}
+              />
+            </Group>
+          )
+        })}
+        {/* Transparent bar for tooltip interaction */}
+        <Bar
+          width={Number(xMax)}
+          height={Number(yMax)}
+          fill='transparent'
+          onMouseMove={e => handleTooltipMouseOver(e, rawData)}
+          onMouseLeave={handleTooltipMouseOff}
+        />
+      </Group>
+    </ErrorBoundary>
+  )
+}
+
+export default memo(HorizonChart)

package/src/components/HorizonChart/components/HorizonBand.tsx

@@ -0,0 +1,160 @@
+import React, { memo, useId, useMemo } from 'react'
+
+// visx
+import { AreaClosed } from '@visx/shape'
+import { Group } from '@visx/group'
+import { scaleLinear } from '@visx/scale'
+import * as allCurves from '@visx/curve'
+import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
+import { getHorizonLayerColors } from '../helpers/getHorizonLayerColors'
+
+type HorizonBandProps = {
+  data: any[]
+  seriesKey: string
+  xAxisKey: string
+  getXPosition: (value: any) => number
+  bandHeight: number
+  xMax: number
+  numLayers: number
+  colorScale: any
+  config: any
+  globalMax: number
+}
+
+/**
+ * HorizonBand renders a single series as a horizon chart
+ *
+ * Horizon charts work by:
+ * 1. Dividing the value range into N layers
+ * 2. Each layer shows values within its threshold range
+ * 3. Layers are stacked/overlapped to create the horizon effect
+ * 4. Higher values appear overlapped, usually darker depending on color palette (achieved through layer stacking)
+ */
+const HorizonBand = ({
+  data,
+  seriesKey,
+  xAxisKey,
+  getXPosition,
+  bandHeight,
+  xMax,
+  numLayers,
+  config,
+  globalMax
+}: HorizonBandProps) => {
+  // Create a unique, safe ID for clipPath (useId ensures uniqueness across instances)
+  // Must be called before any early returns to follow React's rules of hooks
+  const uniqueId = useId()
+  const safeSeriesKey = seriesKey.replace(/[^a-zA-Z0-9]/g, '-')
+  const clipId = `horizon-clip-${safeSeriesKey}-${uniqueId.replace(/:/g, '')}`
+
+  // Get the curve type from config (same as stacked area chart)
+  const curveType = allCurves[approvedCurveTypes[config.stackedAreaChartLineType || 'Linear']] || allCurves.curveLinear
+
+  // Process data: convert to absolute values and compute series max in single pass
+  const { processedData, seriesMax } = useMemo(() => {
+    let max = 0
+    const processed = data.map(d => {
+      const absValue = Math.abs(Number(d[seriesKey]) || 0)
+      if (absValue > max) max = absValue
+      return { ...d, [seriesKey]: absValue }
+    })
+    return { processedData: processed, seriesMax: max }
+  }, [data, seriesKey])
+
+  // Get layer colors using shared helper (memoized based on palette config and numLayers)
+  // Must be called before early returns to follow React's rules of hooks
+  const layerColors = useMemo(
+    () => getHorizonLayerColors(config, numLayers),
+    [
+      config.general?.palette?.name,
+      config.general?.palette?.isReversed,
+      config.general?.palette?.version,
+      config.general?.palette?.customColors,
+      numLayers
+    ]
+  )
+
+  // Use global max for scaling (ensures all series bands are comparable)
+  const maxValue = globalMax
+
+  // If no data, max is 0, or dimensions are invalid, don't render
+  if (maxValue === 0) return null
+  if (xMax <= 0 || bandHeight <= 0) return null
+
+  // Calculate the threshold for each layer
+  // Each layer represents 1/numLayers of the max value
+  const layerThreshold = maxValue / numLayers
+
+  // Create a y-scale for positioning within the band
+  // The scale maps values 0-layerThreshold to the full bandHeight
+  // Each layer uses the full band height, creating overlay effect
+  const yScale = scaleLinear({
+    domain: [0, layerThreshold],
+    range: [bandHeight, 0],
+    clamp: true // Clamp values above threshold
+  })
+
+  // Render layers from bottom to top
+  // Each layer shows values from (layerIndex * threshold) to ((layerIndex + 1) * threshold)
+  const layers = []
+
+  for (let layerIndex = 0; layerIndex < numLayers; layerIndex++) {
+    const layerMin = layerIndex * layerThreshold
+
+    // Short-circuit: if this layer's minimum exceeds the series max,
+    // no remaining layers can have visible data
+    if (layerMin >= seriesMax) break
+
+    // Build layer data and track hasData in a single pass
+    let hasData = false
+    const layerData = processedData.map(d => {
+      const rawValue = d[seriesKey]
+      // Calculate the value relative to this layer's base
+      const layerValue = Math.max(0, rawValue - layerMin)
+      // Clamp to the layer threshold
+      const clampedValue = Math.min(layerValue, layerThreshold)
+
+      if (clampedValue > 0) hasData = true
+
+      return {
+        x: d[xAxisKey],
+        y: clampedValue
+      }
+    })
+
+    if (!hasData) continue
+
+    // Get color for this layer from the distributed layer colors
+    const layerColor = layerColors[layerIndex]
+
+    layers.push(
+      <Group key={`layer-${layerIndex}`} top={0}>
+        <AreaClosed
+          data={layerData}
+          x={d => getXPosition(d.x)}
+          y={d => yScale(d.y)}
+          yScale={yScale}
+          curve={curveType}
+          fill={layerColor}
+          fillOpacity={1}
+          stroke='none'
+        />
+      </Group>
+    )
+  }
+
+  return (
+    <Group className='horizon-band'>
+      {/* Clip to band bounds */}
+      <defs>
+        <clipPath id={clipId}>
+          <rect x={0} y={0} width={xMax} height={bandHeight} />
+        </clipPath>
+      </defs>
+
+      <Group clipPath={`url(#${clipId})`}>{layers}</Group>
+    </Group>
+  )
+}
+
+export default memo(HorizonBand)

package/src/components/HorizonChart/helpers/calculateHorizonBands.ts

@@ -0,0 +1,27 @@
+/**
+ * Calculates the band dimensions for horizon chart rows
+ * Used by both HorizonChart (for rendering) and LeftAxis (for label positioning)
+ */
+
+const MIN_BAND_HEIGHT = 10
+
+export type HorizonBandCalculation = {
+  bandHeight: number
+  getRowY: (index: number) => number
+}
+
+export function calculateHorizonBands(
+  numSeries: number,
+  yMax: number,
+  bandGap: number | string,
+  bottomPadding: number | string = 15
+): HorizonBandCalculation {
+  const gap = Number(bandGap) || 0
+  const padding = Number(bottomPadding) || 0
+
+  const totalGapSpace = (numSeries - 1) * gap + padding
+  const bandHeight = Math.max((yMax - totalGapSpace) / numSeries, MIN_BAND_HEIGHT)
+  const getRowY = (index: number) => index * (bandHeight + gap)
+
+  return { bandHeight, getRowY }
+}

package/src/components/HorizonChart/helpers/getHorizonLayerColors.ts

@@ -0,0 +1,40 @@
+import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
+import { v2ColorDistribution } from '@cdc/core/helpers/palettes/colorDistributions'
+
+/**
+ * Calculates the layer colors for a horizon chart based on palette configuration.
+ * Shared between HorizonBand rendering and Legend display.
+ */
+export const getHorizonLayerColors = (config: any, numLayers: number): string[] => {
+  const paletteName = config.general?.palette?.name || 'sequential_blue'
+  const colorPalettes = filterChartColorPalettes(config)
+  const fullPalette = colorPalettes[paletteName] || Object.values(colorPalettes)[0] || ['#4292c6']
+
+  // Use v2ColorDistribution if we have a 9-color palette and numLayers <= 9
+  if (fullPalette.length === 9 && numLayers <= 9 && v2ColorDistribution[numLayers]) {
+    const indices = v2ColorDistribution[numLayers]
+    return indices.map((i: number) => fullPalette[i])
+  }
+
+  // Fallback: take first numLayers colors, or repeat if needed
+  return Array.from({ length: numLayers }, (_, i) => fullPalette[i % fullPalette.length])
+}
+
+/**
+ * Calculates the max value across all series in a horizon chart dataset.
+ * Used for consistent scaling across all bands.
+ */
+export const getHorizonMaxValue = (data: any[], seriesKeys: string[]): number => {
+  if (!data || data.length === 0 || !seriesKeys || seriesKeys.length === 0) {
+    return 0
+  }
+
+  let max = 0
+  for (const row of data) {
+    for (const key of seriesKeys) {
+      const value = Math.abs(Number(row[key]) || 0)
+      if (value > max) max = value
+    }
+  }
+  return max
+}

package/src/components/HorizonChart/index.tsx

@@ -0,0 +1,3 @@
+import HorizonChart from './HorizonChart'
+
+export { HorizonChart }