@cdc/chart 4.23.10 → 4.24.1

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

@@ -1,20 +1,69 @@
-import React, { useContext } from 'react'
-import ConfigContext from '../ConfigContext'
-import { useBarChart } from '../hooks/useBarChart'
+import React, { useContext, useState } from 'react'
+import ConfigContext from '../../../ConfigContext'
+import { type ChartContext } from '../../../types/ChartContext'
+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 { useHighlightedBars } from '../../../hooks/useHighlightedBars'
+import { FaStar } from 'react-icons/fa'
+import Regions from './../../Regions'
 
 // third party
 import chroma from 'chroma-js'
+import BarChartContext, { type BarChartContextValues } from './context'
+
+export const BarChartVertical = () => {
+  const { xScale, yScale, xMax, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
+
+  const [barWidth, setBarWidth] = useState(0)
+  const [totalBarsInGroup, setTotalBarsInGroup] = useState(0)
+
+  // prettier-ignore
+  const {
+    applyRadius,
+    assignColorsToValues,
+    barBorderWidth,
+    generateIconSize,
+    getAdditionalColumn,
+    getHighlightedBarByValue,
+    getHighlightedBarColorByValue,
+    lollipopBarWidth,
+    lollipopShapeSize,
+    onMouseLeaveBar,
+    onMouseOverBar,
+    section
+  } = useBarChart()
+
+  // prettier-ignore
+  const {
+    colorScale,
+    config,
+    dashboardConfig,
+    formatDate,
+    formatNumber,
+    getXAxisData,
+    getYAxisData,
+    isNumber,
+    parseDate,
+    seriesHighlight,
+    setSharedFilter,
+    transformedData,
+  } = useContext<ChartContext>(ConfigContext)
 
-export const BarChartVertical = props => {
-  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 { 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 +82,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 +104,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 +113,16 @@ export const BarChartVertical = props => {
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
                   const borderRadius = applyRadius(newIndex)
+                  // tooltips
 
-                  let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
+                  const additionalColTooltip = getAdditionalColumn(bar.key, data[barGroup.index][config.runtime.originalXAxis.dataKey])
                   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>
+                  ${additionalColTooltip ? '<li class="tooltip-body ">' + additionalColTooltip + '</li>' : ''}
                     </li></ul>`
 
                   // configure colors
@@ -84,19 +137,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
+                    }
 
-                  const background = () => {
-                    if (isRegularLollipopColor) return barColor
-                    if (isTwoToneLollipopColor) return chroma(barColor).brighten(1)
-                    if (isHighlightedBar) return '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 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 +214,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 +242,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 +275,7 @@ export const BarChartVertical = props => {
                         )}
                         {config.isLollipopChart && config.lollipopShape === 'square' && (
                           <rect
+                            display={displaylollipopShape}
                             x={offset - lollipopBarWidth / 2}
                             y={barY}
                             width={lollipopShapeSize}
@@ -197,6 +323,8 @@ export const BarChartVertical = props => {
               )
             })
           : ''}
+
+        <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={totalBarsInGroup} />
       </Group>
     )
   )

package/src/components/BarChart/components/BarChart.jsx

@@ -0,0 +1,39 @@
+import React, { useContext } from 'react'
+
+// visx
+import { Group } from '@visx/group'
+import { Bar } from '@visx/shape'
+
+// cdc
+import BarChartType from './BarChartType'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import ConfigContext from '../../../ConfigContext'
+import BarChartContext from './context'
+
+const BarChart = ({ xScale, yScale, seriesScale, xMax, yMax, handleTooltipMouseOver, handleTooltipMouseOff, handleTooltipClick }) => {
+  const { transformedData: data, config } = useContext(ConfigContext)
+
+  const contextValues = {
+    xScale,
+    yScale,
+    xMax,
+    yMax,
+    seriesScale
+  }
+
+  return (
+    <ErrorBoundary component='BarChart'>
+      <BarChartContext.Provider value={contextValues}>
+        <Group left={parseFloat(config.runtime.yAxis.size)}>
+          <BarChartType.StackedVertical />
+          <BarChartType.StackedHorizontal />
+          <BarChartType.Vertical />
+          <BarChartType.Horizontal />
+          <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>
+      </BarChartContext.Provider>
+    </ErrorBoundary>
+  )
+}
+
+export default BarChart

package/src/components/{BarChartType.jsx → BarChart/components/BarChartType.jsx}

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import BarChartStackedVertical from './BarChart.StackedVertical'
 import BarChartStackedHorizontal from './BarChart.StackedHorizontal'
 import BarChartVertical from './BarChart.Vertical'

package/src/components/BarChart/components/context.tsx

@@ -0,0 +1,13 @@
+import { createContext } from 'react'
+
+const BarChartContext = createContext(null)
+
+export type BarChartContextValues = {
+  xMax: number
+  yMax: number
+  xScale: Function
+  yScale: Function
+  seriesScale: Function
+}
+
+export default BarChartContext

package/src/components/BarChart/index.tsx

@@ -0,0 +1,3 @@
+import BarChart from './components/BarChart'
+
+export default BarChart

package/src/components/{BoxPlot.jsx → BoxPlot/BoxPlot.jsx}

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react'
 import { BoxPlot } from '@visx/stats'
 import { Group } from '@visx/group'
-import ConfigContext from '../ConfigContext'
+import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 

package/src/components/BoxPlot/index.tsx

@@ -0,0 +1,3 @@
+import BoxPlot from './BoxPlot'
+
+export default BoxPlot

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')}