@cdc/map 4.22.10 → 4.23.1

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 }
+}

package/src/hooks/useZoomPan.js

@@ -1,17 +1,11 @@
-
-import { useEffect, useRef, useState } from "react"
-import {
-  zoom as d3Zoom,
-  zoomIdentity as d3ZoomIdentity,
-} from "d3-zoom"
-import {
-  select as d3Select,
-} from "d3-selection"
+import { useEffect, useRef, useState } from 'react'
+import { zoom as d3Zoom, zoomIdentity as d3ZoomIdentity } from 'd3-zoom'
+import { select as d3Select } from 'd3-selection'
 
 function getCoords(w, h, t) {
-    const xOffset = (w * t.k - w) / 2
-    const yOffset = (h * t.k - h) / 2
-    return [w / 2 - (xOffset + t.x) / t.k, h / 2 - (yOffset + t.y) / t.k]
+  const xOffset = (w * t.k - w) / 2
+  const yOffset = (h * t.k - h) / 2
+  return [w / 2 - (xOffset + t.x) / t.k, h / 2 - (yOffset + t.y) / t.k]
 }
 
 export default function useZoomPan({
@@ -20,14 +14,16 @@ export default function useZoomPan({
   onMoveStart,
   onMoveEnd,
   onMove,
-  translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]],
+  translateExtent = [
+    [-Infinity, -Infinity],
+    [Infinity, Infinity]
+  ],
   scaleExtent = [1, 8],
   zoom = 1,
   width,
   height,
   projection
 }) {
-
   const [lon, lat] = center
   const [position, setPosition] = useState({ x: 0, y: 0, k: 1 })
   const lastPosition = useRef({ x: 0, y: 0, k: 1 })
@@ -47,15 +43,15 @@ export default function useZoomPan({
       if (!onMoveStart || bypassEvents.current) return
       onMoveStart({ coordinates: projection.invert(getCoords(width, height, d3Event.transform)), zoom: d3Event.transform.k }, d3Event)
     }
-  
+
     function handleZoom(d3Event) {
       if (bypassEvents.current) return
-      const {transform, sourceEvent} = d3Event
+      const { transform, sourceEvent } = d3Event
       setPosition({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent })
       if (!onMove) return
       onMove({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent }, d3Event)
     }
-  
+
     function handleZoomEnd(d3Event) {
       if (bypassEvents.current) {
         bypassEvents.current = false
@@ -77,10 +73,13 @@ export default function useZoomPan({
     const zoom = d3Zoom()
       .filter(filterFunc)
       .scaleExtent([minZoom, maxZoom])
-      .translateExtent([[a1, a2], [b1, b2]])
-      .on("start", handleZoomStart)
-      .on("zoom", handleZoom)
-      .on("end", handleZoomEnd)
+      .translateExtent([
+        [a1, a2],
+        [b1, b2]
+      ])
+      .on('start', handleZoomStart)
+      .on('zoom', handleZoom)
+      .on('end', handleZoomEnd)
 
     zoomRef.current = zoom
     svg.call(zoom)
@@ -105,6 +104,6 @@ export default function useZoomPan({
   return {
     mapRef,
     position,
-    transformString: `translate(${position.x} ${position.y}) scale(${position.k})`,
+    transformString: `translate(${position.x} ${position.y}) scale(${position.k})`
   }
-}
+}

package/src/index.html

@@ -1,33 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-		<style type="text/css">
-			body {
-				margin: 0;
-			}
-			.cdc-map-outer-container {
-				min-height: 100vh;
-			}
-		</style>
-	</head>
-	<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-geocode.json"></div> -->
-		 <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa-regions.json"></div> -->
-		<!-- <div class="react-container react-container--maps" data-config="/examples/default-world.json"></div> -->
-		<!-- <div class="react-container react-container--maps" data-config="/examples/bubble-us.json"></div/> -->
-<!--		<div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-world.json"></div>-->
-		<div class="react-container react-container--maps" data-config="/examples/default-single-state.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-world-map.json"></div>  -->
-		<!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div>  -->
-		
 
-		<noscript>You need to enable JavaScript to run this app.</noscript>
-	</body>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <style type="text/css">
+    body {
+      margin: 0;
+    }
+
+    .cdc-map-outer-container {
+      min-height: 100vh;
+    }
+  </style>
+</head>
+
+<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-geocode.json"></div> -->
+  <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa-regions.json"></div> -->
+  <!-- <div class="react-container react-container--maps" data-config="/examples/default-world.json"></div> -->
+  <!-- <div class="react-container react-container--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 -->
+  <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-world-map.json"></div> -->
+  <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div>  -->
+
+
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+</body>
+
 </html>

package/src/scss/datatable.scss

@@ -1,7 +1,6 @@
 .data-table-container {
   margin: 0;
   @include breakpointClass(md) {
-    margin: 1em;
+    margin: 5px 1em;
   }
-
 }

package/src/scss/filters.scss

@@ -0,0 +1,42 @@
+.cdc-open-viz-module .cdc-map-inner-container .filters-section,
+.cove .cdc-map-inner-container .filters-section {
+  margin-left: 1rem;
+  margin-right: 1rem;
+
+  &__title {
+    margin: 15px 0;
+  }
+
+  &__wrapper {
+    margin-bottom: 40px;
+
+    hr {
+      margin-bottom: 20px;
+    }
+
+    label {
+      display: inherit;
+      margin-bottom: 5px;
+      font-weight: 600;
+      font-size: 16px;
+    }
+  }
+
+  @include breakpoint(md) {
+    display: flex;
+    gap: 30px;
+  }
+
+  label:not(:empty) {
+    margin-right: 0.4em;
+  }
+
+  select {
+    font-size: 1em;
+    padding-right: 5px;
+  }
+
+  .single-filter {
+    margin-bottom: 0.5em;
+  }
+}

package/src/scss/main.scss

@@ -2,6 +2,7 @@
 @import "~@cdc/core/styles/heading-colors";
 @import "variables";
 @import "editor-panel";
+@import "filters";
 
 .cdc-map-outer-container {
   position: relative;
@@ -185,7 +186,7 @@
       > div.select-heading {
         font-size: 1.1em;
         font-weight: 600;
-        margin-bottom: .75em; 
+        margin-bottom: .75em;
       }
     }
     form {
@@ -215,5 +216,5 @@
   [tabIndex]:focus {
     outline-color: rgb(0, 95, 204)
   }
-  
-}
+
+}

package/src/scss/sidebar.scss

@@ -109,6 +109,28 @@ aside {
       }
     }
   }
+  
+  &.bottom.single-row {
+      width: 100%;
+      .legend-section ul {
+        flex-direction: row;
+        align-items: baseline;
+        justify-content:flex-start;
+        flex-wrap: wrap;
+        li {
+          justify-items: center;
+          line-break:loose;
+          align-items: center;
+          width: auto;
+          padding-right: 1em;
+          padding-bottom: 1em;
+          display: inline-block;
+          & > span {
+            margin: 0 !important;
+          }
+        }
+      }
+  };
 
   @include breakpointClass(sm) {
     .legend-section ul {