@cdc/chart 4.24.1 → 4.24.3

package/src/components/EditorPanel/EditorPanelContext.ts

@@ -0,0 +1,40 @@
+import { createContext, useContext } from 'react'
+
+export type EditorPanelContext = {
+  addNewExclusion?: Function
+  updateField?: Function
+  // warning messages updated within EditorPanel
+  warningMsg?: { maxMsg?: string; minMsg?: string; rightMaxMessage?: string; minMsgRight?: string }
+  // current enabled chart types in useEditorPermissions file
+  enabledChartTypes?: string[]
+  showBarStyleOptions?: boolean
+  getDataValueOptions?: Function
+  data?: object[]
+  // function used on inputs, selects, etc. to update config values.
+  getColumns?: Function
+  getDataValues?: Function
+  handleAddNewHighlightedBar?: Function
+  handleHighlightedBarLegendLabel?: Function
+  handleUpdateHighlightedBar?: Function
+  handleUpdateHighlightedBarColor?: Function
+  handleUpdateHighlightedBorderWidth?: Function
+  highlightedBarValues?: Function
+  highlightedSeriesValues?: Function
+  isPaletteReversed?: boolean
+  handleRemoveHighlightedBar?: Function
+  setLollipopShape?: Function
+}
+
+const EditorPanelContext = createContext<EditorPanelContext>(null)
+
+export const useEditorPanelContext = () => {
+  const editorPanelCtx = useContext(EditorPanelContext)
+
+  if (editorPanelCtx === null) {
+    throw new Error('COVE: editor panel context is null.')
+  }
+
+  return editorPanelCtx
+}
+
+export default EditorPanelContext

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

@@ -0,0 +1,148 @@
+import { useContext, FC } from 'react'
+import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import { TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import ConfigContext from '../../../../ConfigContext'
+import { useEditorPanelContext } from '../../EditorPanelContext'
+
+// types
+import { type PanelProps } from './../PanelProps'
+
+const PanelBoxPlot: FC<PanelProps> = props => {
+  const { config } = useContext(ConfigContext)
+  const { boxplot } = config
+  if (config.visualizationType !== 'Box Plot') return
+  const { updateField } = useEditorPanelContext()
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>{props.name}</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        <h4 style={{ fontSize: '18px' }}>Labels for 5-Number Summary</h4>
+
+        {/* max */}
+        <TextField
+          type='text'
+          value={boxplot.labels.maximum}
+          fieldName='maximum'
+          section='boxplot'
+          subsection='labels'
+          label='Maximum'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Highest value, excluding outliers</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        {/* Q3 */}
+        <TextField
+          type='text'
+          value={boxplot.labels.q3}
+          fieldName='q3'
+          section='boxplot'
+          subsection='labels'
+          label='Upper Quartile'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Represented by top line of box. 25% of data are higher.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        {/* median */}
+        <TextField
+          type='text'
+          value={boxplot.labels.median}
+          fieldName='median'
+          section='boxplot'
+          subsection='labels'
+          label='Median'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Middle data point. Half of data are higher value.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        {/* q1 */}
+        <TextField
+          type='text'
+          value={boxplot.labels.q1}
+          fieldName='q1'
+          section='boxplot'
+          subsection='labels'
+          label='Lower Quartile'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Represented by bottom line of box. 25% of data are lower.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        {/* minimum */}
+        <TextField
+          type='text'
+          value={boxplot.labels.minimum}
+          fieldName='minimum'
+          section='boxplot'
+          subsection='labels'
+          label='Minimum'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Lowest value, excluding outliers</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+        <br />
+        <h4 style={{ fontSize: '18px' }}>Labels for Additional Measures</h4>
+
+        {/* iqr */}
+        <TextField type='text' value={boxplot.labels.iqr} fieldName='iqr' section='boxplot' subsection='labels' label='Interquartile Range' updateField={updateField} />
+        {/* count */}
+        <TextField type='text' value={boxplot.labels.total} fieldName='total' section='boxplot' subsection='labels' label='Total' updateField={updateField} />
+        {/* mean */}
+        <TextField type='text' value={boxplot.labels.mean} fieldName='mean' section='boxplot' subsection='labels' label='Mean' updateField={updateField} />
+        {/* outliers */}
+        <TextField type='text' value={boxplot.labels.outliers} fieldName='outliers' section='boxplot' subsection='labels' label='Outliers' updateField={updateField} />
+        {/* values */}
+        <TextField type='text' value={boxplot.labels.values} fieldName='values' section='boxplot' subsection='labels' label='Values' updateField={updateField} />
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default PanelBoxPlot

package/src/components/EditorPanel/components/{Panel.ForestPlotSettings.tsx → Panels/Panel.ForestPlotSettings.tsx}

@@ -1,18 +1,25 @@
-import React, { useContext, memo, useState, useEffect } from 'react'
-import ConfigContext from '../../../ConfigContext'
-import { useDebounce } from 'use-debounce'
-import WarningImage from '../../../images/warning.svg'
+import { useContext, FC } from 'react'
+
+// cdc
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
-import { type ChartContext } from '../../../types/ChartContext'
 import { Select, CheckBox, TextField } from '@cdc/core/components/EditorPanel/Inputs'
-import { type PanelProps } from './PanelProps'
+import WarningImage from '../../../../images/warning.svg'
+
+// contexts
+import ConfigContext from '../../../../ConfigContext'
+
+// types
+import { type ChartContext } from '../../../../types/ChartContext'
+import { type PanelProps } from '../PanelProps'
 
 import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
 
-const ForestPlotSettings = ({ name }: PanelProps) => {
+const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
   const { config, rawData: unfilteredData, updateConfig } = useContext<ChartContext>(ConfigContext)
+  if (config.visualizationType !== 'Forest Plot') return
 
+  // todo: get from editor context?
   const enforceRestrictions = updatedConfig => {
     if (updatedConfig.orientation === 'horizontal') {
       updatedConfig.labels = false
@@ -26,6 +33,7 @@ const ForestPlotSettings = ({ name }: PanelProps) => {
     }
   }
 
+  // todo: get from editor context?
   const getColumns = (filter = true) => {
     let columns = {}
     unfilteredData.forEach(row => {
@@ -50,6 +58,7 @@ const ForestPlotSettings = ({ name }: PanelProps) => {
     return Object.keys(columns)
   }
 
+  // todo: editor context?
   const updateField = (section, subsection, fieldName, newValue) => {
     if (section === 'boxplot' && subsection === 'legend') {
       updateConfig({

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

@@ -0,0 +1,160 @@
+import { useContext, FC } from 'react'
+
+// external libraries
+import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
+
+// core
+import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+
+// contexts
+import { useEditorPermissions } from '../../useEditorPermissions.js'
+import { useEditorPanelContext } from '../../EditorPanelContext.js'
+import ConfigContext from '../../../../ConfigContext.js'
+import { PanelProps } from '../PanelProps'
+
+const PanelGeneral: FC<PanelProps> = props => {
+  const { config } = useContext(ConfigContext)
+  const { updateField } = useEditorPanelContext()
+  const { enabledChartTypes, visHasNumbersOnBars, visHasLabelOnData, visSupportsChartHeight, visSupportsSuperTitle, visSupportsFootnotes } = useEditorPermissions()
+  const { visualizationType, visualizationSubType, barStyle } = config
+
+  const showBarStyleOptions = () => {
+    if ((visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && visualizationSubType !== 'stacked' && (config.orientation === 'horizontal' || config.orientation === 'vertical')) {
+      return ['flat', 'rounded', 'lollipop']
+    } else {
+      return ['flat', 'rounded']
+    }
+  }
+
+  return (
+    <AccordionItem>
+      {' '}
+      {/* General */}
+      <AccordionItemHeading>
+        <AccordionItemButton>General</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        <Select value={visualizationType} fieldName='visualizationType' label='Chart Type' updateField={updateField} options={enabledChartTypes} />
+        {(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 value={config.isLollipopChart ? 'lollipop' : barStyle || 'flat'} fieldName='barStyle' label='bar style' updateField={updateField} options={showBarStyleOptions()} />}
+        {(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} />
+        ) : (
+          visHasLabelOnData() && <CheckBox value={config.labels} fieldName='labels' label='Display label on data' updateField={updateField} />
+        )}
+        {visualizationType === 'Pie' && <Select fieldName='pieType' label='Pie Chart Type' updateField={updateField} options={['Regular', 'Donut']} />}
+
+        <TextField
+          value={config.title || 'Chart Title'}
+          fieldName='title'
+          id='title'
+          label='Title'
+          placeholder='Chart Title'
+          //defaultValue='Chart Title'
+          updateField={updateField}
+          //onChange={handleTitleChange}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Title is required to set the name of the download file but can be hidden using the option below.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+        <CheckBox value={config.showTitle} fieldName='showTitle' label='Show Title' updateField={updateField} />
+
+        {visSupportsSuperTitle() && (
+          <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>Super Title</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+        )}
+
+        <TextField
+          type='textarea'
+          value={config.introText}
+          updateField={updateField}
+          fieldName='introText'
+          label='Message'
+          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/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>
+          }
+        />
+
+        {visSupportsFootnotes() && (
+          <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>
+            }
+          />
+        )}
+
+        {visSupportsChartHeight() && config.orientation === 'vertical' && <TextField type='number' value={config.heights.vertical} section='heights' fieldName='vertical' label='Chart Height' updateField={updateField} />}
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default PanelGeneral

package/src/components/EditorPanel/components/{Panel.Regions.tsx → Panels/Panel.Regions.tsx}

@@ -1,13 +1,13 @@
 import { memo, useContext } from 'react'
-import { useEditorPermissions } from './../useEditorPermissions.js'
+import { useEditorPermissions } from '../../useEditorPermissions.js'
 import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
-import { type ChartConfig } from './../../../types/ChartConfig.js'
+import { type ChartConfig } from '../../../../types/ChartConfig.js'
 import { TextField, Select } from '@cdc/core/components/EditorPanel/Inputs'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
-import { type ChartContext } from '../../../types/ChartContext'
-import { type PanelProps } from './PanelProps'
-import ConfigContext from '../../../ConfigContext'
+import { type ChartContext } from '../../../../types/ChartContext.js'
+import { type PanelProps } from '../PanelProps.js'
+import ConfigContext from '../../../../ConfigContext.js'
 
 const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; updateConfig: Function }) => {
   let regionUpdate = (fieldName, value, i) => {
@@ -104,7 +104,7 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
                         <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                       </Tooltip.Target>
                       <Tooltip.Content>
-                        <p>The date needs to be in the original format of the data. Not the displayed format of the data.</p>
+                        <p>When using categorical (linear scale) match the data set value. When using date (linear / date time scale) match the x-axis value.</p>
                       </Tooltip.Content>
                     </Tooltip>
                   }

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

@@ -0,0 +1,108 @@
+import { useContext } from 'react'
+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 EditorPanelContext, { type EditorPanelContext as EPContext } from '../../EditorPanelContext'
+
+const SankeySettings = () => {
+  const { config, updateConfig } = useContext(ConfigContext)
+  const data = config.data?.[0]
+  const { updateField } = useContext<EPContext>(EditorPanelContext)
+
+  if (config.visualizationType !== 'Sankey') return
+
+  const updateStoryNode = (fieldName, value, i) => {
+    let storyNodes = []
+
+    if (data?.storyNodeText) {
+      storyNodes = [...data?.storyNodeText]
+    }
+
+    storyNodes[i][fieldName] = value
+    console.log('story nodes', storyNodes[i])
+    updateConfig({
+      ...config,
+      sankey: {
+        ...config.sankey,
+        data: {
+          ...config.sankey.data,
+          storyNodeText: storyNodes
+        }
+      }
+    })
+  }
+
+  const addStoryNode = () => {
+    const newData = data
+
+    newData.storyNodeText.push({
+      StoryNode: '',
+      segmentTextBefore: '',
+      segmentTextAfter: ''
+    })
+
+    updateConfig({
+      ...config,
+      sankey: {
+        ...config.sankey,
+        data: [{ ...newData }]
+      }
+    })
+  }
+
+  const removeStoryNode = index => {
+    const newData = data
+    newData.storyNodeText.splice(index, 1)
+
+    updateConfig({ ...config, sankey: { ...config.sankey, data: { ...newData } } })
+  }
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>Sankey Settings</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        {data?.storyNodeText &&
+          data?.storyNodeText.map(({ StoryNode, segmentTextBefore, segmentTextAfter }, i) => (
+            <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)} />
+              </label>
+              <label>
+                Story Text Before
+                <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)} />
+              </label>
+              <Button onClick={e => removeStoryNode(i)} className='btn' style={{ background: 'tomato' }}>
+                Remove Story Node
+              </Button>
+            </div>
+          ))}
+        {`Total Story Nodes: ${data?.storyNodeText?.length}`}
+        {data?.storyNodeText?.length < 3 && (
+          <button
+            type='button'
+            className='btn full-width'
+            onClick={e => {
+              e.preventDefault()
+              addStoryNode()
+            }}
+          >
+            Add StoryNode
+          </button>
+        )}
+
+        <CheckBox value={config.enableTooltips} fieldName='enableTooltips' label='Enable Tooltips' updateField={updateField} />
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default SankeySettings

package/src/components/EditorPanel/components/{Panel.Series.tsx → Panels/Panel.Series.tsx}

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import ConfigContext from '../../../ConfigContext'
+import ConfigContext from '../../../../ConfigContext'
 
 // Core
 import InputSelect from '@cdc/core/components/inputs/InputSelect'
@@ -424,16 +424,56 @@ const SeriesDropdownConfidenceInterval = props => {
   )
 }
 
-const SeriesInputName = props => {
+const SeriesInputWeight = props => {
   const { series, index: i } = props
   const { config, updateConfig } = useContext(ConfigContext)
-  const adjustableNameSeriesTypes = ['Bar', 'Line', 'Area Chart', 'dashed-sm', 'dashed-md', 'dashed-lg']
+  const adjustableWeightSeriesTypes = ['Line', 'Combo', 'dashed-sm', 'dashed-md', 'dashed-lg']
+
+  if (!adjustableWeightSeriesTypes.includes(series.type)) return
+
+  const changeSeriesWeight = (i, value, min, max) => {
+    let series = [...config.series]
+    let seriesLabelsCopy = { ...config.runtime.seriesLabels }
+    series[i].weight = !value ? value : Math.max(Number(min), Math.min(Number(max), Number(value)))
+    seriesLabelsCopy[series[i].dataKey] = series[i].weight ? series[i].weight : series[i].dataKey
+
+    const newConfig = {
+      ...config,
+      series,
+      runtime: {
+        ...config.runtime,
+        seriesLabels: seriesLabelsCopy
+      }
+    }
+
+    updateConfig(newConfig)
+  }
 
-  if (config.visualizationType === 'Combo') return
+  return (
+    <>
+      <label htmlFor='series-weight'>Line Weight</label>
+      <input
+        type='number'
+        key={`series-weight-${i}`}
+        value={series.weight ? series.weight : ''}
+        min="1"
+        max="9"
+        onChange={event => {
+          changeSeriesWeight(i, event.target.value, event.target.min, event.target.max)
+        }}
+      />
+    </>
+  )
+}
+
+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']
 
   if (!adjustableNameSeriesTypes.includes(series.type)) return
 
-  let changeSeriesName = (i, value) => {
+  const changeSeriesName = (i, value) => {
     let series = [...config.series]
     let seriesLabelsCopy = { ...config.runtime.seriesLabels }
     series[i].name = value
@@ -470,6 +510,8 @@ const SeriesDisplayInTooltip = props => {
   const { series, index } = props
   const { config, updateConfig } = useContext(ConfigContext)
 
+  if (['Paired Bar', 'Scatter Plot', 'Deviation Bar'].includes(config.visualizationType)) return
+
   const toggleTooltip = seriesIndex => {
     let copiedSeries = [...config.series]
 
@@ -569,6 +611,7 @@ const SeriesItem = props => {
               {chartsWithOptions.includes(config.visualizationType) && (
                 <AccordionItemPanel>
                   <Series.Input.Name series={series} index={i} />
+                  <Series.Input.Weight series={series} index={i} />
                   <Series.Dropdown.SeriesType series={series} index={i} />
                   <Series.Dropdown.AxisPosition series={series} index={i} />
                   <Series.Dropdown.LineType series={series} index={i} />
@@ -604,7 +647,8 @@ const Series = {
     ForecastingColor: SeriesDropdownForecastColor
   },
   Input: {
-    Name: SeriesInputName
+    Name: SeriesInputName,
+    Weight: SeriesInputWeight
   },
   Checkbox: {
     DisplayInTooltip: SeriesDisplayInTooltip