@cdc/core 4.24.2 → 4.24.4

package/components/EditorPanel/ColumnsEditor.tsx

@@ -0,0 +1,312 @@
+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 showInViz = config.type === 'table'
+    const newColumn: Column = {
+      label: 'New Column',
+      dataTable: showInViz,
+      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'
@@ -77,51 +75,68 @@ const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard,
           }
         />
       )}
-      <TextField value={config.table.indexLabel} section='table' fieldName='indexLabel' label='Index Column Header' updateField={updateField} />
       <TextField
-        value={config.table.caption}
-        updateField={updateField}
+        value={config.table.indexLabel}
         section='table'
-        type='textarea'
-        fieldName='caption'
-        label='Screen Reader Description'
-        placeholder=' Data table'
+        fieldName='indexLabel'
+        label='Index Column Header'
+        updateField={updateField}
         tooltip={
           <Tooltip style={{ textTransform: 'none' }}>
             <Tooltip.Target>
               <Icon display='question' style={{ marginLeft: '0.5rem' }} />
             </Tooltip.Target>
             <Tooltip.Content>
-              <p>Enter a description of the data table to be read by screen readers.</p>
+              <p>To comply with 508 standards, if the first column in the data table has no header, enter a brief one here.</p>
             </Tooltip.Content>
           </Tooltip>
         }
       />
-      <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'
+      <TextField
+        value={config.table.caption}
         updateField={updateField}
+        section='table'
+        type='textarea'
+        fieldName='caption'
+        label='Screen Reader Description'
+        placeholder=' Data table'
         tooltip={
           <Tooltip style={{ textTransform: 'none' }}>
             <Tooltip.Target>
-              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
             </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>
+              <p>Enter a description of the data table to be read by screen readers.</p>
             </Tooltip.Content>
           </Tooltip>
         }
       />
+      <CheckBox value={config.table.limitHeight} section='table' fieldName='limitHeight' label='Limit Table Height' updateField={updateField} />
+      {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,17 +238,18 @@ 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 => {
     return (
-      <section className={filterSectionClassList.join(' ')}>
-        <p className='filters-section__intro-text'>
-          {filterConstants.introText} {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
-        </p>
-        <div className='filters-section__wrapper'>{props.children}</div>
-      </section>
+      visualizationConfig?.filters && (
+        <section className={filterSectionClassList.join(' ')}>
+          <p className='filters-section__intro-text'>
+            {filters?.some(f => f.active) ? filterConstants.introText : ''} {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
+          </p>
+          <div className='filters-section__wrapper'>{props.children}</div>
+        </section>
+      )
     )
   }
 
@@ -291,7 +309,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 +371,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>
           )