@cdc/chart 4.23.7 → 4.23.8

package/src/components/LinearChart.jsx

@@ -1,25 +1,24 @@
-import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState, useMemo } from 'react'
 
 // Libraries
 import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
-import { bisector } from 'd3-array'
 import { Group } from '@visx/group'
 import { Line, Bar } from '@visx/shape'
-import { localPoint } from '@visx/event'
 import { Text } from '@visx/text'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
-import { useTooltip, TooltipWithBounds, useTooltipInPortal } from '@visx/tooltip'
+import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 
 // CDC Components
 import AreaChart from './AreaChart'
 import BarChart from './BarChart'
 import ConfigContext from '../ConfigContext'
 import CoveBoxPlot from './BoxPlot'
-import CoveScatterPlot from './ScatterPlot'
+import ScatterPlot from './ScatterPlot'
 import DeviationBar from './DeviationBar'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Forecasting from './Forecasting'
 import LineChart from './LineChart'
+import ForestPlot from './ForestPlot'
 import PairedBarChart from './PairedBarChart'
 import useIntersectionObserver from './useIntersectionObserver'
 
@@ -29,44 +28,45 @@ import useReduceData from '../hooks/useReduceData'
 import useRightAxis from '../hooks/useRightAxis'
 import useScales from '../hooks/useScales'
 import useTopAxis from '../hooks/useTopAxis'
+import { useTooltip as useCoveTooltip } from '../hooks/useTooltip'
 
 // styles
-import { defaultStyles } from '@visx/tooltip'
 import '../scss/LinearChart.scss'
 
 export default function LinearChart() {
-  const { isEditor, transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, handleLineType, rawData, capitalize, setSharedFilter, setSharedFilterValue, getTextWidth } = useContext(ConfigContext)
+  const { isEditor, isDashboard, transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, handleLineType, rawData, capitalize, setSharedFilter, setSharedFilterValue, getTextWidth, isDebug } = useContext(ConfigContext)
 
   // todo: start destructuring this file for conciseness
-  const { visualizationType, visualizationSubType, orientation, xAxis, yAxis, runtime } = config
+  const { visualizationType, visualizationSubType, orientation, xAxis, yAxis, runtime, debugSvg } = config
 
-  // getters & functions
-  const getXAxisData = d => (runtime.xAxis.type === 'date' ? parseDate(d[runtime.originalXAxis.dataKey]).getTime() : d[runtime.originalXAxis.dataKey])
-  const getYAxisData = (d, seriesKey) => d[seriesKey]
-  const xAxisDataMapped = data.map(d => getXAxisData(d))
+  const getDate = d => new Date(d[config.xAxis.dataKey])
 
   // configure width
   let [width] = dimensions
-  let originalWidth = width
   if (config && config.legend && !config.legend.hide && config.legend.position !== 'bottom' && ['lg', 'md'].includes(currentViewport)) {
     width = width * 0.73
   }
-  //  configure height , yMax, xMAx
+  //  configure height , yMax, xMax
   const { horizontal: heightHorizontal } = config.heights
   const isHorizontal = orientation === 'horizontal'
   const shouldAbbreviate = true
-  const height = config.aspectRatio ? width * config.aspectRatio : config.heights[orientation]
+  let height = config.aspectRatio ? width * config.aspectRatio : config.visualizationType === 'Forest Plot' ? config.heights['vertical'] : config.heights[orientation]
   const xMax = width - runtime.yAxis.size - (visualizationType === 'Combo' ? config.yAxis.rightAxisSize : 0)
-  const yMax = height - (orientation === 'horizontal' ? 0 : runtime.xAxis.size)
+  let yMax = height - (orientation === 'horizontal' ? 0 : runtime.xAxis.size)
 
-  // hooks
+  if (config.visualizationType === 'Forest Plot') {
+    height = height + config.data.length * config.forestPlot.rowHeight
+    yMax = yMax + config.data.length * config.forestPlot.rowHeight
+  }
+
+  let dynamicMarginTop = 0 || config.dynamicMarginTop
+  const marginTop = 20
+
+  // hooks  % states
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, data)
   const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data, updateConfig })
   const { hasTopAxis } = useTopAxis(config)
   const [animatedChart, setAnimatedChart] = useState(false)
-  const properties = { data, config, minValue, maxValue, isAllLine, existPositiveValue, xAxisDataMapped, xMax, yMax }
-  const { min, max } = useMinMax(properties)
-  const { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding } = useScales({ ...properties, min, max })
 
   // refs
   const triggerRef = useRef()
@@ -75,8 +75,14 @@ export default function LinearChart() {
     freezeOnceVisible: false
   })
 
-  // a unique id is needed for tooltips.
-  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
+  // getters & functions
+  const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
+  const getYAxisData = (d, seriesKey) => d[seriesKey]
+  const xAxisDataMapped = data.map(d => getXAxisData(d))
+  const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
+  const properties = { data, config, minValue, maxValue, isAllLine, existPositiveValue, xAxisDataMapped, xMax, yMax }
+  const { min, max } = useMinMax(properties)
+  const { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding } = useScales({ ...properties, min, max })
 
   // sets the portal x/y for where tooltips should appear on the page.
   const [chartPosition, setChartPosition] = useState(null)
@@ -84,31 +90,14 @@ export default function LinearChart() {
     setChartPosition(svgRef?.current?.getBoundingClientRect())
   }, [svgRef, config.legend])
 
-  // resolved an issue here with Object.entries, label no longer used.
-  const TooltipListItem = ({ item }) => {
-    const [label, value] = item
-
-    /**
-     * find the original series and use the name property if available
-     * otherwise default back to the original column name.
-     * @param {String} input - original columnName
-     * @returns user defined series name.
-     */
-    const getSeriesNameFromLabel = originalColumnName => {
-      let series = config.series.filter(s => s.dataKey === originalColumnName)
-      if (series[0]?.name) return series[0]?.name
-      return originalColumnName
-    }
-
-    if (value[0] === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ` : '')} ${config.xAxis.type === 'date' ? formatDate(parseDate(value[1], false)) : value[1]}`}</li>
-    return <li className='tooltip-body'>{`${getSeriesNameFromLabel(value[0])}: ${formatNumber(value[1], 'left')}`}</li>
-  }
-
-  const handleLeftTickFormatting = tick => {
+  const handleLeftTickFormatting = (tick, index) => {
     if (config.useLogScale && tick === 0.1) {
       //when logarithmic scale applied change value of first tick
       tick = 0
     }
+
+    if (config.data && !config.data[index] && visualizationType === 'Forest Plot') return
+    if (config.visualizationType === 'Forest Plot') return config.data[index][config.xAxis.dataKey]
     if (runtime.yAxis.type === 'date') return formatDate(parseDate(tick))
     if (orientation === 'vertical') return formatNumber(tick, 'left', shouldAbbreviate)
     return tick
@@ -161,186 +150,24 @@ export default function LinearChart() {
     return tickCount
   }
 
-  // Tooltip helper for getting data to the closest date/category hovered.
-  const getXValueFromCoordinate = x => {
-    if (xScale.type === 'point') {
-      // Find the closest x value by calculating the minimum distance
-      let closestX = null
-      let minDistance = Number.MAX_VALUE
-      let offset = x - yAxis.size
-
-      data.forEach(d => {
-        const xPosition = xAxis.type === 'date' ? xScale(parseDate(d[xAxis.dataKey])) : xScale(d[xAxis.dataKey])
-        const distance = Math.abs(Number(xPosition - offset))
-
-        if (distance < minDistance) {
-          minDistance = distance
-          closestX = xAxis.type === 'date' ? parseDate(d[xAxis.dataKey]) : d[xAxis.dataKey]
-        }
-      })
-      return closestX
-    }
-
-    if (config.xAxis.type === 'categorical' || visualizationType === 'Combo') {
-      let eachBand = xScale.step()
-      let numerator = x
-      const index = Math.floor(Number(numerator) / eachBand)
-      return xScale.domain()[index - 1] // fixes off by 1 error
-    }
-
-    if (config.xAxis.type === 'date' && visualizationType !== 'Combo') {
-      const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
-      const x0 = xScale.invert(x)
-      const index = bisectDate(config.data, x0, 1)
-      const val = parseDate(config.data[index - 1][config.xAxis.dataKey])
-      return val
-    }
-  }
-
-  // visx tooltip hook
+  // Tooltip Helpers
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen } = useTooltip()
 
-  /**
-   * handleTooltipClick - used on dashboard filters
-   *  with visx tooltips, the handler is overwritten and we have to get the closest
-   *  x axis value.
-   * TODO: move tooltip handlers to there own hook.
-   * @param {*} e
-   * @param {*} data
-   */
-  const handleTooltipClick = (e, data) => {
-    try {
-      // Get the closest x axis value from the pointer.
-      // After getting the closest value, return the data entry with that x scale value.
-      // Pass the config.visual uid (not uuid) along with that data entry to setSharedFilters
-      const eventSvgCoords = localPoint(e)
-      const { x } = eventSvgCoords
-      if (!x) throw new Error('COVE: no x value in handleTooltipClick.')
-      let closestXScaleValue = getXValueFromCoordinate(x)
-      if (!closestXScaleValue) throw new Error('COVE: no closest x scale value in handleTooltipClick')
-      let datum = config.data.filter(item => item[config.xAxis.dataKey] === closestXScaleValue)
-
-      if (setSharedFilter) {
-        setSharedFilter(config.uid, datum[0])
-      }
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e.message)
-    }
-  }
-
-  // todo: combine mouseover functions
-  const handleTooltipMouseOver = (e, data) => {
-    // get the svg coordinates of the mouse
-    // and get the closest values
-    const eventSvgCoords = localPoint(e)
-    const { x, y } = eventSvgCoords
-
-    let yScaleValues
-    let closestXScaleValue = getXValueFromCoordinate(x)
-    let formattedDate = formatDate(closestXScaleValue)
-
-    //  keep track of the series.tooltip values
-    // and remember to push the xaxis data key on top
-    let includedSeries = config.series.filter(series => series.tooltip === true).map(item => item.dataKey)
-    includedSeries.push(config.xAxis.dataKey)
-
-    if (xAxis.type === 'categorical') {
-      yScaleValues = data.filter(d => d[xAxis.dataKey] === closestXScaleValue)
-      yScaleValues = yScaleValues.map(object => {
-        return Object.fromEntries(Object.entries(object).filter(([key, value]) => includedSeries.includes(key)))
-      })
-    } else {
-      yScaleValues = rawData.filter(d => formatDate(parseDate(d[xAxis.dataKey])) === formattedDate)
-      yScaleValues = yScaleValues.map(object => {
-        return Object.fromEntries(Object.entries(object).filter(([key, value]) => includedSeries.includes(key)))
-      })
-    }
-
-    let seriesToInclude = []
-    let stageColumns = []
-    let ciItems = []
-
-    // loop through series for items to add to tooltip.
-    // there is probably a better way of doing this.
-    config.series?.forEach(s => {
-      if (s.type === 'Forecasting') {
-        stageColumns.push(s.stageColumn)
-
-        // greedy fn 😭
-        s?.confidenceIntervals.forEach(ci => {
-          if (ci.showInTooltip === true) {
-            ciItems.push(ci.low)
-            ciItems.push(ci.high)
-          }
-        })
-      }
-    })
-
-    let standardLoopItems = []
-
-    if (!config.dashboard) {
-      switch (visualizationType) {
-        case 'Combo':
-          standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.barSeriesKeys, ...runtime?.lineSeriesKeys, ...stageColumns, ...ciItems]
-          break
-        case 'Forecasting':
-          standardLoopItems = [runtime.xAxis.dataKey, ...stageColumns, ...ciItems]
-          break
-        case 'Line':
-          standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys]
-          break
-        case 'Bar':
-          standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys]
-          break
-        default:
-          console.info('COVE: no visualization type found in handleMouseOver')
-          break
-      }
-    }
-
-    if (config.dashboard) {
-      standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.barSeriesKeys, ...runtime?.lineSeriesKeys, ...stageColumns, ...ciItems]
-    }
-
-    standardLoopItems.map(seriesKey => {
-      if (!seriesKey) return false
-      if (!yScaleValues[0]) return false
-      for (const item of Object.entries(yScaleValues[0])) {
-        if (item[0] === seriesKey) {
-          seriesToInclude.push(item)
-        }
-      }
-    })
-
-    // filter out the series that aren't added to the map.
-    if (!seriesToInclude) return
-    let initialTooltipData = seriesToInclude ? seriesToInclude : {}
-
-    let tooltipData = {}
-    tooltipData.data = initialTooltipData
-    tooltipData.dataXPosition = isEditor ? x - 300 + 10 : x + 10
-    tooltipData.dataYPosition = y
-
-    let tooltipInformation = {
-      tooltipData: tooltipData,
-      tooltipTop: 0,
-      tooltipValues: yScaleValues,
-      tooltipLeft: x
-    }
-
-    showTooltip(tooltipInformation)
-  }
-
-  const handleTooltipMouseOff = () => {
-    if (config.visualizationType === 'Area Chart') {
-      setTimeout(() => {
-        hideTooltip()
-      }, 3000)
-    } else {
-      hideTooltip()
-    }
-  }
+  // prettier-ignore
+  const {
+    handleTooltipMouseOver,
+    handleTooltipClick,
+    handleTooltipMouseOff,
+    tooltipStyles,
+    TooltipListItem,
+    getXValueFromCoordinateDate,
+    getXValueFromCoordinate
+  } = useCoveTooltip({
+      xScale,
+      yScale,
+      showTooltip,
+      hideTooltip
+  })
 
   // Make sure the chart is visible if in the editor
   /* eslint-disable react-hooks/exhaustive-deps */
@@ -370,77 +197,20 @@ export default function LinearChart() {
     return false
   }
 
-  // todo: combine mouse over functions
-  const handleAreaTooltipMouseOver = (e, data) => {
-    // get the svg coordinates of the mouse
-    // and get the closest values
-    const eventSvgCoords = localPoint(e)
-    const { x, y } = eventSvgCoords
-    let closestXScaleValue = getXValueFromCoordinate(x)
-
-    let formattedDate = formatDate(closestXScaleValue)
-
-    let yScaleValues
-    if (config.xAxis.type === 'categorical') {
-      yScaleValues = data.filter(d => d[config.xAxis.dataKey] === closestXScaleValue)
-    } else {
-      yScaleValues = data.filter(d => formatDate(parseDate(d[config.xAxis.dataKey])) === formattedDate)
-    }
-
-    let seriesToInclude = []
-    let yScaleMaxValues = []
-    let itemsToLoop = [runtime.xAxis.dataKey, ...runtime.seriesKeys]
-
-    itemsToLoop.map(seriesKey => {
-      if (!seriesKey) return false
-      if (!yScaleValues[0]) return false
-      for (const item of Object.entries(yScaleValues[0])) {
-        if (item[0] === seriesKey) {
-          seriesToInclude.push(item)
-        }
-      }
-    })
-
-    // filter out the series that aren't added to the map.
-    seriesToInclude.map(series => yScaleMaxValues.push(Number(yScaleValues[0][series])))
-    if (!seriesToInclude) return
-    let tooltipDataFromSeries = seriesToInclude ? seriesToInclude : {}
-
-    let tooltipData = {}
-    tooltipData.data = tooltipDataFromSeries
-    tooltipData.dataXPosition = x + 0
-    tooltipData.dataYPosition = y
-
-    let tooltipInformation = {
-      tooltipData: tooltipData,
-      tooltipTop: 0,
-      tooltipValues: yScaleValues,
-      tooltipLeft: x
-    }
-    showTooltip(tooltipInformation)
-  }
-
-  const tooltipStyles = tooltipData => {
-    const { dataXPosition, dataYPosition } = tooltipData
+  const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
 
-    return {
-      opacity: config.tooltips.opacity ? config.tooltips.opacity / 100 : 1,
-      position: 'absolute',
-      backgroundColor: 'white',
-      borderRadius: '4px',
-      transform: `translate(${dataXPosition}px, ${Number(dataYPosition)}px)`
-    }
+  const handleNumTicks = () => {
+    // On forest plots we need to return every "study" or y axis value.
+    if (config.visualizationType === 'Forest Plot') return config.data.length
+    return countNumOfTicks('yAxis')
   }
 
-  const random = Date.now()
-
   return isNaN(width) ? (
     <React.Fragment></React.Fragment>
   ) : (
     <ErrorBoundary component='LinearChart'>
-      <svg width={width} height={height} className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''}`} role='img' aria-label={handleChartAriaLabels(config)} tabIndex={0} ref={svgRef}>
-        <Bar width={width} height={height} fill={'transparent'}></Bar>
-        {/* Highlighted regions */}
+      <svg width={width} height={height} className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${debugSvg && 'debug'}`} role='img' aria-label={handleChartAriaLabels(config)} tabIndex={0} ref={svgRef}>
+        <Bar width={width} height={height} fill={'transparent'}></Bar> {/* Highlighted regions */}
         {config.regions
           ? config.regions.map(region => {
               if (!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
@@ -483,10 +253,9 @@ export default function LinearChart() {
               )
             })
           : ''}
-
         {/* Y axis */}
-        {visualizationType !== 'Spark Line' && (
-          <AxisLeft scale={yScale} tickLength={config.useLogScale ? 6 : 8} left={Number(runtime.yAxis.size) - config.yAxis.axisPadding} label={runtime.yAxis.label} stroke='#333' tickFormat={tick => handleLeftTickFormatting(tick)} numTicks={countNumOfTicks('yAxis')}>
+        {!['Spark Line', 'Forest Plot'].includes(visualizationType) && (
+          <AxisLeft scale={yScale} tickLength={config.useLogScale ? 6 : 8} left={Number(runtime.yAxis.size) - config.yAxis.axisPadding} label={runtime.yAxis.label} stroke='#333' tickFormat={(tick, i) => handleLeftTickFormatting(tick, i)} numTicks={handleNumTicks()}>
             {props => {
               const axisCenter = runtime.horizontal ? (props.axisToPoint.y - props.axisFromPoint.y) / 2 : (props.axisFromPoint.y - props.axisToPoint.y) / 2
               const horizontalTickOffset = yMax / props.ticks.length / 2 - (yMax / props.ticks.length) * (1 - config.barThickness) + 5
@@ -503,7 +272,7 @@ export default function LinearChart() {
                       <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
                         {!runtime.yAxis.hideTicks && <Line key={`${tick.value}--hide-hideTicks`} from={tick.from} to={config.useLogScale ? to : tick.to} stroke={config.yAxis.tickColor} display={runtime.horizontal ? 'none' : 'block'} />}
 
-                        {runtime.yAxis.gridLines ? <Line key={`${tick.value}--hide-hideGridLines`} display={config.useLogScale && showTicks} from={{ x: tick.from.x + xMax, y: tick.from.y }} to={tick.from} stroke='rgba(0,0,0,0.3)' /> : ''}
+                        {runtime.yAxis.gridLines ? <Line key={`${tick.value}--hide-hideGridLines`} display={(config.useLogScale && showTicks).toString()} from={{ x: tick.from.x + xMax, y: tick.from.y }} to={tick.from} stroke='rgba(0,0,0,0.3)' /> : ''}
 
                         {orientation === 'horizontal' && visualizationSubType !== 'stacked' && config.yAxis.labelPlacement === 'On Date/Category Axis' && !config.yAxis.hideLabel && (
                           <Text
@@ -549,7 +318,7 @@ export default function LinearChart() {
                       </Group>
                     )
                   })}
-                  {!config.yAxis.hideAxis && <Line from={props.axisFromPoint} to={runtime.horizontal ? { x: 0, y: Number(heightHorizontal) } : props.axisToPoint} stroke='#000' />}
+                  {!config.yAxis.hideAxis && <Line from={props.axisFromPoint} to={runtime.horizontal ? { x: 0, y: config.visualizationType === 'Forest Plot' ? height : Number(heightHorizontal) } : props.axisToPoint} stroke='#000' />}
                   {yScale.domain()[0] < 0 && <Line from={{ x: props.axisFromPoint.x, y: yScale(0) }} to={{ x: xMax, y: yScale(0) }} stroke='#333' />}
                   {visualizationType === 'Bar' && orientation === 'horizontal' && xScale.domain()[0] < 0 && <Line from={{ x: xScale(0), y: 0 }} to={{ x: xScale(0), y: yMax }} stroke='#333' strokeWidth={2} />}
                   <Text className='y-label' textAnchor='middle' verticalAnchor='start' transform={`translate(${-1 * runtime.yAxis.size}, ${axisCenter}) rotate(-90)`} fontWeight='bold' fill={config.yAxis.labelColor}>
@@ -560,7 +329,6 @@ export default function LinearChart() {
             }}
           </AxisLeft>
         )}
-
         {/* Right Axis */}
         {hasRightAxis && (
           <AxisRight scale={yScaleRight} left={Number(width - config.yAxis.rightAxisSize)} label={config.yAxis.rightLabel} tickFormat={tick => formatNumber(tick, 'right')} numTicks={runtime.yAxis.rightNumTicks || undefined} labelOffset={45}>
@@ -593,7 +361,6 @@ export default function LinearChart() {
             }}
           </AxisRight>
         )}
-
         {hasTopAxis && config.topAxis.hasLine && (
           <AxisTop
             stroke='#333'
@@ -606,11 +373,10 @@ export default function LinearChart() {
             })}
           />
         )}
-
         {/* X axis */}
         {visualizationType !== 'Paired Bar' && visualizationType !== 'Spark Line' && (
           <AxisBottom
-            top={runtime.horizontal ? Number(heightHorizontal) + Number(config.xAxis.axisPadding) : yMax + Number(config.xAxis.axisPadding)}
+            top={runtime.horizontal && config.visualizationType !== 'Forest Plot' ? Number(heightHorizontal) + Number(config.xAxis.axisPadding) : config.visualizationType === 'Forest Plot' ? yMax + Number(config.xAxis.axisPadding) : yMax + Number(config.xAxis.axisPadding)}
             left={Number(runtime.yAxis.size)}
             label={runtime.xAxis.label}
             tickFormat={handleBottomTickFormatting}
@@ -620,7 +386,7 @@ export default function LinearChart() {
             tickStroke='#333'
           >
             {props => {
-              const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2
+              const axisCenter = config.visualizationType !== 'Forest Plot' ? (props.axisToPoint.x - props.axisFromPoint.x) / 2 : width / 2
               const containsMultipleWords = inputString => /\s/.test(inputString)
               const ismultiLabel = props.ticks.some(tick => containsMultipleWords(tick.value))
 
@@ -628,7 +394,7 @@ export default function LinearChart() {
               const fontSize = { small: 16, medium: 18, large: 20 }
               const defaultTickLength = 8
               const tickWidthMax = Math.max(...props.ticks.map(tick => getTextWidth(tick.formattedValue, `normal ${fontSize[config.fontSize]}px sans-serif`)))
-              const marginTop = 20
+              // const marginTop = 20 // moved to top bc need for yMax calcs
               const accumulator = ismultiLabel ? 180 : 100
 
               const textWidths = props.ticks.map(tick => getTextWidth(tick.formattedValue, `normal ${fontSize[config.fontSize]}px sans-serif`))
@@ -653,9 +419,9 @@ export default function LinearChart() {
                 }
               })
 
-              const dynamicMarginTop = areTicksTouching && config.isResponsiveTicks ? tickWidthMax + defaultTickLength + marginTop : 0
+              dynamicMarginTop = areTicksTouching && config.isResponsiveTicks ? tickWidthMax + defaultTickLength + marginTop : 0
               config.dynamicMarginTop = dynamicMarginTop
-              // config.xAxis.size = dynamicMarginTop
+
               return (
                 <Group className='bottom-axis'>
                   {props.ticks.map((tick, i, propsTicks) => {
@@ -684,7 +450,7 @@ export default function LinearChart() {
                             angle={tickRotation}
                             verticalAnchor={tickRotation < -50 ? 'middle' : 'start'}
                             textAnchor={tickRotation ? 'end' : 'middle'}
-                            width={areTicksTouching && !config.isResponsiveTicks && !config.xAxis.tickRotation ? limitedWidth : textWidth}
+                            width={areTicksTouching && !config.isResponsiveTicks && !Number(config[section].tickRotation) ? limitedWidth : textWidth}
                             fill={config.xAxis.tickLabelColor}
                           >
                             {tick.formattedValue}
@@ -702,7 +468,6 @@ export default function LinearChart() {
             }}
           </AxisBottom>
         )}
-
         {visualizationType === 'Paired Bar' && (
           <>
             <AxisBottom top={yMax} left={Number(runtime.yAxis.size)} label={runtime.xAxis.label} tickFormat={runtime.xAxis.type === 'date' ? formatDate : formatNumber} scale={g1xScale} stroke='#333' tickStroke='#333' numTicks={runtime.xAxis.numTicks || undefined}>
@@ -771,10 +536,24 @@ export default function LinearChart() {
         )}
         {visualizationType === 'Deviation Bar' && <DeviationBar xScale={xScale} yScale={yScale} width={xMax} height={yMax} />}
         {visualizationType === 'Paired Bar' && <PairedBarChart originalWidth={width} width={xMax} height={yMax} />}
-        {visualizationType === 'Scatter Plot' && <CoveScatterPlot xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} />}
+        {visualizationType === 'Scatter Plot' && (
+          <ScatterPlot
+            xScale={xScale}
+            yScale={yScale}
+            getXAxisData={getXAxisData}
+            getYAxisData={getYAxisData}
+            xMax={xMax}
+            yMax={yMax}
+            handleTooltipMouseOver={handleTooltipMouseOver}
+            handleTooltipMouseOff={handleTooltipMouseOff}
+            handleTooltipClick={handleTooltipClick}
+            tooltipData={tooltipData}
+            showTooltip={showTooltip}
+          />
+        )}
         {visualizationType === 'Box Plot' && <CoveBoxPlot xScale={xScale} yScale={yScale} />}
         {(visualizationType === 'Area Chart' || visualizationType === 'Combo') && (
-          <AreaChart xScale={xScale} yScale={yScale} yMax={yMax} xMax={xMax} chartRef={svgRef} width={xMax} height={yMax} handleTooltipMouseOver={handleAreaTooltipMouseOver} handleTooltipMouseOff={handleTooltipMouseOff} showTooltip={showTooltip} tooltipData={tooltipData} />
+          <AreaChart xScale={xScale} yScale={yScale} yMax={yMax} xMax={xMax} chartRef={svgRef} width={xMax} height={yMax} handleTooltipMouseOver={handleTooltipMouseOver} handleTooltipMouseOff={handleTooltipMouseOff} tooltipData={tooltipData} showTooltip={showTooltip} />
         )}
         {(visualizationType === 'Bar' || visualizationType === 'Combo') && (
           <BarChart
@@ -819,15 +598,43 @@ export default function LinearChart() {
             xScale={xScale}
             yScale={yScale}
             width={xMax}
+            le
             height={yMax}
             xScaleNoPadding={xScaleNoPadding}
             chartRef={svgRef}
             getXValueFromCoordinate={getXValueFromCoordinate}
             handleTooltipMouseOver={handleTooltipMouseOver}
             handleTooltipMouseOff={handleTooltipMouseOff}
+            isBrush={false}
+          />
+        )}
+        {/* y anchors */}
+        {config.yAxis.anchors &&
+          config.yAxis.anchors.map(anchor => {
+            return <Line strokeDasharray={handleLineType(anchor.lineStyle)} stroke='rgba(0,0,0,1)' className='customAnchor' from={{ x: 0 + config.yAxis.size, y: yScale(anchor.value) }} to={{ x: xMax, y: yScale(anchor.value) }} display={runtime.horizontal ? 'none' : 'block'} />
+          })}
+        {visualizationType === 'Forest Plot' && (
+          <ForestPlot
+            xScale={xScale}
+            yScale={yScale}
+            seriesScale={seriesScale}
+            width={xMax}
+            height={yMax}
+            maxWidth={width}
+            maxHeight={height}
+            getXAxisData={getXAxisData}
+            getYAxisData={getYAxisData}
+            animatedChart={animatedChart}
+            visible={animatedChart}
+            handleTooltipMouseOver={handleTooltipMouseOver}
+            handleTooltipMouseOff={handleTooltipMouseOff}
+            handleTooltipClick={handleTooltipClick}
+            tooltipData={tooltipData}
+            showTooltip={showTooltip}
+            chartRef={svgRef}
+            config={config}
           />
         )}
-
         {/* Line chart */}
         {/* TODO: Make this just line or combo? */}
         {visualizationType !== 'Bar' && visualizationType !== 'Paired Bar' && visualizationType !== 'Box Plot' && visualizationType !== 'Area Chart' && visualizationType !== 'Scatter Plot' && visualizationType !== 'Deviation Bar' && visualizationType !== 'Forecasting' && (
@@ -835,13 +642,13 @@ export default function LinearChart() {
             <LineChart xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} xMax={xMax} yMax={yMax} seriesStyle={config.series} />
           </>
         )}
-
         {/* y anchors */}
         {config.yAxis.anchors &&
           config.yAxis.anchors.map((anchor, index) => {
             let anchorPosition = yScale(anchor.value)
+            // have to move up
+            // const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
             if (!anchor.value) return
-            const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
             const middleOffset = orientation === 'horizontal' && visualizationType === 'Bar' ? config.barHeight / 4 : 0
 
             if (!anchorPosition) return
@@ -858,7 +665,6 @@ export default function LinearChart() {
               />
             )
           })}
-
         {/* x anchors */}
         {config.xAxis.anchors &&
           config.xAxis.anchors.map((anchor, index) => {
@@ -869,7 +675,8 @@ export default function LinearChart() {
 
             let anchorPosition = newX.type === 'date' ? xScale(parseDate(anchor.value, false)) : xScale(anchor.value)
 
-            const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
+            // have to move up
+            // const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
 
             if (!anchorPosition) return
 
@@ -886,13 +693,11 @@ export default function LinearChart() {
               />
             )
           })}
-
         {chartHasTooltipGuides && showTooltip && tooltipData && config.visual.verticalHoverLine && (
           <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
-            <Line from={{ x: tooltipData.dataXPosition, y: 0 }} to={{ x: tooltipData.dataXPosition, y: yMax }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='vertical-tooltip-line' />
+            <Line from={{ x: tooltipData.dataXPosition - 10, y: 0 }} to={{ x: tooltipData.dataXPosition - 10, y: yMax }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='vertical-tooltip-line' />
           </Group>
         )}
-
         {chartHasTooltipGuides && showTooltip && tooltipData && config.visual.horizontalHoverLine && (
           <Group key='tooltipLine-horizontal' className='horizontal-tooltip-line' left={config.yAxis.size ? config.yAxis.size : 0}>
             <Line from={{ x: 0, y: tooltipData.dataYPosition }} to={{ x: xMax, y: tooltipData.dataYPosition }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='horizontal-tooltip-line' />