@cdc/chart 4.23.1 → 4.23.2

package/src/components/{LinearChart.tsx → LinearChart.jsx}

@@ -1,5 +1,5 @@
-import React, { Fragment, useContext, useEffect, useRef, useState } from 'react'
-import ReactTooltip from 'react-tooltip'
+import React, { useContext, useEffect, useRef, useState } from 'react'
+import { Tooltip as ReactTooltip } from 'react-tooltip'
 
 import { Group } from '@visx/group'
 import { Line } from '@visx/shape'
@@ -7,9 +7,10 @@ import { Text } from '@visx/text'
 import { scaleLinear, scalePoint, scaleBand } from '@visx/scale'
 import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
 
+import CoveScatterPlot from './ScatterPlot'
 import BarChart from './BarChart'
 import LineChart from './LineChart'
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 import PairedBarChart from './PairedBarChart'
 import useIntersectionObserver from './useIntersectionObserver'
 import CoveBoxPlot from './BoxPlot'
@@ -22,10 +23,10 @@ import useTopAxis from '../hooks/useTopAxis'
 
 // TODO: Move scaling functions into hooks to manage complexity
 export default function LinearChart() {
-  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig } = useContext<any>(Context)
+  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig } = useContext(ConfigContext)
   let [width] = dimensions
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, data)
-  const [animatedChart, setAnimatedChart] = useState<boolean>(false)
+  const [animatedChart, setAnimatedChart] = useState(false)
 
   const triggerRef = useRef()
   const dataRef = useIntersectionObserver(triggerRef, {
@@ -40,7 +41,7 @@ export default function LinearChart() {
     }
   })
 
-  // If the chart is in view and set to animate and it has not already played
+  // If the chart is in view, set to animate if it has not already played
   useEffect(() => {
     if (dataRef?.isIntersecting === true && config.animate) {
       setTimeout(() => {
@@ -54,14 +55,14 @@ export default function LinearChart() {
   }
   const { horizontal: heightHorizontal } = config.heights
   const height = config.aspectRatio ? width * config.aspectRatio : config.heights[config.orientation]
-  const xMax = width - config.runtime.yAxis.size - config.yAxis.rightAxisSize
+  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)
 
   const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data, updateConfig })
   const { hasTopAxis } = useTopAxis(config)
 
-  const getXAxisData = (d: any) => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
-  const getYAxisData = (d: any, seriesKey: string) => d[seriesKey]
+  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
@@ -122,19 +123,19 @@ export default function LinearChart() {
     }
 
     if (config.runtime.horizontal) {
-      xScale = scaleLinear<number>({
+      xScale = scaleLinear({
         domain: [min, max],
         range: [0, xMax]
       })
 
       yScale =
         config.runtime.xAxis.type === 'date'
-          ? scaleLinear<number>({
+          ? scaleLinear({
               domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)]
             })
-          : scalePoint<string>({ domain: xAxisDataMapped, padding: 0.5 })
+          : scalePoint({ domain: xAxisDataMapped, padding: 0.5 })
 
-      seriesScale = scalePoint<string>({
+      seriesScale = scalePoint({
         domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
         range: [0, yMax]
       })
@@ -143,24 +144,25 @@ export default function LinearChart() {
     } else {
       min = min < 0 ? min * 1.11 : min
 
-      yScale = scaleLinear<number>({
+      yScale = scaleLinear({
         domain: [min, max],
         range: [yMax, 0]
       })
 
-      xScale = scalePoint<string>({
+      xScale = scalePoint({
         domain: xAxisDataMapped,
         range: [0, xMax],
         padding: 0.5
       })
 
-      seriesScale = scalePoint<string>({
+      seriesScale = scalePoint({
         domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
         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])
@@ -171,17 +173,27 @@ export default function LinearChart() {
       )
 
       // group one
-      var g1xScale = scaleLinear<number>({
-        domain: [0, Math.max(groupOneMax, groupTwoMax)],
+      var g1xScale = scaleLinear({
+        domain: [0, Math.max(groupOneMax, groupTwoMax) * offset],
         range: [xMax / 2, 0]
       })
 
       // group 2
-      var g2xScale = scaleLinear<number>({
+      var g2xScale = scaleLinear({
         domain: g1xScale.domain(),
-        range: [xMax / 2, xMax]
+        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]
+        })
+      }
+    }
   }
 
   const handleLeftTickFormatting = tick => {
@@ -217,13 +229,13 @@ export default function LinearChart() {
     let minYValue
     let maxYValue
     let allOutliers = []
-    let allLowerBounds = config.boxplot.map(plot => plot.columnMin)
-    let allUpperBounds = config.boxplot.map(plot => plot.columnMax)
+    let allLowerBounds = config.boxplot.plots.map(plot => plot.columnMin)
+    let allUpperBounds = config.boxplot.plots.map(plot => plot.columnMax)
 
     minYValue = Math.min(...allLowerBounds)
     maxYValue = Math.max(...allUpperBounds)
 
-    const hasOutliers = config.boxplot.map(b => b.columnOutliers.map(outlier => allOutliers.push(outlier)))
+    const hasOutliers = config.boxplot.plots.map(b => b.columnOutliers.map(outlier => allOutliers.push(outlier))) && !config.boxplot.hideOutliers
 
     if (hasOutliers) {
       let outlierMin = Math.min(...allOutliers)
@@ -251,9 +263,9 @@ export default function LinearChart() {
     })
   }
 
-  useEffect(() => {
-    ReactTooltip.rebuild()
-  })
+  const handleTick = tick => {
+    return config.runtime.xAxis.type === 'date' ? formatDate(tick) : config.orientation === 'horizontal' ? formatNumber(tick) : tick
+  }
 
   return isNaN(width) ? (
     <></>
@@ -291,7 +303,7 @@ export default function LinearChart() {
 
         {/* Y axis */}
         {config.visualizationType !== 'Spark Line' && (
-          <AxisLeft scale={yScale} left={Number(config.runtime.yAxis.size)} label={config.runtime.yAxis.label} stroke='#333' tickFormat={tick => handleLeftTickFormatting(tick)} numTicks={countNumOfTicks('yAxis')}>
+          <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')}>
             {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
@@ -324,18 +336,11 @@ export default function LinearChart() {
                         )}
 
                         {config.orientation === 'horizontal' && config.visualizationType === 'Paired Bar' && !config.yAxis.hideLabel && (
-                          <Text transform={`translate(${-15}, ${tick.from.y}) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`} verticalAnchor={config.isLollipopChart ? 'middle' : 'middle'} textAnchor={'end'}>
+                          <Text transform={`translate(${tick.to.x - 5}, ${tick.to.y - minY + Number(config.barHeight) / 2}) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`} textAnchor={'end'} verticalAnchor='middle'>
                             {tick.formattedValue}
                           </Text>
                         )}
 
-                        {config.orientation === 'horizontal' && config.visualizationType === 'Paired Bar' && !config.yAxis.hideLabel && (
-                          // 17 is a magic number from the offset in barchart.
-                          <Text transform={`translate(${-15}, ${tick.from.y}) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`} verticalAnchor={config.isLollipopChart ? 'middle' : 'middle'} textAnchor={'end'}>
-                            {formatNumber(tick.formattedValue)}
-                          </Text>
-                        )}
-
                         {config.orientation !== 'horizontal' && config.visualizationType !== 'Paired Bar' && !config.yAxis.hideLabel && (
                           <Text
                             x={config.runtime.horizontal ? tick.from.x + 2 : tick.to.x}
@@ -409,7 +414,16 @@ export default function LinearChart() {
 
         {/* X axis */}
         {config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Spark Line' && (
-          <AxisBottom top={yMax} left={Number(config.runtime.yAxis.size)} label={config.runtime.xAxis.label} tickFormat={handleBottomTickFormatting} scale={xScale} stroke='#333' tickStroke='#333' numTicks={countNumOfTicks('xAxis')}>
+          <AxisBottom
+            top={config.runtime.horizontal ? Number(heightHorizontal) + Number(config.xAxis.axisPadding) : yMax + Number(config.xAxis.axisPadding)}
+            left={Number(config.runtime.yAxis.size)}
+            label={config.runtime.xAxis.label}
+            tickFormat={handleBottomTickFormatting}
+            scale={xScale}
+            stroke='#333'
+            tickStroke='#333'
+            numTicks={countNumOfTicks('xAxis')}
+          >
             {props => {
               const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2
               return (
@@ -447,16 +461,16 @@ export default function LinearChart() {
           <>
             <AxisBottom top={yMax} left={Number(config.runtime.yAxis.size)} label={config.runtime.xAxis.label} tickFormat={config.runtime.xAxis.type === 'date' ? formatDate : formatNumber} scale={g1xScale} stroke='#333' tickStroke='#333' numTicks={config.runtime.xAxis.numTicks || undefined}>
               {props => {
-                const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2
                 return (
                   <Group className='bottom-axis'>
                     {props.ticks.map((tick, i) => {
-                      const tickWidth = xMax / props.ticks.length
+                      const angle = tick.index !== 0 ? config.yAxis.tickRotation : 0
+                      const textAnchor = tick.index !== 0 && config.yAxis.tickRotation && config.yAxis.tickRotation > 0 ? 'end' : 'middle'
                       return (
                         <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
                           {!config.runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke='#333' />}
                           {!config.runtime.yAxis.hideLabel && (
-                            <Text transform={`translate(${tick.to.x}, ${tick.to.y}) rotate(-${60})`} verticalAnchor='start' textAnchor={'end'} width={config.runtime.xAxis.tickRotation && config.runtime.xAxis.tickRotation !== '0' ? undefined : tickWidth}>
+                            <Text x={tick.to.x} y={tick.to.y} angle={-angle} verticalAnchor='start' textAnchor={textAnchor}>
                               {formatNumber(tick.formattedValue)}
                             </Text>
                           )}
@@ -479,17 +493,17 @@ export default function LinearChart() {
               numTicks={config.runtime.xAxis.numTicks || undefined}
             >
               {props => {
-                const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2
                 return (
                   <>
                     <Group className='bottom-axis'>
                       {props.ticks.map((tick, i) => {
-                        const tickWidth = xMax / props.ticks.length
+                        const angle = tick.index !== 0 ? config.yAxis.tickRotation : 0
+                        const textAnchor = tick.index !== 0 && config.yAxis.tickRotation && config.yAxis.tickRotation > 0 ? 'end' : 'middle'
                         return (
                           <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
                             {!config.runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke='#333' />}
                             {!config.runtime.yAxis.hideLabel && (
-                              <Text transform={`translate(${tick.to.x}, ${tick.to.y}) rotate(-${60})`} verticalAnchor='start' textAnchor={'end'} width={config.runtime.xAxis.tickRotation && config.runtime.xAxis.tickRotation !== '0' ? undefined : tickWidth}>
+                              <Text x={tick.to.x} y={tick.to.y} angle={-angle} verticalAnchor='start' textAnchor={textAnchor}>
                                 {tick.formattedValue}
                               </Text>
                             )}
@@ -499,7 +513,7 @@ export default function LinearChart() {
                       {!config.runtime.yAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
                     </Group>
                     <Group>
-                      <Text transform={`translate(${xMax / 2}, ${yMax + 20}) rotate(-${0})`} verticalAnchor='start' textAnchor={'middle'} stroke='#333'>
+                      <Text x={xMax / 2} y={config.xAxis.labelOffset} stroke='#333' textAnchor={'middle'} verticalAnchor='start'>
                         {config.runtime.xAxis.label}
                       </Text>
                     </Group>
@@ -509,25 +523,31 @@ export default function LinearChart() {
             </AxisBottom>
           </>
         )}
-        {config.visualizationType === 'Paired Bar' && <PairedBarChart width={xMax} height={yMax} />}
+
+        {/* Paired Bar chart */}
+        {config.visualizationType === 'Paired Bar' && <PairedBarChart originalWidth={width} width={xMax} height={yMax} />}
 
         {/* Bar chart */}
-        {config.visualizationType !== 'Line' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && (
+        {config.visualizationType !== 'Line' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Scatter Plot' && (
           <>
             <BarChart xScale={xScale} yScale={yScale} seriesScale={seriesScale} xMax={xMax} yMax={yMax} getXAxisData={getXAxisData} getYAxisData={getYAxisData} animatedChart={animatedChart} visible={animatedChart} />
           </>
         )}
 
         {/* Line chart */}
-        {config.visualizationType !== 'Bar' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && (
+        {config.visualizationType !== 'Bar' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Scatter Plot' && (
           <>
             <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} />}
       </svg>
-      <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} html={true} type='light' arrowColor='rgba(0,0,0,0)' className='tooltip' />
+      <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} />
     </ErrorBoundary>
   )

package/src/components/{PairedBarChart.tsx → PairedBarChart.jsx}

@@ -1,26 +1,21 @@
 import React, { useContext } from 'react'
 import { Group } from '@visx/group'
 import { Bar } from '@visx/shape'
-import { scaleLinear, scaleBand } from '@visx/scale'
+import { scaleLinear } from '@visx/scale'
 import { Text } from '@visx/text'
 
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 import chroma from 'chroma-js'
 
-interface PairedBarChartProps {
-  width: number
-  height: number
-}
-
-const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
-  const { config, colorScale, transformedData, formatNumber, seriesHighlight } = useContext<any>(Context)
+const PairedBarChart = ({ width, height, originalWidth }) => {
+  const { config, colorScale, transformedData: data, formatNumber, seriesHighlight, getTextWidth } = useContext(ConfigContext)
 
   if (!config || config?.series?.length < 2) return
 
-  const data = transformedData
-  const adjustedWidth = width
-  const adjustedHeight = height
-  const halfWidth = adjustedWidth / 2
+  const borderWidth = config.barHasBorder === 'true' ? 1 : 0
+  const halfWidth = width / 2
+  const fontSize = { small: 16, medium: 18, large: 20 }
+  const offset = 1.02 // Offset of the left bar from the Axis
 
   const groupOne = {
     parentKey: config.dataDescription.seriesKey,
@@ -45,15 +40,10 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
   }
 
   const xScale = scaleLinear({
-    domain: [0, Math.max(groupOne.max, groupTwo.max)],
+    domain: [0, Math.max(groupOne.max * offset, groupTwo.max * 1.1)],
     range: [0, halfWidth]
   })
 
-  const yScale = scaleBand({
-    range: [0, adjustedHeight],
-    domain: data.map(d => d[config.dataDescription.xKey])
-  })
-
   // Set label color
   let labelColor = '#000000'
 
@@ -65,11 +55,13 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
     groupTwo.labelColor = '#FFFFFF'
   }
 
+  const label = config.yAxis.label ? `${config.yAxis.label}: ` : ''
+
   const dataTipOne = d => {
     return `<p>
 				${config.dataDescription.seriesKey}: ${groupOne.dataKey}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
-				${config.dataDescription.valueKey}: ${formatNumber(d[groupOne.dataKey])} 
+				${label}${formatNumber(d[groupOne.dataKey])}
 			</p>`
   }
 
@@ -77,13 +69,10 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
     return `<p>
 				${config.dataDescription.seriesKey}: ${groupTwo.dataKey}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
-				${config.dataDescription.valueKey}: ${formatNumber(d[groupTwo.dataKey])}
+				${label}${formatNumber(d[groupTwo.dataKey])}
 			</p>`
   }
-
-  const isLabelBelowBar = config.yAxis.labelPlacement === 'Below Bar'
-  const isLabelOnYAxis = config.yAxis.labelPlacement === 'On Date/Category Axis'
-  const isLabelMissing = !config.yAxis.labelPlacement
+  console.log(config)
 
   return (
     width > 0 && (
@@ -96,7 +85,7 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
 				}
 				`}
         </style>
-        <svg id='cdc-visualization__paired-bar-chart' width={width} height={height} viewBox={`0 0 ${width} ${height}`} role='img' tabIndex={0}>
+        <svg id='cdc-visualization__paired-bar-chart' width={originalWidth} height={height} viewBox={`0 0 ${width + Number(config.runtime.yAxis.size)} ${height}`} role='img' tabIndex={0}>
           <Group top={0} left={Number(config.xAxis.size)}>
             {data
               .filter(item => config.series[0].dataKey === groupOne.dataKey)
@@ -105,26 +94,14 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
                 let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(config.series[0].dataKey) !== -1
                 let barWidth = xScale(d[config.series[0].dataKey])
                 let barHeight = Number(config.barHeight) ? Number(config.barHeight) : 25
-                let barPadding = barHeight
-                config.barHeight = Number(config.barHeight) ? Number(config.barHeight) : 25
-                config.barPadding = config.barHeight
-
-                if (config.orientation === 'horizontal') {
-                  if (isLabelBelowBar || isLabelMissing || isLabelOnYAxis) {
-                    if (barHeight < 40) {
-                      config.barPadding = 40
-                    } else {
-                      config.barPadding = barPadding
-                    }
-                  } else {
-                    config.barPadding = barPadding / 2
-                  }
-                }
-
-                config.height = Number(barHeight) * data.length + config.barPadding * data.length
-
-                let y = yScale([d[config.dataDescription.xKey]]) + config.barHeight / 1.5
-                y = Number(config.barPadding) > 20 ? (y += Number(config.barPadding / 3.5) - config.barHeight / 2) : (y += 0)
+                // update bar Y to give dynamic Y when user applyes BarSpace
+                let y = 0
+                y = index !== 0 ? (Number(config.barSpace) + barHeight + borderWidth) * index : y
+                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 textFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
                   <>
@@ -138,15 +115,15 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
                         width={xScale(d[config.series[0].dataKey])}
                         height={barHeight}
                         fill={groupOne.color}
-                        data-tip={dataTipOne(d)}
-                        data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                        data-tooltip-html={dataTipOne(d)}
+                        data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                         stroke='#333'
-                        strokeWidth={config.barBorderThickness || 1}
+                        strokeWidth={borderWidth}
                         opacity={transparentBar ? 0.5 : 1}
                         display={displayBar ? 'block' : 'none'}
                       />
                       {config.yAxis.displayNumbersOnBar && displayBar && (
-                        <Text textAnchor={barWidth < 100 ? 'end' : 'start'} verticalAnchor='middle' x={halfWidth - (barWidth < 100 ? barWidth + 10 : barWidth - 5)} y={y + config.barHeight / 2} fill={barWidth > 100 ? groupOne.labelColor : '#000'}>
+                        <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])}
                         </Text>
                       )}
@@ -156,38 +133,28 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
               })}
             {data
               .filter(item => config.series[1].dataKey === groupTwo.dataKey)
-              .map(d => {
+              .map((d, index) => {
                 let barWidth = xScale(d[config.series[1].dataKey])
                 let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(config.series[1].dataKey) === -1
                 let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(config.series[1].dataKey) !== -1
-
-                let barHeight = config.barHeight ? config.barHeight : 25
-                let barPadding = barHeight
-                config.barHeight = Number(config.barHeight)
-
-                let y = yScale([d[config.dataDescription.xKey]]) + config.barHeight / 1.5
-                y = Number(config.barPadding) > 20 ? (y += Number(config.barPadding / 3.5) - config.barHeight / 2) : (y += 0)
-
-                if (config.orientation === 'horizontal') {
-                  if (isLabelBelowBar || isLabelMissing || isLabelOnYAxis) {
-                    if (barHeight < 40) {
-                      config.barPadding = 40
-                    } else {
-                      config.barPadding = barPadding
-                    }
-                  } else {
-                    config.barPadding = barPadding / 2
-                  }
-                }
+                let barHeight = config.barHeight ? Number(config.barHeight) : 25
+                // update bar Y to give dynamic Y when user applyes BarSpace
+                let y = 0
+                y = index !== 0 ? (Number(config.barSpace) + barHeight + borderWidth) * index : y
+                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 isTextFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
                   <>
                     <style>
                       {`
-								.bar-${groupTwo.dataKey}-${d[config.xAxis.dataKey]} {
-						  			transform-origin: ${halfWidth}px ${y}px
-								}
-							`}
+                      .bar-${groupTwo.dataKey}-${d[config.xAxis.dataKey]} {
+                          transform-origin: ${halfWidth}px ${y}px
+                      }
+							      `}
                     </style>
                     <Group key={`group-${groupTwo.dataKey}-${d[config.dataDescription.xKey]}`} className='horizontal'>
                       <Bar
@@ -199,15 +166,15 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
                         width={xScale(d[config.series[1].dataKey])}
                         height={barHeight}
                         fill={groupTwo.color}
-                        data-tip={dataTipTwo(d)}
-                        data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                        strokeWidth={config.barBorderThickness || 1}
+                        data-tooltip-html={dataTipTwo(d)}
+                        data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                        strokeWidth={borderWidth}
                         stroke='#333'
                         opacity={transparentBar ? 0.5 : 1}
                         display={displayBar ? 'block' : 'none'}
                       />
                       {config.yAxis.displayNumbersOnBar && displayBar && (
-                        <Text textAnchor={barWidth < 100 ? 'start' : 'end'} verticalAnchor='middle' x={halfWidth + (barWidth < 100 ? barWidth + 10 : barWidth - 10)} y={y + config.barHeight / 2} fill={barWidth > 100 ? groupTwo.labelColor : '#000'}>
+                        <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])}
                         </Text>
                       )}

package/src/components/{PieChart.tsx → PieChart.jsx}

@@ -1,6 +1,6 @@
 import React, { useContext, useState, useEffect, useRef } from 'react'
 import { animated, useTransition, interpolate } from 'react-spring'
-import ReactTooltip from 'react-tooltip'
+import { Tooltip as ReactTooltip } from 'react-tooltip'
 
 import Pie, { ProvidedProps, PieArcDatum } from '@visx/shape/lib/shapes/Pie'
 import chroma from 'chroma-js'
@@ -8,23 +8,22 @@ import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import useIntersectionObserver from './useIntersectionObserver'
 
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
-// react-spring transition definitions
-type PieStyles = { startAngle: number; endAngle: number }
-
-const enterUpdateTransition = ({ startAngle, endAngle }: PieArcDatum<any>) => ({
+const enterUpdateTransition = ({ startAngle, endAngle }) => ({
   startAngle,
   endAngle
 })
 
 export default function PieChart() {
-  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels } = useContext<any>(Context)
+  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels, cleanData } = useContext(ConfigContext)
+
+  const cleanedData = cleanData(data, config.xAxis.dataKey);
 
-  const [filteredData, setFilteredData] = useState<any>(undefined)
-  const [animatedPie, setAnimatePie] = useState<boolean>(false)
+  const [filteredData, setFilteredData] = useState(undefined)
+  const [animatedPie, setAnimatePie] = useState(false)
 
   const triggerRef = useRef()
   const dataRef = useIntersectionObserver(triggerRef, {
@@ -49,17 +48,9 @@ export default function PieChart() {
     }
   }, [dataRef?.isIntersecting, config.animate])
 
-  type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
-    animate?: boolean
-    getKey: (d: PieArcDatum<Datum>) => string
-    delay?: number
-  }
 
-  function AnimatedPie<Datum>({ arcs, path, getKey }: AnimatedPieProps<Datum>) {
-    const transitions = useTransition<PieArcDatum<Datum>, PieStyles>(
-      arcs,
-      getKey,
-      // @ts-ignore react-spring doesn't like this overload
+  function AnimatedPie({ arcs, path, getKey }) {
+    const transitions = useTransition( arcs, getKey,
       {
         from: enterUpdateTransition,
         enter: enterUpdateTransition,
@@ -70,7 +61,7 @@ export default function PieChart() {
 
     return (
       <>
-        {transitions.map(({ item: arc, props, key }: { item: PieArcDatum<Datum>; props: PieStyles; key: string }) => {
+        {transitions.map(({ item: arc, props, key }) => {
           let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(arc.data[config.runtime.yAxis.dataKey])}` : formatNumber(arc.data[config.runtime.yAxis.dataKey])
           let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${arc.data[config.runtime.xAxis.dataKey]}` : arc.data[config.runtime.xAxis.dataKey]
 
@@ -79,11 +70,9 @@ export default function PieChart() {
             ${xAxisTooltip}<br />
             Percent: ${Math.round((((arc.endAngle - arc.startAngle) * 180) / Math.PI / 360) * 100) + '%'}
             `
-
           return (
             <Group key={key} style={{ opacity: config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) === -1 ? 0.5 : 1 }}>
               <animated.path
-                // compute interpolated path d attribute from intermediate angle values
                 d={interpolate([props.startAngle, props.endAngle], (startAngle, endAngle) =>
                   path({
                     ...arc,
@@ -92,13 +81,13 @@ export default function PieChart() {
                   })
                 )}
                 fill={colorScale(arc.data[config.runtime.xAxis.dataKey])}
-                data-tip={tooltip}
-                data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                data-tooltip-html={tooltip}
+                data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
               />
             </Group>
           )
         })}
-        {transitions.map(({ item: arc, key }: { item: PieArcDatum<Datum>; props: PieStyles; key: string }) => {
+        {transitions.map(({ item: arc, key }) => {
           const [centroidX, centroidY] = path.centroid(arc)
           const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1
 
@@ -150,21 +139,17 @@ export default function PieChart() {
     }
   }, [seriesHighlight])
 
-  useEffect(() => {
-    ReactTooltip.rebuild()
-  })
-
   return (
     <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 || data} pieValue={d => d[config.runtime.yAxis.dataKey]} pieSortValues={() => -1} innerRadius={radius - donutThickness} outerRadius={radius}>
-            {pie => <AnimatedPie<any> {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]} />}
+          <Pie data={filteredData || cleanedData} 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>
       </svg>
       <div ref={triggerRef} />
-      <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} html={true} type='light' arrowColor='rgba(0,0,0,0)' className='tooltip' />
+      <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' />
     </ErrorBoundary>
   )
 }