@cdc/chart 4.26.4 → 4.26.6

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

@@ -2,6 +2,7 @@ import React, { useContext } from 'react'
 import { Draggable } from '@hello-pangea/dnd'
 import ConfigContext from '../../../../ConfigContext.js'
 import { useEditorPermissions } from '../../useEditorPermissions'
+import { EVENT_LINE_LABEL_OFFSET } from '../../../Annotations/components/AnnotationDraggable'
 
 // CDC Core
 import Accordion from '@cdc/core/components/ui/Accordion'
@@ -63,6 +64,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
   const handleAddAnnotation = () => {
     const newAnnotation = {
       text: 'New annotation',
+      style: 'callout',
       anchorMode: 'fixed',
       fontSize: 16,
       bezier: 10,
@@ -134,6 +136,19 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
           updateField={updateField}
         />
 
+        <Select
+          label='Mobile Annotations'
+          value={config?.general?.mobileAnnotationDisplay || 'symbol'}
+          options={[
+            { value: 'symbol', label: 'Show Symbol' },
+            { value: 'text', label: 'Show Text' }
+          ]}
+          section='general'
+          subsection={null}
+          fieldName='mobileAnnotationDisplay'
+          updateField={updateField}
+        />
+
         {config.general.showAnnotationDropdown && (
           <label key={`key-2`}>
             Annotation Dropdown Title:
@@ -200,7 +215,48 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                           />
                         </label>
 
-                        {visSupportsDataAnnotations() && (
+                        <Select
+                          label='Annotation Style:'
+                          value={annotation.style || 'callout'}
+                          options={[
+                            { value: 'callout', label: 'Callout' },
+                            {
+                              value: 'event-line',
+                              label: visSupportsDataAnnotations()
+                                ? 'Event Line'
+                                : 'Event Line (requires Line/Bar/Combo/Area/Forecasting, vertical)'
+                            }
+                          ]}
+                          section='annotations'
+                          subsection={null}
+                          fieldName='style'
+                          updateField={(section, subsection, fieldName, value) => {
+                            const updatedAnnotations = cloneDeep(config?.annotations)
+                            const target = updatedAnnotations[index]
+                            target.style = value
+
+                            if (value === 'event-line') {
+                              target.anchorMode = 'data'
+                              if (!target.dataX) {
+                                target.dataX = transformedData?.[0]?.[config.xAxis.dataKey] || ''
+                              }
+                              target.seriesKey = ''
+                              target.edit = { subject: false, label: true }
+                              target.dx =
+                                typeof target.dx === 'number' && target.dx < 0
+                                  ? -EVENT_LINE_LABEL_OFFSET
+                                  : EVENT_LINE_LABEL_OFFSET
+                              if (target.dy === undefined || target.dy === null) target.dy = -120
+                            }
+
+                            updateConfig({
+                              ...config,
+                              annotations: updatedAnnotations
+                            })
+                          }}
+                        />
+
+                        {visSupportsDataAnnotations() && annotation.style !== 'event-line' && (
                           <Select
                             label='Position Mode:'
                             value={annotation.anchorMode || 'fixed'}
@@ -233,24 +289,26 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                           />
                         )}
 
-                        {visSupportsDataAnnotations() && annotation.anchorMode === 'data' && (
-                          <Select
-                            label='Series:'
-                            value={annotation.seriesKey || config.series?.[0]?.dataKey || ''}
-                            options={config.series.map(s => s.dataKey)}
-                            section='annotations'
-                            subsection={null}
-                            fieldName='seriesKey'
-                            updateField={(section, subsection, fieldName, value) => {
-                              const updatedAnnotations = cloneDeep(config?.annotations)
-                              updatedAnnotations[index].seriesKey = value || config.series?.[0]?.dataKey
-                              updateConfig({
-                                ...config,
-                                annotations: updatedAnnotations
-                              })
-                            }}
-                          />
-                        )}
+                        {visSupportsDataAnnotations() &&
+                          annotation.style !== 'event-line' &&
+                          annotation.anchorMode === 'data' && (
+                            <Select
+                              label='Series:'
+                              value={annotation.seriesKey || config.series?.[0]?.dataKey || ''}
+                              options={config.series.map(s => s.dataKey)}
+                              section='annotations'
+                              subsection={null}
+                              fieldName='seriesKey'
+                              updateField={(section, subsection, fieldName, value) => {
+                                const updatedAnnotations = cloneDeep(config?.annotations)
+                                updatedAnnotations[index].seriesKey = value || config.series?.[0]?.dataKey
+                                updateConfig({
+                                  ...config,
+                                  annotations: updatedAnnotations
+                                })
+                              }}
+                            />
+                          )}
 
                         <label>
                           Opacity
@@ -300,24 +358,26 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                           }}
                         />
 
-                        <Select
-                          label='Connection Type:'
-                          value={config?.annotations[index]?.connectionType}
-                          options={['Select', 'curve', 'line', 'elbow', 'none']}
-                          section='annotations'
-                          subsection={null}
-                          fieldName='connectionType'
-                          updateField={(section, subsection, fieldName, value) => {
-                            const updatedAnnotations = cloneDeep(config?.annotations)
-                            updatedAnnotations[index].connectionType = value
-                            updateConfig({
-                              ...config,
-                              annotations: updatedAnnotations
-                            })
-                          }}
-                        />
+                        {annotation.style !== 'event-line' && (
+                          <Select
+                            label='Connection Type:'
+                            value={config?.annotations[index]?.connectionType}
+                            options={['Select', 'curve', 'line', 'elbow', 'none']}
+                            section='annotations'
+                            subsection={null}
+                            fieldName='connectionType'
+                            updateField={(section, subsection, fieldName, value) => {
+                              const updatedAnnotations = cloneDeep(config?.annotations)
+                              updatedAnnotations[index].connectionType = value
+                              updateConfig({
+                                ...config,
+                                annotations: updatedAnnotations
+                              })
+                            }}
+                          />
+                        )}
 
-                        {annotation.connectionType === 'curve' && (
+                        {annotation.style !== 'event-line' && annotation.connectionType === 'curve' && (
                           <>
                             <label>
                               Curve Control
@@ -340,22 +400,24 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                           </>
                         )}
 
-                        <Select
-                          label='Marker'
-                          value={annotation.marker}
-                          options={['arrow', 'circle']}
-                          section='annotations'
-                          subsection={null}
-                          fieldName='marker'
-                          updateField={(section, subsection, fieldName, value) => {
-                            const updatedAnnotations = cloneDeep(config?.annotations)
-                            updatedAnnotations[index].marker = value
-                            updateConfig({
-                              ...config,
-                              annotations: updatedAnnotations
-                            })
-                          }}
-                        />
+                        {annotation.style !== 'event-line' && (
+                          <Select
+                            label='Marker'
+                            value={annotation.marker}
+                            options={['arrow', 'circle']}
+                            section='annotations'
+                            subsection={null}
+                            fieldName='marker'
+                            updateField={(section, subsection, fieldName, value) => {
+                              const updatedAnnotations = cloneDeep(config?.annotations)
+                              updatedAnnotations[index].marker = value
+                              updateConfig({
+                                ...config,
+                                annotations: updatedAnnotations
+                              })
+                            }}
+                          />
+                        )}
                       </AccordionItemPanel>
                     </AccordionItem>
                   </AccessibleAccordion>

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.SmallMultiples.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { Accordion } from 'react-accessible-accordion'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../../../../ConfigContext'
+import EditorPanelContext from '../../EditorPanelContext'
+import PanelSmallMultiples from './Panel.SmallMultiples'
+import { createMockChartContext, createMockConfig } from '../../../LinearChart/tests/mockConfigContext'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: () => <span data-testid='icon' />
+}))
+
+const renderPanel = config => {
+  const context = createMockChartContext(config, {
+    rawData: [{ Date: '2024-01-01', series_a: 1, series_b: 2 }]
+  } as any)
+
+  render(
+    <ConfigContext.Provider value={context}>
+      <EditorPanelContext.Provider value={{ updateField: vi.fn() }}>
+        <Accordion allowZeroExpanded>
+          <PanelSmallMultiples name='Small Multiples' />
+        </Accordion>
+      </EditorPanelContext.Provider>
+    </ConfigContext.Provider>
+  )
+
+  fireEvent.click(screen.getByRole('button', { name: 'Small Multiples' }))
+}
+
+describe('PanelSmallMultiples color assignments warning', () => {
+  it('shows the by-series same-color override warning only when assignments are active', () => {
+    const config = createMockConfig({
+      visualizationType: 'Line',
+      general: {
+        palette: {
+          colorAssignmentMode: 'by-value',
+          colorAssignments: [{ key: 'series_a', color: '#123456' }]
+        }
+      } as any,
+      smallMultiples: {
+        mode: 'by-series',
+        colorMode: 'same'
+      },
+      series: [
+        { dataKey: 'series_a', name: 'Alpha', type: 'Line' },
+        { dataKey: 'series_b', name: 'Beta', type: 'Line' }
+      ] as any
+    })
+
+    renderPanel(config)
+
+    expect(screen.queryByText(/Color assignments are enabled/)).toBeInTheDocument()
+  })
+
+  it('does not show the override warning when assignment mode is ordered', () => {
+    const config = createMockConfig({
+      visualizationType: 'Line',
+      general: {
+        palette: {
+          colorAssignmentMode: 'ordered',
+          colorAssignments: [{ key: 'series_a', color: '#123456' }]
+        }
+      } as any,
+      smallMultiples: {
+        mode: 'by-series',
+        colorMode: 'same'
+      },
+      series: [{ dataKey: 'series_a', name: 'Alpha', type: 'Line' }] as any
+    })
+
+    renderPanel(config)
+
+    expect(screen.queryByText(/Color assignments are enabled/)).not.toBeInTheDocument()
+  })
+
+  it('does not show the override warning when assignments only contain stale keys', () => {
+    const config = createMockConfig({
+      visualizationType: 'Line',
+      general: {
+        palette: {
+          colorAssignmentMode: 'by-value',
+          colorAssignments: [{ key: 'removed_series', color: '#123456' }]
+        }
+      } as any,
+      smallMultiples: {
+        mode: 'by-series',
+        colorMode: 'same'
+      },
+      series: [{ dataKey: 'series_a', name: 'Alpha', type: 'Line' }] as any
+    })
+
+    renderPanel(config)
+
+    expect(screen.queryByText(/Color assignments are enabled/)).not.toBeInTheDocument()
+  })
+})

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

@@ -20,6 +20,7 @@ import { useEditorPanelContext } from '../../EditorPanelContext.js'
 import ConfigContext from '../../../../ConfigContext.js'
 import { PanelProps } from '../PanelProps'
 import { getTileKeys } from '../../../../helpers/smallMultiplesHelpers'
+import { hasSeriesColorAssignmentOverrides } from '../../../../helpers/colorAssignmentHelpers'
 
 const PanelSmallMultiples: FC<PanelProps> = props => {
   const { config, rawData, updateConfig } = useContext<ChartContext>(ConfigContext)
@@ -273,6 +274,15 @@ const PanelSmallMultiples: FC<PanelProps> = props => {
                   }
                 />
 
+                {config.smallMultiples?.mode === 'by-series' &&
+                  config.smallMultiples?.colorMode === 'same' &&
+                  hasSeriesColorAssignmentOverrides(config) && (
+                    <p className='small-multiples-color-assignment-warning mt-1'>
+                      Color assignments are enabled in the Visual section, so tiles will use their assigned series
+                      colors instead of the &lsquo;Same Color&rsquo; setting.
+                    </p>
+                  )}
+
                 {/* Custom Tile Titles - only show for by-column mode */}
                 {config.smallMultiples?.mode === 'by-column' && (
                   <div>