@cdc/chart 4.26.7 → 4.26.10

package/src/hooks/tests/useTooltip.test.tsx

@@ -1,8 +1,11 @@
 import React from 'react'
-import { act, renderHook } from '@testing-library/react'
+import { act, render, renderHook, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import ConfigContext from '../../ConfigContext'
 import { createMockChartContext, createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+import { type TooltipRow } from '../../helpers/tooltipHelpers'
+import { type ChartConfig } from '../../types/ChartConfig'
+import { type ChartContext } from '../../types/ChartContext'
 import { useTooltip } from '../useTooltip'
 
 vi.mock('@visx/event', () => ({
@@ -106,6 +109,36 @@ describe('useTooltip', () => {
     hideTooltip.mockClear()
   })
 
+  const renderTooltipListItem = (
+    tooltipConfig: ChartConfig,
+    tooltipRow: TooltipRow,
+    {
+      index = 1,
+      useMarkerColumn = false,
+      contextOverrides = {}
+    }: { index?: number; useMarkerColumn?: boolean; contextOverrides?: Partial<ChartContext> } = {}
+  ) => {
+    const tooltipWrapper = ({ children }: React.PropsWithChildren) => (
+      <ConfigContext.Provider value={createMockChartContext(tooltipConfig, { tableData: [row], ...contextOverrides })}>
+        {children}
+      </ConfigContext.Provider>
+    )
+    const { result } = renderHook(
+      () =>
+        useTooltip({
+          xScale,
+          yScale,
+          showTooltip,
+          hideTooltip,
+          yAxisWidth: 0
+        }),
+      { wrapper: tooltipWrapper }
+    )
+    const TooltipListItem = result.current.TooltipListItem
+
+    return render(<TooltipListItem row={tooltipRow} index={index} useMarkerColumn={useMarkerColumn} />)
+  }
+
   it('does not apply the left-axis suffix to an additional tooltip column', () => {
     const { result } = renderHook(
       () =>
@@ -129,4 +162,323 @@ describe('useTooltip', () => {
       ])
     )
   })
+
+  it.each([
+    {
+      caseName: 'customized Column Label over an authored Series Name',
+      visualizationType: 'Bar',
+      seriesName: 'Rate Series',
+      columnLabel: 'Rate Column',
+      expected: 'Rate Column: 22.0%'
+    },
+    {
+      caseName: 'inferred Series Name when the Column Label matches the data key',
+      visualizationType: 'Bar',
+      seriesName: undefined,
+      columnLabel: 'Percentage',
+      expected: 'Percentage: 22.0%'
+    },
+    {
+      caseName: 'authored Series Name when the Column Label matches the data key',
+      visualizationType: 'Bar',
+      seriesName: 'Rate Series',
+      columnLabel: 'Percentage',
+      expected: 'Rate Series: 22.0%'
+    },
+    {
+      caseName: 'authored Series Name when the Column Label is cleared',
+      visualizationType: 'Bar',
+      seriesName: 'Rate Series',
+      columnLabel: '',
+      expected: 'Rate Series: 22.0%'
+    },
+    {
+      caseName: 'customized Column Label for a Forest Plot',
+      visualizationType: 'Forest Plot',
+      seriesName: 'Rate Series',
+      columnLabel: 'Rate Column',
+      expected: 'Rate Column: 22.0%'
+    }
+  ])('uses the $caseName', ({ visualizationType, seriesName, columnLabel, expected }) => {
+    const series = {
+      dataKey: 'Percentage',
+      ...(seriesName ? { name: seriesName } : {}),
+      type: 'Bar',
+      axis: 'Left',
+      tooltip: true
+    }
+    const tooltipConfig = createMockConfig({
+      ...config,
+      visualizationType: visualizationType as any,
+      series: [series] as any,
+      columns: {
+        ...config.columns,
+        Percentage: { name: 'Percentage', label: columnLabel }
+      } as any,
+      runtime: {
+        ...config.runtime,
+        series: [series],
+        seriesLabels: { Percentage: seriesName || 'Percentage' }
+      } as any
+    })
+    const tooltipWrapper = ({ children }: React.PropsWithChildren) => (
+      <ConfigContext.Provider value={createMockChartContext(tooltipConfig, { tableData: [row] })}>
+        {children}
+      </ConfigContext.Provider>
+    )
+    const { result } = renderHook(
+      () =>
+        useTooltip({
+          xScale,
+          yScale,
+          showTooltip,
+          hideTooltip,
+          yAxisWidth: 0
+        }),
+      { wrapper: tooltipWrapper }
+    )
+    const TooltipListItem = result.current.TooltipListItem
+
+    render(<TooltipListItem row={{ key: 'Percentage', value: '22.0%', kind: 'series' }} index={1} />)
+
+    expect(screen.getByText(expected)).toBeTruthy()
+  })
+
+  it.each([
+    { caseName: 'standard chart', visualizationType: 'Bar' },
+    { caseName: 'Forest Plot', visualizationType: 'Forest Plot' }
+  ])('preserves an additional column label that matches a series key for a $caseName', ({ visualizationType }) => {
+    const series = {
+      dataKey: 'Percentage',
+      name: 'Rate Series',
+      type: 'Bar',
+      axis: 'Left',
+      tooltip: true
+    }
+    const tooltipConfig = createMockConfig({
+      ...config,
+      visualizationType: visualizationType as any,
+      series: [series] as any,
+      runtime: {
+        ...config.runtime,
+        series: [series],
+        seriesLabels: { Percentage: 'Rate Series' }
+      } as any
+    })
+    const tooltipWrapper = ({ children }: React.PropsWithChildren) => (
+      <ConfigContext.Provider value={createMockChartContext(tooltipConfig, { tableData: [row] })}>
+        {children}
+      </ConfigContext.Provider>
+    )
+    const { result } = renderHook(
+      () =>
+        useTooltip({
+          xScale,
+          yScale,
+          showTooltip,
+          hideTooltip,
+          yAxisWidth: 0
+        }),
+      { wrapper: tooltipWrapper }
+    )
+    const TooltipListItem = result.current.TooltipListItem
+
+    render(<TooltipListItem row={{ key: 'Percentage', value: '146', kind: 'extra' }} index={2} />)
+
+    expect(screen.getByText('Percentage: 146')).toBeTruthy()
+    expect(screen.queryByText('Rate Series: 146')).toBeNull()
+  })
+
+  it('preserves standard x-axis heading rendering', () => {
+    renderTooltipListItem(config, {
+      key: 'Cause of death',
+      value: 'Hypertensive disorders of pregnancy',
+      kind: 'heading'
+    })
+
+    expect(screen.getByText(/Hypertensive disorders of pregnancy/)).toHaveClass('tooltip-heading')
+  })
+
+  it('preserves horizontal Bar heading rendering', () => {
+    const horizontalBarConfig = createMockConfig({
+      ...config,
+      orientation: 'horizontal',
+      runtime: {
+        ...config.runtime,
+        yAxis: { ...config.runtime.yAxis, label: 'Cause' }
+      } as any
+    })
+
+    renderTooltipListItem(horizontalBarConfig, {
+      key: 'Cause of death',
+      value: 'Hypertensive disorders of pregnancy',
+      kind: 'heading'
+    })
+
+    expect(screen.getByText(/Cause:.*Hypertensive disorders of pregnancy/)).toHaveClass('tooltip-heading')
+  })
+
+  it('preserves Pie calculated-area heading rendering', () => {
+    const pieConfig = createMockConfig({
+      ...config,
+      visualizationType: 'Pie',
+      dataFormat: { ...config.dataFormat, showPiePercent: true } as any
+    })
+
+    renderTooltipListItem(pieConfig, {
+      key: 'Percentage',
+      value: 'Calculated Area',
+      kind: 'heading'
+    })
+
+    expect(screen.getByText(/Calculated Area/)).toHaveClass('tooltip-heading')
+  })
+
+  it('preserves Forest Plot heading rendering', () => {
+    const forestPlotConfig = createMockConfig({
+      ...config,
+      visualizationType: 'Forest Plot'
+    })
+
+    renderTooltipListItem(forestPlotConfig, {
+      key: 'Cause of death',
+      value: 'Hypertensive disorders of pregnancy',
+      kind: 'heading'
+    })
+
+    expect(screen.getByText(/Cause of death:.*Hypertensive disorders of pregnancy/)).toHaveClass('tooltip-heading')
+  })
+
+  it.each([
+    { caseName: 'standard', orientation: 'vertical' as const },
+    { caseName: 'horizontal Bar', orientation: 'horizontal' as const }
+  ])('preserves custom date formatting for a $caseName heading', ({ orientation }) => {
+    const dateConfig = createMockConfig({
+      ...config,
+      orientation,
+      xAxis: { ...config.xAxis, type: 'date', dataKey: 'Date' },
+      tooltips: { ...config.tooltips, dateDisplayFormat: '%Y' },
+      runtime: {
+        ...config.runtime,
+        xAxis: { ...config.runtime.xAxis, type: 'date', dataKey: 'Date', label: 'Date' },
+        yAxis: { ...config.runtime.yAxis, label: 'Date' }
+      } as any
+    })
+
+    renderTooltipListItem(
+      dateConfig,
+      { key: 'Date', value: '2025-01-02', kind: 'heading' },
+      {
+        contextOverrides: {
+          parseDate: value => `parsed-${value}`,
+          formatDate: value => `date-${value}`,
+          formatTooltipsDate: value => `tooltip-${value}`
+        }
+      }
+    )
+
+    expect(screen.getByText('Date: tooltip-parsed-2025-01-02')).toHaveClass('tooltip-heading')
+  })
+
+  it('hides a matching suppression row when suppressed symbols are disabled', () => {
+    const suppressionConfig = createMockConfig({
+      ...config,
+      general: { ...config.general, showSuppressedSymbol: false } as any,
+      preliminaryData: [
+        {
+          label: 'Suppressed',
+          type: 'suppression',
+          displayTooltip: true,
+          value: '22.0%',
+          column: 'Percentage'
+        }
+      ] as any
+    })
+
+    const { container } = renderTooltipListItem(suppressionConfig, {
+      key: 'Percentage',
+      value: '22.0%',
+      kind: 'series'
+    })
+
+    expect(container.querySelector('li')).toBeNull()
+  })
+
+  it('preserves suppression replacement text and gray styling when symbols are shown', () => {
+    const suppressionConfig = createMockConfig({
+      ...config,
+      general: { ...config.general, showSuppressedSymbol: true } as any,
+      preliminaryData: [
+        {
+          label: 'Suppressed',
+          type: 'suppression',
+          displayTooltip: true,
+          value: '22.0%',
+          column: 'Percentage',
+          displayGray: true
+        }
+      ] as any
+    })
+
+    renderTooltipListItem(suppressionConfig, {
+      key: 'Percentage',
+      value: '22.0%',
+      kind: 'series'
+    })
+
+    expect(screen.getByText('Percentage: Suppressed')).toHaveStyle({ color: '#8b8b8a' })
+  })
+
+  it('leaves an unmatched suppression row unchanged', () => {
+    const suppressionConfig = createMockConfig({
+      ...config,
+      general: { ...config.general, showSuppressedSymbol: false } as any,
+      preliminaryData: [
+        {
+          label: 'Suppressed',
+          type: 'suppression',
+          displayTooltip: true,
+          value: 'Different value',
+          column: 'Percentage',
+          displayGray: true
+        }
+      ] as any
+    })
+
+    renderTooltipListItem(suppressionConfig, {
+      key: 'Percentage',
+      value: '22.0%',
+      kind: 'series'
+    })
+
+    expect(screen.getByText('Percentage: 22.0%')).not.toHaveStyle({ color: '#8b8b8a' })
+  })
+
+  it.each([
+    { markerColor: '#123456', markerShape: 'square' as const, expectedShape: 'square', expectedSwatches: 1 },
+    { markerColor: undefined, markerShape: 'square' as const, expectedShape: 'square', expectedSwatches: 0 },
+    { markerColor: '#654321', markerShape: undefined, expectedShape: 'circle', expectedSwatches: 1 }
+  ])(
+    'preserves the marker column when markerColor is $markerColor and markerShape is $markerShape',
+    ({ markerColor, markerShape, expectedShape, expectedSwatches }) => {
+      const { container } = renderTooltipListItem(
+        config,
+        {
+          key: 'Percentage',
+          value: '22.0%',
+          kind: 'series',
+          markerColor,
+          markerShape
+        },
+        { useMarkerColumn: true }
+      )
+
+      expect(container.querySelector('.tooltip-body')).toHaveClass('tooltip-body--marker-layout')
+      expect(container.querySelector('.tooltip-marker-slot')).toBeTruthy()
+      const swatches = container.querySelectorAll(`.tooltip-marker-swatch--${expectedShape}`)
+      expect(swatches).toHaveLength(expectedSwatches)
+      if (markerColor) expect(swatches[0]).toHaveStyle({ backgroundColor: markerColor })
+      expect(container.querySelector('.tooltip-body-content')).toHaveTextContent('Percentage: 22.0%')
+    }
+  )
 })

package/src/hooks/usePrefersReducedMotion.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react'
+
+const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)'
+
+const usePrefersReducedMotion = () => {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(
+    () => typeof window !== 'undefined' && Boolean(window.matchMedia?.(REDUCED_MOTION_QUERY).matches)
+  )
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return
+    const mediaQuery = window.matchMedia(REDUCED_MOTION_QUERY)
+    const updatePreference = () => setPrefersReducedMotion(mediaQuery.matches)
+    updatePreference()
+    mediaQuery.addEventListener?.('change', updatePreference)
+    return () => mediaQuery.removeEventListener?.('change', updatePreference)
+  }, [])
+
+  return prefersReducedMotion
+}
+
+export default usePrefersReducedMotion

package/src/hooks/useReduceData.ts

@@ -1,5 +1,6 @@
 import isNumber from '@cdc/core/helpers/isNumber'
 import { useMemo } from 'react'
+import getStackedSeriesMax from '../helpers/getStackedSeriesMax'
 
 function useReduceData(config, data) {
   return useMemo(() => {
@@ -30,13 +31,11 @@ function useReduceData(config, data) {
     let minValue = Infinity
     let maxValue = -Infinity
     let existPositiveValue = false
-    const stackedTotals = []
 
     for (let i = 0; i < data.length; i++) {
       const row = data[i]
       let rowMax = -Infinity
       let rowMin = Infinity
-      let stackedSum = 0
 
       for (const key of config.runtime.seriesKeys) {
         const seriesKey = seriesKeysMap.get(key)
@@ -49,26 +48,22 @@ function useReduceData(config, data) {
           if (numValue < rowMin) rowMin = numValue
 
           if (numValue >= 0) existPositiveValue = true
-
-          if (!isNaN(numValue)) stackedSum += numValue
         }
       }
 
       if (rowMax > maxValue) maxValue = rowMax
       if (rowMin < minValue) minValue = rowMin
-
-      if (!isNaN(stackedSum)) stackedTotals.push(stackedSum)
     }
 
     if (
       (config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && isBar)) &&
       config.visualizationSubType === 'stacked'
     ) {
-      maxValue = Math.max(...stackedTotals)
+      maxValue = getStackedSeriesMax(data, config.runtime.series)
     }
 
     if (config.visualizationSubType === 'stacked' && config.visualizationType === 'Area Chart') {
-      maxValue = Math.max(...stackedTotals)
+      maxValue = getStackedSeriesMax(data, config.runtime.series)
     }
 
     if (
@@ -89,34 +84,7 @@ function useReduceData(config, data) {
 
     if (config.visualizationType === 'Combo' && config.visualizationSubType === 'stacked' && !isBar) {
       if (config.runtime.barSeriesKeys && config.runtime.lineSeriesKeys) {
-        let barMax = -Infinity
-        let lineMax = -Infinity
-
-        for (const row of data) {
-          let barSum = 0
-          let rowLineMax = -Infinity
-
-          for (const key of config.runtime.barSeriesKeys) {
-            const cleanValue = cleanChars(row[key])
-            if (isNumber(cleanValue)) {
-              const numValue = Number(cleanValue)
-              if (!isNaN(numValue)) barSum += numValue
-            }
-          }
-
-          for (const key of config.runtime.lineSeriesKeys) {
-            const cleanValue = cleanChars(row[key])
-            if (isNumber(cleanValue)) {
-              const numValue = Number(cleanValue)
-              if (numValue > rowLineMax) rowLineMax = numValue
-            }
-          }
-
-          if (barSum > barMax) barMax = barSum
-          if (rowLineMax > lineMax) lineMax = rowLineMax
-        }
-
-        maxValue = Math.max(barMax, lineMax)
+        maxValue = Math.max(maxValue, getStackedSeriesMax(data, config.runtime.barSeriesKeys))
       }
     }
 

package/src/hooks/useScales.ts

@@ -18,6 +18,7 @@ import { countNumOfTicks } from '../helpers/countNumOfTicks'
 import { getFinalTopTickMax } from '../helpers/getCleanTopTickMax'
 import { getYAxisFinalizationEligibility } from '../helpers/getYAxisFinalizationEligibility'
 import { getAxisMaxOverride } from '../helpers/getAxisMaxOverride'
+import { getDataDrivenYAxisCategories } from '../helpers/dataDrivenYAxisCategories'
 
 const scaleTypes = {
   TIME: 'time',
@@ -67,6 +68,20 @@ const useScales = (properties: useScaleProps) => {
   const context = useContext<ChartContext>(ConfigContext)
   const { convertLineToBarGraph = false } = context
 
+  const dataDrivenYAxisCategories = getDataDrivenYAxisCategories(config, data)
+  if (dataDrivenYAxisCategories?.axisMax !== null && dataDrivenYAxisCategories?.axisMax !== undefined) {
+    config = {
+      ...config,
+      runtime: {
+        ...config.runtime,
+        yAxis: {
+          ...config.runtime.yAxis,
+          max: String(dataDrivenYAxisCategories.axisMax)
+        }
+      }
+    }
+  }
+
   const isHorizontal = config.orientation === 'horizontal'
   const { visualizationType, xAxis, forestPlot, runtime } = config
   const isForestPlot = visualizationType === 'Forest Plot'