@cdc/chart 4.23.2 → 4.23.3

package/src/components/BarChart.jsx

@@ -84,7 +84,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
 
     // return new updated bars/groupes
     return barsArr.map((bar, i) => {
-      // set bars Y dynamycly to handle space between bars
+      // set bars Y dynamically to handle space between bars
       let y = 0
       bar.index !== 0 && (y = (barHeight + barSpace + labelHeight) * i)
 
@@ -105,13 +105,13 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
         }
       })
     }
-  }, [config, updateConfig])
+  }, [config, updateConfig]) // eslint-disable-line
 
   useEffect(() => {
     if (config.isLollipopChart === false && config.barHeight < 25) {
       updateConfig({ ...config, barHeight: 25 })
     }
-  }, [config.isLollipopChart])
+  }, [config.isLollipopChart]) // eslint-disable-line
 
   useEffect(() => {
     if (config.visualizationSubType === 'horizontal') {
@@ -120,7 +120,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
         orientation: 'horizontal'
       })
     }
-  }, [])
+  }, []) // eslint-disable-line
 
   useEffect(() => {
     if (config.barStyle === 'lollipop' && !config.isLollipopChart) {
@@ -129,7 +129,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
     if (isRounded || config.barStyle === 'flat') {
       updateConfig({ ...config, isLollipopChart: false })
     }
-  }, [config.barStyle])
+  }, [config.barStyle]) // eslint-disable-line
 
   return (
     <ErrorBoundary component='BarChart'>
@@ -147,7 +147,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                   let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
                   // tooltips
                   const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.xAxis.dataKey])) : data[bar.index][config.runtime.xAxis.dataKey]
-                  const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0)
+                  const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
                   const style = applyRadius(barStack.index, yAxisValue < 0)
                   let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                   const xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
@@ -161,7 +161,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                   ${xAxisTooltip}
                     </div>`
                   return (
-                    <>
+                    <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
                       <style>
                         {`
                          #barStack${barStack.index}-${bar.index} rect,
@@ -173,7 +173,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       </style>
                       <Group key={`bar-stack-${barStack.index}-${bar.index}`} id={`barStack${barStack.index}-${bar.index}`} className='stack vertical'>
                         <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barThickness * bar.index + offset} y={bar.y - 5} fill={bar.color} textAnchor='middle'>
-                          {formatNumber(bar.bar ? bar.bar.data[bar.key] : 0)}
+                          {yAxisValue}
                         </Text>
                         <foreignObject
                           key={`bar-stack-${barStack.index}-${bar.index}`}
@@ -188,7 +188,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                           data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                         ></foreignObject>
                       </Group>
-                    </>
+                    </Group>
                   )
                 })
               )
@@ -208,7 +208,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                     config.barHeight = Number(config.barHeight)
                     let labelColor = '#000000'
                     // tooltips
-                    const xAxisValue = formatNumber(data[bar.index][bar.key])
+                    const xAxisValue = formatNumber(data[bar.index][bar.key], 'left')
                     const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.originalXAxis.dataKey])) : data[bar.index][config.runtime.originalXAxis.dataKey]
                     const style = applyRadius(barStack.index, yAxisValue < 0)
                     let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
@@ -264,7 +264,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                             </Text>
                           )}
 
-                          {displayNumbersOnBar && textWidth + 50 < bar.width && (
+                          {displayNumbersOnBar && textWidth < bar.width && (
                             <Text
                               display={displayBar ? 'block' : 'none'}
                               x={bar.x + barStack.bars[bar.index].width / 2} // padding
@@ -280,7 +280,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                                 }
                               }}
                             >
-                              {formatNumber(data[bar.index][bar.key])}
+                              {xAxisValue}
                             </Text>
                           )}
                         </Group>
@@ -313,6 +313,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                   <Group
                     className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${config.orientation}`}
                     key={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`}
+                    id={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`}
                     top={config.runtime.horizontal ? barGroup.y : 0}
                     left={config.runtime.horizontal ? 0 : (xMax / barGroups.length) * barGroup.index}
                   >
@@ -341,7 +342,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       }
                       if (config.legend.colorCode && config.series.length === 1) barColor = palette[barGroup.index]
 
-                      let yAxisValue = formatNumber(bar.value)
+                      let yAxisValue = formatNumber(bar.value, 'left')
                       let xAxisValue = config.runtime[section].type === 'date' ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey])) : data[barGroup.index][config.runtime.originalXAxis.dataKey]
 
                       if (config.runtime.horizontal) {
@@ -379,7 +380,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                         </div>`
 
                       return (
-                        <>
+                        <Group key={`${barGroup.index}--${index}--${orientation}`}>
                           {/* This feels gross but inline transition was not working well*/}
                           <style>
                             {`
@@ -446,7 +447,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                             ;
                             {orientation === 'vertical' && (
                               <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barWidth * (bar.index + 0.5) + offset} y={barY - 5} fill={barColor} textAnchor='middle'>
-                                {formatNumber(bar.value)}
+                                {yAxisValue}
                               </Text>
                             )}
                             ;
@@ -478,7 +479,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                               </rect>
                             )}
                           </Group>
-                        </>
+                        </Group>
                       )
                     })}
                   </Group>
@@ -488,25 +489,48 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
 
             {Object.keys(config.confidenceKeys).length > 0
               ? data.map(d => {
-                  let xPos = xScale(getXAxisData(d))
-                  let upperPos = yScale(getYAxisData(d, config.confidenceKeys.lower))
-                  let lowerPos = yScale(getYAxisData(d, config.confidenceKeys.upper))
+                  let xPos, yPos
+                  let upperPos
+                  let lowerPos
                   let tickWidth = 5
-
-                  return (
-                    <path
-                      key={`confidence-interval-${d[config.runtime.originalXAxis.dataKey]}`}
-                      stroke='#333'
-                      strokeWidth='2px'
-                      d={`
-                  M${xPos - tickWidth} ${upperPos}
-                  L${xPos + tickWidth} ${upperPos}
-                  M${xPos} ${upperPos}
-                  L${xPos} ${lowerPos}
-                  M${xPos - tickWidth} ${lowerPos}
-                  L${xPos + tickWidth} ${lowerPos}`}
-                    />
-                  )
+                  // DEV-3264 Make Confidence Intervals work on horizontal bar charts
+                  if (orientation === 'horizontal') {
+                    yPos = yScale(getXAxisData(d)) - 0.75 * config.barHeight
+                    upperPos = xScale(getYAxisData(d, config.confidenceKeys.upper))
+                    lowerPos = xScale(getYAxisData(d, config.confidenceKeys.lower))
+                    return (
+                      <path
+                        key={`confidence-interval-h-${yPos}-${d[config.runtime.originalXAxis.dataKey]}`}
+                        stroke='#333'
+                        strokeWidth='px'
+                        d={`
+                        M${lowerPos} ${yPos - tickWidth}
+                        L${lowerPos} ${yPos + tickWidth}
+                        M${lowerPos} ${yPos}
+                        L${upperPos} ${yPos}
+                        M${upperPos} ${yPos - tickWidth}
+                        L${upperPos} ${yPos + tickWidth} `}
+                      />
+                    )
+                  } else {
+                    xPos = xScale(getXAxisData(d))
+                    upperPos = yScale(getYAxisData(d, config.confidenceKeys.lower))
+                    lowerPos = yScale(getYAxisData(d, config.confidenceKeys.upper))
+                    return (
+                      <path
+                        key={`confidence-interval-v-${yPos}-${d[config.runtime.originalXAxis.dataKey]}`}
+                        stroke='#333'
+                        strokeWidth='px'
+                        d={`
+                        M${xPos - tickWidth} ${upperPos}
+                        L${xPos + tickWidth} ${upperPos}
+                        M${xPos} ${upperPos}
+                        L${xPos} ${lowerPos}
+                        M${xPos - tickWidth} ${lowerPos}
+                        L${xPos + tickWidth} ${lowerPos}`}
+                      />
+                    )
+                  }
                 })
               : ''}
           </Group>

package/src/components/BoxPlot.jsx

@@ -1,14 +1,12 @@
-import React, { useContext } from 'react'
+import React, { useContext, useEffect } from 'react'
 import { BoxPlot } from '@visx/stats'
 import { Group } from '@visx/group'
-import { scaleBand, scaleLinear } from '@visx/scale'
 import ConfigContext from '../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 
 const CoveBoxPlot = ({ xScale, yScale }) => {
-  const { transformedData: data, config } = useContext(ConfigContext)
-
+  const { config, setConfig } = useContext(ConfigContext)
   const boxWidth = xScale.bandwidth()
   const constrainedWidth = Math.min(40, boxWidth)
   const color_0 = colorPalettesChart[config?.palette][0] ? colorPalettesChart[config?.palette][0] : '#000'
@@ -24,6 +22,19 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
       ${config.boxplot.labels.median}: ${d.columnMedian}
     `
   }
+
+  useEffect(() => {
+    if (config.legend.hide === false) {
+      setConfig({
+        ...config,
+        legend: {
+          ...config.legend,
+          hide: true
+        }
+      })
+    }
+  }, []) // eslint-disable-line
+
   return (
     <ErrorBoundary component='BoxPlot'>
       <Group className='boxplot' key={`boxplot-group`}>
@@ -31,17 +42,20 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
           const offset = boxWidth - constrainedWidth
           const radius = 4
           return (
-            <>
-              {config.boxplot.plotNonOutlierValues && d.nonOutlierValues.map(value => <circle cx={xScale(d.columnCategory) + config.yAxis.size + boxWidth / 2} cy={yScale(value)} r={radius} fill={'#ccc'} style={{ opacity: 1, fillOpacity: 1, stroke: 'black' }} />)}
+            <Group key={`boxplotplot-${i}`}>
+              {config.boxplot.plotNonOutlierValues &&
+                d.nonOutlierValues.map((value, index) => {
+                  return <circle cx={xScale(d.columnCategory) + Number(config.yAxis.size) + boxWidth / 2} cy={yScale(value)} r={radius} fill={'#ccc'} style={{ opacity: 1, fillOpacity: 1, stroke: 'black' }} key={`boxplot-${i}--circle-${index}`} />
+                })}
               <BoxPlot
                 data-left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
                 key={`box-plot-${i}`}
-                min={d.columnMin}
-                max={d.columnMax}
-                left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
-                firstQuartile={d.columnFirstQuartile}
-                thirdQuartile={d.columnThirdQuartile}
-                median={d.columnMedian}
+                min={Number(d.columnMin)}
+                max={Number(d.columnMax)}
+                left={Number(xScale(d.columnCategory)) + Number(config.yAxis.size) + offset / 2 + 0.5}
+                firstQuartile={Number(d.columnFirstQuartile)}
+                thirdQuartile={Number(d.columnThirdQuartile)}
+                median={Number(d.columnMedian)}
                 boxWidth={constrainedWidth}
                 fill={color_0}
                 fillOpacity={0.5}
@@ -63,8 +77,7 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
                   style: {
                     stroke: 'black',
                     strokeWidth: config.boxplot.borders === 'true' ? 1 : 0
-                  },
-                  'data-tooltip-html': 'cool'
+                  }
                 }}
                 maxProps={{
                   style: {
@@ -77,7 +90,7 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
                   'data-tooltip-id': tooltip_id
                 }}
               />
-            </>
+            </Group>
           )
         })}
       </Group>

package/src/components/DataTable.jsx

@@ -12,10 +12,7 @@ import ConfigContext from '../ConfigContext'
 import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
 
 export default function DataTable() {
-  const { rawData, transformedData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes, imageId } = useContext(ConfigContext)
-
-  // Debugging.
-  // if (config.visualizationType === 'Box Plot') return null
+  const { rawData, transformedData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes } = useContext(ConfigContext)
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
   const [tableExpanded, setTableExpanded] = useState(config.table.expanded)
@@ -57,7 +54,7 @@ export default function DataTable() {
       config.visualizationType === 'Pie'
         ? []
         : config.visualizationType === 'Box Plot'
-          ? [
+        ? [
             {
               Header: 'Measures',
               Cell: props => {
@@ -76,7 +73,7 @@ export default function DataTable() {
                     columnThirdQuartile: labels.q3,
                     columnOutliers: labels.outliers,
                     values: labels.values,
-                    columnCount: labels.count,
+                    columnTotal: labels.total,
                     columnSd: 'Standard Deviation',
                     nonOutlierValues: 'Non Outliers'
                   }
@@ -90,7 +87,7 @@ export default function DataTable() {
               }
             }
           ]
-          : [
+        : [
             {
               Header: '',
               Cell: ({ row }) => {
@@ -105,8 +102,8 @@ export default function DataTable() {
                             ? colorScale(seriesLabel)
                             : // dynamic legend
                             config.legend.dynamicLegend
-                              ? colorPalettes[config.palette][row.index]
-                              : // fallback
+                            ? colorPalettes[config.palette][row.index]
+                            : // fallback
                               '#000'
                         }
                       />
@@ -122,12 +119,13 @@ export default function DataTable() {
       data.forEach((d, index) => {
         const resolveTableHeader = () => {
           if (config.runtime[section].type === 'date') return formatDate(parseDate(d[config.runtime.originalXAxis.dataKey]))
+          if (config.runtime[section].type === 'continuous') return numberFormatter(d[config.runtime.originalXAxis.dataKey], 'bottom')
           return d[config.runtime.originalXAxis.dataKey]
         }
         const newCol = {
           Header: resolveTableHeader(),
           Cell: ({ row }) => {
-            return <>{numberFormatter(d[row.original])}</>
+            return <>{numberFormatter(d[row.original], 'left')}</>
           },
           id: `${d[config.runtime.originalXAxis.dataKey]}--${index}`,
           canSort: true
@@ -149,7 +147,7 @@ export default function DataTable() {
               if (Number(props.row.id) === 3) return plot.columnMedian
               if (Number(props.row.id) === 4) return plot.columnFirstQuartile
               if (Number(props.row.id) === 5) return plot.columnMin
-              if (Number(props.row.id) === 6) return plot.columnCount
+              if (Number(props.row.id) === 6) return plot.columnTotal
               if (Number(props.row.id) === 7) return plot.columnSd
               if (Number(props.row.id) === 8) return plot.columnMean
               if (Number(props.row.id) === 9) return plot.columnOutliers.length > 0 ? plot.columnOutliers.toString() : '-'
@@ -162,12 +160,12 @@ export default function DataTable() {
           canSort: false
         }
 
-        newTableColumns.push(newCol)
+        return newTableColumns.push(newCol)
       })
     }
 
     return newTableColumns
-  }, [config, colorScale])
+  }, [config, colorScale]) // eslint-disable-line
 
   // prettier-ignore
   const tableData = useMemo(() => (
@@ -176,7 +174,7 @@ export default function DataTable() {
       : config.visualizationType === 'Box Plot'
         ? Object.entries(config.boxplot.tableData[0])
         : config.runtime.seriesKeys),
-    [config.runtime.seriesKeys])
+    [config.runtime.seriesKeys]) // eslint-disable-line
 
   // Change accessibility label depending on expanded status
   useEffect(() => {
@@ -201,8 +199,13 @@ export default function DataTable() {
     }),
     []
   )
-
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns: tableColumns, data: tableData, defaultColumn }, useSortBy, useBlockLayout, useResizeColumns)
+
+  // sort continuous x axis scaling for data tables, ie. xAxis should read 1,2,3,4,5
+  if (config.xAxis.type === 'continuous' && headerGroups) {
+    data.sort((a, b) => a[config.xAxis.dataKey] - b[config.xAxis.dataKey])
+  }
+
   return (
     <ErrorBoundary component='DataTable'>
       <CoveMediaControls.Section classes={['download-links']}>
@@ -224,7 +227,7 @@ export default function DataTable() {
             }
           }}
         >
-          <Icon display={tableExpanded ? 'minus' : 'plus'} base/>
+          <Icon display={tableExpanded ? 'minus' : 'plus'} base />
           {config.table.label}
         </div>
         <div className='table-container' hidden={!tableExpanded} style={{ maxHeight: config.table.limitHeight && `${config.table.height}px`, overflowY: 'scroll' }}>
@@ -272,7 +275,7 @@ export default function DataTable() {
               })}
             </tbody>
           </table>
-          {config.regions && config.regions.length > 0 ? (
+          {config.regions && config.regions.length > 0 && !config.visualizationType === 'Box Plot' ? (
             <table className='region-table data-table'>
               <caption className='visually-hidden'>Table of the highlighted regions in the visualization</caption>
               <thead>
@@ -284,6 +287,7 @@ export default function DataTable() {
               </thead>
               <tbody>
                 {config.regions.map((region, index) => {
+                  if (config.visualizationType === 'Box Plot') return false
                   if (!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
 
                   return (

package/src/components/DeviationBar.jsx

@@ -0,0 +1,191 @@
+import { Line } from '@visx/shape'
+import { Group } from '@visx/group'
+import { useContext, useEffect } from 'react'
+import ConfigContext from '../ConfigContext'
+import { Text } from '@visx/text'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import chroma from 'chroma-js'
+
+// create function to position text based where bar is located left/or right
+function getTextProps(isLollipopChart, textFits, lollipopShapeSize, fill) {
+  if (isLollipopChart) {
+    return {
+      right: {
+        textAnchor: 'start',
+        dx: lollipopShapeSize + 6,
+        fill: '#000000'
+      },
+      left: {
+        textAnchor: 'end',
+        dx: -lollipopShapeSize,
+        fill: '#000000'
+      }
+    }
+  } else {
+    return {
+      right: {
+        textAnchor: textFits ? 'end' : 'start',
+        dx: textFits ? -6 : 6,
+        fill: textFits ? fill : '#000000'
+      },
+      left: {
+        textAnchor: textFits ? 'start' : 'end',
+        dx: textFits ? 6 : -6,
+        fill: textFits ? fill : '#000000'
+      }
+    }
+  }
+}
+
+export function DeviationBar({ height, xScale }) {
+  const { transformedData: data, config, formatNumber, twoColorPalette, getTextWidth, updateConfig, parseDate, formatDate } = useContext(ConfigContext)
+
+  if (!config || config?.series?.length !== 1 || config.orientation !== 'horizontal') return
+
+  const { barStyle, tipRounding, roundingStyle, twoColor } = config
+
+  const radius = roundingStyle === 'standard' ? '8px' : roundingStyle === 'shallow' ? '5px' : roundingStyle === 'finger' ? '15px' : '0px'
+  const fontSize = { small: 16, medium: 18, large: 20 }
+  const isRounded = config.barStyle === 'rounded'
+  const target = Number(config.xAxis.target)
+  const seriesKey = config.series[0].dataKey
+  const maxVal = Number(xScale.domain()[1])
+  const hasNegativeValues = data.some(d => d[seriesKey] < 0)
+  const shouldShowTargetLine = hasNegativeValues || target > 0 || xScale.domain()[0] < 0
+  const borderWidth = config.barHasBorder === 'true' ? 1 : 0
+  const lollipopBarHeight = config.lollipopSize === 'large' ? 7 : config.lollipopSize === 'medium' ? 6 : 5
+  const lollipopShapeSize = config.lollipopSize === 'large' ? 14 : config.lollipopSize === 'medium' ? 12 : 10
+
+  const targetX = Math.max(xScale(0), Math.min(xScale(target), xScale(maxVal * 1.05)))
+
+  const applyRadius = barPosition => {
+    if (barPosition === undefined || barPosition === null || barStyle !== 'rounded') return
+    let style = {}
+    if (barPosition === 'left') {
+      style = { borderRadius: `${radius} 0 0 ${radius}` }
+    }
+
+    if (barPosition === 'right') {
+      style = { borderRadius: `0 ${radius} ${radius} 0` }
+    }
+    if (tipRounding === 'full') {
+      style = { borderRadius: radius }
+    }
+
+    return style
+  }
+
+  const targetLabel = {
+    calculate: function () {
+      const firstBarValue = data[0][seriesKey]
+      const barPosition = firstBarValue < target ? 'left' : 'right'
+      const label = `${config.xAxis.targetLabel} ${formatNumber(config.xAxis.target || 0, 'left')}`
+      const labelWidth = getTextWidth(label, `bold ${fontSize[config.fontSize]}px sans-serif`)
+      let labelY = config.isLollipopChart ? lollipopBarHeight / 2 : Number(config.barHeight) / 2
+      let paddingX = 0
+      let labelX = 0
+      let showLabel = false
+
+      if (barPosition === 'right') {
+        paddingX = -10
+        showLabel = labelWidth - paddingX < targetX
+        labelX = targetX - labelWidth
+      }
+
+      if (barPosition === 'left') {
+        paddingX = 10
+        showLabel = xScale(maxVal) - targetX > labelWidth + paddingX
+        labelX = targetX
+      }
+
+      this.text = label
+      this.y = labelY
+      this.x = labelX
+      this.padding = paddingX
+      this.showLabel = config.xAxis.showTargetLabel ? showLabel : false
+    }
+  }
+  targetLabel.calculate()
+
+  useEffect(() => {
+    if (config.barStyle === 'lollipop' && !config.isLollipopChart) {
+      updateConfig({ ...config, isLollipopChart: true })
+    }
+    if (isRounded || config.barStyle === 'flat') {
+      updateConfig({ ...config, isLollipopChart: false })
+    }
+  }, [config.barStyle])
+
+  return (
+    <ErrorBoundary component='Deviation Bar'>
+      <Group left={Number(config.xAxis.size)}>
+        {data.map((d, index) => {
+          const barValue = Number(d[seriesKey])
+          const barHeight = config.isLollipopChart ? lollipopBarHeight : Number(config.barHeight)
+          const barSpace = Number(config.barSpace) || 15
+          const barWidth = Math.abs(xScale(barValue) - targetX)
+          const barBaseX = xScale(barValue)
+          const barX = barValue > target ? targetX : barBaseX
+          const barPosition = barValue < target ? 'left' : 'right'
+
+          // update bar Y to give dynamic Y when user applyes BarSpace
+          let barY = 0
+          barY = index !== 0 ? (barSpace + barHeight + borderWidth) * index : barY
+          const totalheight = (barSpace + barHeight + borderWidth) * data.length
+          config.heights.horizontal = totalheight
+
+          // text,labels postiions
+          const textWidth = getTextWidth(formatNumber(barValue, 'left'), `normal ${fontSize[config.fontSize]}px sans-serif`)
+          const textFits = textWidth < barWidth - 6
+          const textX = barBaseX
+          const textY = barY + barHeight / 2
+
+          // lollipop shapes
+          const circleX = barBaseX
+          const circleY = barY + barHeight / 2
+          const squareX = barBaseX
+          const squareY = barY - barHeight / 2
+          const borderRadius = applyRadius(barPosition)
+          // colors
+          const [leftColor, rightColor] = twoColorPalette[twoColor.palette]
+          const barColor = { left: leftColor, right: rightColor }
+          const isBarColorDark = chroma.contrast('#000000', barColor[barPosition]) < 4.9
+          const fill = isBarColorDark ? '#FFFFFF' : '#000000'
+
+          let textProps = getTextProps(config.isLollipopChart, textFits, lollipopShapeSize, fill)
+
+          // tooltips
+          const xAxisValue = formatNumber(barValue, 'left')
+          const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[index][config.runtime.originalXAxis.dataKey])) : data[index][config.runtime.originalXAxis.dataKey]
+          let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
+          let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
+          const tooltip = `<div>
+          ${yAxisTooltip}<br />
+          ${xAxisTooltip}
+            </div>`
+
+          return (
+            <Group key={`deviation-bar-${config.orientation}-${seriesKey}-${index}`}>
+              <foreignObject x={barX} y={barY} width={barWidth} height={barHeight} style={{ border: `${borderWidth}px solid #333`, backgroundColor: barColor[barPosition], ...borderRadius }} data-tooltip-html={tooltip} data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} />
+              {config.yAxis.displayNumbersOnBar && (
+                <Text verticalAnchor='middle' x={textX} y={textY} {...textProps[barPosition]}>
+                  {formatNumber(d[seriesKey], 'left')}
+                </Text>
+              )}
+
+              {config.isLollipopChart && config.lollipopShape === 'circle' && <circle cx={circleX} cy={circleY} r={lollipopShapeSize / 2} fill={barColor[barPosition]} style={{ filter: 'unset', opacity: 1 }} />}
+              {config.isLollipopChart && config.lollipopShape === 'square' && <rect x={squareX} y={squareY} width={lollipopShapeSize} height={lollipopShapeSize} fill={barColor[barPosition]} style={{ opacity: 1, filter: 'unset' }}></rect>}
+            </Group>
+          )
+        })}
+        {targetLabel.showLabel && (
+          <Text fontWeight='bold' dx={targetLabel.padding} verticalAnchor='middle' x={targetLabel.x} y={targetLabel.y}>
+            {targetLabel.text}
+          </Text>
+        )}
+
+        {shouldShowTargetLine && <Line from={{ x: targetX, y: 0 }} to={{ x: targetX, y: height }} stroke='#333' strokeWidth={2} />}
+      </Group>
+    </ErrorBoundary>
+  )
+}