@cdc/chart 4.26.5 → 4.26.7

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,
@@ -213,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'}
@@ -246,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
@@ -313,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
@@ -353,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

@@ -308,7 +308,7 @@ const PanelGeneral: FC<PanelProps> = props => {
             <CheckBox
               value={config.labels}
               fieldName='labels'
-              label='Display label on data'
+              label={visualizationType === 'Pie' ? 'Display Category and Percentage Labels' : 'Display label on data'}
               updateField={updateField}
               tooltip={
                 <Tooltip style={{ textTransform: 'none' }}>
@@ -316,12 +316,21 @@ const PanelGeneral: FC<PanelProps> = props => {
                     <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                   </Tooltip.Target>
                   <Tooltip.Content>
-                    <p>Recommended set to display for Section 508 compliance.</p>
-                    <hr />
-                    <p>
-                      Selecting this option will <i> not </i> hide the display of "zero value", "suppressed data", or
-                      "missing data" indicators on the chart (if applicable).
-                    </p>
+                    {visualizationType === 'Pie' ? (
+                      <p>
+                        Labels that do not fit and donut labels will display outside of chart. Use a Custom Segment
+                        Order to resolve overlapping labels.
+                      </p>
+                    ) : (
+                      <>
+                        <p>Recommended set to display for Section 508 compliance.</p>
+                        <hr />
+                        <p>
+                          Selecting this option will <i> not </i> hide the display of "zero value", "suppressed data",
+                          or "missing data" indicators on the chart (if applicable).
+                        </p>
+                      </>
+                    )}
                   </Tooltip.Content>
                 </Tooltip>
               }

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

@@ -68,7 +68,7 @@ const PanelPatternSettings: FC<PanelProps> = props => {
       case 'large':
         return 16
       default:
-        return 8
+        return 10
     }
   }
 
@@ -192,7 +192,7 @@ const PanelPatternSettings: FC<PanelProps> = props => {
         shape: 'circles' as const,
         dataKey: defaultDataKey,
         dataValue: '',
-        patternSize: 8, // Default pattern size
+        patternSize: 10, // Default pattern size
         contrastCheck: performContrastCheck(newPatternKey, defaultColor)
       }
     }
@@ -437,7 +437,7 @@ const PanelPatternSettings: FC<PanelProps> = props => {
 
                           <Select
                             label='Pattern Size:'
-                            value={getPatternSizeText(p.patternSize || 8)}
+                            value={getPatternSizeText(p.patternSize || 10)}
                             options={patternSizes}
                             fieldName={`pattern-size-${domPatternKey}`}
                             updateField={(section, subsection, fieldName, value) =>

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

@@ -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.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>