@cdc/map 4.23.5 → 4.23.7

package/src/components/UsaMap.jsx

@@ -188,12 +188,18 @@ const UsaMap = props => {
 
     // Dynamic text color
     if (chroma.contrast(textColor, bgColor) < 3.5) {
-      textColor = '#202020'
+      textColor = '#202020' // dark gray
+    }
+
+    // always make HI black since it is off to the side
+    if (abbr === 'US-HI') {
+      textColor = '#000'
     }
 
     let x = 0,
       y = 5
 
+    // used to nudge/move some of the labels for better readability
     if (nudges[abbr] && false === isHex) {
       x += nudges[abbr][0]
       y += nudges[abbr][1]

package/src/data/initial-state.js

@@ -69,6 +69,7 @@ export default {
     caption: '',
     showDownloadUrl: false,
     showDataTableLink: true,
+    showFullGeoNameInCSV: false,
     forceDisplay: true,
     download: false,
     indexLabel: ''
@@ -76,7 +77,8 @@ export default {
   tooltips: {
     appearanceType: 'hover',
     linkLabel: 'Learn More',
-    capitalizeLabels: true
+    capitalizeLabels: true,
+    opacity: 90
   },
   runtime: {
     editorErrorMessage: []

package/src/data/supported-cities.csv

@@ -0,0 +1,165 @@
+City,Latitude,Longitude
+ALASKA NATIVE TRIBAL HEALTH CONSORTIUM,-149.8067,61.1827
+ALBUQUERQUE,-106.650421,35.084385
+ALEXANDRIA,-77.0469,38.8048
+AMERICAN INDIAN CANCER FOUNDATION,-93.1777,45.0119
+ANAHEIM,-117.914299,33.836594
+ANCHORAGE,-149.900284,61.218056
+ARCTIC SLOPE NATIVE ASSOCIATION LIMITED,-156.79225,71.2907
+ARLINGTON,-97.108063,32.735687
+ATLANTA,-84.387985,33.748997
+AURORA,-93.717979,36.97089
+AUSTIN,-97.743057,30.267153
+BAKERSFIELD,-119.018715,35.373291
+BALTIMORE,-76.61219,39.290386
+BATON ROUGE,-91.187149,30.451468
+BIRMINGHAM,-86.9902166,33.5314447
+BOISE,-116.202316,43.615021
+BOSTON,-71.058884,42.360081
+BUFFALO,-78.878372,42.886448
+CALIFORNIA RURAL INDIAN HEALTH BOARD INC.,-121.3605,38.6468
+CHANDLER,-111.841248,33.30616
+CHARLOTTE,-80.843124,35.227085
+CHEROKEE NATION,-94.8936,36.3365
+CHESAPEAKE,-76.287491,36.768208
+CHEYENNE RIVER SIOUX TRIBE,-101.2358,45.00023
+CHICAGO,-87.629799,41.878113
+CHULA VISTA,-117.084198,32.640053
+CINCINNATI,-84.512016,39.103119
+CLEVELAND,-81.694359,41.499321
+COLORADO SPRINGS,-104.821365,38.833881
+COLUMBUS,-82.998795,39.961178
+CORPUS CHRISTI,-97.396378,27.800583
+DALLAS,-96.796989,32.776665
+DENVER,-104.99025,39.739235
+DETROIT,-83.045753,42.331429
+DISTRICT OF COLUMBIA,-77.036873,38.907192
+DURHAM,-78.898621,35.994034
+EAU CLAIRE,-91.4985,44.8113
+EL PASO,-106.485023,31.761877
+"ELLENSBURG, WA",-120.5478,46.9965
+"ELLENSBURG, WASHINGTON",-120.5478,46.9965
+FOND DU LAC RESERVATION,-92.6002,46.7502
+FORT WAYNE,-85.139351,41.079273
+FORT WORTH,-97.330765,32.755489
+FREMONT,-121.988571,37.548271
+FRESNO,-119.787125,36.737797
+FT WAYNE,-85.139351,41.079273
+GAINESVILLE,-82.3248,29.6516
+GARLAND,-96.638885,32.912624
+GILBERT,-111.789024,33.352825
+GLENDALE,-118.255074,34.142509
+"GRAND RAPIDS, MI",-85.6681,42.9634
+"GRAND RAPIDS, MICHIGAN",-85.6681,42.9634
+GREAT PLAINS TRIBAL CHAIRMEN\S HEALTH BOARD,-103.22444,44.083054
+GREENSBORO,-79.791977,36.072636
+HENDERSON,-114.98172,36.039524
+HERSHEY,-76.6779444,40.2849997
+HIALEAH,-80.278107,25.857595
+HONOLULU,-157.858337,21.306944
+HOPI TRIBE,-110.5035,35.7833
+HOUSTON,-86.136543,39.781029
+INDIANAPOLIS,-86.158066,39.768402
+"INTER-TRIBAL COUNCIL OF MICHIGAN, INC.",-84.35486,46.46462
+IRVINE,-117.826508,33.684566
+IRVING,-96.948891,32.814018
+JACKSONVILLE,-81.655647,30.332184
+JERSEY CITY,-77.199406,39.153515
+KANSAS CITY,-94.578568,39.099728
+KAW NATION OF OKLAHOMA,-96.8633,36.7669
+LAKEVIEW,-104.9903,39.7392
+LAREDO,-99.507553,27.503561
+LAS VEGAS,-115.139832,36.169941
+LEXINGTON,-84.503716,38.040585
+LINCOLN,-95.262955,37.346134
+LITTLE ROCK,-92.288,34.7445
+LOCKPORT,-78.6903,43.1706
+LONG BEACH,-118.193741,33.77005
+LOS ANGELES COUNTY,-118.229362,34.058762
+LOS ANGELES,-118.243683,34.052235
+LOUISVILLE,-85.758453,38.252666
+LUBBOCK,-101.855164,33.577862
+MADISON,-89.40123,43.073051
+"MARION COUNTY, INDIANA",-86.136543,39.781029
+MARION,-88.9330556,37.7305556
+MEMPHIS,-90.048981,35.149532
+MESA,-111.831474,33.415184
+MIAMI,-80.191788,25.761681
+MILWAUKEE,-87.906471,43.038902
+MINNEAPOLIS,-93.265015,44.977753
+MODESTO,-120.997,37.6393
+"MONTGOMERY COUNTY, MARYLAND",-77.199406,39.153515
+NASHVILLE,-86.781601,36.162663
+"NATIVE AMERICAN REHABILITATION ASSOCIATION OF THE NORTHWEST, INC.",-122.692,45.5184
+NAVAJO NATION,-109.188,35.0672
+NEW ORLEANS,-90.071533,29.951065
+NEW YORK CITY,-74.005974,40.712776
+NEWARK,-74.1724,40.7357
+NORFOLK,-76.285873,36.850769
+NORTH LAS VEGAS,-115.114571,36.19585
+NORTHWEST PORTLAND AREA INDIAN HEALTH BOARD,-122.6863,45.5076
+OAKLAND,-122.271111,37.804363
+OKLAHOMA CITY,-97.516426,35.46756
+OMAHA,-95.934502,41.256538
+ORLANDO,-81.379234,28.538336
+PASADENA,-95.209099,29.691063
+PHILADELPHIA,-75.165222,39.952583
+PHOENIX,-112.074036,33.448376
+PITTSBURGH,-79.995888,40.440624
+PLANO,-96.698883,33.019844
+PORTLAND,-122.658722,45.51223
+"PROVO, UT",-111.6585,40.2338
+"PROVO, UTAH",-111.6585,40.2338
+RALEIGH,-78.638176,35.779591
+RENO,-119.813805,39.529633
+RICHMOND,-77.43605,37.540726
+RIVERSIDE,-117.375496,33.980602
+"ROUND ROCK, TEXAS",-97.6789,30.5083
+"ROUND ROCK, TX",-97.6789,30.5083
+SACRAMENTO,-121.4944,38.581573
+SAINT PAUL,-93.089958,44.953705
+"SALEM, ALABAMA",-85.2386,32.5968
+"SALEM, CONNECTICUT",-72.2754,41.4904
+"SALEM, FLORIDA",-83.4129,29.8869
+"SALEM, ILLINOIS",-88.945618,38.626991
+"SALEM, MASSACHUSETTS",-70.8955,42.5197
+"SALEM, OR",-123.0351,44.9429
+"SALEM, OREGON",-123.0351,44.9429
+"SALEM, OREGON",-123.0351,44.9429
+SALT LAKE CITY,-112.0605644,40.7767833
+"SALUDA, VA",-76.595,37.6064
+"SALUDA, VIRGINIA",-76.595,37.6064
+SAN ANTONIO,-98.493629,29.424122
+SAN BENITO,-97.6311,26.1326
+SAN BERNARDINO,-117.302399,34.115784
+SAN DIEGO,-117.161087,32.715736
+SAN FRANCISCO,-122.419418,37.774929
+SAN JOSE,-121.88633,37.338207
+SANTA ANA,-117.867653,33.745472
+SANTA CLARA,-121.955238,37.354107
+SCOTTSDALE,-111.926048,33.494171
+SEATTLE,-122.332069,47.606209
+SOUTH PUGET INTERTRIBAL PLANNING AGENCY,-123.0832,47.1241
+SOUTHCENTRAL FOUNDATION,-149.7971,61.1821
+SOUTHEAST ALASKA REGIONAL HEALTH CONSORTIUM,-135.3369,57.05479
+SPOKANE,-117.426048,47.658779
+ST PAUL,-93.089958,44.953705
+ST. LOUIS,-90.199402,38.627003
+ST. PETERSBURG,-82.640289,27.767601
+STOCKTON,-121.290779,37.957703
+SYRACUSE,-76.1742992,43.0352913
+TAMPA,-82.457176,27.950575
+TOLEDO,-83.537865,41.652805
+TUCSON,-110.974709,32.222607
+TULSA,-95.992775,36.15398
+TUSCON,-110.974709,32.222607
+US-DC,-77.036873,38.907192
+VIRGINIA BEACH,-75.977982,36.852924
+WARREN,-80.8184,41.2376
+WASHINGTON D.C.,-77.036873,38.907192
+WASHINGTON DC.,-77.036873,38.907192
+WASHINGTON DC,-77.036873,38.907192
+WICHITA,-97.330055,37.687176
+WINSTON SALEM,-80.244217,36.099861
+WINSTON-SALEM,-80.244217,36.099861
+YUKON-KUSKOKWIM HEALTH CORPORATION,-161.7849,60.7881

package/src/data/supported-geos.js

@@ -496,6 +496,8 @@ export const supportedTerritories = {
   'US-MH': ['MARSHALL ISLANDS', 'MH', 'RMI'] // Note: Key is not an official ISO code
 }
 
+// ! INFO: coordinates are [negative longitude, latitude]
+// ie. Albuquerque coordinates are actually [35, 106]
 // prettier-ignore
 export const supportedCities = {
   'ALASKA NATIVE TRIBAL HEALTH CONSORTIUM': [-149.8067, 61.1827],
@@ -536,6 +538,8 @@ export const supportedCities = {
   'DURHAM': [-78.898621, 35.994034],
   'EAU CLAIRE': [-91.4985, 44.8113],
   'EL PASO': [-106.485023, 31.761877],
+  'ELLENSBURG, WA': [-120.5478, 46.9965],
+  'ELLENSBURG, WASHINGTON': [-120.5478, 46.9965],
   'FOND DU LAC RESERVATION': [-92.6002, 46.7502],
   'FORT WAYNE': [-85.139351, 41.079273],
   'FORT WORTH': [-97.330765, 32.755489],
@@ -546,6 +550,8 @@ export const supportedCities = {
   'GARLAND': [-96.638885, 32.912624],
   'GILBERT': [-111.789024, 33.352825],
   'GLENDALE': [-118.255074, 34.142509],
+  'GRAND RAPIDS, MI': [-85.6681, 42.9634],
+  'GRAND RAPIDS, MICHIGAN': [-85.6681, 42.9634],
   'GREAT PLAINS TRIBAL CHAIRMEN\'S HEALTH BOARD': [-103.22444, 44.083054],
   'GREENSBORO': [-79.791977, 36.072636],
   'HENDERSON': [-114.981720, 36.039524],
@@ -603,10 +609,14 @@ export const supportedCities = {
   'PITTSBURGH': [-79.995888, 40.440624],
   'PLANO': [-96.698883, 33.019844],
   'PORTLAND': [-122.658722, 45.512230],
+  'PROVO, UT': [-111.6585, 40.2338],
+  'PROVO, UTAH': [-111.6585, 40.2338],
   'RALEIGH': [-78.638176, 35.779591],
   'RENO': [-119.813805, 39.529633],
   'RICHMOND': [-77.436050, 37.540726],
   'RIVERSIDE': [-117.375496, 33.980602],
+  'ROUND ROCK, TEXAS': [-97.6789, 30.5083],
+  'ROUND ROCK, TX': [-97.6789, 30.5083],
   'SACRAMENTO': [-121.494400, 38.581573],
   'SAINT PAUL': [-93.089958, 44.953705],
   'SALEM, ALABAMA': [-85.2386, 32.5968],
@@ -614,8 +624,12 @@ export const supportedCities = {
   'SALEM, FLORIDA': [-83.4129, 29.8869],
   'SALEM, ILLINOIS':[-88.945618,38.626991],
   'SALEM, MASSACHUSETTS': [-70.8955, 42.5197],
+  'SALEM, OR': [-123.0351, 44.9429],
+  'SALEM, OREGON': [-123.0351, 44.9429],
   'SALEM, OREGON': [-123.0351, 44.9429],
   'SALT LAKE CITY': [-112.0605644, 40.7767833],
+  'SALUDA, VA': [-76.5950, 37.6064],
+  'SALUDA, VIRGINIA': [-76.5950, 37.6064],
   'SAN ANTONIO': [-98.493629, 29.424122],
   'SAN BENITO': [-97.6311, 26.1326],
   'SAN BERNARDINO':[-117.302399,34.115784],

package/src/hooks/useMapLayers.jsx

@@ -83,78 +83,18 @@ export default function useMapLayers(config, setConfig, pathGenerator) {
     setConfig(updatedState)
   }
 
-  /**
-   * Updates the index of the layer tooltip
-   * @param {Event} e
-   * @param {Integer} index
-   */
-  const handleMapLayerTooltip = (e, index) => {
-    e.preventDefault()
-    let newLayers = [...config.map.layers]
-
-    newLayers[index].tooltip = e.target.value
-
-    setConfig({
-      ...config,
-      map: {
-        ...config.map,
-        layers: newLayers
-      }
-    })
-  }
-
-  /**
-   * Changes the map layer url for a given index
-   * @param {Event} e - on add custom layer click
-   * @param {Integer} index - index of layer to update
-   */
-  const handleMapLayerUrl = (e, index) => {
-    e.preventDefault()
-    let newLayers = [...config.map.layers]
-
-    newLayers[index].url = e.target.value
-
-    setConfig({
-      ...config,
-      map: {
-        ...config.map,
-        layers: newLayers
-      }
-    })
-  }
-
-  /**
-   * Changes the map layer name for a given index
-   * @param {Event} e - on add custom layer click
-   * @param {Integer} index - index of layer to update
-   */
-  const handleMapLayerName = (e, index) => {
+  const handleMapLayer = (e, index, layerKey) => {
     e.preventDefault()
 
-    let newLayers = [...config.map.layers]
-
-    newLayers[index].name = e.target.value
-
-    setConfig({
-      ...config,
-      map: {
-        ...config.map,
-        layers: newLayers
-      }
-    })
-  }
+    let layerValue = e.target.value
 
-  /**
-   * Changes the map layer namespace for a given index
-   * @param {Event} e - on add custom layer click
-   * @param {Integer} index - index of layer to update
-   */
-  const handleMapLayerNamespace = (e, index) => {
-    e.preventDefault()
+    if (layerKey === 'fillOpacity') {
+      layerValue = layerValue / 100
+    }
 
     let newLayers = [...config.map.layers]
 
-    newLayers[index].namespace = e.target.value
+    newLayers[index][layerKey] = layerValue
 
     setConfig({
       ...config,
@@ -207,17 +147,16 @@ export default function useMapLayers(config, setConfig, pathGenerator) {
 
         // feature array for county maps
         tempFeatureArray.push(item)
-
         tempArr.push(
           <Group className={layerClasses.join(' ')} key={`customMapLayer-${item.properties.name.replace(' ', '-')}-${index}`}>
             {/* prettier-ignore */}
             <path
               d={pathGenerator(item)}
-              fill={item.properties.fill}
-              fillOpacity={item.properties['fill-opacity']}
+              fill={config.map.layers[index].fill ? config.map.layers[index].fill : item.properties.fill ? item.properties.fill : 'transparent'}
+              fillOpacity={config.map.layers[index].fillOpacity ? config.map.layers[index].fillOpacity : item.properties['fill-opacity'] ? item.properties['fill-opacity'] : '1'}
               key={geoId} data-id={geoId}
-              stroke={item.properties.stroke}
-              strokeWidth={item.properties['stroke-width']}
+              stroke={config.map.layers[index].stroke ? config.map.layers[index].stroke : item.properties.stroke ? item.properties.stroke : 'transparent'}
+              strokeWidth={config.map.layers[index].strokeWidth ? config.map.layers[index].strokeWidth : item.properties['stroke-width']}
               data-tooltip-id='tooltip'
               data-tooltip-html={config.map.layers[index].tooltip ? config.map.layers[index].tooltip : ''}
             />
@@ -234,10 +173,7 @@ export default function useMapLayers(config, setConfig, pathGenerator) {
   const MapLayerHandlers = () => null
   MapLayerHandlers.handleRemoveLayer = handleRemoveLayer
   MapLayerHandlers.handleAddLayer = handleAddLayer
-  MapLayerHandlers.handleMapLayerUrl = handleMapLayerUrl
-  MapLayerHandlers.handleMapLayerName = handleMapLayerName
-  MapLayerHandlers.handleMapLayerNamespace = handleMapLayerNamespace
-  MapLayerHandlers.handleMapLayerTooltip = handleMapLayerTooltip
+  MapLayerHandlers.handleMapLayer = handleMapLayer
 
   return { pathArray, featureArray, MapLayerHandlers }
 }

package/src/hooks/useTooltip.js

@@ -0,0 +1,135 @@
+const useTooltip = props => {
+  const { state, displayGeoName, displayDataAsText, supportedStatesFipsCodes } = props
+
+  /**
+   * On county maps there's a need to append the state name
+   * @param {String} toolTipText - previous tooltip text to build upon
+   * @param {Object} row - row of data to lookup fips code with using the geo column.
+   * @returns {String} toolTipText - new toolTipText
+   */
+  const handleTooltipStateNameColumn = (toolTipText, row) => {
+    const { geoType, type, hideGeoColumnInTooltip } = state.general
+    if (geoType === 'us-county' && type !== 'us-geocode') {
+      let stateFipsCode = row[state.columns.geo.name].substring(0, 2)
+      const stateName = supportedStatesFipsCodes[stateFipsCode]
+      toolTipText += hideGeoColumnInTooltip ? `<strong>${stateName}</strong><br/>` : `<strong>Location:  ${stateName}</strong><br/>`
+    }
+    return toolTipText
+  }
+
+  /**
+   * On county and state maps, adds the ability to hide the geo column name (prefix)
+   * @param {String} geoName - feature name
+   * @returns {String} text to be appended to toolTipText
+   */
+  const handleTooltipGeoColumn = geoName => {
+    const { hideGeoColumnInTooltip } = state.general
+
+    const handleTooltipPrefix = toolTipText => {
+      const { geoType, geoLabelOverride } = state.general
+      switch (geoType) {
+        case 'us':
+          toolTipText = 'State: '
+          break
+        case 'us-county':
+          toolTipText = 'County: '
+          break
+        case 'single-state':
+          toolTipText = 'County: '
+          break
+        default:
+          toolTipText = ''
+          break
+      }
+
+      if (geoLabelOverride) toolTipText = `${geoLabelOverride}: `
+
+      return toolTipText
+    }
+
+    const prefix = handleTooltipPrefix()
+
+    if (hideGeoColumnInTooltip) return `<strong>${displayGeoName(geoName)}</strong>`
+    return `<p class="tooltip-heading">${prefix}${displayGeoName(geoName)}</p>`
+  }
+
+  /**
+   * Handles special class descriptions in tooltips
+   */
+  const handleTooltipSpecialClassText = (specialClasses, column, row, value, columnKey) => {
+    if (specialClasses && specialClasses.length && typeof specialClasses[0] === 'object') {
+      for (const specialClass of specialClasses) {
+        if (column.name === specialClass.key && String(row[specialClass.key]) === specialClass.value) {
+          value = displayDataAsText(specialClass.label, columnKey)
+          break
+        }
+      }
+    }
+    return value
+  }
+
+  const handleTooltipPrimaryColumn = (tooltipValue, column) => {
+    const { hidePrimaryColumnInTooltip } = state.general
+    let tooltipPrefix = column.label?.length > 0 ? column.label : ''
+    if (hidePrimaryColumnInTooltip || !tooltipPrefix) return `<li class="tooltip-body">${tooltipValue}</li>`
+    return `<li class="tooltip-body">${tooltipPrefix}: ${tooltipValue}</li>`
+  }
+
+  /**
+   *
+   * @param {String} toolTipText - previous tooltipText to build upon
+   * @param {Object} row - row of data
+   * @returns {String} new tooltipText value
+   */
+  const handleTooltipColumns = (toolTipText, row) => {
+    const tooltipEnabledMaps = ['data', 'bubble', 'us-geocode', 'world-geocode', 'map']
+    const {
+      general: { type: currentMapType },
+      columns,
+      legend: { specialClasses }
+    } = state
+
+    if (tooltipEnabledMaps.includes(currentMapType) && undefined !== row) {
+      toolTipText += `<ul className="capitalize">`
+
+      // if tooltips are allowed, loop through each column
+      Object.keys(columns).forEach(columnKey => {
+        const column = state.columns[columnKey]
+
+        if (column.tooltip) {
+          let tooltipValue = handleTooltipSpecialClassText(specialClasses, column, row, '', columnKey)
+
+          if (!tooltipValue) {
+            tooltipValue = displayDataAsText(row[column.name], columnKey)
+          }
+
+          toolTipText += handleTooltipPrimaryColumn(tooltipValue, column)
+        }
+      })
+      toolTipText += `</ul>`
+    }
+
+    return toolTipText
+  }
+
+  const buildTooltip = (row, geoName, toolTipText = '') => {
+    if (!row) return
+
+    // Handle County Location Columns
+    toolTipText += handleTooltipStateNameColumn(toolTipText, row)
+
+    // Handle Data > Geo Column In tooltips
+    toolTipText += handleTooltipGeoColumn(geoName)
+
+    // Handle Data > Primary Column in tooltips
+    toolTipText = handleTooltipColumns(toolTipText, row)
+
+    return toolTipText
+  }
+
+  return {
+    buildTooltip
+  }
+}
+
+export default useTooltip

package/src/scss/editor-panel.scss

@@ -130,13 +130,7 @@
     .remove-column {
       font-size: 13px;
     }
-    .__react_component_tooltip {
-      padding: 5px;
-      max-width: 300px;
-    }
-    .tooltip {
-      position: relative;
-    }
+
     .helper {
       position: relative;
       opacity: 0.7;

package/src/scss/main.scss

@@ -3,6 +3,7 @@
 @import 'variables';
 @import 'editor-panel';
 @import 'filters';
+@import '@cdc/core/styles/v2/components/ui/tooltip';
 
 .cdc-map-outer-container {
   position: relative;
@@ -20,7 +21,6 @@
 }
 
 .cdc-map-inner-container {
-  @import './tooltips';
   @import './map';
   @import './sidebar';
   @import './datatable';