@cdc/chart 4.26.4 → 4.26.6

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

@@ -0,0 +1,315 @@
+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>,
+  contextOverrides: Partial<ReturnType<typeof createMockChartContext>> = {}
+) => {
+  const config = createMockConfig(configOverrides)
+  const context = createMockChartContext(config, contextOverrides)
+  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 there is no spaced inline label', () => {
+    const { result } = renderUseEditorPermissions({
+      yAxis: {
+        ...createMockConfig().yAxis,
+        titlePlacement: 'side',
+        inlineLabel: 'Rate'
+      }
+    })
+
+    expect(result.current.visSupportsYPadding()).toBe(true)
+  })
+
+  it('hides manual y-axis padding controls for spaced inline labels when renderer headroom applies', () => {
+    const { result } = renderUseEditorPermissions({
+      yAxis: {
+        ...createMockConfig().yAxis,
+        titlePlacement: 'side',
+        inlineLabel: 'per 100k'
+      }
+    })
+
+    expect(result.current.visSupportsYPadding()).toBe(false)
+  })
+
+  it('shows manual y-axis padding controls for horizontal charts with spaced inline labels', () => {
+    const { result } = renderUseEditorPermissions({
+      orientation: 'horizontal',
+      yAxis: {
+        ...createMockConfig().yAxis,
+        titlePlacement: 'side',
+        inlineLabel: 'per 100k'
+      }
+    })
+
+    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 for top y-axis titles', () => {
+    const { result } = renderUseEditorPermissions({
+      yAxis: {
+        ...createMockConfig().yAxis,
+        titlePlacement: 'top',
+        label: 'Y-Axis',
+        inlineLabel: ''
+      }
+    })
+
+    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 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,8 +1,12 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../ConfigContext'
+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
@@ -16,6 +20,7 @@ export const useEditorPermissions = () => {
     'Deviation Bar',
     'Forecasting',
     // 'Forest Plot',
+    'HeatMap',
     'Horizon Chart',
     'Line',
     'Paired Bar',
@@ -58,7 +63,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 +80,7 @@ export const useEditorPermissions = () => {
       'Box Plot',
       'Bump Chart',
       'Forest Plot',
+      'HeatMap',
       'Horizon Chart',
       'Pie',
       'Radar',
@@ -93,6 +99,7 @@ export const useEditorPermissions = () => {
       'Box Plot',
       'Bump Chart',
       'Forest Plot',
+      'HeatMap',
       'Radar',
       'Sankey',
       'Scatter Plot',
@@ -109,6 +116,8 @@ export const useEditorPermissions = () => {
         return true
       case 'Forest Plot':
         return false
+      case 'HeatMap':
+        return true
       case 'Spark Line':
         return false
       case 'Sankey':
@@ -197,9 +206,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 +221,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 +239,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,7 +251,7 @@ 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
   }
@@ -262,31 +275,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
   }
@@ -297,15 +320,36 @@ 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']
+    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 +363,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 +376,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 +388,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 +400,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
@@ -406,8 +450,17 @@ export const useEditorPermissions = () => {
     return false
   }
 
+  const visSupportsSeriesColorAssignments = () => supportsSeriesColorAssignments(config)
+
   const visSupportsYPadding = () => {
-    return !config.yAxis.inlineLabel || !config.yAxis.inlineLabel?.includes(' ')
+    const { shouldUseInlineLabelHeadroom } = getYAxisFinalizationEligibility({
+      config,
+      hasSpacedInlineLabel: hasSpacedInlineLabel(config),
+      hasValidExplicitLeftMax: false,
+      isHorizontal: orientation === 'horizontal'
+    })
+
+    return !shouldUseInlineLabelHeadroom
   }
 
   const visHasSingleSeriesTooltip = () => {
@@ -466,6 +519,8 @@ export const useEditorPermissions = () => {
     visSupportsDateCategoryTickRotation,
     visSupportsDynamicSeries,
     visSupportsFilters,
+    visSupportsAutoMaxStrategy,
+    visSupportsFilterDomainBehavior,
     visSupportsFootnotes,
     visSupportsLeftValueAxis,
     visSupportsMobileChartHeight,
@@ -477,6 +532,7 @@ export const useEditorPermissions = () => {
     visSupportsResponsiveTicks,
     visSupportsReverseColorPalette,
     visSupportsSequentialPallete,
+    visSupportsSeriesColorAssignments,
     visSupportsSmallMultiples,
     visSupportsSuperTitle,
     visSupportsTooltipLines,