@cdc/core 4.24.9 → 4.24.11

package/components/DataTable/helpers/getChartCellValue.ts

@@ -1,5 +1,5 @@
 import { parseDate, formatDate } from '@cdc/core/helpers/cove/date'
-import { formatNumber } from '@cdc/core/helpers/cove/number'
+import { formatNumber } from '../../../helpers/cove/number'
 import { TableConfig } from '../types/TableConfig'
 
 // if its additional column, return formatting params
@@ -32,7 +32,15 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
   let labelValue = rowObj[column] // just raw X axis string
   if (column === config.xAxis?.dataKey) {
     // not the prettiest, but helper functions work nicely here.
-    cellValue = config.xAxis?.type === 'date' ? formatDate(config.table?.dateDisplayFormat || config.xAxis?.dateDisplayFormat, parseDate(config.xAxis?.dateParseFormat, labelValue)) : labelValue
+    cellValue =
+      config.xAxis?.type === 'date'
+        ? formatDate(
+            config.table?.dateDisplayFormat || config.xAxis?.dateDisplayFormat,
+            parseDate(config.xAxis?.dateParseFormat, labelValue)
+          )
+        : labelValue
+    cellValue =
+      config.xAxis?.type === 'continuous' ? formatNumber(runtimeData[row][column], 'bottom', false, config) : labelValue
   } else {
     let resolvedAxis = 'left'
     let leftAxisItems = config.series ? config.series.filter(item => item?.axis === 'Left') : []
@@ -48,9 +56,13 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
 
     let addColParams = isAdditionalColumn(column, config)
     if (addColParams) {
-      cellValue = config.dataFormat ? formatNumber(runtimeData[row][column], resolvedAxis, false, config, addColParams) : runtimeData[row][column]
+      cellValue = config.dataFormat
+        ? formatNumber(runtimeData[row][column], resolvedAxis, false, config, addColParams)
+        : runtimeData[row][column]
     } else {
-      cellValue = config.dataFormat ? formatNumber(runtimeData[row][column], resolvedAxis, false, config) : runtimeData[row][column]
+      cellValue = config.dataFormat
+        ? formatNumber(runtimeData[row][column], resolvedAxis, false, config)
+        : runtimeData[row][column]
     }
   }
 
@@ -63,7 +75,13 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
     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' && config.visualizationSubType !== 'stacked') {
+    if (
+      isValueMatch &&
+      isColumnMatch &&
+      pd.displayTable &&
+      pd.type === 'suppression' &&
+      config.visualizationSubType !== 'stacked'
+    ) {
       switch (config.visualizationType) {
         case 'Combo':
           cellValue = barSeriesExist && showSymbol ? pd.iconCode : lineSeriesExist && showSymbol ? pd.lineCode : ''

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -56,6 +56,10 @@ export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, r
     }
   })
 
-  tmpSeriesColumns.sort((a, b) => columnOrderingHash[a] - columnOrderingHash[b])
+  tmpSeriesColumns.sort((a, b) => {
+    if (a === 'pivotColumn') return -1
+    if (b === 'pivotColumn') return 1
+    return columnOrderingHash[a] - columnOrderingHash[b]
+  })
   return tmpSeriesColumns
 }

package/components/DataTable/helpers/getNewSortBy.ts

@@ -0,0 +1,35 @@
+type SortBy = {
+  asc: boolean
+  column?: string
+}
+
+export const getNewSortBy = (
+  sortBy: SortBy,
+  column: string,
+  index: number
+): { column: string; asc: boolean; colIndex: number } => {
+  let asc
+  let sortByCol = column
+  const ascending = sortBy.asc === true
+  const descending = sortBy.asc === false
+  const isInactive = sortBy.asc === undefined
+  const noColumnSelected = sortBy.column === undefined
+  if (noColumnSelected || sortBy.column !== column) {
+    // this is the first time a column is clicked
+    asc = true
+  } else {
+    // clicking the same column
+    if (descending) {
+      // reset
+      sortByCol = undefined
+      asc = undefined
+    }
+    if (isInactive) {
+      asc = true
+    }
+    if (ascending) {
+      asc = false
+    }
+  }
+  return { column: sortByCol, asc, colIndex: index }
+}

package/components/DataTable/helpers/tests/customSort.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { customSort } from '../customSort'
+
+describe('customSort()', () => {
+  it('should return positive number when a > b', () => {
+    const a = 3
+    const b = 1
+    const sortBy = { column: 'someColumn', asc: true, colIndex: 0 }
+    const config = { type: 'map' }
+    expect(customSort(a, b, sortBy, config)).greaterThan(0)
+    expect(customSort(a, b, sortBy, { type: 'notMap' })).greaterThan(0)
+  })
+  it('should return negative number when a < b', () => {
+    const a = 1
+    const b = 3
+    const sortBy = { column: 'someColumn', asc: true, colIndex: 0 }
+    const config = { type: 'map' }
+    expect(customSort(a, b, sortBy, config)).lessThan(0)
+    expect(customSort(a, b, sortBy, { type: 'notMap' })).lessThan(0)
+  })
+  it('works for dates', () => {
+    const a = 2000
+    const b = 1999
+    const sortBy = { column: 'someColumn', asc: true, colIndex: 0 }
+    expect(
+      customSort(a, b, sortBy, { xAxis: { dataKey: sortBy.column, dateParseFormat: '%Y', type: 'date' } })
+    ).greaterThan(0)
+    expect(
+      customSort(b, a, sortBy, { xAxis: { dataKey: sortBy.column, dateParseFormat: '%Y', type: 'date' } })
+    ).lessThan(0)
+  })
+  it('works for strings', () => {
+    const a = 'banana'
+    const b = 'apple'
+    const sortBy = { column: 'someColumn', asc: true, colIndex: 0 }
+    const config = { type: 'map' }
+    expect(customSort(a, b, sortBy, config)).greaterThan(0)
+    expect(customSort(a, b, sortBy, { type: 'notMap' })).greaterThan(0)
+    expect(customSort(b, a, sortBy, config)).lessThan(0)
+    expect(customSort(b, a, sortBy, { type: 'notMap' })).lessThan(0)
+  })
+  it('works for strings after number', () => {
+    const a = 'banana'
+    const b = '1'
+    const sortBy = { column: 'someColumn', asc: true, colIndex: 0 }
+    const config = { type: 'map' }
+    expect(customSort(a, b, sortBy, config)).greaterThan(0)
+    expect(customSort(a, b, sortBy, { type: 'notMap' })).greaterThan(0)
+    expect(customSort(b, a, sortBy, config)).lessThan(0)
+    expect(customSort(b, a, sortBy, { type: 'notMap' })).lessThan(0)
+  })
+})

package/components/DataTable/helpers/tests/getNewSortBy.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest'
+import { getNewSortBy } from '../getNewSortBy'
+
+describe('getNewSortBy()', () => {
+  it('should return ascending when currently undefined', () => {
+    const sortBy = { column: undefined, asc: undefined, colIndex: 0 }
+    const column = 'someColumn'
+    const index = 1
+    const result = getNewSortBy(sortBy, column, index)
+    expect(result).toEqual({ column, asc: true, colIndex: index })
+  })
+  it('should return ascending false when currently true', () => {
+    const sortBy = { column: 'someColumn', asc: true, colIndex: 0 }
+    const column = 'someColumn'
+    const index = 1
+    const result = getNewSortBy(sortBy, column, index)
+    expect(result).toEqual({ column, asc: false, colIndex: index })
+  })
+  it('should return ascending undefined when currently false', () => {
+    const sortBy = { column: 'someColumn', asc: false, colIndex: 0 }
+    const column = 'someColumn'
+    const index = 1
+    const result = getNewSortBy(sortBy, column, index)
+    expect(result).toEqual({ column: undefined, asc: undefined, colIndex: index })
+  })
+})

package/components/EditorPanel/ColumnsEditor.tsx

@@ -1,6 +1,6 @@
 import Tooltip from '../ui/Tooltip'
 import Icon from '../ui/Icon'
-import { TextField } from './Inputs'
+import { Select, TextField } from './Inputs'
 import { Visualization } from '../../types/Visualization'
 import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 import { Column } from '../../types/Column'
@@ -16,7 +16,13 @@ interface ColumnsEditorProps {
 
 type OpenControls = [Record<string, boolean>, Function] // useState type
 
-const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenControls }> = ({ config, deleteColumn, updateField, colKey, controls }) => {
+const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenControls }> = ({
+  config,
+  deleteColumn,
+  updateField,
+  colKey,
+  controls
+}) => {
   const [openControls, setOpenControls] = controls
 
   const editColumn = (key, value) => {
@@ -63,43 +69,69 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
   const colName = config.columns[colKey]?.name
 
   return (
-    <FieldSetWrapper fieldName={colName} fieldKey={colKey} fieldType='Column' controls={controls} deleteField={() => deleteColumn(colKey)}>
-      <label>
-        <span className='edit-label column-heading'>Column</span>
-        <select
-          value={config.columns[colKey] ? config.columns[colKey].name : undefined}
-          onChange={event => {
-            changeName(event.target.value)
-          }}
-        >
-          {['-Select-', ...getColumns()].map(option => (
-            <option key={option}>{option}</option>
-          ))}
-        </select>
-      </label>
+    <FieldSetWrapper
+      fieldName={colName}
+      fieldKey={colKey}
+      fieldType='Column'
+      controls={controls}
+      deleteField={() => deleteColumn(colKey)}
+    >
+      <Select
+        label='Column'
+        value={config.columns[colKey]?.name}
+        fieldName='name'
+        section={'columns'}
+        initial={'-Select-'}
+        options={getColumns()}
+        updateField={(_section, _subsection, _fieldName, value) => changeName(value)}
+      />
       {config.type !== 'table' && (
-        <label>
-          <span className='edit-label column-heading'>Associate to Series</span>
-          <select
-            value={config.columns[colKey] ? config.columns[colKey].series : ''}
-            onChange={event => {
-              editColumn('series', event.target.value)
-            }}
-          >
-            <option value=''>Select series</option>
-            {(config.series || []).map(series => (
-              <option key={series.dataKey}>{series.dataKey}</option>
-            ))}
-          </select>
-        </label>
+        <Select
+          label='Associate to Series'
+          value={config.columns[colKey]?.series}
+          fieldName={'series'}
+          section='columns'
+          initial={'Select series'}
+          options={config.series?.map(series => series.dataKey) || []}
+          updateField={(_section, _subsection, _fieldName, value) => editColumn('series', value)}
+        />
       )}
 
-      <TextField value={config.columns[colKey].label} section='columns' subsection={colKey} fieldName='label' label='Label' updateField={updateField} />
+      <TextField
+        value={config.columns[colKey].label}
+        section='columns'
+        subsection={colKey}
+        fieldName='label'
+        label='Label'
+        updateField={updateField}
+      />
       <ul className='column-edit'>
         <li className='three-col'>
-          <TextField value={config.columns[colKey].prefix} section='columns' subsection={colKey} fieldName='prefix' label='Prefix' updateField={updateField} />
-          <TextField value={config.columns[colKey].suffix} section='columns' subsection={colKey} fieldName='suffix' label='Suffix' updateField={updateField} />
-          <TextField type='number' value={config.columns[colKey].roundToPlace} section='columns' subsection={colKey} fieldName='roundToPlace' label='Round' updateField={updateField} />
+          <TextField
+            value={config.columns[colKey].prefix}
+            section='columns'
+            subsection={colKey}
+            fieldName='prefix'
+            label='Prefix'
+            updateField={updateField}
+          />
+          <TextField
+            value={config.columns[colKey].suffix}
+            section='columns'
+            subsection={colKey}
+            fieldName='suffix'
+            label='Suffix'
+            updateField={updateField}
+          />
+          <TextField
+            type='number'
+            value={config.columns[colKey].roundToPlace}
+            section='columns'
+            subsection={colKey}
+            fieldName='roundToPlace'
+            label='Round'
+            updateField={updateField}
+          />
         </li>
         <li>
           <label className='checkbox'>
@@ -202,7 +234,13 @@ const FieldSet: React.FC<ColumnsEditorProps & { colKey: string; controls: OpenCo
       </ul>
       <label>
         <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))} />
+        <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>
     </FieldSetWrapper>
   )
@@ -252,7 +290,14 @@ const ColumnsEditor: React.FC<ColumnsEditorProps> = ({ config, updateField, dele
             </span>
           </label>
           {additionalColumns.map((val, i) => (
-            <FieldSet key={val + i} controls={openControls} config={config} deleteColumn={deleteColumn} updateField={updateField} colKey={val} />
+            <FieldSet
+              key={val + i}
+              controls={openControls}
+              config={config}
+              deleteColumn={deleteColumn}
+              updateField={updateField}
+              colKey={val}
+            />
           ))}
           <button
             className={'btn btn-primary'}

package/components/EditorPanel/DataTableEditor.tsx

@@ -41,6 +41,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
 
   const excludeColumns = (section, subSection, fieldName, excludedColNames: string[]) => {
     const newColumns = _.cloneDeep(config.columns)
+
     const colNames: string[] = []
     for (let colKey in newColumns) {
       const col = newColumns[colKey]
@@ -48,6 +49,8 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
       if (excludedColNames.includes(col.name)) {
         // ensure all excluded columns are set to false
         newColumns[colKey].dataTable = false
+      } else {
+        newColumns[colKey].dataTable = true
       }
     }
     excludedColNames.forEach(colName => {
@@ -80,7 +83,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           </Tooltip>
         }
       />
-      {config.type !== 'table' && (
+      {config.type !== 'table' ? (
         <CheckBox
           value={config.table.show}
           fieldName='show'
@@ -91,14 +94,29 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           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', 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>
+                <p>
+                  Hiding the data table may affect accessibility. An alternate form of accessing visualization data is a
+                  508 requirement.
+                </p>
               </Tooltip.Content>
             </Tooltip>
           }
         />
+      ) : (
+        <CheckBox
+          value={config.general?.showDownloadButton}
+          fieldName='showDownloadButton'
+          label='Show Download CSV link'
+          section='general'
+          updateField={updateField}
+          className='column-heading'
+        />
       )}
 
       {config.visualizationType !== 'Box Plot' && config.type !== 'table' && (
@@ -112,7 +130,10 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           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', display: 'inline-block', whiteSpace: 'nowrap' }}
+                />
               </Tooltip.Target>
               <Tooltip.Content>
                 <p>This will draw the data table with vertical data instead of horizontal.</p>
@@ -135,7 +156,10 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
                 <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>
+                <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>
           }
@@ -160,46 +184,124 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           </Tooltip>
         }
       />
-      <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} />}
-      {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} />}
-      {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} />}
+      <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}
+        />
+      )}
+      {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}
+        />
+      )}
+      {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}
+        />
+      )}
+
+      <CheckBox
+        value={config.table.showDownloadLinkBelow}
+        fieldName='showDownloadLinkBelow'
+        label='Show Download Link Below Table'
+        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)} />
+        <input
+          type='number'
+          value={config.table.cellMinWidth ? config.table.cellMinWidth : 0}
+          onChange={e => updateField('table', null, 'cellMinWidth', e.target.value)}
+        />
       </label>
       {config?.visualizationType !== 'Sankey' && (
-        <label>
-          <span className='edit-label column-heading'>
-            Group By{' '}
+        <Select
+          value={config.table.groupBy}
+          fieldName={'groupBy'}
+          section='table'
+          label='Group By'
+          updateField={(_section, _subSection, _fieldName, value) => changeGroupBy(value)}
+          initial={PLACEHOLDER}
+          options={groupPivotColumns.filter(
+            col => col !== config.table.pivot?.columnName && !(config.table.pivot?.valueColumns || []).includes(col)
+          )}
+          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>
+                  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: '
+        label='Pivot Column'
         tooltip={
           <Tooltip style={{ textTransform: 'none' }}>
             <Tooltip.Target>
@@ -211,7 +313,9 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           </Tooltip>
         }
         value={config.table.pivot?.columnName}
-        options={groupPivotColumns.filter(col => col !== config.table.groupBy && col !== config.table.pivot?.valueColumn)}
+        options={groupPivotColumns.filter(
+          col => col !== config.table.groupBy && !(config.table.pivot?.valueColumns || []).includes(col)
+        )}
         initial='-Select-'
         section='table'
         subsection='pivot'
@@ -219,25 +323,27 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         updateField={updateField}
       />
       {config.table.pivot?.columnName && (
-        <Select
-          label='Pivot Value Column: '
+        <MultiSelect
+          key={config.table.pivot?.columnName}
+          options={groupPivotColumns
+            .filter(col => col !== config.table.pivot?.columnName && col !== config.table.groupBy)
+            .map(c => ({ label: c, value: c }))}
+          selected={config.table.pivot?.valueColumns}
+          label='Pivot Value Column(s) '
+          section='table'
+          subsection='pivot'
+          fieldName='valueColumns'
+          updateField={updateField}
           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>
+                <p>The column(s) 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

@@ -21,7 +21,7 @@ const FieldSet: React.FC<FieldSetProps> = ({ fieldName, fieldKey, fieldType, con
   if (!show)
     return (
       <div className='mb-1'>
-        <button onClick={() => setShow(fieldKey, true)}>
+        <button className='btn btn-light' onClick={() => setShow(fieldKey, true)}>
           <Icon display='caretDown' />
         </button>
         <span> {fieldName ? `${fieldName}` : 'New ' + fieldType}</span>
@@ -30,7 +30,7 @@ const FieldSet: React.FC<FieldSetProps> = ({ fieldName, fieldKey, fieldType, con
   return (
     <fieldset className='edit-block mb-1' key={fieldKey}>
       <div className='d-flex justify-content-between'>
-        <button onClick={() => setShow(fieldKey, false)}>
+        <button className='btn btn-light' onClick={() => setShow(fieldKey, false)}>
           <Icon display='caretUp' />
         </button>
         <button