@cdc/chart 4.26.6 → 4.26.10

package/src/helpers/handleRankByValue.ts

@@ -1,15 +1,15 @@
-import { ChartConfig } from '../types/ChartConfig'
-
-const getNumericValue = number => {
-  if (typeof number === 'string') return parseFloat(number.replace(/,/g, ''))
-  return Number(number)
-}
-
-export const handleRankByValue = (data, passedConfig: ChartConfig) => {
-  if (passedConfig.rankByValue) {
-    const series = passedConfig.series[0].dataKey
-    const sorted = data.sort((a, b) => getNumericValue(a[series]) - getNumericValue(b[series]))
-    return passedConfig.rankByValue === 'asc' ? sorted : sorted.reverse()
-  }
-  return data
-}
+import { ChartConfig } from '../types/ChartConfig'
+
+const getNumericValue = number => {
+  if (typeof number === 'string') return parseFloat(number.replace(/,/g, ''))
+  return Number(number)
+}
+
+export const handleRankByValue = (data, passedConfig: ChartConfig) => {
+  if (passedConfig.rankByValue) {
+    const series = passedConfig.series[0].dataKey
+    const sorted = data.toSorted((a, b) => getNumericValue(a[series]) - getNumericValue(b[series]))
+    return passedConfig.rankByValue === 'asc' ? sorted : sorted.reverse()
+  }
+  return data
+}

package/src/helpers/isConvertLineToBarGraph.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import uniq from 'lodash/uniq'
 
 export const isConvertLineToBarGraph = (configObj, filteredData) => {
   const { allowLineToBarGraph, series, visualizationType, xAxis } = configObj
@@ -6,6 +6,6 @@ export const isConvertLineToBarGraph = (configObj, filteredData) => {
   const lineWithLessThanThreePoints = visualizationType === 'Line' && filteredData?.length < 3
   const isDynamicSeries = series?.some(series => series.dynamicCategory)
   const isDynamicWithLessThanThreePoints =
-    isDynamicSeries && _.uniq(filteredData?.map(data => data[xAxis.dataKey])).length <= 2
+    isDynamicSeries && uniq(filteredData?.map(data => data[xAxis.dataKey])).length <= 2
   return lineWithLessThanThreePoints || isDynamicWithLessThanThreePoints
 }

package/src/helpers/seriesColumnSettings.ts

@@ -12,13 +12,22 @@ type ColumnFormattingParams = {
 
 const hasOwn = (object: object, key: keyof Column) => Object.prototype.hasOwnProperty.call(object, key)
 const isNonEmptyString = (value: unknown) => typeof value === 'string' && value !== ''
+const getNumericRoundToPlace = (value: Column['roundToPlace']): number | undefined => {
+  if (value === undefined || value === null || (typeof value === 'string' && value.trim() === '')) {
+    return undefined
+  }
+
+  const numericValue = Number(value)
+  if (!Number.isFinite(numericValue)) return undefined
+
+  return Math.max(0, Math.min(20, Math.round(numericValue)))
+}
 
 export const createDefaultSeriesColumnConfig = (columnName: string): Column => ({
   name: columnName,
   label: columnName,
   prefix: '',
   suffix: '',
-  roundToPlace: 0,
   commas: false,
   dataTable: true,
   order: undefined,
@@ -70,12 +79,18 @@ export const upsertSeriesColumnConfig = (
 ): ChartColumns => {
   const existingEntry = findColumnConfigByName(columns, seriesKey)
   const columnKey = existingEntry?.columnKey || seriesKey
-  const nextColumnConfig = {
+  const nextColumnConfig: Partial<Column> = {
     ...(existingEntry?.columnConfig || {}),
     ...updates,
     name: seriesKey
   }
 
+  Object.entries(updates).forEach(([key, value]) => {
+    if (value === undefined) {
+      delete nextColumnConfig[key as keyof Column]
+    }
+  })
+
   if (
     nextColumnConfig.label === undefined &&
     !hasOwn(existingEntry?.columnConfig || {}, 'label') &&
@@ -104,7 +119,10 @@ export const getSeriesColumnFormattingParams = (columnConfig?: Partial<Column>):
   }
 
   if (hasOwn(columnConfig, 'roundToPlace')) {
-    formattingParams.addColRoundTo = columnConfig.roundToPlace ?? 0
+    const numericRoundToPlace = getNumericRoundToPlace(columnConfig.roundToPlace)
+    if (numericRoundToPlace !== undefined) {
+      formattingParams.addColRoundTo = numericRoundToPlace
+    }
   }
 
   if (hasOwn(columnConfig, 'commas')) {
@@ -113,3 +131,13 @@ export const getSeriesColumnFormattingParams = (columnConfig?: Partial<Column>):
 
   return Object.keys(formattingParams).length ? formattingParams : undefined
 }
+
+export const getAdditionalColumnFormattingParams = (columnConfig?: Partial<Column>): ColumnFormattingParams => {
+  const explicitFormattingParams = getSeriesColumnFormattingParams(columnConfig)
+
+  return {
+    addColPrefix: '',
+    addColSuffix: '',
+    ...(explicitFormattingParams || {})
+  }
+}

package/src/helpers/sizeHelpers.ts

@@ -1,12 +1,11 @@
-import { clamp } from 'lodash'
-
 import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
-import { ChartConfig, ViewportSize } from '../types/ChartConfig'
+import { ChartConfig } from '../types/ChartConfig'
 import { EDITOR_WIDTH } from '@cdc/core/helpers/constants'
+import type { ViewPort } from '@cdc/core/types/ViewPort'
 
 export function getOrientation(
   { orientation, heights, visualizationType }: Pick<ChartConfig, 'orientation' | 'heights' | 'visualizationType'>,
-  currentViewport: ViewportSize
+  currentViewport: ViewPort
 ): 'vertical' | 'horizontal' | 'mobileVertical' {
   const isForestPlot = visualizationType === 'Forest Plot'
   const useVertical = orientation === 'vertical' || isForestPlot
@@ -17,7 +16,7 @@ export function getOrientation(
 }
 export function calcInitialHeight(
   { heights, orientation, visualizationType }: Pick<ChartConfig, 'heights' | 'orientation' | 'visualizationType'>,
-  currentViewport: ViewportSize
+  currentViewport: ViewPort
 ): number {
   // if no heights are provided assume config has not been loaded
   if (!heights) return 0

package/src/helpers/smallMultiplesHelpers.ts

@@ -1,3 +1,4 @@
+import { sortByNumericText } from '@cdc/core/helpers/sorting'
 import { scaleOrdinal } from '@visx/scale'
 import { getColorScale } from './getColorScale'
 import { ColorScale } from '../types/ChartContext'
@@ -105,18 +106,16 @@ export const applyTileOrder = (tileItems, orderType, customOrder, config) => {
 
   switch (orderType) {
     case 'asc':
-      return [...tileItems].sort((a, b) => {
-        const titleA = String(getTileDisplayTitle(a.mode, a.seriesKey, a.tileValue, a.key, config)).toLowerCase()
-        const titleB = String(getTileDisplayTitle(b.mode, b.seriesKey, b.tileValue, b.key, config)).toLowerCase()
-        return titleA.localeCompare(titleB)
-      })
+      return sortByNumericText(tileItems, item =>
+        getTileDisplayTitle(item.mode, item.seriesKey, item.tileValue, item.key, config)
+      )
 
     case 'desc':
-      return [...tileItems].sort((a, b) => {
-        const titleA = String(getTileDisplayTitle(a.mode, a.seriesKey, a.tileValue, a.key, config)).toLowerCase()
-        const titleB = String(getTileDisplayTitle(b.mode, b.seriesKey, b.tileValue, b.key, config)).toLowerCase()
-        return titleB.localeCompare(titleA)
-      })
+      return sortByNumericText(
+        tileItems,
+        item => getTileDisplayTitle(item.mode, item.seriesKey, item.tileValue, item.key, config),
+        'desc'
+      )
 
     case 'custom':
       if (!customOrder || customOrder.length === 0) {
@@ -154,9 +153,7 @@ export const getTileKeys = (config, data) => {
     const tileColumn = config.smallMultiples.tileColumn
     if (!tileColumn) return []
 
-    return Array.from(new Set(data.map(row => row[tileColumn])))
-      .filter(val => val != null)
-      .sort()
+    return sortByNumericText(Array.from(new Set(data.map(row => row[tileColumn]))).filter(val => val != null))
   }
   return []
 }

package/src/helpers/tests/applyChartTypeContract.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { applyChartTypeContract } from '../applyChartTypeContract'
+
+const chart = (visualizationType: string) => ({
+  type: 'chart',
+  visualizationType,
+  orientation: 'vertical',
+  series: [{ dataKey: 'value' }],
+  xAxis: { type: 'categorical', dataKey: 'date' },
+  yAxis: {},
+  legend: {},
+  general: { paletteColorCount: 2 },
+  table: {}
+})
+
+describe('applyChartTypeContract', () => {
+  it.each(['Area Chart', 'Horizon Chart', 'Box Plot', 'Bump Chart', 'HeatMap', 'Forecasting'])(
+    'does not mutate the input for %s transitions',
+    visualizationType => {
+      const input = chart(visualizationType)
+      const before = structuredClone(input)
+
+      const result = applyChartTypeContract(input as any)
+
+      expect(input).toEqual(before)
+      expect(result).not.toBe(input)
+      expect(result.xAxis).not.toBe(input.xAxis)
+      expect(result.series).not.toBe(input.series)
+    }
+  )
+
+  it('authors the stacked Area Chart subtype', () => {
+    const result = applyChartTypeContract(chart('Area Chart') as any)
+
+    expect(result.visualizationSubType).toBe('stacked')
+  })
+})

package/src/helpers/tests/boxPlotStats.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+
+import { calculateBoxPlotStats, getSortedBoxPlotValues } from '../boxPlotStats'
+
+describe('boxPlotStats', () => {
+  it('normalizes numeric strings once for all box plot stats consumers', () => {
+    expect(getSortedBoxPlotValues(['1,000', '20', '', null, undefined, 'n/a', '3'])).toEqual([3, 20, 1000])
+  })
+
+  it('calculates quartiles, fences, whiskers, and outliers from sorted numeric values', () => {
+    const stats = calculateBoxPlotStats(['10', '20', '30', '40', '1,000'])
+
+    expect(stats).toMatchObject({
+      values: [10, 20, 30, 40, 1000],
+      q1: 20,
+      q3: 40,
+      median: 30,
+      iqr: 20,
+      lowerBound: -10,
+      upperBound: 70,
+      nonOutliers: [10, 20, 30, 40],
+      outliers: [1000],
+      whiskerMin: 10,
+      whiskerMax: 40
+    })
+  })
+
+  it('returns null when no finite values can be calculated', () => {
+    expect(calculateBoxPlotStats(['', null, undefined, 'n/a'])).toBeNull()
+  })
+})

package/src/helpers/tests/bumpChartTooltip.test.ts

@@ -72,4 +72,33 @@ describe('buildBumpChartTooltipHtml', () => {
     expect(html).not.toContain('2014-01-01T00:00:00.000Z')
     expect(html).toContain('Frequency: 149')
   })
+
+  it('uses a customized column label instead of the active runtime series name', () => {
+    const html = buildBumpChartTooltipHtml({
+      config: buildConfig({
+        columns: {
+          Rank: { name: 'Rank', label: 'Rank Label' }
+        }
+      }),
+      colorScale: undefined,
+      dataRow: { Timestamp: '2014-01-01T00:00:00.000Z', Rank: '1' },
+      series: { dataKey: 'Rank', name: 'Runtime Rank' },
+      helpers
+    })
+
+    expect(html).toContain('Rank Label: 1')
+    expect(html).not.toContain('Runtime Rank: 1')
+  })
+
+  it('falls back to the series name when the column label matches the data key', () => {
+    const html = buildBumpChartTooltipHtml({
+      config: buildConfig(),
+      colorScale: undefined,
+      dataRow: { Timestamp: '2014-01-01T00:00:00.000Z', Rank: '1' },
+      series: { dataKey: 'Rank', name: 'Runtime Rank' },
+      helpers
+    })
+
+    expect(html).toContain('Runtime Rank: 1')
+  })
 })

package/src/helpers/tests/calculateRightYAxisWidth.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+
+vi.mock('@cdc/core/helpers/getTextWidth', () => ({
+  getTextWidth: (text: string) => text.length
+}))
+
+import { calculateRightYAxisWidth } from '../calculateRightYAxisWidth'
+
+const formatNumber = (value: any) => String(value)
+const tickLabelFont = 'normal 16px sans-serif'
+const axisLabelFontSize = 16
+
+const createRightAxisConfig = (yAxisOverrides = {}, runtimeYAxisOverrides = {}) => {
+  const baseConfig = createMockConfig()
+
+  return createMockConfig({
+    yAxis: {
+      ...baseConfig.yAxis,
+      rightAxisSize: 0,
+      rightHideAxis: false,
+      rightHideLabel: false,
+      rightHideTicks: false,
+      rightLabel: '',
+      rightLabelOffsetSize: 0,
+      rightTitlePlacement: 'top',
+      ...yAxisOverrides
+    },
+    runtime: {
+      ...baseConfig.runtime,
+      yAxis: {
+        ...baseConfig.runtime.yAxis,
+        rightHideTicks: false,
+        ...runtimeYAxisOverrides
+      }
+    }
+  })
+}
+
+describe('calculateRightYAxisWidth', () => {
+  it('uses measured right tick label space when saved rightAxisSize is zero', () => {
+    const width = calculateRightYAxisWidth({
+      axisLabelFontSize,
+      config: createRightAxisConfig(),
+      formatNumber,
+      tickLabelFont,
+      tickValues: [0, 1000],
+      yScaleRight: undefined
+    })
+
+    expect(width).toBe(17)
+  })
+
+  it('reserves measured side-title space after right tick labels while ignoring saved offset', () => {
+    const width = calculateRightYAxisWidth({
+      axisLabelFontSize,
+      config: createRightAxisConfig({
+        rightLabel: 'New Participants',
+        rightLabelOffsetSize: 36,
+        rightTitlePlacement: 'side'
+      }),
+      formatNumber,
+      tickLabelFont,
+      tickValues: [0, 10],
+      yScaleRight: undefined
+    })
+
+    expect(width).toBe(36)
+  })
+
+  it('ignores a larger saved rightAxisSize', () => {
+    const width = calculateRightYAxisWidth({
+      axisLabelFontSize,
+      config: createRightAxisConfig({ rightAxisSize: 100 }),
+      formatNumber,
+      tickLabelFont,
+      tickValues: [0, 1000],
+      yScaleRight: undefined
+    })
+
+    expect(width).toBe(17)
+  })
+
+  it('allows no gutter when all right-axis content is hidden', () => {
+    const width = calculateRightYAxisWidth({
+      axisLabelFontSize,
+      config: createRightAxisConfig(
+        {
+          rightHideAxis: true,
+          rightHideLabel: true,
+          rightTitlePlacement: 'top'
+        },
+        {
+          rightHideTicks: true
+        }
+      ),
+      formatNumber,
+      tickLabelFont,
+      tickValues: [],
+      yScaleRight: undefined
+    })
+
+    expect(width).toBe(0)
+  })
+})

package/src/helpers/tests/categoryOrder.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest'
+import { getOrderedCategoryValues, isCustomCategoryOrderActive, sortByCategoryOrder } from '../categoryOrder'
+
+describe('categoryOrder helpers', () => {
+  const data = [
+    { category: 'A', value: 1 },
+    { category: 'D', value: 4 },
+    { category: 'C', value: 3 },
+    { category: 'D', value: 5 },
+    { category: 'L', value: 12 }
+  ]
+
+  it('detects custom category order only for categorical axes with configured values', () => {
+    expect(
+      isCustomCategoryOrderActive({
+        xAxis: { type: 'categorical', dataKey: 'category', categoryOrderType: 'custom', categoryOrder: ['C'] } as any
+      })
+    ).toBe(true)
+
+    expect(
+      isCustomCategoryOrderActive({
+        xAxis: { type: 'date', dataKey: 'category', categoryOrderType: 'custom', categoryOrder: ['C'] } as any
+      })
+    ).toBe(false)
+  })
+
+  it('sorts rows by configured category order and keeps duplicate rows stable', () => {
+    const sorted = sortByCategoryOrder(data, {
+      xAxis: {
+        type: 'categorical',
+        dataKey: 'category',
+        categoryOrderType: 'custom',
+        categoryOrder: ['A', 'C', 'D', 'L']
+      } as any
+    })
+
+    expect(sorted.map(row => row.category)).toEqual(['A', 'C', 'D', 'D', 'L'])
+    expect(sorted.map(row => row.value)).toEqual([1, 3, 4, 5, 12])
+  })
+
+  it('appends values missing from custom order in source order', () => {
+    const sorted = sortByCategoryOrder(data, {
+      xAxis: {
+        type: 'categorical',
+        dataKey: 'category',
+        categoryOrderType: 'custom',
+        categoryOrder: ['C']
+      } as any
+    })
+
+    expect(sorted.map(row => row.category)).toEqual(['C', 'A', 'D', 'D', 'L'])
+  })
+
+  it('merges configured category order with newly discovered values', () => {
+    expect(getOrderedCategoryValues(data, 'category', ['C', 'A'])).toEqual(['C', 'A', 'D', 'L'])
+  })
+})

package/src/helpers/tests/countNumOfTicks.test.ts

@@ -31,6 +31,17 @@ describe('countNumOfTicks', () => {
     expect(result).toBe(6)
   })
 
+  it('treats a null viewport override like the historical missing value', () => {
+    const result = countNumOfTicks({
+      ...baseArgs,
+      axis: 'xAxis',
+      runtime: { xAxis: { numTicks: 6, viewportNumTicks: null } },
+      currentViewport: 'xs',
+      isHorizontal: false
+    })
+    expect(result).toBe(6)
+  })
+
   it('falls back to numTicks when current viewport has no entry in viewportNumTicks', () => {
     const result = countNumOfTicks({
       ...baseArgs,

package/src/helpers/tests/createNewChartConfig.test.ts

@@ -0,0 +1,182 @@
+import defaults from '../../data/initial-state'
+import { createNewChartConfig } from '../createNewChartConfig'
+import { CURRENT_COVE_CONFIG_VERSION } from '@cdc/core/helpers/coveUpdateWorker'
+
+describe('createNewChartConfig', () => {
+  it('deeply combines starter settings with current chart defaults', () => {
+    const starterConfig = {
+      type: 'chart',
+      visualizationType: 'Bar',
+      xAxis: { type: 'categorical', size: 100 },
+      filters: []
+    }
+
+    const config = createNewChartConfig(starterConfig)
+
+    expect(config).toMatchObject({
+      type: 'chart',
+      visualizationType: 'Bar',
+      version: CURRENT_COVE_CONFIG_VERSION,
+      titleStyle: 'small',
+      barThickness: defaults.barThickness,
+      xAxis: {
+        type: 'categorical',
+        size: 100,
+        numTicks: 6,
+        viewportNumTicks: { xs: 4, xxs: 4 }
+      },
+      yAxis: {
+        titlePlacement: 'top',
+        labelPlacement: 'On Date/Category Axis',
+        numTicks: 4,
+        gridLines: true,
+        hideAxis: true,
+        hideTicks: true,
+        autoMaxStrategy: 'clean-top-tick'
+      },
+      legend: { position: 'top', unified: true, expandForecastConfidenceIntervals: true },
+      table: {
+        download: true,
+        expanded: false,
+        show: true,
+        showDataTableLink: false,
+        stickyFirstColumn: false
+      },
+      dataFormat: { commas: true }
+    })
+    expect(config.filters).toEqual([])
+    expect(starterConfig).toEqual({
+      type: 'chart',
+      visualizationType: 'Bar',
+      xAxis: { type: 'categorical', size: 100 },
+      filters: []
+    })
+  })
+
+  it.each([
+    ['Area Chart', { visualizationSubType: 'stacked' }],
+    ['Forecasting', { xAxis: { type: 'date', dateParseFormat: '%Y-%m-%d', dateDisplayFormat: '%b. %-d %Y' } }],
+    ['HeatMap', { yAxis: { type: 'categorical', titlePlacement: 'top' }, legend: { position: 'top' } }],
+    ['Horizon Chart', { horizon: { numLayers: 4, mode: 'offset', bandGap: 15, bottomPadding: 15 } }],
+    ['Box Plot', { yAxis: { labelPlacement: 'On Date/Category Axis' } }],
+    ['Paired Bar', { orientation: 'horizontal' }],
+    ['Deviation Bar', { orientation: 'horizontal' }],
+    ['Bump Chart', { xAxis: { type: 'date-time' } }]
+  ])('authors the %s stable type contract', (visualizationType, expected) => {
+    expect(createNewChartConfig({ type: 'chart', visualizationType })).toMatchObject(expected)
+  })
+
+  it('uses horizontal axis visibility defaults while preserving explicit starter values', () => {
+    const config = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Bar',
+      orientation: 'horizontal'
+    })
+
+    expect(config.xAxis).toMatchObject({ hideAxis: true, hideTicks: true })
+    expect(config.yAxis).toMatchObject({ hideAxis: false, hideTicks: false })
+
+    const explicitlyConfigured = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Bar',
+      orientation: 'horizontal',
+      xAxis: { hideAxis: false, hideTicks: false },
+      yAxis: { hideAxis: true, hideTicks: true }
+    })
+
+    expect(explicitlyConfigured.xAxis).toMatchObject({ hideAxis: false, hideTicks: false })
+    expect(explicitlyConfigured.yAxis).toMatchObject({ hideAxis: true, hideTicks: true })
+  })
+
+  it('uses dashboard-specific table visibility', () => {
+    const config = createNewChartConfig({ type: 'chart', visualizationType: 'Bar' }, { isDashboard: true })
+
+    expect(config.table.show).toBe(false)
+    expect(config.table.download).toBe(false)
+    expect(config.table.showDataTableLink).toBe(false)
+  })
+
+  it('preserves an explicit dashboard data table link opt-in', () => {
+    const config = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Bar',
+      table: { showDataTableLink: true }
+    })
+
+    expect(config.table.showDataTableLink).toBe(true)
+  })
+
+  it('preserves an explicit table download opt-out', () => {
+    const config = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Bar',
+      table: { download: false }
+    })
+
+    expect(config.table.download).toBe(false)
+  })
+
+  it('preserves an explicit unified legend opt-out', () => {
+    const config = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Bar',
+      legend: { unified: false }
+    })
+
+    expect(config.legend.unified).toBe(false)
+  })
+
+  it('enables expanded forecast confidence interval legends for new charts', () => {
+    const config = createNewChartConfig({ type: 'chart', visualizationType: 'Forecasting' })
+
+    expect(config.legend.expandForecastConfidenceIntervals).toBe(true)
+  })
+
+  it('preserves an explicit expanded forecast confidence interval legend opt-out', () => {
+    const config = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Forecasting',
+      legend: { expandForecastConfidenceIntervals: false }
+    })
+
+    expect(config.legend.expandForecastConfidenceIntervals).toBe(false)
+  })
+
+  it('uses compact label gaps and automatic ticks for a new HeatMap', () => {
+    const config = createNewChartConfig({ type: 'chart', visualizationType: 'HeatMap' })
+
+    expect(config.heatmap).toMatchObject({
+      rowLabelGap: 0,
+      columnLabelGap: 20,
+      horizontalScroll: false,
+      minColumnWidth: 44
+    })
+    expect(config.xAxis.manual).toBe(false)
+    expect(config.xAxis.numTicks).toBeUndefined()
+    expect(config.xAxis.viewportNumTicks).toEqual({})
+  })
+
+  it.each([
+    ['Bar', 'sequential_blue', false],
+    ['Line', 'qualitative_standard', false],
+    ['Horizon Chart', 'sequential_blue', false],
+    ['HeatMap', 'sequential_blue', false],
+    ['Sankey', 'sequential_bluereverse', true]
+  ])('uses the new-chart palette for %s charts', (visualizationType, name, isReversed) => {
+    const config = createNewChartConfig({ type: 'chart', visualizationType })
+
+    expect(config.general.palette).toMatchObject({ name, isReversed, version: '2.1' })
+    expect(defaults.general.palette.version).toBe('2.1')
+  })
+
+  it('preserves an explicit palette instead of replacing it with the chart-type default', () => {
+    const config = createNewChartConfig({
+      type: 'chart',
+      visualizationType: 'Line',
+      general: { palette: { name: 'qualitative_bold', isReversed: true, version: '2.1' } }
+    })
+
+    expect(config.general.palette).toMatchObject({ name: 'qualitative_bold', isReversed: true, version: '2.1' })
+    expect(defaults.general.palette.name).toBe('sequential_blue')
+  })
+})