@cdc/map 4.24.9 → 4.24.11

package/src/components/DataTable.tsx

@@ -13,7 +13,25 @@ import Loading from '@cdc/core/components/Loading'
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = props => {
-  const { state, tableTitle, indexTitle, mapTitle, rawData, runtimeData, headerColor, expandDataTable, columns, displayDataAsText, applyLegendToRow, displayGeoName, navigationHandler, viewport, formatLegendLocation, tabbingId, setFilteredCountryCode } = props
+  const {
+    state,
+    tableTitle,
+    indexTitle,
+    mapTitle,
+    rawData,
+    runtimeData,
+    headerColor,
+    expandDataTable,
+    columns,
+    displayDataAsText,
+    applyLegendToRow,
+    displayGeoName,
+    navigationHandler,
+    viewport,
+    formatLegendLocation,
+    tabbingId,
+    setFilteredCountryCode
+  } = props
 
   const [expanded, setExpanded] = useState(expandDataTable)
   const [sortBy, setSortBy] = useState({ column: 'geo', asc: false })
@@ -140,7 +158,9 @@ const DataTable = props => {
       csvData = Papa.unparse(rawData.map(row => ({ FullGeoName: displayGeoName(row[state.columns.geo.name]), ...row })))
     } else {
       // Unparse + Add column for full Geo name
-      csvData = Papa.unparse(rawData.map(row => ({ FullGeoName: formatLegendLocation(row[state.columns.geo.name]), ...row })))
+      csvData = Papa.unparse(
+        rawData.map(row => ({ FullGeoName: formatLegendLocation(row[state.columns.geo.name]), ...row }))
+      )
     }
 
     const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
@@ -154,16 +174,36 @@ const DataTable = props => {
     }
 
     return (
-      <a download={fileName} type='button' onClick={saveBlob} href={URL.createObjectURL(blob)} aria-label='Download this data in a CSV file format.' className={`${headerColor} no-border`} id={`${skipId}`} data-html2canvas-ignore role='button'>
+      <a
+        download={fileName}
+        type='button'
+        onClick={saveBlob}
+        href={URL.createObjectURL(blob)}
+        aria-label='Download this data in a CSV file format.'
+        className={`${headerColor} no-border`}
+        id={`${skipId}`}
+        data-html2canvas-ignore
+        role='button'
+      >
         Download Data (CSV)
       </a>
     )
   }, [rawData, state.table])
 
+  const TableMediaControls = ({ belowTable }) => {
+    return (
+      <MediaControls.Section classes={['download-links'] + (belowTable ? 'below-table' : '')}>
+        <MediaControls.Link config={state} />
+        {state.general.showDownloadButton && <DownloadButton />}
+      </MediaControls.Section>
+    )
+  }
+
   // Change accessibility label depending on expanded status
   useEffect(() => {
     const expandedLabel = 'Accessible data table.'
-    const collapsedLabel = 'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
+    const collapsedLabel =
+      'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
 
     if (expanded === true && accessibilityLabel !== expandedLabel) {
       setAccessibilityLabel(expandedLabel)
@@ -180,7 +220,10 @@ const DataTable = props => {
   const rows = Object.keys(runtimeData)
     .filter(row => applyLegendToRow(runtimeData[row]))
     .sort((a, b) => {
-      const sortVal = customSort(runtimeData[a][state.columns[sortBy.column].name], runtimeData[b][state.columns[sortBy.column].name])
+      const sortVal = customSort(
+        runtimeData[a][state.columns[sortBy.column].name],
+        runtimeData[b][state.columns[sortBy.column].name]
+      )
       if (!sortBy.asc) return sortVal
       if (sortVal === 0) return 0
       if (sortVal < 0) return 1
@@ -189,11 +232,12 @@ const DataTable = props => {
 
   return (
     <ErrorBoundary component='DataTable'>
-      <MediaControls.Section classes={['download-links']}>
-        <MediaControls.Link config={state} />
-        {state.general.showDownloadButton && <DownloadButton />}
-      </MediaControls.Section>
-      <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
+      {!state.table.showDownloadLinkBelow && <TableMediaControls />}
+      <section
+        id={tabbingId.replace('#', '')}
+        className={`data-table-container ${viewport}`}
+        aria-label={accessibilityLabel}
+      >
         <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
         <div
           className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
@@ -210,9 +254,23 @@ const DataTable = props => {
           <Icon display={expanded ? 'minus' : 'plus'} base />
           {tableTitle}
         </div>
-        <div className='table-container' style={{ maxHeight: state.dataTable.limitHeight && `${state.dataTable.height}px`, overflowY: 'scroll' }}>
-          <table height={expanded ? null : 0} role='table' aria-live='assertive' className={expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'} hidden={!expanded} aria-rowcount={state?.data.length ? state.data.length : '-1'}>
-            <caption className='cdcdataviz-sr-only'>{state.dataTable.caption ? state.dataTable.caption : `Datatable showing data for the ${mapLookup[state.general.geoType]} figure.`}</caption>
+        <div
+          className='table-container'
+          style={{ maxHeight: state.dataTable.limitHeight && `${state.dataTable.height}px`, overflowY: 'scroll' }}
+        >
+          <table
+            height={expanded ? null : 0}
+            role='table'
+            aria-live='assertive'
+            className={expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}
+            hidden={!expanded}
+            aria-rowcount={state?.data.length ? state.data.length : '-1'}
+          >
+            <caption className='cdcdataviz-sr-only'>
+              {state.dataTable.caption
+                ? state.dataTable.caption
+                : `Datatable showing data for the ${mapLookup[state.general.geoType]} figure.`}
+            </caption>
             <thead style={{ position: 'sticky', top: 0, zIndex: 999 }}>
               <tr>
                 {Object.keys(columns)
@@ -240,11 +298,19 @@ const DataTable = props => {
                             setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
                           }
                         }}
-                        className={sortBy.column === column ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'}
-                        {...(sortBy.column === column ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
+                        className={
+                          sortBy.column === column ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'
+                        }
+                        {...(sortBy.column === column
+                          ? sortBy.asc
+                            ? { 'aria-sort': 'ascending' }
+                            : { 'aria-sort': 'descending' }
+                          : null)}
                       >
                         {text}
-                        <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} order`}</span>
+                        <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${
+                          sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
+                        } order`}</span>
                       </th>
                     )
                   })}
@@ -283,7 +349,17 @@ const DataTable = props => {
                         }
 
                         return (
-                          <td tabIndex='0' role='gridcell' onClick={e => (state.general.type === 'bubble' && state.general.allowMapZoom && state.general.geoType === 'world' ? setFilteredCountryCode(row) : true)}>
+                          <td
+                            tabIndex='0'
+                            role='gridcell'
+                            onClick={e =>
+                              state.general.type === 'bubble' &&
+                              state.general.allowMapZoom &&
+                              state.general.geoType === 'world'
+                                ? setFilteredCountryCode(row)
+                                : true
+                            }
+                          >
                             {cellValue}
                           </td>
                         )
@@ -295,6 +371,7 @@ const DataTable = props => {
           </table>
         </div>
       </section>
+      {state.table.showDownloadLinkBelow && <TableMediaControls belowTable={true} />}
       <div id={skipId} className='cdcdataviz-sr-only'>
         Skipped data table.
       </div>

package/src/components/EditorPanel/components/EditorPanel.tsx

@@ -109,12 +109,18 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   } = useMapLayers(state, setState, false, tooltipId)
 
   const categoryMove = (idx1, idx2) => {
-    let categoryValuesOrder = [...state.legend.categoryValuesOrder]
+    let categoryValuesOrder = getCategoryValuesOrder()
 
     let [movedItem] = categoryValuesOrder.splice(idx1, 1)
 
     categoryValuesOrder.splice(idx2, 0, movedItem)
 
+    state.legend.categoryValuesOrder?.forEach(value => {
+      if(categoryValuesOrder.indexOf(value) === -1){
+        categoryValuesOrder.push(value)
+      }
+    })
+
     setState({
       ...state,
       legend: {
@@ -541,6 +547,15 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
           }
         })
         break
+      case 'toggleDownloadLinkBelow':
+        setState({
+          ...state,
+          table: {
+            ...state.table,
+            showDownloadLinkBelow: !state.table.showDownloadLinkBelow
+          }
+        })
+        break
       case 'toggleDownloadPdfButton':
         setState({
           ...state,
@@ -1153,12 +1168,20 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   function filterColorPalettes() {
     let sequential = []
     let nonSequential = []
+    let accessibleColors = []
     for (let paletteName in colorPalettes) {
       if (!isReversed) {
         if (paletteName.includes('qualitative') && !paletteName.endsWith('reverse')) {
           nonSequential.push(paletteName)
         }
-        if (!paletteName.includes('qualitative') && !paletteName.endsWith('reverse')) {
+        if (paletteName.includes('colorblindsafe') && !paletteName.endsWith('reverse')) {
+          accessibleColors.push(paletteName)
+        }
+        if (
+          !paletteName.includes('qualitative') &&
+          !paletteName.includes('colorblindsafe') &&
+          !paletteName.endsWith('reverse')
+        ) {
           sequential.push(paletteName)
         }
       }
@@ -1166,15 +1189,22 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
         if (paletteName.includes('qualitative') && paletteName.endsWith('reverse')) {
           nonSequential.push(paletteName)
         }
-        if (!paletteName.includes('qualitative') && paletteName.endsWith('reverse')) {
+        if (paletteName.includes('colorblindsafe') && paletteName.endsWith('reverse')) {
+          accessibleColors.push(paletteName)
+        }
+        if (
+          !paletteName.includes('qualitative') &&
+          !paletteName.includes('colorblindsafe') &&
+          paletteName.endsWith('reverse')
+        ) {
           sequential.push(paletteName)
         }
       }
     }
 
-    return [sequential, nonSequential]
+    return [sequential, nonSequential, accessibleColors]
   }
-  const [sequential, nonSequential] = filterColorPalettes()
+  const [sequential, nonSequential, accessibleColors] = filterColorPalettes()
 
   useEffect(() => {
     let paletteName = ''
@@ -1195,40 +1225,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     columnsRequiredChecker()
   }, [state]) // eslint-disable-line
 
-  useEffect(() => {
-    //If a categorical map is used and the order is either not defined or incorrect, fix it
-    if ('category' === state.legend.type && runtimeLegend && runtimeLegend.runtimeDataHash) {
-      let valid = true
-      if (state.legend.categoryValuesOrder) {
-        runtimeLegend.forEach(item => {
-          if (!item.special && state.legend.categoryValuesOrder.indexOf(item.value) === -1) {
-            valid = false
-          }
-        })
-        let runtimeLegendKeys = runtimeLegend.map(item => item.value)
-        state.legend.categoryValuesOrder.forEach(category => {
-          if (runtimeLegendKeys.indexOf(category) === -1) {
-            valid = false
-          }
-        })
-      } else {
-        valid = false
-      }
-
-      if (!valid) {
-        let arr = runtimeLegend.filter(item => !item.special).map(({ value }) => value)
-
-        setState({
-          ...state,
-          legend: {
-            ...state.legend,
-            categoryValuesOrder: arr
-          }
-        })
-      }
-    }
-  }, [runtimeLegend]) // eslint-disable-line
-
   const columnsOptions = [
     <option value='' key={'Select Option'}>
       - Select Option -
@@ -1506,9 +1502,26 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     ...draggableStyle
   })
 
+  const getCategoryValuesOrder = () => {
+    let values = runtimeLegend ? runtimeLegend.filter(item => !item.special).map(runtimeLegendItem => runtimeLegendItem.value) : []
+
+    if(state.legend.cateogryValuesOrder){
+      return values.sort((a, b) => {
+        let aVal = state.legend.cateogryValuesOrder.indexOf(a)
+        let bVal = state.legend.cateogryValuesOrder.indexOf(b)
+        if (aVal === bVal) return 0
+        if (aVal === -1) return 1
+        if (bVal === -1) return -1
+        return aVal - bVal
+      })
+    } else {
+      return values
+    }
+    
+  }
+
   const CategoryList = () => {
-    return state.legend.categoryValuesOrder ? (
-      state.legend.categoryValuesOrder.map((value, index) => (
+    return getCategoryValuesOrder().filter(item => !item.special).map((value, index) => (
         <Draggable key={value} draggableId={`item-${value}`} index={index}>
           {(provided, snapshot) => (
             <li style={{ position: 'relative' }}>
@@ -1524,10 +1537,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
             </li>
           )}
         </Draggable>
-      ))
-    ) : (
-      <></>
-    )
+    ))
   }
 
   const isLoadedFromUrl = state?.dataKey?.includes('http://') || state?.dataKey?.includes('https://')
@@ -2242,7 +2252,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </div>
                   ))}
                   <button
-                    className='btn full-width'
+                    className='btn btn-primary full-width'
                     onClick={e => {
                       e.preventDefault()
                       editColumn('primary', 'specialClassAdd', {})
@@ -2393,7 +2403,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </fieldset>
                   ))}
                   <button
-                    className={'btn full-width'}
+                    className={'btn btn-primary full-width'}
                     onClick={event => {
                       event.preventDefault()
                       addAdditionalColumn(additionalColumns.length + 1)
@@ -2449,7 +2459,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </fieldset>
                     ))}
                   <button
-                    className={'btn full-width'}
+                    className={'btn btn-primary full-width'}
                     onClick={event => {
                       event.preventDefault()
                       const updatedAdditionaCategories = [...(state.legend.additionalCategories || [])]
@@ -2760,7 +2770,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                         )}
                       </Droppable>
                     </DragDropContext>
-                    {state.legend.categoryValuesOrder && state.legend.categoryValuesOrder.length >= 10 && (
+                    {runtimeLegend && runtimeLegend.length >= 10 && (
                       <section className='error-box my-2'>
                         <div>
                           <strong className='pt-1'>Warning</strong>
@@ -2887,7 +2897,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   <p style={{ textAlign: 'center' }}>There are currently no filters.</p>
                 )}
                 <button
-                  className={'btn full-width'}
+                  className={'btn btn-primary full-width'}
                   onClick={event => {
                     event.preventDefault()
                     changeFilter(null, 'addNew')
@@ -3084,6 +3094,16 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   />
                   <span className='edit-label'>Enable Image Download</span>
                 </label>
+                <label className='checkbox'>
+                  <input
+                    type='checkbox'
+                    checked={state.table.showDownloadLinkBelow}
+                    onChange={event => {
+                      handleEditorChanges('toggleDownloadLinkBelow', event.target.checked)
+                    }}
+                  />
+                  <span className='edit-label'>Show Download Link Below Table</span>
+                </label>
                 {/* <label className='checkbox'>
                       <input
                         type='checkbox'
@@ -3286,6 +3306,41 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   )
                 })}
               </ul>
+              <span>Colorblind Safe</span>
+              <ul className='color-palette'>
+                {accessibleColors.map(palette => {
+                  const colorOne = {
+                    backgroundColor: colorPalettes[palette][2]
+                  }
+
+                  const colorTwo = {
+                    backgroundColor: colorPalettes[palette][4]
+                  }
+
+                  const colorThree = {
+                    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}
+                      key={palette}
+                      onClick={() => {
+                        handleEditorChanges('color', palette)
+                      }}
+                      className={state.color === palette ? 'selected' : ''}
+                    >
+                      <span style={colorOne}></span>
+                      <span style={colorTwo}></span>
+                      <span style={colorThree}></span>
+                    </li>
+                  )
+                })}
+              </ul>
               <label>
                 Geocode Settings
                 <TextField
@@ -3370,14 +3425,10 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     >
                       <option value='circle'>Circle</option>
                       <option value='pin'>Pin</option>
-                      {'us-geocode' !== state.general.type && (
-                        <>
-                          <option value='square'>Square</option>
-                          <option value='triangle'>Triangle</option>
-                          <option value='diamond'>Diamond</option>
-                          <option value='star'>Star</option>
-                        </>
-                      )}
+                      <option value='square'>Square</option>
+                      <option value='triangle'>Triangle</option>
+                      <option value='diamond'>Diamond</option>
+                      <option value='star'>Star</option>
                     </select>
                   </label>
                   <TextField
@@ -3461,11 +3512,14 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </div>
                     )
                   })}
-                {'us-geocode' !== state.general.type && (
-                  <button type='button' onClick={() => editCityStyles('add', 0, '', '')} className='btn full-width'>
-                    Add city style
-                  </button>
-                )}
+
+                <button
+                  type='button'
+                  onClick={() => editCityStyles('add', 0, '', '')}
+                  className='btn btn-primary full-width'
+                >
+                  Add city style
+                </button>
               </>
               <label htmlFor='opacity'>
                 <TextField
@@ -3565,7 +3619,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   </>
                 )
               })}
-              <button className={'btn full-width'} onClick={handleAddLayer}>
+              <button className={'btn btn-primary full-width'} onClick={handleAddLayer}>
                 Add Map Layer
               </button>
               <p className='layer-purpose-details'>

package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx

@@ -11,7 +11,12 @@ import ConfigContext from '../../../../context'
 // styles
 
 const PanelAnnotate: React.FC = props => {
-  const { state: config, setState: updateConfig, dimensions, isDraggingAnnotation } = useContext<MapContext>(ConfigContext)
+  const {
+    state: config,
+    setState: updateConfig,
+    dimensions,
+    isDraggingAnnotation
+  } = useContext<MapContext>(ConfigContext)
   const getColumns = (filter = true) => {
     const columns = {}
     config.data.forEach(row => {
@@ -20,7 +25,10 @@ const PanelAnnotate: React.FC = props => {
 
     if (filter) {
       Object.keys(columns).forEach(key => {
-        if ((config.series && config.series.filter(series => series.dataKey === key).length > 0) || (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))) {
+        if (
+          (config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
+          (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))
+        ) {
           delete columns[key]
         }
       })
@@ -41,7 +49,9 @@ const PanelAnnotate: React.FC = props => {
   }
 
   const handleAddAnnotation = () => {
-    const svgContainer = document.querySelector('.map-container > section > svg, .map-container > section > canvas')?.getBoundingClientRect()
+    const svgContainer = document
+      .querySelector('.map-container > section > svg, .map-container > section > canvas')
+      ?.getBoundingClientRect()
     const newSvgDims = [svgContainer.width, svgContainer.height]
 
     const newAnnotation = {
@@ -139,11 +149,17 @@ const PanelAnnotate: React.FC = props => {
         {config?.annotations &&
           config?.annotations.map((annotation, index) => (
             <Accordion>
-              <Accordion.Section title={annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}>
+              <Accordion.Section
+                title={annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}
+              >
                 <div className='annotation-group'>
                   <label>
                     Annotation Text:
-                    <textarea rows={5} value={annotation.text} onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)} />
+                    <textarea
+                      rows={5}
+                      value={annotation.text}
+                      onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)}
+                    />
                   </label>
                   {/* <label>
                       Vertical Anchor
@@ -304,30 +320,18 @@ const PanelAnnotate: React.FC = props => {
                     </select>
                   </label>
 
-                  {/* <label>
-                    Snap to Nearest Point
-                    <input
-                      type='checkbox'
-                      checked={config?.annotations[index]?.snapToNearestPoint}
-                      onClick={e => {
-                        const updatedAnnotations = [...config?.annotations]
-                        updatedAnnotations[index].snapToNearestPoint = e.target.checked
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    />
-                  </label> */}
-
-                  <Button className='warn btn-warn btn btn-remove delete' onClick={() => handleRemoveAnnotation(index)}>
+                  <Button className='btn btn-danger' onClick={() => handleRemoveAnnotation(index)}>
                     Delete Annotation
                   </Button>
                 </div>
               </Accordion.Section>
             </Accordion>
           ))}
-        {config?.annotations?.length < 3 && <Button onClick={handleAddAnnotation}>Add Annotation</Button>}
+        {config?.annotations?.length < 3 && (
+          <button className='btn btn-primary full-width' onClick={handleAddAnnotation}>
+            Add Annotation
+          </button>
+        )}
       </Accordion.Section>
     </Accordion>
   )