@cdc/chart 4.24.1 → 4.24.3

package/src/components/AreaChart/components/AreaChart.Stacked.jsx

@@ -3,6 +3,7 @@ import React, { useContext, memo } from 'react'
 // cdc
 import ConfigContext from '../../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 
 // visx & d3
 import * as allCurves from '@visx/curve'
@@ -20,7 +21,7 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
 
   const handleDateCategory = value => {
     if (config.xAxis.type === 'categorical') return xScale(value)
-    if (config.xAxis.type === 'date') {
+    if (isDateScale(config.xAxis)) {
       let date = new Date(value)
       return xScale(date)
     }

package/src/components/AreaChart/components/AreaChart.jsx

@@ -3,6 +3,7 @@ import React, { useContext, memo } from 'react'
 // cdc
 import ConfigContext from '../../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 
 // visx & d3
 import * as allCurves from '@visx/curve'
@@ -18,26 +19,8 @@ const AreaChart = props => {
 
   if (!data) return
 
-  // Tooltip helper for getting data to the closest date/category hovered.
-  const getXValueFromCoordinate = x => {
-    if (config.xAxis.type === 'categorical' || config.visualizationType === 'Combo') {
-      let eachBand = xScale.step()
-      let numerator = x
-      const index = Math.floor(Number(numerator) / eachBand)
-      return xScale.domain()[index - 1] // fixes off by 1 error
-    }
-
-    if (config.xAxis.type === 'date' && config.visualizationType !== 'Combo') {
-      const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
-      const x0 = xScale.invert(x)
-      const index = bisectDate(config.data, x0, 1)
-      const val = parseDate(config.data[index - 1][config.xAxis.dataKey])
-      return val
-    }
-  }
-
   const handleX = d => {
-    return config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])
+    return (isDateScale(config.xAxis) ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
   }
 
   const handleY = (d, index, s = undefined) => {
@@ -61,12 +44,6 @@ const AreaChart = props => {
               let transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s.dataKey) === -1
               let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s.dataKey) !== -1
 
-              if (config.xAxis.type === 'date') {
-                data.map(d => xScale(parseDate(d[config.xAxis.dataKey])))
-              } else {
-                data.map(d => xScale(d[config.xAxis.dataKey]))
-              }
-
               return (
                 <React.Fragment key={index}>
                   {/* prettier-ignore */}

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

@@ -6,19 +6,21 @@ import { Text } from '@visx/text'
 import { BarGroup } from '@visx/shape'
 import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
 import { FaStar } from 'react-icons/fa'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 // third party
 import chroma from 'chroma-js'
 import BarChartContext, { BarChartContextValues } from './context'
 import { ChartContext } from '../../../types/ChartContext'
 
+import createBarElement from '@cdc/core/components/createBarElement'
+
 export const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
   const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter, isNumber, getTextWidth, getYAxisData, getXAxisData } = useContext<ChartContext>(ConfigContext)
   const {
     isHorizontal,
     barBorderWidth,
-    applyRadius,
     updateBars,
     assignColorsToValues,
     section,
@@ -112,7 +114,6 @@ export const BarChartHorizontal = () => {
 
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
-                  const borderRadius = applyRadius(newIndex)
 
                   let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${xAxisValue}` : xAxisValue
                   const additionalColTooltip = getAdditionalColumn(hoveredBar)
@@ -137,10 +138,8 @@ export const BarChartHorizontal = () => {
                   const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
                   const displaylollipopShape = config.suppressedData.some(d => bar.key === d.column && bar.value === d.value) ? 'none' : 'block'
                   // update label color
-                  if (barColor && labelColor) {
-                    if (chroma.contrast(labelColor, barColor) < 4.9) {
-                      labelColor = textFits ? '#FFFFFF' : '#000000'
-                    }
+                  if (barColor && labelColor && textFits) {
+                    labelColor = getContrastColor('#000', barColor)
                   }
                   const getTop = () => {
                     if (Number(barHeight) < 20) return -4
@@ -154,15 +153,6 @@ export const BarChartHorizontal = () => {
                       return 12
                     }
                   }
-                  const iconStyle: { [key: string]: any } = {
-                    position: 'absolute',
-                    top: getTop(),
-                    left: suppresedBarWidth * 1.2
-                  }
-
-                  if (config.isLollipopChart) {
-                    iconStyle.top = -9
-                  }
                   const background = () => {
                     if (isRegularLollipopColor) return barColor
                     if (isTwoToneLollipopColor) return chroma(barColor).brighten(1)
@@ -170,39 +160,42 @@ export const BarChartHorizontal = () => {
                     return barColor
                   }
 
-                  const finalStyle = {
-                    background: background(),
-                    borderColor,
-                    borderStyle: 'solid',
-                    borderWidth,
-                    width: barWidth,
-                    transition: 'all 0.2s linear',
-                    height: !config.isLollipopChart ? barHeight : lollipopBarWidth,
-                    ...borderRadius
-                  }
-
                   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: background(),
+                          borderColor,
+                          borderStyle: 'solid',
+                          borderWidth: `${borderWidth}px`,
+                          width: barWidth,
+                          height: !config.isLollipopChart ? barHeight : lollipopBarWidth,
+                          x: barX,
+                          y: barHeight * bar.index,
+                          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] = yAxisValue
+                              setSharedFilter(config.uid, bar)
+                            }
+                          },
+                          styleOverrides: {
+                            transformOrigin: `0 ${barY + barHeight}px`,
+                            opacity: transparentBar ? 0.2 : 1,
+                            display: displayBar ? 'block' : 'none'
+                          }
+                        })}
+                        <g
+                          transform={`translate(${barX},${barHeight * bar.index})`}
                           onMouseOver={() => onMouseOverBar(xAxisValue, bar.key)}
                           onMouseLeave={onMouseLeaveBar}
-                          id={`barGroup${barGroup.index}`}
-                          key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
-                          x={barX}
-                          style={{ overflow: 'visible', ...finalStyle }}
-                          y={barHeight * bar.index}
-                          height={!config.isLollipopChart ? barHeight : lollipopBarWidth}
-                          width={barWidth}
                           opacity={transparentBar ? 0.2 : 1}
                           display={displayBar ? 'block' : 'none'}
                           data-tooltip-html={tooltip}
@@ -215,11 +208,8 @@ export const BarChartHorizontal = () => {
                             }
                           }}
                         >
-                          <div style={{ position: 'relative' }}>
-                            <div style={iconStyle}>{getIcon(bar, barWidth)}</div>
-                            <div style={{ ...finalStyle }}></div>
-                          </div>
-                        </foreignObject>
+                          {getIcon(bar, barWidth)}
+                        </g>
 
                         {!config.isLollipopChart && displayNumbersOnBar && (
                           <Text // prettier-ignore
@@ -262,7 +252,7 @@ export const BarChartHorizontal = () => {
                           <circle
                             display={displaylollipopShape}
                             cx={bar.y}
-                            cy={0 + lollipopBarWidth / 2}
+                            cy={barHeight * bar.index + lollipopBarWidth / 2}
                             r={lollipopShapeSize / 2}
                             fill={barColor}
                             key={`circle--${bar.index}`}

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

@@ -4,14 +4,14 @@ import { useBarChart } from '../../../hooks/useBarChart'
 import { BarStackHorizontal } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
-
-// third party
-import chroma from 'chroma-js'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 // types
 import BarChartContext, { type BarChartContextValues } from './context'
 import { type ChartContext } from '../../../types/ChartContext'
 
+import createBarElement from '@cdc/core/components/createBarElement'
+
 const BarChartStackedHorizontal = () => {
   const { yMax, yScale, xScale } = useContext<BarChartContextValues>(BarChartContext)
 
@@ -30,40 +30,26 @@ const BarChartStackedHorizontal = () => {
   } = useContext<ChartContext>(ConfigContext)
 
   // prettier-ignore
-  const {
-    applyRadius,
-    barBorderWidth,
-    displayNumbersOnBar,
-    fontSize,
-    getAdditionalColumn,
-    hoveredBar,
-    isHorizontal,
-    isLabelBelowBar,
-    onMouseLeaveBar,
-    onMouseOverBar,
-    updateBars
-  } = useBarChart()
+  const { barBorderWidth, displayNumbersOnBar, fontSize, getAdditionalColumn, hoveredBar, isHorizontal, isLabelBelowBar, onMouseLeaveBar, onMouseOverBar, updateBars, barStackedSeriesKeys } = useBarChart()
 
   const { orientation, visualizationSubType } = config
-
   return (
     config.visualizationSubType === 'stacked' &&
     isHorizontal && (
       <>
-        <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'>
+        <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) => {
-                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
+                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)
-                let labelColor = '#000000'
+                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 style = applyRadius(barStack.index)
-                let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
-                let textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                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}`
@@ -73,46 +59,40 @@ const BarChartStackedHorizontal = () => {
                   <li class="tooltip-body ">${additionalColTooltip}</li>
                     </li></ul>`
 
-                if (chroma.contrast(labelColor, colorScale(config.runtime.seriesLabels[bar.key])) < 4.9) {
-                  labelColor = '#FFFFFF'
-                }
-
                 return (
                   <>
-                    <style>
-                      {`
-                         #barStack${barStack.index}-${bar.index} rect,
-                         #barStack${barStack.index}-${bar.index} foreignObject div{
-                          animation-delay: ${barStack.index * 0.5}s;
-                          transform-origin: ${bar.x}px
-                        }
-                      `}
-                    </style>
                     <Group key={index} id={`barStack${barStack.index}-${bar.index}`} className='stack horizontal'>
-                      <foreignObject
-                        onMouseOver={() => onMouseOverBar(yAxisValue, bar.key)}
-                        onMouseLeave={onMouseLeaveBar}
-                        key={`barstack-horizontal-${barStack.index}-${bar.index}-${index}`}
-                        className={`animated-chart group ${animatedChart ? 'animated' : ''}`}
-                        x={bar.x}
-                        y={bar.y}
-                        style={{ transition: 'all 0.2s linear' }}
-                        width={bar.width}
-                        height={bar.height}
-                        opacity={transparentBar ? 0.2 : 1}
-                        display={displayBar ? 'block' : 'none'}
-                        data-tooltip-html={tooltip}
-                        data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                        onClick={e => {
+                      {createBarElement({
+                        config: config,
+                        seriesHighlight,
+                        index: barStack.index,
+                        className: `animated-chart group ${animatedChart ? 'animated' : ''}`,
+                        background: colorScale(config.runtime.seriesLabels[bar.key]),
+                        borderColor: '#333',
+                        borderStyle: 'solid',
+                        borderWidth: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px`,
+                        width: bar.width,
+                        height: bar.height,
+                        x: bar.x,
+                        y: bar.y,
+                        onMouseOver: () => onMouseOverBar(yAxisValue, 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)
                           }
-                        }}
-                      >
-                        <div style={{ width: bar.width, height: bar.height, background: colorScale(config.runtime.seriesLabels[bar.key]), border: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`, ...style }}></div>
-                      </foreignObject>
+                        },
+                        styleOverrides: {
+                          animationDelay: `${barStack.index * 0.5}s`,
+                          transformOrigin: `${bar.x}px 0`,
+                          opacity: transparentBar ? 0.2 : 1,
+                          display: displayBar ? 'block' : 'none'
+                        }
+                      })}
 
                       {orientation === 'horizontal' && visualizationSubType === 'stacked' && isLabelBelowBar && barStack.index === 0 && !config.yAxis.hideLabel && (
                         <Text

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

@@ -6,12 +6,15 @@ import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import BarChartContext from './context'
 import Regions from '../../Regions'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+
+import createBarElement from '@cdc/core/components/createBarElement'
 
 const BarChartStackedVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
   const { xScale, yScale, xMax, yMax } = useContext(BarChartContext)
   const { transformedData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } = useContext(ConfigContext)
-  const { isHorizontal, barBorderWidth, applyRadius, hoveredBar, getAdditionalColumn, onMouseLeaveBar, onMouseOverBar } = useBarChart()
+  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
 
@@ -19,19 +22,21 @@ const BarChartStackedVertical = () => {
     config.visualizationSubType === 'stacked' &&
     !isHorizontal && (
       <>
-        <BarStack data={data} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} 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 = xMax / barStack.bars.length
-                let barThicknessAdjusted = barThickness * (config.barThickness || 0.8)
+                let barThickness = config.xAxis.type === 'date-time' ? config.barThickness * (xScale.range()[1] - xScale.range()[0]) : xMax / barStack.bars.length
+                let barThicknessAdjusted = barThickness * (config.xAxis.type === 'date-time' ? 1 : config.barThickness || 0.8)
                 let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
                 // 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 rawXValue = bar.bar.data[config.runtime.xAxis.dataKey]
+                const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(rawXValue)) : rawXValue
                 const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
                 if (!yAxisValue) return
+                const barX = xScale(config.runtime.xAxis.type === 'date' ? parseDate(rawXValue) : rawXValue) - (config.xAxis.type === 'date' && config.xAxis.sortDates ? barThicknessAdjusted / 2 : 0)
                 const style = applyRadius(barStack.index)
                 const xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
                 const additionalColTooltip = getAdditionalColumn(hoveredBar)
@@ -46,50 +51,40 @@ const BarChartStackedVertical = () => {
 
                 return (
                   <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
-                    <style>
-                      {`
-                           #barStack${barStack.index}-${bar.index} rect,
-                           #barStack${barStack.index}-${bar.index} foreignObject div{
-                            animation-delay: ${barStack.index * 0.5}s;
-                            transform-origin: ${barThicknessAdjusted / 2}px ${bar.y + bar.height}px
-                          }
-                        `}
-                    </style>
                     <Group key={`bar-stack-${barStack.index}-${bar.index}`} id={`barStack${barStack.index}-${bar.index}`} className='stack vertical'>
-                      <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barThickness * bar.index + offset} y={bar.y - 5} fill={'#000'} textAnchor='middle'>
+                      <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barX + barWidth / 2} y={bar.y - 5} fill={'#000'} textAnchor='middle'>
                         {yAxisValue}
                       </Text>
-                      <foreignObject
-                        onMouseOver={() => onMouseOverBar(xAxisValue, bar.key)}
-                        onMouseLeave={onMouseLeaveBar}
-                        key={`bar-stack-${barStack.index}-${bar.index}`}
-                        x={barThickness * bar.index + offset}
-                        y={bar.y}
-                        width={barThicknessAdjusted}
-                        height={bar.height}
-                        display={displayBar ? 'block' : 'none'}
-                        data-tooltip-html={tooltip}
-                        data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                        onClick={e => {
+                      {createBarElement({
+                        config: config,
+                        seriesHighlight,
+                        index: barStack.index,
+                        background: colorScale(config.runtime.seriesLabels[bar.key]),
+                        borderColor: '#333',
+                        borderStyle: 'solid',
+                        borderWidth: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px`,
+                        width: barThicknessAdjusted,
+                        height: bar.height,
+                        x: barX,
+                        y: bar.y,
+                        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)
                           }
-                        }}
-                      >
-                        <div
-                          style={{
-                            transition: 'all 0.2s linear',
-                            opacity: transparentBar ? 0.2 : 1,
-                            width: barThicknessAdjusted,
-                            height: bar.height,
-                            background: colorScale(config.runtime.seriesLabels[bar.key]),
-                            border: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`,
-                            ...style
-                          }}
-                        ></div>
-                      </foreignObject>
+                        },
+                        styleOverrides: {
+                          animationDelay: `${barStack.index * 0.5}s`,
+                          transformOrigin: `${barThicknessAdjusted / 2}px ${bar.y + bar.height}px`,
+                          opacity: transparentBar ? 0.2 : 1,
+                          display: displayBar ? 'block' : 'none'
+                        }
+                      })}
                     </Group>
                   </Group>
                 )