@cdc/core 4.24.2 → 4.24.3

package/components/EditorPanel/ColumnsEditor.tsx

@@ -0,0 +1,311 @@
+import { AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
+import Tooltip from '../ui/Tooltip'
+import Icon from '../ui/Icon'
+import { TextField } from './Inputs'
+import { Visualization } from '../../types/Visualization'
+import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
+import { Column } from '../../types/Column'
+import _ from 'lodash'
+
+interface ColumnsEditorProps {
+  config: Visualization
+  updateField: UpdateFieldFunc<string | boolean | string[] | number | Column>
+  deleteColumn: (colName: string) => void
+}
+
+const ColumnsEditor: React.FC<ColumnsEditorProps> = ({ config, updateField, deleteColumn }) => {
+  const additionalColumns = Object.keys(config.columns).filter(value => {
+    const dataKey = config.xAxis?.dataKey
+    const defaultCols = dataKey ? [dataKey] : []
+
+    if (true === defaultCols.includes(value)) {
+      return false
+    }
+    return true
+  })
+
+  const editColumn = (addCol, columnName, setval) => {
+    updateField('columns', addCol, columnName, setval)
+  }
+
+  // just adds a new column but not set to any data yet
+  const addAdditionalColumn = number => {
+    const columnKey = `additionalColumn${number}`
+    const newColumn: Column = {
+      label: 'New Column',
+      dataTable: false,
+      tooltips: false,
+      prefix: '',
+      suffix: '',
+      forestPlot: false,
+      startingPoint: '0',
+      forestPlotAlignRight: false,
+      roundToPlace: 0,
+      commas: false,
+      showInViz: false,
+      forestPlotStartingPoint: 0
+    }
+
+    updateField('columns', null, columnKey, newColumn)
+  }
+
+  const getColumns = () => {
+    const columns: string[] = config.data.flatMap(row => {
+      return Object.keys(row).map(columnName => columnName)
+    })
+
+    const { lower, upper } = config.confidenceKeys || {}
+    return _.uniq(columns).filter(key => {
+      const keyIsPresentInSeries = config.series?.filter(series => series.dataKey === key).length > 0
+      if (keyIsPresentInSeries || (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key) && (lower || upper) && key !== lower && key !== upper)) {
+        return false
+      }
+      return true
+    })
+  }
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>Columns</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        {'navigation' !== config.type && (
+          <fieldset className='primary-fieldset edit-block'>
+            <label>
+              <span className='edit-label'>
+                Configurations
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>You can specify additional columns to display in tooltips and / or the supporting data table.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              </span>
+            </label>
+            {additionalColumns.map(val => (
+              <fieldset className='edit-block' key={val}>
+                <button
+                  className='remove-column'
+                  onClick={event => {
+                    event.preventDefault()
+                    deleteColumn(val)
+                  }}
+                >
+                  Remove
+                </button>
+                <label>
+                  <span className='edit-label column-heading'>Column</span>
+                  <select
+                    value={config.columns[val] ? config.columns[val].name : undefined}
+                    onChange={event => {
+                      editColumn(val, 'name', event.target.value)
+                    }}
+                  >
+                    {['-Select-', ...getColumns()].map(option => (
+                      <option>{option}</option>
+                    ))}
+                  </select>
+                </label>
+                {config.type !== 'table' && (
+                  <label>
+                    <span className='edit-label column-heading'>Associate to Series</span>
+                    <select
+                      value={config.columns[val] ? config.columns[val].series : ''}
+                      onChange={event => {
+                        editColumn(val, 'series', event.target.value)
+                      }}
+                    >
+                      <option value=''>Select series</option>
+                      {(config.series || []).map(series => (
+                        <option>{series.dataKey}</option>
+                      ))}
+                    </select>
+                  </label>
+                )}
+
+                <TextField value={config.columns[val].label} section='columns' subsection={val} fieldName='label' label='Label' updateField={updateField} />
+                <ul className='column-edit'>
+                  <li className='three-col'>
+                    <TextField value={config.columns[val].prefix} section='columns' subsection={val} fieldName='prefix' label='Prefix' updateField={updateField} />
+                    <TextField value={config.columns[val].suffix} section='columns' subsection={val} fieldName='suffix' label='Suffix' updateField={updateField} />
+                    <TextField type='number' value={config.columns[val].roundToPlace} section='columns' subsection={val} fieldName='roundToPlace' label='Round' updateField={updateField} />
+                  </li>
+                  <li>
+                    <label className='checkbox'>
+                      <input
+                        type='checkbox'
+                        checked={config.columns[val].commas}
+                        onChange={event => {
+                          editColumn(val, 'commas', event.target.checked)
+                        }}
+                      />
+                      <span className='edit-label'>Add Commas to Numbers</span>
+                    </label>
+                  </li>
+                  {config.type !== 'table' && (
+                    <li>
+                      {config.table.showVertical && (
+                        <label className='checkbox'>
+                          <input
+                            type='checkbox'
+                            checked={config.columns[val].dataTable}
+                            onChange={event => {
+                              editColumn(val, 'dataTable', event.target.checked)
+                            }}
+                          />
+                          <span className='edit-label'>Show in Data Table</span>
+                        </label>
+                      )}
+                    </li>
+                  )}
+                  {config.visualizationType === 'Pie' && (
+                    <li>
+                      <label className='checkbox'>
+                        <input
+                          type='checkbox'
+                          checked={config.columns[val].showInViz}
+                          onChange={event => {
+                            editColumn(val, 'showInViz', event.target.checked)
+                          }}
+                        />
+                        <span className='edit-label'>Show in Visualization</span>
+                      </label>
+                    </li>
+                  )}
+                  {config.type !== 'table' && (
+                    <li>
+                      <label className='checkbox'>
+                        <input
+                          type='checkbox'
+                          checked={config.columns[val].tooltips || false}
+                          onChange={event => {
+                            updateField('columns', val, 'tooltips', event.target.checked)
+                          }}
+                        />
+                        <span className='edit-label'>Show in tooltip</span>
+                      </label>
+                    </li>
+                  )}
+
+                  {config.visualizationType === 'Forest Plot' && (
+                    <>
+                      <li>
+                        <label className='checkbox'>
+                          <input
+                            type='checkbox'
+                            checked={config.columns[val].forestPlot || false}
+                            onChange={event => {
+                              editColumn(val, 'forestPlot', event.target.checked)
+                            }}
+                          />
+                          <span className='edit-label'>Show in Forest Plot</span>
+                        </label>
+                      </li>
+                      <li>
+                        <label className='checkbox'>
+                          <input
+                            type='checkbox'
+                            checked={config.columns[val].forestPlotAlignRight || false}
+                            onChange={event => {
+                              editColumn(val, 'forestPlotAlignRight', event.target.checked)
+                            }}
+                          />
+                          <span className='edit-label'>Align Right</span>
+                        </label>
+                      </li>
+
+                      {!config.columns[val].forestPlotAlignRight && (
+                        <li>
+                          <label className='text'>
+                            <span className='edit-label'>Forest Plot Starting Point</span>
+                            <input
+                              type='number'
+                              value={config.columns[val].forestPlotStartingPoint || 0}
+                              onChange={event => {
+                                editColumn(val, 'forestPlotStartingPoint', event.target.value)
+                              }}
+                            />
+                          </label>
+                        </li>
+                      )}
+                    </>
+                  )}
+                </ul>
+              </fieldset>
+            ))}
+            <button
+              className={'btn full-width'}
+              onClick={event => {
+                event.preventDefault()
+                addAdditionalColumn(additionalColumns.length + 1)
+              }}
+            >
+              Add Column Configuration
+            </button>
+          </fieldset>
+        )}
+        {'category' === config.legend?.type && (
+          <fieldset className='primary-fieldset edit-block'>
+            <label>
+              <span className='edit-label'>
+                Additional Category
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>You can provide additional categories to ensure they appear in the legend</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              </span>
+            </label>
+            {config.legend.additionalCategories &&
+              config.legend.additionalCategories.map((val, i) => (
+                <fieldset className='edit-block' key={val}>
+                  <button
+                    className='remove-column'
+                    onClick={event => {
+                      event.preventDefault()
+                      const updatedAdditionaCategories = [...config.legend.additionalCategories]
+                      updatedAdditionaCategories.splice(i, 1)
+                      updateField('legend', null, 'additionalCategories', updatedAdditionaCategories)
+                    }}
+                  >
+                    Remove
+                  </button>
+                  <TextField
+                    value={val}
+                    label='Category'
+                    section='legend'
+                    subsection={null}
+                    fieldName='additionalCategories'
+                    updateField={(section, subsection, fieldName, value) => {
+                      const updatedAdditionaCategories = [...config.legend.additionalCategories]
+                      updatedAdditionaCategories[i] = value
+                      updateField(section, subsection, fieldName, updatedAdditionaCategories)
+                    }}
+                  />
+                </fieldset>
+              ))}
+            <button
+              className={'btn full-width'}
+              onClick={event => {
+                event.preventDefault()
+                const updatedAdditionaCategories = [...(config.legend.additionalCategories || [])]
+                updatedAdditionaCategories.push('')
+                updateField('legend', null, 'additionalCategories', updatedAdditionaCategories)
+              }}
+            >
+              Add Category
+            </button>
+          </fieldset>
+        )}
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default ColumnsEditor

package/components/EditorPanel/DataTableEditor.tsx

@@ -5,26 +5,24 @@ import { CheckBox, TextField } from './Inputs'
 import type { Table } from '@cdc/core/types/Table'
 import MultiSelect from '../MultiSelect'
 import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
+import { Visualization } from '../../types/Visualization'
 
 interface DataTableProps {
-  config: {
-    table: Table
-    visualizationType: string
-  }
+  config: Visualization
   updateField: UpdateFieldFunc<string | boolean | string[] | number>
   isDashboard: boolean
-  isLoadedFromUrl: boolean
   columns: string[]
 }
 
-const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard, isLoadedFromUrl, columns }) => {
+const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard, columns }) => {
+  const isLoadedFromUrl = config.dataKey?.includes('http://') || config?.dataKey?.includes('https://')
   return (
     <>
       <TextField
         value={config.table.label}
         updateField={updateField}
         section='table'
-        fieldName='table-label'
+        fieldName='label'
         id='tableLabel'
         label='Data Table Title'
         placeholder='Data Table'
@@ -98,30 +96,31 @@ const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard,
         }
       />
       <CheckBox value={config.table.limitHeight} section='table' fieldName='limitHeight' label='Limit Table Height' updateField={updateField} />
-      <CheckBox
-        value={config.table.customTableConfig}
-        fieldName='customTableConfig'
-        label='Customize Table Config'
-        section='table'
-        updateField={updateField}
-        tooltip={
-          <Tooltip style={{ textTransform: 'none' }}>
-            <Tooltip.Target>
-              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
-            </Tooltip.Target>
-            <Tooltip.Content>
-              <p>This will display all available columns in the data set. It will not show any columns where all of the column cells are null.</p>
-            </Tooltip.Content>
-          </Tooltip>
-        }
-      />
+      {config.type !== 'table' && (
+        <CheckBox
+          value={config.table.customTableConfig}
+          fieldName='customTableConfig'
+          label='Customize Table Config'
+          section='table'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>This will display all available columns in the data set. It will not show any columns where all of the column cells are null.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+      )}
       {config.table.customTableConfig && <MultiSelect options={columns.map(c => ({ label: c, value: c }))} fieldName='excludeColumns' label='Exclude Columns' section='table' updateField={updateField} />}
-      {config.table.limitHeight && <TextField value={config.table.height} fieldName='height' label='Data Table Height' type='number' min={0} max={500} placeholder='Height(px)' updateField={updateField} />}
+      {config.table.limitHeight && <TextField value={config.table.height} section='table' fieldName='height' label='Data Table Height' type='number' min={0} max={500} placeholder='Height(px)' updateField={updateField} />}
       <CheckBox value={config.table.expanded} fieldName='expanded' label='Expanded by Default' section='table' updateField={updateField} />
-      {isDashboard && <CheckBox value={config.table.showDataTableLink} fieldName='showDataTableLink' label='Show Data Table Name & Link' section='table' updateField={updateField} />}
+      {isDashboard && config.type !== 'table' && <CheckBox value={config.table.showDataTableLink} fieldName='showDataTableLink' label='Show Data Table Name & Link' section='table' updateField={updateField} />}
       {isLoadedFromUrl && <CheckBox value={config.table.showDownloadUrl} fieldName='showDownloadUrl' label='Show URL to Automatically Updated Data' section='table' updateField={updateField} />}
-      <CheckBox value={config.table.download} fieldName='download' label='Show Download CSV Link' section='table' updateField={updateField} />
-      <CheckBox value={config.table.showDownloadImgButton} fieldName='showDownloadImgButton' label='Display Image Button' section='table' updateField={updateField} />
+      {config.type !== 'table' && <CheckBox value={config.table.showDownloadImgButton} fieldName='showDownloadImgButton' label='Display Image Button' section='table' updateField={updateField} />}
       <label>
         <span className='edit-label column-heading'>Table Cell Min Width</span>
         <input type='number' value={config.table.cellMinWidth ? config.table.cellMinWidth : 0} onChange={e => updateField('table', null, 'cellMinWidth', e.target.value)} />

package/components/Filters.jsx

@@ -3,6 +3,7 @@ import { useId } from 'react'
 
 // CDC
 import Button from '@cdc/core/components/elements/Button'
+import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
 
 // Third Party
 import PropTypes from 'prop-types'
@@ -72,19 +73,26 @@ export const useFilters = props => {
   const announceChange = text => {}
 
   const changeFilterActive = (index, value) => {
-    let newFilters = visualizationConfig.type === 'map' ? [...filteredData] : [...visualizationConfig.filters]
+    const newFilters = visualizationConfig.type === 'map' ? [...filteredData] : [...visualizationConfig.filters]
 
     if (visualizationConfig.filterBehavior === 'Apply Button') {
       newFilters[index].queuedActive = value
       setShowApplyButton(true)
     } else {
-      newFilters[index].active = value
+      const newFilter = newFilters[index]
+      newFilter.active = value
+
+      const queryParams = getQueryParams()
+      if (newFilter.setByQueryParameter && queryParams[newFilter.setByQueryParameter] !== newFilter.active) {
+        queryParams[newFilter.setByQueryParameter] = newFilter.active
+        updateQueryString(queryParams)
+      }
     }
-    setConfig({ 
+    setConfig({
       ...visualizationConfig,
-      filters: newFilters 
+      filters: newFilters
     })
-    
+
     // Used for setting active filter, fromHash breaks the filteredData functionality.
     if (visualizationConfig.type === 'map' && visualizationConfig.filterBehavior === 'Filter Change') {
       setFilteredData(newFilters)
@@ -97,13 +105,22 @@ export const useFilters = props => {
   }
 
   const handleApplyButton = newFilters => {
+    let needsQueryUpdate = false
+    const queryParams = getQueryParams()
     newFilters.forEach(newFilter => {
-      if(newFilter.queuedActive){
+      if (newFilter.queuedActive) {
         newFilter.active = newFilter.queuedActive
         delete newFilter.queuedActive
+        if (newFilter.setByQueryParameter && queryParams[newFilter.setByQueryParameter] !== newFilter.active) {
+          queryParams[newFilter.setByQueryParameter] = newFilter.active
+          needsQueryUpdate = true
+        }
       }
     })
-    
+    if (needsQueryUpdate) {
+      updateQueryString(queryParams)
+    }
+
     setConfig({ ...visualizationConfig, filters: newFilters })
 
     if (type === 'map') {
@@ -221,7 +238,7 @@ const Filters = props => {
 
   const Filters = props => props.children
 
-  const filterSectionClassList = ['filters-section', type === 'map' ? general.headerColor : theme]
+  const filterSectionClassList = ['filters-section', type === 'map' ? general.headerColor : visualizationConfig?.visualizationType === 'Spark Line' ? null : theme]
 
   // Exterior Section Wrapper
   Filters.Section = props => {
@@ -291,7 +308,7 @@ const Filters = props => {
       <select
         id={`filter-${outerIndex}`}
         name={label}
-        aria-label={label}
+        aria-label={`Filter by ${label}`}
         className='filter-select'
         data-index='0'
         value={active}
@@ -353,7 +370,7 @@ const Filters = props => {
           )
 
           values.push(
-            <option key={index} value={filterOption}>
+            <option key={index} value={filterOption} aria-label={filterOption}>
               {singleFilter.labels && singleFilter.labels[filterOption] ? singleFilter.labels[filterOption] : filterOption}
             </option>
           )

package/components/MultiSelect/MultiSelect.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
+import Tooltip from '../ui/Tooltip'
 import Icon from '../ui/Icon'
 
 import './multiselect.styles.css'
@@ -12,14 +13,17 @@ interface Option {
 interface MultiSelectProps {
   section?: string
   subsection?: string
-  fieldName: string
+  fieldName: string | number
   options: Option[]
   updateField: UpdateFieldFunc<string[]>
   label?: string
+  selected?: string[]
+  limit?: number
 }
 
-const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField }) => {
-  const [selectedItems, setSelectedItems] = useState<Option[]>([])
+const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField, selected, limit }) => {
+  const preselectedItems = options.filter(opt => selected?.includes(opt.value)).slice(0, limit)
+  const [selectedItems, setSelectedItems] = useState<Option[]>(preselectedItems)
   const [expanded, setExpanded] = useState(false)
   const multiSelectRef = useRef(null)
 
@@ -45,13 +49,16 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
       newItems.map(item => item.value)
     )
 
-  const handleItemSelect = (option: Option) => {
+  const handleItemSelect = (option: Option, e = null) => {
+    if (e && e.type === 'keyup' && e.key !== 'Enter') return
+    if (limit && selectedItems.length >= limit) return
     const newItems = [...selectedItems, option]
     setSelectedItems(newItems)
     update(newItems)
   }
 
-  const handleItemRemove = (option: Option) => {
+  const handleItemRemove = (option: Option, e = null) => {
+    if (e && e.type === 'keyup' && e.key !== 'Enter') return
     const newItems = selectedItems.filter(item => item.value !== option.value)
     setSelectedItems(newItems)
     update(newItems)
@@ -61,29 +68,41 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
   return (
     <div ref={multiSelectRef} className='cove-multiselect'>
       {label && (
-        <span id={multiID} className='edit-label cove-input__label'>
+        <label id={multiID} className='cove-input__label'>
           {label}
-        </span>
+        </label>
       )}
 
-      <div aria-labelledby={label ? multiID : undefined} className='selected'>
-        {selectedItems.map(item => (
-          <div key={item.value} role='button' tabIndex={0} onClick={() => handleItemRemove(item)} onKeyUp={() => handleItemRemove(item)}>
-            {item.label}
-            <button aria-label='Remove' onClick={() => handleItemRemove(item)}>
-              x
-            </button>
-          </div>
-        ))}
-        <button aria-label={expanded ? 'Collapse' : 'Expand'} className='expand' onClick={() => setExpanded(!expanded)}>
-          <Icon display={expanded ? 'caretDown' : 'caretUp'} style={{ cursor: 'pointer' }} />
-        </button>
+      <div className='wrapper'>
+        <div className='selected'>
+          {selectedItems.map(item => (
+            <div key={item.value} aria-labelledby={label ? multiID : undefined} role='button' onClick={() => handleItemRemove(item)} onKeyUp={e => handleItemRemove(item, e)}>
+              {item.label}
+              <button aria-label='Remove' onClick={() => handleItemRemove(item)}>
+                x
+              </button>
+            </div>
+          ))}
+          <button aria-label={expanded ? 'Collapse' : 'Expand'} aria-labelledby={label ? multiID : undefined} className='expand' onClick={() => setExpanded(!expanded)}>
+            <Icon display={expanded ? 'caretDown' : 'caretUp'} style={{ cursor: 'pointer' }} />
+          </button>
+        </div>
+        {!!limit && (
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>Select up to {limit} items</p>
+            </Tooltip.Content>
+          </Tooltip>
+        )}
       </div>
       <ul className={'dropdown' + (expanded ? '' : ' hide')}>
         {options
           .filter(option => !selectedItems.find(item => item.value === option.value))
           .map(option => (
-            <li className='cove-multiselect-li' key={option.value} role='option' tabIndex={0} onClick={() => handleItemSelect(option)} onKeyUp={() => handleItemSelect(option)}>
+            <li className='cove-multiselect-li' key={option.value} role='option' tabIndex={0} onClick={() => handleItemSelect(option)} onKeyUp={e => handleItemSelect(option, e)}>
               {option.label}
             </li>
           ))}