@cdc/chart 4.26.6 → 4.26.10

package/src/components/EditorPanel/components/Panels/RacingControls.tsx

@@ -0,0 +1,185 @@
+import { type ChangeEvent, type FocusEvent, type InputHTMLAttributes, useContext, useState } from 'react'
+import { isCoveDeveloperMode } from '@cdc/core/helpers/queryStringUtils'
+import { Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import ConfigContext from '../../../../ConfigContext'
+import { clampBarRaceMaxBars, DEFAULT_BAR_RACE_MAX_BARS, getBarRaceEligibility } from '../../../BarChartRace/helpers'
+import { getLineRaceEligibility } from '../../../LineChartRace/helpers'
+import { clampRaceSecondsPerFrame, RACE_SECONDS_PER_FRAME_OPTIONS } from '../../../raceTiming'
+import { useEditorPanelContext } from '../../EditorPanelContext'
+
+const formatSecondsPerStep = (seconds: number) =>
+  `${Number(seconds.toFixed(1))} ${seconds === 1 ? 'second' : 'seconds'}`
+
+const RacingControls = () => {
+  const { config, raceTiming, transformedData = [], updateConfig } = useContext(ConfigContext)
+  const { updateField } = useEditorPanelContext()
+  const applyConfig = updateConfig!
+  const applyField = updateField!
+  const { visualizationType, visualizationSubType } = config
+  const [barRacingOptionUnlocked, setBarRacingOptionUnlocked] = useState(
+    visualizationType === 'Bar' && visualizationSubType === 'racing'
+  )
+  const supportsRacing = visualizationType === 'Bar' || visualizationType === 'Line'
+  const candidateConfig = {
+    ...config,
+    visualizationSubType: 'racing' as const,
+    ...(visualizationType === 'Bar'
+      ? { orientation: 'horizontal' as const, isLollipopChart: false, barStyle: 'flat' as const }
+      : {})
+  }
+  const candidateEligibility =
+    visualizationType === 'Line'
+      ? getLineRaceEligibility(candidateConfig, transformedData)
+      : getBarRaceEligibility(candidateConfig, transformedData)
+  const savedEligibility =
+    visualizationType === 'Line'
+      ? getLineRaceEligibility(config, transformedData)
+      : getBarRaceEligibility(config, transformedData)
+  const racingOptionAvailable = supportsRacing && (candidateEligibility.eligible || visualizationSubType === 'racing')
+  const racingOptionVisible =
+    visualizationType === 'Bar'
+      ? isCoveDeveloperMode() || visualizationSubType === 'racing' || barRacingOptionUnlocked
+      : racingOptionAvailable
+  const raceConfigKey = visualizationType === 'Bar' ? 'barRace' : 'lineRace'
+  const secondsPerFrame = clampRaceSecondsPerFrame(config[raceConfigKey]?.secondsPerFrame)
+
+  const enablePlayback = () => {
+    if (visualizationType === 'Line') {
+      applyConfig({
+        ...config,
+        visualizationSubType: 'racing',
+        animate: false,
+        lineRace: { ...config.lineRace, secondsPerFrame }
+      })
+      return
+    }
+
+    const enteringFromVertical = config.orientation !== 'horizontal'
+    applyConfig({
+      ...config,
+      visualizationSubType: 'racing',
+      orientation: 'horizontal',
+      barStyle: 'flat',
+      isLollipopChart: false,
+      animate: false,
+      labels: false,
+      xAxis: enteringFromVertical
+        ? {
+            ...config.xAxis,
+            type: 'categorical',
+            anchors: config.yAxis?.anchors ?? [],
+            hideAxis: true,
+            hideTicks: true
+          }
+        : { ...config.xAxis, type: 'categorical' },
+      yAxis: enteringFromVertical
+        ? {
+            ...config.yAxis,
+            anchors: config.xAxis?.anchors ?? [],
+            hideAxis: false,
+            hideTicks: false,
+            labelPlacement: config.yAxis?.labelPlacement || 'On Date/Category Axis'
+          }
+        : config.yAxis,
+      barRace: {
+        ...config.barRace,
+        maxBars: clampBarRaceMaxBars(
+          config.barRace?.maxBars ?? DEFAULT_BAR_RACE_MAX_BARS,
+          'competitorCount' in candidateEligibility ? candidateEligibility.competitorCount : 0
+        ),
+        secondsPerFrame
+      }
+    })
+  }
+
+  const handleSubtypeChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    if (event.target.value === 'racing') {
+      if (visualizationType === 'Bar') setBarRacingOptionUnlocked(true)
+      enablePlayback()
+      return
+    }
+    if (visualizationType === 'Bar' && visualizationSubType === 'racing') setBarRacingOptionUnlocked(true)
+    applyConfig({ ...config, visualizationSubType: event.target.value })
+  }
+
+  const subtypeOptions = [
+    { label: 'Standard', value: 'regular' },
+    ...(visualizationType !== 'Line' ? [{ label: 'Stacked', value: 'stacked' }] : []),
+    ...(racingOptionVisible ? [{ label: 'Racing', value: 'racing' }] : [])
+  ]
+
+  return (
+    <>
+      <Select
+        value={visualizationSubType || 'regular'}
+        fieldName='visualizationSubType'
+        label='Chart Subtype'
+        updateField={supportsRacing ? undefined : applyField}
+        onChange={supportsRacing ? handleSubtypeChange : undefined}
+        options={subtypeOptions}
+      />
+      {visualizationSubType === 'racing' && visualizationType === 'Bar' && 'competitorCount' in savedEligibility && (
+        <TextField
+          type='number'
+          value={clampBarRaceMaxBars(
+            config.barRace?.maxBars ?? DEFAULT_BAR_RACE_MAX_BARS,
+            savedEligibility.competitorCount
+          )}
+          section='barRace'
+          fieldName='maxBars'
+          label='Maximum Bars'
+          updateField={applyField}
+          min={1}
+          max={Math.max(1, savedEligibility.competitorCount)}
+          {...({
+            onBlur: (event: FocusEvent<HTMLInputElement>) =>
+              applyField(
+                'barRace',
+                null,
+                'maxBars',
+                clampBarRaceMaxBars(event.target.value, savedEligibility.competitorCount)
+              )
+          } as InputHTMLAttributes<HTMLInputElement>)}
+        />
+      )}
+      {visualizationSubType === 'racing' && supportsRacing && (
+        <>
+          <label style={{ display: 'block', width: '100%' }}>
+            <span className='edit-label column-heading'>
+              Seconds per Time Step: <strong>{formatSecondsPerStep(secondsPerFrame)}</strong>
+            </span>
+            <input
+              type='range'
+              aria-label='Seconds per Time Step'
+              aria-valuetext={`${formatSecondsPerStep(secondsPerFrame)} per time step`}
+              min={RACE_SECONDS_PER_FRAME_OPTIONS[0]}
+              max={RACE_SECONDS_PER_FRAME_OPTIONS[RACE_SECONDS_PER_FRAME_OPTIONS.length - 1]}
+              step={RACE_SECONDS_PER_FRAME_OPTIONS[1] - RACE_SECONDS_PER_FRAME_OPTIONS[0]}
+              value={secondsPerFrame}
+              onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                applyField(raceConfigKey, null, 'secondsPerFrame', Number(event.target.value))
+              }
+              style={{ display: 'block', width: '100%' }}
+            />
+            <span
+              aria-hidden='true'
+              style={{ display: 'flex', fontSize: '0.75rem', justifyContent: 'space-between', lineHeight: 1.5 }}
+            >
+              {RACE_SECONDS_PER_FRAME_OPTIONS.map(value => (
+                <span key={value}>{value}s</span>
+              ))}
+            </span>
+          </label>
+          {isCoveDeveloperMode() && raceTiming && (
+            <p data-testid={`${visualizationType.toLowerCase()}-race-playback-timing`} role='status' aria-live='polite'>
+              {raceTiming.isPlaying ? 'Playing' : 'Paused'} · {raceTiming.frameKey} ·{' '}
+              {raceTiming.elapsedSeconds.toFixed(1)}s / {raceTiming.totalSeconds.toFixed(1)}s
+            </p>
+          )}
+        </>
+      )}
+    </>
+  )
+}
+
+export default RacingControls

package/src/components/EditorPanel/components/Panels/SeriesColorAssignments.tsx

@@ -4,7 +4,7 @@ import { Select } from '@cdc/core/components/EditorPanel/Inputs'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import { DataColorSelector } from '@cdc/core/components/DataColorSelector'
-import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import { getColorPaletteMajorVersion } from '@cdc/core/helpers/getColorPaletteMajorVersion'
 import { getCurrentPaletteName, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
 import { paletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
 import { getColorScale } from '../../../../helpers/getColorScale'
@@ -64,7 +64,7 @@ const SeriesColorAssignments = ({ config, updateConfig, colorPalettes }: SeriesC
       return Array.from(new Set(customColors.filter(Boolean)))
     }
 
-    const version = getColorPaletteVersion(config)
+    const version = getColorPaletteMajorVersion(config)
     const versionedPalettes = colorPalettes?.[`v${version}`] || colorPalettes?.v2 || colorPalettes || {}
     const paletteName = migratePaletteWithMap(currentPaletteName, paletteMigrationMap, false)
     const colors =

package/src/components/EditorPanel/components/Panels/index.tsx

@@ -5,6 +5,8 @@ import General from './Panel.General'
 import BoxPlot from './Panel.BoxPlot'
 import Visual from './Panel.Visual'
 import Sankey from './Panel.Sankey'
+import Network from './Panel.Network'
+import Dendrogram from './Panel.Dendrogram'
 import Radar from './Panel.Radar'
 import Annotate from './Panel.Annotate'
 import PatternSettings from './Panel.PatternSettings'
@@ -18,6 +20,8 @@ const Panels = {
   BoxPlot,
   Visual,
   Sankey,
+  Network,
+  Dendrogram,
   Radar,
   Annotate,
   PatternSettings,

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

@@ -1,12 +1,13 @@
 import { type ChartConfig, type VisualizationType } from '../../../types/ChartConfig'
 import { HEATMAP_CONFIG_DEFAULTS } from '../../HeatMap/heatmap.constants'
+import { applyChartTypeContract } from '../../../helpers/applyChartTypeContract'
 
 export const getVisualizationTypeConfigUpdate = (
   config: ChartConfig,
   visualizationType: VisualizationType
 ): ChartConfig | undefined => {
-  if (visualizationType === 'Forecasting' && config.xAxis.type === 'categorical') {
-    return {
+  if (visualizationType === 'Forecasting' && (!config.xAxis.type || config.xAxis.type === 'categorical')) {
+    return applyChartTypeContract({
       ...config,
       visualizationType,
       xAxis: {
@@ -15,11 +16,11 @@ export const getVisualizationTypeConfigUpdate = (
         dateParseFormat: config.xAxis.dateParseFormat || '%Y-%m-%d',
         dateDisplayFormat: config.xAxis.dateDisplayFormat || '%Y-%m-%d'
       }
-    }
+    })
   }
 
   if (visualizationType === 'HeatMap') {
-    return {
+    return applyChartTypeContract({
       ...config,
       visualizationType,
       series: (config.series || []).map(series => ({
@@ -27,6 +28,12 @@ export const getVisualizationTypeConfigUpdate = (
         type: 'HeatMap',
         axis: 'Left'
       })),
+      xAxis: {
+        ...config.xAxis,
+        manual: false,
+        numTicks: undefined,
+        viewportNumTicks: {}
+      },
       yAxis: {
         ...config.yAxis,
         type: 'categorical',
@@ -38,7 +45,9 @@ export const getVisualizationTypeConfigUpdate = (
         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
+        showCellValues: config.heatmap?.showCellValues ?? HEATMAP_CONFIG_DEFAULTS.showCellValues,
+        horizontalScroll: config.heatmap?.horizontalScroll ?? HEATMAP_CONFIG_DEFAULTS.horizontalScroll,
+        minColumnWidth: config.heatmap?.minColumnWidth ?? HEATMAP_CONFIG_DEFAULTS.minColumnWidth
       },
       legend: {
         ...config.legend,
@@ -50,11 +59,15 @@ export const getVisualizationTypeConfigUpdate = (
         ...config.general,
         palette: config.general?.palette || {
           isReversed: false,
-          version: '2.0',
+          version: '2.1',
           name: 'sequential_blue'
         }
       }
-    }
+    })
+  }
+
+  if (['Horizon Chart', 'Box Plot', 'Paired Bar', 'Deviation Bar', 'Bump Chart'].includes(visualizationType)) {
+    return applyChartTypeContract({ ...config, visualizationType })
   }
 
   return undefined

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

@@ -40,7 +40,10 @@ describe('getVisualizationTypeConfigUpdate', () => {
     const updatedConfig = getVisualizationTypeConfigUpdate(buildConfig(), 'HeatMap')
 
     expect(updatedConfig?.visualizationType).toBe('HeatMap')
-    expect(updatedConfig?.series).toEqual([{ dataKey: 'Value', type: 'HeatMap', axis: 'Left' }])
+    expect(updatedConfig?.series).toEqual([{ dataKey: 'Value', type: 'HeatMap', axis: 'Left', tooltip: true }])
+    expect(updatedConfig?.xAxis.manual).toBe(false)
+    expect(updatedConfig?.xAxis.numTicks).toBeUndefined()
+    expect(updatedConfig?.xAxis.viewportNumTicks).toEqual({})
     expect(updatedConfig?.yAxis.type).toBe('categorical')
     expect(updatedConfig?.yAxis.titlePlacement).toBe('side')
     expect(updatedConfig?.heatmap).toEqual(HEATMAP_CONFIG_DEFAULTS)
@@ -49,7 +52,7 @@ describe('getVisualizationTypeConfigUpdate', () => {
     expect(updatedConfig?.legend.subStyle).toBe('linear blocks')
     expect(updatedConfig?.general.palette).toEqual({
       isReversed: false,
-      version: '2.0',
+      version: '2.1',
       name: 'sequential_blue'
     })
   })
@@ -71,4 +74,24 @@ describe('getVisualizationTypeConfigUpdate', () => {
       { dataKey: 'South', name: 'South', type: 'HeatMap', axis: 'Left', tooltip: true }
     ])
   })
+
+  it.each([
+    ['Horizon Chart', { horizon: { numLayers: 4, mode: 'offset', bandGap: 15, bottomPadding: 15 } }],
+    ['Box Plot', { yAxis: { labelPlacement: 'On Date/Category Axis' } }],
+    ['Paired Bar', { orientation: 'horizontal' }],
+    ['Deviation Bar', { orientation: 'horizontal' }],
+    ['Bump Chart', { xAxis: { type: 'date-time' } }]
+  ])('maintains the %s stable contract during type changes', (visualizationType, expected) => {
+    expect(getVisualizationTypeConfigUpdate(buildConfig(), visualizationType as any)).toMatchObject(expected)
+  })
+
+  it('adds date sorting after switching a configured X-axis to Bump Chart', () => {
+    const updatedConfig = getVisualizationTypeConfigUpdate(
+      buildConfig({ xAxis: { type: 'categorical', dataKey: 'Date' }, table: {} as any }),
+      'Bump Chart'
+    )
+
+    expect(updatedConfig?.xAxis.type).toBe('date-time')
+    expect(updatedConfig?.table.defaultSort).toEqual({ column: 'Date', sortDirection: 'desc' })
+  })
 })

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

@@ -1,7 +1,7 @@
 import DataTransform from '@cdc/core/helpers/DataTransform'
 import { ChartConfig } from '../../../types/ChartConfig'
 import cloneConfig from '@cdc/core/helpers/cloneConfig'
-import _ from 'lodash'
+import get from 'lodash/get'
 
 const transform = new DataTransform()
 
@@ -31,12 +31,13 @@ export const updateFieldRankByValue = (
   newConfig.rankByValue = newValue
 
   if (config.rankByValue && !newValue) {
-    const CIkeys: string[] = Object.values(_.get(config, 'confidenceKeys', {})) as string[]
-    const seriesKeys: string[] = _.get(config, 'series', []).map((s: any) => s.dataKey)
+    const CIkeys: string[] = Object.values(get(config, 'confidenceKeys', {})) as string[]
+    const seriesKeys: string[] = get(config, 'series', []).map((s: any) => s.dataKey)
     const keysToClean: string[] = [...(seriesKeys ?? []), ...(CIkeys ?? [])]
 
+    const stripTrailingPercentage = config.visualizationType === 'Bar'
     const cleanData = config?.xAxis?.dataKey
-      ? transform.cleanData(config.data, config.xAxis.dataKey, keysToClean)
+      ? transform.cleanData(config.data, config.xAxis.dataKey, keysToClean, stripTrailingPercentage)
       : config.data
     const newData = preTransformedData.sort((a, b) => {
       const aIndex = indexOfObj(cleanData, a)

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

@@ -20,6 +20,13 @@ const renderUseEditorPermissions = (
 }
 
 describe('useEditorPermissions', () => {
+  it('offers sequential and non-sequential palettes for line charts', () => {
+    const { result } = renderUseEditorPermissions({ visualizationType: 'Line' })
+
+    expect(result.current.visSupportsSequentialPallete()).toBe(true)
+    expect(result.current.visSupportsNonSequentialPallete()).toBe(true)
+  })
+
   it('shows manual y-axis padding controls when there is no spaced inline label', () => {
     const { result } = renderUseEditorPermissions({
       yAxis: {
@@ -99,6 +106,93 @@ describe('useEditorPermissions', () => {
     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('exposes the Legend accordion for Network visibility control', () => {
+    const { result } = renderUseEditorPermissions({ visualizationType: 'Network' })
+
+    expect(result.current.visHasLegend()).toBe(true)
+  })
+
+  it('shows the numbers-on-bars control for a Bar race using the default label placement', () => {
+    const yAxis = { ...createMockConfig().yAxis }
+    delete yAxis.labelPlacement
+    const { result } = renderUseEditorPermissions({
+      visualizationType: 'Bar',
+      visualizationSubType: 'racing',
+      orientation: 'horizontal',
+      yAxis
+    })
+
+    expect(result.current.visHasNumbersOnBars()).toBe(true)
+  })
+
+  it('hides unsupported editor surfaces for Bar races', () => {
+    const { result } = renderUseEditorPermissions({
+      visualizationType: 'Bar',
+      visualizationSubType: 'racing',
+      orientation: 'horizontal',
+      series: [{ dataKey: 'Value', type: 'Bar', axis: 'Left' }] as any
+    })
+
+    expect(result.current.visHasBarBorders()).toBe(false)
+    expect(result.current.visHasLegend()).toBe(false)
+    expect(result.current.visHasAnchors()).toBe(false)
+    expect(result.current.visSupportsRegions()).toBe(false)
+    expect(result.current.visSupportsDateCategoryAxisLabel()).toBe(false)
+    expect(result.current.visSupportsDateCategoryAxisLine()).toBe(false)
+    expect(result.current.visSupportsDateCategoryAxisTicks()).toBe(false)
+    expect(result.current.visSupportsDateCategoryNumTicks()).toBe(false)
+    expect(result.current.visSupportsDateCategoryTickRotation()).toBe(false)
+    expect(result.current.visSupportsResponsiveTicks()).toBe(false)
+  })
+
+  it('keeps ordinary Bar editor surfaces available', () => {
+    const { result } = renderUseEditorPermissions({
+      visualizationType: 'Bar',
+      visualizationSubType: 'regular',
+      orientation: 'horizontal',
+      series: [{ dataKey: 'Value', type: 'Bar', axis: 'Left' }] as any
+    })
+
+    expect(result.current.visHasBarBorders()).toBe(true)
+    expect(result.current.visHasLegend()).toBe(true)
+    expect(result.current.visSupportsRegions()).toBe(true)
+    expect(result.current.visSupportsDateCategoryAxisLabel()).toBe(true)
+    expect(result.current.visSupportsDateCategoryAxisLine()).toBe(true)
+    expect(result.current.visSupportsDateCategoryAxisTicks()).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],