@cdc/chart 4.25.11 → 4.26.1

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

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',

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/getMinMax.ts

@@ -55,10 +55,15 @@ const getMinMax = ({
   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
   }
@@ -79,7 +84,7 @@ const getMinMax = ({
       })
 
       // 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,
@@ -102,7 +107,7 @@ const getMinMax = ({
 
   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')
@@ -128,8 +133,8 @@ const getMinMax = ({
         })
         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)
@@ -209,7 +214,7 @@ const getMinMax = ({
   }
 
   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) {

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]
-}

package/src/helpers/smallMultiplesHelpers.ts

@@ -181,7 +181,7 @@ export const getTileDisplayTitle = (mode, seriesKey, tileValue, tileKey, config)
  * Get the full color palette from config with exactly the number of colors needed
  * This creates a temporary colorScale with the right number of series to get the needed colors
  */
-const getFullColorPalette = (config, numberOfTiles) => {
+export const getFullColorPalette = (config, numberOfTiles) => {
   // Create fake series keys for exactly the number of tiles needed
   const tempSeriesKeys = Array(numberOfTiles)
     .fill(null)

package/src/hooks/useChartHoverAnalytics.tsx

@@ -1,6 +1,6 @@
-import { useRef } from 'react'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { hasTrackedHover, markHoverTracked } from '../utils/analyticsTracking'
 
 type UseChartHoverAnalyticsParams = {
   config: any
@@ -9,14 +9,16 @@ type UseChartHoverAnalyticsParams = {
 
 /**
  * Hook to track analytics when user enters the chart area
- * Fires once per chart entry, not on every hover interaction
+ * Fires once per visualization, persists across component remounts
  */
 export const useChartHoverAnalytics = ({ config, interactionLabel = '' }: UseChartHoverAnalyticsParams) => {
-  const hasTrackedRef = useRef(false)
-
   const handleChartMouseEnter = () => {
-    // Only track if we have an interaction label and haven't tracked yet
-    if (!interactionLabel || hasTrackedRef.current) return
+    // Only track if we have an interaction label
+    if (!interactionLabel) return
+
+    // Use unique ID to track per visualization
+    const vizId = String(config.runtime.uniqueId)
+    if (hasTrackedHover(vizId)) return
 
     // Publish the analytics event
     publishAnalyticsEvent({
@@ -29,12 +31,11 @@ export const useChartHoverAnalytics = ({ config, interactionLabel = '' }: UseCha
     })
 
     // Mark as tracked so we don't fire again
-    hasTrackedRef.current = true
+    markHoverTracked(vizId)
   }
 
   const handleChartMouseLeave = () => {
-    // Reset tracking when mouse leaves so next entry will track
-    hasTrackedRef.current = false
+    // No-op: We no longer reset tracking on mouse leave
   }
 
   return {

package/src/hooks/useScales.ts

@@ -133,7 +133,17 @@ const useScales = (properties: useScaleProps) => {
   // handle  Vertical bars
   if (!isHorizontal) {
     xScale = composeScaleBand(xAxisDataMapped, [0, xMax], paddingRange)
-    yScale = composeYScale({ min, max, yMax, config, leftMax })
+    // For categorical y-axis, use [0, max] domain and [yMax, 0] range to match CategoricalYAxis
+    // This ensures line data aligns with categorical bars and bars go to 100% height
+    if (config.yAxis.type === 'categorical') {
+      yScale = scaleLinear({
+        domain: [0, max],
+        range: [yMax, 0],
+        clamp: true
+      })
+    } else {
+      yScale = composeYScale({ min, max, yMax, config, leftMax })
+    }
     seriesScale = composeScaleBand(seriesDomain, [0, xScale.bandwidth()], 0)
   }
 

package/src/hooks/useTooltip.tsx

@@ -105,7 +105,7 @@ export const useTooltip = props => {
         addColCommas: column.commas
       }
 
-      const pieColumnData = additionalChartData?.arc?.data[column.name]
+      const pieColumnData = additionalChartData?.data?.[column.name]
       const columnData =
         config.tooltips.singleSeries && visualizationType === 'Line'
           ? resolvedScaleValues.filter(
@@ -145,7 +145,7 @@ export const useTooltip = props => {
         tooltipItems.push(
           [config.xAxis.dataKey, pieData[config.xAxis.dataKey]],
           [
-            config.runtime.yAxis.dataKey,
+            config.runtime.yAxis.label || config.runtime.yAxis.dataKey,
             showPiePercent ? pctString(actualPieValue) : formatNumber(pieData[config.runtime.yAxis.dataKey])
           ],
           showPiePercent ? [] : ['Percent', pctString(pctOf360)]
@@ -260,11 +260,30 @@ export const useTooltip = props => {
     const dataXPosition = eventSvgCoords.x + 10
     const dataYPosition = eventSvgCoords.y
 
+    // Helper to strip <a> tags and only show link text
+    function stripLinkTags(str) {
+      if (typeof str !== 'string') return str
+      // Remove HTML <a> tags, keep inner text
+      return str.replace(/<a [^>]*>(.*?)<\/a>/gi, '$1')
+    }
+
+    // Strip link tags from all tooltip values
+    const cleanTooltipItems = [...tooltipItems, ...additionalTooltipItems].map(item => {
+      // item can be [key, value] or [key, value, axisPosition]
+      if (Array.isArray(item)) {
+        // Only strip from value (item[1])
+        const newItem = [...item]
+        newItem[1] = stripLinkTags(newItem[1])
+        return newItem
+      }
+      return item
+    })
+
     const tooltipInformation = {
       tooltipLeft: dataXPosition,
       tooltipTop: dataYPosition,
       tooltipData: {
-        data: [...tooltipItems, ...additionalTooltipItems],
+        data: cleanTooltipItems,
         dataXPosition,
         dataYPosition
       }
@@ -523,14 +542,16 @@ export const useTooltip = props => {
     includedSeries.push(...dynamicDataCategories)
 
     if (config.visualizationType === 'Forecasting') {
-      config.runtime.series.map(s => {
-        s.confidenceIntervals.map(c => {
-          if (c.showInTooltip) {
-            includedSeries.push(c.high)
-            includedSeries.push(c.low)
-          }
+      config.runtime.series
+        .filter(s => s.type === 'Forecasting' && s.confidenceIntervals)
+        .forEach(s => {
+          s.confidenceIntervals.forEach(c => {
+            if (c.showInTooltip) {
+              includedSeries.push(c.high)
+              includedSeries.push(c.low)
+            }
+          })
         })
-      })
     }
 
     const colNames = Object.values(config.columns).map(column => column.name)

package/src/scss/DataTable.scss

@@ -1,8 +1,4 @@
 .data-table-container {
-  &.brush-active {
-    margin: 80px 0 0;
-  }
-
   width: 100%;
 }
 

package/src/scss/main.scss

@@ -50,9 +50,6 @@
   .subtext,
   .subtext--responsive-ticks,
   .section-subtext {
-    &--brush-active {
-      margin-top: 3rem !important;
-    }
   }
 
   .type-pie {
@@ -325,6 +322,23 @@
       margin-bottom: 2.5em;
     }
 
+    // Brush touch support
+    .brush-overlay {
+      touch-action: none;
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      user-select: none;
+
+      .visx-brush,
+      .visx-brush-overlay,
+      .visx-brush-selection,
+      .visx-brush-handle-left,
+      .visx-brush-handle-right {
+        touch-action: none;
+        cursor: pointer;
+      }
+    }
+
     svg.dragging-annotation * {
       user-select: none;
     }

package/src/test/CdcChart.test.jsx

@@ -7,5 +7,5 @@ describe('Chart', () => {
     const pkgDir = path.join(__dirname, '..')
     const result = testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
-  })
+  }, 300000)
 })