@cdc/map 4.23.2 → 4.23.3

package/src/components/UsaMap.jsx

@@ -79,6 +79,7 @@ const UsaMap = props => {
         isFilterValueSupported = true
       }
     })
+
     Object.keys(supportedTerritories).forEach(supportedTerritory => {
       if (supportedTerritories[supportedTerritory].indexOf(setSharedFilterValue.toUpperCase()) !== -1) {
         isFilterValueSupported = true
@@ -109,11 +110,15 @@ const UsaMap = props => {
   const territoriesKeys = Object.keys(supportedTerritories) // data will have already mapped abbreviated territories to their full names
 
   useEffect(() => {
-    // Territories need to show up if they're in the data at all, not just if they're "active". That's why this is different from Cities
-    const territoriesList = territoriesKeys.filter(key => data[key])
-
-    setTerritoriesData(territoriesList)
-  }, [data])
+    if (state.general.territoriesAlwaysShow) {
+      // show all Territories whether in the data or not
+      setTerritoriesData(territoriesKeys)
+    } else {
+      // Territories need to show up if they're in the data at all, not just if they're "active". That's why this is different from Cities
+      const territoriesList = territoriesKeys.filter(key => data[key])
+      setTerritoriesData(territoriesList)
+    }
+  }, [data, state.general.territoriesAlwaysShow]) // eslint-disable-line
 
   const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
 
@@ -167,8 +172,8 @@ const UsaMap = props => {
       }
 
       return <Shape key={label} label={label} css={styles} text={styles.color} strokeWidth={1.5} textColor={textColor} onClick={() => geoClickHandler(territory, territoryData)}
-                    data-tooltip-id="tooltip"
-                    data-tooltip-html={toolTip}
+        data-tooltip-id="tooltip"
+        data-tooltip-html={toolTip}
       />
     }
   })
@@ -292,10 +297,10 @@ const UsaMap = props => {
         return (
           <g data-name={geoName} key={key}>
             <g className='geo-group' css={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)}
-               id={geoName}
-               data-tooltip-id="tooltip"
-               data-tooltip-html={tooltip}
-               >
+              id={geoName}
+              data-tooltip-id="tooltip"
+              data-tooltip-html={tooltip}
+            >
               <path tabIndex={-1} className='single-geo' strokeWidth={1.3} d={path} />
               {(isHex || showLabel) && geoLabel(geo, legendColors[0], projection)}
             </g>
@@ -319,18 +324,18 @@ const UsaMap = props => {
     // Cities
     geosJsx.push(
       <CityList
-        projection={projection}
-        key='cities'
-        data={data}
-        state={state}
-        geoClickHandler={geoClickHandler}
+        applyLegendToRow={applyLegendToRow}
         applyTooltipsToGeo={applyTooltipsToGeo}
+        data={data}
         displayGeoName={displayGeoName}
-        applyLegendToRow={applyLegendToRow}
-        titleCase={titleCase}
-        setSharedFilterValue={setSharedFilterValue}
+        geoClickHandler={geoClickHandler}
         isFilterValueSupported={isFilterValueSupported}
         isGeoCodeMap={state.general.type === 'us-geocode'}
+        key='cities'
+        projection={projection}
+        setSharedFilterValue={setSharedFilterValue}
+        state={state}
+        titleCase={titleCase}
       />
     )
 

package/src/components/WorldMap.jsx

@@ -1,4 +1,4 @@
-import { useEffect, memo } from 'react'
+import { memo } from 'react'
 
 import { jsx } from '@emotion/react'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -16,7 +16,21 @@ 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 } = 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
@@ -58,6 +72,11 @@ const WorldMap = props => {
           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>
   )
 
@@ -76,7 +95,7 @@ const WorldMap = props => {
     const geosJsx = geographies.map(({ feature: geo, path }, i) => {
       const geoKey = geo.properties.iso
 
-      if (!geoKey) return
+      if (!geoKey) return null;
 
       const geoData = data[geoKey]
 
@@ -104,13 +123,13 @@ const WorldMap = props => {
 
         styles = {
           ...styles,
-          fill: legendColors[0],
+          fill: state.general.type !== 'world-geocode' ? legendColors[0] : '#E6E6E6',
           cursor: 'default',
           '&:hover': {
-            fill: legendColors[1]
+            fill: state.general.type !== 'world-geocode' ? legendColors[1] : '#E6E6E6'
           },
           '&:active': {
-            fill: legendColors[2]
+            fill: state.general.type !== 'world-geocode' ? legendColors[2] : '#E6E6E6'
           }
         }
 
@@ -136,7 +155,20 @@ const WorldMap = props => {
     })
 
     // Cities
-    geosJsx.push(<CityList projection={projection} key='cities' data={data} state={state} geoClickHandler={geoClickHandler} applyTooltipsToGeo={applyTooltipsToGeo} displayGeoName={displayGeoName} applyLegendToRow={applyLegendToRow} isGeoCodeMap={state.general.type === 'us-geocode'} />)
+    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}
+      />
+    )
 
     // Bubbles
     if (state.general.type === 'bubble') {
@@ -174,7 +206,7 @@ const WorldMap = props => {
           </ZoomableGroup>
         </svg>
       )}
-      {(state.general.type === 'data' || (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/feature-test.json

@@ -0,0 +1,73 @@
+{
+  "type": "Topology",
+  "arcs": [
+    [
+      [
+        33,
+        100
+      ],
+      [
+        -6,
+        9
+      ],
+      [
+        30,
+        66
+      ],
+      [
+        102,
+        -42
+      ],
+      [
+        -118,
+        -133
+      ],
+      [
+        11,
+        39
+      ],
+      [
+        -52,
+        39
+      ],
+      [
+        33,
+        22
+      ]
+    ]
+  ],
+  "transform": {
+    "scale": [
+      0.04505085471698112,
+      0.04496205714285712
+    ],
+    "translate": [
+      -116.2012448,
+      33.3764121
+    ]
+  },
+  "objects": {
+    "Untitled layer": {
+      "type": "GeometryCollection",
+      "geometries": [
+        {
+          "arcs": [
+            [
+              0
+            ]
+          ],
+          "type": "Polygon",
+          "properties": {
+            "name": "new",
+            "styleUrl": "#poly-000000-1200-77-nodesc",
+            "fill-opacity": 0.30196078431372547,
+            "fill": "#000000",
+            "stroke-opacity": 1,
+            "stroke": "#000000",
+            "stroke-width": 1.2
+          }
+        }
+      ]
+    }
+  }
+}

package/src/data/initial-state.js

@@ -2,6 +2,7 @@ export default {
   general: {
     geoBorderColor: 'darkGray',
     headerColor: 'theme-blue',
+    title: '',
     showTitle: true,
     showSidebar: true,
     showDownloadButton: true,
@@ -9,6 +10,7 @@ export default {
     displayAsHex: false,
     displayStateLabels: false,
     territoriesLabel: 'Territories',
+    territoriesAlwaysShow: false,
     language: 'en',
     geoType: 'single-state',
     geoLabelOverride: '',
@@ -53,6 +55,7 @@ export default {
     unified: false,
     singleColumn: false,
     singleRow: false,
+    showSpecialClassesLast: false,
     dynamicDescription: false,
     type: 'equalnumber',
     numberOfItems: 3,

package/src/data/supported-geos.js

@@ -121,13 +121,13 @@ export const stateToIso = {
 }
 
 export const stateFipsToTwoDigit = {
-  ['01']: 'AL',
-  ['02']: 'AK',
-  ['04']: 'AZ',
-  ['05']: 'AR',
-  ['06']: 'CA',
-  ['08']: 'CO',
-  ['09']: 'CT',
+  ['01']: 'AL', // eslint-disable-line
+  ['02']: 'AK', // eslint-disable-line
+  ['04']: 'AZ', // eslint-disable-line
+  ['05']: 'AR', // eslint-disable-line
+  ['06']: 'CA', // eslint-disable-line
+  ['08']: 'CO', // eslint-disable-line
+  ['09']: 'CT', // eslint-disable-line
   10: 'DE',
   11: 'DC',
   12: 'FL',

package/src/scss/map.scss

@@ -225,6 +225,7 @@ header + .map-container.full-border {
 	position: absolute;
 	top: 10px;
 	right: 10px;
+	display: none;
 }
 
 //Region Maps
@@ -310,3 +311,14 @@ header + .map-container.full-border {
   stroke-linecap: round;
   pointer-events: none;
 }
+
+canvas {
+	width: 100%;
+}
+
+#canvas-tooltip {
+	position: fixed;
+	background-color: white;
+	pointer-events: none;
+	display: none;
+}

package/src/test/CdcMap.test.jsx

@@ -0,0 +1,19 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import CdcMap from './../CdcMap'
+import usaConfig from './../../examples/example-city-state.json'
+
+// Example: City State Map
+describe('United States Map', () => {
+  it('loads', async () => {
+    render(<CdcMap config={usaConfig} />)
+    // screen.debug()
+  })
+
+  it('accepts title changes', async () => {
+    render(<CdcMap config={usaConfig} isEditor />)
+    const titleInput = screen.getByTestId('title-input')
+    expect(titleInput.value).toBe('Example Data Map with Cities')
+    fireEvent.change(titleInput, { target: { value: 'My New Title' } })
+    expect(titleInput.value).toBe('My New Title')
+  })
+})

package/vite.config.js

@@ -1,9 +1,9 @@
 import GenerateViteConfig from '../../generateViteConfig.js'
 import { moduleName } from './package.json'
 
-export default GenerateViteConfig(moduleName,null,{
+export default GenerateViteConfig(moduleName, null, {
   jsxImportSource: '@emotion/react',
   babel: {
-    plugins: [ '@emotion/babel-plugin' ],
-  },
+    plugins: ['@emotion/babel-plugin']
+  }
 })

package/src/hooks/useColorPalette.ts

@@ -1,88 +0,0 @@
-import { useEffect, useReducer } from 'react'
-
-// constants
-const SEQUENTIAL = 'SEQUENTIAL'
-const SEQUENTIAL_REVERSE = 'SEQUENTIAL_REVERSE'
-export const GET_PALETTE = 'GET_PALETTE'
-
-//  types & interfaces
-interface State {
-  readonly filteredPallets: string[]
-  readonly filteredQualitative: string[]
-  readonly isPaletteReversed: boolean
-  paletteName: string | undefined
-}
-interface Action<Palettes> {
-  type: 'SEQUENTIAL' | 'SEQUENTIAL_REVERSE' | 'GET_PALETTE'
-  payload: Palettes
-  paletteName?: string
-}
-
-// create initial state
-const initialState: State = {
-  filteredPallets: [],
-  isPaletteReversed: false,
-  filteredQualitative: [],
-  paletteName: undefined
-}
-
-// create reducer function to handle multiple states & manupilate with each state
-function reducer<T>(state: State, action: Action<T>): State {
-  // <T> refers to generic type
-  const palletNamesArr: string[] = Object.keys(action.payload) // action.payload === colorPalettes object
-  let reverseRegex = new RegExp('reverse$') // matches a string that ends in with "reverse".
-  let qualitativeRegex = new RegExp('^qualitative') //matches any string that starts with "qualitative".
-  let paletteName: string = ''
-  switch (action.type) {
-    case GET_PALETTE:
-      // this case runs first time when page loads and then every time when color.state changes.It is mounted insude of useEffect on Editors Panel
-      // action.palletName is a string type and equals to state.color which is inisde Editors Panel.
-      return { ...state, paletteName: action.paletteName }
-    case SEQUENTIAL:
-      paletteName = String(state.paletteName).endsWith('reverse') ? String(state.paletteName).substring(0, state.paletteName.length - 7) : String(state.paletteName)
-      const qualitative: string[] = palletNamesArr.filter((name: string) => name.match(qualitativeRegex) && !name.match(reverseRegex) && !name.includes('qualitative9'))
-      const sequential: string[] = palletNamesArr.filter((name: string) => !name.match(qualitativeRegex) && !name.match(reverseRegex))
-
-      return { ...state, filteredPallets: sequential, filteredQualitative: qualitative, paletteName: paletteName, isPaletteReversed: false }
-
-    case SEQUENTIAL_REVERSE:
-      paletteName = state.paletteName && String(state.paletteName).concat('reverse')
-      const qualitativeReverse: string[] = palletNamesArr.filter((name: string) => name.match(qualitativeRegex) && name.match(reverseRegex))
-      const sequentialReverse: string[] = palletNamesArr.filter((name: string) => !name.match(qualitativeRegex) && name.match(reverseRegex))
-
-      return { ...state, filteredQualitative: qualitativeReverse, filteredPallets: sequentialReverse, paletteName: paletteName, isPaletteReversed: true }
-    default:
-      return state
-  }
-}
-
-interface Keyable {
-  color: string
-  general: {
-    palette: {
-      isReversed: boolean
-    }
-  }
-}
-
-export function useColorPalette<T, Y extends Keyable>(colorPalettes: T, configState: Y) {
-  const [state, dispatch] = useReducer(reducer, initialState)
-  const { paletteName, isPaletteReversed, filteredPallets, filteredQualitative } = state
-
-  useEffect(() => {
-    dispatch({ type: SEQUENTIAL, payload: colorPalettes })
-  }, [])
-
-  useEffect(() => {
-    if (configState.general.palette.isReversed) {
-      dispatch({ type: 'SEQUENTIAL_REVERSE', payload: colorPalettes })
-    }
-    return () => dispatch({ type: 'SEQUENTIAL', payload: colorPalettes })
-  }, [configState.general.palette.isReversed, dispatch, colorPalettes])
-
-  useEffect(() => {
-    if (configState.color) dispatch({ type: GET_PALETTE, payload: colorPalettes, paletteName: configState.color })
-  }, [dispatch, configState.color])
-
-  return { paletteName, isPaletteReversed, filteredPallets, filteredQualitative, dispatch }
-}