@cdc/core 4.25.11 → 4.26.1

package/_stories/PageCancerRegistries.stories.tsx

@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import Dashboard from '@cdc/dashboard'
+import { useEffect, useState } from 'react'
+
+// Fallback step function for test descriptions
+const step = async (description: string, fn: () => Promise<void> | void) => {
+  console.log(`▶ ${description}`)
+  await fn()
+  console.log(`✓ ${description}`)
+}
+
+const meta: Meta = {
+  title: 'Regression Tests/Pages/Cancer Registries',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Stories for visualizations from the CDC National Program of Cancer Registries (NPCR) Contact page (https://www.cdc.gov/national-program-cancer-registries/contact/index.html)'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+
+// Config URL from the cancer registries contact page
+const CONFIG_URLS = {
+  npcrPrograms: 'https://www.cdc.gov/cancer/npcr/modules/npcr-programs.json'
+}
+
+// Helper to fetch config and update data URLs to use absolute cdc.gov paths
+const useConfigWithAbsoluteDataUrl = (configUrl: string) => {
+  const [config, setConfig] = useState(null)
+
+  useEffect(() => {
+    fetch(configUrl)
+      .then(res => res.json())
+      .then(data => {
+        // Convert relative data URLs to absolute cdc.gov URLs
+        if (data.dataUrl) {
+          // Handle different relative path formats (../../path or /path)
+          const dataUrl = data.dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+          data.dataUrl = `https://www.cdc.gov/${dataUrl}`
+        }
+        if (data.dataFileName) {
+          const dataFileName = data.dataFileName.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+          data.dataFileName = `https://www.cdc.gov/${dataFileName}`
+        }
+
+        // For dashboard configs with multiDashboards, convert dataKey references in visualizations
+        if (data.multiDashboards) {
+          data.multiDashboards.forEach((dashboard: any) => {
+            if (dashboard.visualizations) {
+              Object.values(dashboard.visualizations).forEach((viz: any) => {
+                // Only convert dataKey if it's a URL path (starts with / or ../)
+                if (viz.dataKey && (viz.dataKey.startsWith('/') || viz.dataKey.startsWith('../'))) {
+                  const dataKey = viz.dataKey.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+                  viz.dataKey = `https://www.cdc.gov/${dataKey}`
+                }
+              })
+            }
+          })
+        }
+
+        // For dashboard configs, convert dataKey references in visualizations
+        if (data.visualizations) {
+          Object.values(data.visualizations).forEach((viz: any) => {
+            // Only convert dataKey if it's a URL path (starts with / or ../)
+            if (viz.dataKey && (viz.dataKey.startsWith('/') || viz.dataKey.startsWith('../'))) {
+              const dataKey = viz.dataKey.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+              viz.dataKey = `https://www.cdc.gov/${dataKey}`
+            }
+          })
+        }
+
+        // For dashboard configs, convert datasets only if they reference external files
+        if (data.datasets) {
+          const newDatasets = {}
+          Object.entries(data.datasets).forEach(([key, dataset]: [string, any]) => {
+            // Check if dataset has embedded data
+            const hasEmbeddedData = (dataset as any).data && Array.isArray((dataset as any).data)
+
+            // If data is embedded, keep the original key
+            if (hasEmbeddedData) {
+              newDatasets[key] = dataset
+            } else {
+              // Otherwise, convert paths to absolute URLs (but keep absolute URLs as-is)
+              const newKey = key.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+              const absoluteKey = key.startsWith('http') ? key : `https://www.cdc.gov/${newKey}`
+
+              newDatasets[absoluteKey] = {
+                ...dataset,
+                dataFileName: (dataset as any).dataFileName && !(dataset as any).dataFileName.startsWith('http')
+                  ? `https://www.cdc.gov/${(dataset as any).dataFileName.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
+                  : (dataset as any).dataFileName,
+                dataUrl: (dataset as any).dataUrl && !(dataset as any).dataUrl.startsWith('http')
+                  ? `https://www.cdc.gov/${(dataset as any).dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
+                  : (dataset as any).dataUrl
+              }
+            }
+          })
+          data.datasets = newDatasets
+        }
+
+        // Set activeDashboard to 0 if it's null and multiDashboards exist
+        if (data.multiDashboards && data.multiDashboards.length > 0 && data.activeDashboard === null) {
+          data.activeDashboard = 0
+        }
+
+        // Log config info for debugging
+        console.log('✓ Config loaded:', {
+          type: data.type,
+          hasMultiDashboards: !!data.multiDashboards,
+          dashboardCount: data.multiDashboards?.length || 0,
+          datasetCount: Object.keys(data.datasets || {}).length,
+          vizCount: data.visualizations ? Object.keys(data.visualizations).length : 0,
+          vizTypes: data.visualizations ? Object.values(data.visualizations).map((v: any) => v.type) : []
+        })
+
+        setConfig(data)
+      })
+      .catch(err => {
+        console.error('Failed to fetch config:', configUrl, err)
+      })
+  }, [configUrl])
+
+  return config
+}
+
+type DashboardStory = StoryObj<typeof Dashboard>
+
+// Helper function to test dashboard rendering
+const testDashboardRendering = async (canvasElement: HTMLElement, storyName: string) => {
+  await step('Wait for dashboard to render', async () => {
+    await new Promise<void>((resolve, reject) => {
+      const startTime = Date.now()
+      const timeout = 20000
+
+      const checkDashboard = () => {
+        const dashboardElement = canvasElement.querySelector('.cove-dashboard')
+        const loadingDiv = canvasElement.querySelector('div')
+
+        // Log current state for debugging
+        if (!dashboardElement && loadingDiv?.textContent?.includes('Loading')) {
+          console.log('Still loading config...')
+        }
+
+        if (dashboardElement) {
+          resolve()
+        } else if (Date.now() - startTime > timeout) {
+          reject(new Error(`Timeout: Dashboard element not found after ${timeout}ms`))
+        } else {
+          setTimeout(checkDashboard, 100)
+        }
+      }
+      checkDashboard()
+    })
+  })
+
+  await step('Verify dashboard wrapper is present', async () => {
+    const dashboard = canvasElement.querySelector('.cove-dashboard')
+    expect(dashboard).toBeInTheDocument()
+  })
+
+  await step('Verify at least one visualization rendered', async () => {
+    const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
+    expect(coveModules.length).toBeGreaterThan(0)
+  })
+
+  await step('Verify map visualization is present', async () => {
+    const mapElement = canvasElement.querySelector('svg')
+    expect(mapElement).toBeInTheDocument()
+  })
+
+  console.log(` ${storyName} dashboard rendered successfully`)
+}
+
+/**
+ * NPCR Programs Contact Map
+ *
+ * Interactive navigation map showing National Program of Cancer Registries (NPCR) programs
+ * across the United States, territories, and U.S.-affiliated Pacific Islands. Users can
+ * click on states to access contact information for their local cancer registry program.
+ *
+ * The NPCR supports central cancer registries in all 50 states, the District of Columbia,
+ * Puerto Rico, the U.S. Pacific Island Jurisdictions, and the U.S. Virgin Islands.
+ */
+export const NPCR_Programs_Map: DashboardStory = {
+  render: () => {
+    const config = useConfigWithAbsoluteDataUrl(CONFIG_URLS.npcrPrograms)
+    if (!config) return <div>Loading...</div>
+    return <Dashboard config={config} />
+  },
+  play: async ({ canvasElement }) => {
+    await testDashboardRendering(canvasElement, 'NPCR Programs Map')
+  }
+}

package/_stories/PageEasternEquineEncephalitis.stories.tsx

@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import Chart from '@cdc/chart'
+import CdcMap from '@cdc/map'
+import Dashboard from '@cdc/dashboard'
+
+// Fallback step function for test descriptions
+const step = async (description: string, fn: () => Promise<void> | void) => {
+  console.log(`▶ ${description}`)
+  await fn()
+  console.log(`✓ ${description}`)
+}
+
+const meta: Meta = {
+  title: 'Regression Tests/Pages/Eastern Equine Encephalitis',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Stories for all visualizations from the CDC Eastern Equine Encephalitis historic data page'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+
+// Config URLs from the EEE historic data page
+const CONFIG_URLS = {
+  cumulativeData: 'https://www.cdc.gov/eastern-equine-encephalitis/data-maps/cumulative-data_1.json',
+  exploreHumanData: 'https://www.cdc.gov/eastern-equine-encephalitis/data-maps/explore-human-data.json',
+  exploreCountyData: 'https://www.cdc.gov/eastern-equine-encephalitis/data-maps/explore-county-data.json',
+  ct2022: 'https://www.cdc.gov/eastern-equine-encephalitis/data-maps/ct-2022.json'
+}
+
+type MapStory = StoryObj<typeof CdcMap>
+type DashboardStory = StoryObj<typeof Dashboard>
+
+// Helper function to test map rendering
+const testMapRendering = async (canvasElement: HTMLElement, storyName: string) => {
+  const canvas = within(canvasElement)
+
+  await step('Wait for map to render', async () => {
+    const mapElement = await canvas.findByRole('img', { hidden: true }, { timeout: 10000 })
+    expect(mapElement).toBeInTheDocument()
+  })
+
+  await step('Verify SVG element is present', async () => {
+    const svgElement = canvasElement.querySelector('svg')
+    expect(svgElement).toBeInTheDocument()
+  })
+
+  await step('Verify COVE module wrapper is present', async () => {
+    const coveModule = canvasElement.querySelector('.cdc-open-viz-module')
+    expect(coveModule).toBeInTheDocument()
+  })
+
+  console.log(`✅ ${storyName} map rendered successfully`)
+}
+
+// Helper function to test dashboard rendering
+const testDashboardRendering = async (canvasElement: HTMLElement, storyName: string) => {
+  await step('Wait for dashboard to render', async () => {
+    await new Promise<void>((resolve, reject) => {
+      const startTime = Date.now()
+      const timeout = 15000
+
+      const checkDashboard = () => {
+        const dashboardElement = canvasElement.querySelector('.cove-dashboard')
+        if (dashboardElement) {
+          resolve()
+        } else if (Date.now() - startTime > timeout) {
+          reject(new Error(`Timeout: Dashboard element not found after ${timeout}ms`))
+        } else {
+          setTimeout(checkDashboard, 100)
+        }
+      }
+      checkDashboard()
+    })
+  })
+
+  await step('Verify dashboard wrapper is present', async () => {
+    const dashboard = canvasElement.querySelector('.cove-dashboard')
+    expect(dashboard).toBeInTheDocument()
+  })
+
+  console.log(`✅ ${storyName} dashboard rendered successfully`)
+}
+
+/**
+ * Cumulative Data for 2003–2024
+ *
+ * Summary dashboard showing cumulative Eastern Equine Encephalitis cases.
+ */
+export const Cumulative_Data: DashboardStory = {
+  render: () => <Dashboard configUrl={CONFIG_URLS.cumulativeData} />,
+  play: async ({ canvasElement }) => {
+    await testDashboardRendering(canvasElement, 'Cumulative Data')
+  }
+}
+
+/**
+ * Explore Human Data for 2003–2024
+ *
+ * Interactive dashboard allowing exploration of human EEE cases with filters.
+ * Note: May experience slow load times after selecting filters.
+ */
+export const Explore_Human_Data: DashboardStory = {
+  render: () => <Dashboard configUrl={CONFIG_URLS.exploreHumanData} />,
+  play: async ({ canvasElement }) => {
+    await testDashboardRendering(canvasElement, 'Explore Human Data')
+  }
+}
+
+/**
+ * Explore County Level Data for 2003–2024
+ *
+ * Interactive map showing county-level EEE data across the United States.
+ */
+export const Explore_County_Data: MapStory = {
+  render: () => <CdcMap configUrl={CONFIG_URLS.exploreCountyData} />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Explore County Data')
+  }
+}
+
+/**
+ * Connecticut 2022 Data
+ *
+ * Map visualization showing EEE data specific to Connecticut for 2022.
+ */
+export const Connecticut_2022: MapStory = {
+  render: () => <CdcMap configUrl={CONFIG_URLS.ct2022} />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Connecticut 2022')
+  }
+}
+
+/**
+ * All EEE Visualizations - Combined Test
+ *
+ * Tests all visualizations from the Eastern Equine Encephalitis historic data page.
+ */
+export const All_EEE_Visualizations: StoryObj = {
+  render: () => (
+    <div className="container-fluid p-4">
+      <h1 className="mb-4">Eastern Equine Encephalitis - Historic Data</h1>
+
+      <section className="mb-5">
+        <h2>Cumulative Data for 2003–2024</h2>
+        <Dashboard configUrl={CONFIG_URLS.cumulativeData} />
+      </section>
+
+      <section className="mb-5">
+        <h2>Explore Human Data for 2003–2024</h2>
+        <Dashboard configUrl={CONFIG_URLS.exploreHumanData} />
+      </section>
+
+      <section className="mb-5">
+        <h2>Explore County Level Data for 2003–2024</h2>
+        <CdcMap configUrl={CONFIG_URLS.exploreCountyData} />
+      </section>
+
+      <section className="mb-5">
+        <h2>Connecticut 2022 Data</h2>
+        <CdcMap configUrl={CONFIG_URLS.ct2022} />
+      </section>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    await step('Wait for all visualizations to start rendering', async () => {
+      await new Promise<void>(resolve => setTimeout(resolve, 2000))
+    })
+
+    await step('Wait for all 4 COVE modules to render', async () => {
+      await new Promise<void>((resolve, reject) => {
+        const startTime = Date.now()
+        const timeout = 30000
+
+        const checkModules = () => {
+          const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
+          if (coveModules.length >= 4) {
+            resolve()
+          } else if (Date.now() - startTime > timeout) {
+            reject(new Error(`Timeout: Only ${coveModules.length}/4 COVE modules found after ${timeout}ms`))
+          } else {
+            setTimeout(checkModules, 200)
+          }
+        }
+        checkModules()
+      })
+    })
+
+    await step('Verify at least 4 visualizations are present', async () => {
+      const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
+      expect(coveModules.length).toBeGreaterThanOrEqual(4)
+    })
+
+    console.log(`✅ All 4+ EEE visualizations rendered successfully`)
+  }
+}

package/_stories/PageExcessiveAlcoholUse.stories.tsx

@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import Dashboard from '@cdc/dashboard'
+import { useEffect, useState } from 'react'
+
+// Fallback step function for test descriptions
+const step = async (description: string, fn: () => Promise<void> | void) => {
+    console.log(`▶ ${description}`)
+    await fn()
+    console.log(`✓ ${description}`)
+}
+
+const meta: Meta = {
+    title: 'Regression Tests/Pages/Excessive Alcohol Use',
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: 'Stories for visualizations from the CDC Excessive Alcohol Use page (https://www.cdc.gov/alcohol/fact-sheets/states/excessive-alcohol-use-united-states.html)'
+            }
+        }
+    },
+    tags: ['autodocs']
+}
+
+export default meta
+
+// Config URL from the excessive alcohol use page
+const CONFIG_URLS = {
+    excessiveAlcoholUse: 'https://www.cdc.gov/alcohol/fact-sheets/states/alcohol-data-for-50-states.json'
+}
+
+// Helper to fetch config and update data URLs to use absolute cdc.gov paths
+const useConfigWithAbsoluteDataUrl = (configUrl: string) => {
+    const [config, setConfig] = useState(null)
+
+    useEffect(() => {
+        fetch(configUrl)
+            .then(res => res.json())
+            .then(data => {
+                // Convert relative data URLs to absolute cdc.gov URLs
+                if (data.dataUrl) {
+                    // Handle different relative path formats (../../path or /path)
+                    const dataUrl = data.dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+                    data.dataUrl = `https://www.cdc.gov/${dataUrl}`
+                }
+                if (data.dataFileName) {
+                    const dataFileName = data.dataFileName.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+                    data.dataFileName = `https://www.cdc.gov/${dataFileName}`
+                }
+
+                // For dashboard configs with multiDashboards, convert dataKey references in visualizations
+                if (data.multiDashboards) {
+                    data.multiDashboards.forEach((dashboard: any) => {
+                        if (dashboard.visualizations) {
+                            Object.values(dashboard.visualizations).forEach((viz: any) => {
+                                // Only convert dataKey if it's a URL path (starts with / or ../)
+                                if (viz.dataKey && (viz.dataKey.startsWith('/') || viz.dataKey.startsWith('../'))) {
+                                    const dataKey = viz.dataKey.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+                                    viz.dataKey = `https://www.cdc.gov/${dataKey}`
+                                }
+                            })
+                        }
+                    })
+                }
+
+                // For dashboard configs, convert dataKey references in visualizations
+                if (data.visualizations) {
+                    Object.values(data.visualizations).forEach((viz: any) => {
+                        // Only convert dataKey if it's a URL path (starts with / or ../)
+                        if (viz.dataKey && (viz.dataKey.startsWith('/') || viz.dataKey.startsWith('../'))) {
+                            const dataKey = viz.dataKey.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+                            viz.dataKey = `https://www.cdc.gov/${dataKey}`
+                        }
+                    })
+                }
+
+                // For dashboard configs, convert datasets only if they reference external files
+                if (data.datasets) {
+                    const newDatasets = {}
+                    Object.entries(data.datasets).forEach(([key, dataset]: [string, any]) => {
+                        // Check if dataset has embedded data
+                        const hasEmbeddedData = (dataset as any).data && Array.isArray((dataset as any).data)
+
+                        // If data is embedded, keep the original key
+                        if (hasEmbeddedData) {
+                            newDatasets[key] = dataset
+                        } else {
+                            // Otherwise, convert paths to absolute URLs (but keep absolute URLs as-is)
+                            const newKey = key.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+                            const absoluteKey = key.startsWith('http') ? key : `https://www.cdc.gov/${newKey}`
+
+                            newDatasets[absoluteKey] = {
+                                ...dataset,
+                                dataFileName: (dataset as any).dataFileName && !(dataset as any).dataFileName.startsWith('http')
+                                    ? `https://www.cdc.gov/${(dataset as any).dataFileName.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
+                                    : (dataset as any).dataFileName,
+                                dataUrl: (dataset as any).dataUrl && !(dataset as any).dataUrl.startsWith('http')
+                                    ? `https://www.cdc.gov/${(dataset as any).dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
+                                    : (dataset as any).dataUrl
+                            }
+                        }
+                    })
+                    data.datasets = newDatasets
+                }
+
+                // Set activeDashboard to 0 if it's null and multiDashboards exist
+                if (data.multiDashboards && data.multiDashboards.length > 0 && data.activeDashboard === null) {
+                    data.activeDashboard = 0
+                }
+
+                // Log config info for debugging
+                console.log('✓ Config loaded:', {
+                    type: data.type,
+                    hasMultiDashboards: !!data.multiDashboards,
+                    dashboardCount: data.multiDashboards?.length || 0,
+                    activeDashboard: data.activeDashboard,
+                    datasetCount: Object.keys(data.datasets || {}).length,
+                    dashboardLabels: data.multiDashboards?.map((d: any) => d.label)
+                })
+
+                setConfig(data)
+            })
+            .catch(err => {
+                console.error('Failed to fetch config:', configUrl, err)
+            })
+    }, [configUrl])
+
+    return config
+}
+
+type DashboardStory = StoryObj<typeof Dashboard>
+
+// Helper function to test dashboard rendering
+const testDashboardRendering = async (canvasElement: HTMLElement, storyName: string) => {
+    await step('Wait for dashboard to render', async () => {
+        await new Promise<void>((resolve, reject) => {
+            const startTime = Date.now()
+            const timeout = 30000 // Longer timeout for external data loading
+
+            const checkDashboard = () => {
+                const dashboardElement = canvasElement.querySelector('.cove-dashboard')
+                const loadingDiv = canvasElement.querySelector('div')
+
+                // Log current state for debugging
+                if (!dashboardElement && loadingDiv?.textContent?.includes('Loading')) {
+                    console.log('Still loading config...')
+                }
+
+                if (dashboardElement) {
+                    resolve()
+                } else if (Date.now() - startTime > timeout) {
+                    reject(new Error(`Timeout: Dashboard element not found after ${timeout}ms`))
+                } else {
+                    setTimeout(checkDashboard, 100)
+                }
+            }
+            checkDashboard()
+        })
+    })
+
+    await step('Verify dashboard wrapper is present', async () => {
+        const dashboard = canvasElement.querySelector('.cove-dashboard')
+        expect(dashboard).toBeInTheDocument()
+    })
+
+    await step('Verify at least one visualization rendered', async () => {
+        const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
+        expect(coveModules.length).toBeGreaterThan(0)
+    })
+
+    console.log(`✓ ${storyName} dashboard rendered successfully`)
+}
+
+/**
+ * Excessive Alcohol Use Dashboard
+ *
+ * Interactive dashboard showing state-level data on excessive alcohol use in the United States.
+ *
+ * The dashboard displays data for all 50 states including:
+ * - Prevalence of excessive drinking among adults
+ * - Binge drinking statistics
+ * - Economic costs of excessive alcohol use
+ * - Alcohol-related deaths and health impacts
+ * - State-specific alcohol consumption trends
+ */
+export const Excessive_Alcohol_Use_Dashboard: DashboardStory = {
+    render: () => {
+        const config = useConfigWithAbsoluteDataUrl(CONFIG_URLS.excessiveAlcoholUse)
+        if (!config) return <div>Loading...</div>
+        return <Dashboard config={config} />
+    },
+    play: async ({ canvasElement }) => {
+        await testDashboardRendering(canvasElement, 'Excessive Alcohol Use Dashboard')
+    }
+}