@cdc/chart 4.23.10 → 4.23.11

package/src/components/{BarChart.Vertical.jsx → BarChart.Vertical.tsx}

@@ -1,20 +1,44 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import ConfigContext from '../ConfigContext'
 import { useBarChart } from '../hooks/useBarChart'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { BarGroup } from '@visx/shape'
 import { useHighlightedBars } from '../hooks/useHighlightedBars'
+import { FaStar } from 'react-icons/fa'
 
 // third party
 import chroma from 'chroma-js'
 
-export const BarChartVertical = props => {
+import { type BarChartProps } from '../types/ChartProps'
+
+export const BarChartVertical = (props: BarChartProps) => {
   const { xScale, yScale, xMax, yMax, seriesScale } = props
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter, isNumber, getXAxisData, getYAxisData } = useContext(ConfigContext)
-  const { barBorderWidth, hasMultipleSeries, applyRadius, updateBars, assignColorsToValues, section, lollipopBarWidth, lollipopShapeSize, getHighlightedBarColorByValue, getHighlightedBarByValue } = useBarChart()
+
+  const [barWidth, setBarWidth] = useState(0)
+  const [totalBarsInGroup, setTotalBarsInGroup] = useState(0)
+
+  const { barBorderWidth, hasMultipleSeries, applyRadius, updateBars, assignColorsToValues, section, lollipopBarWidth, lollipopShapeSize, getHighlightedBarColorByValue, getHighlightedBarByValue, generateIconSize, getAdditionalColumn, hoveredBar, onMouseOverBar, onMouseLeaveBar } = useBarChart()
+
+  // CONTEXT VALUES
+  // prettier-ignore
+  const { colorScale, config, formatDate, formatNumber, getXAxisData, getYAxisData, isNumber, parseDate, seriesHighlight, setSharedFilter, transformedData, dashboardConfig, setSeriesHighlight } = useContext(ConfigContext)
+
+  const { runtime } = config
+
   const { HighLightedBarUtils } = useHighlightedBars(config)
+  const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
 
+  const getIcon = (bar, barWidth) => {
+    let icon = null
+    const iconSize = generateIconSize(barWidth)
+    config.suppressedData?.forEach(d => {
+      if (bar.key === d.column && String(bar.value) === String(d.value) && d.icon) {
+        icon = <FaStar color='#000' size={iconSize} />
+      }
+    })
+    return icon
+  }
   return (
     config.visualizationSubType !== 'stacked' &&
     (config.visualizationType === 'Bar' || config.visualizationType === 'Combo') &&
@@ -33,16 +57,20 @@ export const BarChartVertical = props => {
           }}
         >
           {barGroups => {
-            return updateBars(barGroups).map((barGroup, index) => (
+            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={(xMax / barGroups.length) * barGroup.index}>
                 {barGroup.bars.map((bar, index) => {
                   const scaleVal = config.useLogScale ? 0.1 : 0
+                  const suppresedBarHeight = 20
                   let highlightedBarValues = config.highlightedBarValues.map(item => item.value).filter(item => item !== ('' || undefined))
                   highlightedBarValues = config.xAxis.type === 'date' ? HighLightedBarUtils.formatDates(highlightedBarValues) : highlightedBarValues
                   let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
                   let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
-                  let barHeight = Math.abs(yScale(bar.value) - yScale(scaleVal))
-                  let barY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
+                  let barHeightBase = Math.abs(yScale(bar.value) - yScale(scaleVal))
+                  let barYBase = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
+                  const supprssedBarY = bar.value >= 0 && isNumber(bar.value) ? yScale(scaleVal) - suppresedBarHeight : yScale(0)
+                  const barY = config.suppressedData.some(d => bar.key === d.column && String(bar.value) === String(d.value)) ? supprssedBarY : barYBase
+
                   let barGroupWidth = (xMax / barGroups.length) * (config.barThickness || 0.8)
                   let offset = ((xMax / barGroups.length) * (1 - (config.barThickness || 0.8))) / 2
                   // configure left side offset of lollipop bars
@@ -51,6 +79,8 @@ export const BarChartVertical = props => {
                   }
 
                   let barWidth = config.isLollipopChart ? lollipopBarWidth : barGroupWidth / barGroup.bars.length
+                  setBarWidth(barWidth)
+                  setTotalBarsInGroup(barGroup.bars.length)
 
                   let yAxisValue = formatNumber(bar.value, 'left')
                   let xAxisValue = config.runtime[section].type === 'date' ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey])) : data[barGroup.index][config.runtime.originalXAxis.dataKey]
@@ -58,18 +88,15 @@ export const BarChartVertical = props => {
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
                   const borderRadius = applyRadius(newIndex)
-
-                  let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
+                  // tooltips
+                  const additionalColTooltip = getAdditionalColumn(hoveredBar)
                   let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
-
-                  if (!hasMultipleSeries) {
-                    yAxisTooltip = config.isLegendValue ? `${bar.key}: ${yAxisValue}` : config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
-                  }
+                  const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
 
                   const tooltip = `<ul>
-                  ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[bar.key] || ''}<br/>` : ''}
-                  <li class="tooltip-heading">${yAxisTooltip}</li>
-                  <li class="tooltip-body">${xAxisTooltip}</li>
+                  <li class="tooltip-heading">${xAxisTooltip}</li>
+                  <li class="tooltip-body ">${tooltipBody}</li>
+                   <li class="tooltip-body ">${additionalColTooltip}</li>
                     </li></ul>`
 
                   // configure colors
@@ -84,19 +111,76 @@ export const BarChartVertical = props => {
                   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 barValueLabel = config.suppressedData.some(d => bar.key === d.column && bar.value === d.value) ? '' : yAxisValue
+                  let barHeight = config.suppressedData.some(d => bar.key === d.column && String(bar.value) === String(d.value)) ? suppresedBarHeight : barHeightBase
+                  const displaylollipopShape = config.suppressedData.some(d => bar.key === d.column && bar.value === d.value) ? 'none' : 'block'
+
+                  const getBarBackgroundColor = (barColor: string, filteredOutColor?: string): string => {
+                    let _barColor = barColor
+                    let _filteredOutColor = filteredOutColor || '#f2f2f2'
+
+                    /**
+                     * If this is a dashboard using a setBy column on the bars
+                     * color the bar that is using the filter with barColor and
+                     * color the filteredOut (typically gray) bars with the filteredOutColor
+                     */
+                    if (dashboardConfig && dashboardConfig.dashboard.sharedFilters) {
+                      const { sharedFilters } = dashboardConfig.dashboard
+
+                      _barColor = sharedFilters.map(_sharedFilter => {
+                        if (_sharedFilter.setBy === config.uid) {
+                          // If the current filter is the reset filter item.
+                          if (_sharedFilter.resetLabel === _sharedFilter.active) return barColor
+                          // If the current filter is the bars
+                          if (_sharedFilter.active === transformedData[barGroup.index][config.xAxis.dataKey]) return barColor
+                          return _filteredOutColor
+                        } else {
+                          // If the setBy isn't the config.uid return the original barColor
+                          return barColor
+                        }
+                      })[0]
+
+                      if (isRegularLollipopColor) _barColor = barColor
+                      if (isTwoToneLollipopColor) _barColor = chroma(barColor).brighten(1)
+                      if (isHighlightedBar) _barColor = 'transparent'
+                      return _barColor
+                    }
+
+                    // if this is a two tone lollipop slightly lighten the bar.
+                    if (isTwoToneLollipopColor) _barColor = chroma(barColor).brighten(1)
+
+                    // if we're highlighting a bar make it invisible since it gets a border
+                    if (isHighlightedBar) _barColor = 'transparent'
+                    return _barColor
+                  }
 
-                  const background = () => {
-                    if (isRegularLollipopColor) return barColor
-                    if (isTwoToneLollipopColor) return chroma(barColor).brighten(1)
-                    if (isHighlightedBar) return 'transparent'
-                    return barColor
+                  const getLeft = () => {
+                    if (barWidth < 50 && barWidth > 15) return barWidth / 2.5
+                    if (barWidth < 15 && barWidth > 5) return barWidth / 6
+                    if (barWidth < 5) return 0
+                    return barWidth / 2
                   }
+                  const iconStyle: { [key: string]: any } = {
+                    position: 'absolute',
+                    top: bar.value >= 0 && isNumber(bar.value) ? -suppresedBarHeight : undefined,
+                    bottom: bar.value >= 0 && isNumber(bar.value) ? undefined : `-${suppresedBarHeight}px`,
+                    left: getLeft()
+                  }
+
+                  if (config.isLollipopChart) {
+                    iconStyle.left = 0
+                    iconStyle.transform = `translateX(0)`
+                  }
+
                   const finalStyle = {
-                    background: background(),
+                    background: getBarBackgroundColor(barColor),
                     borderColor,
                     borderStyle: 'solid',
-                    borderWidth,
-                    ...borderRadius
+                    borderWidth: `${borderWidth}px`,
+                    width: barWidth,
+                    height: barHeight,
+                    ...borderRadius,
+                    cursor: dashboardConfig ? 'pointer' : 'default'
                   }
 
                   return (
@@ -104,22 +188,24 @@ export const BarChartVertical = props => {
                       {/* This feels gross but inline transition was not working well*/}
                       <style>
                         {`
-                        .linear #barGroup${barGroup.index},
-                        .Combo #barGroup${barGroup.index} {
+                        .linear #barGroup${barGroup.index} div,
+                        .Combo #barGroup${barGroup.index} div {
                           transform-origin: 0 ${barY + barHeight}px;
                         }
                       `}
                       </style>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
                         <foreignObject
+                          onMouseOver={() => onMouseOverBar(xAxisValue, bar.key)}
+                          onMouseLeave={onMouseLeaveBar}
+                          style={{ overflow: 'visible', transition: 'all 0.2s linear' }}
                           id={`barGroup${barGroup.index}`}
                           key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
                           x={barWidth * bar.index + offset}
                           y={barY}
                           width={barWidth}
                           height={barHeight}
-                          style={finalStyle}
-                          opacity={transparentBar ? 0.5 : 1}
+                          opacity={transparentBar ? 0.2 : 1}
                           display={displayBar ? 'block' : 'none'}
                           data-tooltip-html={tooltip}
                           data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
@@ -130,14 +216,27 @@ export const BarChartVertical = props => {
                               setSharedFilter(config.uid, bar)
                             }
                           }}
-                        ></foreignObject>
+                        >
+                          <div style={{ position: 'relative' }}>
+                            <div style={iconStyle}>{getIcon(bar, barWidth)}</div>
+                            <div style={{ ...finalStyle }}></div>
+                          </div>
+                        </foreignObject>
 
-                        <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barWidth * (bar.index + 0.5) + offset} y={barY - 5} fill={labelColor} textAnchor='middle'>
-                          {yAxisValue}
+                        <Text // prettier-ignore
+                          display={config.labels && displayBar ? 'block' : 'none'}
+                          opacity={transparentBar ? 0.5 : 1}
+                          x={barWidth * (bar.index + 0.5) + offset}
+                          y={barY - 5}
+                          fill={labelColor}
+                          textAnchor='middle'
+                        >
+                          {barValueLabel}
                         </Text>
 
                         {config.isLollipopChart && config.lollipopShape === 'circle' && (
                           <circle
+                            display={displaylollipopShape}
                             cx={barWidth * (barGroup.bars.length - bar.index - 1) + offset + lollipopShapeSize / 3.5}
                             cy={bar.y}
                             r={lollipopShapeSize / 2}
@@ -150,6 +249,7 @@ export const BarChartVertical = props => {
                         )}
                         {config.isLollipopChart && config.lollipopShape === 'square' && (
                           <rect
+                            display={displaylollipopShape}
                             x={offset - lollipopBarWidth / 2}
                             y={barY}
                             width={lollipopShapeSize}
@@ -197,6 +297,50 @@ export const BarChartVertical = props => {
               )
             })
           : ''}
+
+        {config.regions && config.visualizationType !== 'Combo'
+          ? config.regions.map(region => {
+              if (!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
+
+              let from
+              let to
+              let width
+
+              if (config.xAxis.type === 'date') {
+                from = xScale(parseDate(region.from).getTime()) - (barWidth * totalBarsInGroup) / 2
+                to = xScale(parseDate(region.to).getTime()) + (barWidth * totalBarsInGroup) / 2
+
+                width = to - from
+              }
+
+              if (config.xAxis.type === 'categorical') {
+                from = xScale(region.from)
+                to = xScale(region.to)
+                width = to - from
+              }
+
+              if (!from) return null
+              if (!to) return null
+
+              return (
+                <Group className='regions' left={0} key={region.label}>
+                  <path
+                    stroke='#333'
+                    d={`M${from} -5
+                          L${from} 5
+                          M${from} 0
+                          L${to} 0
+                          M${to} -5
+                          L${to} 5`}
+                  />
+                  <rect x={from} y={0} width={width} height={yMax} fill={region.background} opacity={0.3} />
+                  <Text x={from + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>
+                    {region.label}
+                  </Text>
+                </Group>
+              )
+            })
+          : ''}
       </Group>
     )
   )

package/src/components/BarChart.jsx

@@ -21,7 +21,7 @@ const BarChart = ({ xScale, yScale, seriesScale, xMax, yMax, handleTooltipMouseO
         <BarChartType.Horizontal xScale={xScale} yScale={yScale} xMax={xMax} yMax={yMax} seriesScale={seriesScale} />
 
         {/* tooltips */}
-        <Bar key={'bars'} width={Number(xMax)} height={Number(yMax)} fill={false ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />
+        <Bar key={'bars'} display={config.tooltips.singleSeries ? 'none' : 'block'} width={Number(xMax)} height={Number(yMax)} fill={'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />
       </Group>
     </ErrorBoundary>
   )

package/src/components/DeviationBar.jsx

@@ -125,7 +125,7 @@ export default function DeviationBar({ height, xScale }) {
     })
   }, [config.animate, config, animatedChart])
 
-  if (!config || config?.series?.length !== 1) return <></>
+  // if (!config || config?.series?.length !== 1) return <></>
 
   return (
     <ErrorBoundary component='Deviation Bar'>
@@ -185,10 +185,11 @@ export default function DeviationBar({ height, xScale }) {
                 y={barY}
                 width={barWidth}
                 height={barHeight}
-                style={{ border: `${borderWidth}px solid #333`, backgroundColor: barColor[barPosition], ...borderRadius }}
                 data-tooltip-html={tooltip}
                 data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-              />
+              >
+                <div style={{ width: barWidth, height: barHeight, border: `${borderWidth}px solid #333`, backgroundColor: barColor[barPosition], ...borderRadius }}></div>
+              </foreignObject>
               {config.yAxis.displayNumbersOnBar && (
                 <Text verticalAnchor='middle' x={textX} y={textY} {...textProps[barPosition]}>
                   {formatNumber(d[seriesKey], 'left')}