@cdc/chart 4.26.3 → 4.26.5

package/src/components/EditorPanel/components/Panels/Panel.Sankey.tsx

@@ -115,16 +115,16 @@ const SankeySettings: React.FC<PanelProps> = props => {
             </div>
           ))}
         {data?.storyNodeText?.length < 3 && (
-          <button
+          <Button
             type='button'
-            className='btn btn-primary full-width'
+            variant='editor-primary'
             onClick={e => {
               e.preventDefault()
               addStoryNode()
             }}
           >
             Add StoryNode
-          </button>
+          </Button>
         )}
         {config.data?.[0]?.tooltips?.length > 0 && (
           <CheckBox

package/src/components/EditorPanel/components/Panels/Panel.Series.tsx

@@ -9,6 +9,7 @@ import { updatePaletteNames } from '@cdc/core/helpers/updatePaletteNames'
 import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
 import Icon from '@cdc/core/components/ui/Icon'
 import { CheckBox, Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import Button from '@cdc/core/components/elements/Button'
 import { buildForecastPaletteOptions } from '../../../../helpers/buildForecastPaletteOptions'
 import { getSeriesColumnConfig, upsertSeriesColumnConfig } from '../../../../helpers/seriesColumnSettings'
 
@@ -20,7 +21,7 @@ import {
   AccordionItemPanel,
   AccordionItemButton
 } from 'react-accessible-accordion'
-import { Draggable, DragDropContext, Droppable } from '@hello-pangea/dnd'
+import { Draggable } from '@hello-pangea/dnd'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 
 const SeriesContext = React.createContext({})
@@ -375,8 +376,8 @@ const SeriesDropdownConfidenceInterval = props => {
             )
           })}
         </Accordion>
-        <button
-          className='btn btn-primary full-width'
+        <Button
+          variant='editor-primary'
           onClick={e => {
             e.preventDefault()
             let copiedIndex = null
@@ -397,7 +398,7 @@ const SeriesDropdownConfidenceInterval = props => {
           }}
         >
           Add Confidence Interval Group
-        </button>
+        </Button>
       </fieldset>
     </div>
   )
@@ -652,17 +653,17 @@ const SeriesButtonRemove = props => {
     }
   }
 
-  const handleRemoveSeries = (e, series, index) => {
+  const handleRemoveSeries = (e, series) => {
     e.preventDefault()
     removeSeries(series.dataKey)
   }
 
   return (
     config.series &&
-    config.series.length > 1 && (
-      <button className='series-list__remove' onClick={e => handleRemoveSeries(e, series, index)}>
+    (config.series.length > 1 || config.visualizationType === 'HeatMap') && (
+      <Button variant='danger' size='sm' className='grouped-list__remove' onClick={e => handleRemoveSeries(e, series)}>
         Remove
-      </button>
+      </Button>
     )
   )
 }
@@ -709,12 +710,14 @@ const SeriesItem = props => {
                   }
                 >
                   <Icon display='move' size={15} style={{ cursor: 'default' }} />
-                  {series.dataKey}
-                  <Series.Button.Remove series={series} index={i} />
+                  {config.visualizationType === 'HeatMap' ? series.name || series.dataKey : series.dataKey}
                 </AccordionItemButton>
               </AccordionItemHeading>
               {chartsWithOptions.includes(config.visualizationType) && (
                 <AccordionItemPanel>
+                  <div className='series-item__panel-actions'>
+                    <Series.Button.Remove series={series} index={i} />
+                  </div>
                   <Series.Input.Name series={series} index={i} />
                   <Series.Input.ColumnSettings series={series} index={i} />
                   {showDynamicCategory && (
@@ -773,22 +776,6 @@ const SeriesItem = props => {
   )
 }
 
-const SeriesList = props => {
-  const { series, getItemStyle, sortableItemStyles, chartsWithOptions } = props
-  return series.map((series, i) => {
-    return (
-      <SeriesItem
-        getItemStyle={getItemStyle}
-        sortableItemStyles={sortableItemStyles}
-        chartsWithOptions={chartsWithOptions}
-        series={series}
-        index={i}
-        key={`series-list-${i}`}
-      />
-    )
-  })
-}
-
 const Series = {
   Wrapper: SeriesWrapper,
   Dropdown: {
@@ -811,8 +798,7 @@ const Series = {
   Button: {
     Remove: SeriesButtonRemove
   },
-  Item: SeriesItem,
-  List: SeriesList
+  Item: SeriesItem
 }
 
 export default Series

package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx

@@ -306,7 +306,7 @@ const PanelVisual: FC<PanelProps> = props => {
             />
           </>
         )}
-        {(visSupportsNonSequentialPallete() || visSupportsNonSequentialPallete()) && (
+        {(visSupportsSequentialPallete() || visSupportsNonSequentialPallete()) && (
           <>
             <label>
               <span className='edit-label'>Chart Color Palette</span>

package/src/components/EditorPanel/helpers/getVisualizationTypeConfigUpdate.ts

@@ -0,0 +1,57 @@
+import { type ChartConfig, type VisualizationType } from '../../../types/ChartConfig'
+import { HEATMAP_CONFIG_DEFAULTS } from '../../HeatMap/heatmap.constants'
+
+export const getVisualizationTypeConfigUpdate = (
+  config: ChartConfig,
+  visualizationType: VisualizationType
+): ChartConfig | undefined => {
+  if (visualizationType === 'Forecasting' && config.xAxis.type === 'categorical') {
+    return {
+      ...config,
+      visualizationType,
+      xAxis: {
+        ...config.xAxis,
+        type: 'date',
+        dateParseFormat: config.xAxis.dateParseFormat || '%Y-%m-%d',
+        dateDisplayFormat: config.xAxis.dateDisplayFormat || '%Y-%m-%d'
+      }
+    }
+  }
+
+  if (visualizationType === 'HeatMap') {
+    return {
+      ...config,
+      visualizationType,
+      series: [],
+      yAxis: {
+        ...config.yAxis,
+        type: 'categorical',
+        titlePlacement: 'side'
+      },
+      heatmap: {
+        cellPadding: config.heatmap?.cellPadding ?? HEATMAP_CONFIG_DEFAULTS.cellPadding,
+        rowLabelGap: config.heatmap?.rowLabelGap ?? HEATMAP_CONFIG_DEFAULTS.rowLabelGap,
+        columnLabelGap: config.heatmap?.columnLabelGap ?? HEATMAP_CONFIG_DEFAULTS.columnLabelGap,
+        colorBucketCount: config.heatmap?.colorBucketCount ?? HEATMAP_CONFIG_DEFAULTS.colorBucketCount,
+        xAxisPosition: config.heatmap?.xAxisPosition ?? HEATMAP_CONFIG_DEFAULTS.xAxisPosition,
+        showCellValues: config.heatmap?.showCellValues ?? HEATMAP_CONFIG_DEFAULTS.showCellValues
+      },
+      legend: {
+        ...config.legend,
+        position: 'top',
+        style: 'gradient',
+        subStyle: 'smooth'
+      },
+      general: {
+        ...config.general,
+        palette: config.general?.palette || {
+          isReversed: false,
+          version: '2.0',
+          name: 'sequential_blue'
+        }
+      }
+    }
+  }
+
+  return undefined
+}

package/src/components/EditorPanel/helpers/tests/getVisualizationTypeConfigUpdate.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest'
+import { type ChartConfig } from '../../../../types/ChartConfig'
+import { HEATMAP_CONFIG_DEFAULTS } from '../../../HeatMap/heatmap.constants'
+import { getVisualizationTypeConfigUpdate } from '../getVisualizationTypeConfigUpdate'
+
+const buildConfig = (overrides: Partial<ChartConfig> = {}) =>
+  ({
+    visualizationType: 'Bar',
+    xAxis: {
+      type: 'categorical'
+    },
+    yAxis: {
+      type: 'linear'
+    },
+    series: [{ dataKey: 'Value' }],
+    legend: {
+      position: 'bottom',
+      style: 'circles',
+      subStyle: 'linear blocks'
+    },
+    general: {},
+    ...overrides
+  } as ChartConfig)
+
+describe('getVisualizationTypeConfigUpdate', () => {
+  it('does not build a special config update for chart types without transition rules', () => {
+    expect(getVisualizationTypeConfigUpdate(buildConfig(), 'Line')).toBeUndefined()
+  })
+
+  it('normalizes categorical x-axis settings when switching to Forecasting', () => {
+    const updatedConfig = getVisualizationTypeConfigUpdate(buildConfig(), 'Forecasting')
+
+    expect(updatedConfig?.visualizationType).toBe('Forecasting')
+    expect(updatedConfig?.xAxis.type).toBe('date')
+    expect(updatedConfig?.xAxis.dateParseFormat).toBe('%Y-%m-%d')
+    expect(updatedConfig?.xAxis.dateDisplayFormat).toBe('%Y-%m-%d')
+  })
+
+  it('applies HeatMap defaults and required editor config when switching to HeatMap', () => {
+    const updatedConfig = getVisualizationTypeConfigUpdate(buildConfig(), 'HeatMap')
+
+    expect(updatedConfig?.visualizationType).toBe('HeatMap')
+    expect(updatedConfig?.series).toEqual([])
+    expect(updatedConfig?.yAxis.type).toBe('categorical')
+    expect(updatedConfig?.yAxis.titlePlacement).toBe('side')
+    expect(updatedConfig?.heatmap).toEqual(HEATMAP_CONFIG_DEFAULTS)
+    expect(updatedConfig?.legend.position).toBe('top')
+    expect(updatedConfig?.legend.style).toBe('gradient')
+    expect(updatedConfig?.legend.subStyle).toBe('smooth')
+    expect(updatedConfig?.general.palette).toEqual({
+      isReversed: false,
+      version: '2.0',
+      name: 'sequential_blue'
+    })
+  })
+})

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

@@ -0,0 +1,70 @@
+import React from 'react'
+import { renderHook } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import ConfigContext from '../../ConfigContext'
+import { useEditorPermissions } from './useEditorPermissions'
+import { createMockChartContext, createMockConfig } from '../LinearChart/tests/mockConfigContext'
+import { ChartConfig } from '../../types/ChartConfig'
+
+const renderUseEditorPermissions = (configOverrides: Partial<ChartConfig>) => {
+  const config = createMockConfig(configOverrides)
+  const context = createMockChartContext(config)
+  const wrapper = ({ children }: React.PropsWithChildren) => (
+    <ConfigContext.Provider value={context}>{children}</ConfigContext.Provider>
+  )
+
+  return renderHook(() => useEditorPermissions(), { wrapper })
+}
+
+describe('useEditorPermissions', () => {
+  it('shows manual y-axis padding controls when auto-padding mode is none', () => {
+    const { result } = renderUseEditorPermissions({
+      yAxis: {
+        ...createMockConfig().yAxis,
+        titlePlacement: 'side',
+        inlineLabel: 'Rate'
+      }
+    })
+
+    expect(result.current.visSupportsYPadding()).toBe(true)
+  })
+
+  it('hides manual y-axis padding controls for inline-label auto-padding', () => {
+    const { result } = renderUseEditorPermissions({
+      yAxis: {
+        ...createMockConfig().yAxis,
+        titlePlacement: 'side',
+        inlineLabel: 'per 100k'
+      }
+    })
+
+    expect(result.current.visSupportsYPadding()).toBe(false)
+  })
+
+  it('hides manual y-axis padding controls for top-title auto-padding', () => {
+    const { result } = renderUseEditorPermissions({
+      yAxis: {
+        ...createMockConfig().yAxis,
+        titlePlacement: 'top',
+        label: 'Y-Axis',
+        inlineLabel: ''
+      }
+    })
+
+    expect(result.current.visSupportsYPadding()).toBe(false)
+  })
+
+  it('shows manual y-axis padding controls when a top y-axis title is hidden', () => {
+    const { result } = renderUseEditorPermissions({
+      hideYAxisLabel: true,
+      yAxis: {
+        ...createMockConfig().yAxis,
+        titlePlacement: 'top',
+        label: 'Y-Axis',
+        inlineLabel: ''
+      }
+    })
+
+    expect(result.current.visSupportsYPadding()).toBe(true)
+  })
+})

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../ConfigContext'
+import { getYAxisAutoPaddingMode } from '../../helpers/getYAxisAutoPaddingMode'
 
 export const useEditorPermissions = () => {
   const { config } = useContext(ConfigContext)
@@ -16,6 +17,7 @@ export const useEditorPermissions = () => {
     'Deviation Bar',
     'Forecasting',
     // 'Forest Plot',
+    'HeatMap',
     'Horizon Chart',
     'Line',
     'Paired Bar',
@@ -58,7 +60,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsClickingLegend = () => {
-    const disabledCharts = ['Horizon Chart']
+    const disabledCharts = ['HeatMap', 'Horizon Chart']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -75,6 +77,7 @@ export const useEditorPermissions = () => {
       'Box Plot',
       'Bump Chart',
       'Forest Plot',
+      'HeatMap',
       'Horizon Chart',
       'Pie',
       'Radar',
@@ -93,6 +96,7 @@ export const useEditorPermissions = () => {
       'Box Plot',
       'Bump Chart',
       'Forest Plot',
+      'HeatMap',
       'Radar',
       'Sankey',
       'Scatter Plot',
@@ -109,6 +113,8 @@ export const useEditorPermissions = () => {
         return true
       case 'Forest Plot':
         return false
+      case 'HeatMap':
+        return true
       case 'Spark Line':
         return false
       case 'Sankey':
@@ -197,9 +203,13 @@ export const useEditorPermissions = () => {
     }
   }
 
-  const visHasSelectableLegendValues = !['Box Plot', 'Forest Plot', 'Spark Line', 'Warming Stripes'].includes(
-    visualizationType
-  )
+  const visHasSelectableLegendValues = ![
+    'Box Plot',
+    'Forest Plot',
+    'HeatMap',
+    'Spark Line',
+    'Warming Stripes'
+  ].includes(visualizationType)
   const visHasLegendAxisAlign = () => {
     return visualizationType === 'Bar' && visualizationSubType === 'stacked' && config.legend.behavior === 'isolate'
   }
@@ -208,7 +218,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsTooltipOpacity = () => {
-    const disabledCharts = ['Spark Line', 'Sankey', 'Warming Stripes']
+    const disabledCharts = ['HeatMap', 'Spark Line', 'Sankey', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -226,7 +236,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsNonSequentialPallete = () => {
-    const disabledCharts = ['Paired Bar', 'Deviation Bar', 'Forest Plot', 'Forecasting', 'Sankey']
+    const disabledCharts = ['HeatMap', 'Paired Bar', 'Deviation Bar', 'Forest Plot', 'Forecasting', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -238,19 +248,19 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsDateCategoryAxisLabel = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line', 'Bump Chart', 'Warming Stripes']
+    const disabledCharts = ['Forest Plot', 'HeatMap', 'Spark Line', 'Bump Chart', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryAxisLine = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line', 'Warming Stripes']
+    const disabledCharts = ['Forest Plot', 'HeatMap', 'Spark Line', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryAxisTicks = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line', 'Warming Stripes']
+    const disabledCharts = ['Forest Plot', 'HeatMap', 'Spark Line', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -262,13 +272,13 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsDateCategoryNumTicks = () => {
-    const disabledCharts = ['Spark Line']
+    const disabledCharts = ['HeatMap', 'Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsResponsiveTicks = () => {
-    const disabledCharts = ['Spark Line']
+    const disabledCharts = ['HeatMap', 'Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -277,6 +287,7 @@ export const useEditorPermissions = () => {
     const disabledCharts = [
       'Forest Plot',
       'Horizon Chart',
+      'HeatMap',
       'Pie',
       'Paired Bar',
       'Radar',
@@ -289,13 +300,13 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsValueAxisMax = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'HeatMap']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsValueAxisMin = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'HeatMap']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -307,14 +318,14 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsValueAxisGridLines = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'HeatMap']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   // implement later
   const visSupportsValueAxisTicks = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'HeatMap']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -328,7 +339,7 @@ export const useEditorPermissions = () => {
 
   // implement later
   const visSupportsValueAxisLabels = () => {
-    const disabledCharts = ['Forest Plot', 'Bump Chart']
+    const disabledCharts = ['Forest Plot', 'HeatMap', 'Bump Chart']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -341,7 +352,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsBarThickness = () => {
-    const disabledCharts = ['Forest Plot', 'Warming Stripes']
+    const disabledCharts = ['Forest Plot', 'HeatMap', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -353,7 +364,7 @@ export const useEditorPermissions = () => {
   }
   const visSupportsMobileChartHeight = () => {
     // TODO: this is a soft release. Support should eventually match visSupportsChartHeight
-    const enabledCharts = ['Bar', 'Line', 'Combo', 'Area Chart', 'Radar']
+    const enabledCharts = ['Bar', 'Line', 'Combo', 'Area Chart', 'HeatMap', 'Radar']
     if (enabledCharts.includes(visualizationType)) return true
     return false
   }
@@ -365,13 +376,13 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsRankByValue = () => {
-    const disabledCharts = ['Spark Line']
+    const disabledCharts = ['HeatMap', 'Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryHeight = () => {
-    const disabledCharts = ['Spark Line', 'Sankey', 'Bump Chart']
+    const disabledCharts = ['HeatMap', 'Spark Line', 'Sankey', 'Bump Chart']
     if (disabledCharts.includes(visualizationType)) return false
     if (config.orientation !== 'horizontal') return false
     if (config.orientation === 'horizontal' && visualizationType === 'Bar' && !config.isLollipopChart) return false
@@ -416,7 +427,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsYPadding = () => {
-    return !config.yAxis.inlineLabel || !config.yAxis.inlineLabel?.includes(' ')
+    return getYAxisAutoPaddingMode(config) === 'none'
   }
 
   const visHasSingleSeriesTooltip = () => {

package/src/components/Forecasting/Forecasting.tsx

@@ -110,7 +110,7 @@ const prepareForecastData = (
   return segments.length > 0 ? segments : [sortedData]
 }
 
-const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, handleTooltipMouseOff }) => {
+const Forecasting = ({ xScale, yScale, height, width, yAxisWidth, handleTooltipMouseOver, handleTooltipMouseOff }) => {
   const { transformedData: data, rawData, config, seriesHighlight, parseDate } = useContext(ConfigContext)
   const { xAxis, yAxis, legend, runtime } = config
   const DEBUG = false
@@ -143,7 +143,7 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
   return (
     data && (
       <ErrorBoundary component='ForecastingChart'>
-        <Group className='forecasting-items' key='forecasting-items-wrapper' left={Number(yAxis.size)}>
+        <Group className='forecasting-items' key='forecasting-items-wrapper' left={yAxisWidth}>
           {runtime.forecastingSeriesKeys?.map((group, index) => {
             if (!group || !group.stages) return false
             return group.stages.map((stage, stageIndex) => {