@cdc/chart 4.24.9 → 4.24.11

package/src/components/EditorPanel/components/Panels/Panel.Visual.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'
 
 // core
 import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
@@ -22,9 +27,21 @@ const PanelVisual: FC<PanelProps> = props => {
   const { config, updateConfig, colorPalettes, twoColorPalette } = useContext<ChartContext>(ConfigContext)
   const { visual } = config
   const { setLollipopShape, updateField } = useEditorPanelContext()
-  const { visHasBarBorders, visCanAnimate, visSupportsNonSequentialPallete, headerColors, visSupportsTooltipOpacity, visSupportsTooltipLines, visSupportsBarSpace, visSupportsBarThickness, visHasDataCutoff, visSupportsSequentialPallete, visSupportsReverseColorPalette, visHasSingleSeriesTooltip } =
-    useEditorPermissions()
-  const { twoColorPalettes, sequential, nonSequential } = useColorPalette(config, updateConfig)
+  const {
+    visHasBarBorders,
+    visCanAnimate,
+    visSupportsNonSequentialPallete,
+    headerColors,
+    visSupportsTooltipOpacity,
+    visSupportsTooltipLines,
+    visSupportsBarSpace,
+    visSupportsBarThickness,
+    visHasDataCutoff,
+    visSupportsSequentialPallete,
+    visSupportsReverseColorPalette,
+    visHasSingleSeriesTooltip
+  } = useEditorPermissions()
+  const { twoColorPalettes, sequential, nonSequential, accessibleColors } = useColorPalette(config, updateConfig)
 
   const updateColor = (property, _value) => {
     console.log('value', _value)
@@ -76,26 +93,98 @@ const PanelVisual: FC<PanelProps> = props => {
                 </label>
               </div>
             </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']} />
+            <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']}
+            />
           </>
         )}
         {config.visualizationType === 'Box Plot' && (
           <fieldset className='fieldset fieldset--boxplot'>
             <legend className=''>Box Plot Settings</legend>
-            <Select value={config.boxplot.borders} fieldName='borders' section='boxplot' label='Box Plot Borders' updateField={updateField} options={['true', 'false']} />
-            <CheckBox value={config.boxplot.plotOutlierValues} fieldName='plotOutlierValues' section='boxplot' label='Plot Outliers' updateField={updateField} />
-            <CheckBox value={config.boxplot.plotNonOutlierValues} fieldName='plotNonOutlierValues' section='boxplot' label='Plot non-outlier values' updateField={updateField} />
+            <Select
+              value={config.boxplot.borders}
+              fieldName='borders'
+              section='boxplot'
+              label='Box Plot Borders'
+              updateField={updateField}
+              options={['true', 'false']}
+            />
+            <CheckBox
+              value={config.boxplot.plotOutlierValues}
+              fieldName='plotOutlierValues'
+              section='boxplot'
+              label='Plot Outliers'
+              updateField={updateField}
+            />
+            <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} />}
+        <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') && (
+        {((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']} />
+            <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 */}
@@ -121,7 +210,15 @@ const PanelVisual: FC<PanelProps> = props => {
             <label>
               <span className='edit-label'>Chart Color Palette</span>
             </label>
-            {visSupportsReverseColorPalette() && <InputToggle fieldName='isPaletteReversed' size='small' label='Use selected palette in reverse order' updateField={updateField} value={config.isPaletteReversed} />}
+            {visSupportsReverseColorPalette() && (
+              <InputToggle
+                fieldName='isPaletteReversed'
+                size='small'
+                label='Use selected palette in reverse order'
+                updateField={updateField}
+                value={config.isPaletteReversed}
+              />
+            )}
             {visSupportsSequentialPallete() && (
               <>
                 <span>Sequential</span>
@@ -175,6 +272,38 @@ const PanelVisual: FC<PanelProps> = props => {
                       backgroundColor: colorPalettes[palette][6]
                     }
 
+                    return (
+                      <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>
+                      </button>
+                    )
+                  })}
+                </ul>
+                <span>Colorblind Safe</span>
+                <ul className='color-palette'>
+                  {accessibleColors.map(palette => {
+                    const colorOne = {
+                      backgroundColor: colorPalettes[palette][2]
+                    }
+
+                    const colorTwo = {
+                      backgroundColor: colorPalettes[palette][3]
+                    }
+
+                    const colorThree = {
+                      backgroundColor: colorPalettes[palette][5]
+                    }
+
                     return (
                       <button
                         title={palette}
@@ -199,22 +328,47 @@ const PanelVisual: FC<PanelProps> = props => {
         {config.visualizationType === 'Sankey' && (
           <>
             <span className='sankey__color-input'>
-              <input type='color' value={config.sankey.nodeColor.default} id='storyNodeColor' name='storyNodeColor' onChange={e => updateColor('nodeColor', e.target.value)} />
+              <input
+                type='color'
+                value={config.sankey.nodeColor.default}
+                id='storyNodeColor'
+                name='storyNodeColor'
+                onChange={e => updateColor('nodeColor', e.target.value)}
+              />
               <label htmlFor='storyNodeColor'>Story Node Color</label>
             </span>
             <span className='sankey__color-input'>
-              <input type='color' value={config.sankey.storyNodeFontColor || 'red'} id='storyNodeFontColor' name='storyNodeFontColor' onChange={e => updateColor('storyNodeFontColor', e.target.value)} />
+              <input
+                type='color'
+                value={config.sankey.storyNodeFontColor || 'red'}
+                id='storyNodeFontColor'
+                name='storyNodeFontColor'
+                onChange={e => updateColor('storyNodeFontColor', e.target.value)}
+              />
               <label htmlFor='storyNodeFontColor'>Story Node Font Color</label>
             </span>
             <span className='sankey__color-input'>
-              <input type='color' value={config.sankey.linkColor.default} id='linkColor' name='linkColor' onChange={e => updateColor('linkColor', e.target.value)} />
+              <input
+                type='color'
+                value={config.sankey.linkColor.default}
+                id='linkColor'
+                name='linkColor'
+                onChange={e => updateColor('linkColor', e.target.value)}
+              />
               <label htmlFor='linkColor'>Link Color</label>
             </span>
           </>
         )}
         {(config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar') && (
           <>
-            <InputToggle section='twoColor' fieldName='isPaletteReversed' size='small' label='Use selected palette in reverse order' updateField={updateField} value={config.twoColor.isPaletteReversed} />
+            <InputToggle
+              section='twoColor'
+              fieldName='isPaletteReversed'
+              size='small'
+              label='Use selected palette in reverse order'
+              updateField={updateField}
+              value={config.twoColor.isPaletteReversed}
+            />
             <ul className='color-palette'>
               {twoColorPalettes.map(palette => {
                 const colorOne = {
@@ -258,32 +412,131 @@ const PanelVisual: FC<PanelProps> = props => {
                     <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                   </Tooltip.Target>
                   <Tooltip.Content>
-                    <p>Any value below the cut-off value is included in a special "less than" category. This option supports special conditions like suppressed data.</p>
+                    <p>
+                      Any value below the cut-off value is included in a special "less than" category. This option
+                      supports special conditions like suppressed data.
+                    </p>
                   </Tooltip.Content>
                 </Tooltip>
               }
             />
           </>
         )}
-        {visSupportsBarThickness() && config.orientation === 'horizontal' && !config.isLollipopChart && config.yAxis.labelPlacement !== 'On Bar' && <TextField type='number' value={config.barHeight || '25'} fieldName='barHeight' label=' Bar Thickness' updateField={updateField} min={15} />}
-        {((config.visualizationType === 'Bar' && config.orientation !== 'horizontal') || config.visualizationType === 'Combo') && <TextField value={config.barThickness} type='number' fieldName='barThickness' label='Bar Thickness' updateField={updateField} />}
-        {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} />}
+        {visSupportsBarThickness() &&
+          config.orientation === 'horizontal' &&
+          !config.isLollipopChart &&
+          config.yAxis.labelPlacement !== 'On Bar' && (
+            <TextField
+              type='number'
+              value={config.barHeight || '25'}
+              fieldName='barHeight'
+              label=' Bar Thickness'
+              updateField={updateField}
+              min={15}
+            />
+          )}
+        {(config.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} />
-            <CheckBox value={visual?.borderColorTheme} section='visual' fieldName='borderColorTheme' label='Use Border Color Theme' updateField={updateField} />
-            <CheckBox value={visual?.accent} section='visual' fieldName='accent' label='Use Accent Style' updateField={updateField} />
-            <CheckBox value={visual?.background} section='visual' fieldName='background' label='Use Theme Background Color' updateField={updateField} />
-            <CheckBox value={visual?.hideBackgroundColor} section='visual' fieldName='hideBackgroundColor' label='Hide Background Color' updateField={updateField} />
+            <CheckBox
+              value={visual?.border}
+              section='visual'
+              fieldName='border'
+              label='Show Border'
+              updateField={updateField}
+            />
+            <CheckBox
+              value={visual?.borderColorTheme}
+              section='visual'
+              fieldName='borderColorTheme'
+              label='Use Border Color Theme'
+              updateField={updateField}
+            />
+            <CheckBox
+              value={visual?.accent}
+              section='visual'
+              fieldName='accent'
+              label='Use Accent Style'
+              updateField={updateField}
+            />
+            <CheckBox
+              value={visual?.background}
+              section='visual'
+              fieldName='background'
+              label='Use Theme Background Color'
+              updateField={updateField}
+            />
+            <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} />}
+        {(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} />
-            <CheckBox value={visual.horizontalHoverLine} fieldName='horizontalHoverLine' section='visual' label='Horizontal Hover Line' updateField={updateField} />
+            <CheckBox
+              value={visual.verticalHoverLine}
+              fieldName='verticalHoverLine'
+              section='visual'
+              label='Vertical Hover Line'
+              updateField={updateField}
+            />
+            <CheckBox
+              value={visual.horizontalHoverLine}
+              fieldName='horizontalHoverLine'
+              section='visual'
+              label='Horizontal Hover Line'
+              updateField={updateField}
+            />
           </>
         )}
         {visSupportsTooltipOpacity() && (
@@ -304,7 +557,15 @@ 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} />}
+        {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/components/panels.scss

@@ -1,9 +1,7 @@
-@import '@cdc/core/styles/v2/themes/color-definitions';
-
 .date-highlight {
   select,
   input {
-    background: $lightestGray;
+    background: var(--lightestGray);
   }
 
   &__day-selection {
@@ -15,17 +13,17 @@
     .week-button {
       margin-bottom: 0;
       border-radius: 50%;
-      color: $darkGray;
+      color: var(--darkGray);
       width: 24px;
       height: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: $lightestGray;
+      background: var(--lightestGray);
       margin: 5px 2px 0;
 
       &--active {
-        background: $primary;
+        background: var(--primary);
         color: white;
       }
     }

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

@@ -1,11 +1,3 @@
-@import '@cdc/core/styles/base';
-@import '@cdc/core/styles/v2/themes/color-definitions';
-
-//TODO: Remove after COVE refactor
-.cove {
-  @import '@cdc/core/styles/v2/layout/tooltip.scss';
-}
-
 .cdc-open-viz-module.type-chart {
   .viewport-overrides {
     button {

package/src/components/EditorPanel/helpers/tests/updateFieldRankByValue.test.ts

@@ -0,0 +1,38 @@
+import { updateFieldRankByValue } from '../updateFieldRankByValue'
+
+describe('updateFieldRankByValue', () => {
+  it('should update rankByValue to "asc" and return new config', () => {
+    const config = { rankByValue: undefined }
+    const newValue = 'asc'
+    const preTransformedData = [{ value: 3 }, { value: 1 }, { value: 2 }]
+
+    const [newConfig] = updateFieldRankByValue(config, newValue, preTransformedData)
+
+    expect(newConfig.rankByValue).toBe('asc')
+  })
+
+  it('should return new config and sorted data when newValue is undefined and config.rankByValue is set', () => {
+    const config = {
+      rankByValue: 'asc',
+      data: [{ value: 1 }, { value: 2 }, { value: 3 }],
+      xAxis: { dataKey: 'value' }
+    }
+    const newValue = undefined
+    const preTransformedData = [{ value: 3 }, { value: 1 }, { value: 2 }]
+
+    const [newConfig, newData] = updateFieldRankByValue(config, newValue, preTransformedData)
+
+    expect(newConfig.rankByValue).toBeUndefined()
+    expect(newData).toEqual([{ value: 1 }, { value: 2 }, { value: 3 }])
+  })
+
+  it('should return new config when newValue is undefined and config.rankByValue is not set', () => {
+    const config = { rankByValue: undefined }
+    const newValue = undefined
+    const preTransformedData = [{ value: 3 }, { value: 1 }, { value: 2 }]
+
+    const [newConfig] = updateFieldRankByValue(config, newValue, preTransformedData)
+
+    expect(newConfig.rankByValue).toBeUndefined()
+  })
+})

package/src/components/EditorPanel/helpers/updateFieldRankByValue.ts

@@ -0,0 +1,42 @@
+import DataTransform from '@cdc/core/helpers/DataTransform'
+import { ChartConfig } from '../../../types/ChartConfig'
+import _ from 'lodash'
+
+const transform = new DataTransform()
+
+const indexOfObj = (data, obj) => {
+  for (let i = 0; i < data.length; i++) {
+    let keys = Object.keys(data[i])
+    let equal = true
+    for (let j = 0; j < keys.length; j++) {
+      if (data[i][keys[j]] !== obj[keys[j]]) {
+        equal = false
+        break
+      }
+    }
+    if (equal) {
+      return i
+    }
+  }
+  return -1
+}
+
+export const updateFieldRankByValue = (
+  config: ChartConfig,
+  newValue: 'asc' | 'desc' | undefined,
+  preTransformedData: Object[]
+): [ChartConfig, Object[]?] => {
+  const newConfig = _.cloneDeep(config)
+  newConfig.rankByValue = newValue
+
+  if (config.rankByValue && !newValue) {
+    const cleanData = config?.xAxis?.dataKey ? transform.cleanData(config.data, config.xAxis.dataKey) : config.data
+    const newData = preTransformedData.sort((a, b) => {
+      const aIndex = indexOfObj(cleanData, a)
+      const bIndex = indexOfObj(cleanData, b)
+      return aIndex - bIndex
+    })
+    return [newConfig, newData]
+  }
+  return [newConfig]
+}

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -44,6 +44,18 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const visSupportsDateCategoryAxisMin = () => {
+    const enabledCharts = ['Scatter Plot']
+    if (enabledCharts.includes(visualizationType)) return true
+    return false
+  }
+
+  const visSupportsDateCategoryAxisMax = () => {
+    const enabledCharts = ['Scatter Plot']
+    if (enabledCharts.includes(visualizationType)) return true
+    return false
+  }
+
   const visSupportsSuperTitle = () => {
     const disabledCharts = ['Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
@@ -88,7 +100,7 @@ export const useEditorPermissions = () => {
   const visHasLegend = () => {
     switch (visualizationType) {
       case 'Box Plot':
-        return false
+        return true
       case 'Forest Plot':
         return false
       case 'Spark Line':
@@ -337,6 +349,7 @@ export const useEditorPermissions = () => {
   const visSupportsDateCategoryHeight = () => {
     const disabledCharts = ['Spark Line', 'Sankey', 'Bump Chart']
     if (disabledCharts.includes(visualizationType)) return false
+    if (config.orientation !== 'horizontal') return false
     return true
   }
 
@@ -413,6 +426,8 @@ export const useEditorPermissions = () => {
     visSupportsChartHeight,
     visSupportsMobileChartHeight,
     visSupportsDateCategoryAxis,
+    visSupportsDateCategoryAxisMin,
+    visSupportsDateCategoryAxisMax,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
     visSupportsDateCategoryAxisTicks,

package/src/components/ForestPlot/ForestPlot.tsx

@@ -16,9 +16,8 @@ import { type ChartContext } from '@cdc/chart/src/types/ChartContext'
 import ConfigContext from '../../ConfigContext'
 import { getFontSize } from '@cdc/core/helpers/cove/number'
 
-const ForestPlot = (props: ForestPlotProps) => {
+const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseOff, handleTooltipMouseOver, forestPlotRightLabelRef }: ForestPlotProps) => {
   const { rawData: data, updateConfig } = useContext<ChartContext>(ConfigContext)
-  const { xScale, yScale, config, height, width, handleTooltipMouseOff, handleTooltipMouseOver } = props
   const { forestPlot } = config as ChartConfig
   const labelPosition = config.xAxis.tickWidthMax + 10
   const [initialLogTicksSet, setInitialLogTicks] = useState(false)
@@ -243,7 +242,7 @@ const ForestPlot = (props: ForestPlotProps) => {
       )}
 
       {forestPlot.rightLabel && (
-        <Text className='forest-plot__right-label' x={forestPlot.type === 'Linear' ? xScale(0) + 25 : xScale(1) + 25} y={height + labelPosition} textAnchor='start' verticalAnchor='start'>
+        <Text innerRef={forestPlotRightLabelRef} className='forest-plot__right-label' x={forestPlot.type === 'Linear' ? xScale(0) + 25 : xScale(1) + 25} y={height + labelPosition} textAnchor='start' verticalAnchor='start'>
           {forestPlot.rightLabel}
         </Text>
       )}

package/src/components/ForestPlot/ForestPlotProps.ts

@@ -8,6 +8,8 @@ export type ForestPlotProps = {
   /** config - standard chart config */
   config: ChartConfig
   /** height - height of chart */
+  /** forestPlotLeftLabelRef - ref for left label for resizing svg*/
+  forestPlotRightLabelRef: React.RefObject<SVGSVGElement>
   height: number
   /** width - width of chart */
   width: number