@cdc/chart 1.3.3 → 4.22.10

package/src/components/EditorPanel.js

@@ -16,8 +16,10 @@ 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 { useColorPalette } from '../hooks/useColorPalette'
+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';
@@ -26,7 +28,7 @@ import Icon from '@cdc/core/components/ui/Icon'
 import useReduceData from '../hooks/useReduceData';
 
 const TextField = memo(({label, tooltip, section = null, subsection = null, fieldName, updateField, value: stateValue, type = "input", i = null, min = null, ...attributes}) => {
-  const [ value, setValue ] = useState(stateValue);
+  const [ value, setValue ] = useState(stateValue); 
 
   const [ debouncedValue ] = useDebounce(value, 500);
 
@@ -39,7 +41,6 @@ const TextField = memo(({label, tooltip, section = null, subsection = null, fiel
   let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
 
   const onChange = (e) => {
-
     if ('number' !== type || min === null) {
       setValue(e.target.value)
     } else {
@@ -190,20 +191,17 @@ const EditorPanel = () => {
     setFilteredData
   } = useContext(Context)
 
-  const {minValue,maxValue} = useReduceData(config,data)
+  const {minValue,maxValue,existPositiveValue} = useReduceData(config,unfilteredData);
   const {paletteName,isPaletteReversed,filteredPallets,filteredQualitative,dispatch} = useColorPalette(colorPalettes,config);
 	useEffect(()=>{
 		if(paletteName) updateConfig({...config, palette:paletteName})
-	},[paletteName])
+  }, [paletteName])
+
 
+  
   useEffect(()=>{
     dispatch({type:"GET_PALETTE",payload:colorPalettes,paletteName:config.palette})
- },[dispatch,config.palette]);
-
-  useEffect(() => {
-    dispatch({ type: 'GET_PALETTE', payload: colorPalettes, paletteName: config.palette })
-  }, [ dispatch, config.palette ])
-
+  }, [dispatch, config.palette]);
 
   const filterOptions = [
     {
@@ -225,6 +223,8 @@ const EditorPanel = () => {
   })
 
   const sortableItemStyles = {
+    animate: false,
+    animateReplay: true,
     display: 'block',
     boxSizing: 'border-box',
     border: '1px solid #D1D1D1',
@@ -238,8 +238,6 @@ const EditorPanel = () => {
     zIndex: '999',
   }
 
-  let hasLineChart = false
-
   const enforceRestrictions = (updatedConfig) => {
     if (updatedConfig.orientation === 'horizontal') {
       updatedConfig.labels = false
@@ -315,19 +313,25 @@ const EditorPanel = () => {
   const addNewFilter = () => {
     let filters = config.filters ? [ ...config.filters ] : []
 
-    filters.push({ values: [] })
+    filters.push({ values: [] });
 
-    updateConfig({ ...config, filters })
+    updateConfig({ ...config, filters });
   }
 
   const addNewSeries = (seriesKey) => {
     let newSeries = config.series ? [ ...config.series ] : []
-    newSeries.push({ dataKey: seriesKey, type: 'Bar' })
-    updateConfig({ ...config, series: newSeries })
+    newSeries.push({ dataKey: seriesKey, type: 'Bar' });
+    updateConfig({ ...config, series: newSeries });
   }
 
-  const removeSeries = (seriesKey) => {
+  const sortSeries = (e) => {
+    const series = config.series[0].dataKey
+    const sorted = data.sort((a, b) => a[series] - b[series]);
+    const newData = e === "asc" ? sorted : sorted.reverse();
+    updateConfig({ ...config }, newData);
+  }
 
+  const removeSeries = (seriesKey) => {
 
     let series = [ ...config.series ]
     let seriesIndex = -1
@@ -420,6 +424,19 @@ const EditorPanel = () => {
     return Object.keys(columns)
   }
 
+
+    const getDataValueOptions = (data)=>{
+      if(!data) return [];
+      const set = new Set();
+      for (let i=0; i<data.length; i++){
+        for (const [key, value] of Object.entries(data[i])) {
+          set.add(key)
+        }
+        
+      }
+      return Array.from(set)
+    };
+    
   const getDataValues = (dataKey, unique = false) => {
     let values = []
     excludedData.map(e => {
@@ -428,13 +445,11 @@ const EditorPanel = () => {
     return unique ? [ ...new Set(values) ] : values
   }
 
-  // when to show lollipop checkbox.
-  // update as the need grows (ie. vertical bars, divergeing, etc.)
-  const showLollipopCheckbox = () => {
-    if (config.visualizationType === 'Bar' && (config.orientation === 'horizontal' || config.orientation === 'regular') && config.visualizationSubType !== 'stacked') {
-      return true
+  const showBarStyleOptions = ()=>{
+    if (config.visualizationType === 'Bar' && config.visualizationSubType !== 'stacked' && (config.orientation==='horizontal' || config.orientation==='vertical') ) {
+      return ['flat','rounded','lollipop']
     } else {
-      return false
+      return ['flat','rounded']
     }
   }
 
@@ -494,6 +509,16 @@ const EditorPanel = () => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ config ])
+  
+  // Set paired bars to be horizontal, even though that option doesn't display
+  useEffect(() => {
+    if(config.visualizationType === 'Paired Bar') {
+        updateConfig({
+          ...config,
+          orientation: 'horizontal'
+      })
+    }
+  }, []);
 
   useEffect(() => {
     if (config.orientation === 'horizontal') {
@@ -516,7 +541,7 @@ const EditorPanel = () => {
                   {exclusion}
                 </div>
               </div>
-              <span className="series-list__remove" onClick={() => removeExclusion(exclusion)}>&#215;</span>
+              <button className="series-list__remove" onClick={() => removeExclusion(exclusion)}>&#215;</button>
             </li>
           )
         })}
@@ -534,8 +559,8 @@ const EditorPanel = () => {
       </section>
     )
   }
-  const handleFilterChange = (idx1, idx2, filterIndex, filter) => {
 
+  const handleFilterChange = (idx1, idx2, filterIndex, filter) => {
     let filterOrder = filter.values
     let [ movedItem ] = filterOrder.splice(idx1, 1)
     filterOrder.splice(idx2, 0, movedItem)
@@ -556,94 +581,51 @@ const EditorPanel = () => {
     config.runtime.editorErrorMessage = 'Add a data series'
   }
 
-  const section = config.orientation === 'horizontal' ? 'xAxis' : 'yAxis'
-  const [warningMsg,updateWarningMsg] = useState({maxMsg:'',minMsg:''})
-  
-  const onMaxChangeHandler = (e) => {
-     const enteredValue = e.target.value;
-
-     var existPositiveValue;
-     let value;
-
-     // loop through series keys
-    if (config.runtime.seriesKeys) {
-      for(let i = 0; i < config.runtime.seriesKeys.length; i++) {
-        existPositiveValue = data.some(d => d[config.runtime.seriesKeys[i]] >= 0);
-      }
-    }
-
-     // input >= max
-    if (Number(enteredValue) >= maxValue) {
-        value = enteredValue
-        updateWarningMsg(function(prevMsg){return{...prevMsg,maxMsg:''}})
-    }
-    
-    // input < max && a positive number exists
-    if (Number(enteredValue)< maxValue && existPositiveValue) {
-        updateWarningMsg(function(presMsg){return{...presMsg,maxMsg:'Max value must be more than '+ maxValue}})
-    }
-    
-    // input < max && all numbers negatice
-    if (Number(enteredValue) < maxValue && !existPositiveValue) {
-        updateWarningMsg(function(presMsg){return{...presMsg,maxMsg:'Value must be more than or equal to 0'}})
-    }
-    updateField(section, null, 'max', value)
-    
-    if (!enteredValue.length) {
-      updateWarningMsg(function(prevMsg){return{...prevMsg,maxMsg:''}})
-    }
-  }
-  
-  const onMinChangeHandler = (e) => {
-    const enteredValue = e.target.value;
-    let value;
-    if (config.visualizationType === 'Line') {
-      if (Number(enteredValue) > minValue) {
-        updateWarningMsg(function (presMsg) { return { ...presMsg, minMsg: 'Value must be less than ' + minValue}})
-      } else {
-        value = enteredValue
-        updateWarningMsg(function (presMsg) { return { ...presMsg, minMsg: '' } })
-      }
-      } else {
-        if (Number(enteredValue) > minValue) {
-          updateWarningMsg(function (presMsg) { return { ...presMsg, minMsg: 'Value must be less than '+ minValue }})
-        } else if (Number(enteredValue) > 0  ) {
-          updateWarningMsg(function (presMsg) { return { ...presMsg, minMsg: 'Value must be less than or equal to 0' }})
-        } else {
-          value = enteredValue
-          updateWarningMsg(function (presMsg) { return { ...presMsg, minMsg: '' }})
-        }
-       
-      }
-      updateField(section, null, 'min', value)
-
-      if (!enteredValue.length) {
-        updateWarningMsg(function (presMsg) { return {...presMsg, minMsg: ''}})
-      }
-    }
-  
+  const section = config.orientation==='horizontal'  ? 'xAxis' : 'yAxis';
+  const [warningMsg,setWarningMsg] = useState({maxMsg:'',minMsg:''});
+
+  const validateMaxValue = () => {
+    const enteredValue = config[section].max;
+    let message = '';
+
+   switch(true){
+     case (enteredValue  && parseFloat(enteredValue) < parseFloat(maxValue) && existPositiveValue):
+       message = 'Max value must be more than '+ maxValue;
+       break;
+     case (enteredValue  && parseFloat(enteredValue) < 0 && !existPositiveValue):
+       message = 'Value must be more than or equal to 0';
+       break;
+     default : message = '' ;
+   }
+    setWarningMsg(function(prevMsg){return{...prevMsg,maxMsg:message}});
+  };
+
+
+  const validateMinValue = ()=>{
+   const enteredValue = config[section].min;
+   let minVal = Number(minValue); 
+   let message = '';
+
+  switch(true){
+    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):
+      message = 'Value must be less than or equal to 0';
+      break; 
+    case ( enteredValue &&  minVal < 0 && parseFloat(enteredValue) > minVal) :
+      message = 'Value must be less than ' + minValue; 
+      break;
+    default : message = ''
+  };
+    setWarningMsg(function (prevMsg) { return {...prevMsg, minMsg: message}});
+ };
+
+useEffect(()=>{
+  validateMinValue();
+  validateMaxValue();
+},[minValue,maxValue,config]);
 
-  useEffect(() => {
-    if (config[section].max && config[section].max < maxValue) {
-      updateField(section,null,'max',maxValue)
-      updateWarningMsg(function (presMsg) {return {...presMsg, maxMsg: `Entered value ${config[section].max} is not valid `}})
-    } 
-  }, [data,maxValue])
-  
-  useEffect(() => {
-    if (config.visualizationType === 'Line') {
-      if (config[section].min && config[section].min > minValue) {
-        updateWarningMsg(function (presMsg) { return { ...presMsg, minMsg: `Entered value ${config[section].min} is not valid`}})
-        updateField(section,null,'min',minValue)
-      }
-    } else {
-      if (config[section].min && config[section].min < minValue) {
-        updateWarningMsg(function (presMsg) { return { ...presMsg, minMsg: `Entered value ${config[section].min} is not valid`}})
-        updateField(section,null,'min',minValue)
-      }
-    }
-  }, [data,minValue])
-  
   return (
     <ErrorBoundary component="EditorPanel">
       {config.newViz && <Confirm/>}
@@ -661,27 +643,54 @@ const EditorPanel = () => {
                   </AccordionItemButton>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  <Select value={config.visualizationType} fieldName="visualizationType" label="Chart Type" updateField={updateField} options={[ 'Pie', 'Line', 'Bar', 'Combo', 'Paired Bar']}/>
-                  {config.visualizationType === 'Bar' && <Select value={config.visualizationSubType || 'Regular'} fieldName="visualizationSubType" label="Chart Subtype" updateField={updateField} options={[ 'regular', 'stacked' ]}/>}
+                  <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()}/>}
+                  {(config.visualizationType === 'Bar' && config.barStyle==='rounded' ) &&   <Select value={config.tipRounding||'top'} fieldName="tipRounding" label="tip rounding" updateField={updateField} options={['top','full']}/>}
+                  {(config.visualizationType === 'Bar' && config.barStyle==='rounded' ) &&   <Select value={config.roundingStyle||'standard'} fieldName="roundingStyle" label="rounding style" updateField={updateField} options={['standard','shallow','finger']}/>}
                   {(config.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' ]}/>
                   }
-                  {(showLollipopCheckbox()) &&
-                    <CheckBox value={config.isLollipopChart} fieldName="isLollipopChart" label="Use lollipop styling" updateField={updateField} tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target><Icon display="question" style={{ marginLeft: '0.5rem' }}/></Tooltip.Target>
+                  {config.orientation === 'horizontal' && (config.yAxis.labelPlacement === 'Below Bar' || config.yAxis.labelPlacement === 'On Date/Category Axis' || config.visualizationType === 'Paired Bar' ) ? (
+                    <CheckBox value={config.yAxis.displayNumbersOnBar} section="yAxis" fieldName="displayNumbersOnBar" label={config.isLollipopChart ? 'Display Numbers after Bar' : 'Display Numbers on Bar'} updateField={updateField}/>
+                  ): 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.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>Select this option to replace each bar with a line and a dot at the end.</p>
+                        <p>Super Title</p>
                         </Tooltip.Content>
                       </Tooltip>
-                    }/>
-                  }
-                  {config.orientation === 'horizontal' && (config.yAxis.labelPlacement === 'Below Bar' || config.yAxis.labelPlacement === 'On Date/Category Axis') &&
-                    <CheckBox value={config.yAxis.displayNumbersOnBar} section="yAxis" fieldName="displayNumbersOnBar" label={config.isLollipopChart ? 'Display Numbers after Bar' : 'Display Numbers on Bar'} 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
+										type='textarea'
+										value={config.introText}
+										updateField={updateField}
+										fieldName='introText'
+										label='Intro Text'
+										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" updateField={updateField} tooltip={
                     <Tooltip style={{ textTransform: 'none' }}>
@@ -690,7 +699,23 @@ const EditorPanel = () => {
                         <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>
-                  }/>
+                  } />
+                  
+                  <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>
+										}
+									/>
 
                   {config.visualizationSubType !== 'horizontal' &&
                     <TextField type="number" value={config.height} fieldName="height" label="Chart Height" updateField={updateField}/>
@@ -711,17 +736,17 @@ const EditorPanel = () => {
                     {((!config.series || config.series.length === 0 || config.series.length < 2) && (config.visualizationType === 'Paired Bar')) && <p className="warning">Select two data series for paired bar chart (e.g., Male and Female).</p>}
                     {config.series && config.series.length !== 0 && (
                       <>
-                        <label>
-                          <span className="edit-label">
+                        <fieldset>
+                          <legend className="edit-label float-left">
                             Displaying
-                            <Tooltip style={{ textTransform: 'none' }}>
-                              <Tooltip.Target><Icon display="question" style={{ marginLeft: '0.5rem' }}/></Tooltip.Target>
-                              <Tooltip.Content>
-                                <p>A data series is a set of related data points plotted in a chart and typically represented in the chart legend.</p>
-                              </Tooltip.Content>
-                            </Tooltip>
-                          </span>
-                        </label>
+                          </legend>
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target><Icon display="question" style={{ marginLeft: '0.5rem' }}/></Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>A data series is a set of related data points plotted in a chart and typically represented in the chart legend.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        </fieldset>
                         <ul className="series-list">
                           {config.series.map((series, i) => {
 
@@ -738,7 +763,10 @@ const EditorPanel = () => {
                                 }} style={{ width: '100px', marginRight: '10px' }}>
                                   <option value="" default>Select</option>
                                   <option value="Bar">Bar</option>
-                                  <option value="Line">Line</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>
                               )
 
@@ -749,8 +777,8 @@ const EditorPanel = () => {
                                   </div>
                                   <span>
                                     <span className="series-list__dropdown">{typeDropdown}</span>
-                                    {config.series.length > 1 &&
-                                      <span className="series-list__remove" onClick={() => removeSeries(series.dataKey)}>&#215;</span>
+                                    {config.series && config.series.length > 1 &&
+                                      <button className="series-list__remove" onClick={() => removeSeries(series.dataKey)}>&#215;</button>
                                     }
                                   </span>
                                 </li>
@@ -764,8 +792,8 @@ const EditorPanel = () => {
                                     {series.dataKey}
                                   </div>
                                 </div>
-                                {config.series.length > 1 &&
-                                  <span className="series-list__remove" onClick={() => removeSeries(series.dataKey)}>&#215;</span>
+                                {config.series && config.series.length > 1 &&
+                                  <button className="series-list__remove" onClick={() => removeSeries(series.dataKey)}>&#215;</button>
                                 }
                               </li>
                             )
@@ -786,6 +814,14 @@ const EditorPanel = () => {
                         <Select value={config.confidenceKeys.lower || ''} section="confidenceKeys" fieldName="lower" label="Lower" updateField={updateField} initial="Select" options={getColumns()}/>
                       </>
                     )}
+
+                    {config.series && config.series.length === 1 && <Select
+                      fieldName="visualizationType"
+                      label="Rank by Value"
+                      initial="Select"
+                      onChange={(e) => sortSeries(e.target.value)}
+                      options={['asc', 'desc']} />}
+                    
                   </AccordionItemPanel>
                 </AccordionItem>
               }
@@ -815,7 +851,14 @@ const EditorPanel = () => {
                     <>
                       <TextField value={config.yAxis.label} section="yAxis" fieldName="label" label="Label" 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} type="number" section="yAxis" fieldName="size" label={config.orientation === 'horizontal' ? 'Size (Height)' : 'Size (Width)'} className="number-narrow" updateField={updateField}/>
+                      <TextField value={config.yAxis.size} type="number" section="yAxis" fieldName="size" label={config.orientation === 'horizontal' ? 'Size (Height)' : 'Size (Width)'} className="number-narrow" updateField={updateField} tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target><Icon display="question"/></Tooltip.Target>
+                        <Tooltip.Content>
+                         <p>{`Increase the size if elements in the ${config.orientation} axis are being crowded or hidden behind other elements.  Decrease if less space is required for the value axis.`}</p>  
+                        </Tooltip.Content>
+                      </Tooltip>
+                      }/>
                       {config.orientation !== 'horizontal' && <CheckBox value={config.yAxis.gridLines} section="yAxis" fieldName="gridLines" label="Display Gridlines" updateField={updateField}/>}
                     </>
                   )}
@@ -848,17 +891,17 @@ const EditorPanel = () => {
                       <CheckBox value={config.xAxis.hideAxis} section="xAxis" fieldName="hideAxis" label="Hide Axis" updateField={updateField} />
                       <CheckBox value={config.xAxis.hideLabel} section="xAxis" fieldName="hideLabel" label="Hide Label" updateField={updateField} />
                       <CheckBox value={config.xAxis.hideTicks} section="xAxis" fieldName="hideTicks" label="Hide Ticks" updateField={updateField} />
-                      <TextField value={config.xAxis.max} type='number' label='update max value' placeholder='Auto' onChange={(e) => onMaxChangeHandler(e)} />
+                      <TextField value={config.xAxis.max}  section='xAxis' fieldName='max' label='update max value' type='number' placeholder='Auto'  updateField={updateField} />
                       <span style={{color:'red',display:'block'}} >{warningMsg.maxMsg}</span>
                     </>
-                    : config.visualizationType !=='Pie' &&
+                    : (config.visualizationType !=='Pie') &&
                     <>
                       <CheckBox value={config.yAxis.hideAxis} section="yAxis" fieldName="hideAxis" label="Hide Axis" updateField={updateField} />
                       <CheckBox value={config.yAxis.hideLabel} section="yAxis" fieldName="hideLabel" label="Hide Label" updateField={updateField} />
                       <CheckBox value={config.yAxis.hideTicks} section="yAxis" fieldName="hideTicks" label="Hide Ticks" updateField={updateField} />
-                      <TextField value={config.yAxis.max} type='number' label='update max value' placeholder='Auto' onChange={(e) => onMaxChangeHandler(e)} />
+                      <TextField value={config.yAxis.max} section='yAxis' fieldName='max' type='number' label='update max value' placeholder='Auto' updateField={updateField}  />
                       <span style={{color:'red',display:'block'}} >{warningMsg.maxMsg}</span>
-                      <TextField value={config.yAxis.min} type='number' label='update min value' placeholder='Auto' onChange={(e)=>onMinChangeHandler(e)}  />
+                      <TextField value={config.yAxis.min} section='yAxis' fieldName='min' type='number' label='update min value' placeholder='Auto' updateField={updateField}  />
                       <span style={{color:'red',display:'block'}} >{warningMsg.minMsg}</span>
                     </>
                   }
@@ -926,7 +969,9 @@ const EditorPanel = () => {
                             <>
                               {config.exclusions.keys.length > 0 &&
                                 <>
-                                  <label><span className="edit-label">Excluded Keys</span></label>
+                                  <fieldset>
+                                    <legend className="edit-label">Excluded Keys</legend>
+                                  </fieldset>
                                   <ExclusionsList/>
                                 </>
                               }
@@ -989,7 +1034,9 @@ const EditorPanel = () => {
                         <>
                           {config.exclusions.keys.length > 0 &&
                             <>
-                              <label><span className="edit-label">Excluded Keys</span></label>
+                              <fieldset>
+                                <legend className="edit-label">Excluded Keys</legend>
+                              </fieldset>
                               <ExclusionsList/>
                             </>
                           }
@@ -1027,7 +1074,18 @@ const EditorPanel = () => {
                   </AccordionItemButton>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                    <CheckBox value={config.legend.reverseLabelOrder} section="legend" fieldName="reverseLabelOrder" label="Reverse Labels" updateField={updateField}/>
+                <CheckBox value={config.legend.reverseLabelOrder} section="legend" fieldName="reverseLabelOrder" label="Reverse Labels" updateField={updateField}/>
+                  {/* <fieldset className="checkbox-group">
+                    <CheckBox value={config.legend.dynamicLegend} section="legend" fieldName="dynamicLegend" label="Dynamic Legend" updateField={updateField}/>
+                    {config.legend.dynamicLegend && (
+                      <>
+                        <TextField value={config.legend.dynamicLegendDefaultText} section="legend" fieldName="dynamicLegendDefaultText" label="Dynamic Legend Default Text" updateField={updateField} />
+                        <TextField value={config.legend.dynamicLegendItemLimit} type="number" min="0" section="legend" fieldName="dynamicLegendItemLimit" label={'Dynamic Legend Limit'} className="number-narrow" updateField={updateField}/>
+                        <TextField value={config.legend.dynamicLegendItemLimitMessage} section="legend" fieldName="dynamicLegendItemLimitMessage" label="Dynamic Legend Item Limit Message" updateField={updateField} />
+                        <TextField value={config.legend.dynamicLegendChartMessage} section="legend" fieldName="dynamicLegendChartMessage" label="Dynamic Legend Chart Message" updateField={updateField} />
+                      </>
+                    )}
+                  </fieldset> */}
                   <CheckBox value={config.legend.hide} section="legend" fieldName="hide" label="Hide Legend" updateField={updateField} tooltip={
                     <Tooltip style={{ textTransform: 'none' }}>
                       <Tooltip.Target><Icon display="question" style={{ marginLeft: '0.5rem' }}/></Tooltip.Target>
@@ -1036,9 +1094,14 @@ const EditorPanel = () => {
                       </Tooltip.Content>
                     </Tooltip>
                   }/>
+
+                  {(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)}/>
+                  )}
                   <Select value={config.legend.behavior} section="legend" fieldName="behavior" label="Legend Behavior (When clicked)" updateField={updateField} options={[ 'highlight', 'isolate' ]}/>
                   <TextField value={config.legend.label} section="legend" fieldName="label" label="Title" updateField={updateField}/>
                   <Select value={config.legend.position} section="legend" fieldName="position" label="Position" updateField={updateField} options={[ 'right', 'left' ]}/>
+                  <TextField type='textarea' value={config.legend.description} 	updateField={updateField} 	section='legend' 	fieldName='description' 	label='Legend Description' />
                 </AccordionItemPanel>
               </AccordionItem>
 
@@ -1139,12 +1202,12 @@ const EditorPanel = () => {
 
                   {config.isLollipopChart &&
                     <>
-                      <label className="header">
-                        <span className="edit-label">Lollipop Shape</span>
+                      <fieldset className="header">
+                        <legend className="edit-label">Lollipop Shape</legend>
                         <div onChange={(e) => {
                           setLollipopShape(e.target.value)
                         }}>
-                          <label>
+                          <label className="radio-label">
                             <input
                               type="radio"
                               name="lollipopShape"
@@ -1153,7 +1216,7 @@ const EditorPanel = () => {
                             />
                             Circle
                           </label>
-                          <label>
+                          <label className="radio-label">
                             <input
                               type="radio"
                               name="lollipopShape"
@@ -1164,7 +1227,7 @@ const EditorPanel = () => {
                           </label>
                         </div>
 
-                      </label>
+                      </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' ]}/>
                     </>
@@ -1172,11 +1235,15 @@ const EditorPanel = () => {
 
                   <Select value={config.fontSize} fieldName="fontSize" label="Font Size" updateField={updateField} options={[ 'small', 'medium', 'large' ]}/>
 
-                  {config.series?.some(series => series.type === 'Bar') &&
+                  {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' ]}/>
                   }
 
-                  {((config.series?.some(series => series.type === 'Line') && config.visualizationType === 'Combo') || config.visualizationType === 'Line') &&
+                  {/* <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') && config.visualizationType === 'Combo') || config.visualizationType === 'Line' || config.visualizationType === "Spark Line") &&
                     <Select value={config.lineDatapointStyle} fieldName="lineDatapointStyle" label="Line Datapoint Style" updateField={updateField} options={[ 'hidden', 'hover', 'always show' ]}/>
                   }
 
@@ -1184,10 +1251,15 @@ const EditorPanel = () => {
                     <span className="edit-label">Header Theme</span>
                     <ul className="color-palette">
                       {headerColors.map((palette) => (
-                        <li title={palette} key={palette} onClick={() => {
-                          updateConfig({ ...config, theme: palette })
-                        }} className={config.theme === palette ? 'selected ' + palette : palette}>
-                        </li>
+                        <button 
+                          title={palette}
+                          key={palette} 
+                          onClick={(e) => {
+                            e.preventDefault();
+                            updateConfig({ ...config, theme: palette })
+                          }} 
+                          className={config.theme === palette ? 'selected ' + palette : palette}>
+                        </button>
                       ))}
                     </ul>
                   </label>
@@ -1213,13 +1285,19 @@ const EditorPanel = () => {
                       }
 
                       return (
-                        <li title={palette} key={palette} onClick={() => {
-                          updateConfig({ ...config, palette })
-                        }} className={config.palette === palette ? 'selected' : ''}>
+                        <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>
-                        </li>
+                        </button>
                       )
                     })}
                   </ul>
@@ -1241,22 +1319,25 @@ const EditorPanel = () => {
 
 
                       return (
-                        <li title={palette} key={palette} onClick={() => {
-                          updateConfig({ ...config, palette })
-                        }} className={config.palette === palette ? 'selected' : ''}>
+                        <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>
-                        </li>
+                        </button>
                       )
                     })}
                   </ul>
 
                   {config.visualizationType !== 'Pie' && (
                     <>
-                      {config.orientation !== 'horizontal' &&
-                        <CheckBox value={config.labels} fieldName="labels" label="Display label on data" updateField={updateField}/>
-                      }
                       <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>
@@ -1274,13 +1355,15 @@ const EditorPanel = () => {
                     <TextField value={config.barThickness} type="number" fieldName="barThickness" label="Bar Thickness" updateField={updateField}/>
                   }
 
-                  {/* <div className="cove-accordion__panel-section">
-                    <CheckBox value={config.visual?.border} section="visual" fieldName="border" label="Display Border" updateField={updateField} />
-                    <CheckBox value={config.visual?.borderColorTheme} section="visual" fieldName="borderColorTheme" label="Use Border Color Theme" updateField={updateField} />
-                    <CheckBox value={config.visual?.accent} section="visual" fieldName="accent" label="Use Accent Style" updateField={updateField} />
-                    <CheckBox value={config.visual?.background} section="visual" fieldName="background" label="Use Theme Background Color" updateField={updateField} />
-                    <CheckBox value={config.visual?.hideBackgroundColor} section="visual" fieldName="hideBackgroundColor" label="Hide Background Color" updateField={updateField} />
-                  </div> */}
+                  {config.visualizationType === "Spark Line" &&
+                    <div className="cove-accordion__panel-section checkbox-group">
+                      <CheckBox value={config.visual?.border} section="visual" fieldName="border" label="Display Border" updateField={updateField} />
+                      <CheckBox value={config.visual?.borderColorTheme} section="visual" fieldName="borderColorTheme" label="Use Border Color Theme" updateField={updateField} />
+                      <CheckBox value={config.visual?.accent} section="visual" fieldName="accent" label="Use Accent Style" updateField={updateField} />
+                      <CheckBox value={config.visual?.background} section="visual" fieldName="background" label="Use Theme Background Color" updateField={updateField} />
+                      <CheckBox value={config.visual?.hideBackgroundColor} section="visual" fieldName="hideBackgroundColor" label="Hide Background Color" updateField={updateField} />
+                    </div>
+                  }
                 </AccordionItemPanel>
               </AccordionItem>
 
@@ -1299,10 +1382,31 @@ const EditorPanel = () => {
                       </Tooltip.Content>
                     </Tooltip>
                   }/>
+                  	<TextField
+											value={config.table.caption}
+											updateField={updateField}
+											section='table'
+                      type='textarea'
+											fieldName='caption'
+											label='Data Table Caption'
+											placeholder=' Data table'
+                      tooltip={
+                        <Tooltip style={{textTransform: 'none'}}>
+                          <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Enter a description of  the data table to be read by screen readers.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                      />
+                   <CheckBox value={config.table.limitHeight} section="table" fieldName="limitHeight" label="Limit Table Height" updateField={updateField}/>
+                   {config.table.limitHeight && (
+                   <TextField value={config.table.height} section="table" fieldName='height'  label='Data Table Height' type="number" min="0" max="500" 	placeholder='Height(px)' updateField={updateField}/>
+                   )}
                   <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}/>
                   <TextField value={config.table.label} section="table" fieldName="label" label="Label" updateField={updateField}/>
-                  <TextField value={config.table.indexLabel} section="table" fieldName="indexLabel" label="Index Column Header" updateField={updateField}/>
+                 {config.visualizationType !== 'Pie' && <TextField value={config.table.indexLabel} section="table" fieldName="indexLabel" label="Index Column Header" updateField={updateField}/>}
                 </AccordionItemPanel>
               </AccordionItem>
             </Accordion>