@cdc/chart 4.26.6 → 4.26.10

package/src/components/BarChartRace/helpers.ts

@@ -0,0 +1,185 @@
+import { type ChartConfig } from '../../types/ChartConfig'
+
+export const DEFAULT_BAR_RACE_MAX_BARS = 10
+
+type DataRow = Record<string, unknown>
+
+export type BarRaceItem = {
+  category: string
+  dataKey: string
+  frame: string
+  rank: number
+  seriesKey: string
+  value: number
+}
+
+export type BarRaceFrame = {
+  key: string
+  items: BarRaceItem[]
+}
+
+export type BarRaceProjection = {
+  competitorCount: number
+  hasDuplicateRows: boolean
+  frames: BarRaceFrame[]
+  globalMax: number
+}
+
+export type BarRaceEligibility = BarRaceProjection & {
+  eligible: boolean
+  reason?: string
+}
+
+const toFiniteNonnegativeNumber = (value: unknown): number | null => {
+  if (typeof value !== 'string' && typeof value !== 'number') return null
+  if (typeof value === 'string' && value.trim() === '') return null
+  const numericValue = typeof value === 'string' ? Number(value.replaceAll(',', '').replace(/%$/, '')) : Number(value)
+  return Number.isFinite(numericValue) && numericValue >= 0 ? numericValue : null
+}
+
+const getMaxBars = (config: Partial<ChartConfig>, competitorCount: number) => {
+  const authoredMax = Number(config.barRace?.maxBars ?? DEFAULT_BAR_RACE_MAX_BARS)
+  const roundedMax = Number.isFinite(authoredMax) ? Math.round(authoredMax) : DEFAULT_BAR_RACE_MAX_BARS
+  return Math.max(1, Math.min(competitorCount, roundedMax))
+}
+
+export const buildBarRaceFrames = (config: Partial<ChartConfig>, data: DataRow[] = []): BarRaceProjection => {
+  const series = Array.isArray(config.series) ? config.series.filter(item => item?.dataKey) : []
+  const dynamicSeries = series.filter(item => item.dynamicCategory)
+  const usesDynamicCategory = series.length === 1 && dynamicSeries.length === 1
+  const frameKey = config.xAxis?.dataKey
+  const emptyProjection = { competitorCount: 0, hasDuplicateRows: false, frames: [], globalMax: 0 }
+
+  if (!frameKey || !series.length || !Array.isArray(data)) return emptyProjection
+
+  const frameOrder: string[] = []
+  const categoryOrder: string[] = []
+  const categoryOrderSet = new Set<string>()
+  const valuesByFrame = new Map<string, Map<string, Omit<BarRaceItem, 'frame' | 'rank'>>>()
+  let hasDuplicateRows = false
+
+  const addValue = (frame: string, category: string, seriesKey: string, dataKey: string, value: number) => {
+    if (!categoryOrderSet.has(seriesKey)) {
+      categoryOrder.push(seriesKey)
+      categoryOrderSet.add(seriesKey)
+    }
+    const frameValues = valuesByFrame.get(frame)
+    if (frameValues?.has(seriesKey)) hasDuplicateRows = true
+    frameValues?.set(seriesKey, { category, dataKey, seriesKey, value })
+  }
+
+  data.forEach(row => {
+    const rawFrame = row?.[frameKey]
+    if (rawFrame === null || rawFrame === undefined || String(rawFrame).trim() === '') return
+    const frame = String(rawFrame).trim()
+    if (!valuesByFrame.has(frame)) {
+      frameOrder.push(frame)
+      valuesByFrame.set(frame, new Map())
+    } else if (!usesDynamicCategory) {
+      hasDuplicateRows = true
+    }
+
+    if (usesDynamicCategory) {
+      const item = dynamicSeries[0]
+      const rawCategory = row?.[item.dynamicCategory]
+      const value = toFiniteNonnegativeNumber(row?.[item.dataKey])
+      if (rawCategory === null || rawCategory === undefined || String(rawCategory).trim() === '' || value === null)
+        return
+      const category = String(rawCategory).trim()
+      addValue(frame, category, category, item.dataKey, value)
+      return
+    }
+
+    series.forEach(item => {
+      const value = toFiniteNonnegativeNumber(row?.[item.dataKey])
+      if (value === null) return
+      addValue(frame, item.name || item.dataKey, item.dataKey, item.dataKey, value)
+    })
+  })
+
+  const runtimeCategoryOrder = Array.isArray(config.runtime?.seriesKeys)
+    ? [...new Set(config.runtime.seriesKeys.map(value => String(value).trim()))].filter(category =>
+        categoryOrderSet.has(category)
+      )
+    : []
+  const runtimeCategorySet = new Set(runtimeCategoryOrder)
+  const stableCategoryOrder = [...runtimeCategoryOrder, ...categoryOrder.filter(item => !runtimeCategorySet.has(item))]
+  const categoryIndex = new Map(stableCategoryOrder.map((category, index) => [category, index]))
+  const maxBars = getMaxBars(config, stableCategoryOrder.length)
+  let globalMax = 0
+
+  const frames = frameOrder.map(frame => {
+    const values = valuesByFrame.get(frame) ?? new Map()
+    const items = [...values.values()]
+      .map(item => ({ ...item, frame, rank: 0 }))
+      .sort(
+        (a, b) => b.value - a.value || (categoryIndex.get(a.seriesKey) ?? 0) - (categoryIndex.get(b.seriesKey) ?? 0)
+      )
+      .slice(0, maxBars)
+      .map((item, rank) => ({ ...item, rank }))
+
+    items.forEach(item => {
+      globalMax = Math.max(globalMax, item.value)
+    })
+
+    return { key: frame, items }
+  })
+
+  // Domain stability must include valid values outside the displayed top N.
+  valuesByFrame.forEach(values => values.forEach(item => (globalMax = Math.max(globalMax, item.value))))
+
+  return { competitorCount: stableCategoryOrder.length, hasDuplicateRows, frames, globalMax }
+}
+
+export const getBarRaceEligibility = (config: Partial<ChartConfig>, data: DataRow[] = []): BarRaceEligibility => {
+  const projection = buildBarRaceFrames(config, data)
+  const series = Array.isArray(config.series) ? config.series : []
+  const dynamicSeries = series.filter(item => item?.dynamicCategory)
+  const hasValidDynamicSeries =
+    series.length === 1 && Boolean(series[0]?.dataKey) && Boolean(String(series[0]?.dynamicCategory || '').trim())
+  const hasValidWideSeries = series.length >= 2 && dynamicSeries.length === 0 && series.every(item => item?.dataKey)
+
+  if (config.visualizationType !== 'Bar') {
+    return { ...projection, eligible: false, reason: 'Racing mode is available only for Bar charts.' }
+  }
+  if (config.xAxis?.type !== 'categorical') {
+    return { ...projection, eligible: false, reason: 'Racing mode requires a categorical Date/Category Axis.' }
+  }
+  if (!hasValidDynamicSeries && !hasValidWideSeries) {
+    return {
+      ...projection,
+      eligible: false,
+      reason: 'Racing mode requires at least two ordinary data series or one series with a Dynamic Category column.'
+    }
+  }
+  if (config.smallMultiples?.mode) {
+    return { ...projection, eligible: false, reason: 'Racing mode does not support small multiples.' }
+  }
+  if (config.orientation !== 'horizontal') {
+    return { ...projection, eligible: false, reason: 'Racing mode requires horizontal orientation.' }
+  }
+  if (config.isLollipopChart || (config.barStyle && config.barStyle !== 'flat')) {
+    return { ...projection, eligible: false, reason: 'Racing mode requires the flat bar style.' }
+  }
+  if (projection.hasDuplicateRows) {
+    return {
+      ...projection,
+      eligible: false,
+      reason: 'Racing mode requires one row per frame and competitor combination.'
+    }
+  }
+  if (projection.frames.length < 2) {
+    return { ...projection, eligible: false, reason: 'Racing mode requires at least two valid frame values.' }
+  }
+  if (projection.competitorCount < 2) {
+    return { ...projection, eligible: false, reason: 'Racing mode requires at least two valid competitors.' }
+  }
+
+  return { ...projection, eligible: true }
+}
+
+export const clampBarRaceMaxBars = (value: unknown, competitorCount: number) => {
+  const numericValue = Number(value)
+  const nextValue = Number.isFinite(numericValue) ? Math.round(numericValue) : DEFAULT_BAR_RACE_MAX_BARS
+  return Math.max(1, Math.min(Math.max(1, competitorCount), nextValue))
+}

package/src/components/BarChartRace/index.ts

@@ -0,0 +1,3 @@
+export { default } from './BarChartRace'
+export { default as BarChartRaceFallback } from './BarChartRaceFallback'
+export * from './helpers'

package/src/components/BoxPlot/BoxPlot.Horizontal.tsx

@@ -5,7 +5,8 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../../ConfigContext'
 import { handleTooltip, createPlots } from './helpers/index'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
-import _ from 'lodash'
+import map from 'lodash/map'
+import round from 'lodash/round'
 
 const BoxPlotHorizontal = ({ xScale, yScale, seriesScale }) => {
   const { config, transformedData: data, colorScale, seriesHighlight } = useContext(ConfigContext)
@@ -63,7 +64,7 @@ const BoxPlotHorizontal = ({ xScale, yScale, seriesScale }) => {
                     maxProps={{ stroke: defaultColor, strokeWidth: 1, opacity: fillOpacity }}
                     medianProps={{ stroke: defaultColor, strokeWidth: 1, opacity: fillOpacity }}
                     outliers={
-                      config.boxplot.plotOutlierValues ? _.map(plot.columnOutliers[item.dataKey], item => item) : []
+                      config.boxplot.plotOutlierValues ? map(plot.columnOutliers[item.dataKey], item => item) : []
                     }
                     outlierProps={{
                       style: {
@@ -78,10 +79,10 @@ const BoxPlotHorizontal = ({ xScale, yScale, seriesScale }) => {
                         config.boxplot,
                         plot.columnCategory,
                         item.dataKey,
-                        _.round(plot.q1[item.dataKey], config.dataFormat.roundTo),
-                        _.round(plot.q3[item.dataKey], config.dataFormat.roundTo),
-                        _.round(plot.median[item.dataKey], config.dataFormat.roundTo),
-                        _.round(plot.iqr[item.dataKey], config.dataFormat.roundTo),
+                        round(plot.q1[item.dataKey], config.dataFormat.roundTo),
+                        round(plot.q3[item.dataKey], config.dataFormat.roundTo),
+                        round(plot.median[item.dataKey], config.dataFormat.roundTo),
+                        round(plot.iqr[item.dataKey], config.dataFormat.roundTo),
                         config.xAxis.label,
                         defaultColor
                       ),

package/src/components/BoxPlot/BoxPlot.Vertical.tsx

@@ -7,7 +7,9 @@ import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 import { getCurrentPaletteName } from '@cdc/core/helpers/palettes/utils'
 import { handleTooltip, createPlots } from './helpers/index'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
-import _ from 'lodash'
+import get from 'lodash/get'
+import map from 'lodash/map'
+import round from 'lodash/round'
 
 const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
   const { config, colorScale, seriesHighlight, transformedData: data } = useContext(ConfigContext)
@@ -19,7 +21,7 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
   const bodyStyles = getComputedStyle(document.body)
   const defaultColor = APP_FONT_COLOR
   const constrainedWidth = Math.min(40, boxWidth)
-  const color_0 = _.get(colorPalettesChart, [getCurrentPaletteName(config), 0], '#000')
+  const color_0 = get(colorPalettesChart, [getCurrentPaletteName(config), 0], '#000')
   const plots = createPlots(data, config)
   return (
     <ErrorBoundary component='BoxPlot Vertical'>
@@ -76,7 +78,7 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
                         fillOpacity={1}
                         stroke={defaultColor}
                         valueScale={yScale}
-                        outliers={boxplot.plotOutlierValues ? _.map(d.columnOutliers[item.dataKey], item => item) : []}
+                        outliers={boxplot.plotOutlierValues ? map(d.columnOutliers[item.dataKey], item => item) : []}
                         outlierProps={{
                           style: {
                             fill: defaultColor,
@@ -109,10 +111,10 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
                             boxplot,
                             d.columnCategory,
                             item.dataKey,
-                            _.round(d.q1[item.dataKey], config.dataFormat.roundTo),
-                            _.round(d.q3[item.dataKey], config.dataFormat.roundTo),
-                            _.round(d.median[item.dataKey], config.dataFormat.roundTo),
-                            _.round(d.iqr[item.dataKey], config.dataFormat.roundTo),
+                            round(d.q1[item.dataKey], config.dataFormat.roundTo),
+                            round(d.q3[item.dataKey], config.dataFormat.roundTo),
+                            round(d.median[item.dataKey], config.dataFormat.roundTo),
+                            round(d.iqr[item.dataKey], config.dataFormat.roundTo),
                             config.xAxis.label,
                             defaultColor
                           ),

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

@@ -1,5 +1,5 @@
-import _ from 'lodash'
-import * as d3 from 'd3-array'
+import uniq from 'lodash/uniq'
+import { calculateBoxPlotStats } from '../../../helpers/boxPlotStats'
 
 interface Plot {
   columnCategory: string
@@ -29,47 +29,6 @@ export const handleTooltip = (boxplot, columnCategory, key, q1, q3, median, iqr,
   `
 }
 
-const calculateBoxPlotStats = (values: number[]) => {
-  if (!values || values.length === 0) return {}
-
-  // Sort the values
-  const sortedValues = _.sortBy(values.map(v => Number(v)))
-
-  // Quartiles
-  const firstQuartile = d3.quantile(sortedValues, 0.25) ?? 0
-  const thirdQuartile = d3.quantile(sortedValues, 0.75) ?? 0
-
-  // Interquartile Range (IQR)
-  const iqr = thirdQuartile - firstQuartile
-
-  // Outlier Bounds
-  const lowerBound = firstQuartile - 1.5 * iqr
-  const upperBound = thirdQuartile + 1.5 * iqr
-  // const lowerFence = q1 - 1.5 * iqr
-  // const upperFence = q3 + 1.5 * iqr
-
-  // Non-Outlier Values
-  const nonOutliers = sortedValues.filter(value => value >= lowerBound && value <= upperBound)
-  // **Outliers** =
-  const outliers = sortedValues.filter(v => v < lowerBound || v > upperBound)
-  const whiskerMax =
-    sortedValues
-      .slice()
-      .reverse()
-      .find(v => v <= upperBound) ?? thirdQuartile
-  const whiskerMin = nonOutliers.length > 0 ? nonOutliers[0] : firstQuartile
-  // Calculate Box Plot Stats
-  return {
-    min: whiskerMin,
-    max: whiskerMax,
-    median: d3.median(sortedValues),
-    firstQuartile,
-    thirdQuartile,
-    iqr,
-    outliers
-  }
-}
-
 const getValuesBySeriesKey = (group: string, config, data) => {
   const allSeriesKeys = config.series.map(item => item?.dataKey)
   const result = {}
@@ -81,29 +40,11 @@ const getValuesBySeriesKey = (group: string, config, data) => {
   return result
 }
 
-// Helper to calculate outliers based on IQR
-const calculateOutliers = (values: number[], firstQuartile: number, thirdQuartile: number) => {
-  const iqr = thirdQuartile - firstQuartile
-  const lowerBound = firstQuartile - 1.5 * iqr
-  const upperBound = thirdQuartile + 1.5 * iqr
-  return values.filter(value => value < lowerBound || value > upperBound)
-}
-
-// Helper to calculate non-outliers based on IQR
-const calculateNonOutliers = (values: number[], firstQuartile: number, thirdQuartile: number): number[] => {
-  const iqr = thirdQuartile - firstQuartile
-  const lowerBound = firstQuartile - 1.5 * iqr
-  const upperBound = thirdQuartile + 1.5 * iqr
-
-  // Return values within the bounds
-  return values.filter(value => value >= lowerBound && value <= upperBound)
-}
-
 // Main function to create plots with additional outlier data
 export const createPlots = (data, config) => {
   const dataKeys = data.map(d => d[config.xAxis.dataKey])
   const plots: Plot[] = []
-  const groups: string[] = _.uniq(dataKeys)
+  const groups: string[] = uniq(dataKeys)
 
   if (groups && groups.length > 0) {
     groups.forEach(group => {
@@ -119,29 +60,18 @@ export const createPlots = (data, config) => {
 
       // Calculate outliers and non-outliers for each series key
       Object.keys(keyValues).forEach(key => {
-        const raw = keyValues[key] ?? []
-
-        // 2) normalize → trim, drop empties/non-numbers, coerce to Number
-        const cleaned: number[] = raw
-          .map(v => (typeof v === 'string' ? v.trim() : v)) // trim strings
-          .filter(v => v != null && v !== '' && !isNaN(+v)) // drop null/''/non-nums
-          .map(v => +v)
-
-        if (cleaned.length === 0) {
-          return
-        }
+        const stats = calculateBoxPlotStats(keyValues[key] ?? [])
+        if (!stats) return
 
         // Calculate box plot statistics
-        const { firstQuartile, thirdQuartile, min, max, median, iqr, outliers } = calculateBoxPlotStats(cleaned)
-        // Calculate outliers and non-outliers
-        columnOutliers[key] = calculateOutliers(cleaned, firstQuartile, thirdQuartile).map(Number)
-        columnNonOutliers[key] = calculateNonOutliers(cleaned, firstQuartile, thirdQuartile).map(Number)
-        columnMedian[key] = median
-        columnMin[key] = Number(min)
-        columnMax[key] = Number(max)
-        columnQ1[key] = firstQuartile
-        columnQ3[key] = thirdQuartile
-        columnIqr[key] = iqr
+        columnOutliers[key] = stats.outliers
+        columnNonOutliers[key] = stats.nonOutliers
+        columnMedian[key] = stats.median ?? null
+        columnMin[key] = stats.whiskerMin
+        columnMax[key] = stats.whiskerMax
+        columnQ1[key] = stats.q1
+        columnQ3[key] = stats.q3
+        columnIqr[key] = stats.iqr
       })
 
       // Add the plot object to the plots array

package/src/components/Brush/BrushSelector.tsx

@@ -9,6 +9,7 @@ import type { BrushHandleRenderProps } from '@visx/brush/lib/BrushHandle'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import ConfigContext, { ChartDispatchContext } from '../../ConfigContext'
 import { getChartPatternId } from '../../helpers/getChartPatternId'
+import getStackedSeriesMax from '../../helpers/getStackedSeriesMax'
 import MiniChartPreview from './MiniChartPreview'
 import { classifyBrushInteraction } from './brushInteraction'
 import type { BrushInteractionTarget } from './brushInteraction'
@@ -128,7 +129,7 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
       <>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':
@@ -173,8 +174,9 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
                   id={patternId}
                   height={size}
                   width={size}
-                  fill={pattern.color}
-                  strokeWidth={0.25}
+                  fill='transparent'
+                  stroke={pattern.color}
+                  strokeWidth={0.75}
                 />
               )
             default:
@@ -298,24 +300,9 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
     let hasValidValues = false
 
     if (isStacked) {
-      for (const row of tableData) {
-        let rowSum = 0
-        let hasRowValue = false
-        for (const s of leftSeries) {
-          if (!s.dataKey) continue
-          const value = parseFloat(row[s.dataKey])
-          if (!isNaN(value) && isFinite(value)) {
-            rowSum += value
-            hasRowValue = true
-          }
-        }
-        if (hasRowValue) {
-          hasValidValues = true
-          minValue = Math.min(minValue, rowSum)
-          maxValue = Math.max(maxValue, rowSum)
-        }
-      }
-      minValue = Math.min(0, minValue)
+      maxValue = getStackedSeriesMax(tableData, leftSeries)
+      minValue = 0
+      hasValidValues = maxValue !== 0
     } else {
       for (const s of leftSeries) {
         if (!s.dataKey) continue
@@ -831,14 +818,13 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config.xAxis.brushDefaultRecentDateCount])
 
-  // Selected box style with solid border and pattern fill
   const selectedBoxStyle = useMemo(
     () => ({
-      fill: 'url(#brush_pattern)',
+      fill: config.xAxis.brushHideHatching === true ? 'transparent' : 'url(#brush_pattern)',
       stroke: '#333',
       strokeWidth: 1
     }),
-    []
+    [config.xAxis.brushHideHatching]
   )
 
   // Helper to update brush position programmatically

package/src/components/Brush/MiniChartPreview.tsx

@@ -4,6 +4,8 @@ import * as allCurves from '@visx/curve'
 import { handleLineType } from '../../helpers/handleLineType'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 import { getPatternUrl as getPatternUrlForBar } from '../BarChart/helpers/getPatternUrl'
+import { getPortionPatternRenderData } from '../BarChart/helpers/portionPattern'
+import { PortionPatternBoundary } from '../BarChart/components/PortionPatternOverlay'
 
 interface MiniChartPreviewProps {
   series: any[]
@@ -141,12 +143,20 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
               seriesKeys: patternSeriesKeys,
               allowNonSeriesFieldMatch: allowGroupedNonSeriesFieldMatch
             })
-
             // Calculate bar position and height
             const valueY = miniYScale(value)
             const barHeight = Math.abs(valueY - zeroY)
             const barX = x - barWidth / 2 + seriesIndex * groupBarWidth
             const y = Math.min(valueY, zeroY) // Top of bar (smaller Y value)
+            const portionPatternRenderData = getPortionPatternRenderData({
+              config,
+              orientation: 'vertical',
+              bounds: { x: barX, y, width: groupBarWidth, height: barHeight },
+              patterns: config.legend?.patterns,
+              datum: d,
+              seriesKey: s.dataKey,
+              totalValue: value
+            })
 
             bars.push(
               <rect
@@ -178,6 +188,28 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
                 />
               )
             }
+            if (portionPatternRenderData) {
+              bars.push(
+                <rect
+                  key={`mini-bar-grouped-portion-pattern-${i}-${seriesIndex}`}
+                  className='pattern-overlay pattern-overlay--portion pattern-overlay--brush'
+                  {...portionPatternRenderData.geometry}
+                  fill={portionPatternRenderData.patternUrl}
+                  stroke='transparent'
+                  strokeWidth={0}
+                  fillOpacity={1}
+                  pointerEvents='none'
+                />
+              )
+
+              bars.push(
+                <PortionPatternBoundary
+                  key={`mini-bar-grouped-portion-pattern-boundary-${i}-${seriesIndex}`}
+                  renderData={portionPatternRenderData}
+                  brush
+                />
+              )
+            }
           })
         }
       })