@cdc/core 4.25.11 → 4.26.2

package/_stories/Gallery.Maps.stories.tsx

@@ -0,0 +1,239 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import CdcMap from '@cdc/map'
+
+// 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/Gallery/Maps',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Map visualization examples from the CDC COVE Gallery'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+
+type Story = StoryObj<typeof CdcMap>
+
+// 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 })
+      .catch(() => canvasElement.querySelector('canvas'))
+    expect(mapElement).toBeInTheDocument()
+  })
+
+  await step('Verify SVG or canvas element is present', async () => {
+    const vizElement = canvasElement.querySelector('svg, canvas')
+    expect(vizElement).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`)
+}
+
+// Bubble Maps
+export const Bubble_Map_World: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/example-Bubble-Map-world.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Bubble Map World')
+  }
+}
+
+export const Bubble_Map_US: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/Example-Bubble-US-Data-Map.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Bubble Map US')
+  }
+}
+
+// Categorical Maps
+export const Categorical_Map_With_Special_Classes: Story = {
+  render: () => (
+    <CdcMap configUrl='https://www.cdc.gov/cove/data-files/Scale-Based-Categorical-Map-With-Special-Classes.json' />
+  ),
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Categorical Map With Special Classes')
+  }
+}
+
+export const Qualitative_Categorical_Map: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/data-files/qualitative-map.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Qualitative Categorical Map')
+  }
+}
+
+// Custom Layer Map
+export const Custom_Layer_Map: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/custom-layer-map.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Custom Layer Map')
+  }
+}
+
+// Filterable Data Maps
+export const Map_Multiple_Filters: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/map-multiple-filters.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Map Multiple Filters')
+  }
+}
+
+export const Map_Tab_Filters: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/map-tab-filters.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Map Tab Filters')
+  }
+}
+
+// Geocode Map
+export const US_Geocode_Map: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/example-u-s-geo-code-dat.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'US Geocode Map')
+  }
+}
+
+// HHS Region Map
+export const HHS_Regions_Map: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/example-hhs-regions-data.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'HHS Regions Map')
+  }
+}
+
+// Hex Maps
+export const Standard_Hex_Map: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/Hex_Map.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Standard Hex Map')
+  }
+}
+
+export const Hex_Map_With_Filter: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/example-hex-map-with-filter.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Hex Map With Filter')
+  }
+}
+
+export const Hex_Map_With_Arrows: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/Hex_Map_Arrows.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Hex Map With Arrows')
+  }
+}
+
+// Map with Cities
+export const US_Map_With_Cities: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/city-data-map-example.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'US Map With Cities')
+  }
+}
+
+// Navigation-Only Maps
+export const US_Navigation_Map: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/us-nav-map.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'US Navigation Map')
+  }
+}
+
+export const World_Navigation_Map: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/world-nav-map-example.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'World Navigation Map')
+  }
+}
+
+// Numeric Maps
+export const Equal_Interval_Map: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/equal-interval-map.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Equal Interval Map')
+  }
+}
+
+export const Equal_Number_Map: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/equal-number-map.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Equal Number Map')
+  }
+}
+
+export const Equal_Number_Map_New_Quantile: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/equal-number-map_new_quantile.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Equal Number Map New Quantile')
+  }
+}
+
+// Single State Maps
+export const Single_State_Map_Counties: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/example-data-map-counties.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Single State Map Counties')
+  }
+}
+
+/*
+Commented out because the config is pointing at a data file on wcms-wp.cdc.gov which is not accessible.
+export const Single_State_With_Census_Toggle: Story = {
+  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/single-state-map-with-census-toggle.json" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Single State With Census Toggle')
+  }
+}
+*/
+
+export const Single_State_Filter_With_Zoom: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/single-state-filter-change-with-zoom.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Single State Filter With Zoom')
+  }
+}
+
+export const Multi_State_County_Map: Story = {
+  render: () => (
+    <CdcMap configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/multistate-county-map.json' />
+  ),
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Multi State County Map')
+  }
+}
+
+// US County Map
+export const US_County_Level_Map: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/US-County-Level-Map.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'US County Level Map')
+  }
+}
+
+// World Map
+export const World_Data_Map: Story = {
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/world-data-map-example.json' />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'World Data Map')
+  }
+}

package/_stories/Gallery.WaffleChart.stories.tsx

@@ -0,0 +1,187 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import WaffleChart from '@cdc/waffle-chart'
+
+// 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/Gallery/Waffle Charts',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Waffle Chart and Gauge visualization examples from the CDC COVE Gallery'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+
+type Story = StoryObj<typeof WaffleChart>
+
+// Helper function to test waffle chart rendering
+const testWaffleChartRendering = async (canvasElement: HTMLElement, storyName: string) => {
+  await step('Wait for waffle chart to render', async () => {
+    // Wait for SVG element to appear
+    await new Promise<void>((resolve, reject) => {
+      const startTime = Date.now()
+      const timeout = 10000
+
+      const checkSvg = () => {
+        const svgElement = canvasElement.querySelector('svg')
+        if (svgElement) {
+          resolve()
+        } else if (Date.now() - startTime > timeout) {
+          reject(new Error(`Timeout: SVG element not found after ${timeout}ms`))
+        } else {
+          setTimeout(checkSvg, 100)
+        }
+      }
+      checkSvg()
+    })
+  })
+
+  await step('Verify SVG element is present', async () => {
+    const svgElement = canvasElement.querySelector('svg')
+    expect(svgElement).toBeInTheDocument()
+  })
+
+  await step('Verify waffle chart container is present', async () => {
+    const waffleContainer = canvasElement.querySelector('.cove-waffle-chart, .cove-gauge-chart')
+    expect(waffleContainer).toBeInTheDocument()
+  })
+
+  console.log(` ${storyName} waffle chart rendered successfully`)
+}
+
+// Base config for examples
+const baseWaffleConfig = {
+  type: 'waffle-chart',
+  shape: 'person',
+  title: 'Overdose Mortality Rates',
+  content: 'of overdoses resulted in death.',
+  subtext: 'This data is an example and does not reflect actual averages',
+  orientation: 'horizontal',
+  data: [
+    {
+      'Resulted in Death': 250,
+      'Number of Overdoses': 600,
+      state: 'Alabama',
+      Year: '2010'
+    },
+    {
+      'Resulted in Death': 16,
+      'Number of Overdoses': 80,
+      state: 'Alaska',
+      Year: '2008'
+    },
+    {
+      'Resulted in Death': 19,
+      'Number of Overdoses': 100,
+      state: 'Alaska',
+      Year: '2010'
+    },
+    {
+      'Resulted in Death': 93,
+      'Number of Overdoses': 400,
+      state: 'Alaska',
+      Year: '2012'
+    },
+    {
+      'Resulted in Death': 82,
+      'Number of Overdoses': 400,
+      state: 'Arizona',
+      Year: '2010'
+    }
+  ],
+  filters: [],
+  fontSize: null,
+  overallFontSize: 'medium',
+  dataColumn: 'Resulted in Death',
+  dataFunction: 'Sum',
+  dataConditionalColumn: '',
+  dataConditionalOperator: null,
+  dataConditionalComparate: '',
+  customDenom: true,
+  dataDenom: null,
+  dataDenomColumn: 'Number of Overdoses',
+  dataDenomFunction: 'Sum',
+  prefix: '',
+  suffix: '%',
+  roundToPlace: 0,
+  nodeWidth: 10,
+  nodeSpacer: 2,
+  theme: 'theme-blue',
+  invalidComparate: false,
+  showDenominator: false,
+  showPercent: true,
+  valueDescription: 'testing',
+  visual: {
+    border: true,
+    accent: true,
+    background: true,
+    hideBackgroundColor: true,
+    borderColorTheme: true
+  }
+}
+
+export const Waffle_Chart_Person: Story = {
+  render: () => (
+    <WaffleChart
+      config={{
+        ...baseWaffleConfig,
+        visualizationType: 'Waffle',
+        visualizationSubType: '',
+        gauge: {
+          height: 35,
+          width: 400
+        },
+        visual: {
+          border: true,
+          accent: true,
+          background: true,
+          hideBackgroundColor: true,
+          borderColorTheme: true,
+          colors: {
+            'theme-blue': '#005eaa',
+            'theme-purple': '#712177',
+            'theme-brown': '#705043',
+            'theme-teal': '#00695c',
+            'theme-pink': '#af4448',
+            'theme-orange': '#bb4d00',
+            'theme-slate': '#29434e',
+            'theme-indigo': '#26418f',
+            'theme-cyan': '#006778',
+            'theme-green': '#4b830d',
+            'theme-amber': '#fbab18'
+          }
+        }
+      }}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    await testWaffleChartRendering(canvasElement, 'Waffle Chart Person')
+  }
+}
+
+export const Gauge_Chart: Story = {
+  render: () => (
+    <WaffleChart
+      config={{
+        ...baseWaffleConfig,
+        visualizationType: 'Gauge',
+        visualizationSubType: ''
+      }}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    await testWaffleChartRendering(canvasElement, 'Gauge Chart')
+  }
+}

package/_stories/PageART.stories.tsx

@@ -0,0 +1,193 @@
+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/ART',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Stories for visualizations from the CDC ART (Assisted Reproductive Technology) Surveillance State-Specific page (https://www.cdc.gov/art/php/surveillance-state-specific/index.html)'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+
+// Config URL from the ART surveillance state-specific page
+const CONFIG_URLS = {
+  stateSpecificDashboard: 'https://www.cdc.gov/art/dfe-modules/state-specific-dashboard.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
+              const newKey = key.replace(/^(\.\.\/)+/, '').replace(/^\//, '')
+              const absoluteKey = `https://www.cdc.gov/${newKey}`
+
+              newDatasets[absoluteKey] = {
+                ...dataset,
+                dataFileName: (dataset as any).dataFileName
+                  ? `https://www.cdc.gov/${(dataset as any).dataFileName.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
+                  : (dataset as any).dataFileName,
+                dataUrl: (dataset as any).dataUrl
+                  ? `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:', {
+          hasMultiDashboards: !!data.multiDashboards,
+          dashboardCount: data.multiDashboards?.length || 0,
+          activeDashboard: data.activeDashboard,
+          datasetCount: Object.keys(data.datasets || {}).length,
+          firstDashboardVizCount: data.multiDashboards?.[0]?.visualizations
+            ? Object.keys(data.multiDashboards[0].visualizations).length
+            : 0
+        })
+
+        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('.type-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('.type-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`)
+}
+
+/**
+ * ART State-Specific Surveillance Dashboard
+ *
+ * Interactive dashboard showing Assisted Reproductive Technology (ART) surveillance
+ * data for different states. This visualization allows users to explore state-specific
+ * ART outcomes and trends.
+ */
+export const State_Specific_Dashboard: DashboardStory = {
+  render: () => {
+    const config = useConfigWithAbsoluteDataUrl(CONFIG_URLS.stateSpecificDashboard)
+    if (!config) return <div>Loading...</div>
+    return <Dashboard config={config} />
+  },
+  play: async ({ canvasElement }) => {
+    await testDashboardRendering(canvasElement, 'State Specific Dashboard')
+  }
+}