@cdc/chart 4.24.2 → 4.24.4

package/src/components/AreaChart/components/AreaChart.Stacked.jsx

@@ -3,6 +3,7 @@ import React, { useContext, memo } from 'react'
 // cdc
 import ConfigContext from '../../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 
 // visx & d3
 import * as allCurves from '@visx/curve'
@@ -20,7 +21,7 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
 
   const handleDateCategory = value => {
     if (config.xAxis.type === 'categorical') return xScale(value)
-    if (config.xAxis.type === 'date') {
+    if (isDateScale(config.xAxis)) {
       let date = new Date(value)
       return xScale(date)
     }

package/src/components/AreaChart/components/AreaChart.jsx

@@ -3,6 +3,7 @@ import React, { useContext, memo } from 'react'
 // cdc
 import ConfigContext from '../../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 
 // visx & d3
 import * as allCurves from '@visx/curve'
@@ -19,7 +20,7 @@ const AreaChart = props => {
   if (!data) return
 
   const handleX = d => {
-    return (config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    return (isDateScale(config.xAxis) ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
   }
 
   const handleY = (d, index, s = undefined) => {

package/src/components/BarChart/components/BarChart.Horizontal.tsx

@@ -6,19 +6,21 @@ import { Text } from '@visx/text'
 import { BarGroup } from '@visx/shape'
 import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
 import { FaStar } from 'react-icons/fa'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 // third party
 import chroma from 'chroma-js'
 import BarChartContext, { BarChartContextValues } from './context'
 import { ChartContext } from '../../../types/ChartContext'
 
+import createBarElement from '@cdc/core/components/createBarElement'
+
 export const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
   const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter, isNumber, getTextWidth, getYAxisData, getXAxisData } = useContext<ChartContext>(ConfigContext)
   const {
     isHorizontal,
     barBorderWidth,
-    applyRadius,
     updateBars,
     assignColorsToValues,
     section,
@@ -76,6 +78,10 @@ export const BarChartHorizontal = () => {
                   let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
                   let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
                   let barHeight = config.barHeight
+                  let numbericBarHeight = parseInt(!config.isLollipopChart ? barHeight : lollipopBarWidth)
+                  if (isNaN(numbericBarHeight)) {
+                    numbericBarHeight = 25
+                  }
                   let barY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(scaleVal)
                   const barXBase = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(scaleVal)
                   const barWidthHorizontal = Math.abs(xScale(bar.value) - xScale(scaleVal))
@@ -112,7 +118,6 @@ export const BarChartHorizontal = () => {
 
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
-                  const borderRadius = applyRadius(newIndex)
 
                   let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${xAxisValue}` : xAxisValue
                   const additionalColTooltip = getAdditionalColumn(hoveredBar)
@@ -130,39 +135,17 @@ export const BarChartHorizontal = () => {
                   barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor) // Color code by category
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
-                  const isHighlightedBar = highlightedBarValues?.includes(yAxisValue)
-                  const highlightedBarColor = getHighlightedBarColorByValue(yAxisValue)
-                  const highlightedBar = getHighlightedBarByValue(yAxisValue)
+                  const isHighlightedBar = highlightedBarValues?.includes(xAxisValue)
+                  const highlightedBarColor = getHighlightedBarColorByValue(xAxisValue)
+                  const highlightedBar = getHighlightedBarByValue(xAxisValue)
                   const borderColor = isHighlightedBar ? highlightedBarColor : config.barHasBorder === 'true' ? '#000' : 'transparent'
                   const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
                   const displaylollipopShape = config.suppressedData.some(d => bar.key === d.column && bar.value === d.value) ? 'none' : 'block'
                   // update label color
-                  if (barColor && labelColor) {
-                    if (chroma.contrast(labelColor, barColor) < 4.9) {
-                      labelColor = textFits ? '#FFFFFF' : '#000000'
-                    }
-                  }
-                  const getTop = () => {
-                    if (Number(barHeight) < 20) return -4
-                    if (Number(barHeight) < 25) return -1
-                    if (Number(barHeight) < 30) return 2
-                    if (Number(barHeight) < 35) return 4
-                    if (Number(barHeight) < 40) return 5
-                    if (Number(barHeight) < 50) return 9
-                    if (Number(barHeight) < 60) return 10
-                    else {
-                      return 12
-                    }
-                  }
-                  const iconStyle: { [key: string]: any } = {
-                    position: 'absolute',
-                    top: getTop(),
-                    left: suppresedBarWidth * 1.2
+                  if (barColor && labelColor && textFits) {
+                    labelColor = getContrastColor('#000', barColor)
                   }
 
-                  if (config.isLollipopChart) {
-                    iconStyle.top = -9
-                  }
                   const background = () => {
                     if (isRegularLollipopColor) return barColor
                     if (isTwoToneLollipopColor) return chroma(barColor).brighten(1)
@@ -170,39 +153,42 @@ export const BarChartHorizontal = () => {
                     return barColor
                   }
 
-                  const finalStyle = {
-                    background: background(),
-                    borderColor,
-                    borderStyle: 'solid',
-                    borderWidth,
-                    width: barWidth,
-                    transition: 'all 0.2s linear',
-                    height: !config.isLollipopChart ? barHeight : lollipopBarWidth,
-                    ...borderRadius
-                  }
-
                   return (
                     <Group key={`${barGroup.index}--${index}`}>
-                      {/* This feels gross but inline transition was not working well*/}
-                      <style>
-                        {`
-                        .linear #barGroup${barGroup.index} div,
-                        .Combo #barGroup${barGroup.index} div {
-                          transform-origin: 0 ${barY + barHeight}px;
-                        }
-                      `}
-                      </style>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
-                        <foreignObject
+                        {createBarElement({
+                          config: config,
+                          index: newIndex,
+                          id: `barGroup${barGroup.index}`,
+                          background: background(),
+                          borderColor,
+                          borderStyle: 'solid',
+                          borderWidth: `${borderWidth}px`,
+                          width: barWidth,
+                          height: numbericBarHeight,
+                          x: barX,
+                          y: barHeight * bar.index,
+                          onMouseOver: () => onMouseOverBar(xAxisValue, bar.key),
+                          onMouseLeave: onMouseLeaveBar,
+                          tooltipHtml: tooltip,
+                          tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
+                          onClick: e => {
+                            e.preventDefault()
+                            if (setSharedFilter) {
+                              bar[config.xAxis.dataKey] = yAxisValue
+                              setSharedFilter(config.uid, bar)
+                            }
+                          },
+                          styleOverrides: {
+                            transformOrigin: `0 ${barY + barHeight}px`,
+                            opacity: transparentBar ? 0.2 : 1,
+                            display: displayBar ? 'block' : 'none'
+                          }
+                        })}
+                        <g
+                          transform={`translate(${barX},${barHeight * bar.index})`}
                           onMouseOver={() => onMouseOverBar(xAxisValue, bar.key)}
                           onMouseLeave={onMouseLeaveBar}
-                          id={`barGroup${barGroup.index}`}
-                          key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
-                          x={barX}
-                          style={{ overflow: 'visible', ...finalStyle }}
-                          y={barHeight * bar.index}
-                          height={!config.isLollipopChart ? barHeight : lollipopBarWidth}
-                          width={barWidth}
                           opacity={transparentBar ? 0.2 : 1}
                           display={displayBar ? 'block' : 'none'}
                           data-tooltip-html={tooltip}
@@ -215,11 +201,8 @@ export const BarChartHorizontal = () => {
                             }
                           }}
                         >
-                          <div style={{ position: 'relative' }}>
-                            <div style={iconStyle}>{getIcon(bar, barWidth)}</div>
-                            <div style={{ ...finalStyle }}></div>
-                          </div>
-                        </foreignObject>
+                          {getIcon(bar, barWidth)}
+                        </g>
 
                         {!config.isLollipopChart && displayNumbersOnBar && (
                           <Text // prettier-ignore
@@ -262,7 +245,7 @@ export const BarChartHorizontal = () => {
                           <circle
                             display={displaylollipopShape}
                             cx={bar.y}
-                            cy={0 + lollipopBarWidth / 2}
+                            cy={barHeight * bar.index + lollipopBarWidth / 2}
                             r={lollipopShapeSize / 2}
                             fill={barColor}
                             key={`circle--${bar.index}`}

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

@@ -4,14 +4,14 @@ import { useBarChart } from '../../../hooks/useBarChart'
 import { BarStackHorizontal } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
-
-// third party
-import chroma from 'chroma-js'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 // types
 import BarChartContext, { type BarChartContextValues } from './context'
 import { type ChartContext } from '../../../types/ChartContext'
 
+import createBarElement from '@cdc/core/components/createBarElement'
+
 const BarChartStackedHorizontal = () => {
   const { yMax, yScale, xScale } = useContext<BarChartContextValues>(BarChartContext)
 
@@ -30,40 +30,26 @@ const BarChartStackedHorizontal = () => {
   } = useContext<ChartContext>(ConfigContext)
 
   // prettier-ignore
-  const {
-    applyRadius,
-    barBorderWidth,
-    displayNumbersOnBar,
-    fontSize,
-    getAdditionalColumn,
-    hoveredBar,
-    isHorizontal,
-    isLabelBelowBar,
-    onMouseLeaveBar,
-    onMouseOverBar,
-    updateBars
-  } = useBarChart()
+  const { barBorderWidth, displayNumbersOnBar, fontSize, getAdditionalColumn, hoveredBar, isHorizontal, isLabelBelowBar, onMouseLeaveBar, onMouseOverBar, updateBars, barStackedSeriesKeys } = useBarChart()
 
   const { orientation, visualizationSubType } = config
-
   return (
     config.visualizationSubType === 'stacked' &&
     isHorizontal && (
       <>
-        <BarStackHorizontal data={data} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} height={yMax} y={d => d[config.runtime.yAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale} offset='none'>
+        <BarStackHorizontal data={data} keys={barStackedSeriesKeys} height={yMax} y={d => d[config.runtime.yAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale} offset='none'>
           {barStacks =>
             barStacks.map(barStack =>
               updateBars(barStack.bars).map((bar, index) => {
-                let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
-                let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
+                const transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
+                const displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
                 config.barHeight = Number(config.barHeight)
-                let labelColor = '#000000'
+                const labelColor = getContrastColor('#000', colorScale(config.runtime.seriesLabels[bar.key]))
                 // tooltips
                 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)
-                let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
-                let textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                const yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
+                const textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
 
                 const additionalColTooltip = getAdditionalColumn(hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
@@ -73,46 +59,40 @@ const BarChartStackedHorizontal = () => {
                   <li class="tooltip-body ">${additionalColTooltip}</li>
                     </li></ul>`
 
-                if (chroma.contrast(labelColor, colorScale(config.runtime.seriesLabels[bar.key])) < 4.9) {
-                  labelColor = '#FFFFFF'
-                }
-
                 return (
                   <>
-                    <style>
-                      {`
-                         #barStack${barStack.index}-${bar.index} rect,
-                         #barStack${barStack.index}-${bar.index} foreignObject div{
-                          animation-delay: ${barStack.index * 0.5}s;
-                          transform-origin: ${bar.x}px
-                        }
-                      `}
-                    </style>
                     <Group key={index} id={`barStack${barStack.index}-${bar.index}`} className='stack horizontal'>
-                      <foreignObject
-                        onMouseOver={() => onMouseOverBar(yAxisValue, bar.key)}
-                        onMouseLeave={onMouseLeaveBar}
-                        key={`barstack-horizontal-${barStack.index}-${bar.index}-${index}`}
-                        className={`animated-chart group ${animatedChart ? 'animated' : ''}`}
-                        x={bar.x}
-                        y={bar.y}
-                        style={{ transition: 'all 0.2s linear' }}
-                        width={bar.width}
-                        height={bar.height}
-                        opacity={transparentBar ? 0.2 : 1}
-                        display={displayBar ? 'block' : 'none'}
-                        data-tooltip-html={tooltip}
-                        data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                        onClick={e => {
+                      {createBarElement({
+                        config: config,
+                        seriesHighlight,
+                        index: barStack.index,
+                        className: `animated-chart group ${animatedChart ? 'animated' : ''}`,
+                        background: colorScale(config.runtime.seriesLabels[bar.key]),
+                        borderColor: '#333',
+                        borderStyle: 'solid',
+                        borderWidth: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px`,
+                        width: bar.width,
+                        height: bar.height,
+                        x: bar.x,
+                        y: bar.y,
+                        onMouseOver: () => onMouseOverBar(yAxisValue, bar.key),
+                        onMouseLeave: onMouseLeaveBar,
+                        tooltipHtml: tooltip,
+                        tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
+                        onClick: e => {
                           e.preventDefault()
                           if (setSharedFilter) {
                             bar[config.xAxis.dataKey] = xAxisValue
                             setSharedFilter(config.uid, bar)
                           }
-                        }}
-                      >
-                        <div style={{ width: bar.width, height: bar.height, background: colorScale(config.runtime.seriesLabels[bar.key]), border: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`, ...style }}></div>
-                      </foreignObject>
+                        },
+                        styleOverrides: {
+                          animationDelay: `${barStack.index * 0.5}s`,
+                          transformOrigin: `${bar.x}px 0`,
+                          opacity: transparentBar ? 0.2 : 1,
+                          display: displayBar ? 'block' : 'none'
+                        }
+                      })}
 
                       {orientation === 'horizontal' && visualizationSubType === 'stacked' && isLabelBelowBar && barStack.index === 0 && !config.yAxis.hideLabel && (
                         <Text

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

@@ -6,12 +6,15 @@ import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import BarChartContext from './context'
 import Regions from '../../Regions'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+
+import createBarElement from '@cdc/core/components/createBarElement'
 
 const BarChartStackedVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
   const { xScale, yScale, xMax, yMax } = useContext(BarChartContext)
   const { transformedData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } = useContext(ConfigContext)
-  const { isHorizontal, barBorderWidth, applyRadius, hoveredBar, getAdditionalColumn, onMouseLeaveBar, onMouseOverBar } = useBarChart()
+  const { isHorizontal, barBorderWidth, applyRadius, hoveredBar, getAdditionalColumn, onMouseLeaveBar, onMouseOverBar, barStackedSeriesKeys } = useBarChart()
   const { orientation } = config
   const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
 
@@ -19,14 +22,14 @@ const BarChartStackedVertical = () => {
     config.visualizationSubType === 'stacked' &&
     !isHorizontal && (
       <>
-        <BarStack data={data} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} x={d => d[config.runtime.xAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale}>
+        <BarStack data={data} keys={barStackedSeriesKeys} x={d => d[config.runtime.xAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale}>
           {barStacks =>
             barStacks.reverse().map(barStack =>
               barStack.bars.map(bar => {
                 let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
                 let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
-                let barThickness = config.xAxis.type === 'date' && config.xAxis.sortDates ? (config.barThickness * (xScale.range()[1] - xScale.range()[0])) : xMax / barStack.bars.length
-                let barThicknessAdjusted = barThickness * (config.xAxis.type === 'date' && config.xAxis.sortDates ? 1 : (config.barThickness || 0.8))
+                let barThickness = config.xAxis.type === 'date-time' ? config.barThickness * (xScale.range()[1] - xScale.range()[0]) : xMax / barStack.bars.length
+                let barThicknessAdjusted = barThickness * (config.xAxis.type === 'date-time' ? 1 : config.barThickness || 0.8)
                 let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
                 // tooltips
                 const rawXValue = bar.bar.data[config.runtime.xAxis.dataKey]
@@ -48,50 +51,40 @@ const BarChartStackedVertical = () => {
 
                 return (
                   <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
-                    <style>
-                      {`
-                           #barStack${barStack.index}-${bar.index} rect,
-                           #barStack${barStack.index}-${bar.index} foreignObject div{
-                            animation-delay: ${barStack.index * 0.5}s;
-                            transform-origin: ${barThicknessAdjusted / 2}px ${bar.y + bar.height}px
-                          }
-                        `}
-                    </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={barX + barWidth / 2} y={bar.y - 5} fill={'#000'} textAnchor='middle'>
                         {yAxisValue}
                       </Text>
-                      <foreignObject
-                        onMouseOver={() => onMouseOverBar(xAxisValue, bar.key)}
-                        onMouseLeave={onMouseLeaveBar}
-                        key={`bar-stack-${barStack.index}-${bar.index}`}
-                        x={barX}
-                        y={bar.y}
-                        width={barThicknessAdjusted}
-                        height={bar.height}
-                        display={displayBar ? 'block' : 'none'}
-                        data-tooltip-html={tooltip}
-                        data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                        onClick={e => {
+                      {createBarElement({
+                        config: config,
+                        seriesHighlight,
+                        index: barStack.index,
+                        background: colorScale(config.runtime.seriesLabels[bar.key]),
+                        borderColor: '#333',
+                        borderStyle: 'solid',
+                        borderWidth: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px`,
+                        width: barThicknessAdjusted,
+                        height: bar.height,
+                        x: barX,
+                        y: bar.y,
+                        onMouseOver: () => onMouseOverBar(xAxisValue, bar.key),
+                        onMouseLeave: onMouseLeaveBar,
+                        tooltipHtml: tooltip,
+                        tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
+                        onClick: e => {
                           e.preventDefault()
                           if (setSharedFilter) {
                             bar[config.xAxis.dataKey] = xAxisValue
                             setSharedFilter(config.uid, bar)
                           }
-                        }}
-                      >
-                        <div
-                          style={{
-                            transition: 'all 0.2s linear',
-                            opacity: transparentBar ? 0.2 : 1,
-                            width: barThicknessAdjusted,
-                            height: bar.height,
-                            background: colorScale(config.runtime.seriesLabels[bar.key]),
-                            border: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`,
-                            ...style
-                          }}
-                        ></div>
-                      </foreignObject>
+                        },
+                        styleOverrides: {
+                          animationDelay: `${barStack.index * 0.5}s`,
+                          transformOrigin: `${barThicknessAdjusted / 2}px ${bar.y + bar.height}px`,
+                          opacity: transparentBar ? 0.2 : 1,
+                          display: displayBar ? 'block' : 'none'
+                        }
+                      })}
                     </Group>
                   </Group>
                 )

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

@@ -8,6 +8,9 @@ import { BarGroup } from '@visx/shape'
 import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
 import { FaStar } from 'react-icons/fa'
 import Regions from './../../Regions'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+
+import createBarElement from '@cdc/core/components/createBarElement'
 
 // third party
 import chroma from 'chroma-js'
@@ -75,7 +78,7 @@ export const BarChartVertical = () => {
           height={yMax}
           x0={d => {
             const rawXValue = d[config.runtime.originalXAxis.dataKey]
-            return config.runtime.xAxis.type === 'date' ? parseDate(rawXValue) : rawXValue
+            return isDateScale(config.runtime.xAxis) ? parseDate(rawXValue) : rawXValue
           }}
           x0Scale={xScale}
           x1Scale={seriesScale}
@@ -102,7 +105,7 @@ export const BarChartVertical = () => {
                   let barGroupWidth = seriesScale.range()[1]
 
                   let barWidth = config.isLollipopChart ? lollipopBarWidth : barGroupWidth / barGroup.bars.length
-                  let barX = bar.x + (config.isLollipopChart ? (((barGroupWidth / barGroup.bars.length) - lollipopBarWidth) / 2) : 0) - (config.xAxis.type === 'date' && config.xAxis.sortDates ? barGroupWidth / 2 : 0)
+                  let barX = bar.x + (config.isLollipopChart ? (barGroupWidth / barGroup.bars.length - lollipopBarWidth) / 2 : 0) - (config.xAxis.type === 'date-time' ? barGroupWidth / 2 : 0)
                   setBarWidth(barWidth)
                   setTotalBarsInGroup(barGroup.bars.length)
 
@@ -111,7 +114,6 @@ export const BarChartVertical = () => {
 
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
-                  const borderRadius = applyRadius(newIndex)
                   // tooltips
 
                   const additionalColTooltip = getAdditionalColumn(bar.key, data[barGroup.index][config.runtime.originalXAxis.dataKey])
@@ -149,19 +151,19 @@ export const BarChartVertical = () => {
                      * color the bar that is using the filter with barColor and
                      * color the filteredOut (typically gray) bars with the filteredOutColor
                      */
-                    if (dashboardConfig && dashboardConfig.dashboard.sharedFilters) {
+                    if (dashboardConfig && dashboardConfig.dashboard.sharedFilters?.length !== 0) {
                       const { sharedFilters } = dashboardConfig.dashboard
 
                       _barColor = sharedFilters.map(_sharedFilter => {
                         if (_sharedFilter.setBy === config.uid) {
                           // If the current filter is the reset filter item.
-                          if (_sharedFilter.resetLabel === _sharedFilter.active) return barColor
+                          if (_sharedFilter.resetLabel === _sharedFilter.active) return colorScale(config.runtime.seriesLabels[bar.key])
                           // If the current filter is the bars
-                          if (_sharedFilter.active === transformedData[barGroup.index][config.xAxis.dataKey]) return barColor
+                          if (_sharedFilter.active === transformedData[barGroup.index][config.xAxis.dataKey]) return colorScale(config.runtime.seriesLabels[bar.key])
                           return _filteredOutColor
                         } else {
                           // If the setBy isn't the config.uid return the original barColor
-                          return barColor
+                          return colorScale(config.runtime.seriesLabels[bar.key])
                         }
                       })[0]
 
@@ -179,57 +181,43 @@ export const BarChartVertical = () => {
                     return _barColor
                   }
 
-                  const getLeft = () => {
-                    if (barWidth < 50 && barWidth > 15) return barWidth / 2.5
-                    if (barWidth < 15 && barWidth > 5) return barWidth / 6
-                    if (barWidth < 5) return 0
-                    return barWidth / 2
-                  }
-                  const iconStyle: { [key: string]: any } = {
-                    position: 'absolute',
-                    top: bar.value >= 0 && isNumber(bar.value) ? -suppresedBarHeight : undefined,
-                    bottom: bar.value >= 0 && isNumber(bar.value) ? undefined : `-${suppresedBarHeight}px`,
-                    left: getLeft()
-                  }
-
-                  if (config.isLollipopChart) {
-                    iconStyle.left = 0
-                    iconStyle.transform = `translateX(0)`
-                  }
-
-                  const finalStyle = {
-                    background: getBarBackgroundColor(barColor),
-                    borderColor,
-                    borderStyle: 'solid',
-                    borderWidth: `${borderWidth}px`,
-                    width: barWidth,
-                    height: barHeight,
-                    ...borderRadius,
-                    cursor: dashboardConfig ? 'pointer' : 'default'
-                  }
-
                   return (
                     <Group key={`${barGroup.index}--${index}`}>
-                      {/* This feels gross but inline transition was not working well*/}
-                      <style>
-                        {`
-                        .linear #barGroup${barGroup.index} div,
-                        .Combo #barGroup${barGroup.index} div {
-                          transform-origin: 0 ${barY + barHeight}px;
-                        }
-                      `}
-                      </style>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
-                        <foreignObject
+                        {createBarElement({
+                          config: config,
+                          index: newIndex,
+                          id: `barGroup${barGroup.index}`,
+                          background: getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key])),
+                          borderColor,
+                          borderStyle: 'solid',
+                          borderWidth: `${borderWidth}px`,
+                          width: barWidth,
+                          height: barHeight,
+                          x: barX,
+                          y: barY,
+                          onMouseOver: () => onMouseOverBar(xAxisValue, bar.key),
+                          onMouseLeave: onMouseLeaveBar,
+                          tooltipHtml: tooltip,
+                          tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
+                          onClick: e => {
+                            e.preventDefault()
+                            if (setSharedFilter) {
+                              bar[config.xAxis.dataKey] = xAxisValue
+                              setSharedFilter(config.uid, bar)
+                            }
+                          },
+                          styleOverrides: {
+                            transformOrigin: `0 ${barY + barHeight}px`,
+                            opacity: transparentBar ? 0.2 : 1,
+                            display: displayBar ? 'block' : 'none',
+                            cursor: dashboardConfig ? 'pointer' : 'default'
+                          }
+                        })}
+                        <g
+                          transform={`translate(${barX},${yMax - suppresedBarHeight})`}
                           onMouseOver={() => onMouseOverBar(xAxisValue, bar.key)}
                           onMouseLeave={onMouseLeaveBar}
-                          style={{ overflow: 'visible', transition: 'all 0.2s linear' }}
-                          id={`barGroup${barGroup.index}`}
-                          key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
-                          x={barX}
-                          y={barY}
-                          width={barWidth}
-                          height={barHeight}
                           opacity={transparentBar ? 0.2 : 1}
                           display={displayBar ? 'block' : 'none'}
                           data-tooltip-html={tooltip}
@@ -242,11 +230,8 @@ export const BarChartVertical = () => {
                             }
                           }}
                         >
-                          <div style={{ position: 'relative' }}>
-                            <div style={iconStyle}>{getIcon(bar, barWidth)}</div>
-                            <div style={{ ...finalStyle }}></div>
-                          </div>
-                        </foreignObject>
+                          {getIcon(bar, barWidth)}
+                        </g>
 
                         <Text // prettier-ignore
                           display={config.labels && displayBar ? 'block' : 'none'}
@@ -303,7 +288,7 @@ export const BarChartVertical = () => {
               let upperPos
               let lowerPos
               let tickWidth = 5
-              xPos = xScale(getXAxisData(d)) + (config.xAxis.type !== 'date' || !config.xAxis.sortDates ? seriesScale.range()[1] / 2 : 0)
+              xPos = xScale(getXAxisData(d)) + (config.xAxis.type !== 'date' || config.xAxis.type !== 'date-time' ? seriesScale.range()[1] / 2 : 0)
               upperPos = yScale(getYAxisData(d, config.confidenceKeys.lower))
               lowerPos = yScale(getYAxisData(d, config.confidenceKeys.upper))
               return (

package/src/components/BoxPlot/BoxPlot.jsx

@@ -96,7 +96,8 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
                 container
                 containerProps={{
                   'data-tooltip-html': handleTooltip(d),
-                  'data-tooltip-id': tooltip_id
+                  'data-tooltip-id': tooltip_id,
+                  tabIndex: -1
                 }}
               />
             </Group>