@cdc/core 4.24.3 → 4.24.5

package/components/EditorPanel/DataTableEditor.tsx

@@ -1,21 +1,66 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '../ui/Icon'
 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'
+import _ from 'lodash'
+import { Column } from '../../types/Column'
 
 interface DataTableProps {
-  config: Visualization
-  updateField: UpdateFieldFunc<string | boolean | string[] | number>
+  config: Partial<Visualization>
+  updateField: UpdateFieldFunc<string | boolean | string[] | number | Record<string, Partial<Column>>>
   isDashboard: boolean
   columns: string[]
 }
 
-const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard, columns }) => {
+const PLACEHOLDER = '-Select-'
+
+const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDashboard, columns: dataColumns }) => {
   const isLoadedFromUrl = config.dataKey?.includes('http://') || config?.dataKey?.includes('https://')
+  const excludedColumns = useMemo(() => {
+    return Object.keys(config.columns)
+      .map<[string, boolean]>(key => [key, config.columns[key].dataTable])
+      .filter(([key, dataTable]) => !dataTable)
+      .map(([key]) => key)
+  }, [config.columns])
+
+  const getGroupableColumns = () => {
+    const columns: string[] = config.data.flatMap(Object.keys)
+    const configuredColumns = Object.values(config.columns).map(col => col.name)
+    const cols = _.uniq(columns).filter(key => {
+      if (configuredColumns.includes(key)) return false
+      return true
+    })
+    return cols
+  }
+
+  const changeGroupBy = (value: string) => {
+    if (value === PLACEHOLDER) value = undefined
+    updateField('table', null, 'groupBy', value)
+  }
+
+  const excludeColumns = (section, subSection, fieldName, excludedColNames: string[]) => {
+    const newColumns = _.cloneDeep(config.columns)
+    const colNames: string[] = []
+    for (let colKey in newColumns) {
+      const col = newColumns[colKey]
+      colNames.push(col.name) // keep track of all column names
+      if (excludedColNames.includes(col.name)) {
+        // ensure all excluded columns are set to false
+        newColumns[colKey].dataTable = false
+      }
+    }
+    excludedColNames.forEach(colName => {
+      if (!colNames.includes(colName)) {
+        // make sure there is a column config to set to dataTable: false
+        newColumns[colName] = { name: colName, dataTable: false }
+      }
+    })
+    updateField(null, null, 'columns', newColumns)
+  }
+
   return (
     <>
       <TextField
@@ -37,25 +82,28 @@ const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard,
           </Tooltip>
         }
       />
-      <CheckBox
-        value={config.table.show}
-        fieldName='show'
-        label='Show Data Table'
-        section='table'
-        updateField={updateField}
-        className='column-heading'
-        tooltip={
-          <Tooltip style={{ textTransform: 'none' }}>
-            <Tooltip.Target>
-              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
-            </Tooltip.Target>
-            <Tooltip.Content>
-              <p>Hiding the data table may affect accessibility. An alternate form of accessing visualization data is a 508 requirement.</p>
-            </Tooltip.Content>
-          </Tooltip>
-        }
-      />
-      {config.visualizationType !== 'Box Plot' && (
+      {config.type !== 'table' && (
+        <CheckBox
+          value={config.table.show}
+          fieldName='show'
+          label='Show Data Table'
+          section='table'
+          updateField={updateField}
+          className='column-heading'
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Hiding the data table may affect accessibility. An alternate form of accessing visualization data is a 508 requirement.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+      )}
+
+      {config.visualizationType !== 'Box Plot' && config.type !== 'table' && (
         <CheckBox
           value={config.table.showVertical}
           fieldName='showVertical'
@@ -75,7 +123,25 @@ const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard,
           }
         />
       )}
-      <TextField value={config.table.indexLabel} section='table' fieldName='indexLabel' label='Index Column Header' updateField={updateField} />
+      {config.type !== 'table' && (
+        <TextField
+          value={config.table.indexLabel}
+          section='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>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>
+          }
+        />
+      )}
       <TextField
         value={config.table.caption}
         updateField={updateField}
@@ -95,29 +161,11 @@ const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard,
           </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} />}
+      <CheckBox value={config.table.limitHeight} section='table' fieldName='limitHeight' label=' Limit Table Height' 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} />
+      <MultiSelect key={excludedColumns.join('') + 'excluded'} options={dataColumns.map(c => ({ label: c, value: c }))} selected={excludedColumns} fieldName='dataTable' label='Exclude Columns' section='columns' updateField={excludeColumns} />
+      <CheckBox value={config.table.collapsible} fieldName='collapsible' label=' Collapsible' section='table' updateField={updateField} />
+      {config.table.collapsible !== false && <CheckBox value={config.table.expanded} fieldName='expanded' label=' Expanded by Default' 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} />}
       {config.type !== 'table' && <CheckBox value={config.table.showDownloadImgButton} fieldName='showDownloadImgButton' label='Display Image Button' section='table' updateField={updateField} />}
@@ -125,8 +173,31 @@ const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard,
         <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)} />
       </label>
+      <label>
+        <span className='edit-label column-heading'>
+          Group By{' '}
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>Choose a column to use for grouping data rows. The selected column will not be shown in the data table. You will only be able to choose a column which does not have a column configuration.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        </span>
+        <select
+          value={config.table.groupBy}
+          onChange={event => {
+            changeGroupBy(event.target.value)
+          }}
+        >
+          {[PLACEHOLDER, ...getGroupableColumns()].map(option => (
+            <option key={option}>{option}</option>
+          ))}
+        </select>
+      </label>
     </>
   )
 }
 
-export default DataTable
+export default DataTableEditor

package/components/EditorPanel/VizFilterEditor.tsx

@@ -0,0 +1,234 @@
+import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
+import { Select } from './Inputs'
+import Tooltip from '../ui/Tooltip'
+import Icon from '../ui/Icon'
+import { Visualization } from '../../types/Visualization'
+import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
+import _ from 'lodash'
+import { VizFilter } from '../../types/VizFilter'
+import { filterStyleOptions, filterOrderOptions, handleSorting } from '../Filters'
+
+type VizFilterProps = {
+  config: Visualization
+  updateField: UpdateFieldFunc<string | VizFilter[] | VizFilter>
+  rawData: Object[]
+}
+
+const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawData }) => {
+  const getFilters = () => {
+    return _.uniq(_.flatten(rawData.map(row => Object.keys(row))))
+  }
+  const removeFilter = index => {
+    let filters = _.cloneDeep(config.filters)
+
+    filters.splice(index, 1)
+
+    updateField(null, null, 'filters', filters)
+  }
+
+  const updateFilterProp = (prop, index, value) => {
+    updateField('filters', index, prop, value)
+  }
+
+  const handleNameChange = (filterIndex, columnName) => {
+    const values = _.uniq(rawData.map(row => row[columnName]))
+    const copiedFilter = { ..._.cloneDeep(config.filters[filterIndex]), columnName, values }
+    handleSorting(copiedFilter) // sorts dropdown values in place
+    copiedFilter.active = copiedFilter.values[0]
+    const newFilters = config.filters.map((filter, index) => {
+      if (index === filterIndex) return copiedFilter
+      return filter
+    })
+    updateField(null, null, 'filters', newFilters)
+  }
+
+  const addNewFilter = () => {
+    const filters = config.filters ? [...config.filters] : []
+    const newVizFilter: VizFilter = { values: [], filterStyle: 'dropdown' } as VizFilter
+    filters.push(newVizFilter)
+    updateField(null, null, 'filters', filters)
+  }
+
+  const handleFilterOrder = (idx1, idx2, filterIndex, filter) => {
+    // Create a shallow copy of the filter values array & update position of the values
+    const updatedValues = [...filter.values]
+    const [movedItem] = updatedValues.splice(idx1, 1)
+    updatedValues.splice(idx2, 0, movedItem)
+
+    const filtersCopy = _.cloneDeep(config.filters)
+    const filterItem = { ...filtersCopy[filterIndex] }
+
+    // Overwrite filterItem.values since thats what we map through in the editor panel
+    filterItem.values = updatedValues
+    filterItem.orderedValues = updatedValues
+    filterItem.active = updatedValues[0]
+    filterItem.order = 'cust'
+
+    // Update the filters
+    filtersCopy[filterIndex] = filterItem
+
+    updateField(null, null, 'filters', filtersCopy)
+  }
+
+  return (
+    <>
+      {config.filters && (
+        <>
+          <Select
+            value={config.filterBehavior}
+            fieldName='filterBehavior'
+            label='Filter Behavior'
+            updateField={updateField}
+            options={['Apply Button', 'Filter Change']}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>The Apply Button option changes the visualization when the user clicks "apply". The Filter Change option immediately changes the visualization when the selection is changed.</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+          <br />
+        </>
+      )}
+      {config.filters && (
+        <ul className='filters-list'>
+          {/* Whether filters should apply onChange or Apply Button */}
+
+          {config.filters.map((filter, index) => {
+            if (filter.type === 'url') return <></>
+
+            return (
+              <fieldset className='edit-block' key={index}>
+                <button
+                  type='button'
+                  className='remove-column'
+                  onClick={() => {
+                    removeFilter(index)
+                  }}
+                >
+                  Remove
+                </button>
+                <label>
+                  <span className='edit-label column-heading'>Filter</span>
+                  <select
+                    value={filter.columnName}
+                    onChange={e => {
+                      handleNameChange(index, e.target.value)
+                    }}
+                  >
+                    <option value=''>- Select Option -</option>
+                    {getFilters().map((dataKey, index) => (
+                      <option value={dataKey} key={index}>
+                        {dataKey}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+
+                <label>
+                  <span className='edit-showDropdown column-heading'>Show Filter Input</span>
+                  <input
+                    type='checkbox'
+                    checked={filter.showDropdown === undefined ? true : filter.showDropdown}
+                    onChange={e => {
+                      updateFilterProp('showDropdown', index, e.target.checked)
+                    }}
+                  />
+                </label>
+
+                <label>
+                  <span className='edit-label column-heading'>Filter Style</span>
+
+                  <select
+                    value={filter.filterStyle}
+                    onChange={e => {
+                      updateFilterProp('filterStyle', index, e.target.value)
+                    }}
+                  >
+                    {filterStyleOptions.map((item, index) => {
+                      return (
+                        <option key={`filter-style-${index}`} value={item}>
+                          {item}
+                        </option>
+                      )
+                    })}
+                  </select>
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>Label</span>
+                  <input
+                    type='text'
+                    value={filter.label}
+                    onChange={e => {
+                      updateFilterProp('label', index, e.target.value)
+                    }}
+                  />
+                </label>
+
+                <label>
+                  <span className='edit-label column-heading'>Default Value Set By Query String Parameter</span>
+                  <input
+                    type='text'
+                    value={filter.setByQueryParameter}
+                    onChange={e => {
+                      updateFilterProp('setByQueryParameter', index, e.target.value)
+                    }}
+                  />
+                </label>
+
+                <label>
+                  <span className='edit-filterOrder column-heading'>Filter Order</span>
+                  <select value={filter.order ? filter.order : 'asc'} onChange={e => updateFilterProp('order', index, e.target.value)}>
+                    {filterOrderOptions.map((option, index) => {
+                      return (
+                        <option value={option.value} key={`filter-${index}`}>
+                          {option.label}
+                        </option>
+                      )
+                    })}
+                  </select>
+
+                  {filter.order === 'cust' && (
+                    <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source.index, destination.index, index, config.filters[index])}>
+                      <Droppable droppableId='filter_order'>
+                        {provided => (
+                          <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
+                            {config.filters[index]?.values.map((value, index) => {
+                              return (
+                                <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
+                                  {(provided, snapshot) => (
+                                    <li>
+                                      <div className={snapshot.isDragging ? 'currently-dragging' : ''} style={provided.draggableProps.style} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                                        {value}
+                                      </div>
+                                    </li>
+                                  )}
+                                </Draggable>
+                              )
+                            })}
+                            {provided.placeholder}
+                          </ul>
+                        )}
+                      </Droppable>
+                    </DragDropContext>
+                  )}
+                </label>
+              </fieldset>
+            )
+          })}
+        </ul>
+      )}
+      {!config.filters && <p style={{ textAlign: 'center' }}>There are currently no filters.</p>}
+      <button type='button' onClick={addNewFilter} className='btn btn-primary full-width'>
+        Add Filter
+      </button>
+    </>
+  )
+}
+
+export default VizFilterEditor

package/components/EditorWrapper/EditorWrapper.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { Visualization } from '../../types/Visualization'
+import { ViewPort } from '../../types/ViewPort'
+import './editor-wrapper.style.css'
+import { Accordion } from 'react-accessible-accordion'
+
+type StandAloneComponentProps = {
+  visualizationKey: string
+  config
+  updateConfig: (Visualization) => void
+  configUrl: string
+  setEditing: Function
+  hostname: string
+  viewport?: ViewPort
+}
+
+type EditorProps = {
+  component: React.JSXElementConstructor<StandAloneComponentProps>
+  type: string
+  visualizationKey: string
+  visualizationConfig: Visualization
+  updateConfig: (Visualization) => void
+  viewport?: ViewPort
+}
+
+const EditorWrapper: React.FC<React.PropsWithChildren<EditorProps>> = ({ children, visualizationKey, visualizationConfig, type, component: Component, updateConfig, viewport }) => {
+  const [displayPanel, setDisplayPanel] = React.useState(true)
+  return (
+    <>
+      <div className='editor-wrapper'>
+        <button className={`editor-toggle ${displayPanel ? '' : 'collapsed'}`} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={() => setDisplayPanel(!displayPanel)} />
+        <section className={`${displayPanel ? '' : 'hidden'} editor-panel cove`}>
+          <div aria-level={2} role='heading' className='heading-2'>
+            Configure {type}
+          </div>
+          <section>
+            <Accordion allowZeroExpanded={true}>{children}</Accordion>
+          </section>
+        </section>
+        <div className='preview-wrapper'>
+          <Component visualizationKey={visualizationKey} config={visualizationConfig} updateConfig={updateConfig} configUrl={undefined} setEditing={undefined} hostname={undefined} viewport={viewport} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default EditorWrapper

package/components/EditorWrapper/editor-wrapper.style.css

@@ -0,0 +1,14 @@
+.editor-wrapper {
+  --editorPanelWidth: 350px;
+  position: relative;
+  min-height: 80vh;
+  .editor-panel {
+    :is(form) {
+      border-right: var(--lightGray) 1px solid;
+      flex-grow: 1;
+    }
+  }
+  .preview-wrapper {
+    padding-left: var(--editorPanelWidth);
+  }
+}