@cdc/editor 4.26.3 → 4.26.5

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@cdc/editor",
-  "version": "4.26.3",
+  "version": "4.26.5",
   "description": "React component for generating a new component entry",
   "license": "Apache-2.0",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/chart": "^4.26.3",
-    "@cdc/core": "^4.26.3",
-    "@cdc/dashboard": "^4.26.3",
-    "@cdc/data-bite": "^4.26.3",
-    "@cdc/map": "^4.26.3",
-    "@cdc/markup-include": "^4.26.3",
-    "@cdc/waffle-chart": "^4.26.3",
+    "@cdc/chart": "^4.26.5",
+    "@cdc/core": "^4.26.5",
+    "@cdc/dashboard": "^4.26.5",
+    "@cdc/data-bite": "^4.26.5",
+    "@cdc/map": "^4.26.5",
+    "@cdc/markup-include": "^4.26.5",
+    "@cdc/waffle-chart": "^4.26.5",
     "axios": "^1.13.2",
     "d3": "^7.9.0",
     "react-dropzone": "^14.3.8",
@@ -23,7 +23,7 @@
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "d50e45a074fbefa56cac904917e707d57f237737",
+  "gitHead": "61c025165d96b45a6002c34582c5a622a9d865a9",
   "main": "dist/cdceditor",
   "moduleName": "CdcEditor",
   "peerDependencies": {

package/src/_stories/Editor.stories.tsx

@@ -103,6 +103,130 @@ export const LoadDataTableJsonConfig: Story = {
   }
 }
 
+export const DownloadDashboardDatasetCSV: Story = {
+  args: { config: {} },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    await loadConfigFromTextArea(canvasElement, DashboardConfig)
+    await user.click(canvas.getByText('2. Import Data'))
+    await expect(canvas.findByText('Data Sources')).resolves.toBeTruthy()
+
+    const originalCreateObjectURL = URL.createObjectURL
+    let capturedBlob: Blob | null = null
+    URL.createObjectURL = (blob: Blob) => {
+      capturedBlob = blob
+      return 'blob:test-mock'
+    }
+
+    try {
+      const downloadBtn = await canvas.findByRole('button', { name: 'Download' })
+      await user.click(downloadBtn)
+
+      expect(capturedBlob).toBeTruthy()
+      const text = await capturedBlob!.text()
+      expect(text).toContain('Location')
+      expect(text).toContain('Rate')
+    } finally {
+      URL.createObjectURL = originalCreateObjectURL
+    }
+  }
+}
+
+export const DownloadSingleVizCSV: Story = {
+  args: { config: {} },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    await loadConfigFromTextArea(canvasElement, ChartEditorConfig)
+    await user.click(canvas.getByText('2. Import Data'))
+    await expect(canvas.findByText('Data Preview')).resolves.toBeTruthy()
+
+    const originalCreateObjectURL = URL.createObjectURL
+    let capturedBlob: Blob | null = null
+    URL.createObjectURL = (blob: Blob) => {
+      capturedBlob = blob
+      return 'blob:test-mock'
+    }
+
+    try {
+      const downloadBtn = await canvas.findByRole('button', { name: 'Download CSV' })
+      await user.click(downloadBtn)
+
+      expect(capturedBlob).toBeTruthy()
+      const text = await capturedBlob!.text()
+      expect(text).toContain('Year')
+      expect(text).toContain('Category')
+    } finally {
+      URL.createObjectURL = originalCreateObjectURL
+    }
+  }
+}
+
+export const LoadFromApiUrlPreview: Story = {
+  args: { config: {} },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    // Intercept fetch and return JSON with a charset in the Content-Type header.
+    // This exercises the MIME type normalisation fix: fetch preserves the full
+    // Content-Type value (e.g. 'application/json; charset=utf-8') while the old
+    // axios code would strip parameters, so the blob re-typing comparison
+    // must use the base type before the semicolon.
+    const mockData = [
+      { state: 'Alabama', value: '42' },
+      { state: 'Alaska', value: '37' },
+      { state: 'Arizona', value: '55' }
+    ]
+    const mockBlob = new Blob([JSON.stringify(mockData)], { type: 'application/json; charset=utf-8' })
+    const originalFetch = window.fetch
+    window.fetch = () => Promise.resolve({ ok: true, blob: () => Promise.resolve(mockBlob) } as Response)
+
+    try {
+      // Select Dashboard so the dataset name becomes meaningful and the
+      // multi-dataset import flow is exercised
+      await user.click(await canvas.findByRole('button', { name: 'Dashboard' }))
+
+      await user.click(canvas.getByText('2. Import Data'))
+
+      // Switch to the URL tab
+      await user.click(await canvas.findByText('Load from URL'))
+
+      // Both fields are required before the button is enabled
+      const nameInput = await canvas.findByLabelText('Enter Dataset Name')
+      await user.type(nameInput, 'api-data')
+
+      const urlInput = await canvas.findByLabelText('Load data from external URL')
+      await user.type(urlInput, 'https://example.gov/api/data.json')
+
+      await user.click(await canvas.findByRole('button', { name: 'Save & Load' }))
+
+      // After a successful dashboard dataset load the Data Sources table appears
+      // and the preview panel should auto-populate (dataset is created with preview: true)
+      await expect(canvas.findByText('Data Sources')).resolves.toBeTruthy()
+      await expect(canvas.findByText('Data Preview')).resolves.toBeTruthy()
+      await expect(canvas.findByText('state')).resolves.toBeTruthy()
+      await expect(canvas.findByText('Alabama')).resolves.toBeTruthy()
+
+      // Navigate away to tab 3 then back to tab 2 — the dataset must survive the round-trip
+      await new Promise(r => setTimeout(r, 1500))
+      await user.click(canvas.getByText('3. Configure'))
+      await new Promise(r => setTimeout(r, 500))
+      await user.click(canvas.getByText('2. Import Data'))
+      await new Promise(r => setTimeout(r, 500))
+
+      await expect(canvas.findByText('Data Sources')).resolves.toBeTruthy()
+      await expect(canvas.findByText('Data Preview')).resolves.toBeTruthy()
+      await expect(canvas.findByText('Alabama')).resolves.toBeTruthy()
+    } finally {
+      window.fetch = originalFetch
+    }
+  }
+}
+
 export const InvalidJsonShowsValidationAlert: Story = {
   args: {
     config: {}

package/src/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const content: string
+  export default content
+}

package/src/components/ChooseTab.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 
 import ConfigContext, { EditorDispatchContext } from '@cdc/core/contexts/EditorContext'
 import ChooseTab from './ChooseTab'
@@ -33,4 +33,67 @@ describe('ChooseTab', () => {
       expect(dispatch).toHaveBeenCalledWith({ type: 'EDITOR_SAVE', payload: tempConfig })
     })
   })
+
+  it('creates a HeatMap starter config when the HeatMap button is selected', () => {
+    const dispatch = vi.fn()
+
+    render(
+      <ConfigContext.Provider
+        value={
+          {
+            config: { type: 'chart' },
+            tempConfig: null,
+            errors: [],
+            currentViewport: 'lg',
+            globalActive: 0,
+            setTempConfig: vi.fn()
+          } as any
+        }
+      >
+        <EditorDispatchContext.Provider value={dispatch}>
+          <ChooseTab />
+        </EditorDispatchContext.Provider>
+      </ConfigContext.Provider>
+    )
+
+    expect(
+      screen.getByRole('button', { name: 'HeatMap' }).querySelector('.choose-vis__heatmap-icon')
+    ).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'HeatMap' }))
+
+    expect(dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'EDITOR_SET_CONFIG',
+        payload: expect.objectContaining({
+          visualizationType: 'HeatMap',
+          type: 'chart',
+          title: 'Synthetic Varicella Cases by HHS Region',
+          xAxis: expect.objectContaining({
+            dataKey: 'Month',
+            label: 'Month'
+          }),
+          yAxis: expect.objectContaining({
+            label: 'HHS Region',
+            titlePlacement: 'side'
+          }),
+          series: expect.arrayContaining([
+            expect.objectContaining({
+              dataKey: 'HHS Region 1',
+              name: 'Region 1',
+              type: 'HeatMap'
+            })
+          ]),
+          heatmap: expect.objectContaining({
+            cellPadding: 2
+          }),
+          legend: expect.objectContaining({
+            position: 'top',
+            style: 'gradient',
+            label: 'Reported cases'
+          })
+        })
+      })
+    )
+  })
 })

package/src/components/ChooseTab.tsx

@@ -3,6 +3,7 @@ import '../scss/choose-vis-tab.scss'
 
 import ConfigContext, { EditorDispatchContext } from '@cdc/core/contexts/EditorContext'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Button from '@cdc/core/components/elements/Button'
 
 import AlabamaGraphic from '@cdc/core/assets/icon-map-alabama.svg'
 import AreaChartIcon from '@cdc/core/assets/icon-area-chart.svg'
@@ -17,6 +18,7 @@ import EpiChartIcon from '@cdc/core/assets/icon-epi-chart.svg'
 import ForecastIcon from '@cdc/core/assets/icon-chart-forecast.svg'
 import GaugeChartIcon from '@cdc/core/assets/icon-linear-gauge.svg'
 import GlobeIcon from '@cdc/core/assets/icon-map-world.svg'
+import HeatMapIconSrc from '@cdc/core/assets/icon-heatmap.png'
 import HorizonChartIcon from '@cdc/core/assets/icon-chart-area.svg'
 import HorizontalStackIcon from '@cdc/core/assets/icon-chart-bar-stacked.svg'
 import Icon from '@cdc/core/components/ui/Icon'
@@ -68,6 +70,11 @@ const VizButton: React.FC<VizButtonProps> = ({ activeVizButtonID, onConfigure, .
   )
 }
 
+const HeatMapIcon = () => <img className='choose-vis__heatmap-icon' src={HeatMapIconSrc} alt='' aria-hidden='true' />
+
+const heatMapRegionColumns = Array.from({ length: 10 }, (_, index) => `HHS Region ${index + 1}`)
+const heatMapSampleColumns = ['Month', ...heatMapRegionColumns]
+
 const ChooseTab: React.FC = (): JSX.Element => {
   const { config, tempConfig } = useContext(ConfigContext)
 
@@ -274,15 +281,16 @@ const ChooseTab: React.FC = (): JSX.Element => {
             placeholder='{ }'
             value={pastedConfig}
           />
-          <button
-            className='btn btn-primary px-4 ms-2'
+          <Button
+            variant='primary'
+            className='px-4 ms-2'
             type='submit'
             id='load-data'
             disabled={!pastedConfig}
             onClick={() => importConfig(pastedConfig)}
           >
             Load
-          </button>
+          </Button>
         </div>
       </div>
     </div>
@@ -439,6 +447,76 @@ const buttons = [
     icon: <ForecastIcon />,
     content: 'Display a forecasting chart to predict future data trends.'
   },
+  {
+    id: 28,
+    category: 'Charts',
+    label: 'HeatMap',
+    type: 'chart',
+    subType: 'HeatMap',
+    title: 'Synthetic Varicella Cases by HHS Region',
+    showTitle: true,
+    description: 'Example data are synthetic and for demonstration only.',
+    orientation: 'vertical',
+    xAxis: {
+      type: 'categorical',
+      dataKey: 'Month',
+      label: 'Month',
+      size: 75,
+      maxTickRotation: 0,
+      tickRotation: 0,
+      labelOffset: 0
+    },
+    yAxis: {
+      type: 'categorical',
+      label: 'HHS Region',
+      size: 120,
+      titlePlacement: 'side'
+    },
+    heatmap: {
+      cellPadding: 2,
+      rowLabelGap: 32,
+      columnLabelGap: 48,
+      xAxisPosition: 'top',
+      showCellValues: false
+    },
+    series: heatMapRegionColumns.map((region, index) => ({
+      dataKey: region,
+      name: `Region ${index + 1}`,
+      type: 'HeatMap',
+      axis: 'Left',
+      tooltip: true
+    })),
+    columns: heatMapSampleColumns.reduce(
+      (columns, columnName) => ({
+        ...columns,
+        [columnName]: {
+          name: columnName,
+          label: columnName.replace('HHS ', ''),
+          dataTable: true
+        }
+      }),
+      {}
+    ),
+    dataFormat: {
+      commas: true,
+      roundTo: 0
+    },
+    general: {
+      palette: {
+        isReversed: false,
+        version: '2.0',
+        name: 'sequential_blue'
+      }
+    },
+    legend: {
+      position: 'top',
+      style: 'gradient',
+      subStyle: 'smooth',
+      label: 'Reported cases'
+    },
+    icon: <HeatMapIcon />,
+    content: 'Display a heatmap to compare intensity across two dimensions.'
+  },
   {
     id: 27,
     category: 'Charts',
@@ -491,7 +569,7 @@ const buttons = [
     content: 'Present the numerical proportions of a data series.'
   },
   {
-    id: 27,
+    id: 29,
     category: 'Charts',
     label: 'Radar',
     type: 'chart',