@cdc/map 2.6.0 → 2.6.3

package/src/components/Geo.js

@@ -0,0 +1,21 @@
+import React, { memo } from 'react';
+
+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>
+  )
+}
+
+export default memo(Geo)

package/src/components/Modal.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import closeIcon from '../images/close.svg?inline';
+import LegendCircle from '@cdc/core/components/LegendCircle';
+
+const Modal = (props) => {
+  const {
+    applyTooltipsToGeo,
+    content,
+    capitalize,
+    applyLegendToRow,
+    viewport,
+    type
+  } = props;
+
+  const tooltip = applyTooltipsToGeo(content.geoName, content.keyedData, 'jsx');
+
+  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" />
+      {type === 'data' && <LegendCircle fill={legendColors[0]} />}
+      <div className="content">
+        {tooltip}
+      </div>
+    </section>
+  );
+};
+
+
+export default Modal;

package/src/components/NavigationMenu.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+
+const NavigationMenu = ({
+  data, navigationHandler, options, columns, displayGeoName
+}) => {
+  const [activeGeo, setActiveGeo] = useState('');
+
+  const [dropdownItems, setDropdownItems] = useState({});
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (activeGeo !== '') {
+      const urlString = data[dropdownItems[activeGeo]][columns.navigate.name];
+
+      navigationHandler(urlString);
+    }
+  };
+  let navSelect; let
+    navGo;
+
+  switch (options.language) {
+    case 'es':
+      navSelect = 'Selecciona un Artículo';
+      navGo = 'Ir';
+      break;
+    default:
+      navSelect = 'Select an Item';
+      navGo = 'Go';
+  }
+
+  useEffect(() => {
+    const sortedOptions = {};
+
+    const processedDropdown = {};
+
+    Object.keys(data).forEach((val) => {
+      const fullName = displayGeoName(val);
+
+      processedDropdown[fullName] = val;
+    });
+
+    Object.keys(processedDropdown).sort().forEach((key) => {
+      sortedOptions[key] = processedDropdown[key];
+    });
+
+    setDropdownItems(sortedOptions);
+
+    setActiveGeo(Object.keys(sortedOptions)[0]);
+  }, [data, displayGeoName]);
+
+  return (
+    <section className="navigation-menu">
+      <form onSubmit={handleSubmit} type="get">
+        <label htmlFor="dropdown">
+          <div className="select-heading">{navSelect}</div>
+          <select value={activeGeo} id="dropdown" 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" />
+      </form>
+    </section>
+  );
+};
+
+export default NavigationMenu;

package/src/components/Sidebar.js

@@ -0,0 +1,167 @@
+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
+  } = props;
+
+  const addCommas = (value) => {
+    // If value is a number, apply specific formattings
+    if (value && columns.primary.hasOwnProperty('useCommas') && columns.primary.useCommas === true) {
+      return value.toLocaleString('en-US', { style: 'decimal' });
+    }
+
+    return value;
+  };
+
+  // Toggles if a legend is active and being applied to the map and data table.
+  const toggleLegendActive = (i, legendLabel) => {
+    const newValue = !runtimeLegend[i].disabled;
+
+    runtimeLegend[i].disabled = newValue; // Toggle!
+
+    let newLegend = [...runtimeLegend]
+
+    newLegend[i].disabled = newValue
+
+    const disabledAmt = runtimeLegend.disabledAmt ?? 0
+
+    newLegend['disabledAmt'] = newValue ? disabledAmt + 1 : disabledAmt - 1
+
+    setRuntimeLegend(newLegend)
+
+    setAccessibleStatus(`Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`);
+  };
+
+  const legendList = runtimeLegend.map((entry, idx) => {
+    const entryMax = addCommas(entry.max);
+
+    const entryMin = addCommas(entry.min);
+
+    let formattedText = `${prefix + entryMin + suffix}${entryMax !== entryMin ? ` - ${prefix + entryMax + suffix}` : ''}`;
+
+    // If interval, add some formatting
+    if (legend.type === 'equalinterval' && idx !== runtimeLegend.length - 1) {
+      formattedText = `${prefix + entryMin + suffix} - < ${prefix + entryMax + suffix}`;
+    }
+
+    const { disabled } = entry;
+
+    if (legend.type === 'category') {
+      formattedText = prefix + entry.value + suffix;
+    }
+
+    if (entry.max === 0 && entry.min === 0) {
+      formattedText = '0';
+    }
+
+    let legendLabel = formattedText;
+
+    if (entry.hasOwnProperty('special')) {
+      legendLabel = entry.label || entry.value;
+    }
+
+    return (
+      <li
+        key={idx}
+        title={`Legend item ${legendLabel} - Click to disable`}
+        onClick={() => { toggleLegendActive(idx, legendLabel); }}
+        className={disabled ? 'disabled single-legend' : 'single-legend'}
+      ><LegendCircle fill={entry.color} /> <span className="label">{legendLabel}</span>
+      </li>
+    );
+  });
+
+  const filtersList = 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" key={idx}>
+        {singleFilter.label.length > 0 && <label htmlFor={`filter-${idx}`}>{singleFilter.label}</label>}
+        <select
+          id={`filter-${idx}`}
+          className="filter-select"
+          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.`);
+          }}
+        >
+          {values}
+        </select>
+      </section>
+    );
+  });
+
+  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 &&
+          (
+            <button
+              onClick={(e) => {
+                e.preventDefault();
+                resetLegendToggles();
+                setAccessibleStatus('Legend has been reset, please reference the data table to see updated values.');
+              }}
+              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>
+        </section>
+      }
+    </aside>
+    </ErrorBoundary>
+  );
+};
+
+export default Sidebar;

package/src/components/SingleStateMap.js

@@ -0,0 +1,326 @@
+import React, { useState, useEffect, memo, useRef } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
+import { geoCentroid, geoPath } from "d3-geo";
+import { feature, mesh } from "topojson-client";
+import { CustomProjection } from '@visx/geo';
+import colorPalettes from '../data/color-palettes';
+import { geoAlbersUsaTerritories } from 'd3-composite-projections';
+import testJSON from '../data/dfc-map.json';
+
+const abbrs = {
+  Alabama: 'AL',
+  Alaska: 'AK',
+  Arizona: 'AZ',
+  Arkansas: 'AR',
+  California: 'CA',
+  Colorado: 'CO',
+  Connecticut: 'CT',
+  Delaware: 'DE',
+  Florida: 'FL',
+  Georgia: 'GA',
+  Hawaii: 'HI',
+  Idaho: 'ID',
+  Illinois: 'IL',
+  Indiana: 'IN',
+  Iowa: 'IA',
+  Kansas: 'KS',
+  Kentucky: 'KY',
+  Louisiana: 'LA',
+  Maine: 'ME',
+  Maryland: 'MD',
+  Massachusetts: 'MA',
+  Michigan: 'MI',
+  Minnesota: 'MN',
+  Mississippi: 'MS',
+  Missouri: 'MO',
+  Montana: 'MT',
+  Nebraska: 'NE',
+  Nevada: 'NV',
+  'New Hampshire': 'NH',
+  'New Jersey': 'NJ',
+  'New Mexico': 'NM',
+  'New York': 'NY',
+  'North Carolina': 'NC',
+  'North Dakota': 'ND',
+  Ohio: 'OH',
+  Oklahoma: 'OK',
+  Oregon: 'OR',
+  Pennsylvania: 'PA',
+  'Rhode Island': 'RI',
+  'South Carolina': 'SC',
+  'South Dakota': 'SD',
+  Tennessee: 'TN',
+  Texas: 'TX',
+  Utah: 'UT',
+  Vermont: 'VT',
+  Virginia: 'VA',
+  Washington: 'WA',
+  'West Virginia': 'WV',
+  Wisconsin: 'WI',
+  Wyoming: 'WY',
+  'District of Columbia': 'DC',
+  Guam: 'GU',
+  'Virgin Islands': 'VI',
+  'Puerto Rico': 'PR',
+  'American Samoa': 'AS'
+}
+
+
+
+// SVG ITEMS
+const WIDTH = 880;
+const HEIGHT = 500;
+const PADDING = 25;
+
+// DATA
+let { features: counties } = feature(testJSON, testJSON.objects.counties)
+let { features: states } = feature(testJSON, testJSON.objects.states);
+
+// CONSTANTS
+const STATE_BORDER = '#c0cad4';
+const STATE_INACTIVE_FILL = '#F4F7FA';
+
+// CREATE STATE LINES
+// const projection = geoAlbersUsaTerritories().translate([WIDTH/2,HEIGHT/2])
+
+
+
+const SingleStateMap = (props) => {
+
+  const {
+    state,
+    applyTooltipsToGeo,
+    data,
+    geoClickHandler,
+    applyLegendToRow,
+    displayGeoName,
+    supportedTerritories,
+    rebuildTooltips,
+    runtimeLegend,
+    generateColorsArray
+  } = props;
+
+
+
+  const projection = geoAlbersUsaTerritories().translate([WIDTH/2, HEIGHT/2])
+
+  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
+  
+  const [stateToShow, setStateToShow ] = useState( null )
+  const [countiesToShow, setCountiesToShow] = useState( null )
+  const [translate, setTranslate] = useState()
+  const [scale, setScale] = useState()
+  const [strokeWidth, setStrokeWidth ] = useState(.75)
+
+  let mapColorPalette = colorPalettes[state.color] || '#fff';
+  let focusedBorderColor = mapColorPalette[3];
+  useEffect(() => rebuildTooltips());
+
+  const path = geoPath().projection(projection)
+
+  // When choosing a state changes...
+  useEffect(() => {
+	  if(state.general.hasOwnProperty('statePicked')) {
+	  	let statePicked = state.general.statePicked.stateName;
+	  	let statePickedData = states.find(s => s.properties.name === statePicked)
+		setStateToShow(statePickedData)
+
+		let countiesFound = counties.filter( c => c.id.substring(0,2) === state.general.statePicked.fipsCode)
+
+		setCountiesToShow(countiesFound)
+    
+		const projection = geoAlbersUsaTerritories().translate([WIDTH/2,HEIGHT/2])
+		const newProjection = projection.fitExtent([[PADDING, PADDING], [WIDTH - PADDING, HEIGHT - PADDING]], statePickedData)
+		const newScale = newProjection.scale();
+		const newScaleWithHypot = newScale / 1070;
+		
+		let [x, y] = newProjection.translate()
+		x = (x - WIDTH/2);
+		y = (y - HEIGHT/2);
+
+		setTranslate([x,y])
+		setScale(newScaleWithHypot)
+		
+	  }
+  }, [state.general.statePicked]);
+
+  const geoLabel = (geo, projection) => {
+    //projection = geoAlbersUsaTerritories().translate([WIDTH/2,HEIGHT/2])
+    //const newProjection = projection.fitExtent([[PADDING, PADDING], [WIDTH - PADDING, HEIGHT - PADDING]], geo)
+    let [x, y] = projection( geoCentroid(geo) )
+    let abbr = abbrs[geo.properties.name]
+    if (abbr === 'NJ') x += 3
+    if(undefined === abbr) return null
+    let [dx, dy] = offsets[geo.properties.name]
+  
+    return (
+      <>
+        <line className="abbrLine" x1={x} y1={y} x2={x + dx} y2={y + dy} stroke="black" strokeWidth={1} />
+        <text className="abbrText" x={4} strokeWidth="0" fontSize={13} style={{fill: "#202020"}} alignmentBaseline="middle" transform={`translate(${x + dx}, ${y + dy})`}>
+          {abbr}
+        </text>
+      </>
+    )
+  }
+
+  // Constructs and displays markup for all geos on the map (except territories right now)
+  const constructGeoJsx = (geographies, projection) => {
+	  	const statePassed = geographies[0].feature.states;
+	  	const counties = geographies[0].feature.counties;
+
+		let geosJsx = [];
+
+
+    const StateOutput = () => {
+
+		let geo = testJSON.objects.states.geometries.filter( s => {
+			return s.id === statePassed.id
+		})
+
+		
+		// const stateLine = path(mesh(testJSON, lines ))
+		let stateLines = path(mesh(testJSON, geo[0]))
+        return (
+          <g
+            key={'single-state'}
+            className="single-state"
+            style={{ fill: '#E6E6E6'}}
+			      stroke={geoStrokeColor}
+			      strokeWidth={ .95 / scale }
+          >
+                <path
+                  tabIndex={-1}
+                  className='state-path'
+                  d={stateLines}
+                />
+          </g>
+        )
+    };
+
+	const countyOutput = ( counties.map(( county ) => {
+    
+
+    // Map the name from the geo data with the appropriate key for the processed data
+    let geoKey = county.id;
+
+    if(!geoKey) return;
+
+		let countyPath = path(county);
+    
+    let geoData = data[county.id];
+    let legendColors;
+
+    // Once we receive data for this geographic item, setup variables.
+    if (geoData !== undefined ) {
+      legendColors = applyLegendToRow(geoData);
+    }
+
+    const geoDisplayName = displayGeoName(geoKey);
+
+    // For some reason, these two geos are breaking the display.
+    if (geoDisplayName === 'Franklin City' || geoDisplayName === 'Waynesboro') return null;
+
+    const tooltip = applyTooltipsToGeo(geoDisplayName, geoData);
+    
+    if (legendColors && legendColors[0] !== '#000000') {
+
+
+      let styles = {
+        fill: legendColors[0],
+        cursor: 'default',
+        '&:hover': {
+          fill: legendColors[1],
+        },
+        '&:active': {
+          fill: legendColors[2],
+        },
+      };
+
+      // When to add pointer cursor
+      if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'hover') {
+        styles.cursor = 'pointer'
+      }
+
+		return (
+            <g
+              data-for="tooltip"
+              data-tip={tooltip}
+              key={`key--${county.id}`}         
+              className={`county county--${geoDisplayName.split(" ").join("")} county--${geoData[state.columns.geo.name]}`}
+              css={styles}
+              onClick={() => geoClickHandler(geoDisplayName, geoData)}
+            >
+              <path
+                tabIndex={-1}
+                className={`county`}
+                stroke={geoStrokeColor}
+                d={countyPath}
+                strokeWidth={ .75 / scale }
+              />
+            </g>
+          )
+	} else {
+		return (
+      <g
+        data-for="tooltip"
+        data-tip={tooltip}
+        key={`key--${county.id}`}         
+        className={`county county--${geoDisplayName.split(" ").join("")}`}
+        style={{ fill : '#e6e6e6'}}
+      >
+        <path
+          tabIndex={-1}
+          className={`county`}
+          stroke={geoStrokeColor}
+          d={countyPath}
+          strokeWidth={ .75 / scale }
+        />
+      </g>
+    )
+  }
+
+}));
+
+
+    geosJsx.push( <StateOutput /> );
+	geosJsx.push( countyOutput );
+
+    return geosJsx;
+  };
+
+
+  return (
+    <ErrorBoundary component="SingleStateMap">
+		{stateToShow &&
+			<svg viewBox={`0 0 ${WIDTH} ${HEIGHT}`} preserveAspectRatio="xMinYMin" className="svg-container">
+				<rect className="background center-container ocean" width={WIDTH} height={HEIGHT} fillOpacity={1} fill="white"></rect>
+				<CustomProjection 
+					data={ [{states: stateToShow, counties: countiesToShow }] } 
+					// translate={translate}
+					// scale={scale} 
+					projection={geoAlbersUsaTerritories}
+					fitExtent={[[[PADDING, PADDING], [WIDTH - PADDING, HEIGHT - PADDING]], stateToShow]}
+					>
+					{ ({ features, projection }) => {
+					return (
+						<g 
+						id="mapGroup" 
+						className="countyMapGroup" 
+						transform={`translate(${translate}) scale(${scale})`} 
+						data-scale="" 
+						key="countyMapGroup">
+						{ constructGeoJsx(features, geoAlbersUsaTerritories) }
+						</g>
+					)
+					}}
+				</CustomProjection>
+			</svg>
+		}
+		{!stateToShow && 'No State Picked'}
+    </ErrorBoundary>
+  );
+};
+
+export default memo(SingleStateMap)