@cdc/map 4.24.9 → 4.24.11

package/examples/private/DEV-9644.json

@@ -0,0 +1,184 @@
+{
+  "annotations": [],
+  "general": {
+    "geoType": "us",
+    "noStateFoundMessage": "Map Unavailable",
+    "annotationDropdownText": "Annotations",
+    "geoBorderColor": "darkGray",
+    "headerColor": "theme-blue",
+    "title": "Number, percentage, and proportion of infants born with use of assisted reproductive technology in 2022, by preterm gestational age and female patient’s reporting area of residence at time of treatment",
+    "showTitle": false,
+    "showSidebar": true,
+    "showDownloadButton": true,
+    "showDownloadMediaButton": false,
+    "displayAsHex": false,
+    "displayStateLabels": false,
+    "territoriesLabel": "Territories",
+    "territoriesAlwaysShow": false,
+    "language": "en",
+    "geoLabelOverride": "",
+    "hasRegions": false,
+    "fullBorder": false,
+    "type": "data",
+    "convertFipsCodes": true,
+    "palette": {
+      "isReversed": false
+    },
+    "allowMapZoom": true,
+    "hideGeoColumnInTooltip": false,
+    "hidePrimaryColumnInTooltip": false,
+    "statePicked": {
+      "fipsCode": "01",
+      "stateName": "Alabama"
+    },
+    "expandDataTable": false
+  },
+  "type": "map",
+  "color": "sequential-blue-2(MPX)",
+  "columns": {
+    "geo": {
+      "name": "State",
+      "label": "Location",
+      "tooltip": false,
+      "dataTable": true
+    },
+    "primary": {
+      "dataTable": true,
+      "tooltip": true,
+      "prefix": "",
+      "suffix": "",
+      "name": "Ranges",
+      "label": "",
+      "roundToPlace": "1"
+    },
+    "navigate": {
+      "name": ""
+    },
+    "latitude": {
+      "name": ""
+    },
+    "longitude": {
+      "name": ""
+    }
+  },
+  "legend": {
+    "descriptions": {
+      "0,0": [
+        "National Rate: 17.3"
+      ],
+      "0,1": [
+        "National Rate: 4.3"
+      ]
+    },
+    "specialClasses": [],
+    "unified": false,
+    "singleColumn": true,
+    "singleRow": false,
+    "verticalSorted": false,
+    "showSpecialClassesLast": false,
+    "dynamicDescription": true,
+    "type": "category",
+    "numberOfItems": 5,
+    "position": "side",
+    "title": "",
+    "style": "circles",
+    "subStyle": "linear blocks",
+    "tickRotation": "",
+    "singleColumnLegend": false,
+    "hideBorder": false,
+    "categoryValuesOrder": [
+      "20.6 - 23.3",
+      "23.4 - 28.3",
+      "18.5 - 20.5",
+      "10.2 - 15.5",
+      "15.6 - 18.4"
+    ]
+  },
+  "filters": [
+    {
+      "order": "asc",
+      "label": "Select a Measure",
+      "columnName": "Year",
+      "values": [
+        "Percentages of preterm infants conceived through ART",
+        "Proportion of infants conceived through ART that were born preterm among all preterm births "
+      ],
+      "active": "Percentages of preterm infants conceived through ART",
+      "filterStyle": "dropdown"
+    }
+  ],
+  "table": {
+    "wrapColumns": false,
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": false,
+    "showFullGeoNameInCSV": false,
+    "forceDisplay": true,
+    "download": true,
+    "indexLabel": ""
+  },
+  "tooltips": {
+    "appearanceType": "hover",
+    "linkLabel": "Learn More",
+    "capitalizeLabels": true,
+    "opacity": 90
+  },
+  "visual": {
+    "minBubbleSize": 1,
+    "maxBubbleSize": 20,
+    "extraBubbleBorder": false,
+    "cityStyle": "circle",
+    "cityStyleLabel": "",
+    "showBubbleZeros": false,
+    "additionalCityStyles": [],
+    "geoCodeCircleSize": 8
+  },
+  "mapPosition": {
+    "coordinates": [
+      0,
+      30
+    ],
+    "zoom": 1
+  },
+  "map": {
+    "layers": [],
+    "patterns": []
+  },
+  "hexMap": {
+    "type": "",
+    "shapeGroups": [
+      {
+        "legendTitle": "",
+        "legendDescription": "",
+        "items": [
+          {
+            "key": "",
+            "shape": "Arrow Up",
+            "column": "",
+            "operator": "=",
+            "value": ""
+          }
+        ]
+      }
+    ]
+  },
+  "filterBehavior": "Filter Change",
+  "openModal": true,
+  "uid": "map1728585388205",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "dataKey": "table - 6 dashboard.csv",
+  "version": "4.24.9",
+  "editor": {
+    "activeFilterValueForDescription": [
+      0,
+      0
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/map",
-  "version": "4.24.9",
+  "version": "4.24.11",
   "description": "React component for visualizing tabular data on a map of the United States or the world.",
   "moduleName": "CdcMap",
   "main": "dist/cdcmap",
@@ -25,7 +25,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/core": "^4.24.9",
+    "@cdc/core": "^4.24.11",
     "@emotion/core": "^10.0.28",
     "@emotion/react": "^11.1.5",
     "@hello-pangea/dnd": "^16.2.0",
@@ -52,5 +52,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "c4b0402afe6ed209a85b7078711549b9fd7dae7d"
+  "gitHead": "9ab5ee9b2b0ef7321a66a2104be6ce8899ec3808"
 }

package/src/CdcMap.tsx

@@ -30,7 +30,6 @@ import { publish } from '@cdc/core/helpers/events'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
 import Title from '@cdc/core/components/ui/Title'
-import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 // Data
 import { countryCoordinates } from './data/country-coordinates'
@@ -137,7 +136,8 @@ const CdcMap = ({
   const legendRef = useRef(null)
   const tooltipRef = useRef(null)
   const legendId = useId()
-  const tooltipId = useId()
+  // create random tooltipId
+  const tooltipId = `${Math.random().toString(16).slice(-4)}`
   const mapId = useId()
 
   const { changeFilterActive, handleSorting } = useFilters({ config: state, setConfig: setState })
@@ -345,7 +345,6 @@ const CdcMap = ({
     const newLegendMemo = new Map() // Reset memoization
     const newLegendSpecialClassLastMemo = new Map() // Reset bin memoization
     let primaryCol = obj.columns.primary.name,
-      isSingleState = obj.general.geoType === 'single-state',
       isBubble = obj.general.type === 'bubble',
       categoricalCol = obj.columns.categorical ? obj.columns.categorical.name : undefined,
       type = obj.legend.type,
@@ -573,7 +572,9 @@ const CdcMap = ({
       newLegendMemo.forEach(assignSpecialClassLastIndex)
       legendSpecialClassLastMemo.current = newLegendSpecialClassLastMemo
 
-      return result
+      // filter special classes from results
+      const specialValues = result.filter(d => d.special).map(d => d.value)
+      return result.filter(d => d.special || !specialValues.includes(d.value))
     }
 
     let uniqueValues = {}
@@ -1462,6 +1463,11 @@ const CdcMap = ({
       if (newData) {
         newState.data = newData
       }
+    } else if (newState.formattedData) {
+      newState.data = newState.formattedData
+    } else if (newState.dataDescription) {
+      newState.data = transform.autoStandardize(newState.data)
+      newState.data = transform.developerStandardize(newState.data, newState.dataDescription)
     }
 
     // This code goes through and adds the defaults for every property declaring in the initial state at the top.
@@ -1493,8 +1499,10 @@ const CdcMap = ({
     // add ability to rename state properties over time.
     const processedConfig = { ...coveUpdateWorker(newState) }
 
-    setState(processedConfig)
-    setLoading(false)
+    setTimeout(() => {
+      setState(processedConfig)
+      setLoading(false)
+    }, 10)
   }
 
   const init = async () => {
@@ -1722,7 +1730,6 @@ const CdcMap = ({
     tooltipRef,
     topoData,
     setTopoData,
-    getTextWidth,
     mapId
   }
 
@@ -1827,7 +1834,7 @@ const CdcMap = ({
                     closeModal(e)
                   }
                 }}
-                style={{ padding: '15px 25px', margin: '0px' }}
+                style={{ padding: '15px 0px', margin: '0px' }}
               >
                 {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
                 <section className='outline-none geography-container w-100' ref={mapSvg} tabIndex='0'>
@@ -1839,13 +1846,21 @@ const CdcMap = ({
                       {'us-region' === geoType && <UsaMap.Region />}
                       {'us-county' === geoType && <UsaMap.County />}
                       {'world' === geoType && <WorldMap />}
-                      {'data' === general.type && logo && <img src={logo} alt='' className='map-logo' />}
+                      {'data' === general.type && logo && (
+                        <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
+                      )}
                     </>
                   )}
                 </section>
 
                 {general.showSidebar && 'navigation' !== general.type && (
-                  <Legend dimensions={dimensions} currentViewport={currentViewport} ref={legendRef} skipId={tabId} />
+                  <Legend
+                    dimensions={dimensions}
+                    ref={legendRef}
+                    skipId={tabId}
+                    containerWidthPadding={0}
+                    currentViewport={currentViewport}
+                  />
                 )}
               </div>
 
@@ -1923,8 +1938,6 @@ const CdcMap = ({
 
               {state.annotations.length > 0 && <Annotation.Dropdown />}
 
-              {state.annotations.length > 0 && <Annotation.Dropdown />}
-
               {general.footnotes && <section className='footnotes'>{parse(general.footnotes)}</section>}
             </section>
           )}

package/src/_stories/CdcMap.stories.tsx

@@ -30,7 +30,8 @@ export const Equal_Number_Map: Story = {
 
 export const Scale_Based: Story = {
   args: {
-    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Scale-Based-Categorical-Map-With-Special-Classes.json'
+    configUrl:
+      'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Scale-Based-Categorical-Map-With-Special-Classes.json'
   }
 }
 export const Qualitative: Story = {
@@ -86,11 +87,6 @@ export const Custom_Map_Layers: Story = {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/custom-layer-map.json'
   }
 }
-export const Geocode: Story = {
-  args: {
-    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-u-s-geo-code-dat.json'
-  }
-}
 
 export const Single_State_With_Filters: Story = {
   args: {

package/src/_stories/CdcMapLegend.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import CdcMap from '../CdcMap'
+import SingleStateWithFilters from './_mock/DEV-8942.json'
+import UsGradient from './_mock/usa-state-gradient.json'
+import WastewaterMap from './_mock/wastewater-map.json'
+import { editConfigKeys } from '@cdc/chart/src/helpers/configHelpers'
+
+const meta: Meta<typeof CdcMap> = {
+  title: 'Components/Templates/Map/Legend',
+  component: CdcMap
+}
+
+type Story = StoryObj<typeof CdcMap>
+
+export default meta
+
+export const Single_State_With_Filters: Story = {
+  args: {
+    config: editConfigKeys(SingleStateWithFilters, [
+      { path: ['legend', 'style'], value: 'gradient' },
+      { path: ['legend', 'position'], value: 'top' },
+      { path: ['legend', 'hideBorder'], value: true },
+      { path: ['legend', 'title'], value: '' },
+      { path: ['legend', 'description'], value: '' }
+    ])
+  }
+}
+
+export const Gradient: Story = {
+  args: {
+    config: UsGradient
+  }
+}
+
+export const Gradient_Smooth: Story = {
+  args: {
+    config: editConfigKeys(UsGradient, [{ path: ['legend', 'subStyle'], value: 'smooth' }])
+  }
+}
+export const Gradient_With_Box: Story = {
+  args: {
+    config: editConfigKeys(UsGradient, [
+      { path: ['legend', 'subStyle'], value: 'linear blocks' },
+      { path: ['legend', 'hideBorder'], value: false }
+    ])
+  }
+}
+
+export const Gradient_With_Text: Story = {
+  args: {
+    config: editConfigKeys(UsGradient, [
+      { path: ['legend', 'title'], value: 'Title' },
+      { path: ['legend', 'description'], value: 'Description' },
+      { path: ['legend', 'hideBorder'], value: true }
+    ])
+  }
+}
+
+export const Legend_Right: Story = {
+  args: {
+    config: editConfigKeys(SingleStateWithFilters, [{ path: ['legend', 'hideBorder'], value: true }])
+  }
+}
+
+export const Gradient_With_Patterns: Story = {
+  args: {
+    config: WastewaterMap
+  }
+}
+export const Gradient_Reversed: Story = {
+  args: {
+    config: editConfigKeys(WastewaterMap, [
+      {
+        path: ['customColors'],
+        value: undefined
+      },
+      { path: ['legend', 'specialClasses'], value: ['No Data'] },
+      { path: ['legend', 'showSpecialClassesLast'], value: false },
+      {
+        path: ['legend', 'categoryValuesOrder'],
+        value: ['No Data', 'Minimal', 'Low', 'Moderate', 'High', 'Very High']
+      },
+      { path: ['color'], value: 'greenblue' }
+    ])
+  }
+}