@cdc/chart 4.23.4 → 4.23.5

package/src/components/BarChart.jsx

@@ -6,13 +6,14 @@ import chroma from 'chroma-js'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../ConfigContext'
 import { BarStackHorizontal } from '@visx/shape'
+import { useHighlightedBars } from '../hooks/useHighlightedBars'
 
 export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getXAxisData, getYAxisData, animatedChart, visible }) {
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, formatDate, isNumber, getTextWidth, parseDate } = useContext(ConfigContext)
-
+  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, tableData, formatDate, isNumber, getTextWidth, parseDate } = useContext(ConfigContext)
+  const { HighLightedBarUtils } = useHighlightedBars(config)
   const { orientation, visualizationSubType } = config
   const isHorizontal = orientation === 'horizontal'
-
+  const barBorderWidth = 1
   const lollipopBarWidth = config.lollipopSize === 'large' ? 7 : config.lollipopSize === 'medium' ? 6 : 5
   const lollipopShapeSize = config.lollipopSize === 'large' ? 14 : config.lollipopSize === 'medium' ? 12 : 10
 
@@ -25,12 +26,11 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
   const tipRounding = config.tipRounding
   const radius = config.roundingStyle === 'standard' ? '8px' : config.roundingStyle === 'shallow' ? '5px' : config.roundingStyle === 'finger' ? '15px' : '0px'
   const stackCount = config.runtime.seriesKeys.length
-  const barBorderWidth = 1
   const fontSize = { small: 16, medium: 18, large: 20 }
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
 
   const applyRadius = index => {
-    if (index === undefined || index === null || !isRounded) return
+    if (index === undefined || index === null || !isRounded) return {}
     let style = {}
 
     if ((isStacked && index + 1 === stackCount) || !isStacked) {
@@ -48,6 +48,27 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
     return style
   }
 
+  const assignColorsToValues = () => {
+    const palettesArr = colorPalettes[config.palette]
+    const values = tableData.map(d => {
+      return d[config.legend.colorCode]
+    })
+    // Map to hold unique values and their  colors
+    let colorMap = new Map()
+    // Resultant array to hold colors  to the values
+    let result = []
+
+    for (let i = 0; i < values.length; i++) {
+      // If value not in map, add it and assign a color
+      if (!colorMap.has(values[i])) {
+        colorMap.set(values[i], palettesArr[colorMap.size % palettesArr.length])
+      }
+      // push the colosr to the result array
+      result.push(colorMap.get(values[i]))
+    }
+    return result
+  }
+
   const updateBars = defaultBars => {
     // function updates  stacked && regular && lollipop horizontal bars
     if (config.visualizationType !== 'Bar' && !isHorizontal) return defaultBars
@@ -167,7 +188,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       `}
                       </style>
                       <Group key={`bar-stack-${barStack.index}-${bar.index}`} id={`barStack${barStack.index}-${bar.index}`} className='stack vertical'>
-                        <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barThickness * bar.index + offset} y={bar.y - 5} fill={bar.color} textAnchor='middle'>
+                        <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barThickness * bar.index + offset} y={bar.y - 5} fill={'#000'} textAnchor='middle'>
                           {yAxisValue}
                         </Text>
                         <foreignObject
@@ -313,23 +334,44 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                     left={config.runtime.horizontal ? 0 : (xMax / barGroups.length) * barGroup.index}
                   >
                     {barGroup.bars.map((bar, index) => {
+                      const scaleVal = config.useLogScale ? 0.1 : 0
+                      const getHighlightedBarColorByValue = value => {
+                        const match = config?.highlightedBarValues.filter(item => {
+                          if (!item.value) return
+                          return config.xAxis.type === 'date' ? formatDate(parseDate(item.value)) === value : item.value === value
+                        })[0]
+
+                        if (!match?.color) return `rgba(255, 102, 1)`
+                        return match.color
+                      }
+
+                      const getHighlightedBarByValue = value => {
+                        const match = config?.highlightedBarValues.filter(item => {
+                          if (!item.value) return
+                          return config.xAxis.type === 'date' ? formatDate(parseDate(item.value)) === value : item.value === value
+                        })[0]
+
+                        if (!match?.color) return false
+                        return match
+                      }
+
+                      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 = orientation === 'horizontal' ? config.barHeight : isNumber(Math.abs(yScale(bar.value) - yScale(0))) ? Math.abs(yScale(bar.value) - yScale(0)) : 0
+                      let barHeight = orientation === 'horizontal' ? config.barHeight : isNumber(Math.abs(yScale(bar.value) - yScale(scaleVal))) ? Math.abs(yScale(bar.value) - yScale(scaleVal)) : 0
                       let barY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
                       let barGroupWidth = ((config.runtime.horizontal ? yMax : xMax) / barGroups.length) * (config.barThickness || 0.8)
                       let offset = (((config.runtime.horizontal ? yMax : xMax) / barGroups.length) * (1 - (config.barThickness || 0.8))) / 2
                       const barX = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(0)
-                      const barWidthHorizontal = Math.abs(xScale(bar.value) - xScale(0))
+                      const barWidthHorizontal = Math.abs(xScale(bar.value) - xScale(scaleVal))
                       // ! Unsure if this should go back.
                       if (config.isLollipopChart) {
                         offset = (config.runtime.horizontal ? yMax : xMax) / barGroups.length / 2 - lollipopBarWidth / 2
                       }
-                      const set = new Set()
-                      data.forEach(d => set.add(d[config.legend.colorCode]))
-                      const uniqValues = Array.from(set)
-
-                      let palette = colorPalettes[config.palette].slice(0, uniqValues.length)
+                      let palette = assignColorsToValues()
 
                       let barWidth = config.isLollipopChart ? lollipopBarWidth : barGroupWidth / barGroup.bars.length
                       let barColor = config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key] ? colorScale(config.runtime.seriesLabels[bar.key]) : colorScale(bar.key)
@@ -349,7 +391,6 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       }
 
                       const barPosition = bar.value < 0 ? 'below' : 'above'
-                      const textX = barPosition === 'below' ? 0 : 0
 
                       // check if bar text/value string fits into  each bars.
                       let textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
@@ -357,10 +398,15 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       let labelColor = '#000000'
 
                       // Set label color
-                      if (chroma.contrast(labelColor, barColor) < 4.9) {
-                        textFits ? (labelColor = '#FFFFFF') : '#000000'
+                      if (barColor && labelColor) {
+                        if (chroma.contrast(labelColor, barColor) < 4.9) {
+                          labelColor = textFits ? '#FFFFFF' : '#000000'
+                        }
                       }
 
+                      // Set if background is transparent'
+                      labelColor = HighLightedBarUtils.checkFontColor(yAxisValue, highlightedBarValues, labelColor)
+
                       // control text position
                       let textAnchor = textFits ? 'end' : 'start'
                       let textAnchorLollipop = 'start'
@@ -395,6 +441,26 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       ${xAxisTooltip}
                         </div>`
 
+                      const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
+                      const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
+                      const isHighlightedBar = config.orientation === 'vertical' ? highlightedBarValues?.includes(xAxisValue) : highlightedBarValues?.includes(yAxisValue)
+                      const highlightedBarColor = config.orientation === 'vertical' ? getHighlightedBarColorByValue(xAxisValue) : getHighlightedBarColorByValue(yAxisValue)
+                      const highlightedBar = config.orientation === 'vertical' ? getHighlightedBarByValue(xAxisValue) : getHighlightedBarByValue(yAxisValue)
+
+                      const background = isRegularLollipopColor ? barColor : isTwoToneLollipopColor ? chroma(barColor).brighten(1) : isHighlightedBar ? 'transparent' : barColor
+
+                      const borderColor = isHighlightedBar ? highlightedBarColor : config.barHasBorder === 'true' ? '#000' : 'transparent'
+
+                      const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
+
+                      const finalStyle = {
+                        background,
+                        borderColor,
+                        borderStyle: 'solid',
+                        borderWidth,
+                        ...style
+                      }
+
                       return (
                         <Group key={`${barGroup.index}--${index}--${orientation}`}>
                           {/* This feels gross but inline transition was not working well*/}
@@ -414,11 +480,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                               y={config.runtime.horizontal ? barWidth * bar.index : barY}
                               width={config.runtime.horizontal ? barWidthHorizontal : barWidth}
                               height={isHorizontal && !config.isLollipopChart ? barWidth : isHorizontal && config.isLollipopChart ? lollipopBarWidth : barHeight}
-                              style={{
-                                background: config.isLollipopChart && config.lollipopColorStyle === 'regular' ? barColor : config.isLollipopChart && config.lollipopColorStyle === 'two-tone' ? chroma(barColor).brighten(1) : barColor,
-                                border: `${config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`,
-                                ...style
-                              }}
+                              style={finalStyle}
                               opacity={transparentBar ? 0.5 : 1}
                               display={displayBar ? 'block' : 'none'}
                               data-tooltip-html={tooltip}
@@ -437,7 +499,6 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                                 {xAxisValue}
                               </Text>
                             )}
-                            ;
                             {orientation === 'horizontal' && config.isLollipopChart && displayNumbersOnBar && (
                               <Text
                                 display={displayBar ? 'block' : 'none'}
@@ -461,13 +522,12 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                                   : formatNumber(data[barGroup.index][config.runtime.originalXAxis.dataKey])}
                               </Text>
                             )}
-                            ;
+
                             {orientation === 'vertical' && (
-                              <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barWidth * (bar.index + 0.5) + offset} y={barY - 5} fill={barColor} textAnchor='middle'>
+                              <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>
                             )}
-                            ;
                             {config.isLollipopChart && config.lollipopShape === 'circle' && (
                               <circle
                                 cx={orientation === 'horizontal' ? bar.y : barWidth * (barGroup.bars.length - bar.index - 1) + (isLabelBelowBar && orientation === 'horizontal' ? 0 : offset) + lollipopShapeSize / 3.5}

package/src/components/DeviationBar.jsx

@@ -6,38 +6,7 @@ import { Text } from '@visx/text'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import chroma from 'chroma-js'
 
-// create function to position text based where bar is located left/or right
-function getTextProps(isLollipopChart, textFits, lollipopShapeSize, fill) {
-  if (isLollipopChart) {
-    return {
-      right: {
-        textAnchor: 'start',
-        dx: lollipopShapeSize + 6,
-        fill: '#000000'
-      },
-      left: {
-        textAnchor: 'end',
-        dx: -lollipopShapeSize,
-        fill: '#000000'
-      }
-    }
-  } else {
-    return {
-      right: {
-        textAnchor: textFits ? 'end' : 'start',
-        dx: textFits ? -6 : 6,
-        fill: textFits ? fill : '#000000'
-      },
-      left: {
-        textAnchor: textFits ? 'start' : 'end',
-        dx: textFits ? 6 : -6,
-        fill: textFits ? fill : '#000000'
-      }
-    }
-  }
-}
-
-export function DeviationBar({ height, xScale }) {
+export default function DeviationBar({ height, xScale }) {
   const { transformedData: data, config, formatNumber, twoColorPalette, getTextWidth, updateConfig, parseDate, formatDate } = useContext(ConfigContext)
 
   if (!config || config?.series?.length !== 1 || config.orientation !== 'horizontal') return
@@ -189,3 +158,34 @@ export function DeviationBar({ height, xScale }) {
     </ErrorBoundary>
   )
 }
+
+// create function to position text based where bar is located left/or right
+function getTextProps(isLollipopChart, textFits, lollipopShapeSize, fill) {
+  if (isLollipopChart) {
+    return {
+      right: {
+        textAnchor: 'start',
+        dx: lollipopShapeSize + 6,
+        fill: '#000000'
+      },
+      left: {
+        textAnchor: 'end',
+        dx: -lollipopShapeSize,
+        fill: '#000000'
+      }
+    }
+  } else {
+    return {
+      right: {
+        textAnchor: textFits ? 'end' : 'start',
+        dx: textFits ? -6 : 6,
+        fill: textFits ? fill : '#000000'
+      },
+      left: {
+        textAnchor: textFits ? 'start' : 'end',
+        dx: textFits ? 6 : -6,
+        fill: textFits ? fill : '#000000'
+      }
+    }
+  }
+}