@cdc/chart 4.22.11 → 4.23.2

package/src/components/{EditorPanel.js → EditorPanel.jsx}

@@ -1,29 +1,24 @@
 import React, { useState, useEffect, useCallback, memo, useContext } from 'react'
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
 
 import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
 
-import { timeParse, timeFormat } from 'd3-time-format'
-import { useDebounce, useDebouncedCallback } from 'use-debounce'
+import { useDebounce } from 'use-debounce'
 
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 import WarningImage from '../images/warning.svg'
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import Waiting from '@cdc/core/components/Waiting'
-import QuestionIcon from '@cdc/core/assets/icon-question-circle.svg' //TODO: Update with Icon component
 import { useColorPalette } from '../hooks/useColorPalette'
 
-import InputCheckbox from '@cdc/core/components/inputs/InputCheckbox'
 import InputToggle from '@cdc/core/components/inputs/InputToggle'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import useReduceData from '../hooks/useReduceData'
 import useRightAxis from '../hooks/useRightAxis'
 
-// TODO: Remove unused imports
-// TDOO: Move inline styles to a scss file
+/* 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)
@@ -34,7 +29,7 @@ const TextField = memo(({ label, tooltip, section = null, subsection = null, fie
     if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
       updateField(section, subsection, fieldName, debouncedValue, i)
     }
-  }, [debouncedValue])
+  }, [debouncedValue]) // eslint-disable-line
 
   let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
 
@@ -211,17 +206,17 @@ const Regions = memo(({ config, updateConfig }) => {
 const headerColors = ['theme-blue', 'theme-purple', 'theme-brown', 'theme-teal', 'theme-pink', 'theme-orange', 'theme-slate', 'theme-indigo', 'theme-cyan', 'theme-green', 'theme-amber']
 
 const EditorPanel = () => {
-  const { config, updateConfig, transformedData: data, loading, colorPalettes, unfilteredData, excludedData, transformedData, isDashboard, setParentConfig, missingRequiredSections, setFilteredData } = useContext(Context)
+  const { config, updateConfig, transformedData: data, loading, colorPalettes, unfilteredData, excludedData, isDashboard, setParentConfig, missingRequiredSections } = useContext(ConfigContext)
 
-  const { minValue, maxValue, existPositiveValue } = useReduceData(config, unfilteredData)
+  const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, unfilteredData)
   const { paletteName, isPaletteReversed, filteredPallets, filteredQualitative, dispatch } = useColorPalette(colorPalettes, config)
   useEffect(() => {
     if (paletteName) updateConfig({ ...config, palette: paletteName })
-  }, [paletteName])
+  }, [paletteName]) // eslint-disable-line
 
   useEffect(() => {
     dispatch({ type: 'GET_PALETTE', payload: colorPalettes, paletteName: config.palette })
-  }, [dispatch, config.palette])
+  }, [dispatch, config.palette]) // eslint-disable-line
 
   // when the visualization type changes we
   // have to update the individual series type & axis details
@@ -243,7 +238,7 @@ const EditorPanel = () => {
       ...config,
       series: newSeries
     })
-  }, [config.visualizationType])
+  }, [config.visualizationType]) // eslint-disable-line
 
   const { hasRightAxis } = useRightAxis({ config: config, yMax: config.yAxis.size, data: config.data, updateConfig })
 
@@ -292,12 +287,38 @@ const EditorPanel = () => {
   }
 
   const updateField = (section, subsection, fieldName, newValue) => {
-    // Top level
+
+    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 (null === section && null === subsection) {
       let updatedConfig = { ...config, [fieldName]: newValue }
-
       enforceRestrictions(updatedConfig)
-
       updateConfig(updatedConfig)
       return
     }
@@ -306,6 +327,8 @@ const EditorPanel = () => {
 
     let sectionValue = isArray ? [...config[section], newValue] : { ...config[section], [fieldName]: newValue }
 
+    console.log('section value', sectionValue)
+
     if (null !== subsection) {
       if (isArray) {
         sectionValue = [...config[section]]
@@ -325,7 +348,6 @@ const EditorPanel = () => {
   }
 
   const [displayPanel, setDisplayPanel] = useState(true)
-  const [lollipopColorStyle, setLollipopColorStyle] = useState('two-tone')
 
   if (loading) {
     return null
@@ -442,14 +464,11 @@ const EditorPanel = () => {
   const getColumns = (filter = true) => {
     let columns = {}
 
-    unfilteredData.map(row => {
+    unfilteredData.forEach(row => {
       Object.keys(row).forEach(columnName => (columns[columnName] = true))
     })
 
     if (filter) {
-      let confidenceUpper = config.confidenceKeys?.upper && config.confidenceKeys?.upper !== '' // TODO: remove?
-      let confidenceLower = config.confidenceKeys?.lower && config.confidenceKeys?.lower !== '' // TODO: remove?
-
       Object.keys(columns).forEach(key => {
         if (
           (config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
@@ -471,7 +490,7 @@ const EditorPanel = () => {
     if (!data) return []
     const set = new Set()
     for (let i = 0; i < data.length; i++) {
-      for (const [key, value] of Object.entries(data[i])) {
+      for (const [key] of Object.entries(data[i])) {
         set.add(key)
       }
     }
@@ -480,7 +499,7 @@ const EditorPanel = () => {
 
   const getDataValues = (dataKey, unique = false) => {
     let values = []
-    excludedData.map(e => {
+    excludedData.forEach(e => {
       values.push(e[dataKey])
     })
     return unique ? [...new Set(values)] : values
@@ -560,7 +579,7 @@ const EditorPanel = () => {
         orientation: 'horizontal'
       })
     }
-  }, [])
+  }, []) // eslint-disable-line
 
   useEffect(() => {
     if (config.orientation === 'horizontal') {
@@ -569,7 +588,7 @@ const EditorPanel = () => {
         lollipopShape: config.lollipopShape
       })
     }
-  }, [config.isLollipopChart, config.lollipopShape])
+  }, [config.isLollipopChart, config.lollipopShape]) // eslint-disable-line
 
   const ExclusionsList = useCallback(() => {
     const exclusions = [...config.exclusions.keys]
@@ -589,18 +608,7 @@ const EditorPanel = () => {
         })}
       </ul>
     )
-  }, [config])
-
-  const ErrorWithLolliopChart = ({ message }) => {
-    return (
-      <section className='waiting'>
-        <section className='waiting-container'>
-          <h3>Error With Configuration</h3>
-          <p>{message}</p>
-        </section>
-      </section>
-    )
-  }
+  }, [config]) // eslint-disable-line
 
   const checkIsLine = type => {
     return type === ('Line' || 'dashed-sm')
@@ -616,7 +624,14 @@ const EditorPanel = () => {
     filterItem.orderedValues = filterOrder
     filterItem.order = 'cust'
     filters[filterIndex] = filterItem
-    updateConfig({ ...config, filters });
+    updateConfig({ ...config, filters })
+  }
+
+  const handleSeriesChange = (idx1, idx2) => {
+    let seriesOrder = config.series
+    let [movedItem] = seriesOrder.splice(idx1, 1)
+    seriesOrder.splice(idx2, 0, movedItem)
+    updateConfig({ ...config, series: seriesOrder })
   }
 
   if (config.isLollipopChart && config?.series?.length > 1) {
@@ -658,7 +673,10 @@ const EditorPanel = () => {
       case (config.visualizationType === 'Line' || config.visualizationType === 'Spark Line') && enteredValue && parseFloat(enteredValue) > minVal:
         message = 'Value must be less than ' + minValue
         break
-      case (config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && enteredValue && minVal > 0 && parseFloat(enteredValue) > 0:
+      case config.visualizationType === 'Combo' && isAllLine && enteredValue && parseFloat(enteredValue) > minVal:
+        message = 'Value must be less than ' + minValue
+        break
+      case (config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && enteredValue && minVal > 0 && parseFloat(enteredValue) > 0:
         message = 'Value must be less than or equal to 0'
         break
       case enteredValue && minVal < 0 && parseFloat(enteredValue) > minVal:
@@ -671,11 +689,10 @@ const EditorPanel = () => {
       return { ...prevMsg, minMsg: message }
     })
   }
-
   useEffect(() => {
     validateMinValue()
     validateMaxValue()
-  }, [minValue, maxValue, config])
+  }, [minValue, maxValue, config]) // eslint-disable-line
 
   return (
     <ErrorBoundary component='EditorPanel'>
@@ -697,6 +714,7 @@ const EditorPanel = () => {
                 </AccordionItemHeading>
                 <AccordionItemPanel>
                   <Select value={config.visualizationType} fieldName='visualizationType' label='Chart Type' updateField={updateField} options={['Pie', 'Line', 'Bar', 'Combo', 'Paired Bar', 'Spark Line']} />
+
                   {(config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && <Select value={config.visualizationSubType || 'Regular'} fieldName='visualizationSubType' label='Chart Subtype' updateField={updateField} options={['regular', 'stacked']} />}
                   {config.visualizationType === 'Bar' && <Select value={config.orientation || 'vertical'} fieldName='orientation' label='Orientation' updateField={updateField} options={['vertical', 'horizontal']} />}
                   {config.visualizationType === 'Bar' && <Select value={config.isLollipopChart ? 'lollipop' : config.barStyle || 'flat'} fieldName='barStyle' label='bar style' updateField={updateField} options={showBarStyleOptions()} />}
@@ -709,8 +727,8 @@ const EditorPanel = () => {
                     config.visualizationType !== 'Pie' && <CheckBox value={config.labels} fieldName='labels' label='Display label on data' updateField={updateField} />
                   )}
                   {config.visualizationType === 'Pie' && <Select fieldName='pieType' label='Pie Chart Type' updateField={updateField} options={['Regular', 'Donut']} />}
-                  <TextField value={config.title} fieldName='title' label='Title' updateField={updateField} />
 
+                  <TextField value={config.title} fieldName='title' label='Title' updateField={updateField} />
                   <TextField
                     value={config.superTitle}
                     updateField={updateField}
@@ -783,7 +801,7 @@ const EditorPanel = () => {
                     }
                   />
 
-                  {config.visualizationSubType !== 'horizontal' && <TextField type='number' value={config.height} fieldName='height' label='Chart Height' updateField={updateField} />}
+                  {config.orientation === 'vertical' && <TextField type='number' value={config.heights.vertical} section='heights' fieldName='vertical' label='Chart Height' updateField={updateField} />}
                 </AccordionItemPanel>
               </AccordionItem>
 
@@ -808,69 +826,95 @@ const EditorPanel = () => {
                             </Tooltip.Content>
                           </Tooltip>
                         </fieldset>
-                        <ul className='series-list'>
-                          {config.series &&
-                            config.series.map((series, i) => {
-                              if (config.visualizationType === 'Combo') {
-                                let changeType = (i, value) => {
-                                  let series = [...config.series]
-                                  series[i].type = value
-
-                                  series[i].axis = 'Left'
-
-                                  updateConfig({ ...config, series })
-                                }
-
-                                let typeDropdown = (
-                                  <select
-                                    value={series.type}
-                                    onChange={event => {
-                                      changeType(i, event.target.value)
-                                    }}
-                                    style={{ width: '100px', marginRight: '10px' }}
-                                  >
-                                    <option value='' default>
-                                      Select
-                                    </option>
-                                    <option value='Bar'>Bar</option>
-                                    <option value='Line'>Solid Line</option>
-                                    <option value='dashed-sm'>Small Dashed</option>
-                                    <option value='dashed-md'>Medium Dashed</option>
-                                    <option value='dashed-lg'>Large Dashed</option>
-                                  </select>
-                                )
 
-                                return (
-                                  <li key={series.dataKey}>
-                                    <div className={`series-list__name${series.dataKey.length > 15 ? ' series-list__name--truncate' : ''}`} data-title={series.dataKey}>
-                                      <div className='series-list__name-text'>{series.dataKey}</div>
-                                    </div>
-                                    <span>
-                                      <span className='series-list__dropdown'>{typeDropdown}</span>
-                                      {config.series && config.series.length > 1 && (
-                                        <button className='series-list__remove' onClick={() => removeSeries(series.dataKey)}>
-                                          &#215;
-                                        </button>
-                                      )}
-                                    </span>
-                                  </li>
-                                )
-                              }
+                        <DragDropContext onDragEnd={({ source, destination }) => handleSeriesChange(source.index, destination.index)}>
+                          <Droppable droppableId='filter_order'>
+                            {provided => (
+                              <ul {...provided.droppableProps} className='series-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
+                                {config.series.map((series, i) => {
+                                  if (config.visualizationType === 'Combo') {
+                                    let changeType = (i, value) => {
+                                      let series = [...config.series]
+                                      series[i].type = value
+
+                                      series[i].axis = 'Left'
+
+                                      updateConfig({ ...config, series })
+                                    }
+
+                                    let typeDropdown = (
+                                      <select
+                                        value={series.type}
+                                        onChange={event => {
+                                          changeType(i, event.target.value)
+                                        }}
+                                        style={{ width: '100px', marginRight: '10px' }}
+                                      >
+                                        <option value='' default>
+                                          Select
+                                        </option>
+                                        <option value='Bar'>Bar</option>
+                                        <option value='Line'>Solid Line</option>
+                                        <option value='dashed-sm'>Small Dashed</option>
+                                        <option value='dashed-md'>Medium Dashed</option>
+                                        <option value='dashed-lg'>Large Dashed</option>
+                                      </select>
+                                    )
+
+                                    return (
+                                      <Draggable key={series.dataKey} draggableId={`draggableFilter-${series.dataKey}`} index={i}>
+                                        {(provided, snapshot) => (
+                                          <li>
+                                            <div className={snapshot.isDragging ? 'currently-dragging' : ''} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, sortableItemStyles)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                                              <div className={`series-list__name${series.dataKey.length > 15 ? ' series-list__name--truncate' : ''}`} data-title={series.dataKey}>
+                                                <div className='series-list__name-text'>{series.dataKey}</div>
+                                              </div>
+                                              <span>
+                                                <span className='series-list__dropdown'>{typeDropdown}</span>
+                                                {config.series && config.series.length > 1 && (
+                                                  <button className='series-list__remove' onClick={() => removeSeries(series.dataKey)}>
+                                                    &#215;
+                                                  </button>
+                                                )}
+                                              </span>
+                                            </div>
+                                          </li>
+                                        )}
+                                      </Draggable>
+                                    )
+                                  }
 
-                              return (
-                                <li key={series.dataKey}>
-                                  <div className='series-list__name' data-title={series.dataKey}>
-                                    <div className='series-list__name--text'>{series.dataKey}</div>
-                                  </div>
-                                  {config.series && config.series.length > 1 && (
-                                    <button className='series-list__remove' onClick={() => removeSeries(series.dataKey)}>
-                                      &#215;
-                                    </button>
-                                  )}
-                                </li>
-                              )
-                            })}
-                        </ul>
+                                  return (
+                                    <Draggable key={series.dataKey} draggableId={`draggableFilter-${series.dataKey}`} index={i}>
+                                      {(provided, snapshot) => (
+                                        <li
+                                          key={series.dataKey}
+                                          className={snapshot.isDragging ? 'currently-dragging' : ''}
+                                          style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, sortableItemStyles)}
+                                          ref={provided.innerRef}
+                                          {...provided.draggableProps}
+                                          {...provided.dragHandleProps}
+                                        >
+                                          {/*<div  className={snapshot.isDragging ? 'currently-dragging' : ''} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, sortableItemStyles)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>*/}
+                                          <div className='series-list__name' data-title={series.dataKey}>
+                                            <div className='series-list__name--text'>{series.dataKey}</div>
+                                          </div>
+                                          {config.series && config.series.length > 1 && (
+                                            <button className='series-list__remove' onClick={() => removeSeries(series.dataKey)}>
+                                              &#215;
+                                            </button>
+                                          )}
+                                          {/*</div>*/}
+                                        </li>
+                                      )}
+                                    </Draggable>
+                                  )
+                                })}
+                                {provided.placeholder}
+                              </ul>
+                            )}
+                          </Droppable>
+                        </DragDropContext>
                       </>
                     )}
 
@@ -899,6 +943,181 @@ const EditorPanel = () => {
                 </AccordionItem>
               )}
 
+              {config.visualizationType === 'Box Plot' && (
+                <AccordionItem>
+                  <AccordionItemHeading>
+                    <AccordionItemButton>Measures</AccordionItemButton>
+                  </AccordionItemHeading>
+                  <AccordionItemPanel>
+                    <h4>Labels for 5-Number Summary</h4>
+
+                    {/* prettier-ignore */}
+                    {/* max */}
+                    <TextField
+                      type='text'
+                      value={config.boxplot.labels.maximum}
+                      fieldName='maximum'
+                      section='boxplot'
+                      subsection='labels'
+                      label='Maximum'
+                      updateField={updateField}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Highest value, excluding outliers</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+
+                    {/* prettier-ignore */}
+                    {/* Q3 */}
+                    <TextField
+                      type='text'
+                      value={config.boxplot.labels.q3}
+                      fieldName='q3'
+                      section='boxplot'
+                      subsection='labels'
+                      label='Upper Quartile'
+                      updateField={updateField}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Represented by top line of box. 25% of data are higher.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+
+                    {/* prettier-ignore */}
+                    {/* median */}
+                    <TextField
+                      type='text'
+                      value={config.boxplot.labels.median}
+                      fieldName='median'
+                      section='boxplot'
+                      subsection='labels'
+                      label='Median'
+                      updateField={updateField}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Middle data point. Half of data are higher value.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+
+                    {/* prettier-ignore */}
+                    {/* q1 */}
+                    <TextField
+                      type='text'
+                      value={config.boxplot.labels.q1}
+                      fieldName='q1'
+                      section='boxplot'
+                      subsection='labels'
+                      label='Lower Quartile'
+                      updateField={updateField}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Represented by bottom line of box. 25% of data are lower.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+
+                    {/* prettier-ignore */}
+                    {/* minimum */}
+                    <TextField
+                      type='text'
+                      value={config.boxplot.labels.minimum}
+                      fieldName='minimum'
+                      section='boxplot'
+                      subsection='labels'
+                      label='Minimum'
+                      updateField={updateField}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Lowest value, excluding outliers</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+
+                    {/* iqr */}
+                    <TextField type='text' value={config.boxplot.labels.iqr} fieldName='iqr' section='boxplot' subsection='labels' label='Interquartile Range' updateField={updateField} />
+
+                    {/* count */}
+                    <TextField type='text' value={config.boxplot.labels.count} fieldName='count' section='boxplot' subsection='labels' label='Count' updateField={updateField} />
+
+                    {/* mean */}
+                    <TextField type='text' value={config.boxplot.labels.mean} fieldName='mean' section='boxplot' subsection='labels' label='Mean' updateField={updateField} />
+                    {/* outliers */}
+                    <TextField type='text' value={config.boxplot.labels.outliers} fieldName='outliers' section='boxplot' subsection='labels' label='Outliers' updateField={updateField} />
+                    {/* values */}
+                    <TextField type='text' value={config.boxplot.labels.values} fieldName='values' section='boxplot' subsection='labels' label='Values' updateField={updateField} />
+                    <br />
+                    <h4>Percentages for Quartiles</h4>
+                    <TextField
+                      type='number'
+                      value={config.boxplot.firstQuartilePercentage}
+                      fieldName='firstQuartilePercentage'
+                      section='boxplot'
+                      label='Lower Quartile'
+                      max={100}
+                      updateField={updateField}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Represented by bottom line of box. 25% of data are lower.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+
+                    <TextField
+                      type='number'
+                      value={config.boxplot.thirdQuartilePercentage}
+                      fieldName='thirdQuartilePercentage'
+                      label='Upper Quartile'
+                      section='boxplot'
+                      max={100}
+                      updateField={updateField}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Represented by top line of box. 25% of data are higher.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+                  </AccordionItemPanel>
+                </AccordionItem>
+              )}
+
               {hasRightAxis && config.series && config.visualizationType === 'Combo' && (
                 <AccordionItem>
                   <AccordionItemHeading>
@@ -966,7 +1185,7 @@ const EditorPanel = () => {
               <AccordionItem>
                 <AccordionItemHeading>
                   <AccordionItemButton>
-                    {config.visualizationType !== 'Pie' ? (config.visualizationType === 'Bar' ? 'Left Value Axis' : 'Left Value Axis') : 'Data Format'}
+                    {config.visualizationType !== 'Pie' ? (config.orientation !== 'horizontal' ? 'Left Value Axis' : 'Value Axis') : 'Data Format'}
                     {config.visualizationType === 'Pie' && !config.yAxis.dataKey && <WarningImage width='25' className='warning-icon' />}
                   </AccordionItemButton>
                 </AccordionItemHeading>
@@ -996,8 +1215,9 @@ const EditorPanel = () => {
                   {config.visualizationType !== 'Pie' && (
                     <>
                       <TextField value={config.yAxis.label} section='yAxis' fieldName='label' label='Label' updateField={updateField} />
-                      <CheckBox  value={config.yAxis.isLegendValue} section='yAxis'  fieldName='isLegendValue' label='Use Legend Value in Hover' updateField={updateField}   /> 
+                      {config.runtime.seriesKeys && config.runtime.seriesKeys.length === 1 && <CheckBox value={config.isLegendValue} fieldName='isLegendValue' label='Use Legend Value in Hover' updateField={updateField} />}
                       <TextField value={config.yAxis.numTicks} placeholder='Auto' type='number' section='yAxis' fieldName='numTicks' label='Number of ticks' className='number-narrow' updateField={updateField} />
+                      {config.visualizationType === 'Paired Bar' && <TextField value={config.yAxis.tickRotation || 0} type='number' min='0' section='yAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
                       <TextField
                         value={config.yAxis.size}
                         type='number'
@@ -1017,11 +1237,30 @@ const EditorPanel = () => {
                           </Tooltip>
                         }
                       />
+                      <TextField value={config.yAxis.axisPadding} type='number' max={10} min={0} section='yAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} />
+                      {config.orientation === 'horizontal' && <TextField value={config.xAxis.labelOffset} section='xAxis' fieldName='labelOffset' label='Label offset' type='number' className='number-narrow' updateField={updateField} />}
                       {config.orientation !== 'horizontal' && <CheckBox value={config.yAxis.gridLines} section='yAxis' fieldName='gridLines' label='Display Gridlines' updateField={updateField} />}
                     </>
                   )}
                   <span className='divider-heading'>Number Formatting</span>
                   <CheckBox value={config.dataFormat.commas} section='dataFormat' fieldName='commas' label='Add commas' updateField={updateField} />
+                  <CheckBox
+                    value={config.dataFormat.abbreviated}
+                    section='dataFormat'
+                    fieldName='abbreviated'
+                    label='Abbreviate Axis Values'
+                    updateField={updateField}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>{`This option abbreviates very large or very small numbers on the value axis`}</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
                   <TextField value={config.dataFormat.roundTo} type='number' section='dataFormat' fieldName='roundTo' label='Round to decimal point' className='number-narrow' updateField={updateField} min={0} />
                   <div className='two-col-inputs'>
                     <TextField
@@ -1157,7 +1396,7 @@ const EditorPanel = () => {
                 <AccordionItemPanel>
                   {config.visualizationType !== 'Pie' && (
                     <>
-                      <Select value={config.xAxis.type} section='xAxis' fieldName='type' label='Data Type' updateField={updateField} options={['categorical', 'date']} />
+                      <Select value={config.xAxis.type} section='xAxis' fieldName='type' label='Data Type' updateField={updateField} options={config.visualizationType !== 'Scatter Plot' ? ['categorical', 'date'] : ['categorical', 'date', 'continuous']} />
                       <Select
                         value={config.xAxis.dataKey || ''}
                         section='xAxis'
@@ -1279,6 +1518,7 @@ const EditorPanel = () => {
                       <TextField value={config.xAxis.numTicks} placeholder='Auto' type='number' min='1' section='xAxis' fieldName='numTicks' label='Number of ticks' className='number-narrow' updateField={updateField} />
 
                       <TextField value={config.xAxis.size} type='number' min='0' section='xAxis' fieldName='size' label={config.orientation === 'horizontal' ? 'Size (Width)' : 'Size (Height)'} className='number-narrow' updateField={updateField} />
+                      <TextField value={config.xAxis.axisPadding} type='number' max={10} min={0} section='xAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} />
 
                       {config.yAxis.labelPlacement !== 'Below Bar' && <TextField value={config.xAxis.tickRotation} type='number' min='0' section='xAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
                       {config.orientation === 'horizontal' ? (
@@ -1390,6 +1630,7 @@ const EditorPanel = () => {
                       </Tooltip>
                     }
                   />
+                  <CheckBox value={config.legend.showLegendValuesTooltip} section='legend' fieldName='showLegendValuesTooltip' label='Show Legend Values in Tooltip' updateField={updateField} />
 
                   {config.visualizationType === 'Bar' && config.visualizationSubType === 'regular' && config.runtime.seriesKeys.length === 1 && (
                     <Select value={config.legend.colorCode} section='legend' fieldName='colorCode' label='Color code by category' initial='Select' updateField={updateField} options={getDataValueOptions(data)} />
@@ -1524,11 +1765,21 @@ const EditorPanel = () => {
                     </>
                   )}
 
-                  <Select value={config.fontSize} fieldName='fontSize' label='Font Size' updateField={updateField} options={['small', 'medium', 'large']} />
+                  {config.visualizationType === 'Box Plot' &&
+                    <fieldset fieldset className='fieldset fieldset--boxplot'>
+                      <legend className=''>Box Plot Settings</legend>
+                      {config.visualizationType === 'Box Plot' && <Select value={config.boxplot.borders} fieldName='borders' section='boxplot' label='Box Plot Borders' updateField={updateField} options={['true', 'false']} />}
+                      {config.visualizationType === 'Box Plot' && <CheckBox value={config.boxplot.plotOutlierValues} fieldName='plotOutlierValues' section='boxplot' label='Plot Outliers' updateField={updateField} />}
+                      {config.visualizationType === 'Box Plot' && <CheckBox value={config.boxplot.plotNonOutlierValues} fieldName='plotNonOutlierValues' section='boxplot' label='Plot non-outlier values' updateField={updateField} />}
+                      {config.visualizationType === 'Box Plot' && <CheckBox value={config.boxplot.legend.displayHowToReadText} fieldName='displayHowToReadText' section='boxplot' subsection='legend' label='Display How To Read Text' updateField={updateField} />}
+                      <TextField type='textarea' value={config.boxplot.legend.howToReadText} updateField={updateField} fieldName='howToReadText' section='boxplot' subsection='legend' label='How to read text' />
+                    </fieldset>
+                  }
 
-                  {config.series?.some(series => series.type === 'Bar' || series.type === 'Paired Bar') && <Select value={config.barHasBorder} fieldName='barHasBorder' label='Bar Borders' updateField={updateField} options={['true', 'false']} />}
+                  <Select value={config.fontSize} fieldName='fontSize' label='Font Size' updateField={updateField} options={['small', 'medium', 'large']} />
+                  {config.visualizationType !== 'Box Plot' && config.series?.some(series => series.type === 'Bar' || series.type === 'Paired Bar') && <Select value={config.barHasBorder} fieldName='barHasBorder' label='Bar Borders' updateField={updateField} options={['true', 'false']} />}
 
-                  {/* <CheckBox value={config.animate} fieldName="animate" label="Animate Visualization" updateField={updateField} /> */}
+                  <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} />*/}
 
@@ -1536,6 +1787,7 @@ const EditorPanel = () => {
                     <Select value={config.lineDatapointStyle} fieldName='lineDatapointStyle' label='Line Datapoint Style' updateField={updateField} options={['hidden', 'hover', 'always show']} />
                   )}
 
+                  {/* eslint-disable */}
                   <label className='header'>
                     <span className='edit-label'>Header Theme</span>
                     <ul className='color-palette'>
@@ -1555,6 +1807,7 @@ const EditorPanel = () => {
                   <label>
                     <span className='edit-label'>Chart Color Palette</span>
                   </label>
+                  {/* eslint-enable */}
                   {/* <InputCheckbox fieldName='isPaletteReversed'  size='small' label='Use selected palette in reverse order'   updateField={updateField}  value={isPaletteReversed} /> */}
                   <InputToggle fieldName='isPaletteReversed' size='small' label='Use selected palette in reverse order' updateField={updateField} value={isPaletteReversed} />
                   <span>Sequential</span>
@@ -1644,9 +1897,9 @@ const EditorPanel = () => {
                       />
                     </>
                   )}
-                  {config.orientation === 'horizontal' && config.yAxis.labelPlacement !== 'On Bar' && <TextField type='number' value={config.barHeight || '25'} fieldName='barHeight' label='Bar Thickness' updateField={updateField} min='15' />}
+                  {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} />}
-
+                  {(config.orientation === 'horizontal' || config.visualizationType === 'Paired Bar') && <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' && (
@@ -1658,6 +1911,11 @@ const EditorPanel = () => {
                       <CheckBox value={config.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} />
+                  )}
                 </AccordionItemPanel>
               </AccordionItem>
 
@@ -1706,6 +1964,9 @@ const EditorPanel = () => {
                   {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} />}
                   <CheckBox value={config.table.expanded} section='table' fieldName='expanded' label='Expanded by Default' updateField={updateField} />
                   <CheckBox value={config.table.download} section='table' fieldName='download' label='Display Download Button' updateField={updateField} />
+                  <CheckBox value={config.table.showDownloadUrl} section='table' fieldName='showDownloadUrl' label='Display Link to Dataset' updateField={updateField} />
+                  {/* <CheckBox value={config.table.showDownloadImgButton} section='table' fieldName='showDownloadImgButton' label='Display Image Button' updateField={updateField} /> */}
+                  {/* <CheckBox value={config.table.showDownloadPdfButton} section='table' fieldName='showDownloadPdfButton' label='Display PDF Button' updateField={updateField} /> */}
                   <TextField value={config.table.label} section='table' fieldName='label' label='Label' updateField={updateField} />
                   {config.visualizationType !== 'Pie' && <TextField value={config.table.indexLabel} section='table' fieldName='indexLabel' label='Index Column Header' updateField={updateField} />}
                 </AccordionItemPanel>
@@ -1715,7 +1976,7 @@ const EditorPanel = () => {
           {config.type !== 'Spark Line' && <AdvancedEditor loadConfig={updateConfig} state={config} convertStateToConfig={convertStateToConfig} />}
         </section>
       </section>
-    </ErrorBoundary>
+    </ErrorBoundary >
   )
 }