@cdc/chart 4.24.10 → 4.24.11

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

@@ -13,32 +13,62 @@ import createBarElement from '@cdc/core/components/createBarElement'
 const BarChartStackedVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
   const { xScale, yScale, seriesScale, xMax, yMax } = useContext(BarChartContext)
-  const { transformedData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } = useContext(ConfigContext)
-  const { isHorizontal, barBorderWidth, applyRadius, hoveredBar, getAdditionalColumn, onMouseLeaveBar, onMouseOverBar, barStackedSeriesKeys } = useBarChart()
+  const { transformedData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } =
+    useContext(ConfigContext)
+  const {
+    isHorizontal,
+    barBorderWidth,
+    applyRadius,
+    hoveredBar,
+    getAdditionalColumn,
+    onMouseLeaveBar,
+    onMouseOverBar,
+    barStackedSeriesKeys
+  } = useBarChart()
   const { orientation } = config
 
   const data = config.brush?.active && config.brush.data?.length ? config.brush.data : transformedData
   const isDateAxisType = config.runtime.xAxis.type === 'date-time' || config.runtime.xAxis.type === 'date'
+  const isDateTimeScaleAxisType = config.runtime.xAxis.type === 'date-time'
 
   return (
     config.visualizationSubType === 'stacked' &&
     !isHorizontal && (
       <>
-        <BarStack data={data} keys={barStackedSeriesKeys} x={d => d[config.runtime.xAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale}>
+        <BarStack
+          data={data}
+          keys={barStackedSeriesKeys}
+          x={d => d[config.runtime.xAxis.dataKey]}
+          xScale={xScale}
+          yScale={yScale}
+          color={colorScale}
+        >
           {barStacks =>
             barStacks.reverse().map(barStack =>
               barStack.bars.map(bar => {
-                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 barThickness = isDateAxisType ? seriesScale.range()[1] - seriesScale.range()[0] : xMax / barStack.bars.length
+                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 barThickness = isDateAxisType
+                  ? seriesScale.range()[1] - seriesScale.range()[0]
+                  : xMax / barStack.bars.length
                 if (config.runtime.xAxis.type !== 'date') barThickness = config.barThickness * 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 barX = xScale(isDateAxisType ? parseDate(rawXValue) : rawXValue) - (isDateAxisType ? barThickness / 2 : 0)
-                const xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
+                const barX =
+                  xScale(isDateAxisType ? parseDate(rawXValue) : rawXValue) -
+                  (isDateTimeScaleAxisType ? barThickness / 2 : 0)
+                const xAxisTooltip = config.runtime.xAxis.label
+                  ? `${config.runtime.xAxis.label}: ${xAxisValue}`
+                  : xAxisValue
                 const additionalColTooltip = getAdditionalColumn(hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
                 const tooltip = `<ul>
@@ -51,7 +81,11 @@ const BarChartStackedVertical = () => {
 
                 return (
                   <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
-                    <Group key={`bar-stack-${barStack.index}-${bar.index}`} id={`barStack${barStack.index}-${bar.index}`} className='stack vertical'>
+                    <Group
+                      key={`bar-stack-${barStack.index}-${bar.index}`}
+                      id={`barStack${barStack.index}-${bar.index}`}
+                      className='stack vertical'
+                    >
                       {createBarElement({
                         config: config,
                         seriesHighlight,

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

@@ -15,11 +15,13 @@ import { BarGroup } from '@visx/shape'
 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'
 // Third party libraries
 import chroma from 'chroma-js'
 // Types
 import { type ChartContext } from '../../../types/ChartContext'
+import _, { has } from 'lodash'
 
 export const BarChartVertical = () => {
   const { xScale, yScale, xMax, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
@@ -42,7 +44,7 @@ export const BarChartVertical = () => {
   } = useBarChart()
 
   // prettier-ignore
-  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, getXAxisData, getYAxisData, isNumber, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig } = useContext<ChartContext>(ConfigContext)
+  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, getXAxisData, getYAxisData, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig } = useContext<ChartContext>(ConfigContext)
   const { HighLightedBarUtils } = useHighlightedBars(config)
   let data = transformedData
   // check if user add suppression
@@ -56,6 +58,34 @@ export const BarChartVertical = () => {
     data = brushConfig.data
   }
 
+  const hasConfidenceInterval = Object.keys(config.confidenceKeys).length > 0
+
+  const getData = () => {
+    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
+      }, {})
+    })
+  }
+
+  const _data = getData()
   return (
     config.visualizationSubType !== 'stacked' &&
     (config.visualizationType === 'Bar' ||
@@ -64,7 +94,7 @@ export const BarChartVertical = () => {
     config.orientation === 'vertical' && (
       <Group>
         <BarGroup
-          data={data}
+          data={_data}
           keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys}
           height={yMax}
           x0={d => {
@@ -87,6 +117,8 @@ export const BarChartVertical = () => {
                 left={barGroup.x0}
               >
                 {barGroup.bars.map((bar, index) => {
+                  const datum = _data[barGroup.index]
+                  const dataValue = datum[config.runtime.originalXAxis.dataKey]
                   const scaleVal = config.yAxis.type === 'logarithmic' ? 0.1 : 0
                   let highlightedBarValues = config.highlightedBarValues
                     .map(item => item.value)
@@ -116,17 +148,12 @@ export const BarChartVertical = () => {
                   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]
+                    config.runtime[section].type === 'date' ? formatDate(parseDate(dataValue)) : dataValue
 
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
                   // tooltips
-                  const additionalColTooltip = getAdditionalColumn(
-                    bar.key,
-                    data[barGroup.index][config.runtime.originalXAxis.dataKey]
-                  )
+                  const additionalColTooltip = getAdditionalColumn(bar.key, dataValue)
                   let xAxisTooltip = config.runtime.xAxis.label
                     ? `${config.runtime.xAxis.label}: ${xAxisValue}`
                     : xAxisValue
@@ -141,10 +168,6 @@ export const BarChartVertical = () => {
                   // configure colors
                   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)
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
                   const isHighlightedBar = highlightedBarValues?.includes(xAxisValue)
@@ -167,10 +190,8 @@ export const BarChartVertical = () => {
                     bar,
                     defaultBarHeight,
                     config,
-                    isNumber,
                     barWidth,
-                    isVertical: true,
-                    yAxisValue
+                    isVertical: true
                   })
 
                   const absentDataLabel = getAbsentDataLabel(yAxisValue)
@@ -225,6 +246,16 @@ export const BarChartVertical = () => {
                     return _barColor
                   }
 
+                  // Confidence Interval Variables
+                  const tickWidth = 5
+                  const xPos = barX + (config.xAxis.type !== 'date-time' ? barWidth / 2 : 0)
+                  const [upperPos, lowerPos] = ['upper', 'lower'].map(position => {
+                    if (!hasConfidenceInterval) return
+                    const d = datum.dynamicData ? datum.CI[bar.key][position] : datum[config.confidenceKeys[position]]
+                    return yScale(d)
+                  })
+                  // End Confidence Interval Variables
+
                   return (
                     <Group key={`${barGroup.index}--${index}`}>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
@@ -353,6 +384,19 @@ export const BarChartVertical = () => {
                             <animate attributeName='height' values={`0, ${lollipopShapeSize}`} dur='2.5s' />
                           </rect>
                         )}
+                        {hasConfidenceInterval && (
+                          <path
+                            key={`confidence-interval-v-${datum[config.runtime.originalXAxis.dataKey]}`}
+                            stroke='#333'
+                            strokeWidth='px'
+                            d={`M${xPos - tickWidth} ${upperPos}
+                                L${xPos + tickWidth} ${upperPos}
+                                M${xPos} ${upperPos}
+                                L${xPos} ${lowerPos}
+                                M${xPos - tickWidth} ${lowerPos}
+                                L${xPos + tickWidth} ${lowerPos}`}
+                          />
+                        )}
                       </Group>
                     </Group>
                   )
@@ -362,32 +406,6 @@ export const BarChartVertical = () => {
           }}
         </BarGroup>
 
-        {Object.keys(config.confidenceKeys).length > 0
-          ? data.map(d => {
-              let xPos, yPos
-              let upperPos
-              let lowerPos
-              let tickWidth = 5
-              xPos = xScale(getXAxisData(d)) + (config.xAxis.type !== 'date-time' ? seriesScale.range()[1] / 2 : 0)
-              upperPos = yScale(getYAxisData(d, config.confidenceKeys.lower))
-              lowerPos = yScale(getYAxisData(d, config.confidenceKeys.upper))
-              return (
-                <path
-                  key={`confidence-interval-v-${yPos}-${d[config.runtime.originalXAxis.dataKey]}`}
-                  stroke='#333'
-                  strokeWidth='px'
-                  d={`
-                    M${xPos - tickWidth} ${upperPos}
-                    L${xPos + tickWidth} ${upperPos}
-                    M${xPos} ${upperPos}
-                    L${xPos} ${lowerPos}
-                    M${xPos - tickWidth} ${lowerPos}
-                    L${xPos + tickWidth} ${lowerPos}`}
-                />
-              )
-            })
-          : ''}
-
         <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={totalBarsInGroup} />
       </Group>
     )

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

@@ -1,11 +1,11 @@
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import isNumber from '@cdc/core/helpers/isNumber'
 
 // Define an interface for the function's parameter
 interface BarConfigProps {
   defaultBarWidth?: number
   defaultBarHeight?: number
   bar?: { [key: string]: any }
-  isNumber?: Function
   config: { [key: string]: any }
   barWidth: number
   isVertical: boolean
@@ -17,7 +17,6 @@ export const getBarConfig = ({
   defaultBarHeight,
   defaultBarWidth,
   config,
-  isNumber,
   barWidth,
   isVertical
 }: BarConfigProps) => {

package/src/components/BoxPlot/BoxPlot.tsx

@@ -0,0 +1,189 @@
+import React, { useContext } from 'react'
+import { BoxPlot } from '@visx/stats'
+import { Group } from '@visx/group'
+import ConfigContext from '../../ConfigContext'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
+import { scaleBand } from '@visx/scale'
+import _ from 'lodash'
+import { max, min, median, quantile } from 'd3-array'
+const CoveBoxPlot = ({ xScale, yScale }) => {
+  const { config, colorScale, seriesHighlight, transformedData: data } = useContext(ConfigContext)
+  const { boxplot } = config
+
+  // tooltips
+  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
+
+  const handleTooltip = (d, key, q1, q3, median, iqr) => {
+    return `
+      <strong>${d.columnCategory}</strong></br>
+       <strong>Key:${key}</strong></br>
+      ${boxplot.labels.q1}: ${q1}<br/>
+      ${boxplot.labels.q3}: ${q3}<br/>
+      ${boxplot.labels.iqr}: ${iqr}<br/>
+      ${boxplot.labels.median}: ${median}
+    `
+  }
+
+  const boxWidth = xScale.bandwidth()
+  const constrainedWidth = Math.min(40, boxWidth)
+  const color_0 = colorPalettesChart[config?.palette][0] ? colorPalettesChart[config?.palette][0] : '#000'
+  const seriesScale = scaleBand({
+    range: [0, config.barThickness * 100 || 1],
+    domain: config.series?.map(item => item?.dataKey)
+  })
+
+  const calculateBoxPlotStats = values => {
+    if (!values || !values.length) return {}
+    const sortedValues = values.sort((a, b) => a - b)
+    return {
+      min: min(values),
+      max: max(values),
+      median: median(values),
+      firstQuartile: quantile(sortedValues, 0.25),
+      thirdQuartile: quantile(sortedValues, 0.75)
+    }
+  }
+
+  const getValuesBySeriesKey = (group: string) => {
+    const allSeriesKeys = config.series.map(item => item?.dataKey)
+    const result = {}
+    const filteredData = data.filter(item => item[config.xAxis.dataKey] === group)
+    allSeriesKeys.forEach(key => {
+      result[key] = filteredData.map(item => item[key])
+    })
+
+    return result
+  }
+
+  interface Plot {
+    columnCategory: string
+    keyValues: { [key: string]: number[] }
+  }
+  const createPlots = data => {
+    const dataKeys = data.map(d => d[config.xAxis.dataKey])
+    const plots: Plot[] = []
+    const groups: string[] = _.uniq(dataKeys)
+    if (groups && groups.length > 0) {
+      groups.forEach(group => {
+        plots.push({
+          columnCategory: group,
+          keyValues: getValuesBySeriesKey(group)
+        })
+      })
+    }
+    return plots
+  }
+
+  return (
+    <ErrorBoundary component='BoxPlot'>
+      <Group left={Number(config.yAxis.size)} className='boxplot' key={`boxplot-group`}>
+        {createPlots(data).map((d, i) => {
+          const offset = boxWidth - constrainedWidth
+          const radius = 4
+
+          return (
+            <Group
+              key={`boxplotplot-${d.columnCategory}`}
+              left={xScale(d.columnCategory) + (xScale.bandwidth() - seriesScale.bandwidth()) / 2}
+            >
+              {config.series.map(item => {
+                const valuesByKey = d.keyValues[item.dataKey]
+                const { min, max, median, firstQuartile, thirdQuartile } = calculateBoxPlotStats(valuesByKey)
+                let iqr = Number(thirdQuartile - firstQuartile).toFixed(config.dataFormat.roundTo)
+
+                const transparentPlot =
+                  config.legend.behavior === 'highlight' &&
+                  seriesHighlight.length > 0 &&
+                  seriesHighlight.indexOf(item.dataKey) === -1
+                const displayPlot =
+                  config.legend.behavior === 'highlight' ||
+                  seriesHighlight.length === 0 ||
+                  seriesHighlight.indexOf(item.dataKey) !== -1
+                const fillOpacity = transparentPlot ? 0.3 : 0.5
+
+                return (
+                  <Group key={`boxplotplot-${item}`}>
+                    {boxplot.plotNonOutlierValues &&
+                      valuesByKey.map((value, index) => {
+                        return (
+                          <circle
+                            display={displayPlot ? 'block' : 'none'}
+                            cx={seriesScale(item.dataKey) + seriesScale.bandwidth() / 2}
+                            cy={yScale(value)}
+                            r={radius}
+                            fill={'#ccc'}
+                            style={{ opacity: fillOpacity, fillOpacity: 1, stroke: 'black' }}
+                            key={`boxplot-${i}--circle-${index}`}
+                          />
+                        )
+                      })}
+                    {displayPlot && (
+                      <BoxPlot
+                        display={displayPlot ? 'block' : 'none'}
+                        data-left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
+                        key={`box-plot-${i}-${item}`}
+                        min={min}
+                        max={max}
+                        left={seriesScale(item.dataKey)}
+                        firstQuartile={firstQuartile}
+                        thirdQuartile={thirdQuartile}
+                        median={median}
+                        boxWidth={seriesScale.bandwidth()}
+                        fill={colorScale(item.dataKey)}
+                        fillOpacity={fillOpacity}
+                        stroke={fillOpacity ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0.1)'}
+                        valueScale={yScale}
+                        outliers={boxplot.plotOutlierValues ? d.columnOutliers : []}
+                        outlierProps={{
+                          style: {
+                            fill: `${color_0}`,
+                            opacity: fillOpacity
+                          }
+                        }}
+                        medianProps={{
+                          style: {
+                            stroke: 'black',
+                            opacity: fillOpacity
+                          }
+                        }}
+                        boxProps={{
+                          style: {
+                            stroke: 'black',
+                            strokeWidth: boxplot.borders === 'true' ? 1 : 0,
+                            opacity: fillOpacity
+                          }
+                        }}
+                        maxProps={{
+                          style: {
+                            stroke: 'black',
+                            opacity: fillOpacity
+                          }
+                        }}
+                        container
+                        containerProps={{
+                          'data-tooltip-html': handleTooltip(
+                            d,
+                            item.dataKey,
+                            firstQuartile,
+                            thirdQuartile,
+                            median,
+                            iqr
+                          ),
+                          'data-tooltip-id': tooltip_id,
+                          tabIndex: -1
+                        }}
+                      />
+                    )}
+                  </Group>
+                )
+              })}
+            </Group>
+          )
+        })}
+      </Group>
+    </ErrorBoundary>
+  )
+}
+
+export default CoveBoxPlot