@cdc/map 4.25.10 → 4.26.1

package/src/_stories/CdcMap.SmallMultiples.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import CdcMap from '../CdcMap'
+import wastewaterMapSmallMultiples from './_mock/small_multiples/wastewater-map-small-multiples.json'
+import multiStateSmallMultiples from './_mock/small_multiples/multi-state-small-multiples.json'
+import regionSmallMultiples from './_mock/small_multiples/region-small-multiples.json'
+
+const meta: Meta<typeof CdcMap> = {
+  title: 'Components/Templates/Map/Small Multiples',
+  component: CdcMap
+}
+
+type Story = StoryObj<typeof CdcMap>
+
+export const SmallMultiples_UsaStateMap: Story = {
+  args: {
+    config: wastewaterMapSmallMultiples,
+    isEditor: false
+  }
+}
+
+export const SmallMultiples_MultiStateCountyMap: Story = {
+  args: {
+    config: multiStateSmallMultiples,
+    isEditor: false
+  }
+}
+
+export const SmallMultiples_UsaRegionMap: Story = {
+  args: {
+    config: regionSmallMultiples,
+    isEditor: false
+  }
+}
+
+export default meta

package/src/_stories/CdcMap.stories.tsx

@@ -1,14 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
 import CdcMap from '../CdcMap'
 import EqualNumberOptInExample from './_mock/DEV-7286.json'
 import EqualNumberMap from './_mock/equal-number.json'
 import MultiState from './_mock/multi-state.json'
+import MultiCountry from './_mock/multi-country.json'
+import MultiCountryHide from './_mock/multi-country-hide.json'
 import SingleStateWithFilters from './_mock/DEV-8942.json'
 import exampleCityState from './_mock/example-city-state.json'
 import USBubbleCities from './_mock/us-bubble-cities.json'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 import exampleLegendBins from './_mock/legend-bins.json'
 
+// Fallback step function for test descriptions
+const step = async (description: string, fn: () => Promise<void> | void) => {
+  await fn()
+}
+
 const meta: Meta<typeof CdcMap> = {
   title: 'Components/Templates/Map',
   component: CdcMap
@@ -16,10 +24,33 @@ const meta: Meta<typeof CdcMap> = {
 
 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 })
+    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()
+  })
+}
+
 export const Equal_Interval_Map: Story = {
   args: {
     isEditor: true,
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/page-elements/equal-interval-map.json'
+  },
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Equal Interval Map')
   }
 }
 
@@ -41,41 +72,62 @@ export const Scale_Based: Story = {
     configUrl:
       'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Scale-Based-Categorical-Map-With-Special-Classes.json',
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Scale Based')
   }
 }
 export const Qualitative: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/page-elements/qualitative-map.json'
+  },
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Qualitative')
   }
 }
 
 export const World_Map: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/world-data-map-example.json'
+  },
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'World Map')
   }
 }
 
 export const Filterable_Map: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/page-elements/gender-rate-map.json'
+  },
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Filterable Map')
   }
 }
 
 export const Hex_Map: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Hex_Map.json'
+  },
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Hex Map')
   }
 }
 
 export const County_Map: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/US-County-Level-Map.json'
+  },
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'County Map')
   }
 }
 
 export const Single_State: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-data-map-counties.json'
+  },
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Single State')
   }
 }
 
@@ -85,21 +137,42 @@ export const Multi_State: Story = {
   }
 }
 
+export const Multi_Country: Story = {
+  args: {
+    config: MultiCountry
+  }
+}
+
+export const Multi_Country_Hide_Mode: Story = {
+  args: {
+    config: MultiCountryHide
+  }
+}
+
 export const Bubble_Map: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-Bubble-Map-world.json'
+  },
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Bubble Map')
   }
 }
 
 export const HHS_Region_Map: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-hhs-regions-data.json'
+  },
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'HHS Region Map')
   }
 }
 
 export const Custom_Map_Layers: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/custom-layer-map.json'
+  },
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Custom Map Layers')
   }
 }
 
@@ -138,13 +211,15 @@ let exampleCityStateStandardColors = editConfigKeys(exampleCityState, [
 ])
 export const Custom_Color_Distributions_With_Special_Classes: Story = {
   args: {
-    config: newConfig
+    config: newConfig,
+    isEditor: true
   }
 }
 
 export const Custom_Color_Distributions_Without_Special_Classes: Story = {
   args: {
-    config: editConfigKeys(newConfig, [{ path: ['legend', 'specialClasses'], value: [] }])
+    config: editConfigKeys(newConfig, [{ path: ['legend', 'specialClasses'], value: [] }]),
+    isEditor: true
   }
 }
 
@@ -157,13 +232,15 @@ export const Standard_Color_Distributions_With_Special_Classes: Story = {
 
 export const Standard_Color_Distributions_Without_Special_Classes: Story = {
   args: {
-    config: editConfigKeys(exampleCityStateStandardColors, [{ path: ['legend', 'specialClasses'], value: [] }])
+    config: editConfigKeys(exampleCityStateStandardColors, [{ path: ['legend', 'specialClasses'], value: [] }]),
+    isEditor: true
   }
 }
 
 export const Custom_Color_Distributions_With_Update_Needed: Story = {
   args: {
-    config: editConfigKeys(newConfig, [{ path: ['version'], value: '4.24.10' }])
+    config: editConfigKeys(newConfig, [{ path: ['version'], value: '4.24.10' }]),
+    isEditor: true
   }
 }
 
@@ -181,4 +258,39 @@ export const US_Bubble_Cities_Test: Story = {
   }
 }
 
+export const City_Styles_By_Variable: Story = {
+  args: {
+    config: editConfigKeys(exampleCityState, [
+      {
+        path: ['visual', 'additionalCityStyles'],
+        value: [
+          {
+            label: 'High Risk (Rate > 20)',
+            column: 'Rate',
+            value: '22',
+            shape: 'Star'
+          },
+          {
+            label: 'School Location',
+            column: 'Location',
+            value: 'School',
+            shape: 'Triangle'
+          },
+          {
+            label: 'Vehicle Location',
+            column: 'Location',
+            value: 'Vehicle',
+            shape: 'Diamond'
+          }
+        ]
+      },
+      {
+        path: ['visual', 'cityStyle'],
+        value: 'circle'
+      }
+    ]),
+    isEditor: true
+  }
+}
+
 export default meta

package/src/_stories/_mock/column-wrap-test.json

@@ -0,0 +1,265 @@
+{
+  "general": {
+    "title": "Column Wrapping Test Map",
+    "type": "data",
+    "geoType": "us",
+    "headerColor": "theme-blue",
+    "showTitle": true,
+    "language": "en"
+  },
+  "type": "map",
+  "color": "bluegreensequential",
+  "columns": {
+    "geo": {
+      "dataTable": true,
+      "label": "State/Territory",
+      "name": "STATE",
+      "tooltip": false
+    },
+    "primary": {
+      "dataTable": true,
+      "label": "Primary Health Indicator Rate",
+      "name": "PrimaryRate",
+      "prefix": "",
+      "suffix": "%",
+      "tooltip": true,
+      "roundToPlace": 1
+    },
+    "navigate": {
+      "dataTable": false,
+      "name": "",
+      "tooltip": false
+    },
+    "additionalColumn1": {
+      "label": "Secondary Health Indicator",
+      "dataTable": true,
+      "name": "SecondaryIndicator",
+      "tooltip": true
+    },
+    "additionalColumn2": {
+      "label": "Population Demographics Category",
+      "dataTable": true,
+      "name": "DemographicCategory",
+      "tooltip": true
+    },
+    "additionalColumn3": {
+      "label": "Program Implementation Status",
+      "dataTable": true,
+      "name": "ImplementationStatus",
+      "tooltip": true
+    },
+    "additionalColumn4": {
+      "label": "Funding Source and Allocation",
+      "dataTable": true,
+      "name": "FundingSource",
+      "tooltip": true
+    },
+    "additionalColumn5": {
+      "label": "Year of Last Comprehensive Review",
+      "dataTable": true,
+      "name": "LastReviewYear",
+      "tooltip": true
+    }
+  },
+  "legend": {
+    "numberOfItems": 5,
+    "position": "side",
+    "title": "Legend",
+    "type": "equalnumber"
+  },
+  "table": {
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "wrapColumns": false,
+    "label": "Data Table",
+    "expanded": true,
+    "forceDisplay": true,
+    "download": true
+  },
+  "tooltips": {
+    "appearanceType": "hover",
+    "capitalizeLabels": true
+  },
+  "data": [
+    {
+      "STATE": "AL",
+      "PrimaryRate": 45.3,
+      "SecondaryIndicator": "High Risk Population Segments",
+      "DemographicCategory": "Adults Ages 65 and Older",
+      "ImplementationStatus": "Fully Implemented and Operational",
+      "FundingSource": "Federal Grant with State Matching Funds",
+      "LastReviewYear": "2023"
+    },
+    {
+      "STATE": "AK",
+      "PrimaryRate": 38.7,
+      "SecondaryIndicator": "Moderate Risk with Intervention",
+      "DemographicCategory": "Young Adults Ages 18-34",
+      "ImplementationStatus": "Partially Implemented, Phase 2",
+      "FundingSource": "State Budget Allocation Only",
+      "LastReviewYear": "2022"
+    },
+    {
+      "STATE": "AZ",
+      "PrimaryRate": 52.1,
+      "SecondaryIndicator": "Critical Intervention Required",
+      "DemographicCategory": "Children and Adolescents Under 18",
+      "ImplementationStatus": "Planning Stage, Not Yet Active",
+      "FundingSource": "Private Foundation Grant",
+      "LastReviewYear": "2024"
+    },
+    {
+      "STATE": "AR",
+      "PrimaryRate": 41.9,
+      "SecondaryIndicator": "Low to Moderate Risk Level",
+      "DemographicCategory": "Middle-Aged Adults 35-64",
+      "ImplementationStatus": "Fully Implemented and Operational",
+      "FundingSource": "Mixed Federal and State Funding",
+      "LastReviewYear": "2023"
+    },
+    {
+      "STATE": "CA",
+      "PrimaryRate": 36.4,
+      "SecondaryIndicator": "Stable with Ongoing Monitoring",
+      "DemographicCategory": "Multi-Generational Households",
+      "ImplementationStatus": "Enhanced Implementation Active",
+      "FundingSource": "Federal Grant with State Matching Funds",
+      "LastReviewYear": "2024"
+    },
+    {
+      "STATE": "CO",
+      "PrimaryRate": 29.8,
+      "SecondaryIndicator": "Below Average Risk Profile",
+      "DemographicCategory": "Young Adults Ages 18-34",
+      "ImplementationStatus": "Fully Implemented and Operational",
+      "FundingSource": "State Budget Allocation Only",
+      "LastReviewYear": "2023"
+    },
+    {
+      "STATE": "CT",
+      "PrimaryRate": 33.2,
+      "SecondaryIndicator": "Moderate Risk with Intervention",
+      "DemographicCategory": "Adults Ages 65 and Older",
+      "ImplementationStatus": "Monitoring and Evaluation Phase",
+      "FundingSource": "Private Foundation Grant",
+      "LastReviewYear": "2022"
+    },
+    {
+      "STATE": "DE",
+      "PrimaryRate": 44.6,
+      "SecondaryIndicator": "High Risk Population Segments",
+      "DemographicCategory": "Children and Adolescents Under 18",
+      "ImplementationStatus": "Partially Implemented, Phase 2",
+      "FundingSource": "Mixed Federal and State Funding",
+      "LastReviewYear": "2024"
+    },
+    {
+      "STATE": "FL",
+      "PrimaryRate": 48.3,
+      "SecondaryIndicator": "Critical Intervention Required",
+      "DemographicCategory": "Middle-Aged Adults 35-64",
+      "ImplementationStatus": "Fully Implemented and Operational",
+      "FundingSource": "Federal Grant with State Matching Funds",
+      "LastReviewYear": "2023"
+    },
+    {
+      "STATE": "GA",
+      "PrimaryRate": 50.7,
+      "SecondaryIndicator": "High Risk Population Segments",
+      "DemographicCategory": "Multi-Generational Households",
+      "ImplementationStatus": "Enhanced Implementation Active",
+      "FundingSource": "State Budget Allocation Only",
+      "LastReviewYear": "2024"
+    },
+    {
+      "STATE": "HI",
+      "PrimaryRate": 27.4,
+      "SecondaryIndicator": "Low to Moderate Risk Level",
+      "DemographicCategory": "Young Adults Ages 18-34",
+      "ImplementationStatus": "Fully Implemented and Operational",
+      "FundingSource": "Private Foundation Grant",
+      "LastReviewYear": "2022"
+    },
+    {
+      "STATE": "ID",
+      "PrimaryRate": 35.9,
+      "SecondaryIndicator": "Moderate Risk with Intervention",
+      "DemographicCategory": "Adults Ages 65 and Older",
+      "ImplementationStatus": "Planning Stage, Not Yet Active",
+      "FundingSource": "Mixed Federal and State Funding",
+      "LastReviewYear": "2023"
+    },
+    {
+      "STATE": "IL",
+      "PrimaryRate": 42.1,
+      "SecondaryIndicator": "Stable with Ongoing Monitoring",
+      "DemographicCategory": "Children and Adolescents Under 18",
+      "ImplementationStatus": "Partially Implemented, Phase 2",
+      "FundingSource": "Federal Grant with State Matching Funds",
+      "LastReviewYear": "2024"
+    },
+    {
+      "STATE": "IN",
+      "PrimaryRate": 46.8,
+      "SecondaryIndicator": "High Risk Population Segments",
+      "DemographicCategory": "Middle-Aged Adults 35-64",
+      "ImplementationStatus": "Fully Implemented and Operational",
+      "FundingSource": "State Budget Allocation Only",
+      "LastReviewYear": "2023"
+    },
+    {
+      "STATE": "IA",
+      "PrimaryRate": 31.5,
+      "SecondaryIndicator": "Below Average Risk Profile",
+      "DemographicCategory": "Multi-Generational Households",
+      "ImplementationStatus": "Monitoring and Evaluation Phase",
+      "FundingSource": "Private Foundation Grant",
+      "LastReviewYear": "2022"
+    },
+    {
+      "STATE": "KS",
+      "PrimaryRate": 37.2,
+      "SecondaryIndicator": "Moderate Risk with Intervention",
+      "DemographicCategory": "Young Adults Ages 18-34",
+      "ImplementationStatus": "Enhanced Implementation Active",
+      "FundingSource": "Mixed Federal and State Funding",
+      "LastReviewYear": "2024"
+    },
+    {
+      "STATE": "KY",
+      "PrimaryRate": 49.6,
+      "SecondaryIndicator": "Critical Intervention Required",
+      "DemographicCategory": "Adults Ages 65 and Older",
+      "ImplementationStatus": "Fully Implemented and Operational",
+      "FundingSource": "Federal Grant with State Matching Funds",
+      "LastReviewYear": "2023"
+    },
+    {
+      "STATE": "LA",
+      "PrimaryRate": 51.3,
+      "SecondaryIndicator": "High Risk Population Segments",
+      "DemographicCategory": "Children and Adolescents Under 18",
+      "ImplementationStatus": "Partially Implemented, Phase 2",
+      "FundingSource": "State Budget Allocation Only",
+      "LastReviewYear": "2024"
+    },
+    {
+      "STATE": "ME",
+      "PrimaryRate": 34.7,
+      "SecondaryIndicator": "Low to Moderate Risk Level",
+      "DemographicCategory": "Middle-Aged Adults 35-64",
+      "ImplementationStatus": "Fully Implemented and Operational",
+      "FundingSource": "Private Foundation Grant",
+      "LastReviewYear": "2022"
+    },
+    {
+      "STATE": "MD",
+      "PrimaryRate": 39.4,
+      "SecondaryIndicator": "Moderate Risk with Intervention",
+      "DemographicCategory": "Multi-Generational Households",
+      "ImplementationStatus": "Planning Stage, Not Yet Active",
+      "FundingSource": "Mixed Federal and State Funding",
+      "LastReviewYear": "2023"
+    }
+  ]
+}

package/src/_stories/_mock/multi-country-hide.json

@@ -0,0 +1,78 @@
+{
+  "general": {
+    "title": "Multi-Country Selection - Hide Mode",
+    "subtext": "Shows only selected countries (others hidden)",
+    "type": "data",
+    "geoType": "world",
+    "headerColor": "theme-green",
+    "geoBorderColor": "darkGray",
+    "showSidebar": true,
+    "showTitle": true,
+    "showDownloadButton": true,
+    "expandDataTable": false,
+    "territoriesLabel": "Territories",
+    "language": "en",
+    "hasRegions": false,
+    "fullBorder": false,
+    "countriesPicked": [
+      { "iso": "JPN", "name": "Japan" },
+      { "iso": "KOR", "name": "South Korea" },
+      { "iso": "SGP", "name": "Singapore" },
+      { "iso": "AUS", "name": "Australia" }
+    ],
+    "hideUnselectedCountries": true
+  },
+  "type": "map",
+  "color": "orangered",
+  "columns": {
+    "geo": {
+      "name": "Country",
+      "label": "Location",
+      "tooltip": false,
+      "dataTable": true
+    },
+    "primary": {
+      "name": "Data",
+      "label": "Sample Data",
+      "prefix": "",
+      "suffix": "%",
+      "dataTable": true,
+      "tooltip": true
+    },
+    "navigate": {
+      "name": "URL",
+      "tooltip": false,
+      "dataTable": false
+    }
+  },
+  "legend": {
+    "numberOfItems": 4,
+    "position": "side",
+    "title": "Sample Data",
+    "description": "Hide mode - only selected countries visible",
+    "type": "equalinterval",
+    "specialClasses": [],
+    "separateZero": false,
+    "unified": false,
+    "singleColumn": false,
+    "singleRow": false
+  },
+  "data": [
+    {
+      "Country": "Japan",
+      "Data": 85.3
+    },
+    {
+      "Country": "South Korea",
+      "Data": 78.9
+    },
+    {
+      "Country": "Singapore",
+      "Data": 92.1
+    },
+    {
+      "Country": "Australia",
+      "Data": 81.7
+    }
+  ]
+}