@cdc/chart 4.26.6 → 4.26.10

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

@@ -1,139 +1,123 @@
-import { useContext } from 'react'
-import ConfigContext from '../../../../ConfigContext'
-import { CheckBox, TextField } from '@cdc/core/components/EditorPanel/Inputs'
-import Button from '@cdc/core/components/elements/Button'
-
+import { useContext, FC } from 'react'
 import {
   AccordionItem,
   AccordionItemHeading,
   AccordionItemPanel,
   AccordionItemButton
 } from 'react-accessible-accordion'
-import EditorPanelContext, { type EditorPanelContext as EPContext } from '../../EditorPanelContext'
+import { CheckBox, Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
 
-const SankeySettings: React.FC<PanelProps> = props => {
-  const { config, updateConfig } = useContext(ConfigContext)
-  const data = config.data?.[0]
-  const { updateField } = useContext<EPContext>(EditorPanelContext)
+import ConfigContext from '../../../../ConfigContext'
+import type { ChartContext } from '../../../../types/ChartContext'
+import { useEditorPanelContext } from '../../EditorPanelContext'
+import { type PanelProps } from '../PanelProps'
+import WarningImage from '../../../../images/warning.svg'
 
-  if (config.visualizationType !== 'Sankey') return
+const SankeySettings: FC<PanelProps> = ({ name }) => {
+  const { config, updateConfig } = useContext<ChartContext>(ConfigContext)
+  const { getColumns } = useEditorPanelContext()
 
-  const updateStoryNode = (fieldName, value, i) => {
-    let storyNodes = []
+  if (config.visualizationType !== 'Sankey') return null
 
-    if (data?.storyNodeText) {
-      storyNodes = [...data?.storyNodeText]
-    }
+  const columnOptions = getColumns?.(false) || []
+  const selectedColumns = config.sankey?.columns || {}
+  const isMissingColumn = (column: unknown) =>
+    !column || (columnOptions.length > 0 && !columnOptions.includes(String(column)))
 
-    storyNodes[i][fieldName] = value
-    updateConfig({
+  const updateSankeyColumn = (_section: string, _subsection: string, fieldName: string, value: string) => {
+    updateConfig?.({
       ...config,
       sankey: {
         ...config.sankey,
-        data: {
-          ...config.sankey.data,
-          storyNodeText: storyNodes
+        columns: {
+          ...selectedColumns,
+          [fieldName]: value
         }
       }
     })
   }
 
-  const addStoryNode = () => {
-    const newData = data
-
-    newData.storyNodeText.push({
-      StoryNode: '',
-      segmentTextBefore: '',
-      segmentTextAfter: ''
-    })
-
-    updateConfig({
+  const updateEnableTooltips = (_section: string, _subsection: string, _fieldName: string, value: boolean) => {
+    updateConfig?.({
       ...config,
-      sankey: {
-        ...config.sankey,
-        data: [{ ...newData }]
-      }
+      enableTooltips: value
     })
   }
 
-  const removeStoryNode = index => {
-    const newData = data
-    newData.storyNodeText.splice(index, 1)
+  const updateHorizontalScrollWidth = (_section: string, _subsection: string, _fieldName: string, value: string) => {
+    const nextSankey = { ...config.sankey }
+    const width = Number(value)
+
+    if (value.trim() === '' || !Number.isFinite(width) || width <= 0) {
+      delete nextSankey.horizontalScrollWidth
+    } else {
+      nextSankey.horizontalScrollWidth = width
+    }
 
-    updateConfig({ ...config, sankey: { ...config.sankey, data: { ...newData } } })
+    updateConfig?.({ ...config, sankey: nextSankey })
   }
 
   return (
     <AccordionItem>
       <AccordionItemHeading>
-        <AccordionItemButton>Sankey Settings</AccordionItemButton>
+        <AccordionItemButton data-required-field-section='sankey-columns'>
+          {name}
+          {(isMissingColumn(selectedColumns.source) ||
+            isMissingColumn(selectedColumns.target) ||
+            isMissingColumn(selectedColumns.value)) && <WarningImage width='25' className='warning-icon' />}
+        </AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
-        <p>
-          Node stories can provide additional details to support public health messaging. COVE can display a maximum of
-          3 node stories.
-        </p>
-        {data?.storyNodeText &&
-          data?.storyNodeText.map(({ StoryNode, segmentTextBefore, segmentTextAfter }, i) => (
-            <div
-              key={i}
-              style={{ border: '1px solid black', margin: '15px auto', padding: '15px', borderRadius: '10px' }}
-            >
-              <label>
-                Story Node Text
-                <input
-                  type='text'
-                  value={StoryNode}
-                  fieldName='StoryNode'
-                  label='StoryNode'
-                  onChange={e => updateStoryNode('StoryNode', e.target.value, i)}
-                />
-              </label>
-              <label>
-                Story Text Before
-                <input
-                  type='text'
-                  value={segmentTextBefore}
-                  fieldName='segmentTextBefore'
-                  label='Segment Text Before'
-                  onChange={e => updateStoryNode('segmentTextBefore', e.target.value, i)}
-                />
-              </label>
-              <label>
-                Story Text After
-                <input
-                  type='text'
-                  value={segmentTextAfter}
-                  fieldName='segmentTextAfter'
-                  label='Segment Text After'
-                  onChange={e => updateStoryNode('segmentTextAfter', e.target.value, i)}
-                />
-              </label>
-              <Button onClick={e => removeStoryNode(i)} className='btn btn-danger full-width'>
-                Remove Story Node
-              </Button>
-            </div>
-          ))}
-        {data?.storyNodeText?.length < 3 && (
-          <Button
-            type='button'
-            variant='editor-primary'
-            onClick={e => {
-              e.preventDefault()
-              addStoryNode()
-            }}
-          >
-            Add StoryNode
-          </Button>
-        )}
-        {config.data?.[0]?.tooltips?.length > 0 && (
-          <CheckBox
-            value={config.enableTooltips}
-            fieldName='enableTooltips'
-            label='Enable Tooltips'
-            updateField={updateField}
-          />
-        )}
+        <Select
+          value={selectedColumns.source || ''}
+          section='sankey'
+          subsection='columns'
+          fieldName='source'
+          label='Source Column'
+          data-required-field-control='sankey-source'
+          initial='Select'
+          required={true}
+          updateField={updateSankeyColumn}
+          options={columnOptions}
+        />
+        <Select
+          value={selectedColumns.target || ''}
+          section='sankey'
+          subsection='columns'
+          fieldName='target'
+          label='Target Column'
+          data-required-field-control='sankey-target'
+          initial='Select'
+          required={true}
+          updateField={updateSankeyColumn}
+          options={columnOptions}
+        />
+        <Select
+          value={selectedColumns.value || ''}
+          section='sankey'
+          subsection='columns'
+          fieldName='value'
+          label='Value Column'
+          data-required-field-control='sankey-value'
+          initial='Select'
+          required={true}
+          updateField={updateSankeyColumn}
+          options={columnOptions}
+        />
+        <CheckBox
+          value={Boolean(config.enableTooltips)}
+          fieldName='enableTooltips'
+          label='Show Tooltips'
+          updateField={updateEnableTooltips}
+        />
+        <TextField
+          value={config.sankey?.horizontalScrollWidth ?? ''}
+          type='number'
+          section='sankey'
+          fieldName='horizontalScrollWidth'
+          label='Horizontal Scroll Width'
+          updateField={updateHorizontalScrollWidth}
+        />
       </AccordionItemPanel>
     </AccordionItem>
   )

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

@@ -6,7 +6,7 @@ import Check from '@cdc/core/assets/icon-check.svg'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 import { colorPalettesChartV1, colorPalettesChartV2, sequentialPalettes } from '@cdc/core/data/colorPalettes'
 import { updatePaletteNames } from '@cdc/core/helpers/updatePaletteNames'
-import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import { getColorPaletteMajorVersion } from '@cdc/core/helpers/getColorPaletteMajorVersion'
 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'
@@ -257,7 +257,7 @@ const SeriesDropdownForecastColor = props => {
 
   // Determine palette version and use appropriate palette set
   // Forecasting charts use sequentialPalettes for v1, sequential-only palettes for v2
-  const paletteVersion = getColorPaletteVersion(config)
+  const paletteVersion = getColorPaletteMajorVersion(config)
 
   // Get version-appropriate palettes (v1 uses sequentialPalettes, v2 uses filtered v2 palettes)
   const forecastPalettes =
@@ -556,6 +556,22 @@ const SeriesColumnSettings = props => {
     })
   }
 
+  const updateSeriesRoundToPlace = value => {
+    const trimmed = value === undefined || value === null ? '' : String(value).trim()
+    if (!trimmed) {
+      updateSeriesColumn('roundToPlace', undefined)
+      return
+    }
+
+    const numericValue = Number(trimmed)
+    if (!Number.isFinite(numericValue)) {
+      updateSeriesColumn('roundToPlace', undefined)
+      return
+    }
+
+    updateSeriesColumn('roundToPlace', Math.max(0, Math.min(20, Math.round(numericValue))))
+  }
+
   return (
     <>
       <span className='divider-heading'>Series Column Settings</span>
@@ -586,14 +602,13 @@ const SeriesColumnSettings = props => {
         />
         <TextField
           type='number'
-          value={columnConfig.roundToPlace ?? 0}
+          value={columnConfig.roundToPlace ?? ''}
           section='seriesColumn'
           subsection={series.dataKey}
           fieldName='roundToPlace'
           label='Round'
-          updateField={(_section, _subsection, _fieldName, value) =>
-            updateSeriesColumn('roundToPlace', Number(value) || 0)
-          }
+          updateField={(_section, _subsection, _fieldName, value) => updateSeriesRoundToPlace(value)}
+          min={0}
         />
       </div>
       <CheckBox

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

@@ -54,7 +54,7 @@ const PanelSmallMultiples: FC<PanelProps> = props => {
 
   return (
     <>
-      {visSupportsSmallMultiples() && (
+      {visSupportsSmallMultiples() && config.visualizationSubType !== 'racing' && (
         <AccordionItem>
           <AccordionItemHeading>
             <AccordionItemButton>Small Multiples</AccordionItemButton>

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

@@ -18,7 +18,7 @@ import InputToggle from '@cdc/core/components/inputs/InputToggle'
 // contexts
 import { useColorPalette } from '@cdc/core/hooks/useColorPalette'
 import { getCurrentPaletteName } from '@cdc/core/helpers/palettes/utils'
-import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import { getColorPaletteMajorVersion } from '@cdc/core/helpers/getColorPaletteMajorVersion'
 import { isCoveDeveloperMode } from '@cdc/core/helpers/queryStringUtils'
 import { ChartContext } from './../../../../types/ChartContext.js'
 
@@ -60,38 +60,12 @@ const PanelVisual: FC<PanelProps> = props => {
   const { twoColorPalettes, sequential, nonSequential, accessibleColors } = useColorPalette(config, updateConfig)
 
   const currentPaletteName = getCurrentPaletteName(config)
-
   const versionedTwoColorPalette = useMemo(() => {
-    const version = getColorPaletteVersion(config)
+    const version = getColorPaletteMajorVersion(config)
     const versionKey = `v${version}`
     return twoColorPalette[versionKey] || twoColorPalette.v2
   }, [config, twoColorPalette])
 
-  const updateColor = (property, _value) => {
-    console.error('value', _value)
-    if (property === 'storyNodeFontColor') {
-      updateConfig({
-        ...config,
-        sankey: {
-          ...config.sankey,
-          storyNodeFontColor: _value
-        }
-      })
-      return
-    } else {
-      updateConfig({
-        ...config,
-        sankey: {
-          ...config.sankey,
-          [property]: {
-            ...config.sankey[property],
-            default: _value
-          }
-        }
-      })
-    }
-  }
-
   const handleStyleTreatmentChange = (value: string) => {
     const useTp5Treatment = value === 'tp5'
 
@@ -214,7 +188,7 @@ const PanelVisual: FC<PanelProps> = props => {
             options={['true', 'false']}
           />
         )}
-        {visCanAnimate() && (
+        {visCanAnimate() && config.visualizationSubType !== 'racing' && (
           <CheckBox
             value={config.animate}
             fieldName='animate'
@@ -429,7 +403,7 @@ const PanelVisual: FC<PanelProps> = props => {
                           // Set default palette if none exists
                           if (!_state.general.palette.name) {
                             _state.general.palette.name = 'qualitative_standard'
-                            _state.general.palette.version = '2.0'
+                            _state.general.palette.version = '2.1'
                           }
                         }
                         updateConfig(_state)
@@ -462,40 +436,6 @@ const PanelVisual: FC<PanelProps> = props => {
             <SeriesColorAssignments config={config} updateConfig={updateConfig} colorPalettes={colorPalettes} />
           </>
         )}
-        {config.visualizationType === 'Sankey' && (
-          <>
-            <span className='sankey__color-input'>
-              <input
-                type='color'
-                value={config.sankey.nodeColor.default}
-                id='storyNodeColor'
-                name='storyNodeColor'
-                onChange={e => updateColor('nodeColor', e.target.value)}
-              />
-              <label htmlFor='storyNodeColor'>Story Node Color</label>
-            </span>
-            <span className='sankey__color-input'>
-              <input
-                type='color'
-                value={config.sankey.storyNodeFontColor || 'red'}
-                id='storyNodeFontColor'
-                name='storyNodeFontColor'
-                onChange={e => updateColor('storyNodeFontColor', e.target.value)}
-              />
-              <label htmlFor='storyNodeFontColor'>Story Node Font Color</label>
-            </span>
-            <span className='sankey__color-input'>
-              <input
-                type='color'
-                value={config.sankey.linkColor.default}
-                id='linkColor'
-                name='linkColor'
-                onChange={e => updateColor('linkColor', e.target.value)}
-              />
-              <label htmlFor='linkColor'>Link Color</label>
-            </span>
-          </>
-        )}
         {(config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar') && (
           <>
             <DeveloperPaletteRollback config={config} updateConfig={updateConfig} className='mt-3' />
@@ -514,7 +454,7 @@ const PanelVisual: FC<PanelProps> = props => {
 
                   if (!paletteColors || paletteColors.length < 2) {
                     console.warn(
-                      `Two-color palette "${palette}" not found or incomplete in version ${getColorPaletteVersion(
+                      `Two-color palette "${palette}" not found or incomplete in version ${getColorPaletteMajorVersion(
                         config
                       )}`
                     )
@@ -579,7 +519,9 @@ const PanelVisual: FC<PanelProps> = props => {
         )}
 
         {(config.orientation !== 'horizontal' || config.visualizationType === 'Combo') &&
-          config.visualizationType !== 'Warming Stripes' && (
+          config.visualizationType !== 'Warming Stripes' &&
+          !['Sankey', 'Network', 'Dendrogram'].includes(config.visualizationType) &&
+          config.visualizationType !== 'Pie' && (
             <TextField
               value={config.barThickness}
               type='number'

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

@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import ConfigContext from '../../../../ConfigContext'
+import type { ChartConfig } from '../../../../types/ChartConfig'
+import { createMockChartContext } from '../../../LinearChart/tests/mockConfigContext'
+import EditorPanelContext from '../../EditorPanelContext'
+import barRaceConfig from '../../../../../examples/feature/bar/bar-chart-race-annual-change.json'
+import lineRaceConfig from '../../../../../examples/feature/line/line-chart-race.json'
+import RacingControls from './RacingControls'
+
+const originalUrl = window.location.href
+
+const renderControls = (config: ChartConfig) => {
+  const updateConfig = vi.fn()
+  const updateField = vi.fn()
+
+  render(
+    <ConfigContext.Provider
+      value={createMockChartContext(config, {
+        transformedData: config.data,
+        updateConfig
+      })}
+    >
+      <EditorPanelContext.Provider value={{ updateField }}>
+        <RacingControls />
+      </EditorPanelContext.Provider>
+    </ConfigContext.Provider>
+  )
+
+  return { updateConfig, updateField }
+}
+
+const StatefulControls = ({ initialConfig }: { initialConfig: ChartConfig }) => {
+  const [config, setConfig] = useState(initialConfig)
+
+  return (
+    <ConfigContext.Provider
+      value={createMockChartContext(config, {
+        transformedData: config.data,
+        updateConfig: setConfig
+      })}
+    >
+      <EditorPanelContext.Provider value={{ updateField: vi.fn() }}>
+        <RacingControls />
+      </EditorPanelContext.Provider>
+      <button onClick={() => setConfig(current => ({ ...current, title: 'Updated title' }))}>Update title</button>
+    </ConfigContext.Provider>
+  )
+}
+
+const getSubtypeValues = () =>
+  Array.from((screen.getByLabelText('Chart Subtype') as HTMLSelectElement).options).map(option => option.value)
+
+describe('RacingControls', () => {
+  beforeEach(() => {
+    window.history.replaceState({}, '', window.location.pathname)
+  })
+
+  afterEach(() => {
+    window.history.replaceState({}, '', originalUrl)
+  })
+
+  it('hides the Bar racing option outside COVE developer mode', () => {
+    renderControls({ ...barRaceConfig, visualizationSubType: 'regular' } as ChartConfig)
+
+    expect(getSubtypeValues()).toEqual(['regular', 'stacked'])
+  })
+
+  it('shows the Bar racing option for an ineligible chart in COVE developer mode', () => {
+    window.history.replaceState({}, '', `${window.location.pathname}?isCoveDeveloper=true`)
+
+    const { updateConfig, updateField } = renderControls({
+      ...barRaceConfig,
+      visualizationSubType: 'regular',
+      data: []
+    } as ChartConfig)
+
+    expect(getSubtypeValues()).toEqual(['regular', 'stacked', 'racing'])
+    fireEvent.change(screen.getByLabelText('Chart Subtype'), { target: { value: 'racing' } })
+    expect(updateField).not.toHaveBeenCalled()
+    expect(updateConfig).toHaveBeenCalledTimes(1)
+    expect(updateConfig).toHaveBeenCalledWith(
+      expect.objectContaining({
+        visualizationSubType: 'racing',
+        orientation: 'horizontal',
+        barStyle: 'flat',
+        isLollipopChart: false
+      })
+    )
+  })
+
+  it('keeps Racing selected when the chart is ineligible and its controls rerender', () => {
+    window.history.replaceState({}, '', `${window.location.pathname}?isCoveDeveloper=true`)
+    const initialConfig = {
+      ...barRaceConfig,
+      visualizationSubType: 'regular',
+      xAxis: { ...barRaceConfig.xAxis, type: 'date' }
+    } as ChartConfig
+
+    render(<StatefulControls initialConfig={initialConfig} />)
+    fireEvent.change(screen.getByLabelText('Chart Subtype'), { target: { value: 'racing' } })
+
+    expect(screen.getByLabelText('Chart Subtype')).toHaveValue('racing')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Update title' }))
+    expect(screen.getByLabelText('Chart Subtype')).toHaveValue('racing')
+  })
+
+  it('keeps the option visible for an ineligible existing Bar race outside COVE developer mode', () => {
+    renderControls({ ...barRaceConfig, data: [] } as ChartConfig)
+
+    expect(getSubtypeValues()).toEqual(['regular', 'stacked', 'racing'])
+    expect(screen.getByLabelText('Chart Subtype')).toHaveValue('racing')
+  })
+
+  it('keeps the Bar racing option available after an existing race switches to Standard', () => {
+    render(<StatefulControls initialConfig={barRaceConfig as ChartConfig} />)
+
+    fireEvent.change(screen.getByLabelText('Chart Subtype'), { target: { value: 'regular' } })
+
+    expect(screen.getByLabelText('Chart Subtype')).toHaveValue('regular')
+    expect(getSubtypeValues()).toEqual(['regular', 'stacked', 'racing'])
+  })
+
+  it('does not gate Line racing', () => {
+    renderControls({ ...lineRaceConfig, visualizationSubType: 'regular' } as ChartConfig)
+
+    expect(getSubtypeValues()).toEqual(['regular', 'racing'])
+  })
+})