@cdc/chart 4.24.1 → 4.24.3

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

@@ -8,6 +8,9 @@ import { BarGroup } from '@visx/shape'
 import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
 import { FaStar } from 'react-icons/fa'
 import Regions from './../../Regions'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+
+import createBarElement from '@cdc/core/components/createBarElement'
 
 // third party
 import chroma from 'chroma-js'
@@ -73,7 +76,10 @@ export const BarChartVertical = () => {
           data={data}
           keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys}
           height={yMax}
-          x0={d => d[config.runtime.originalXAxis.dataKey]}
+          x0={d => {
+            const rawXValue = d[config.runtime.originalXAxis.dataKey]
+            return isDateScale(config.runtime.xAxis) ? parseDate(rawXValue) : rawXValue
+          }}
           x0Scale={xScale}
           x1Scale={seriesScale}
           yScale={yScale}
@@ -83,7 +89,7 @@ export const BarChartVertical = () => {
         >
           {barGroups => {
             return 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}`} left={(xMax / barGroups.length) * 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}`} left={barGroup.x0}>
                 {barGroup.bars.map((bar, index) => {
                   const scaleVal = config.useLogScale ? 0.1 : 0
                   const suppresedBarHeight = 20
@@ -96,14 +102,10 @@ export const BarChartVertical = () => {
                   const supprssedBarY = bar.value >= 0 && isNumber(bar.value) ? yScale(scaleVal) - suppresedBarHeight : yScale(0)
                   const barY = config.suppressedData.some(d => bar.key === d.column && String(bar.value) === String(d.value)) ? supprssedBarY : barYBase
 
-                  let barGroupWidth = (xMax / barGroups.length) * (config.barThickness || 0.8)
-                  let offset = ((xMax / barGroups.length) * (1 - (config.barThickness || 0.8))) / 2
-                  // configure left side offset of lollipop bars
-                  if (config.isLollipopChart) {
-                    offset = xMax / barGroups.length / 2 - lollipopBarWidth / 2
-                  }
+                  let barGroupWidth = seriesScale.range()[1]
 
                   let barWidth = config.isLollipopChart ? lollipopBarWidth : barGroupWidth / barGroup.bars.length
+                  let barX = 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)
 
@@ -112,7 +114,6 @@ export const BarChartVertical = () => {
 
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
-                  const borderRadius = applyRadius(newIndex)
                   // tooltips
 
                   const additionalColTooltip = getAdditionalColumn(bar.key, data[barGroup.index][config.runtime.originalXAxis.dataKey])
@@ -180,57 +181,43 @@ export const BarChartVertical = () => {
                     return _barColor
                   }
 
-                  const getLeft = () => {
-                    if (barWidth < 50 && barWidth > 15) return barWidth / 2.5
-                    if (barWidth < 15 && barWidth > 5) return barWidth / 6
-                    if (barWidth < 5) return 0
-                    return barWidth / 2
-                  }
-                  const iconStyle: { [key: string]: any } = {
-                    position: 'absolute',
-                    top: bar.value >= 0 && isNumber(bar.value) ? -suppresedBarHeight : undefined,
-                    bottom: bar.value >= 0 && isNumber(bar.value) ? undefined : `-${suppresedBarHeight}px`,
-                    left: getLeft()
-                  }
-
-                  if (config.isLollipopChart) {
-                    iconStyle.left = 0
-                    iconStyle.transform = `translateX(0)`
-                  }
-
-                  const finalStyle = {
-                    background: getBarBackgroundColor(barColor),
-                    borderColor,
-                    borderStyle: 'solid',
-                    borderWidth: `${borderWidth}px`,
-                    width: barWidth,
-                    height: barHeight,
-                    ...borderRadius,
-                    cursor: dashboardConfig ? 'pointer' : 'default'
-                  }
-
                   return (
                     <Group key={`${barGroup.index}--${index}`}>
-                      {/* This feels gross but inline transition was not working well*/}
-                      <style>
-                        {`
-                        .linear #barGroup${barGroup.index} div,
-                        .Combo #barGroup${barGroup.index} div {
-                          transform-origin: 0 ${barY + barHeight}px;
-                        }
-                      `}
-                      </style>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
-                        <foreignObject
+                        {createBarElement({
+                          config: config,
+                          index: newIndex,
+                          id: `barGroup${barGroup.index}`,
+                          background: getBarBackgroundColor(barColor),
+                          borderColor,
+                          borderStyle: 'solid',
+                          borderWidth: `${borderWidth}px`,
+                          width: barWidth,
+                          height: barHeight,
+                          x: barX,
+                          y: barY,
+                          onMouseOver: () => onMouseOverBar(xAxisValue, bar.key),
+                          onMouseLeave: onMouseLeaveBar,
+                          tooltipHtml: tooltip,
+                          tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
+                          onClick: e => {
+                            e.preventDefault()
+                            if (setSharedFilter) {
+                              bar[config.xAxis.dataKey] = xAxisValue
+                              setSharedFilter(config.uid, bar)
+                            }
+                          },
+                          styleOverrides: {
+                            transformOrigin: `0 ${barY + barHeight}px`,
+                            opacity: transparentBar ? 0.2 : 1,
+                            display: displayBar ? 'block' : 'none',
+                            cursor: dashboardConfig ? 'pointer' : 'default'
+                          }
+                        })}
+                        <g
+                          transform={`translate(${barX},${yMax - suppresedBarHeight})`}
                           onMouseOver={() => onMouseOverBar(xAxisValue, bar.key)}
                           onMouseLeave={onMouseLeaveBar}
-                          style={{ overflow: 'visible', transition: 'all 0.2s linear' }}
-                          id={`barGroup${barGroup.index}`}
-                          key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
-                          x={barWidth * bar.index + offset}
-                          y={barY}
-                          width={barWidth}
-                          height={barHeight}
                           opacity={transparentBar ? 0.2 : 1}
                           display={displayBar ? 'block' : 'none'}
                           data-tooltip-html={tooltip}
@@ -243,16 +230,13 @@ export const BarChartVertical = () => {
                             }
                           }}
                         >
-                          <div style={{ position: 'relative' }}>
-                            <div style={iconStyle}>{getIcon(bar, barWidth)}</div>
-                            <div style={{ ...finalStyle }}></div>
-                          </div>
-                        </foreignObject>
+                          {getIcon(bar, barWidth)}
+                        </g>
 
                         <Text // prettier-ignore
                           display={config.labels && displayBar ? 'block' : 'none'}
                           opacity={transparentBar ? 0.5 : 1}
-                          x={barWidth * (bar.index + 0.5) + offset}
+                          x={barX + barWidth / 2}
                           y={barY - 5}
                           fill={labelColor}
                           textAnchor='middle'
@@ -263,7 +247,7 @@ export const BarChartVertical = () => {
                         {config.isLollipopChart && config.lollipopShape === 'circle' && (
                           <circle
                             display={displaylollipopShape}
-                            cx={barWidth * (barGroup.bars.length - bar.index - 1) + offset + lollipopShapeSize / 3.5}
+                            cx={barX + lollipopShapeSize / 3.5}
                             cy={bar.y}
                             r={lollipopShapeSize / 2}
                             fill={barColor}
@@ -276,7 +260,7 @@ export const BarChartVertical = () => {
                         {config.isLollipopChart && config.lollipopShape === 'square' && (
                           <rect
                             display={displaylollipopShape}
-                            x={offset - lollipopBarWidth / 2}
+                            x={barX - lollipopBarWidth / 2}
                             y={barY}
                             width={lollipopShapeSize}
                             height={lollipopShapeSize}
@@ -304,7 +288,7 @@ export const BarChartVertical = () => {
               let upperPos
               let lowerPos
               let tickWidth = 5
-              xPos = xScale(getXAxisData(d))
+              xPos = xScale(getXAxisData(d)) + (config.xAxis.type !== 'date' || 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 (

package/src/components/BoxPlot/BoxPlot.jsx

@@ -7,6 +7,7 @@ import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 
 const CoveBoxPlot = ({ xScale, yScale }) => {
   const { config, setConfig } = useContext(ConfigContext)
+  const { boxplot } = config
 
   useEffect(() => {
     if (config.legend.hide === false) {
@@ -25,10 +26,10 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
   const handleTooltip = d => {
     return `
       <strong>${d.columnCategory}</strong></br>
-      ${config.boxplot.labels.q1}: ${d.columnFirstQuartile}<br/>
-      ${config.boxplot.labels.q3}: ${d.columnThirdQuartile}<br/>
-      ${config.boxplot.labels.iqr}: ${d.columnIqr}<br/>
-      ${config.boxplot.labels.median}: ${d.columnMedian}
+      ${boxplot.labels.q1}: ${d.columnFirstQuartile}<br/>
+      ${boxplot.labels.q3}: ${d.columnThirdQuartile}<br/>
+      ${boxplot.labels.iqr}: ${d.columnIqr}<br/>
+      ${boxplot.labels.median}: ${d.columnMedian}
     `
   }
 
@@ -46,12 +47,12 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
   return (
     <ErrorBoundary component='BoxPlot'>
       <Group className='boxplot' key={`boxplot-group`}>
-        {config.boxplot.plots.map((d, i) => {
+        {boxplot.plots.map((d, i) => {
           const offset = boxWidth - constrainedWidth
           const radius = 4
           return (
             <Group key={`boxplotplot-${i}`}>
-              {config.boxplot.plotNonOutlierValues &&
+              {boxplot.plotNonOutlierValues &&
                 d.nonOutlierValues.map((value, index) => {
                   return <circle cx={xScale(d.columnCategory) + Number(config.yAxis.size) + boxWidth / 2} cy={yScale(value)} r={radius} fill={'#ccc'} style={{ opacity: 1, fillOpacity: 1, stroke: 'black' }} key={`boxplot-${i}--circle-${index}`} />
                 })}
@@ -69,7 +70,7 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
                 fillOpacity={fillOpacity}
                 stroke='black'
                 valueScale={yScale}
-                outliers={config.boxplot.plotOutlierValues ? d.columnOutliers : []}
+                outliers={boxplot.plotOutlierValues ? d.columnOutliers : []}
                 outlierProps={{
                   style: {
                     fill: `${color_0}`,
@@ -84,7 +85,7 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
                 boxProps={{
                   style: {
                     stroke: 'black',
-                    strokeWidth: config.boxplot.borders === 'true' ? 1 : 0
+                    strokeWidth: boxplot.borders === 'true' ? 1 : 0
                   }
                 }}
                 maxProps={{
@@ -95,7 +96,8 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
                 container
                 containerProps={{
                   'data-tooltip-html': handleTooltip(d),
-                  'data-tooltip-id': tooltip_id
+                  'data-tooltip-id': tooltip_id,
+                  tabIndex: -1
                 }}
               />
             </Group>

package/src/components/DeviationBar.jsx

@@ -4,8 +4,8 @@ import { useContext, useEffect, useRef, useState } from 'react'
 import ConfigContext from '../ConfigContext'
 import { Text } from '@visx/text'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import chroma from 'chroma-js'
 import useIntersectionObserver from '../hooks/useIntersectionObserver'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 export default function DeviationBar({ height, xScale }) {
   const { transformedData: data, config, formatNumber, twoColorPalette, getTextWidth, updateConfig, parseDate, formatDate, currentViewport } = useContext(ConfigContext)
@@ -160,8 +160,7 @@ export default function DeviationBar({ height, xScale }) {
           // colors
           const [leftColor, rightColor] = twoColorPalette[twoColor.palette]
           const barColor = { left: leftColor, right: rightColor }
-          const isBarColorDark = chroma.contrast('#000000', barColor[barPosition]) < 4.9
-          const fill = isBarColorDark ? '#FFFFFF' : '#000000'
+          const fill = getContrastColor('#000', barColor[barPosition])
 
           let textProps = getTextProps(config.isLollipopChart, textFits, lollipopShapeSize, fill)
           // tooltips
@@ -187,6 +186,7 @@ export default function DeviationBar({ height, xScale }) {
                 height={barHeight}
                 data-tooltip-html={tooltip}
                 data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                tabIndex={-1}
               >
                 <div style={{ width: barWidth, height: barHeight, border: `${borderWidth}px solid #333`, backgroundColor: barColor[barPosition], ...borderRadius }}></div>
               </foreignObject>