@cdc/chart 4.26.6 → 4.26.10

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

@@ -5,7 +5,7 @@ import heatMapAverageAgeCategoricalConfig from './_mock/heatmap-average-age-cate
 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'
+import { assertVisualizationRendered, performAndAssert, waitForPresence } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/HeatMap',
@@ -22,6 +22,40 @@ const heatMapTopYAxisLabelConfig = {
   }
 }
 
+const heatMapHorizontalScrollConfig = {
+  ...heatMapCalendarConfig,
+  title: 'Scrollable Calendar HeatMap',
+  heatmap: {
+    ...heatMapCalendarConfig.heatmap,
+    horizontalScroll: true,
+    minColumnWidth: 44
+  }
+}
+
+const heatMapHorizontalScrollBottomAxisConfig = {
+  ...heatMapAverageAgeCategoricalConfig,
+  title: 'Scrollable Bottom Axis HeatMap',
+  data: heatMapAverageAgeCategoricalConfig.data.map((row, index) =>
+    index === 0 ? { ...row, communityType: 'Extremely Long Urban Community Classification' } : row
+  ),
+  xAxis: {
+    ...heatMapAverageAgeCategoricalConfig.xAxis,
+    tickRotation: 45
+  },
+  yAxis: {
+    ...heatMapAverageAgeCategoricalConfig.yAxis,
+    label: 'Geographic region category',
+    titlePlacement: 'top'
+  },
+  heatmap: {
+    ...heatMapAverageAgeCategoricalConfig.heatmap,
+    horizontalScroll: true,
+    minColumnWidth: 220,
+    rowLabelGap: 18,
+    xAxisPosition: 'bottom'
+  }
+}
+
 const getTooltipHtmlValues = (canvasElement: HTMLElement) =>
   Array.from(canvasElement.querySelectorAll('[data-tooltip-html]')).map(
     element => element.getAttribute('data-tooltip-html') || ''
@@ -93,18 +127,17 @@ export const HeatMap_Average_Age_Categorical_Demo: Story = {
     const cityLabelBox = getSvgTextBox(chartSvg, 'Atlanta')
     const rowAxisTitle = getSvgText(chartSvg, 'City')
     const columnLabelBox = getSvgTextBox(chartSvg, 'Urban Core')
+    const xAxisLine = chartSvg.querySelector('.cdc-heatmap__x-axis-line')
     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(Number(firstCell.getAttribute('x'))).toBe(Number(xAxisLine?.getAttribute('x1')))
     expect(columnLabelGap).toBeGreaterThan(0)
     expect(rowAxisTitle?.getAttribute('transform')).toContain('rotate(-90)')
     expect(columnLabelBox?.top).toBeGreaterThanOrEqual(svgBox.top - 1)
@@ -184,4 +217,137 @@ export const HeatMap_Calendar_Demo: Story = {
   }
 }
 
+export const HeatMap_Horizontal_Scroll_Demo: Story = {
+  args: {
+    config: heatMapHorizontalScrollConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('.cdc-heatmap__scroll-area', canvasElement)
+
+    const scrollArea = canvasElement.querySelector('.cdc-heatmap__scroll-area') as HTMLElement
+    const fixedAxis = canvasElement.querySelector('.cdc-heatmap__fixed-axis-svg')
+    const fixedXAxisTitle = canvasElement.querySelector('.cdc-heatmap__fixed-x-title text') as SVGTextElement
+    const firstCell = scrollArea.querySelector('.visx-heatmap-rect') as SVGRectElement
+    const leftScrollCue = canvasElement.querySelector('.cdc-heatmap__scroll-cue--left') as HTMLElement
+    const rightScrollCue = canvasElement.querySelector('.cdc-heatmap__scroll-cue--right') as HTMLElement
+    const scrollInstructionsId = scrollArea.getAttribute('aria-describedby') || ''
+
+    expect(scrollArea).toHaveAttribute('role', 'region')
+    expect(scrollArea).toHaveAttribute('tabindex', '0')
+    expect(scrollArea.scrollLeft).toBe(0)
+    expect(scrollArea.scrollWidth).toBeGreaterThan(scrollArea.clientWidth)
+    expect(fixedAxis).toBeTruthy()
+    expect(scrollArea.contains(fixedAxis)).toBe(false)
+    expect(leftScrollCue).toHaveAttribute('aria-hidden', 'true')
+    expect(rightScrollCue).toHaveAttribute('aria-hidden', 'true')
+    expect(leftScrollCue).not.toHaveClass('is-visible')
+    expect(rightScrollCue).toHaveClass('is-visible')
+    expect(canvasElement.querySelector(`#${scrollInstructionsId}`)).toHaveTextContent(
+      'Scroll horizontally to view additional columns.'
+    )
+
+    await performAndAssert(
+      'HeatMap horizontal scrolling',
+      () => ({
+        scrollLeft: scrollArea.scrollLeft,
+        cellLeft: firstCell.getBoundingClientRect().left,
+        fixedAxisLeft: fixedAxis?.getBoundingClientRect().left || 0,
+        fixedTitleLeft: fixedXAxisTitle.getBoundingClientRect().left,
+        canScrollLeft: leftScrollCue.classList.contains('is-visible'),
+        canScrollRight: rightScrollCue.classList.contains('is-visible')
+      }),
+      () => {
+        scrollArea.scrollLeft = Math.min(200, scrollArea.scrollWidth - scrollArea.clientWidth)
+        scrollArea.dispatchEvent(new Event('scroll'))
+      },
+      (before, after) =>
+        after.scrollLeft > before.scrollLeft &&
+        after.cellLeft < before.cellLeft &&
+        Math.abs(after.fixedAxisLeft - before.fixedAxisLeft) < 1 &&
+        Math.abs(after.fixedTitleLeft - before.fixedTitleLeft) < 1 &&
+        after.canScrollLeft &&
+        after.canScrollRight
+    )
+
+    await performAndAssert(
+      'HeatMap horizontal scroll end cue',
+      () => ({
+        canScrollLeft: leftScrollCue.classList.contains('is-visible'),
+        canScrollRight: rightScrollCue.classList.contains('is-visible')
+      }),
+      () => {
+        scrollArea.scrollLeft = scrollArea.scrollWidth - scrollArea.clientWidth
+        scrollArea.dispatchEvent(new Event('scroll'))
+      },
+      (before, after) => before.canScrollRight && after.canScrollLeft && !after.canScrollRight
+    )
+  }
+}
+
+export const HeatMap_Horizontal_Scroll_Bottom_Axis_Demo: Story = {
+  args: {
+    config: heatMapHorizontalScrollBottomAxisConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('.cdc-heatmap__scroll-area', canvasElement)
+
+    const scrollArea = canvasElement.querySelector('.cdc-heatmap__scroll-area') as HTMLElement
+    const firstCell = scrollArea.querySelector('.visx-heatmap-rect') as SVGRectElement
+    const firstTickLabel = scrollArea.querySelector('.visx-axis-bottom .visx-axis-tick text') as SVGTextElement
+    const xAxisLine = scrollArea.querySelector('.cdc-heatmap__x-axis-line')
+    const fixedAxis = canvasElement.querySelector('.cdc-heatmap__fixed-axis-svg') as SVGSVGElement
+    const scrollAreaBox = scrollArea.getBoundingClientRect()
+    const firstCellBox = firstCell.getBoundingClientRect()
+    const firstTickLabelBox = firstTickLabel.getBoundingClientRect()
+
+    expect(canvasElement.querySelector('.visx-axis-bottom')).toBeTruthy()
+    expect(Number(firstCell.getAttribute('x'))).toBeGreaterThan(18)
+    expect(firstCellBox.left).toBeLessThan(scrollAreaBox.right)
+    expect(firstTickLabelBox.left).toBeGreaterThanOrEqual(scrollAreaBox.left - 1)
+    expect(xAxisLine).toHaveAttribute('x1', '0')
+    expect(getComputedStyle(fixedAxis).overflow).toBe('visible')
+  }
+}
+
+export const HeatMap_QA_Spacing_And_Cell_Values: Story = {
+  args: {
+    config: {
+      ...heatMapAverageAgeCategoricalConfig,
+      heights: { ...heatMapAverageAgeCategoricalConfig.heights, vertical: 600 },
+      xAxis: { ...heatMapAverageAgeCategoricalConfig.xAxis, size: 0, tickRotation: 0, maxTickRotation: 0 },
+      heatmap: {
+        ...heatMapAverageAgeCategoricalConfig.heatmap,
+        rowLabelGap: 18,
+        columnLabelGap: 20,
+        xAxisPosition: 'bottom',
+        showCellValues: true
+      }
+    },
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('.cdc-heatmap__cell-value', canvasElement)
+    const cell = canvasElement.querySelector('.visx-heatmap-rect') as SVGRectElement
+    const svg = cell.ownerSVGElement as SVGSVGElement
+    const rowLabel = svg.querySelector('.visx-axis-left text') as SVGTextElement
+    const title = getSvgText(svg, 'Community Type') as SVGTextElement
+    const values = Array.from(svg.querySelectorAll<SVGTextElement>('.cdc-heatmap__cell-value'))
+
+    expect(Number(cell.getAttribute('x'))).toBe(0)
+    expect(Number(rowLabel.getAttribute('x'))).toBe(-26)
+    expect(svg.getBoundingClientRect().bottom - title.getBoundingClientRect().bottom).toBeLessThan(16)
+    expect(title.getBoundingClientRect().bottom).toBeLessThan(svg.getBoundingClientRect().bottom)
+    expect(values.length).toBeGreaterThan(0)
+    for (const value of values) {
+      expect(Number(value.getAttribute('font-size'))).toBe(16)
+      expect(value.getBoundingClientRect().width).toBeLessThan(cell.getBoundingClientRect().width)
+    }
+  }
+}
+
 export default meta

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

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import axisAlignStackedBar from './_mock/legend-axis-align-stacked-bar.json'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered, openAccordion, waitForEditor } from '@cdc/core/helpers/testing'
+import { expect, waitFor, within } from 'storybook/test'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Legend/Axis Align',
+  component: Chart,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof Chart>
+
+const isolatedSeries = 'Sub-1 Rate'
+
+const getConfig = (axisAlign: boolean) =>
+  editConfigKeys(axisAlignStackedBar, [
+    { path: ['title'], value: axisAlign ? 'Sub-1 values start at zero' : 'Sub-1 values keep stack offset' },
+    { path: ['legend', 'axisAlign'], value: axisAlign },
+    { path: ['legend', 'seriesHighlight'], value: [isolatedSeries] }
+  ])
+
+const getPathYValues = (path: SVGPathElement) => {
+  const values = [...(path.getAttribute('d') || '').matchAll(/-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi)].map(match =>
+    Number(match[0])
+  )
+
+  return values.filter((_value, index) => index % 2 === 1).filter(Number.isFinite)
+}
+
+const getVisibleBarBounds = (panel: Element) => {
+  const bars = Array.from(panel.querySelectorAll<SVGPathElement>('.stack.vertical path')).filter(
+    bar => getComputedStyle(bar).display !== 'none'
+  )
+  const bounds = bars
+    .map(getPathYValues)
+    .filter(yValues => yValues.length)
+    .map(yValues => ({
+      top: Math.min(...yValues),
+      bottom: Math.max(...yValues)
+    }))
+
+  return {
+    count: bounds.length,
+    top: Math.min(...bounds.map(bound => bound.top)),
+    bottom: Math.max(...bounds.map(bound => bound.bottom)),
+    height: Math.max(...bounds.map(bound => bound.bottom)) - Math.min(...bounds.map(bound => bound.top))
+  }
+}
+
+const panelStyle = {
+  border: '1px solid #d9dfe7',
+  borderRadius: 6,
+  padding: 16,
+  minWidth: 0,
+  background: '#fff'
+}
+
+export const Stacked_Bar_Isolate_Comparison: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+        gap: 16,
+        padding: 16,
+        background: '#f7f8fa'
+      }}
+    >
+      <section style={panelStyle} data-axis-align='true'>
+        <Chart config={getConfig(true)} isEditor={false} />
+      </section>
+      <section style={panelStyle} data-axis-align='false'>
+        <Chart config={getConfig(false)} isEditor={false} />
+      </section>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    await waitFor(() => {
+      const alignedPanel = canvasElement.querySelector('[data-axis-align="true"]')
+      const offsetPanel = canvasElement.querySelector('[data-axis-align="false"]')
+
+      expect(alignedPanel).toBeTruthy()
+      expect(offsetPanel).toBeTruthy()
+
+      const alignedBarBounds = getVisibleBarBounds(alignedPanel!)
+      const offsetBarBounds = getVisibleBarBounds(offsetPanel!)
+
+      expect(alignedBarBounds.count).toBeGreaterThan(0)
+      expect(offsetBarBounds.count).toBeGreaterThan(0)
+      expect(alignedBarBounds.bottom).toBeGreaterThan(offsetBarBounds.bottom)
+      expect(alignedBarBounds.height).toBeGreaterThanOrEqual(2.5)
+    })
+  }
+}
+
+export const Sub_One_Left_Axis_100_Editor: Story = {
+  args: {
+    config: getConfig(true),
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Legend')
+    await assertVisualizationRendered(canvasElement)
+
+    const axisAlignCheckbox = canvas.getByLabelText(/align to axis on isolate/i) as HTMLInputElement
+    expect(axisAlignCheckbox).toBeChecked()
+  }
+}

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

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, fireEvent, userEvent, within } from 'storybook/test'
+import { assertVisualizationRendered, openAccordion, performAndAssert, waitForEditor } from '@cdc/core/helpers/testing'
+import Chart from '../CdcChartComponent'
+import lineRaceExample from '../../examples/feature/line/line-chart-race.json'
+
+const lineRaceStyledExample = {
+  ...lineRaceExample,
+  series: lineRaceExample.series.map((series, index) =>
+    index === 0 ? { ...series, type: 'dashed-md', weight: 7 } : series
+  )
+}
+
+const newestFirstLineRaceExample = {
+  ...lineRaceExample,
+  title: 'Newest-first population trends',
+  xAxis: {
+    ...lineRaceExample.xAxis,
+    type: 'date',
+    dataKey: 'Date',
+    dateParseFormat: '%Y-%m-%d',
+    dateDisplayFormat: '%Y-%m-%d',
+    sortByRecentDate: true
+  },
+  data: lineRaceExample.data.map(({ Year, ...row }) => ({ Date: `${Year}-01-01`, ...row }))
+}
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Line Race',
+  component: Chart,
+  parameters: { layout: 'fullscreen' }
+}
+
+export default meta
+type Story = StoryObj<typeof Chart>
+
+export const ChangesOverTime: Story = {
+  name: 'Changes Over Time',
+  args: {
+    config: lineRaceStyledExample as any,
+    isEditor: false,
+    interactionLabel: 'Population trends Line race'
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await assertVisualizationRendered(canvasElement)
+    expect(canvasElement.querySelector('.line-chart-race__frame')).toHaveTextContent('1950')
+    expect(canvasElement.querySelector('.bottom-axis')).toHaveTextContent('1950')
+    expect(canvasElement.querySelector('.component--has-accent')).not.toBeInTheDocument()
+    expect(canvas.getByRole('button', { name: 'Play' })).toBeInTheDocument()
+    expect(canvasElement.querySelector('[data-line-race-series-path]')).toHaveAttribute('stroke-dasharray', '10 5')
+    expect(canvasElement.querySelector('[data-line-race-series-path]')).toHaveAttribute('stroke-width', '7')
+    expect(canvasElement.querySelector('[data-line-race-series-path]')).not.toHaveAttribute('pathLength')
+    expect(canvasElement.querySelector('[data-line-race-reveal-path]')).toHaveAttribute('pathLength', '1')
+
+    await performAndAssert(
+      'Draw the styled Line path forward without pausing playback',
+      () => ({
+        frame: canvasElement.querySelector('.line-chart-race__frame')?.textContent?.trim(),
+        revealDash: canvasElement.querySelector('[data-line-race-reveal-path]')?.getAttribute('stroke-dasharray'),
+        seriesDash: canvasElement.querySelector('[data-line-race-series-path]')?.getAttribute('stroke-dasharray'),
+        seriesWeight: canvasElement.querySelector('[data-line-race-series-path]')?.getAttribute('stroke-width'),
+        axis: canvasElement.querySelector('.bottom-axis')?.textContent
+      }),
+      async () => userEvent.click(canvas.getByRole('button', { name: 'Play' })),
+      (before, after) =>
+        before.frame === '1950' &&
+        after.frame === '1951' &&
+        after.revealDash !== before.revealDash &&
+        after.seriesDash === before.seriesDash &&
+        after.seriesDash === '10 5' &&
+        after.seriesWeight === '7' &&
+        after.axis === before.axis
+    )
+  }
+}
+
+export const NewestFirstDates: Story = {
+  name: 'Newest-first dates',
+  args: {
+    config: newestFirstLineRaceExample as any,
+    isEditor: false,
+    interactionLabel: 'Newest-first population trends Line race'
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await assertVisualizationRendered(canvasElement)
+    expect(canvasElement.querySelector('.line-chart-race__frame')).toHaveTextContent('1955-01-01')
+
+    const getRaceState = () => {
+      const path = canvasElement.querySelector('[data-line-race-series-path]') as SVGPathElement | null
+      expect(path).not.toBeNull()
+      if (!path) throw new Error('Expected the Line race series path to render')
+      const length = path.getAttribute('d') ? path.getTotalLength() : 0
+      return {
+        frame: canvasElement.querySelector('.line-chart-race__frame')?.textContent?.trim(),
+        startsLeft: length > 0 && path.getPointAtLength(0).x < path.getPointAtLength(length).x
+      }
+    }
+
+    await performAndAssert(
+      'Advance newest-first playback while drawing left to right',
+      getRaceState,
+      async () => userEvent.click(canvas.getByRole('button', { name: 'Play' })),
+      (before, after) =>
+        before.frame === '1955-01-01' && after.frame === '1954-01-01' && before.startsLeft && after.startsLeft
+    )
+  }
+}
+
+export const GeneralSectionTests: Story = {
+  name: 'Editor: General Section',
+  parameters: { test: { timeout: 30000 } },
+  args: {
+    config: { ...lineRaceExample, visualizationSubType: 'regular' } as any,
+    isEditor: true,
+    interactionLabel: 'Line race editor story'
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'General')
+    expect(canvasElement.querySelector('.line-chart-race')).not.toBeInTheDocument()
+    const subtype = canvas.getByLabelText(/chart subtype/i) as HTMLSelectElement
+    expect(Array.from(subtype.options).map(option => option.value)).toEqual(['regular', 'racing'])
+
+    await performAndAssert(
+      'Enable Line racing mode',
+      () => Boolean(canvasElement.querySelector('.line-chart-race')),
+      async () => userEvent.selectOptions(subtype, 'racing'),
+      (_before, after) => after
+    )
+    expect(canvasElement.querySelector('.line-chart-race__frame')).toHaveTextContent('1950')
+    const timing = canvas.getByRole('slider', { name: /seconds per time step/i }) as HTMLInputElement
+    expect(timing.valueAsNumber).toBe(0.5)
+    expect(timing).toHaveAttribute('min', '0')
+    expect(timing).toHaveAttribute('max', '1.5')
+    expect(timing).toHaveAttribute('step', '0.5')
+
+    await fireEvent.change(timing, { target: { value: '0' } })
+    await performAndAssert(
+      'Apply instant playback timing',
+      () => canvasElement.querySelector('.line-chart-race__frame')?.textContent?.trim(),
+      async () => userEvent.click(canvas.getByRole('button', { name: 'Play' })),
+      (before, after) => before === '1950' && after === '1955'
+    )
+    expect(canvas.getByRole('button', { name: 'Replay' })).toBeInTheDocument()
+  }
+}