@cdc/map 4.23.7 → 4.23.9

package/src/components/WorldMap.jsx

@@ -16,21 +16,7 @@ const { features: world } = feature(topoJSON, topoJSON.objects.countries)
 let projection = geoMercator()
 
 const WorldMap = props => {
-  const {
-    state,
-    applyTooltipsToGeo,
-    data,
-    geoClickHandler,
-    applyLegendToRow,
-    displayGeoName,
-    supportedCountries,
-    setState, setRuntimeData,
-    generateRuntimeData,
-    setFilteredCountryCode,
-    position, setPosition,
-    hasZoom,
-    handleMapAriaLabels,
-    titleCase } = props
+  const { state, applyTooltipsToGeo, data, geoClickHandler, applyLegendToRow, displayGeoName, supportedCountries, setState, setRuntimeData, generateRuntimeData, setFilteredCountryCode, position, setPosition, hasZoom, handleMapAriaLabels, titleCase } = props
 
   // TODO Refactor - state should be set together here to avoid rerenders
   // Resets to original data & zooms out
@@ -54,31 +40,34 @@ const WorldMap = props => {
     setPosition(pos => ({ ...pos, zoom: pos.zoom / 1.5 }))
   }
 
-  const ZoomControls = ({ position, setPosition, state, setState, setRuntimeData, generateRuntimeData }) => (
-    <div className='zoom-controls' data-html2canvas-ignore>
-      <button onClick={() => handleZoomIn(position, setPosition)} aria-label='Zoom In'>
-        <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
-          <line x1='12' y1='5' x2='12' y2='19' />
-          <line x1='5' y1='12' x2='19' y2='12' />
-        </svg>
-      </button>
-      <button onClick={() => handleZoomOut(position, setPosition)} aria-label='Zoom Out'>
-        <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
-          <line x1='5' y1='12' x2='19' y2='12' />
-        </svg>
-      </button>
-      {state.general.type === 'bubble' && (
-        <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom and Map Filters'>
-          Reset Filters
+  const ZoomControls = ({ position, setPosition, state, setState, setRuntimeData, generateRuntimeData }) => {
+    if (!state.general.allowMapZoom) return
+    return (
+      <div className='zoom-controls' data-html2canvas-ignore>
+        <button onClick={() => handleZoomIn(position, setPosition)} aria-label='Zoom In'>
+          <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
+            <line x1='12' y1='5' x2='12' y2='19' />
+            <line x1='5' y1='12' x2='19' y2='12' />
+          </svg>
         </button>
-      )}
-      {state.general.type === 'world-geocode' && (
-        <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom'>
-          Reset Zoom
+        <button onClick={() => handleZoomOut(position, setPosition)} aria-label='Zoom Out'>
+          <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
+            <line x1='5' y1='12' x2='19' y2='12' />
+          </svg>
         </button>
-      )}
-    </div>
-  )
+        {state.general.type === 'bubble' && (
+          <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom and Map Filters'>
+            Reset Filters
+          </button>
+        )}
+        {state.general.type === 'world-geocode' && (
+          <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom'>
+            Reset Zoom
+          </button>
+        )}
+      </div>
+    )
+  }
 
   // TODO Refactor - state should be set together here to avoid rerenders
   const handleCircleClick = (country, state, setState, setRuntimeData, generateRuntimeData) => {
@@ -95,7 +84,7 @@ const WorldMap = props => {
     const geosJsx = geographies.map(({ feature: geo, path }, i) => {
       const geoKey = geo.properties.iso
 
-      if (!geoKey) return null;
+      if (!geoKey) return null
 
       const geoData = data[geoKey]
 
@@ -138,16 +127,7 @@ const WorldMap = props => {
           styles.cursor = 'pointer'
         }
 
-        return <Geo
-          key={i + '-geo'}
-          css={styles}
-          path={path}
-          stroke={geoStrokeColor}
-          strokeWidth={strokeWidth}
-          onClick={() => geoClickHandler(geoDisplayName, geoData)}
-          data-tooltip-id="tooltip"
-          data-tooltip-html={toolTip}
-        />
+        return <Geo key={i + '-geo'} css={styles} path={path} stroke={geoStrokeColor} strokeWidth={strokeWidth} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id='tooltip' data-tooltip-html={toolTip} />
       }
 
       // Default return state, just geo with no additional information
@@ -156,18 +136,7 @@ const WorldMap = props => {
 
     // Cities
     geosJsx.push(
-      <CityList
-        applyLegendToRow={applyLegendToRow}
-        applyTooltipsToGeo={applyTooltipsToGeo}
-        data={data}
-        displayGeoName={displayGeoName}
-        geoClickHandler={geoClickHandler}
-        isGeoCodeMap={state.general.type === 'world-geocode'}
-        key='cities'
-        projection={projection}
-        state={state}
-        titleCase={titleCase}
-      />
+      <CityList applyLegendToRow={applyLegendToRow} applyTooltipsToGeo={applyTooltipsToGeo} data={data} displayGeoName={displayGeoName} geoClickHandler={geoClickHandler} isGeoCodeMap={state.general.type === 'world-geocode'} key='cities' projection={projection} state={state} titleCase={titleCase} />
     )
 
     // Bubbles
@@ -206,7 +175,9 @@ const WorldMap = props => {
           </ZoomableGroup>
         </svg>
       )}
-      {(state.general.type === 'data' || (state.general.type === 'world-geocode' && hasZoom) || (state.general.type === 'bubble' && hasZoom)) && <ZoomControls position={position} setPosition={setPosition} setRuntimeData={setRuntimeData} state={state} setState={setState} generateRuntimeData={generateRuntimeData} />}
+      {(state.general.type === 'data' || (state.general.type === 'world-geocode' && hasZoom) || (state.general.type === 'bubble' && hasZoom)) && (
+        <ZoomControls position={position} setPosition={setPosition} setRuntimeData={setRuntimeData} state={state} setState={setState} generateRuntimeData={generateRuntimeData} />
+      )}
     </ErrorBoundary>
   )
 }

package/src/data/initial-state.js

@@ -17,12 +17,17 @@ export default {
     hasRegions: false,
     fullBorder: false,
     type: 'data',
+    convertFipsCodes: true,
     palette: {
       isReversed: false
     },
     allowMapZoom: true,
     hideGeoColumnInTooltip: false,
-    hidePrimaryColumnInTooltip: false
+    hidePrimaryColumnInTooltip: false,
+    statePicked: {
+      fipsCode: '01',
+      stateName: 'Alabama'
+    }
   },
   type: 'map',
   color: 'pinkpurple',
@@ -53,6 +58,7 @@ export default {
     unified: false,
     singleColumn: false,
     singleRow: false,
+    verticalSorted: false,
     showSpecialClassesLast: false,
     dynamicDescription: false,
     type: 'equalnumber',

package/src/data/supported-geos.js

@@ -172,6 +172,9 @@ export const stateFipsToTwoDigit = {
   54: 'WV',
   55: 'WI',
   56: 'WY',
+  60: 'AS',
+  66: 'GU',
+  69: 'MP',
   72: 'PR',
   78: 'VI'
 }

package/src/scss/map.scss

@@ -63,6 +63,9 @@ header + .map-container.full-border {
   }
 }
 
+$small: 500px;
+$medium: 768px;
+
 .geography-container {
   position: relative;
   flex-grow: 1;
@@ -78,15 +81,30 @@ header + .map-container.full-border {
       transition: 0.2s all;
     }
   }
-  .map-logo {
-    position: absolute;
-    bottom: 2em;
-    right: 1em;
-    z-index: 3;
-    width: 75px;
+  // make logo smaller on mobile
+  @media screen and (max-width: $small) {
+      .map-logo {
+        position: absolute;
+        bottom: 4em; // needed to align to top of Territories
+        right: 1em;
+        z-index: 3;
+        width: 50px;  // make it smaller
+      }
+  }
+  // everything else but mobile
+  @media screen and (min-width: $small) {
+    .map-logo {
+      position: absolute;
+      bottom: 2em;
+      right: 1em;
+      z-index: 3;
+      width: 75px;
+    }
   }
+
 }
 
+
 .single-geo {
   transition: 0.2s fill;
   cursor: pointer;
@@ -95,11 +113,28 @@ header + .map-container.full-border {
   }
 }
 
+// for Territories label in one col and Territory blocks wrapping in 2nd column
+.two-col {
+  display: flex;
+  margin-top: 0;
+  justify-content: flex-start;
+  > label {
+    margin-top: 0;
+    display: inline-block;
+  }
+}
+.territories-label {
+  margin: 2em 5px 2em 1em;
+  font-size: 1.1em;
+  display:block;
+}
+
 // Cities and Territories
 .territories {
-  margin: 2em 100px 2em 0;
+  margin: 2em 200px 2em 0;
   font-size: 1.1em;
-  display: flex;
+  width: 100%;
+  display: block;
   align-items: center;
   > span {
     margin-left: 1em;
@@ -114,6 +149,11 @@ header + .map-container.full-border {
       font-size: 0.95em;
     }
   }
+
+    &--mobile {
+    @extend .territories;
+    width: 70%;
+  }
 }
 
 .zoom-controls {

package/src/scss/sidebar.scss

@@ -15,7 +15,7 @@ aside {
   border-top: $lightGray 1px solid;
   @include breakpointClass(md) {
     &.bottom {
-      border: #c2c2c2 1px solid;
+      border: $lightGray 1px solid;
     }
     &.side {
       z-index: 1;
@@ -30,68 +30,130 @@ aside {
       width: 50%;
       top: 2em;
       right: 1em;
+
+      ul.vertical-sorted {
+        column-count: 2;
+        column-fill: balance;
+      }
+
+      ul:not(.vertical-sorted) {
+        column-count: initial;
+        column-fill: initial;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+      }
+    }
+
+    &.bottom {
+      ul.legend-container__ul.vertical-sorted {
+        display: block;
+        column-count: 2;
+        column-fill: balance;
+      }
+
+      ul.legend-container__ul {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        li {
+          width: 50%;
+        }
+      }
+
+      ul.single-row {
+        display: block;
+        column-count: initial;
+        column-fill: auto;
+      }
     }
   }
 
-  .legend-section {
+  .legend-container {
     padding: 1em;
     position: relative;
-    .heading-2 {
+    .legend-container__title {
       font-size: 1.3em;
       padding-bottom: 0;
       display: inline-block;
     }
-    .heading-2 + p, .heading-2 + ul, p + ul, p + p {
+    .legend-container__title + p,
+    .legend-container__title + ul,
+    p + ul,
+    p + p {
       padding-top: 1em;
     }
-    .clear {
-      font-size: .75em;
+    .legend-container__reset-button {
+      font-size: 0.75em;
       color: rgba(0, 0, 0, 0.6);
       position: absolute;
       right: 1em;
       background: rgba(0, 0, 0, 0.1);
       text-transform: uppercase;
-      transition: .2s all;
-      padding: .2em .5em;
-      border: rgba(0,0,0,.2) 1px solid;
+      transition: 0.2s all;
+      padding: 0.2em 0.5em;
+      border: rgba(0, 0, 0, 0.2) 1px solid;
       &:hover {
         text-decoration: none;
-        background: rgba(0,0,0,.15);
-        transition: .2s all;
+        background: rgba(0, 0, 0, 0.15);
+        transition: 0.2s all;
       }
     }
     p {
       line-height: 1.4em;
     }
-    ul {
+    .legend-container__ul {
       list-style: none;
-      padding: 0;
-      display: flex;
-      flex-wrap: wrap;
-      button { font-size: unset; background: transparent; }
-      li {
+      padding-top: 1em;
+      button {
+        font-size: unset;
+        background: transparent;
+      }
+
+      &.vertical-sorted {
+        flex-direction: column;
+      }
+
+      &:not(.vertical-sorted, .legend-container__ul--single-column) {
+        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;
         vertical-align: middle;
-        transition: .1s opacity;
+        transition: 0.1s opacity;
         display: flex;
-        // align-items: center;
-        &.single-legend {
-          cursor: pointer;
-        }
-        .color {
-          flex-shrink: 0;
-        }
-        &.disabled {
-          opacity: .4;
+        cursor: pointer;
+        flex-grow: 1;
+
+        &.legend-container__li--disabled {
+          opacity: 0.4;
         }
       }
     }
   }
 
-  &.side.single-column {
+  .bottom .legend-container__ul--single-column:not(.vertical-sorted) {
+    display: inline-block;
+
+    @include breakpoint(md) {
+      display: flex;
+    }
+
+    .legend-container__li {
+      width: 100%;
+    }
+  }
+
+  &.side .legend-container .legend-container__ul--single-column {
     @include breakpointClass(md) {
       width: 25%;
       min-width: 200px;
@@ -99,7 +161,7 @@ aside {
         flex-direction: column;
         li {
           width: 100%;
-          &:nth-last-of-type(-n+2) {
+          &:nth-last-of-type(-n + 2) {
             padding-bottom: 1em;
           }
           &:last-child {
@@ -108,40 +170,40 @@ aside {
         }
       }
     }
+    li {
+      width: 100%;
+    }
   }
-  
+
   &.bottom.single-row {
-      width: 100%;
-      .legend-section ul {
-        flex-direction: row;
-        align-items: baseline;
-        justify-content:flex-start;
-        flex-wrap: wrap;
-        li {
-          justify-items: center;
-          line-break:loose;
-          align-items: center;
-          width: auto;
-          padding-right: 1em;
-          padding-bottom: 1em;
-          display: inline-block;
-          & > span {
-            margin: 0 !important;
-          }
+    width: 100%;
+    .legend-container ul {
+      flex-direction: row;
+      align-items: baseline;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      li {
+        justify-items: center;
+        line-break: loose;
+        align-items: center;
+        width: auto;
+        padding-right: 1em;
+        padding-bottom: 1em;
+        display: inline-block;
+        & > span {
+          margin: 0 !important;
         }
       }
-  };
+    }
+  }
 
   @include breakpointClass(sm) {
-    .legend-section ul {
+    .legend-container ul {
       align-items: flex-start;
       justify-content: space-between;
       li {
-        width: 48%;
-        padding-right: .5em;
-        &:nth-last-of-type(-n+2) {
-          padding-bottom: 0
-        }
+        flex-grow: 1;
+        padding-right: 0.5em;
       }
     }
   }
@@ -150,15 +212,15 @@ aside {
     padding: 0 1em 1em;
     .heading-3 {
       font-weight: bold;
-      margin-bottom: .5em;
+      margin-bottom: 0.5em;
     }
     form {
-      margin-top: .5em;
+      margin-top: 0.5em;
       line-height: 2em;
       display: flex;
       align-items: flex-end;
       section + section {
-        margin-left: .75em;
+        margin-left: 0.75em;
       }
       select {
         display: block;