@cdc/map 4.24.11 → 4.24.12-2

package/src/components/CityList.tsx

@@ -7,6 +7,7 @@ import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from
 import { getFilterControllingStatePicked } from './UsaMap/helpers/map'
 
 import ConfigContext from '../context'
+import { getGeoStrokeColor } from '../helpers/colors'
 
 const CityList = ({
   data,
@@ -79,6 +80,8 @@ const CityList = ({
       fillOpacity: state.general.type === 'bubble' ? 0.4 : 1
     }
 
+    const geoStrokeColor = getGeoStrokeColor(state)
+
     const pin = (
       <path
         className='marker'
@@ -88,7 +91,7 @@ const CityList = ({
         data-tooltip-id={`tooltip__${tooltipId}`}
         data-tooltip-html={toolTip}
         transform={`scale(${radius / 9})`}
-        stroke={state.general.geoBorderColor === 'sameAsBackground' ? '#ffffff' : '#000000'}
+        stroke={geoStrokeColor}
         strokeWidth={'2px'}
         tabIndex='-1'
         {...additionalProps}
@@ -185,7 +188,7 @@ const CityList = ({
       title: 'Select for more information',
       'data-tooltip-id': `tooltip__${tooltipId}`,
       'data-tooltip-html': toolTip,
-      stroke: state.general.geoBorderColor === 'sameAsBackground' ? '#ffffff' : '#000000',
+      stroke: geoStrokeColor,
       strokeWidth: '2px',
       tabIndex: -1,
       ...additionalProps

package/src/components/EditorPanel/components/EditorPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, memo, useContext } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 
 // Third Party
 import {
@@ -10,6 +10,7 @@ import {
 } from 'react-accessible-accordion'
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
 import { useDebounce } from 'use-debounce'
+import _ from 'lodash'
 // import ReactTags from 'react-tag-autocomplete'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 import Panels from './Panels'
@@ -25,6 +26,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Icon from '@cdc/core/components/ui/Icon'
 import InputToggle from '@cdc/core/components/inputs/InputToggle'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
+import VizFilterEditor from '@cdc/core/components/EditorPanel/VizFilterEditor'
 
 // Assets
 import UsaGraphic from '@cdc/core/assets/icon-map-usa.svg'
@@ -36,35 +38,31 @@ import usaDefaultConfig from '../../../../examples/default-usa.json'
 import countyDefaultConfig from '../../../../examples/default-county.json'
 import useMapLayers from '../../../hooks/useMapLayers.tsx'
 
-import { useFilters } from '@cdc/core/components/Filters'
-
 import HexSetting from './HexShapeSettings.jsx'
 import ConfigContext from '../../../context.ts'
 import { MapContext } from '../../../types/MapContext.js'
 import { TextField } from './Inputs'
+import Alert from '@cdc/core/components/Alert'
+import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 
 // Todo: move to useReducer, seperate files out.
 const EditorPanel = ({ columnsRequiredChecker }) => {
   // prettier-ignore
   const {
-    changeFilterActive,
     columnsInData = [],
     isDashboard,
     isDebug,
-    isEditor,
     loadConfig,
     runtimeFilters,
     runtimeLegend,
     setParentConfig,
-    setRuntimeFilters,
     setState,
     state,
     tooltipId,
     runtimeData,
     setRuntimeData,
     generateRuntimeData,
-    position,
-    topoData,
+
 
   } = useContext<MapContext>(ConfigContext)
 
@@ -78,13 +76,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
   const [activeFilterValueForDescription, setActiveFilterValueForDescription] = useState([0, 0])
 
-  const { handleFilterOrder, filterOrderOptions, filterStyleOptions } = useFilters({
-    config: state,
-    setConfig: setState,
-    filteredData: runtimeFilters,
-    setFilteredData: setRuntimeFilters
-  })
-
   const headerColors = [
     'theme-blue',
     'theme-purple',
@@ -116,7 +107,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     categoryValuesOrder.splice(idx2, 0, movedItem)
 
     state.legend.categoryValuesOrder?.forEach(value => {
-      if(categoryValuesOrder.indexOf(value) === -1){
+      if (categoryValuesOrder.indexOf(value) === -1) {
         categoryValuesOrder.push(value)
       }
     })
@@ -377,7 +368,8 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
           ...state,
           legend: {
             ...state.legend,
-            position: value
+            position: value,
+            hideBorder: _.includes(['top', 'bottom'], value)
           }
         })
         break
@@ -1071,33 +1063,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     })
   }
 
-  const MapFilters = () => {
-    return (
-      <>
-        <label>
-          Filter Behavior
-          <select
-            value={state.filterBehavior}
-            onChange={e => {
-              setState({
-                ...state,
-                filterBehavior: e.target.value
-              })
-            }}
-          >
-            <option key='Apply Button' value='Apply Button'>
-              Apply Button
-            </option>
-            <option key='Filter Change' value='Filter Change'>
-              Filter Change
-            </option>
-          </select>
-        </label>
-        {filtersJSX}
-      </>
-    )
-  }
-
   const removeAdditionalColumn = columnName => {
     const newColumns = state.columns
 
@@ -1260,30 +1225,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     return true
   })
 
-  const updateField = (section, subsection, fieldName, newValue) => {
-    const isArray = Array.isArray(state[section])
-
-    let sectionValue = isArray ? [...state[section], newValue] : { ...state[section], [fieldName]: newValue }
-
-    if (null !== subsection) {
-      if (isArray) {
-        sectionValue = [...state[section]]
-        sectionValue[subsection] = { ...sectionValue[subsection], [fieldName]: newValue }
-      } else {
-        sectionValue = {
-          ...state[section],
-          [subsection]: { ...state[section][subsection], [fieldName]: newValue }
-        }
-      }
-    }
-
-    let updatedState = {
-      ...state,
-      [section]: sectionValue
-    }
-
-    setState(updatedState)
-  }
+  const updateField = updateFieldFactory(state, setState)
 
   const onBackClick = () => {
     setDisplayPanel(!displayPanel)
@@ -1295,163 +1237,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
   const usedFilterColumns = {}
 
-  const filtersJSX = state.filters.map((filter, index) => {
-    if (filter.type === 'url') return <></>
-
-    if (filter.columnName) {
-      usedFilterColumns[filter.columnName] = true
-    }
-
-    return (
-      <>
-        <fieldset className='edit-block' key={`filter-${index}`}>
-          <button
-            className='remove-column'
-            onClick={e => {
-              e.preventDefault()
-              changeFilter(index, 'remove')
-            }}
-          >
-            Remove
-          </button>
-          <TextField
-            value={state.filters[index].label}
-            section='filters'
-            subsection={index}
-            fieldName='label'
-            label='Label'
-            updateField={updateField}
-          />
-          <label>
-            <span className='edit-label column-heading'>
-              Filter Column
-              <Tooltip style={{ textTransform: 'none' }}>
-                <Tooltip.Target>
-                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                </Tooltip.Target>
-                <Tooltip.Content>
-                  <p>
-                    Selecting a column will add a dropdown menu below the map legend and allow users to filter based on
-                    the values in this column.
-                  </p>
-                </Tooltip.Content>
-              </Tooltip>
-            </span>
-            <select
-              value={filter.columnName}
-              onChange={event => {
-                changeFilter(index, 'columnName', event.target.value)
-              }}
-            >
-              {columnsOptions.filter(({ key }) => undefined === usedFilterColumns[key] || filter.columnName === key)}
-            </select>
-          </label>
-
-          <label>
-            <span className='edit-showDropdown column-heading'>Show Filter Input</span>
-            <input
-              type='checkbox'
-              checked={filter.showDropdown === undefined ? true : filter.showDropdown}
-              onChange={e => {
-                changeFilter(index, 'showDropdown', e.target.checked)
-              }}
-            />
-          </label>
-
-          <label>
-            <span className='edit-filterOrder column-heading'>Filter Style</span>
-            <select
-              value={filter.filterStyle}
-              onChange={e => {
-                changeFilter(index, 'filterStyle', e.target.value)
-              }}
-            >
-              {filterStyleOptions.map((option, index) => {
-                return (
-                  <option value={option} key={`filter-${option}--${index}`}>
-                    {option}
-                  </option>
-                )
-              })}
-            </select>
-          </label>
-
-          <label>
-            <span className='edit-filterOrder column-heading'>Filter Order</span>
-            <select
-              value={filter.order}
-              onChange={e => {
-                changeFilter(index, 'filterOrder', e.target.value)
-                changeFilterActive(index, filter.values[0])
-              }}
-            >
-              {filterOrderOptions.map((option, index) => {
-                return (
-                  <option value={option.value} key={`filter-${index}`}>
-                    {option.label}
-                  </option>
-                )
-              })}
-            </select>
-          </label>
-
-          <TextField
-            value={state.filters[index].setByQueryParameter}
-            section='filters'
-            subsection={index}
-            fieldName='setByQueryParameter'
-            label='Default Value Set By Query String Parameter'
-            updateField={updateField}
-          />
-
-          {filter.order === 'cust' && (
-            <DragDropContext
-              onDragEnd={({ source, destination }) =>
-                handleFilterOrder(source.index, destination.index, index, state.filters[index])
-              }
-            >
-              <Droppable droppableId='filter_order'>
-                {provided => (
-                  <ul
-                    {...provided.droppableProps}
-                    className='sort-list'
-                    ref={provided.innerRef}
-                    style={{ marginTop: '1em' }}
-                  >
-                    {state.filters[index]?.values.map((value, index) => {
-                      return (
-                        <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
-                          {(provided, snapshot) => (
-                            <li>
-                              <div
-                                className={snapshot.isDragging ? 'currently-dragging' : ''}
-                                style={getItemStyle(
-                                  snapshot.isDragging,
-                                  provided.draggableProps.style,
-                                  sortableItemStyles
-                                )}
-                                ref={provided.innerRef}
-                                {...provided.draggableProps}
-                                {...provided.dragHandleProps}
-                              >
-                                {value}
-                              </div>
-                            </li>
-                          )}
-                        </Draggable>
-                      )
-                    })}
-                    {provided.placeholder}
-                  </ul>
-                )}
-              </Droppable>
-            </DragDropContext>
-          )}
-        </fieldset>
-      </>
-    )
-  })
-
   const StateOptionList = () => {
     const arrOfArrays = Object.entries(supportedStatesFipsCodes)
 
@@ -1503,9 +1288,11 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   })
 
   const getCategoryValuesOrder = () => {
-    let values = runtimeLegend ? runtimeLegend.filter(item => !item.special).map(runtimeLegendItem => runtimeLegendItem.value) : []
+    let values = runtimeLegend
+      ? runtimeLegend.filter(item => !item.special).map(runtimeLegendItem => runtimeLegendItem.value)
+      : []
 
-    if(state.legend.cateogryValuesOrder){
+    if (state.legend.cateogryValuesOrder) {
       return values.sort((a, b) => {
         let aVal = state.legend.cateogryValuesOrder.indexOf(a)
         let bVal = state.legend.cateogryValuesOrder.indexOf(b)
@@ -1517,11 +1304,12 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     } else {
       return values
     }
-    
   }
 
   const CategoryList = () => {
-    return getCategoryValuesOrder().filter(item => !item.special).map((value, index) => (
+    return getCategoryValuesOrder()
+      .filter(item => !item?.special)
+      .map((value, index) => (
         <Draggable key={value} draggableId={`item-${value}`} index={index}>
           {(provided, snapshot) => (
             <li style={{ position: 'relative' }}>
@@ -1537,7 +1325,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
             </li>
           )}
         </Draggable>
-    ))
+      ))
   }
 
   const isLoadedFromUrl = state?.dataKey?.includes('http://') || state?.dataKey?.includes('https://')
@@ -2191,6 +1979,13 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </Tooltip>
                     </span>
                   </label>
+                  {state.legend.specialClasses.length === 2 && (
+                    <Alert
+                      type='info'
+                      message='If a third special class is needed you can apply a pattern to set it apart.'
+                      showCloseButton={false}
+                    />
+                  )}
                   {specialClasses.map((specialClass, i) => (
                     <div className='edit-block' key={`special-class-${i}`}>
                       <button
@@ -2251,15 +2046,17 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </label>
                     </div>
                   ))}
-                  <button
-                    className='btn btn-primary full-width'
-                    onClick={e => {
-                      e.preventDefault()
-                      editColumn('primary', 'specialClassAdd', {})
-                    }}
-                  >
-                    Add Special Class
-                  </button>
+                  {state.legend.specialClasses.length < 2 && (
+                    <button
+                      className='btn btn-primary full-width'
+                      onClick={e => {
+                        e.preventDefault()
+                        editColumn('primary', 'specialClassAdd', {})
+                      }}
+                    >
+                      Add Special Class
+                    </button>
+                  )}
                 </fieldset>
               )}
 
@@ -2826,7 +2623,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </label>
                   </React.Fragment>
                 )}
-                {filtersJSX.length > 0 && (
+                {state.filters.length > 0 && (
                   <label className='checkbox'>
                     <input
                       type='checkbox'
@@ -2854,7 +2651,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </span>
                   </label>
                 )}
-                {(filtersJSX.length > 0 || state.general.type === 'bubble' || state.general.geoType === 'us') && (
+                {(state.filters.length > 0 || state.general.type === 'bubble' || state.general.geoType === 'us') && (
                   <label className='checkbox'>
                     <input
                       type='checkbox'
@@ -2891,20 +2688,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <AccordionItemButton>Filters</AccordionItemButton>
               </AccordionItemHeading>
               <AccordionItemPanel>
-                {filtersJSX.length > 0 ? (
-                  <MapFilters />
-                ) : (
-                  <p style={{ textAlign: 'center' }}>There are currently no filters.</p>
-                )}
-                <button
-                  className={'btn btn-primary full-width'}
-                  onClick={event => {
-                    event.preventDefault()
-                    changeFilter(null, 'addNew')
-                  }}
-                >
-                  Add Filter
-                </button>
+                <VizFilterEditor config={state} updateField={updateField} rawData={state.data} />
               </AccordionItemPanel>
             </AccordionItem>
           )}
@@ -3229,7 +3013,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               <label>
                 <span className='edit-label'>Map Color Palette</span>
               </label>
-              {/* <InputCheckbox  section="general" subsection="palette"  fieldName='isReversed'  size='small' label='Use selected palette in reverse order'   updateField={updateField}  value={isPaletteReversed} /> */}
               <InputToggle
                 type='3d'
                 section='general'

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

@@ -255,7 +255,7 @@ const PatternSettings = ({ name }: PanelProps) => {
               </Accordion>
             )
           })}
-        <button className='btn btn-primary full-width' onClick={handleAddGeoPattern}>
+        <button className='btn btn-primary full-width mt-2' onClick={handleAddGeoPattern}>
           Add Geo Pattern
         </button>
       </AccordionItemPanel>

package/src/components/Legend/components/Legend.tsx

@@ -18,7 +18,7 @@ import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from
 import { Group } from '@visx/group'
 import './index.scss'
 import { ViewportSize } from '@cdc/chart/src/types/ChartConfig'
-import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+import { isBelowBreakpoint, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 
 const LEGEND_PADDING = 30
 
@@ -46,6 +46,12 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
   } = useContext(ConfigContext)
 
   const { legend } = state
+  const isLegendGradient = legend.style === 'gradient'
+  const boxDynamicallyHidden = isBelowBreakpoint('md', currentViewport)
+  const legendWrapping =
+    (legend.position === 'left' || legend.position === 'right') && isBelowBreakpoint('md', currentViewport)
+  const legendOnBottom = legend.position === 'bottom' || legendWrapping
+  const needsTopMargin = legend.hideBorder && legendOnBottom
 
   // Toggles if a legend is active and being applied to the map and data table.
   const toggleLegendActive = (i, legendLabel) => {
@@ -87,6 +93,10 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
         formattedText = '0'
       }
 
+      if (entry.max === null && entry.min === null) {
+        formattedText = 'No data'
+      }
+
       let legendLabel = formattedText
 
       if (entry.hasOwnProperty('special')) {
@@ -207,7 +217,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
     return legendItems
   }
-  const legendListItems = legendList(state.legend.style === 'gradient')
+  const legendListItems = legendList(isLegendGradient)
 
   const { legendClasses } = useDataVizClasses(state, viewport)
 
@@ -244,13 +254,13 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
   return (
     <ErrorBoundary component='Sidebar'>
-      <div className='legends'>
+      <div className={`legends ${needsTopMargin ? 'mt-1' : ''}`}>
         <aside
           id={skipId || 'legend'}
           className={legendClasses.aside.join(' ') || ''}
           role='region'
           aria-label='Legend'
-          tabIndex={0}
+          tabIndex={isLegendGradient ? -1 : 0}
           ref={ref}
         >
           <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
@@ -279,7 +289,9 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
               labels={getFormattedLegendItems().map(item => item?.label) ?? []}
               colors={getFormattedLegendItems().map(item => item?.color) ?? []}
               dimensions={dimensions}
-              parentPaddingToSubtract={containerWidthPadding + (legend.hideBorder ? 0 : LEGEND_PADDING)}
+              parentPaddingToSubtract={
+                containerWidthPadding + (legend.hideBorder || boxDynamicallyHidden ? 0 : LEGEND_PADDING)
+              }
               config={state}
             />
             {!!legendListItems.length && (
@@ -321,7 +333,11 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                 </div>
               </>
             )}
-            {runtimeLegend.disabledAmt > 0 && <Button onClick={handleReset}>Reset</Button>}
+            {runtimeLegend.disabledAmt > 0 && (
+              <Button className={legendClasses.resetButton.join(' ')} onClick={handleReset}>
+                Reset
+              </Button>
+            )}
           </section>
         </aside>
         {state.hexMap.shapeGroups?.length > 0 && state.hexMap.type === 'shapes' && state.general.displayAsHex && (

package/src/components/Legend/components/index.scss

@@ -6,7 +6,7 @@
   }
   @include breakpointClass(md) {
     .map-container.world aside.side {
-      border-top: var(--lightGray) 1px solid;
+      border-top: var(--cool-gray-10) 1px solid;
       position: absolute;
       box-shadow: rgba(0, 0, 0, 0.2) 0 10px 18px;
     }
@@ -15,12 +15,15 @@
   aside {
     background-color: #fff;
     z-index: 6;
-    border-top: var(--lightGray) 1px solid;
+    border-top: var(--cool-gray-10) 1px solid;
 
     @include breakpointClass(md) {
+      .legend-container.legend-padding {
+        padding: 15px;
+      }
       &.bottom,
       &.top {
-        border: var(--lightGray) 1px solid;
+        border: var(--cool-gray-10) 1px solid;
       }
       &.side {
         z-index: 1;
@@ -31,7 +34,7 @@
         align-self: flex-start;
         z-index: 4;
         right: 1em;
-        border: var(--lightGray) 1px solid;
+        border: var(--cool-gray-10) 1px solid;
         top: 2em;
         right: 1em;
 
@@ -67,9 +70,10 @@
     }
 
     .legend-container {
+      --space-between-legend-items: 0.6em;
       position: relative;
       &.legend-padding {
-        padding: 15px;
+        padding-top: 15px;
       }
       .legend-container__title {
         font-size: 1.3em;
@@ -83,17 +87,7 @@
         padding-top: 1em;
       }
       .legend-container__reset-button {
-        font-size: 0.75em;
-        right: 1em;
-        text-transform: uppercase;
-        transition: 0.2s all;
-        padding: 0.2em 0.5em;
-        border: rgba(0, 0, 0, 0.2) 1px solid;
-        padding: 0.375rem;
-        &:hover {
-          text-decoration: none;
-          transition: 0.2s all;
-        }
+        margin-top: 1em;
       }
       p {
         line-height: 1.4em;
@@ -118,23 +112,21 @@
 
         &:not(.vertical-sorted, .legend-container__ul--single-column, .single-row) {
           width: 100%;
-          @include breakpoint(sm) {
-            .legend-container__li {
-              width: 50%;
-            }
-          }
         }
         .legend-container__li {
           flex-shrink: 0;
           display: inline-block;
           padding-right: 1em;
-          padding-bottom: 1em;
+          margin-bottom: var(--space-between-legend-items);
           vertical-align: middle;
           transition: 0.1s opacity;
           display: flex;
           cursor: pointer;
           white-space: wrap;
           flex-grow: 1;
+          &:last-child {
+            margin-bottom: 0;
+          }
           @include breakpoint(md) {
             white-space: nowrap;
           }
@@ -146,16 +138,17 @@
       }
       .legend-container__ul.single-row {
         width: 100%;
+        cursor: pointer;
         list-style: none;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: flex-start;
         flex-wrap: wrap;
+        row-gap: var(--space-between-legend-items);
 
         & > li {
           margin-right: 1em;
-          margin-bottom: 1em;
           white-space: wrap;
           display: flex;
           justify-content: center;