npm - @cdc/map - Versions diffs - 4.23.8 → 4.23.9 - Mend

@cdc/map 4.23.8 → 4.23.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/cdcmap.js +24114 -24851
package/examples/default-usa.json +983 -967
package/index.html +6 -2
package/package.json +3 -3
package/src/CdcMap.jsx +2 -0
package/src/components/EditorPanel.jsx +53 -11
package/src/components/Sidebar.jsx +29 -20
package/src/data/initial-state.js +2 -0
package/src/scss/sidebar.scss +119 -57
package/LICENSE +0 -201

package/index.html CHANGED Viewed

@@ -17,16 +17,20 @@
   <body>
     <!-- DEFAULT EXAMPLES -->
+    <!-- <div class="react-container react-container--maps" data-config="/examples/private/wastewater.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/default-county.json"></div> -->
-    <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa.json"></div> -->
+    <div class="react-container react-container--maps" data-config="/examples/default-usa.json"></div>
     <!-- <div class="react-container react-container--maps" data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/US-County-Level-Map.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-geocode.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-usa-regions.json"></div> -->
-    <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-single-state.json"></div>
+    <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-single-state.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-world.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-us.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-world.json"></div> -->
+    <!-- TESTS DATA TABLE SORT-->
+    <div class="react-container" data-config="/examples/private/wastewater.json"></div>
     <!-- TP4 EXAMPLES -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/custom-map-layers.json"></div> -->

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/map",
-  "version": "4.23.8",
+  "version": "4.23.9",
   "description": "React component for visualizing tabular data on a map of the United States or the world.",
   "moduleName": "CdcMap",
   "main": "dist/cdcmap",
@@ -24,7 +24,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/core": "^4.23.8",
+    "@cdc/core": "^4.23.9",
     "@emotion/core": "^10.0.28",
     "@emotion/react": "^11.1.5",
     "@hello-pangea/dnd": "^16.2.0",
@@ -51,5 +51,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "ba0a072a40c430baf121ad5ece0165f52a414b86"
+  "gitHead": "1a737cd5d226963d5ad9c6efb8d59e4a1311141c"
 }

package/src/CdcMap.jsx CHANGED Viewed

@@ -1077,6 +1077,7 @@ const CdcMap = ({
   // Attempts to find the corresponding value
   const displayGeoName = key => {
+    if (!state.general.convertFipsCodes) return key
     let value = key
     // Map to first item in values array which is the preferred label
     if (stateKeys.includes(value)) {
@@ -1654,6 +1655,7 @@ const CdcMap = ({
               {general.showSidebar && 'navigation' !== general.type && (
                 <Sidebar
+                  state={state}
                   viewport={currentViewport}
                   legend={state.legend}
                   runtimeLegend={runtimeLegend}

package/src/components/EditorPanel.jsx CHANGED Viewed

@@ -622,7 +622,8 @@ const EditorPanel = props => {
           legend: {
             ...state.legend,
             singleColumn: !state.legend.singleColumn,
-            singleRow: false
+            singleRow: false,
+            verticalSorted: false
           }
         })
         break
@@ -632,6 +633,18 @@ const EditorPanel = props => {
           legend: {
             ...state.legend,
             singleRow: !state.legend.singleRow,
+            singleColumn: false,
+            verticalSorted: false
+          }
+        })
+        break
+      case 'verticalSortedLegend':
+        setState({
+          ...state,
+          legend: {
+            ...state.legend,
+            verticalSorted: !state.legend.verticalSorted,
+            singleRow: false,
             singleColumn: false
           }
         })
@@ -1734,6 +1747,25 @@ const EditorPanel = props => {
                       {columnsOptions}
                     </select>
                   </label>
+                  {state.general.type === 'us-geocode' && (
+                    <label className='checkbox'>
+                      <input
+                        type='checkbox'
+                        checked={state.general.convertFipsCodes}
+                        onChange={event => {
+                          setState({
+                            ...state,
+                            general: {
+                              ...state.general,
+                              convertFipsCodes: event.target.checked
+                            }
+                          })
+                        }}
+                      />
+                      <span className='edit-label'>Convert FIPS Codes to Geography Name</span>
+                    </label>
+                  )}
                   <label className='checkbox'>
                     <input
                       type='checkbox'
@@ -2230,6 +2262,16 @@ const EditorPanel = props => {
                       <span className='edit-label'>Single Row Legend</span>
                     </label>
                   )}
+                  <label className='checkbox'>
+                    <input
+                      type='checkbox'
+                      checked={legend.verticalSorted}
+                      onChange={event => {
+                        handleEditorChanges('verticalSortedLegend', event.target.checked)
+                      }}
+                    />
+                    <span className='edit-label'>Vertical sorted legend</span>
+                  </label>
                   {/* always show */}
                   {
                     <label className='checkbox'>
@@ -2585,16 +2627,16 @@ const EditorPanel = props => {
                     />
                     <span className='edit-label'>Include Full Geo Name in CSV Download</span>
                   </label>
-                  {/* <label className='checkbox'>
-                      <input
-                        type='checkbox'
-                        checked={state.general.showDownloadImgButton}
-                        onChange={event => {
-                          handleEditorChanges('toggleDownloadImgButton', event.target.checked)
-                        }}
-                      />
-                      <span className='edit-label'>Enable Image Download</span>
-                    </label> */}
+                  <label className='checkbox'>
+                    <input
+                      type='checkbox'
+                      checked={state.general.showDownloadImgButton}
+                      onChange={event => {
+                        handleEditorChanges('toggleDownloadImgButton', event.target.checked)
+                      }}
+                    />
+                    <span className='edit-label'>Enable Image Download</span>
+                  </label>
                   {/* <label className='checkbox'>
                       <input
                         type='checkbox'

package/src/components/Sidebar.jsx CHANGED Viewed

@@ -4,9 +4,10 @@ import parse from 'html-react-parser'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import LegendCircle from '@cdc/core/components/LegendCircle'
+import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 const Sidebar = props => {
-  const { legend, runtimeFilters, columns, setAccessibleStatus, changeFilterActive, resetLegendToggles, runtimeLegend, setRuntimeLegend, prefix, suffix, viewport, displayDataAsText } = props
+  const { legend, runtimeFilters, columns, setAccessibleStatus, changeFilterActive, resetLegendToggles, runtimeLegend, setRuntimeLegend, prefix, suffix, viewport, displayDataAsText, state } = props
   // Toggles if a legend is active and being applied to the map and data table.
   const toggleLegendActive = (i, legendLabel) => {
@@ -57,9 +58,16 @@ const Sidebar = props => {
       legendLabel = entry.label || entry.value
     }
+    const handleListItemClass = () => {
+      let classes = ['legend-container__li']
+      if (disabled) classes.push('legend-container__li--disabled')
+      if (entry.hasOwnProperty('special')) classes.push('legend-container__li--special-class')
+      return classes
+    }
     return (
       <li
-        className={disabled ? 'disabled single-legend' : 'single-legend'}
+        className={handleListItemClass().join(' ')}
         key={idx}
         title={`Legend item ${legendLabel} - Click to disable`}
         onClick={() => {
@@ -71,9 +79,13 @@ const Sidebar = props => {
     )
   })
-  const filtersList = runtimeFilters.map((singleFilter, idx) => {
-    const values = []
+  const { legendClasses } = useDataVizClasses(state, viewport)
+  console.log('legendClasses', legendClasses)
+  const handleReset = e => {
+    e.preventDefault()
+    resetLegendToggles()
+    setAccessibleStatus('Legend has been reset, please reference the data table to see updated values.')
     if (undefined === singleFilter.active) return null
     singleFilter.values.forEach((filterOption, idx) => {
@@ -101,30 +113,23 @@ const Sidebar = props => {
         </select>
       </section>
     )
-  })
+  }
-  const columnLogic = legend.position === 'side' && legend.singleColumn ? 'single-column' : legend.position === 'bottom' && legend.singleRow ? 'single-row' : ''
+  const columnLogic = legend.position === 'side' && legend.singleColumn ? 'single-column' : legend.position === 'bottom' && legend.singleRow ? 'single-row' : legend.verticalSorted && !legend.singleRow ? 'vertical-sorted' : ''
   const classNames = [`${legend.position}`, `${columnLogic}`, `cdcdataviz-sr-focusable`, `${viewport}`]
   return (
     <ErrorBoundary component='Sidebar'>
-      <aside id='legend' className={classNames.join(' ')} role='region' aria-label='Legend' tabIndex='0'>
-        <section className='legend-section' aria-label='Map Legend'>
+      <aside id='legend' className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend' tabIndex='0'>
+        <section className={legendClasses.section.join(' ') || ''} 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'
-            >
+            <button onClick={handleReset} className={legendClasses.resetButton.join(' ') || ''}>
               Clear
             </button>
           )}
-          {legend.title && <span className='heading-2'>{parse(legend.title)}</span>}
-          {legend.dynamicDescription === false && legend.description && <p>{parse(legend.description)}</p>}
+          {legend.title && <span className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</span>}
+          {legend.dynamicDescription === false && legend.description && <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>}
           {legend.dynamicDescription === true &&
             runtimeFilters.map((filter, idx) => {
               const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
@@ -133,11 +138,15 @@ const Sidebar = props => {
               const desc = legend.descriptions[lookupStr] || ''
               if (desc.length > 0) {
-                return <p key={`dynamic-description-${lookupStr}`}>{desc}</p>
+                return (
+                  <p key={`dynamic-description-${lookupStr}`} className={`dynamic-legend-description-${lookupStr}`}>
+                    {desc}
+                  </p>
+                )
               }
               return true
             })}
-          <ul className={columnLogic} aria-label='Legend items'>
+          <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
             {legendList}
           </ul>
         </section>

package/src/data/initial-state.js CHANGED Viewed

@@ -17,6 +17,7 @@ export default {
     hasRegions: false,
     fullBorder: false,
     type: 'data',
+    convertFipsCodes: true,
     palette: {
       isReversed: false
     },
@@ -57,6 +58,7 @@ export default {
     unified: false,
     singleColumn: false,
     singleRow: false,
+    verticalSorted: false,
     showSpecialClassesLast: false,
     dynamicDescription: false,
     type: 'equalnumber',

package/src/scss/sidebar.scss CHANGED Viewed

@@ -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;