@cdc/chart 4.25.11 → 4.26.2

package/src/components/WarmingStripes/WarmingStripes.tsx

@@ -0,0 +1,230 @@
+import { useContext, useState, useCallback, useEffect } 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 { 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
+  synchronizedXValue?: any
+  showTooltip: (args: any) => void
+  handleTooltipMouseOff: () => void
+}
+
+const WarmingStripes = ({
+  xMax,
+  yMax,
+  synchronizedXValue,
+  showTooltip,
+  handleTooltipMouseOff
+}: WarmingStripesProps) => {
+  const {
+    transformedData: data,
+    config,
+    formatNumber,
+    interactionLabel,
+    currentViewport,
+    handleSmallMultipleHover
+  } = 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
+
+  // 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 (displayData.length > maxStripes) {
+    const step = displayData.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 = displayData.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
+
+  // Build tooltip data in COVE format and trigger showTooltip
+  const showStripeTooltip = useCallback(
+    (item: any, index: number, mouseY?: number) => {
+      const value = Number(item[valueKey])
+      if (isNaN(value)) return
+
+      const formattedValue = formatNumber(value, 'left')
+
+      // Pass raw x-axis value — TooltipListItem handles date formatting
+      const tooltipItems = [
+        [xAxisDataKey, item[xAxisDataKey]],
+        [valueKey, formattedValue, 'left']
+      ]
+
+      const dataXPosition = index * stripeWidth + stripeWidth / 2 + Number(config.yAxis.size)
+      const dataYPosition = mouseY ?? yMax / 2
+
+      showTooltip({
+        tooltipLeft: dataXPosition + 10,
+        tooltipTop: dataYPosition,
+        tooltipData: {
+          data: tooltipItems,
+          dataXPosition: dataXPosition + 10,
+          dataYPosition
+        }
+      })
+    },
+    [valueKey, xAxisDataKey, stripeWidth, config.yAxis.size, yMax, formatNumber, showTooltip]
+  )
+
+  // Handle incoming synchronized tooltip from sibling small multiple tiles
+  useEffect(() => {
+    if (synchronizedXValue === null || synchronizedXValue === undefined) {
+      setCurrentHover(null)
+      handleTooltipMouseOff()
+      return
+    }
+
+    const matchIndex = displayData.findIndex(item => String(item[xAxisDataKey]) === String(synchronizedXValue))
+
+    if (matchIndex >= 0) {
+      setCurrentHover(matchIndex)
+      showStripeTooltip(displayData[matchIndex], matchIndex)
+    }
+  }, [synchronizedXValue])
+
+  if (!valueKey || !xAxisDataKey || !data || data.length === 0) {
+    return null
+  }
+
+  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'
+            tabIndex={-1}
+            style={{ cursor: 'pointer', transition: 'fill-opacity 0.2s ease' }}
+            onMouseEnter={e => {
+              if (currentHover !== index) {
+                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)
+              }
+
+              // Show COVE tooltip using mouse Y position
+              const svgEl = (e.currentTarget as SVGRectElement).ownerSVGElement
+              const svgRect = svgEl?.getBoundingClientRect()
+              const mouseY = svgRect ? e.clientY - svgRect.top : yMax / 2
+              showStripeTooltip(item, index, mouseY)
+
+              if (handleSmallMultipleHover) {
+                handleSmallMultipleHover(item[xAxisDataKey], yMax / 2)
+              }
+            }}
+            onMouseMove={e => {
+              // Update tooltip Y position as mouse moves within the stripe
+              const svgEl = (e.currentTarget as SVGRectElement).ownerSVGElement
+              const svgRect = svgEl?.getBoundingClientRect()
+              const mouseY = svgRect ? e.clientY - svgRect.top : yMax / 2
+              showStripeTooltip(item, index, mouseY)
+            }}
+            onMouseLeave={() => {
+              setCurrentHover(null)
+              handleTooltipMouseOff()
+              if (handleSmallMultipleHover) {
+                handleSmallMultipleHover(null, 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',
@@ -44,7 +45,8 @@ const createInitialState = () => {
       showSuppressedSymbol: true,
       showZeroValueData: true,
       hideNullValue: true,
-      palette: paletteDefaults
+      palette: paletteDefaults,
+      useIntelligentLineChartLabels: false
     },
     padding: {
       left: 5,
@@ -139,7 +141,8 @@ const createInitialState = () => {
       padding: 5,
       showYearsOnce: false,
       sortByRecentDate: false,
-      brushActive: false
+      brushActive: false,
+      brushDefaultRecentDateCount: undefined
     },
     table: {
       label: 'Data Table',
@@ -296,6 +299,18 @@ const createInitialState = () => {
     area: {
       isStacked: false
     },
+    radar: {
+      gridRings: 5,
+      showGridRings: true,
+      gridRingStyle: 'polygons',
+      scaleMin: 0,
+      scaleMax: '',
+      fillOpacity: 0.3,
+      showPoints: true,
+      pointRadius: 4,
+      strokeWidth: 2,
+      axisLabelOffset: 15
+    },
     sankey: {
       title: {
         defaultColor: 'black'

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

@@ -2,6 +2,10 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 import _ from 'lodash'
 import { ChartConfig } from '../types/ChartConfig'
 export const getExcludedData = (newConfig: ChartConfig, data: object[]) => {
+  if (!Array.isArray(data)) {
+    console.warn('COVE: getExcludedData received non-array data:', typeof data)
+    return []
+  }
   let newExcludedData = data
   if (newConfig.exclusions && newConfig.exclusions.active) {
     if (newConfig.xAxis.type === 'categorical' && newConfig.exclusions.keys?.length > 0) {

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

@@ -1,19 +1,19 @@
-export const handleChartAriaLabels = (state, testing = false) => {
-  if (testing) console.log(`handleChartAriaLabels Testing On:`, state) // eslint-disable-line
-  try {
-    if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
-    let ariaLabel = ''
-
-    if (state.visualizationType) {
-      ariaLabel += `${state.visualizationType} chart`
-    }
-
-    if (state.title && state.visualizationType) {
-      ariaLabel += ` with the title: ${state.title}`
-    }
-
-    return ariaLabel
-  } catch (e) {
-    console.error('COVE: ', e.message) // eslint-disable-line
-  }
-}
+export const handleChartAriaLabels = state => {
+  try {
+    if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
+    let ariaLabel = ''
+
+    if (state.visualizationType) {
+      ariaLabel += `${state.visualizationType} chart`
+    }
+
+    if (state.title && state.visualizationType) {
+      ariaLabel += ` with the title: ${state.title}`
+    }
+
+    return ariaLabel
+  } catch (e) {
+    console.error('COVE: ', e.message) // eslint-disable-line
+    return 'Data visualization container'
+  }
+}

package/src/helpers/handleLineType.ts

@@ -1,18 +1,22 @@
-export const handleLineType = lineType => {
-  switch (lineType) {
-    case 'dashed-sm':
-      return '5 5'
-    case 'Dashed Small':
-      return '5 5'
-    case 'dashed-md':
-      return '10 5'
-    case 'Dashed Medium':
-      return '10 5'
-    case 'dashed-lg':
-      return '15 5'
-    case 'Dashed Large':
-      return '15 5'
-    default:
-      return 0
-  }
-}
+const DASH_PATTERNS = {
+  SMALL: '5 5',
+  MEDIUM: '10 5',
+  LARGE: '15 5',
+  SOLID: 0
+} as const
+
+export const handleLineType = (lineType: string): string | number => {
+  switch (lineType) {
+    case 'dashed-sm':
+    case 'Dashed Small':
+      return DASH_PATTERNS.SMALL
+    case 'dashed-md':
+    case 'Dashed Medium':
+      return DASH_PATTERNS.MEDIUM
+    case 'dashed-lg':
+    case 'Dashed Large':
+      return DASH_PATTERNS.LARGE
+    default:
+      return DASH_PATTERNS.SOLID
+  }
+}

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)