@cdc/chart 4.26.4 → 4.26.5

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

@@ -13,12 +13,15 @@ import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
+import { resolveAltTextDescription } from '@cdc/core/helpers/resolveAltTextDescription'
 
 // contexts
 import { useEditorPermissions } from '../../useEditorPermissions.js'
 import { useEditorPanelContext } from '../../EditorPanelContext.js'
 import ConfigContext from '../../../../ConfigContext.js'
 import { PanelProps } from '../PanelProps'
+import { getVisualizationTypeConfigUpdate } from '../../helpers/getVisualizationTypeConfigUpdate'
+import { type VisualizationType } from '../../../../types/ChartConfig'
 
 const PanelGeneral: FC<PanelProps> = props => {
   const { config, updateConfig } = useContext(ConfigContext)
@@ -79,22 +82,12 @@ const PanelGeneral: FC<PanelProps> = props => {
             updateField={updateField}
             options={enabledChartTypes}
             onChange={event => {
-              const newVisType = event.target.value
+              const newVisType = event.target.value as VisualizationType
 
               updateField(null, null, 'visualizationType', newVisType)
 
-              if (newVisType === 'Forecasting' && config.xAxis.type === 'categorical') {
-                updateConfig({
-                  ...config,
-                  visualizationType: newVisType,
-                  xAxis: {
-                    ...config.xAxis,
-                    type: 'date',
-                    dateParseFormat: config.xAxis.dateParseFormat || '%Y-%m-%d',
-                    dateDisplayFormat: config.xAxis.dateDisplayFormat || '%Y-%m-%d'
-                  }
-                })
-              }
+              const updatedConfig = getVisualizationTypeConfigUpdate(config, newVisType)
+              if (updatedConfig) updateConfig(updatedConfig)
             }}
           />
         )}
@@ -617,6 +610,105 @@ const PanelGeneral: FC<PanelProps> = props => {
             </Tooltip>
           }
         />
+
+        {/* Accessible Alt Text Description */}
+        {(() => {
+          const metadataKeys = Object.keys(config.dataMetadata || {})
+          const hasMetadata = metadataKeys.length > 0
+          const descType = config.altText?.type || ''
+          const resolvedDescription = resolveAltTextDescription(config.altText, config.dataMetadata)
+          return (
+            <>
+              <Select
+                value={descType}
+                fieldName='altTextType'
+                label='Alt Text Description'
+                options={[
+                  { value: '', label: 'None' },
+                  { value: 'static', label: 'Static (manual text)' },
+                  { value: 'metadata', label: 'Data File Metadata' }
+                ]}
+                updateField={(_section, _subsection, _fieldName, value) => {
+                  if (value === '') {
+                    updateField(null, null, 'altText', undefined)
+                  } else {
+                    updateField(null, null, 'altText', { type: value as 'static' | 'metadata' })
+                  }
+                }}
+                tooltip={
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p>
+                        Add a longer description for screen readers. The chart title is always auto-generated. Use
+                        "Static" for manually written text, or "Data File Metadata" to pull it from a key in your data
+                        file.
+                      </p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                }
+              />
+              {descType === 'static' && (
+                <TextField
+                  value={config.altText?.value || ''}
+                  fieldName='altTextValue'
+                  type='textarea'
+                  label='Description Text'
+                  placeholder='Longer interpretive description of chart insights...'
+                  updateField={(_section, _subsection, _fieldName, value) => {
+                    updateField(null, null, 'altText', { ...config.altText, value })
+                  }}
+                />
+              )}
+              {descType === 'metadata' && (
+                <>
+                  {hasMetadata ? (
+                    <Select
+                      value={config.altText?.metadataKey || ''}
+                      fieldName='altTextMetadataKey'
+                      label='Description Metadata Field'
+                      options={[
+                        { value: '', label: 'Select Metadata Field...' },
+                        ...metadataKeys.map(key => ({
+                          value: key,
+                          label: `${key}: ${config.dataMetadata[key]}`
+                        }))
+                      ]}
+                      updateField={(_section, _subsection, _fieldName, value) => {
+                        updateField(null, null, 'altText', { ...config.altText, metadataKey: value })
+                      }}
+                    />
+                  ) : (
+                    <span className='subtext'>
+                      No metadata fields are available. Your data file must be a JSON object with a <code>data</code>{' '}
+                      array and sibling key-value pairs, for example:{' '}
+                      <code>{`{ "altDescription": "...", "data": [...] }`}</code>
+                    </span>
+                  )}
+                </>
+              )}
+              {resolvedDescription && (
+                <div
+                  style={{
+                    marginTop: '1em',
+                    padding: '0.75em',
+                    background: '#f5f5f5',
+                    borderRadius: '4px',
+                    fontSize: '0.8em',
+                    textTransform: 'none'
+                  }}
+                >
+                  <strong style={{ display: 'block', marginBottom: '0.25em' }}>Preview:</strong>
+                  <p data-testid='alt-text-desc-preview' style={{ margin: 0, fontStyle: 'italic' }}>
+                    {resolvedDescription}
+                  </p>
+                </div>
+              )}
+            </>
+          )
+        })()}
       </AccordionItemPanel>
     </AccordionItem>
   )

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

@@ -22,6 +22,7 @@ import { sanitizeToSvgId } from '@cdc/core/helpers/cove/string'
 
 const PanelPatternSettings: FC<PanelProps> = props => {
   const { config, updateConfig, transformedData } = useContext<ChartContext>(ConfigContext)
+  if (config.visualizationType === 'HeatMap') return null
 
   type LegendPattern = {
     label?: string

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

@@ -14,10 +14,13 @@ import { TextField, Select } from '@cdc/core/components/EditorPanel/Inputs'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import Button from '@cdc/core/components/elements/Button'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { type ChartContext } from '../../../../types/ChartContext.js'
 import { type PanelProps } from '../PanelProps.js'
 import ConfigContext from '../../../../ConfigContext.js'
 
+const DEFAULT_REGION_BACKGROUND = getComputedStyle(document.documentElement).getPropertyValue('--cool-gray-50').trim()
+
 const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; updateConfig: Function }) => {
   let regionUpdate = (fieldName, value, i) => {
     let regions = []
@@ -116,12 +119,14 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
                           value={color}
                           label='Text Color'
                           fieldName='color'
+                          placeholder={APP_FONT_COLOR}
                           updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
                         />
                         <TextField
                           value={background}
                           label='Background'
                           fieldName='background'
+                          placeholder={DEFAULT_REGION_BACKGROUND}
                           updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
                         />
                       </div>

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

@@ -660,7 +660,7 @@ const SeriesButtonRemove = props => {
 
   return (
     config.series &&
-    config.series.length > 1 && (
+    (config.series.length > 1 || config.visualizationType === 'HeatMap') && (
       <Button variant='danger' size='sm' className='grouped-list__remove' onClick={e => handleRemoveSeries(e, series)}>
         Remove
       </Button>
@@ -710,7 +710,7 @@ const SeriesItem = props => {
                   }
                 >
                   <Icon display='move' size={15} style={{ cursor: 'default' }} />
-                  {series.dataKey}
+                  {config.visualizationType === 'HeatMap' ? series.name || series.dataKey : series.dataKey}
                 </AccordionItemButton>
               </AccordionItemHeading>
               {chartsWithOptions.includes(config.visualizationType) && (

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,31 +272,41 @@ 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
   }
 
   const visSupportsRegions = () => {
-    const disabledCharts = ['Forest Plot', 'Pie', 'Paired Bar', 'Radar', 'Spark Line', 'Sankey', 'Warming Stripes']
+    const disabledCharts = [
+      'Forest Plot',
+      'Horizon Chart',
+      'HeatMap',
+      'Pie',
+      'Paired Bar',
+      'Radar',
+      'Spark Line',
+      'Sankey',
+      'Warming Stripes'
+    ]
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   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
   }
@@ -298,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
   }
@@ -319,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
   }
@@ -332,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
   }
@@ -344,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
   }
@@ -356,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
@@ -407,7 +427,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsYPadding = () => {
-    return !config.yAxis.inlineLabel || !config.yAxis.inlineLabel?.includes(' ')
+    return getYAxisAutoPaddingMode(config) === 'none'
   }
 
   const visHasSingleSeriesTooltip = () => {