@cdc/chart 4.26.6 → 4.26.10

package/src/components/BarChart/components/BarChart.StackedVertical.tsx

@@ -1,25 +1,39 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext } from 'react'
 import ConfigContext from '../../../ConfigContext'
 import { BarStack } from '@visx/shape'
 import { Group } from '@visx/group'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import BarChartContext from './context'
-import Regions from '../../Regions'
 import { addMinimumBarHeights } from '../helpers'
 
 import createBarElement from '@cdc/core/components/createBarElement'
+import { getSeriesValueLabel } from '@cdc/core/helpers/getSeriesName'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
 import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
 
+export const getStackedVerticalBarThickness = ({
+  isDateAxisType,
+  dateScaleWidth,
+  xMax,
+  barCount,
+  barThickness
+}: {
+  isDateAxisType: boolean
+  dateScaleWidth: number
+  xMax: number
+  barCount: number
+  barThickness: number
+}) => (isDateAxisType ? dateScaleWidth : barThickness * (xMax / barCount))
+
 const BarChartStackedVertical = () => {
-  const [barWidth, setBarWidth] = useState(0)
   const { xScale, yScale, seriesScale, xMax, yMax, barChart } = useContext(BarChartContext)
   const {
     isHorizontal,
     barBorderWidth,
     hoveredBar,
     getAdditionalColumn,
+    formatTooltipValue,
     onMouseLeaveBar,
     onMouseOverBar,
     barStackedSeriesKeys
@@ -44,7 +58,7 @@ const BarChartStackedVertical = () => {
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':
@@ -89,8 +103,9 @@ const BarChartStackedVertical = () => {
                   id={patternId}
                   height={size}
                   width={size}
-                  fill={pattern.color}
-                  strokeWidth={0.25}
+                  fill='transparent'
+                  stroke={pattern.color}
+                  strokeWidth={0.75}
                 />
               )
             default:
@@ -127,15 +142,19 @@ const BarChartStackedVertical = () => {
                     config.legend.behavior === 'highlight' ||
                     seriesHighlight.length === 0 ||
                     seriesHighlight.indexOf(bar.key) !== -1
-                  let barThickness = isDateAxisType
-                    ? seriesScale.range()[1] - seriesScale.range()[0]
-                    : xMax / barStack.bars.length
-                  if (config.runtime.xAxis.type !== 'date') barThickness = config.barThickness * barThickness
+                  const barThickness = getStackedVerticalBarThickness({
+                    isDateAxisType,
+                    dateScaleWidth: seriesScale.range()[1] - seriesScale.range()[0],
+                    xMax,
+                    barCount: barStack.bars.length,
+                    barThickness: config.barThickness
+                  })
                   // tooltips
                   const rawXValue = bar.bar.data[config.runtime.xAxis.dataKey]
                   const xAxisValue = isDateAxisType ? formatDate(parseDate(rawXValue)) : rawXValue
                   const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
                   if (!yAxisValue) return
+                  const tooltipValue = formatTooltipValue(bar.key, rawXValue, yAxisValue, bar.index)
                   const barX =
                     xScale(isDateAxisType ? parseDate(rawXValue) : rawXValue) -
                     (isDateTimeScaleAxisType ? barThickness / 2 : 0)
@@ -143,7 +162,7 @@ const BarChartStackedVertical = () => {
                     ? `${config.runtime.xAxis.label}: ${xAxisValue}`
                     : xAxisValue
                   const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
-                  const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
+                  const tooltipBody = `${getSeriesValueLabel(bar.key, config)}: ${tooltipValue}`
                   const tooltip = buildSeriesTooltipListHtml({
                     config,
                     colorScale,
@@ -153,8 +172,6 @@ const BarChartStackedVertical = () => {
                     extraRows: additionalColTooltip ? [additionalColTooltip] : []
                   })
 
-                  setBarWidth(barThickness)
-
                   // Check if this bar should use a pattern
                   const patternUrl = getPatternUrlForBar({
                     patterns: config.legend?.patterns,
@@ -239,19 +256,6 @@ const BarChartStackedVertical = () => {
               })
           }}
         </BarStack>
-        <Regions
-          xScale={xScale}
-          yMax={yMax}
-          barWidth={barWidth}
-          totalBarsInGroup={1}
-          xMax={xMax}
-          handleTooltipMouseOff={() => {}}
-          handleTooltipMouseOver={() => {}}
-          handleTooltipClick={() => {}}
-          tooltipData={null}
-          showTooltip={() => {}}
-          hideTooltip={() => {}}
-        />
       </>
     )
   )

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

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext } from 'react'
 // Local contexts
 import ConfigContext from '../../../ConfigContext'
 import BarChartContext, { type BarChartContextValues } from './context'
@@ -10,28 +10,29 @@ import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { BarGroup } from '@visx/shape'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
-// Local components
-import Regions from '../../Regions'
 // CDC core components and helpers
 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 { getSeriesValueLabel } from '@cdc/core/helpers/getSeriesName'
 // Types
 import { type ChartContext } from '../../../types/ChartContext'
-import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
+import { getPortionPatternRenderData } from '../helpers/portionPattern'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
 import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
+import { BarPortionPatternOverlay } from './PortionPatternOverlay'
 
 const BarChartVertical = () => {
-  const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph, barChart } =
+  const { xScale, yScale, yMax, seriesScale, convertLineToBarGraph, barChart } =
     useContext<BarChartContextValues>(BarChartContext)
   const {
     assignColorsToValues,
     barBorderWidth,
     getAdditionalColumn,
+    formatTooltipValue,
     getHighlightedBarByValue,
     getHighlightedBarColorByValue,
     labelFontSize,
@@ -42,16 +43,12 @@ const BarChartVertical = () => {
     section
   } = barChart
 
-  const [barWidth, setBarWidth] = useState(0)
-  const [totalBarsInGroup, setTotalBarsInGroup] = useState(0)
-
   const {
     colorScale,
     config,
     currentViewport,
     vizViewport,
     dashboardConfig,
-    tableData,
     formatDate,
     formatNumber,
     parseDate,
@@ -64,13 +61,7 @@ const BarChartVertical = () => {
 
   const root = document.documentElement
 
-  let data = transformedData
-  // check if user add suppression
-  const isSuppressionActive = config.preliminaryData.some(pd => pd.value && pd.type === 'suppression')
-  // if suppression active use table data (filtere | excluded) but non cleaned
-  if (isSuppressionActive) {
-    data = tableData
-  }
+  const data = transformedData
 
   const hasConfidenceInterval =
     config.confidenceKeys.upper &&
@@ -90,7 +81,7 @@ const BarChartVertical = () => {
       <defs>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':
@@ -135,8 +126,9 @@ const BarChartVertical = () => {
                   id={patternId}
                   height={size}
                   width={size}
-                  fill={pattern.color}
-                  strokeWidth={0.25}
+                  fill='transparent'
+                  stroke={pattern.color}
+                  strokeWidth={0.75}
                 />
               )
             default:
@@ -216,12 +208,12 @@ const BarChartVertical = () => {
                     bar.x +
                     (config.isLollipopChart ? (barGroupWidth / barGroup.bars.length - lollipopBarWidth) / 2 : 0) -
                     (config.xAxis.type === 'date-time' ? barGroupWidth / 2 : 0)
-                  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(dataValue)) : dataValue
 
+                  const tooltipValue = formatTooltipValue(bar.key, dataValue, yAxisValue, barGroup.index)
+
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
                   // tooltips
@@ -229,7 +221,7 @@ const BarChartVertical = () => {
                   let xAxisTooltip = config.runtime.xAxis.label
                     ? `${config.runtime.xAxis.label}: ${xAxisValue}`
                     : xAxisValue
-                  const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
+                  const tooltipBody = `${getSeriesValueLabel(bar.key, config)}: ${tooltipValue}`
                   const tooltip = buildSeriesTooltipListHtml({
                     config,
                     colorScale,
@@ -309,8 +301,7 @@ const BarChartVertical = () => {
                       if (isRegularLollipopColor) _barColor = barColor
 
                       if (isHighlightedBar) _barColor = 'transparent'
-                      if (config.legend.colorCode)
-                        _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
+                      if (config.legend.colorCode) _barColor = assignColorsToValues(barGroup.index, barColor)
                       if (isTwoToneLollipopColor) {
                         _barColor = getLollipopStemColor(barColor)
                       }
@@ -321,8 +312,7 @@ const BarChartVertical = () => {
                     if (isTwoToneLollipopColor) {
                       _barColor = getLollipopStemColor(barColor)
                     }
-                    if (config.legend.colorCode)
-                      _barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor)
+                    if (config.legend.colorCode) _barColor = assignColorsToValues(barGroup.index, barColor)
 
                     // if we're highlighting a bar make it invisible since it gets a border
                     if (isHighlightedBar) _barColor = 'transparent'
@@ -340,6 +330,15 @@ const BarChartVertical = () => {
                     allowNonSeriesFieldMatch: !config.series || config.series.length <= 1
                   })
                   const baseBackground = getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key]))
+                  const portionPatternRenderData = getPortionPatternRenderData({
+                    config,
+                    orientation: 'vertical',
+                    bounds: { x: barX, y: barY, width: barWidth, height: barHeight },
+                    patterns: config.legend?.patterns,
+                    datum,
+                    seriesKey: bar.key,
+                    totalValue: bar.value
+                  })
 
                   // Confidence Interval Variables
                   const tickWidth = 5
@@ -420,6 +419,19 @@ const BarChartVertical = () => {
                             }
                           })}
 
+                        {portionPatternRenderData && (
+                          <BarPortionPatternOverlay
+                            config={config}
+                            index={newIndex}
+                            renderData={portionPatternRenderData}
+                            transformOrigin={`0 ${barY + barHeight}px`}
+                            style={{
+                              opacity: transparentBar ? 0.2 : 1,
+                              display: displayBar ? 'block' : 'none'
+                            }}
+                          />
+                        )}
+
                         {(absentDataLabel || isSuppressed) && (
                           <rect
                             x={barX}
@@ -552,8 +564,6 @@ const BarChartVertical = () => {
             ))
           }}
         </BarGroup>
-
-        <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={totalBarsInGroup} xMax={xMax} />
       </Group>
     )
   )

package/src/components/BarChart/components/PortionPatternOverlay.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import createBarElement from '@cdc/core/components/createBarElement'
+
+import { type ChartConfig } from '../../../types/ChartConfig'
+import { type PortionPatternRenderData } from '../helpers/portionPattern'
+
+type PortionPatternBoundaryProps = {
+  renderData: PortionPatternRenderData
+  brush?: boolean
+  style?: React.CSSProperties
+}
+
+type BarPortionPatternOverlayProps = PortionPatternBoundaryProps & {
+  config: ChartConfig
+  index: number
+  transformOrigin: string
+}
+
+export const PortionPatternBoundary = ({ renderData, brush = false, style }: PortionPatternBoundaryProps) => {
+  if (!renderData.patternColor || !renderData.boundaryGeometry) return null
+
+  return (
+    <line
+      className={`pattern-overlay__boundary${brush ? ' pattern-overlay__boundary--brush' : ''}`}
+      {...renderData.boundaryGeometry}
+      stroke={renderData.patternColor}
+      strokeWidth={0.75}
+      vectorEffect='non-scaling-stroke'
+      pointerEvents='none'
+      aria-hidden='true'
+      style={style}
+    />
+  )
+}
+
+export const BarPortionPatternOverlay = ({
+  config,
+  index,
+  renderData,
+  transformOrigin,
+  style
+}: BarPortionPatternOverlayProps) => (
+  <>
+    {createBarElement({
+      config,
+      index: renderData.placement === 'end' ? index : undefined,
+      className: 'pattern-overlay pattern-overlay--portion',
+      background: renderData.patternUrl,
+      borderColor: 'transparent',
+      borderWidth: '0px',
+      ...renderData.geometry,
+      styleOverrides: {
+        transformOrigin,
+        ...style,
+        pointerEvents: 'none'
+      }
+    })}
+    <PortionPatternBoundary renderData={renderData} style={style} />
+  </>
+)

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

@@ -14,6 +14,12 @@ export type BarChartContextValues = {
     assignColorsToValues: Function
     barBorderWidth: number
     getAdditionalColumn: Function
+    formatTooltipValue: (
+      seriesKey: string,
+      xAxisValue: unknown,
+      displayValue: string | number,
+      rowIndex?: number
+    ) => string | number
     getHighlightedBarByValue: Function
     getHighlightedBarColorByValue: Function
     lollipopBarWidth: number

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

@@ -1,28 +1,28 @@
-import _ from 'lodash'
-import { TransformedData } from '../../../types/ChartContext'
-import { ChartConfig } from '../../../types/ChartConfig'
-
-export const getBarData = (config: ChartConfig, data: TransformedData[], hasConfidenceInterval: boolean) => {
-  const dynamicSeries = config.series.find(s => s.dynamicCategory)
-  if (!dynamicSeries) return data
-  const { dynamicCategory, dataKey } = dynamicSeries
-  const xAxisKey = config.runtime.originalXAxis.dataKey
-  const xAxisGroupDataLookup = _.groupBy(data, xAxisKey)
-  return Object.values(xAxisGroupDataLookup).map(group => {
-    return group.reduce((acc, datum) => {
-      const dataValue = datum[dataKey]
-      const dataCategory = datum[dynamicCategory]
-      if (hasConfidenceInterval) {
-        const { lower, upper } = config.confidenceKeys
-        if (!acc.CI) acc.CI = {}
-        const lowerValue = datum[lower]
-        const upperValue = datum[upper]
-        acc.CI[dataCategory] = { lower: lowerValue, upper: upperValue }
-      }
-      acc[dataCategory] = dataValue
-      acc[xAxisKey] = datum[xAxisKey]
-      acc.dynamicData = true
-      return acc
-    }, {})
-  })
-}
+import groupBy from 'lodash/groupBy'
+import { TransformedData } from '../../../types/ChartContext'
+import { ChartConfig } from '../../../types/ChartConfig'
+
+export const getBarData = (config: ChartConfig, data: TransformedData[], hasConfidenceInterval: boolean) => {
+  const dynamicSeries = config.series.find(s => s.dynamicCategory)
+  if (!dynamicSeries) return data
+  const { dynamicCategory, dataKey } = dynamicSeries
+  const xAxisKey = config.runtime.originalXAxis.dataKey
+  const xAxisGroupDataLookup = groupBy(data, xAxisKey)
+  return Object.values(xAxisGroupDataLookup).map(group => {
+    return group.reduce((acc, datum) => {
+      const dataValue = datum[dataKey]
+      const dataCategory = datum[dynamicCategory]
+      if (hasConfidenceInterval) {
+        const { lower, upper } = config.confidenceKeys
+        if (!acc.CI) acc.CI = {}
+        const lowerValue = datum[lower]
+        const upperValue = datum[upper]
+        acc.CI[dataCategory] = { lower: lowerValue, upper: upperValue }
+      }
+      acc[dataCategory] = dataValue
+      acc[xAxisKey] = datum[xAxisKey]
+      acc.dynamicData = true
+      return acc
+    }, {})
+  })
+}

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

@@ -1,5 +1,5 @@
 import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
-import _ from 'lodash'
+import round from 'lodash/round'
 import { ChartConfig } from '../../../types/ChartConfig'
 
 export const getHorizontalBarHeights = <T>(config: Partial<ChartConfig>, bars: (T & { index })[]) => {
@@ -41,7 +41,7 @@ export const getHorizontalBarHeights = <T>(config: Partial<ChartConfig>, bars: (
   // return new updated bars/groupes
   return bars.map((bar, i) => {
     // set bars Y dynamically to handle space between bars
-    const y = bar.index === 0 ? 0 : _.round(totalBarHeight * i)
+    const y = bar.index === 0 ? 0 : round(totalBarHeight * i)
     return { ...bar, y, height: barHeight }
   })
 }

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

@@ -1,9 +1,5 @@
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
-
-type LegendPattern = {
-  dataKey?: string
-  dataValue?: string | number
-}
+import { type LegendPattern } from '../../../types/ChartConfig'
 
 type SeriesLabels = Record<string, string> | undefined
 
@@ -64,6 +60,7 @@ export const getPatternUrl = ({
   for (const patternKey in patterns) {
     if (!Object.prototype.hasOwnProperty.call(patterns, patternKey)) continue
     const pattern = patterns[patternKey]
+    if (pattern.application === 'portion') continue
     const dataKey = normalizeString(pattern.dataKey)
 
     if (!hasPatternValue(pattern.dataValue)) {

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

@@ -125,6 +125,14 @@ export const addMinimumBarHeights = barStacks => {
     const segmentsNeedingAdjustment = segments.filter(segment => segment.height > 0 && segment.height < MIN_BAR_HEIGHT)
     const segmentsToShrink = segments.filter(segment => segment.height > MIN_BAR_HEIGHT)
 
+    if (segments.length === 1 && segmentsNeedingAdjustment.length === 1) {
+      const segment = segmentsNeedingAdjustment[0]
+      const bottom = segment.y + segment.height
+      segment.height = MIN_BAR_HEIGHT
+      segment.y = bottom - MIN_BAR_HEIGHT
+      return
+    }
+
     if (segmentsNeedingAdjustment.length > 0 && segmentsToShrink.length > 0) {
       segmentsNeedingAdjustment.forEach(smallSegment => {
         const heightToAdd = MIN_BAR_HEIGHT - smallSegment.height