@cdc/map 4.25.3 → 4.25.6

package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx

@@ -13,25 +13,28 @@ import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import './Panel.PatternSettings-style.css'
 import Alert from '@cdc/core/components/Alert'
+import _ from 'lodash'
 
 // topojson helpers for checking color contrasts
 import { feature } from 'topojson-client'
-import { checkColorContrast, getContrastColor, getColorContrast } from '@cdc/core/helpers/cove/accessibility'
-import topoJSON from '../../../UsaMap/data/us-topo.json'
+import { checkColorContrast, getColorContrast } from '@cdc/core/helpers/cove/accessibility'
+import { applyLegendToRow } from '../../../../helpers/applyLegendToRow'
+import { PatternSelection } from '../../../../types/MapConfig'
 
 type PanelProps = {
   name: string
 }
 
 const PatternSettings = ({ name }: PanelProps) => {
-  const { state, setState, applyLegendToRow, runtimeData } = useContext<MapContext>(ConfigContext)
+  const { config, setConfig, runtimeData, legendMemo, legendSpecialClassLastMemo, runtimeLegend } =
+    useContext<MapContext>(ConfigContext)
   const defaultPattern = 'circles'
   const patternTypes = ['circles', 'waves', 'lines']
 
   const {
     map: { patterns },
     data
-  } = state
+  } = config
 
   const [unitedStates, setUnitedStates] = useState(null)
 
@@ -50,92 +53,103 @@ const PatternSettings = ({ name }: PanelProps) => {
 
   /** Updates the map config with a new pattern item */
   const handleAddGeoPattern = () => {
-    let patterns = [...state.map.patterns]
+    const patterns = _.cloneDeep(config.map.patterns)
     patterns.push({ dataKey: '', pattern: defaultPattern, contrastCheck: true })
-    setState({
-      ...state,
+    setConfig({
+      ...config,
       map: {
-        ...state.map,
+        ...config.map,
         patterns
       }
     })
   }
 
-  /** Updates the map pattern at a given index */
-  const handleUpdateGeoPattern = (
-    value: string,
-    index: number,
-    keyToUpdate: 'dataKey' | 'pattern' | 'dataValue' | 'size' | 'label' | 'color'
-  ) => {
-    const updatedPatterns = [...state.map.patterns]
-
-    // Update the specific pattern with the new value
-    updatedPatterns[index] = { ...updatedPatterns[index], [keyToUpdate]: value }
+  // Checks contrast and logs warning if needed
+  const checkAndLogContrast = (fill: string, patternColor: string, geoName: string, dataKey: string): boolean => {
+    const contrastCheck = checkColorContrast(fill, patternColor)
 
-    // Iterate over each state feature
-    unitedStates.forEach(geo => {
-      const geoKey = geo.properties.iso
-      if (!geoKey || !runtimeData) return
+    if (!contrastCheck) {
+      console.error(
+        `COVE: pattern contrast check failed on ${geoName} for ${dataKey} with:
+      pattern color: ${patternColor}
+      contrast: ${getColorContrast(fill, patternColor)}`
+      )
+    }
 
-      const legendColors = runtimeData[geoKey] ? applyLegendToRow(runtimeData[geoKey]) : undefined
-      const geoData = runtimeData[geoKey]
-      if (!geoData) return
+    return contrastCheck
+  }
 
-      // Iterate over each pattern
-      state.map.patterns.forEach((patternData, patternIndex) => {
-        const hasMatchingValues = patternData.dataValue === geoData[patternData.dataKey]
-        if (!hasMatchingValues) return
+  // Gets legend colors for a geo
+  const getGeoLegendColors = (geoKey: string, runtimeData: any) => {
+    return geoKey && runtimeData?.[geoKey]
+      ? applyLegendToRow(runtimeData[geoKey], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+      : null
+  }
 
-        const currentFill = legendColors[0]
-        const patternColor = keyToUpdate === 'color' && value !== '' ? value : getContrastColor('#000', currentFill)
-        const contrastCheck = checkColorContrast(currentFill, patternColor)
+  // Processes contrast check for a single geo
+  const processGeoContrast = (
+    geo: any,
+    pattern: PatternSelection,
+    updatedPatterns: PatternSelection[],
+    patternIndex: number,
+    color: string
+  ) => {
+    const geoKey = geo.properties.iso
+    const legendColors = getGeoLegendColors(geoKey, runtimeData)
+    const currentFill = legendColors?.[0]
 
-        // Log a warning if the contrast check fails
-        if (!contrastCheck) {
-          console.warn(`COVE: pattern contrast check failed on ${geoData?.[state.columns.geo.name]} for ${
-            patternData.dataKey
-          } with:
-            pattern color: ${patternColor}
-            contrast: ${getColorContrast(currentFill, patternColor)}
-          `)
-        }
+    if (!currentFill) return
 
-        updatedPatterns[index] = { ...updatedPatterns[index], [keyToUpdate]: value, contrastCheck }
-      })
-    })
+    const hasMatchingValues = pattern.dataValue === runtimeData[geoKey]?.[pattern.dataKey]
 
-    const editorErrorMessage = updatedPatterns.some(pattern => pattern.contrastCheck === false)
-      ? 'One or more patterns do not pass the WCAG 2.1 contrast ratio of 3:1.'
-      : ''
+    if (hasMatchingValues) {
+      const contrastCheck = checkAndLogContrast(
+        currentFill,
+        color,
+        runtimeData[geoKey]?.[config.columns.geo.name],
+        pattern.dataKey
+      )
+      updatedPatterns[patternIndex].contrastCheck = contrastCheck
+    }
+  }
 
-    // Update the state with the new patterns and error message
-    setState(prevState => ({
-      ...prevState,
-      map: {
-        ...prevState.map,
-        patterns: updatedPatterns
-      },
-      runtime: {
-        ...prevState.runtime,
-        editorErrorMessage
-      }
-    }))
+  const handlePatternFieldUpdate = (field: string, color: string, patternIndex: number) => {
+    const _newConfig = _.cloneDeep(config)
+    _newConfig.map.patterns[patternIndex][field] = color
+    reviewColorContrast(_newConfig, patternIndex)
+    setConfig(_newConfig)
   }
 
   const handleRemovePattern = index => {
-    const updatedPatterns = state.map.patterns.filter((pattern, i) => i !== index)
-
-    setState({
-      ...state,
-      map: {
-        ...state.map,
-        patterns: updatedPatterns
-      }
-    })
+    const _newConfig = _.cloneDeep(config)
+    const updatedPatterns = config.map.patterns.filter((pattern, i) => i !== index)
+    _newConfig.map.patterns = updatedPatterns
+    if (checkPatternContrasts()) {
+      _newConfig.runtime.editorErrorMessage = ''
+    }
+    setConfig(_newConfig)
   }
 
   const checkPatternContrasts = () => {
-    return state.map.patterns.every(pattern => pattern.contrastCheck !== false)
+    return config.map.patterns.every(pattern => pattern.contrastCheck !== false)
+  }
+
+  const reviewColorContrast = (_newConfig, patternIndex) => {
+    // Process each geo's contrast
+    unitedStates.forEach(geo => {
+      processGeoContrast(
+        geo,
+        _newConfig.map.patterns[patternIndex],
+        _newConfig.map.patterns,
+        patternIndex,
+        _newConfig.map.patterns[patternIndex].color
+      )
+    })
+
+    // Update error message
+    _newConfig.runtime.editorErrorMessage = _newConfig.map.patterns.some(p => p.contrastCheck === false)
+      ? 'One or more patterns do not pass the WCAG 2.1 contrast ratio of 3:1.'
+      : ''
   }
 
   return (
@@ -184,7 +198,7 @@ const PatternSettings = ({ name }: PanelProps) => {
                       <select
                         id={`pattern-dataKey--${patternIndex}`}
                         value={pattern.dataKey !== '' ? pattern.dataKey : 'Select'}
-                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataKey')}
+                        onChange={e => handlePatternFieldUpdate('dataKey', e.target.value, patternIndex)}
                       >
                         {/* TODO: sort these? */}
                         {dataKeyOptions.map((d, index) => {
@@ -199,7 +213,7 @@ const PatternSettings = ({ name }: PanelProps) => {
                         Data Value:
                         <input
                           type='text'
-                          onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataValue')}
+                          onChange={e => handlePatternFieldUpdate('dataValue', e.target.value, patternIndex)}
                           id={`pattern-dataValue--${patternIndex}`}
                           value={pattern.dataValue === '' ? '' : pattern.dataValue}
                         />
@@ -208,7 +222,7 @@ const PatternSettings = ({ name }: PanelProps) => {
                         Label (optional):
                         <input
                           type='text'
-                          onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'label')}
+                          onChange={e => handlePatternFieldUpdate('label', e.target.value, patternIndex)}
                           id={`pattern-dataValue--${patternIndex}`}
                           value={pattern.label === '' ? '' : pattern.label}
                         />
@@ -217,7 +231,7 @@ const PatternSettings = ({ name }: PanelProps) => {
                       <select
                         id={`pattern-type--${patternIndex}`}
                         value={pattern?.pattern}
-                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'pattern')}
+                        onChange={e => handlePatternFieldUpdate('pattern', e.target.value, patternIndex)}
                       >
                         {patternTypes.map((patternName, index) => (
                           <option value={patternName} key={index}>
@@ -229,7 +243,7 @@ const PatternSettings = ({ name }: PanelProps) => {
                       <select
                         id={`pattern-size--${patternIndex}`}
                         value={pattern?.size}
-                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'size')}
+                        onChange={e => handlePatternFieldUpdate('size', e.target.value, patternIndex)}
                       >
                         {['small', 'medium', 'large'].map((size, index) => (
                           <option value={size} key={index}>
@@ -256,7 +270,7 @@ const PatternSettings = ({ name }: PanelProps) => {
                             value={pattern.color || ''}
                             id='patternColor'
                             name='patternColor'
-                            onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'color')}
+                            onChange={e => handlePatternFieldUpdate('color', e.target.value, patternIndex)}
                           />
                         </label>
                       </div>

package/src/components/EditorPanel/components/editorPanel.styles.css

@@ -0,0 +1,95 @@
+.geo-buttons {
+  list-style: none;
+  color: var(--mediumGray);
+  display: grid;
+  button { width: 100% !important; }
+  svg {
+    display: block;
+    max-width: 80px;
+    max-height: 40px;
+    margin: 0.5em auto;
+    box-sizing: border-box;
+    path {
+      fill: currentColor;
+    }
+  }
+  button {
+    background: transparent;
+    padding: 0.3em 0.75em;
+    display: flex;
+    border: var(--lightGray) 1px solid;
+    width: 40%;
+    align-items: center;
+    margin-right: 1em;
+    cursor: pointer;
+    overflow: hidden;
+    flex-direction: column;
+    transition: 0.2s all;
+    svg {
+      display: block;
+      height: 25px;
+      margin: 0.5em auto;
+      max-width: 100%;
+    }
+    span {
+      text-transform: none;
+      font-size: 1em;
+    }
+    &:hover {
+      background: #f2f2f2;
+      transition: 0.2s all;
+    }
+    &.active {
+      background: #fff;
+      border-color: #005eaa;
+      color: #005eaa;
+      position: relative;
+      path {
+        fill: #005eaa;
+      }
+      &:before {
+        content: ' ';
+        width: 5px;
+        background: #005eaa;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        position: absolute;
+      }
+    }
+  }
+}
+
+.editor-toggle {
+  background: #f2f2f2;
+  border-radius: 60px;
+  color: #000;
+  font-size: 1em;
+  border: 0;
+  position: fixed;
+  z-index: 100;
+  transition: 0.1s background;
+  cursor: pointer;
+  width: 25px;
+  height: 25px;
+  left: 307px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
+  &:before {
+    top: 43%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    position: absolute;
+    content: '\00ab';
+  }
+  &.collapsed {
+    left: 1em;
+    margin-left: 0;
+    &:before {
+      content: '\00bb';
+    }
+  }
+  &:hover {
+    background: rgba(255, 255, 255, 1);
+  }
+}
+

package/src/components/Geo.tsx

@@ -1,6 +1,14 @@
 import React, { memo } from 'react'
 
-const Geo = ({ path, styles, stroke, strokeWidth, ...props }) => {
+type GeoProps = {
+  styles?: React.CSSProperties
+  stroke?: string
+  strokeWidth?: number
+  path?: string
+  className?: string
+}
+
+const Geo: React.FC<GeoProps> = ({ path, styles, stroke, strokeWidth, ...props }) => {
   const { className, ...restProps } = props
   const geoClassName = String(props.additionalData?.name)?.toLowerCase()?.replaceAll(' ', '') || 'country'
   return (

package/src/components/GoogleMap/components/GoogleMap.tsx

@@ -15,7 +15,7 @@ type GoogleMapComponentProps = {
 
 const GoogleMapComponent: React.FC<GoogleMapComponentProps> = ({ apiKey = '' }) => {
   const mapRef = useRef(null)
-  const { state } = useContext(ConfigContext)
+  const { config: state } = useContext(ConfigContext)
 
   useEffect(() => {
     const loader = new Loader({