@cdc/chart 4.25.6 → 4.25.8

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

@@ -11,7 +11,7 @@ import { Bar, AreaStack } from '@visx/shape'
 import { Group } from '@visx/group'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
-const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug }) => {
+const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff }) => {
   // import data from context
   let { transformedData, config, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
   const data = config.brush?.active && config.brush.data?.length ? config.brush.data : transformedData

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

@@ -9,24 +9,20 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 import * as allCurves from '@visx/curve'
 import { AreaClosed, LinePath, Bar } from '@visx/shape'
 import { Group } from '@visx/group'
-import { bisector } from 'd3-array'
 
 const AreaChart = props => {
-  const { xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug, children } = props
+  const { xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff } = props
   // import data from context
   let {
-    transformedData,
+    transformedData: data,
     config,
     handleLineType,
     parseDate,
-    formatDate,
-    formatNumber,
+
     seriesHighlight,
     colorScale,
-    rawData,
-    brushConfig
+    rawData
   } = useContext(ConfigContext)
-  const data = config.brush?.active && brushConfig.data?.length ? brushConfig.data : transformedData
 
   if (!data) return
 

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)
 
@@ -113,9 +115,15 @@ export const BarChartHorizontal = () => {
                     numbericBarHeight = 25
                   }
                   let barY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(scaleVal)
-                  const defaultBarWidth = Math.abs(xScale(bar.value) - xScale(scaleVal))
+                  let defaultBarWidth = Math.abs(xScale(bar.value) - xScale(scaleVal))
                   const isPositiveBar = bar.value >= 0 && isNumber(bar.value)
 
+                  const MINIMUM_BAR_HEIGHT = 3
+                  if (isPositiveBar && barGroup.bars.length === 1 && defaultBarWidth < MINIMUM_BAR_HEIGHT) {
+                    defaultBarWidth = MINIMUM_BAR_HEIGHT
+                    barY = yScale(0) - MINIMUM_BAR_HEIGHT
+                  }
+
                   const barX = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(scaleVal)
                   const yAxisValue = formatNumber(bar.value, 'left')
                   const xAxisValue =
@@ -164,7 +172,7 @@ export const BarChartHorizontal = () => {
                     </li></ul>`
 
                   // configure colors
-                  let labelColor = '#000000'
+                  let labelColor = APP_FONT_COLOR
                   labelColor = HighLightedBarUtils.checkFontColor(yAxisValue, highlightedBarValues, labelColor) // Set if background is transparent'
                   let barColor =
                     config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key]
@@ -182,7 +190,7 @@ export const BarChartHorizontal = () => {
                   const borderColor = isHighlightedBar
                     ? highlightedBarColor
                     : config.barHasBorder === 'true'
-                    ? '#000'
+                    ? APP_FONT_COLOR
                     : 'transparent'
                   const borderWidth = isHighlightedBar
                     ? highlightedBar.borderWidth
@@ -262,6 +270,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
@@ -281,7 +304,7 @@ export const BarChartHorizontal = () => {
                               : pd.symbol === 'Double Asterisk'
                               ? barHeight
                               : barHeight / 1.5
-                          const fillColor = pd.displayGray ? '#8b8b8a' : '#000'
+                          const fillColor = pd.displayGray ? '#8b8b8a' : APP_FONT_COLOR
                           return (
                             <Text // prettier-ignore
                               key={index}
@@ -301,7 +324,7 @@ export const BarChartHorizontal = () => {
                           )
                         })}
 
-                        {!config.isLollipopChart && (
+                        {!config.isLollipopChart && !hasConfidenceInterval && (
                           <Text // prettier-ignore
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
@@ -315,6 +338,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}
@@ -334,7 +372,7 @@ export const BarChartHorizontal = () => {
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
                             y={0}
-                            fill={'#000000'}
+                            fill={APP_FONT_COLOR}
                             dx={textPaddingLollipop}
                             textAnchor={textAnchorLollipop}
                             verticalAnchor='middle'

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

@@ -137,7 +137,7 @@ const BarChartStackedHorizontal = () => {
                           <Text
                             x={`${bar.x + (config.isLollipopChart ? 15 : 5)}`} // padding
                             y={bar.y + bar.height * 1.2}
-                            fill={'#000000'}
+                            fill={APP_FONT_COLOR}
                             textAnchor='start'
                             verticalAnchor='start'
                           >

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

@@ -16,6 +16,7 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 import isNumber from '@cdc/core/helpers/isNumber'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
+import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 // Third party libraries
 import chroma from 'chroma-js'
 // Types
@@ -45,6 +46,7 @@ export const BarChartVertical = () => {
   const {
     colorScale,
     config,
+    currentViewport,
     dashboardConfig,
     tableData,
     formatDate,
@@ -123,8 +125,20 @@ export const BarChartVertical = () => {
                     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 defaultBarHeight = Math.abs(yScale(bar.value) - yScale(scaleVal))
+                  let defaultBarY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
+
+                  const MINIMUM_BAR_HEIGHT = 3
+                  if (
+                    bar.value >= 0 &&
+                    isNumber(bar.value) &&
+                    barGroup.bars.length === 1 &&
+                    defaultBarHeight < MINIMUM_BAR_HEIGHT
+                  ) {
+                    defaultBarHeight = MINIMUM_BAR_HEIGHT
+                    defaultBarY = yScale(0) - MINIMUM_BAR_HEIGHT
+                  }
+
                   let barWidth = config.isLollipopChart ? lollipopBarWidth : seriesScale.bandwidth()
                   let barX =
                     bar.x +
@@ -159,7 +173,7 @@ export const BarChartVertical = () => {
                     yAxisValue
                   })
                   // configure colors
-                  let labelColor = '#000000'
+                  let labelColor = APP_FONT_COLOR
                   labelColor = HighLightedBarUtils.checkFontColor(yAxisValue, highlightedBarValues, labelColor) // Set if background is transparent'
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
@@ -254,6 +268,8 @@ export const BarChartVertical = () => {
 
                   const BAR_LABEL_PADDING = 10
 
+                  const LABEL_FONT_SIZE = isMobileFontViewport(currentViewport) ? 13 : 16
+
                   return (
                     <Group display={hideGroup} key={`${barGroup.index}--${index}`}>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
@@ -288,6 +304,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
@@ -338,6 +369,7 @@ export const BarChartVertical = () => {
                           y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
+                          fontSize={LABEL_FONT_SIZE}
                         >
                           {testZeroValue(bar.value) ? '' : barDefaultLabel}
                         </Text>
@@ -348,7 +380,7 @@ export const BarChartVertical = () => {
                           y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
-                          fontSize={config.isLollipopChart ? null : barWidth / 2}
+                          fontSize={config.isLollipopChart ? null : LABEL_FONT_SIZE}
                         >
                           {absentDataLabel}
                         </Text>

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/Brush/BrushChart.tsx

@@ -6,28 +6,36 @@ import ConfigContext from '../../ConfigContext'
 import { Text } from '@visx/text'
 import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
-import { isDateScale } from '@cdc/core/helpers/cove/date'
-export interface ZoomBrushProps {
+export interface BrushChartProps {
   xMax: number
   yMax: number
   brushPosition: { start: { x: number }; end: { x: number } }
   onBrushChange: (bounds: any) => void
   brushKey: number
+  brushHandleProps: { startValue: string; endValue: string; endPos: number; startPos: number }
+  brushRef: React.RefObject<BrushRef>
 }
 
-const ZoomBrush: FC<ZoomBrushProps> = ({ xMax, yMax, brushPosition, onBrushChange, brushKey }) => {
-  const { tableData, config, parseDate, dashboardConfig } = useContext(ConfigContext)
-  const brushRef = useRef(null)
+const BrushChart: FC<BrushChartProps> = ({
+  xMax,
+  yMax,
+  brushPosition,
+  onBrushChange,
+  brushKey,
+  brushHandleProps,
+  brushRef
+}) => {
+  const { tableData, config, dashboardConfig } = useContext(ConfigContext)
   const dataKey = config.xAxis.dataKey
   const borderRadius = 15
   const mappedDates: string[] = tableData.map(row => row[dataKey])
   const brushheight = 25
   const DASHBOARD_MARGIN = 50
   const BRUSH_HEIGHT_MULTIPLIER = 1.5
-
+  const range = config?.xAxis?.sortByRecentDate ? [xMax, 0] : [0, xMax]
   const xScale = scaleBand<string>({
-    domain: mappedDates,
-    range: [0, xMax],
+    domain: config?.xAxis?.sortByRecentDate ? mappedDates.reverse() : mappedDates,
+    range: range,
     paddingInner: 0.1,
     paddingOuter: 0.1
   })
@@ -52,6 +60,16 @@ const ZoomBrush: FC<ZoomBrushProps> = ({ xMax, yMax, brushPosition, onBrushChang
     <Group left={config.yAxis.size} top={calculateGroupTop()}>
       <rect fill='#949494' width={xMax} height={25} rx={borderRadius} pointerEvents='none' />
       <Brush
+        disableDraggingOverlay={false}
+        renderBrushHandle={props => (
+          <BrushHandle
+            left={Number(config.runtime.yAxis.size)}
+            pixelDistance={brushHandleProps.endPos - brushHandleProps.startPos}
+            textProps={brushHandleProps}
+            isBrushing={brushRef.current?.state.isBrushing}
+            {...props}
+          />
+        )}
         innerRef={brushRef}
         key={brushKey}
         xScale={xScale}
@@ -64,10 +82,47 @@ const ZoomBrush: FC<ZoomBrushProps> = ({ xMax, yMax, brushPosition, onBrushChang
         initialBrushPosition={brushPosition}
         selectedBoxStyle={style}
         onChange={onBrushChange}
-        disableDraggingOverlay={true}
+        useWindowMoveEvents={true}
       />
     </Group>
   )
 }
 
-export default ZoomBrush
+export default BrushChart
+
+const BrushHandle = props => {
+  const { x, y, isBrushing, className, textProps } = props
+  const pathWidth = 8
+
+  // Flip the SVG path horizontally for the left handle
+  const isLeft = className.includes('left')
+  const transform = isLeft ? 'scale(-1, 1)' : 'translate(0,0)'
+  const textAnchor = isLeft ? 'end' : 'start'
+  const tooltipText = isLeft ? ` Drag edges to focus on a specific segment ` : ''
+  const textFontSize = APP_FONT_SIZE / 1.4
+  const textWidth = getTextWidth(textProps.startValue, `${textFontSize}px`)
+  const textPosLeft = x > 0 ? 0 : 55
+  const textPosRight = y < textProps.xMax ? 0 : -50
+  return (
+    <Group left={x + pathWidth / 2} top={-2}>
+      <Text
+        pointerEvents='visiblePainted'
+        dominantBaseline='hanging'
+        x={isLeft ? textPosLeft : textPosRight}
+        y={25}
+        verticalAnchor='start'
+        textAnchor={textAnchor}
+        fontSize={textFontSize}
+      >
+        {isLeft ? textProps.startValue : textProps.endValue}
+      </Text>
+      <path
+        cursor='ew-resize'
+        d='M0.5,10A6,6 0 0 1 6.5,16V14A6,6 0 0 1 0.5,20ZM2.5,18V12M4.5,18V12'
+        fill='#297EF1'
+        strokeWidth='1'
+        transform={transform}
+      />
+    </Group>
+  )
+}