@cdc/waffle-chart 1.0.2 → 4.22.11

package/src/components/EditorPanel.js

@@ -16,27 +16,29 @@ import '@cdc/core/styles/v2/components/editor.scss'
 
 import { DATA_OPERATORS, DATA_FUNCTIONS } from '../CdcWaffleChart'
 
-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 headerColors = ['theme-blue', 'theme-purple', 'theme-brown', 'theme-teal', 'theme-pink', 'theme-orange', 'theme-slate', 'theme-indigo', 'theme-cyan', 'theme-green', 'theme-amber']
 
 const CheckBox = memo(({ label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes }) => (
-  <label className="checkbox">
-    <input type="checkbox" name={fieldName} checked={value} onChange={() => { updateField(section, subsection, fieldName, !value) }} {...attributes} />
-    <span className="edit-label column-heading">{label}</span><span className="cove-icon">{tooltip}</span>
+  <label className='checkbox'>
+    <input
+      type='checkbox'
+      name={fieldName}
+      checked={value}
+      onChange={() => {
+        updateField(section, subsection, fieldName, !value)
+      }}
+      {...attributes}
+    />
+    <span className='edit-label column-heading'>{label}</span>
+    <span className='cove-icon'>{tooltip}</span>
   </label>
 ))
 
-const EditorPanel = memo((props) => {
-  const {
-    config,
-    updateConfig,
-    loading,
-    data,
-    setParentConfig,
-    isDashboard
-  } = useContext(ConfigContext)
+const EditorPanel = memo(props => {
+  const { config, updateConfig, loading, data, setParentConfig, isDashboard } = useContext(ConfigContext)
 
-  const [ displayPanel, setDisplayPanel ] = useState(true)
-  const [ showConfigConfirm, setShowConfigConfirm ] = useState(false)
+  const [displayPanel, setDisplayPanel] = useState(true)
+  const [showConfigConfirm, setShowConfigConfirm] = useState(false)
 
   const updateField = (section, subsection, fieldName, newValue) => {
     // Top level
@@ -53,11 +55,11 @@ const EditorPanel = memo((props) => {
 
     const isArray = Array.isArray(config[section])
 
-    let sectionValue = isArray ? [ ...config[section], newValue ] : { ...config[section], [fieldName]: newValue }
+    let sectionValue = isArray ? [...config[section], newValue] : { ...config[section], [fieldName]: newValue }
 
     if (null !== subsection) {
       if (isArray) {
-        sectionValue = [ ...config[section] ]
+        sectionValue = [...config[section]]
         sectionValue[subsection] = { ...sectionValue[subsection], [fieldName]: newValue }
       } else if (typeof newValue === 'string') {
         sectionValue[subsection] = newValue
@@ -71,21 +73,15 @@ const EditorPanel = memo((props) => {
   }
 
   useEffect(() => {
-
-    console.log('updating parent')
-    console.log(setParentConfig)
     // Pass up to Editor if needed
     if (setParentConfig) {
       const newConfig = convertStateToConfig()
-
-      console.log('newConfig', newConfig)
-
       setParentConfig(newConfig)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ config ])
+  }, [config])
 
-  useEffect(()=> {
+  useEffect(() => {
     if (!showConfigConfirm) {
       let newConfig = { ...config }
       delete newConfig.newViz
@@ -95,7 +91,7 @@ const EditorPanel = memo((props) => {
 
   useEffect(() => {
     //Verify comparate data type
-    let operators = [ '<', '>', '<=', '>=' ]
+    let operators = ['<', '>', '<=', '>=']
     if (config.dataConditionalComparate !== '') {
       if (operators.indexOf(config.dataConditionalOperator) > -1 && isNaN(config.dataConditionalComparate)) {
         updateConfig({ ...config, invalidComparate: true })
@@ -107,7 +103,7 @@ const EditorPanel = memo((props) => {
     } else {
       updateConfig({ ...config, invalidComparate: false })
     }
-  }, [ config.dataConditionalOperator, config.dataConditionalComparate ])
+  }, [config.dataConditionalOperator, config.dataConditionalComparate])
 
   const onBackClick = () => {
     setDisplayPanel(!displayPanel)
@@ -121,8 +117,8 @@ const EditorPanel = memo((props) => {
 
   const Error = () => {
     return (
-      <section className="waiting">
-        <section className="waiting-container">
+      <section className='waiting'>
+        <section className='waiting-container'>
           <h3>Error With Configuration</h3>
           <p>{config.runtime.editorErrorMessage}</p>
         </section>
@@ -131,7 +127,7 @@ const EditorPanel = memo((props) => {
   }
 
   const Confirm = () => {
-    const confirmDone = (e) => {
+    const confirmDone = e => {
       e.preventDefault()
       let newConfig = { ...config }
       delete newConfig.newViz
@@ -139,11 +135,13 @@ const EditorPanel = memo((props) => {
     }
 
     return (
-      <section className="waiting">
-        <section className="waiting-container">
+      <section className='waiting'>
+        <section className='waiting-container'>
           <h3>Finish Configuring</h3>
           <p>Set all required options to the left and confirm below to display a preview of the chart.</p>
-          <button className="btn" style={{ margin: '1em auto' }} onClick={confirmDone}>I'm Done</button>
+          <button className='btn' style={{ margin: '1em auto' }} onClick={confirmDone}>
+            I'm Done
+          </button>
         </section>
       </section>
     )
@@ -158,19 +156,19 @@ const EditorPanel = memo((props) => {
   }
 
   const addNewFilter = () => {
-    let filters = config.filters ? [ ...config.filters ] : []
+    let filters = config.filters ? [...config.filters] : []
     filters.push({ values: [] })
     updateConfig({ ...config, filters })
   }
 
-  const removeFilter = (index) => {
-    let filters = [ ...config.filters ]
+  const removeFilter = index => {
+    let filters = [...config.filters]
     filters.splice(index, 1)
     updateConfig({ ...config, filters })
   }
 
   const updateFilterProp = (name, index, value) => {
-    let filters = [ ...config.filters ]
+    let filters = [...config.filters]
     filters[index][name] = value
     updateConfig({ ...config, filters })
   }
@@ -178,12 +176,12 @@ const EditorPanel = memo((props) => {
   const getColumns = (filter = true) => {
     let columns = {}
 
-    data.map(row => Object.keys(row).forEach(columnName => columns[columnName] = true))
+    data.map(row => Object.keys(row).forEach(columnName => (columns[columnName] = true)))
 
     return Object.keys(columns)
   }
 
-  const getFilterColumnValues = (index) => {
+  const getFilterColumnValues = index => {
     let filterDataOptions = []
     const filterColumnName = config.filters[index].columnName
     if (data && filterColumnName) {
@@ -198,215 +196,240 @@ const EditorPanel = memo((props) => {
   }
 
   const editorContent = (
-
     <Accordion>
-      <Accordion.Section title="General">
-        <InputText value={config.title} fieldName="title" label="Title" placeholder="Waffle Chart Title"
-                   updateField={updateField}/>
-        <InputText type="textarea" value={config.content} fieldName="content" label="Message" updateField={updateField} tooltip={
-          <Tooltip style={{textTransform: 'none'}}>
-            <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
-            <Tooltip.Content>
-              <p>Enter the message text for the visualization. The following HTML tags are supported: strong, em, sup, and sub.</p>
-            </Tooltip.Content>
-          </Tooltip>
-        }/>
-        <InputText value={config.subtext} fieldName="subtext" label="Subtext/Citation"
-                   placeholder="Waffle Chart Subtext or Citation" updateField={updateField} tooltip={
-          <Tooltip style={{textTransform: 'none'}}>
-            <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
-            <Tooltip.Content>
-              <p>Enter supporting text to display below the data visualization, if applicable. The following HTML tags are supported: strong, em, sup, and sub.</p>
-            </Tooltip.Content>
-          </Tooltip>
-        }/>
+      <Accordion.Section title='General'>
+        <InputText value={config.title} fieldName='title' label='Title' placeholder='Waffle Chart Title' updateField={updateField} />
+
+        <InputText
+          type='textarea'
+          value={config.content}
+          fieldName='content'
+          label='Message'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Enter the message text for the visualization. The following HTML tags are supported: strong, em, sup, and sub.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        <InputText
+          value={config.subtext}
+          fieldName='subtext'
+          label='Subtext/Citation'
+          placeholder='Waffle Chart Subtext or Citation'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Enter supporting text to display below the data visualization, if applicable. The following HTML tags are supported: strong, em, sup, and sub.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
       </Accordion.Section>
-      <Accordion.Section title="Data">
+      <Accordion.Section title='Data'>
         <h4 style={{ fontWeight: '600' }}>Numerator</h4>
-        <div className="cove-accordion__panel-section">
-          <div className="cove-input-group">
-            <InputSelect value={config.dataColumn || ''} fieldName="dataColumn" label="Data Column"
-                         updateField={updateField} initial="Select" options={getColumns()}/>
+        <div className='cove-accordion__panel-section'>
+          <div className='cove-input-group'>
+            <InputSelect value={config.dataColumn || ''} fieldName='dataColumn' label='Data Column' updateField={updateField} initial='Select' options={getColumns()} className='cove-input' />
           </div>
 
-          <div className="cove-input-group">
-            <InputSelect value={config.dataFunction || ''} fieldName="dataFunction" label="Data Function"
-                         updateField={updateField} initial="Select" options={DATA_FUNCTIONS}/>
+          <div className='cove-input-group'>
+            <InputSelect value={config.dataFunction || ''} fieldName='dataFunction' label='Data Function' updateField={updateField} initial='Select' options={DATA_FUNCTIONS} className='cove-input' />
           </div>
 
-          <div className="cove-input-group">
-            <label><span className="edit-label">Data Conditional</span></label>
-            <div className="cove-accordion__panel-row cove-accordion__small-inputs">
-              <div className="cove-accordion__panel-col">
-                <InputSelect value={config.dataConditionalColumn || ''} fieldName="dataConditionalColumn"
-                             updateField={updateField} initial="Select" options={getColumns()}/>
+          <div className='cove-input-group'>
+            <label>
+              <span className='edit-label cove-input__label'>Data Conditional</span>
+            </label>
+            <div className='cove-accordion__panel-row cove-accordion__small-inputs'>
+              <div className='cove-accordion__panel-col'>
+                <InputSelect value={config.dataConditionalColumn || ''} fieldName='dataConditionalColumn' updateField={updateField} initial='Select' options={getColumns()} className='cove-input' />
               </div>
-              <div className="cove-accordion__panel-col">
-                <InputSelect value={config.dataConditionalOperator || ''} fieldName="dataConditionalOperator"
-                             updateField={updateField} initial="Select" options={DATA_OPERATORS}/>
+              <div className='cove-accordion__panel-col'>
+                <InputSelect value={config.dataConditionalOperator || ''} fieldName='dataConditionalOperator' updateField={updateField} initial='Select' options={DATA_OPERATORS} className='cove-input' />
               </div>
-              <div className="cove-accordion__panel-col">
-                <InputText value={config.dataConditionalComparate} fieldName={'dataConditionalComparate'}
-                           updateField={updateField}
-                           className={config.invalidComparate ? 'cove-accordion__input-error' : ''}
-                           style={{minHeight: '2rem'}}
-                />
+              <div className='cove-accordion__panel-col'>
+                <InputText value={config.dataConditionalComparate} fieldName={'dataConditionalComparate'} updateField={updateField} className={config.invalidComparate ? 'cove-accordion__input-error' : ''} style={{ minHeight: '2rem' }} />
               </div>
             </div>
           </div>
 
-          {config.invalidComparate &&
-            <div className="cove-accordion__panel-error">
-              Non-numerical comparate values can only be used with = or ≠.
-            </div>
-          }
+          {config.invalidComparate && <div className='cove-accordion__panel-error'>Non-numerical comparate values can only be used with = or ≠.</div>}
         </div>
-        <div className="cove-accordion__panel-row align-center">
-          <div className="cove-accordion__panel-col">
+        <div className='cove-accordion__panel-row align-center'>
+          <div className='cove-accordion__panel-col'>
             <h4 style={{ fontWeight: '600' }}>Denominator</h4>
           </div>
-          <div className="cove-accordion__panel-col">
-            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
-              <label className="cove-accordion__panel-label--inline">Select from data</label>
-              <InputCheckbox size='small' value={config.customDenom} fieldName='customDenom' updateField={updateField}/>
+          <div className='cove-accordion__panel-col'>
+            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+              <label className='cove-accordion__panel-label--inline'>Select from data</label>
+              <InputCheckbox size='small' value={config.customDenom} fieldName='customDenom' updateField={updateField} />
             </div>
           </div>
         </div>
-        <div className="cove-accordion__panel-section">
-          {!config.customDenom &&
-            <div className="cove-accordion__panel-row align-center">
-              <div className="cove-accordion__panel-col">
-                <InputText value={config.dataDenom} fieldName="dataDenom" updateField={updateField}/>
+        <div className='cove-accordion__panel-section'>
+          {!config.customDenom && (
+            <div className='cove-accordion__panel-row align-center'>
+              <div className='cove-accordion__panel-col'>
+                <InputText value={config.dataDenom} fieldName='dataDenom' updateField={updateField} />
               </div>
-              <div className="cove-accordion__panel-col" style={{display: 'flex', alignItems: 'center'}}>
-                <label className="cove-accordion__panel-label--muted">default (100)</label>
+              <div className='cove-accordion__panel-col' style={{ display: 'flex', alignItems: 'center' }}>
+                <label className='cove-accordion__panel-label--muted'>default (100)</label>
               </div>
             </div>
-          }
-          {config.customDenom &&
+          )}
+          {config.customDenom && (
             <>
-              <InputSelect value={config.dataDenomColumn || ''} fieldName="dataDenomColumn" label="Data Column"
-                           updateField={updateField} initial="Select" options={getColumns()}/>
-              <InputSelect value={config.dataDenomFunction || ''} fieldName="dataDenomFunction" label="Data Function"
-                           updateField={updateField} initial="Select" options={DATA_FUNCTIONS}/>
+              <InputSelect value={config.dataDenomColumn || ''} fieldName='dataDenomColumn' label='Data Column' updateField={updateField} initial='Select' options={getColumns()} />
+              <InputSelect value={config.dataDenomFunction || ''} fieldName='dataDenomFunction' label='Data Function' updateField={updateField} initial='Select' options={DATA_FUNCTIONS} />
             </>
-          }
+          )}
         </div>
-        <ul className="column-edit">
-          <li className="three-col">
-            <div style={{marginRight: '1rem'}}>
-              <InputText value={config.prefix} fieldName="prefix" label="Prefix" updateField={updateField}/>
+        <ul className='column-edit'>
+          <li className='three-col'>
+            <div style={{ marginRight: '1rem' }}>
+              <InputText value={config.prefix} fieldName='prefix' label='Prefix' updateField={updateField} />
             </div>
-            <div style={{marginRight: '1rem'}}>
-              <InputText value={config.suffix} fieldName="suffix" label="Suffix" updateField={updateField}/>
+            <div style={{ marginRight: '1rem' }}>
+              <InputText value={config.suffix} fieldName='suffix' label='Suffix' updateField={updateField} />
             </div>
             <div>
-              <InputText type="number" value={config.roundToPlace} fieldName="roundToPlace" label="Round" updateField={updateField}/>
+              <InputText type='number' value={config.roundToPlace} fieldName='roundToPlace' label='Round' updateField={updateField} />
             </div>
           </li>
         </ul>
 
-        <hr className="cove-accordion__divider" />
+        <hr className='cove-accordion__divider' />
 
-        <label style={{marginBottom: '1rem'}}>
-          <span className="edit-label">Data Point Filters</span>
+        <label style={{ marginBottom: '1rem' }}>
+          <span className='edit-label'>Data Point Filters</span>
           <Tooltip style={{ textTransform: 'none' }}>
-            <Tooltip.Target><Icon display="question" style={{ marginLeft: '0.5rem' }}/></Tooltip.Target>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
             <Tooltip.Content>
-              <p>To refine the highlighted data point, specify one or more filters (e.g., "Male" and
-                "Female" for a column called "Sex").</p>
+              <p>To refine the highlighted data point, specify one or more filters (e.g., "Male" and "Female" for a column called "Sex").</p>
             </Tooltip.Content>
           </Tooltip>
         </label>
-        {config.filters &&
-          <ul className="filters-list" style={{paddingLeft: 0, marginBottom: '1rem'}}>
+        {config.filters && (
+          <ul className='filters-list' style={{ paddingLeft: 0, marginBottom: '1rem' }}>
             {config.filters.map((filter, index) => (
-              <fieldset className="edit-block" key={index}>
-                <button type="button" className="remove-column" onClick={() => {
-                  removeFilter(index)
-                }}>Remove
+              <fieldset className='edit-block' key={index}>
+                <button
+                  type='button'
+                  className='remove-column'
+                  onClick={() => {
+                    removeFilter(index)
+                  }}
+                >
+                  Remove
                 </button>
                 <label>
-                  <span className="edit-label column-heading">Column</span>
-                  <select value={filter.columnName} onChange={(e) => {
-                    updateFilterProp('columnName', index, e.target.value)
-                  }}>
-                    <option value="">- Select Option -</option>
+                  <span className='edit-label column-heading'>Column</span>
+                  <select
+                    value={filter.columnName}
+                    onChange={e => {
+                      updateFilterProp('columnName', index, e.target.value)
+                    }}
+                  >
+                    <option value=''>- Select Option -</option>
                     {getColumns().map((dataKey, index) => (
-                      <option value={dataKey} key={index}>{dataKey}</option>
+                      <option value={dataKey} key={index}>
+                        {dataKey}
+                      </option>
                     ))}
                   </select>
                 </label>
                 <label>
-                  <span className="edit-label column-heading">Column Value</span>
-                  <select value={filter.columnValue} onChange={(e) => {
-                    updateFilterProp('columnValue', index, e.target.value)
-                  }}>
-                    <option value="">- Select Option -</option>
+                  <span className='edit-label column-heading'>Column Value</span>
+                  <select
+                    value={filter.columnValue}
+                    onChange={e => {
+                      updateFilterProp('columnValue', index, e.target.value)
+                    }}
+                  >
+                    <option value=''>- Select Option -</option>
                     {getFilterColumnValues(index).map((dataKey, index) => (
-                      <option value={dataKey} key={index}>{dataKey}</option>
+                      <option value={dataKey} key={index}>
+                        {dataKey}
+                      </option>
                     ))}
                   </select>
                 </label>
               </fieldset>
             ))}
           </ul>
-        }
-        <Button onClick={addNewFilter} fluid>Add Filter</Button>
+        )}
+        <Button onClick={addNewFilter} fluid>
+          Add Filter
+        </Button>
       </Accordion.Section>
-      <Accordion.Section title="Visual">
-        <InputSelect value={config.shape} fieldName="shape" label="Shape"
-                     updateField={updateField} options={[ 'circle', 'square', 'person' ]}/>
+      <Accordion.Section title='Visual'>
+        <InputSelect value={config.shape} fieldName='shape' label='Shape' updateField={updateField} options={['circle', 'square', 'person']} className='cove-input' />
 
-        <div className="cove-accordion__panel-row cove-accordion__small-inputs" style={{marginTop: '1rem', marginBottom: '1rem'}}>
-          <div className="cove-accordion__panel-col">
-            <InputText type="number" value={config.nodeWidth} fieldName="nodeWidth" label="Width" updateField={updateField}/>
+        <div className='cove-accordion__panel-row cove-accordion__small-inputs' style={{ marginTop: '1rem', marginBottom: '1rem' }}>
+          <div className='cove-accordion__panel-col'>
+            <InputText type='number' value={config.nodeWidth} fieldName='nodeWidth' label='Width' updateField={updateField} />
           </div>
-          <div className="cove-accordion__panel-col">
-            <InputText type="number" value={config.nodeSpacer} fieldName="nodeSpacer" label="Spacer" updateField={updateField}/>
+          <div className='cove-accordion__panel-col'>
+            <InputText type='number' value={config.nodeSpacer} fieldName='nodeSpacer' label='Spacer' updateField={updateField} />
           </div>
         </div>
 
-        <div className="cove-input-group">
-          <InputSelect value={config.orientation} fieldName="orientation" label="Layout"
-                       updateField={updateField} options={[ 'horizontal', 'vertical' ]}/>
+        <div className='cove-input-group'>
+          <InputSelect value={config.orientation} fieldName='orientation' label='Layout' updateField={updateField} className='cove-input' options={['horizontal', 'vertical']} />
         </div>
 
-        <div className="cove-input-group">
-          <label><span className="edit-label column-heading">Data Point Font Size</span></label>
-          <div className="cove-accordion__panel-row cove-accordion__small-inputs align-center">
-            <div className="cove-accordion__panel-col">
-              <InputText type="number" value={config.fontSize} fieldName="fontSize" updateField={updateField}/>
+        <div className='cove-input-group'>
+          <label>
+            <span className='edit-label column-heading cove-input__label'>Data Point Font Size</span>
+          </label>
+          <div className='cove-accordion__panel-row cove-accordion__small-inputs align-center'>
+            <div className='cove-accordion__panel-col'>
+              <InputText type='number' value={config.fontSize} fieldName='fontSize' updateField={updateField} />
             </div>
-            <div className="cove-accordion__panel-col" style={{display: 'flex', alignItems: 'center'}}>
-              <label className="accordion__panel-label--muted">default (50px)</label>
+            <div className='cove-accordion__panel-col' style={{ display: 'flex', alignItems: 'center' }}>
+              <label className='accordion__panel-label--muted'>default (50px)</label>
             </div>
           </div>
         </div>
 
-        <InputSelect value={config.overallFontSize} fieldName="overallFontSize" label="Overall Font Size"
-                     updateField={updateField} options={[ 'small', 'medium', 'large' ]}/>
+        <InputSelect value={config.overallFontSize} fieldName='overallFontSize' label='Overall Font Size' updateField={updateField} options={['small', 'medium', 'large']} className='cove-input' />
 
         <label>
-          <span className="edit-label">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>
+          <span className='edit-label cove-input__label'>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>
             ))}
           </ul>
-
-          {/* <div className="cove-accordion__panel-section">
-            <CheckBox value={config.visual.border} section="visual" fieldName="border" label="Display Borders" updateField={updateField} />
-            <CheckBox value={config.visual.borderColorTheme} section="visual" fieldName="borderColorTheme" label="Use theme border color" 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> */}
-
         </label>
+
+        <div className='cove-accordion__panel-section reverse-labels'>
+          <InputCheckbox inline size='small' value={config.visual.border} section='visual' fieldName='border' label='Display Border' updateField={updateField} />
+          <InputCheckbox inline size='small' value={config.visual.borderColorTheme} section='visual' fieldName='borderColorTheme' label='Use theme border color' updateField={updateField} />
+          <InputCheckbox size='small' value={config.visual.accent} section='visual' fieldName='accent' label='Use Accent Style' updateField={updateField} />
+          <InputCheckbox size='small' value={config.visual.background} section='visual' fieldName='background' label='Use Theme Background Color' updateField={updateField} />
+          <InputCheckbox size='small' value={config.visual.hideBackgroundColor} section='visual' fieldName='hideBackgroundColor' label='Hide Background Color' updateField={updateField} />
+        </div>
       </Accordion.Section>
     </Accordion>
   )
@@ -414,24 +437,19 @@ const EditorPanel = memo((props) => {
   if (loading) return null
 
   return (
-    <ErrorBoundary component="EditorPanel">
-      <div className="cove-editor">
-        {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error/>}
-        {config.newViz && showConfigConfirm && <Confirm/>}
-        <button className={`cove-editor--toggle` + (!displayPanel ? ` collapsed` : ``)}
-                title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}/>
+    <ErrorBoundary component='EditorPanel'>
+      <div className='cove-editor'>
+        {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error />}
+        {config.newViz && showConfigConfirm && <Confirm />}
+        <button className={`cove-editor--toggle` + (!displayPanel ? ` collapsed` : ``)} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick} />
         <section className={`cove-editor__panel` + (displayPanel ? `` : ' hidden')}>
-          <div className="cove-editor__panel-container">
-            <h2 className="cove-editor__heading">Configure Waffle Chart</h2>
-            <section className="cove-editor__content">
-              {editorContent}
-            </section>
+          <div className='cove-editor__panel-container'>
+            <h2 className='cove-editor__heading'>Configure Waffle Chart</h2>
+            <section className='cove-editor__content'>{editorContent}</section>
           </div>
         </section>
-        <div className="cove-editor__content">
-          <div className="cove-editor__content-wrap">
-            {props.children}
-          </div>
+        <div className='cove-editor__content'>
+          <div className='cove-editor__content-wrap'>{props.children}</div>
         </div>
       </div>
     </ErrorBoundary>