@cdc/chart 4.26.4 → 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.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

@@ -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/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)
+  }
+}

package/src/_stories/ChartBar.Editor.stories.tsx

@@ -848,6 +848,61 @@ export const BarLeftValueAxisTests: Story = {
       }
     )
 
+    const getAxisTitlePlacementVisualization = () => {
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
+      const svg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
+      const sideLabelCandidates = svg ? Array.from(svg.querySelectorAll('text.y-label')) : []
+      const sideLabel = sideLabelCandidates.find(el => (el.textContent?.trim() || '').length > 0) || null
+      const topLabel = chartContainer?.querySelector('.y-axis-top-title')
+
+      return {
+        hasSideLabel: !!sideLabel,
+        sideLabelTransform: sideLabel?.getAttribute('transform') || '',
+        sideLabelText: sideLabel?.textContent?.trim() || '',
+        hasTopLabel: !!topLabel,
+        topLabelText: topLabel?.textContent?.trim() || ''
+      }
+    }
+
+    const titlePlacementSelect = canvas.getByLabelText(/label placement/i) as HTMLSelectElement
+
+    expect(yAxisLabelInput.getAttribute('maxlength')).toBe('35')
+
+    await performAndAssert(
+      'Switch Title Placement to Top',
+      getAxisTitlePlacementVisualization,
+      async () => {
+        await userEvent.selectOptions(titlePlacementSelect, 'top')
+      },
+      (before, after) => {
+        expect(titlePlacementSelect.value).toBe('top')
+        expect(yAxisLabelInput.getAttribute('maxlength')).toBeNull()
+        expect(after.hasTopLabel).toBe(true)
+        expect(after.topLabelText).toBe('Y-Axis')
+        expect(after.hasSideLabel).toBe(false)
+
+        return true
+      }
+    )
+
+    await performAndAssert(
+      'Switch Title Placement back to Side',
+      getAxisTitlePlacementVisualization,
+      async () => {
+        await userEvent.selectOptions(titlePlacementSelect, 'side')
+      },
+      (before, after) => {
+        expect(titlePlacementSelect.value).toBe('side')
+        expect(yAxisLabelInput.getAttribute('maxlength')).toBe('35')
+        expect(after.hasTopLabel).toBe(false)
+        expect(after.hasSideLabel).toBe(true)
+        expect(after.sideLabelText).toBe('Y-Axis')
+        expect(after.sideLabelTransform).toContain('rotate(-90)')
+
+        return true
+      }
+    )
+
     // ============================================================================
     // TEST: Inline Label Field
     // Tests visualization output changes when entering custom inline label text
@@ -1529,9 +1584,13 @@ export const BarRegionsSectionTests: Story = {
         const textColors = canvas.queryAllByLabelText(/text color/i)
         const backgrounds = canvas.queryAllByLabelText(/background/i)
         const minRegionTypes = canvas.queryAllByLabelText(/minimum region type/i)
+        const textColor = textColors[0] as HTMLInputElement | undefined
+        const background = backgrounds[0] as HTMLInputElement | undefined
 
         return {
           regionCount: regionLabels.length,
+          textColor: textColor?.placeholder,
+          background: background?.placeholder,
           hasFields:
             regionLabels.length > 0 && textColors.length > 0 && backgrounds.length > 0 && minRegionTypes.length > 0
         }
@@ -1544,6 +1603,10 @@ export const BarRegionsSectionTests: Story = {
         // Should now have 1 region with all fields
         expect(after.regionCount).toBe(1)
         expect(after.hasFields).toBe(true)
+        expect(after.textColor).toBe(
+          getComputedStyle(document.documentElement).getPropertyValue('--cool-gray-90').trim()
+        )
+        expect(after.background).toBe('#71767a')
 
         return true
       }

package/src/_stories/ChartBrush.Interaction.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, waitFor } from 'storybook/test'
+import Chart from '../CdcChartComponent'
+import brushEnabledConfig from './_mock/brush_enabled.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/BrushSlider/Interactions',
+  component: Chart
+}
+
+export default meta
+
+type Story = StoryObj<typeof Chart>
+
+type BrushSelectionState = {
+  x: string | null
+  width: string | null
+}
+
+const getBrushSelection = (canvasElement: HTMLElement) => {
+  const selection = canvasElement.querySelector('.visx-brush-selection') as SVGRectElement | null
+  expect(selection).toBeTruthy()
+  return selection!
+}
+
+const readBrushSelectionState = (canvasElement: HTMLElement): BrushSelectionState => {
+  const selection = getBrushSelection(canvasElement)
+  return {
+    x: selection.getAttribute('x'),
+    width: selection.getAttribute('width')
+  }
+}
+
+const getBrushPoint = (canvasElement: HTMLElement, x: number) => {
+  const overlay = canvasElement.querySelector('.visx-brush-overlay') as SVGRectElement | null
+  expect(overlay).toBeTruthy()
+
+  const rect = overlay!.getBoundingClientRect()
+  return {
+    target: overlay!,
+    clientX: rect.left + x,
+    clientY: rect.top + rect.height / 2
+  }
+}
+
+const dispatchPointer = (target: Element, type: string, clientX: number, clientY: number, buttons = 1) => {
+  target.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      clientX,
+      clientY,
+      buttons,
+      pointerId: 1,
+      pointerType: 'mouse'
+    })
+  )
+}
+
+const settleInteraction = async () => {
+  await new Promise<void>(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+  })
+}
+
+export const OutsideSelectionInteractionsBlocked: Story = {
+  args: {
+    config: brushEnabledConfig,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Outside-selection clicks and drags are blocked before they reach the visx brush overlay.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    await waitFor(() => {
+      expect(canvasElement.querySelector('.visx-brush-selection')).toBeTruthy()
+      expect(canvasElement.querySelector('.visx-brush-overlay')).toBeTruthy()
+    })
+
+    const initial = readBrushSelectionState(canvasElement)
+    const selectionX = Number(initial.x)
+    const selectionWidth = Number(initial.width)
+
+    const outsideLeft = getBrushPoint(canvasElement, Math.max(1, selectionX - 40))
+    dispatchPointer(outsideLeft.target, 'pointerdown', outsideLeft.clientX, outsideLeft.clientY)
+    dispatchPointer(outsideLeft.target, 'pointerup', outsideLeft.clientX, outsideLeft.clientY, 0)
+    outsideLeft.target.dispatchEvent(
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        clientX: outsideLeft.clientX,
+        clientY: outsideLeft.clientY
+      })
+    )
+    await settleInteraction()
+    expect(readBrushSelectionState(canvasElement)).toEqual(initial)
+
+    const outsideRight = getBrushPoint(canvasElement, selectionX + selectionWidth + 40)
+    dispatchPointer(outsideRight.target, 'pointerdown', outsideRight.clientX, outsideRight.clientY)
+    dispatchPointer(outsideRight.target, 'pointermove', outsideRight.clientX + 80, outsideRight.clientY)
+    dispatchPointer(outsideRight.target, 'pointerup', outsideRight.clientX + 80, outsideRight.clientY, 0)
+    await settleInteraction()
+    expect(readBrushSelectionState(canvasElement)).toEqual(initial)
+  }
+}

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import brushEnabledConfig from './_mock/brush_enabled.json'
+import pertussisConfig from './_mock/reported_pertussis_cases.json'
 import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
@@ -36,16 +37,24 @@ export const BrushSliderEnabled: Story = {
   }
 }
 
-export const BrushSliderInEditor: Story = {
+export const BrushDynamicYAxis: Story = {
   args: {
-    config: brushEnabledConfig,
-    isEditor: true
+    config: {
+      ...pertussisConfig,
+      xAxis: {
+        ...pertussisConfig.xAxis,
+        brushActive: true,
+        brushDynamicYAxis: true,
+        brushDefaultRecentDateCount: undefined
+      }
+    },
+    isEditor: false
   },
   parameters: {
     docs: {
       description: {
         story:
-          'Brush slider in editor mode. You can toggle the "Brush Slider" checkbox in the X-Axis section to enable/disable it.'
+          'Reported pertussis cases (1922-2025) with Dynamic Y-Axis enabled. The Y-axis rescales to fit only the data visible in the current brush selection. Drag the brush to the 1970s-1990s low period (~1K-7K cases) then to the 1920s-1940s peak (~100K-265K cases) to see the Y-axis adjust dramatically.'
       }
     }
   },

package/src/_stories/_mock/alt_text_metadata.json

@@ -0,0 +1,38 @@
+{
+  "version": "4.26.4",
+  "type": "chart",
+  "visualizationType": "Line",
+  "title": "COVID-19 Test Positivity",
+  "showTitle": true,
+  "animate": false,
+  "orientation": "vertical",
+  "dataMetadata": {
+    "altDescription": "Line chart showing COVID-19 test positivity rising from 4% to 12% over the last eight weeks, which may indicate growing community spread.",
+    "lastUpdated": "2024-09-21",
+    "source": "CDC NREVSS"
+  },
+  "data": [
+    { "week": "Aug 3", "positivity": 4.2 },
+    { "week": "Aug 10", "positivity": 4.8 },
+    { "week": "Aug 17", "positivity": 5.5 },
+    { "week": "Aug 24", "positivity": 6.3 },
+    { "week": "Aug 31", "positivity": 7.4 },
+    { "week": "Sep 7", "positivity": 8.9 },
+    { "week": "Sep 14", "positivity": 10.6 },
+    { "week": "Sep 21", "positivity": 12.0 }
+  ],
+  "xAxis": {
+    "dataKey": "week",
+    "type": "categorical",
+    "label": "Week Ending"
+  },
+  "yAxis": {
+    "label": "% Positive",
+    "numTicks": "5"
+  },
+  "series": [
+    { "dataKey": "positivity", "type": "Line", "axis": "Left", "tooltip": true }
+  ],
+  "legend": { "hide": true },
+  "table": { "show": true, "label": "Data Table" }
+}