@cdc/chart 4.25.10 → 4.26.1

package/src/components/SmallMultiples/SmallMultipleTile.tsx

@@ -0,0 +1,202 @@
+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 // Hide legends for all small multiple tiles
+    },
+    xAxis: {
+      ...tileConfig.xAxis,
+      brushActive: false // Hide brush slider for all small multiple tiles
+    },
+    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'

package/src/components/WarmingStripes/WarmingStripes.tsx

@@ -0,0 +1,160 @@
+import { useContext, useState } from 'react'
+import ConfigContext from '../../ConfigContext'
+import { Group } from '@visx/group'
+import { scaleSequential } from 'd3-scale'
+import { interpolateRgbBasis } from 'd3-interpolate'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
+import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import { getFallbackColorPalette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
+import { paletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
+import { hasTrackedHover, markHoverTracked } from '../../utils/analyticsTracking'
+
+type WarmingStripesProps = {
+  xScale: any
+  yScale: any
+  xMax: number
+  yMax: number
+}
+
+const WarmingStripes = ({ xMax, yMax }: WarmingStripesProps) => {
+  const { transformedData: data, config, formatNumber, interactionLabel, currentViewport } = useContext(ConfigContext)
+
+  const [currentHover, setCurrentHover] = useState<number | null>(null)
+
+  // Get the data key for the temperature/anomaly values
+  // Use the first series key as the value column
+  const valueKey = config.runtime.seriesKeys?.[0]
+  const xAxisDataKey = config.runtime.originalXAxis?.dataKey || config.xAxis?.dataKey
+
+  if (!valueKey || !xAxisDataKey || !data || data.length === 0) {
+    return null
+  }
+
+  // Determine max stripes based on viewport
+  const isMobile = ['xxs', 'xs', 'sm', 'md'].includes(currentViewport)
+  const maxStripes = isMobile ? 60 : 200
+
+  // Sample data if we have more than the max allowed stripes
+  let displayData = data
+  if (data.length > maxStripes) {
+    const step = data.length / maxStripes
+    displayData = []
+    for (let i = 0; i < maxStripes; i++) {
+      const index = Math.floor(i * step)
+      displayData.push(data[index])
+    }
+  }
+
+  // Calculate the min and max values for the color scale
+  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
+  const colorPalettes = filterChartColorPalettes(config)
+  const configPalette = config.general?.palette?.name
+  const migratedPaletteName = configPalette ? configPalette : getFallbackColorPalette(config)
+
+  // Check if the palette name ends with 'reverse' and get the base palette
+  const isReversedPalette = migratedPaletteName?.endsWith('reverse')
+  const basePaletteName = isReversedPalette ? migratedPaletteName.slice(0, -7) : migratedPaletteName
+
+  let palette =
+    colorPalettes[migratePaletteWithMap(basePaletteName, paletteMigrationMap, false)] ||
+    colorPalettes[basePaletteName] ||
+    colorPalettes[configPalette]
+
+  // Fallback to a default diverging palette if none found
+  if (!palette || palette.length < 2) {
+    console.warn(`Palette "${configPalette}" not found or invalid, falling back to default`)
+    // Use a default blue to red palette
+    palette = [
+      '#053061',
+      '#2166ac',
+      '#4393c3',
+      '#92c5de',
+      '#d1e5f0',
+      '#f7f7f7',
+      '#fddbc7',
+      '#f4a582',
+      '#d6604d',
+      '#b2182b',
+      '#67001f'
+    ]
+  }
+
+  // Create a sequential color scale using the palette colors
+  // Apply reverse if configured (either via isReversed flag or 'reverse' suffix in name)
+  const shouldReverse = config.general?.palette?.isReversed || isReversedPalette
+  const finalPalette = shouldReverse ? [...palette].reverse() : palette
+  const colorScale = scaleSequential(interpolateRgbBasis(finalPalette)).domain([minValue, maxValue])
+
+  // Calculate stripe width based on available space and display data
+  const stripeWidth = xMax / displayData.length
+
+  const handleTooltip = (item: any) => {
+    const xValue = item[xAxisDataKey]
+    const yValue = item[valueKey]
+    const formattedValue = formatNumber(yValue, 'left')
+
+    return `<div>
+      <strong>${config.xAxis.label || xAxisDataKey}:</strong> ${xValue}<br/>
+      <strong>${config.runtime.seriesLabels?.[valueKey] || valueKey}:</strong> ${formattedValue}
+    </div>`
+  }
+
+  return (
+    <Group className='warming-stripes' left={config.yAxis.size}>
+      {displayData.map((item, index) => {
+        const value = Number(item[valueKey])
+        if (isNaN(value)) return null
+
+        const xPosition = index * stripeWidth
+        const fillColor = colorScale(value) as unknown as string
+        const isHovered = currentHover === index
+        const isMuted = currentHover !== null && !isHovered
+
+        return (
+          <rect
+            key={`stripe-${index}`}
+            x={xPosition}
+            y={0}
+            width={stripeWidth}
+            height={yMax}
+            fill={fillColor}
+            fillOpacity={isMuted ? 0.5 : 1}
+            stroke='none'
+            data-tooltip-html={handleTooltip(item)}
+            data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+            tabIndex={-1}
+            style={{ cursor: 'pointer', transition: 'fill-opacity 0.2s ease' }}
+            onMouseEnter={() => {
+              if (currentHover !== index) {
+                // Only publish analytics event once per visualization (shared tracking)
+                const vizId = String(config.runtime.uniqueId)
+                if (!hasTrackedHover(vizId)) {
+                  publishAnalyticsEvent({
+                    vizType: config?.type,
+                    vizSubType: getVizSubType(config),
+                    eventType: 'chart_hover',
+                    eventAction: 'hover',
+                    eventLabel: interactionLabel || 'unknown',
+                    vizTitle: getVizTitle(config),
+                    series: valueKey
+                  })
+                  markHoverTracked(vizId)
+                }
+                setCurrentHover(index)
+              }
+            }}
+            onMouseLeave={() => setCurrentHover(null)}
+          />
+        )
+      })}
+    </Group>
+  )
+}
+
+export default WarmingStripes