@cdc/chart 4.23.11 → 4.24.2

package/src/{hooks → components/EditorPanel}/useEditorPermissions.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import ConfigContext from '../ConfigContext'
+import ConfigContext from '../../ConfigContext'
 
 export const useEditorPermissions = () => {
   const { config } = useContext(ConfigContext)
@@ -24,6 +24,12 @@ export const useEditorPermissions = () => {
 
   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 visSupportsDateCategoryAxis = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
   const visSupportsSuperTitle = () => {
     const disabledCharts = ['Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
@@ -186,6 +192,18 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const visSupportsValueAxisMax = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsValueAxisMin = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
   const visSupportsFilters = () => {
     const disabledCharts = ['Forest Plot']
     if (disabledCharts.includes(visualizationType)) return false
@@ -201,16 +219,22 @@ export const useEditorPermissions = () => {
 
   // implement later
   const visSupportsValueAxisTicks = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   // implement later
   const visSupportsValueAxisLine = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   // implement later
   const visSupportsValueAxisLabels = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
@@ -251,6 +275,10 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const visSupportsDateCategoryAxisPadding = () => {
+    return config.xAxis.type === 'date' && config.xAxis.sortDates
+  }
+
   const visSupportsReactTooltip = () => {
     if (['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar'].includes(visualizationType) || (visualizationType === 'Bar' && config.tooltips.singleSeries)) {
       return true
@@ -272,12 +300,14 @@ export const useEditorPermissions = () => {
     visSupportsBarSpace,
     visSupportsBarThickness,
     visSupportsChartHeight,
+    visSupportsDateCategoryAxis,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
     visSupportsDateCategoryAxisTicks,
     visSupportsDateCategoryHeight,
     visSupportsDateCategoryNumTicks,
     visSupportsDateCategoryTickRotation,
+    visSupportsDateCategoryAxisPadding,
     visSupportsFilters,
     visSupportsFootnotes,
     visSupportsLeftValueAxis,
@@ -294,6 +324,8 @@ export const useEditorPermissions = () => {
     visSupportsValueAxisLabels,
     visSupportsValueAxisLine,
     visSupportsValueAxisTicks,
-    visSupportsReactTooltip
+    visSupportsReactTooltip,
+    visSupportsValueAxisMax,
+    visSupportsValueAxisMin
   }
 }

package/src/components/{Forecasting.jsx → Forecasting/Forecasting.jsx}

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 
 // cdc
-import ConfigContext from '../ConfigContext'
+import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart, sequentialPalettes } from '@cdc/core/data/colorPalettes'
 

package/src/components/Forecasting/index.tsx

@@ -0,0 +1,3 @@
+import Forecasting from './Forecasting'
+
+export default Forecasting

package/src/components/ForestPlot/ForestPlot.tsx

@@ -0,0 +1,254 @@
+import { useContext, useEffect, useState } from 'react'
+
+// visx
+import { Group } from '@visx/group'
+import { Line, Bar, Circle, LinePath } from '@visx/shape'
+import { Text } from '@visx/text'
+import { scaleLinear } from '@visx/scale'
+import { curveLinearClosed } from '@visx/curve'
+
+// types
+import { type ForestPlotProps } from '@cdc/chart/src/components/ForestPlot/ForestPlotProps'
+import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+import { type ChartContext } from '@cdc/chart/src/types/ChartContext'
+
+// cdc
+import ConfigContext from '../../ConfigContext'
+import { getFontSize } from '@cdc/core/helpers/cove/number'
+
+const ForestPlot = (props: 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)
+
+  useEffect(() => {
+    try {
+      const defaultColumns = ['estimateField', 'lower', 'upper', 'estimateRadius']
+      const newConfig = config
+
+      // Setting a default number of colums.additionalColumn1, columns.additionalColumn2, etc.
+      // to loop through to clean up which columns are being displayed by default for forest plots
+      // Set tooltip and data table properties according to the default forestPlot column names above.
+      const colsToCheck = 10
+      for (let i = 0; i < colsToCheck; i++) {
+        defaultColumns.forEach(col => {
+          if (config.forestPlot[col] && config.forestPlot[col] !== newConfig.columns[config.forestPlot[`additionalColumn${i}`]]?.name) {
+            delete newConfig.columns[`additionalColumn${i}`] // Remove old value if found to prevent duplicates
+            newConfig.columns[config.forestPlot[col]] = {}
+            newConfig.columns[config.forestPlot[col]].dataKey = newConfig.forestPlot[col]
+            newConfig.columns[config.forestPlot[col]].name = newConfig.forestPlot[col]
+            newConfig.columns[config.forestPlot[col]].dataTable = true
+            newConfig.columns[config.forestPlot[col]].tooltips = true
+            newConfig.columns[config.forestPlot[col]].label = newConfig.forestPlot[col]
+          }
+        })
+      }
+
+      // Add weight column into tooltip and data table.
+      if (config.forestPlot.radius.scalingColumn) {
+        newConfig.columns[config.forestPlot.radius.scalingColumn] = {}
+        newConfig.columns[config.forestPlot.radius.scalingColumn].dataKey = newConfig.forestPlot.radius.scalingColumn
+        newConfig.columns[config.forestPlot.radius.scalingColumn].name = newConfig.forestPlot.radius.scalingColumn
+        newConfig.columns[config.forestPlot.radius.scalingColumn].label = newConfig.forestPlot.radius.scalingColumn
+        newConfig.columns[config.forestPlot.radius.scalingColumn].dataTable = true
+        newConfig.columns[config.forestPlot.radius.scalingColumn].tooltips = true
+      }
+
+      if (newConfig.table.showVertical) {
+        newConfig.table.indexLabel = config.xAxis.dataKey
+      }
+
+      updateConfig(newConfig)
+    } catch (e) {
+      console.log(e.message)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!initialLogTicksSet && config.forestPlot.type === 'Logarithmic') {
+      updateConfig({
+        ...config,
+        dataFormat: {
+          ...config.dataFormat,
+          roundTo: 2
+        }
+      })
+      setInitialLogTicks(true)
+    }
+  }, [config.forestPlot.type])
+
+  const pooledData = config.data.find(d => d[config.xAxis.dataKey] === config.forestPlot.pooledResult.column)
+
+  const regressionPoints = pooledData
+    ? [
+        { x: xScale(pooledData[config.forestPlot.lower]), y: height - Number(config.forestPlot.rowHeight) },
+        { x: xScale(pooledData[config.forestPlot.estimateField]), y: height - forestPlot.pooledResult.diamondHeight - Number(config.forestPlot.rowHeight) },
+        { x: xScale(pooledData[config.forestPlot.upper]), y: height - Number(config.forestPlot.rowHeight) },
+        { x: xScale(pooledData[config.forestPlot.estimateField]), y: height + forestPlot.pooledResult.diamondHeight - Number(config.forestPlot.rowHeight) },
+        { x: xScale(pooledData[config.forestPlot.lower]), y: height - Number(config.forestPlot.rowHeight) }
+      ]
+    : []
+
+  const topMarginOffset = config.forestPlot.rowHeight
+
+  const topLine = [
+    { x: 0, y: topMarginOffset },
+    { x: width, y: topMarginOffset }
+  ]
+
+  const bottomLine = [
+    { x: 0, y: height },
+    { x: width, y: height }
+  ]
+
+  type Columns = {
+    forestPlot?: boolean
+  }
+
+  const columnsOnChart: Columns[] = Object.entries(config.columns)
+    .map(entry => entry[1])
+    .filter(entry => entry.forestPlot === true)
+
+  return (
+    <>
+      <Group width={width}>
+        {forestPlot.title && (
+          <Text className={`forest-plot--title`} x={forestPlot.type === 'Linear' ? xScale(0) : xScale(1)} y={0} textAnchor='middle' verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+            {forestPlot.title}
+          </Text>
+        )}
+
+        {/* Line of no effect on Continuous Scale. */}
+        {forestPlot.lineOfNoEffect.show && forestPlot.type === 'Linear' && <Line from={{ x: xScale(0), y: 0 + topMarginOffset }} to={{ x: xScale(0), y: height }} className='forestplot__line-of-no-effect' stroke={forestPlot.regression.baseLineColor || 'black'} />}
+
+        {/* Line of no effect on Logarithmic Scale. */}
+        {forestPlot.lineOfNoEffect.show && forestPlot.type === 'Logarithmic' && <Line from={{ x: xScale(1), y: 0 + topMarginOffset }} to={{ x: xScale(1), y: height }} className='forestplot__line-of-no-effect' stroke={forestPlot.regression.baseLineColor || 'black'} />}
+
+        {data.map((d, i) => {
+          // calculate both square and circle size based on radius.min and radius.max
+          const scaleRadius = scaleLinear({
+            domain: data.map(d => d[forestPlot.radius.scalingColumn]),
+            range: [forestPlot.radius.min, forestPlot.radius.max]
+          })
+
+          // glyph settings
+          const rectSize = forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.radius.scalingColumn]) : 4
+          const shapeColor = forestPlot.colors.shape ? forestPlot.colors.shape : 'black'
+          const lineColor = forestPlot.colors.line ? forestPlot.colors.line : 'black'
+
+          // ci size
+          const ciEndSize = 4
+
+          // Don't run calculations on the pooled column
+          const isTotalColumn = d[config.xAxis.dataKey] === forestPlot.pooledResult.column
+
+          return !isTotalColumn ? (
+            <Group>
+              {/* Confidence Interval Paths */}
+              <path
+                stroke={lineColor}
+                strokeWidth={1}
+                className='lower-ci'
+                d={`
+                    M${xScale(d[forestPlot.lower])} ${yScale(i) - Number(ciEndSize)}
+                    L${xScale(d[forestPlot.lower])} ${yScale(i) + Number(ciEndSize)}
+                `}
+              />
+
+              <path
+                stroke={lineColor}
+                strokeWidth={1}
+                className='upper-ci'
+                d={`
+                    M${xScale(d[forestPlot.upper])} ${yScale(i) - Number(ciEndSize)}
+                    L${xScale(d[forestPlot.upper])} ${yScale(i) + Number(ciEndSize)}
+                `}
+              />
+
+              {/* main line */}
+              <line stroke={lineColor} className={`line-${d[config.yAxis.dataKey]}`} key={i} x1={xScale(d[forestPlot.lower])} x2={xScale(d[forestPlot.upper])} y1={yScale(i)} y2={yScale(i)} />
+              {forestPlot.shape === 'circle' && (
+                <Circle className='forest-plot--circle' cx={xScale(Number(d[forestPlot.estimateField]))} cy={yScale(i)} r={forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.radius.scalingColumn]) : 4} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />
+              )}
+              {forestPlot.shape === 'square' && <rect className='forest-plot--square' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i) - rectSize / 2} width={rectSize} height={rectSize} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />}
+              {forestPlot.shape === 'text' && (
+                <Text className='forest-plot--text' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i)} textAnchor='middle' verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={shapeColor}>
+                  {d[forestPlot.estimateField]}
+                </Text>
+              )}
+            </Group>
+          ) : (
+            <LinePath data={regressionPoints} x={d => d.x} y={d => d.y - getFontSize(config.fontSize) / 2} stroke='black' strokeWidth={2} fill={'black'} curve={curveLinearClosed} />
+          )
+        })}
+
+        {/* regression diamond */}
+        {regressionPoints && forestPlot.regression.showDiamond && <LinePath data={regressionPoints} x={d => d.x} y={d => d.y} stroke='black' strokeWidth={2} fill={forestPlot.regression.baseLineColor} curve={curveLinearClosed} />}
+        {/* regression text */}
+        {forestPlot.regression.description && (
+          <Text x={0 - Number(config.xAxis.size)} width={width} y={height - config.forestPlot.rowHeight - Number(forestPlot.rowHeight) / 3} verticalAnchor='start' textAnchor='start' style={{ fontWeight: 'bold', fontSize: 12 }}>
+            {forestPlot.regression.description}
+          </Text>
+        )}
+
+        <Bar key='forest-plot-tooltip-area' className='forest-plot-tooltip-area' width={width} height={height} fill={false ? 'red' : 'transparent'} fillOpacity={0.5} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
+      </Group>
+      <Line from={topLine[0]} to={topLine[1]} style={{ stroke: 'black', strokeWidth: 2 }} className='forestplot__top-line' />
+      <Line from={bottomLine[0]} to={bottomLine[1]} style={{ stroke: 'black', strokeWidth: 2 }} className='forestplot__bottom-line' />
+
+      {/* column data */}
+      {columnsOnChart.map(column => {
+        return data.map((d, i) => {
+          return (
+            <Text className={`${d[column.name]}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={yScale(i)} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+              {d[column.name]}
+            </Text>
+          )
+        })
+      })}
+
+      {/* X Axis DataKey Cols*/}
+      {!forestPlot.hideDateCategoryCol &&
+        data.map((d, i) => {
+          return (
+            <Text className={`${d[config.xAxis.dataKey]}`} x={0} y={yScale(i)} textAnchor={'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+              {d[config.xAxis.dataKey]}
+            </Text>
+          )
+        })}
+
+      {/* X Axis Datakey Header */}
+      {!forestPlot.hideDateCategoryCol && config.xAxis.dataKey && (
+        <Text className={config.xAxis.dataKey} x={0} y={0} textAnchor={'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+          {config.xAxis.dataKey}
+        </Text>
+      )}
+
+      {/* column headers */}
+      {columnsOnChart.map(column => {
+        return (
+          <Text className={`${column.label}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={0} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+            {column.label}
+          </Text>
+        )
+      })}
+
+      {/* left bottom label */}
+      {forestPlot.leftLabel && (
+        <Text className='forest-plot__left-label' x={forestPlot.type === 'Linear' ? xScale(0) - 25 : xScale(1) - 25} y={height + labelPosition} textAnchor='end' verticalAnchor='start'>
+          {forestPlot.leftLabel}
+        </Text>
+      )}
+
+      {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'>
+          {forestPlot.rightLabel}
+        </Text>
+      )}
+    </>
+  )
+}
+
+export default ForestPlot

package/src/components/ForestPlot/ForestPlotProps.ts

@@ -1,11 +1,18 @@
 import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 
 export type ForestPlotProps = {
+  /** xScale - scaling function for bottom axis */
   xScale: Function
+  /** yScale - scaling function for left axis */
   yScale: Function
+  /** config - standard chart config */
   config: ChartConfig
+  /** height - height of chart */
   height: number
+  /** width - width of chart */
   width: number
+  /** handleTooltipMouseOff - helper function for hiding tooltip */
   handleTooltipMouseOff: Function
+  /** handleTooltipMousOver - helper function for showing tooltip */
   handleTooltipMouseOver: Function
 }

package/src/components/ForestPlot/index.tsx

@@ -1,211 +1,3 @@
-import { useContext, useEffect } from 'react'
-
-// visx
-import { Group } from '@visx/group'
-import { Line, Bar, Circle, LinePath } from '@visx/shape'
-import { Text } from '@visx/text'
-import { scaleLinear } from '@visx/scale'
-import { curveLinearClosed } from '@visx/curve'
-
-// types
-import { type ForestPlotProps } from '@cdc/chart/src/components/ForestPlot/ForestPlotProps'
-import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
-import { type ChartContext } from '@cdc/chart/src/types/ChartContext'
-
-// cdc
-import ConfigContext from '../../ConfigContext'
-import { getFontSize } from '@cdc/core/helpers/cove/number'
-
-const ForestPlot = (props: ForestPlotProps) => {
-  const { rawData: data, updateConfig } = useContext<ChartContext>(ConfigContext)
-  const { xScale, yScale, config, height, width, handleTooltipMouseOff, handleTooltipMouseOver } = props
-  const { forestPlot } = config as ChartConfig
-
-  // Requirements for forest plot
-  // - force legend to be hidden for this chart type
-  // - reset the date category axis to zero
-  useEffect(() => {
-    if (!config.legend.hide) {
-      updateConfig({
-        ...config,
-        legend: {
-          ...config.legend,
-          hide: true
-        },
-        xAxis: {
-          ...config.xAxis,
-          size: 0
-        }
-      })
-    }
-  }, [])
-
-  const pooledData = config.data.find(d => d[config.xAxis.dataKey] === config.forestPlot.pooledResult.column)
-
-  const regressionPoints = pooledData
-    ? [
-        { x: xScale(pooledData[config.forestPlot.lower]), y: height - Number(config.forestPlot.rowHeight) },
-        { x: xScale(pooledData[config.forestPlot.estimateField]), y: height - forestPlot.pooledResult.diamondHeight - Number(config.forestPlot.rowHeight) },
-        { x: xScale(pooledData[config.forestPlot.upper]), y: height - Number(config.forestPlot.rowHeight) },
-        { x: xScale(pooledData[config.forestPlot.estimateField]), y: height + forestPlot.pooledResult.diamondHeight - Number(config.forestPlot.rowHeight) },
-        { x: xScale(pooledData[config.forestPlot.lower]), y: height - Number(config.forestPlot.rowHeight) }
-      ]
-    : []
-
-  const topMarginOffset = config.forestPlot.rowHeight
-
-  const topLine = [
-    { x: 0, y: topMarginOffset },
-    { x: width, y: topMarginOffset }
-  ]
-
-  const bottomLine = [
-    { x: 0, y: height },
-    { x: width, y: height }
-  ]
-
-  const columnsOnChart = Object.entries(config.columns)
-    .map(entry => entry[1])
-    .filter(entry => entry.forestPlot === true)
-
-  return (
-    <>
-      <Group>
-        {forestPlot.title && (
-          <Text className={`forest-plot--title`} x={forestPlot.type === 'Linear' ? xScale(0) : xScale(1)} y={0} textAnchor='middle' verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
-            {forestPlot.title}
-          </Text>
-        )}
-
-        {/* Line of no effect on Continuous Scale. */}
-        {forestPlot.lineOfNoEffect.show && forestPlot.type === 'Linear' && <Line from={{ x: xScale(0), y: 0 + topMarginOffset }} to={{ x: xScale(0), y: height }} className='forestplot__line-of-no-effect' stroke={forestPlot.regression.baseLineColor || 'black'} />}
-
-        {/* Line of no effect on Logarithmic Scale. */}
-        {forestPlot.lineOfNoEffect.show && forestPlot.type === 'Logarithmic' && <Line from={{ x: xScale(1), y: 0 + topMarginOffset }} to={{ x: xScale(1), y: height }} className='forestplot__line-of-no-effect' stroke={forestPlot.regression.baseLineColor || 'black'} />}
-
-        {data.map((d, i) => {
-          // calculate both square and circle size based on radius.min and radius.max
-          const scaleRadius = scaleLinear({
-            domain: data.map(d => d[forestPlot.radius.scalingColumn]),
-            range: [forestPlot.radius.min, forestPlot.radius.max]
-          })
-
-          // glyph settings
-          const rectSize = forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.radius.scalingColumn]) : 4
-          const shapeColor = forestPlot.colors.shape ? forestPlot.colors.shape : 'black'
-          const lineColor = forestPlot.colors.line ? forestPlot.colors.line : 'black'
-
-          // ci size
-          const ciEndSize = 4
-
-          // Don't run calculations on the pooled column
-          const isTotalColumn = d[config.xAxis.dataKey] === forestPlot.pooledResult.column
-
-          return !isTotalColumn ? (
-            <Group>
-              {/* Confidence Interval Paths */}
-              <path
-                stroke={lineColor}
-                strokeWidth={1}
-                className='lower-ci'
-                d={`
-                    M${xScale(d[forestPlot.lower])} ${yScale(i) - Number(ciEndSize)}
-                    L${xScale(d[forestPlot.lower])} ${yScale(i) + Number(ciEndSize)}
-                `}
-              />
-
-              <path
-                stroke={lineColor}
-                strokeWidth={1}
-                className='upper-ci'
-                d={`
-                    M${xScale(d[forestPlot.upper])} ${yScale(i) - Number(ciEndSize)}
-                    L${xScale(d[forestPlot.upper])} ${yScale(i) + Number(ciEndSize)}
-                `}
-              />
-
-              {/* main line */}
-              <line stroke={lineColor} className={`line-${d[config.yAxis.dataKey]}`} key={i} x1={xScale(d[forestPlot.lower])} x2={xScale(d[forestPlot.upper])} y1={yScale(i)} y2={yScale(i)} />
-              {forestPlot.shape === 'circle' && (
-                <Circle className='forest-plot--circle' cx={xScale(Number(d[forestPlot.estimateField]))} cy={yScale(i)} r={forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.radius.scalingColumn]) : 4} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />
-              )}
-              {forestPlot.shape === 'square' && <rect className='forest-plot--square' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i) - rectSize / 2} width={rectSize} height={rectSize} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />}
-              {forestPlot.shape === 'text' && (
-                <Text className='forest-plot--text' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i)} textAnchor='middle' verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={shapeColor}>
-                  {d[forestPlot.estimateField]}
-                </Text>
-              )}
-            </Group>
-          ) : (
-            <LinePath data={regressionPoints} x={d => d.x} y={d => d.y - getFontSize(config.fontSize) / 2} stroke='black' strokeWidth={2} fill={'black'} curve={curveLinearClosed} />
-          )
-        })}
-
-        {/* regression diamond */}
-        {regressionPoints && forestPlot.regression.showDiamond && <LinePath data={regressionPoints} x={d => d.x} y={d => d.y} stroke='black' strokeWidth={2} fill={forestPlot.regression.baseLineColor} curve={curveLinearClosed} />}
-        {/* regression text */}
-        {forestPlot.regression.description && (
-          <Text x={0 - Number(config.xAxis.size)} width={width} y={height - config.forestPlot.rowHeight - Number(forestPlot.rowHeight) / 3} verticalAnchor='start' textAnchor='start' style={{ fontWeight: 'bold', fontSize: 12 }}>
-            {forestPlot.regression.description}
-          </Text>
-        )}
-
-        <Bar key='forest-plot-tooltip-area' className='forest-plot-tooltip-area' width={width} height={height} fill={false ? 'red' : 'transparent'} fillOpacity={0.5} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
-      </Group>
-      <Line from={topLine[0]} to={topLine[1]} style={{ stroke: 'black', strokeWidth: 2 }} className='forestplot__top-line' />
-      <Line from={bottomLine[0]} to={bottomLine[1]} style={{ stroke: 'black', strokeWidth: 2 }} className='forestplot__bottom-line' />
-
-      {/* column data */}
-      {columnsOnChart.map(column => {
-        return rawData.map((d, i) => {
-          return (
-            <Text className={`${d[column.name]}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={yScale(i)} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
-              {d[column.name]}
-            </Text>
-          )
-        })
-      })}
-
-      {/* X Axis DataKey Cols*/}
-      {!forestPlot.hideDateCategoryCol &&
-        data.map((d, i) => {
-          return (
-            <Text className={`${d[config.xAxis.dataKey]}`} x={0} y={yScale(i)} textAnchor={'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
-              {d[config.xAxis.dataKey]}
-            </Text>
-          )
-        })}
-
-      {/* X Axis Datakey Header */}
-      {!forestPlot.hideDateCategoryCol && config.xAxis.dataKey && (
-        <Text className={config.xAxis.dataKey} x={0} y={0} textAnchor={'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
-          {config.xAxis.dataKey}
-        </Text>
-      )}
-
-      {/* column headers */}
-      {columnsOnChart.map(column => {
-        return (
-          <Text className={`${column.label}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={0} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
-            {column.label}
-          </Text>
-        )
-      })}
-
-      {/* left bottom label */}
-      {forestPlot.leftLabel && (
-        <Text className='forest-plot__left-label' x={forestPlot.type === 'Linear' ? xScale(0) - 25 : xScale(1) - 25} y={height + 50} textAnchor='end'>
-          {forestPlot.leftLabel}
-        </Text>
-      )}
-
-      {forestPlot.rightLabel && (
-        <Text className='forest-plot__right-label' x={forestPlot.type === 'Linear' ? xScale(0) + 25 : xScale(1) + 25} y={height + 50} textAnchor='start'>
-          {forestPlot.rightLabel}
-        </Text>
-      )}
-    </>
-  )
-}
+import ForestPlot from './ForestPlot'
 
 export default ForestPlot