@cdc/map 4.25.1 → 4.25.2-25

package/src/components/UsaMap/components/TerritoriesSection.tsx

@@ -2,29 +2,39 @@ import React from 'react'
 
 type TerritoriesSectionProps = {
   territories: JSX.Element[]
+  // Keys of the territories to display
+  territoresData: string[]
   logo: string
   config: any
 }
 
-const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, logo, config }) => {
+const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, logo, config, territoriesData }) => {
+  // filter territioriesData into the two groups below
+  const freelyAssociatedKeys = territoriesData.filter(territory => {
+    return ['US-FM', 'US-MH', 'US-PW'].includes(territory)
+  })
+  const usTerritoriesKeys = territoriesData.filter(territory => {
+    return ['US-AS', 'US-GU', 'US-MP', 'US-PR', 'US-VI'].includes(territory)
+  })
+
   const usTerritories = territories
     .filter(territory => {
-      return ['US-AS', 'US-GU', 'US-MP', 'US-PR', 'US-VI'].includes(territory?.props?.territory)
+      return usTerritoriesKeys.includes(`US-${territory?.props?.label}`)
     })
     .sort((a, b) => {
-      return a.props.territory.localeCompare(b.props.territory)
+      return a.props.label.localeCompare(b.props.label)
     })
 
   const freelyAssociatedStates = territories
     .filter(territory => {
-      return ['US-FM', 'US-MH', 'US-PW'].includes(territory?.props?.territory)
+      return freelyAssociatedKeys.includes(`US-${territory?.props?.label}`)
     })
     .sort((a, b) => {
-      return a.props.territory.localeCompare(b.props.territory)
+      return a.props.label.localeCompare(b.props.label)
     })
 
   return (
-    territories.length > 0 && (
+    territoriesData.length > 0 && (
       <>
         {/* Temporarily make the max width fit the image width */}
         <div>
@@ -34,13 +44,13 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
             )}
           </div>
           <div>
-            {usTerritories.length > 0 && (
+            {(usTerritories.length > 0 || config.general.territoriesAlwaysShow) && (
               <>
                 <h5 className='territories-label'>U.S. Territories</h5>
                 <span className='mt-1 mb-2 d-flex flex-wrap territories'>{usTerritories}</span>
               </>
             )}
-            {freelyAssociatedStates.length > 0 && (
+            {(freelyAssociatedStates.length > 0 || config.general.territoriesAlwaysShow) && (
               <>
                 <h5 className='territories-label'>Freely Associated States</h5>
                 <span className='mt-1 mb-2 d-flex flex-wrap territories'>{freelyAssociatedStates}</span>

package/src/components/UsaMap/components/Territory/Territory.Hexagon.tsx

@@ -52,7 +52,7 @@ const TerritoryHexagon = ({
   const hexagonLabel = (geo, bgColor = '#FFFFFF', projection) => {
     let centroid = projection ? projection(geoCentroid(geo)) : [22, 17.5]
 
-    let abbr = geo?.properties?.iso ? geo.properties.iso : geo.uid
+    let abbr = geo?.properties?.iso ? geo.properties.iso : geo?.uid ? geo.uid : `US-${label}`
 
     const getArrowDirection = (geoData, geo, isTerritory = false) => {
       if (!isTerritory) {
@@ -63,19 +63,20 @@ const TerritoryHexagon = ({
         <>
           {state.hexMap.shapeGroups.map((group, groupIndex) => {
             return group.items.map((item, itemIndex) => {
+              if (!geoData) return
               switch (item.operator) {
                 case '=':
-                  if (geoData[item.key] === item.value || Number(geoData[item.key]) === Number(item.value)) {
+                  if (geoData?.[item.key] === item.value || Number(geoData[item.key]) === Number(item.value)) {
                     return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
                   }
                   break
                 case '≠':
-                  if (geoData[item.key] !== item.value && Number(geoData[item.key]) !== Number(item.value)) {
+                  if (geoData?.[item.key] !== item.value && Number(geoData[item.key]) !== Number(item.value)) {
                     return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
                   }
                   break
                 case '<':
-                  if (Number(geoData[item.key]) < Number(item.value)) {
+                  if (Number(geoData?.[item.key]) < Number(item.value)) {
                     return <HexIcon item={item} index={itemIndex} centroid={centroid} isTerritory />
                   }
                   break
@@ -175,18 +176,16 @@ const TerritoryHexagon = ({
   }
 
   return (
-    territoryData && (
-      <svg viewBox='-1 -1 46 53' className='territory-wrapper--hex'>
-        <g {...props} data-tooltip-html={dataTooltipHtml} data-tooltip-id={dataTooltipId} onClick={handleShapeClick}>
-          <polygon
-            stroke={stroke}
-            strokeWidth={strokeWidth}
-            points='22 0 44 12.702 44 38.105 22 50.807 0 38.105 0 12.702'
-          />
-          {state.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
-        </g>
-      </svg>
-    )
+    <svg viewBox='-1 -1 46 53' className='territory-wrapper--hex'>
+      <g {...props} data-tooltip-html={dataTooltipHtml} data-tooltip-id={dataTooltipId} onClick={handleShapeClick}>
+        <polygon
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          points='22 0 44 12.702 44 38.105 22 50.807 0 38.105 0 12.702'
+        />
+        {state.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
+      </g>
+    </svg>
   )
 }
 

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -597,7 +597,7 @@ const UsaMap = () => {
         {annotations.length > 0 && <Annotation.Draggable onDragStateChange={handleDragStateChange} />}
       </svg>
 
-      <TerritoriesSection territories={territories} logo={logo} config={state} />
+      <TerritoriesSection territories={territories} logo={logo} config={state} territoriesData={territoriesData} />
     </ErrorBoundary>
   )
 }