@cdc/map 4.24.4 → 4.24.5

package/index.html

@@ -33,10 +33,10 @@
     <!-- <div class="react-container react-container--maps" data-config="/examples/test.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa-regions.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa.json"></div> -->
-    <div class="react-container react-container--maps" data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/US-County-Level-Map.json"></div>
+    <!-- <div class="react-container react-container--maps" data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/US-County-Level-Map.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-geocode.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-single-state.json"></div> -->
-    <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-us.json"></div> -->
+    <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-us.json"></div>
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-world.json"></div> -->
 
     <!-- TESTS DATA TABLE SORT-->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/map",
-  "version": "4.24.4",
+  "version": "4.24.5",
   "description": "React component for visualizing tabular data on a map of the United States or the world.",
   "moduleName": "CdcMap",
   "main": "dist/cdcmap",
@@ -24,7 +24,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/core": "^4.24.4",
+    "@cdc/core": "^4.24.5",
     "@emotion/core": "^10.0.28",
     "@emotion/react": "^11.1.5",
     "@hello-pangea/dnd": "^16.2.0",
@@ -51,5 +51,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "1843b4632140d582af6a87606374cbd4fe25ad5c"
+  "gitHead": "def85aaf4cd9dc1983e80f2900199f35de82af95"
 }

package/src/CdcMap.tsx

@@ -1675,8 +1675,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
   // this only shows in Dashboard config mode and only if Show Table is also set
   const tableLink = (
-    <a href={`#data-table-${state.general.dataKey}`} className='margin-left-href'>
-      {state.general.dataKey} (Go to Table)
+    <a href={`#data-table-${state.dataKey}`} className='margin-left-href'>
+      {state.dataKey} (Go to Table)
     </a>
   )
 
@@ -1704,7 +1704,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
               {general.introText && <section className='introText'>{parse(general.introText)}</section>}
 
               {/* prettier-ignore */}
-              {state?.filters?.length > 0 && <Filters config={state} setConfig={setState} filteredData={runtimeFilters} setFilteredData={setRuntimeFilters} dimensions={dimensions} />}
+              {state?.filters?.length > 0 && <Filters config={state} setConfig={setState} getUniqueValues={getUniqueValues} filteredData={runtimeFilters} setFilteredData={setRuntimeFilters} dimensions={dimensions} />}
 
               <div
                 role='region'

package/src/components/BubbleList.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from 'react'
+import React, { useContext, useEffect } from 'react'
 import { scaleLinear } from 'd3-scale'
 import { countryCoordinates } from '../data/country-coordinates'
 import stateCoordinates from '../data/state-coordinates'
@@ -7,6 +7,7 @@ import ConfigContext from './../../src/context'
 export const BubbleList = ({ data: dataImport, state, projection, applyLegendToRow, applyTooltipsToGeo, handleCircleClick, runtimeData, displayGeoName }) => {
   const maxDataValue = Math.max(...dataImport.map(d => d[state.columns.primary.name]))
   const { tooltipId } = useContext(ConfigContext)
+
   const hasBubblesWithZeroOnMap = state.visual.showBubbleZeros ? 0 : 1
   // sort runtime data. Smaller bubbles should appear on top.
   const sortedRuntimeData = Object.values(runtimeData).sort((a, b) => (a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1))

package/src/components/WorldMap/{components/WorldMap.jsx → WorldMap.tsx}

@@ -1,22 +1,21 @@
 import { memo, useContext } from 'react'
 
-import { jsx } from '@emotion/react'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { geoMercator } from 'd3-geo'
 import { Mercator } from '@visx/geo'
 import { feature } from 'topojson-client'
-import topoJSON from './../data/world-topo.json'
-import ZoomableGroup from '../../ZoomableGroup'
-import Geo from '../../Geo'
-import CityList from '../../CityList'
-import BubbleList from '../../BubbleList'
-import ConfigContext from '../../../context'
+import topoJSON from './data/world-topo.json'
+import ZoomableGroup from '../ZoomableGroup'
+import Geo from '../Geo'
+import CityList from '../CityList'
+import BubbleList from '../BubbleList'
+import ConfigContext from '../../context'
 
 const { features: world } = feature(topoJSON, topoJSON.objects.countries)
 
 let projection = geoMercator()
 
-const WorldMap = props => {
+const WorldMap = () => {
   // prettier-ignore
   const {
     applyLegendToRow,
@@ -127,7 +126,7 @@ const WorldMap = props => {
 
       const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
 
-      let styles = {
+      let styles: Record<string, string | Record<string, string>> = {
         fill: '#E6E6E6',
         cursor: 'default'
       }

package/src/components/WorldMap/index.tsx

@@ -1,3 +1,3 @@
-import WorldMap from './components/WorldMap'
+import WorldMap from './WorldMap'
 
 export default WorldMap

package/src/context.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react'
-import { MapConfig } from './MapConfig'
+import { MapConfig } from './types/MapConfig'
 
 type MapContext = {
   applyLegendToRow
@@ -42,6 +42,7 @@ type MapContext = {
   supportedCountries
   supportedTerritories
   titleCase
+  tooltipId: string
   viewport
 }