@cdc/chart 4.26.5 → 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,
@@ -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.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>