@cdc/chart 4.26.6 → 4.26.10

package/src/components/PairedBarChart.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../ConfigContext'
+import PairedBarChart from './PairedBarChart'
+import { createMockChartContext, createMockConfig } from './LinearChart/tests/mockConfigContext'
+
+vi.mock('@cdc/core/helpers/cove/accessibility', () => ({
+  getContrastColor: () => '#000'
+}))
+
+vi.mock('@cdc/core/helpers/getTextWidth', () => ({
+  getTextWidth: () => 10
+}))
+
+const renderPairedBar = (casesLabel: string) => {
+  const baseConfig = createMockConfig()
+  const data = [{ Year: '2024', Cases: 10, Deaths: 2 }]
+  const config = createMockConfig({
+    visualizationType: 'Paired Bar',
+    orientation: 'horizontal',
+    barHasBorder: 'false',
+    barHeight: 25,
+    barSpace: 15,
+    xAxis: { ...baseConfig.xAxis, dataKey: 'Year', size: '50', type: 'categorical' },
+    yAxis: { ...baseConfig.yAxis, displayNumbersOnBar: false },
+    series: [
+      { dataKey: 'Cases', name: 'Reported Cases', type: 'Paired Bar', axis: 'Left', tooltip: true },
+      { dataKey: 'Deaths', name: 'Reported Deaths', type: 'Paired Bar', axis: 'Left', tooltip: true }
+    ] as any,
+    columns: {
+      Cases: { name: 'Cases', label: casesLabel },
+      Deaths: { name: 'Deaths', label: 'Death Rate' }
+    } as any,
+    runtime: {
+      ...baseConfig.runtime,
+      seriesLabels: { Cases: 'Reported Cases', Deaths: 'Reported Deaths' }
+    } as any
+  })
+  const context = createMockChartContext(config, {
+    transformedData: data,
+    colorScale: () => '#005ea8',
+    formatNumber: value => String(value)
+  })
+
+  return render(
+    <ConfigContext.Provider value={context}>
+      <PairedBarChart width={400} height={100} originalWidth={450} yAxisWidth={50} />
+    </ConfigContext.Provider>
+  )
+}
+
+describe('PairedBarChart tooltips', () => {
+  it('uses the customized series column label without rendering an undefined heading', () => {
+    const { container } = renderPairedBar('Case Rate')
+    const tooltip = container.querySelector('.bar.group-1')?.getAttribute('data-tooltip-html') || ''
+
+    expect(tooltip).toContain('Year: 2024')
+    expect(tooltip).toContain('Case Rate: 10')
+    expect(tooltip).not.toContain('Reported Cases')
+    expect(tooltip).not.toContain('undefined:')
+  })
+
+  it('falls back to the Series Name when the Label matches the data key', () => {
+    const { container } = renderPairedBar('Cases')
+    const tooltip = container.querySelector('.bar.group-1')?.getAttribute('data-tooltip-html') || ''
+
+    expect(tooltip).toContain('Reported Cases: 10')
+    expect(tooltip).not.toContain('undefined:')
+  })
+})

package/src/components/PieChart/PieChart.tsx

@@ -4,11 +4,10 @@ import { animated, useTransition, to } from '@react-spring/web'
 // visx
 import { Pie } from '@visx/shape'
 import { Group } from '@visx/group'
-import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 import { colorPalettesChart as colorPalettes } from '@cdc/core/data/colorPalettes'
 import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
-import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import { getColorPaletteMajorVersion } from '@cdc/core/helpers/getColorPaletteMajorVersion'
 import {
   v2ColorDistribution,
   divergentColorDistribution,
@@ -25,6 +24,9 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { scaleOrdinal } from '@visx/scale'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { type TooltipDisplayData } from '../../helpers/tooltipHelpers'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import { getPieLabelPosition } from './helpers/labelPlacement'
+import { getV21ChartDistributionColors } from '../../helpers/getV21ChartDistributionColors'
 
 type TooltipData = TooltipDisplayData
 
@@ -34,6 +36,37 @@ type PieChartProps = {
   interactionLabel?: string
 }
 
+const ENHANCED_PIE_LABEL_FONT_SIZE = 13
+const ENHANCED_PIE_LABEL_LINE_HEIGHT = 15
+const ENHANCED_PIE_LABEL_HEIGHT = ENHANCED_PIE_LABEL_LINE_HEIGHT * 2
+const ENHANCED_PIE_LABEL_FONT = `${ENHANCED_PIE_LABEL_FONT_SIZE}px sans-serif`
+const ENHANCED_PIE_LABEL_MIN_ANGLE = 0.01
+const LEGACY_PERCENT_LABEL_MIN_ANGLE = 0.1
+const MIN_RADIUS_WITH_LABELS = 55
+const MIN_LABEL_GUTTER = 96
+const OUTSIDE_LABEL_OFFSET = 22
+const LABEL_GUTTER_PADDING = OUTSIDE_LABEL_OFFSET + 16
+const VERTICAL_LABEL_GUTTER = 44
+
+const pieLabelTextWidthCache = new Map<string, number>()
+const MAX_PIE_LABEL_TEXT_CACHE = 2000
+
+const measurePieLabelText = (text: string) => {
+  const cached = pieLabelTextWidthCache.get(text)
+  if (cached !== undefined) return cached
+
+  const measured =
+    typeof document === 'undefined'
+      ? Math.ceil(text.length * ENHANCED_PIE_LABEL_FONT_SIZE * 0.6)
+      : getTextWidth(text, ENHANCED_PIE_LABEL_FONT) ?? Math.ceil(text.length * ENHANCED_PIE_LABEL_FONT_SIZE * 0.6)
+
+  // Avoid unbounded growth in long-lived sessions with many unique labels.
+  if (pieLabelTextWidthCache.size >= MAX_PIE_LABEL_TEXT_CACHE) pieLabelTextWidthCache.clear()
+
+  pieLabelTextWidthCache.set(text, measured)
+  return measured
+}
+
 const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) => {
   const { interactionLabel = '' } = props
   const {
@@ -70,6 +103,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
   const pivotKey = dataNeedsPivot ? 'pivotColumn' : undefined
   const showPercentage = config.dataFormat.showPiePercent
   const labelForCalcArea = 'Calculated Area'
+  const showCategoryPercentageLabels = Boolean(config.labels)
 
   const _data = useMemo(() => {
     let baseData = []
@@ -124,7 +158,10 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
 
   // Helper function to determine enhanced distribution type and apply it
   const applyEnhancedColorDistribution = (config, palette, numberOfKeys) => {
-    const version = getColorPaletteVersion(config)
+    const v21DistributionColors = getV21ChartDistributionColors(config, palette, numberOfKeys)
+    if (v21DistributionColors) return v21DistributionColors
+
+    const version = getColorPaletteMajorVersion(config)
     const configPalette = config.general?.palette?.name || config.palette
 
     // Skip enhanced distribution if not v2, too many keys, or wrong palette length
@@ -136,7 +173,6 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
     const isDivergent = configPalette && configPalette.includes('divergent')
     const isColorblindSafe =
       configPalette && (configPalette.includes('colorblindsafe') || configPalette.includes('qualitative_standard'))
-
     // Determine which distribution to use based on palette type
     let distributionMap = null
     if (isDivergent) {
@@ -217,6 +253,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
     config.xAxis.dataKey,
     config.general?.palette?.name,
     config.general?.palette?.isReversed,
+    config.general?.palette?.version,
     config.general?.palette?.customColors,
     config.general?.palette?.customColorsOrdered,
     config.palette
@@ -269,9 +306,25 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
 
       let roundedPercentage = percentageToDisplay.toFixed(roundTo) + '%'
       // add missing pie part
-      if (arc.data[config.xAxis.dataKey] === labelForCalcArea && config.dataFormat.showPiePercent) {
+      if (arc.data[config.runtime.xAxis.dataKey] === labelForCalcArea && config.dataFormat.showPiePercent) {
         roundedPercentage = '**'
       }
+      let categoryLabel = ''
+      let labelPosition = { placement: 'inside' as const, x: 0, y: 0, textAnchor: 'middle' as const }
+
+      if (showCategoryPercentageLabels) {
+        categoryLabel = String(arc.data[config.runtime.xAxis.dataKey] ?? '')
+        const labelWidth = Math.max(measurePieLabelText(categoryLabel), measurePieLabelText(roundedPercentage))
+        labelPosition = getPieLabelPosition({
+          startAngle: arc.startAngle,
+          endAngle: arc.endAngle,
+          innerRadius: radius - donutThickness,
+          outerRadius: radius,
+          labelWidth,
+          labelHeight: ENHANCED_PIE_LABEL_HEIGHT,
+          isDonut: config.pieType === 'Donut'
+        })
+      }
 
       // Determine if this slice should be muted based on legend behavior
       const isHighlighted =
@@ -279,6 +332,8 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
       const shouldMute = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && !isHighlighted
       const sliceOpacity = shouldMute ? 0.3 : 1
       const textOpacity = shouldMute ? 0.3 : 1
+      const labelFill = labelPosition.placement === 'inside' ? textColor : '#000000'
+      const labelMinAngle = showCategoryPercentageLabels ? ENHANCED_PIE_LABEL_MIN_ANGLE : LEGACY_PERCENT_LABEL_MIN_ANGLE
 
       return (
         <Group key={key} className={`slice-${CSS.escape(String(key))}`}>
@@ -302,7 +357,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
           />
 
           {/* ── the percentage label */}
-          {arc.endAngle - arc.startAngle > 0.1 && (
+          {arc.endAngle - arc.startAngle > labelMinAngle && !showCategoryPercentageLabels && (
             <animated.text
               transform={to([styles.startAngle, styles.endAngle], (start: number, end: number) => {
                 const [x, y] = path.centroid({
@@ -321,6 +376,37 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
               {roundedPercentage}
             </animated.text>
           )}
+
+          {arc.endAngle - arc.startAngle > labelMinAngle && showCategoryPercentageLabels && (
+            <animated.text
+              className={`pie-label pie-label--${labelPosition.placement}`}
+              transform={to([styles.startAngle, styles.endAngle], (start: number, end: number) => {
+                const midAngle = start + (end - start) / 2
+                const innerRadius = radius - donutThickness
+                const outsideOffset = OUTSIDE_LABEL_OFFSET
+                const labelRadius =
+                  labelPosition.placement === 'inside'
+                    ? innerRadius + (radius - innerRadius) * 0.62
+                    : radius + outsideOffset
+                const x = Math.sin(midAngle) * labelRadius
+                const y = -Math.cos(midAngle) * labelRadius
+                return `translate(${x},${y})`
+              })}
+              textAnchor={labelPosition.textAnchor}
+              pointerEvents='none'
+              fill={labelFill}
+              opacity={textOpacity}
+              style={{ fontSize: ENHANCED_PIE_LABEL_FONT_SIZE, fontFamily: 'sans-serif' }}
+            >
+              <title>{`${categoryLabel}: ${roundedPercentage}`}</title>
+              <tspan x={0} dy={-ENHANCED_PIE_LABEL_LINE_HEIGHT / 2}>
+                {categoryLabel}
+              </tspan>
+              <tspan x={0} dy={ENHANCED_PIE_LABEL_LINE_HEIGHT}>
+                {roundedPercentage}
+              </tspan>
+            </animated.text>
+          )}
         </Group>
       )
     })
@@ -334,11 +420,33 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
   }
 
   const height = config.heights.vertical
-
-  const radius = Math.min(width, height) / 2
+  const maxPieLabelWidth = useMemo(() => {
+    if (!showCategoryPercentageLabels) return 0
+
+    const roundTo = Number(config.dataFormat.roundTo) || 0
+    const percentExample = `${(100).toFixed(roundTo)}%`
+
+    return _data.reduce((widestLabel, datum) => {
+      const categoryLabel = String(datum[config.runtime.xAxis.dataKey] ?? '')
+      return Math.max(widestLabel, measurePieLabelText(categoryLabel), measurePieLabelText(percentExample))
+    }, 0)
+  }, [_data, config.dataFormat.roundTo, config.runtime.xAxis.dataKey, showCategoryPercentageLabels])
+  const maxHorizontalLabelGutter = showCategoryPercentageLabels
+    ? Math.max(0, (width - MIN_RADIUS_WITH_LABELS * 2) / 2)
+    : 0
+  const labelGutter = showCategoryPercentageLabels
+    ? Math.min(Math.max(maxPieLabelWidth + LABEL_GUTTER_PADDING, MIN_LABEL_GUTTER), maxHorizontalLabelGutter)
+    : 0
+  const availableDiameter = showCategoryPercentageLabels
+    ? Math.min(width - labelGutter * 2, height - VERTICAL_LABEL_GUTTER * 2)
+    : Math.min(width, height)
+
+  const radius = showCategoryPercentageLabels ? Math.max(0, availableDiameter / 2) : Math.min(width, height) / 2
+  const svgWidth = showCategoryPercentageLabels ? width : radius * 2
+  const svgLeftOffset = Math.max((props.parentWidth - svgWidth) / 2, 0)
   const centerY = height / 2
-  const centerX = props.parentWidth / 2
-  const donutThickness = config.pieType === 'Donut' ? 75 : radius
+  const centerX = showCategoryPercentageLabels ? svgWidth / 2 : radius
+  const donutThickness = config.pieType === 'Donut' ? Math.min(75, radius * 0.65) : radius
 
   useEffect(() => {
     if (seriesHighlight.length > 0 && config.legend.behavior !== 'highlight') {
@@ -389,7 +497,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
     <>
       <ErrorBoundary component='PieChart'>
         <svg
-          width={radius * 2}
+          width={svgWidth}
           height={height}
           className={getSvgClasses()}
           role='img'
@@ -400,7 +508,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
             handleChartMouseLeave()
           }}
         >
-          <Group top={centerY} left={radius}>
+          <Group top={centerY} left={centerX}>
             {/* prettier-ignore */}
             <Pie
               data={filteredData || _data}
@@ -435,7 +543,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
               }) !important`}</style>
               <TooltipWithBounds
                 className={'tooltip cove-visualization'}
-                left={tooltipLeft + centerX - radius}
+                left={tooltipLeft + svgLeftOffset}
                 top={tooltipTop}
               >
                 <ul>

package/src/components/PieChart/helpers/labelPlacement.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest'
+import { getPieLabelPlacement, getPieLabelPosition } from './labelPlacement'
+
+describe('pie label placement', () => {
+  it('keeps labels inside regular pie slices when the slice has enough room', () => {
+    expect(
+      getPieLabelPlacement({
+        startAngle: 0,
+        endAngle: Math.PI / 2,
+        innerRadius: 0,
+        outerRadius: 120,
+        labelWidth: 50,
+        labelHeight: 28,
+        isDonut: false
+      })
+    ).toBe('inside')
+  })
+
+  it('moves regular pie labels outside when they are too wide for the slice', () => {
+    expect(
+      getPieLabelPlacement({
+        startAngle: 0,
+        endAngle: Math.PI / 8,
+        innerRadius: 0,
+        outerRadius: 120,
+        labelWidth: 80,
+        labelHeight: 28,
+        isDonut: false
+      })
+    ).toBe('outside')
+  })
+
+  it('always places donut labels outside the partition', () => {
+    expect(
+      getPieLabelPlacement({
+        startAngle: 0,
+        endAngle: Math.PI,
+        innerRadius: 60,
+        outerRadius: 120,
+        labelWidth: 20,
+        labelHeight: 20,
+        isDonut: true
+      })
+    ).toBe('outside')
+  })
+
+  it('anchors outside labels by side of the pie', () => {
+    const rightSide = getPieLabelPosition({
+      startAngle: 0,
+      endAngle: Math.PI / 8,
+      innerRadius: 0,
+      outerRadius: 120,
+      labelWidth: 80,
+      labelHeight: 28,
+      isDonut: false
+    })
+
+    const leftSide = getPieLabelPosition({
+      startAngle: Math.PI,
+      endAngle: Math.PI + Math.PI / 8,
+      innerRadius: 0,
+      outerRadius: 120,
+      labelWidth: 80,
+      labelHeight: 28,
+      isDonut: false
+    })
+
+    expect(rightSide.placement).toBe('outside')
+    expect(rightSide.textAnchor).toBe('start')
+    expect(leftSide.placement).toBe('outside')
+    expect(leftSide.textAnchor).toBe('end')
+  })
+
+  it('uses the same angle orientation as the arc generator', () => {
+    const topLabel = getPieLabelPosition({
+      startAngle: 0,
+      endAngle: Math.PI / 12,
+      innerRadius: 0,
+      outerRadius: 120,
+      labelWidth: 80,
+      labelHeight: 28,
+      isDonut: false
+    })
+
+    expect(topLabel.placement).toBe('outside')
+    expect(topLabel.y).toBeLessThan(0)
+  })
+})

package/src/components/PieChart/helpers/labelPlacement.ts

@@ -0,0 +1,95 @@
+export type PieLabelPlacement = 'inside' | 'outside'
+
+export type PieLabelAnchor = 'start' | 'middle' | 'end'
+
+export type PieLabelPosition = {
+  placement: PieLabelPlacement
+  x: number
+  y: number
+  textAnchor: PieLabelAnchor
+}
+
+type PieLabelPlacementOptions = {
+  startAngle: number
+  endAngle: number
+  innerRadius: number
+  outerRadius: number
+  labelWidth: number
+  labelHeight: number
+  isDonut: boolean
+  insidePadding?: number
+}
+
+type PieLabelPositionOptions = PieLabelPlacementOptions & {
+  outsideOffset?: number
+}
+
+const DEFAULT_INSIDE_PADDING = 12
+const DEFAULT_OUTSIDE_OFFSET = 22
+
+const getMidAngle = (startAngle: number, endAngle: number) => startAngle + (endAngle - startAngle) / 2
+const getArcPoint = (angle: number, radius: number) => ({
+  x: Math.sin(angle) * radius,
+  y: -Math.cos(angle) * radius
+})
+
+export const getPieLabelPlacement = ({
+  startAngle,
+  endAngle,
+  innerRadius,
+  outerRadius,
+  labelWidth,
+  labelHeight,
+  isDonut,
+  insidePadding = DEFAULT_INSIDE_PADDING
+}: PieLabelPlacementOptions): PieLabelPlacement => {
+  if (isDonut) return 'outside'
+
+  const angle = Math.abs(endAngle - startAngle)
+  const labelRadius = innerRadius + (outerRadius - innerRadius) * 0.62
+  const availableChord = 2 * labelRadius * Math.sin(angle / 2)
+  const availableRadialDepth = outerRadius - innerRadius
+
+  const hasEnoughArcWidth = labelWidth + insidePadding <= availableChord
+  const hasEnoughRadialDepth = labelHeight + insidePadding <= availableRadialDepth
+
+  return hasEnoughArcWidth && hasEnoughRadialDepth ? 'inside' : 'outside'
+}
+
+export const getPieLabelPosition = ({
+  startAngle,
+  endAngle,
+  innerRadius,
+  outerRadius,
+  labelWidth,
+  labelHeight,
+  isDonut,
+  insidePadding,
+  outsideOffset = DEFAULT_OUTSIDE_OFFSET
+}: PieLabelPositionOptions): PieLabelPosition => {
+  const placement = getPieLabelPlacement({
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    labelWidth,
+    labelHeight,
+    isDonut,
+    insidePadding
+  })
+  const midAngle = getMidAngle(startAngle, endAngle)
+  const labelRadius =
+    placement === 'inside' ? innerRadius + (outerRadius - innerRadius) * 0.62 : outerRadius + outsideOffset
+  const { x, y } = getArcPoint(midAngle, labelRadius)
+
+  if (placement === 'inside') {
+    return { placement, x, y, textAnchor: 'middle' }
+  }
+
+  return {
+    placement,
+    x,
+    y,
+    textAnchor: x < 0 ? 'end' : 'start'
+  }
+}

package/src/components/RacingChartRenderer.tsx

@@ -0,0 +1,44 @@
+import { type ReactNode, type RefObject } from 'react'
+import ParentSize from '@visx/responsive/lib/components/ParentSize'
+import BarChartRace, { BarChartRaceFallback, type BarRaceEligibility } from './BarChartRace'
+import LineChartRace, { LineChartRaceFallback, type LineRaceEligibility } from './LineChartRace'
+
+type Props = {
+  barRace: BarRaceEligibility
+  family: 'Bar' | 'Line'
+  lineRace: LineRaceEligibility
+  parentRef: RefObject<HTMLDivElement>
+  renderTopYAxisTitles: () => ReactNode
+  svgRef: RefObject<SVGAElement>
+}
+
+const RacingChartRenderer = ({ barRace, family, lineRace, parentRef, renderTopYAxisTitles, svgRef }: Props) => {
+  const eligibility = family === 'Bar' ? barRace : lineRace
+
+  return (
+    <>
+      {(family === 'Line' || !eligibility.eligible) && renderTopYAxisTitles()}
+      <div ref={parentRef} style={{ width: '100%' }}>
+        <ParentSize>
+          {parent => {
+            if (family === 'Bar') {
+              return barRace.eligible ? (
+                <BarChartRace parentWidth={parent.width} race={barRace} />
+              ) : (
+                <BarChartRaceFallback ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
+              )
+            }
+
+            return lineRace.eligible ? (
+              <LineChartRace ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} race={lineRace} />
+            ) : (
+              <LineChartRaceFallback ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
+            )
+          }}
+        </ParentSize>
+      </div>
+    </>
+  )
+}
+
+export default RacingChartRenderer