@cdc/chart 4.25.11 → 4.26.2

package/src/components/PairedBarChart.jsx

@@ -8,12 +8,21 @@ import ConfigContext from '../ConfigContext'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 
 const PairedBarChart = ({ width, height, originalWidth }) => {
-  const { config, colorScale, transformedData: data, formatNumber, seriesHighlight } = useContext(ConfigContext)
+  const {
+    config,
+    colorScale,
+    transformedData: data,
+    formatNumber,
+    seriesHighlight,
+    vizViewport
+  } = useContext(ConfigContext)
 
   if (!config || config?.series?.length < 2) return
 
+  const labelFontSize = isMobileFontViewport(vizViewport) ? 13 : 16
   const borderWidth = config.barHasBorder === 'true' ? 1 : 0
   const halfWidth = width / 2
   const offset = 1.02 // Offset of the left bar from the Axis
@@ -109,7 +118,10 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const totalheight = (Number(config.barSpace) + barHeight + borderWidth) * data.length
                 config.heights.horizontal = totalheight
                 // check if text fits inside of the  bar including suffix/prefix,comma,fontSize ..etc
-                const textWidth = getTextWidth(formatNumber(d[groupOne.dataKey], 'left'))
+                const textWidth = getTextWidth(
+                  formatNumber(d[groupOne.dataKey], 'left'),
+                  `normal ${labelFontSize}px sans-serif`
+                )
                 const textFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
@@ -141,6 +153,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                           x={halfWidth - barWidth}
                           y={y + config.barHeight / 2}
                           fill={textFits ? groupOne.labelColor : '#000'}
+                          fontSize={labelFontSize}
                         >
                           {formatNumber(d[groupOne.dataKey], 'left')}
                         </Text>
@@ -168,7 +181,10 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const totalheight = (Number(config.barSpace) + barHeight + borderWidth) * data.length
                 config.heights.horizontal = totalheight
                 // check if text fits inside of the  bar including suffix/prefix,comma,fontSize ..etc
-                const textWidth = getTextWidth(formatNumber(d[groupTwo.dataKey], 'left'))
+                const textWidth = getTextWidth(
+                  formatNumber(d[groupTwo.dataKey], 'left'),
+                  `normal ${labelFontSize}px sans-serif`
+                )
                 const isTextFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
@@ -207,6 +223,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                           x={halfWidth + barWidth}
                           y={y + config.barHeight / 2}
                           fill={isTextFits ? groupTwo.labelColor : '#000'}
+                          fontSize={labelFontSize}
                         >
                           {formatNumber(d[groupTwo.dataKey], 'left')}
                         </Text>

package/src/components/PieChart/PieChart.tsx

@@ -268,7 +268,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
       const textOpacity = shouldMute ? 0.3 : 1
 
       return (
-        <Group key={key} className={`slice-${key}`}>
+        <Group key={key} className={`slice-${CSS.escape(String(key))}`}>
           {/* ── the slice */}
           <animated.path
             d={to([styles.startAngle, styles.endAngle], (start: number, end: number) =>

package/src/components/RadarChart/RadarAxis.tsx

@@ -0,0 +1,78 @@
+import React, { useContext, useMemo } from 'react'
+import { Group } from '@visx/group'
+import { Line } from '@visx/shape'
+import { Text } from '@visx/text'
+import { genPoints, getTextAnchor } from './helpers'
+import ConfigContext from '../../ConfigContext'
+
+type RadarAxisProps = {
+  radius: number
+  strokeColor?: string
+  strokeWidth?: number
+  labelColor?: string
+  fontSize?: number
+}
+
+/**
+ * RadarAxis renders the axis lines from center to edge
+ * and the axis labels at each vertex
+ */
+const RadarAxis: React.FC<RadarAxisProps> = ({
+  radius,
+  strokeColor = '#999999',
+  strokeWidth = 1,
+  labelColor = '#333333',
+  fontSize = 14
+}) => {
+  const { config } = useContext(ConfigContext)
+
+  const radarConfig = config.radar
+  const labelOffset = Number(radarConfig?.axisLabelOffset) || 15
+
+  const labels = useMemo(() => {
+    if (!config.series || config.series.length === 0) return []
+    return config.series.map(s => s.dataKey).filter(Boolean)
+  }, [config.series])
+  const axisCount = labels.length
+  const axisPoints = genPoints(axisCount, radius)
+  const labelPoints = genPoints(axisCount, radius + labelOffset)
+
+  return (
+    <Group className='radar-axis'>
+      {/* Axis lines from center to edge */}
+      {axisPoints.map((point, i) => (
+        <Line
+          key={`axis-line-${i}`}
+          from={{ x: 0, y: 0 }}
+          to={point}
+          stroke={strokeColor}
+          strokeWidth={strokeWidth}
+          strokeOpacity={0.7}
+        />
+      ))}
+
+      {/* Axis labels */}
+      {labelPoints.map((point, i) => {
+        const angle = (i * 2 * Math.PI) / axisCount - Math.PI / 2
+        const textAnchor = getTextAnchor(angle)
+
+        return (
+          <Text
+            key={`axis-label-${i}`}
+            x={point.x}
+            y={point.y}
+            textAnchor={textAnchor}
+            verticalAnchor='middle'
+            fill={labelColor}
+            fontSize={fontSize}
+            fontFamily='sans-serif'
+          >
+            {labels[i]}
+          </Text>
+        )
+      })}
+    </Group>
+  )
+}
+
+export default RadarAxis

package/src/components/RadarChart/RadarChart.tsx

@@ -0,0 +1,298 @@
+import React, { useContext, useMemo, useEffect } from 'react'
+import { Group } from '@visx/group'
+import { scaleLinear } from '@visx/scale'
+import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
+import { localPoint } from '@visx/event'
+
+import ConfigContext, { ChartDispatchContext } from '../../ConfigContext'
+import { useTooltip as useCoveTooltip } from '../../hooks/useTooltip'
+import { useChartHoverAnalytics } from '../../hooks/useChartHoverAnalytics'
+import { handleChartAriaLabels } from '../../helpers/handleChartAriaLabels'
+import getViewport from '@cdc/core/helpers/getViewport'
+import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+
+import RadarGrid from './RadarGrid'
+import RadarAxis from './RadarAxis'
+import RadarPolygon from './RadarPolygon'
+
+type TooltipData = {
+  entityName: string
+  values: { label: string; value: number }[]
+  dataXPosition: number
+  dataYPosition: number
+}
+
+type RadarChartProps = {
+  parentWidth?: number
+  parentHeight?: number
+  interactionLabel?: string
+}
+
+const RadarChart = React.forwardRef<SVGSVGElement, RadarChartProps>((props, ref) => {
+  const { interactionLabel = '' } = props
+
+  const {
+    transformedData: data,
+    config,
+    colorScale,
+    seriesHighlight,
+    isDraggingAnnotation,
+    formatNumber
+  } = useContext(ConfigContext)
+
+  const dispatch = useContext(ChartDispatchContext)
+
+  const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip<TooltipData>()
+
+  const { handleTooltipMouseOff } = useCoveTooltip({
+    xScale: false,
+    yScale: false,
+    showTooltip,
+    hideTooltip,
+    interactionLabel
+  })
+
+  const { handleChartMouseEnter, handleChartMouseLeave } = useChartHoverAnalytics({
+    config,
+    interactionLabel
+  })
+
+  // Get radar config with defaults
+  const radarConfig = config.radar || {
+    gridRings: 5,
+    showGridRings: true,
+    gridRingStyle: 'polygons',
+    scaleMin: 0,
+    scaleMax: '',
+    showFill: false,
+    fillOpacity: 0.3,
+    showPoints: true,
+    pointRadius: 4,
+    strokeWidth: 2,
+    axisLabelOffset: 15
+  }
+
+  // Extract dimension keys from series
+  const dimensionKeys = useMemo(() => {
+    if (!config.series || config.series.length === 0) return []
+    return config.series.map(s => s.dataKey).filter(Boolean)
+  }, [config.series])
+
+  // Extract entity identifier key
+  const entityKey = config.xAxis?.dataKey || ''
+
+  // Process data into entities with their dimension values
+  const entities = useMemo(() => {
+    if (!data || data.length === 0 || dimensionKeys.length === 0) return []
+
+    return data.map(row => {
+      const entityName = String(row[entityKey] || '')
+      const values = dimensionKeys.map(key => {
+        const val = parseFloat(row[key])
+        return isNaN(val) ? 0 : val
+      })
+      return { name: entityName, values }
+    })
+  }, [data, entityKey, dimensionKeys])
+
+  // Calculate scale max value
+  const scaleMax = useMemo(() => {
+    if (radarConfig.scaleMax && radarConfig.scaleMax !== '') {
+      return Number(radarConfig.scaleMax)
+    }
+    // Auto-calculate from data
+    let max = 0
+    entities.forEach(entity => {
+      entity.values.forEach(val => {
+        if (val > max) max = val
+      })
+    })
+    // Add 10% padding
+    return Math.ceil(max * 1.1)
+  }, [entities, radarConfig.scaleMax])
+
+  const scaleMin = Number(radarConfig.scaleMin) || 0
+
+  // Chart dimensions
+  const width = props.parentWidth || 400
+  const derivedViewport = getViewport(width)
+  const useMobileHeight = config.heights?.mobileVertical && isMobileHeightViewport(derivedViewport)
+  const height = Number(useMobileHeight ? config.heights.mobileVertical : config.heights?.vertical) || 400
+  const margin = { top: 40, right: 40, bottom: 40, left: 40 }
+
+  const innerWidth = width - margin.left - margin.right
+  const innerHeight = height - margin.top - margin.bottom
+  const radius = Math.min(innerWidth, innerHeight) / 2 - Number(radarConfig.axisLabelOffset || 15)
+
+  const centerX = width / 2
+  const centerY = height / 2
+
+  // Create radius scale
+  const radiusScale = useMemo(() => {
+    return scaleLinear<number>({
+      domain: [scaleMin, scaleMax],
+      range: [0, radius]
+    })
+  }, [scaleMin, scaleMax, radius])
+
+  // Handle tooltip display
+  const handlePolygonHover = (e: React.MouseEvent, entityData: { entityName: string; values: number[] }) => {
+    const tooltipValues = entityData.values.map((val, i) => ({
+      label: dimensionKeys[i],
+      value: val
+    }))
+
+    const point = localPoint(e) || { x: 0, y: 0 }
+
+    showTooltip({
+      tooltipData: {
+        entityName: entityData.entityName,
+        values: tooltipValues,
+        dataXPosition: point.x,
+        dataYPosition: point.y
+      },
+      tooltipLeft: point.x,
+      tooltipTop: point.y
+    })
+  }
+
+  const handlePolygonLeave = () => {
+    hideTooltip()
+  }
+
+  // Get color for entity
+  const getEntityColor = (entityName: string, index: number): string => {
+    if (colorScale) {
+      return colorScale(entityName)
+    }
+    // Fallback colors
+    const fallbackColors = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f']
+    return fallbackColors[index % fallbackColors.length]
+  }
+
+  // Update runtime seriesKeys for legend
+  useEffect(() => {
+    if (!dispatch || entities.length === 0) {
+      return
+    }
+
+    // Ensure seriesKeys are unique and stable
+    const seriesKeys = Array.from(new Set(entities.map(e => e.name)))
+    const previousSeriesKeys = (config.runtime?.seriesKeys || []) as string[]
+
+    const hasSameKeys =
+      previousSeriesKeys.length === seriesKeys.length &&
+      previousSeriesKeys.every((key, index) => key === seriesKeys[index])
+
+    if (hasSameKeys) {
+      return
+    }
+
+    dispatch({
+      type: 'SET_RUNTIME',
+      payload: {
+        ...config.runtime,
+        seriesKeys,
+        seriesLabelsAll: seriesKeys
+      }
+    })
+  }, [entities, dispatch, config.runtime])
+
+  // Validation
+  if (!config.xAxis?.dataKey) {
+    return (
+      <div className='radar-chart-error' style={{ padding: '20px', color: '#666' }}>
+        Radar chart requires an entity identifier. Please set the X Axis data key in the configuration.
+      </div>
+    )
+  }
+
+  if (dimensionKeys.length < 3) {
+    return (
+      <div className='radar-chart-error' style={{ padding: '20px', color: '#666' }}>
+        Radar chart requires at least 3 dimensions. Please add more series in the configuration.
+      </div>
+    )
+  }
+
+  if (entities.length === 0) {
+    return (
+      <div className='radar-chart-error' style={{ padding: '20px', color: '#666' }}>
+        No data available for radar chart.
+      </div>
+    )
+  }
+
+  return (
+    <ErrorBoundary component='RadarChart'>
+      <svg
+        ref={ref}
+        width={width}
+        height={height}
+        className='radar-chart'
+        role='img'
+        aria-label={handleChartAriaLabels(config)}
+        onMouseEnter={handleChartMouseEnter}
+        onMouseLeave={() => {
+          handleTooltipMouseOff()
+          handleChartMouseLeave()
+        }}
+      >
+        <Group top={centerY} left={centerX}>
+          {/* Grid rings */}
+          <RadarGrid radius={radius} axisCount={dimensionKeys.length} />
+
+          {/* Axis lines and labels */}
+          <RadarAxis radius={radius} />
+
+          {/* Data polygons */}
+          {entities.map((entity, index) => {
+            const isHighlighted = seriesHighlight.length === 0 || seriesHighlight.includes(entity.name)
+            const shouldMute = config.legend?.behavior === 'highlight' && seriesHighlight.length > 0 && !isHighlighted
+
+            // Skip rendering if isolate behavior and not highlighted
+            if (config.legend?.behavior === 'isolate' && seriesHighlight.length > 0 && !isHighlighted) {
+              return null
+            }
+
+            return (
+              <RadarPolygon
+                key={entity.name}
+                values={entity.values}
+                scale={radiusScale}
+                color={getEntityColor(entity.name, index)}
+                entityName={entity.name}
+                shouldMute={shouldMute}
+                onMouseEnter={handlePolygonHover}
+                onMouseLeave={handlePolygonLeave}
+              />
+            )
+          })}
+        </Group>
+      </svg>
+
+      {/* Tooltip */}
+      {!isDraggingAnnotation && tooltipData && tooltipOpen && (
+        <>
+          <style>{`.tooltip {background-color: rgba(255,255,255, ${
+            (config.tooltips?.opacity || 90) / 100
+          }) !important`}</style>
+          <TooltipWithBounds className='tooltip cdc-open-viz-module' left={tooltipLeft} top={tooltipTop}>
+            <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>{tooltipData.entityName}</div>
+            <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+              {tooltipData.values.map((item, index) => (
+                <li key={index} style={{ padding: '2px 0' }}>
+                  <span style={{ fontWeight: 500 }}>{item.label}:</span>{' '}
+                  {formatNumber ? formatNumber(item.value, 'left') : item.value}
+                </li>
+              ))}
+            </ul>
+          </TooltipWithBounds>
+        </>
+      )}
+    </ErrorBoundary>
+  )
+})
+
+export default RadarChart

package/src/components/RadarChart/RadarGrid.tsx

@@ -0,0 +1,64 @@
+import React, { useContext } from 'react'
+import { Group } from '@visx/group'
+import { genPoints, pointsToString } from './helpers'
+import ConfigContext from '../../ConfigContext'
+
+type RadarGridProps = {
+  radius: number
+  axisCount: number
+  strokeColor?: string
+  strokeWidth?: number
+}
+
+/**
+ * RadarGrid renders concentric rings (either circles or polygons)
+ * for the radar chart background grid
+ */
+const RadarGrid: React.FC<RadarGridProps> = ({ radius, axisCount, strokeColor = '#e0e0e0', strokeWidth = 1 }) => {
+  const { config } = useContext(ConfigContext)
+
+  const radarConfig = config.radar
+  const levels = Number(radarConfig?.gridRings) || 5
+  const showGrid = radarConfig?.showGridRings ?? true
+  const gridStyle = radarConfig?.gridRingStyle ?? 'polygons'
+  if (!showGrid) return null
+
+  return (
+    <Group className='radar-grid'>
+      {[...new Array(levels)].map((_, i) => {
+        const levelRadius = ((i + 1) * radius) / levels
+        const key = `grid-level-${i}`
+
+        if (gridStyle === 'circles') {
+          return (
+            <circle
+              key={key}
+              cx={0}
+              cy={0}
+              r={levelRadius}
+              fill='none'
+              stroke={strokeColor}
+              strokeWidth={strokeWidth}
+              strokeOpacity={0.5}
+            />
+          )
+        }
+
+        // Polygon grid
+        const points = genPoints(axisCount, levelRadius)
+        return (
+          <polygon
+            key={key}
+            points={pointsToString(points)}
+            fill='none'
+            stroke={strokeColor}
+            strokeWidth={strokeWidth}
+            strokeOpacity={0.5}
+          />
+        )
+      })}
+    </Group>
+  )
+}
+
+export default RadarGrid

package/src/components/RadarChart/RadarPolygon.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useContext } from 'react'
+import { Group } from '@visx/group'
+import { genPolygonPoints, pointsToString } from './helpers'
+import ConfigContext from '../../ConfigContext'
+
+type RadarPolygonProps = {
+  values: number[]
+  scale: (n: number) => number
+  color: string
+  entityName: string
+  shouldMute: boolean
+  onMouseEnter?: (e: React.MouseEvent, data: { entityName: string; values: number[] }) => void
+  onMouseLeave?: () => void
+}
+
+/**
+ * RadarPolygon renders a single data polygon on the radar chart
+ * with optional data points at vertices
+ */
+const RadarPolygon: React.FC<RadarPolygonProps> = ({
+  values,
+  scale,
+  color,
+  entityName,
+  shouldMute,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const { config } = useContext(ConfigContext)
+
+  const radarConfig = config.radar
+  const showFill = radarConfig?.showFill ?? false
+  const fillOpacity = showFill ? Number(radarConfig?.fillOpacity ?? 0.3) : 0
+  const strokeWidth = Number(radarConfig?.strokeWidth) || 2
+  const showPoints = radarConfig?.showPoints ?? true
+  const pointRadius = Number(radarConfig?.pointRadius) || 4
+  const [isHovered, setIsHovered] = useState(false)
+
+  const points = genPolygonPoints(values, scale)
+  const polygonString = pointsToString(points)
+
+  const opacity = shouldMute ? 0.2 : isHovered ? Math.min(1, fillOpacity + 0.2) : fillOpacity
+  const currentStrokeWidth = isHovered ? strokeWidth + 1 : strokeWidth
+
+  const handleMouseEnter = (e: React.MouseEvent) => {
+    setIsHovered(true)
+    onMouseEnter?.(e, { entityName, values })
+  }
+
+  const handleMouseLeave = () => {
+    setIsHovered(false)
+    onMouseLeave?.()
+  }
+
+  return (
+    <Group className={`radar-polygon radar-polygon-${CSS.escape(String(entityName))}`}>
+      {/* Data polygon */}
+      <polygon
+        points={polygonString}
+        fill={color}
+        fillOpacity={opacity}
+        stroke={color}
+        strokeWidth={currentStrokeWidth}
+        strokeOpacity={shouldMute ? 0.3 : 1}
+        style={{ cursor: 'pointer', transition: 'opacity 0.2s ease' }}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      />
+
+      {/* Data points at vertices */}
+      {showPoints &&
+        points.map((point, i) => (
+          <circle
+            key={`point-${i}`}
+            cx={point.x}
+            cy={point.y}
+            r={isHovered ? pointRadius + 1 : pointRadius}
+            fill={color}
+            stroke='#fff'
+            strokeWidth={1}
+            opacity={shouldMute ? 0.3 : 1}
+            style={{ cursor: 'pointer', transition: 'r 0.2s ease' }}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          />
+        ))}
+    </Group>
+  )
+}
+
+export default RadarPolygon

package/src/components/RadarChart/helpers.ts

@@ -0,0 +1,83 @@
+/**
+ * Helper utilities for Radar Chart point generation
+ * Following visx patterns for radar/spider chart calculations
+ */
+
+export type RadarPoint = {
+  x: number
+  y: number
+}
+
+/**
+ * Generate angles for each axis, starting at 12 o'clock position
+ * @param length - number of axes
+ * @returns array of angle objects in degrees
+ */
+export const genAngles = (length: number): { angle: number }[] => {
+  return [...new Array(length + 1)].map((_, i) => ({
+    angle: i * (360 / length) - 90 // Start at 12 o'clock (-90 degrees)
+  }))
+}
+
+/**
+ * Generate points for polygon vertices at a given radius
+ * @param length - number of vertices
+ * @param radius - distance from center
+ * @returns array of x,y coordinates
+ */
+export const genPoints = (length: number, radius: number): RadarPoint[] => {
+  return [...new Array(length)].map((_, i) => {
+    const angle = (i * 2 * Math.PI) / length - Math.PI / 2 // Start at 12 o'clock
+    return {
+      x: radius * Math.cos(angle),
+      y: radius * Math.sin(angle)
+    }
+  })
+}
+
+/**
+ * Generate polygon points from data values
+ * @param dataArray - array of numeric values for each axis
+ * @param scale - scale function to map values to radius
+ * @returns array of x,y coordinates for the polygon
+ */
+export const genPolygonPoints = (dataArray: number[], scale: (n: number) => number): RadarPoint[] => {
+  return dataArray.map((value, i) => {
+    const angle = (i * 2 * Math.PI) / dataArray.length - Math.PI / 2
+    const scaledRadius = scale(value)
+    return {
+      x: scaledRadius * Math.cos(angle),
+      y: scaledRadius * Math.sin(angle)
+    }
+  })
+}
+
+/**
+ * Convert RadarPoint array to SVG polygon points string
+ * @param points - array of RadarPoint objects
+ * @returns string formatted for SVG polygon points attribute
+ */
+export const pointsToString = (points: RadarPoint[]): string => {
+  return points.map(p => `${p.x},${p.y}`).join(' ')
+}
+
+/**
+ * Calculate the optimal text anchor based on angle position
+ * @param angle - angle in radians
+ * @returns 'start' | 'middle' | 'end'
+ */
+export const getTextAnchor = (angle: number): 'start' | 'middle' | 'end' => {
+  const degrees = (angle * 180) / Math.PI
+  const normalizedDegrees = ((degrees % 360) + 360) % 360
+
+  if (normalizedDegrees > 60 && normalizedDegrees < 120) {
+    return 'middle'
+  }
+  if (normalizedDegrees > 240 && normalizedDegrees < 300) {
+    return 'middle'
+  }
+  if (normalizedDegrees >= 120 && normalizedDegrees <= 240) {
+    return 'end'
+  }
+  return 'start'
+}

package/src/components/RadarChart/index.tsx

@@ -0,0 +1,3 @@
+import RadarChart from './RadarChart'
+
+export default RadarChart