@cdc/chart 4.24.7 → 4.24.9

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

@@ -22,7 +22,10 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
 
     if (filter) {
       Object.keys(columns).forEach(key => {
-        if ((config.series && config.series.filter(series => series.dataKey === key).length > 0) || (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))) {
+        if (
+          (config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
+          (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))
+        ) {
           delete columns[key]
         }
       })
@@ -45,7 +48,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
   }
 
   const handleAddAnnotation = () => {
-    const svgContainer = document.querySelector('.chart-container > div > svg')?.getBoundingClientRect()
+    const svgContainer = document.querySelector('.chart-container svg')?.getBoundingClientRect()
     const newSvgDims = [svgContainer.width, svgContainer.height]
 
     const newAnnotation = {
@@ -77,7 +80,12 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
       seriesKey: '',
       x: 50,
       y: Number(newSvgDims?.[1] / 2),
-      xKey: config.xAxis.type === 'date' ? new Date(config?.data?.[0]?.[config.xAxis.dataKey]).getTime() : config.xAxis.type === 'categorical' ? '1/15/2016' : '',
+      xKey:
+        config.xAxis.type === 'date'
+          ? new Date(config?.data?.[0]?.[config.xAxis.dataKey]).getTime()
+          : config.xAxis.type === 'categorical'
+          ? '1/15/2016'
+          : '',
       yKey: '',
       dx: 20,
       dy: -20,
@@ -144,11 +152,17 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
         {config?.annotations &&
           config?.annotations.map((annotation, index) => (
             <Accordion key={index}>
-              <Accordion.Section title={annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}>
+              <Accordion.Section
+                title={annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}
+              >
                 <div className='annotation-group'>
                   <label>
                     Annotation Text:
-                    <textarea rows={5} value={annotation.text} onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)} />
+                    <textarea
+                      rows={5}
+                      value={annotation.text}
+                      onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)}
+                    />
                   </label>
                   <label>
                     Opacity

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

@@ -1,7 +1,12 @@
 import { useContext, FC } from 'react'
 
 // external libraries
-import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
 // core
@@ -18,11 +23,24 @@ import { PanelProps } from '../PanelProps'
 const PanelGeneral: FC<PanelProps> = props => {
   const { config } = useContext(ConfigContext)
   const { updateField } = useEditorPanelContext()
-  const { enabledChartTypes, visHasNumbersOnBars, visHasaAdditionalLabelsOnBars, visHasLabelOnData, visSupportsChartHeight, visSupportsSuperTitle, visSupportsFootnotes } = useEditorPermissions()
+  const {
+    enabledChartTypes,
+    visHasNumbersOnBars,
+    visHasaAdditionalLabelsOnBars,
+    visHasLabelOnData,
+    visSupportsChartHeight,
+    visSupportsMobileChartHeight,
+    visSupportsSuperTitle,
+    visSupportsFootnotes
+  } = useEditorPermissions()
   const { visualizationType, visualizationSubType, barStyle } = config
 
   const showBarStyleOptions = () => {
-    if ((visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && visualizationSubType !== 'stacked' && (config.orientation === 'horizontal' || config.orientation === 'vertical')) {
+    if (
+      (visualizationType === 'Bar' || visualizationType === 'Deviation Bar') &&
+      visualizationSubType !== 'stacked' &&
+      (config.orientation === 'horizontal' || config.orientation === 'vertical')
+    ) {
       return ['flat', 'rounded', 'lollipop']
     } else {
       return ['flat', 'rounded']
@@ -37,30 +55,91 @@ const PanelGeneral: FC<PanelProps> = props => {
         <AccordionItemButton>General</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
-        {config?.visualizationType !== 'Sankey' && <Select value={visualizationType} fieldName='visualizationType' label='Chart Type' updateField={updateField} options={enabledChartTypes} />}
+        {config?.visualizationType !== 'Sankey' && (
+          <Select
+            value={visualizationType}
+            fieldName='visualizationType'
+            label='Chart Type'
+            updateField={updateField}
+            options={enabledChartTypes}
+          />
+        )}
         {visSupportsChartHeight() && config.orientation === 'vertical' && (
-          <TextField
-            type='number'
-            value={config.heights.vertical}
-            section='heights'
-            fieldName='vertical'
-            label='Chart Height'
+          <div className={visSupportsMobileChartHeight() ? 'two-col-inputs' : ''}>
+            <TextField
+              type='number'
+              value={config.heights.vertical}
+              section='heights'
+              fieldName='vertical'
+              label='Chart Height'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    ˝
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      For some visualization types, such as the Sankey diagram, it may be necessary to adjust the chart
+                      height for optimal display.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+            {visSupportsMobileChartHeight() && config.orientation === 'vertical' && (
+              <TextField
+                type='number'
+                value={config.heights.mobileVertical}
+                section='heights'
+                fieldName='mobileVertical'
+                label='Mobile Height'
+                updateField={updateField}
+                tooltip={
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p>
+                        If the chart height is not optimized for mobile, you can adjust the height for better display.
+                        Not setting a value will default to the chart height.
+                      </p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                }
+              />
+            )}
+          </div>
+        )}
+        {(visualizationType === 'Bar' || visualizationType === 'Combo' || visualizationType === 'Area Chart') && (
+          <Select
+            value={visualizationSubType || 'Regular'}
+            fieldName='visualizationSubType'
+            label='Chart Subtype'
             updateField={updateField}
-            tooltip={
-              <Tooltip style={{ textTransform: 'none' }}>
-                <Tooltip.Target>
-                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                </Tooltip.Target>
-                <Tooltip.Content>
-                  <p>For some visualization types, such as the sankey diagram, it may be necessary to adjust to chart height for optimal display.</p>
-                </Tooltip.Content>
-              </Tooltip>
-            }
+            options={['regular', 'stacked']}
+          />
+        )}
+        {visualizationType === 'Area Chart' && visualizationSubType === 'stacked' && (
+          <Select
+            value={config.stackedAreaChartLineType || 'Linear'}
+            fieldName='stackedAreaChartLineType'
+            label='Stacked Area Chart Line Type'
+            updateField={updateField}
+            options={Object.keys(approvedCurveTypes)}
+          />
+        )}
+        {visualizationType === 'Bar' && (
+          <Select
+            value={config.orientation || 'vertical'}
+            fieldName='orientation'
+            label='Orientation'
+            updateField={updateField}
+            options={['vertical', 'horizontal']}
           />
         )}
-        {(visualizationType === 'Bar' || visualizationType === 'Combo' || visualizationType === 'Area Chart') && <Select value={visualizationSubType || 'Regular'} fieldName='visualizationSubType' label='Chart Subtype' updateField={updateField} options={['regular', 'stacked']} />}
-        {visualizationType === 'Area Chart' && visualizationSubType === 'stacked' && <Select value={config.stackedAreaChartLineType || 'Linear'} fieldName='stackedAreaChartLineType' label='Stacked Area Chart Line Type' updateField={updateField} options={Object.keys(approvedCurveTypes)} />}
-        {visualizationType === 'Bar' && <Select value={config.orientation || 'vertical'} fieldName='orientation' label='Orientation' updateField={updateField} options={['vertical', 'horizontal']} />}
         {visualizationType === 'Deviation Bar' && <Select label='Orientation' options={['horizontal']} />}
         {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && (
           <Select
@@ -81,11 +160,42 @@ const PanelGeneral: FC<PanelProps> = props => {
             }
           />
         )}
-        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && barStyle === 'rounded' && <Select value={config.tipRounding || 'top'} fieldName='tipRounding' label='tip rounding' updateField={updateField} options={['top', 'full']} />}
-        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && barStyle === 'rounded' && <Select value={config.roundingStyle || 'standard'} fieldName='roundingStyle' label='rounding style' updateField={updateField} options={['standard', 'shallow', 'finger']} />}
-        {visualizationType === 'Bar' && config.orientation === 'horizontal' && <Select value={config.yAxis.labelPlacement || 'Below Bar'} section='yAxis' fieldName='labelPlacement' label='Label Placement' updateField={updateField} options={['Below Bar', 'On Date/Category Axis']} />}
+        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && barStyle === 'rounded' && (
+          <Select
+            value={config.tipRounding || 'top'}
+            fieldName='tipRounding'
+            label='tip rounding'
+            updateField={updateField}
+            options={['top', 'full']}
+          />
+        )}
+        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && barStyle === 'rounded' && (
+          <Select
+            value={config.roundingStyle || 'standard'}
+            fieldName='roundingStyle'
+            label='rounding style'
+            updateField={updateField}
+            options={['standard', 'shallow', 'finger']}
+          />
+        )}
+        {visualizationType === 'Bar' && config.orientation === 'horizontal' && (
+          <Select
+            value={config.yAxis.labelPlacement || 'Below Bar'}
+            section='yAxis'
+            fieldName='labelPlacement'
+            label='Label Placement'
+            updateField={updateField}
+            options={['Below Bar', 'On Date/Category Axis']}
+          />
+        )}
         {visHasNumbersOnBars() ? (
-          <CheckBox value={config.yAxis.displayNumbersOnBar} section='yAxis' fieldName='displayNumbersOnBar' label={config.isLollipopChart ? 'Display Numbers after Bar' : 'Display Numbers on Bar'} updateField={updateField} />
+          <CheckBox
+            value={config.yAxis.displayNumbersOnBar}
+            section='yAxis'
+            fieldName='displayNumbersOnBar'
+            label={config.isLollipopChart ? 'Display Numbers after Bar' : 'Display Numbers on Bar'}
+            updateField={updateField}
+          />
         ) : (
           visHasLabelOnData() && (
             <CheckBox
@@ -99,7 +209,10 @@ const PanelGeneral: FC<PanelProps> = props => {
                     <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                   </Tooltip.Target>
                   <Tooltip.Content>
-                    <p>Selecting this option will not hide the display of "zero value", "suppressed data", or "missing data" indicators on the chart (if applicable).</p>
+                    <p>
+                      Selecting this option will <i> not </i> hide the display of "zero value", "suppressed data", or
+                      "missing data" indicators on the chart (if applicable).
+                    </p>
                   </Tooltip.Content>
                 </Tooltip>
               }
@@ -115,7 +228,19 @@ const PanelGeneral: FC<PanelProps> = props => {
                     <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                   </Tooltip.Target>
                   <Tooltip.Content>
-                    <p>Selecting this option will display 'N/A' on the Date/Category Axis, in the tooltip hover, and in the data table to indicate missing or undefined data values.</p>
+                    {config.visualizationSubType === 'stacked' && (
+                      <p>
+                        We do not recommend using stacked vertical/horizontal bar charts for missing data. If you choose
+                        to proceed, selecting this option will display 'N/A' in the tooltip hover and data table (e.g.
+                        nothing will display in chart).
+                      </p>
+                    )}
+                    {config.visualizationSubType !== 'stacked' && (
+                      <p>
+                        Selecting this option will display 'N/A' on the Date/Category Axis, in the tooltip hover, and in
+                        the data table to indicate missing or undefined data values.
+                      </p>
+                    )}
                   </Tooltip.Content>
                 </Tooltip>
               }
@@ -126,20 +251,27 @@ const PanelGeneral: FC<PanelProps> = props => {
               updateField={updateField}
             />
             <CheckBox
+              display={
+                config.visualizationSubType === 'stacked' &&
+                (config.visualizationType === 'Bar' || config.visualizationType === 'Combo')
+              }
               tooltip={
                 <Tooltip style={{ textTransform: 'none' }}>
                   <Tooltip.Target>
                     <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                   </Tooltip.Target>
                   <Tooltip.Content>
-                    <p> Selecting this option will display a thin line slightly above the Date/Category Axis to indicate "zero value" where zero values are indicated in the Data Series.</p>
+                    <p>
+                      Selecting 'Remove Null Values' will hide the 'N/A' (no data indicator) when you hover over the
+                      chart.
+                    </p>
                   </Tooltip.Content>
                 </Tooltip>
               }
-              value={config.general.showZeroValueDataLabel}
+              value={config.general.hideNullValue}
               section='general'
-              fieldName='showZeroValueDataLabel'
-              label='Display "Zero Value Data" Label'
+              fieldName='hideNullValue'
+              label={`Remove "Null" Values From Hover`}
               updateField={updateField}
             />
 
@@ -150,7 +282,20 @@ const PanelGeneral: FC<PanelProps> = props => {
                     <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                   </Tooltip.Target>
                   <Tooltip.Content>
-                    <p>Selecting this option will display the 'suppressed data symbol' on the Date/Category Axis, in the tooltip hover, and in the data table where suppressed data values are indicated in the Data Series</p>
+                    {config.visualizationSubType !== 'stacked' && (
+                      <p>
+                        Selecting this option will show the <i>suppression indicator </i> on the Date/Category axis,
+                        within tooltips, and in the data table where suppressed data values appear in the Data Series.
+                      </p>
+                    )}
+
+                    {config.visualizationSubType === 'stacked' && (
+                      <p>
+                        We do not recommend using stacked vertical/horizontal bar charts for suppressed data. If you
+                        choose to proceed, selecting this option will display the 'suppressed data symbol' in the
+                        tooltip hover and data table (e.g., nothing will display in the chart).
+                      </p>
+                    )}
                   </Tooltip.Content>
                 </Tooltip>
               }
@@ -163,7 +308,9 @@ const PanelGeneral: FC<PanelProps> = props => {
           </>
         )}
 
-        {visualizationType === 'Pie' && <Select fieldName='pieType' label='Pie Chart Type' updateField={updateField} options={['Regular', 'Donut']} />}
+        {visualizationType === 'Pie' && (
+          <Select fieldName='pieType' label='Pie Chart Type' updateField={updateField} options={['Regular', 'Donut']} />
+        )}
         {visualizationType === 'Line' && (
           <CheckBox
             value={config.allowLineToBarGraph}
@@ -255,7 +402,10 @@ const PanelGeneral: FC<PanelProps> = props => {
                 <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>
+                <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>
           }
@@ -274,7 +424,10 @@ const PanelGeneral: FC<PanelProps> = props => {
                   <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                 </Tooltip.Target>
                 <Tooltip.Content>
-                  <p>Consider adding footnotes when displaying 'suppressed,' 'no data,' and 'zero values' to ensure accurate interpretation of the data.</p>
+                  <p>
+                    Consider adding footnotes when displaying 'suppressed,' 'no data,' and 'zero values' to ensure
+                    accurate interpretation of the data.
+                  </p>
                 </Tooltip.Content>
               </Tooltip>
             }

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

@@ -3,7 +3,12 @@ import ConfigContext from '../../../../ConfigContext'
 import { CheckBox, TextField } from '@cdc/core/components/EditorPanel/Inputs'
 import Button from '@cdc/core/components/elements/Button'
 
-import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import EditorPanelContext, { type EditorPanelContext as EPContext } from '../../EditorPanelContext'
 
 const SankeySettings = () => {
@@ -64,21 +69,45 @@ const SankeySettings = () => {
         <AccordionItemButton>Sankey Settings</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
-        <p>Node stories can provide additional details to support public health messaging. COVE can display a maximum of 3 node stories.</p>
+        <p>
+          Node stories can provide additional details to support public health messaging. COVE can display a maximum of
+          3 node stories.
+        </p>
         {data?.storyNodeText &&
           data?.storyNodeText.map(({ StoryNode, segmentTextBefore, segmentTextAfter }, i) => (
-            <div key={i} style={{ border: '1px solid black', margin: '15px auto', padding: '15px', borderRadius: '10px' }}>
+            <div
+              key={i}
+              style={{ border: '1px solid black', margin: '15px auto', padding: '15px', borderRadius: '10px' }}
+            >
               <label>
                 Story Node Text
-                <input type='text' value={StoryNode} fieldName='StoryNode' label='StoryNode' onChange={e => updateStoryNode('StoryNode', e.target.value, i)} />
+                <input
+                  type='text'
+                  value={StoryNode}
+                  fieldName='StoryNode'
+                  label='StoryNode'
+                  onChange={e => updateStoryNode('StoryNode', e.target.value, i)}
+                />
               </label>
               <label>
                 Story Text Before
-                <input type='text' value={segmentTextBefore} fieldName='segmentTextBefore' label='Segment Text Before' onChange={e => updateStoryNode('segmentTextBefore', e.target.value, i)} />
+                <input
+                  type='text'
+                  value={segmentTextBefore}
+                  fieldName='segmentTextBefore'
+                  label='Segment Text Before'
+                  onChange={e => updateStoryNode('segmentTextBefore', e.target.value, i)}
+                />
               </label>
               <label>
                 Story Text After
-                <input type='text' value={segmentTextAfter} fieldName='segmentTextAfter' label='Segment Text After' onChange={e => updateStoryNode('segmentTextAfter', e.target.value, i)} />
+                <input
+                  type='text'
+                  value={segmentTextAfter}
+                  fieldName='segmentTextAfter'
+                  label='Segment Text After'
+                  onChange={e => updateStoryNode('segmentTextAfter', e.target.value, i)}
+                />
               </label>
               <Button onClick={e => removeStoryNode(i)} className='btn' style={{ background: 'tomato' }}>
                 Remove Story Node
@@ -97,7 +126,14 @@ const SankeySettings = () => {
             Add StoryNode
           </button>
         )}
-        {config.enableTooltips && config.data?.tooltips?.length > 0 && <CheckBox value={config.enableTooltips} fieldName='enableTooltips' label='Enable Tooltips' updateField={updateField} />}
+        {config.data?.[0]?.tooltips?.length > 0 && (
+          <CheckBox
+            value={config.enableTooltips}
+            fieldName='enableTooltips'
+            label='Enable Tooltips'
+            updateField={updateField}
+          />
+        )}
       </AccordionItemPanel>
     </AccordionItem>
   )

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

@@ -59,7 +59,7 @@ const SeriesDropdownLineType = props => {
   const supportsLineType = () => {
     let supported = false
     if (config.visualizationSubType === 'stacked') return supported
-    const supportedCharts = ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg', 'Area Chart']
+    const supportedCharts = ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg', 'Area Chart', 'Bump Chart']
     if (supportedCharts.some(item => item.includes(series.type))) {
       supported = true
     }
@@ -111,7 +111,7 @@ const SeriesDropdownSeriesType = props => {
         Forecasting: 'Forecasting'
       }
     }
-    if (config.visualizationType === 'Line') {
+    if (config.visualizationType === 'Line' || config.visualizationType === 'Bump Chart') {
       return {
         Line: 'Line',
         'dashed-sm': 'Small Dashed',
@@ -122,7 +122,7 @@ const SeriesDropdownSeriesType = props => {
   }
 
   // Allowable changes
-  if (!['Line', 'Combo'].includes(config.visualizationType)) return
+  if (!['Line', 'Combo', 'Bump Chart'].includes(config.visualizationType)) return
   return (
     <InputSelect
       initial='Select an option'
@@ -468,7 +468,7 @@ const SeriesInputWeight = props => {
 const SeriesInputName = props => {
   const { series, index: i } = props
   const { config, updateConfig } = useContext(ConfigContext)
-  const adjustableNameSeriesTypes = ['Bar', 'Line', 'Area Chart', 'Combo', 'Deviation Bar', 'Paired Bar', 'Scatter Plot', 'dashed-sm', 'dashed-md', 'dashed-lg']
+  const adjustableNameSeriesTypes = ['Bump Chart', 'Bar', 'Line', 'Area Chart', 'Combo', 'Deviation', 'Paired', 'Scatter', 'dashed-sm', 'dashed-md', 'dashed-lg']
 
   if (!adjustableNameSeriesTypes.includes(series.type)) return
 

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

@@ -57,7 +57,7 @@ const PanelVisual: FC<PanelProps> = props => {
         <AccordionItemButton>Visual</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
-        {config.isLollipopChart && (
+        {(config.barStyle === 'lollipop' || config.isLollipopChart) && (
           <>
             <fieldset className='header'>
               <legend className='edit-label'>Lollipop Shape</legend>
@@ -80,7 +80,6 @@ const PanelVisual: FC<PanelProps> = props => {
             <Select value={config.lollipopSize ? config.lollipopSize : 'small'} fieldName='lollipopSize' label='Lollipop Size' updateField={updateField} options={['small', 'medium', 'large']} />
           </>
         )}
-
         {config.visualizationType === 'Box Plot' && (
           <fieldset className='fieldset fieldset--boxplot'>
             <legend className=''>Box Plot Settings</legend>
@@ -89,20 +88,16 @@ const PanelVisual: FC<PanelProps> = props => {
             <CheckBox value={config.boxplot.plotNonOutlierValues} fieldName='plotNonOutlierValues' section='boxplot' label='Plot non-outlier values' updateField={updateField} />
           </fieldset>
         )}
-
         <Select value={config.fontSize} fieldName='fontSize' label='Font Size' updateField={updateField} options={['small', 'medium', 'large']} />
         {visHasBarBorders() && <Select value={config.barHasBorder} fieldName='barHasBorder' label='Bar Borders' updateField={updateField} options={['true', 'false']} />}
         {visCanAnimate() && <CheckBox value={config.animate} fieldName='animate' label='Animate Visualization' updateField={updateField} />}
-
         {/*<CheckBox value={config.animateReplay} fieldName="animateReplay" label="Replay Animation When Filters Are Changed" updateField={updateField} />*/}
-
         {((config.series?.some(series => series.type === 'Line' || series.type === 'dashed-lg' || series.type === 'dashed-sm' || series.type === 'dashed-md') && config.visualizationType === 'Combo') || config.visualizationType === 'Line') && (
           <>
             <Select value={config.lineDatapointStyle} fieldName='lineDatapointStyle' label='Line Datapoint Style' updateField={updateField} options={['hidden', 'hover', 'always show']} />
             <Select value={config.lineDatapointColor} fieldName='lineDatapointColor' label='Line Datapoint Color' updateField={updateField} options={['Same as Line', 'Lighter than Line']} />
           </>
         )}
-
         {/* eslint-disable */}
         <label className='header'>
           <span className='edit-label'>Header Theme</span>
@@ -248,7 +243,6 @@ const PanelVisual: FC<PanelProps> = props => {
             </ul>
           </>
         )}
-
         {visHasDataCutoff() && (
           <>
             <TextField
@@ -275,7 +269,6 @@ const PanelVisual: FC<PanelProps> = props => {
         {((config.visualizationType === 'Bar' && config.orientation !== 'horizontal') || config.visualizationType === 'Combo') && <TextField value={config.barThickness} type='number' fieldName='barThickness' label='Bar Thickness' updateField={updateField} />}
         {visSupportsBarSpace() && <TextField type='number' value={config.barSpace || '15'} fieldName='barSpace' label='Bar Space' updateField={updateField} min={0} />}
         {(config.visualizationType === 'Bar' || config.visualizationType === 'Line' || config.visualizationType === 'Combo') && <CheckBox value={config.topAxis.hasLine} section='topAxis' fieldName='hasLine' label='Add Top Axis Line' updateField={updateField} />}
-
         {config.visualizationType === 'Spark Line' && (
           <div className='cove-accordion__panel-section checkbox-group'>
             <CheckBox value={visual?.border} section='visual' fieldName='border' label='Show Border' updateField={updateField} />
@@ -285,10 +278,8 @@ const PanelVisual: FC<PanelProps> = props => {
             <CheckBox value={visual?.hideBackgroundColor} section='visual' fieldName='hideBackgroundColor' label='Hide Background Color' updateField={updateField} />
           </div>
         )}
-
         {(config.visualizationType === 'Line' || config.visualizationType === 'Combo') && <CheckBox value={config.showLineSeriesLabels} fieldName='showLineSeriesLabels' label='Append Series Name to End of Line Charts' updateField={updateField} />}
         {(config.visualizationType === 'Line' || config.visualizationType === 'Combo') && config.showLineSeriesLabels && <CheckBox value={config.colorMatchLineSeriesLabels} fieldName='colorMatchLineSeriesLabels' label='Match Series Color to Name at End of Line Charts' updateField={updateField} />}
-
         {visSupportsTooltipLines() && (
           <>
             <CheckBox value={visual.verticalHoverLine} fieldName='verticalHoverLine' section='visual' label='Vertical Hover Line' updateField={updateField} />
@@ -314,7 +305,6 @@ const PanelVisual: FC<PanelProps> = props => {
           </label>
         )}
         {visHasSingleSeriesTooltip() && <CheckBox value={config.tooltips.singleSeries} fieldName='singleSeries' section='tooltips' label='SHOW HOVER FOR SINGLE DATA SERIES' updateField={updateField} />}
-
         <label>
           <span className='edit-label column-heading'>No Data Message</span>
           <input

package/src/components/EditorPanel/editor-panel.scss

@@ -7,9 +7,22 @@
 }
 
 .cdc-open-viz-module.type-chart {
-  @include breakpointClass(md) {
-    .editor-panel:not(.hidden) + .cdc-chart-inner-container {
-      padding-left: 350px;
+  .viewport-overrides {
+    button {
+      width: 100%;
+      padding: 1em;
+      margin-top: 1em;
+      text-align: left;
+
+      span {
+        display: inline-block;
+        float: right;
+      }
+    }
+
+    .edit-block {
+      margin-top: 0;
+      padding: 1em;
     }
   }