@cdc/chart 4.26.5 → 4.26.7

package/src/components/EditorPanel/useEditorPermissions.test.tsx

@@ -6,9 +6,12 @@ import { useEditorPermissions } from './useEditorPermissions'
 import { createMockChartContext, createMockConfig } from '../LinearChart/tests/mockConfigContext'
 import { ChartConfig } from '../../types/ChartConfig'
 
-const renderUseEditorPermissions = (configOverrides: Partial<ChartConfig>) => {
+const renderUseEditorPermissions = (
+  configOverrides: Partial<ChartConfig>,
+  contextOverrides: Partial<ReturnType<typeof createMockChartContext>> = {}
+) => {
   const config = createMockConfig(configOverrides)
-  const context = createMockChartContext(config)
+  const context = createMockChartContext(config, contextOverrides)
   const wrapper = ({ children }: React.PropsWithChildren) => (
     <ConfigContext.Provider value={context}>{children}</ConfigContext.Provider>
   )
@@ -17,7 +20,7 @@ const renderUseEditorPermissions = (configOverrides: Partial<ChartConfig>) => {
 }
 
 describe('useEditorPermissions', () => {
-  it('shows manual y-axis padding controls when auto-padding mode is none', () => {
+  it('shows manual y-axis padding controls when there is no spaced inline label', () => {
     const { result } = renderUseEditorPermissions({
       yAxis: {
         ...createMockConfig().yAxis,
@@ -29,7 +32,7 @@ describe('useEditorPermissions', () => {
     expect(result.current.visSupportsYPadding()).toBe(true)
   })
 
-  it('hides manual y-axis padding controls for inline-label auto-padding', () => {
+  it('hides manual y-axis padding controls for spaced inline labels when renderer headroom applies', () => {
     const { result } = renderUseEditorPermissions({
       yAxis: {
         ...createMockConfig().yAxis,
@@ -41,22 +44,34 @@ describe('useEditorPermissions', () => {
     expect(result.current.visSupportsYPadding()).toBe(false)
   })
 
-  it('hides manual y-axis padding controls for top-title auto-padding', () => {
+  it('shows manual y-axis padding controls for horizontal charts with spaced inline labels', () => {
     const { result } = renderUseEditorPermissions({
+      orientation: 'horizontal',
       yAxis: {
         ...createMockConfig().yAxis,
-        titlePlacement: 'top',
-        label: 'Y-Axis',
-        inlineLabel: ''
+        titlePlacement: 'side',
+        inlineLabel: 'per 100k'
       }
     })
 
-    expect(result.current.visSupportsYPadding()).toBe(false)
+    expect(result.current.visSupportsYPadding()).toBe(true)
+  })
+
+  it('shows manual y-axis padding controls for Combo charts with spaced inline labels', () => {
+    const { result } = renderUseEditorPermissions({
+      visualizationType: 'Combo',
+      yAxis: {
+        ...createMockConfig().yAxis,
+        titlePlacement: 'side',
+        inlineLabel: 'per 100k'
+      }
+    })
+
+    expect(result.current.visSupportsYPadding()).toBe(true)
   })
 
-  it('shows manual y-axis padding controls when a top y-axis title is hidden', () => {
+  it('shows manual y-axis padding controls for top y-axis titles', () => {
     const { result } = renderUseEditorPermissions({
-      hideYAxisLabel: true,
       yAxis: {
         ...createMockConfig().yAxis,
         titlePlacement: 'top',
@@ -67,4 +82,266 @@ describe('useEditorPermissions', () => {
 
     expect(result.current.visSupportsYPadding()).toBe(true)
   })
+
+  it('supports series color assignments only for eligible authored-series charts', () => {
+    const supported = renderUseEditorPermissions({
+      visualizationType: 'Line',
+      series: [{ dataKey: 'cases', type: 'Line' }] as any
+    })
+
+    expect(supported.result.current.visSupportsSeriesColorAssignments()).toBe(true)
+
+    const unsupported = renderUseEditorPermissions({
+      visualizationType: 'Pie',
+      series: [{ dataKey: 'cases', type: 'Pie' }] as any
+    })
+
+    expect(unsupported.result.current.visSupportsSeriesColorAssignments()).toBe(false)
+  })
+
+  it('shows the data-label control for pie charts', () => {
+    const { result } = renderUseEditorPermissions({
+      visualizationType: 'Pie'
+    })
+
+    expect(result.current.visHasLabelOnData()).toBe(true)
+  })
+
+  it('shows right value axis controls for vertical Combo charts without requiring a right-axis series', () => {
+    const { result } = renderUseEditorPermissions({
+      visualizationType: 'Combo',
+      orientation: 'vertical',
+      series: [{ dataKey: 'Cases', type: 'Bar', axis: 'Left' }] as any
+    })
+
+    expect(result.current.visSupportsRightValueAxis()).toBe(true)
+  })
+
+  it('hides right value axis controls outside vertical Combo charts', () => {
+    const horizontalCombo = renderUseEditorPermissions({
+      visualizationType: 'Combo',
+      orientation: 'horizontal'
+    })
+    const verticalBar = renderUseEditorPermissions({
+      visualizationType: 'Bar',
+      orientation: 'vertical'
+    })
+
+    expect(horizontalCombo.result.current.visSupportsRightValueAxis()).toBe(false)
+    expect(verticalBar.result.current.visSupportsRightValueAxis()).toBe(false)
+  })
+
+  it('shows filter-domain behavior when a standalone chart has visible filters and automatic max', () => {
+    const { result } = renderUseEditorPermissions({
+      filters: [{ columnName: 'Region', showDropdown: true } as any],
+      yAxis: {
+        ...createMockConfig().yAxis,
+        max: '',
+        type: 'linear'
+      }
+    })
+
+    expect(result.current.visSupportsFilterDomainBehavior()).toBe(true)
+  })
+
+  it('shows filter-domain behavior for horizontal bar charts when automatic max can respond to filters', () => {
+    const { result } = renderUseEditorPermissions({
+      visualizationType: 'Bar',
+      orientation: 'horizontal',
+      filters: [{ columnName: 'Region', showDropdown: true } as any],
+      yAxis: {
+        ...createMockConfig().yAxis,
+        max: '',
+        type: 'linear'
+      }
+    })
+
+    expect(result.current.visSupportsFilterDomainBehavior()).toBe(true)
+  })
+
+  it('shows filter-domain behavior for dashboard charts without local filters', () => {
+    const { result } = renderUseEditorPermissions(
+      {
+        filters: [],
+        yAxis: {
+          ...createMockConfig().yAxis,
+          max: '',
+          type: 'linear'
+        }
+      },
+      { isDashboard: true }
+    )
+
+    expect(result.current.visSupportsFilterDomainBehavior()).toBe(true)
+  })
+
+  it('hides filter-domain behavior when vertical value-axis max is explicit', () => {
+    const { result } = renderUseEditorPermissions(
+      {
+        filters: [{ columnName: 'Region', showDropdown: true } as any],
+        yAxis: {
+          ...createMockConfig().yAxis,
+          max: '100',
+          type: 'linear'
+        }
+      },
+      { isDashboard: true }
+    )
+
+    expect(result.current.visSupportsFilterDomainBehavior()).toBe(false)
+  })
+
+  it('hides filter-domain behavior for horizontal charts when value-axis max is explicit', () => {
+    const { result } = renderUseEditorPermissions(
+      {
+        visualizationType: 'Bar',
+        orientation: 'horizontal',
+        filters: [{ columnName: 'Region', showDropdown: true } as any],
+        xAxis: {
+          ...createMockConfig().xAxis,
+          max: '100'
+        },
+        yAxis: {
+          ...createMockConfig().yAxis,
+          max: '',
+          type: 'linear'
+        }
+      },
+      { isDashboard: true }
+    )
+
+    expect(result.current.visSupportsFilterDomainBehavior()).toBe(false)
+  })
+
+  it('hides filter-domain behavior for unfiltered standalone charts', () => {
+    const { result } = renderUseEditorPermissions({
+      filters: [],
+      yAxis: {
+        ...createMockConfig().yAxis,
+        max: '',
+        type: 'linear'
+      }
+    })
+
+    expect(result.current.visSupportsFilterDomainBehavior()).toBe(false)
+  })
+
+  it('hides filter-domain behavior for charts outside the value-axis allowlist', () => {
+    const { result } = renderUseEditorPermissions(
+      {
+        visualizationType: 'Bump Chart',
+        filters: [{ columnName: 'Region', showDropdown: true } as any],
+        yAxis: {
+          ...createMockConfig().yAxis,
+          max: '',
+          type: 'linear'
+        }
+      },
+      { isDashboard: true }
+    )
+
+    expect(result.current.visSupportsFilterDomainBehavior()).toBe(false)
+  })
+
+  it('hides filter-domain behavior for chart types with specialized value scales', () => {
+    const { result } = renderUseEditorPermissions(
+      {
+        visualizationType: 'Paired Bar',
+        filters: [{ columnName: 'Region', showDropdown: true } as any],
+        yAxis: {
+          ...createMockConfig().yAxis,
+          max: '',
+          type: 'linear'
+        }
+      },
+      { isDashboard: true }
+    )
+
+    expect(result.current.visSupportsFilterDomainBehavior()).toBe(false)
+  })
+
+  it('shows automatic max strategy for automatic numeric value axes', () => {
+    const { result } = renderUseEditorPermissions({
+      yAxis: {
+        ...createMockConfig().yAxis,
+        max: '',
+        type: 'linear'
+      }
+    })
+
+    expect(result.current.visSupportsAutoMaxStrategy()).toBe(true)
+  })
+
+  it('shows automatic max strategy for horizontal charts with automatic value axes', () => {
+    const { result } = renderUseEditorPermissions({
+      visualizationType: 'Bar',
+      orientation: 'horizontal',
+      xAxis: {
+        ...createMockConfig().xAxis,
+        max: ''
+      },
+      yAxis: {
+        ...createMockConfig().yAxis,
+        max: '',
+        type: 'linear'
+      }
+    })
+
+    expect(result.current.visSupportsAutoMaxStrategy()).toBe(true)
+  })
+
+  it('hides automatic max strategy when vertical value-axis max is explicit', () => {
+    const { result } = renderUseEditorPermissions({
+      yAxis: {
+        ...createMockConfig().yAxis,
+        max: '100',
+        type: 'linear'
+      }
+    })
+
+    expect(result.current.visSupportsAutoMaxStrategy()).toBe(false)
+  })
+
+  it('hides automatic max strategy for horizontal charts when value-axis max is explicit', () => {
+    const { result } = renderUseEditorPermissions({
+      visualizationType: 'Bar',
+      orientation: 'horizontal',
+      xAxis: {
+        ...createMockConfig().xAxis,
+        max: '100'
+      },
+      yAxis: {
+        ...createMockConfig().yAxis,
+        max: '',
+        type: 'linear'
+      }
+    })
+
+    expect(result.current.visSupportsAutoMaxStrategy()).toBe(false)
+  })
+
+  it('hides automatic max strategy for categorical value axes', () => {
+    const { result } = renderUseEditorPermissions({
+      yAxis: {
+        ...createMockConfig().yAxis,
+        max: '',
+        type: 'categorical'
+      }
+    })
+
+    expect(result.current.visSupportsAutoMaxStrategy()).toBe(false)
+  })
+
+  it('hides automatic max strategy for chart types with specialized value scales', () => {
+    const { result } = renderUseEditorPermissions({
+      visualizationType: 'Paired Bar',
+      yAxis: {
+        ...createMockConfig().yAxis,
+        max: '',
+        type: 'linear'
+      }
+    })
+
+    expect(result.current.visSupportsAutoMaxStrategy()).toBe(false)
+  })
 })

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -1,9 +1,12 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../ConfigContext'
-import { getYAxisAutoPaddingMode } from '../../helpers/getYAxisAutoPaddingMode'
+import { getYAxisFinalizationEligibility } from '../../helpers/getYAxisFinalizationEligibility'
+import { hasSpacedInlineLabel } from '../../helpers/hasSpacedInlineLabel'
+import { supportsSeriesColorAssignments } from '../../helpers/colorAssignmentHelpers'
+import { hasVisibleVizFilters } from '@cdc/core/helpers/filterVisibility'
 
 export const useEditorPermissions = () => {
-  const { config } = useContext(ConfigContext)
+  const { config, isDashboard } = useContext(ConfigContext)
   const { visualizationType, series, orientation, visualizationSubType } = config
 
   // Overall support for the chart types
@@ -79,7 +82,6 @@ export const useEditorPermissions = () => {
       'Forest Plot',
       'HeatMap',
       'Horizon Chart',
-      'Pie',
       'Radar',
       'Sankey',
       'Scatter Plot',
@@ -254,13 +256,13 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsDateCategoryAxisLine = () => {
-    const disabledCharts = ['Forest Plot', 'HeatMap', 'Spark Line', 'Warming Stripes']
+    const disabledCharts = ['Forest Plot', 'Spark Line', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryAxisTicks = () => {
-    const disabledCharts = ['Forest Plot', 'HeatMap', 'Spark Line', 'Warming Stripes']
+    const disabledCharts = ['Forest Plot', 'Spark Line', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -317,6 +319,27 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const hasExplicitValueAxisMax = () => {
+    const valueAxisMax = orientation === 'horizontal' ? config.xAxis?.max : config.yAxis?.max
+    return valueAxisMax !== undefined && valueAxisMax !== null && valueAxisMax !== ''
+  }
+
+  const visSupportsAutomaticValueDomain = () => {
+    const enabledCharts = ['Area Chart', 'Bar', 'Combo', 'Deviation Bar', 'Forecasting', 'Line', 'Scatter Plot']
+    if (!enabledCharts.includes(visualizationType)) return false
+    if (config.yAxis?.type === 'categorical') return false
+    if (hasExplicitValueAxisMax()) return false
+    return true
+  }
+
+  const visSupportsAutoMaxStrategy = () => {
+    return visSupportsAutomaticValueDomain()
+  }
+
+  const visSupportsFilterDomainBehavior = () => {
+    return visSupportsAutomaticValueDomain() && Boolean(isDashboard || hasVisibleVizFilters(config.filters))
+  }
+
   const visSupportsValueAxisGridLines = () => {
     const disabledCharts = ['Forest Plot', 'HeatMap']
     if (disabledCharts.includes(visualizationType)) return false
@@ -375,6 +398,10 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const visSupportsRightValueAxis = () => {
+    return visualizationType === 'Combo' && orientation === 'vertical'
+  }
+
   const visSupportsRankByValue = () => {
     const disabledCharts = ['HeatMap', 'Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
@@ -426,8 +453,17 @@ export const useEditorPermissions = () => {
     return false
   }
 
+  const visSupportsSeriesColorAssignments = () => supportsSeriesColorAssignments(config)
+
   const visSupportsYPadding = () => {
-    return getYAxisAutoPaddingMode(config) === 'none'
+    const { shouldUseInlineLabelHeadroom } = getYAxisFinalizationEligibility({
+      config,
+      hasSpacedInlineLabel: hasSpacedInlineLabel(config),
+      hasValidExplicitLeftMax: false,
+      isHorizontal: orientation === 'horizontal'
+    })
+
+    return !shouldUseInlineLabelHeadroom
   }
 
   const visHasSingleSeriesTooltip = () => {
@@ -486,6 +522,8 @@ export const useEditorPermissions = () => {
     visSupportsDateCategoryTickRotation,
     visSupportsDynamicSeries,
     visSupportsFilters,
+    visSupportsAutoMaxStrategy,
+    visSupportsFilterDomainBehavior,
     visSupportsFootnotes,
     visSupportsLeftValueAxis,
     visSupportsMobileChartHeight,
@@ -495,8 +533,10 @@ export const useEditorPermissions = () => {
     visSupportsReactTooltip,
     visSupportsRegions,
     visSupportsResponsiveTicks,
+    visSupportsRightValueAxis,
     visSupportsReverseColorPalette,
     visSupportsSequentialPallete,
+    visSupportsSeriesColorAssignments,
     visSupportsSmallMultiples,
     visSupportsSuperTitle,
     visSupportsTooltipLines,

package/src/components/Forecasting/Forecasting.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react'
-import { replace } from 'lodash'
+import replace from 'lodash/replace'
 // cdc
 import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'

package/src/components/HeatMap/components/HeatMap.tsx

@@ -64,7 +64,7 @@ type HeatMapLayout = {
 const AXIS_TOP_WITH_TICKS = 36
 const AXIS_TOP_WITHOUT_TICKS = 24
 const AXIS_TOP_LABEL_SPACE = 28
-const AXIS_TICK_FONT_SIZE = 12
+const AXIS_TICK_FONT_SIZE = 16
 const AXIS_TITLE_SPACE = 30
 const AXIS_TOP_TITLE_BASELINE = 18
 const X_AXIS_TITLE_LABEL_SPACE = 32
@@ -82,6 +82,7 @@ const EMPTY_VALUE_LABEL = 'No data'
 const MIN_CELL_VALUE_WIDTH = 18
 const MIN_CELL_VALUE_HEIGHT = 14
 const SIDE_Y_AXIS_TITLE_GAP = 20
+const AXIS_TITLE_FONT_WEIGHT = 'bold'
 
 const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
 
@@ -129,7 +130,7 @@ const getXAxisTickLabelProps = (xAxisPosition: HeatMapXAxisPosition, xTickRotati
 
   if (!xTickRotation) {
     return {
-      fontSize: 12,
+      fontSize: AXIS_TICK_FONT_SIZE,
       textAnchor: 'middle',
       angle: 0,
       dx: 0,
@@ -138,7 +139,7 @@ const getXAxisTickLabelProps = (xAxisPosition: HeatMapXAxisPosition, xTickRotati
   }
 
   return {
-    fontSize: 12,
+    fontSize: AXIS_TICK_FONT_SIZE,
     textAnchor: xAxisPosition === 'top' ? 'start' : 'end',
     angle: xTickRotation,
     dx: isSteepRotation || xAxisPosition === 'top' ? 0 : '-0.5em',
@@ -313,20 +314,16 @@ const getTooltipColumns = (
   xDataKey: string | undefined,
   heatMapSeries: { dataKey: string }[]
 ): TooltipColumn[] =>
-  Object.entries(config.columns || {}).reduce<TooltipColumn[]>((tooltipColumns, [_, value]) => {
-    if (!value.tooltips || !value.name) return tooltipColumns
-    if (value.name === xDataKey) return tooltipColumns
-    if (heatMapSeries.some(series => series.dataKey === value.name)) return tooltipColumns
+  Object.entries(config.columns || {}).reduce<TooltipColumn[]>((tooltipColumns, [columnKey, value]) => {
+    const columnName = value.name || columnKey
+    if (!value.tooltips || !columnName) return tooltipColumns
+    if (columnName === xDataKey) return tooltipColumns
+    if (heatMapSeries.some(series => series.dataKey === columnName)) return tooltipColumns
 
     tooltipColumns.push({
-      label: value.label || value.name,
-      name: value.name,
-      options: {
-        addColPrefix: value.prefix,
-        addColSuffix: value.suffix,
-        addColRoundTo: value.roundToPlace,
-        addColCommas: value.commas
-      }
+      label: value.label || columnName,
+      name: columnName,
+      options: getSeriesColumnFormattingParams(value) || {}
     })
 
     return tooltipColumns
@@ -601,6 +598,7 @@ const HeatMap: React.FC<HeatMapProps> = ({ parentWidth, parentHeight }) => {
         x={xOffset + gridWidth / 2}
         y={xAxisPosition === 'top' ? -xAxisTitleDistance : gridHeight + xAxisTitleDistance}
         textAnchor='middle'
+        fontWeight={AXIS_TITLE_FONT_WEIGHT}
       >
         {xAxisLabel}
       </text>
@@ -611,7 +609,13 @@ const HeatMap: React.FC<HeatMapProps> = ({ parentWidth, parentHeight }) => {
 
     if (showTopYAxisTitle) {
       return (
-        <text className='cdc-heatmap__axis-title' x={rowLabelTitleX} y={topYAxisTitleY} textAnchor='start'>
+        <text
+          className='cdc-heatmap__axis-title'
+          x={rowLabelTitleX}
+          y={topYAxisTitleY}
+          textAnchor='start'
+          fontWeight={AXIS_TITLE_FONT_WEIGHT}
+        >
           {yAxisLabel}
         </text>
       )
@@ -622,6 +626,7 @@ const HeatMap: React.FC<HeatMapProps> = ({ parentWidth, parentHeight }) => {
         className='cdc-heatmap__axis-title'
         transform={`translate(${sideYAxisTitleX}, ${yOffset + gridHeight / 2}) rotate(-90)`}
         textAnchor='middle'
+        fontWeight={AXIS_TITLE_FONT_WEIGHT}
       >
         {yAxisLabel}
       </text>
@@ -737,7 +742,7 @@ const HeatMap: React.FC<HeatMapProps> = ({ parentWidth, parentHeight }) => {
             hideAxisLine={Boolean(config.yAxis?.hideAxis)}
             hideTicks={Boolean(config.yAxis?.hideTicks)}
             tickLabelProps={() => ({
-              fontSize: 12,
+              fontSize: AXIS_TICK_FONT_SIZE,
               textAnchor: 'end',
               angle: yTickRotation,
               dx: yTickRotation ? '-0.25em' : 0,

package/src/components/HeatMap/components/HeatMapGradientLegend.tsx

@@ -62,6 +62,10 @@ const HeatMapGradientLegend = () => {
   const ranges = getHeatMapDataGroupRanges(config, minValue, maxValue, formatNumber)
   const displayRanges = config.legend?.reverseLabelOrder ? [...ranges].reverse() : ranges
   const displayPalette = config.legend?.reverseLabelOrder ? [...palette].reverse() : palette
+  const displayLegendItems = displayRanges.map((range, index) => ({
+    color: displayPalette[index % displayPalette.length],
+    range
+  }))
 
   if (config.legend?.hide) return null
 
@@ -72,34 +76,44 @@ const HeatMapGradientLegend = () => {
 
       {isGradientLegend ? (
         <div className='cdc-heatmap__legend-scale'>
-          <svg className='cdc-heatmap__legend-svg' height='50' width='100%'>
+          <svg className='cdc-heatmap__legend-svg' height='25' width='100%'>
             <rect x='0' y='0' width='100%' height='25' fill='#d3d3d3' />
-            {displayPalette.map((color, index) => (
+            {displayLegendItems.map(({ color, range }, index) => (
               <rect
-                key={`${color}-${index}`}
-                x={`${(index / displayPalette.length) * 100}%`}
+                key={`heatmap-gradient-block-${range.min}-${range.max}-${color}`}
+                x={`${(index / displayLegendItems.length) * 100}%`}
                 y='1'
-                width={`${100 / displayPalette.length}%`}
+                width={`${100 / displayLegendItems.length}%`}
                 height='23'
                 fill={color}
               />
             ))}
-
-            <text x='0' y='40' fontSize='14' textAnchor='start' fill='#333'>
-              {displayRanges[0]?.label.split('\u2013')[0]}
-            </text>
-            <text x='100%' y='40' fontSize='14' textAnchor='end' fill='#333'>
-              {displayRanges[displayRanges.length - 1]?.label.split('\u2013').pop()}
-            </text>
           </svg>
+          <div
+            className='cdc-heatmap__legend-range-labels'
+            style={{ gridTemplateColumns: `repeat(${Math.max(displayLegendItems.length, 1)}, minmax(0, 1fr))` }}
+          >
+            {displayLegendItems.map(({ range }) => (
+              <span
+                className='cdc-heatmap__legend-range-label'
+                key={`heatmap-gradient-label-${range.min}-${range.max}`}
+              >
+                {range.label}
+              </span>
+            ))}
+          </div>
 
           {valueLabel && <div className='cdc-heatmap__legend-series-label'>{valueLabel}</div>}
         </div>
       ) : (
         <div className={innerClasses.join(' ')}>
-          {displayRanges.map((range, index) => (
-            <LegendItem className='legend-item not-clickable' key={`heatmap-legend-range-${index}`} tabIndex={-1}>
-              <LegendShape shape={shape} fill={displayPalette[index % displayPalette.length]} />
+          {displayLegendItems.map(({ color, range }) => (
+            <LegendItem
+              className='legend-item not-clickable'
+              key={`heatmap-legend-range-${range.min}-${range.max}`}
+              tabIndex={-1}
+            >
+              <LegendShape shape={shape} fill={color} />
               <LegendLabel align='left' className='m-0'>
                 {range.label}
               </LegendLabel>

package/src/components/HeatMap/heatmap.css

@@ -3,7 +3,7 @@
   --cove-heatmap-cell-stroke-color: rgba(255, 255, 255, 0.7);
   --cove-heatmap-cell-stroke-width: 0.1px;
   --cove-heatmap-axis-title-color: var(--darkGray, #333);
-  --cove-heatmap-axis-title-font-size: 14px;
+  --cove-heatmap-axis-title-font-size: 18px;
 
   width: 100%;
 }
@@ -63,6 +63,20 @@
   overflow: visible;
 }
 
+.cove-visualization .cdc-heatmap__legend .cdc-heatmap__legend-range-labels {
+  color: #333;
+  display: grid;
+  font-size: 0.875rem;
+  line-height: 1.2;
+  margin-top: 0.35rem;
+}
+
+.cove-visualization .cdc-heatmap__legend .cdc-heatmap__legend-range-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  text-align: center;
+}
+
 .cove-visualization .cdc-heatmap__legend .cdc-heatmap__legend-series-label {
   color: #333;
   font-weight: 600;