@cdc/chart 4.24.7 → 4.24.9

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

@@ -78,9 +78,14 @@ export const BarChartVertical = () => {
         >
           {barGroups => {
             return barGroups.map((barGroup, index) => (
-              <Group className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${config.orientation}`} key={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`} id={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`} left={barGroup.x0}>
+              <Group
+                className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${config.orientation}`}
+                key={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`}
+                id={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`}
+                left={barGroup.x0}
+              >
                 {barGroup.bars.map((bar, index) => {
-                  const scaleVal = config.useLogScale ? 0.1 : 0
+                  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
@@ -94,7 +99,8 @@ export const BarChartVertical = () => {
                   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]
+                  const xAxisValue =
+                    config.runtime[section].type === 'date' ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey])) : data[barGroup.index][config.runtime.originalXAxis.dataKey]
 
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
@@ -113,7 +119,6 @@ export const BarChartVertical = () => {
                   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)
-                  barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor) // Color code by category
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
                   const isHighlightedBar = highlightedBarValues?.includes(xAxisValue)
@@ -156,13 +161,16 @@ export const BarChartVertical = () => {
                         : colorScale(config.runtime.seriesLabels[bar.key])
 
                       if (isRegularLollipopColor) _barColor = barColor
-                      if (isTwoToneLollipopColor) _barColor = chroma(barColor).brighten(1)
+
                       if (isHighlightedBar) _barColor = 'transparent'
+                      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 we're highlighting a bar make it invisible since it gets a border
                     if (isHighlightedBar) _barColor = 'transparent'
@@ -216,6 +224,7 @@ export const BarChartVertical = () => {
                           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 fillColor = pd.displayGray ? '#8b8b8a' : '#000'
 
                           return (
                             <Text // prettier-ignore
@@ -226,7 +235,7 @@ export const BarChartVertical = () => {
                               x={barX + barWidth / 2}
                               y={barY}
                               verticalAnchor={verticalAnchor}
-                              fill={labelColor}
+                              fill={fillColor}
                               textAnchor='middle'
                               fontSize={`${iconSize}px`}
                             >
@@ -263,7 +272,7 @@ export const BarChartVertical = () => {
                             cx={barX + lollipopShapeSize / 3.5}
                             cy={bar.y}
                             r={lollipopShapeSize / 2}
-                            fill={barColor}
+                            fill={getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key]))}
                             key={`circle--${bar.index}`}
                             data-tooltip-html={tooltip}
                             data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
@@ -277,7 +286,7 @@ export const BarChartVertical = () => {
                             y={barY}
                             width={lollipopShapeSize}
                             height={lollipopShapeSize}
-                            fill={barColor}
+                            fill={getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key]))}
                             key={`circle--${bar.index}`}
                             data-tooltip-html={tooltip}
                             data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}

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

@@ -5,7 +5,7 @@ interface BarConfigProps {
   bar?: { [key: string]: any }
   isNumber?: Function
   config: { [key: string]: any }
-  getTextWidth: Function
+  getTextWidth: (a: string, b: string) => string
   barWidth: number
   isVertical: boolean
 }
@@ -20,7 +20,6 @@ export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, i
   let barLabel = ''
   let isSuppressed = false
   let showMissingDataLabel = false
-  let showZeroValueDataLabel = false
   const showSuppressedSymbol = config.general.showSuppressedSymbol
 
   config.preliminaryData.forEach(pd => {
@@ -41,23 +40,15 @@ export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, i
   // Handle undefined, null, or non-calculable bar.value
   if (!isSuppressed && !isNumber(bar.value) && config.general.showMissingDataLabel) {
     const labelWidth = getTextWidth(barLabel, `normal ${barWidth / 2}px sans-serif`)
-    const labelFits = labelWidth < barWidth && barWidth > 10
+    const labelFits = Number(labelWidth) < barWidth && barWidth > 10
     showMissingDataLabel = true
     barHeight = labelFits ? heightMini : 0
     barWidthHorizontal = heightMini
   }
-  // handle zero values
-  if (!isSuppressed && String(bar.value) === '0' && config.general.showZeroValueDataLabel) {
-    const labelWidth = getTextWidth(barLabel, `normal ${barWidth / 2}px sans-serif`)
-    const labelFits = labelWidth < barWidth && barWidth > 10
-    barHeight = config.isLollipopChart ? heightMini * 2 : !config.isLollipopChart && labelFits ? heightMini : 0
-    barWidthHorizontal = heightMini
-    showZeroValueDataLabel = true
-  }
 
   const getBarY = (defaultBarY, yScale) => {
     // calculate Y position of small bars (suppressed,N/A,Zero valued) bars
-    if (isSuppressed || showMissingDataLabel || showZeroValueDataLabel) {
+    if (isSuppressed || showMissingDataLabel) {
       if (config.isLollipopChart) {
         return yScale - heightMini * 2
       } else {
@@ -77,12 +68,10 @@ 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 the config is set to specifically show zero values, set the label to '0'
-    if (showZeroValueDataLabel) 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`)
-    const labelFits = labelWidth < barWidth && barWidth > 10
+    const labelFits = Number(labelWidth) < barWidth && barWidth > 10
     if (config.isLollipopChart) {
       return label
     } else {
@@ -90,7 +79,7 @@ export const getBarConfig = ({ bar, defaultBarHeight, defaultBarWidth, config, i
     }
   }
 
-  return { barWidthHorizontal, barHeight, isSuppressed, showMissingDataLabel, showZeroValueDataLabel, getBarY, getAbsentDataLabel }
+  return { barWidthHorizontal, barHeight, isSuppressed, showMissingDataLabel, getBarY, getAbsentDataLabel }
 }
 
 export const testZeroValue = value => {

package/src/components/BrushChart.tsx

@@ -0,0 +1,205 @@
+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'
+interface BrushChartProps {
+  xMax: number
+  yMax: number
+}
+
+const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
+  const { tableData, config, setBrushConfig, getTextWidth, dashboardConfig, formatDate } = useContext(ConfigContext)
+  const [brushState, setBrushState] = useState({ isBrushing: false, selection: [] })
+  const [brushKey, setBrushKey] = useState(0)
+  const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
+  const isDashboardFilters = sharedFilters?.length > 0
+  const [tooltip, showTooltip] = useState(false)
+  const svgRef = useRef()
+  const brushheight = 25
+  const borderRadius = 15
+  const xDomain = d3.extent(tableData, d => new Date(d[config.runtime.originalXAxis.dataKey]))
+
+  const xScale = d3.scaleTime().domain(xDomain).range([0, xMax])
+
+  const tooltipText = 'Drag edges to focus on a specific segment '
+  const textWidth = getTextWidth(tooltipText, `normal ${16 / 1.1}px sans-serif`)
+
+  const calculateGroupTop = (): number => {
+    return Number(yMax) + config.xAxis.axisBBox + brushheight * 1.5
+  }
+
+  const handleMouseOver = () => {
+    // show tooltip text only once before brush triggered
+    if (brushState.selection[0] === 0 && xMax === brushState.selection[1]) {
+      showTooltip(true)
+    }
+  }
+  const handleMouseLeave = () => {
+    // hide tooltip text if brush was triggered
+    if (brushState.selection[0] !== 0 || brushState.selection[1] !== xMax) {
+      showTooltip(false)
+    }
+    showTooltip(false)
+  }
+
+  const brushHandle = (g, selection, firstDate, lastDate) => {
+    const textWidth = getTextWidth(firstDate, `normal ${16 / 1.1}px sans-serif`)
+    return g
+      .selectAll('.handle--custom')
+      .data([{ side: 'left' }, { side: 'right' }])
+      .join(enter => {
+        const handleGroup = enter.append('g').attr('class', 'handle--custom')
+        handleGroup
+          .append('text')
+          .attr('x', d => (d.side === 'left' ? 0 : -textWidth))
+          .attr('y', 30)
+          .text(d => (d.side === 'left' ? firstDate : lastDate))
+          .attr('font-size', '13px')
+        return handleGroup
+      })
+
+      .attr('display', 'block')
+      .attr('transform', selection === null ? null : (_, i) => `translate(${selection[i]},${'10'})`)
+  }
+
+  const initializeBrush = () => {
+    const svg = d3.select(svgRef.current).attr('overflow', 'visible')
+
+    svg
+      .append('rect') // prettier-ignore
+      .attr('fill', '#949494')
+      .attr('stroke', '#c5c5c5')
+      .attr('stroke-width', 2)
+      .attr('ry', borderRadius)
+      .attr('rx', borderRadius)
+      .attr('height', brushheight)
+      .attr('width', xMax)
+
+    const brushHandler = event => {
+      const selection = event?.selection
+      //if (!selection) return
+      let isUserBrushing = event.type === 'brush' && selection && selection.length > 0
+
+      const [x0, x1] = selection.map(value => xScale.invert(value))
+
+      // filter and update brush state directly
+      const newFilteredData = tableData.filter(d => {
+        const dateValue = d[config.runtime.originalXAxis.dataKey]
+        // Check if the date value exists and is valid
+        if (!dateValue) {
+          return false
+        }
+
+        const parsedDate = new Date(dateValue)
+
+        // Check if parsedDate is a valid date
+        if (isNaN(parsedDate.getTime())) {
+          return false
+        }
+
+        // Check if the date falls within the selection range
+        if (parsedDate >= x0 && parsedDate <= x1) {
+          return true
+        }
+      })
+
+      const firstDate = (newFilteredData.length && newFilteredData[0][config?.runtime?.originalXAxis?.dataKey]) ?? ''
+      const lastDate =
+        (newFilteredData.length &&
+          newFilteredData[newFilteredData.length - 1][config?.runtime?.originalXAxis?.dataKey]) ??
+        ''
+      // add custom blue colored handlers to each corners of brush
+      svg.selectAll('.handle--custom').remove()
+      // append handler
+      svg.call(brushHandle, selection, firstDate, lastDate)
+
+      setBrushConfig({
+        active: config.brush.active,
+        isBrushing: isUserBrushing,
+        data: newFilteredData
+      })
+      setBrushState({
+        isBrushing: true,
+        selection
+      })
+    }
+
+    const brush = d3
+      .brushX()
+      .extent([
+        [0, 0],
+        [xMax, 25]
+      ]) // brush extent
+      .on('start brush end', brushHandler)
+
+    const defaultSelection = [0, xMax]
+    let brushGroup = svg.append('g').call(brush).call(brush.move, defaultSelection)
+    brushGroup.select('.overlay').style('pointer-events', 'none')
+
+    brushGroup
+      .selectAll('.selection')
+      .attr('fill', '#474747')
+      .attr('fill-opacity', 1)
+      .attr('rx', borderRadius)
+      .attr('ry', borderRadius)
+  }
+
+  useEffect(() => {
+    const isFiltersActive = config.filters?.some(filter => filter.active)
+    const isExclusionsActive = config.exclusions?.active
+
+    if ((isFiltersActive || isExclusionsActive || isDashboardFilters) && config.brush?.active) {
+      setBrushKey(prevKey => prevKey + 1)
+      setBrushConfig(prev => {
+        return {
+          ...prev,
+          data: tableData
+        }
+      })
+    }
+    return () =>
+      setBrushConfig(prev => {
+        return {
+          ...prev,
+          data: []
+        }
+      })
+  }, [config.filters, config.exclusions, config.brush?.active, isDashboardFilters])
+  // Initialize brush when component is first rendered
+
+  // reset brush on keychange
+  useEffect(() => {
+    if (brushKey) {
+      initializeBrush()
+    }
+  }, [brushKey])
+
+  if (!brushState.isBrushing) {
+    initializeBrush()
+  }
+
+  return (
+    <Group
+      onMouseLeave={handleMouseLeave}
+      onMouseOver={handleMouseOver}
+      className='brush-container'
+      left={Number(config.runtime.yAxis.size)}
+      top={calculateGroupTop()}
+    >
+      <Text
+        pointerEvents='visiblePainted'
+        display={tooltip ? 'block' : 'none'}
+        fontSize={16}
+        x={(Number(xMax) - Number(textWidth)) / 2}
+        y={-10}
+      >
+        Drag edges to focus on a specific segment
+      </Text>
+      <svg width={'100%'} height={brushheight * 3} ref={svgRef}></svg>
+    </Group>
+  )
+}
+
+export default BrushChart