@cdc/chart 4.26.4 → 4.26.6

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

@@ -0,0 +1,187 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+import Chart from '../CdcChart'
+import heatMapAverageAgeCategoricalConfig from './_mock/heatmap-average-age-categorical.json'
+import heatMapSparseAggregationConfig from '../../examples/feature/heatmap/sparse-aggregation.json'
+import heatMapCellValuesBottomAxisConfig from '../../examples/feature/heatmap/cell-values-bottom-axis.json'
+import heatMapCalendarConfig from '../../examples/feature/heatmap/calendar-heatmap.json'
+import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/HeatMap',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+const heatMapTopYAxisLabelConfig = {
+  ...heatMapAverageAgeCategoricalConfig,
+  yAxis: {
+    ...heatMapAverageAgeCategoricalConfig.yAxis,
+    titlePlacement: 'top'
+  }
+}
+
+const getTooltipHtmlValues = (canvasElement: HTMLElement) =>
+  Array.from(canvasElement.querySelectorAll('[data-tooltip-html]')).map(
+    element => element.getAttribute('data-tooltip-html') || ''
+  )
+
+const getSvgTextBox = (svg: SVGSVGElement, value: string) =>
+  Array.from(svg.querySelectorAll('text'))
+    .find(text => text.textContent === value)
+    ?.getBoundingClientRect()
+
+const getSvgText = (svg: SVGSVGElement, value: string) =>
+  Array.from(svg.querySelectorAll('text')).find(text => text.textContent === value)
+
+const getTranslateY = (element: Element | null | undefined) => {
+  const transform = element?.getAttribute('transform') || ''
+  const match = transform.match(/translate\([^,]+,\s*([^)]+)\)/)
+  return match ? Number(match[1]) : 0
+}
+
+const getElementBox = (canvasElement: HTMLElement, selector: string) =>
+  canvasElement.querySelector(selector)?.getBoundingClientRect()
+
+export const HeatMap_Demo: Story = {
+  args: {
+    config: heatMapSparseAggregationConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('.visx-heatmap-rect', canvasElement)
+
+    const cells = canvasElement.querySelectorAll('.visx-heatmap-rect')
+    const tooltipHtmlValues = getTooltipHtmlValues(canvasElement)
+    const firstCell = cells[0]
+    const legendBox = getElementBox(canvasElement, '.cdc-heatmap__legend')
+    const heatMapBox = getElementBox(canvasElement, '.cdc-heatmap')
+    const dataTableBox = getElementBox(canvasElement, '.data-table-container')
+    const tableGap = (dataTableBox?.top || 0) - (heatMapBox?.bottom || 0)
+
+    expect(cells.length).toBe(9)
+    expect(firstCell).toHaveAttribute('tabindex', '0')
+    expect(firstCell).toHaveAttribute('aria-label')
+    expect(legendBox?.bottom).toBeLessThanOrEqual((heatMapBox?.top || 0) + 2)
+    expect(tableGap).toBeGreaterThanOrEqual(0)
+    expect(tableGap).toBeLessThan(80)
+    expect(tooltipHtmlValues.some(html => html.includes('tooltip-heading'))).toBe(true)
+    expect(tooltipHtmlValues.some(html => html.includes('Aggregated Rows: 2'))).toBe(true)
+    expect(tooltipHtmlValues.some(html => html.includes('Notes: Multiple values'))).toBe(true)
+    expect(tooltipHtmlValues.some(html => html.includes('No data'))).toBe(true)
+  }
+}
+
+export const HeatMap_Average_Age_Categorical_Demo: Story = {
+  args: {
+    config: heatMapAverageAgeCategoricalConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('.visx-heatmap-rect', canvasElement)
+
+    const cells = canvasElement.querySelectorAll('.visx-heatmap-rect')
+    const tooltipHtmlValues = getTooltipHtmlValues(canvasElement)
+    const firstCell = cells[0]
+    const firstCellAriaLabel = firstCell.getAttribute('aria-label') || ''
+    const chartSvg = firstCell.ownerSVGElement as SVGSVGElement
+    const firstCellBox = firstCell.getBoundingClientRect()
+    const lastCellBox = cells[cells.length - 1].getBoundingClientRect()
+    const cityLabelBox = getSvgTextBox(chartSvg, 'Atlanta')
+    const rowAxisTitle = getSvgText(chartSvg, 'City')
+    const columnLabelBox = getSvgTextBox(chartSvg, 'Urban Core')
+    const svgBox = chartSvg.getBoundingClientRect()
+    const blockLeft = Math.min(cityLabelBox?.left || firstCellBox.left, firstCellBox.left)
+    const blockRight = lastCellBox.right
+    const blockCenterDelta = Math.abs((blockLeft + blockRight) / 2 - (svgBox.left + svgBox.width / 2))
+    const rowLabelGap = cityLabelBox ? firstCellBox.left - cityLabelBox.right : 0
+    const columnLabelGap = columnLabelBox ? firstCellBox.top - columnLabelBox.bottom : 0
+
+    expect(cells.length).toBe(60)
+    expect(firstCellAriaLabel).toContain('Community Type: Urban Core')
+    expect(firstCellAriaLabel).toContain('City: Atlanta')
+    expect(rowLabelGap).toBeGreaterThan(16)
+    expect(rowLabelGap).toBeLessThan(80)
+    expect(columnLabelGap).toBeGreaterThan(0)
+    expect(rowAxisTitle?.getAttribute('transform')).toContain('rotate(-90)')
+    expect(columnLabelBox?.top).toBeGreaterThanOrEqual(svgBox.top - 1)
+    expect(blockCenterDelta).toBeLessThan(140)
+    expect(tooltipHtmlValues.some(html => html.includes('Community Type: Urban Core'))).toBe(true)
+    expect(tooltipHtmlValues.some(html => html.includes('Average age: 34'))).toBe(true)
+    expect(tooltipHtmlValues.some(html => html.includes('Notes: Dense city center'))).toBe(true)
+  }
+}
+
+export const HeatMap_Top_Y_Axis_Label_Demo: Story = {
+  args: {
+    config: heatMapTopYAxisLabelConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('.visx-heatmap-rect', canvasElement)
+
+    const chartSvg = canvasElement.querySelector('.cdc-heatmap__svg') as SVGSVGElement
+    const rowAxisTitle = getSvgText(chartSvg, 'City')
+    const columnAxisTitle = getSvgText(chartSvg, 'Community Type')
+
+    expect(rowAxisTitle?.getAttribute('transform')).toBeNull()
+    expect(rowAxisTitle?.getAttribute('y')).toBe(columnAxisTitle?.getAttribute('y'))
+  }
+}
+
+export const HeatMap_Cell_Values_And_Binned_Legend: Story = {
+  args: {
+    config: heatMapCellValuesBottomAxisConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('.visx-heatmap-rect', canvasElement)
+    await waitForPresence('.cdc-heatmap__cell-value', canvasElement)
+
+    const cellValues = canvasElement.querySelectorAll('.cdc-heatmap__cell-value')
+    const legendItems = canvasElement.querySelectorAll('.cdc-heatmap__legend .legend-item')
+    const legendBox = getElementBox(canvasElement, '.cdc-heatmap__legend')
+    const heatMapBox = getElementBox(canvasElement, '.cdc-heatmap')
+    const dataTableBox = getElementBox(canvasElement, '.data-table-container')
+    const tableGap = (dataTableBox?.top || 0) - (legendBox?.bottom || 0)
+
+    expect(canvasElement.querySelectorAll('.visx-heatmap-rect').length).toBe(20)
+    expect(canvasElement.querySelector('.visx-axis-bottom')).toBeTruthy()
+    expect(heatMapBox?.bottom).toBeLessThanOrEqual((legendBox?.top || 0) + 2)
+    expect(tableGap).toBeGreaterThanOrEqual(0)
+    expect(tableGap).toBeLessThan(80)
+    expect(cellValues.length).toBeGreaterThan(0)
+    expect(legendItems.length).toBeGreaterThan(0)
+  }
+}
+
+export const HeatMap_Calendar_Demo: Story = {
+  args: {
+    config: heatMapCalendarConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('.visx-heatmap-rect', canvasElement)
+
+    const cells = Array.from(canvasElement.querySelectorAll('.visx-heatmap-rect'))
+    const chartSvg = cells[0].ownerSVGElement as SVGSVGElement
+    const rowAxisTitle = getSvgText(chartSvg, 'Month')
+    const gridTop = Math.min(...cells.map(cell => Number(cell.getAttribute('y'))))
+    const gridBottom = Math.max(
+      ...cells.map(cell => Number(cell.getAttribute('y')) + Number(cell.getAttribute('height')))
+    )
+    const gridCenter = (gridTop + gridBottom) / 2
+
+    expect(cells.length).toBe(372)
+    expect(rowAxisTitle?.getAttribute('transform')).toContain('rotate(-90)')
+    expect(Math.abs(getTranslateY(rowAxisTitle) - gridCenter)).toBeLessThanOrEqual(1)
+  }
+}
+
+export default meta

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import sankeyConfig from './_mock/sankey_mock.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Sankey',
+  component: Chart
+}
+
+export default meta
+type Story = StoryObj<typeof Chart>
+
+export const Sankey_Basic: Story = {
+  args: {
+    config: {
+      ...sankeyConfig,
+      title: 'Patient Care Pathway'
+    },
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Sankey_WithStoryNodes: Story = {
+  args: {
+    config: {
+      ...sankeyConfig,
+      title: 'Care Pathway with Story Nodes',
+      data: [
+        {
+          links: sankeyConfig.data[0].links,
+          tooltips: true,
+          storyNodeText: [
+            { StoryNode: 'Screened', segmentTextBefore: 'Total Screened', segmentTextAfter: 'participants' },
+            { StoryNode: 'Recovered', segmentTextBefore: 'Fully', segmentTextAfter: 'patients' }
+          ]
+        }
+      ]
+    },
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Sankey_TooltipsDisabled: Story = {
+  args: {
+    config: {
+      ...sankeyConfig,
+      title: 'Sankey — Tooltips Disabled',
+      enableTooltips: false
+    },
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}

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

@@ -0,0 +1,183 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Series Color Assignments',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+const assignedColors = {
+  alpha: '#0057B7',
+  bravo: '#D94E5F',
+  charlie: '#5A8E3F'
+}
+
+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 getVisiblePointColorsBySeries = (canvasElement: HTMLElement) => {
+  const groups = Array.from(canvasElement.querySelectorAll('.line-chart-group .visx-glyph-group')) as SVGGElement[]
+  const colorsBySeries = new Map<string, Set<string>>()
+
+  groups.forEach(group => {
+    const seriesIndex = group.getAttribute('data-seriesindex')
+    const glyph = group.querySelector('[fill]') as SVGElement | null
+    const fill = glyph?.getAttribute('fill')
+
+    if (!seriesIndex || !fill || fill === 'transparent') return
+
+    const seriesColors = colorsBySeries.get(seriesIndex) || new Set<string>()
+    seriesColors.add(normalizeColor(fill))
+    colorsBySeries.set(seriesIndex, seriesColors)
+  })
+
+  return colorsBySeries
+}
+
+const expectVisibleSeriesColors = async (
+  canvasElement: HTMLElement,
+  expected: Array<[seriesIndex: string, color: string]>
+) => {
+  await waitFor(() => {
+    const colorsBySeries = getVisiblePointColorsBySeries(canvasElement)
+    const expectedSeries = expected.map(([seriesIndex]) => seriesIndex)
+
+    expect(Array.from(colorsBySeries.keys()).sort()).toEqual(expectedSeries.sort())
+
+    expected.forEach(([seriesIndex, color]) => {
+      expect(Array.from(colorsBySeries.get(seriesIndex) || [])).toEqual([normalizeColor(color)])
+    })
+  })
+}
+
+const expectLegendLabels = async (canvasElement: HTMLElement, expectedLabels: string[]) => {
+  await waitFor(() => {
+    const labels = Array.from(canvasElement.querySelectorAll('.legend-container [role="button"]')).map(item =>
+      item.textContent?.trim()
+    )
+
+    expect(labels).toEqual(expectedLabels)
+  })
+}
+
+const config = {
+  type: 'chart',
+  version: '4.26.5',
+  title: 'Series Color Assignments With Filtered Series',
+  visualizationType: 'Line',
+  visualizationSubType: 'regular',
+  orientation: 'vertical',
+  filterBehavior: 'Filter Change',
+  lineDatapointStyle: 'always show',
+  lineDatapointColor: 'Same as Line',
+  general: {
+    palette: {
+      name: 'qualitative_standard',
+      version: '2.0',
+      colorAssignmentMode: 'by-value',
+      colorAssignments: [
+        { key: 'alpha', color: assignedColors.alpha },
+        { key: 'bravo', color: assignedColors.bravo },
+        { key: 'charlie', color: assignedColors.charlie }
+      ]
+    }
+  },
+  legend: {
+    hide: false,
+    behavior: 'isolate',
+    dynamicLegend: false,
+    position: 'top',
+    style: 'circles',
+    unified: false
+  },
+  xAxis: {
+    dataKey: 'week',
+    type: 'date-time',
+    dateParseFormat: '%Y-%m-%d',
+    dateDisplayFormat: '%b. %-d',
+    label: 'Week',
+    sortDates: false
+  },
+  yAxis: {
+    label: 'Rate',
+    min: '0',
+    max: '50',
+    numTicks: '5',
+    gridLines: true
+  },
+  visual: {
+    lineDatapointSymbol: 'none',
+    verticalHoverLine: false,
+    horizontalHoverLine: false
+  },
+  tooltips: {
+    singleSeries: false
+  },
+  series: [
+    { dataKey: 'alpha', name: 'Alpha', type: 'Line', axis: 'Left', tooltip: true },
+    { dataKey: 'bravo', name: 'Bravo', type: 'Line', axis: 'Left', tooltip: true },
+    { dataKey: 'charlie', name: 'Charlie', type: 'Line', axis: 'Left', tooltip: true }
+  ],
+  filters: [
+    {
+      values: ['Alpha + Bravo', 'Bravo + Charlie'],
+      filterStyle: 'dropdown',
+      id: 1726688167657,
+      columnName: 'view',
+      active: 'Alpha + Bravo',
+      label: 'Visible series'
+    }
+  ],
+  data: [
+    { week: '2024-01-01', view: 'Alpha + Bravo', alpha: 12, bravo: 20, charlie: null },
+    { week: '2024-01-08', view: 'Alpha + Bravo', alpha: 16, bravo: 23, charlie: null },
+    { week: '2024-01-15', view: 'Alpha + Bravo', alpha: 21, bravo: 28, charlie: null },
+    { week: '2024-01-22', view: 'Alpha + Bravo', alpha: 26, bravo: 31, charlie: null },
+    { week: '2024-01-01', view: 'Bravo + Charlie', alpha: null, bravo: 20, charlie: 30 },
+    { week: '2024-01-08', view: 'Bravo + Charlie', alpha: null, bravo: 23, charlie: 34 },
+    { week: '2024-01-15', view: 'Bravo + Charlie', alpha: null, bravo: 28, charlie: 39 },
+    { week: '2024-01-22', view: 'Bravo + Charlie', alpha: null, bravo: 31, charlie: 43 }
+  ],
+  dataDescription: {
+    horizontal: false,
+    series: false
+  }
+}
+
+export const FilteredSeriesKeepAssignedColors: Story = {
+  args: {
+    config,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    await expectVisibleSeriesColors(canvasElement, [
+      ['0', assignedColors.alpha],
+      ['1', assignedColors.bravo]
+    ])
+    await expectLegendLabels(canvasElement, ['Alpha', 'Bravo'])
+
+    const canvas = within(canvasElement)
+    const filter = canvas.getByLabelText(/filter by visible series/i) as HTMLSelectElement
+    await userEvent.selectOptions(filter, 'Bravo + Charlie')
+
+    await expectVisibleSeriesColors(canvasElement, [
+      ['1', assignedColors.bravo],
+      ['2', assignedColors.charlie]
+    ])
+    await expectLegendLabels(canvasElement, ['Bravo', 'Charlie'])
+  }
+}
+
+export default meta

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

@@ -5,6 +5,7 @@ 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 { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
 import { expect } from 'storybook/test'
 
@@ -62,6 +63,34 @@ export const smallMultiples_Lines: Story = {
     await assertVisualizationRendered(canvasElement)
   }
 }
+export const smallMultiples_TopYAxisTitle: Story = {
+  args: {
+    config: editConfigKeys(smallMultiplesLines, [
+      { path: ['yAxis', 'label'], value: 'Percentage of emergency department visits' },
+      { path: ['runtime', 'yAxis', 'label'], value: 'Percentage of emergency department visits' },
+      { path: ['yAxis', 'inlineLabel'], value: ' percent' },
+      { path: ['yAxis', 'titlePlacement'], value: 'top' }
+    ]),
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+export const smallMultiples_TopYAxisTitle2: Story = {
+  args: {
+    config: editConfigKeys(smallMultiplesLines, [
+      { path: ['yAxis', 'label'], value: 'Percentage of emergency department visits' },
+      { path: ['runtime', 'yAxis', 'label'], value: 'Percentage of emergency department visits' },
+      { path: ['yAxis', 'inlineLabel'], value: '%' },
+      { path: ['yAxis', 'titlePlacement'], value: 'top' }
+    ]),
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
 export const smallMultiples_StackedBars: Story = {
   args: {
     config: smallMultiplesStackedBars,

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

@@ -0,0 +1,52 @@
+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/Y Axis Auto Max Strategy',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+const baseConfig = editConfigKeys(smallestLeftAxisMaxConfig, [
+  { path: ['yAxis', 'smallestLeftAxisMax'], value: undefined },
+  { path: ['yAxis', 'filterDomainBehavior'], value: 'dynamic' },
+  { path: ['yAxis', 'numTicks'], value: 4 },
+  { path: ['filters', '0', 'active'], value: 'Region A' }
+])
+
+export const Clean_Top_Tick_Strategy: Story = {
+  args: {
+    config: editConfigKeys(baseConfig, [{ path: ['yAxis', 'autoMaxStrategy'], value: 'clean-top-tick' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Default_Strategy: Story = {
+  args: {
+    config: editConfigKeys(baseConfig, [{ path: ['yAxis', 'autoMaxStrategy'], value: 'default' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Stable_Filter_Domain_With_Clean_Top_Tick: Story = {
+  args: {
+    config: editConfigKeys(baseConfig, [
+      { path: ['yAxis', 'filterDomainBehavior'], value: 'stable' },
+      { path: ['yAxis', 'autoMaxStrategy'], value: 'clean-top-tick' },
+      { path: ['filters', '0', 'active'], value: 'Region B' }
+    ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export default meta

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

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, within } from 'storybook/test'
+import Chart from '../CdcChartComponent'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import smallestLeftAxisMaxConfig from './_mock/smallest_left_axis_max.json'
+import horizontalBarConfig from './_mock/horizontal_bar.json'
+import { assertVisualizationRendered, openAccordion, waitForEditor } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Y Axis Filter Domain',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+const baseConfig = editConfigKeys(smallestLeftAxisMaxConfig, [
+  { path: ['yAxis', 'smallestLeftAxisMax'], value: undefined },
+  { path: ['yAxis', 'numTicks'], value: 4 }
+])
+
+export const Dynamic_Filter_Domain: Story = {
+  args: {
+    config: editConfigKeys(baseConfig, [{ path: ['yAxis', 'filterDomainBehavior'], value: 'dynamic' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Stable_Filter_Domain: Story = {
+  args: {
+    config: editConfigKeys(baseConfig, [{ path: ['yAxis', 'filterDomainBehavior'], value: 'stable' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Editor_Control: Story = {
+  args: {
+    config: editConfigKeys(baseConfig, [
+      { path: ['yAxis', 'filterDomainBehavior'], value: 'stable' },
+      { path: ['yAxis', 'autoMaxStrategy'], value: 'clean-top-tick' }
+    ]),
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Left Value Axis')
+
+    const filterDomainSelect = (await canvas.findByLabelText(/Filter Domain Behavior/i)) as HTMLSelectElement
+    expect(filterDomainSelect.value).toBe('stable')
+    expect(Array.from(filterDomainSelect.options).map(option => option.text)).toEqual(['Dynamic', 'Stable'])
+
+    const autoMaxStrategySelect = (await canvas.findByLabelText(/Automatic max strategy/i)) as HTMLSelectElement
+    expect(autoMaxStrategySelect.value).toBe('clean-top-tick')
+    expect(Array.from(autoMaxStrategySelect.options).map(option => option.text)).toEqual(['Default', 'Clean top tick'])
+  }
+}
+
+export const Horizontal_Editor_Control: Story = {
+  args: {
+    config: editConfigKeys(horizontalBarConfig, [
+      { path: ['filters'], value: [{ columnName: 'Race', active: 'AI/AN, Non-Hispanic', showDropdown: true }] },
+      { path: ['xAxis', 'max'], value: '' },
+      { path: ['yAxis', 'type'], value: 'linear' },
+      { path: ['yAxis', 'smallestLeftAxisMax'], value: 5 },
+      { path: ['yAxis', 'filterDomainBehavior'], value: 'stable' },
+      { path: ['yAxis', 'autoMaxStrategy'], value: 'clean-top-tick' }
+    ]),
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Value Axis')
+
+    const smallestAxisMaxInput = (await canvas.findByLabelText(/Smallest axis maximum/i)) as HTMLInputElement
+    expect(smallestAxisMaxInput.value).toBe('5')
+
+    const filterDomainSelect = (await canvas.findByLabelText(/Filter Domain Behavior/i)) as HTMLSelectElement
+    expect(filterDomainSelect.value).toBe('stable')
+
+    const autoMaxStrategySelect = (await canvas.findByLabelText(/Automatic max strategy/i)) as HTMLSelectElement
+    expect(autoMaxStrategySelect.value).toBe('clean-top-tick')
+  }
+}
+
+export default meta

package/src/_stories/ChartAnnotation.smoke.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import annotationConfig from './_mock/annotation_category_mock.json'
 import annotationConfigDateLinear from './_mock/annotation_date-linear_mock.json'
 import annotationConfigDateTime from './_mock/annotation_date-time_mock.json'
+import annotationConfigEventLine from './_mock/annotation_event-line_mock.json'
 import Chart from '../CdcChartComponent'
 import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
@@ -42,4 +43,13 @@ export const Chart_Annotation_Date_Time: Story = {
   }
 }
 
+export const Chart_Annotation_Event_Line: Story = {
+  args: {
+    config: annotationConfigEventLine
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
 export default meta

package/src/_stories/ChartAxisTitles.smoke.stories.tsx

@@ -61,3 +61,16 @@ export const Paired_Bar: Story = {
     await assertVisualizationRendered(canvasElement)
   }
 }
+
+export const Top_Y_Axis_Title: Story = {
+  args: {
+    config: editConfigKeys(longXLabelsConfig, [
+      { path: ['yAxis', 'label'], value: 'Number of emergency department visits' },
+      { path: ['runtime', 'yAxis', 'label'], value: 'Number of emergency department visits' },
+      { path: ['yAxis', 'titlePlacement'], value: 'top' }
+    ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}