@cdc/chart 4.26.1 → 4.26.3

package/src/_stories/Chart.Anchors.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, Story } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import exampleComboBarNonNumeric from './../../examples/feature/tests-date-exclusions/date-exclusions-config.json'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 export default {
   title: 'Components/Templates/Chart/Anchors',
@@ -15,17 +16,26 @@ export const Anchor_DateLinear: Story = {
   args: {
     config: exampleComboBarNonNumeric,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Anchor_Categorical: Story = {
   args: {
     config: editConfigKeys(exampleComboBarNonNumeric, [{ path: ['xAxis', 'type'], value: 'categorical' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Anchor_Date_Time: Story = {
   args: {
     config: editConfigKeys(exampleComboBarNonNumeric, [{ path: ['xAxis', 'type'], value: 'date-time' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }

package/src/_stories/Chart.BoxPlot.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import boxPlotConfig from './_mock/boxplot_multiseries.json'
 import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Box Plot',
@@ -17,6 +18,9 @@ export const BoxPlot_Vertical: Story = {
       title: 'Vertical Multiseries Box Plot',
       isEditor: false
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -29,6 +33,9 @@ export const BoxPlot_Horizontal: Story = {
       yAxis: { ...boxPlotConfig.yAxis, labelPlacement: 'Above Bar' }
     },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/Chart.CI.stories.tsx

@@ -4,6 +4,7 @@ import lineChartDynamicCI from './_mock/line_chart_dynamic_ci.json'
 import lineChartNonDynamicCI from './_mock/line_chart_non_dynamic_ci.json'
 
 import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Confidence Intervals',
@@ -14,6 +15,9 @@ export const bar_chart_with_labels: Story = {
   args: {
     config: barChartCiLabels,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const bar_chart_horizontal_labels: Story = {
@@ -24,6 +28,9 @@ export const bar_chart_horizontal_labels: Story = {
       yAxis: { ...barChartCiLabels.yAxis, displayNumbersOnBar: true }
     },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -31,6 +38,9 @@ export const line_Chart_Dynamic_Confidence_Intervals: Story = {
   args: {
     config: lineChartDynamicCI,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -38,6 +48,9 @@ export const line_Chart_Non_Dynamic_Confidence_Intervals: Story = {
   args: {
     config: lineChartNonDynamicCI,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export default meta

package/src/_stories/Chart.Combo.stories.tsx

@@ -2,6 +2,8 @@
 import React from 'react'
 import { Meta, Story } from '@storybook/react'
 import CdcChart from '@cdc/chart/src/CdcChart'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 import comboChartConfig from './_mock/combo.json'
 
 export default {
@@ -16,3 +18,18 @@ ComboChart.args = {
   config: comboChartConfig,
   isEditor: true
 }
+ComboChart.play = async ({ canvasElement }) => {
+  await assertVisualizationRendered(canvasElement)
+}
+
+export const ComboChartWithBrush = Template.bind({})
+ComboChartWithBrush.args = {
+  config: editConfigKeys(comboChartConfig, [
+    { path: ['xAxis', 'brushActive'], value: true },
+    { path: ['xAxis', 'brushDefaultRecentDateCount'], value: 12 }
+  ]),
+  isEditor: true
+}
+ComboChartWithBrush.play = async ({ canvasElement }) => {
+  await assertVisualizationRendered(canvasElement)
+}

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

@@ -1,6 +1,9 @@
 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',
@@ -13,6 +16,81 @@ 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)
   }
 }
 

package/src/_stories/Chart.Defaults.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.DynamicSeries.stories.tsx

@@ -3,6 +3,7 @@ import DynamicSeriesBarConfig from './_mock/dynamic_series_bar_config.json'
 import DynamicSeriesSuppression from './_mock/dynamic_series_suppression_mock.json'
 import { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Dynamic Series',
@@ -23,6 +24,9 @@ export const LineShowPoints: Story = {
       lineDatapointStyle: 'always show'
     },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -30,6 +34,9 @@ export const LineSuppression: Story = {
   args: {
     config: DynamicSeriesSuppression,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -37,6 +44,9 @@ export const LineHoverPoints: Story = {
   args: {
     config: DynamicSeriesConfig,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -44,6 +54,9 @@ export const Bar_Vertical: Story = {
   args: {
     config: DynamicSeriesBarConfig,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -51,6 +64,9 @@ export const Bar_Horizontal: Story = {
   args: {
     config: { ...DynamicSeriesBarConfig, orientation: 'horizontal' },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -62,6 +78,9 @@ export const Legend_Order: Story = {
       legend: { ...DynamicSeriesBarConfig, order: 'desc' }
     },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/Chart.Filters.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 import scatterPlotDownloadImage from './_mock/scatterplot-image-download.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Filters',
@@ -13,6 +14,9 @@ type Story = StoryObj<typeof Chart>
 export const Tab_Simple: Story = {
   args: {
     config: editConfigKeys(scatterPlotDownloadImage, [{ path: ['filters', '0', 'filterStyle'], value: 'tab-simple' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/Chart.Forecast.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import Chart from '../CdcChart'
 import forecastComboWithGaps from './_mock/forecast_combo_with_gaps.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Forecast Chart',
@@ -30,6 +31,9 @@ export const Forecast_Combo_With_Gaps: Story = {
           'A combo chart with forecast confidence intervals that demonstrates proper gap handling. The forecast areas and lines are split into separate segments when gaps are detected, preventing misleading connections across missing data periods. Invalid data points (NA values) are automatically filtered out.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/Chart.HTMLInDataTable.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-vite'
 import CdcChart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof CdcChart> = {
   title: 'Components/Templates/Chart/HTML in Data Table',
@@ -148,6 +149,9 @@ export const BasicHTMLInFootnoteColumn: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -208,6 +212,9 @@ export const HTMLWithLinksAndFormatting: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -265,6 +272,9 @@ export const HTMLWithLineBreaks: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -315,6 +325,9 @@ export const ComplexHTMLWithLists: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -368,6 +381,9 @@ export const HTMLWithInlineStyles: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -444,6 +460,9 @@ export const LineChartWithHTMLFootnotes: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -516,5 +535,8 @@ export const PieChartWithHTMLFootnotes: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }

package/src/_stories/Chart.Legend.Gradient.stories.tsx

@@ -5,6 +5,7 @@ import SimplifiedLineConfig from './_mock/simplified_line.json'
 
 import Chart from '../CdcChartComponent'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Legend',
@@ -16,41 +17,62 @@ type Story = StoryObj<typeof Chart>
 export const Legend_Gradient_Smooth: Story = {
   args: {
     config: chartGradientConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const Legend_Group_By: Story = {
   args: {
     config: chartGroupedLagend
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Legend_Gradient_Linear_Blocks: Story = {
   args: {
     config: editConfigKeys(chartGradientConfig, [{ path: ['legend', 'subStyle'], value: 'linear blocks' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Labels_On_Line_Legend_On_Top: Story = {
   args: {
     config: editConfigKeys(chartGradientConfig, [{ path: ['yAxis', 'labelsAboveGridlines'], value: true }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Legend_On_Right: Story = {
   args: {
     config: SimplifiedLineConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Legend_On_Right_With_Box: Story = {
   args: {
     config: editConfigKeys(SimplifiedLineConfig, [{ path: ['legend', 'hideBorder'], value: false }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Legend_Gradient_With_box: Story = {
   args: {
     config: editConfigKeys(chartGradientConfig, [{ path: ['legend', 'hideBorder'], value: false }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -61,6 +83,9 @@ export const Legend_Gradient_With_Text: Story = {
       { path: ['legend', 'description'], value: 'Description' },
       { path: ['legend', 'hideBorder'], value: false }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const Legend_Gradient_Wrapping_Label: Story = {
@@ -74,6 +99,9 @@ export const Legend_Gradient_Wrapping_Label: Story = {
         ])
       ).replace(/Data 1/g, 'This is a long string that should wrap')
     )
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/Chart.Patterns.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import StackedPattern from './_mock/stacked-pattern-test.json'
 
 import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Patterns',
@@ -14,6 +15,9 @@ export const Stacked_Bar_Pattern: Story = {
   args: {
     config: StackedPattern,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }