@cdc/core 4.24.5 → 4.24.9

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -1,4 +1,4 @@
-import LegendCircle from '@cdc/core/components/LegendCircle'
+import LegendShape from '@cdc/core/components/LegendShape'
 import CellAnchor from '../components/CellAnchor'
 import { DataTableProps } from '../DataTable'
 import { ReactNode } from 'react'
@@ -7,7 +7,7 @@ type MapRowsProps = DataTableProps & {
   rows: string[]
 }
 
-const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode, viewport }: MapRowsProps): ReactNode[][] => {
+const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode }: MapRowsProps): ReactNode[][] => {
   return rows.map(row =>
     Object.keys(columns)
       .filter(column => columns[column].dataTable === true && columns[column].name)
@@ -31,7 +31,7 @@ const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, di
           }
           cellValue = (
             <div className='col-12'>
-              <LegendCircle viewport={viewport} fill={legendColor[0]} />
+              <LegendShape fill={legendColor[0]} />
               <CellAnchor markup={labelValue} row={rowObj} columns={columns} navigationHandler={navigationHandler} mapZoomHandler={mapZoomHandler} />
             </div>
           )

package/components/DataTable/types/TableConfig.ts

@@ -2,7 +2,7 @@ import { Axis } from '../../../types/Axis'
 import { Runtime } from '../../../types/Runtime'
 import { Region } from '../../../types/Region'
 import { BoxPlot } from '../../../types/BoxPlot'
-import { PreliminaryDataItem } from '@cdc/chart/src/components/LineChart/LineChartProps'
+import { type PreliminaryDataItem } from '@cdc/chart/src/types/ChartConfig'
 import { Visualization } from '../../../types/Visualization'
 
 export type TableConfig = Visualization & {
@@ -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

package/components/EditorPanel/FootnotesEditor.tsx

@@ -0,0 +1,77 @@
+import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
+import _ from 'lodash'
+import Footnotes, { Footnote } from '../../types/Footnotes'
+import { footnotesSymbols } from '../../helpers/footnoteSymbols'
+import InputSelect from '../inputs/InputSelect'
+import { TextField } from './Inputs'
+interface FootnotesEditorProps {
+  config: Footnotes
+  updateField: UpdateFieldFunc<Footnote[]>
+}
+
+const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField }) => {
+  const addStaticFootnote = () => {
+    const newStaticNotes = [...(config.staticFootnotes || []), { text: 'Add Footnote Text' }]
+    updateField(null, null, 'staticFootnotes', newStaticNotes)
+  }
+
+  const updateStaticFootnote = (footnoteIndex, footnoteUpdate: Footnote) => {
+    const footnoteCopy = _.cloneDeep(config.staticFootnotes)
+    footnoteCopy[footnoteIndex] = footnoteUpdate
+    updateField(null, null, 'staticFootnotes', footnoteCopy)
+  }
+
+  const deleteStaticFootnote = footnoteIndex => {
+    const footnoteCopy = _.cloneDeep(config.staticFootnotes)
+    footnoteCopy.splice(footnoteIndex, 1)
+    updateField(null, null, 'staticFootnotes', footnoteCopy)
+  }
+
+  const getOptions = (opts: string[]) => {
+    return [['', '--Select--']].concat(opts.map(key => [key, key]))
+  }
+
+  const datasets = config.datasets || {}
+
+  const dataColumns = config.dataKey ? getOptions(Object.keys(datasets[config.dataKey]?.data?.[0] || {})) : []
+  const dataSetOptions = getOptions(Object.keys(datasets))
+  return (
+    <>
+      <em>Dynamic Footnotes</em>
+      <div className='row border p-2'>
+        <InputSelect label='Select a Footnote Dataset' value={config.dataKey} options={dataSetOptions} fieldName='dataKey' updateField={updateField} />
+
+        {config.dataKey && (
+          <div className='p-3'>
+            <InputSelect label='Footnote Symbol Column' value={config.dynamicFootnotes?.symbolColumn} options={dataColumns} section='dynamicFootnotes' fieldName='symbolColumn' updateField={updateField} />
+            <InputSelect label='Footnote Text Column' value={config.dynamicFootnotes?.textColumn} options={dataColumns} section='dynamicFootnotes' fieldName='textColumn' updateField={updateField} />
+            <InputSelect label='Footnote Order Column' value={config.dynamicFootnotes?.orderColumn} options={dataColumns} section='dynamicFootnotes' fieldName='orderColumn' updateField={updateField} />
+          </div>
+        )}
+      </div>
+
+      <hr />
+
+      <em>Static Footnotes</em>
+
+      {config.staticFootnotes?.map((note, index) => (
+        <div key={index} className='row border p-2'>
+          <div className='col-8'>
+            <InputSelect label='Symbol' value={note.symbol} options={[['', '--Select--'], ...footnotesSymbols]} fieldName='symbol' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, symbol: value })} />{' '}
+            <TextField label='Text' value={note.text} fieldName='text' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, text: value })} />
+          </div>
+          <div className='col-2 ml-4'>
+            <button className='btn btn-danger p-1' onClick={() => deleteStaticFootnote(index)}>
+              Delete
+            </button>
+          </div>
+        </div>
+      ))}
+      <button className='btn btn-primary' onClick={addStaticFootnote}>
+        Add Static Footnote
+      </button>
+    </>
+  )
+}
+
+export default FootnotesEditor

package/components/EditorPanel/Inputs.tsx

@@ -9,6 +9,7 @@ export type Input = {
   subsection?: any
   updateField?: Function
   fieldName?: string
+  display?: boolean
 }
 
 export type TextFieldProps = {
@@ -39,7 +40,7 @@ export type SelectProps = {
 } & Input
 
 const TextField = memo((props: TextFieldProps) => {
-  const { label, tooltip, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'text', i = null, min = null, ...attributes } = props
+  const { display = true, label, tooltip, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'text', i = null, min = null, ...attributes } = props
   const [value, setValue] = useState(stateValue)
   const [debouncedValue] = useDebounce(value, 500)
 
@@ -76,6 +77,9 @@ const TextField = memo((props: TextFieldProps) => {
   if ('date' === type) {
     formElement = <input type='date' name={name} onChange={onChange} {...attributes} value={value} />
   }
+  if (!display) {
+    return <></>
+  }
 
   return (
     <label>
@@ -89,8 +93,10 @@ const TextField = memo((props: TextFieldProps) => {
 })
 
 const CheckBox = memo((props: CheckboxProps) => {
-  const { label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes } = props
-
+  const { display = true, label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes } = props
+  if (!display) {
+    return <></>
+  }
   return (
     <label className='checkbox column-heading'>
       <input
@@ -111,7 +117,7 @@ const CheckBox = memo((props: CheckboxProps) => {
 })
 
 const Select = memo((props: SelectProps) => {
-  const { label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, updateField, initial: initialValue, ...attributes } = props
+  const { display = true, label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, updateField, initial: initialValue, ...attributes } = props
   let optionsJsx = options.map((optionName, index) => (
     <option value={optionName} key={index}>
       {optionName}
@@ -125,6 +131,9 @@ const Select = memo((props: SelectProps) => {
       </option>
     )
   }
+  if (!display) {
+    return <></>
+  }
 
   return (
     <label>