@cdc/core 4.24.5 → 4.24.7

package/components/AdvancedEditor/AdvancedEditor.tsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react'
+import MapIcon from '../../assets/map-folded.svg'
+import ChartIcon from '../../assets/icon-chart-bar.svg'
+import MarkupIncludeIcon from '../../assets/icon-code.svg'
+import { FilterFunction, JsonEditor, UpdateFunction } from 'json-edit-react'
+import { formatConfigBeforeSave as stripConfig } from '../../helpers/formatConfigBeforeSave'
+import './advanced-editor-styles.css'
+import _ from 'lodash'
+
+export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExpandCollapse = () => {} }) => {
+  const [advancedToggle, _setAdvancedToggle] = useState(false)
+  const [configTextboxValue, setConfigTextbox] = useState<Record<string, any>>({})
+  const setAdvancedToggle = val => {
+    _setAdvancedToggle(val)
+    onExpandCollapse()
+  }
+
+  const collapseFields: FilterFunction = input => {
+    if (['datasets', 'data', 'originalFormattedData', 'formattedData'].includes(String(input.key))) return true
+    return false
+  }
+
+  const onUpdate: UpdateFunction = val => {
+    setConfigTextbox(val.newData)
+  }
+
+  useEffect(() => {
+    let parsedConfig = stripConfig(config)
+    if (config.type !== 'dashboard') {
+      parsedConfig = convertStateToConfig()
+    }
+
+    setConfigTextbox(parsedConfig)
+  }, [config])
+
+  const typeLookup = {
+    chart: ['Charts', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
+    dashboard: ['Dashboard', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
+    map: ['Maps', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html', <MapIcon />],
+    'markup-include': ['Markup Include', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html', <MarkupIncludeIcon />]
+  }
+
+  if (!config.type) return <></>
+  return (
+    <>
+      <a href={typeLookup[config.type][1]} target='_blank' rel='noopener noreferrer' className='guidance-link'>
+        {typeLookup[config.type][2]}
+        <div>
+          <span className='heading-3'>Get Help with {typeLookup[config.type][0]}</span>
+          <p>Examples and documentation</p>
+        </div>
+      </a>
+      <div className='advanced'>
+        <span className='advanced-toggle-link' onClick={() => setAdvancedToggle(!advancedToggle)}>
+          <span>{advancedToggle ? `— ` : `+ `}</span>Advanced Options
+        </span>
+        {advancedToggle && (
+          <React.Fragment>
+            <section className='error-box py-2 px-3 my-2'>
+              <div>
+                <strong className='pt-1'>Warning</strong>
+                <p>This can cause serious errors in your visualization.</p>
+              </div>
+            </section>
+            <p className='pb-2'>
+              This tool displays the actual <acronym title='JavaScript Object Notation'>JSON</acronym> configuration that is generated by this editor and allows you to edit properties directly and apply them.
+            </p>
+            <button
+              className='btn '
+              onClick={() => {
+                navigator.clipboard.writeText(JSON.stringify(configTextboxValue))
+              }}
+            >
+              Copy to Clipboard
+            </button>
+            <JsonEditor className='advanced-json-editor' data={configTextboxValue} onUpdate={onUpdate} rootName='' collapse={collapseFields} />
+            <button
+              className='btn full-width'
+              onClick={() => {
+                loadConfig(configTextboxValue)
+                setAdvancedToggle(!advancedToggle)
+              }}
+            >
+              Apply
+            </button>
+          </React.Fragment>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default AdvancedEditor

package/components/AdvancedEditor/advanced-editor-styles.css

@@ -0,0 +1,3 @@
+.advanced-json-editor {
+  width: 100vw;
+}

package/components/AdvancedEditor/index.ts

@@ -0,0 +1 @@
+export { default } from './AdvancedEditor'

package/components/DataTable/DataTable.tsx

@@ -19,6 +19,7 @@ import boxplotCellMatrix from './helpers/boxplotCellMatrix'
 import removeNullColumns from './helpers/removeNullColumns'
 import { TableConfig } from './types/TableConfig'
 import { Column } from '../../types/Column'
+import { pivotData } from '../../helpers/pivotData'
 
 export type DataTableProps = {
   applyLegendToRow?: Function
@@ -53,7 +54,17 @@ export type DataTableProps = {
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = (props: DataTableProps) => {
   const { config, dataConfig, tableTitle, vizTitle, rawData, runtimeData: parentRuntimeData, headerColor, expandDataTable, columns, viewport, formatLegendLocation, tabbingId, wrapColumns } = props
-  const runtimeData = removeNullColumns(parentRuntimeData)
+  const runtimeData = useMemo(() => {
+    const data = removeNullColumns(parentRuntimeData)
+    if (config.table.pivot) {
+      const { columnName, valueColumn } = config.table.pivot
+      if (columnName && valueColumn) {
+        return pivotData(data, columnName, valueColumn)
+      }
+    }
+    return data
+  }, [parentRuntimeData, config.table.pivot?.columnName, config.table.pivot?.valueColumn])
+
   const [expanded, setExpanded] = useState(expandDataTable)
 
   const [sortBy, setSortBy] = useState<any>({ column: config.type === 'map' ? 'geo' : 'date', asc: false, colIndex: null })
@@ -176,9 +187,17 @@ const DataTable = (props: DataTableProps) => {
       }
     }
 
+    const getMediaControlsClasses = () => {
+      const classes = ['download-links']
+      const isLegendOnBottom = config?.legend?.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(viewport)
+      if (config.brush?.active && !isLegendOnBottom) classes.push('brush-active')
+      if (config.brush?.active && config.legend.hide) classes.push('brush-active')
+      return classes
+    }
+
     return (
       <ErrorBoundary component='DataTable'>
-        <MediaControls.Section classes={['download-links']}>
+        <MediaControls.Section classes={getMediaControlsClasses()}>
           <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />
           {(config.table.download || config.general?.showDownloadButton) && <DownloadButton rawData={getDownloadData()} fileName={`${vizTitle || 'data-table'}.csv`} headerColor={headerColor} />}
         </MediaControls.Section>

package/components/DataTable/DataTableStandAlone.tsx

@@ -5,6 +5,7 @@ import DataTable from './DataTable'
 import DataTableEditorPanel from './components/DataTableEditorPanel'
 import Filters from '../Filters'
 import { TableConfig } from './types/TableConfig'
+import { filterVizData } from '../../helpers/filterVizData'
 
 type StandAloneProps = {
   visualizationKey: string
@@ -14,34 +15,12 @@ type StandAloneProps = {
   updateConfig?: (Visualization) => void
 }
 
-// filterData is copied from ./packages/chart/src/helpers/filterData.ts
-// consider moving this to a shared location
-const filterData = (filters, data) => {
-  if (!filters) return data
-  const filteredData: any[] = []
-
-  data.forEach(row => {
-    let add = true
-    filters
-      .filter(filter => filter.type !== 'url')
-      .forEach(filter => {
-        if (row[filter.columnName] != filter.active) {
-          add = false
-        }
-      })
-
-    if (add) filteredData.push(row)
-  })
-
-  return filteredData
-}
-
 const DataTableStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, updateConfig, viewport, isEditor }) => {
-  const [filteredData, setFilteredData] = useState<Record<string, any>[]>(filterData(config.filters, config.formattedData))
+  const [filteredData, setFilteredData] = useState<Record<string, any>[]>(filterVizData(config.filters, config.formattedData))
 
   useEffect(() => {
     // when using editor changes to filter should update the data
-    setFilteredData(filterData(config.filters, config.formattedData))
+    setFilteredData(filterVizData(config.filters, config?.formattedData?.length > 0 ? config.formattedData : config.data))
   }, [config.filters])
 
   if (isEditor)
@@ -53,7 +32,7 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, conf
 
   return (
     <>
-      <Filters config={config} setConfig={updateConfig} setFilteredData={setFilteredData} filterData={filterData} filteredData={filteredData} excludedData={config.formattedData} />
+      <Filters config={config} setConfig={updateConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={config.formattedData} />
       <DataTable expandDataTable={true} config={config} rawData={config.data} runtimeData={filteredData} tabbingId={visualizationKey} tableTitle={config.table.label} viewport={viewport || 'lg'} />
     </>
   )

package/components/DataTable/components/DataTableEditorPanel.tsx

@@ -1,4 +1,4 @@
-import { AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
+import { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
 import DataTableEditor from '../../EditorPanel/DataTableEditor'
 import { Visualization } from '@cdc/core/types/Visualization'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
@@ -25,9 +25,9 @@ const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateCo
     })
   }
 
-  const columns = Object.keys(config.originalFormattedData[0] || {})
+  const columns = Object.keys(config.originalFormattedData?.[0] || {})
   return (
-    <>
+    <Accordion allowZeroExpanded={true}>
       <AccordionItem>
         <AccordionItemHeading>
           <AccordionItemButton>Filters</AccordionItemButton>
@@ -52,7 +52,7 @@ const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateCo
           <DataTableEditor config={config} columns={columns} updateField={updateField} isDashboard={true} />
         </AccordionItemPanel>
       </AccordionItem>
-    </>
+    </Accordion>
   )
 }
 

package/components/DataTable/components/ExpandCollapse.tsx

@@ -1,7 +1,7 @@
 import Icon from '../../ui/Icon'
+import { fontSizes } from '../../../helpers/cove/fontSettings'
 
 const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport }) => {
-  const fontSizes = { small: 16, medium: 18, large: 20 }
   const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[fontSize]}px`
   return (
     <div

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -6,6 +6,7 @@ import { getChartCellValue } from './getChartCellValue'
 import { getDataSeriesColumns } from './getDataSeriesColumns'
 import { ReactNode } from 'react'
 import { CellMatrix, GroupCellMatrix } from '../../Table/types/CellMatrix'
+import { getRowType } from './getRowType'
 
 type ChartRowsProps = DataTableProps & {
   rows: string[]
@@ -58,15 +59,8 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
     } else {
       return rows.map(row => {
         if (hasRowType) {
-          let rowType
-          let rowValues = []
-          dataSeriesColumns.forEach((column, j) => {
-            if (column.match(/row[_-]?type/i)) {
-              rowType = getChartCellValue(row, column, config, runtimeData)
-            } else {
-              rowValues.push(getChartCellValue(row, column, config, runtimeData))
-            }
-          })
+          const rowType = getRowType(runtimeData[row])
+          const rowValues = dataSeriesColumns.map(column => getChartCellValue(row, column, config, runtimeData))
           return [rowType, ...rowValues]
         } else {
           return dataSeriesColumns.map((column, j) => getChartCellValue(row, column, config, runtimeData))

package/components/DataTable/helpers/getChartCellValue.ts

@@ -60,19 +60,23 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
     const isValueMatch = String(pd.value) === String(labelValue)
     // check entered suppression column against table key
     const isColumnMatch = !pd.column || pd.column === column
+    const barSeriesExist = config.runtime?.barSeriesKeys?.includes(column)
+    const lineSeriesExist = config.runtime?.lineSeriesKeys?.includes(column)
+    const showSymbol = config.general.showSuppressedSymbol
     if (isValueMatch && isColumnMatch && pd.displayTable && pd.type === 'suppression') {
       switch (config.visualizationType) {
         case 'Combo':
-          cellValue = config.runtime.barSeriesKeys.includes(column) ? pd.iconCode : config.runtime.lineSeriesKeys.includes(column) ? pd.lineCode : ''
+          cellValue = barSeriesExist && showSymbol ? pd.iconCode : lineSeriesExist && showSymbol ? pd.lineCode : ''
           break
         case 'Bar':
-          cellValue = pd.iconCode
+          cellValue = !showSymbol ? '' : pd.iconCode
           break
         case 'Line':
-          cellValue = pd.lineCode
+          cellValue = !showSymbol ? '' : pd.lineCode
           break
       }
     }
   })
-  return cellValue
+  const shoMissingDataCellValue = config.general?.showMissingDataLabel && (!labelValue || labelValue === 'null')
+  return shoMissingDataCellValue ? 'N/A' : cellValue
 }

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -3,7 +3,8 @@ import _ from 'lodash'
 import { Column } from '../../../types/Column'
 
 export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, runtimeData: Object[]): string[] => {
-  const configColumns: Record<string, Column> = _.cloneDeep(config.columns) || {}
+  if (config.visualizationType === 'Sankey') return Object.keys(config?.data?.[0]?.tableData[0])
+  const configColumns = _.cloneDeep(config.columns) || ({} as Record<string, Column>)
   const excludeColumns = Object.values(configColumns)
     .filter(column => column.dataTable === false)
     .map(column => column.name)
@@ -21,12 +22,15 @@ export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, r
     tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey, config.yAxis?.dataKey] : [config.yAxis?.dataKey]
   }
 
+  const dataColumns = Object.keys(runtimeData[0] || {})
+
   // then add the additional Columns
-  Object.keys(configColumns).forEach(function (key) {
-    var value = configColumns[key]
+  Object.values(configColumns).forEach(function (value) {
+    if (!value.name) return
     // add if not the index AND it is enabled to be added to data table
     const alreadyAdded = tmpSeriesColumns.includes(value.name)
-    if (value.name !== config.xAxis?.dataKey && value.dataTable === true && !alreadyAdded) {
+    const columnIsInData = dataColumns.includes(value.name) // null columns are excluded from data
+    if (value.name !== config.xAxis?.dataKey && value.dataTable === true && !alreadyAdded && columnIsInData) {
       tmpSeriesColumns.push(value.name)
     }
   })
@@ -53,6 +57,5 @@ export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, r
   })
 
   tmpSeriesColumns.sort((a, b) => columnOrderingHash[a] - columnOrderingHash[b])
-
   return tmpSeriesColumns
 }

package/components/DataTable/helpers/getRowType.ts

@@ -0,0 +1,6 @@
+import { RowType } from '../../Table/types/RowType'
+
+export const getRowType = (row: Record<string, any>): RowType => {
+  const rowTypeKey = Object.keys(row).find(key => key.match(/row[_-]?type/i))
+  return row[rowTypeKey]
+}

package/components/DataTable/types/TableConfig.ts

@@ -14,4 +14,5 @@ export type TableConfig = Visualization & {
   xAxis?: Axis
   yAxis?: Axis
   preliminaryData: PreliminaryDataItem[]
+  brush: { active: boolean }
 }

package/components/EditorPanel/ColumnsEditor.tsx

@@ -1,4 +1,3 @@
-import { AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
 import Tooltip from '../ui/Tooltip'
 import Icon from '../ui/Icon'
 import { TextField } from './Inputs'
@@ -7,6 +6,7 @@ import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 import { Column } from '../../types/Column'
 import _ from 'lodash'
 import React, { useState } from 'react'
+import FieldSetWrapper from './FieldSetWrapper'
 
 interface ColumnsEditorProps {
   config: Partial<Visualization>
@@ -18,10 +18,6 @@ type OpenControls = [Record<string, boolean>, Function] // useState type
 
 const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenControls }> = ({ config, deleteColumn, updateField, colKey, controls }) => {
   const [openControls, setOpenControls] = controls
-  const show = openControls[colKey]
-  const setShow = (key, value) => {
-    setOpenControls({ ...openControls, [key]: value })
-  }
 
   const editColumn = (key, value) => {
     if (key === 'dataTable' && value === true) {
@@ -66,31 +62,8 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
 
   const colName = config.columns[colKey]?.name
 
-  if (!show)
-    return (
-      <div className='mb-1'>
-        <button onClick={() => setShow(colKey, true)}>
-          <Icon display='caretDown' />
-        </button>
-        <span> {colName ? `${colName}` : 'New Column'}</span>
-      </div>
-    )
   return (
-    <fieldset className='edit-block mb-1' key={colKey}>
-      <div className='d-flex justify-content-between'>
-        <button onClick={() => setShow(colKey, false)}>
-          <Icon display='caretUp' />
-        </button>
-        <button
-          className='btn btn-danger btn-sm'
-          onClick={event => {
-            event.preventDefault()
-            deleteColumn(colKey)
-          }}
-        >
-          Remove
-        </button>
-      </div>
+    <FieldSetWrapper fieldName={colName} fieldKey={colKey} fieldType='Column' controls={controls} deleteField={() => deleteColumn(colKey)}>
       <label>
         <span className='edit-label column-heading'>Column</span>
         <select
@@ -231,7 +204,7 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
         <span className='edit-label column-heading'>Order</span>
         <input onWheel={e => e.currentTarget.blur()} type='number' min='1' value={config.columns[colKey].order} onChange={e => updateField('columns', colKey, 'order', parseInt(e.target.value))} />
       </label>
-    </fieldset>
+    </FieldSetWrapper>
   )
 }
 

package/components/EditorPanel/DataTableEditor.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '../ui/Icon'
-import { CheckBox, TextField } from './Inputs'
+import { CheckBox, TextField, Select } from './Inputs'
 import MultiSelect from '../MultiSelect'
 import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 import { Visualization } from '../../types/Visualization'
@@ -26,15 +26,13 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
       .map(([key]) => key)
   }, [config.columns])
 
-  const getGroupableColumns = () => {
+  const groupPivotColumns = useMemo(() => {
     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
-  }
+  }, [config.data])
 
   const changeGroupBy = (value: string) => {
     if (value === PLACEHOLDER) value = undefined
@@ -123,6 +121,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           }
         />
       )}
+
       {config.type !== 'table' && (
         <TextField
           value={config.table.indexLabel}
@@ -163,7 +162,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
       />
       <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} />}
-      <MultiSelect key={excludedColumns.join('') + 'excluded'} options={dataColumns.map(c => ({ label: c, value: c }))} selected={excludedColumns} fieldName='dataTable' label='Exclude Columns' section='columns' updateField={excludeColumns} />
+      {config?.visualizationType !== 'Sankey' && <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} />}
@@ -173,29 +172,74 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         <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{' '}
+      {config?.visualizationType !== 'Sankey' && (
+        <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, ...groupPivotColumns.filter(col => col !== config.table.pivot?.columnName && col !== config.table.pivot?.valueColumn)].map(option => (
+              <option key={option}>{option}</option>
+            ))}
+          </select>
+        </label>
+      )}
+      <Select
+        label='Pivot Column: '
+        tooltip={
           <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>
+              <p>Select a Column whos data values will be pivoted to Column Values.</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>
+        }
+        value={config.table.pivot?.columnName}
+        options={groupPivotColumns.filter(col => col !== config.table.groupBy && col !== config.table.pivot?.valueColumn)}
+        initial='-Select-'
+        section='table'
+        subsection='pivot'
+        fieldName='columnName'
+        updateField={updateField}
+      />
+      {config.table.pivot?.columnName && (
+        <Select
+          label='Pivot Value Column: '
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>The column whos values will be pivoted under the column selected as the Filter.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+          value={config.table.pivot?.valueColumn}
+          initial='-Select-'
+          section='table'
+          options={groupPivotColumns.filter(col => col !== config.table.pivot?.columnName && col !== config.table.groupBy)}
+          subsection='pivot'
+          fieldName='valueColumn'
+          updateField={updateField}
+        />
+      )}
     </>
   )
 }

package/components/EditorPanel/FieldSetWrapper.tsx

@@ -0,0 +1,51 @@
+import Icon from '../ui/Icon'
+
+type OpenControls = [Record<string, boolean>, Function] // useState type
+
+type FieldSetProps = {
+  fieldName: string
+  fieldKey: string | number
+  fieldType: string
+  controls: OpenControls
+  deleteField: Function
+  children: React.ReactNode
+}
+
+const FieldSet: React.FC<FieldSetProps> = ({ fieldName, fieldKey, fieldType, controls, deleteField, children }) => {
+  const [openControls, setOpenControls] = controls
+  const show = openControls[fieldKey]
+  const setShow = (key, value) => {
+    setOpenControls({ ...openControls, [key]: value })
+  }
+
+  if (!show)
+    return (
+      <div className='mb-1'>
+        <button onClick={() => setShow(fieldKey, true)}>
+          <Icon display='caretDown' />
+        </button>
+        <span> {fieldName ? `${fieldName}` : 'New ' + fieldType}</span>
+      </div>
+    )
+  return (
+    <fieldset className='edit-block mb-1' key={fieldKey}>
+      <div className='d-flex justify-content-between'>
+        <button onClick={() => setShow(fieldKey, false)}>
+          <Icon display='caretUp' />
+        </button>
+        <button
+          className='btn btn-danger btn-sm'
+          onClick={event => {
+            event.preventDefault()
+            deleteField()
+          }}
+        >
+          Remove
+        </button>
+      </div>
+      {children}
+    </fieldset>
+  )
+}
+
+export default FieldSet