@cdc/chart 4.26.3 → 4.26.5

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.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.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.SmallMultiples.smoke.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import smallMultiplesBars from './_mock/small_multiples/small_multiples_bars.json'
+import smallMultiplesBigDataBars from './_mock/small_multiples/small_multiples_big_data_bars.json'
+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'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Small Multiples',
+  component: 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,
+    isEditor: false
+  },
+  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)
+  }
+}
+
+export const smallMultiples_BigDataBars: Story = {
+  args: {
+    config: smallMultiplesBigDataBars,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+export const smallMultiples_LinesColors: Story = {
+  args: {
+    config: smallMultiplesLinesColors,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+export const smallMultiples_Lines: Story = {
+  args: {
+    config: smallMultiplesLines,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    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,
+    isEditor: false
+  },
+  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.stories.tsx → Chart.smoke.stories.tsx}

@@ -14,6 +14,7 @@ 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, waitForPresence } from '@cdc/core/helpers/testing'
 import { expect } from 'storybook/test'
@@ -171,4 +172,15 @@ export const Metadata_Backward_Compat_Plain_Array: Story = {
   }
 }
 
+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

package/src/_stories/{ChartAxisTitles.stories.tsx → 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)
+  }
+}