@cdc/chart 4.26.6 → 4.26.10

package/src/test/CdcChart.dataTable.test.tsx

@@ -1,25 +1,60 @@
 import React from 'react'
-import { render, screen, waitFor } from '@testing-library/react'
+import { act, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import CdcChart from '../CdcChartComponent'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 
-const dataTableProps = vi.hoisted(() => {
+vi.hoisted(() => {
   Object.defineProperty((globalThis as any).HTMLCanvasElement.prototype, 'getContext', {
     configurable: true,
     value: () => ({
       measureText: (text = '') => ({ width: String(text).length * 8 })
     })
   })
-
-  return [] as any[]
 })
 
+const chartRender = vi.hoisted(() => ({ onRender: undefined as undefined | ((config: any) => void) }))
+const dataTableRender = vi.hoisted(() => ({ onRender: undefined as undefined | ((props: any) => void) }))
+const chartResize = vi.hoisted(() => ({ resize: undefined as undefined | ((width: number) => void) }))
+
+vi.mock('resize-observer-polyfill', () => ({
+  default: class {
+    constructor(private callback: ResizeObserverCallback) {}
+    observe(target: HTMLElement) {
+      if (target.classList.contains('cove-visualization')) {
+        chartResize.resize = width =>
+          this.callback(
+            [{ target, contentRect: { width, height: 360 } } as unknown as ResizeObserverEntry],
+            this as unknown as ResizeObserver
+          )
+      }
+    }
+    unobserve() {}
+    disconnect() {}
+  }
+}))
+
+const nextRender = (signal: { onRender?: (value: any) => void }, isReady: (value: any) => boolean = () => true) =>
+  new Promise<any>(resolve => {
+    signal.onRender = value => {
+      if (!isReady(value)) return
+      signal.onRender = undefined
+      resolve(value)
+    }
+  })
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: ({ display }) => React.createElement('span', { 'data-icon': display })
+}))
+
+vi.mock('@cdc/core/helpers/fetchRemoteData', () => ({ default: vi.fn() }))
+
 vi.mock('@cdc/core/components/DataTable', async () => {
   const React = await vi.importActual<typeof import('react')>('react')
 
   return {
     default: props => {
-      dataTableProps.push(props)
+      dataTableRender.onRender?.(props)
       return React.createElement('div', { 'data-testid': 'data-table-probe' })
     }
   }
@@ -31,15 +66,118 @@ vi.mock('@visx/responsive/lib/components/ParentSize', () => ({
 
 vi.mock('../components/LinearChart', async () => {
   const React = await vi.importActual<typeof import('react')>('react')
+  const { default: ConfigContext } = await vi.importActual<typeof import('../ConfigContext')>('../ConfigContext')
 
   return {
-    default: React.forwardRef(() => React.createElement('div', { 'data-testid': 'mock-linear-chart' }))
+    default: React.forwardRef(() => {
+      const { config } = React.useContext(ConfigContext)
+      chartRender.onRender?.(config)
+      return React.createElement('div', { 'data-testid': 'mock-linear-chart' })
+    })
   }
 })
 
-describe('CdcChart data table dataset wiring', () => {
+describe('CdcChart config hydration and data table wiring', () => {
   beforeEach(() => {
-    dataTableProps.length = 0
+    chartResize.resize = undefined
+    chartRender.onRender = undefined
+    dataTableRender.onRender = undefined
+    vi.mocked(fetchRemoteData).mockReset()
+  })
+
+  it('processes remote Vega data before rendering an imported chart', async () => {
+    vi.mocked(fetchRemoteData).mockResolvedValue({
+      data: { source: [{ category: 'Remote', value: 42 }] } as any,
+      dataMetadata: {}
+    })
+    const chartWithData = nextRender(chartRender, config => config.data?.length > 0)
+
+    render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Bar',
+            dataUrl: '/vega-data.json',
+            data: [],
+            xAxis: { dataKey: 'category' },
+            series: [{ dataKey: 'value' }],
+            vegaConfig: {
+              data: [{ name: 'source', values: [{ category: 'Stale', value: 1 }] }],
+              marks: [{ type: 'rect', from: { data: 'source' } }],
+              scales: []
+            }
+          } as any
+        }
+        interactionLabel='remote-vega-chart-test'
+      />
+    )
+
+    expect((await chartWithData).data[0]).toMatchObject({ category: 'Remote', value: 42 })
+  })
+
+  it('loads palette configurations sequentially without mutating shared defaults', async () => {
+    const baseConfig = {
+      type: 'chart',
+      data: [{ category: 'A', value: 1 }],
+      xAxis: { dataKey: 'category' },
+      series: [{ dataKey: 'value' }]
+    }
+    const firstChart = nextRender(chartRender, config => config.general?.palette?.name === 'divergent_blue_cyan')
+    const first = render(
+      <CdcChart
+        config={{ ...baseConfig, visualizationType: 'Line', color: 'sequential-orange' } as any}
+        interactionLabel='first-palette-load'
+      />
+    )
+
+    const firstConfig = await firstChart
+    expect(firstConfig.general.palette).toMatchObject({
+      name: 'divergent_blue_cyan',
+      version: '2.0',
+      isReversed: false
+    })
+    expect(firstConfig.general.palette.backups).toBeUndefined()
+    expect(firstConfig.migrations?.paletteFallbackFrozen).toBeUndefined()
+    first.unmount()
+
+    const secondChart = nextRender(chartRender, config => config.general?.palette?.name === 'sequential_bluereverse')
+    render(
+      <CdcChart config={{ ...baseConfig, visualizationType: 'Bar' } as any} interactionLabel='second-palette-load' />
+    )
+
+    const secondConfig = await secondChart
+    expect(secondConfig.general.palette).toMatchObject({
+      name: 'sequential_bluereverse',
+      version: '2.0',
+      isReversed: true
+    })
+    expect(secondConfig.migrations?.paletteFallbackFrozen).toBeUndefined()
+  })
+
+  it.each([
+    ['the historical thickness for a versionless omission', {}, 0.35],
+    ['the current thickness for a current-version omission', { version: '4.26.8' }, 0.8],
+    ['an explicitly authored thickness', { barThickness: 0.8 }, 0.8]
+  ])('uses %s', async (_label, configOverrides, expectedBarThickness) => {
+    const chart = nextRender(chartRender, config => config.barThickness !== undefined)
+    render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Bar',
+            data: [{ category: 'A', value: 1 }],
+            xAxis: { dataKey: 'category' },
+            series: [{ dataKey: 'value' }],
+            ...configOverrides
+          } as any
+        }
+        interactionLabel='chart-thickness-test'
+      />
+    )
+
+    expect((await chart).barThickness).toBe(expectedBarThickness)
   })
 
   it('passes the selected dashboard dataset metadata to DataTable', async () => {
@@ -51,6 +189,7 @@ describe('CdcChart data table dataset wiring', () => {
       runtimeDataUrl: '/wcms/vizdata/chart-runtime.json'
     }
 
+    const table = nextRender(dataTableRender, props => props.dataConfig?.runtimeDataUrl !== undefined)
     render(
       <CdcChart
         config={
@@ -77,14 +216,150 @@ describe('CdcChart data table dataset wiring', () => {
       />
     )
 
-    await waitFor(() => expect(dataTableProps.length).toBeGreaterThan(0))
-
-    expect(dataTableProps.at(-1).dataConfig).toMatchObject({
+    expect((await table).dataConfig).toMatchObject({
       runtimeDataUrl: '/wcms/vizdata/chart-runtime.json'
     })
   })
 
+  it('keeps the download area mounted when the data table is hidden', async () => {
+    const table = nextRender(dataTableRender)
+    render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Bar',
+            title: 'Download-only Chart',
+            data: [{ category: 'A', value: 1 }],
+            xAxis: { dataKey: 'category' },
+            series: [{ dataKey: 'value' }],
+            table: {
+              show: false,
+              expanded: false,
+              download: true,
+              label: 'Data Table',
+              indexLabel: ''
+            }
+          } as any
+        }
+        interactionLabel='chart-download-only-test'
+      />
+    )
+
+    expect((await table).showTable).toBe(false)
+  })
+
+  it('renders the annotation table between chart subtext and the data-table area', async () => {
+    render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Bar',
+            title: 'Annotated Chart',
+            description: 'Chart subtext',
+            dataKey: 'datasetA',
+            data: [{ category: 'A', value: 1 }],
+            xAxis: { dataKey: 'category' },
+            series: [{ dataKey: 'value' }],
+            annotations: [
+              {
+                text: 'Important annotation',
+                anchorMode: 'fixed',
+                x: 50,
+                y: 50,
+                dx: 20,
+                dy: -20
+              }
+            ],
+            general: {
+              annotationDropdownText: '',
+              showAnnotationDropdown: true
+            },
+            table: {
+              show: true,
+              expanded: false,
+              download: false,
+              label: 'Data Table',
+              indexLabel: '',
+              showDataTableLink: true
+            }
+          } as any
+        }
+        isDashboard={true}
+        interactionLabel='annotation-table-order-test'
+      />
+    )
+
+    const subtext = await screen.findByText('Chart subtext')
+    const annotations = await screen.findByRole('button', { name: 'Annotations' })
+    const tableLink = await screen.findByRole('link', { name: 'datasetA (Go to Table)' })
+    const dataTable = await screen.findByTestId('data-table-probe')
+    const bodyWrap = annotations.closest('.cove-visualization__body-wrap')
+    const annotationsSection = annotations.closest('.cove-visualization__body-annotations-section')
+    const footerSection = dataTable.closest('.cove-visualization__body-footer-section')
+
+    expect(subtext.compareDocumentPosition(annotations) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(annotations.compareDocumentPosition(tableLink) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(tableLink.compareDocumentPosition(dataTable) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(annotationsSection?.parentElement).toBe(bodyWrap)
+    expect(footerSection?.parentElement).toBe(bodyWrap)
+    expect(annotationsSection?.nextElementSibling).toBe(footerSection)
+  })
+
+  it.each([
+    {
+      mobileAnnotationDisplay: undefined,
+      showAnnotationDropdown: undefined,
+      mobileVisible: true,
+      desktopVisible: false
+    },
+    { mobileAnnotationDisplay: 'symbol', showAnnotationDropdown: false, mobileVisible: true, desktopVisible: false },
+    { mobileAnnotationDisplay: 'text', showAnnotationDropdown: false, mobileVisible: false, desktopVisible: false },
+    { mobileAnnotationDisplay: 'text', showAnnotationDropdown: true, mobileVisible: true, desktopVisible: true },
+    { mobileAnnotationDisplay: 'symbol', showAnnotationDropdown: true, mobileVisible: true, desktopVisible: true }
+  ])(
+    'mounts the annotation section only when visible across resizes: %j',
+    async ({ mobileAnnotationDisplay, showAnnotationDropdown, mobileVisible, desktopVisible }) => {
+      const { container } = render(
+        <CdcChart
+          config={
+            {
+              type: 'chart',
+              visualizationType: 'Bar',
+              data: [{ category: 'A', value: 1 }],
+              xAxis: { dataKey: 'category' },
+              series: [{ dataKey: 'value' }],
+              annotations: [{ text: 'Important annotation', anchorMode: 'fixed', x: 50, y: 50, dx: 20, dy: -20 }],
+              general: { annotationDropdownText: '', mobileAnnotationDisplay, showAnnotationDropdown },
+              table: { show: true, download: false }
+            } as any
+          }
+          interactionLabel='annotation-visibility-test'
+        />
+      )
+
+      await screen.findByTestId('data-table-probe')
+      for (const [width, visible] of [
+        [1300, desktopVisible],
+        [400, mobileVisible],
+        [1300, desktopVisible]
+      ] as const) {
+        await act(async () => chartResize.resize!(width))
+        const section = container.querySelector('.cove-visualization__body-annotations-section')
+        if (visible) {
+          expect(section).toBeInTheDocument()
+          expect(screen.getByRole('button', { name: 'Annotations' })).toBeVisible()
+        } else {
+          expect(section).not.toBeInTheDocument()
+          expect(screen.queryByRole('button', { name: 'Annotations' })).not.toBeInTheDocument()
+        }
+      }
+    }
+  )
+
   it('keeps chart footnotes visible when the data table is collapsed by default', async () => {
+    const table = nextRender(dataTableRender, props => props.expandDataTable === false)
     render(
       <CdcChart
         config={
@@ -112,11 +387,304 @@ describe('CdcChart data table dataset wiring', () => {
       />
     )
 
-    await waitFor(() => {
-      expect(dataTableProps.at(-1)?.expandDataTable).toBe(false)
-    })
+    expect((await table).expandDataTable).toBe(false)
 
     expect(await screen.findByText('Legacy chart footnote')).toBeInTheDocument()
     expect(await screen.findByText('Structured chart footnote')).toBeInTheDocument()
   })
+
+  it('passes custom category order to the chart-owned data table runtime data', async () => {
+    const table = nextRender(dataTableRender, props => props.runtimeData?.length === 4)
+    render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Bar',
+            title: 'Custom Category Order Chart',
+            data: [
+              { category: 'A', value: 1 },
+              { category: 'D', value: 4 },
+              { category: 'C', value: 3 },
+              { category: 'L', value: 12 }
+            ],
+            xAxis: {
+              type: 'categorical',
+              dataKey: 'category',
+              categoryOrderType: 'custom',
+              categoryOrder: ['A', 'C', 'D', 'L']
+            },
+            series: [{ dataKey: 'value' }],
+            table: {
+              show: true,
+              expanded: true,
+              download: true,
+              label: 'Data Table',
+              indexLabel: ''
+            }
+          } as any
+        }
+        interactionLabel='chart-category-order-table-test'
+      />
+    )
+
+    expect((await table).runtimeData.map(row => row.category)).toEqual(['A', 'C', 'D', 'L'])
+  })
+
+  it('derives Box Plot table rows from prepared data before rendering the DataTable', async () => {
+    const formattedData = [
+      { Group: 'Group A', Score: '8' },
+      { Group: 'Group A', Score: '24' },
+      { Group: 'Group A', Score: '32' }
+    ]
+
+    const table = nextRender(dataTableRender, props => props.config?.boxplot?.plots?.length === 1)
+    render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Box Plot',
+            title: 'Prepared Box Plot',
+            formattedData,
+            xAxis: { type: 'categorical', dataKey: 'Group' },
+            yAxis: { dataKey: 'Score' },
+            series: [{ dataKey: 'Score' }],
+            table: {
+              show: true,
+              expanded: true,
+              download: true,
+              label: 'Data Table',
+              indexLabel: ''
+            }
+          } as any
+        }
+        interactionLabel='chart-box-plot-table-test'
+      />
+    )
+
+    const tableProps = await table
+    expect(tableProps.config.boxplot.plots).toHaveLength(1)
+
+    expect(tableProps.config.boxplot.categories).toEqual(['Group A'])
+    expect(tableProps.config.boxplot.plots[0]).toMatchObject({
+      columnCategory: 'Group A',
+      columnCount: 3,
+      columnMax: 32,
+      columnMin: 8
+    })
+  })
+
+  it('updates metadata-backed chart title and text when dataMetadata changes and data does not', async () => {
+    const data = [{ category: 'A', value: 1 }]
+    const config = {
+      type: 'chart',
+      visualizationType: 'Bar',
+      title: 'Chart {{source}}',
+      introText: 'Intro {{source}}',
+      legend: {
+        label: 'Legend <strong>{{source}}</strong>',
+        description: 'Legend description <strong>{{source}}</strong>'
+      },
+      data,
+      dataMetadata: {},
+      enableMarkupVariables: true,
+      markupVariables: [
+        {
+          sourceType: 'metadata',
+          name: 'Source',
+          tag: '{{source}}',
+          metadataKey: 'source',
+          conditions: [],
+          addCommas: false
+        }
+      ],
+      xAxis: { dataKey: 'category' },
+      series: [{ dataKey: 'value' }],
+      table: {
+        show: false,
+        expanded: false,
+        label: 'Data Table',
+        indexLabel: ''
+      }
+    } as any
+
+    const { container, rerender } = render(<CdcChart config={config} interactionLabel='chart-metadata-test' />)
+
+    expect(await screen.findByText('Chart')).toBeInTheDocument()
+
+    rerender(
+      <CdcChart
+        config={{
+          ...config,
+          dataMetadata: { source: 'June file' }
+        }}
+        interactionLabel='chart-metadata-test'
+      />
+    )
+
+    expect(await screen.findByText('Chart June file')).toBeInTheDocument()
+    expect(screen.getByText('Intro June file')).toBeInTheDocument()
+    expect(container.textContent).toContain('Legend June file')
+    expect(container.textContent).toContain('Legend description June file')
+    expect(screen.getAllByText('June file', { selector: 'strong' }).length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('parses inline markup in top y-axis titles', async () => {
+    const { container } = render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Bar',
+            data: [{ category: 'A', value: 1 }],
+            xAxis: { dataKey: 'category' },
+            yAxis: {
+              titlePlacement: 'top',
+              label:
+                '<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><rect width="12" height="12" fill="#56b4e9"></rect></svg> Number of measles cases'
+            },
+            series: [{ dataKey: 'value' }],
+            table: {
+              show: false,
+              expanded: false,
+              label: 'Data Table',
+              indexLabel: ''
+            }
+          } as any
+        }
+        interactionLabel='chart-top-y-axis-title-test'
+      />
+    )
+
+    const topTitle = await screen.findByText('Number of measles cases')
+
+    expect(topTitle.closest('.y-axis-top-title')).toBeTruthy()
+    expect(container.querySelector('.y-axis-top-title svg rect')?.getAttribute('fill')).toBe('#56b4e9')
+    expect(container.querySelector('.y-axis-top-title')?.textContent).not.toContain('<svg')
+  })
+
+  it('renders a right-only top y-axis title above the chart and parses inline markup', async () => {
+    const { container } = render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Combo',
+            data: [{ category: 'A', left: 1, right: 2 }],
+            xAxis: { dataKey: 'category' },
+            yAxis: {
+              titlePlacement: 'side',
+              label: 'Left title',
+              rightTitlePlacement: 'top',
+              rightLabel:
+                '<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><rect width="12" height="12" fill="#d55e00"></rect></svg> Right rate'
+            },
+            series: [
+              { dataKey: 'left', axis: 'Left', type: 'Bar' },
+              { dataKey: 'right', axis: 'Right', type: 'Line' }
+            ],
+            table: {
+              show: false,
+              expanded: false,
+              label: 'Data Table',
+              indexLabel: ''
+            }
+          } as any
+        }
+        interactionLabel='chart-top-right-y-axis-title-test'
+      />
+    )
+
+    const topTitle = await screen.findByText('Right rate')
+
+    expect(topTitle.closest('.y-axis-top-title--right')).toBeTruthy()
+    expect(container.querySelector('.y-axis-top-title--right svg rect')?.getAttribute('fill')).toBe('#d55e00')
+    expect(container.querySelector('.y-axis-top-title-row--split')).toBeFalsy()
+  })
+
+  it('processes markup variables in right top y-axis titles', async () => {
+    render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Combo',
+            data: [{ category: 'A', left: 1, right: 2 }],
+            dataMetadata: { source: 'June file' },
+            enableMarkupVariables: true,
+            markupVariables: [
+              {
+                sourceType: 'metadata',
+                name: 'Source',
+                tag: '{{source}}',
+                metadataKey: 'source',
+                conditions: [],
+                addCommas: false
+              }
+            ],
+            xAxis: { dataKey: 'category' },
+            yAxis: {
+              titlePlacement: 'side',
+              label: 'Left title',
+              rightTitlePlacement: 'top',
+              rightLabel: 'Right {{source}} rate'
+            },
+            series: [
+              { dataKey: 'left', axis: 'Left', type: 'Bar' },
+              { dataKey: 'right', axis: 'Right', type: 'Line' }
+            ],
+            table: {
+              show: false,
+              expanded: false,
+              label: 'Data Table',
+              indexLabel: ''
+            }
+          } as any
+        }
+        interactionLabel='chart-top-right-y-axis-markup-variable-test'
+      />
+    )
+
+    expect(await screen.findByText('Right June file rate')).toBeInTheDocument()
+  })
+
+  it('renders left and right top y-axis titles in a shared split row', async () => {
+    const { container } = render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Combo',
+            data: [{ category: 'A', left: 1, right: 2 }],
+            xAxis: { dataKey: 'category' },
+            yAxis: {
+              titlePlacement: 'top',
+              label: 'Left cases',
+              rightTitlePlacement: 'top',
+              rightLabel: 'Right rate'
+            },
+            series: [
+              { dataKey: 'left', axis: 'Left', type: 'Bar' },
+              { dataKey: 'right', axis: 'Right', type: 'Line' }
+            ],
+            table: {
+              show: false,
+              expanded: false,
+              label: 'Data Table',
+              indexLabel: ''
+            }
+          } as any
+        }
+        interactionLabel='chart-both-top-y-axis-title-test'
+      />
+    )
+
+    await screen.findByText('Left cases')
+    await screen.findByText('Right rate')
+
+    const titleRow = container.querySelector('.y-axis-top-title-row')
+    expect(titleRow?.classList.contains('y-axis-top-title-row--split')).toBe(true)
+    expect(titleRow?.querySelectorAll('.y-axis-top-title')).toHaveLength(2)
+  })
 })