@cdc/chart 4.22.11 → 4.23.1

package/src/components/BarChart.tsx

@@ -5,11 +5,10 @@ import { Text } from '@visx/text'
 import chroma from 'chroma-js'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Context from '../context'
-import ReactTooltip from 'react-tooltip'
 import { BarStackHorizontal } from '@visx/shape'
 
 export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getXAxisData, getYAxisData, animatedChart, visible }) {
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, setParentConfig, colorPalettes, formatDate, parseDate } = useContext<any>(Context)
+  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, formatDate, parseDate } = useContext<any>(Context)
   const { orientation, visualizationSubType } = config
   const isHorizontal = orientation === 'horizontal'
 
@@ -17,9 +16,6 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
   const lollipopShapeSize = config.lollipopSize === 'large' ? 14 : config.lollipopSize === 'medium' ? 12 : 10
 
   const isLabelBelowBar = config.yAxis.labelPlacement === 'Below Bar'
-  const isLabelOnYAxis = config.yAxis.labelPlacement === 'On Date/Category Axis'
-  const isLabelOnBar = config.yAxis.labelPlacement === 'On Bar'
-  const isLabelMissing = !config.yAxis.labelPlacement
   const displayNumbersOnBar = config.yAxis.displayNumbersOnBar
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
 
@@ -29,6 +25,8 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
   const radius = config.roundingStyle === 'standard' ? '8px' : config.roundingStyle === 'shallow' ? '5px' : config.roundingStyle === 'finger' ? '15px' : '0px'
   const stackCount = config.runtime.seriesKeys.length
   const barBorderWidth = 1
+  const fontSize = { small: 14, medium: 16, large: 18 }
+  const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
 
   const applyRadius = (index: number) => {
     if (index === undefined || index === null || !isRounded) return
@@ -46,9 +44,57 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
 
     return style
   }
+  // }
+
+  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 ? fontSize[config.fontSize] * 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 dynamycly to handle space between bars
+      let y = 0
+      bar.index !== 0 && (y = (barHeight + barSpace + labelHeight) * i)
+
+      return { ...bar, y: y, height: barHeight }
+    })
+  }
+
+  function getTextWidth(text, font) {
+    // function calculates the width of given text and its font-size
+    const canvas = document.createElement('canvas')
+    const context = canvas.getContext('2d')
+
+    context.font = font || getComputedStyle(document.body).font
+
+    return Math.ceil(context.measureText(text).width)
+  }
 
   // Using State
-  const [horizBarHeight, setHorizBarHeight] = useState(null)
   const [textWidth, setTextWidth] = useState(null)
 
   useEffect(() => {
@@ -87,8 +133,6 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
     }
   }, [config.barStyle])
 
-  // config.runtime.seriesKeys.sort().reverse();
-
   return (
     <ErrorBoundary component='BarChart'>
       <Group left={config.runtime.yAxis.size}>
@@ -98,22 +142,26 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
             {barStacks =>
               barStacks.reverse().map(barStack =>
                 barStack.bars.map(bar => {
-                  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)
-                  let yAxisTooltip =config.runtime.yAxis.isLegendValue ? `${bar.key}: ${yAxisValue}` : 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}<br />
-                    ${config.seriesLabel ? `${config.seriesLabel}: ${bar.key}` : ''}`
-
                   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 = xMax / barStack.bars.length
                   let barThicknessAdjusted = barThickness * (config.barThickness || 0.8)
                   let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
                   const style = applyRadius(barStack.index)
+                  // 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)
+                  let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
+                  const xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
+                  if (!hasMultipleSeries) {
+                    yAxisTooltip = config.isLegendValue ? `${bar.key}: ${yAxisValue}` : config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
+                  }
+
+                  const tooltip = `<div>
+                  ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[bar.key] || ''}<br/>` : ''}
+                  ${yAxisTooltip}<br />
+                  ${xAxisTooltip}
+                    </div>`
 
                   return (
                     <>
@@ -127,7 +175,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 + 0.5) + offset} y={bar.y - 5} fill={bar.color} textAnchor='middle'>
+                        <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)}
                         </Text>
                         <foreignObject
@@ -141,9 +189,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                           display={displayBar ? 'block' : 'none'}
                           data-tip={tooltip}
                           data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                        >
-                          {' '}
-                        </foreignObject>
+                        ></foreignObject>
                       </Group>
                     </>
                   )
@@ -159,44 +205,25 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
             <BarStackHorizontal data={data} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} height={yMax} y={(d: any) => d[config.runtime.yAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale} offset='none'>
               {barStacks =>
                 barStacks.map(barStack =>
-                  barStack.bars.map((bar, index) => {
-                    const yAxisValue = formatNumber(data[bar.index][bar.key]);
-                    const xAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.originalXAxis.dataKey])) : data[bar.index][config.runtime.originalXAxis.dataKey]
-                    let yAxisTooltip = config.yAxis.isLegendValue ? `${bar.key}: ${yAxisValue}` : config.yAxis.label ? `${config.yAxis.label}: ${yAxisValue}` :`${yAxisValue}`
-                    let xAxisTooltip = config.xAxis.label ? `${config.xAxis.label}: ${xAxisValue}` : xAxisValue
-                    // let yAxisTooltip = config.yAxis.label ? `${config.yAxis.label}: ${data[bar.index][bar.key]}` : `${bar.key}: ${data[bar.index][bar.key]}`
-                    // let xAxisTooltip = config.xAxis.label ? `${config.xAxis.label}: ${data[bar.index][config.runtime.originalXAxis.dataKey]}` :`${data[bar.index].name}`
-                    
-                    const tooltip = `<div>
-                    ${yAxisTooltip}<br />
-                    ${xAxisTooltip}<br />
-                    ${config.seriesLabel ? `${config.seriesLabel}: ${bar.key}` : ''}`
+                  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 barsPerGroup = config.series.length
-                    let barHeight = config.barHeight ? config.barHeight : 25
-                    let barPadding = barHeight
-
                     config.barHeight = Number(config.barHeight)
                     const style = applyRadius(barStack.index)
-
-                    if (orientation === 'horizontal') {
-                      if (isLabelBelowBar || isLabelMissing || isLabelOnYAxis) {
-                        if (barHeight < 40) {
-                          config.barPadding = 40
-                        } else {
-                          config.barPadding = Number(barPadding)
-                        }
-                      } else {
-                        config.barPadding = Number(barPadding) / 2
-                      }
-                    }
-
-                    config.height = Number(barHeight) * data.length + Number(config.barPadding) * data.length
-
                     let labelColor = '#000000'
-
-                    let textPosition = bar.y - config.barPadding / 2 - Number(config.barHeight / 2) + Number(config.barHeight) + 5
+                    // tooltips
+                    const xAxisValue = formatNumber(data[bar.index][bar.key])
+                    const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.originalXAxis.dataKey])) : data[bar.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
+                    if (!hasMultipleSeries) {
+                      xAxisTooltip = config.isLegendValue ? `${bar.key}: ${xAxisValue}` : config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisTooltip
+                    }
+                    const tooltip = `<div>
+                    ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[bar.key] || ''}<br/>` : ''}
+                    ${yAxisTooltip}<br />
+                    ${xAxisTooltip}
+                      </div>`
 
                     if (chroma.contrast(labelColor, bar.color) < 4.9) {
                       labelColor = '#FFFFFF'
@@ -208,9 +235,9 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                           key={`barstack-horizontal-${barStack.index}-${bar.index}-${index}`}
                           className={`animated-chart group ${animatedChart ? 'animated' : ''}`}
                           x={bar.x}
-                          y={bar.y - config.barPadding / 2 - config.barHeight / 2}
+                          y={bar.y}
                           width={bar.width}
-                          height={config.barHeight}
+                          height={bar.height}
                           style={{ background: bar.color, border: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`, ...style }}
                           opacity={transparentBar ? 0.5 : 1}
                           display={displayBar ? 'block' : 'none'}
@@ -221,12 +248,12 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                         {orientation === 'horizontal' && visualizationSubType === 'stacked' && isLabelBelowBar && barStack.index === 0 && !config.yAxis.hideLabel && (
                           <Text
                             x={`${bar.x + (config.isLollipopChart ? 15 : 5)}`} // padding
-                            y={textPosition}
+                            y={bar.y + bar.height * 1.2}
                             fill={'#000000'}
                             textAnchor='start'
                             verticalAnchor='start'
                           >
-                            {isHorizontal ? xAxisValue : formatNumber(xAxisValue)}
+                            {yAxisValue}
                           </Text>
                         )}
 
@@ -234,7 +261,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                           <Text
                             display={displayBar ? 'block' : 'none'}
                             x={bar.x + barStack.bars[bar.index].width / 2} // padding
-                            y={textPosition - 5 - config.barHeight / 2}
+                            y={bar.y + bar.height / 2}
                             fill={labelColor}
                             textAnchor='middle'
                             verticalAnchor='middle'
@@ -274,35 +301,11 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
               }}
             >
               {barGroups => {
-                let barType = 'vertical'
-                if (orientation === 'horizontal') {
-                  const barsPerGroup = config.series.length
-                  let barHeight = config.barHeight ? config.barHeight : 25
-                  let barPadding = barHeight
-                  barType = 'horizontal'
-
-                  if (isLabelBelowBar || isLabelMissing || isLabelOnYAxis) {
-                    if (barHeight < 40) {
-                      config.barPadding = 40
-                    } else {
-                      config.barPadding = barPadding
-                    }
-                  } else {
-                    config.barPadding = barPadding / 2
-                  }
-
-                  if (config.isLollipopChart && config.yAxis.labelPlacement === 'Below Bar') {
-                    config.barPadding = config.barPadding + 7
-                  }
-                  config.barHeight = config.isLollipopChart ? lollipopBarWidth : barHeight
-                  config.height = barsPerGroup * barHeight * barGroups.length + config.barPadding * barGroups.length
-                }
-
-                return barGroups.map((barGroup, index) => (
+                return updateBars(barGroups).map((barGroup, index) => (
                   <Group
-                    className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${barType}`}
+                    className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${config.orientation}`}
                     key={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`}
-                    top={config.runtime.horizontal ? (yMax / barGroups.length) * barGroup.index : 0}
+                    top={config.runtime.horizontal ? barGroup.y : 0}
                     left={config.runtime.horizontal ? 0 : (xMax / barGroups.length) * barGroup.index}
                   >
                     {barGroup.bars.map((bar, index) => {
@@ -317,7 +320,6 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       if (config.isLollipopChart) {
                         offset = (config.runtime.horizontal ? yMax : xMax) / barGroups.length / 2 - lollipopBarWidth / 2
                       }
-
                       const set = new Set()
                       data.forEach(d => set.add(d[config.legend.colorCode]))
                       const uniqValues = Array.from(set)
@@ -340,10 +342,6 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                         xAxisValue = tempValue
                         barWidth = config.barHeight
                       }
-
-                      let yAxisTooltip = config.runtime.yAxis.isLegendValue ? `${bar.key} : ${yAxisValue}`: config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` :yAxisValue;
-                      let xAxisTooltip =config.runtime.xAxis.isLegendValue ? ` ${bar.key} :${xAxisValue}` : config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
-                      let horizBarLabelPadding = null
                       let labelColor = '#000000'
 
                       // Set label color
@@ -351,20 +349,26 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                         labelColor = '#FFFFFF'
                       }
 
-                      // font size and text spacing used for centering text on bar
-                      if (config.fontSize === 'small') {
-                        horizBarLabelPadding = 16
-                      } else if (config.fontSize === 'medium') {
-                        horizBarLabelPadding = 18
-                      } else {
-                        horizBarLabelPadding = 20
+                      const style = applyRadius(index)
+
+                      // check if bar text/value string fits into  each bars.
+                      let textWidth = getTextWidth(xAxisValue, config.fontSize)
+                      let doesTextFit = (textWidth / bar.y) * 100 < 48
+
+                      let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
+                      let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
+                      if (!hasMultipleSeries && config.runtime.horizontal) {
+                        xAxisTooltip = config.isLegendValue ? `${bar.key}: ${xAxisValue}` : config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
+                      }
+                      if (!hasMultipleSeries && !config.runtime.horizontal) {
+                        yAxisTooltip = config.isLegendValue ? `${bar.key}: ${yAxisValue}` : config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                       }
-                      const onBarTextSpacing = 25
+
                       const tooltip = `<div>
-                    ${yAxisTooltip}<br />
-                    ${xAxisTooltip}<br />
-                    ${config.seriesLabel ? `${config.seriesLabel}: ${bar.key}` : ''}`
-                      const style = applyRadius(index)
+                      ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[bar.key] || ''}<br/>` : ''}
+                      ${yAxisTooltip}<br />
+                      ${xAxisTooltip}
+                        </div>`
 
                       return (
                         <>
@@ -378,16 +382,13 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                           `}
                           </style>
                           <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
-                            <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barWidth * (barGroup.bars.length - bar.index - 0.5) + offset} y={barY - 5} fill={barColor} textAnchor='middle'>
-                              {formatNumber(bar.value)}
-                            </Text>
                             <foreignObject
                               id={`barGroup${barGroup.index}`}
                               key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
-                              x={config.runtime.horizontal ? 0 : barWidth * (barGroup.bars.length - bar.index - 1) + offset}
-                              y={config.runtime.horizontal ? barWidth * (barGroup.bars.length - bar.index - 1) + (config.isLollipopChart && isLabelOnYAxis ? offset : 0) : barY}
+                              x={config.runtime.horizontal ? 0 : barWidth * bar.index + offset}
+                              y={config.runtime.horizontal ? barWidth * bar.index : barY}
                               width={config.runtime.horizontal ? bar.y : barWidth}
-                              height={config.runtime.horizontal ? barWidth : barHeight}
+                              height={isHorizontal && !config.isLollipopChart ? barWidth : isHorizontal && config.isLollipopChart ? lollipopBarWidth : barHeight}
                               style={{
                                 background: config.isLollipopChart && config.lollipopColorStyle === 'regular' ? barColor : config.isLollipopChart && config.lollipopColorStyle === 'two-tone' ? chroma(barColor).brighten(1) : barColor,
                                 border: `${config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`,
@@ -398,10 +399,53 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                               data-tip={tooltip}
                               data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                             ></foreignObject>
+                            {orientation === 'horizontal' && !config.isLollipopChart && displayNumbersOnBar && (
+                              <Text
+                                display={displayBar ? 'block' : 'none'}
+                                x={bar.y}
+                                y={config.barHeight / 2 + config.barHeight * bar.index}
+                                fill={labelColor}
+                                dx={doesTextFit ? -5 : 5} // X padding
+                                verticalAnchor='middle'
+                                textAnchor={doesTextFit ? 'end' : 'start'}
+                              >
+                                {xAxisValue}
+                              </Text>
+                            )}
+                            ;
+                            {orientation === 'horizontal' && config.isLollipopChart && displayNumbersOnBar && (
+                              <Text
+                                display={displayBar ? 'block' : 'none'}
+                                x={`${bar.y + (config.isLollipopChart ? 15 : 5) + (config.isLollipopChart && barGroup.bars.length === bar.index ? offset : 0)}`} // padding
+                                y={0}
+                                fill={'#000000'}
+                                textAnchor='start'
+                                verticalAnchor='middle'
+                                fontWeight={'normal'}
+                              >
+                                {xAxisValue}
+                              </Text>
+                            )}
+                            {orientation === 'horizontal' && isLabelBelowBar && !config.yAxis.hideLabel && (
+                              <Text x={config.yAxis.hideAxis ? 0 : 5} y={barGroup.height} dy={4} verticalAnchor={'start'} textAnchor={'start'}>
+                                {config.runtime.yAxis.type === 'date'
+                                  ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey]))
+                                  : isHorizontal
+                                  ? data[barGroup.index][config.runtime.originalXAxis.dataKey]
+                                  : formatNumber(data[barGroup.index][config.runtime.originalXAxis.dataKey])}
+                              </Text>
+                            )}
+                            ;
+                            {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'>
+                                {bar.value}
+                              </Text>
+                            )}
+                            ;
                             {config.isLollipopChart && config.lollipopShape === 'circle' && (
                               <circle
                                 cx={orientation === 'horizontal' ? bar.y : barWidth * (barGroup.bars.length - bar.index - 1) + (isLabelBelowBar && orientation === 'horizontal' ? 0 : offset) + lollipopShapeSize / 3.5}
-                                cy={orientation === 'horizontal' ? lollipopShapeSize / 3.5 + (isLabelBelowBar && orientation === 'horizontal' ? 0 : offset) : bar.y}
+                                cy={orientation === 'horizontal' ? 0 + lollipopBarWidth / 2 : bar.y}
                                 r={lollipopShapeSize / 2}
                                 fill={barColor}
                                 key={`circle--${bar.index}`}
@@ -413,7 +457,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                             {config.isLollipopChart && config.lollipopShape === 'square' && (
                               <rect
                                 x={orientation === 'horizontal' && bar.y > 10 ? bar.y - lollipopShapeSize / 2 : orientation === 'horizontal' && bar.y < 10 ? 0 : orientation !== 'horizontal' ? offset - lollipopBarWidth / 2 : barWidth * (barGroup.bars.length - bar.index - 1) + offset - 5.25}
-                                y={orientation === 'horizontal' ? 0 - lollipopBarWidth / 2 + (isLabelBelowBar ? 0 : offset) : config.height - bar.y > 10 ? bar.y - lollipopShapeSize / 2 : 0}
+                                y={orientation === 'horizontal' ? 0 - lollipopBarWidth / 2 : barY}
                                 width={lollipopShapeSize}
                                 height={lollipopShapeSize}
                                 fill={barColor}
@@ -425,120 +469,6 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                                 <animate attributeName='height' values={`0, ${lollipopShapeSize}`} dur='2.5s' />
                               </rect>
                             )}
-                            {orientation === 'horizontal' && textWidth + 100 < bar.y
-                              ? config.yAxis.labelPlacement === 'On Bar' && (
-                                  <Group>
-                                    <Text
-                                      innerRef={e => {
-                                        if (e) {
-                                          // use font sizes and padding to set the bar height
-                                          let elem = e.getBBox()
-                                          setTextWidth(elem.width)
-                                          config.barHeight = elem.height * 2 + horizBarLabelPadding * 2 + onBarTextSpacing / 2
-                                          config.barPadding = horizBarHeight / 2
-                                        }
-                                      }}
-                                      x={bar.y - horizBarLabelPadding}
-                                      y={barHeight * (barGroup.bars.length - bar.index - 1) + horizBarLabelPadding * 2}
-                                      fill={labelColor}
-                                      textAnchor='end'
-                                    >
-                                      {yAxisValue}
-                                    </Text>
-                                    <Text x={bar.y - horizBarLabelPadding} y={barWidth * (barGroup.bars.length - bar.index - 1) + horizBarLabelPadding * 2 + onBarTextSpacing} fill={labelColor} textAnchor='end'>
-                                      {xAxisValue}
-                                    </Text>
-                                  </Group>
-                                )
-                              : isLabelOnBar && (
-                                  <Group>
-                                    {/* hide y label if we're only showing data on bar */}
-                                    <Text x={bar.y + horizBarLabelPadding} y={barWidth * (barGroup.bars.length - bar.index - 1) + horizBarLabelPadding * 2} fill={'#000'} textAnchor='start' verticalAnchor='end'>
-                                      {yAxisValue}
-                                    </Text>
-                                    <Text x={bar.y + horizBarLabelPadding} y={barWidth * (barGroup.bars.length - bar.index - 1) + horizBarLabelPadding * 2 + onBarTextSpacing} fill={'#000'} textAnchor='start' verticalAnchor='start'>
-                                      {xAxisValue}
-                                    </Text>
-                                  </Group>
-                                )}
-
-                            {orientation === 'horizontal' && isLabelBelowBar && !config.yAxis.hideLabel && (
-                              <>
-                                <Text
-                                  x={config.yAxis.hideAxis ? 0 : 5} // padding
-                                  y={config.isLollipopChart ? lollipopShapeSize * config.series.length + 2 : barWidth * config.series.length + 7}
-                                  verticalAnchor={'start'}
-                                  textAnchor={'start'}
-                                >
-                                  {config.runtime.yAxis.type === 'date'
-                                    ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey]))
-                                    : isHorizontal
-                                    ? data[barGroup.index][config.runtime.originalXAxis.dataKey]
-                                    : formatNumber(data[barGroup.index][config.runtime.originalXAxis.dataKey])}
-                                </Text>
-
-                                {displayNumbersOnBar ? (
-                                  textWidth + 100 < bar.y && !config.isLollipopChart ? (
-                                    <Text
-                                      display={displayBar ? 'block' : 'none'}
-                                      x={bar.y - 5} // padding
-                                      y={config.isLollipopChart ? offset : config.barHeight / 2 + config.barHeight * (barGroup.bars.length - bar.index - 1)}
-                                      fill={labelColor}
-                                      textAnchor='end'
-                                      verticalAnchor='middle'
-                                    >
-                                      {xAxisValue}
-                                    </Text>
-                                  ) : (
-                                    <Text
-                                      display={displayBar ? 'block' : 'none'}
-                                      x={`${bar.y + (config.isLollipopChart ? 15 : 5) + (config.isLollipopChart && barGroup.bars.length === bar.index ? offset : 0)}`} // padding
-                                      y={config.isLollipopChart ? 0 : config.barHeight / 2 + config.barHeight * (barGroup.bars.length - bar.index - 1)}
-                                      fill={'#000000'}
-                                      textAnchor='start'
-                                      verticalAnchor='middle'
-                                      fontWeight={'normal'}
-                                    >
-                                      {xAxisValue}
-                                    </Text>
-                                  )
-                                ) : (
-                                  ''
-                                )}
-                              </>
-                            )}
-
-                            {isLabelOnYAxis && orientation === 'horizontal' && (
-                              <>
-                                {displayNumbersOnBar ? (
-                                  textWidth + 100 < bar.y && !config.isLollipopChart ? (
-                                    <Text
-                                      display={displayBar ? 'block' : 'none'}
-                                      x={bar.y - 5} // padding
-                                      y={config.isLollipopChart ? config.barHeight * (barGroup.bars.length - bar.index - 1) + offset : config.barHeight * (barGroup.bars.length - bar.index - 1) + config.barHeight / 2}
-                                      fill={labelColor}
-                                      textAnchor='end'
-                                      verticalAnchor='middle'
-                                    >
-                                      {formatNumber(xAxisValue)}
-                                    </Text>
-                                  ) : (
-                                    <Text
-                                      display={displayBar ? 'block' : 'none'}
-                                      x={`${bar.y + (config.isLollipopChart ? 15 : 5)}`} // padding
-                                      y={config.isLollipopChart ? config.barHeight * (barGroup.bars.length - bar.index - 1) + offset : config.barHeight * (barGroup.bars.length - bar.index - 1) + config.barHeight / 2}
-                                      fill={'#000000'}
-                                      textAnchor='start'
-                                      verticalAnchor='middle'
-                                    >
-                                      {formatNumber(xAxisValue)}
-                                    </Text>
-                                  )
-                                ) : (
-                                  ''
-                                )}
-                              </>
-                            )}
                           </Group>
                         </>
                       )

package/src/components/BoxPlot.js

@@ -0,0 +1,92 @@
+import React, { useContext, useEffect } from 'react'
+import { BoxPlot } from '@visx/stats'
+import { Group } from '@visx/group'
+import { scaleBand, scaleLinear } from '@visx/scale'
+import Context from '../context'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
+import ReactTooltip from 'react-tooltip'
+
+const CoveBoxPlot = ({ xScale, yScale }) => {
+  const { transformedData: data, config } = useContext(Context)
+
+  const {
+    boxplot: { columnFirstQuartile, columnThirdQuartile, columnMax, columnMin, columnMedian, columnOutliers },
+    width,
+    height
+  } = config
+
+  const yMax = config.height - config.runtime.xAxis.size
+  const xMax = config.width - config.runtime.yAxis.size - config.yAxis.rightAxisSize
+  const boxWidth = xScale.bandwidth()
+  const constrainedWidth = Math.min(20, boxWidth)
+  const color_0 = colorPalettesChart[config?.palette][0] ? colorPalettesChart[config?.palette][0] : '#000'
+
+  // tooltips
+  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
+  const handleTooltip = d => {
+    return `
+      <strong>${d.columnCategory}</strong></br>
+      Q1: ${d.columnFirstQuartile}<br/>
+      Q3: ${d.columnThirdQuartile}<br/>
+      IQR: ${d.columnIqr}<br/>
+      Median: ${d.columnMedian}
+    `
+  }
+  return (
+    <ErrorBoundary component='BoxPlot'>
+      <Group className='boxplot' key='boxplot-wrapper'>
+        {config.boxplot.map((d, i) => {
+          const offset = boxWidth - constrainedWidth
+          return (
+            <BoxPlot
+              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}
+              boxWidth={constrainedWidth}
+              fill={color_0}
+              fillOpacity={0.5}
+              stroke='black'
+              strokeWidth={1}
+              valueScale={yScale}
+              outliers={d.columnOutliers}
+              outlierProps={{
+                style: {
+                  fill: `${color_0}`,
+                  opacity: 1
+                }
+              }}
+              medianProps={{
+                style: {
+                  stroke: 'black'
+                }
+              }}
+              boxProps={{
+                style: {
+                  stroke: 'black'
+                },
+                'data-tip': 'cool'
+              }}
+              maxProps={{
+                style: {
+                  stroke: 'black'
+                }
+              }}
+              container
+              containerProps={{
+                'data-tip': handleTooltip(d),
+                'data-for': tooltip_id
+              }}
+            />
+          )
+        })}
+      </Group>
+    </ErrorBoundary>
+  )
+}
+
+export default CoveBoxPlot