@cdc/map 4.23.2 → 4.23.4

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/components/Filters.jsx

@@ -1,113 +0,0 @@
-import React, { useState, useContext } from 'react'
-import Context from './../context'
-import Button from '@cdc/core/components/elements/Button'
-
-// TODO: Combine Charts/Maps Filters.js files
-const useFilters = () => {
-  const { state: config, setState: setConfig, runtimeFilters, setRuntimeFilters } = useContext(Context)
-  const [showApplyButton, setShowApplyButton] = useState(false)
-
-  const sortAsc = (a, b) => {
-    return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
-  }
-
-  const sortDesc = (a, b) => {
-    return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
-  }
-
-  const announceChange = text => { }
-
-  const changeFilterActive = (index, value) => {
-    let newFilters = config.filters
-    newFilters[index].active = value
-    setRuntimeFilters(newFilters)
-    setShowApplyButton(true)
-  }
-
-  const handleApplyButton = () => {
-    setConfig({ ...config, filters: runtimeFilters })
-    setShowApplyButton(false)
-  }
-
-  const handleReset = (e) => {
-    e.preventDefault()
-    let newFilters = runtimeFilters
-
-    // reset to first item in values array.
-    newFilters.map(filter => {
-      filter.active = filter.values[0]
-    })
-
-    setConfig({ ...config, filters: newFilters })
-  }
-
-  return { announceChange, sortAsc, sortDesc, changeFilterActive, showApplyButton, handleReset, handleApplyButton }
-}
-
-export const Filters = () => {
-  const { runtimeFilters, state: config } = useContext(Context)
-  const { handleApplyButton, changeFilterActive, announceChange, sortAsc, sortDesc, showApplyButton, handleReset } = useFilters()
-
-  const buttonText = 'Apply Filters'
-  const resetText = 'Reset All'
-
-  const { filters } = config
-
-  if (filters.length === 0) return false
-
-  const FilterList = ({ filters: runtimeFilters }) => {
-    if (runtimeFilters) {
-      return runtimeFilters.map((singleFilter, idx) => {
-        const values = []
-
-        if (undefined === singleFilter.active) return null
-
-        singleFilter.values.forEach((filterOption, idx) => {
-          values.push(
-            <option key={idx} value={filterOption}>
-              {filterOption}
-            </option>
-          )
-        })
-
-        return (
-          <section className='filter-col single-filter' key={idx}>
-            {singleFilter.label?.length > 0 && <label htmlFor={`filter-${idx}`}>{singleFilter.label}</label>}
-            <select
-              id={`filter-${idx}`}
-              className='filter-select'
-              aria-label='select filter'
-              value={singleFilter.active}
-              onChange={e => {
-                changeFilterActive(idx, e.target.value)
-                announceChange(`Filter ${singleFilter.label} value has been changed to ${e.target.value}, please reference the data table to see updated values.`)
-              }}
-            >
-              {values}
-            </select>
-          </section>
-        )
-      })
-    } else {
-      return null
-    }
-  }
-
-  return (
-    <section className={`filters-section`} style={{ display: 'block', width: '100%' }}>
-      <div className='filters-section__wrapper' style={{ flexWrap: 'wrap', display: 'flex', gap: '7px 15px', marginTop: '15px' }}>
-        <FilterList filters={runtimeFilters} />
-        <div className='filter-section__buttons' style={{ width: '100%' }}>
-          <Button onClick={handleApplyButton} disabled={!showApplyButton} style={{ marginRight: '10px' }}>
-            {buttonText}
-          </Button>
-          <a href='#!' role='button' onClick={handleReset}>
-            {resetText}
-          </a>
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default Filters

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