@cdc/chart 4.24.9 → 4.24.11

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

@@ -15,11 +15,13 @@ import { BarGroup } from '@visx/shape'
 import Regions from '../../Regions'
 // CDC core components and helpers
 import { isDateScale } from '@cdc/core/helpers/cove/date'
+import isNumber from '@cdc/core/helpers/isNumber'
 import createBarElement from '@cdc/core/components/createBarElement'
 // Third party libraries
 import chroma from 'chroma-js'
 // Types
 import { type ChartContext } from '../../../types/ChartContext'
+import _, { has } from 'lodash'
 
 export const BarChartVertical = () => {
   const { xScale, yScale, xMax, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
@@ -42,7 +44,7 @@ export const BarChartVertical = () => {
   } = useBarChart()
 
   // prettier-ignore
-  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, getXAxisData, getYAxisData, isNumber, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig, getTextWidth } = useContext<ChartContext>(ConfigContext)
+  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, getXAxisData, getYAxisData, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig } = useContext<ChartContext>(ConfigContext)
   const { HighLightedBarUtils } = useHighlightedBars(config)
   let data = transformedData
   // check if user add suppression
@@ -56,13 +58,43 @@ export const BarChartVertical = () => {
     data = brushConfig.data
   }
 
+  const hasConfidenceInterval = Object.keys(config.confidenceKeys).length > 0
+
+  const getData = () => {
+    const dynamicSeries = config.series.find(s => s.dynamicCategory)
+    if (!dynamicSeries) return data
+    const { dynamicCategory, dataKey } = dynamicSeries
+    const xAxisKey = config.runtime.originalXAxis.dataKey
+    const xAxisGroupDataLookup = _.groupBy(data, xAxisKey)
+    return Object.values(xAxisGroupDataLookup).map(group => {
+      return group.reduce((acc, datum) => {
+        const dataValue = datum[dataKey]
+        const dataCategory = datum[dynamicCategory]
+        if (hasConfidenceInterval) {
+          const { lower, upper } = config.confidenceKeys
+          if (!acc.CI) acc.CI = {}
+          const lowerValue = datum[lower]
+          const upperValue = datum[upper]
+          acc.CI[dataCategory] = { lower: lowerValue, upper: upperValue }
+        }
+        acc[dataCategory] = dataValue
+        acc[xAxisKey] = datum[xAxisKey]
+        acc.dynamicData = true
+        return acc
+      }, {})
+    })
+  }
+
+  const _data = getData()
   return (
     config.visualizationSubType !== 'stacked' &&
-    (config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)) &&
+    (config.visualizationType === 'Bar' ||
+      config.visualizationType === 'Combo' ||
+      isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)) &&
     config.orientation === 'vertical' && (
       <Group>
         <BarGroup
-          data={data}
+          data={_data}
           keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys}
           height={yMax}
           x0={d => {
@@ -85,28 +117,46 @@ export const BarChartVertical = () => {
                 left={barGroup.x0}
               >
                 {barGroup.bars.map((bar, index) => {
+                  const datum = _data[barGroup.index]
+                  const dataValue = datum[config.runtime.originalXAxis.dataKey]
                   const scaleVal = config.yAxis.type === 'logarithmic' ? 0.1 : 0
-                  let highlightedBarValues = config.highlightedBarValues.map(item => item.value).filter(item => item !== ('' || undefined))
-                  highlightedBarValues = config.xAxis.type === 'date' ? HighLightedBarUtils.formatDates(highlightedBarValues) : highlightedBarValues
-                  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
+                  let highlightedBarValues = config.highlightedBarValues
+                    .map(item => item.value)
+                    .filter(item => item !== ('' || undefined))
+                  highlightedBarValues =
+                    config.xAxis.type === 'date'
+                      ? HighLightedBarUtils.formatDates(highlightedBarValues)
+                      : highlightedBarValues
+                  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
 
                   let barGroupWidth = seriesScale.range()[1] - seriesScale.range()[0]
                   const defaultBarHeight = Math.abs(yScale(bar.value) - yScale(scaleVal))
                   const defaultBarY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
                   let barWidth = config.isLollipopChart ? lollipopBarWidth : seriesScale.bandwidth()
-                  let barX = bar.x + (config.isLollipopChart ? (barGroupWidth / barGroup.bars.length - lollipopBarWidth) / 2 : 0) - (config.xAxis.type === 'date-time' ? 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)
                   const yAxisValue = formatNumber(/[a-zA-Z]/.test(String(bar.value)) ? '' : bar.value, 'left')
                   const xAxisValue =
-                    config.runtime[section].type === 'date' ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey])) : data[barGroup.index][config.runtime.originalXAxis.dataKey]
+                    config.runtime[section].type === 'date' ? formatDate(parseDate(dataValue)) : dataValue
 
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
                   // tooltips
-                  const additionalColTooltip = getAdditionalColumn(bar.key, data[barGroup.index][config.runtime.originalXAxis.dataKey])
-                  let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
+                  const additionalColTooltip = getAdditionalColumn(bar.key, dataValue)
+                  let xAxisTooltip = config.runtime.xAxis.label
+                    ? `${config.runtime.xAxis.label}: ${xAxisValue}`
+                    : xAxisValue
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
 
                   const tooltip = `<ul>
@@ -118,16 +168,31 @@ export const BarChartVertical = () => {
                   // configure colors
                   let labelColor = '#000000'
                   labelColor = HighLightedBarUtils.checkFontColor(yAxisValue, highlightedBarValues, labelColor) // Set if background is transparent'
-                  let barColor = config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key] ? colorScale(config.runtime.seriesLabels[bar.key]) : colorScale(bar.key)
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
                   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 borderColor = isHighlightedBar
+                    ? highlightedBarColor
+                    : config.barHasBorder === 'true'
+                    ? '#000'
+                    : 'transparent'
+                  const borderWidth = isHighlightedBar
+                    ? highlightedBar.borderWidth
+                    : config.isLollipopChart
+                    ? 0
+                    : config.barHasBorder === 'true'
+                    ? barBorderWidth
+                    : 0
 
-                  const { barHeight, isSuppressed, getBarY, getAbsentDataLabel } = getBarConfig({ bar, defaultBarHeight, config, isNumber, getTextWidth, barWidth, isVertical: true, yAxisValue })
+                  const { barHeight, isSuppressed, getBarY, getAbsentDataLabel } = getBarConfig({
+                    bar,
+                    defaultBarHeight,
+                    config,
+                    barWidth,
+                    isVertical: true
+                  })
 
                   const absentDataLabel = getAbsentDataLabel(yAxisValue)
                   const barDefaultLabel = isSuppressed || !config.labels ? '' : yAxisValue
@@ -149,9 +214,11 @@ export const BarChartVertical = () => {
                         ? sharedFilters.map(_sharedFilter => {
                             if (_sharedFilter.setBy === config.uid) {
                               // If the current filter is the reset filter item.
-                              if (_sharedFilter.resetLabel === _sharedFilter.active) return colorScale(config.runtime.seriesLabels[bar.key])
+                              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 colorScale(config.runtime.seriesLabels[bar.key])
+                              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
@@ -163,20 +230,32 @@ export const BarChartVertical = () => {
                       if (isRegularLollipopColor) _barColor = barColor
 
                       if (isHighlightedBar) _barColor = 'transparent'
-                      if (config.legend.colorCode) _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
+                      if (config.legend.colorCode)
+                        _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
                       if (isTwoToneLollipopColor) _barColor = chroma(barColor).brighten(1)
                       return _barColor
                     }
 
                     // if this is a two tone lollipop slightly lighten the bar.
                     if (isTwoToneLollipopColor) _barColor = chroma(barColor).brighten(1)
-                    if (config.legend.colorCode) _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
+                    if (config.legend.colorCode)
+                      _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
 
                     // if we're highlighting a bar make it invisible since it gets a border
                     if (isHighlightedBar) _barColor = 'transparent'
                     return _barColor
                   }
 
+                  // Confidence Interval Variables
+                  const tickWidth = 5
+                  const xPos = barX + (config.xAxis.type !== 'date-time' ? barWidth / 2 : 0)
+                  const [upperPos, lowerPos] = ['upper', 'lower'].map(position => {
+                    if (!hasConfidenceInterval) return
+                    const d = datum.dynamicData ? datum.CI[bar.key][position] : datum[config.confidenceKeys[position]]
+                    return yScale(d)
+                  })
+                  // End Confidence Interval Variables
+
                   return (
                     <Group key={`${barGroup.index}--${index}`}>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
@@ -217,13 +296,23 @@ export const BarChartVertical = () => {
                           const isValueMatch = String(pd.value) === String(bar.value) && pd.value !== ''
                           const isSuppressed = isValueMatch && selectedSuppressionColumn
 
-                          if (!isSuppressed || barWidth < 10 || !config.general.showSuppressedSymbol || pd.hideBarSymbol) {
+                          if (
+                            !isSuppressed ||
+                            barWidth < 10 ||
+                            !config.general.showSuppressedSymbol ||
+                            pd.hideBarSymbol
+                          ) {
                             return
                           }
                           const hasAsterisk = String(pd.symbol).includes('Asterisk')
                           const yPadding = hasAsterisk ? -5 : -8
                           const verticalAnchor = hasAsterisk ? 'middle' : 'end'
-                          const iconSize = pd.symbol === 'Asterisk' ? barWidth * 1.2 : pd.symbol === 'Double Asterisk' ? barWidth : barWidth / 1.5
+                          const iconSize =
+                            pd.symbol === 'Asterisk'
+                              ? barWidth * 1.2
+                              : pd.symbol === 'Double Asterisk'
+                              ? barWidth
+                              : barWidth / 1.5
                           const fillColor = pd.displayGray ? '#8b8b8a' : '#000'
 
                           return (
@@ -295,6 +384,19 @@ export const BarChartVertical = () => {
                             <animate attributeName='height' values={`0, ${lollipopShapeSize}`} dur='2.5s' />
                           </rect>
                         )}
+                        {hasConfidenceInterval && (
+                          <path
+                            key={`confidence-interval-v-${datum[config.runtime.originalXAxis.dataKey]}`}
+                            stroke='#333'
+                            strokeWidth='px'
+                            d={`M${xPos - tickWidth} ${upperPos}
+                                L${xPos + tickWidth} ${upperPos}
+                                M${xPos} ${upperPos}
+                                L${xPos} ${lowerPos}
+                                M${xPos - tickWidth} ${lowerPos}
+                                L${xPos + tickWidth} ${lowerPos}`}
+                          />
+                        )}
                       </Group>
                     </Group>
                   )
@@ -304,32 +406,6 @@ export const BarChartVertical = () => {
           }}
         </BarGroup>
 
-        {Object.keys(config.confidenceKeys).length > 0
-          ? data.map(d => {
-              let xPos, yPos
-              let upperPos
-              let lowerPos
-              let tickWidth = 5
-              xPos = xScale(getXAxisData(d)) + (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 (
-                <path
-                  key={`confidence-interval-v-${yPos}-${d[config.runtime.originalXAxis.dataKey]}`}
-                  stroke='#333'
-                  strokeWidth='px'
-                  d={`
-                    M${xPos - tickWidth} ${upperPos}
-                    L${xPos + tickWidth} ${upperPos}
-                    M${xPos} ${upperPos}
-                    L${xPos} ${lowerPos}
-                    M${xPos - tickWidth} ${lowerPos}
-                    L${xPos + tickWidth} ${lowerPos}`}
-                />
-              )
-            })
-          : ''}
-
         <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={totalBarsInGroup} />
       </Group>
     )

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

@@ -1,17 +1,25 @@
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import isNumber from '@cdc/core/helpers/isNumber'
+
 // Define an interface for the function's parameter
 interface BarConfigProps {
   defaultBarWidth?: number
   defaultBarHeight?: number
   bar?: { [key: string]: any }
-  isNumber?: Function
   config: { [key: string]: any }
-  getTextWidth: (a: string, b: string) => string
   barWidth: number
   isVertical: boolean
 }
 
 // Function to create bar width based on suppression status and missing data label
-export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, isNumber, getTextWidth, barWidth, isVertical }: BarConfigProps) => {
+export const getBarConfig = ({
+  bar,
+  defaultBarHeight,
+  defaultBarWidth,
+  config,
+  barWidth,
+  isVertical
+}: BarConfigProps) => {
   const heightMini = 3 /// height of small bars aka suppressed/NA/Zero valued
   let barHeight = defaultBarHeight
 
@@ -20,6 +28,7 @@ export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, i
   let barLabel = ''
   let isSuppressed = false
   let showMissingDataLabel = false
+  let showZeroValueData = false
   const showSuppressedSymbol = config.general.showSuppressedSymbol
 
   config.preliminaryData.forEach(pd => {
@@ -45,10 +54,19 @@ export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, i
     barHeight = labelFits ? heightMini : 0
     barWidthHorizontal = heightMini
   }
+  // Handle undefined, null, or non-calculable bar.value
+
+  if (!isSuppressed && bar.value === '0' && config.general.showZeroValueData) {
+    const labelWidth = getTextWidth('0', `normal ${barWidth / 2}px sans-serif`)
+    const labelFits = Number(labelWidth) < barWidth && barWidth > 10
+    showZeroValueData = true
+    barHeight = labelFits ? heightMini : 0
+    barWidthHorizontal = heightMini
+  }
 
   const getBarY = (defaultBarY, yScale) => {
     // calculate Y position of small bars (suppressed,N/A,Zero valued) bars
-    if (isSuppressed || showMissingDataLabel) {
+    if (isSuppressed || showMissingDataLabel || showZeroValueData) {
       if (config.isLollipopChart) {
         return yScale - heightMini * 2
       } else {
@@ -68,6 +86,7 @@ export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, i
     if (isSuppressed) label = ''
     // If the config is set to show a label for missing data, display 'N/A'
     if (showMissingDataLabel) label = 'N/A'
+    if (showZeroValueData) label = '0'
 
     // determine label width in pixels & check if it fits to the bar width
     const labelWidth = getTextWidth(barLabel, `normal ${barWidth / 2}px sans-serif`)
@@ -78,7 +97,6 @@ export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, i
       return labelFits && isVertical ? label : !isVertical ? label : ''
     }
   }
-
   return { barWidthHorizontal, barHeight, isSuppressed, showMissingDataLabel, getBarY, getAbsentDataLabel }
 }
 

package/src/components/BoxPlot/BoxPlot.tsx

@@ -0,0 +1,189 @@
+import React, { useContext } from 'react'
+import { BoxPlot } from '@visx/stats'
+import { Group } from '@visx/group'
+import ConfigContext from '../../ConfigContext'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
+import { scaleBand } from '@visx/scale'
+import _ from 'lodash'
+import { max, min, median, quantile } from 'd3-array'
+const CoveBoxPlot = ({ xScale, yScale }) => {
+  const { config, colorScale, seriesHighlight, transformedData: data } = useContext(ConfigContext)
+  const { boxplot } = config
+
+  // tooltips
+  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
+
+  const handleTooltip = (d, key, q1, q3, median, iqr) => {
+    return `
+      <strong>${d.columnCategory}</strong></br>
+       <strong>Key:${key}</strong></br>
+      ${boxplot.labels.q1}: ${q1}<br/>
+      ${boxplot.labels.q3}: ${q3}<br/>
+      ${boxplot.labels.iqr}: ${iqr}<br/>
+      ${boxplot.labels.median}: ${median}
+    `
+  }
+
+  const boxWidth = xScale.bandwidth()
+  const constrainedWidth = Math.min(40, boxWidth)
+  const color_0 = colorPalettesChart[config?.palette][0] ? colorPalettesChart[config?.palette][0] : '#000'
+  const seriesScale = scaleBand({
+    range: [0, config.barThickness * 100 || 1],
+    domain: config.series?.map(item => item?.dataKey)
+  })
+
+  const calculateBoxPlotStats = values => {
+    if (!values || !values.length) return {}
+    const sortedValues = values.sort((a, b) => a - b)
+    return {
+      min: min(values),
+      max: max(values),
+      median: median(values),
+      firstQuartile: quantile(sortedValues, 0.25),
+      thirdQuartile: quantile(sortedValues, 0.75)
+    }
+  }
+
+  const getValuesBySeriesKey = (group: string) => {
+    const allSeriesKeys = config.series.map(item => item?.dataKey)
+    const result = {}
+    const filteredData = data.filter(item => item[config.xAxis.dataKey] === group)
+    allSeriesKeys.forEach(key => {
+      result[key] = filteredData.map(item => item[key])
+    })
+
+    return result
+  }
+
+  interface Plot {
+    columnCategory: string
+    keyValues: { [key: string]: number[] }
+  }
+  const createPlots = data => {
+    const dataKeys = data.map(d => d[config.xAxis.dataKey])
+    const plots: Plot[] = []
+    const groups: string[] = _.uniq(dataKeys)
+    if (groups && groups.length > 0) {
+      groups.forEach(group => {
+        plots.push({
+          columnCategory: group,
+          keyValues: getValuesBySeriesKey(group)
+        })
+      })
+    }
+    return plots
+  }
+
+  return (
+    <ErrorBoundary component='BoxPlot'>
+      <Group left={Number(config.yAxis.size)} className='boxplot' key={`boxplot-group`}>
+        {createPlots(data).map((d, i) => {
+          const offset = boxWidth - constrainedWidth
+          const radius = 4
+
+          return (
+            <Group
+              key={`boxplotplot-${d.columnCategory}`}
+              left={xScale(d.columnCategory) + (xScale.bandwidth() - seriesScale.bandwidth()) / 2}
+            >
+              {config.series.map(item => {
+                const valuesByKey = d.keyValues[item.dataKey]
+                const { min, max, median, firstQuartile, thirdQuartile } = calculateBoxPlotStats(valuesByKey)
+                let iqr = Number(thirdQuartile - firstQuartile).toFixed(config.dataFormat.roundTo)
+
+                const transparentPlot =
+                  config.legend.behavior === 'highlight' &&
+                  seriesHighlight.length > 0 &&
+                  seriesHighlight.indexOf(item.dataKey) === -1
+                const displayPlot =
+                  config.legend.behavior === 'highlight' ||
+                  seriesHighlight.length === 0 ||
+                  seriesHighlight.indexOf(item.dataKey) !== -1
+                const fillOpacity = transparentPlot ? 0.3 : 0.5
+
+                return (
+                  <Group key={`boxplotplot-${item}`}>
+                    {boxplot.plotNonOutlierValues &&
+                      valuesByKey.map((value, index) => {
+                        return (
+                          <circle
+                            display={displayPlot ? 'block' : 'none'}
+                            cx={seriesScale(item.dataKey) + seriesScale.bandwidth() / 2}
+                            cy={yScale(value)}
+                            r={radius}
+                            fill={'#ccc'}
+                            style={{ opacity: fillOpacity, fillOpacity: 1, stroke: 'black' }}
+                            key={`boxplot-${i}--circle-${index}`}
+                          />
+                        )
+                      })}
+                    {displayPlot && (
+                      <BoxPlot
+                        display={displayPlot ? 'block' : 'none'}
+                        data-left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
+                        key={`box-plot-${i}-${item}`}
+                        min={min}
+                        max={max}
+                        left={seriesScale(item.dataKey)}
+                        firstQuartile={firstQuartile}
+                        thirdQuartile={thirdQuartile}
+                        median={median}
+                        boxWidth={seriesScale.bandwidth()}
+                        fill={colorScale(item.dataKey)}
+                        fillOpacity={fillOpacity}
+                        stroke={fillOpacity ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0.1)'}
+                        valueScale={yScale}
+                        outliers={boxplot.plotOutlierValues ? d.columnOutliers : []}
+                        outlierProps={{
+                          style: {
+                            fill: `${color_0}`,
+                            opacity: fillOpacity
+                          }
+                        }}
+                        medianProps={{
+                          style: {
+                            stroke: 'black',
+                            opacity: fillOpacity
+                          }
+                        }}
+                        boxProps={{
+                          style: {
+                            stroke: 'black',
+                            strokeWidth: boxplot.borders === 'true' ? 1 : 0,
+                            opacity: fillOpacity
+                          }
+                        }}
+                        maxProps={{
+                          style: {
+                            stroke: 'black',
+                            opacity: fillOpacity
+                          }
+                        }}
+                        container
+                        containerProps={{
+                          'data-tooltip-html': handleTooltip(
+                            d,
+                            item.dataKey,
+                            firstQuartile,
+                            thirdQuartile,
+                            median,
+                            iqr
+                          ),
+                          'data-tooltip-id': tooltip_id,
+                          tabIndex: -1
+                        }}
+                      />
+                    )}
+                  </Group>
+                )
+              })}
+            </Group>
+          )
+        })}
+      </Group>
+    </ErrorBoundary>
+  )
+}
+
+export default CoveBoxPlot

package/src/components/BrushChart.tsx

@@ -2,15 +2,16 @@ import { Group } from '@visx/group'
 import { useContext, useEffect, useRef, useState } from 'react'
 import ConfigContext from '../ConfigContext'
 import * as d3 from 'd3'
-import { invertValue } from '@cdc/core/helpers/scaling'
 import { Text } from '@visx/text'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+
 interface BrushChartProps {
   xMax: number
   yMax: number
 }
 
 const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
-  const { tableData, config, setBrushConfig, getTextWidth, dashboardConfig, formatDate } = useContext(ConfigContext)
+  const { tableData, config, setBrushConfig, dashboardConfig, formatDate } = useContext(ConfigContext)
   const [brushState, setBrushState] = useState({ isBrushing: false, selection: [] })
   const [brushKey, setBrushKey] = useState(0)
   const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []