@cdc/chart 4.23.3 → 4.23.4

package/src/components/BarChart.jsx

@@ -8,10 +8,7 @@ import ConfigContext from '../ConfigContext'
 import { BarStackHorizontal } from '@visx/shape'
 
 export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getXAxisData, getYAxisData, animatedChart, visible }) {
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, formatDate, isNumber, cleanData, getTextWidth, parseDate } = useContext(ConfigContext)
-  // Just do this once up front otherwise we end up
-  // calling clean several times on same set of data (TT)
-  const cleanedData = cleanData(data, config.xAxis.dataKey)
+  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, formatDate, isNumber, getTextWidth, parseDate } = useContext(ConfigContext)
 
   const { orientation, visualizationSubType } = config
   const isHorizontal = orientation === 'horizontal'
@@ -32,17 +29,15 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
   const fontSize = { small: 16, medium: 18, large: 20 }
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
 
-  const applyRadius = (index, isNegative) => {
+  const applyRadius = index => {
     if (index === undefined || index === null || !isRounded) return
     let style = {}
 
     if ((isStacked && index + 1 === stackCount) || !isStacked) {
-      if (isNegative) {
-        // reverse borderRadius to bottom
-        style = isHorizontal ? { borderRadius: `0 ${radius}  ${radius}  0` } : { borderRadius: `0 0 ${radius} ${radius}` }
-      } else {
-        style = isHorizontal ? { borderRadius: `0 ${radius}  ${radius}  0` } : { borderRadius: `${radius} ${radius} 0 0` }
-      }
+      style = isHorizontal ? { borderRadius: `0 ${radius}  ${radius}  0` } : { borderRadius: `${radius} ${radius} 0 0` }
+    }
+    if (!isStacked && index === -1) {
+      style = isHorizontal ? { borderRadius: `${radius} 0  0 ${radius} ` } : { borderRadius: ` 0  0 ${radius} ${radius}` }
     }
     if (tipRounding === 'full' && isStacked && index === 0 && stackCount > 1) {
       style = isHorizontal ? { borderRadius: `${radius} 0 0 ${radius}` } : { borderRadius: `0 0 ${radius} ${radius}` }
@@ -52,7 +47,6 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
     }
     return style
   }
-  // }
 
   const updateBars = defaultBars => {
     // function updates  stacked && regular && lollipop horizontal bars
@@ -136,7 +130,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
       <Group left={parseFloat(config.runtime.yAxis.size)}>
         {/* Stacked Vertical */}
         {config.visualizationSubType === 'stacked' && !isHorizontal && (
-          <BarStack data={cleanedData} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} x={d => d[config.runtime.xAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale}>
+          <BarStack data={data} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} x={d => d[config.runtime.xAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale}>
             {barStacks =>
               barStacks.reverse().map(barStack =>
                 barStack.bars.map(bar => {
@@ -148,7 +142,8 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                   // tooltips
                   const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.xAxis.dataKey])) : data[bar.index][config.runtime.xAxis.dataKey]
                   const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
-                  const style = applyRadius(barStack.index, yAxisValue < 0)
+
+                  const style = applyRadius(barStack.index)
                   let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                   const xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
                   if (!hasMultipleSeries) {
@@ -199,7 +194,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
         {/* Stacked Horizontal */}
         {config.visualizationSubType === 'stacked' && isHorizontal && (
           <>
-            <BarStackHorizontal data={cleanedData} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} height={yMax} y={d => d[config.runtime.yAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale} offset='none'>
+            <BarStackHorizontal data={data} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} 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) => {
@@ -210,7 +205,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                     // 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 style = applyRadius(barStack.index, yAxisValue < 0)
+                    const style = applyRadius(barStack.index)
                     let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                     let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
                     if (!hasMultipleSeries) {
@@ -297,7 +292,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
         {config.visualizationSubType !== 'stacked' && (
           <Group>
             <BarGroup
-              data={cleanedData}
+              data={data}
               keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys}
               height={yMax}
               x0={d => d[config.runtime.originalXAxis.dataKey]}
@@ -324,7 +319,8 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       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))
                       // ! Unsure if this should go back.
                       if (config.isLollipopChart) {
                         offset = (config.runtime.horizontal ? yMax : xMax) / barGroups.length / 2 - lollipopBarWidth / 2
@@ -351,18 +347,38 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                         xAxisValue = tempValue
                         barWidth = config.barHeight
                       }
+
+                      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`)
-                      let textFits = textWidth < bar.y - 5 // minus padding 5
-
+                      let textFits = textWidth < barWidthHorizontal - 5 // minus padding 5
                       let labelColor = '#000000'
 
                       // Set label color
                       if (chroma.contrast(labelColor, barColor) < 4.9) {
-                        if (textFits) labelColor = '#FFFFFF'
+                        textFits ? (labelColor = '#FFFFFF') : '#000000'
+                      }
+
+                      // control text position
+                      let textAnchor = textFits ? 'end' : 'start'
+                      let textAnchorLollipop = 'start'
+                      let textPadding = textFits ? -5 : 5
+                      let textPaddingLollipop = 10
+                      // if bars are negative we change positions of text
+                      if (barPosition === 'below') {
+                        textAnchor = textFits ? 'start' : 'end'
+                        textPadding = textFits ? 5 : -5
+                        if (config.isLollipopChart) {
+                          textAnchorLollipop = 'end'
+                          textPaddingLollipop = -10
+                        }
                       }
 
-                      const style = applyRadius(index, yAxisValue < 0)
+                      // create new Index based on bar value for border Radius
+                      const newIndex = bar.value < 0 ? -1 : index
+                      const style = applyRadius(newIndex)
 
                       let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                       let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
@@ -394,9 +410,9 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                             <foreignObject
                               id={`barGroup${barGroup.index}`}
                               key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
-                              x={config.runtime.horizontal ? 0 : barWidth * bar.index + offset}
+                              x={config.runtime.horizontal ? barX : barWidth * bar.index + offset}
                               y={config.runtime.horizontal ? barWidth * bar.index : barY}
-                              width={config.runtime.horizontal ? bar.y : barWidth}
+                              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,
@@ -414,9 +430,9 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                                 x={bar.y}
                                 y={config.barHeight / 2 + config.barHeight * bar.index}
                                 fill={labelColor}
-                                dx={textFits ? -5 : 5}
+                                dx={textPadding}
                                 verticalAnchor='middle'
-                                textAnchor={textFits ? 'end' : 'start'}
+                                textAnchor={textAnchor}
                               >
                                 {xAxisValue}
                               </Text>
@@ -425,10 +441,11 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                             {orientation === 'horizontal' && config.isLollipopChart && displayNumbersOnBar && (
                               <Text
                                 display={displayBar ? 'block' : 'none'}
-                                x={`${bar.y + (config.isLollipopChart ? 15 : 5) + (config.isLollipopChart && barGroup.bars.length === bar.index ? offset : 0)}`} // padding
+                                x={bar.y} // padding
                                 y={0}
                                 fill={'#000000'}
-                                textAnchor='start'
+                                dx={textPaddingLollipop}
+                                textAnchor={textAnchorLollipop}
                                 verticalAnchor='middle'
                                 fontWeight={'normal'}
                               >

package/src/components/BoxPlot.jsx

@@ -7,9 +7,18 @@ import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 
 const CoveBoxPlot = ({ xScale, yScale }) => {
   const { config, setConfig } = useContext(ConfigContext)
-  const boxWidth = xScale.bandwidth()
-  const constrainedWidth = Math.min(40, boxWidth)
-  const color_0 = colorPalettesChart[config?.palette][0] ? colorPalettesChart[config?.palette][0] : '#000'
+
+  useEffect(() => {
+    if (config.legend.hide === false) {
+      setConfig({
+        ...config,
+        legend: {
+          ...config.legend,
+          hide: true
+        }
+      })
+    }
+  }, []) // eslint-disable-line
 
   // tooltips
   const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
@@ -23,17 +32,16 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
     `
   }
 
-  useEffect(() => {
-    if (config.legend.hide === false) {
-      setConfig({
-        ...config,
-        legend: {
-          ...config.legend,
-          hide: true
-        }
-      })
-    }
-  }, []) // eslint-disable-line
+  //  accessors & constants
+  const max = d => Number(d.columnMax)
+  const min = d => Number(d.columnMin)
+  const median = d => Number(d.columnMedian)
+  const thirdQuartile = d => Number(d.columnThirdQuartile)
+  const firstQuartile = d => Number(d.columnFirstQuartile)
+  const fillOpacity = 0.5
+  const boxWidth = xScale.bandwidth()
+  const constrainedWidth = Math.min(40, boxWidth)
+  const color_0 = colorPalettesChart[config?.palette][0] ? colorPalettesChart[config?.palette][0] : '#000'
 
   return (
     <ErrorBoundary component='BoxPlot'>
@@ -50,15 +58,15 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
               <BoxPlot
                 data-left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
                 key={`box-plot-${i}`}
-                min={Number(d.columnMin)}
-                max={Number(d.columnMax)}
+                min={min(d)}
+                max={max(d)}
                 left={Number(xScale(d.columnCategory)) + Number(config.yAxis.size) + offset / 2 + 0.5}
-                firstQuartile={Number(d.columnFirstQuartile)}
-                thirdQuartile={Number(d.columnThirdQuartile)}
-                median={Number(d.columnMedian)}
+                firstQuartile={firstQuartile(d)}
+                thirdQuartile={thirdQuartile(d)}
+                median={median(d)}
                 boxWidth={constrainedWidth}
                 fill={color_0}
-                fillOpacity={0.5}
+                fillOpacity={fillOpacity}
                 stroke='black'
                 valueScale={yScale}
                 outliers={config.boxplot.plotOutlierValues ? d.columnOutliers : []}

package/src/components/DataTable.jsx

@@ -12,7 +12,7 @@ import ConfigContext from '../ConfigContext'
 import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
 
 export default function DataTable() {
-  const { rawData, transformedData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes } = useContext(ConfigContext)
+  const { rawData, tableData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes } = useContext(ConfigContext)
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
   const [tableExpanded, setTableExpanded] = useState(config.table.expanded)
@@ -35,7 +35,7 @@ export default function DataTable() {
     switch (type) {
       case 'download':
         return (
-          <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn btn-download no-border`}>
+          <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn btn-download no-border margin-sm`}>
             Download Data (CSV)
           </a>
         )
@@ -75,7 +75,9 @@ export default function DataTable() {
                     values: labels.values,
                     columnTotal: labels.total,
                     columnSd: 'Standard Deviation',
-                    nonOutlierValues: 'Non Outliers'
+                    nonOutlierValues: 'Non Outliers',
+                    columnLowerBounds: labels.lowerBounds,
+                    columnUpperBounds: labels.upperBounds
                   }
 
                   let resolvedName = columnLookup[props.row.original[0]]
@@ -232,8 +234,7 @@ export default function DataTable() {
         </div>
         <div className='table-container' hidden={!tableExpanded} style={{ maxHeight: config.table.limitHeight && `${config.table.height}px`, overflowY: 'scroll' }}>
           <table className={tableExpanded ? 'data-table' : 'data-table cdcdataviz-sr-only'} {...getTableProps()} aria-rowcount={config?.series?.length ? config?.series?.length : '-1'}>
-            <caption className='cdcdataviz-sr-only'>{config.table.caption ? config.table.caption : ''}</caption>
-            <caption className='visually-hidden'>{config.table.label}</caption>
+            <caption className='cdcdataviz-sr-only visually-hidden'>{config.table.caption ? config.table.caption : config.table.label ? config.table.label : 'Data Table'}</caption>
             <thead>
               {headerGroups.map((headerGroup, index) => (
                 <tr {...headerGroup.getHeaderGroupProps()} key={`headerGroups--${index}`}>
@@ -275,7 +276,7 @@ export default function DataTable() {
               })}
             </tbody>
           </table>
-          {config.regions && config.regions.length > 0 && !config.visualizationType === 'Box Plot' ? (
+          {config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' ? (
             <table className='region-table data-table'>
               <caption className='visually-hidden'>Table of the highlighted regions in the visualization</caption>
               <thead>

package/src/components/DeviationBar.jsx

@@ -56,7 +56,7 @@ export function DeviationBar({ height, xScale }) {
   const lollipopBarHeight = config.lollipopSize === 'large' ? 7 : config.lollipopSize === 'medium' ? 6 : 5
   const lollipopShapeSize = config.lollipopSize === 'large' ? 14 : config.lollipopSize === 'medium' ? 12 : 10
 
-  const targetX = Math.max(xScale(0), Math.min(xScale(target), xScale(maxVal * 1.05)))
+  const targetX = Math.max(xScale(0), Math.min(xScale(target), xScale(maxVal)))
 
   const applyRadius = barPosition => {
     if (barPosition === undefined || barPosition === null || barStyle !== 'rounded') return
@@ -122,7 +122,7 @@ export function DeviationBar({ height, xScale }) {
         {data.map((d, index) => {
           const barValue = Number(d[seriesKey])
           const barHeight = config.isLollipopChart ? lollipopBarHeight : Number(config.barHeight)
-          const barSpace = Number(config.barSpace) || 15
+          const barSpace = Number(config.barSpace)
           const barWidth = Math.abs(xScale(barValue) - targetX)
           const barBaseX = xScale(barValue)
           const barX = barValue > target ? targetX : barBaseX