@cdc/chart 4.25.8 → 4.25.11

package/src/components/SmallMultiples/SmallMultipleTile.tsx

@@ -0,0 +1,198 @@
+import React, { useContext, useRef, useEffect } from 'react'
+import LinearChart from '../LinearChart'
+import ParentSize from '@visx/responsive/lib/components/ParentSize'
+import ConfigContext from '../../ConfigContext'
+import { ColorScale } from '../../types/ChartContext'
+import cloneConfig from '@cdc/core/helpers/cloneConfig'
+import { getTileDisplayTitle } from '../../helpers/smallMultiplesHelpers'
+import getViewport from '@cdc/core/helpers/getViewport'
+import { ChartConfig } from '../../types/ChartConfig'
+
+interface SmallMultipleTileProps {
+  mode: 'by-series' | 'by-column'
+  config: ChartConfig
+  data: object[]
+  tileKey: string
+  seriesKey?: string
+  tileValue?: string | number
+  tileColumn?: string
+  customColorScale?: ColorScale
+  svgRef?: React.RefObject<SVGAElement>
+  parentWidth?: number
+  parentHeight?: number
+  globalYAxisMax?: number
+  globalYAxisMin?: number
+  isFirstInRow?: boolean
+  onHeightChange?: (tileKey: string, height: number) => void
+  onChartRef?: (ref: any) => void
+  onHeaderRef?: (ref: HTMLDivElement | null) => void
+  onChartHover?: (xAxisValue: any, yCoordinate: number) => void
+}
+
+const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
+  mode,
+  config,
+  data,
+  tileKey,
+  seriesKey,
+  tileValue,
+  tileColumn,
+  customColorScale,
+  svgRef,
+  parentWidth,
+  globalYAxisMax,
+  globalYAxisMin,
+  isFirstInRow,
+  onHeightChange,
+  onChartRef,
+  onHeaderRef,
+  onChartHover
+}) => {
+  let tileConfig = cloneConfig(config)
+  let tileData = data
+
+  if (mode === 'by-series') {
+    // BY-SERIES: One series per tile, all data
+    const singleSeries = tileConfig.series.find(s => s.dataKey === seriesKey)
+    tileConfig = {
+      ...tileConfig,
+      series: [singleSeries], // Single series
+      runtime: {
+        ...tileConfig.runtime,
+        series: tileConfig.runtime.series.filter(s => s.dataKey === seriesKey),
+        seriesKeys: [seriesKey],
+        seriesLabels: { [seriesKey]: tileConfig.runtime.seriesLabels?.[seriesKey] || seriesKey },
+        seriesLabelsAll: [tileConfig.runtime.seriesLabels?.[seriesKey] || seriesKey],
+        // Filter area chart specific series keys for proper rendering
+        ...(tileConfig.runtime.areaSeriesKeys && {
+          areaSeriesKeys: tileConfig.runtime.areaSeriesKeys.filter(s => s.dataKey === seriesKey)
+        }),
+        // Filter line chart specific series keys for proper rendering
+        ...(tileConfig.runtime.lineSeriesKeys && {
+          lineSeriesKeys: tileConfig.runtime.lineSeriesKeys.filter(key => key === seriesKey)
+        })
+      },
+      showTitle: false, // Individual tiles don't need the main title
+      smallMultiples: undefined // Remove smallMultiples to prevent infinite loop
+    }
+    tileData = data // All data, but only one series will render
+  } else if (mode === 'by-column') {
+    // BY-COLUMN: All series, filtered data by tile column value
+    tileConfig = {
+      ...tileConfig,
+      showTitle: false, // Individual tiles don't need the main title
+      smallMultiples: undefined // Remove smallMultiples to prevent infinite loop
+    }
+    tileData = data.filter(row => row[tileColumn] === tileValue) // Filtered data
+  }
+
+  // Apply global Y-axis values for consistent scaling if provided
+  if (globalYAxisMax !== undefined) {
+    tileConfig = {
+      ...tileConfig,
+      yAxis: {
+        ...tileConfig.yAxis,
+        max: globalYAxisMax,
+        min: globalYAxisMin
+      },
+      // Also update runtime properties since LinearChart checks runtime.yAxis.max
+      runtime: {
+        ...tileConfig.runtime,
+        yAxis: {
+          ...tileConfig.runtime?.yAxis,
+          max: globalYAxisMax,
+          min: globalYAxisMin
+        }
+      }
+    }
+  }
+
+  // Small multiples-specific modifications
+  tileConfig = {
+    ...tileConfig,
+    hideXAxisLabel: !isFirstInRow,
+    hideYAxisLabel: !isFirstInRow,
+    legend: {
+      ...tileConfig.legend,
+      hide: true
+    },
+    showAreaUnderLine: config.smallMultiples?.showAreaUnderLine || false
+  }
+
+  const displayTitle = getTileDisplayTitle(mode, seriesKey, tileValue, tileKey, config)
+
+  // Get the original context values to merge with our filtered config
+  const originalContextValues = useContext(ConfigContext)
+
+  // Create a tile-specific parentRef for this tile's chart
+  const tileParentRef = useRef<HTMLDivElement>(null)
+
+  // Create a ref for the entire tile (including header) for height measurement
+  const fullTileRef = useRef<HTMLDivElement>(null)
+
+  // Create a ref for the LinearChart instance for tooltip coordination
+  const linearChartRef = useRef<any>(null)
+
+  // Create new context values with our filtered config
+  const tileContextValues = {
+    ...originalContextValues,
+    config: tileConfig,
+    transformedData: tileData,
+    tableData: tileData, // Override with tile-specific filtered data (important for tooltip data lookup)
+    parentRef: tileParentRef, // Override with tile-specific parentRef
+    updateConfig: () => {}, // Prevent tile hooks from modifying global config
+    ...(customColorScale && { colorScale: customColorScale }) // Override colorScale if provided
+  }
+
+  // Use ResizeObserver to capture actual full tile height changes (including header)
+  useEffect(() => {
+    if (!fullTileRef.current || !onHeightChange) return
+
+    const resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        const { height } = entry.contentRect
+        onHeightChange(tileKey, height)
+      })
+    })
+
+    resizeObserver.observe(fullTileRef.current)
+    return () => resizeObserver.disconnect()
+  }, [tileKey, onHeightChange])
+
+  // Pass chart ref to parent SmallMultiples component for tooltip coordination
+  useEffect(() => {
+    if (onChartRef && linearChartRef.current) {
+      onChartRef(linearChartRef.current)
+    }
+  }, [onChartRef])
+
+  return (
+    <div ref={fullTileRef} className='small-multiple-tile'>
+      <div ref={onHeaderRef} className='tile-header'>
+        <div className='tile-title'>{displayTitle}</div>
+      </div>
+      <div ref={tileParentRef} className='tile-chart'>
+        <ParentSize
+          key={`${mode}-${seriesKey || tileValue}-${config.smallMultiples?.tilesPerRowDesktop}-${
+            config.smallMultiples?.tilesPerRowMobile
+          }-${parentWidth}`}
+        >
+          {parent => (
+            <ConfigContext.Provider
+              value={{
+                ...tileContextValues,
+                dimensions: [parent.width, parent.height], // Override with tile-specific dimensions
+                vizViewport: getViewport(parent.width), // Override with tile-specific viewport
+                handleSmallMultipleHover: onChartHover
+              }}
+            >
+              <LinearChart ref={linearChartRef} parentWidth={parent.width} parentHeight={parent.height} />
+            </ConfigContext.Provider>
+          )}
+        </ParentSize>
+      </div>
+    </div>
+  )
+}
+
+export default SmallMultipleTile

package/src/components/SmallMultiples/SmallMultiples.css

@@ -0,0 +1,32 @@
+.small-multiples-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.small-multiples-grid {
+  display: grid;
+  width: 100%;
+  flex: 1;
+}
+
+.small-multiple-tile {
+  display: flex;
+  flex-direction: column;
+}
+
+.tile-header {
+  margin-bottom: 0.5rem;
+}
+
+.tile-title {
+  margin: 0;
+  font-weight: 700;
+  text-align: left;
+  line-height: 1.3;
+}
+
+.tile-chart {
+  width: 100%;
+  flex-shrink: 0;
+}

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'