@cdc/chart 4.23.11 → 4.24.2

package/src/components/{BarChart.Vertical.tsx → BarChart/components/BarChart.Vertical.tsx}

@@ -1,30 +1,55 @@
 import React, { useContext, useState } from 'react'
-import ConfigContext from '../ConfigContext'
-import { useBarChart } from '../hooks/useBarChart'
+import ConfigContext from '../../../ConfigContext'
+import { type ChartContext } from '../../../types/ChartContext'
+import { useBarChart } from '../../../hooks/useBarChart'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { BarGroup } from '@visx/shape'
-import { useHighlightedBars } from '../hooks/useHighlightedBars'
+import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
 import { FaStar } from 'react-icons/fa'
+import Regions from './../../Regions'
 
 // third party
 import chroma from 'chroma-js'
+import BarChartContext, { type BarChartContextValues } from './context'
 
-import { type BarChartProps } from '../types/ChartProps'
-
-export const BarChartVertical = (props: BarChartProps) => {
-  const { xScale, yScale, xMax, yMax, seriesScale } = props
+export const BarChartVertical = () => {
+  const { xScale, yScale, xMax, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
 
   const [barWidth, setBarWidth] = useState(0)
   const [totalBarsInGroup, setTotalBarsInGroup] = useState(0)
 
-  const { barBorderWidth, hasMultipleSeries, applyRadius, updateBars, assignColorsToValues, section, lollipopBarWidth, lollipopShapeSize, getHighlightedBarColorByValue, getHighlightedBarByValue, generateIconSize, getAdditionalColumn, hoveredBar, onMouseOverBar, onMouseLeaveBar } = useBarChart()
-
-  // CONTEXT VALUES
   // prettier-ignore
-  const { colorScale, config, formatDate, formatNumber, getXAxisData, getYAxisData, isNumber, parseDate, seriesHighlight, setSharedFilter, transformedData, dashboardConfig, setSeriesHighlight } = useContext(ConfigContext)
+  const {
+    applyRadius,
+    assignColorsToValues,
+    barBorderWidth,
+    generateIconSize,
+    getAdditionalColumn,
+    getHighlightedBarByValue,
+    getHighlightedBarColorByValue,
+    lollipopBarWidth,
+    lollipopShapeSize,
+    onMouseLeaveBar,
+    onMouseOverBar,
+    section
+  } = useBarChart()
 
-  const { runtime } = config
+  // prettier-ignore
+  const {
+    colorScale,
+    config,
+    dashboardConfig,
+    formatDate,
+    formatNumber,
+    getXAxisData,
+    getYAxisData,
+    isNumber,
+    parseDate,
+    seriesHighlight,
+    setSharedFilter,
+    transformedData,
+  } = useContext<ChartContext>(ConfigContext)
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
   const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
@@ -48,7 +73,10 @@ export const BarChartVertical = (props: BarChartProps) => {
           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 config.runtime.xAxis.type === 'date' ? parseDate(rawXValue) : rawXValue
+          }}
           x0Scale={xScale}
           x1Scale={seriesScale}
           yScale={yScale}
@@ -58,7 +86,7 @@ export const BarChartVertical = (props: BarChartProps) => {
         >
           {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
@@ -71,14 +99,10 @@ export const BarChartVertical = (props: BarChartProps) => {
                   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' && config.xAxis.sortDates ? barGroupWidth / 2 : 0)
                   setBarWidth(barWidth)
                   setTotalBarsInGroup(barGroup.bars.length)
 
@@ -89,14 +113,15 @@ export const BarChartVertical = (props: BarChartProps) => {
                   const newIndex = bar.value < 0 ? -1 : index
                   const borderRadius = applyRadius(newIndex)
                   // tooltips
-                  const additionalColTooltip = getAdditionalColumn(hoveredBar)
+
+                  const additionalColTooltip = getAdditionalColumn(bar.key, data[barGroup.index][config.runtime.originalXAxis.dataKey])
                   let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
 
                   const tooltip = `<ul>
                   <li class="tooltip-heading">${xAxisTooltip}</li>
                   <li class="tooltip-body ">${tooltipBody}</li>
-                   <li class="tooltip-body ">${additionalColTooltip}</li>
+                  ${additionalColTooltip ? '<li class="tooltip-body ">' + additionalColTooltip + '</li>' : ''}
                     </li></ul>`
 
                   // configure colors
@@ -201,7 +226,7 @@ export const BarChartVertical = (props: BarChartProps) => {
                           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}
+                          x={barX}
                           y={barY}
                           width={barWidth}
                           height={barHeight}
@@ -226,7 +251,7 @@ export const BarChartVertical = (props: BarChartProps) => {
                         <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'
@@ -237,7 +262,7 @@ export const BarChartVertical = (props: BarChartProps) => {
                         {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}
@@ -250,7 +275,7 @@ export const BarChartVertical = (props: BarChartProps) => {
                         {config.isLollipopChart && config.lollipopShape === 'square' && (
                           <rect
                             display={displaylollipopShape}
-                            x={offset - lollipopBarWidth / 2}
+                            x={barX - lollipopBarWidth / 2}
                             y={barY}
                             width={lollipopShapeSize}
                             height={lollipopShapeSize}
@@ -278,7 +303,7 @@ export const BarChartVertical = (props: BarChartProps) => {
               let upperPos
               let lowerPos
               let tickWidth = 5
-              xPos = xScale(getXAxisData(d))
+              xPos = xScale(getXAxisData(d)) + (config.xAxis.type !== 'date' || !config.xAxis.sortDates ? seriesScale.range()[1] / 2 : 0)
               upperPos = yScale(getYAxisData(d, config.confidenceKeys.lower))
               lowerPos = yScale(getYAxisData(d, config.confidenceKeys.upper))
               return (
@@ -298,49 +323,7 @@ export const BarChartVertical = (props: BarChartProps) => {
             })
           : ''}
 
-        {config.regions && config.visualizationType !== 'Combo'
-          ? config.regions.map(region => {
-              if (!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
-
-              let from
-              let to
-              let width
-
-              if (config.xAxis.type === 'date') {
-                from = xScale(parseDate(region.from).getTime()) - (barWidth * totalBarsInGroup) / 2
-                to = xScale(parseDate(region.to).getTime()) + (barWidth * totalBarsInGroup) / 2
-
-                width = to - from
-              }
-
-              if (config.xAxis.type === 'categorical') {
-                from = xScale(region.from)
-                to = xScale(region.to)
-                width = to - from
-              }
-
-              if (!from) return null
-              if (!to) return null
-
-              return (
-                <Group className='regions' left={0} key={region.label}>
-                  <path
-                    stroke='#333'
-                    d={`M${from} -5
-                          L${from} 5
-                          M${from} 0
-                          L${to} 0
-                          M${to} -5
-                          L${to} 5`}
-                  />
-                  <rect x={from} y={0} width={width} height={yMax} fill={region.background} opacity={0.3} />
-                  <Text x={from + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>
-                    {region.label}
-                  </Text>
-                </Group>
-              )
-            })
-          : ''}
+        <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={totalBarsInGroup} />
       </Group>
     )
   )

package/src/components/BarChart/components/BarChart.jsx

@@ -0,0 +1,39 @@
+import React, { useContext } from 'react'
+
+// visx
+import { Group } from '@visx/group'
+import { Bar } from '@visx/shape'
+
+// cdc
+import BarChartType from './BarChartType'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import ConfigContext from '../../../ConfigContext'
+import BarChartContext from './context'
+
+const BarChart = ({ xScale, yScale, seriesScale, xMax, yMax, handleTooltipMouseOver, handleTooltipMouseOff, handleTooltipClick }) => {
+  const { transformedData: data, config } = useContext(ConfigContext)
+
+  const contextValues = {
+    xScale,
+    yScale,
+    xMax,
+    yMax,
+    seriesScale
+  }
+
+  return (
+    <ErrorBoundary component='BarChart'>
+      <BarChartContext.Provider value={contextValues}>
+        <Group left={parseFloat(config.runtime.yAxis.size)}>
+          <BarChartType.StackedVertical />
+          <BarChartType.StackedHorizontal />
+          <BarChartType.Vertical />
+          <BarChartType.Horizontal />
+          <Bar key={'bars'} display={config.tooltips.singleSeries ? 'none' : 'block'} width={Number(xMax)} height={Number(yMax)} fill={'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />
+        </Group>
+      </BarChartContext.Provider>
+    </ErrorBoundary>
+  )
+}
+
+export default BarChart

package/src/components/{BarChartType.jsx → BarChart/components/BarChartType.jsx}

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import BarChartStackedVertical from './BarChart.StackedVertical'
 import BarChartStackedHorizontal from './BarChart.StackedHorizontal'
 import BarChartVertical from './BarChart.Vertical'

package/src/components/BarChart/components/context.tsx

@@ -0,0 +1,13 @@
+import { createContext } from 'react'
+
+const BarChartContext = createContext(null)
+
+export type BarChartContextValues = {
+  xMax: number
+  yMax: number
+  xScale: Function
+  yScale: Function
+  seriesScale: Function
+}
+
+export default BarChartContext

package/src/components/BarChart/index.tsx

@@ -0,0 +1,3 @@
+import BarChart from './components/BarChart'
+
+export default BarChart

package/src/components/{BoxPlot.jsx → BoxPlot/BoxPlot.jsx}

@@ -1,12 +1,13 @@
 import React, { useContext, useEffect } from 'react'
 import { BoxPlot } from '@visx/stats'
 import { Group } from '@visx/group'
-import ConfigContext from '../ConfigContext'
+import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 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={{

package/src/components/BoxPlot/index.tsx

@@ -0,0 +1,3 @@
+import BoxPlot from './BoxPlot'
+
+export default BoxPlot