@cdc/map 4.22.10 → 4.23.1

package/src/components/Filters.js

@@ -0,0 +1,114 @@
+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 = runtimeFilters
+    newFilters[index].active = value
+    setRuntimeFilters(newFilters)
+    setShowApplyButton(true)
+  }
+
+  const handleApplyButton = () => {
+    setConfig({ ...config, filters: runtimeFilters })
+    setShowApplyButton(false)
+  }
+
+  const handleReset = () => {
+    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%' }}>
+      <h3 className='filters-section__title'>Filters</h3>
+      <hr />
+      <div className='filters-section__wrapper' style={{ flexWrap: 'wrap', display: 'flex', gap: '7px 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/components/Geo.js

@@ -1,19 +1,9 @@
-import React, { memo } from 'react';
+import React, { memo } from 'react'
 
-const Geo = ({path, styles, stroke, strokeWidth, ...props}) => {
+const Geo = ({ path, styles, stroke, strokeWidth, ...props }) => {
   return (
-    <g
-      className="geo-group"
-      css={styles}
-      {...props}
-    >
-      <path
-        tabIndex={-1}
-        className='single-geo'
-        stroke={stroke}
-        strokeWidth={strokeWidth}
-        d={path}
-      />
+    <g className='geo-group' css={styles} {...props}>
+      <path tabIndex={-1} className='single-geo' stroke={stroke} strokeWidth={strokeWidth} d={path} />
     </g>
   )
 }

package/src/components/Modal.js

@@ -1,32 +1,22 @@
-import React from 'react';
-import closeIcon from '../images/close.svg?inline';
-import LegendCircle from '@cdc/core/components/LegendCircle';
+import React from 'react'
+import closeIcon from '../images/close.svg?inline'
+import LegendCircle from '@cdc/core/components/LegendCircle'
 
 //TODO: Where is this being used? Transfer to new Modal component?
-const Modal = (props) => {
-  const {
-    applyTooltipsToGeo,
-    content,
-    capitalize,
-    applyLegendToRow,
-    viewport,
-    type
-  } = props;
+const Modal = props => {
+  const { applyTooltipsToGeo, content, capitalize, applyLegendToRow, viewport, type } = props
 
-  const tooltip = applyTooltipsToGeo(content.geoName, content.keyedData, 'jsx');
+  const tooltip = applyTooltipsToGeo(content.geoName, content.keyedData, 'jsx')
 
-  const legendColors = applyLegendToRow(content.keyedData);
+  const legendColors = applyLegendToRow(content.keyedData)
 
   return (
-    <section className={capitalize ? 'modal-content tooltip capitalize ' + viewport : 'modal-content tooltip ' + viewport} aria-hidden="true">
-      <img src={closeIcon} className="modal-close" alt="Close Modal" />
+    <section className={capitalize ? 'modal-content tooltip capitalize ' + viewport : 'modal-content tooltip ' + viewport} aria-hidden='true'>
+      <img src={closeIcon} className='modal-close' alt='Close Modal' />
       {type === 'data' && <LegendCircle fill={legendColors[0]} />}
-      <div className="content">
-        {tooltip}
-      </div>
+      <div className='content'>{tooltip}</div>
     </section>
-  );
-};
+  )
+}
 
-
-export default Modal;
+export default Modal

package/src/components/NavigationMenu.js

@@ -1,67 +1,71 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react'
 
-const NavigationMenu = ({
-  data, navigationHandler, options, columns, displayGeoName, mapTabbingID
-}) => {
-  const [activeGeo, setActiveGeo] = useState('');
+const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoName, mapTabbingID }) => {
+  const [activeGeo, setActiveGeo] = useState('')
 
-  const [dropdownItems, setDropdownItems] = useState({});
+  const [dropdownItems, setDropdownItems] = useState({})
 
-  const handleSubmit = (event) => {
-    event.preventDefault();
+  const handleSubmit = event => {
+    event.preventDefault()
     if (activeGeo !== '') {
-      const urlString = data[dropdownItems[activeGeo]][columns.navigate.name];
+      const urlString = data[dropdownItems[activeGeo]][columns.navigate.name]
 
-      navigationHandler(urlString);
+      navigationHandler(urlString)
     }
-  };
+  }
 
-  let navSelect; let
-    navGo;
+  let navSelect
+  let navGo
 
   switch (options.language) {
     case 'es':
-      navSelect = 'Selecciona un Artículo';
-      navGo = 'Ir';
-      break;
+      navSelect = 'Selecciona un Artículo'
+      navGo = 'Ir'
+      break
     default:
-      navSelect = 'Select an Item';
-      navGo = 'Go';
+      navSelect = 'Select an Item'
+      navGo = 'Go'
   }
 
   useEffect(() => {
-    const sortedOptions = {};
+    const sortedOptions = {}
 
-    const processedDropdown = {};
+    const processedDropdown = {}
 
-    Object.keys(data).forEach((val) => {
-      const fullName = displayGeoName(val);
+    Object.keys(data).forEach(val => {
+      const fullName = displayGeoName(val)
 
-      processedDropdown[fullName] = val;
-    });
+      processedDropdown[fullName] = val
+    })
 
-    Object.keys(processedDropdown).sort().forEach((key) => {
-      sortedOptions[key] = processedDropdown[key];
-    });
+    Object.keys(processedDropdown)
+      .sort()
+      .forEach(key => {
+        sortedOptions[key] = processedDropdown[key]
+      })
 
-    setDropdownItems(sortedOptions);
+    setDropdownItems(sortedOptions)
 
-    setActiveGeo(Object.keys(sortedOptions)[0]);
-  }, [data, displayGeoName]);
+    setActiveGeo(Object.keys(sortedOptions)[0])
+  }, [data, displayGeoName])
 
   return (
-    <section className="navigation-menu">
-      <form onSubmit={handleSubmit} type="get">
+    <section className='navigation-menu'>
+      <form onSubmit={handleSubmit} type='get'>
         <label htmlFor={mapTabbingID.replace('#', '')}>
-          <div className="select-heading">{navSelect}</div>
-          <select value={activeGeo} id={mapTabbingID.replace('#', '')} onChange={(e) => setActiveGeo(e.target.value)}>
-            {Object.keys(dropdownItems).map((key, i) => <option key={key} value={key}>{key}</option>)}
+          <div className='select-heading'>{navSelect}</div>
+          <select value={activeGeo} id={mapTabbingID.replace('#', '')} onChange={e => setActiveGeo(e.target.value)}>
+            {Object.keys(dropdownItems).map((key, i) => (
+              <option key={key} value={key}>
+                {key}
+              </option>
+            ))}
           </select>
         </label>
-        <input type="submit" value={navGo} className={`${options.headerColor} btn`} id="cdcnavmap-dropdown-go" />
+        <input type='submit' value={navGo} className={`${options.headerColor} btn`} id='cdcnavmap-dropdown-go' />
       </form>
     </section>
-  );
-};
+  )
+}
 
-export default NavigationMenu;
+export default NavigationMenu

package/src/components/Sidebar.js

@@ -1,30 +1,17 @@
-import React from 'react';
-import parse from 'html-react-parser';
+import React from 'react'
+import parse from 'html-react-parser'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import LegendCircle from '@cdc/core/components/LegendCircle'
 
-const Sidebar = (props) => {
-  const {
-    legend,
-    runtimeFilters,
-    columns,
-    setAccessibleStatus,
-    changeFilterActive,
-    resetLegendToggles,
-    runtimeLegend,
-    setRuntimeLegend,
-    prefix,
-    suffix,
-    viewport,
-    displayDataAsText
-  } = props;
+const Sidebar = props => {
+  const { legend, runtimeFilters, columns, setAccessibleStatus, changeFilterActive, resetLegendToggles, runtimeLegend, setRuntimeLegend, prefix, suffix, viewport, displayDataAsText } = props
 
   // Toggles if a legend is active and being applied to the map and data table.
   const toggleLegendActive = (i, legendLabel) => {
-    const newValue = !runtimeLegend[i].disabled;
+    const newValue = !runtimeLegend[i].disabled
 
-    runtimeLegend[i].disabled = newValue; // Toggle!
+    runtimeLegend[i].disabled = newValue // Toggle!
 
     let newLegend = [...runtimeLegend]
 
@@ -36,127 +23,124 @@ const Sidebar = (props) => {
 
     setRuntimeLegend(newLegend)
 
-    setAccessibleStatus(`Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`);
-  };
+    setAccessibleStatus(`Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`)
+  }
 
   const legendList = runtimeLegend.map((entry, idx) => {
+    const entryMax = displayDataAsText(entry.max, 'primary')
 
-    const entryMax = displayDataAsText(entry.max, 'primary');
+    const entryMin = displayDataAsText(entry.min, 'primary')
 
-    const entryMin = displayDataAsText(entry.min, 'primary');
-
-    let formattedText = `${entryMin}${entryMax !== entryMin ? ` - ${entryMax}` : ''}`;
+    let formattedText = `${entryMin}${entryMax !== entryMin ? ` - ${entryMax}` : ''}`
 
     // If interval, add some formatting
     if (legend.type === 'equalinterval' && idx !== runtimeLegend.length - 1) {
-      formattedText = `${entryMin} - < ${entryMax}`;
+      formattedText = `${entryMin} - < ${entryMax}`
     }
 
-    const { disabled } = entry;
+    const { disabled } = entry
 
     if (legend.type === 'category') {
-      formattedText = displayDataAsText(entry.value, 'primary');
+      formattedText = displayDataAsText(entry.value, 'primary')
     }
 
     if (entry.max === 0 && entry.min === 0) {
-      formattedText = '0';
+      formattedText = '0'
     }
 
-    let legendLabel = formattedText;
+    let legendLabel = formattedText
 
     if (entry.hasOwnProperty('special')) {
-      legendLabel = entry.label || entry.value;
+      legendLabel = entry.label || entry.value
     }
 
     return (
-      <li 
+      <li
         className={disabled ? 'disabled single-legend' : 'single-legend'}
         key={idx}
         title={`Legend item ${legendLabel} - Click to disable`}
-        onClick={() => { toggleLegendActive(idx, legendLabel); } }
-        >
-        <LegendCircle fill={entry.color} /> <span className="label">{legendLabel}</span>
+        onClick={() => {
+          toggleLegendActive(idx, legendLabel)
+        }}
+      >
+        <LegendCircle fill={entry.color} /> <span className='label'>{legendLabel}</span>
       </li>
-    );
-  });
+    )
+  })
 
   const filtersList = runtimeFilters.map((singleFilter, idx) => {
-    const values = [];
+    const values = []
 
-    if(undefined === singleFilter.active) return null
+    if (undefined === singleFilter.active) return null
 
     singleFilter.values.forEach((filterOption, idx) => {
-      values.push(<option
-        key={idx}
-        value={filterOption}
-      >{filterOption}
-      </option>);
-    });
+      values.push(
+        <option key={idx} value={filterOption}>
+          {filterOption}
+        </option>
+      )
+    })
 
     return (
-      <section className="filter-col" key={idx}>
+      <section className='filter-col' key={idx}>
         {singleFilter.label.length > 0 && <label htmlFor={`filter-${idx}`}>{singleFilter.label}</label>}
         <select
           id={`filter-${idx}`}
-          className="filter-select"
-          aria-label="select filter"
+          className='filter-select'
+          aria-label='select filter'
           value={singleFilter.active}
-          onChange={(val) => {
-            changeFilterActive(idx, val.target.value);
-            setAccessibleStatus(`Filter ${singleFilter.label} value has been changed to ${val.target.value}, please reference the data table to see updated values.`);
+          onChange={val => {
+            changeFilterActive(idx, val.target.value)
+            setAccessibleStatus(`Filter ${singleFilter.label} value has been changed to ${val.target.value}, please reference the data table to see updated values.`)
           }}
         >
           {values}
         </select>
       </section>
-    );
-  });
+    )
+  })
+
+  const columnLogic = legend.position === 'side' && legend.singleColumn ? 'single-column' : legend.position === 'bottom' && legend.singleRow ? 'single-row' : ''
+
+  const classNames = [`${legend.position}`, `${columnLogic}`, `cdcdataviz-sr-focusable`, `${viewport}`]
 
   return (
-    <ErrorBoundary component="Sidebar">
-      <aside id="legend" className={`${legend.position} ${legend.singleColumn ? 'single-column cdcdataviz-sr-focusable' : 'cdcdataviz-sr-focusable'} ${viewport}`} role="region" aria-label="Legend" tabIndex="0">
-      <section className="legend-section" aria-label="Map Legend">
-        {runtimeLegend.disabledAmt > 0 &&
-          (
+    <ErrorBoundary component='Sidebar'>
+      <aside id='legend' className={classNames.join(' ')} role='region' aria-label='Legend' tabIndex='0'>
+        <section className='legend-section' aria-label='Map Legend'>
+          {runtimeLegend.disabledAmt > 0 && (
             <button
-              onClick={(e) => {
-                e.preventDefault();
-                resetLegendToggles();
-                setAccessibleStatus('Legend has been reset, please reference the data table to see updated values.');
+              onClick={e => {
+                e.preventDefault()
+                resetLegendToggles()
+                setAccessibleStatus('Legend has been reset, please reference the data table to see updated values.')
               }}
-              className="clear btn"
-            >Clear
+              className='clear btn'
+            >
+              Clear
             </button>
           )}
-        {legend.title && <span className="heading-2">{ parse(legend.title) }</span>}
-        {legend.dynamicDescription === false && legend.description
-          && <p>{ parse(legend.description) }</p>}
-        {legend.dynamicDescription === true && runtimeFilters.map((filter, idx) => {
-          const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`;
-
-          // Do we have a custom description for this?
-          const desc = legend.descriptions[lookupStr] || '';
-
-          if (desc.length > 0) {
-            return (<p key={`dynamic-description-${lookupStr}`}>{desc}</p>);
-          }
-          return true;
-        })}
-        <ul className={legend.singleColumn ? 'single-column' : ''} aria-label="Legend items">
-          {legendList}
-        </ul>
-      </section>
-      {filtersList.length > 0 &&
-        <section className="filters-section" aria-label="Map Filters">
-          <span className="heading-3">Filters</span>
-          <form>
-            {filtersList}
-          </form>
+          {legend.title && <span className='heading-2'>{parse(legend.title)}</span>}
+          {legend.dynamicDescription === false && legend.description && <p>{parse(legend.description)}</p>}
+          {legend.dynamicDescription === true &&
+            runtimeFilters.map((filter, idx) => {
+              const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
+
+              // Do we have a custom description for this?
+              const desc = legend.descriptions[lookupStr] || ''
+
+              if (desc.length > 0) {
+                return <p key={`dynamic-description-${lookupStr}`}>{desc}</p>
+              }
+              return true
+            })}
+          <ul className={columnLogic} aria-label='Legend items'>
+            {legendList}
+          </ul>
         </section>
-      }
-    </aside>
+      </aside>
     </ErrorBoundary>
-  );
-};
+  )
+}
 
-export default Sidebar;
+export default Sidebar