@cdc/chart 4.23.11 → 4.24.1

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

@@ -0,0 +1,106 @@
+import React, { useContext, useState } from 'react'
+import ConfigContext from '../../../ConfigContext'
+import { useBarChart } from '../../../hooks/useBarChart'
+import { BarStack } from '@visx/shape'
+import { Group } from '@visx/group'
+import { Text } from '@visx/text'
+import BarChartContext from './context'
+import Regions from '../../Regions'
+
+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 { orientation } = config
+  const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
+
+  return (
+    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}>
+          {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 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 yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
+                if (!yAxisValue) return
+                const style = applyRadius(barStack.index)
+                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>
+                  <li class="tooltip-heading"">${xAxisTooltip}</li>
+                  <li class="tooltip-body ">${tooltipBody}</li>
+                  <li class="tooltip-body ">${additionalColTooltip}</li>
+                    </li></ul>`
+
+                setBarWidth(barThicknessAdjusted)
+
+                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'>
+                        {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 => {
+                          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>
+                    </Group>
+                  </Group>
+                )
+              })
+            )
+          }
+        </BarStack>
+        <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={1} />
+      </>
+    )
+  )
+}
+
+export default BarChartStackedVertical

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
@@ -89,14 +114,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
@@ -298,49 +324,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,7 +1,7 @@
 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'
 

package/src/components/BoxPlot/index.tsx

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