@cdc/chart 4.25.10 → 4.25.11

package/src/components/SmallMultiples/SmallMultiples.tsx

@@ -0,0 +1,271 @@
+import React, { useContext, useEffect, useRef, useState, useMemo, useCallback } from 'react'
+import SmallMultipleTile from './SmallMultipleTile'
+import ConfigContext from '../../ConfigContext'
+import useReduceData from '../../hooks/useReduceData'
+import useScales from '../../hooks/useScales'
+import { createCombinedDataForYAxis, applyTileOrder, createTileColorScale } from '../../helpers/smallMultiplesHelpers'
+import { isMobileSmallMultiplesViewport } from '@cdc/core/helpers/viewports'
+import './SmallMultiples.css'
+import { ChartConfig } from '../../types/ChartConfig'
+
+interface SmallMultiplesProps {
+  config: ChartConfig
+  data: object[]
+  svgRef?: React.RefObject<SVGAElement>
+  parentWidth?: number
+  parentHeight?: number
+}
+
+type TileItem = {
+  key: string | number
+  mode: 'by-series' | 'by-column'
+  seriesKey?: string
+  tileValue?: any
+  tileColumn?: string
+}
+
+type ChartRefWithTooltipMethods = {
+  triggerTooltipAtDataValue?: (xAxisValue: any, yCoordinate: number) => void
+  hideTooltip?: () => void
+}
+
+type TileHeaderRows = Array<Array<HTMLDivElement>>
+
+type TileHeaderEntries = Array<[string, HTMLDivElement]>
+
+const SmallMultiples: React.FC<SmallMultiplesProps> = ({ config, data, svgRef, parentWidth, parentHeight }) => {
+  const { currentViewport, colorScale, parentRef } = useContext(ConfigContext)
+  const { mode, tileColumn, tilesPerRowDesktop, tilesPerRowMobile } = config.smallMultiples || {}
+
+  const isMobile = isMobileSmallMultiplesViewport(currentViewport)
+  const tilesPerRow = isMobile ? tilesPerRowMobile || 1 : tilesPerRowDesktop || 3
+
+  // Figure out what objects to iterate over based on mode - memoized to prevent recalculation
+  const tileItems = useMemo<Array<TileItem>>(() => {
+    let items: Array<TileItem> = []
+
+    if (mode === 'by-series') {
+      items = config.series.map(series => ({
+        key: series.dataKey,
+        mode: 'by-series' as const,
+        seriesKey: series.dataKey
+      }))
+    } else if (mode === 'by-column') {
+      const uniqueValues = Array.from(new Set(data.map(row => row[tileColumn])))
+        .filter(val => val != null)
+        .sort()
+      items = uniqueValues.map(value => ({
+        key: value,
+        mode: 'by-column' as const,
+        tileValue: value,
+        tileColumn: tileColumn
+      }))
+    }
+
+    // Apply tile ordering based on user preference
+    return applyTileOrder(
+      items,
+      config.smallMultiples?.tileOrderType || 'asc',
+      config.smallMultiples?.tileOrder,
+      config
+    )
+  }, [
+    mode,
+    config.series,
+    data,
+    tileColumn,
+    config.smallMultiples?.tileOrderType,
+    config.smallMultiples?.tileOrder,
+    config.smallMultiples?.tileTitles
+  ])
+
+  // Calculate the grid styling based on tiles per row
+  const gridGap = isMobile ? '1rem' : '2rem'
+  const gridStyle = {
+    gridTemplateColumns: `repeat(${tilesPerRow}, 1fr)`,
+    gap: gridGap
+  }
+
+  const [tileHeights, setTileHeights] = useState<Record<string, number>>({})
+
+  // Refs to all LinearChart instances for tooltip coordination
+  const chartRefs = useRef<Record<string, ChartRefWithTooltipMethods>>({})
+
+  // Refs to all tile header elements for height alignment
+  const headerRefs = useRef<Record<string, HTMLDivElement | null>>({})
+
+  // Create combined data and config for consistent Y-axis calculation
+  const combinedDataForYAxis = useMemo(
+    () => createCombinedDataForYAxis(config, data, tileItems),
+    [config, data, tileItems]
+  )
+
+  const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(
+    combinedDataForYAxis.config,
+    combinedDataForYAxis.data
+  )
+
+  const inlineLabel = config.yAxis?.inlineLabel
+  const inlineLabelHasNoSpace = !inlineLabel?.includes(' ')
+  const needsYAxisAutoPadding = inlineLabel && !inlineLabelHasNoSpace
+
+  const { min, max } = useScales({
+    config: combinedDataForYAxis.config,
+    data: combinedDataForYAxis.data,
+    tableData: combinedDataForYAxis.data,
+    minValue,
+    maxValue,
+    existPositiveValue,
+    isAllLine,
+    xAxisDataMapped: [],
+    xMax: parentWidth,
+    yMax: parentHeight,
+    needsYAxisAutoPadding,
+    currentViewport
+  })
+
+  // Use consistent Y-axis if the feature is enabled and we have valid values
+  const globalYAxisValues = useMemo(() => {
+    if (config.smallMultiples?.independentYAxis) return null
+    if (typeof min !== 'number' || typeof max !== 'number') return null
+    if (combinedDataForYAxis.data.length === 0) return null
+
+    return { min, max }
+  }, [config.smallMultiples?.independentYAxis, min, max, combinedDataForYAxis.data.length])
+
+  const numberOfRows = useMemo(() => Math.ceil(tileItems.length / tilesPerRow), [tileItems.length, tilesPerRow])
+
+  // Handle tile height changes from ResizeObserver
+  const handleTileHeightChange = useCallback((tileKey: string, height: number) => {
+    setTileHeights(prev => ({ ...prev, [tileKey]: height }))
+  }, [])
+
+  // Handle tooltip synchronization across small multiple tiles
+  const handleChartHover = useCallback(
+    (sourceTileKey: string, xAxisValue: any, yCoordinate: number) => {
+      if (!config.smallMultiples?.synchronizedTooltips) return
+
+      // If xAxisValue is null, it means mouse left the chart - hide all tooltips
+      if (xAxisValue === null) {
+        Object.entries(chartRefs.current).forEach(([tileKey, chartRef]) => {
+          if (tileKey !== sourceTileKey && chartRef?.hideTooltip) {
+            chartRef.hideTooltip()
+          }
+        })
+        return
+      }
+
+      // For each OTHER chart in the grid, trigger tooltip at same X-axis data value and exact Y coordinate
+      Object.entries(chartRefs.current).forEach(([tileKey, chartRef]) => {
+        if (tileKey === sourceTileKey || !chartRef) return
+
+        if (chartRef.triggerTooltipAtDataValue) {
+          chartRef.triggerTooltipAtDataValue(xAxisValue, yCoordinate)
+        }
+      })
+    },
+    [config.smallMultiples?.synchronizedTooltips]
+  )
+
+  // Align tile header heights per row
+  useEffect(() => {
+    const headerEntries = Object.entries(headerRefs.current).filter(([_, ref]) => ref) as TileHeaderEntries
+    if (headerEntries.length === 0) return
+
+    // Group headers by row based on their index in tileItems
+    const headersByRow: TileHeaderRows = []
+
+    tileItems.forEach((item, index) => {
+      const rowIndex = Math.floor(index / tilesPerRow)
+      const header = headerRefs.current[String(item.key)]
+
+      headersByRow[rowIndex] ||= []
+      headersByRow[rowIndex].push(header)
+    })
+
+    // For each row, find the header with longest text and align others to it
+    headersByRow.forEach(rowHeaders => {
+      let longestHeader: HTMLDivElement | null = null
+      let maxTextLength = 0
+
+      rowHeaders.forEach(header => {
+        const textLength = header.textContent?.length || 0
+        if (textLength > maxTextLength) {
+          maxTextLength = textLength
+          longestHeader = header
+        }
+      })
+
+      if (!longestHeader) return
+
+      // Get the height of the longest header in this row
+      const targetHeight = longestHeader.offsetHeight
+
+      // Apply that height to all other headers in this row
+      rowHeaders.forEach(header => {
+        header.style.minHeight = header !== longestHeader ? `${targetHeight}px` : 'auto'
+      })
+    })
+  }, [tileItems, tilesPerRow])
+
+  // Calculate container height from measured tile heights
+  useEffect(() => {
+    if (!parentRef.current) return
+
+    const measuredHeights = Object.values(tileHeights)
+    if (measuredHeights.length === 0) {
+      return
+    }
+
+    const maxTileHeight = Math.max(...measuredHeights)
+    const gapSize = isMobile ? 18 : 36
+    const totalGapsHeight = (numberOfRows - 1) * gapSize
+    const totalHeight = numberOfRows * maxTileHeight + totalGapsHeight
+
+    parentRef.current.style.height = `${totalHeight}px`
+  }, [tileHeights, numberOfRows, isMobile, parentRef, tilesPerRow])
+
+  if (tileItems.length === 0) {
+    return null
+  }
+
+  return (
+    <div className='small-multiples-container'>
+      <div className='small-multiples-grid' style={gridStyle}>
+        {tileItems.map((item, index) => {
+          const customColorScale = createTileColorScale(item, config, colorScale, index, tileItems.length)
+
+          return (
+            <SmallMultipleTile
+              key={item.key}
+              tileKey={String(item.key)}
+              mode={item.mode}
+              seriesKey={item.seriesKey}
+              tileValue={item.tileValue}
+              tileColumn={item.tileColumn}
+              customColorScale={customColorScale}
+              config={config}
+              data={data}
+              svgRef={svgRef}
+              parentWidth={parentWidth}
+              parentHeight={parentHeight}
+              globalYAxisMax={globalYAxisValues?.max}
+              globalYAxisMin={globalYAxisValues?.min}
+              isFirstInRow={index % tilesPerRow === 0}
+              onHeightChange={handleTileHeightChange}
+              onChartRef={ref => {
+                chartRefs.current[String(item.key)] = ref
+              }}
+              onHeaderRef={ref => {
+                headerRefs.current[String(item.key)] = ref
+              }}
+              onChartHover={(xAxisValue, yCoordinate) => handleChartHover(String(item.key), xAxisValue, yCoordinate)}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default SmallMultiples

package/src/components/SmallMultiples/index.ts

@@ -0,0 +1,2 @@
+export { default as SmallMultiples } from './SmallMultiples'
+export { default as SmallMultipleTile } from './SmallMultipleTile'

package/src/data/initial-state.js

@@ -198,7 +198,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/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 }
   }
@@ -238,4 +245,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
+}