@cdc/chart 4.25.11 → 4.26.2

package/src/components/Legend/Legend.Component.tsx

@@ -1,5 +1,5 @@
 import parse from 'html-react-parser'
-import React from 'react'
+import React, { useMemo } from 'react'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import LegendShape from '@cdc/core/components/LegendShape'
@@ -17,6 +17,8 @@ import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 import LegendLineShape from './LegendLine.Shape'
 import LegendGroup from './LegendGroup'
+import LegendValueRange from './LegendValueRange'
+import { getHorizonLayerColors, getHorizonMaxValue } from '../../components/HorizonChart/helpers/getHorizonLayerColors'
 import { getSeriesWithData } from '../../helpers/dataHelpers'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
@@ -28,6 +30,7 @@ interface LegendProps {
   config: ChartConfig
   currentViewport: ViewportSize
   formatLabels: (labels: Label[]) => Label[]
+  formatNumber?: (value: number, axis?: string) => string
   highlight: Function
   handleShowAll: Function
   ref: React.Ref<() => void>
@@ -48,6 +51,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
       handleShowAll,
       currentViewport,
       formatLabels,
+      formatNumber,
       skipId = 'legend',
       dimensions,
       transformedData: data,
@@ -60,7 +64,10 @@ const Legend: React.FC<LegendProps> = forwardRef(
     const { series } = runtime
 
     const seriesWithData = getSeriesWithData(config)
-    const dontFilterLegendItems = !series.length || legend.unified || !seriesWithData.length
+    // For Radar charts, seriesWithData contains dimension keys but legend shows entity names
+    // so we skip the series filter for radar charts
+    const isRadarChart = config.visualizationType === 'Radar'
+    const dontFilterLegendItems = !series.length || legend.unified || !seriesWithData.length || isRadarChart
 
     const isLegendBottom =
       legend?.position === 'bottom' ||
@@ -74,6 +81,29 @@ const Legend: React.FC<LegendProps> = forwardRef(
     const { HighLightedBarUtils } = useHighlightedBars(config)
     let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
 
+    const horizonLegendData = useMemo(() => {
+      if (config.visualizationType !== 'Horizon Chart') {
+        return null
+      }
+      const numLayers = config.horizon?.numLayers || 4
+      const runtimeSeriesKeys = config.runtime?.seriesKeys
+      const seriesKeys =
+        (Array.isArray(runtimeSeriesKeys) && runtimeSeriesKeys.length > 0
+          ? runtimeSeriesKeys
+          : config.series?.map(s => s.dataKey)) || []
+      const maxValue = getHorizonMaxValue(data, seriesKeys)
+      const layerColors = getHorizonLayerColors(config, numLayers)
+
+      return { numLayers, maxValue, layerColors }
+    }, [
+      config.visualizationType,
+      config.horizon?.numLayers,
+      config.runtime?.seriesKeys,
+      config.series,
+      config.general?.palette?.name,
+      data
+    ])
+
     if (!legend) return null
     return (
       <aside
@@ -99,6 +129,20 @@ const Legend: React.FC<LegendProps> = forwardRef(
         />
         <LegendGroup formatLabels={formatLabels} />
 
+        {/* Value Range Legend for Horizon Chart (and future chart types) */}
+        {horizonLegendData && (
+          <LegendValueRange
+            maxValue={horizonLegendData.maxValue}
+            numRanges={horizonLegendData.numLayers}
+            colors={horizonLegendData.layerColors}
+            formatNumber={formatNumber}
+            innerClasses={innerClasses}
+            shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+            onClick={undefined}
+            reverseLabelOrder={config.legend.reverseLabelOrder}
+          />
+        )}
+
         <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
           {labels => {
             return (
@@ -130,8 +174,12 @@ const Legend: React.FC<LegendProps> = forwardRef(
                         } else className.push('highlighted')
                       }
 
-                      if (config.legend.style === 'gradient' || config.legend.groupBy) {
-                        return <></>
+                      if (
+                        config.legend.style === 'gradient' ||
+                        config.legend.groupBy ||
+                        config.visualizationType === 'Horizon Chart'
+                      ) {
+                        return null
                       }
 
                       return (

package/src/components/Legend/Legend.tsx

@@ -3,7 +3,6 @@ import ConfigContext from '../../ConfigContext'
 import LegendComponent from './Legend.Component'
 import { createFormatLabels } from './helpers/createFormatLabels'
 
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const Legend = forwardRef((props, ref) => {
   // prettier-ignore
   const {
@@ -18,13 +17,14 @@ const Legend = forwardRef((props, ref) => {
     currentViewport,
     dimensions,
     getTextWidth,
-    transformedData
+    transformedData,
+    formatNumber
   } = useContext(ConfigContext)
   if (!config.legend) return null
   // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default
   const { interactionLabel } = props
 
-  const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
+  const createLegendLabels = createFormatLabels(config, tableData, data, colorScale, formatNumber)
 
   return (
     <Fragment>
@@ -41,6 +41,7 @@ const Legend = forwardRef((props, ref) => {
         handleShowAll={handleShowAll}
         currentViewport={currentViewport}
         formatLabels={createLegendLabels}
+        formatNumber={formatNumber}
         interactionLabel={interactionLabel}
       />
     </Fragment>

package/src/components/Legend/LegendValueRange.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { LegendItem, LegendLabel } from '@visx/legend'
+import LegendShape from '@cdc/core/components/LegendShape'
+import { generateValueRanges, GenerateValueRangesOptions, ValueRange } from './helpers/generateValueRanges'
+
+export type LegendValueRangeProps = GenerateValueRangesOptions & {
+  colors: string[]
+  shape?: 'circle' | 'square'
+  onClick?: (index: number, range: ValueRange) => void
+  innerClasses?: string[]
+  reverseLabelOrder?: boolean
+}
+
+/**
+ * LegendValueRange - Generic component for displaying value range legends
+ *
+ * Used by Horizon Charts to show layer intensity ranges (e.g., 1-100, 101-200).
+ * Can be reused by other chart types that need binned value legends.
+ */
+const LegendValueRange: React.FC<LegendValueRangeProps> = ({
+  minValue = 0,
+  maxValue,
+  numRanges,
+  distribution = 'equal',
+  formatNumber,
+  colors,
+  shape = 'square',
+  onClick,
+  innerClasses = ['legend-container__inner'],
+  reverseLabelOrder = false
+}) => {
+  const ranges = generateValueRanges({ minValue, maxValue, numRanges, distribution, formatNumber })
+
+  if (ranges.length === 0) return null
+
+  // Reverse both ranges and colors when reverseLabelOrder is true
+  const displayRanges = reverseLabelOrder ? [...ranges].reverse() : ranges
+  const displayColors = reverseLabelOrder ? [...colors].reverse() : colors
+
+  return (
+    <div className={innerClasses.join(' ')}>
+      {displayRanges.map((range, i) => {
+        const color = displayColors[i % displayColors.length]
+        const isClickable = typeof onClick === 'function'
+        const className = ['legend-item', `legend-text--range-${i}`, !isClickable && 'not-clickable'].filter(Boolean)
+
+        return (
+          <LegendItem
+            className={className.join(' ')}
+            tabIndex={isClickable ? 0 : -1}
+            key={`legend-range-${i}`}
+            onKeyDown={e => {
+              if (isClickable && e.key === 'Enter') {
+                e.preventDefault()
+                onClick(i, range)
+              }
+            }}
+            onClick={e => {
+              if (isClickable) {
+                e.preventDefault()
+                onClick(i, range)
+              }
+            }}
+            role={isClickable ? 'button' : undefined}
+          >
+            <LegendShape shape={shape} fill={color} />
+            <LegendLabel align='left' className='m-0'>
+              {range.label}
+            </LegendLabel>
+          </LegendItem>
+        )
+      })}
+    </div>
+  )
+}
+
+export default LegendValueRange

package/src/components/Legend/helpers/createFormatLabels.tsx

@@ -5,23 +5,172 @@ import {
   twoColorPalette
 } from '@cdc/core/data/colorPalettes'
 import { getCurrentPaletteName, getFallbackColorPalette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
-import { chartPaletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
+import { chartPaletteMigrationMap, paletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
 import { getPaletteAccessor } from '@cdc/core/helpers/getPaletteAccessor'
 import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
 import { isV1Palette } from '@cdc/core/helpers/palettes/utils'
 import { v2ColorDistribution } from '@cdc/core/helpers/palettes/colorDistributions'
 import { updatePaletteNames } from '@cdc/core/helpers/updatePaletteNames'
 import { buildForecastPaletteMappings } from '../../../helpers/buildForecastPaletteMappings'
+import { getFullColorPalette } from '../../../helpers/smallMultiplesHelpers'
 import { FaStar } from 'react-icons/fa'
 import { Label } from '../../../types/Label'
 import { ColorScale, TransformedData } from '../../../types/ChartContext'
 import { ChartConfig } from '../../../types/ChartConfig'
 import _ from 'lodash'
+import { scaleSequential } from 'd3-scale'
+import { interpolateRgbBasis } from 'd3-interpolate'
+import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
 
 export const createFormatLabels =
-  (config: ChartConfig, tableData: Object[], data: TransformedData[], colorScale: ColorScale) =>
+  (
+    config: ChartConfig,
+    tableData: Object[],
+    data: TransformedData[],
+    colorScale: ColorScale,
+    formatNumber: (value: any, axis: string) => string
+  ) =>
   (defaultLabels: Label[]): Label[] => {
     const { visualizationType, visualizationSubType, series, runtime, legend } = config
+
+    // Handle small multiples legend adjustments
+    // by-series + same: all tiles use same color, legend should show one color
+    if (config.smallMultiples?.mode === 'by-series' && config.smallMultiples?.colorMode === 'same') {
+      const baseColor = colorScale?.range()?.[0]
+      return defaultLabels.map((label, i) => ({
+        ...label,
+        value: baseColor
+      }))
+    }
+
+    // by-column + different: each tile gets different color, legend should show tile values with their colors
+    if (config.smallMultiples?.mode === 'by-column' && config.smallMultiples?.colorMode === 'different') {
+      const tileColumn = config.smallMultiples.tileColumn
+      const tileValues = Array.from(new Set(data.map(d => d[tileColumn])))
+        .filter(Boolean)
+        .sort()
+      const tilePalette = getFullColorPalette(config, tileValues.length)
+
+      return tileValues.map((value, index) => ({
+        datum: value,
+        index,
+        text: config.smallMultiples.tileTitles?.[value] || String(value),
+        value: tilePalette[index]
+      }))
+    }
+
+    // Handle Warming Stripes legend
+    if (visualizationType === 'Warming Stripes') {
+      const valueKey = runtime.seriesKeys?.[0]
+      if (!valueKey || !data || data.length === 0) {
+        return []
+      }
+
+      // Calculate min and max values
+      const values = data.map(d => Number(d[valueKey])).filter(v => !isNaN(v))
+      const minValue = Math.min(...values)
+      const maxValue = Math.max(...values)
+
+      // Get the color palette from config (same logic as WarmingStripes component)
+      const colorPalettesFiltered = filterChartColorPalettes(config)
+      const configPalette = config.general?.palette?.name
+      const migratedPaletteName = configPalette ? configPalette : getFallbackColorPalette(config)
+
+      const isReversedPalette = migratedPaletteName?.endsWith('reverse')
+      const basePaletteName = isReversedPalette ? migratedPaletteName.slice(0, -7) : migratedPaletteName
+
+      let palette =
+        colorPalettesFiltered[migratePaletteWithMap(basePaletteName, paletteMigrationMap, false)] ||
+        colorPalettesFiltered[basePaletteName] ||
+        colorPalettesFiltered[configPalette]
+
+      if (!palette || palette.length < 2) {
+        palette = [
+          '#053061',
+          '#2166ac',
+          '#4393c3',
+          '#92c5de',
+          '#d1e5f0',
+          '#f7f7f7',
+          '#fddbc7',
+          '#f4a582',
+          '#d6604d',
+          '#b2182b',
+          '#67001f'
+        ]
+      }
+
+      const shouldReverse = config.general?.palette?.isReversed || isReversedPalette
+      const finalPalette = shouldReverse ? [...palette].reverse() : palette
+      const warmingColorScale = scaleSequential(interpolateRgbBasis(finalPalette)).domain([minValue, maxValue])
+
+      // For gradient style, create smooth gradient with min/max labels only
+      if (legend?.style === 'gradient') {
+        // Create many color stops for smooth gradient (these are used for the gradient fill)
+        const numColorStops = 20
+        const colorStops = []
+        for (let i = 0; i < numColorStops; i++) {
+          const t = i / (numColorStops - 1)
+          const value = minValue + t * (maxValue - minValue)
+          colorStops.push(warmingColorScale(value))
+        }
+
+        // Create multiple stops for proper spacing, but only show labels at first and last
+        // This ensures the first label appears at the left edge and last at the right edge
+        const numPositions = 5 // Number of tick positions for spacing
+        const labels = []
+        for (let i = 0; i < numPositions; i++) {
+          const t = i / (numPositions - 1)
+          const value = minValue + t * (maxValue - minValue)
+          const isFirstOrLast = i === 0 || i === numPositions - 1
+
+          labels.push({
+            datum: String(value),
+            index: i,
+            text: isFirstOrLast ? formatNumber(value, 'left') : '',
+            value: colorStops[Math.floor(t * (numColorStops - 1))],
+            colors: colorStops
+          })
+        }
+
+        return labels
+      }
+
+      // For interval style, create ranges
+      const numIntervals = legend?.warmingStripesIntervals || 5
+      const range = maxValue - minValue
+      const intervalSize = range / numIntervals
+
+      const intervalLabels = []
+
+      for (let i = 0; i < numIntervals; i++) {
+        // Calculate interval boundaries
+        // Each interval after the first starts at the exact boundary point
+        const start = minValue + i * intervalSize
+        const end = i === numIntervals - 1 ? maxValue : minValue + (i + 1) * intervalSize
+        const midPoint = (start + end) / 2
+
+        // For display, show the actual start for first interval
+        // For subsequent intervals, format the boundary point
+        const displayStart = start
+        const displayEnd = i === numIntervals - 1 ? end : end
+
+        intervalLabels.push({
+          datum: String(midPoint),
+          index: i,
+          text:
+            i === 0
+              ? `${formatNumber(displayStart, 'left')} - < ${formatNumber(displayEnd, 'left')}`
+              : i === numIntervals - 1
+              ? `${formatNumber(displayStart, 'left')} - ${formatNumber(displayEnd, 'left')}`
+              : `${formatNumber(displayStart, 'left')} - < ${formatNumber(displayEnd, 'left')}`,
+          value: warmingColorScale(midPoint)
+        })
+      }
+
+      return intervalLabels
+    }
+
     const sortVertical = labels =>
       legend.verticalSorted
         ? _.sortBy(_.cloneDeep(labels), label => {
@@ -193,6 +342,19 @@ export const createFormatLabels =
       return reverseLabels(seriesLabels)
     }
 
+    // For Radar charts, use the entity names from runtime.seriesKeys (set from xAxis.dataKey values)
+    // not the series names (which are the dimension keys)
+    if (visualizationType === 'Radar') {
+      const entityNames = runtime.seriesKeys || []
+      const radarLabels = entityNames.map((val, i) => ({
+        datum: val,
+        index: i,
+        text: String(val),
+        value: colorScale(val)
+      }))
+      return reverseLabels(radarLabels)
+    }
+
     if (config.series.some(item => item.name)) {
       const uniqueLabels = Array.from(new Set(config.series.map(d => d.name || d.dataKey))).map((val, i) => ({
         datum: val,

package/src/components/Legend/helpers/generateValueRanges.ts

@@ -0,0 +1,92 @@
+/**
+ * generateValueRanges - Creates value range bins for legend display
+ *
+ * Supports equal interval distribution with scaffolding for future quantile support.
+ * Ranges are inclusive with no overlap, starting at minValue or 0 (e.g., 1-100, 101-200).
+ */
+
+export type RangeDistribution = 'equal' | 'quantile'
+
+export type ValueRange = {
+  min: number
+  max: number
+  label: string
+}
+
+export type GenerateValueRangesOptions = {
+  minValue?: number
+  maxValue: number
+  numRanges: number
+  distribution?: RangeDistribution
+  formatNumber?: (value: number, axis?: string) => string
+}
+
+/**
+ * Generates an array of value ranges for legend display
+ */
+export const generateValueRanges = ({
+  minValue = 0,
+  maxValue,
+  numRanges,
+  distribution = 'equal',
+  formatNumber
+}: GenerateValueRangesOptions): ValueRange[] => {
+  if (numRanges <= 0 || maxValue <= minValue) {
+    return []
+  }
+
+  const ranges: ValueRange[] = []
+
+  if (distribution === 'equal') {
+    const rangeSize = (maxValue - minValue) / numRanges
+
+    for (let i = 0; i < numRanges; i++) {
+      // Calculate raw boundaries
+      const rawMin = minValue + i * rangeSize
+      const rawMax = minValue + (i + 1) * rangeSize
+
+      // For display:
+      // - First range starts at floor of minValue
+      // - Subsequent ranges start at previous max + 1 (monotonic constraint)
+      // - Last range ends exactly at ceil of maxValue
+      let displayMin: number
+      let displayMax: number
+
+      if (i === 0) {
+        displayMin = Math.floor(rawMin)
+      } else {
+        // Start at previous range's max + 1 to avoid overlap
+        displayMin = ranges[i - 1].max + 1
+      }
+
+      if (i === numRanges - 1) {
+        // Last range ends exactly at maxValue
+        displayMax = Math.ceil(maxValue)
+      } else {
+        displayMax = Math.floor(rawMax)
+      }
+
+      // Ensure min <= max (can happen with very small ranges)
+      if (displayMin > displayMax) {
+        displayMax = displayMin
+      }
+
+      // Format numbers if formatter provided
+      const formattedMin = formatNumber ? formatNumber(displayMin, 'left') : displayMin.toLocaleString()
+      const formattedMax = formatNumber ? formatNumber(displayMax, 'left') : displayMax.toLocaleString()
+
+      ranges.push({
+        min: displayMin,
+        max: displayMax,
+        label: displayMin === displayMax ? formattedMin : `${formattedMin}–${formattedMax}`
+      })
+    }
+  } else if (distribution === 'quantile') {
+    // Scaffolding for future quantile-based distribution
+    // Would require passing in the actual data values to calculate percentiles
+    // Currently, silently fall back to equal interval distribution
+    return generateValueRanges({ minValue, maxValue, numRanges, distribution: 'equal', formatNumber })
+  }
+
+  return ranges
+}

package/src/components/Legend/helpers/index.ts

@@ -2,6 +2,15 @@ export const getGradientConfig = (config, formatLabels, colorScale) => {
   const defaultValue = [{ datum: '', index: 0, text: '', value: '' }]
 
   const formatted = formatLabels(defaultValue)
+
+  // For Warming Stripes, always use the formatted labels which contain the gradient stops
+  if (config.visualizationType === 'Warming Stripes' && config.legend.style === 'gradient') {
+    // Extract the colors array from the first item (all items have the same color stops)
+    const colors = formatted[0]?.colors || formatted.map(label => label?.value).filter(Boolean)
+    const labels = formatted.map(label => label?.text || label?.datum)
+    return { colors, labels }
+  }
+
   const colors = config.legend.colorCode ? formatted.map(label => label?.value) : colorScale?.range() ?? []
   const labels = config.legend.colorCode
     ? formatted.map(label => label?.text || label?.datum)
@@ -19,12 +28,7 @@ export const getMarginTop = (isLegendBottom, config) => {
   if (!isLegendBottom) {
     return '0px'
   }
-  if (isLegendBottom && config.xAxis.brushActive && !config.legend.hide) {
-    const additiolMargin = 25
-    return `${DEFAULT_MARGIN_TOP + config.brush?.height + additiolMargin}px`
-  } else {
-    return `${DEFAULT_MARGIN_TOP}px`
-  }
+  return `${DEFAULT_MARGIN_TOP}px`
 }
 export const getMarginBottom = (isLegendBottom, config) => {
   const isLegendTop = config.legend?.position === 'top' && !config.legend.hide