@cdc/chart 4.23.11 → 4.24.2

package/src/components/EditorPanel/components/Panels/Panel.General.tsx

@@ -0,0 +1,160 @@
+import { useContext, FC } from 'react'
+
+// external libraries
+import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
+
+// core
+import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+
+// contexts
+import { useEditorPermissions } from '../../useEditorPermissions.js'
+import { useEditorPanelContext } from '../../EditorPanelContext.js'
+import ConfigContext from '../../../../ConfigContext.js'
+import { PanelProps } from '../PanelProps'
+
+const PanelGeneral: FC<PanelProps> = props => {
+  const { config } = useContext(ConfigContext)
+  const { updateField } = useEditorPanelContext()
+  const { enabledChartTypes, visHasNumbersOnBars, visHasLabelOnData, visSupportsChartHeight, visSupportsSuperTitle, visSupportsFootnotes } = useEditorPermissions()
+  const { visualizationType, visualizationSubType, barStyle } = config
+
+  const showBarStyleOptions = () => {
+    if ((visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && visualizationSubType !== 'stacked' && (config.orientation === 'horizontal' || config.orientation === 'vertical')) {
+      return ['flat', 'rounded', 'lollipop']
+    } else {
+      return ['flat', 'rounded']
+    }
+  }
+
+  return (
+    <AccordionItem>
+      {' '}
+      {/* General */}
+      <AccordionItemHeading>
+        <AccordionItemButton>General</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        <Select value={visualizationType} fieldName='visualizationType' label='Chart Type' updateField={updateField} options={enabledChartTypes} />
+        {(visualizationType === 'Bar' || visualizationType === 'Combo' || visualizationType === 'Area Chart') && <Select value={visualizationSubType || 'Regular'} fieldName='visualizationSubType' label='Chart Subtype' updateField={updateField} options={['regular', 'stacked']} />}
+        {visualizationType === 'Area Chart' && visualizationSubType === 'stacked' && <Select value={config.stackedAreaChartLineType || 'Linear'} fieldName='stackedAreaChartLineType' label='Stacked Area Chart Line Type' updateField={updateField} options={Object.keys(approvedCurveTypes)} />}
+        {visualizationType === 'Bar' && <Select value={config.orientation || 'vertical'} fieldName='orientation' label='Orientation' updateField={updateField} options={['vertical', 'horizontal']} />}
+        {visualizationType === 'Deviation Bar' && <Select label='Orientation' options={['horizontal']} />}
+        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && <Select value={config.isLollipopChart ? 'lollipop' : barStyle || 'flat'} fieldName='barStyle' label='bar style' updateField={updateField} options={showBarStyleOptions()} />}
+        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && barStyle === 'rounded' && <Select value={config.tipRounding || 'top'} fieldName='tipRounding' label='tip rounding' updateField={updateField} options={['top', 'full']} />}
+        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && barStyle === 'rounded' && <Select value={config.roundingStyle || 'standard'} fieldName='roundingStyle' label='rounding style' updateField={updateField} options={['standard', 'shallow', 'finger']} />}
+        {visualizationType === 'Bar' && config.orientation === 'horizontal' && <Select value={config.yAxis.labelPlacement || 'Below Bar'} section='yAxis' fieldName='labelPlacement' label='Label Placement' updateField={updateField} options={['Below Bar', 'On Date/Category Axis']} />}
+        {visHasNumbersOnBars() ? (
+          <CheckBox value={config.yAxis.displayNumbersOnBar} section='yAxis' fieldName='displayNumbersOnBar' label={config.isLollipopChart ? 'Display Numbers after Bar' : 'Display Numbers on Bar'} updateField={updateField} />
+        ) : (
+          visHasLabelOnData() && <CheckBox value={config.labels} fieldName='labels' label='Display label on data' updateField={updateField} />
+        )}
+        {visualizationType === 'Pie' && <Select fieldName='pieType' label='Pie Chart Type' updateField={updateField} options={['Regular', 'Donut']} />}
+
+        <TextField
+          value={config.title || 'Chart Title'}
+          fieldName='title'
+          id='title'
+          label='Title'
+          placeholder='Chart Title'
+          //defaultValue='Chart Title'
+          updateField={updateField}
+          //onChange={handleTitleChange}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Title is required to set the name of the download file but can be hidden using the option below.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+        <CheckBox value={config.showTitle} fieldName='showTitle' label='Show Title' updateField={updateField} />
+
+        {visSupportsSuperTitle() && (
+          <TextField
+            value={config.superTitle}
+            updateField={updateField}
+            fieldName='superTitle'
+            label='Super Title'
+            placeholder='Super Title'
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Super Title</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+        )}
+
+        <TextField
+          type='textarea'
+          value={config.introText}
+          updateField={updateField}
+          fieldName='introText'
+          label='Message'
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Intro Text</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        <TextField
+          type='textarea'
+          value={config.description}
+          fieldName='description'
+          label='Subtext/Citation'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Enter supporting text to display below the data visualization, if applicable. The following HTML tags are supported: strong, em, sup, and sub.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        {visSupportsFootnotes() && (
+          <TextField
+            type='textarea'
+            value={config.footnotes}
+            updateField={updateField}
+            fieldName='footnotes'
+            label='Footnotes'
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Footnotes</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+        )}
+
+        {visSupportsChartHeight() && config.orientation === 'vertical' && <TextField type='number' value={config.heights.vertical} section='heights' fieldName='vertical' label='Chart Height' updateField={updateField} />}
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default PanelGeneral

package/src/components/EditorPanel/components/Panels/Panel.Regions.tsx

@@ -0,0 +1,168 @@
+import { memo, useContext } from 'react'
+import { useEditorPermissions } from '../../useEditorPermissions.js'
+import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import { type ChartConfig } from '../../../../types/ChartConfig.js'
+import { TextField, Select } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import { type ChartContext } from '../../../../types/ChartContext.js'
+import { type PanelProps } from '../PanelProps.js'
+import ConfigContext from '../../../../ConfigContext.js'
+
+const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; updateConfig: Function }) => {
+  let regionUpdate = (fieldName, value, i) => {
+    let regions = []
+
+    if (config.regions) {
+      regions = [...config.regions]
+    }
+
+    regions[i][fieldName] = value
+    updateConfig({ ...config, regions })
+  }
+
+  // only for Regions
+  let updateField = (section, subsection, fieldName, value, i) => regionUpdate(fieldName, value, i)
+
+  let removeColumn = i => {
+    let regions = []
+
+    if (config.regions) {
+      regions = [...config.regions]
+    }
+
+    regions.splice(i, 1)
+
+    updateConfig({ ...config, regions })
+  }
+
+  let addColumn = () => {
+    let regions = []
+
+    if (config.regions) {
+      regions = [...config.regions]
+    }
+
+    regions.push({})
+
+    updateConfig({ ...config, regions })
+  }
+
+  const fromOptions = ['Fixed', 'Previous Days']
+  const toOptions = ['Last Date', 'Fixed']
+
+  return (
+    <>
+      {config.regions &&
+        config.regions.map(({ label, color, from, to, background, range = 'Custom' }, i) => (
+          <div className='edit-block' key={`region-${i}`}>
+            <button
+              type='button'
+              className='remove-column'
+              onClick={event => {
+                event.preventDefault()
+                removeColumn(i)
+              }}
+            >
+              Remove
+            </button>
+            <TextField value={label} label='Region Label' fieldName='label' i={i} updateField={updateField} />
+            <div className='two-col-inputs'>
+              <TextField value={color} label='Text Color' fieldName='color' updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)} />
+              <TextField value={background} label='Background' fieldName='background' updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)} />
+            </div>
+
+            <Select
+              value={config.regions[i].fromType ?? 'Fixed'}
+              label='Minimum Region Type'
+              initial={'Select'}
+              required={true}
+              onChange={e => {
+                if (e.target.value !== '' && e.target.value !== 'Select') {
+                  const newRegions = [...config.regions]
+                  newRegions[i].fromType = e.target.value
+                  updateConfig({
+                    ...config,
+                    regions: newRegions
+                  })
+                }
+                e.target.value = ''
+              }}
+              options={fromOptions}
+            />
+
+            {(config.regions[i].fromType === 'Fixed' || config.regions[i].fromType === 'Previous Days' || !config.regions[i].fromType) && (
+              <>
+                <TextField
+                  value={from}
+                  label={config.regions[i].fromType === 'Fixed' || !config.regions[i]?.fromType ? 'From Value' : 'Previous Number of Days'}
+                  fieldName='from'
+                  updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
+                  tooltip={
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>The date needs to be in the original format of the data. Not the displayed format of the data.</p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  }
+                />
+              </>
+            )}
+
+            <Select
+              value={config.regions[i].toType ?? 'Fixed'}
+              label='Maximum Region Type'
+              initial={'Select'}
+              required={true}
+              onChange={e => {
+                if (e.target.value !== '' && e.target.value !== 'Select') {
+                  const newRegions = [...config.regions]
+                  newRegions[i].toType = e.target.value
+                  updateConfig({
+                    ...config,
+                    regions: newRegions
+                  })
+                }
+                e.target.value = ''
+              }}
+              options={toOptions}
+            />
+
+            {(config.regions[i].toType === 'Fixed' || !config.regions[i].toType) && <TextField value={to} label='To Value' fieldName='to' updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)} />}
+          </div>
+        ))}
+      {!config.regions && <p style={{ textAlign: 'center' }}>There are currently no regions.</p>}
+      <button
+        type='button'
+        className='btn full-width'
+        onClick={e => {
+          e.preventDefault()
+          addColumn()
+        }}
+      >
+        Add Region
+      </button>
+    </>
+  )
+})
+
+const RegionsPanel = ({ name }: PanelProps) => {
+  const { visSupportsRegions } = useEditorPermissions()
+  const { config, updateConfig } = useContext<ChartContext>(ConfigContext)
+
+  return visSupportsRegions() ? (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>{name}</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        <RegionSettings config={config} updateConfig={updateConfig} />
+      </AccordionItemPanel>
+    </AccordionItem>
+  ) : null
+}
+
+export default RegionsPanel

package/src/components/{Series.jsx → EditorPanel/components/Panels/Panel.Series.tsx}

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import ConfigContext from '../ConfigContext'
+import ConfigContext from '../../../../ConfigContext'
 
 // Core
 import InputSelect from '@cdc/core/components/inputs/InputSelect'
@@ -427,9 +427,7 @@ const SeriesDropdownConfidenceInterval = props => {
 const SeriesInputName = props => {
   const { series, index: i } = props
   const { config, updateConfig } = useContext(ConfigContext)
-  const adjustableNameSeriesTypes = ['Bar', 'Line', 'Area Chart', 'dashed-sm', 'dashed-md', 'dashed-lg']
-
-  if (config.visualizationType === 'Combo') return
+  const adjustableNameSeriesTypes = ['Bar', 'Line', 'Area Chart', 'Combo', 'Deviation', 'Paired', 'Scatter', 'dashed-sm', 'dashed-md', 'dashed-lg']
 
   if (!adjustableNameSeriesTypes.includes(series.type)) return
 
@@ -470,6 +468,8 @@ const SeriesDisplayInTooltip = props => {
   const { series, index } = props
   const { config, updateConfig } = useContext(ConfigContext)
 
+  if(['Paired Bar', 'Scatter Plot', 'Deviation Bar'].includes(config.visualizationType)) return
+
   const toggleTooltip = seriesIndex => {
     let copiedSeries = [...config.series]
 

package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx

@@ -0,0 +1,297 @@
+import { useContext, FC } from 'react'
+
+// external libraries
+import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+
+// core
+import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import InputToggle from '@cdc/core/components/inputs/InputToggle'
+
+// contexts
+import { useColorPalette } from '../../../../hooks/useColorPalette'
+import { ChartContext } from './../../../../types/ChartContext.js'
+
+import { useEditorPermissions } from '../../useEditorPermissions.js'
+import { useEditorPanelContext } from '../../EditorPanelContext.js'
+import ConfigContext from '../../../../ConfigContext.js'
+import { PanelProps } from '../PanelProps'
+
+const PanelVisual: FC<PanelProps> = props => {
+  const { config, updateConfig, colorPalettes, twoColorPalette } = useContext<ChartContext>(ConfigContext)
+  const { visual } = config
+  const { setLollipopShape, updateField } = useEditorPanelContext()
+  const { visHasBarBorders, visCanAnimate, visSupportsNonSequentialPallete, headerColors, visSupportsTooltipOpacity, visSupportsTooltipLines, visSupportsBarSpace, visSupportsBarThickness, visHasDataCutoff, visSupportsSequentialPallete, visSupportsReverseColorPalette } = useEditorPermissions()
+  const { twoColorPalettes, sequential, nonSequential } = useColorPalette(config, updateConfig)
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>Visual</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        {config.isLollipopChart && (
+          <>
+            <fieldset className='header'>
+              <legend className='edit-label'>Lollipop Shape</legend>
+              <div
+                onChange={e => {
+                  setLollipopShape(e.target.value)
+                }}
+              >
+                <label className='radio-label'>
+                  <input type='radio' name='lollipopShape' value='circle' checked={config.lollipopShape === 'circle'} />
+                  Circle
+                </label>
+                <label className='radio-label'>
+                  <input type='radio' name='lollipopShape' value='square' checked={config.lollipopShape === 'square'} />
+                  Square
+                </label>
+              </div>
+            </fieldset>
+            <Select value={config.lollipopColorStyle ? config.lollipopColorStyle : 'two-tone'} fieldName='lollipopColorStyle' label='Lollipop Color Style' updateField={updateField} options={['regular', 'two-tone']} />
+            <Select value={config.lollipopSize ? config.lollipopSize : 'small'} fieldName='lollipopSize' label='Lollipop Size' updateField={updateField} options={['small', 'medium', 'large']} />
+          </>
+        )}
+
+        {config.visualizationType === 'Box Plot' && (
+          <fieldset className='fieldset fieldset--boxplot'>
+            <legend className=''>Box Plot Settings</legend>
+            <Select value={config.boxplot.borders} fieldName='borders' section='boxplot' label='Box Plot Borders' updateField={updateField} options={['true', 'false']} />
+            <CheckBox value={config.boxplot.plotOutlierValues} fieldName='plotOutlierValues' section='boxplot' label='Plot Outliers' updateField={updateField} />
+            <CheckBox value={config.boxplot.plotNonOutlierValues} fieldName='plotNonOutlierValues' section='boxplot' label='Plot non-outlier values' updateField={updateField} />
+          </fieldset>
+        )}
+
+        <Select value={config.fontSize} fieldName='fontSize' label='Font Size' updateField={updateField} options={['small', 'medium', 'large']} />
+        {visHasBarBorders() && <Select value={config.barHasBorder} fieldName='barHasBorder' label='Bar Borders' updateField={updateField} options={['true', 'false']} />}
+        {visCanAnimate() && <CheckBox value={config.animate} fieldName='animate' label='Animate Visualization' updateField={updateField} />}
+
+        {/*<CheckBox value={config.animateReplay} fieldName="animateReplay" label="Replay Animation When Filters Are Changed" updateField={updateField} />*/}
+
+        {((config.series?.some(series => series.type === 'Line' || series.type === 'dashed-lg' || series.type === 'dashed-sm' || series.type === 'dashed-md') && config.visualizationType === 'Combo') || config.visualizationType === 'Line') && (
+          <>
+            <Select value={config.lineDatapointStyle} fieldName='lineDatapointStyle' label='Line Datapoint Style' updateField={updateField} options={['hidden', 'hover', 'always show']} />
+            <Select value={config.lineDatapointColor} fieldName='lineDatapointColor' label='Line Datapoint Color' updateField={updateField} options={['Same as Line', 'Lighter than Line']} />
+          </>
+        )}
+
+        {/* eslint-disable */}
+        <label className='header'>
+          <span className='edit-label'>Header Theme</span>
+          <ul className='color-palette'>
+            {headerColors.map(palette => (
+              <button
+                title={palette}
+                key={palette}
+                onClick={e => {
+                  e.preventDefault()
+                  updateConfig({ ...config, theme: palette })
+                }}
+                className={config.theme === palette ? 'selected ' + palette : palette}
+              ></button>
+            ))}
+          </ul>
+        </label>
+        {/* eslint-enable */}
+        {(visSupportsNonSequentialPallete() || visSupportsNonSequentialPallete()) && (
+          <>
+            <label>
+              <span className='edit-label'>Chart Color Palette</span>
+            </label>
+            {visSupportsReverseColorPalette() && <InputToggle fieldName='isPaletteReversed' size='small' label='Use selected palette in reverse order' updateField={updateField} value={config.isPaletteReversed} />}
+            {visSupportsSequentialPallete() && (
+              <>
+                <span>Sequential</span>
+                <ul className='color-palette'>
+                  {sequential.map(palette => {
+                    const colorOne = {
+                      backgroundColor: colorPalettes[palette][2]
+                    }
+
+                    const colorTwo = {
+                      backgroundColor: colorPalettes[palette][3]
+                    }
+
+                    const colorThree = {
+                      backgroundColor: colorPalettes[palette][5]
+                    }
+
+                    return (
+                      <button
+                        title={palette}
+                        key={palette}
+                        onClick={e => {
+                          e.preventDefault()
+                          updateConfig({ ...config, palette })
+                        }}
+                        className={config.palette === palette ? 'selected' : ''}
+                      >
+                        <span style={colorOne}></span>
+                        <span style={colorTwo}></span>
+                        <span style={colorThree}></span>
+                      </button>
+                    )
+                  })}
+                </ul>
+              </>
+            )}
+            {visSupportsNonSequentialPallete() && (
+              <>
+                <span>Non-Sequential</span>
+                <ul className='color-palette'>
+                  {nonSequential.map(palette => {
+                    const colorOne = {
+                      backgroundColor: colorPalettes[palette][2]
+                    }
+
+                    const colorTwo = {
+                      backgroundColor: colorPalettes[palette][4]
+                    }
+
+                    const colorThree = {
+                      backgroundColor: colorPalettes[palette][6]
+                    }
+
+                    return (
+                      <button
+                        title={palette}
+                        key={palette}
+                        onClick={e => {
+                          e.preventDefault()
+                          updateConfig({ ...config, palette })
+                        }}
+                        className={config.palette === palette ? 'selected' : ''}
+                      >
+                        <span style={colorOne}></span>
+                        <span style={colorTwo}></span>
+                        <span style={colorThree}></span>
+                      </button>
+                    )
+                  })}
+                </ul>
+              </>
+            )}
+          </>
+        )}
+        {(config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar') && (
+          <>
+            <InputToggle section='twoColor' fieldName='isPaletteReversed' size='small' label='Use selected palette in reverse order' updateField={updateField} value={config.twoColor.isPaletteReversed} />
+            <ul className='color-palette'>
+              {twoColorPalettes.map(palette => {
+                const colorOne = {
+                  backgroundColor: twoColorPalette[palette][0]
+                }
+
+                const colorTwo = {
+                  backgroundColor: twoColorPalette[palette][1]
+                }
+
+                return (
+                  <button
+                    title={palette}
+                    key={palette}
+                    onClick={e => {
+                      e.preventDefault()
+                      updateConfig({ ...config, twoColor: { ...config.twoColor, palette } })
+                    }}
+                    className={config.twoColor.palette === palette ? 'selected' : ''}
+                  >
+                    <span className='two-color' style={colorOne}></span>
+                    <span className='two-color' style={colorTwo}></span>
+                  </button>
+                )
+              })}
+            </ul>
+          </>
+        )}
+
+        {visHasDataCutoff() && (
+          <>
+            <TextField
+              value={config.dataCutoff}
+              type='number'
+              fieldName='dataCutoff'
+              className='number-narrow'
+              label='Data Cutoff'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>Any value below the cut-off value is included in a special "less than" category. This option supports special conditions like suppressed data.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          </>
+        )}
+        {visSupportsBarThickness() && config.orientation === 'horizontal' && !config.isLollipopChart && config.yAxis.labelPlacement !== 'On Bar' && <TextField type='number' value={config.barHeight || '25'} fieldName='barHeight' label=' Bar Thickness' updateField={updateField} min={15} />}
+        {((config.visualizationType === 'Bar' && config.orientation !== 'horizontal') || config.visualizationType === 'Combo') && <TextField value={config.barThickness} type='number' fieldName='barThickness' label='Bar Thickness' updateField={updateField} />}
+        {visSupportsBarSpace() && <TextField type='number' value={config.barSpace || '15'} fieldName='barSpace' label='Bar Space' updateField={updateField} min={0} />}
+        {(config.visualizationType === 'Bar' || config.visualizationType === 'Line' || config.visualizationType === 'Combo') && <CheckBox value={config.topAxis.hasLine} section='topAxis' fieldName='hasLine' label='Add Top Axis Line' updateField={updateField} />}
+
+        {config.visualizationType === 'Spark Line' && (
+          <div className='cove-accordion__panel-section checkbox-group'>
+            <CheckBox value={visual?.border} section='visual' fieldName='border' label='Show Border' updateField={updateField} />
+            <CheckBox value={visual?.borderColorTheme} section='visual' fieldName='borderColorTheme' label='Use Border Color Theme' updateField={updateField} />
+            <CheckBox value={visual?.accent} section='visual' fieldName='accent' label='Use Accent Style' updateField={updateField} />
+            <CheckBox value={visual?.background} section='visual' fieldName='background' label='Use Theme Background Color' updateField={updateField} />
+            <CheckBox value={visual?.hideBackgroundColor} section='visual' fieldName='hideBackgroundColor' label='Hide Background Color' updateField={updateField} />
+          </div>
+        )}
+
+        {(config.visualizationType === 'Line' || config.visualizationType === 'Combo') && <CheckBox value={config.showLineSeriesLabels} fieldName='showLineSeriesLabels' label='Append Series Name to End of Line Charts' updateField={updateField} />}
+        {(config.visualizationType === 'Line' || config.visualizationType === 'Combo') && config.showLineSeriesLabels && <CheckBox value={config.colorMatchLineSeriesLabels} fieldName='colorMatchLineSeriesLabels' label='Match Series Color to Name at End of Line Charts' updateField={updateField} />}
+
+        {visSupportsTooltipLines() && (
+          <>
+            <CheckBox value={visual.verticalHoverLine} fieldName='verticalHoverLine' section='visual' label='Vertical Hover Line' updateField={updateField} />
+            <CheckBox value={visual.horizontalHoverLine} fieldName='horizontalHoverLine' section='visual' label='Horizontal Hover Line' updateField={updateField} />
+          </>
+        )}
+        {visSupportsTooltipOpacity() && (
+          <label>
+            <span className='edit-label column-heading'>Tooltip Opacity</span>
+            <input
+              type='number'
+              value={config.tooltips.opacity ? config.tooltips.opacity : 100}
+              onChange={e =>
+                updateConfig({
+                  ...config,
+                  tooltips: {
+                    ...config.tooltips,
+                    opacity: e.target.value
+                  }
+                })
+              }
+            />
+          </label>
+        )}
+        {config.visualizationType === 'Bar' && <CheckBox value={config.tooltips.singleSeries} fieldName='singleSeries' section='tooltips' label='SHOW HOVER FOR SINGLE DATA SERIES' updateField={updateField} />}
+
+        <label>
+          <span className='edit-label column-heading'>No Data Message</span>
+          <input
+            type='text'
+            value={config.chartMessage.noData ? config.chartMessage.noData : ''}
+            onChange={e =>
+              updateConfig({
+                ...config,
+                chartMessage: {
+                  ...config.chartMessage,
+                  noData: e.target.value
+                }
+              })
+            }
+          />
+        </label>
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default PanelVisual

package/src/components/EditorPanel/components/Panels/index.tsx

@@ -0,0 +1,17 @@
+import ForestPlotSettings from './Panel.ForestPlotSettings.js'
+import Series from './Panel.Series.js'
+import Regions from './Panel.Regions.js'
+import General from './Panel.General.js'
+import BoxPlot from './Panel.BoxPlot.js'
+import Visual from './Panel.Visual.js'
+
+const Panels = {
+  ForestPlot: ForestPlotSettings,
+  Series: Series,
+  Regions,
+  General,
+  BoxPlot,
+  Visual
+}
+
+export default Panels