@cdc/map 4.22.11 → 4.23.1

package/src/components/EditorPanel.js

@@ -168,6 +168,16 @@ const EditorPanel = props => {
         })
         break
 
+      case 'toggleDataUrl':
+        setState({
+          ...state,
+          table: {
+            ...state.table,
+            showDownloadUrl: value
+          }
+        })
+        break
+
       case 'toggleExtraBubbleBorder':
         setState({
           ...state,
@@ -367,12 +377,21 @@ const EditorPanel = props => {
           }
         })
         break
-      case 'toggleDownloadMediaButton':
+      case 'toggleDownloadImgButton':
+        setState({
+          ...state,
+          general: {
+            ...state.general,
+            showDownloadImgButton: !state.general.showDownloadImgButton
+          }
+        })
+        break
+      case 'toggleDownloadPdfButton':
         setState({
           ...state,
           general: {
             ...state.general,
-            showDownloadMediaButton: !state.general.showDownloadMediaButton
+            showDownloadPdfButton: !state.general.showDownloadPdfButton
           }
         })
         break
@@ -2185,6 +2204,16 @@ const EditorPanel = props => {
                       />
                       <span className='edit-label'>Map loads with data table expanded</span>
                     </label>
+                    <label className='checkbox'>
+                      <input
+                        type='checkbox'
+                        checked={state.table.showDownloadUrl}
+                        onChange={event => {
+                          handleEditorChanges('toggleDataUrl', event.target.checked)
+                        }}
+                      />
+                      <span className='edit-label'>Enable Link to Dataset</span>
+                    </label>
                     <label className='checkbox'>
                       <input
                         type='checkbox'
@@ -2195,6 +2224,26 @@ const EditorPanel = props => {
                       />
                       <span className='edit-label'>Enable Download CSV Button</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.showDownloadPdfButton}
+                        onChange={event => {
+                          handleEditorChanges('toggleDownloadPdfButton', event.target.checked)
+                        }}
+                      />
+                      <span className='edit-label'>Enable Pdf Download</span>
+                    </label> */}
                   </AccordionItemPanel>
                 </AccordionItem>
               )}
@@ -2391,6 +2440,13 @@ const EditorPanel = props => {
                       )
                     })}
                   </ul>
+                  {'us-geocode' === state.general.type && (
+                    <label>
+                      Geocode Settings
+                      <TextField type='number' value={state.visual.geoCodeCircleSize} section='visual' max='10' fieldName='geoCodeCircleSize' label='Geocode Circle Size' updateField={updateField} />
+                    </label>
+                  )}
+
                   {state.general.type === 'bubble' && (
                     <>
                       <TextField type='number' value={state.visual.minBubbleSize} section='visual' fieldName='minBubbleSize' label='Minimum Bubble Size' updateField={updateField} />
@@ -2433,20 +2489,21 @@ 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>
-                  )}
+                  {state.general.geoType === 'us' ||
+                    (state.general.geoType === 'us-county' && (
+                      <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/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/Sidebar.js

@@ -138,12 +138,6 @@ const Sidebar = props => {
             {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>
   )

package/src/components/UsaMap.js

@@ -15,7 +15,7 @@ import { supportedCities, supportedStates } from '../data/supported-geos'
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
 const { features: unitedStatesHex } = feature(hexTopoJSON, hexTopoJSON.objects.states)
 
-const Hexagon = ({ label, text, stroke, strokeWidth, ...props }) => {
+const Hexagon = ({ label, text, stroke, strokeWidth, textColor, ...props }) => {
   return (
     <svg viewBox='0 0 45 51'>
       <g {...props}>
@@ -28,7 +28,7 @@ const Hexagon = ({ label, text, stroke, strokeWidth, ...props }) => {
   )
 }
 
-const Rect = ({ label, text, stroke, strokeWidth, ...props }) => {
+const Rect = ({ label, text, stroke, strokeWidth, textColor, ...props }) => {
   return (
     <svg viewBox='0 0 45 28'>
       <g {...props} strokeLinejoin='round'>
@@ -37,7 +37,7 @@ const Rect = ({ label, text, stroke, strokeWidth, ...props }) => {
           strokeWidth={strokeWidth}
           d='M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
         />
-        <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text}>
+        <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} stroke={textColor}>
           {label}
         </text>
       </g>
@@ -168,7 +168,7 @@ const UsaMap = props => {
         }
       }
 
-      return <Shape key={label} label={label} css={styles} text={styles.color} data-tip={toolTip} data-for='tooltip' strokeWidth={1.5} onClick={() => geoClickHandler(territory, territoryData)} />
+      return <Shape key={label} label={label} css={styles} text={styles.color} data-tip={toolTip} data-for='tooltip' strokeWidth={1.5} textColor={textColor} onClick={() => geoClickHandler(territory, territoryData)} />
     }
   })
 

package/src/context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const ConfigContext = createContext({})
+
+export default ConfigContext

package/src/data/initial-state.js

@@ -15,22 +15,22 @@ export default {
     expandDataTable: true,
     fullBorder: false,
     type: 'data',
-    palette:{
-      isReversed:false
+    palette: {
+      isReversed: false
     },
     allowMapZoom: true,
     hideGeoColumnInTooltip: false,
     hidePrimaryColumnInTooltip: false
   },
-  
-  type: "map",
+
+  type: 'map',
   color: 'pinkpurple',
   columns: {
     geo: {
       name: 'FIPS Codes',
       label: 'Location',
-			tooltip: false,
-      dataTable: true,
+      tooltip: false,
+      dataTable: true
     },
     primary: {
       dataTable: true,
@@ -43,8 +43,8 @@ export default {
     navigate: {
       name: ''
     },
-    latitude: { name: "" },
-    longitude: { name: "" }
+    latitude: { name: '' },
+    longitude: { name: '' }
   },
   legend: {
     descriptions: {},
@@ -53,15 +53,18 @@ export default {
     singleColumn: false,
     singleRow: false,
     dynamicDescription: false,
-    type: "equalnumber",
+    type: 'equalnumber',
     numberOfItems: 3,
-    position: "side",
-    title: "Legend",
+    position: 'side',
+    title: 'Legend'
   },
   filters: [],
   dataTable: {
     title: 'Data Table'
   },
+  table: {
+    showDownloadUrl: false
+  },
   tooltips: {
     appearanceType: 'hover',
     linkLabel: 'Learn More',
@@ -74,8 +77,9 @@ export default {
     minBubbleSize: 1,
     maxBubbleSize: 20,
     extraBubbleBorder: false,
-    cityStyle: 'circle'
+    cityStyle: 'circle',
+    geoCodeCircleSize: 2,
+    showBubbleZeros: false
   },
-  mapPosition: 
-    { coordinates: [0, 30], zoom: 1 }
-};
+  mapPosition: { coordinates: [0, 30], zoom: 1 }
+}