npm - @cdc/map - Versions diffs - 4.23.5 → 4.23.7 - Mend

@cdc/map 4.23.5 → 4.23.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/cdcmap.js +23051 -22172
package/examples/custom-map-layers.json +10 -2
package/examples/example-city-state.json +36 -0
package/examples/new-cities.json +656 -0
package/examples/testing-layer-2.json +61 -1
package/examples/testing-layer.json +1 -5
package/index.html +8 -7
package/package.json +3 -3
package/src/CdcMap.jsx +61 -87
package/src/components/CountyMap.jsx +25 -14
package/src/components/DataTable.jsx +6 -6
package/src/components/EditorPanel.jsx +1272 -1232
package/src/components/UsaMap.jsx +7 -1
package/src/data/initial-state.js +3 -1
package/src/data/supported-cities.csv +165 -0
package/src/data/supported-geos.js +14 -0
package/src/hooks/useMapLayers.jsx +11 -75
package/src/hooks/useTooltip.js +135 -0
package/src/scss/editor-panel.scss +1 -7
package/src/scss/main.scss +1 -1
package/src/scss/map.scss +202 -203
package/LICENSE +0 -201
package/src/scss/tooltips.scss +0 -36

package/examples/testing-layer.json CHANGED Viewed

@@ -66,11 +66,7 @@
           "properties": {
             "name": "Polygon 2",
             "styleUrl": "#poly-000000-1200-77-nodesc",
-            "fill-opacity": 0.30196078431372547,
-            "fill": "blue",
-            "stroke-opacity": 1,
-            "stroke": "red",
-            "stroke-width": 5
+            "fill-opacity": 0.30196078431372547
           }
         },
         {

package/index.html CHANGED Viewed

@@ -16,12 +16,13 @@
   <body>
     <!-- DEFAULT EXAMPLES -->
-    <!-- <div class="react-container react-container--maps" data-config="/examples/default-county.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="/examples/default-county.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-usa-regions.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/default-world.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> -->
     <!-- TP4 EXAMPLES -->
@@ -29,15 +30,15 @@
     <!-- <div class="react-container react-container--maps" data-config="/examples/custom-map-layers.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-stateBAD.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-world-map.json"></div> -->
-    <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div>  -->
+    <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div> -->
     <!-- TP4 EXAMPLES -->
-    <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div>
-    <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state-no-territories.json"></div> -->
+    <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div> -->
+    <div class="react-container react-container--maps" data-config="/examples/example-city-state-no-territories.json"></div>
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-world-map.json"></div> -->
-    <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div>  -->
+    <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div> -->
-    <div class="react-container" data-config="/examples/example-hex-map-with-filter.json"></div>
+    <!-- <div class="react-container" data-config="/examples/example-hex-map-with-filter.json"></div> -->
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script type="module" src="./src/index.jsx"></script>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/map",
-  "version": "4.23.5",
+  "version": "4.23.7",
   "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.23.5",
+    "@cdc/core": "^4.23.7",
     "@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": "34add3436994ca3cf13e51f313add4d70377f53e"
+  "gitHead": "6c7ac5215dcf3bc1cc7d199089c8c2e75f53a93e"
 }

package/src/CdcMap.jsx CHANGED Viewed

@@ -14,6 +14,7 @@ import 'react-tooltip/dist/react-tooltip.css'
 // Helpers
 import { publish } from '@cdc/core/helpers/events'
+import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 // Data
 import { countryCoordinates } from './data/country-coordinates'
@@ -30,7 +31,7 @@ import './scss/btn.scss'
 // Core
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
-import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
+import MediaControls from '@cdc/core/components/MediaControls'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import getViewport from '@cdc/core/helpers/getViewport'
 import Loading from '@cdc/core/components/Loading'
@@ -50,6 +51,7 @@ import SingleStateMap from './components/SingleStateMap' // Future: Lazy
 import UsaMap from './components/UsaMap' // Future: Lazy
 import UsaRegionMap from './components/UsaRegionMap' // Future: Lazy
 import WorldMap from './components/WorldMap' // Future: Lazy
+import useTooltip from './hooks/useTooltip'
 // Data props
 const stateKeys = Object.keys(supportedStates)
@@ -501,10 +503,19 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       legendMemo.current = newLegendMemo
+      // before returning the legend result
+      // add property for bin number and set to index location
       result.forEach((row, i) => {
         row.bin = i // set bin number to index
       })
+      // Move all special legend items from "Special Classes"  to the end of the legend
+      if (state.legend.showSpecialClassesLast) {
+        let specialRows = result.filter(d => d.special === true)
+        let otherRows = result.filter(d => !d.special)
+        result = [...otherRows, ...specialRows]
+      }
       return result
     }
@@ -772,7 +783,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     if (hash) filters.fromHash = hash
-    obj?.filters.forEach(({ columnName, label, labels, queryParameter, orderedValues, active, values, type }, idx) => {
+    obj?.filters.forEach(({ columnName, label, labels, queryParameter, orderedValues, active, values, type, showDropdown }, idx) => {
       let newFilter = runtimeFilters[idx]
       const sortAsc = (a, b) => {
@@ -818,6 +829,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       handleSorting(newFilter)
       newFilter.active = active ?? values[0] // Default to first found value
       newFilter.filterStyle = obj.filters[idx].filterStyle ? obj.filters[idx].filterStyle : 'dropdown'
+      newFilter.showDropdown = showDropdown
       filters.push(newFilter)
     })
@@ -959,11 +971,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   }
   // this is passed DOWN into the various components
-  // then they do a lookup based on the bin number as index into here (TT)
+  // then they do a lookup based on the bin number as index into here
   const applyLegendToRow = rowObj => {
     try {
       if (!rowObj) throw new Error('COVE: No rowObj in applyLegendToRow')
-      // Navigation map
+      // Navigation mapchanged
       if ('navigation' === state.general.type) {
         let mapColorPalette = colorPalettes[state.color] || colorPalettes['bluegreenreverse']
         return generateColorsArray(mapColorPalette[3])
@@ -975,7 +987,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         let idx = legendMemo.current.get(hash)
         if (runtimeLegend[idx]?.disabled) return false
-        // DEV-784 changed to use bin prop to get color instead of idx
+        // changed to use bin prop to get color instead of idx
         // bc we re-order legend when showSpecialClassesLast is checked
         let legendBinColor = runtimeLegend.find(o => o.bin === idx)?.color
         return generateColorsArray(legendBinColor, runtimeLegend[idx]?.special)
@@ -988,81 +1000,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
   }
-  const applyTooltipsToGeo = (geoName, row, returnType = 'string') => {
-    if (!row) return
-    let toolTipText = ''
-    // Adds geo label, ie State: Georgia
-    let stateOrCounty = state.general.geoType === 'us' ? 'State: ' : state.general.geoType === 'us-county' || state.general.geoType === 'single-state' ? 'County: ' : ''
-    // check the override
-    stateOrCounty = state.general.geoLabelOverride !== '' ? state.general.geoLabelOverride + ': ' : stateOrCounty
-    if (state.general.geoType === 'us-county' && state.general.type !== 'us-geocode') {
-      let stateFipsCode = row[state.columns.geo.name].substring(0, 2)
-      const stateName = supportedStatesFipsCodes[stateFipsCode]
-      toolTipText += !state.general.hideGeoColumnInTooltip ? `<strong>Location:  ${stateName}</strong><br/>` : `<strong>${stateName}</strong><br/>`
-    }
-    toolTipText += !state.general.hideGeoColumnInTooltip ? `<strong>${stateOrCounty}${displayGeoName(geoName)}</strong>` : `<strong>${displayGeoName(geoName)}</strong>`
-    if (('data' === state.general.type || state.general.type === 'bubble' || state.general.type === 'us-geocode' || state.general.type === 'world-geocode') && undefined !== row) {
-      toolTipText += `<dl>`
-      Object.keys(state.columns).forEach(columnKey => {
-        const column = state.columns[columnKey]
-        if (true === column.tooltip) {
-          let label = column.label?.length > 0 ? column.label : ''
-          let value
-          if (state.legend.specialClasses && state.legend.specialClasses.length && typeof state.legend.specialClasses[0] === 'object') {
-            // THIS CODE SHOULD NOT ACT ON THE ENTIRE ROW OF KEYS BUT ONLY THE ONE KEY IN THE SPECIAL CLASS
-            for (let i = 0; i < state.legend.specialClasses.length; i++) {
-              // Special Classes label in HOVERS should only apply to selected special class key
-              // - you have to ALSO check that the key matches - putting here otherwise the if stmt too long
-              if (column.name === state.legend.specialClasses[i].key) {
-                if (String(row[state.legend.specialClasses[i].key]) === state.legend.specialClasses[i].value) {
-                  value = displayDataAsText(state.legend.specialClasses[i].label, columnKey)
-                  break
-                }
-              }
-            }
-          }
-          if (!value) {
-            value = displayDataAsText(row[column.name], columnKey)
-          }
-          if (0 < value.length) {
-            // Only spit out the tooltip if there's a value there
-            toolTipText += state.general.hidePrimaryColumnInTooltip ? `<div><dd>${value}</dd></div>` : `<div><dt>${label}</dt><dd>${value}</dd></div>`
-          }
-        }
-      })
-      toolTipText += `</dl>`
-    }
-    // We convert the markup into JSX and add a navigation link if it's going into a modal.
-    if ('jsx' === returnType) {
-      toolTipText = [<div key='modal-content'>{parse(toolTipText)}</div>]
-      if (state.columns.hasOwnProperty('navigate') && row[state.columns.navigate.name]) {
-        toolTipText.push(
-          // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-          <span className='navigation-link' key='modal-navigation-link' onClick={() => navigationHandler(row[state.columns.navigate.name])}>
-            {state.tooltips.linkLabel}
-            <ExternalIcon className='inline-icon ml-1' />
-          </span>
-        )
-      }
-    }
-    return toolTipText
-  }
   // if city has a hyphen then in tooltip it ends up UPPER CASE instead of just regular Upper Case
   // - this function is used to prevent that and instead give the formatting that is wanted
   // Example:  Desired city display in tooltip on map: "Inter-Tribal Indian Reservation"
@@ -1153,7 +1090,37 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     if (true === Object.keys(dict).includes(value)) {
       value = dict[value]
     }
-    return titleCase(value)
+    // if you get here and it's 2 letters then DONT titleCase state abbreviations like "AL"
+    if (value.length === 2) {
+      return value
+    } else {
+      return titleCase(value)
+    }
+  }
+  // todo: convert to store or context eventually.
+  const { buildTooltip } = useTooltip({ state, displayGeoName, displayDataAsText, supportedStatesFipsCodes })
+  const applyTooltipsToGeo = (geoName, row, returnType = 'string') => {
+    let toolTipText = buildTooltip(row, geoName, '')
+    // We convert the markup into JSX and add a navigation link if it's going into a modal.
+    if ('jsx' === returnType) {
+      toolTipText = [<div key='modal-content'>{parse(toolTipText)}</div>]
+      if (state.columns.hasOwnProperty('navigate') && row[state.columns.navigate.name]) {
+        toolTipText.push(
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+          <ul className='navigation-link' key='modal-navigation-link' onClick={() => navigationHandler(row[state.columns.navigate.name])}>
+            {state.tooltips.linkLabel}
+            <ExternalIcon className='inline-icon ml-1' />
+          </ul>
+        )
+      }
+    }
+    return toolTipText
   }
   const navigationHandler = urlString => {
@@ -1373,7 +1340,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
     validateFipsCodeLength(newState)
-    setState(newState)
+    // add ability to rename state properties over time.
+    const processedConfig = { ...(await coveUpdateWorker(newState)) }
+    setState(processedConfig)
     setLoading(false)
   }
@@ -1618,7 +1589,9 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         )}
         {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
           <section className={`cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title} ref={innerContainerRef}>
-            {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && <ReactTooltip id='tooltip' variant='light' float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'}`} />}
+            {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && (
+              <ReactTooltip id='tooltip' float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'}`} style={{ background: `rgba(255,255,255, ${state.tooltips.opacity / 100})`, color: 'black' }} />
+            )}
             {title && (
               <header className={general.showTitle === true ? 'visible' : 'hidden'} {...(!general.showTitle || !state.general.title ? { 'aria-hidden': true } : { 'aria-hidden': false })}>
                 {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
@@ -1690,10 +1663,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
             {subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
-            <CoveMediaControls.Section classes={['download-buttons']}>
-              {state.general.showDownloadImgButton && <CoveMediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={state} elementToCapture={imageId} />}
-              {state.general.showDownloadPdfButton && <CoveMediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={state} elementToCapture={imageId} />}
-            </CoveMediaControls.Section>
+            <MediaControls.Section classes={['download-buttons']}>
+              {state.general.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={state} elementToCapture={imageId} />}
+              {state.general.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={state} elementToCapture={imageId} />}
+            </MediaControls.Section>
             {state.runtime.editorErrorMessage.length === 0 && true === table.forceDisplay && general.type !== 'navigation' && false === loading && (
               <DataTable
@@ -1704,6 +1677,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
                 headerColor={general.headerColor}
                 columns={state.columns}
                 showDownloadButton={general.showDownloadButton}
+                showFullGeoNameInCSV={table.showFullGeoNameInCSV}
                 runtimeLegend={runtimeLegend}
                 runtimeData={runtimeData}
                 displayDataAsText={displayDataAsText}

package/src/components/CountyMap.jsx CHANGED Viewed

@@ -9,7 +9,6 @@ import Loading from '@cdc/core/components/Loading'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import topoJSON from '../data/county-map.json'
-import { formatPrefix } from 'd3'
 import useMapLayers from '../hooks/useMapLayers'
 const sortById = (a, b) => {
@@ -44,9 +43,6 @@ states.forEach(state => {
   countyIndecies[state.id] = [minIndex, maxIndex]
 })
-// CREATE STATE LINES
-const projection = geoAlbersUsaTerritories()
 // Ensures county map is only rerendered when it needs to (when one of the variables below is updated)
 function CountyMapChecks(prevState, nextState) {
   const equalNumberOptIn = prevState.state.general.equalNumberOptIn && nextState.state.general.equalNumberOptIn
@@ -62,6 +58,9 @@ function CountyMapChecks(prevState, nextState) {
 const CountyMap = props => {
   const { state, runtimeLegend, applyTooltipsToGeo, data, geoClickHandler, applyLegendToRow, displayGeoName, containerEl, handleMapAriaLabels } = props
+  // CREATE STATE LINES
+  const projection = geoAlbersUsaTerritories()
   const [focus, setFocus] = useState({})
   const pathGenerator = geoPath().projection(geoAlbersUsaTerritories())
@@ -160,7 +159,7 @@ const CountyMap = props => {
       if (isNaN(currentTooltipIndex) || !geoContains(mapData[currentTooltipIndex], pointCoordinates)) {
         const context = canvas.getContext('2d')
         const path = geoPath(projection, context)
-        if (!isNaN(currentTooltipIndex)) {
+        if (!isNaN(currentTooltipIndex) && applyLegendToRow(data[mapData[currentTooltipIndex].id])) {
           context.fillStyle = applyLegendToRow(data[mapData[currentTooltipIndex].id])[0]
           context.strokeStyle = geoStrokeColor
           context.lineWidth = lineWidth
@@ -193,13 +192,16 @@ const CountyMap = props => {
         // If the hovered county is found, show the tooltip for that county, otherwise hide the tooltip
         if (county && data[county.id]) {
-          context.fillStyle = applyLegendToRow(data[county.id])[1]
-          context.strokeStyle = geoStrokeColor
-          context.lineWidth = lineWidth
-          context.beginPath()
-          path(mapData[countyIndex])
-          context.fill()
-          context.stroke()
+          if (applyLegendToRow(data[county.id])) {
+            context.globalAlpha = 1
+            context.fillStyle = applyLegendToRow(data[county.id])[1]
+            context.strokeStyle = geoStrokeColor
+            context.lineWidth = lineWidth
+            context.beginPath()
+            path(mapData[countyIndex])
+            context.fill()
+            context.stroke()
+          }
           tooltipRef.current.style.display = 'block'
           tooltipRef.current.style.top = e.clientY + 'px'
@@ -376,8 +378,17 @@ const CountyMap = props => {
   return (
     <ErrorBoundary component='CountyMap'>
-      <canvas ref={canvasRef} aria-label={handleMapAriaLabels(state)} onMouseMove={canvasHover} onClick={canvasClick}></canvas>
-      <div ref={tooltipRef} id='canvas-tooltip' className='tooltip'></div>
+      <canvas
+        ref={canvasRef}
+        aria-label={handleMapAriaLabels(state)}
+        onMouseMove={canvasHover}
+        onMouseOut={() => {
+          tooltipRef.current.style.display = 'none'
+          tooltipRef.current.setAttribute('data-index', null)
+        }}
+        onClick={canvasClick}
+      ></canvas>
+      <div ref={tooltipRef} id='canvas-tooltip' className='tooltip' style={{ background: `rgba(255,255,255,${state.tooltips.opacity / 100})` }}></div>
       <button className={`btn btn--reset`} onClick={onReset} ref={resetButton} tabIndex='0'>
         Reset Zoom
       </button>

package/src/components/DataTable.jsx CHANGED Viewed

@@ -6,7 +6,7 @@ import Icon from '@cdc/core/components/ui/Icon'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import LegendCircle from '@cdc/core/components/LegendCircle'
-import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
+import MediaControls from '@cdc/core/components/MediaControls'
 import Loading from '@cdc/core/components/Loading'
@@ -131,7 +131,7 @@ const DataTable = props => {
   const DownloadButton = memo(() => {
     let csvData
-    if (state.general.type === 'bubble') {
+    if (state.general.type === 'bubble' || !state.table.showFullGeoNameInCSV) {
       // Just Unparse
       csvData = Papa.unparse(rawData)
     } else if (state.general.geoType !== 'us-county' || state.general.type === 'us-geocode') {
@@ -157,7 +157,7 @@ const DataTable = props => {
         Download Data (CSV)
       </a>
     )
-  }, [rawData])
+  }, [rawData, state.table])
   // Change accessibility label depending on expanded status
   useEffect(() => {
@@ -188,10 +188,10 @@ const DataTable = props => {
   return (
     <ErrorBoundary component='DataTable'>
-      <CoveMediaControls.Section classes={['download-links']}>
-        <CoveMediaControls.Link config={state} />
+      <MediaControls.Section classes={['download-links']}>
+        <MediaControls.Link config={state} />
         {state.general.showDownloadButton && <DownloadButton />}
-      </CoveMediaControls.Section>
+      </MediaControls.Section>
       <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
         <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>
           Skip Navigation or Skip to Content