@cdc/chart 4.25.6-2 → 4.25.7

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

@@ -59,7 +59,9 @@ export const BarChartHorizontal = () => {
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
-  const hasConfidenceInterval = Object.keys(config.confidenceKeys).length > 0
+  const hasConfidenceInterval = [config.confidenceKeys?.upper, config.confidenceKeys?.lower].every(
+    v => v != null && String(v).trim() !== ''
+  )
 
   const _data = getBarData(config, data, hasConfidenceInterval)
 
@@ -262,6 +264,21 @@ export const BarChartHorizontal = () => {
                           }
                         })}
 
+                        {(absentDataLabel || isSuppressed) && (
+                          <rect
+                            x={barX}
+                            y={0}
+                            width={yMax}
+                            height={numbericBarHeight}
+                            fill='transparent'
+                            data-tooltip-place='top'
+                            data-tooltip-offset='{"top":3}'
+                            style={{ pointerEvents: 'all', cursor: 'pointer' }}
+                            data-tooltip-html={tooltip}
+                            data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                          />
+                        )}
+
                         {config.preliminaryData?.map((pd, index) => {
                           // check if user selected column
                           const selectedSuppressionColumn = !pd.column || pd.column === bar.key
@@ -301,7 +318,7 @@ export const BarChartHorizontal = () => {
                           )
                         })}
 
-                        {!config.isLollipopChart && (
+                        {!config.isLollipopChart && !hasConfidenceInterval && (
                           <Text // prettier-ignore
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
@@ -315,6 +332,21 @@ export const BarChartHorizontal = () => {
                             {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
                         )}
+
+                        {!config.isLollipopChart && hasConfidenceInterval && (
+                          <Text // prettier-ignore
+                            display={displayBar ? 'block' : 'none'}
+                            x={bar.value < 0 ? bar.y + barWidth : bar.y - barWidth}
+                            opacity={transparentBar ? 0.5 : 1}
+                            y={config.barHeight / 2 + config.barHeight * bar.index}
+                            fill={labelColor}
+                            dx={-textPadding}
+                            verticalAnchor='middle'
+                            textAnchor={bar.value < 0 ? 'end' : 'start'}
+                          >
+                            {testZeroValue(bar.value) ? '' : barDefaultLabel}
+                          </Text>
+                        )}
                         <Text // prettier-ignore
                           display={displayBar ? 'block' : 'none'}
                           x={bar.y}

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

@@ -288,6 +288,21 @@ export const BarChartVertical = () => {
                           }
                         })}
 
+                        {(absentDataLabel || isSuppressed) && (
+                          <rect
+                            x={barX}
+                            y={0}
+                            width={barWidth}
+                            height={yMax}
+                            fill='transparent'
+                            data-tooltip-place='top'
+                            data-tooltip-offset='{"top":3}'
+                            style={{ pointerEvents: 'all', cursor: 'pointer' }}
+                            data-tooltip-html={tooltip}
+                            data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                          />
+                        )}
+
                         {config.preliminaryData.map((pd, index) => {
                           // check if user selected column
                           const selectedSuppressionColumn = !pd.column || pd.column === bar.key

package/src/components/BoxPlot/BoxPlot.Horizontal.tsx

@@ -0,0 +1,131 @@
+import React, { useContext } from 'react'
+import { Group } from '@visx/group'
+import { BoxPlot } from '@visx/stats'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import ConfigContext from '../../ConfigContext'
+import { handleTooltip, createPlots } from './helpers/index'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
+import _ from 'lodash'
+
+const BoxPlotHorizontal = ({ xScale, yScale, seriesScale }) => {
+  const { config, transformedData: data, colorScale, seriesHighlight } = useContext(ConfigContext)
+  const yOffset = Number(config.xAxis.size)
+  const defaultColor = APP_FONT_COLOR
+  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
+  // generate summary stats
+  const plots = createPlots(data, config)
+  const { plotNonOutlierValues, plotOutlierValues } = config.boxplot
+
+  return (
+    <ErrorBoundary component='BoxPlot Horizontal'>
+      <Group left={yOffset} top={0} className='boxplot'>
+        {plots.map(plot => {
+          const category = plot.columnCategory
+
+          return config.series.map(item => {
+            const y0 = yScale(category)
+            const offset = seriesScale(item.dataKey)
+            const isTransparent =
+              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 = isTransparent ? 0.3 : 0.7
+            // outlier & non-outlier arrays
+            const nonOut = plot.columnNonOutliers?.[item.dataKey] || []
+            const out = plot.columnOutliers?.[item.dataKey] || []
+
+            return (
+              <Group key={`${category}-${item.dataKey}`} top={y0 + offset}>
+                {displayPlot && (
+                  <BoxPlot
+                    min={Number(plot.min[item.dataKey])}
+                    max={Number(plot.max[item.dataKey])}
+                    thirdQuartile={plot.q3[item.dataKey]}
+                    firstQuartile={plot.q1[item.dataKey]}
+                    median={plot.median[item.dataKey]}
+                    horizontal={true}
+                    valueScale={xScale}
+                    boxWidth={seriesScale.bandwidth()}
+                    fill={colorScale(item.dataKey)}
+                    fillOpacity={1}
+                    stroke={defaultColor}
+                    boxProps={{
+                      fill: colorScale(item.dataKey),
+                      strokeWidth: config.boxplot.borders === 'true' ? 1.5 : 0,
+                      stroke: defaultColor,
+                      fillOpacity: fillOpacity
+                    }}
+                    minProps={{ stroke: defaultColor, strokeWidth: 1, opacity: fillOpacity }}
+                    maxProps={{ stroke: defaultColor, strokeWidth: 1, opacity: fillOpacity }}
+                    medianProps={{ stroke: defaultColor, strokeWidth: 1, opacity: fillOpacity }}
+                    outliers={
+                      config.boxplot.plotOutlierValues ? _.map(plot.columnOutliers[item.dataKey], item => item) : []
+                    }
+                    outlierProps={{
+                      style: {
+                        fill: colorScale(item.dataKey),
+                        opacity: fillOpacity,
+                        stroke: defaultColor
+                      }
+                    }}
+                    container
+                    containerProps={{
+                      'data-tooltip-html': handleTooltip(
+                        config.boxplot,
+                        plot.columnCategory,
+                        item.dataKey,
+                        _.round(plot.q1[item.dataKey], config.dataFormat.roundTo),
+                        _.round(plot.q3[item.dataKey], config.dataFormat.roundTo),
+                        _.round(plot.median[item.dataKey], config.dataFormat.roundTo),
+                        _.round(plot.iqr[item.dataKey], config.dataFormat.roundTo),
+                        config.xAxis.label,
+                        defaultColor
+                      ),
+                      'data-tooltip-id': tooltip_id,
+                      tabIndex: -1
+                    }}
+                  />
+                )}
+
+                {/* non-outlier points */}
+                {plotNonOutlierValues &&
+                  nonOut.map((value, idx) => (
+                    <circle
+                      display={displayPlot ? 'block' : 'none'}
+                      key={`non-${category}-${item.dataKey}-${idx}`}
+                      cx={xScale(value)}
+                      cy={seriesScale.bandwidth() / 2}
+                      r={4}
+                      opacity={fillOpacity}
+                      fill={defaultColor}
+                      style={{ stroke: defaultColor }}
+                    />
+                  ))}
+
+                {/* outlier points */}
+                {plotOutlierValues &&
+                  out.map((value, idx) => (
+                    <circle
+                      display={displayPlot ? 'block' : 'none'}
+                      key={`out-${category}-${item.dataKey}-${idx}`}
+                      cx={xScale(value)}
+                      cy={seriesScale.bandwidth() / 2}
+                      r={4}
+                      opacity={fillOpacity}
+                      fill={defaultColor}
+                      style={{ stroke: defaultColor }}
+                    />
+                  ))}
+              </Group>
+            )
+          })
+        })}
+      </Group>
+    </ErrorBoundary>
+  )
+}
+export default BoxPlotHorizontal

package/src/components/BoxPlot/{BoxPlot.tsx → BoxPlot.Vertical.tsx}

@@ -8,7 +8,7 @@ import { handleTooltip, createPlots } from './helpers/index'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import _ from 'lodash'
 
-const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
+const BoxPlotVertical = ({ xScale, yScale, seriesScale }) => {
   const { config, colorScale, seriesHighlight, transformedData: data } = useContext(ConfigContext)
   const { boxplot } = config
 
@@ -21,7 +21,7 @@ const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
   const color_0 = _.get(colorPalettesChart, [config.palette, 0], '#000')
   const plots = createPlots(data, config)
   return (
-    <ErrorBoundary component='BoxPlot'>
+    <ErrorBoundary component='BoxPlot Vertical'>
       <Group left={Number(config.yAxis.size)} className='boxplot' key={`boxplot-group`}>
         {plots.map((d, i) => {
           const offset = boxWidth - constrainedWidth
@@ -41,7 +41,7 @@ const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
                   config.legend.behavior === 'highlight' ||
                   seriesHighlight.length === 0 ||
                   seriesHighlight.indexOf(item.dataKey) !== -1
-                const fillOpacity = isTransparent ? 0.3 : 0.5
+                const fillOpacity = isTransparent ? 0.3 : 0.7
                 return (
                   <Group key={`boxplotplot-${item.dataKey}-${index}`}>
                     {boxplot.plotNonOutlierValues &&
@@ -131,4 +131,4 @@ const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
   )
 }
 
-export default CoveBoxPlot
+export default BoxPlotVertical

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

@@ -33,7 +33,7 @@ export const calculateBoxPlotStats = (values: number[]) => {
   if (!values || values.length === 0) return {}
 
   // Sort the values
-  const sortedValues = _.sortBy(values)
+  const sortedValues = _.sortBy(values.map(v => Number(v)))
 
   // Quartiles
   const firstQuartile = d3.quantile(sortedValues, 0.25) ?? 0
@@ -45,18 +45,28 @@ export const calculateBoxPlotStats = (values: number[]) => {
   // Outlier Bounds
   const lowerBound = firstQuartile - 1.5 * iqr
   const upperBound = thirdQuartile + 1.5 * iqr
+  // const lowerFence = q1 - 1.5 * iqr
+  // const upperFence = q3 + 1.5 * iqr
 
   // Non-Outlier Values
   const nonOutliers = sortedValues.filter(value => value >= lowerBound && value <= upperBound)
-
+  // **Outliers** =
+  const outliers = sortedValues.filter(v => v < lowerBound || v > upperBound)
+  const whiskerMax =
+    sortedValues
+      .slice()
+      .reverse()
+      .find(v => v <= upperBound) ?? thirdQuartile
+  const whiskerMin = nonOutliers.length > 0 ? nonOutliers[0] : firstQuartile
   // Calculate Box Plot Stats
   return {
-    min: d3.min(nonOutliers), // Smallest non-outlier value
-    max: d3.max(nonOutliers), // Largest non-outlier value
-    median: d3.median(sortedValues), // Median of all values
+    min: whiskerMin,
+    max: whiskerMax,
+    median: d3.median(sortedValues),
     firstQuartile,
     thirdQuartile,
-    iqr
+    iqr,
+    outliers
   }
 }
 
@@ -109,16 +119,26 @@ export const createPlots = (data, config) => {
 
       // Calculate outliers and non-outliers for each series key
       Object.keys(keyValues).forEach(key => {
-        const values = keyValues[key]
+        const raw = keyValues[key] ?? []
+
+        // 2) normalize → trim, drop empties/non-numbers, coerce to Number
+        const cleaned: number[] = raw
+          .map(v => (typeof v === 'string' ? v.trim() : v)) // trim strings
+          .filter(v => v != null && v !== '' && !isNaN(+v)) // drop null/''/non-nums
+          .map(v => +v)
+
+        if (cleaned.length === 0) {
+          return
+        }
 
         // Calculate box plot statistics
-        const { firstQuartile, thirdQuartile, min, max, median, iqr } = calculateBoxPlotStats(values)
+        const { firstQuartile, thirdQuartile, min, max, median, iqr, outliers } = calculateBoxPlotStats(cleaned)
         // Calculate outliers and non-outliers
-        columnOutliers[key] = calculateOutliers(values, firstQuartile, thirdQuartile).map(Number)
-        columnNonOutliers[key] = calculateNonOutliers(values, firstQuartile, thirdQuartile).map(Number)
+        columnOutliers[key] = calculateOutliers(cleaned, firstQuartile, thirdQuartile).map(Number)
+        columnNonOutliers[key] = calculateNonOutliers(cleaned, firstQuartile, thirdQuartile).map(Number)
         columnMedian[key] = median
-        columnMin[key] = min
-        columnMax[key] = max
+        columnMin[key] = Number(min)
+        columnMax[key] = Number(max)
         columnQ1[key] = firstQuartile
         columnQ3[key] = thirdQuartile
         columnIqr[key] = iqr

package/src/components/BrushChart.tsx

@@ -120,7 +120,7 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
       svg.call(brushHandle, selection, formattedStartDate, formattedEndDate)
 
       const payload = {
-        active: config.brush.active,
+        active: config.xAxis.brushActive,
         isBrushing: isUserBrushing,
         data: finalData
       }

package/src/components/EditorPanel/EditorPanel.tsx

@@ -2931,9 +2931,9 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                       />
                       {visHasBrushChart() && (
                         <CheckBox
-                          value={config.brush.active}
-                          section='brush'
-                          fieldName='active'
+                          value={config.xAxis.brushActive}
+                          section='xAxis'
+                          fieldName='brushActive'
                           label='Brush Slider '
                           updateField={updateFieldDeprecated}
                           tooltip={

package/src/components/EditorPanel/components/Panels/Panel.General.tsx

@@ -131,7 +131,7 @@ const PanelGeneral: FC<PanelProps> = props => {
             options={Object.keys(approvedCurveTypes)}
           />
         )}
-        {visualizationType === 'Bar' && (
+        {(visualizationType === 'Bar' || visualizationType === 'Box Plot') && (
           <Select
             value={config.orientation || 'vertical'}
             fieldName='orientation'
@@ -178,7 +178,7 @@ const PanelGeneral: FC<PanelProps> = props => {
             options={['standard', 'shallow', 'finger']}
           />
         )}
-        {visualizationType === 'Bar' && config.orientation === 'horizontal' && (
+        {(visualizationType === 'Bar' || visualizationType === 'Box Plot') && config.orientation === 'horizontal' && (
           <Select
             value={config.yAxis.labelPlacement || 'Below Bar'}
             section='yAxis'

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

@@ -1,9 +1,10 @@
 import React, { useContext } from 'react'
-
+import { replace } from 'lodash'
 // cdc
 import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart, sequentialPalettes } from '@cdc/core/data/colorPalettes'
+import { getBridgedData } from '../../helpers/getBridgedData'
 
 // visx & d3
 import { curveMonotoneX } from '@visx/curve'
@@ -11,7 +12,7 @@ import { Bar, Area, LinePath } from '@visx/shape'
 import { Group } from '@visx/group'
 
 const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, handleTooltipMouseOff }) => {
-  const { transformedData: data, rawData, config, seriesHighlight } = useContext(ConfigContext)
+  const { transformedData: data, rawData, config, seriesHighlight, parseDate } = useContext(ConfigContext)
   const { xAxis, yAxis, legend, runtime } = config
   const DEBUG = false
 
@@ -23,12 +24,17 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
             if (!group || !group.stages) return false
             return group.stages.map((stage, stageIndex) => {
               const { behavior } = legend
-              const groupData = rawData.filter(d => d[group.stageColumn] === stage.key)
-              let transparentArea = behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(stage.key) === -1
-              let displayArea = behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(stage.key) !== -1
+              let transparentArea =
+                behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(stage.key) === -1
+              let displayArea =
+                behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(stage.key) !== -1
+              const bridgedData = getBridgedData(stage.key, group.stageColumn, rawData)
 
               return (
-                <Group className={`forecasting-areas-combo-${index}`} key={`forecasting-areas--stage-${stage.key.replaceAll(' ', '-')}-${index}`}>
+                <Group
+                  className={`forecasting-areas-combo-${index}`}
+                  key={`forecasting-areas--stage-${replace(stage.key, / /g, '—')}-${index}`}
+                >
                   {group.confidenceIntervals?.map((ciGroup, ciGroupIndex) => {
                     const palette = sequentialPalettes[stage.color] || colorPalettesChart[stage.color] || false
 
@@ -44,13 +50,19 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
 
                     if (ciGroup.high === '' || ciGroup.low === '') return
                     return (
-                      <Group key={`forecasting-areas--stage-${stage.key.replaceAll(' ', '-')}--group-${stageIndex}-${ciGroupIndex}`}>
+                      <Group
+                        key={`forecasting-areas--stage-${replace(
+                          stage.key,
+                          / /g,
+                          '—'
+                        )}--group-${stageIndex}-${ciGroupIndex}`}
+                      >
                         {/* prettier-ignore */}
                         <Area
                           curve={curveMonotoneX}
-                          data={groupData}
+                          data={bridgedData}
                           fill={getFill()}
-                          opacity={transparentArea ? 0.1 : .5}
+                          opacity={transparentArea? 0.1 : 0.5 }
                           x={d => xScale(Date.parse(d[xAxis.dataKey]))}
                           y0={d => yScale(d[ciGroup.low])}
                           y1={d => yScale(d[ciGroup.high])}
@@ -59,10 +71,10 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
                         {ciGroupIndex === 0 && (
                           <>
                             {/* prettier-ignore */}
-                            <LinePath data={groupData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.high]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
+                            <LinePath data={bridgedData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.high]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
 
                             {/* prettier-ignore */}
-                            <LinePath data={groupData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.low]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
+                            <LinePath data={bridgedData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.low]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
                           </>
                         )}
                       </Group>
@@ -73,7 +85,15 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
             })
           })}
           <Group key='tooltip-hover-section'>
-            <Bar key={'bars'} width={Number(width)} height={Number(height)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
+            <Bar
+              key={'bars'}
+              width={Number(width)}
+              height={Number(height)}
+              fill={DEBUG ? 'red' : 'transparent'}
+              fillOpacity={0.05}
+              onMouseMove={e => handleTooltipMouseOver(e, data)}
+              onMouseOut={handleTooltipMouseOff}
+            />
           </Group>
         </Group>
       </ErrorBoundary>

package/src/components/Legend/LegendGroup/LegendGroup.tsx

@@ -83,6 +83,7 @@ const LegendGroup = ({ formatLabels }) => {
                         }}
                         key={`legend-item-${i}`}
                         tabIndex={0}
+                        role='button'
                       >
                         <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={label.value} />
                         <LegendLabel align='left' margin='0'>

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

@@ -19,9 +19,9 @@ export const getMarginTop = (isLegendBottom, config) => {
   if (!isLegendBottom) {
     return '0px'
   }
-  if (isLegendBottom && config.brush.active && !config.legend.hide) {
+  if (isLegendBottom && config.xAxis.brushActive && !config.legend.hide) {
     const additiolMargin = 25
-    return `${DEFAULT_MARGIN_TOP + config.brush.height + additiolMargin}px`
+    return `${DEFAULT_MARGIN_TOP + config.brush?.height + additiolMargin}px`
   } else {
     return `${DEFAULT_MARGIN_TOP}px`
   }

package/src/components/LinearChart.tsx

@@ -14,7 +14,8 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 import { AreaChartStacked } from './AreaChart'
 import BarChart from './BarChart'
 import ConfigContext from '../ConfigContext'
-import BoxPlot from './BoxPlot'
+import BoxPlotVertical from './BoxPlot/BoxPlot.Vertical'
+import BoxPlotHorizontal from './BoxPlot/BoxPlot.Horizontal'
 import ScatterPlot from './ScatterPlot'
 import DeviationBar from './DeviationBar'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -25,17 +26,20 @@ import PairedBarChart from './PairedBarChart'
 import useIntersectionObserver from '../hooks/useIntersectionObserver'
 import Regions from './Regions'
 import CategoricalYAxis from './Axis/Categorical.Axis'
+import BrushChart from './Brush/BrushController'
 
 // Helpers
 import { isLegendWrapViewport, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { calcInitialHeight, handleAutoPaddingRight } from '../helpers/sizeHelpers'
+import { filterAndShiftLinearDateTicks } from '../helpers/filterAndShiftLinearDateTicks'
 
 // Hooks
 import useMinMax from '../hooks/useMinMax'
 import useReduceData from '../hooks/useReduceData'
 import useRightAxis from '../hooks/useRightAxis'
-import useScales, { getTickValues, filterAndShiftLinearDateTicks } from '../hooks/useScales'
+import useScales, { getTickValues } from '../hooks/useScales'
+
 import getTopAxis from '../helpers/getTopAxis'
 import { useTooltip as useCoveTooltip } from '../hooks/useTooltip'
 import { useEditorPermissions } from './EditorPanel/useEditorPermissions'
@@ -43,7 +47,6 @@ import Annotation from './Annotations'
 import { BlurStrokeText } from '@cdc/core/components/BlurStrokeText'
 import { countNumOfTicks } from '../helpers/countNumOfTicks'
 import HoverLine from './HoverLine/HoverLine'
-import BrushChart from './BrushChart'
 
 type LinearChartProps = {
   parentWidth: number
@@ -94,7 +97,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     tableData,
     transformedData: data,
     seriesHighlight,
-    brushConfig
+    
   } = useContext(ConfigContext)
 
   // CONFIG
@@ -208,10 +211,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
       ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime()
       : d[config.runtime.originalXAxis.dataKey]
   const getYAxisData = (d, seriesKey) => d[seriesKey]
-  const xAxisDataMapped =
-    config.brush.active && brushConfig.data?.length
-      ? brushConfig.data.map(d => getXAxisData(d))
-      : data.map(d => getXAxisData(d))
+  const xAxisDataMapped = data.map(d => getXAxisData(d))
   const section = config.orientation === 'horizontal' || config.visualizationType === 'Forest Plot' ? 'yAxis' : 'xAxis'
   const properties = {
     data,
@@ -418,8 +418,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     const topLabelOnGridline = topYLabelRef.current && yAxis.labelsAboveGridlines
 
     // Heights to add
-    const brushHeight = brush?.active ? brush?.height + brush?.height : 0
-    const brushHeightWithMargin = config.brush?.active ? brushHeight + brushHeight : 0
+
+    const brushHeight = 25
+    const brushHeightWithMargin = config.xAxis.brushActive ? brushHeight + brushHeight : 0
     const forestRowsHeight = isForestPlot ? config.data.length * forestPlot.rowHeight : 0
     const topLabelOnGridlineHeight = topLabelOnGridline ? topYLabelRef.current.getBBox().height : 0
     const additionalHeight = axisBottomHeight + brushHeightWithMargin + forestRowsHeight + topLabelOnGridlineHeight
@@ -447,7 +448,15 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     const legendIsLeftOrRight =
       legend?.position !== 'top' && legend?.position !== 'bottom' && !isLegendWrapViewport(currentViewport)
     legendRef.current.style.transform = legendIsLeftOrRight ? `translateY(${topLabelOnGridlineHeight}px)` : 'none'
-  }, [axisBottomRef.current, config, bottomLabelStart, brush, currentViewport, topYLabelRef.current, initialHeight])
+  }, [
+    axisBottomRef.current,
+    config,
+    bottomLabelStart,
+    config.xAxis.brushActive,
+    currentViewport,
+    topYLabelRef.current,
+    initialHeight
+  ])
 
   useEffect(() => {
     if (lastMaxValue.current === maxValue) return
@@ -745,8 +754,19 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               showTooltip={showTooltip}
             />
           )}
-          {visualizationType === 'Box Plot' && (
-            <BoxPlot
+          {visualizationType === 'Box Plot' && config.orientation === 'vertical' && (
+            <BoxPlotVertical
+              seriesScale={seriesScale}
+              xMax={xMax}
+              yMax={yMax}
+              min={min}
+              max={max}
+              xScale={xScale}
+              yScale={yScale}
+            />
+          )}
+          {visualizationType === 'Box Plot' && config.orientation === 'horizontal' && (
+            <BoxPlotHorizontal
               seriesScale={seriesScale}
               xMax={xMax}
               yMax={yMax}
@@ -864,7 +884,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             />
           )}
           {/*Brush chart */}
-          {config.brush.active && config.xAxis.type !== 'categorical' && <BrushChart xMax={xMax} yMax={yMax} />}
+          {config.xAxis.brushActive && config.xAxis.type !== 'categorical' && <BrushChart xMax={xMax} yMax={yMax} />}
           {/* Line chart */}
           {/* TODO: Make this just line or combo? */}
           {!['Paired Bar', 'Box Plot', 'Area Chart', 'Scatter Plot', 'Deviation Bar', 'Forecasting', 'Bar'].includes(
@@ -1028,13 +1048,22 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                         stroke='#000'
                       />
                     )}
-                    {yScale.domain()[0] < 0 && (
+                    {orientation === 'vertical' && yScale.domain()[0] < 0 && (
+                      // draw from the Left of the chart …
                       <Line
                         from={{ x: props.axisFromPoint.x, y: yScale(0) }}
                         to={{ x: xMax, y: yScale(0) }}
                         stroke='#333'
                       />
                     )}
+                    {orientation === 'horizontal' && xScale.domain()[0] < 0 && (
+                      <Line
+                        // draw from the top of the char
+                        from={{ x: xScale(0), y: 0 }}
+                        to={{ x: xScale(0), y: yMax }}
+                        stroke='#333'
+                      />
+                    )}
                     {visualizationType === 'Bar' && orientation === 'horizontal' && xScale.domain()[0] < 0 && (
                       <Line
                         from={{ x: xScale(0), y: 0 }}
@@ -1079,6 +1108,25 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                           )}
 
                           {orientation === 'horizontal' &&
+                            visualizationType === 'Box Plot' &&
+                            config.yAxis.labelPlacement === 'On Date/Category Axis' &&
+                            !config.yAxis.hideLabel && (
+                              <Text
+                                x={tick.to.x}
+                                y={yScale(tick.value) + yScale.bandwidth() / 2}
+                                transform={`rotate(${
+                                  config.orientation === 'horizontal' ? config.runtime.yAxis.tickRotation || 0 : 0
+                                }, ${tick.to.x}, ${tick.to.y})`}
+                                verticalAnchor={'middle'}
+                                textAnchor={'end'}
+                                fontSize={tickLabelFontSize}
+                              >
+                                {tick.formattedValue}
+                              </Text>
+                            )}
+
+                          {orientation === 'horizontal' &&
+                            visualizationType !== 'Box Plot' &&
                             visualizationSubType !== 'stacked' &&
                             config.yAxis.labelPlacement === 'On Date/Category Axis' &&
                             !config.yAxis.hideLabel && (