@cdc/chart 4.25.10 → 4.26.1

package/src/components/WarmingStripes/WarmingStripesGradientLegend.css

@@ -0,0 +1,35 @@
+.warming-stripes-gradient-legend {
+  margin: 1rem 0;
+  width: 100%;
+}
+
+.warming-stripes-gradient-legend__title {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
+}
+
+.warming-stripes-gradient-legend__description {
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+  font-size: 14px;
+  color: #555;
+}
+
+.warming-stripes-gradient-legend__container {
+  width: 100%;
+}
+
+.warming-stripes-gradient-legend__svg {
+  display: block;
+  width: 100%;
+  overflow: visible;
+}
+
+.warming-stripes-gradient-legend__series-label {
+  text-align: center;
+  margin-top: 0.5rem;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}

package/src/components/WarmingStripes/WarmingStripesGradientLegend.tsx

@@ -0,0 +1,104 @@
+import { useContext } from 'react'
+import ConfigContext from '../../ConfigContext'
+import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
+import { getFallbackColorPalette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
+import { paletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
+import './WarmingStripesGradientLegend.css'
+
+const WarmingStripesGradientLegend = () => {
+  const { transformedData: data, config, formatNumber } = useContext(ConfigContext)
+
+  const valueKey = config.runtime.seriesKeys?.[0]
+
+  if (!valueKey || !data || data.length === 0 || config.legend?.hide) {
+    return null
+  }
+
+  // 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 colorPalettes = 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 =
+    colorPalettes[migratePaletteWithMap(basePaletteName, paletteMigrationMap, false)] ||
+    colorPalettes[basePaletteName] ||
+    colorPalettes[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
+
+  // Create gradient stops for SVG
+  const gradientStops = finalPalette.map((color, index) => {
+    const offset = (index / (finalPalette.length - 1)) * 100
+    return { offset: `${offset}%`, color }
+  })
+
+  const seriesLabel = config.runtime.seriesLabels?.[valueKey] || valueKey
+  const uniqueId = `warming-stripes-gradient-${config.runtime.uniqueId}`
+
+  return (
+    <div className='warming-stripes-gradient-legend'>
+      {config.legend?.label && <h3 className='warming-stripes-gradient-legend__title'>{config.legend.label}</h3>}
+      {config.legend?.description && (
+        <p className='warming-stripes-gradient-legend__description'>{config.legend.description}</p>
+      )}
+
+      <div className='warming-stripes-gradient-legend__container'>
+        <svg className='warming-stripes-gradient-legend__svg' height='50' width='100%'>
+          <defs>
+            <linearGradient id={uniqueId} x1='0%' y1='0%' x2='100%' y2='0%'>
+              {gradientStops.map((stop, index) => (
+                <stop key={index} offset={stop.offset} stopColor={stop.color} />
+              ))}
+            </linearGradient>
+          </defs>
+
+          {/* Border */}
+          <rect x='0' y='0' width='100%' height='25' fill='#d3d3d3' />
+
+          {/* Gradient bar */}
+          <rect x='1' y='1' width='calc(100% - 2px)' height='23' fill={`url(#${uniqueId})`} />
+
+          {/* Min label */}
+          <text x='0' y='40' fontSize='14' textAnchor='start' fill='#333'>
+            {formatNumber(minValue, 'left')}
+          </text>
+
+          {/* Max label */}
+          <text x='100%' y='40' fontSize='14' textAnchor='end' fill='#333'>
+            {formatNumber(maxValue, 'left')}
+          </text>
+        </svg>
+
+        {/* Series name centered below gradient */}
+        <div className='warming-stripes-gradient-legend__series-label'>{seriesLabel}</div>
+      </div>
+    </div>
+  )
+}
+
+export default WarmingStripesGradientLegend

package/src/components/WarmingStripes/index.tsx

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

package/src/data/initial-state.js

@@ -23,6 +23,7 @@ const createInitialState = () => {
       noData: 'No Data Available'
     },
     title: '',
+    titleStyle: 'small',
     showTitle: true,
     showDownloadMediaButton: false,
     theme: 'theme-blue',
@@ -139,7 +140,8 @@ const createInitialState = () => {
       padding: 5,
       showYearsOnce: false,
       sortByRecentDate: false,
-      brushActive: false
+      brushActive: false,
+      brushDefaultRecentDateCount: undefined
     },
     table: {
       label: 'Data Table',
@@ -198,7 +200,19 @@ const createInitialState = () => {
       patterns: {},
       patternField: ''
     },
-
+    smallMultiples: {
+      mode: '',
+      tileColumn: '',
+      tilesPerRowDesktop: 3,
+      tilesPerRowMobile: 1,
+      tileOrder: [],
+      tileOrderType: 'asc',
+      tileTitles: {},
+      independentYAxis: false,
+      colorMode: 'same',
+      synchronizedTooltips: true,
+      showAreaUnderLine: true
+    },
     exclusions: {
       active: false,
       keys: []

package/src/helpers/buildForecastPaletteOptions.ts

@@ -69,41 +69,3 @@ export const buildForecastPaletteOptions = (
 
   return paletteOptions
 }
-
-/**
- * Normalizes a palette value to match the standardized hyphenated format
- * and migrates v1 palette names to v2 equivalents
- *
- * @param value - The palette name to normalize
- * @param paletteVersion - The palette version (1 or 2) from the config
- * @returns The normalized palette name in lowercase with hyphens, or 'Select' if empty
- */
-export const normalizePaletteValue = (value: string | undefined, paletteVersion: number = 1): string => {
-  if (!value) return 'Select'
-
-  // Convert to lowercase with hyphens for consistent matching
-  const normalized = value.toLowerCase().replace(/ /g, '-').replace(/_/g, '-')
-
-  // If v2, migrate v1-only palette names to their v2 equivalents
-  if (paletteVersion === 2) {
-    const V1_TO_V2_MIGRATION: Record<string, string> = {
-      // Sequential Blue variants → sequential-blue
-      'sequential-blue-two': 'sequential-blue',
-      'sequential-blue-three': 'sequential-blue',
-      'sequential-blue-2-(mpx)': 'sequential-blue',
-      'sequential-blue-tworeverse': 'sequential-bluereverse',
-      'sequential-blue-threereverse': 'sequential-bluereverse',
-      'sequential-blue-2-(mpx)reverse': 'sequential-bluereverse',
-
-      // Sequential Orange variants → sequential-orange
-      'sequential-orange-two': 'sequential-orange',
-      'sequential-orange-(mpx)': 'sequential-orange',
-      'sequential-orange-tworeverse': 'sequential-orangereverse',
-      'sequential-orange-(mpx)reverse': 'sequential-orangereverse'
-    }
-
-    return V1_TO_V2_MIGRATION[normalized] || normalized
-  }
-
-  return normalized
-}

package/src/helpers/calculateHorizontalBarCategoryLabelWidth.ts

@@ -0,0 +1,57 @@
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+
+interface CalculateHorizontalBarCategoryLabelWidthProps {
+  yScale: any
+  chartWidth: number
+  formatDate: Function
+  parseDate: Function
+  tickLabelFont: string
+  xAxisType?: string
+  labelPlacement?: string
+}
+
+/**
+ * Helper function to calculate category label space for horizontal bar charts
+ *
+ * @param props Configuration object with chart properties
+ * @returns Calculated category label space, capped at 30% of parent width
+ */
+export const calculateHorizontalBarCategoryLabelWidth = ({
+  yScale,
+  chartWidth,
+  formatDate,
+  parseDate,
+  tickLabelFont,
+  xAxisType,
+  labelPlacement
+}: CalculateHorizontalBarCategoryLabelWidthProps): number => {
+  if (labelPlacement !== 'On Date/Category Axis') return 0
+
+  const categoryValues = yScale.domain()
+
+  if (!categoryValues || categoryValues.length === 0) {
+    return chartWidth * 0.3
+  }
+
+  const formattedLabels = categoryValues.map(value => {
+    if (xAxisType === 'date') {
+      try {
+        return formatDate(parseDate(value))
+      } catch (e) {
+        return String(value)
+      }
+    }
+    return String(value)
+  })
+
+  const labelWidths = formattedLabels.map(label => getTextWidth(label, tickLabelFont))
+  const maxLabelWidth = Math.max(...labelWidths)
+
+  // We need some extra padding or visx will wrap labels too early
+  const paddedWidth = maxLabelWidth + Math.ceil(maxLabelWidth * 0.15)
+
+  // Allocate at most 30% of chart width to category labels
+  const maxAllowedWidth = chartWidth * 0.3
+
+  return Math.min(paddedWidth, maxAllowedWidth)
+}

package/src/helpers/getColorScale.ts

@@ -32,6 +32,16 @@ export const getColorScale = (config: ChartConfig): ((value: string) => string)
   // Migrate old palette name if needed
   const migratedPaletteName = configPalette ? configPalette : getFallbackColorPalette(config)
 
+  // Check for customColorsOrdered first (direct 1-to-1 mapping, no distribution needed)
+  if (config.general?.palette?.customColorsOrdered && Array.isArray(config.general.palette.customColorsOrdered)) {
+    const customColorsOrdered = config.general.palette.customColorsOrdered
+    return scaleOrdinal({
+      domain: config.runtime.seriesLabelsAll,
+      range: customColorsOrdered,
+      unknown: null
+    })
+  }
+
   let palette =
     config.general?.palette?.customColors ||
     palettesSource[migratePaletteWithMap(migratedPaletteName, paletteMigrationMap, false)] ||

package/src/{hooks/useMinMax.ts → helpers/getMinMax.ts}

@@ -1,9 +1,7 @@
 import { ChartConfig } from '../types/ChartConfig'
 import _ from 'lodash'
-import ConfigContext from '../ConfigContext'
-import { useContext } from 'react'
 
-type UseMinMaxProps = {
+type GetMinMaxProps = {
   /** config - standard chart config */
   config: ChartConfig
   /** minValue - starting minimum value */
@@ -18,9 +16,20 @@ type UseMinMaxProps = {
   tableData: Object[]
   /** isAllLine: if all series are line type including dashed lines */
   isAllLine: boolean
+  /** convertLineToBarGraph - whether line charts should be rendered as bar graphs */
+  convertLineToBarGraph?: boolean
 }
 
-const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAllLine, tableData }: UseMinMaxProps) => {
+const getMinMax = ({
+  config,
+  minValue,
+  maxValue,
+  existPositiveValue,
+  data,
+  isAllLine,
+  tableData,
+  convertLineToBarGraph
+}: GetMinMaxProps) => {
   let min = 0
   let max = 0
 
@@ -28,8 +37,6 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   let leftMax = 0
   let rightMax = 0
 
-  const { convertLineToBarGraph } = useContext(ConfigContext)
-
   if (!data) {
     return { min, max }
   }
@@ -48,10 +55,15 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   max = enteredMaxValue && isMaxValid ? Number(enteredMaxValue) : Number.MIN_VALUE
   const { lower, upper } = config?.confidenceKeys || {}
 
+  // When brush is active, use tableData (full dataset) for min/max calculations
+  // so the y-axis shows the full range, but still use filtered data for rendering
+  const dataForMinMax = config.xAxis.brushActive && tableData && tableData.length > 0 ? tableData : data
+
   if (lower && upper && config.visualizationType === 'Bar') {
     const buffer = min < 0 ? 1.1 : 0
-    const maxValueWithCI = Math.max(...data.flatMap(d => [d[upper], d[lower]])) * paddingAddedToAxis
-    const minValueWithCIPlusBuffer = Math.min(...data.flatMap(d => [d[upper], d[lower]])) * paddingAddedToAxis * buffer
+    const maxValueWithCI = Math.max(...dataForMinMax.flatMap(d => [d[upper], d[lower]])) * paddingAddedToAxis
+    const minValueWithCIPlusBuffer =
+      Math.min(...dataForMinMax.flatMap(d => [d[upper], d[lower]])) * paddingAddedToAxis * buffer
     max = max > maxValueWithCI ? max : maxValueWithCI
     min = min < minValueWithCIPlusBuffer ? min : minValueWithCIPlusBuffer
   }
@@ -72,7 +84,7 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
       })
 
       // Using the columnNames or "keys" get the returned result
-      const result = data.map(obj => columnNames.map(key => obj[key]))
+      const result = dataForMinMax.map(obj => columnNames.map(key => obj[key]))
 
       const highCIGroup = Math.max.apply(
         null,
@@ -95,7 +107,7 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
 
   if (visualizationType === 'Combo') {
     try {
-      if (!data) throw new Error('COVE: missing data while getting min/max for combo chart.')
+      if (!dataForMinMax) throw new Error('COVE: missing data while getting min/max for combo chart.')
       // seperate the left and right axis items & get each sides series keys
       let leftAxisSeriesItems = series.filter(s => s.axis === 'Left')
       let rightAxisSeriesItems = series.filter(s => s.axis === 'Right')
@@ -121,8 +133,8 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
         })
         return max
       }
-      leftMax = findMaxFromSeriesKeys(data, leftAxisSeriesItems, leftMax, 'left')
-      rightMax = findMaxFromSeriesKeys(data, rightAxisSeriesItems, rightMax, 'right')
+      leftMax = findMaxFromSeriesKeys(dataForMinMax, leftAxisSeriesItems, leftMax, 'left')
+      rightMax = findMaxFromSeriesKeys(dataForMinMax, rightAxisSeriesItems, rightMax, 'right')
 
       if (leftMax < Number(enteredMaxValue)) {
         leftMax = Number(enteredMaxValue)
@@ -202,7 +214,7 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   }
 
   if (config.isLollipopChart && config.yAxis.displayNumbersOnBar) {
-    const dataKey = data.map(item => item[config.series[0].dataKey])
+    const dataKey = dataForMinMax.map(item => item[config.series[0].dataKey])
     const maxDataVal = Math.max(...dataKey).toString().length
 
     switch (true) {
@@ -238,4 +250,4 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
 
   return { min, max, leftMax, rightMax }
 }
-export default useMinMax
+export default getMinMax

package/src/helpers/getYAxisAutoPadding.ts

@@ -0,0 +1,53 @@
+import { ChartConfig } from '../types/ChartConfig'
+
+/**
+ * Calculates the Y-axis auto padding to prevent data labels from overlapping with axis tick labels.
+ * This is used when inline labels are enabled and there's potential for overlap.
+ *
+ * @param yScale - The D3 scale object for the Y-axis (must have .ticks() method)
+ * @param handleNumTicks - The number of ticks to display on the axis
+ * @param maxValue - The maximum data value (from useReduceData)
+ * @param minValue - The minimum data value (from useReduceData)
+ * @param config - The chart configuration object
+ * @returns The calculated auto padding percentage (0-100+), or 0 if no padding needed
+ */
+export const getYAxisAutoPadding = (
+  yScale: any,
+  handleNumTicks: number,
+  maxValue: number,
+  minValue: number,
+  config: ChartConfig
+): number => {
+  // Early returns for cases where auto padding is not needed
+  if (!yScale?.ticks || config.orientation === 'horizontal' || config.yAxis?.max) {
+    return 0
+  }
+
+  const ticks = yScale.ticks(handleNumTicks)
+
+  if (!Array.isArray(ticks) || ticks.length === 0) {
+    return 0
+  }
+
+  // minimum percentage of the max value that the distance should be from the top grid line
+  const MINIMUM_DISTANCE_PERCENTAGE = 0.025
+
+  const topGridLine = Math.max(...ticks)
+  const needsPaddingThreshold = topGridLine - maxValue * MINIMUM_DISTANCE_PERCENTAGE
+  const maxValueIsGreaterThanThreshold = maxValue > needsPaddingThreshold
+
+  if (!maxValueIsGreaterThanThreshold) return 0
+
+  const tickGap = ticks.length === 1 ? ticks[0] : ticks[1] - ticks[0]
+  const nextTick = Math.max(...ticks) + tickGap
+  const divideBy = minValue < 0 ? maxValue / 2 : maxValue
+  const calculatedPadding = (nextTick - maxValue) / divideBy
+
+  // if auto padding is too close to next tick, add one more ticks worth of padding
+  const newPadding =
+    calculatedPadding > MINIMUM_DISTANCE_PERCENTAGE ? calculatedPadding : calculatedPadding + tickGap / divideBy
+
+  /* sometimes even though the padding is getting to the next tick exactly,
+  d3 still doesn't show the tick. we add 0.1 to ensure to tip it over the edge */
+  return newPadding * 100 + 0.1
+}

package/src/helpers/sizeHelpers.ts

@@ -26,23 +26,3 @@ export function calcInitialHeight(
   const height = Number(heights?.[renderedOrientation])
   return isNaN(height) ? 0 : height
 }
-
-export function handleAutoPaddingRight(parentRef, xAxisLabelRefs, parentWidth): [boolean, number] {
-  const parentX = parentRef.current.getBoundingClientRect().x
-  const editorIsOpen = !!document.querySelector('.editor-panel:not(.hidden)')
-  const lastTickRect = xAxisLabelRefs.current?.[xAxisLabelRefs.current.length - 1]?.getBoundingClientRect()
-  const lastBottomTickEnd = lastTickRect ? lastTickRect.x + lastTickRect.width : 0
-  const editorWidth = editorIsOpen ? EDITOR_WIDTH : 0
-  const calculatedOverhang = lastBottomTickEnd - parentX - editorWidth - parentWidth
-
-  const paddingToAdd = clamp(calculatedOverhang, 0, 20)
-  const currentPadding = Number(parentRef.current.style.paddingRight.replace('px', ''))
-  const paddingDiff = Math.abs(currentPadding - paddingToAdd)
-  const DIFF_THRESHOLD = 5
-
-  const noChange = currentPadding === calculatedOverhang
-  const insufficientDiff = (paddingDiff < DIFF_THRESHOLD && calculatedOverhang > 0) || Math.abs(calculatedOverhang) < 1
-  const updatePadding = !noChange && !insufficientDiff
-
-  return [updatePadding, paddingToAdd]
-}