@cdc/chart 4.22.11 → 4.23.1

package/src/components/DataTable.tsx

@@ -8,16 +8,19 @@ import LegendCircle from '@cdc/core/components/LegendCircle'
 
 import Context from '../context'
 
+import CoveMediaControls from '@cdc/core/helpers/CoveMediaControls'
+
 export default function DataTable() {
-  const { rawData, transformedData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes } = useContext<any>(Context)
+  const { rawData, transformedData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes, imageId } = useContext<any>(Context)
+
+  // Debugging.
+  // if (config.visualizationType === 'Box Plot') return null
 
-  const legendGlyphSize = 15
-  const legendGlyphSizeHalf = legendGlyphSize / 2
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
   const [tableExpanded, setTableExpanded] = useState<boolean>(config.table.expanded)
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
 
-  const DownloadButton = ({ data }: any) => {
+  const DownloadButton = ({ data }: any, type) => {
     const fileName = `${config.title.substring(0, 50)}.csv`
 
     const csvData = Papa.unparse(data)
@@ -31,11 +34,20 @@ export default function DataTable() {
       }
     }
 
-    return (
-      <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn btn-download no-border`}>
-        Download Data (CSV)
-      </a>
-    )
+    switch (type) {
+      case 'download':
+        return (
+          <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn btn-download no-border`}>
+            Download Data (CSV)
+          </a>
+        )
+      default:
+        return (
+          <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`no-border`}>
+            Download Data (CSV)
+          </a>
+        )
+    }
   }
 
   // Creates columns structure for the table
@@ -72,13 +84,13 @@ export default function DataTable() {
             }
           ]
 
-    data.forEach(d => {
+    data.forEach((d, index) => {
       const newCol = {
         Header: config.runtime[section].type === 'date' ? formatDate(parseDate(d[config.runtime.originalXAxis.dataKey])) : d[config.runtime.originalXAxis.dataKey],
         Cell: ({ row }) => {
           return <>{numberFormatter(d[row.original])}</>
         },
-        id: d[config.runtime.originalXAxis.dataKey],
+        id: `${d[config.runtime.originalXAxis.dataKey]}--${index}`,
         canSort: true
       }
 
@@ -117,6 +129,11 @@ export default function DataTable() {
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns: tableColumns, data: tableData, defaultColumn }, useSortBy, useBlockLayout, useResizeColumns)
   return (
     <ErrorBoundary component='DataTable'>
+      <CoveMediaControls.Section classes={['download-links']}>
+        <CoveMediaControls.Link config={config} />
+        {config.table.download && <DownloadButton data={rawData} type='link' />}
+      </CoveMediaControls.Section>
+
       <section id={config?.title ? `dataTableSection__${config?.title.replace(/\s/g, '')}` : `dataTableSection`} className={`data-table-container`} aria-label={accessibilityLabel}>
         <div
           role='button'
@@ -206,7 +223,6 @@ export default function DataTable() {
             ''
           )}
         </div>
-        {config.table.download && <DownloadButton data={rawData} />}
       </section>
     </ErrorBoundary>
   )

package/src/components/EditorPanel.js

@@ -3,19 +3,15 @@ import { DragDropContext, Droppable, Draggable } from 'react-beautiful-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 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'
@@ -25,6 +21,8 @@ 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 +32,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 +209,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(Context)
 
-  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 +241,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 })
 
@@ -325,7 +323,6 @@ const EditorPanel = () => {
   }
 
   const [displayPanel, setDisplayPanel] = useState(true)
-  const [lollipopColorStyle, setLollipopColorStyle] = useState('two-tone')
 
   if (loading) {
     return null
@@ -442,14 +439,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 +465,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 +474,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 +554,7 @@ const EditorPanel = () => {
         orientation: 'horizontal'
       })
     }
-  }, [])
+  }, []) // eslint-disable-line
 
   useEffect(() => {
     if (config.orientation === 'horizontal') {
@@ -569,7 +563,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 +583,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 +599,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 +648,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 +664,10 @@ const EditorPanel = () => {
       return { ...prevMsg, minMsg: message }
     })
   }
-
   useEffect(() => {
     validateMinValue()
     validateMaxValue()
-  }, [minValue, maxValue, config])
+  }, [minValue, maxValue, config]) // eslint-disable-line
 
   return (
     <ErrorBoundary component='EditorPanel'>
@@ -709,8 +701,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 +775,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 +800,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>
                       </>
                     )}
 
@@ -966,7 +984,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,7 +1014,7 @@ 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} />
                       <TextField
                         value={config.yAxis.size}
@@ -1017,11 +1035,29 @@ const EditorPanel = () => {
                           </Tooltip>
                         }
                       />
+                      {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
@@ -1390,6 +1426,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)} />
@@ -1528,7 +1565,7 @@ const EditorPanel = () => {
 
                   {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 +1573,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 +1593,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 +1683,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' && <TextField type='number' value={config.barSpace || '20'} 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 +1697,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 +1750,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>