@cdc/map 4.24.5 → 4.24.9

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

@@ -0,0 +1,336 @@
+import React, { useContext } from 'react'
+
+// CDC Core
+import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
+import Accordion from '@cdc/core/components/ui/Accordion'
+import Button from '@cdc/core/components/elements/Button'
+import { MapContext } from '../../../../types/MapContext'
+import ConfigContext from '../../../../context'
+
+// types
+// styles
+
+const PanelAnnotate: React.FC = props => {
+  const { state: config, setState: updateConfig, dimensions, isDraggingAnnotation } = useContext<MapContext>(ConfigContext)
+  const getColumns = (filter = true) => {
+    const columns = {}
+    config.data.forEach(row => {
+      Object.keys(row).forEach(columnName => (columns[columnName] = true))
+    })
+
+    if (filter) {
+      Object.keys(columns).forEach(key => {
+        if ((config.series && config.series.filter(series => series.dataKey === key).length > 0) || (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))) {
+          delete columns[key]
+        }
+      })
+    }
+
+    return Object.keys(columns)
+  }
+
+  const handleAnnotationUpdate = (value, property, index) => {
+    const annotations = [...config?.annotations]
+    annotations[index][property] = value
+    annotations[index].savedDimensions = [dimensions[0] * 0.73, dimensions[1]]
+
+    updateConfig({
+      ...config,
+      annotations
+    })
+  }
+
+  const handleAddAnnotation = () => {
+    const svgContainer = document.querySelector('.map-container > section > svg, .map-container > section > canvas')?.getBoundingClientRect()
+    const newSvgDims = [svgContainer.width, svgContainer.height]
+
+    const newAnnotation = {
+      text: 'New Annotation',
+      snapToNearestPoint: false,
+      fontSize: 16,
+      show: {
+        desktop: true,
+        tablet: true,
+        mobile: true
+      },
+      markerType: 'arrow',
+      connectorType: 'line',
+      colors: {
+        label: 'black',
+        connector: 'black',
+        marker: 'black'
+      },
+      selected: true,
+      anchor: {
+        vertical: false,
+        horizontal: false
+      },
+      connectionType: 'line',
+      marker: 'arrow',
+      edit: {
+        subject: true,
+        label: true
+      },
+      seriesKey: '',
+      x: Number(newSvgDims?.[0]) / 2,
+      y: Number(newSvgDims?.[1] / 2),
+      xKey: null,
+      yKey: null,
+      dx: 0,
+      dy: 0,
+      opacity: '100',
+      savedDimensions: [dimensions[0] * 0.73, dimensions[1]]
+    }
+
+    const annotations = Array.isArray(config.annotations) ? config.annotations : []
+
+    updateConfig({
+      ...config,
+      annotations: [...annotations, newAnnotation]
+    })
+  }
+
+  const handleRemoveAnnotation = (annotationIndex: number) => {
+    const updated = config.annotations.filter((_, index) => index !== annotationIndex)
+    updateConfig({
+      ...config,
+      annotations: updated
+    })
+  }
+
+  return (
+    <Accordion>
+      <Accordion.Section title={props.name}>
+        <label>
+          Show Annotation Dropdown
+          <input
+            type='checkbox'
+            checked={config?.general?.showAnnotationDropdown}
+            onClick={e => {
+              updateConfig({
+                ...config,
+                general: {
+                  ...config.general,
+                  showAnnotationDropdown: e.target.checked
+                }
+              })
+            }}
+          />
+        </label>
+
+        <label>
+          Annotation Dropdown Title:
+          <input
+            type='text'
+            style={{ marginBottom: '10px' }}
+            value={config?.general?.annotationDropdownText}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                general: {
+                  ...config.general,
+                  annotationDropdownText: e.target.value
+                }
+              })
+            }}
+          />
+        </label>
+
+        {config?.annotations &&
+          config?.annotations.map((annotation, index) => (
+            <Accordion>
+              <Accordion.Section title={annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}>
+                <div className='annotation-group'>
+                  <label>
+                    Annotation Text:
+                    <textarea rows={5} value={annotation.text} onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)} />
+                  </label>
+                  {/* <label>
+                      Vertical Anchor
+                      <input
+                        type='checkbox'
+                        checked={config?.annotations[index].anchor.vertical}
+                        onClick={e => {
+                          const updatedAnnotations = [...config?.annotations]
+                          updatedAnnotations[index].anchor.vertical = e.target.checked
+                          updateConfig({
+                            ...config,
+                            annotations: updatedAnnotations
+                          })
+                        }}
+                      />
+                    </label>
+                    <label>
+                      Horizontal Anchor
+                      <input
+                        type='checkbox'
+                        checked={config?.annotations[index].anchor.horizontal}
+                        onClick={e => {
+                          const updatedAnnotations = [...config?.annotations]
+                          updatedAnnotations[index].anchor.horizontal = e.target.checked
+                          updateConfig({
+                            ...config,
+                            annotations: updatedAnnotations
+                          })
+                        }}
+                      />
+                    </label> */}
+
+                  <label>
+                    Opacity
+                    <br />
+                    <input
+                      type='range'
+                      onChange={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].opacity = e.target.value
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                      value={config?.annotations?.[index]?.opacity || '100'}
+                    />
+                  </label>
+
+                  <label>
+                    Edit Subject
+                    <input
+                      type='checkbox'
+                      checked={config?.annotations[index]?.edit?.subject}
+                      onClick={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].edit.subject = e.target.checked
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    />
+                  </label>
+                  <label>
+                    Edit Label
+                    <input
+                      type='checkbox'
+                      checked={config?.annotations[index]?.edit?.label}
+                      onClick={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].edit.label = e.target.checked
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    />
+                  </label>
+
+                  <label>
+                    Connection Type:
+                    <select
+                      onChange={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].connectionType = e.target.value
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    >
+                      {['curve', 'line', 'elbow', 'none'].map((side, index) => (
+                        <option key={side} value={side}>
+                          {side}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+
+                  {annotation.connectionType === 'curve' && (
+                    <label>
+                      Line Type:
+                      <select
+                        onChange={e => {
+                          const updatedAnnotations = [...config?.annotations]
+                          updatedAnnotations[index].lineType = e.target.value
+                          updateConfig({
+                            ...config,
+                            annotations: updatedAnnotations
+                          })
+                        }}
+                      >
+                        {Object.entries(approvedCurveTypes).map(([value, key]) => (
+                          <option key={key} value={key}>
+                            {value}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  )}
+
+                  {/* <label>
+                    Connection Location:
+                    <select
+                      onChange={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].connectionLocation = e.target.value
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    >
+                      {['auto', 'left', 'top', 'bottom', 'right'].map((side, index) => (
+                        <option key={side} value={side}>
+                          {side}
+                        </option>
+                      ))}
+                    </select>
+                  </label> */}
+
+                  <label>
+                    Marker
+                    <select
+                      onChange={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].marker = e.target.value
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    >
+                      {['circle', 'arrow'].map((column, columnIndex) => {
+                        return <option>{column}</option>
+                      })}
+                    </select>
+                  </label>
+
+                  {/* <label>
+                    Snap to Nearest Point
+                    <input
+                      type='checkbox'
+                      checked={config?.annotations[index]?.snapToNearestPoint}
+                      onClick={e => {
+                        const updatedAnnotations = [...config?.annotations]
+                        updatedAnnotations[index].snapToNearestPoint = e.target.checked
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    />
+                  </label> */}
+
+                  <Button className='warn btn-warn btn btn-remove delete' onClick={() => handleRemoveAnnotation(index)}>
+                    Delete Annotation
+                  </Button>
+                </div>
+              </Accordion.Section>
+            </Accordion>
+          ))}
+        {config?.annotations?.length < 3 && <Button onClick={handleAddAnnotation}>Add Annotation</Button>}
+      </Accordion.Section>
+    </Accordion>
+  )
+}
+
+export default PanelAnnotate

package/src/components/EditorPanel/components/{Panel.PatternSettings.tsx → Panels/Panel.PatternSettings.tsx}

@@ -1,18 +1,24 @@
 import { useContext } from 'react'
 import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
-import ConfigContext from '../../../context'
-import { type MapContext } from '../../../types/MapContext'
+import ConfigContext from '../../../../context'
+import { type MapContext } from '../../../../types/MapContext'
 import Button from '@cdc/core/components/elements/Button'
 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'
+
+// 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'
 
 type PanelProps = {
   name: string
 }
 
 const PatternSettings = ({ name }: PanelProps) => {
-  const { state, setState } = useContext<MapContext>(ConfigContext)
+  const { state, setState, applyLegendToRow, runtimeData } = useContext<MapContext>(ConfigContext)
   const defaultPattern = 'circles'
   const patternTypes = ['circles', 'waves', 'lines']
 
@@ -24,7 +30,7 @@ const PatternSettings = ({ name }: PanelProps) => {
   /** Updates the map config with a new pattern item */
   const handleAddGeoPattern = () => {
     let patterns = [...state.map.patterns]
-    patterns.push({ dataKey: '', pattern: defaultPattern })
+    patterns.push({ dataKey: '', pattern: defaultPattern, contrastCheck: true })
     setState({
       ...state,
       map: {
@@ -36,16 +42,56 @@ const PatternSettings = ({ name }: PanelProps) => {
 
   /** Updates the map pattern at a given index */
   const handleUpdateGeoPattern = (value: string, index: number, keyToUpdate: 'dataKey' | 'pattern' | 'dataValue' | 'size' | 'label' | 'color') => {
+    const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
     const updatedPatterns = [...state.map.patterns]
+
+    // Update the specific pattern with the new value
     updatedPatterns[index] = { ...updatedPatterns[index], [keyToUpdate]: value }
 
-    setState({
-      ...state,
+    // Iterate over each state feature
+    unitedStates.forEach(geo => {
+      const geoKey = geo.properties.iso
+      if (!geoKey || !runtimeData) return
+
+      const legendColors = runtimeData[geoKey] ? applyLegendToRow(runtimeData[geoKey]) : undefined
+      const geoData = runtimeData[geoKey]
+      if (!geoData) return
+
+      // Iterate over each pattern
+      state.map.patterns.forEach((patternData, patternIndex) => {
+        const hasMatchingValues = patternData.dataValue === geoData[patternData.dataKey]
+        if (!hasMatchingValues) return
+
+        const currentFill = legendColors[0]
+        const patternColor = keyToUpdate === 'color' && value !== '' ? value : getContrastColor('#000', currentFill)
+        const contrastCheck = checkColorContrast(currentFill, patternColor)
+
+        // 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)}
+          `)
+        }
+
+        updatedPatterns[index] = { ...updatedPatterns[index], [keyToUpdate]: value, contrastCheck }
+      })
+    })
+
+    const editorErrorMessage = updatedPatterns.some(pattern => pattern.contrastCheck === false) ? 'One or more patterns do not pass the WCAG 2.1 contrast ratio of 3:1.' : ''
+
+    // Update the state with the new patterns and error message
+    setState(prevState => ({
+      ...prevState,
       map: {
-        ...state.map,
+        ...prevState.map,
         patterns: updatedPatterns
+      },
+      runtime: {
+        ...prevState.runtime,
+        editorErrorMessage
       }
-    })
+    }))
   }
 
   const handleRemovePattern = index => {
@@ -60,12 +106,19 @@ const PatternSettings = ({ name }: PanelProps) => {
     })
   }
 
+  const checkPatternContrasts = () => {
+    return state.map.patterns.every(pattern => pattern.contrastCheck !== false)
+  }
+
   return (
     <AccordionItem>
       <AccordionItemHeading>
         <AccordionItemButton>{name}</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
+        {patterns.length > 0 && <Alert type={checkPatternContrasts() ? 'success' : 'danger'} message='Pattern colors must comply with <br /> <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> 3:1 contrast ratio.' />}
+        <br />
+
         {patterns &&
           patterns.map((pattern, patternIndex) => {
             const dataValueOptions = [...new Set(data?.map(d => d?.[pattern?.dataKey]))]
@@ -77,13 +130,14 @@ const PatternSettings = ({ name }: PanelProps) => {
             dataKeyOptions.sort()
 
             return (
-              <Accordion allowZeroExpanded>
+              <Accordion allowZeroExpanded key={`accordion-pattern--${patternIndex}`}>
                 <AccordionItem>
                   <AccordionItemHeading>
                     <AccordionItemButton>{pattern.dataKey ? `${pattern.dataKey}: ${pattern.dataValue ?? 'No Value'}` : 'Select Column'}</AccordionItemButton>
                   </AccordionItemHeading>
                   <AccordionItemPanel>
                     <>
+                      {pattern.contrastCheck ?? true ? <Alert type='success' message='This pattern passes contrast checks' /> : <Alert type='danger' message='Error: <a href="https://webaim.org/resources/contrastchecker/" target="_blank"> Review Color Contrast</a>' />}{' '}
                       <label htmlFor={`pattern-dataKey--${patternIndex}`}>Data Key:</label>
                       <select id={`pattern-dataKey--${patternIndex}`} value={pattern.dataKey !== '' ? pattern.dataKey : 'Select'} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataKey')}>
                         {/* TODO: sort these? */}
@@ -95,17 +149,14 @@ const PatternSettings = ({ name }: PanelProps) => {
                           )
                         })}
                       </select>
-
                       <label htmlFor={`pattern-dataValue--${patternIndex}`}>
                         Data Value:
                         <input type='text' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataValue')} id={`pattern-dataValue--${patternIndex}`} value={pattern.dataValue === '' ? '' : pattern.dataValue} />
                       </label>
-
                       <label htmlFor={`pattern-label--${patternIndex}`}>
                         Label (optional):
                         <input type='text' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'label')} id={`pattern-dataValue--${patternIndex}`} value={pattern.label === '' ? '' : pattern.label} />
                       </label>
-
                       <label htmlFor={`pattern-type--${patternIndex}`}>Pattern Type:</label>
                       <select id={`pattern-type--${patternIndex}`} value={pattern?.pattern} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'pattern')}>
                         {patternTypes.map((patternName, index) => (
@@ -114,7 +165,6 @@ const PatternSettings = ({ name }: PanelProps) => {
                           </option>
                         ))}
                       </select>
-
                       <label htmlFor={`pattern-size--${patternIndex}`}>Pattern Size:</label>
                       <select id={`pattern-size--${patternIndex}`} value={pattern?.size} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'size')}>
                         {['small', 'medium', 'large'].map((size, index) => (

package/src/components/EditorPanel/components/{Panels.tsx → Panels/index.tsx}

@@ -1,6 +1,9 @@
+import React from 'react'
+import Annotate from './Panel.Annotate'
 import PatternSettings from './Panel.PatternSettings'
 
 const Panels = {
+  Annotate,
   PatternSettings
 }