@cdc/chart 4.23.3 → 4.23.5

package/src/components/LinearChart.jsx

@@ -4,314 +4,85 @@ import { Tooltip as ReactTooltip } from 'react-tooltip'
 import { Group } from '@visx/group'
 import { Line } from '@visx/shape'
 import { Text } from '@visx/text'
-import { scaleLinear, scalePoint, scaleBand, scaleTime } from '@visx/scale'
 import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
 
-import CoveScatterPlot from './ScatterPlot'
 import BarChart from './BarChart'
-import LineChart from './LineChart'
 import ConfigContext from '../ConfigContext'
+import CoveAreaChart from './AreaChart'
+import CoveBoxPlot from './BoxPlot'
+import CoveScatterPlot from './ScatterPlot'
+import DeviationBar from './DeviationBar'
+import LineChart from './LineChart'
 import PairedBarChart from './PairedBarChart'
 import useIntersectionObserver from './useIntersectionObserver'
-import CoveBoxPlot from './BoxPlot'
-import CoveAreaChart from './AreaChart'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import '../scss/LinearChart.scss'
 import useReduceData from '../hooks/useReduceData'
+import useScales from '../hooks/useScales'
+import useMinMax from '../hooks/useMinMax'
 import useRightAxis from '../hooks/useRightAxis'
 import useTopAxis from '../hooks/useTopAxis'
-import { DeviationBar } from './DeviationBar'
 
-// TODO: Move scaling functions into hooks to manage complexity
 export default function LinearChart() {
-  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, stringFormattingOptions } = useContext(ConfigContext)
+  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, handleLineType } = useContext(ConfigContext)
 
-  let [width] = dimensions
-  const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, data)
-  const [animatedChart, setAnimatedChart] = useState(false)
-
-  const triggerRef = useRef()
-  const dataRef = useIntersectionObserver(triggerRef, {
-    freezeOnceVisible: false
-  })
-
-  // Make sure the chart is visible if in the editor
-  /* eslint-disable react-hooks/exhaustive-deps */
-  useEffect(() => {
-    const element = document.querySelector('.isEditor')
-    if (element) {
-      // parent element is visible
-      setAnimatedChart(prevState => true)
-    }
-  }) /* eslint-disable-line */
-
-  // If the chart is in view, set to animate if it has not already played
-  useEffect(() => {
-    if (dataRef?.isIntersecting === true && config.animate) {
-      setTimeout(() => {
-        setAnimatedChart(prevState => true)
-      }, 500)
-    }
-  }, [dataRef?.isIntersecting, config.animate])
+  // 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))
 
-  if (config && config.legend && !config.legend.hide && config.legend.position !== 'bottom' && (currentViewport === 'lg' || currentViewport === 'md')) {
+  // configure width
+  let [width] = dimensions
+  if (config && config.legend && !config.legend.hide && config.legend.position !== 'bottom' && ['lg', 'md'].includes(currentViewport)) {
     width = width * 0.73
   }
+  //  configure height , yMax, xMAx
   const { horizontal: heightHorizontal } = config.heights
+  const isHorizontal = config.orientation === 'horizontal'
+  const shouldAbbreviate = true
   const height = config.aspectRatio ? width * config.aspectRatio : config.heights[config.orientation]
   const xMax = width - config.runtime.yAxis.size - (config.visualizationType === 'Combo' ? config.yAxis.rightAxisSize : 0)
   const yMax = height - (config.orientation === 'horizontal' ? 0 : config.runtime.xAxis.size)
 
+  // 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 } = useScales({ ...properties, min, max })
 
-  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]
-
-  let xScale
-  let yScale
-  let seriesScale
-
-  const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
-  const isMaxValid = existPositiveValue ? enteredMaxValue >= maxValue : enteredMaxValue >= 0
-  const isMinValid = (enteredMinValue <= 0 && minValue >= 0) || (enteredMinValue <= minValue && minValue < 0)
-
-  let max = 0 // need outside the if statement
-  let min = 0
-  if (data) {
-    min = enteredMinValue && isMinValid ? enteredMinValue : minValue
-    max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
-
-    // DEV-3263 - If Confidence Intervals in data, then need to account for increased height in max for YScale
-    if (config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || config.visualizationType === 'Deviation Bar') {
-      let ciYMax = 0
-      if (config.hasOwnProperty('confidenceKeys')) {
-        let upperCIValues = data.map(function (d) {
-          return d[config.confidenceKeys.upper]
-        })
-        ciYMax = Math.max.apply(Math, upperCIValues)
-        if (ciYMax > max) max = ciYMax // bump up the max
-      }
-    }
-
-    // DEV-3263 - If Confidence Intervals in data, then need to account for increased height in max for YScale
-    if (config.visualizationType === 'Bar' || config.visualizationType === 'Combo') {
-      let ciYMax = 0
-      if (config.hasOwnProperty('confidenceKeys')) {
-        let upperCIValues = data.map(function (d) {
-          return d[config.confidenceKeys.upper]
-        })
-        ciYMax = Math.max.apply(Math, upperCIValues)
-        if (ciYMax > max) max = ciYMax // bump up the max
-      }
-    }
-
-    if ((config.visualizationType === 'Bar' || config.visualizationType === 'Deviation Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && min > 0) {
-      min = 0
-    }
-    if (config.visualizationType === 'Combo' && isAllLine) {
-      if ((enteredMinValue === undefined || enteredMinValue === null || enteredMinValue === '') && min > 0) {
-        min = 0
-      }
-      if (enteredMinValue) {
-        const isMinValid = +enteredMinValue < minValue
-        min = +enteredMinValue && isMinValid ? enteredMinValue : minValue
-      }
-    }
-
-    if (config.visualizationType === 'Line') {
-      const isMinValid = enteredMinValue < minValue
-      min = enteredMinValue && isMinValid ? enteredMinValue : minValue
-    }
-    //If data value max wasn't provided, calculate it
-    if (max === Number.MIN_VALUE) {
-      // if all values in data are negative set max = 0
-      max = existPositiveValue ? maxValue : 0
-    }
-
-    //Adds Y Axis data padding if applicable
-    if (config.runtime.yAxis.paddingPercent) {
-      let paddingValue = (max - min) * config.runtime.yAxis.paddingPercent
-      min -= paddingValue
-      max += paddingValue
-    }
-
-    let xAxisDataMapped = data.map(d => getXAxisData(d))
-
-    if (config.isLollipopChart && config.yAxis.displayNumbersOnBar) {
-      const dataKey = data.map(item => item[config.series[0].dataKey])
-      const maxDataVal = Math.max(...dataKey).toString().length
-
-      switch (true) {
-        case maxDataVal > 8 && maxDataVal <= 12:
-          max = max * 1.3
-          break
-        case maxDataVal > 4 && maxDataVal <= 7:
-          max = max * 1.1
-          break
-        default:
-          break
-      }
-    }
-
-    // DEV-3219 - bc some values are going above YScale - adding 10% or 20% factor onto Max
-    // - put the statement up here and it works for both vert and horiz charts of all types
-    if (config.yAxis.enablePadding) {
-      if (min < 0) {
-        // sets with negative data need more padding on the max
-        max *= 1.2
-      } else {
-        max *= 1.1
-      }
-    }
-
-    if (config.runtime.horizontal) {
-      xScale = scaleLinear({
-        domain: [min, max],
-        range: [0, xMax]
-      })
-
-      yScale =
-        config.runtime.xAxis.type === 'date'
-          ? scaleLinear({
-              domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)]
-            })
-          : scalePoint({ domain: xAxisDataMapped, padding: 0.5 })
-
-      seriesScale = scalePoint({
-        domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
-        range: [0, yMax]
-      })
-
-      yScale.rangeRound([0, yMax])
-    } else {
-      min = min < 0 ? min * 1.11 : min
-
-      yScale = scaleLinear({
-        domain: [min, max],
-        range: [yMax, 0]
-      })
-
-      xScale = scalePoint({
-        domain: xAxisDataMapped,
-        range: [0, xMax],
-        padding: 0.5
-      })
-
-      seriesScale = scalePoint({
-        domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
-        range: [0, xMax]
-      })
-    }
-
-    if (config.visualizationType === 'Area Chart' && config.xAxis.type === 'date') {
-      xScale = scaleTime({
-        domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)],
-        range: [0, xMax]
-      })
-    }
-
-    if (config.visualizationType === 'Paired Bar') {
-      const offset = 1.02 // Offset of the ticks/values from the Axis
-      let groupOneMax = Math.max.apply(
-        Math,
-        data.map(d => d[config.series[0].dataKey])
-      )
-      let groupTwoMax = Math.max.apply(
-        Math,
-        data.map(d => d[config.series[1].dataKey])
-      )
-
-      // group one
-      var g1xScale = scaleLinear({
-        domain: [0, Math.max(groupOneMax, groupTwoMax) * offset],
-        range: [xMax / 2, 0]
-      })
-
-      // group 2
-      var g2xScale = scaleLinear({
-        domain: g1xScale.domain(),
-        range: [xMax / 2, xMax],
-        nice: true
-      })
-    }
-
-    if (config.visualizationType === 'Scatter Plot') {
-      if (config.xAxis.type === 'continuous') {
-        xScale = scaleLinear({
-          domain: [0, Math.max.apply(null, xScale.domain())],
-          range: [0, xMax]
-        })
-      }
-    }
-
-    if (config.visualizationType === 'Deviation Bar') {
-      const leftOffset = config.isLollipopChart ? 1.05 : 1.03
-      yScale = scaleBand({
-        domain: xAxisDataMapped,
-        range: [0, yMax]
-      })
-      xScale = scaleLinear({
-        domain: [min * leftOffset, Math.max(Number(config.xAxis.target), max)],
-        range: [0, xMax],
-        round: true
-      })
-    }
-    // Handle Box Plots
-    if (config.visualizationType === 'Box Plot') {
-      const allOutliers = []
-      const hasOutliers = config.boxplot.plots.map(b => b.columnOutliers.map(outlier => allOutliers.push(outlier))) && !config.boxplot.hideOutliers
-
-      // check if outliers are lower
-      if (hasOutliers) {
-        let outlierMin = Math.min(...allOutliers)
-        let outlierMax = Math.max(...allOutliers)
-
-        // check if outliers exceed standard bounds
-        if (outlierMin < min) min = outlierMin
-        if (outlierMax > max) max = outlierMax
-      }
-
-      // check fences for max/min
-      let lowestFence = Math.min(...config.boxplot.plots.map(item => item.columnMin))
-      let highestFence = Math.max(...config.boxplot.plots.map(item => item.columnMax))
-
-      if (lowestFence < min) min = lowestFence
-      if (highestFence > max) max = highestFence
-
-      // Set Scales
-      yScale = scaleLinear({
-        range: [yMax, 0],
-        round: true,
-        domain: [min, max]
-      })
-
-      xScale = scaleBand({
-        range: [0, xMax],
-        round: true,
-        domain: config.boxplot.categories,
-        padding: 0.4
-      })
-    }
-  }
+  // refs
+  const triggerRef = useRef()
+  const svgRef = useRef()
+  const dataRef = useIntersectionObserver(triggerRef, {
+    freezeOnceVisible: false
+  })
 
   const handleLeftTickFormatting = tick => {
+    if (config.useLogScale && tick === 0.1) {
+      //when logaritmic scale applyed change value of FIRST  tick
+      tick = 0
+    }
     if (config.runtime.yAxis.type === 'date') return formatDate(parseDate(tick))
-    if (config.orientation === 'vertical') return formatNumber(tick, 'left')
+    if (config.orientation === 'vertical') return formatNumber(tick, 'left', shouldAbbreviate)
     return tick
   }
 
   const handleBottomTickFormatting = tick => {
+    if (config.useLogScale && tick === 0.1) {
+      // when logaritmic scale applyed change value FIRST  of  tick
+      tick = 0
+    }
     if (config.runtime.xAxis.type === 'date') return formatDate(tick)
-    if (config.orientation === 'horizontal') return formatNumber(tick, 'left')
-    if (config.xAxis.type === 'continuous') return formatNumber(tick, 'bottom')
+    if (config.orientation === 'horizontal') return formatNumber(tick, 'left', shouldAbbreviate)
+    if (config.xAxis.type === 'continuous') return formatNumber(tick, 'bottom', shouldAbbreviate)
     return tick
   }
 
   const countNumOfTicks = axis => {
-    // function get number of ticks based on bar type & users value
-    const isHorizontal = config.orientation === 'horizontal'
     const { numTicks } = config.runtime[axis]
     let tickCount = undefined
 
@@ -347,11 +118,32 @@ export default function LinearChart() {
     return tickCount
   }
 
+  // Make sure the chart is visible if in the editor
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => {
+    const element = document.querySelector('.isEditor')
+    if (element) {
+      // parent element is visible
+      setAnimatedChart(prevState => true)
+    }
+  }) /* eslint-disable-line */
+
+  // If the chart is in view, set to animate if it has not already played
+  useEffect(() => {
+    if (dataRef?.isIntersecting === true && config.animate) {
+      setTimeout(() => {
+        setAnimatedChart(prevState => true)
+      }, 500)
+    }
+  }, [dataRef?.isIntersecting, config.animate])
+
+  const { orientation, xAxis, yAxis } = config
+
   return isNaN(width) ? (
     <></>
   ) : (
     <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}>
+      <svg width={width} height={height} className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''}`} role='img' aria-label={handleChartAriaLabels(config)} tabIndex={0} ref={svgRef}>
         {/* Higlighted regions */}
         {config.regions
           ? config.regions.map(region => {
@@ -398,7 +190,7 @@ export default function LinearChart() {
 
         {/* Y axis */}
         {config.visualizationType !== 'Spark Line' && (
-          <AxisLeft scale={yScale} left={Number(config.runtime.yAxis.size) - config.yAxis.axisPadding} label={config.runtime.yAxis.label} stroke='#333' tickFormat={tick => handleLeftTickFormatting(tick)} numTicks={countNumOfTicks('yAxis')}>
+          <AxisLeft scale={yScale} tickLength={config.useLogScale ? 6 : 8} left={Number(config.runtime.yAxis.size) - config.yAxis.axisPadding} label={config.runtime.yAxis.label} stroke='#333' tickFormat={tick => handleLeftTickFormatting(tick)} numTicks={countNumOfTicks('yAxis')}>
             {props => {
               const axisCenter = config.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
@@ -407,12 +199,15 @@ export default function LinearChart() {
                   {props.ticks.map((tick, i) => {
                     const minY = props.ticks[0].to.y
                     const barMinHeight = 15 // 15 is the min height for bars by default
+                    const showTicks = String(tick.value).startsWith('1') || tick.value === 0.1 ? 'block' : 'none'
+                    const tickLength = showTicks === 'block' ? 7 : 0
+                    const to = { x: tick.to.x - tickLength, y: tick.to.y }
 
                     return (
                       <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                        {!config.runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke={config.yAxis.tickColor} display={config.runtime.horizontal ? 'none' : 'block'} />}
+                        {!config.runtime.yAxis.hideTicks && <Line from={tick.from} to={config.useLogScale ? to : tick.to} stroke={config.yAxis.tickColor} display={config.runtime.horizontal ? 'none' : 'block'} />}
 
-                        {config.runtime.yAxis.gridLines ? <Line from={{ x: tick.from.x + xMax, y: tick.from.y }} to={tick.from} stroke='rgba(0,0,0,0.3)' /> : ''}
+                        {config.runtime.yAxis.gridLines ? <Line display={config.useLogScale && showTicks} from={{ x: tick.from.x + xMax, y: tick.from.y }} to={tick.from} stroke='rgba(0,0,0,0.3)' /> : ''}
 
                         {config.orientation === 'horizontal' && config.visualizationSubType !== 'stacked' && config.yAxis.labelPlacement === 'On Date/Category Axis' && !config.yAxis.hideLabel && (
                           <Text
@@ -441,8 +236,10 @@ export default function LinearChart() {
                           </Text>
                         )}
 
-                        {config.orientation !== 'horizontal' && config.visualizationType !== 'Paired Bar' && !config.yAxis.hideLabel && (
+                        {config.orientation === 'vertical' && config.visualizationType !== 'Paired Bar' && !config.yAxis.hideLabel && (
                           <Text
+                            display={config.useLogScale ? showTicks : 'block'}
+                            dx={config.useLogScale ? -6 : 0}
                             x={config.runtime.horizontal ? tick.from.x + 2 : tick.to.x}
                             y={tick.to.y + (config.runtime.horizontal ? horizontalTickOffset : 0)}
                             verticalAnchor={config.runtime.horizontal ? 'start' : 'middle'}
@@ -457,6 +254,7 @@ export default function LinearChart() {
                   })}
                   {!config.yAxis.hideAxis && <Line from={props.axisFromPoint} to={config.runtime.horizontal ? { x: 0, y: 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' />}
+                  {config.visualizationType === 'Bar' && config.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 * config.runtime.yAxis.size}, ${axisCenter}) rotate(-90)`} fontWeight='bold' fill={config.yAxis.labelColor}>
                     {props.label}
                   </Text>
@@ -529,12 +327,19 @@ export default function LinearChart() {
               return (
                 <Group className='bottom-axis'>
                   {props.ticks.map((tick, i) => {
+                    // when using LogScale show major ticks values only
+                    const showTick = String(tick.value).startsWith('1') || tick.value === 0.1 ? 'block' : 'none'
                     const tickWidth = xMax / props.ticks.length
+                    const tickLength = showTick === 'block' ? 16 : 8
+                    const to = { x: tick.to.x, y: tickLength }
+
                     return (
                       <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                        {!config.xAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke={config.xAxis.tickColor} />}
+                        {!config.xAxis.hideTicks && <Line from={tick.from} to={config.orientation === 'horizontal' && config.useLogScale ? to : tick.to} stroke={config.xAxis.tickColor} strokeWidth={showTick === 'block' ? 1.3 : 1} />}
                         {!config.xAxis.hideLabel && (
                           <Text
+                            dy={config.orientation === 'horizontal' && config.useLogScale ? 8 : 0}
+                            display={config.orientation === 'horizontal' && config.useLogScale ? showTick : 'block'}
                             transform={`translate(${tick.to.x}, ${tick.to.y}) rotate(-${!config.runtime.horizontal ? config.runtime.xAxis.tickRotation : 0})`}
                             verticalAnchor='start'
                             textAnchor={config.runtime.xAxis.tickRotation && config.runtime.xAxis.tickRotation !== '0' ? 'end' : 'middle'}
@@ -571,7 +376,7 @@ export default function LinearChart() {
                           {!config.runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke='#333' />}
                           {!config.runtime.yAxis.hideLabel && (
                             <Text x={tick.to.x} y={tick.to.y} angle={-angle} verticalAnchor='start' textAnchor={textAnchor}>
-                              {formatNumber(tick.formattedValue)}
+                              {formatNumber(tick.value, 'left')}
                             </Text>
                           )}
                         </Group>
@@ -604,7 +409,7 @@ export default function LinearChart() {
                             {!config.runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke='#333' />}
                             {!config.runtime.yAxis.hideLabel && (
                               <Text x={tick.to.x} y={tick.to.y} angle={-angle} verticalAnchor='start' textAnchor={textAnchor}>
-                                {tick.formattedValue}
+                                {formatNumber(tick.value, 'left')}
                               </Text>
                             )}
                           </Group>
@@ -625,11 +430,13 @@ export default function LinearChart() {
         )}
 
         {config.visualizationType === 'Deviation Bar' && <DeviationBar xScale={xScale} yScale={yScale} width={xMax} height={yMax} />}
-
-        {/* Paired Bar chart */}
         {config.visualizationType === 'Paired Bar' && <PairedBarChart originalWidth={width} width={xMax} height={yMax} />}
+        {config.visualizationType === 'Scatter Plot' && <CoveScatterPlot xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} />}
+        {config.visualizationType === 'Box Plot' && <CoveBoxPlot xScale={xScale} yScale={yScale} />}
+        {(config.visualizationType === 'Area Chart' || config.visualizationType === 'Combo') && <CoveAreaChart xScale={xScale} yScale={yScale} yMax={yMax} xMax={xMax} chartRef={svgRef} />}
 
         {/* Bar chart */}
+        {/* TODO: Make this just bar or combo? */}
         {config.visualizationType !== 'Line' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Area Chart' && config.visualizationType !== 'Scatter Plot' && config.visualizationType !== 'Deviation Bar' && (
           <>
             <BarChart xScale={xScale} yScale={yScale} seriesScale={seriesScale} xMax={xMax} yMax={yMax} getXAxisData={getXAxisData} getYAxisData={getYAxisData} animatedChart={animatedChart} visible={animatedChart} />
@@ -637,18 +444,58 @@ export default function LinearChart() {
         )}
 
         {/* Line chart */}
+        {/* TODO: Make this just line or combo? */}
         {config.visualizationType !== 'Bar' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Area Chart' && config.visualizationType !== 'Scatter Plot' && config.visualizationType !== 'Deviation Bar' && (
           <>
             <LineChart xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} xMax={xMax} yMax={yMax} seriesStyle={config.series} />
           </>
         )}
 
-        {/* Scatter Plot chart */}
-        {config.visualizationType === 'Scatter Plot' && <CoveScatterPlot xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} />}
-
-        {/* Box Plot chart */}
-        {config.visualizationType === 'Box Plot' && <CoveBoxPlot xScale={xScale} yScale={yScale} />}
-        {config.visualizationType === 'Area Chart' && <CoveAreaChart xScale={xScale} yScale={yScale} yMax={yMax} xMax={xMax} />}
+        {/* y anchors */}
+        {config.yAxis.anchors &&
+          config.yAxis.anchors.map(anchor => {
+            let anchorPosition = yScale(anchor.value)
+            const padding = config.orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
+            const middleOffset = config.orientation === 'horizontal' && config.visualizationType === 'Bar' ? config.barHeight / 4 : 0
+
+            return (
+              // prettier-ignore
+              <Line
+                key={anchor.value}
+                strokeDasharray={handleLineType(anchor.lineStyle)}
+                stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
+                className='anchor-y'
+                from={{ x: 0 + padding, y: anchorPosition - middleOffset}}
+                to={{ x: width, y: anchorPosition - middleOffset }}
+              />
+            )
+          })}
+
+        {/* x anchors */}
+        {config.xAxis.anchors &&
+          config.xAxis.anchors.map(anchor => {
+            let newX = xAxis
+            if (orientation === 'horizontal') {
+              newX = yAxis
+            }
+
+            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)
+
+            return (
+              // prettier-ignore
+              <Line
+                key={anchor.value}
+                strokeDasharray={handleLineType(anchor.lineStyle)}
+                stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
+                fill={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
+                className='anchor-x'
+                from={{ x: Number(anchorPosition) + Number(padding), y: 0 }}
+                to={{ x: Number(anchorPosition) + Number(padding), y: yMax }}
+              />
+            )
+          })}
       </svg>
       <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' />
       <div className='animation-trigger' ref={triggerRef} />

package/src/components/PairedBarChart.jsx

@@ -61,7 +61,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
     return `<p>
 				${config.dataDescription.seriesKey}: ${groupOne.dataKey}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
-				${label}${formatNumber(d[groupOne.dataKey])}
+				${label}${formatNumber(d[groupOne.dataKey], 'left')}
 			</p>`
   }
 
@@ -69,7 +69,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
     return `<p>
 				${config.dataDescription.seriesKey}: ${groupTwo.dataKey}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
-				${label}${formatNumber(d[groupTwo.dataKey])}
+				${label}${formatNumber(d[groupTwo.dataKey], 'left')}
 			</p>`
   }
 
@@ -99,7 +99,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const totalheight = (Number(config.barSpace) + barHeight + borderWidth) * data.length
                 config.heights.horizontal = totalheight
                 // check if text fits inside of the  bar including suffix/prefix,comma,fontSize ..etc
-                const textWidth = getTextWidth(formatNumber(d[groupOne.dataKey]), `normal ${fontSize[config.fontSize]}px sans-serif`)
+                const textWidth = getTextWidth(formatNumber(d[groupOne.dataKey], 'left'), `normal ${fontSize[config.fontSize]}px sans-serif`)
                 const textFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
@@ -123,7 +123,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                       />
                       {config.yAxis.displayNumbersOnBar && displayBar && (
                         <Text textAnchor={textFits ? 'start' : 'end'} dx={textFits ? 5 : -5} verticalAnchor='middle' x={halfWidth - barWidth} y={y + config.barHeight / 2} fill={textFits ? groupOne.labelColor : '#000'}>
-                          {formatNumber(d[groupOne.dataKey])}
+                          {formatNumber(d[groupOne.dataKey], 'left')}
                         </Text>
                       )}
                     </Group>
@@ -143,7 +143,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const totalheight = (Number(config.barSpace) + barHeight + borderWidth) * data.length
                 config.heights.horizontal = totalheight
                 // check if text fits inside of the  bar including suffix/prefix,comma,fontSize ..etc
-                const textWidth = getTextWidth(formatNumber(d[groupTwo.dataKey]), `normal ${fontSize[config.fontSize]}px sans-serif`)
+                const textWidth = getTextWidth(formatNumber(d[groupTwo.dataKey], 'left'), `normal ${fontSize[config.fontSize]}px sans-serif`)
                 const isTextFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
@@ -174,7 +174,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                       />
                       {config.yAxis.displayNumbersOnBar && displayBar && (
                         <Text textAnchor={isTextFits ? 'end' : 'start'} dx={isTextFits ? -5 : 5} verticalAnchor='middle' x={halfWidth + barWidth} y={y + config.barHeight / 2} fill={isTextFits ? groupTwo.labelColor : '#000'}>
-                          {formatNumber(d[groupTwo.dataKey])}
+                          {formatNumber(d[groupTwo.dataKey], 'left')}
                         </Text>
                       )}
                     </Group>

package/src/components/PieChart.jsx

@@ -18,9 +18,7 @@ const enterUpdateTransition = ({ startAngle, endAngle }) => ({
 })
 
 export default function PieChart() {
-  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels, cleanData } = useContext(ConfigContext)
-
-  const cleanedData = cleanData(data, config.xAxis.dataKey)
+  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels } = useContext(ConfigContext)
 
   const [filteredData, setFilteredData] = useState(undefined)
   const [animatedPie, setAnimatePie] = useState(false)
@@ -140,7 +138,7 @@ export default function PieChart() {
     <ErrorBoundary component='PieChart'>
       <svg width={width} height={height} className={`animated-pie group ${config.animate === false || animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
         <Group top={centerY} left={centerX}>
-          <Pie data={filteredData || cleanedData} pieValue={d => d[config.runtime.yAxis.dataKey]} pieSortValues={() => -1} innerRadius={radius - donutThickness} outerRadius={radius}>
+          <Pie data={filteredData || data} pieValue={d => d[config.runtime.yAxis.dataKey]} pieSortValues={() => -1} innerRadius={radius - donutThickness} outerRadius={radius}>
             {pie => <AnimatedPie {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]} />}
           </Pie>
         </Group>