@cdc/chart 4.24.9 → 4.24.11

package/src/components/Annotations/components/AnnotationDraggable.tsx

@@ -32,11 +32,8 @@ const Annotations = ({ xScale, yScale, xScaleAnnotation, xMax, svgRef, onDragSta
   // prettier-ignore
   const {
     config,
-    currentViewport,
     dimensions,
-    isDraggingAnnotation,
     isEditor,
-    isLegendBottom,
     updateConfig
   } = useContext(ConfigContext)
 

package/src/components/Annotations/components/AnnotationDropdown.tsx

@@ -30,7 +30,7 @@ const AnnotationDropdown = () => {
   }
 
   const handleSectionClasses = () => {
-    const classes = [`data-table-container`, viewport, `d-block`, `d-lg-none`]
+    const classes = [`data-table-container`, viewport, `d-block`, `d-lg-none`, `w-100`]
 
     if (config.general.showAnnotationDropdown) {
       classes.push('d-lg-block')

package/src/components/Axis/Categorical.Axis.tsx

@@ -7,9 +7,10 @@ import ConfigContext from '../../ConfigContext'
 import chroma from 'chroma-js'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { useBarChart } from '../../hooks/useBarChart'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
-  const { config, getTextWidth } = useContext(ConfigContext)
+  const { config } = useContext(ConfigContext)
   const { fontSize } = useBarChart()
 
   const { orientation } = config
@@ -82,7 +83,14 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
   const keys = Object.keys(transformedData[0])
   return (
     <Group left={leftSize - xScale.bandwidth()} top={0}>
-      <BarStack data={transformedData} keys={keys} x={() => xScale(xScaleValue)} xScale={xScale} yScale={yScale} color={colorScale}>
+      <BarStack
+        data={transformedData}
+        keys={keys}
+        x={() => xScale(xScaleValue)}
+        xScale={xScale}
+        yScale={yScale}
+        color={colorScale}
+      >
         {barStacks =>
           barStacks.map(barStack =>
             barStack.bars.map(bar => {
@@ -96,7 +104,11 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
                     </li></ul>`
               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({
                       type: 'axisBar',
                       config: config,
@@ -126,7 +138,13 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
                       {bar.key}
                     </Text>
                     {/* gridLines */}
-                    {config.runtime.yAxis.gridLines && <Line from={{ x: bar.x + xScale.bandwidth(), y: bar.y }} to={{ x: xMax + xScale.bandwidth(), y: bar.y }} stroke='rgba(0,0,0,0.3)' />}
+                    {config.runtime.yAxis.gridLines && (
+                      <Line
+                        from={{ x: bar.x + xScale.bandwidth(), y: bar.y }}
+                        to={{ x: xMax + xScale.bandwidth(), y: bar.y }}
+                        stroke='#d6d6d6'
+                      />
+                    )}
                     {/* White background spacing between stackes */}
                     {!isLastIndex && <rect x={bar.x} y={bar.y} width={bar.width} height={1} fill={'#fff'}></rect>}
                     {/* Right side Axis line */}

package/src/components/BarChart/components/BarChart.Horizontal.tsx

@@ -14,6 +14,7 @@ import { BarGroup } from '@visx/shape'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getBarConfig, testZeroValue } from '../helpers'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 // Third party libraries
 import chroma from 'chroma-js'
@@ -24,9 +25,38 @@ import { ChartContext } from '../../../types/ChartContext'
 
 export const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
-  const { transformedData: data, tableData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter, isNumber, getTextWidth, getYAxisData, getXAxisData } = useContext<ChartContext>(ConfigContext)
-  const { isHorizontal, barBorderWidth, updateBars, assignColorsToValues, section, fontSize, isLabelBelowBar, displayNumbersOnBar, lollipopBarWidth, lollipopShapeSize, getHighlightedBarColorByValue, getHighlightedBarByValue, getAdditionalColumn, hoveredBar, onMouseLeaveBar, onMouseOverBar } =
-    useBarChart()
+  const {
+    transformedData: data,
+    tableData,
+    colorScale,
+    seriesHighlight,
+    config,
+    formatNumber,
+    formatDate,
+    parseDate,
+    setSharedFilter,
+    isNumber,
+    getYAxisData,
+    getXAxisData
+  } = useContext<ChartContext>(ConfigContext)
+  const {
+    isHorizontal,
+    barBorderWidth,
+    updateBars,
+    assignColorsToValues,
+    section,
+    fontSize,
+    isLabelBelowBar,
+    displayNumbersOnBar,
+    lollipopBarWidth,
+    lollipopShapeSize,
+    getHighlightedBarColorByValue,
+    getHighlightedBarByValue,
+    getAdditionalColumn,
+    hoveredBar,
+    onMouseLeaveBar,
+    onMouseOverBar
+  } = useBarChart()
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
@@ -49,13 +79,29 @@ export const BarChartHorizontal = () => {
         >
           {barGroups => {
             return updateBars(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}`} top={barGroup.y}>
+              <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}`}
+                top={barGroup.y}
+              >
                 {barGroup.bars.map((bar, index) => {
                   const scaleVal = config.yAxis.type === 'logarithmic' ? 0.1 : 0
-                  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 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 = config.barHeight
                   let numbericBarHeight = parseInt(!config.isLollipopChart ? barHeight : lollipopBarWidth)
                   if (isNaN(numbericBarHeight)) {
@@ -65,10 +111,17 @@ export const BarChartHorizontal = () => {
                   const defaultBarWidth = Math.abs(xScale(bar.value) - xScale(scaleVal))
                   const isPositiveBar = bar.value >= 0 && isNumber(bar.value)
 
-                  const { barWidthHorizontal: barWidth, isSuppressed, getAbsentDataLabel } = getBarConfig({ bar, defaultBarWidth, config, isNumber, getTextWidth, isVertical: false })
+                  const {
+                    barWidthHorizontal: barWidth,
+                    isSuppressed,
+                    getAbsentDataLabel
+                  } = getBarConfig({ bar, defaultBarWidth, config, isNumber, isVertical: false })
                   const barX = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(scaleVal)
                   const yAxisValue = formatNumber(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]
+                  const xAxisValue =
+                    config.runtime[section].type === 'date'
+                      ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey]))
+                      : data[barGroup.index][config.runtime.originalXAxis.dataKey]
 
                   const barPosition = !isPositiveBar ? 'below' : 'above'
                   const absentDataLabel = getAbsentDataLabel(yAxisValue)
@@ -96,7 +149,9 @@ export const BarChartHorizontal = () => {
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
 
-                  let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${xAxisValue}` : xAxisValue
+                  let yAxisTooltip = config.runtime.yAxis.label
+                    ? `${config.runtime.yAxis.label}: ${xAxisValue}`
+                    : xAxisValue
                   const additionalColTooltip = getAdditionalColumn(hoveredBar)
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
                   const tooltip = `<ul>
@@ -108,15 +163,28 @@ export const BarChartHorizontal = () => {
                   // 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)
+                  let barColor =
+                    config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key]
+                      ? colorScale(config.runtime.seriesLabels[bar.key])
+                      : colorScale(bar.key)
                   barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor) // Color code by category
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
                   const isHighlightedBar = highlightedBarValues?.includes(xAxisValue)
                   const highlightedBarColor = getHighlightedBarColorByValue(xAxisValue)
                   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 borderColor = isHighlightedBar
+                    ? highlightedBarColor
+                    : config.barHasBorder === 'true'
+                    ? '#000'
+                    : 'transparent'
+                  const borderWidth = isHighlightedBar
+                    ? highlightedBar.borderWidth
+                    : config.isLollipopChart
+                    ? 0
+                    : config.barHasBorder === 'true'
+                    ? barBorderWidth
+                    : 0
                   const displaylollipopShape = testZeroValue(bar.value) ? 'none' : 'block'
 
                   // update label color
@@ -176,7 +244,12 @@ export const BarChartHorizontal = () => {
 
                           const hasAsterisk = String(pd.symbol).includes('Asterisk')
                           const verticalAnchor = hasAsterisk ? 'middle' : 'end'
-                          const iconSize = pd.symbol === 'Asterisk' ? barHeight * 1.2 : pd.symbol === 'Double Asterisk' ? barHeight : barHeight / 1.5
+                          const iconSize =
+                            pd.symbol === 'Asterisk'
+                              ? barHeight * 1.2
+                              : pd.symbol === 'Double Asterisk'
+                              ? barHeight
+                              : barHeight / 1.5
                           const fillColor = pd.displayGray ? '#8b8b8a' : '#000'
                           return (
                             <Text // prettier-ignore
@@ -240,7 +313,13 @@ export const BarChartHorizontal = () => {
                           </Text>
                         )}
                         {isLabelBelowBar && !config.yAxis.hideLabel && (
-                          <Text x={config.yAxis.hideAxis ? 0 : 5} y={barGroup.height} dy={4} verticalAnchor={'start'} textAnchor={'start'}>
+                          <Text
+                            x={config.yAxis.hideAxis ? 0 : 5}
+                            y={barGroup.height}
+                            dy={4}
+                            verticalAnchor={'start'}
+                            textAnchor={'start'}
+                          >
                             {config.runtime.yAxis.type === 'date'
                               ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey]))
                               : isHorizontal

package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx

@@ -5,6 +5,7 @@ import { BarStackHorizontal } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 // types
 import BarChartContext, { type BarChartContextValues } from './context'
@@ -22,7 +23,6 @@ const BarChartStackedHorizontal = () => {
     config,
     formatDate,
     formatNumber,
-    getTextWidth,
     parseDate,
     seriesHighlight,
     setSharedFilter,
@@ -37,18 +37,38 @@ const BarChartStackedHorizontal = () => {
     config.visualizationSubType === 'stacked' &&
     isHorizontal && (
       <>
-        <BarStackHorizontal data={data} keys={barStackedSeriesKeys} height={yMax} y={d => d[config.runtime.yAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale} offset='none'>
+        <BarStackHorizontal
+          data={data}
+          keys={barStackedSeriesKeys}
+          height={yMax}
+          y={d => d[config.runtime.yAxis.dataKey]}
+          xScale={xScale}
+          yScale={yScale}
+          color={colorScale}
+          offset='none'
+        >
           {barStacks =>
             barStacks.map(barStack =>
               updateBars(barStack.bars).map((bar, index) => {
-                const transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
-                const displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
+                const transparentBar =
+                  config.legend.behavior === 'highlight' &&
+                  seriesHighlight.length > 0 &&
+                  seriesHighlight.indexOf(bar.key) === -1
+                const displayBar =
+                  config.legend.behavior === 'highlight' ||
+                  seriesHighlight.length === 0 ||
+                  seriesHighlight.indexOf(bar.key) !== -1
                 config.barHeight = Number(config.barHeight)
                 const labelColor = getContrastColor('#000', colorScale(config.runtime.seriesLabels[bar.key]))
                 // tooltips
                 const xAxisValue = formatNumber(data[bar.index][bar.key], 'left')
-                const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.originalXAxis.dataKey])) : data[bar.index][config.runtime.originalXAxis.dataKey]
-                const yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
+                const yAxisValue =
+                  config.runtime.yAxis.type === 'date'
+                    ? formatDate(parseDate(data[bar.index][config.runtime.originalXAxis.dataKey]))
+                    : data[bar.index][config.runtime.originalXAxis.dataKey]
+                const yAxisTooltip = config.runtime.yAxis.label
+                  ? `${config.runtime.yAxis.label}: ${yAxisValue}`
+                  : yAxisValue
                 const textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
                 const additionalColTooltip = getAdditionalColumn(hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
@@ -93,17 +113,21 @@ const BarChartStackedHorizontal = () => {
                         }
                       })}
 
-                      {orientation === 'horizontal' && visualizationSubType === 'stacked' && isLabelBelowBar && barStack.index === 0 && !config.yAxis.hideLabel && (
-                        <Text
-                          x={`${bar.x + (config.isLollipopChart ? 15 : 5)}`} // padding
-                          y={bar.y + bar.height * 1.2}
-                          fill={'#000000'}
-                          textAnchor='start'
-                          verticalAnchor='start'
-                        >
-                          {yAxisValue}
-                        </Text>
-                      )}
+                      {orientation === 'horizontal' &&
+                        visualizationSubType === 'stacked' &&
+                        isLabelBelowBar &&
+                        barStack.index === 0 &&
+                        !config.yAxis.hideLabel && (
+                          <Text
+                            x={`${bar.x + (config.isLollipopChart ? 15 : 5)}`} // padding
+                            y={bar.y + bar.height * 1.2}
+                            fill={'#000000'}
+                            textAnchor='start'
+                            verticalAnchor='start'
+                          >
+                            {yAxisValue}
+                          </Text>
+                        )}
 
                       {displayNumbersOnBar && textWidth < bar.width && (
                         <Text

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,