@cdc/map 4.26.2 → 4.26.4

package/src/_stories/Map.HTMLInDataTable.stories.tsx

@@ -0,0 +1,385 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import CdcMapComponent from '../CdcMapComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import usaStateGradient from './_mock/usa-state-gradient.json'
+
+const meta: Meta<typeof CdcMapComponent> = {
+  title: 'Components/Templates/Map/HTML in Data Table',
+  component: CdcMapComponent,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Demonstrates map data tables with colored legend circles rendered inline next to location names, and HTML content in a notes column.'
+      }
+    }
+  }
+}
+
+export default meta
+
+type Story = StoryObj<typeof CdcMapComponent>
+
+const data = [
+  { STATE: 'Overall', Rate: '55', Location: 'Vehicle', URL: 'https://www.cdc.gov', Notes: '' },
+  {
+    STATE: 'Alabama',
+    Rate: 130,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Rate increased <strong>8%</strong> from prior year'
+  },
+  {
+    STATE: 'Alaska',
+    Rate: 40,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Remote regions excluded from <em>survey</em>'
+  },
+  { STATE: 'American Samoa', Rate: 55, Location: 'Home', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Arizona',
+    Rate: 0,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#d54309;">⚠ Below target</span> — outreach underway'
+  },
+  {
+    STATE: 'Arkansas',
+    Rate: 60,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'See <a href="https://www.cdc.gov" target="_blank">CDC report</a> for details'
+  },
+  {
+    STATE: 'California',
+    Rate: 30,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<strong>Leading state</strong> in program participation'
+  },
+  {
+    STATE: 'Colorado',
+    Rate: 40,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Data validated by <em>state health dept</em>'
+  },
+  {
+    STATE: 'Connecticut',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#2e8540;">✓ Target achieved</span>'
+  },
+  { STATE: 'Deleware', Rate: '57', Location: 'Home', URL: 'https://www.cdc.gov/', Notes: '' },
+  { STATE: 'DC', Rate: 60, Location: 'Home', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Florida',
+    Rate: 30,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Excludes <em>federal facilities</em>'
+  },
+  {
+    STATE: 'Georgia',
+    Rate: 40,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Improved <strong>12 points</strong> since 2021'
+  },
+  {
+    STATE: 'Hawaii',
+    Rate: 57,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Island populations surveyed <em>separately</em>'
+  },
+  {
+    STATE: 'Idaho',
+    Rate: 60,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Rural adjustment applied — see <strong>methodology</strong>'
+  },
+  {
+    STATE: 'Illinois',
+    Rate: 30,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Chicago metro reported <em>independently</em>'
+  },
+  {
+    STATE: 'Indiana',
+    Rate: 40,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Rate includes <strong>all age groups</strong>'
+  },
+  {
+    STATE: 'Iowa',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Consistent with <em>national average</em>'
+  },
+  {
+    STATE: 'Kansas',
+    Rate: 57,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Data from <strong>Q3 2023</strong> survey'
+  },
+  {
+    STATE: 'Kentucky',
+    Rate: 60,
+    Location: 'NA',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#d54309;">Below regional median</span>'
+  },
+  {
+    STATE: 'Louisiana',
+    Rate: 30,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Post-storm data collection <em>delayed</em>'
+  },
+  {
+    STATE: 'Maine',
+    Rate: 40,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Coastal counties weighted <strong>separately</strong>'
+  },
+  { STATE: 'Marshall Islands', Rate: 55, Location: 'Home', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Maryland',
+    Rate: 57,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Includes DC metro area <em>overlap</em>'
+  },
+  {
+    STATE: 'Massachusetts',
+    Rate: 60,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#2e8540;">✓ Highest in region</span>'
+  },
+  {
+    STATE: 'Michigan',
+    Rate: 12,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#d54309;">⚠ Significant decline</span> noted'
+  },
+  { STATE: 'Micronesia', Rate: 65, Location: 'Vehicle', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Minnesota',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Tribal nations surveyed <em>separately</em>'
+  },
+  {
+    STATE: 'Mississippi',
+    Rate: 57,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Additional outreach <strong>planned for 2024</strong>'
+  },
+  {
+    STATE: 'Montana',
+    Rate: 60,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Large geographic area — <em>sample size limited</em>'
+  },
+  { STATE: 'Montana', Rate: 30, Location: 'Vehicle', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Nebraska',
+    Rate: 40,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Rate stable over <strong>3-year period</strong>'
+  },
+  {
+    STATE: 'Nevada',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Las Vegas metro excluded from <em>rural rate</em>'
+  },
+  {
+    STATE: 'New Hampshire',
+    Rate: 57,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Highest participation in <strong>New England</strong>'
+  },
+  {
+    STATE: 'New Jersey',
+    Rate: 60,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Dense population — <em>high confidence interval</em>'
+  },
+  {
+    STATE: 'New Mexico',
+    Rate: 12,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#d54309;">Below target</span> — tribal programs expanding'
+  },
+  {
+    STATE: 'New York',
+    Rate: 40,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'NYC data reported <em>separately</em>'
+  },
+  {
+    STATE: 'North Carolina',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Urban/rural split — see <strong>supplemental table</strong>'
+  },
+  {
+    STATE: 'North Dakota',
+    Rate: 57,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Oil field worker population <em>adjusted</em>'
+  },
+  { STATE: 'Northern Mariana Islands', Rate: '60', Location: 'Home', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Ohio',
+    Rate: 88,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#2e8540;">✓ Above national average</span>'
+  },
+  {
+    STATE: 'Oklahoma',
+    Rate: 40,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Native American populations <em>surveyed separately</em>'
+  },
+  {
+    STATE: 'Oregon',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Coast vs inland rates <strong>vary significantly</strong>'
+  },
+  { STATE: 'Palau', Rate: 15, Location: 'School', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Pennsylvania',
+    Rate: 60,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Philadelphia metro weighted <em>separately</em>'
+  },
+  { STATE: 'Puerto Rico', Rate: 30, Location: 'Work', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Rhode Island',
+    Rate: 40,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<strong>Smallest state</strong> — high confidence in data'
+  },
+  {
+    STATE: 'South Carolina',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Rate improved after <em>2022 initiative</em>'
+  },
+  {
+    STATE: 'South Dakota',
+    Rate: 86,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#2e8540;">✓ Above target</span>'
+  },
+  {
+    STATE: 'Tennessee',
+    Rate: 60,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Nashville metro drives <strong>overall rate</strong>'
+  },
+  {
+    STATE: 'Texas',
+    Rate: 30,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Border region data <em>collected separately</em>'
+  },
+  { STATE: 'Utah', Rate: 54, Location: 'Work', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Vermont',
+    Rate: 40,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Near-complete <em>population coverage</em>'
+  },
+  { STATE: 'Virgin Islands', Rate: 55, Location: 'School', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Virginia',
+    Rate: 57,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Northern VA excluded — see <em>DC metro</em>'
+  },
+  {
+    STATE: 'Washington',
+    Rate: 62,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#2e8540;">✓ Strong program outcomes</span>'
+  },
+  {
+    STATE: 'West Virginia',
+    Rate: 25,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#d54309;">⚠ Lowest in region</span>'
+  },
+  {
+    STATE: 'Wyoming',
+    Rate: 43,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Smallest population — <strong>widest confidence interval</strong>'
+  }
+]
+
+export const USAStateMap: Story = {
+  name: 'USA State Map',
+  args: {
+    config: {
+      ...usaStateGradient,
+      data,
+      table: {
+        ...usaStateGradient.table,
+        expanded: true
+      },
+      columns: {
+        ...usaStateGradient.columns,
+        Notes: {
+          name: 'Notes',
+          label: 'Notes',
+          dataTable: true,
+          tooltip: false
+        }
+      }
+    },
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}

package/src/_stories/_mock/legends/legend-tests.json

@@ -100,7 +100,7 @@
     "layers": [
       {
         "name": "Layer One",
-        "url": "./examples/testing-layer.json",
+        "url": "./examples/__data__/testing-layer.json",
         "namespace": "cove",
         "fill": "blue",
         "stroke": "orange",
@@ -108,7 +108,7 @@
       },
       {
         "name": "Layer Two",
-        "url": "./examples/testing-layer-2.json",
+        "url": "./examples/__data__/testing-layer-2.json",
         "namespace": "cove",
         "fill": "blue",
         "stroke": "orange",
@@ -769,4 +769,4 @@
       "URL": "https://www.cdc.gov/"
     }
   ]
-}
+}

package/src/_stories/_mock/multi-state-show-unselected.json

@@ -0,0 +1,82 @@
+{
+  "general": {
+    "geoType": "single-state",
+    "geoBorderColor": "darkGray",
+    "headerColor": "theme-blue",
+    "showTitle": true,
+    "showSidebar": true,
+    "showDownloadButton": true,
+    "showDownloadMediaButton": false,
+    "displayAsHex": false,
+    "displayStateLabels": false,
+    "territoriesLabel": "Territories",
+    "language": "en",
+    "hasRegions": false,
+    "expandDataTable": false,
+    "fullBorder": false,
+    "type": "data",
+    "statesPicked": [
+      { "fipsCode": "01", "stateName": "Alabama" },
+      { "stateName": "Florida", "fipsCode": "12" },
+      { "stateName": "Georgia", "fipsCode": "13" },
+      { "stateName": "South Carolina", "fipsCode": "45" }
+    ],
+    "hideUnselectedStates": false,
+    "title": "Multi-State Map - Show Unselected States",
+    "subtext": "Unselected states are shown as light outlines for geographic context."
+  },
+  "type": "map",
+  "color": "orangered",
+  "columns": {
+    "geo": { "name": "FIPS Codes", "label": "Location", "tooltip": false, "dataTable": true },
+    "primary": {
+      "dataTable": true,
+      "tooltip": true,
+      "prefix": "",
+      "suffix": "%",
+      "name": "Percent Vaccinated",
+      "label": "Percent Vaccinated"
+    },
+    "navigate": { "name": "" }
+  },
+  "legend": {
+    "descriptions": {},
+    "specialClasses": [],
+    "unified": false,
+    "singleColumn": true,
+    "dynamicDescription": false,
+    "type": "equalinterval",
+    "numberOfItems": 4,
+    "position": "side",
+    "title": "Percent Vaccinated",
+    "description": ""
+  },
+  "filters": [],
+  "dataTable": { "title": "Data Table", "forceDisplay": true, "indexTitle": "Percent Vaccinated" },
+  "tooltips": { "appearanceType": "hover", "linkLabel": "Learn More", "capitalizeLabels": true },
+  "data": [
+    { "FIPS Codes": "01001", "County": "Autauga County", "Percent Vaccinated": 34.13 },
+    { "FIPS Codes": "01003", "County": "Baldwin County", "Percent Vaccinated": 37.55 },
+    { "FIPS Codes": "01005", "County": "Barbour County", "Percent Vaccinated": 32.78 },
+    { "FIPS Codes": "01073", "County": "Jefferson County", "Percent Vaccinated": 55.79 },
+    { "FIPS Codes": "01089", "County": "Madison County", "Percent Vaccinated": 57.67 },
+    { "FIPS Codes": "01097", "County": "Mobile County", "Percent Vaccinated": 39.18 },
+    { "FIPS Codes": "01101", "County": "Montgomery County", "Percent Vaccinated": 50.54 },
+    { "FIPS Codes": "12011", "County": "Broward County", "Percent Vaccinated": 73.98 },
+    { "FIPS Codes": "12031", "County": "Duval County", "Percent Vaccinated": 53.48 },
+    { "FIPS Codes": "12057", "County": "Hillsborough County", "Percent Vaccinated": 58.66 },
+    { "FIPS Codes": "12086", "County": "Miami-Dade County", "Percent Vaccinated": 91.5 },
+    { "FIPS Codes": "12095", "County": "Orange County", "Percent Vaccinated": 77.97 },
+    { "FIPS Codes": "12099", "County": "Palm Beach County", "Percent Vaccinated": 60.75 },
+    { "FIPS Codes": "13089", "County": "DeKalb County", "Percent Vaccinated": 50.4 },
+    { "FIPS Codes": "13121", "County": "Fulton County", "Percent Vaccinated": 44.58 },
+    { "FIPS Codes": "13067", "County": "Cobb County", "Percent Vaccinated": 51.43 },
+    { "FIPS Codes": "13135", "County": "Gwinnett County", "Percent Vaccinated": 42.55 },
+    { "FIPS Codes": "13051", "County": "Chatham County", "Percent Vaccinated": 50.47 },
+    { "FIPS Codes": "45019", "County": "Charleston County", "Percent Vaccinated": 63.1 },
+    { "FIPS Codes": "45045", "County": "Greenville County", "Percent Vaccinated": 45.84 },
+    { "FIPS Codes": "45079", "County": "Richland County", "Percent Vaccinated": 64.96 },
+    { "FIPS Codes": "45013", "County": "Beaufort County", "Percent Vaccinated": 60.82 },
+    { "FIPS Codes": "45051", "County": "Horry County", "Percent Vaccinated": 40.86 }
+  ]
+}

package/src/cdcMapComponent.styles.css

@@ -1,9 +1,9 @@
-.map-container {
+.visualization-container {
   &.full-border {
     border: #c2c2c2 1px solid;
   }
 }
 
-header + .map-container.full-border {
+header + .visualization-container.full-border {
   border-top: 0; /* When they have a header, don't add a border top */
 }

package/src/components/Annotation/Annotation.Draggable.styles.css

@@ -1,18 +1,18 @@
-.cdc-open-viz-module.type-map .annotation__desktop-label {
+.cove-visualization.type-map .annotation__desktop-label {
   display: none;
 }
 
-.cdc-open-viz-module.type-map {
+.cove-visualization.type-map {
   .annotation__mobile-label-circle {
     stroke-width: 2;
   }
 }
 
 @container content (min-width: 700px) {
-  .cdc-open-viz-module.type-map .annotation__mobile-label {
+  .cove-visualization.type-map .annotation__mobile-label {
     display: none;
   }
-  .cdc-open-viz-module.type-map .annotation__desktop-label {
+  .cove-visualization.type-map .annotation__desktop-label {
     display: block;
   }
 }

package/src/components/Annotation/AnnotationDropdown.styles.css

@@ -1,4 +1,4 @@
-.cdc-open-viz-module.type-map {
+.cove-visualization.type-map {
   .annotation__dropdown-list {
     list-style: none;
   }

package/src/components/Annotation/AnnotationList.styles.css

@@ -1,29 +1,29 @@
-.cdc-open-viz-module.type-map {
+.cove-visualization.type-map {
   .annotation__title-circle {
-    display: flex;
-    justify-content: center;
     align-items: center;
+
+    border: 2px solid #666;
     border-radius: 50%;
-    padding: 8px;
-    width: 16px;
+    display: flex;
+    font-size: 14px;
     height: 16px;
-    margin-right: 5px;
+    justify-content: center;
     line-height: 1.5rem;
-
-    border: 2px solid #666;
+    margin-right: 5px;
+    padding: 8px;
     text-align: center;
-    font-size: 14px;
+    width: 16px;
   }
 
   .annotation__title-wrapper {
+    align-items: center;
     display: flex;
     flex-wrap: nowrap;
-    align-items: center;
   }
 
   .annotation__title-wrapper .annotation__title-text {
-    margin-left: 5px;
     font-size: 16px;
+    margin-left: 5px;
   }
 
   .annotation__subtext {
@@ -38,8 +38,8 @@
     margin-top: 5px;
   }
 
-  .cove-component__content {
-    container-type: inline-size;
+  .cove-visualization__body {
     container-name: content;
+    container-type: inline-size;
   }
 }

package/src/components/Annotation/AnnotationList.tsx

@@ -8,7 +8,7 @@ type AnnotationListProps = {
 }
 
 const AnnotationList: React.FC<AnnotationListProps> = ({ useBootstrapVisibilityClasses = true }) => {
-  const { state: config } = useContext(ConfigContext)
+  const { config } = useContext(ConfigContext)
   const annotations = config.annotations || []
 
   const ulClasses = () => {