@cdc/chart 4.26.4 → 4.26.6

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

@@ -0,0 +1,262 @@
+import { useEffect, useMemo, useRef } from 'react'
+import cloneConfig from '@cdc/core/helpers/cloneConfig'
+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 { getCurrentPaletteName, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
+import { paletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
+import { getColorScale } from '../../../../helpers/getColorScale'
+import { ChartConfig } from '../../../../types/ChartConfig'
+import {
+  getSeriesColorAssignmentItems,
+  getSeriesColorAssignments,
+  isSeriesColorAssignmentModeByValue,
+  supportsSeriesColorAssignments,
+  type SeriesColorAssignment,
+  type SeriesColorAssignmentItem
+} from '../../../../helpers/colorAssignmentHelpers'
+
+type SeriesColorAssignmentsProps = {
+  config: ChartConfig
+  updateConfig: (config: ChartConfig) => void
+  colorPalettes: Record<string, any>
+}
+
+const SeriesColorAssignments = ({ config, updateConfig, colorPalettes }: SeriesColorAssignmentsProps) => {
+  const seriesColorAssignmentItems = useMemo(() => getSeriesColorAssignmentItems(config), [config])
+  const seriesColorAssignments = getSeriesColorAssignments(config)
+  const seriesColorAssignmentMap = useMemo(
+    () => new Map(seriesColorAssignments.map(assignment => [assignment.key, assignment.color])),
+    [seriesColorAssignments]
+  )
+  const seriesColorAssignmentItemsFingerprint = seriesColorAssignmentItems
+    .map(({ key, label }) => `${key}:${label}`)
+    .join('|')
+  const seriesColorAssignmentsFingerprint = seriesColorAssignments.map(({ key, color }) => `${key}:${color}`).join('|')
+  const seriesColorAssignmentSupported = supportsSeriesColorAssignments(config)
+  const seriesColorAssignmentMode = config.general?.palette?.colorAssignmentMode || 'ordered'
+  const isSeriesColorAssignmentByValue = isSeriesColorAssignmentModeByValue(config)
+  const currentPaletteName = getCurrentPaletteName(config)
+  const customColors = config.general?.palette?.customColorsOrdered || config.general?.palette?.customColors
+  const hasCustomColors = Array.isArray(customColors) && customColors.length > 0
+
+  const getOrderedColorScaleConfig = () => ({
+    ...config,
+    general: {
+      ...config.general,
+      palette: {
+        ...config.general?.palette,
+        colorAssignmentMode: 'ordered' as const
+      }
+    }
+  })
+
+  const orderedColorScaleConfig = useMemo(getOrderedColorScaleConfig, [config])
+  const orderedColorScale = useMemo(() => getColorScale(orderedColorScaleConfig), [orderedColorScaleConfig])
+  const distributedPaletteColorOptions = useMemo(() => {
+    const colors = (orderedColorScale as any)?.range?.() || []
+    return Array.from(new Set(colors.filter(Boolean)))
+  }, [orderedColorScale])
+  const paletteColorOptions = useMemo(() => {
+    if (hasCustomColors) {
+      return Array.from(new Set(customColors.filter(Boolean)))
+    }
+
+    const version = getColorPaletteVersion(config)
+    const versionedPalettes = colorPalettes?.[`v${version}`] || colorPalettes?.v2 || colorPalettes || {}
+    const paletteName = migratePaletteWithMap(currentPaletteName, paletteMigrationMap, false)
+    const colors =
+      versionedPalettes[paletteName] || versionedPalettes[currentPaletteName] || distributedPaletteColorOptions
+
+    return Array.from(new Set(colors.filter(Boolean)))
+  }, [colorPalettes, config, customColors, hasCustomColors, currentPaletteName, distributedPaletteColorOptions])
+  const paletteSourceFingerprint = hasCustomColors
+    ? 'custom-colors'
+    : `${currentPaletteName}|${paletteColorOptions.join('|')}`
+  const previousPaletteSource = useRef<{ hasCustomColors: boolean; fingerprint: string } | null>(null)
+
+  const getColorForAssignmentItem = ({ label }: SeriesColorAssignmentItem, index: number): string => {
+    const orderedColor = orderedColorScale(label)
+    return paletteColorOptions.includes(orderedColor)
+      ? orderedColor
+      : distributedPaletteColorOptions[index % distributedPaletteColorOptions.length] ||
+          paletteColorOptions[index % paletteColorOptions.length] ||
+          '#000000'
+  }
+
+  const getAssignmentsFromCurrentColors = (): SeriesColorAssignment[] =>
+    seriesColorAssignmentItems.map((item, index) => ({
+      key: item.key,
+      color: getColorForAssignmentItem(item, index)
+    }))
+
+  const getAssignmentsWithMissingCurrentColors = (): SeriesColorAssignment[] | null => {
+    const assignments = [...seriesColorAssignments]
+    let hasMissingAssignment = false
+
+    seriesColorAssignmentItems.forEach((item, index) => {
+      const existingIndex = assignments.findIndex(assignment => assignment.key === item.key)
+      const nextAssignment = { key: item.key, color: getColorForAssignmentItem(item, index) }
+
+      if (existingIndex === -1) {
+        assignments.push(nextAssignment)
+        hasMissingAssignment = true
+      } else if (!assignments[existingIndex]?.color) {
+        assignments[existingIndex] = nextAssignment
+        hasMissingAssignment = true
+      }
+    })
+
+    return hasMissingAssignment ? assignments : null
+  }
+
+  const updateSeriesColorAssignmentMode = (mode: 'ordered' | 'by-value') => {
+    const _state = cloneConfig(config)
+    if (!_state.general.palette) {
+      _state.general.palette = {}
+    }
+
+    _state.general.palette.colorAssignmentMode = mode
+    if (mode === 'by-value') {
+      _state.general.palette.colorAssignments = getAssignmentsFromCurrentColors()
+    }
+
+    updateConfig(_state)
+  }
+
+  const resetSeriesColorAssignmentsToCurrentColors = () => {
+    const _state = cloneConfig(config)
+    if (!_state.general.palette) {
+      _state.general.palette = {}
+    }
+
+    _state.general.palette.colorAssignmentMode = 'by-value'
+    _state.general.palette.colorAssignments = getAssignmentsFromCurrentColors()
+    updateConfig(_state)
+  }
+
+  const updateSeriesColorAssignment = (key: string, color: string) => {
+    const _state = cloneConfig(config)
+    if (!_state.general.palette) {
+      _state.general.palette = {}
+    }
+
+    const currentSeriesKeys = new Set(seriesColorAssignmentItems.map(({ key }) => key))
+    const assignments = seriesColorAssignments.filter(assignment => currentSeriesKeys.has(assignment.key))
+    const existingIndex = assignments.findIndex(assignment => assignment.key === key)
+    if (existingIndex === -1) {
+      assignments.push({ key, color })
+    } else {
+      assignments[existingIndex] = { key, color }
+    }
+
+    _state.general.palette.colorAssignmentMode = 'by-value'
+    _state.general.palette.colorAssignments = assignments
+    updateConfig(_state)
+  }
+
+  useEffect(() => {
+    const currentSource = { hasCustomColors, fingerprint: paletteSourceFingerprint }
+
+    if (!seriesColorAssignmentSupported || !isSeriesColorAssignmentByValue) {
+      previousPaletteSource.current = currentSource
+      return
+    }
+
+    const shouldResetFromPalette =
+      previousPaletteSource.current !== null &&
+      !hasCustomColors &&
+      paletteColorOptions.length > 0 &&
+      (previousPaletteSource.current.hasCustomColors ||
+        previousPaletteSource.current.fingerprint !== paletteSourceFingerprint)
+
+    previousPaletteSource.current = currentSource
+
+    if (shouldResetFromPalette) {
+      resetSeriesColorAssignmentsToCurrentColors()
+      return
+    }
+
+    const assignmentsWithMissingCurrentColors = getAssignmentsWithMissingCurrentColors()
+    if (assignmentsWithMissingCurrentColors) {
+      const _state = cloneConfig(config)
+      if (!_state.general.palette) {
+        _state.general.palette = {}
+      }
+
+      _state.general.palette.colorAssignmentMode = 'by-value'
+      _state.general.palette.colorAssignments = assignmentsWithMissingCurrentColors
+      updateConfig(_state)
+    }
+  }, [
+    hasCustomColors,
+    isSeriesColorAssignmentByValue,
+    paletteSourceFingerprint,
+    seriesColorAssignmentItemsFingerprint,
+    seriesColorAssignmentsFingerprint,
+    seriesColorAssignmentSupported
+  ])
+
+  if (!seriesColorAssignmentSupported) return null
+
+  return (
+    <fieldset className='series-color-assignments'>
+      <Select
+        value={seriesColorAssignmentMode}
+        label='Color Assignment Mode'
+        tooltip={
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>
+                Toggling this determines how colors in the palette are assigned. Colors can be assigned in order or can
+                be associated with specific series.
+              </p>
+            </Tooltip.Content>
+          </Tooltip>
+        }
+        fieldName='colorAssignmentMode'
+        section='general'
+        subsection='palette'
+        updateField={(_section, _subsection, _fieldName, value) => {
+          updateSeriesColorAssignmentMode(value as 'ordered' | 'by-value')
+        }}
+        options={[
+          { label: 'Use palette order', value: 'ordered' },
+          { label: 'Assign colors to series', value: 'by-value' }
+        ]}
+      />
+      {isSeriesColorAssignmentByValue && (
+        <div className='series-color-assignments__rows'>
+          {seriesColorAssignmentItems.map(({ key, label }) => {
+            const assignedColor = seriesColorAssignmentMap.get(key)
+            const color = assignedColor || orderedColorScale(label) || paletteColorOptions[0] || '#000000'
+
+            return (
+              <div className='series-color-assignments__row' key={key}>
+                <label className='series-color-assignments__label' title={`Series key: ${key}`}>
+                  {label}
+                </label>
+                <DataColorSelector
+                  aria-label={`Color for ${label}`}
+                  value={color}
+                  colors={paletteColorOptions}
+                  allowNone={false}
+                  allowCustom={false}
+                  showCustomValue={false}
+                  onChange={nextColor => updateSeriesColorAssignment(key, nextColor)}
+                />
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </fieldset>
+  )
+}
+
+export default SeriesColorAssignments

package/src/components/EditorPanel/components/Panels/panelVisual.styles.css

@@ -0,0 +1,32 @@
+.series-color-assignments {
+  border: 1px solid #d6d7d9;
+  border-radius: 4px;
+  margin-top: 1rem;
+  padding: 0.875rem;
+}
+
+.series-color-assignments__rows {
+  display: grid;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.series-color-assignments__row {
+  align-items: center;
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.series-color-assignments__label {
+  color: #222;
+  display: block;
+  font-size: 0.875rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.series-color-assignments__row .data-color-selector__trigger {
+  justify-self: end;
+}

package/src/components/EditorPanel/components/panels.scss

@@ -83,3 +83,13 @@
 .annotation-group {
   border: 1px solid black;
 }
+
+.small-multiples-color-assignment-warning {
+  background: #fff7e6;
+  border-left: 3px solid #a65f00;
+  color: #3d2a00;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  margin: 0.75rem 0 1rem;
+  padding: 0.5rem 0.75rem;
+}

package/src/components/EditorPanel/editor-panel.scss

@@ -1,4 +1,51 @@
 .cove-visualization.type-chart {
+  .axis-domain-group {
+    border: 1px solid var(--lightGray);
+    border-radius: 4px;
+    margin-top: 1em;
+    padding: 0.75em;
+
+    > label,
+    > .checkbox {
+      margin-top: 0.9em;
+    }
+  }
+
+  .axis-domain-group__title {
+    display: block;
+    font-size: 0.85em;
+    font-weight: 700;
+    margin-bottom: 0.75em;
+    text-transform: uppercase;
+  }
+
+  .axis-domain-group__row {
+    display: flex;
+    gap: 0.75em;
+  }
+
+  .axis-domain-group__field {
+    flex: 1 1 0;
+    min-width: 0;
+
+    > label {
+      margin-top: 0 !important;
+    }
+  }
+
+  .axis-domain-number {
+    max-width: 96px;
+    min-width: auto;
+    width: 100%;
+  }
+
+  .axis-domain-warning {
+    color: red;
+    display: block;
+    font-size: 0.85em;
+    margin-top: 0.25em;
+  }
+
   .viewport-overrides {
     button {
       width: 100%;

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

@@ -0,0 +1,61 @@
+import { type ChartConfig, type VisualizationType } from '../../../types/ChartConfig'
+import { HEATMAP_CONFIG_DEFAULTS } from '../../HeatMap/heatmap.constants'
+
+export const getVisualizationTypeConfigUpdate = (
+  config: ChartConfig,
+  visualizationType: VisualizationType
+): ChartConfig | undefined => {
+  if (visualizationType === 'Forecasting' && config.xAxis.type === 'categorical') {
+    return {
+      ...config,
+      visualizationType,
+      xAxis: {
+        ...config.xAxis,
+        type: 'date',
+        dateParseFormat: config.xAxis.dateParseFormat || '%Y-%m-%d',
+        dateDisplayFormat: config.xAxis.dateDisplayFormat || '%Y-%m-%d'
+      }
+    }
+  }
+
+  if (visualizationType === 'HeatMap') {
+    return {
+      ...config,
+      visualizationType,
+      series: (config.series || []).map(series => ({
+        ...series,
+        type: 'HeatMap',
+        axis: 'Left'
+      })),
+      yAxis: {
+        ...config.yAxis,
+        type: 'categorical',
+        titlePlacement: 'side'
+      },
+      heatmap: {
+        cellPadding: config.heatmap?.cellPadding ?? HEATMAP_CONFIG_DEFAULTS.cellPadding,
+        rowLabelGap: config.heatmap?.rowLabelGap ?? HEATMAP_CONFIG_DEFAULTS.rowLabelGap,
+        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
+      },
+      legend: {
+        ...config.legend,
+        position: 'top',
+        style: 'gradient',
+        subStyle: 'linear blocks'
+      },
+      general: {
+        ...config.general,
+        palette: config.general?.palette || {
+          isReversed: false,
+          version: '2.0',
+          name: 'sequential_blue'
+        }
+      }
+    }
+  }
+
+  return undefined
+}

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

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+import { type ChartConfig } from '../../../../types/ChartConfig'
+import { HEATMAP_CONFIG_DEFAULTS } from '../../../HeatMap/heatmap.constants'
+import { getVisualizationTypeConfigUpdate } from '../getVisualizationTypeConfigUpdate'
+
+const buildConfig = (overrides: Partial<ChartConfig> = {}) =>
+  ({
+    visualizationType: 'Bar',
+    xAxis: {
+      type: 'categorical'
+    },
+    yAxis: {
+      type: 'linear'
+    },
+    series: [{ dataKey: 'Value' }],
+    legend: {
+      position: 'bottom',
+      style: 'circles',
+      subStyle: 'linear blocks'
+    },
+    general: {},
+    ...overrides
+  } as ChartConfig)
+
+describe('getVisualizationTypeConfigUpdate', () => {
+  it('does not build a special config update for chart types without transition rules', () => {
+    expect(getVisualizationTypeConfigUpdate(buildConfig(), 'Line')).toBeUndefined()
+  })
+
+  it('normalizes categorical x-axis settings when switching to Forecasting', () => {
+    const updatedConfig = getVisualizationTypeConfigUpdate(buildConfig(), 'Forecasting')
+
+    expect(updatedConfig?.visualizationType).toBe('Forecasting')
+    expect(updatedConfig?.xAxis.type).toBe('date')
+    expect(updatedConfig?.xAxis.dateParseFormat).toBe('%Y-%m-%d')
+    expect(updatedConfig?.xAxis.dateDisplayFormat).toBe('%Y-%m-%d')
+  })
+
+  it('applies HeatMap defaults and required editor config when switching to HeatMap', () => {
+    const updatedConfig = getVisualizationTypeConfigUpdate(buildConfig(), 'HeatMap')
+
+    expect(updatedConfig?.visualizationType).toBe('HeatMap')
+    expect(updatedConfig?.series).toEqual([{ dataKey: 'Value', type: 'HeatMap', axis: 'Left' }])
+    expect(updatedConfig?.yAxis.type).toBe('categorical')
+    expect(updatedConfig?.yAxis.titlePlacement).toBe('side')
+    expect(updatedConfig?.heatmap).toEqual(HEATMAP_CONFIG_DEFAULTS)
+    expect(updatedConfig?.legend.position).toBe('top')
+    expect(updatedConfig?.legend.style).toBe('gradient')
+    expect(updatedConfig?.legend.subStyle).toBe('linear blocks')
+    expect(updatedConfig?.general.palette).toEqual({
+      isReversed: false,
+      version: '2.0',
+      name: 'sequential_blue'
+    })
+  })
+
+  it('preserves selected rows when switching back to HeatMap from another chart type', () => {
+    const updatedConfig = getVisualizationTypeConfigUpdate(
+      buildConfig({
+        visualizationType: 'Bar',
+        series: [
+          { dataKey: 'North', name: 'North', type: 'Bar', axis: 'Left', tooltip: true },
+          { dataKey: 'South', name: 'South', type: 'Bar', axis: 'Left', tooltip: true }
+        ]
+      }),
+      'HeatMap'
+    )
+
+    expect(updatedConfig?.series).toEqual([
+      { dataKey: 'North', name: 'North', type: 'HeatMap', axis: 'Left', tooltip: true },
+      { dataKey: 'South', name: 'South', type: 'HeatMap', axis: 'Left', tooltip: true }
+    ])
+  })
+})