@cdc/chart 4.25.3 → 4.25.6

package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../../ConfigContext'
-import { useBarChart } from '../../../hooks/useBarChart'
 import { BarStackHorizontal } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { getColorContrast, getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 // types
@@ -12,9 +12,10 @@ import BarChartContext, { type BarChartContextValues } from './context'
 import { type ChartContext } from '../../../types/ChartContext'
 
 import createBarElement from '@cdc/core/components/createBarElement'
+import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 
 const BarChartStackedHorizontal = () => {
-  const { yMax, yScale, xScale } = useContext<BarChartContextValues>(BarChartContext)
+  const { yMax, yScale, xScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
 
   // prettier-ignore
   const {
@@ -29,8 +30,17 @@ const BarChartStackedHorizontal = () => {
     transformedData: data
   } = useContext<ChartContext>(ConfigContext)
 
-  // prettier-ignore
-  const { barBorderWidth, displayNumbersOnBar, getAdditionalColumn, hoveredBar, isHorizontal, isLabelBelowBar, onMouseLeaveBar, onMouseOverBar, updateBars, barStackedSeriesKeys } = useBarChart()
+  const {
+    barBorderWidth,
+    displayNumbersOnBar,
+    getAdditionalColumn,
+    hoveredBar,
+    isHorizontal,
+    isLabelBelowBar,
+    onMouseLeaveBar,
+    onMouseOverBar,
+    barStackedSeriesKeys
+  } = barChart
 
   const { orientation, visualizationSubType } = config
   return (
@@ -49,7 +59,7 @@ const BarChartStackedHorizontal = () => {
         >
           {barStacks =>
             barStacks.map(barStack =>
-              updateBars(barStack.bars).map((bar, index) => {
+              getHorizontalBarHeights(config, barStack.bars).map((bar, index) => {
                 const transparentBar =
                   config.legend.behavior === 'highlight' &&
                   seriesHighlight.length > 0 &&
@@ -60,8 +70,8 @@ const BarChartStackedHorizontal = () => {
                   seriesHighlight.indexOf(bar.key) !== -1
                 config.barHeight = Number(config.barHeight)
                 let barColor = colorScale(config.runtime.seriesLabels[bar.key])
-                let labelColor = getContrastColor('#000', barColor)
-                let constrast = getColorContrast('#000', barColor)
+                let labelColor = getContrastColor(APP_FONT_COLOR, barColor)
+                let constrast = getColorContrast(APP_FONT_COLOR, barColor)
                 const contrastLevel = 7
                 if (constrast < contrastLevel) {
                   labelColor = '#fff'
@@ -100,7 +110,7 @@ const BarChartStackedHorizontal = () => {
                         height: bar.height,
                         x: bar.x,
                         y: bar.y,
-                        onMouseOver: () => onMouseOverBar(yAxisValue, bar.key),
+                        onMouseOver: e => onMouseOverBar(yAxisValue, bar.key, e, data),
                         onMouseLeave: onMouseLeaveBar,
                         tooltipHtml: tooltip,
                         tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,

package/src/components/BarChart/components/BarChart.StackedVertical.tsx

@@ -1,6 +1,5 @@
 import React, { useContext, useState } from 'react'
 import ConfigContext from '../../../ConfigContext'
-import { useBarChart } from '../../../hooks/useBarChart'
 import { BarStack } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
@@ -12,22 +11,23 @@ import createBarElement from '@cdc/core/components/createBarElement'
 
 const BarChartStackedVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
-  const { xScale, yScale, seriesScale, xMax, yMax } = useContext(BarChartContext)
-  const { transformedData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } =
-    useContext(ConfigContext)
+  const { xScale, yScale, seriesScale, xMax, yMax, barChart } = useContext(BarChartContext)
   const {
     isHorizontal,
     barBorderWidth,
-    applyRadius,
     hoveredBar,
     getAdditionalColumn,
     onMouseLeaveBar,
     onMouseOverBar,
     barStackedSeriesKeys
-  } = useBarChart()
+  } = barChart
+  const { transformedData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } =
+    useContext(ConfigContext)
+
   const { orientation } = config
 
-  const data = config.brush?.active && config.brush.data?.length ? config.brush.data : transformedData
+  let data = transformedData
+
   const isDateAxisType = config.runtime.xAxis.type === 'date-time' || config.runtime.xAxis.type === 'date'
   const isDateTimeScaleAxisType = config.runtime.xAxis.type === 'date-time'
 
@@ -98,7 +98,7 @@ const BarChartStackedVertical = () => {
                         height: bar.height,
                         x: barX,
                         y: bar.y,
-                        onMouseOver: () => onMouseOverBar(xAxisValue, bar.key),
+                        onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data),
                         onMouseLeave: onMouseLeaveBar,
                         tooltipHtml: tooltip,
                         tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -3,7 +3,6 @@ import React, { useContext, useState } from 'react'
 import ConfigContext from '../../../ConfigContext'
 import BarChartContext, { type BarChartContextValues } from './context'
 // Local hooks
-import { useBarChart } from '../../../hooks/useBarChart'
 import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
 import { getBarConfig, testZeroValue } from '../helpers'
 // VisX library imports
@@ -16,6 +15,7 @@ import Regions from '../../Regions'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import isNumber from '@cdc/core/helpers/isNumber'
 import createBarElement from '@cdc/core/components/createBarElement'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 // Third party libraries
 import chroma from 'chroma-js'
 // Types
@@ -24,14 +24,9 @@ import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 
 export const BarChartVertical = () => {
-  const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph } =
+  const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph, barChart } =
     useContext<BarChartContextValues>(BarChartContext)
-
-  const [barWidth, setBarWidth] = useState(0)
-  const [totalBarsInGroup, setTotalBarsInGroup] = useState(0)
-  // prettier-ignore
   const {
-    // prettier-ignore
     assignColorsToValues,
     barBorderWidth,
     getAdditionalColumn,
@@ -42,17 +37,28 @@ export const BarChartVertical = () => {
     onMouseLeaveBar,
     onMouseOverBar,
     section
-  } = useBarChart()
+  } = barChart
 
-  // prettier-ignore
-  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig } = useContext<ChartContext>(ConfigContext)
+  const [barWidth, setBarWidth] = useState(0)
+  const [totalBarsInGroup, setTotalBarsInGroup] = useState(0)
+
+  const {
+    colorScale,
+    config,
+    dashboardConfig,
+    tableData,
+    formatDate,
+    formatNumber,
+    parseDate,
+    seriesHighlight,
+    setSharedFilter,
+    transformedData
+  } = useContext<ChartContext>(ConfigContext)
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
   const root = document.documentElement
 
-  const coolGray90 = getComputedStyle(root).getPropertyValue('--cool-gray-90')
-
   let data = transformedData
   // check if user add suppression
   const isSuppressionActive = config.preliminaryData.some(pd => pd.value && pd.type === 'suppression')
@@ -60,12 +66,12 @@ export const BarChartVertical = () => {
   if (isSuppressionActive) {
     data = tableData
   }
-  // if brush active use brush data (filtered|excluded) not cleaned
-  if (brushConfig.data.length) {
-    data = brushConfig.data
-  }
 
-  const hasConfidenceInterval = _.every(config.confidenceKeys, key => key !== '')
+  const hasConfidenceInterval =
+    config.confidenceKeys.upper &&
+    config.confidenceKeys.lower &&
+    config.confidenceKeys.upper !== '' &&
+    config.confidenceKeys.lower !== ''
 
   const _data = getBarData(config, data, hasConfidenceInterval)
   return (
@@ -144,7 +150,14 @@ export const BarChartVertical = () => {
                   <li class="tooltip-body ">${tooltipBody}</li>
                   ${additionalColTooltip ? '<li class="tooltip-body ">' + additionalColTooltip + '</li>' : ''}
                     </li></ul>`
-
+                  const { barHeight, isSuppressed, getBarY, absentDataLabel } = getBarConfig({
+                    bar,
+                    defaultBarHeight,
+                    config,
+                    barWidth,
+                    isVertical: true,
+                    yAxisValue
+                  })
                   // configure colors
                   let labelColor = '#000000'
                   labelColor = HighLightedBarUtils.checkFontColor(yAxisValue, highlightedBarValues, labelColor) // Set if background is transparent'
@@ -153,6 +166,12 @@ export const BarChartVertical = () => {
                   const isHighlightedBar = highlightedBarValues?.includes(xAxisValue)
                   const highlightedBarColor = getHighlightedBarColorByValue(xAxisValue)
                   const highlightedBar = getHighlightedBarByValue(xAxisValue)
+                  const hideGroup =
+                    (!isNumber(bar.value) && !config.general.showMissingDataLabel) ||
+                    (String(bar.value) === '0' && !config.general.showZeroValueData)
+                      ? 'none'
+                      : 'block' // hide bar group if no value or zero value
+
                   const borderColor = isHighlightedBar
                     ? highlightedBarColor
                     : config.barHasBorder === 'true'
@@ -162,20 +181,11 @@ export const BarChartVertical = () => {
                     ? highlightedBar.borderWidth
                     : config.isLollipopChart
                     ? 0
-                    : config.barHasBorder === 'true'
+                    : config.barHasBorder === 'true' && !absentDataLabel && !isSuppressed
                     ? barBorderWidth
                     : 0
 
-                  const { barHeight, isSuppressed, getBarY, getAbsentDataLabel } = getBarConfig({
-                    bar,
-                    defaultBarHeight,
-                    config,
-                    barWidth,
-                    isVertical: true
-                  })
-
-                  const absentDataLabel = getAbsentDataLabel(yAxisValue)
-                  const barDefaultLabel = isSuppressed || !config.labels ? '' : yAxisValue
+                  const barDefaultLabel = isSuppressed || absentDataLabel || !config.labels ? '' : yAxisValue
                   const barY = getBarY(defaultBarY, yScale(scaleVal))
                   const displaylollipopShape = testZeroValue(bar.value) ? 'none' : 'block'
                   const getBarBackgroundColor = (barColor: string, filteredOutColor?: string): string => {
@@ -242,8 +252,10 @@ export const BarChartVertical = () => {
                   )
                   // End Confidence Interval Variables
 
+                  const BAR_LABEL_PADDING = 10
+
                   return (
-                    <Group key={`${barGroup.index}--${index}`}>
+                    <Group display={hideGroup} key={`${barGroup.index}--${index}`}>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
                         {createBarElement({
                           config: config,
@@ -257,7 +269,7 @@ export const BarChartVertical = () => {
                           height: barHeight,
                           x: barX,
                           y: barY,
-                          onMouseOver: () => onMouseOverBar(xAxisValue, bar.key),
+                          onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data),
                           onMouseLeave: onMouseLeaveBar,
                           tooltipHtml: tooltip,
                           tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
@@ -275,6 +287,7 @@ export const BarChartVertical = () => {
                             cursor: dashboardConfig ? 'pointer' : 'default'
                           }
                         })}
+
                         {config.preliminaryData.map((pd, index) => {
                           // check if user selected column
                           const selectedSuppressionColumn = !pd.column || pd.column === bar.key
@@ -318,12 +331,11 @@ export const BarChartVertical = () => {
                             </Text>
                           )
                         })}
-
                         <Text // prettier-ignore
                           display={displayBar ? 'block' : 'none'}
                           opacity={transparentBar ? 0.5 : 1}
                           x={hasConfidenceInterval ? barX + barWidth : barX + barWidth / 2}
-                          y={barY - 5}
+                          y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
                         >
@@ -333,14 +345,13 @@ export const BarChartVertical = () => {
                           display={displayBar ? 'block' : 'none'}
                           opacity={transparentBar ? 0.5 : 1}
                           x={barX + barWidth / 2}
-                          y={barY - 5}
+                          y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
                           fontSize={config.isLollipopChart ? null : barWidth / 2}
                         >
                           {absentDataLabel}
                         </Text>
-
                         {config.isLollipopChart && config.lollipopShape === 'circle' && (
                           <circle
                             display={displaylollipopShape}
@@ -373,7 +384,7 @@ export const BarChartVertical = () => {
                         {hasConfidenceInterval && bar.value !== undefined && datum && (
                           <path
                             key={`confidence-interval-v-${datum[config.runtime.originalXAxis.dataKey]}`}
-                            stroke={coolGray90}
+                            stroke={APP_FONT_COLOR}
                             strokeWidth='px'
                             d={`M${xPos - tickWidth} ${upperPos}
                                 L${xPos + tickWidth} ${upperPos}

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { MouseEventHandler, useContext, useState } from 'react'
 
 // visx
 import { Group } from '@visx/group'
@@ -9,8 +9,21 @@ import BarChartType from './BarChartType'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../../../ConfigContext'
 import BarChartContext from './context'
+import { useBarChart } from '../helpers/useBarChart'
+import { PositionScale } from '@visx/shape/lib/types'
 
-const BarChart = ({
+type BarChartProps = {
+  xScale: PositionScale
+  yScale: PositionScale
+  seriesScale: PositionScale
+  xMax: number
+  yMax: number
+  handleTooltipMouseOver: MouseEventHandler<SVGRectElement>
+  handleTooltipMouseOff: MouseEventHandler<SVGRectElement>
+  handleTooltipClick: MouseEventHandler<SVGRectElement>
+}
+
+const BarChart: React.FC<BarChartProps> = ({
   xScale,
   yScale,
   seriesScale,
@@ -20,7 +33,9 @@ const BarChart = ({
   handleTooltipMouseOff,
   handleTooltipClick
 }) => {
-  const { transformedData: data, config, convertLineToBarGraph } = useContext(ConfigContext)
+  const configContext = useContext(ConfigContext)
+  const { transformedData: data, config, convertLineToBarGraph } = configContext
+  const barChart = useBarChart(handleTooltipMouseOver, handleTooltipMouseOff, configContext)
 
   const contextValues = {
     xScale,
@@ -28,7 +43,8 @@ const BarChart = ({
     xMax,
     yMax,
     seriesScale,
-    convertLineToBarGraph
+    convertLineToBarGraph,
+    barChart
   }
 
   return (
@@ -46,7 +62,9 @@ const BarChart = ({
             height={Number(yMax)}
             fill={'transparent'}
             fillOpacity={0.05}
-            onMouseMove={e => handleTooltipMouseOver(e, data)}
+            onMouseMove={e => {
+              handleTooltipMouseOver(e, data)
+            }}
             onMouseOut={handleTooltipMouseOff}
             onClick={e => handleTooltipClick(e, data)}
           />

package/src/components/BarChart/components/context.tsx

@@ -1,3 +1,4 @@
+import { PositionScale } from '@visx/shape/lib/types'
 import { createContext } from 'react'
 
 const BarChartContext = createContext(null)
@@ -5,10 +6,27 @@ const BarChartContext = createContext(null)
 export type BarChartContextValues = {
   xMax: number
   yMax: number
-  xScale: Function
-  yScale: Function
+  xScale: PositionScale
+  yScale: PositionScale
   seriesScale: Function
   convertLineToBarGraph: boolean
+  barChart: {
+    assignColorsToValues: Function
+    barBorderWidth: number
+    getAdditionalColumn: Function
+    getHighlightedBarByValue: Function
+    getHighlightedBarColorByValue: Function
+    lollipopBarWidth: number
+    lollipopShapeSize: number
+    onMouseLeaveBar: Function
+    onMouseOverBar: Function
+    section: string
+    hoveredBar: string
+    isHorizontal: boolean
+    isLabelBelowBar: boolean
+    displayNumbersOnBar: boolean
+    barStackedSeriesKeys: string[]
+  }
 }
 
 export default BarChartContext

package/src/components/BarChart/helpers/getBarHeights.ts

@@ -0,0 +1,47 @@
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
+import _ from 'lodash'
+import { ChartConfig } from '../../../types/ChartConfig'
+
+export const getHorizontalBarHeights = <T>(config: Partial<ChartConfig>, bars: (T & { index })[]) => {
+  const isHorizontal = config.orientation === 'horizontal'
+
+  const isStacked = config.visualizationSubType === 'stacked'
+
+  let barHeight
+  if (!isStacked) {
+    const stackCount = config.runtime.seriesKeys.length
+    if (config.isLollipopChart) {
+      const lollipopSizes = {
+        large: 7,
+        medium: 6,
+        small: 5
+      }
+
+      const lollipopBarWidth = lollipopSizes[config.lollipopSize] || 5
+      barHeight = lollipopBarWidth * stackCount
+    } else {
+      barHeight = config.barHeight * stackCount
+    }
+  } else {
+    barHeight = config.barHeight
+  }
+
+  const labelHeight = APP_FONT_SIZE * 1.2
+  const labelSpace = config.yAxis.labelPlacement === 'Below Bar' ? labelHeight : 0
+
+  const totalBarHeight = barHeight + labelSpace + Number(config.barSpace)
+
+  if (isHorizontal) {
+    // calculate height of container based height, space and fontSize of labels
+    const totalHeight = bars.length * totalBarHeight
+    if (!config.heights) config.heights = {}
+    config.heights.horizontal = totalHeight
+  }
+
+  // return new updated bars/groupes
+  return bars.map((bar, i) => {
+    // set bars Y dynamically to handle space between bars
+    const y = bar.index === 0 ? 0 : _.round(totalBarHeight * i)
+    return { ...bar, y, height: barHeight }
+  })
+}

package/src/components/BarChart/helpers/index.ts

@@ -9,6 +9,7 @@ interface BarConfigProps {
   config: { [key: string]: any }
   barWidth: number
   isVertical: boolean
+  yAxisValue: number
 }
 
 // Function to create bar width based on suppression status and missing data label
@@ -18,7 +19,8 @@ export const getBarConfig = ({
   defaultBarWidth,
   config,
   barWidth,
-  isVertical
+  isVertical,
+  yAxisValue
 }: BarConfigProps) => {
   const heightMini = 3 /// height of small bars aka suppressed/NA/Zero valued
   let barHeight = defaultBarHeight
@@ -97,7 +99,8 @@ export const getBarConfig = ({
       return labelFits && isVertical ? label : !isVertical ? label : ''
     }
   }
-  return { barWidthHorizontal, barHeight, isSuppressed, showMissingDataLabel, getBarY, getAbsentDataLabel }
+  const absentDataLabel = getAbsentDataLabel(yAxisValue)
+  return { barWidthHorizontal, barHeight, isSuppressed, showMissingDataLabel, getBarY, absentDataLabel }
 }
 
 export const testZeroValue = value => {

package/src/components/BarChart/helpers/tests/getBarHeights.test.ts

@@ -0,0 +1,83 @@
+import { getHorizontalBarHeights } from '../getBarHeights'
+
+describe('getHorizontalBarHeights', () => {
+  it('should calculate bar heights for non-stacked horizontal bars', () => {
+    const config = {
+      orientation: 'horizontal',
+      visualizationSubType: 'grouped',
+      runtime: { seriesKeys: ['A', 'B'] },
+      barHeight: 10,
+      barSpace: 5,
+      yAxis: { labelPlacement: 'Above Bar' }
+    }
+
+    const bars = [{ index: 0 }, { index: 1 }]
+
+    const result = getHorizontalBarHeights(config, bars)
+
+    expect(result).toEqual([
+      { index: 0, y: 0, height: 20 },
+      { index: 1, y: 25, height: 20 }
+    ])
+  })
+
+  it('should calculate bar heights for stacked horizontal bars', () => {
+    const config = {
+      orientation: 'horizontal',
+      visualizationSubType: 'stacked',
+      barHeight: 15,
+      barSpace: 5,
+      yAxis: { labelPlacement: 'Above Bar' }
+    }
+
+    const bars = [{ index: 0 }, { index: 1 }]
+
+    const result = getHorizontalBarHeights(config, bars)
+
+    expect(result).toEqual([
+      { index: 0, y: 0, height: 15 },
+      { index: 1, y: 20, height: 15 }
+    ])
+  })
+
+  it('should include label space when labelPlacement is Below Bar', () => {
+    const config = {
+      orientation: 'horizontal',
+      visualizationSubType: 'grouped',
+      runtime: { seriesKeys: ['A'] },
+      barHeight: 10,
+      barSpace: 5,
+      yAxis: { labelPlacement: 'Below Bar' }
+    }
+
+    const bars = [{ index: 0 }, { index: 1 }]
+
+    const result = getHorizontalBarHeights(config, bars)
+
+    expect(result).toEqual([
+      { index: 0, y: 0, height: 10 },
+      { index: 1, y: 37, height: 10 }
+    ])
+  })
+
+  it('should handle lollipop chart bar heights', () => {
+    const config = {
+      orientation: 'horizontal',
+      visualizationSubType: 'grouped',
+      runtime: { seriesKeys: ['A', 'B', 'C'] },
+      isLollipopChart: true,
+      lollipopSize: 'medium',
+      barSpace: 5,
+      yAxis: { labelPlacement: 'Above Bar' }
+    }
+
+    const bars = [{ index: 0 }, { index: 1 }]
+
+    const result = getHorizontalBarHeights(config, bars)
+
+    expect(result).toEqual([
+      { index: 0, y: 0, height: 18 },
+      { index: 1, y: 23, height: 18 }
+    ])
+  })
+})

package/src/{hooks → components/BarChart/helpers}/useBarChart.ts

@@ -1,12 +1,12 @@
 import React, { useContext, useEffect, useState } from 'react'
-import ConfigContext, { ChartDispatchContext } from '../ConfigContext'
+import { ChartDispatchContext } from '../../../ConfigContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
-import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
-export const useBarChart = () => {
-  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight, seriesHighlight } =
-    useContext(ConfigContext)
-  const dispatch = useContext(ChartDispatchContext)
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
+
+export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, configContext) => {
+  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, seriesHighlight } = configContext
   const { orientation } = config
+  const dispatch = useContext(ChartDispatchContext)
   const [hoveredBar, setHoveredBar] = useState(null)
 
   const isHorizontal = orientation === 'horizontal'
@@ -123,43 +123,6 @@ export const useBarChart = () => {
     const barColor = palette[barIndex]
     return barColor
   }
-  const updateBars = defaultBars => {
-    // function updates  stacked && regular && lollipop horizontal bars
-    if (config.visualizationType !== 'Bar' && !isHorizontal) return defaultBars
-
-    const barsArr = [...defaultBars]
-    let barHeight
-
-    const heights = {
-      stacked: config.barHeight,
-      lollipop: lollipopBarWidth
-    }
-
-    if (!isStacked) {
-      barHeight = heights[config.isLollipopChart ? 'lollipop' : 'stacked'] * stackCount
-    } else {
-      barHeight = heights.stacked
-    }
-
-    const labelHeight = isLabelBelowBar ? appFontSize * 1.2 : 0
-    let barSpace = Number(config.barSpace)
-
-    // calculate height of container based height, space and fontSize of labels
-    let totalHeight = barsArr.length * (barHeight + labelHeight + barSpace)
-
-    if (isHorizontal) {
-      config.heights.horizontal = totalHeight
-    }
-
-    // return new updated bars/groupes
-    return barsArr.map((bar, i) => {
-      // set bars Y dynamically to handle space between bars
-      let y = 0
-      bar.index !== 0 && (y = (barHeight + barSpace + labelHeight) * i)
-
-      return { ...bar, y: y, height: barHeight }
-    })
-  }
 
   const getHighlightedBarColorByValue = value => {
     const match = config?.highlightedBarValues.find(item => {
@@ -226,17 +189,18 @@ export const useBarChart = () => {
     return additionalTooltipItems
   }
 
-  const onMouseOverBar = (categoryValue, barKey) => {
+  const onMouseOverBar = (categoryValue, barKey, event, data) => {
     if (config.legend.highlightOnHover && config.legend.behavior === 'highlight' && barKey) {
       dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [barKey] })
     }
-
+    handleTooltipMouseOver(event, data)
     setHoveredBar(categoryValue)
   }
   const onMouseLeaveBar = () => {
     if (config.legend.highlightOnHover && config.legend.behavior === 'highlight') {
       dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [] })
     }
+    handleTooltipMouseOff()
   }
 
   return {
@@ -256,7 +220,6 @@ export const useBarChart = () => {
     barStackedSeriesKeys,
     hasMultipleSeries,
     applyRadius,
-    updateBars,
     assignColorsToValues,
     getHighlightedBarColorByValue,
     getHighlightedBarByValue,