@cdc/map 4.22.10-alpha.1 → 4.22.11

package/src/components/WorldMap.js

@@ -1,119 +1,94 @@
-import React, {  useEffect, memo } from 'react';
+import React, { useEffect, memo } from 'react'
 /** @jsx jsx */
 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 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 CityList from './CityList'
+import BubbleList from './BubbleList'
 
 const { features: world } = feature(topoJSON, topoJSON.objects.countries)
 
 let projection = geoMercator()
 
-const WorldMap = (props) => {
-  const {
-    state,
-    applyTooltipsToGeo,
-    data,
-    geoClickHandler,
-    applyLegendToRow,
-    displayGeoName,
-    supportedCountries,
-    rebuildTooltips,
-    setState,
-    setRuntimeData,
-    generateRuntimeData,
-    setFilteredCountryCode,
-    position,
-    setPosition,
-    hasZoom,
-    handleMapAriaLabels
-  } = props;
+const WorldMap = props => {
+  const { state, applyTooltipsToGeo, data, geoClickHandler, applyLegendToRow, displayGeoName, supportedCountries, rebuildTooltips, setState, setRuntimeData, generateRuntimeData, setFilteredCountryCode, position, setPosition, hasZoom, handleMapAriaLabels } = props
 
-// TODO Refactor - state should be set together here to avoid rerenders
-// Resets to original data & zooms out
-const handleReset = (state, setState, setRuntimeData, generateRuntimeData) => {
-  let reRun = generateRuntimeData(state)
-  setRuntimeData(reRun)
-  setState({
-    ...state,
-    focusedCountry: false,
-    mapPosition: { coordinates: [0, 30], zoom: 1 }
-  })
-  setFilteredCountryCode('')
-}
-const handleZoomIn = (position, setPosition) => {
-  if (position.zoom >= 4) return;
-  setPosition((pos) => ({ ...pos, zoom: pos.zoom * 1.5 }));
-};
+  // TODO Refactor - state should be set together here to avoid rerenders
+  // Resets to original data & zooms out
+  const handleReset = (state, setState, setRuntimeData, generateRuntimeData) => {
+    let reRun = generateRuntimeData(state)
+    setRuntimeData(reRun)
+    setState({
+      ...state,
+      focusedCountry: false,
+      mapPosition: { coordinates: [0, 30], zoom: 1 }
+    })
+    setFilteredCountryCode('')
+  }
+  const handleZoomIn = (position, setPosition) => {
+    if (position.zoom >= 4) return
+    setPosition(pos => ({ ...pos, zoom: pos.zoom * 1.5 }))
+  }
 
-const handleZoomOut = (position, setPosition) => {
-  if (position.zoom <= 1) return;
-  setPosition((pos) => ({ ...pos, zoom: pos.zoom / 1.5 }));
-};
+  const handleZoomOut = (position, setPosition) => {
+    if (position.zoom <= 1) return
+    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 }) => (
+    <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>
-    }
-  </div>
-);
+      <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
+        </button>
+      )}
+    </div>
+  )
 
   // TODO Refactor - state should be set together here to avoid rerenders
   const handleCircleClick = (country, state, setState, setRuntimeData, generateRuntimeData) => {
-    if(!state.general.allowMapZoom) return;
+    if (!state.general.allowMapZoom) return
     let newRuntimeData = state.data.filter(item => item[state.columns.geo.name] === country[state.columns.geo.name])
     setFilteredCountryCode(newRuntimeData[0].uid)
   }
 
-  useEffect(() => rebuildTooltips());
+  useEffect(() => rebuildTooltips())
 
-  const handleMoveEnd = (position) => {
-    setPosition(position);
-  };
+  const handleMoveEnd = position => {
+    setPosition(position)
+  }
 
-  const constructGeoJsx = (geographies) => {
+  const constructGeoJsx = geographies => {
     const geosJsx = geographies.map(({ feature: geo, path }, i) => {
       const geoKey = geo.properties.iso
 
-      if(!geoKey) return
+      if (!geoKey) return
 
-      const geoData = data[geoKey];
+      const geoData = data[geoKey]
 
-      const geoDisplayName = displayGeoName(supportedCountries[geoKey][0]);
+      const geoDisplayName = displayGeoName(supportedCountries[geoKey][0])
 
-      let legendColors;
+      let legendColors
 
       // Once we receive data for this geographic item, setup variables.
       if (geoData !== undefined) {
-        legendColors = applyLegendToRow(geoData);
+        legendColors = applyLegendToRow(geoData)
       }
 
       const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
@@ -123,65 +98,44 @@ const ZoomControls = ({position, setPosition, state, setState, setRuntimeData, g
         cursor: 'default'
       }
 
-      const strokeWidth = .9
+      const strokeWidth = 0.9
 
       // If a legend applies, return it with appropriate information.
       if (legendColors && legendColors[0] !== '#000000' && state.general.type !== 'bubble') {
-        const tooltip = applyTooltipsToGeo(geoDisplayName, geoData);
-
-          styles = {
-            ...styles,
-            fill: legendColors[0],
-            cursor: 'default',
-            '&:hover': {
-              fill: legendColors[1]
-            },
-            '&:active': {
-              fill: legendColors[2],
-            },
-          };
+        const tooltip = applyTooltipsToGeo(geoDisplayName, geoData)
+
+        styles = {
+          ...styles,
+          fill: legendColors[0],
+          cursor: 'default',
+          '&:hover': {
+            fill: legendColors[1]
+          },
+          '&:active': {
+            fill: legendColors[2]
+          }
+        }
 
         // When to add pointer cursor
         if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
           styles.cursor = 'pointer'
         }
 
-        return (
-          <Geo
-            key={i + '-geo'}
-            css={styles}
-            data-for="tooltip"
-            data-tip={tooltip}
-            path={path}
-            stroke={geoStrokeColor}
-            strokeWidth={strokeWidth}
-            onClick={() => geoClickHandler(geoDisplayName, geoData)}
-          />
-        )
+        return <Geo key={i + '-geo'} css={styles} data-for='tooltip' data-tip={tooltip} path={path} stroke={geoStrokeColor} strokeWidth={strokeWidth} onClick={() => geoClickHandler(geoDisplayName, geoData)} />
       }
 
       // Default return state, just geo with no additional information
       return <Geo key={i + '-geo'} stroke={geoStrokeColor} strokeWidth={strokeWidth} css={styles} path={path} />
-    });
+    })
 
     // 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 projection={projection} key='cities' data={data} state={state} geoClickHandler={geoClickHandler} applyTooltipsToGeo={applyTooltipsToGeo} displayGeoName={displayGeoName} applyLegendToRow={applyLegendToRow} isGeoCodeMap={state.general.type === 'us-geocode'} />)
 
     // Bubbles
-    if(state.general.type === 'bubble') {
+    if (state.general.type === 'bubble') {
       geosJsx.push(
         <BubbleList
-          key="bubbles"
+          key='bubbles'
           data={state.data}
           runtimeData={data}
           state={state}
@@ -189,70 +143,33 @@ const ZoomControls = ({position, setPosition, state, setState, setRuntimeData, g
           applyLegendToRow={applyLegendToRow}
           applyTooltipsToGeo={applyTooltipsToGeo}
           displayGeoName={displayGeoName}
-          handleCircleClick={(country) => handleCircleClick(country, state, setState, setRuntimeData, generateRuntimeData) }
+          handleCircleClick={country => handleCircleClick(country, state, setState, setRuntimeData, generateRuntimeData)}
         />
       )
     }
 
-    return geosJsx;
-  };
+    return geosJsx
+  }
 
   return (
-    <ErrorBoundary component="WorldMap">
+    <ErrorBoundary component='WorldMap'>
       {hasZoom ? (
-        <svg 
-          viewBox="0 0 880 500"
-          role="img"
-          aria-label={handleMapAriaLabels(state)}
-        >
-          <rect height={500} width={880} onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} fill="white"/>
-          <ZoomableGroup
-            zoom={position.zoom}
-            center={position.coordinates}
-            onMoveEnd={handleMoveEnd}
-            maxZoom={4}
-            projection={projection}
-            width={880}
-            height={500}
-          >
-            <Mercator
-              data={world}
-            >
-              {({ features }) => constructGeoJsx(features)}
-            </Mercator>
+        <svg viewBox='0 0 880 500' role='img' aria-label={handleMapAriaLabels(state)}>
+          <rect height={500} width={880} onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} fill='white' />
+          <ZoomableGroup zoom={position.zoom} center={position.coordinates} onMoveEnd={handleMoveEnd} maxZoom={4} projection={projection} width={880} height={500}>
+            <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </ZoomableGroup>
         </svg>
-      ) :
-        <svg viewBox="0 0 880 500">
-          <ZoomableGroup
-            zoom={1}
-            center={position.coordinates}
-            onMoveEnd={handleMoveEnd}
-            maxZoom={0}
-            projection={projection}
-            width={880}
-            height={500}
-          >
-            <Mercator
-              data={world}
-            >
-              {({ features }) => constructGeoJsx(features)}
-            </Mercator>
+      ) : (
+        <svg viewBox='0 0 880 500'>
+          <ZoomableGroup zoom={1} center={position.coordinates} onMoveEnd={handleMoveEnd} maxZoom={0} projection={projection} width={880} height={500}>
+            <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </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 === 'bubble' && hasZoom)) && <ZoomControls position={position} setPosition={setPosition} setRuntimeData={setRuntimeData} state={state} setState={setState} generateRuntimeData={generateRuntimeData} />}
     </ErrorBoundary>
-  );
-};
+  )
+}
 
 export default memo(WorldMap)

package/src/components/ZoomableGroup.js

@@ -1,28 +1,8 @@
+import React, { useContext } from 'react'
+import useZoomPan from '../hooks/useZoomPan'
 
-import React, { useContext } from "react"
-import useZoomPan from "../hooks/useZoomPan"
-
-const ZoomableGroup = ({
-  center = [0, 0],
-  zoom = 1,
-  minZoom = 1,
-  maxZoom = 8,
-  translateExtent,
-  filterZoomEvent,
-  onMoveStart,
-  onMove,
-  onMoveEnd,
-  className,
-  projection,
-  width,
-  height,
-  ...restProps
-}) => {
-
-  const {
-    mapRef,
-    transformString,
-  } = useZoomPan({
+const ZoomableGroup = ({ center = [0, 0], zoom = 1, minZoom = 1, maxZoom = 8, translateExtent, filterZoomEvent, onMoveStart, onMove, onMoveEnd, className, projection, width, height, ...restProps }) => {
+  const { mapRef, transformString } = useZoomPan({
     center,
     filterZoomEvent,
     onMoveStart,
@@ -38,10 +18,10 @@ const ZoomableGroup = ({
 
   return (
     <g ref={mapRef}>
-      <rect width={width} height={height} fill="transparent" />
+      <rect width={width} height={height} fill='transparent' />
       <g transform={transformString} {...restProps} />
     </g>
   )
 }
 
-export default ZoomableGroup
+export default ZoomableGroup

package/src/data/initial-state.js

@@ -51,6 +51,7 @@ export default {
     specialClasses: [],
     unified: false,
     singleColumn: false,
+    singleRow: false,
     dynamicDescription: false,
     type: "equalnumber",
     numberOfItems: 3,

package/src/hooks/useActiveElement.js

@@ -1,19 +1,19 @@
-import {useState, useEffect} from 'react'
+import { useState, useEffect } from 'react'
 // Use for accessibility testing
 const useActiveElement = () => {
-	const [active, setActive] = useState(document.activeElement);
+  const [active, setActive] = useState(document.activeElement)
 
-	const handleFocusIn = (e) => {
-		setActive(document.activeElement);
-	}
+  const handleFocusIn = e => {
+    setActive(document.activeElement)
+  }
 
-	useEffect(() => {
-		document.addEventListener('focusin', handleFocusIn)
-		return () => {
-			document.removeEventListener('focusin', handleFocusIn)
-		};
-	}, [])
+  useEffect(() => {
+    document.addEventListener('focusin', handleFocusIn)
+    return () => {
+      document.removeEventListener('focusin', handleFocusIn)
+    }
+  }, [])
 
-	return active;
+  return active
 }
-export default useActiveElement;
+export default useActiveElement

package/src/hooks/useColorPalette.ts

@@ -1,96 +1,88 @@
-import { useEffect, useReducer } from 'react';
+import { useEffect, useReducer } from 'react'
 
-// constants 
-const SEQUENTIAL = 'SEQUENTIAL';
-const SEQUENTIAL_REVERSE = 'SEQUENTIAL_REVERSE';  
-export const GET_PALETTE = 'GET_PALETTE';
+// constants
+const SEQUENTIAL = 'SEQUENTIAL'
+const SEQUENTIAL_REVERSE = 'SEQUENTIAL_REVERSE'
+export const GET_PALETTE = 'GET_PALETTE'
 
-
-//  types & interfaces 
+//  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
-  };
+  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
-  };
+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){
+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;
+      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
+  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
-
-
-
+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])
+    dispatch({ type: SEQUENTIAL, payload: colorPalettes })
+  }, [])
 
-	useEffect(()=>{
-		if(configState.color) dispatch({type:GET_PALETTE,payload:colorPalettes,paletteName:configState.color})
-	},[dispatch,configState.color])
+  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}
-}
+  return { paletteName, isPaletteReversed, filteredPallets, filteredQualitative, dispatch }
+}