@cdc/chart 4.26.2 → 4.26.4

package/src/_stories/Chart.CustomColors.smoke.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import scatterPlotCustomColorConfig from './_mock/scatterplot_mock.json'
+import pieCustomColorConfig from './_mock/pie_custom_colors.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import { expect, userEvent, waitFor } from 'storybook/test'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Custom Colors',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const ScatterPlot: Story = {
+  args: {
+    config: scatterPlotCustomColorConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+const pieCustomColors = ['#0B6E4F', '#C75000', '#7C4DFF', '#0077B6', '#D7263D']
+const pieFallbackCustomColors = ['#004E89', '#1A659E', '#47A8BD', '#D1495B', '#EDAE49']
+
+const normalizeColor = (color: string) => {
+  const swatch = document.createElement('div')
+  swatch.style.color = color
+  document.body.appendChild(swatch)
+  const normalized = getComputedStyle(swatch).color
+  swatch.remove()
+  return normalized
+}
+
+const assertPieCustomColorStory = async (canvasElement: HTMLElement, expectedColors: string[]) => {
+  await assertVisualizationRendered(canvasElement)
+
+  const chart = canvasElement.querySelector('svg.animated-pie')
+  const legend = canvasElement.querySelector('.legend-container')
+  expect(chart).toBeTruthy()
+  expect(legend).toBeTruthy()
+
+  await waitFor(() => {
+    expect(chart?.querySelectorAll('path')).toHaveLength(expectedColors.length)
+  })
+
+  const legendItems = Array.from(legend!.querySelectorAll('[role="button"]')) as HTMLElement[]
+  expect(legendItems).toHaveLength(expectedColors.length)
+
+  const sliceColors = Array.from(chart!.querySelectorAll('path')).map(path =>
+    normalizeColor(path.getAttribute('fill') || '')
+  )
+  expect(sliceColors).toEqual(expectedColors.map(normalizeColor))
+
+  const legendColors = legendItems.map(item => {
+    const swatch = item.querySelector('span.legend-item') as HTMLElement | null
+    return normalizeColor(swatch ? getComputedStyle(swatch).backgroundColor : '')
+  })
+  expect(legendColors).toEqual(expectedColors.map(normalizeColor))
+
+  await userEvent.click(legendItems[0])
+
+  await waitFor(() => {
+    expect(chart?.querySelectorAll('path')).toHaveLength(1)
+    expect(legendItems[0].className).toContain('highlighted')
+    expect(legendItems[1].className).toContain('inactive')
+  })
+}
+
+export const PieChart: Story = {
+  args: {
+    config: pieCustomColorConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertPieCustomColorStory(canvasElement, pieCustomColors)
+  }
+}
+
+const pieChartCustomColorsFallbackConfig = JSON.parse(JSON.stringify(pieCustomColorConfig))
+pieChartCustomColorsFallbackConfig.title = 'Pie Chart Custom Colors Fallback'
+pieChartCustomColorsFallbackConfig.general.palette.customColors = pieFallbackCustomColors
+delete pieChartCustomColorsFallbackConfig.general.palette.customColorsOrdered
+
+export const PieChartCustomColorsFallback: Story = {
+  args: {
+    config: pieChartCustomColorsFallbackConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertPieCustomColorStory(canvasElement, pieFallbackCustomColors)
+  }
+}
+
+export default meta

package/src/_stories/Chart.Defaults.smoke.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+import Chart from '../CdcChart'
+import simplifiedLine from './_mock/simplified_line.json'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Defaults',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+const oldConfig = editConfigKeys(simplifiedLine, [
+  { path: ['yAxis', 'hideAxis'], value: false },
+  { path: ['yAxis', 'hideTicks'], value: false },
+  { path: ['yAxis', 'gridLines'], value: false },
+  { path: ['yAxis', 'numTicks'], value: '' },
+  { path: ['xAxis', 'numTicks'], value: '' },
+  { path: ['table', 'expanded'], value: true },
+  { path: ['legend', 'position'], value: 'right' },
+  { path: ['dataFormat', 'commas'], value: false },
+  { path: ['tooltips', 'dateDisplayFormat'], value: '' }
+])
+
+const newConfig = editConfigKeys(simplifiedLine, [
+  { path: ['yAxis', 'hideAxis'], value: true },
+  { path: ['yAxis', 'hideTicks'], value: true },
+  { path: ['yAxis', 'gridLines'], value: true },
+  { path: ['yAxis', 'numTicks'], value: 4 },
+  { path: ['xAxis', 'numTicks'], value: 6 },
+  { path: ['table', 'expanded'], value: false },
+  { path: ['legend', 'position'], value: 'top' },
+  { path: ['dataFormat', 'commas'], value: true },
+  { path: ['tooltips', 'dateDisplayFormat'], value: '%B %-d, %Y' }
+])
+
+export const OldConfig_Preserves_Legacy_Defaults: Story = {
+  args: {
+    config: oldConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    await waitForPresence('.legend-container', canvasElement)
+    const legend = canvasElement.querySelector('.legend-container')
+    expect(legend).toBeInTheDocument()
+    expect(legend?.classList.contains('right')).toBe(true)
+
+    const axisLine = canvasElement.querySelector('.left-axis line[stroke="#000"]')
+    expect(axisLine).toBeInTheDocument()
+
+    const gridlines = canvasElement.querySelectorAll('.left-axis line[stroke="#d6d6d6"]')
+    expect(gridlines.length).toBe(0)
+
+    const dataTable = canvasElement.querySelector('.data-table')
+    expect(dataTable).toBeInTheDocument()
+    expect(dataTable?.getAttribute('hidden')).toBeNull()
+
+    const tickTexts = canvasElement.querySelectorAll('.left-axis .vx-axis-tick text')
+    for (const tick of tickTexts) {
+      expect(tick.textContent).not.toMatch(/,/)
+    }
+  }
+}
+
+export const NewConfig_Gets_New_Defaults: Story = {
+  args: {
+    config: newConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    await waitForPresence('.legend-container', canvasElement)
+    const legend = canvasElement.querySelector('.legend-container')
+    expect(legend).toBeInTheDocument()
+    expect(legend?.classList.contains('top')).toBe(true)
+
+    const axisLine = canvasElement.querySelector('.left-axis line[stroke="#000"]')
+    expect(axisLine).toBeNull()
+
+    await waitForPresence('.left-axis line[stroke="#d6d6d6"]', canvasElement)
+    const gridlines = canvasElement.querySelectorAll('.left-axis line[stroke="#d6d6d6"]')
+    expect(gridlines.length).toBeGreaterThan(0)
+
+    const dataTable = canvasElement.querySelector('.data-table')
+    expect(dataTable).toBeInTheDocument()
+    expect(dataTable?.getAttribute('hidden')).not.toBeNull()
+  }
+}
+
+export default meta

package/src/_stories/{Chart.HTMLInDataTable.stories.tsx → Chart.HTMLInDataTable.smoke.stories.tsx}

@@ -493,6 +493,16 @@ export const PieChartWithHTMLFootnotes: Story = {
           Footnote: '<strong>7 states</strong> with 60-79% coverage<br>Target: Move to <em>high category</em>'
         }
       ],
+      xAxis: {
+        label: 'Coverage Category',
+        dataKey: 'Category',
+        type: 'categorical'
+      },
+      yAxis: {
+        label: 'Percentage',
+        dataKey: 'Percentage',
+        type: 'linear'
+      },
       series: [
         {
           dataKey: 'Percentage',

package/src/_stories/Chart.Minimal.smoke.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChart'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import MinimalExampleConfig from '../../examples/minimal-example.json'
+import { expect } from 'storybook/test'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Minimal Config',
+  component: Chart
+}
+
+export default meta
+type Story = StoryObj<typeof Chart>
+
+export const Minimal_Bar_Chart: Story = {
+  args: {
+    config: MinimalExampleConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expect(canvasElement.textContent).toContain('Minimal Chart')
+    expect(canvasElement.textContent).toContain('A')
+  }
+}

package/src/_stories/{Chart.SmallMultiples.stories.tsx → Chart.SmallMultiples.smoke.stories.tsx}

@@ -5,7 +5,8 @@ import smallMultiplesBigDataBars from './_mock/small_multiples/small_multiples_b
 import smallMultiplesLinesColors from './_mock/small_multiples/small_multiples_lines_colors.json'
 import smallMultiplesLines from './_mock/small_multiples/small_multiples_lines.json'
 import smallMultiplesStackedBars from './_mock/small_multiples/small_multiples_stacked_bars.json'
-import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
+import { expect } from 'storybook/test'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Small Multiples',
@@ -14,6 +15,11 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
+const getTooltipHtmlValues = (canvasElement: HTMLElement) =>
+  Array.from(canvasElement.querySelectorAll('[data-tooltip-html]')).map(
+    element => element.getAttribute('data-tooltip-html') || ''
+  )
+
 export const smallMultiples_Bars: Story = {
   args: {
     config: smallMultiplesBars,
@@ -21,6 +27,11 @@ export const smallMultiples_Bars: Story = {
   },
   play: async ({ canvasElement }) => {
     await assertVisualizationRendered(canvasElement)
+    await waitForPresence('[data-tooltip-html]', canvasElement)
+
+    const tooltipHtmlValues = getTooltipHtmlValues(canvasElement)
+    expect(tooltipHtmlValues.length).toBeGreaterThan(0)
+    expect(tooltipHtmlValues.some(html => html.includes('tooltip-marker-swatch'))).toBe(false)
   }
 }
 
@@ -58,6 +69,11 @@ export const smallMultiples_StackedBars: Story = {
   },
   play: async ({ canvasElement }) => {
     await assertVisualizationRendered(canvasElement)
+    await waitForPresence('[data-tooltip-html]', canvasElement)
+
+    const tooltipHtmlValues = getTooltipHtmlValues(canvasElement)
+    expect(tooltipHtmlValues.length).toBeGreaterThan(0)
+    expect(tooltipHtmlValues.some(html => html.includes('tooltip-marker-swatch'))).toBe(true)
   }
 }
 export default meta

package/src/_stories/Chart.SmallestLeftAxisMax.smoke.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import smallestLeftAxisMaxConfig from './_mock/smallest_left_axis_max.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Smallest Left Axis Maximum',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+/**
+ * Region B is the default filter — data only goes up to 1.
+ * Without smallestLeftAxisMax, the Y axis would show decimal ticks (0, 0.2, 0.4…).
+ * With smallestLeftAxisMax: 5, the axis extends to at least 5, producing clean integer ticks.
+ */
+export const WithSmallestLeftAxisMax: Story = {
+  args: {
+    config: smallestLeftAxisMaxConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+/**
+ * Same chart without the smallestLeftAxisMax setting.
+ * Region B data (max 1) causes decimal ticks on the Y axis — the problem this feature solves.
+ */
+export const WithoutSmallestLeftAxisMax: Story = {
+  args: {
+    config: editConfigKeys(smallestLeftAxisMaxConfig, [{ path: ['yAxis', 'smallestLeftAxisMax'], value: undefined }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+/**
+ * Region A has data up to 28, well above the smallestLeftAxisMax of 5.
+ * The axis naturally scales to the data — the setting has no effect here.
+ */
+export const LargerDataUnaffected: Story = {
+  args: {
+    config: editConfigKeys(smallestLeftAxisMaxConfig, [{ path: ['filters', '0', 'active'], value: 'Region A' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+/**
+ * Editor view so you can see the Smallest Left Axis Maximum field in the Left Value Axis section.
+ */
+export const Editor: Story = {
+  args: {
+    config: smallestLeftAxisMaxConfig,
+    isEditor: true
+  }
+}
+
+export default meta

package/src/_stories/{Chart.stories.tsx → Chart.smoke.stories.tsx}

@@ -6,6 +6,7 @@ import lineChartTwoPointsNewChart from './_mock/line_chart_two_points_new_chart.
 import lollipop from './_mock/lollipop.json'
 import forestPlot from '../../examples/feature/forest-plot/forest-plot.json'
 import pairedBar from './_mock/paired-bar.json'
+import pairedBarAbbreviated from './_mock/paired-bar-abbr.json'
 import horizontalBarConfig from './_mock/horizontal_bar.json'
 import horizontalBarsDynamicYAxis from './_mock/horizontal-bars-dynamic-y-axis.json'
 import barChartLabels from './_mock/barchart_labels.mock.json'
@@ -13,8 +14,10 @@ import pieConfig from './_mock/pie_with_data.json'
 import pieCalculatedArea from './_mock/pie_calculated_area.json'
 import areaChartStacked from './_mock/area_chart_stacked.json'
 import multipleLines from './_mock/short_dates.json'
+import MinimalExampleConfig from '../../examples/minimal-example.json'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
-import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
+import { expect } from 'storybook/test'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart',
@@ -63,7 +66,8 @@ export const Lollipop: Story = {
 
 export const Forest_Plot: Story = {
   args: {
-    config: forestPlot
+    config: forestPlot,
+    isEditor: true
   },
   play: async ({ canvasElement }) => {
     await assertVisualizationRendered(canvasElement)
@@ -127,6 +131,16 @@ export const Paired_Bar: Story = {
   }
 }
 
+export const Paired_Bar_Year_Tick_Format_Regression: Story = {
+  args: {
+    config: pairedBarAbbreviated,
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
 export const Area_Chart_stacked: Story = {
   args: {
     config: areaChartStacked,
@@ -137,4 +151,36 @@ export const Area_Chart_stacked: Story = {
   }
 }
 
+export const Metadata_In_Description: Story = {
+  args: {
+    configUrl: '/packages/chart/tests/fixtures/chart-config-with-metadata.json'
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    const subtext = await waitForPresence('.subtext', canvasElement)
+    expect(subtext?.textContent).toContain('January 15, 2026')
+  }
+}
+
+export const Metadata_Backward_Compat_Plain_Array: Story = {
+  args: {
+    config: lineChartTwoPointsRegressionTest,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Minimal_Config: Story = {
+  args: {
+    config: MinimalExampleConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expect(canvasElement.textContent).toContain('Minimal Chart')
+  }
+}
+
 export default meta

package/src/_stories/{Chart.tooltip.stories.tsx → Chart.tooltip.smoke.stories.tsx}

@@ -3,6 +3,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import barChartStacked from './_mock/barchart_labels.mock.json'
 import barChartSuppressed from './_mock/bar-chart-suppressed.json'
+import simplifiedLine from './_mock/simplified_line.json'
+import scatterPlot from './_mock/scatterplot_mock.json'
+import gradientLegend from './_mock/legend.gradient_mock.json'
+import patternLegend from './_mock/stacked-pattern-test.json'
 import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Tooltip',
@@ -68,4 +72,68 @@ export const Additional_Tooltip: Story = {
   }
 }
 
+export const Line_Tooltip_Markers: Story = {
+  args: {
+    config: {
+      ...simplifiedLine,
+      title: 'Line Tooltip Markers'
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Scatter_Tooltip_Markers: Story = {
+  args: {
+    config: {
+      ...scatterPlot,
+      title: 'Scatter Tooltip Markers'
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const No_Markers_When_Legend_Hidden: Story = {
+  args: {
+    config: {
+      ...simplifiedLine,
+      title: 'Tooltip Without Markers When Legend Hidden',
+      legend: {
+        ...simplifiedLine.legend,
+        hide: true
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const No_Markers_For_Gradient_Legend: Story = {
+  args: {
+    config: {
+      ...gradientLegend,
+      title: 'Tooltip Without Markers For Gradient Legend'
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Pattern_Legend_Uses_Color_Markers: Story = {
+  args: {
+    config: {
+      ...patternLegend,
+      title: 'Tooltip Color Markers For Pattern Legend'
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
 export default meta