@cdc/chart 4.26.7 → 4.26.10

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

@@ -0,0 +1,417 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import Chart from '../CdcChartComponent'
+import sankeyConfig from './_mock/sankey_mock.json'
+import {
+  assertVisualizationRendered,
+  openAccordion,
+  performAndAssert,
+  waitForEditor,
+  waitForOptionsToPopulate,
+  waitForPresence
+} from '@cdc/core/helpers/testing'
+
+const tabularSankeyRows = sankeyConfig.data
+const expectedPaletteColors = {
+  node: '#032659',
+  link: '#dbe8f7'
+}
+
+const normalizeColor = (color: string | null) => color?.toLowerCase() || ''
+
+const longLabelRows = [
+  {
+    source: 'Public health program referral source with a long label',
+    target: 'Eligibility review and documentation step',
+    value: '1,200'
+  },
+  {
+    source: 'Public health program referral source with a long label',
+    target: 'Not eligible after review',
+    value: 240
+  },
+  {
+    source: 'Eligibility review and documentation step',
+    target: 'Enrolled in follow up services',
+    value: 820
+  },
+  {
+    source: 'Eligibility review and documentation step',
+    target: 'Declined services after review',
+    value: 140
+  },
+  {
+    source: 'Ignored zero value',
+    target: 'Should not render',
+    value: 0
+  },
+  {
+    source: 'Ignored invalid value',
+    target: 'Should not render',
+    value: 'not available'
+  }
+]
+
+const mappedColumnRows = [
+  { Step: 'Intake', Next: 'Eligible', People: 12 },
+  { Step: 'Eligible', Next: 'Enrolled', People: 9 },
+  { Step: 'Eligible', Next: 'Declined', People: 3 }
+]
+
+const assertSankeyRendered = async (
+  canvasElement: HTMLElement,
+  expectedRejectedRows = 0,
+  expectedScrollable = false,
+  expectedLabelSides: Record<string, 'left' | 'right'> = {},
+  expectedColors?: { node: string; link: string }
+) => {
+  await assertVisualizationRendered(canvasElement)
+
+  const svg = (await waitForPresence('.sankey-chart__diagram', canvasElement)) as SVGElement
+  const scrollArea = (await waitForPresence('.sankey-chart__scroll-area', canvasElement)) as HTMLElement
+  const nodes = Array.from(svg.querySelectorAll('.sankey-chart__node'))
+  const links = Array.from(svg.querySelectorAll('.sankey-chart__link'))
+  const labels = Array.from(svg.querySelectorAll('.sankey-chart__label'))
+  const svgRect = svg.getBoundingClientRect()
+  const scrollAreaRect = scrollArea.getBoundingClientRect()
+
+  expect(nodes.length).toBeGreaterThan(0)
+  expect(links.length).toBeGreaterThan(0)
+  expect(labels.length).toBe(nodes.length)
+  expect(svgRect.width).toBeGreaterThan(250)
+  expect(svgRect.height).toBeGreaterThan(300)
+  expect(Number(svg.getAttribute('data-rejected-row-count'))).toBe(expectedRejectedRows)
+
+  if (expectedScrollable) {
+    expect(scrollArea.scrollWidth).toBeGreaterThan(scrollArea.clientWidth)
+    expect(svgRect.width).toBeGreaterThan(scrollAreaRect.width)
+  } else {
+    expect(scrollArea.scrollWidth).toBeLessThanOrEqual(scrollArea.clientWidth + 1)
+  }
+
+  labels.forEach(label => {
+    const labelRect = label.getBoundingClientRect()
+    expect(labelRect.width).toBeGreaterThan(0)
+    expect(labelRect.left).toBeGreaterThanOrEqual(svgRect.left - 1)
+    expect(labelRect.right).toBeLessThanOrEqual(svgRect.right + 1)
+  })
+
+  Object.entries(expectedLabelSides).forEach(([nodeId, side]) => {
+    const label = labels.find(label => label.getAttribute('data-node-id') === nodeId)
+    expect(label?.getAttribute('data-label-side')).toBe(side)
+  })
+
+  if (expectedColors) {
+    nodes.forEach(node => {
+      expect(normalizeColor(node.getAttribute('fill'))).toBe(expectedColors.node)
+    })
+    links.forEach(link => {
+      expect(normalizeColor(link.getAttribute('stroke'))).toBe(expectedColors.link)
+    })
+  }
+}
+
+const expectedTabularLabelSides = {
+  Screened: 'left',
+  Eligible: 'right',
+  Enrolled: 'right',
+  'Completed Treatment': 'right',
+  Ineligible: 'right',
+  Declined: 'right',
+  'Dropped Out': 'right',
+  Recovered: 'right',
+  'Ongoing Care': 'right'
+} as const
+
+const getSankeyNodeIds = (canvasElement: HTMLElement) =>
+  Array.from(canvasElement.querySelectorAll('.sankey-chart__node'))
+    .map(node => node.getAttribute('data-node-id') || '')
+    .filter(Boolean)
+    .sort()
+
+const getSankeyTooltipAttributeCount = (canvasElement: HTMLElement) =>
+  Array.from(canvasElement.querySelectorAll('.sankey-chart__node, .sankey-chart__link')).filter(element =>
+    element.getAttribute('data-tooltip-html')
+  ).length
+
+const getSankeyHighlightState = (canvasElement: HTMLElement) => {
+  const nodeOpacity = Object.fromEntries(
+    Array.from(canvasElement.querySelectorAll('.sankey-chart__node')).map(node => [
+      node.getAttribute('data-node-id') || '',
+      node.getAttribute('fill-opacity') || ''
+    ])
+  )
+  const linkOpacity = Object.fromEntries(
+    Array.from(canvasElement.querySelectorAll('.sankey-chart__link')).map(link => [
+      `${link.getAttribute('data-link-source-id')}->${link.getAttribute('data-link-target-id')}`,
+      link.getAttribute('stroke-opacity') || ''
+    ])
+  )
+
+  return { linkOpacity, nodeOpacity }
+}
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Sankey',
+  component: Chart
+}
+
+export default meta
+type Story = StoryObj<typeof Chart>
+
+export const Sankey_TabularImport: Story = {
+  args: {
+    config: {
+      ...sankeyConfig,
+      title: 'Patient Care Pathway',
+      data: tabularSankeyRows
+    },
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertSankeyRendered(canvasElement, 0, false, expectedTabularLabelSides, expectedPaletteColors)
+
+    const screenedEligibleLink = canvasElement.querySelector(
+      '[data-link-source-id="Screened"][data-link-target-id="Eligible"]'
+    )
+    expect(screenedEligibleLink?.getAttribute('data-tooltip-html')).toBe(`<div class="sankey-chart__tooltip">
+  <span class="sankey-chart__tooltip--tooltip-header">Screened → Eligible</span>
+  <span>850</span>
+</div>`)
+
+    await performAndAssert(
+      'Sankey downstream highlight',
+      () => getSankeyHighlightState(canvasElement),
+      async () => {
+        const enrolledNode = canvasElement.querySelector('[data-node-id="Enrolled"]') as SVGRectElement
+        await userEvent.click(enrolledNode)
+      },
+      (_before, after) =>
+        ['Enrolled', 'Completed Treatment', 'Dropped Out', 'Recovered', 'Ongoing Care'].every(
+          nodeId => after.nodeOpacity[nodeId] === '1'
+        ) &&
+        ['Screened', 'Eligible', 'Ineligible', 'Declined'].every(nodeId => after.nodeOpacity[nodeId] === '0.1') &&
+        [
+          'Enrolled->Completed Treatment',
+          'Enrolled->Dropped Out',
+          'Completed Treatment->Recovered',
+          'Completed Treatment->Ongoing Care'
+        ].every(linkId => after.linkOpacity[linkId] === '0.6') &&
+        ['Screened->Eligible', 'Screened->Ineligible', 'Eligible->Enrolled', 'Eligible->Declined'].every(
+          linkId => after.linkOpacity[linkId] === '0.1'
+        )
+    )
+  }
+}
+
+export const Sankey_NarrowViewport: Story = {
+  decorators: [
+    Story => (
+      <div style={{ width: '360px' }}>
+        <Story />
+      </div>
+    )
+  ],
+  args: {
+    config: {
+      ...sankeyConfig,
+      title: 'Patient Care Pathway - Narrow',
+      data: tabularSankeyRows,
+      sankey: {
+        ...sankeyConfig.sankey,
+        horizontalScrollWidth: 900
+      }
+    },
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertSankeyRendered(canvasElement, 0, true, expectedTabularLabelSides, expectedPaletteColors)
+  }
+}
+
+export const Sankey_MediumViewportFullWidthWhenUnset: Story = {
+  decorators: [
+    Story => (
+      <div style={{ width: '760px' }}>
+        <Story />
+      </div>
+    )
+  ],
+  args: {
+    config: {
+      ...sankeyConfig,
+      title: 'Patient Care Pathway - Medium Full Width',
+      data: tabularSankeyRows,
+      sankey: {
+        ...sankeyConfig.sankey,
+        horizontalScrollWidth: ''
+      }
+    },
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertSankeyRendered(canvasElement, 0, false, expectedTabularLabelSides, expectedPaletteColors)
+  }
+}
+
+export const Sankey_MediumViewport: Story = {
+  decorators: [
+    Story => (
+      <div style={{ width: '760px' }}>
+        <Story />
+      </div>
+    )
+  ],
+  args: {
+    config: {
+      ...sankeyConfig,
+      title: 'Patient Care Pathway - Medium',
+      data: tabularSankeyRows,
+      sankey: {
+        ...sankeyConfig.sankey,
+        horizontalScrollWidth: 900
+      }
+    },
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertSankeyRendered(canvasElement, 0, true, expectedTabularLabelSides, expectedPaletteColors)
+  }
+}
+
+export const Sankey_CustomHorizontalScrollWidth: Story = {
+  decorators: [
+    Story => (
+      <div style={{ width: '980px' }}>
+        <Story />
+      </div>
+    )
+  ],
+  args: {
+    config: {
+      ...sankeyConfig,
+      title: 'Patient Care Pathway - Custom Scroll Width',
+      data: tabularSankeyRows,
+      sankey: {
+        ...sankeyConfig.sankey,
+        horizontalScrollWidth: 1100
+      }
+    },
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertSankeyRendered(canvasElement, 0, true, expectedTabularLabelSides, expectedPaletteColors)
+  }
+}
+
+export const Sankey_LongLabelsAndInvalidRows: Story = {
+  args: {
+    config: {
+      ...sankeyConfig,
+      title: 'Sankey with Long Labels and Invalid Rows',
+      data: longLabelRows
+    },
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertSankeyRendered(canvasElement, 2)
+  }
+}
+
+export const Sankey_TooltipsDisabled: Story = {
+  args: {
+    config: {
+      ...sankeyConfig,
+      title: 'Sankey - Tooltips Disabled',
+      data: tabularSankeyRows,
+      enableTooltips: false
+    },
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertSankeyRendered(canvasElement)
+    expect(getSankeyTooltipAttributeCount(canvasElement)).toBe(0)
+  }
+}
+
+export const Sankey_DataColumnControls: Story = {
+  args: {
+    config: {
+      ...sankeyConfig,
+      title: 'Sankey - Data Column Controls',
+      data: mappedColumnRows,
+      sankey: {
+        ...sankeyConfig.sankey,
+        horizontalScrollWidth: '',
+        columns: {
+          source: '',
+          target: '',
+          value: ''
+        }
+      }
+    },
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Sankey')
+
+    const sourceSelect = canvas.getByLabelText('Source Column') as HTMLSelectElement
+    await waitForOptionsToPopulate(sourceSelect, 4)
+    const scrollWidthInput = canvas.getByLabelText('Horizontal Scroll Width') as HTMLInputElement
+    expect(scrollWidthInput.value).toBe('')
+
+    await userEvent.type(scrollWidthInput, '640')
+    expect(scrollWidthInput.value).toBe('640')
+
+    await performAndAssert(
+      'Sankey data column mapping',
+      () => getSankeyNodeIds(canvasElement),
+      async () => {
+        await userEvent.selectOptions(canvas.getByLabelText('Source Column'), 'Step')
+        await userEvent.selectOptions(canvas.getByLabelText('Target Column'), 'Next')
+        await userEvent.selectOptions(canvas.getByLabelText('Value Column'), 'People')
+      },
+      (before, after) =>
+        before.length === 0 && ['Declined', 'Eligible', 'Enrolled', 'Intake'].every(nodeId => after.includes(nodeId))
+    )
+  }
+}
+
+export const Sankey_TooltipControl: Story = {
+  args: {
+    config: {
+      ...sankeyConfig,
+      title: 'Sankey - Tooltip Control',
+      data: tabularSankeyRows,
+      enableTooltips: false
+    },
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Sankey')
+    const scrollWidthInput = canvas.getByLabelText('Horizontal Scroll Width') as HTMLInputElement
+
+    await performAndAssert(
+      'Sankey horizontal scroll width input',
+      () => scrollWidthInput.value,
+      async () => {
+        await userEvent.clear(scrollWidthInput)
+        await userEvent.type(scrollWidthInput, '640')
+      },
+      (before, after) => before === '900' && after === '640'
+    )
+
+    await performAndAssert(
+      'Sankey tooltip toggle',
+      () => getSankeyTooltipAttributeCount(canvasElement),
+      async () => {
+        await userEvent.click(canvas.getByLabelText('Show Tooltips'))
+      },
+      (before, after) => before === 0 && after > 0
+    )
+  }
+}

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

@@ -16,6 +16,11 @@ const assignedColors = {
   charlie: '#5A8E3F'
 }
 
+const comboColors = {
+  bars: '#0057B7',
+  line: '#E69F00'
+}
+
 const normalizeColor = (color: string) => {
   const swatch = document.createElement('div')
   swatch.style.color = color
@@ -180,4 +185,46 @@ export const FilteredSeriesKeepAssignedColors: Story = {
   }
 }
 
+const comboWithIsolatedLinePointConfig = {
+  ...config,
+  title: 'Combo Chart Isolated Point Color',
+  visualizationType: 'Combo',
+  lineDatapointStyle: 'hidden',
+  general: {
+    ...config.general,
+    palette: {
+      ...config.general.palette,
+      colorAssignments: [
+        { key: 'bars', color: comboColors.bars },
+        { key: 'line', color: comboColors.line }
+      ]
+    }
+  },
+  legend: {
+    ...config.legend,
+    hide: true
+  },
+  series: [
+    { dataKey: 'bars', name: 'Bars', type: 'Bar', axis: 'Left', tooltip: true },
+    { dataKey: 'line', name: 'Line', type: 'Line', axis: 'Left', tooltip: true }
+  ],
+  filters: [],
+  data: [
+    { week: '2024-01-01', bars: 10, line: 20 },
+    { week: '2024-01-08', bars: 12, line: null },
+    { week: '2024-01-15', bars: 14, line: null }
+  ]
+}
+
+export const ComboIsolatedPointUsesLineColor: Story = {
+  args: {
+    config: comboWithIsolatedLinePointConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await expectVisibleSeriesColors(canvasElement, [['0', comboColors.line]])
+  }
+}
+
 export default meta

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

@@ -0,0 +1,137 @@
+import { useMemo } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, waitFor } from 'storybook/test'
+
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import Chart from '../CdcChartComponent'
+import smallMultiplesBars from './_mock/small_multiples/small_multiples_bars.json'
+import type { ChartConfig } from '../types/ChartConfig'
+
+const sourceTileValues = ['10', '2', '1', '20', '3']
+const expectedNumericAwareOrder = ['Week 1', 'Week 2', 'Week 3', 'Week 10', 'Week 20']
+
+const numericTileRows = sourceTileValues.map((week, index) => ({
+  Week: week,
+  Date: 'Current period',
+  Cases: String((index + 1) * 10)
+}))
+
+const tileTitles = sourceTileValues.reduce<Record<string, string>>((titles, week) => {
+  titles[week] = `Week ${week}`
+  return titles
+}, {})
+
+const getConfig = (): ChartConfig =>
+  editConfigKeys(smallMultiplesBars, [
+    { path: ['title'], value: 'Small Multiples Numeric Tile Order' },
+    { path: ['showTitle'], value: true },
+    { path: ['visualizationSubType'], value: 'regular' },
+    { path: ['data'], value: numericTileRows },
+    { path: ['formattedData'], value: numericTileRows },
+    { path: ['dataUrl'], value: '' },
+    { path: ['runtimeDataUrl'], value: '' },
+    { path: ['filters'], value: [] },
+    { path: ['table', 'show'], value: false },
+    { path: ['xAxis', 'dataKey'], value: 'Date' },
+    { path: ['xAxis', 'type'], value: 'categorical' },
+    { path: ['xAxis', 'label'], value: 'Date' },
+    { path: ['yAxis', 'label'], value: 'Cases' },
+    { path: ['yAxis', 'hideAxis'], value: false },
+    { path: ['yAxis', 'hideTicks'], value: false },
+    { path: ['yAxis', 'numTicks'], value: '3' },
+    {
+      path: ['series'],
+      value: [{ dataKey: 'Cases', type: 'Bar', axis: 'Left', tooltip: true }]
+    },
+    { path: ['smallMultiples', 'mode'], value: 'by-column' },
+    { path: ['smallMultiples', 'tileColumn'], value: 'Week' },
+    { path: ['smallMultiples', 'tileOrderType'], value: 'asc' },
+    { path: ['smallMultiples', 'tileOrder'], value: [] },
+    { path: ['smallMultiples', 'tileTitles'], value: tileTitles },
+    { path: ['smallMultiples', 'tilesPerRowDesktop'], value: 5 },
+    { path: ['smallMultiples', 'tilesPerRowMobile'], value: 1 }
+  ]) as ChartConfig
+
+const getRenderedTileTitles = (canvasElement: HTMLElement) =>
+  Array.from(canvasElement.querySelectorAll('.small-multiple-tile .tile-title')).map(
+    title => title.textContent?.trim() || ''
+  )
+
+function SmallMultiplesNumericTileOrderRegression() {
+  const config = useMemo(() => getConfig(), [])
+
+  return (
+    <div
+      style={{
+        background: '#f7f8fa',
+        display: 'grid',
+        gap: 16,
+        padding: 16
+      }}
+    >
+      <section
+        style={{
+          background: '#fff',
+          border: '1px solid #d9dfe7',
+          borderRadius: 6,
+          padding: 16
+        }}
+      >
+        <Chart config={config} isEditor={true} interactionLabel='small-multiples-numeric-tile-order-regression' />
+      </section>
+
+      <section
+        aria-label='Small multiples numeric tile order diagnostic'
+        style={{
+          background: '#fff',
+          border: '1px solid #d9dfe7',
+          borderRadius: 6,
+          display: 'grid',
+          gap: 8,
+          padding: 12
+        }}
+      >
+        <div>
+          <strong>Input tile values:</strong> <span>{sourceTileValues.join(', ')}</span>
+        </div>
+        <div>
+          <strong>Expected numeric-aware order:</strong> <span>{expectedNumericAwareOrder.join(', ')}</span>
+        </div>
+        <div>
+          <strong>Expected rendered order:</strong>{' '}
+          <span data-testid='small-multiples-expected-order'>{expectedNumericAwareOrder.join(', ')}</span>
+        </div>
+        <div data-testid='small-multiples-order-status'>
+          <strong>Status:</strong> Numeric order preserved
+        </div>
+      </section>
+    </div>
+  )
+}
+
+const meta: Meta<typeof SmallMultiplesNumericTileOrderRegression> = {
+  title: 'Components/Templates/Chart/Small Multiples',
+  component: SmallMultiplesNumericTileOrderRegression,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof SmallMultiplesNumericTileOrderRegression>
+
+export const Numeric_Tile_Values_Render_In_Numeric_Aware_Order: Story = {
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    await waitFor(() => {
+      const renderedTileTitles = getRenderedTileTitles(canvasElement)
+
+      expect(renderedTileTitles).toEqual(expectedNumericAwareOrder)
+      expect(canvasElement.querySelector('[data-testid="small-multiples-order-status"]')?.textContent).toContain(
+        'Numeric order preserved'
+      )
+    })
+  }
+}

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import Chart from '../CdcChartComponent'
+import pairedBar from './_mock/paired-bar.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Tooltip/Series Labels',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Paired_Bar_Custom_Series_Labels: Story = {
+  args: {
+    config: {
+      ...pairedBar,
+      title: 'Paired Bar Custom Series Labels',
+      series: pairedBar.series.map(series => ({
+        ...series,
+        name: series.dataKey === 'Male' ? 'Reported Males' : 'Reported Females'
+      })),
+      columns: {
+        Male: { name: 'Male', label: 'Male Rate' },
+        Female: { name: 'Female', label: 'Female Rate' }
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    const firstBarTooltip = canvasElement.querySelector('.bar.group-1')?.getAttribute('data-tooltip-html') || ''
+    const secondBarTooltip = canvasElement.querySelector('.bar.group-2')?.getAttribute('data-tooltip-html') || ''
+
+    expect(firstBarTooltip).toContain('Male Rate:')
+    expect(firstBarTooltip).not.toContain('Reported Males:')
+    expect(secondBarTooltip).toContain('Female Rate:')
+    expect(secondBarTooltip).not.toContain('Reported Females:')
+    expect(`${firstBarTooltip}${secondBarTooltip}`).not.toContain('undefined:')
+  }
+}
+
+export default meta

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

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, within } from 'storybook/test'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import Chart from '../CdcChart'
+import config from '../../examples/vega-remote.json'
+import remoteDataUrl from '../../examples/__data__/vega-remote-data.json?url'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Vega Remote Data',
+  component: Chart
+}
+
+export default meta
+
+type Story = StoryObj<typeof Chart>
+
+export const ProcessesFetchedData: Story = {
+  args: {
+    config: { ...config, dataUrl: remoteDataUrl } as any,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    const table = await within(canvasElement).findByRole('table', { name: /data table showing data for the chart/i })
+    expect(within(table).getByRole('columnheader', { name: 'Alpha' })).toBeVisible()
+    expect(within(table).getByRole('gridcell', { name: '20' })).toBeVisible()
+    expect(within(table).getByRole('columnheader', { name: 'Beta' })).toBeVisible()
+    expect(within(table).getByRole('gridcell', { name: '40' })).toBeVisible()
+  }
+}