@cdc/map 4.23.6 → 4.23.8

package/src/components/UsaMap.jsx

@@ -372,11 +372,18 @@ const UsaMap = props => {
           </AlbersUsa>
         )}
       </svg>
+
       {territories.length > 0 && (
-        <section className='territories'>
-          <span className='label'>{state.general.territoriesLabel}</span>
-          {territories}
-        </section>
+        <>
+          <div className='two-col'>
+            <div>
+              <span className='territories-label label'>{state.general.territoriesLabel}</span>
+            </div>
+            <div>
+              <span className={window.visualViewport.width < 500 ? 'territories--mobile' : 'territories'}>{territories}</span>
+            </div>
+          </div>
+        </>
       )}
     </ErrorBoundary>
   )

package/src/components/UsaRegionMap.jsx

@@ -103,17 +103,7 @@ const UsaRegionMap = props => {
         }
       }
 
-      return <Shape
-        key={label}
-        label={label}
-        css={styles}
-        text={styles.color}
-        stroke={geoStrokeColor}
-        strokeWidth={1.5}
-        onClick={() => geoClickHandler(territory, territoryData)}
-        data-tooltip-id="tooltip"
-        data-tooltip-html={toolTip}
-      />
+      return <Shape key={label} label={label} css={styles} text={styles.color} stroke={geoStrokeColor} strokeWidth={1.5} onClick={() => geoClickHandler(territory, territoryData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} />
     }
   })
 
@@ -220,13 +210,7 @@ const UsaRegionMap = props => {
         // const barFill = barPositive ? "#fff" : "#fff";
 
         return (
-          <g key={key}
-             className='geo-group'
-             css={styles}
-             onClick={() => geoClickHandler(geoDisplayName, geoData)}
-             data-tooltip-id="tooltip"
-             data-tooltip-html={toolTip}
-          >
+          <g key={key} className='geo-group' css={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip}>
             <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1.3} d={path} />
             <g id={`region-${index + 1}-label`}>
               <circle fill='#fff' stroke='#999' cx={circleRadius} cy={circleRadius} r={circleRadius} />

package/src/components/WorldMap.jsx

@@ -16,21 +16,7 @@ const { features: world } = feature(topoJSON, topoJSON.objects.countries)
 let projection = geoMercator()
 
 const WorldMap = props => {
-  const {
-    state,
-    applyTooltipsToGeo,
-    data,
-    geoClickHandler,
-    applyLegendToRow,
-    displayGeoName,
-    supportedCountries,
-    setState, setRuntimeData,
-    generateRuntimeData,
-    setFilteredCountryCode,
-    position, setPosition,
-    hasZoom,
-    handleMapAriaLabels,
-    titleCase } = props
+  const { state, applyTooltipsToGeo, data, geoClickHandler, applyLegendToRow, displayGeoName, supportedCountries, setState, setRuntimeData, generateRuntimeData, setFilteredCountryCode, position, setPosition, hasZoom, handleMapAriaLabels, titleCase } = props
 
   // TODO Refactor - state should be set together here to avoid rerenders
   // Resets to original data & zooms out
@@ -54,31 +40,34 @@ const WorldMap = props => {
     setPosition(pos => ({ ...pos, zoom: pos.zoom / 1.5 }))
   }
 
-  const ZoomControls = ({ position, setPosition, state, setState, setRuntimeData, generateRuntimeData }) => (
-    <div className='zoom-controls' data-html2canvas-ignore>
-      <button onClick={() => handleZoomIn(position, setPosition)} aria-label='Zoom In'>
-        <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
-          <line x1='12' y1='5' x2='12' y2='19' />
-          <line x1='5' y1='12' x2='19' y2='12' />
-        </svg>
-      </button>
-      <button onClick={() => handleZoomOut(position, setPosition)} aria-label='Zoom Out'>
-        <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
-          <line x1='5' y1='12' x2='19' y2='12' />
-        </svg>
-      </button>
-      {state.general.type === 'bubble' && (
-        <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom and Map Filters'>
-          Reset Filters
+  const ZoomControls = ({ position, setPosition, state, setState, setRuntimeData, generateRuntimeData }) => {
+    if (!state.general.allowMapZoom) return
+    return (
+      <div className='zoom-controls' data-html2canvas-ignore>
+        <button onClick={() => handleZoomIn(position, setPosition)} aria-label='Zoom In'>
+          <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
+            <line x1='12' y1='5' x2='12' y2='19' />
+            <line x1='5' y1='12' x2='19' y2='12' />
+          </svg>
         </button>
-      )}
-      {state.general.type === 'world-geocode' && (
-        <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom'>
-          Reset Zoom
+        <button onClick={() => handleZoomOut(position, setPosition)} aria-label='Zoom Out'>
+          <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
+            <line x1='5' y1='12' x2='19' y2='12' />
+          </svg>
         </button>
-      )}
-    </div>
-  )
+        {state.general.type === 'bubble' && (
+          <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom and Map Filters'>
+            Reset Filters
+          </button>
+        )}
+        {state.general.type === 'world-geocode' && (
+          <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom'>
+            Reset Zoom
+          </button>
+        )}
+      </div>
+    )
+  }
 
   // TODO Refactor - state should be set together here to avoid rerenders
   const handleCircleClick = (country, state, setState, setRuntimeData, generateRuntimeData) => {
@@ -95,7 +84,7 @@ const WorldMap = props => {
     const geosJsx = geographies.map(({ feature: geo, path }, i) => {
       const geoKey = geo.properties.iso
 
-      if (!geoKey) return null;
+      if (!geoKey) return null
 
       const geoData = data[geoKey]
 
@@ -138,16 +127,7 @@ const WorldMap = props => {
           styles.cursor = 'pointer'
         }
 
-        return <Geo
-          key={i + '-geo'}
-          css={styles}
-          path={path}
-          stroke={geoStrokeColor}
-          strokeWidth={strokeWidth}
-          onClick={() => geoClickHandler(geoDisplayName, geoData)}
-          data-tooltip-id="tooltip"
-          data-tooltip-html={toolTip}
-        />
+        return <Geo key={i + '-geo'} css={styles} path={path} stroke={geoStrokeColor} strokeWidth={strokeWidth} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} />
       }
 
       // Default return state, just geo with no additional information
@@ -156,18 +136,7 @@ const WorldMap = props => {
 
     // Cities
     geosJsx.push(
-      <CityList
-        applyLegendToRow={applyLegendToRow}
-        applyTooltipsToGeo={applyTooltipsToGeo}
-        data={data}
-        displayGeoName={displayGeoName}
-        geoClickHandler={geoClickHandler}
-        isGeoCodeMap={state.general.type === 'world-geocode'}
-        key='cities'
-        projection={projection}
-        state={state}
-        titleCase={titleCase}
-      />
+      <CityList applyLegendToRow={applyLegendToRow} applyTooltipsToGeo={applyTooltipsToGeo} data={data} displayGeoName={displayGeoName} geoClickHandler={geoClickHandler} isGeoCodeMap={state.general.type === 'world-geocode'} key='cities' projection={projection} state={state} titleCase={titleCase} />
     )
 
     // Bubbles
@@ -206,7 +175,9 @@ const WorldMap = props => {
           </ZoomableGroup>
         </svg>
       )}
-      {(state.general.type === 'data' || (state.general.type === 'world-geocode' && hasZoom) || (state.general.type === 'bubble' && hasZoom)) && <ZoomControls position={position} setPosition={setPosition} setRuntimeData={setRuntimeData} state={state} setState={setState} generateRuntimeData={generateRuntimeData} />}
+      {(state.general.type === 'data' || (state.general.type === 'world-geocode' && hasZoom) || (state.general.type === 'bubble' && hasZoom)) && (
+        <ZoomControls position={position} setPosition={setPosition} setRuntimeData={setRuntimeData} state={state} setState={setState} generateRuntimeData={generateRuntimeData} />
+      )}
     </ErrorBoundary>
   )
 }

package/src/data/initial-state.js

@@ -22,7 +22,11 @@ export default {
     },
     allowMapZoom: true,
     hideGeoColumnInTooltip: false,
-    hidePrimaryColumnInTooltip: false
+    hidePrimaryColumnInTooltip: false,
+    statePicked: {
+      fipsCode: '01',
+      stateName: 'Alabama'
+    }
   },
   type: 'map',
   color: 'pinkpurple',
@@ -77,7 +81,8 @@ export default {
   tooltips: {
     appearanceType: 'hover',
     linkLabel: 'Learn More',
-    capitalizeLabels: true
+    capitalizeLabels: true,
+    opacity: 90
   },
   runtime: {
     editorErrorMessage: []

package/src/data/supported-geos.js

@@ -172,6 +172,9 @@ export const stateFipsToTwoDigit = {
   54: 'WV',
   55: 'WI',
   56: 'WY',
+  60: 'AS',
+  66: 'GU',
+  69: 'MP',
   72: 'PR',
   78: 'VI'
 }

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';