@cdc/chart 4.23.7 → 4.23.8

package/src/components/ForestPlot.jsx

@@ -0,0 +1,191 @@
+import React, { useContext, useEffect } from 'react'
+
+// visx
+import { Group } from '@visx/group'
+import { Line, Bar, Circle, LinePath } from '@visx/shape'
+import { GlyphDiamond } from '@visx/glyph'
+import { Text } from '@visx/text'
+import { scaleLinear } from '@visx/scale'
+import { curveLinearClosed } from '@visx/curve'
+
+// cdc
+import ConfigContext from '../ConfigContext'
+import { getFontSize } from '@cdc/core/helpers/cove/number'
+
+const ForestPlot = props => {
+  const { transformedData: data, updateConfig, dimensions, rawData } = useContext(ConfigContext)
+  const { xScale, yScale, config, height, width, handleTooltipMouseOff, handleTooltipMouseOver, maxWidth, maxHeight } = props
+  const { forestPlot, runtime, dataFormat } = config
+  const [screenWidth, screenHeight] = dimensions
+
+  // Requirements for forest plot
+  // - force legend to be hidden for this chart type
+  // - reset the date category axis to zero
+  useEffect(() => {
+    if (!config.legend.hide) {
+      updateConfig({
+        ...config,
+        legend: {
+          ...config.legend,
+          hide: true
+        },
+        xAxis: {
+          ...config.xAxis,
+          size: 0
+        }
+      })
+    }
+  }, [])
+
+  const diamondHeight = 5
+
+  // diamond path
+  const regressionPoints = [
+    { x: xScale(forestPlot.regression.lower), y: height - Number(config.forestPlot.rowHeight) },
+    { x: xScale(forestPlot.regression.estimateField), y: height - diamondHeight - Number(config.forestPlot.rowHeight) },
+    { x: xScale(forestPlot.regression.upper), y: height - Number(config.forestPlot.rowHeight) },
+    { x: xScale(forestPlot.regression.estimateField), y: height + diamondHeight - Number(config.forestPlot.rowHeight) },
+    { x: xScale(forestPlot.regression.lower), y: height - Number(config.forestPlot.rowHeight) }
+  ]
+
+  const topMarginOffset = config.forestPlot.rowHeight
+
+  const topLine = [
+    { x: 0, y: topMarginOffset },
+    { x: width, y: topMarginOffset }
+  ]
+
+  const bottomLine = [
+    { x: 0, y: height },
+    { x: width, y: height }
+  ]
+
+  const columnsOnChart = Object.entries(config.columns)
+    .map(entry => entry[1])
+    .filter(entry => entry.forestPlot === true)
+
+  const rightOffset = forestPlot.rightWidthOffset !== 0 ? (Number(forestPlot.rightWidthOffset) / 100) * width : width
+  const leftOffset = forestPlot.leftWidthOffset !== 0 ? (Number(forestPlot.leftWidthOffset) / 100) * width : width
+  const chartWidth = width - rightOffset - leftOffset
+
+  return (
+    <>
+      <Group>
+        {forestPlot.title !== '' && (
+          <Text className={`forest-plot--title`} x={xScale(0)} y={0} textAnchor='middle' verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+            {forestPlot.title}
+          </Text>
+        )}
+        {forestPlot.regression.showBaseLine && <Line from={{ x: xScale(forestPlot.regression.estimateField), y: 0 + topMarginOffset }} to={{ x: xScale(forestPlot.regression.estimateField), y: height }} className='forestplot__baseline' stroke={forestPlot.regression.baseLineColor || 'black'} />}
+        {forestPlot.showZeroLine && <Line from={{ x: xScale(0), y: 0 + topMarginOffset }} to={{ x: xScale(0), y: height }} className='forestplot__zero-line' stroke='gray' strokeDasharray={'5 5'} />}
+
+        {data.map((d, i) => {
+          // calculate both square and circle size based on radius.min and radius.max
+          const scaleRadius = scaleLinear({
+            domain: xScale.domain(),
+            range: [forestPlot.radius.min, forestPlot.radius.max]
+          })
+
+          // glyph settings
+          const diamondSize = forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.estimateField]) * 5 : 4
+          const rectSize = forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.estimateField]) : 4
+          const shapeColor = forestPlot.colors.shape ? forestPlot.colors.shape : 'black'
+          const lineColor = forestPlot.colors.line ? forestPlot.colors.line : 'black'
+
+          // ci size
+          const ciEndSize = 4
+
+          return (
+            <Group>
+              {/* Confidence Interval Paths */}
+              <path
+                stroke={lineColor}
+                strokeWidth={1}
+                className='lower-ci'
+                d={`
+                    M${xScale(d[forestPlot.lower])} ${yScale(i) - Number(ciEndSize)}
+                    L${xScale(d[forestPlot.lower])} ${yScale(i) + Number(ciEndSize)}
+                `}
+              />
+
+              <path
+                stroke={lineColor}
+                strokeWidth={1}
+                className='upper-ci'
+                d={`
+                    M${xScale(d[forestPlot.upper])} ${yScale(i) - Number(ciEndSize)}
+                    L${xScale(d[forestPlot.upper])} ${yScale(i) + Number(ciEndSize)}
+                `}
+              />
+
+              {/* main line */}
+              <line stroke={lineColor} className={`line-${d[config.yAxis.dataKey]}`} key={i} x1={xScale(d[forestPlot.lower])} x2={xScale(d[forestPlot.upper])} y1={yScale(i)} y2={yScale(i)} />
+              {forestPlot.shape === 'circle' && (
+                <Circle className='forest-plot--circle' cx={xScale(Number(d[forestPlot.estimateField]))} cy={yScale(i)} r={forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.estimateField]) : 4} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />
+              )}
+              {forestPlot.shape === 'square' && <rect className='forest-plot--square' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i) - rectSize / 2} width={rectSize} height={rectSize} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />}
+              {forestPlot.shape === 'diamond' && <GlyphDiamond className='forest-plot--diamond' size={diamondSize} top={yScale(i)} left={xScale(Number(d[forestPlot.estimateField]))} fill={shapeColor} />}
+              {forestPlot.shape === 'text' && (
+                <Text className='forest-plot--text' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i)} textAnchor='middle' verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={shapeColor}>
+                  {d[forestPlot.estimateField]}
+                </Text>
+              )}
+            </Group>
+          )
+        })}
+
+        {/* regression diamond */}
+        {regressionPoints && forestPlot.regression.showDiamond && <LinePath data={regressionPoints} x={d => d.x} y={d => d.y} stroke='black' strokeWidth={2} fill={forestPlot.regression.baseLineColor} curve={curveLinearClosed} />}
+        {/* regression text */}
+        {forestPlot.regression.description && (
+          <Text x={0 - Number(config.xAxis.size)} width={width} y={height - config.forestPlot.rowHeight - Number(forestPlot.rowHeight) / 3} verticalAnchor='start' textAnchor='start' style={{ fontWeight: 'bold', fontSize: 12 }}>
+            {forestPlot.regression.description}
+          </Text>
+        )}
+
+        <Bar key='forest-plot-tooltip-area' className='forest-plot-tooltip-area' width={width} height={height} fill={false ? 'red' : 'transparent'} fillOpacity={0.5} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
+      </Group>
+      <Line from={topLine[0]} to={topLine[1]} style={{ stroke: 'black', strokeWidth: 2 }} className='forestplot__top-line' />
+      <Line from={bottomLine[0]} to={bottomLine[1]} style={{ stroke: 'black', strokeWidth: 2 }} className='forestplot__bottom-line' />
+
+      {/* column data */}
+      {columnsOnChart.map(column => {
+        return rawData.map((d, i) => {
+          return (
+            <Text className={`${d[column.name]}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={yScale(i)} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+              {d[column.name]}
+            </Text>
+          )
+        })
+      })}
+
+      {/* X Axis DataKey Cols*/}
+      {!forestPlot.hideDateCategoryCol &&
+        data.map((d, i) => {
+          return (
+            <Text className={`${d[config.xAxis.dataKey]}`} x={0} y={yScale(i)} textAnchor={'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+              {d[config.xAxis.dataKey]}
+            </Text>
+          )
+        })}
+
+      {/* X Axis Datakey Header */}
+      {!forestPlot.hideDateCategoryCol && config.xAxis.dataKey && (
+        <Text className={config.xAxis.dataKey} x={0} y={0} textAnchor={'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+          {config.xAxis.dataKey}
+        </Text>
+      )}
+
+      {/* column headers */}
+      {columnsOnChart.map(column => {
+        return (
+          <Text className={`${column.label}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={0} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+            {column.label}
+          </Text>
+        )
+      })}
+    </>
+  )
+}
+
+export default ForestPlot

package/src/components/ForestPlotSettings.jsx

@@ -0,0 +1,508 @@
+import React, { useContext, memo, useState, useEffect } from 'react'
+import ConfigContext from '../ConfigContext'
+import { useDebounce } from 'use-debounce'
+import WarningImage from '../images/warning.svg'
+
+import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+
+const Select = memo(({ label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, updateField, initial: initialValue, ...attributes }) => {
+  let optionsJsx = options.map((optionName, index) => (
+    <option value={optionName} key={index}>
+      {optionName}
+    </option>
+  ))
+
+  if (initialValue) {
+    optionsJsx.unshift(
+      <option value='' key='initial'>
+        {initialValue}
+      </option>
+    )
+  }
+
+  return (
+    <label>
+      <span className='edit-label'>
+        {label}
+        {tooltip}
+      </span>
+      <select
+        className={required && !value ? 'warning' : ''}
+        name={fieldName}
+        value={value}
+        onChange={event => {
+          updateField(section, subsection, fieldName, event.target.value)
+        }}
+        {...attributes}
+      >
+        {optionsJsx}
+      </select>
+    </label>
+  )
+})
+
+const CheckBox = memo(({ label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes }) => (
+  <label className='checkbox column-heading'>
+    <input
+      type='checkbox'
+      name={fieldName}
+      checked={value}
+      onChange={e => {
+        updateField(section, subsection, fieldName, !value)
+      }}
+      {...attributes}
+    />
+    <span className='edit-label'>
+      {label}
+      {tooltip}
+    </span>
+  </label>
+))
+
+/* eslint-disable react-hooks/rules-of-hooks */
+const TextField = memo(({ label, tooltip, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'input', i = null, min = null, ...attributes }) => {
+  const [value, setValue] = useState(stateValue)
+
+  const [debouncedValue] = useDebounce(value, 500)
+
+  useEffect(() => {
+    if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
+      updateField(section, subsection, fieldName, debouncedValue, i)
+    }
+  }, [debouncedValue]) // eslint-disable-line
+
+  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
+
+  const onChange = e => {
+    if ('number' !== type || min === null) {
+      setValue(e.target.value)
+    } else {
+      if (!e.target.value || min <= parseFloat(e.target.value)) {
+        setValue(e.target.value)
+      } else {
+        setValue(min.toString())
+      }
+    }
+  }
+
+  let formElement = <input type='text' name={name} onChange={onChange} {...attributes} value={value} />
+
+  if ('textarea' === type) {
+    formElement = <textarea name={name} onChange={onChange} {...attributes} value={value}></textarea>
+  }
+
+  if ('number' === type) {
+    formElement = <input type='number' name={name} onChange={onChange} {...attributes} value={value} />
+  }
+
+  if ('date' === type) {
+    formElement = <input type='date' name={name} onChange={onChange} {...attributes} value={value} />
+  }
+
+  return (
+    <label>
+      <span className='edit-label column-heading'>
+        {label}
+        {tooltip}
+      </span>
+      {formElement}
+    </label>
+  )
+})
+
+const ForestPlotSettings = () => {
+  const { config, rawData: unfilteredData, updateConfig, isDebug } = useContext(ConfigContext)
+
+  const enforceRestrictions = updatedConfig => {
+    if (updatedConfig.orientation === 'horizontal') {
+      updatedConfig.labels = false
+    }
+    if (updatedConfig.table.show === undefined) {
+      updatedConfig.table.show = !isDashboard
+    }
+    // DEV-3293 - Force combo to always be vertical
+    if (updatedConfig.visualizationType === 'Combo') {
+      updatedConfig.orientation = 'vertical'
+    }
+  }
+
+  const getColumns = (filter = true) => {
+    let columns = {}
+    unfilteredData.forEach(row => {
+      Object.keys(row).forEach(columnName => (columns[columnName] = true))
+    })
+
+    if (filter) {
+      Object.keys(columns).forEach(key => {
+        if (
+          (config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
+          (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))
+          /*
+            TODO: Resolve errors when config keys exist, but have no value
+              Proposal:  (((confidenceUpper && confidenceLower) || confidenceUpper || confidenceLower) && Object.keys(config.confidenceKeys).includes(key))
+          */
+        ) {
+          delete columns[key]
+        }
+      })
+    }
+
+    return Object.keys(columns)
+  }
+
+  const updateField = (section, subsection, fieldName, newValue) => {
+    if (section === 'boxplot' && subsection === 'legend') {
+      updateConfig({
+        ...config,
+        [section]: {
+          ...config[section],
+          [subsection]: {
+            ...config.boxplot[subsection],
+            [fieldName]: newValue
+          }
+        }
+      })
+      return
+    }
+
+    if (section === 'boxplot' && subsection === 'labels') {
+      updateConfig({
+        ...config,
+        [section]: {
+          ...config[section],
+          [subsection]: {
+            ...config.boxplot[subsection],
+            [fieldName]: newValue
+          }
+        }
+      })
+      return
+    }
+
+    if (section === 'forestPlot' && subsection) {
+      updateConfig({
+        ...config,
+        [section]: {
+          ...config[section],
+          [subsection]: {
+            ...config.forestPlot[subsection],
+            [fieldName]: newValue
+          }
+        }
+      })
+      return
+    }
+
+    if (section === 'columns' && subsection !== '' && fieldName !== '') {
+      updateConfig({
+        ...config,
+        [section]: {
+          ...config[section],
+          [subsection]: {
+            ...config[section][subsection],
+            [fieldName]: newValue
+          }
+        }
+      })
+      return
+    }
+    if (null === section && null === subsection) {
+      let updatedConfig = { ...config, [fieldName]: newValue }
+      enforceRestrictions(updatedConfig)
+      updateConfig(updatedConfig)
+      return
+    }
+
+    const isArray = Array.isArray(config[section])
+
+    let sectionValue = isArray ? [...config[section], newValue] : { ...config[section], [fieldName]: newValue }
+
+    if (null !== subsection) {
+      if (isArray) {
+        sectionValue = [...config[section]]
+        sectionValue[subsection] = { ...sectionValue[subsection], [fieldName]: newValue }
+      } else if (typeof newValue === 'string') {
+        sectionValue[subsection] = newValue
+      } else {
+        sectionValue = { ...config[section], [subsection]: { ...config[section][subsection], [fieldName]: newValue } }
+      }
+    }
+
+    let updatedConfig = { ...config, [section]: sectionValue }
+
+    enforceRestrictions(updatedConfig)
+
+    updateConfig(updatedConfig)
+  }
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>
+          Forest Plot Settings
+          {(!config.forestPlot.estimateField || !config.forestPlot.upper || !config.forestPlot.lower) && <WarningImage width='25' className='warning-icon' />}
+        </AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        <TextField type='text' value={config.forestPlot?.title || ''} updateField={updateField} section='forestPlot' fieldName='title' label='Plot Title' />
+
+        {/* width in center */}
+        {/* <label>
+          <span className='edit-label column-heading'>Forest Plot Width (%)</span>
+          <input
+            type='number'
+            min={0}
+            max={100}
+            value={config.forestPlot.width || ''}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  width: e.target.value
+                }
+              })
+            }}
+          />
+        </label> */}
+
+        <label>
+          <span className='edit-label column-heading'>Chart Offset Left (%)</span>
+          <input
+            type='number'
+            min={0}
+            max={100}
+            value={config.forestPlot.leftWidthOffset || 0}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  leftWidthOffset: e.target.value
+                }
+              })
+            }}
+          />
+        </label>
+
+        <label>
+          <span className='edit-label column-heading'>Chart Offset Left Mobile(%)</span>
+          <input
+            type='number'
+            min={0}
+            max={100}
+            value={config.forestPlot.leftWidthOffsetMobile || 0}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  leftWidthOffsetMobile: e.target.value
+                }
+              })
+            }}
+          />
+        </label>
+
+        <label>
+          <span className='edit-label column-heading'>Chart Offset Right (%)</span>
+          <input
+            type='number'
+            min={0}
+            max={100}
+            value={config.forestPlot.rightWidthOffset || 0}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  rightWidthOffset: e.target.value
+                }
+              })
+            }}
+          />
+        </label>
+
+        <label>
+          <span className='edit-label column-heading'>Chart Offset Right Mobile(%)</span>
+          <input
+            type='number'
+            min={0}
+            max={100}
+            value={config.forestPlot.rightWidthOffsetMobile || 0}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  rightWidthOffsetMobile: e.target.value
+                }
+              })
+            }}
+          />
+        </label>
+
+        <Select
+          value={config.forestPlot.estimateField}
+          label='Point Estimate Column'
+          initial={'Select'}
+          required={true}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  estimateField: e.target.value
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={getColumns(false)}
+        />
+
+        <Select
+          value={config.forestPlot.lower}
+          label='Lower CI Column'
+          required={true}
+          initial={'Select'}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  lower: e.target.value
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={getColumns(false)}
+        />
+        <Select
+          value={config.forestPlot.upper}
+          label='Upper CI Column'
+          initial={'Select'}
+          required={true}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  upper: e.target.value
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={getColumns(false)}
+        />
+
+        <CheckBox value={config.forestPlot.showZeroLine} section='forestPlot' fieldName='showZeroLine' label='Show Line on Zero' updateField={updateField} />
+        <Select
+          value={config.forestPlot.shape}
+          label='Point Estimate Shape'
+          initial={'Select'}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  shape: e.target.value
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={['text', 'circle', 'square', 'diamond']}
+        />
+        <Select
+          value={config.forestPlot.radius.scalingColumn}
+          label='Scale Radius Column'
+          initial={'Select'}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  radius: {
+                    ...config.forestPlot.radius,
+                    scalingColumn: e.target.value
+                  }
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={getColumns(false)}
+        />
+        <label>
+          <span className='edit-label column-heading'>Radius Minimum Size</span>
+          <input
+            min={1}
+            max={5}
+            value={config.forestPlot.radius.min}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  radius: {
+                    ...config.forestPlot.radius,
+                    min: Number(e.target.value)
+                  }
+                }
+              })
+            }}
+            type='number'
+            label='Radius Minimum'
+            placeholder=' 1'
+          />
+        </label>
+        <label>
+          <span className='edit-label column-heading'>Radius Maximum Size</span>
+          <input
+            min={5}
+            max={10}
+            value={config.forestPlot.radius.max}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  radius: {
+                    ...config.forestPlot.radius,
+                    max: Number(e.target.value)
+                  }
+                }
+              })
+            }}
+            type='number'
+            label='Radius Minimum'
+            placeholder=' 1'
+          />
+        </label>
+        <TextField type='number' min={20} max={45} value={config.forestPlot.rowHeight ? config.forestPlot.rowHeight : 10} updateField={updateField} section='forestPlot' fieldName='rowHeight' label='Row Height' placeholder='10' />
+        <br />
+        <hr />
+        <br />
+        <h4>Add Regression Line</h4>
+        <TextField type='number' value={config.forestPlot?.regression?.upper || ''} updateField={updateField} section='forestPlot' subsection='regression' fieldName='upper' label='Upper Value' />
+        <TextField type='number' value={config.forestPlot?.regression?.lower || ''} updateField={updateField} section='forestPlot' subsection='regression' fieldName='lower' label='Lower Value' />
+        <TextField type='number' value={config.forestPlot?.regression?.estimateField || ''} updateField={updateField} section='forestPlot' subsection='regression' fieldName='estimateField' label='Estimate Value' />
+        <TextField type='text' value={config.forestPlot?.regression?.baseLineColor || 'black'} updateField={updateField} section='forestPlot' subsection='regression' fieldName='baseLineColor' label='Base Color' />
+        <CheckBox value={config.forestPlot?.regression?.showBaseLine || false} section='forestPlot' subsection='regression' fieldName='showBaseLine' label='Show base line' updateField={updateField} />
+        <CheckBox value={config.forestPlot?.regression?.showDiamond || false} section='forestPlot' subsection='regression' fieldName='showDiamond' label='Show Diamond' updateField={updateField} />
+        <CheckBox value={config.forestPlot?.hideDateCategoryCol || false} section='forestPlot' fieldName='hideDateCategoryCol' label='Hide Date Category Column' updateField={updateField} />
+        <TextField type='text' value={config.forestPlot?.regression?.description || ''} updateField={updateField} section='forestPlot' subsection='regression' fieldName='description' label='Description' />
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default ForestPlotSettings