@cdc/map 2.6.4 → 9.22.9

package/src/components/EditorPanel.js

@@ -10,21 +10,21 @@ import ReactTooltip from 'react-tooltip';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { useDebounce } from 'use-debounce';
 
+import colorPalettes from '@cdc/core/data/colorPalettes';
+import { supportedStatesFipsCodes } from '../data/supported-geos';
+import { GET_PALETTE,useColorPalette } from '../hooks/useColorPalette';
+
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
 import Waiting from '@cdc/core/components/Waiting';
 
-import UsaGraphic from '@cdc/core/assets/usa-graphic.svg';
-import WorldGraphic from '@cdc/core/assets/world-graphic.svg';
-import AlabamaGraphic from '@cdc/core/assets/alabama-graphic.svg';
-import colorPalettes from '../../../core/data/colorPalettes';
+import UsaGraphic from '@cdc/core/assets/icon-map-usa.svg';
+import UsaRegionGraphic from '@cdc/core/assets/usa-region-graphic.svg';
+import WorldGraphic from '@cdc/core/assets/icon-map-world.svg';
+import AlabamaGraphic from '@cdc/core/assets/icon-map-alabama.svg';
 import worldDefaultConfig from '../../examples/default-world.json';
 import usaDefaultConfig from '../../examples/default-usa.json';
 import countyDefaultConfig from '../../examples/default-county.json';
-import QuestionIcon from '@cdc/core/assets/question-circle.svg';
 
-import { supportedStatesFipsCodes } from '../data/supported-geos';
-import { GET_PALETTE,useColorPalette } from '../hooks/useColorPalette';
-import InputCheckbox from '@cdc/core/components/inputs/InputCheckbox';
 import InputToggle from '@cdc/core/components/inputs/InputToggle';
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
@@ -107,7 +107,6 @@ const EditorPanel = (props) => {
 
 	const {filteredPallets,filteredQualitative,isPaletteReversed,paletteName} = useColorPalette(colorPalettes,state);
 
-
 	const [editorCatOrder, setEditorCatOrder] = useState(state.legend.categoryValuesOrder || []);
 
 	const headerColors = [
@@ -183,6 +182,7 @@ const EditorPanel = (props) => {
 	};
 
 	const handleEditorChanges = async (property, value) => {
+		
 		switch (property) {
 
 			// change these to be more generic.
@@ -232,10 +232,16 @@ const EditorPanel = (props) => {
 					...state,
 					general: {
 						...state.general,
-						[property]: value
+						allowMapZoom: value
 					}
 				})
 				break;
+			case 'hideGeoColumnInTooltip':
+				setState({
+					...state,
+					[property]: value
+				})
+				break;
 			case 'hidePrimaryColumnInTooltip':
 				setState({
 					...state,
@@ -296,6 +302,14 @@ const EditorPanel = (props) => {
 					},
 				});
 				break;
+			case 'handleCityStyle':
+				setState({
+					...state,
+					visual: {
+						cityStyle: value,
+					},
+				});
+				break;
 			case 'geoBorderColor':
 				setState({
 					...state,
@@ -337,7 +351,7 @@ const EditorPanel = (props) => {
 				break;
 			case 'legendType':
 
-				let testForType = typeof state.data[0][state.columns.primary.name];
+				let testForType = Number(typeof state.data[0][state.columns.primary.name]);
 				let hasValue = state.data[0][state.columns.primary.name];
 				let messages = [];
 
@@ -345,8 +359,10 @@ const EditorPanel = (props) => {
 					messages.push(`There appears to be values missing for data in the primary column ${state.columns.primary.name}`);
 				}
 
-				if (testForType === 'string' && value !== 'category') {
-					messages.push( 'Error with legend. Primary columns that are text must use a categorical legend type. Try changing the legend type to categorical.' );
+				if (testForType === 'string' && isNaN(testForType) && value !== 'category')  {
+					messages.push(
+            "Error with legend. Primary columns that are text must use a categorical legend type. Try changing the legend type to DEV-12345categorical."
+          );
 				} else {
 					messages = []
 				}
@@ -502,6 +518,20 @@ const EditorPanel = (props) => {
 						});
 						ReactTooltip.rebuild();
 						break;
+					case 'us-region':
+						setState({
+							...state,
+							general: {
+								...state.general,
+								geoType: 'us-region',
+							},
+							dataTable: {
+								...state.dataTable,
+								forceDisplay: true,
+							},
+						});
+						ReactTooltip.rebuild();
+						break;
 					case 'world':
 						setState({
 							...state,
@@ -1243,45 +1273,60 @@ const EditorPanel = (props) => {
 											<span>Geography</span>
 										</span>
 										<ul className='geo-buttons'>
-											<li
+											<button
 												className={
 													state.general.geoType === 'us' ||
 													state.general.geoType === 'us-county'
 														? 'active'
 														: ''
 												}
-												onClick={() => handleEditorChanges('geoType', 'us')}
+												onClick={ (e) => {
+													e.preventDefault();
+													handleEditorChanges('geoType', 'us')
+												}}
 											>
 												<UsaGraphic />
 												<span>United States</span>
-											</li>
-											<li
+											</button>
+                      <button
+                        className={state.general.geoType === 'us-region' ? 'active' : ''}
+                        onClick={ (e) => {
+                          e.preventDefault();
+                          handleEditorChanges('geoType', 'us-region')
+                        }}
+                      >
+                        <UsaRegionGraphic />
+                        <span>U.S. Region</span>
+                      </button>
+											<button
 												className={state.general.geoType === 'world' ? 'active' : ''}
-												onClick={() => handleEditorChanges('geoType', 'world')}
+												onClick={ (e) => {
+													e.preventDefault();
+													handleEditorChanges('geoType', 'world')
+													}
+												}
 											>
 												<WorldGraphic />
 												<span>World</span>
-											</li>
-											<li
+											</button>
+											<button
 												className={state.general.geoType === 'single-state' ? 'active' : ''}
-												onClick={() => handleEditorChanges('geoType', 'single-state')}
+												onClick={(e) => {
+													e.preventDefault();
+													handleEditorChanges('geoType', 'single-state')
+												}}
 											>
 												<AlabamaGraphic />
 												<span>U.S. State</span>
-											</li>
+											</button>
 										</ul>
 									</label>
 									{/* Select > State or County Map */}
 									{(state.general.geoType === 'us' || state.general.geoType === 'us-county') && (
 										<label>
 											<span className='edit-label column-heading'>
-												Map Type
-												<Tooltip style={{textTransform: 'none'}}>
-												<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
-												<Tooltip.Content>
-													<p>Select "Data" to create a color-coded data map. To create a navigation-only map, select "Navigation."</p>
-												</Tooltip.Content>
-												</Tooltip>
+												Geography Subtype
+												
 											</span>
 											<select
 												value={state.general.geoType}
@@ -1315,7 +1360,15 @@ const EditorPanel = (props) => {
 									)}
 									{/* Type */}
 									<label>
-										<span className='edit-label column-heading'>Map Type</span>
+										<span className='edit-label column-heading'>
+											Map Type
+											<Tooltip style={{textTransform: 'none'}}>
+												<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+												<Tooltip.Content>
+													<p>Select "Data" to create a color-coded data map. To create a navigation-only map, select "Navigation."</p>
+												</Tooltip.Content>
+												</Tooltip>
+										</span>
 										<select
 											value={state.general.type}
 											onChange={(event) => {
@@ -1327,6 +1380,41 @@ const EditorPanel = (props) => {
 											{ (state.general.geoType === 'world' || state.general.geoType === 'us') && <option value="bubble">Bubble</option>}
 										</select>
 									</label>
+									<label>
+                     <span className="edit-label">Data Classification Type</span>
+                     <div>
+                       <label>
+                         <input
+                           type="radio"
+                           name="equalnumber"
+                           value="equalnumber"
+                           checked={state.legend.type === "equalnumber"}
+                           onChange={(e) =>
+                             handleEditorChanges(
+                               "classificationType",
+                               e.target.value
+                             )
+                           }
+                         />
+                         Numeric/Quantitative
+                       </label>
+                       <label>
+                         <input
+                           type="radio"
+                           name="category"
+                           value="category"
+                           checked={state.legend.type === "category"}
+                           onChange={(e) =>
+                             handleEditorChanges(
+                               "classificationType",
+                               e.target.value
+                             )
+                           }
+                         />
+                         Categorical
+                       </label>
+                     </div>
+                   </label>
 									{/* SubType */}
 									{'us' === state.general.geoType && 'data' === state.general.type && (
 										<label className='checkbox mt-4'>
@@ -1341,7 +1429,7 @@ const EditorPanel = (props) => {
 										</label>
 									)}
 									{'us' === state.general.geoType &&
-										'data' === state.general.type &&
+										'bubble' !== state.general.type &&
 										false === state.general.displayAsHex && (
 											<label className='checkbox'>
 												<input
@@ -1364,19 +1452,50 @@ const EditorPanel = (props) => {
 								</AccordionItemHeading>
 								<AccordionItemPanel>
 									<TextField
-										value={state.general.title}
+										value={general.title}
 										updateField={updateField}
 										section='general'
 										fieldName='title'
 										label='Title'
 										placeholder='Map Title'
 										tooltip={
-										<Tooltip style={{textTransform: 'none'}}>
-											<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
-											<Tooltip.Content>
-											<p>For accessibility reasons, you should enter a title even if you are not planning on displaying it.</p>
-											</Tooltip.Content>
-										</Tooltip>
+											<Tooltip style={{textTransform: 'none'}}>
+												<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+												<Tooltip.Content>
+												<p>For accessibility reasons, you should enter a title even if you are not planning on displaying it.</p>
+												</Tooltip.Content>
+											</Tooltip>
+										}
+									/>
+									<TextField
+										value={general.superTitle || ''}
+										updateField={updateField}
+										section='general'
+										fieldName='superTitle'
+										label='Super Title'
+										tooltip={
+											<Tooltip style={{textTransform: 'none'}}>
+												<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+												<Tooltip.Content>
+												<p>Super Title</p>
+												</Tooltip.Content>
+											</Tooltip>
+										}
+									/>
+									<TextField
+										type='textarea'
+										value={general.introText}
+										updateField={updateField}
+										section='general'
+										fieldName='introText'
+										label='Intro Text'
+										tooltip={
+											<Tooltip style={{textTransform: 'none'}}>
+												<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+												<Tooltip.Content>
+												<p>Intro Text</p>
+												</Tooltip.Content>
+											</Tooltip>
 										}
 									/>
 									<TextField
@@ -1388,10 +1507,26 @@ const EditorPanel = (props) => {
 										label='Subtext'
 										tooltip={
 											<Tooltip style={{textTransform: 'none'}}>
-											<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
-											<Tooltip.Content>
+												<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+												<Tooltip.Content>
 												<p>Enter supporting text to display below the data visualization, if applicable. The following HTML tags are supported: strong, em, sup, and sub.</p>
-											</Tooltip.Content>
+												</Tooltip.Content>
+											</Tooltip>
+										}
+									/>
+									<TextField
+										type='textarea'
+										value={general.footnotes}
+										updateField={updateField}
+										section='general'
+										fieldName='footnotes'
+										label='Footnotes'
+										tooltip={
+											<Tooltip style={{textTransform: 'none'}}>
+												<Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+												<Tooltip.Content>
+												<p>Footnotes</p>
+												</Tooltip.Content>
 											</Tooltip>
 										}
 									/>
@@ -1405,41 +1540,6 @@ const EditorPanel = (props) => {
 											placeholder='Territories'
 										/>
 									)}
-									<label>
-                     <span className="edit-label">Data Classification Type</span>
-                     <div>
-                       <label>
-                         <input
-                           type="radio"
-                           name="equalnumber"
-                           value="equalnumber"
-                           checked={state.legend.type === "equalnumber"}
-                           onChange={(e) =>
-                             handleEditorChanges(
-                               "classificationType",
-                               e.target.value
-                             )
-                           }
-                         />
-                         Numeric/Quantitative
-                       </label>
-                       <label>
-                         <input
-                           type="radio"
-                           name="category"
-                           value="category"
-                           checked={state.legend.type === "category"}
-                           onChange={(e) =>
-                             handleEditorChanges(
-                               "classificationType",
-                               e.target.value
-                             )
-                           }
-                         />
-                         Categorical
-                       </label>
-                     </div>
-                   </label>
 									{/* <label className="checkbox mt-4">
                     <input type="checkbox" checked={ state.general.showDownloadMediaButton } onChange={(event) => { handleEditorChanges("toggleDownloadMediaButton", event.target.checked) }} />
                     <span className="edit-label">Enable Media Download</span>
@@ -1540,6 +1640,7 @@ const EditorPanel = (props) => {
                               fieldName='roundToPlace'
                               label='Round'
                               updateField={updateField}
+							  min={0}
                             />
                           </li>
                           <li>
@@ -1844,12 +1945,49 @@ const EditorPanel = (props) => {
 													handleEditorChanges('legendType', event.target.value);
 												}}
 											>
-												<option value='equalnumber'>Equal Number</option>
+												<option value='equalnumber'>Equal Number (Quantiles)</option>
 												<option value='equalinterval'>Equal Interval</option>
-												<option value='category'>Categorical</option>
 											</select>
 											</label>
 											)}
+									{'navigation' !== state.general.type && (
+										<label className='checkbox'>
+											<input
+												type='checkbox'
+												checked={state.general.showSidebar || false}
+												onChange={(event) => {
+													handleEditorChanges('showSidebar', event.target.checked);
+												}}
+											/>
+											<span className='edit-label'>Show Legend</span>
+										</label>
+									)}
+									{'navigation' !== state.general.type && (
+										<label>
+											<span className='edit-label'>Legend Position</span>
+											<select
+												value={legend.position || false}
+												onChange={(event) => {
+													handleEditorChanges('sidebarPosition', event.target.value);
+												}}
+											>
+												<option value='side'>Side</option>
+												<option value='bottom'>Bottom</option>
+											</select>
+										</label>
+									)}
+									{'side' === legend.position && (
+										<label className='checkbox'>
+											<input
+												type='checkbox'
+												checked={legend.singleColumn}
+												onChange={(event) => {
+													handleEditorChanges('singleColumnLegend', event.target.checked);
+												}}
+											/>
+											<span className='edit-label'>Single Column Legend</span>
+										</label>
+									)}
 										{'category' !== legend.type && (
 											<label className='checkbox'>
 												<input
@@ -1872,6 +2010,7 @@ const EditorPanel = (props) => {
 											</label>
 										)}
 										{/* Temp Checkbox */}
+										
 										{state.legend.type === 'equalnumber' &&
 											<label className="checkbox mt-4">
 												<input type="checkbox" checked={ state.general.equalNumberOptIn } onChange={(event) => { handleEditorChanges("showEqualNumber", event.target.checked) }} />
@@ -2032,7 +2171,7 @@ const EditorPanel = (props) => {
 												</span>
 											</label>
 										)}
-										{filtersJSX.length > 0 || state.general.type === 'bubble' && (
+										{(filtersJSX.length > 0 || state.general.type === 'bubble' || state.general.geoType === 'us')  && (
 											<label className='checkbox'>
 												<input
 													type='checkbox'
@@ -2305,45 +2444,6 @@ const EditorPanel = (props) => {
 										/>
 										<span className='edit-label'>Hide Primary Column Name in Tooltip</span>
 									</label>
-
-									{'navigation' !== state.general.type && (
-										<label className='checkbox'>
-											<input
-												type='checkbox'
-												checked={state.general.showSidebar || false}
-												onChange={(event) => {
-													handleEditorChanges('showSidebar', event.target.checked);
-												}}
-											/>
-											<span className='edit-label'>Show Legend</span>
-										</label>
-									)}
-									{'navigation' !== state.general.type && (
-										<label>
-											<span className='edit-label'>Legend Position</span>
-											<select
-												value={legend.position || false}
-												onChange={(event) => {
-													handleEditorChanges('sidebarPosition', event.target.value);
-												}}
-											>
-												<option value='side'>Side</option>
-												<option value='bottom'>Bottom</option>
-											</select>
-										</label>
-									)}
-									{'side' === legend.position && (
-										<label className='checkbox'>
-											<input
-												type='checkbox'
-												checked={legend.singleColumn}
-												onChange={(event) => {
-													handleEditorChanges('singleColumnLegend', event.target.checked);
-												}}
-											/>
-											<span className='edit-label'>Single Column Legend</span>
-										</label>
-									)}
 									{'navigation' === state.general.type && (
 										<label className='checkbox'>
 											<input
@@ -2421,6 +2521,10 @@ const EditorPanel = (props) => {
 													backgroundColor: colorPalettes[palette][6],
 												};
 
+												// hide palettes with too few colors for region maps
+												if ( colorPalettes[palette].length <= 8 && state.general.geoType === 'us-region' ) {
+													return('');
+												}
 												return (
 													<li
 														title={palette}
@@ -2437,7 +2541,7 @@ const EditorPanel = (props) => {
 												);
 											})}
 									</ul>
-									<TextField
+									{(state.general.type === 'bubble') && <><TextField
 										type='number'
 										value={state.visual.minBubbleSize}
 										section='visual'
@@ -2452,8 +2556,8 @@ const EditorPanel = (props) => {
 										fieldName='maxBubbleSize'
 										label='Maximum Bubble Size'
 										updateField={updateField}
-									/>
-									{ (state.general.geoType === 'world' || state.general.geoType === 'us') &&
+									/></>}
+									{ (state.general.geoType === 'world' || state.general.geoType === 'us' && state.general.type === 'bubble') &&
 										<label className='checkbox'>
 											<input
 												type='checkbox'
@@ -2489,6 +2593,20 @@ const EditorPanel = (props) => {
 											<span className='edit-label'>Bubble Map has extra border</span>
 										</label>
 									}
+									{state.general.geoType === 'us' &&
+										<label>
+											<span className='edit-label'>City Style</span>
+											<select
+												value={state.visual.cityStyle || false}
+												onChange={(event) => {
+													handleEditorChanges('handleCityStyle', event.target.value);
+												}}
+											>
+												<option value='circle'>Circle</option>
+												<option value='pin'>Pin</option>
+											</select>
+										</label>
+									}
 								</AccordionItemPanel>
 							</AccordionItem>
 						</Accordion>

package/src/components/Modal.js

@@ -2,6 +2,7 @@ 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,
@@ -28,4 +29,4 @@ const Modal = (props) => {
 };
 
 
-export default Modal;
+export default Modal;

package/src/components/NavigationMenu.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 const NavigationMenu = ({
-  data, navigationHandler, options, columns, displayGeoName
+  data, navigationHandler, options, columns, displayGeoName, mapTabbingID
 }) => {
   const [activeGeo, setActiveGeo] = useState('');
 
@@ -15,6 +15,7 @@ const NavigationMenu = ({
       navigationHandler(urlString);
     }
   };
+
   let navSelect; let
     navGo;
 
@@ -51,9 +52,9 @@ const NavigationMenu = ({
   return (
     <section className="navigation-menu">
       <form onSubmit={handleSubmit} type="get">
-        <label htmlFor="dropdown">
+        <label htmlFor={mapTabbingID.replace('#', '')}>
           <div className="select-heading">{navSelect}</div>
-          <select value={activeGeo} id="dropdown" onChange={(e) => setActiveGeo(e.target.value)}>
+          <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>

package/src/components/Sidebar.js

@@ -16,18 +16,10 @@ const Sidebar = (props) => {
     setRuntimeLegend,
     prefix,
     suffix,
-    viewport
+    viewport,
+    displayDataAsText
   } = 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;
@@ -48,21 +40,22 @@ const Sidebar = (props) => {
   };
 
   const legendList = runtimeLegend.map((entry, idx) => {
-    const entryMax = addCommas(entry.max);
 
-    const entryMin = addCommas(entry.min);
+    const entryMax = displayDataAsText(entry.max, 'primary');
 
-    let formattedText = `${prefix + entryMin + suffix}${entryMax !== entryMin ? ` - ${prefix + entryMax + suffix}` : ''}`;
+    const entryMin = displayDataAsText(entry.min, 'primary');
+
+    let formattedText = `${entryMin}${entryMax !== entryMin ? ` - ${entryMax}` : ''}`;
 
     // If interval, add some formatting
     if (legend.type === 'equalinterval' && idx !== runtimeLegend.length - 1) {
-      formattedText = `${prefix + entryMin + suffix} - < ${prefix + entryMax + suffix}`;
+      formattedText = `${entryMin} - < ${entryMax}`;
     }
 
     const { disabled } = entry;
 
     if (legend.type === 'category') {
-      formattedText = prefix + entry.value + suffix;
+      formattedText = displayDataAsText(entry.value, 'primary');
     }
 
     if (entry.max === 0 && entry.min === 0) {
@@ -76,12 +69,13 @@ const Sidebar = (props) => {
     }
 
     return (
-      <li
+      <li 
+        className={disabled ? 'disabled single-legend' : 'single-legend'}
         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>
+        onClick={() => { toggleLegendActive(idx, legendLabel); } }
+        >
+        <LegendCircle fill={entry.color} /> <span className="label">{legendLabel}</span>
       </li>
     );
   });
@@ -105,6 +99,7 @@ const Sidebar = (props) => {
         <select
           id={`filter-${idx}`}
           className="filter-select"
+          aria-label="select filter"
           value={singleFilter.active}
           onChange={(val) => {
             changeFilterActive(idx, val.target.value);