@cdc/chart 4.23.8 → 4.23.10-alpha

package/src/components/AreaChart.jsx

@@ -10,10 +10,8 @@ import { AreaClosed, LinePath, Bar } from '@visx/shape'
 import { Group } from '@visx/group'
 import { bisector } from 'd3-array'
 
-const AreaChart = ({ xScale, yScale, yMax, xMax, getXAxisData, getYAxisData, chartRef, handleTooltipMouseOver, handleTooltipMouseOff, tooltipData, isDebug, isBrush, brushData, children }) => {
-  // enable various console logs in the file
-  const DEBUG = isDebug
-
+const AreaChart = props => {
+  const { xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug, isBrush, brushData, children } = props
   // import data from context
   let { transformedData: data, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
 
@@ -23,7 +21,7 @@ const AreaChart = ({ xScale, yScale, yMax, xMax, getXAxisData, getYAxisData, cha
   if (isBrush && isDebug) console.log('###AREAchart BRUSH data, xScale, yScale, yMax, xMax', data, xScale, yScale, yMax, xMax)
 
   // Draw transparent bars over the chart to get tooltip data
-  // Turn DEBUG on for additional context.
+  // Turn isDebug on for additional context.
   if (!data) return
 
   // Tooltip helper for getting data to the closest date/category hovered.
@@ -98,29 +96,29 @@ const AreaChart = ({ xScale, yScale, yMax, xMax, getXAxisData, getYAxisData, cha
                 <React.Fragment key={index}>
                   {/* prettier-ignore */}
                   <LinePath
-                  data={seriesData}
-                  x={d => handleX(d)}
-                  y={d => handleY(d, index, s)}
-                  stroke={displayArea ?  colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
-                  strokeWidth={2}
-                  strokeOpacity={1}
-                  shapeRendering='geometricPrecision'
-                  curve={curveType}
-                  strokeDasharray={s.type ? handleLineType(s.type) : 0}
-                />
+                    data={seriesData}
+                    x={d => handleX(d)}
+                    y={d => handleY(d, index, s)}
+                    stroke={displayArea ?  colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
+                    strokeWidth={2}
+                    strokeOpacity={1}
+                    shapeRendering='geometricPrecision'
+                    curve={curveType}
+                    strokeDasharray={s.type ? handleLineType(s.type) : 0}
+                  />
 
                   {/* prettier-ignore */}
                   <AreaClosed
-                  key={'area-chart'}
-                  fill={displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
-                  fillOpacity={transparentArea ? 0.25 : 0.5}
-                  data={seriesData}
-                  x={d => handleX(d)}
-                  y={d => handleY(d, index, s)}
-                  yScale={yScale}
-                  curve={curveType}
-                  strokeDasharray={s.type ? handleLineType(s.type) : 0}
-                />
+                    key={'area-chart'}
+                    fill={displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
+                    fillOpacity={transparentArea ? 0.25 : 0.5}
+                    data={seriesData}
+                    x={d => handleX(d)}
+                    y={d => handleY(d, index, s)}
+                    yScale={yScale}
+                    curve={curveType}
+                    strokeDasharray={s.type ? handleLineType(s.type) : 0}
+                  />
                   {getFirstBrushHandleOnly(children, index)}
                 </React.Fragment>
               )
@@ -128,7 +126,7 @@ const AreaChart = ({ xScale, yScale, yMax, xMax, getXAxisData, getYAxisData, cha
 
             {/* Transparent bar for tooltips - disable if AreaChart is a brush */}
             {/* prettier-ignore */}
-            {!isBrush && <Bar width={Number(xMax)} height={Number(yMax)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} style={DEBUG ? { stroke: 'black', strokeWidth: 2 } : {}} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />}
+            {!isBrush && <Bar width={Number(xMax)} height={Number(yMax)} fill={isDebug ? 'red' : 'transparent'} fillOpacity={0.05} style={isDebug ? { stroke: 'black', strokeWidth: 2 } : {}} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />}
           </Group>
         </ErrorBoundary>
       </svg>

package/src/components/BarChart.StackedVertical.jsx

@@ -27,6 +27,8 @@ const BarChartStackedVertical = props => {
               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)
               let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
               const xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue

package/src/components/DeviationBar.jsx

@@ -1,18 +1,17 @@
 import { Line } from '@visx/shape'
 import { Group } from '@visx/group'
-import { useContext, useEffect } from 'react'
+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'
 
 export default function DeviationBar({ height, xScale }) {
-  const { transformedData: data, config, formatNumber, twoColorPalette, getTextWidth, updateConfig, parseDate, formatDate } = useContext(ConfigContext)
-
-  if (!config || config?.series?.length !== 1 || config.orientation !== 'horizontal') return
-
+  const { transformedData: data, config, formatNumber, twoColorPalette, getTextWidth, updateConfig, parseDate, formatDate, currentViewport } = useContext(ConfigContext)
   const { barStyle, tipRounding, roundingStyle, twoColor } = config
-
+  const barRefs = useRef([])
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
   const radius = roundingStyle === 'standard' ? '8px' : roundingStyle === 'shallow' ? '5px' : roundingStyle === 'finger' ? '15px' : '0px'
   const fontSize = { small: 16, medium: 18, large: 20 }
   const isRounded = config.barStyle === 'rounded'
@@ -76,14 +75,57 @@ export default function DeviationBar({ height, xScale }) {
   }
   targetLabel.calculate()
 
+  const targetRef = useRef(null)
+
+  const entry = useIntersectionObserver(targetRef, {})
+
   useEffect(() => {
-    if (config.barStyle === 'lollipop' && !config.isLollipopChart) {
-      updateConfig({ ...config, isLollipopChart: true })
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth)
+      barRefs.current.forEach(bar => {
+        bar.style.transition = 'none'
+        bar.style.transform = 'translate(0) scale(1)'
+      })
     }
-    if (isRounded || config.barStyle === 'flat') {
-      updateConfig({ ...config, isLollipopChart: false })
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
     }
-  }, [config.barStyle])
+  }, [])
+  const [animatedChart, setAnimatedChart] = useState(false)
+
+  useEffect(() => {
+    if (entry?.isIntersecting) {
+      setTimeout(() => {
+        setAnimatedChart(true)
+      }, 100)
+    }
+  }, [entry?.isIntersecting, config.animate]) // eslint-disable-line
+
+  useEffect(() => {
+    barRefs.current.forEach((bar, i) => {
+      if (config.animate) {
+        const normalizedTarget = (target / maxVal) * 100
+        bar.style.opacity = '0'
+        bar.style.transform = `translate(${normalizedTarget / 1.07}%) scale(0, 1)`
+        setTimeout(() => {
+          bar.style.opacity = '1'
+          bar.style.transform = 'translate(0) scale(1)'
+          bar.style.transition = 'transform 0.5s ease'
+        }, 100)
+      } else {
+        bar.style.transition = 'none'
+        bar.style.opacity = '0'
+      }
+      if (!config.animate) {
+        bar.style.transition = 'none'
+        bar.style.opacity = '1'
+      }
+    })
+  }, [config.animate, config, animatedChart])
+
+  if (!config || config?.series?.length !== 1) return <></>
 
   return (
     <ErrorBoundary component='Deviation Bar'>
@@ -122,7 +164,6 @@ export default function DeviationBar({ height, xScale }) {
           const fill = isBarColorDark ? '#FFFFFF' : '#000000'
 
           let textProps = getTextProps(config.isLollipopChart, textFits, lollipopShapeSize, fill)
-
           // tooltips
           const xAxisValue = formatNumber(barValue, 'left')
           const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[index][config.runtime.originalXAxis.dataKey])) : data[index][config.runtime.originalXAxis.dataKey]
@@ -135,7 +176,19 @@ export default function DeviationBar({ height, xScale }) {
 
           return (
             <Group key={`deviation-bar-${config.orientation}-${seriesKey}-${index}`}>
-              <foreignObject x={barX} y={barY} width={barWidth} height={barHeight} style={{ border: `${borderWidth}px solid #333`, backgroundColor: barColor[barPosition], ...borderRadius }} data-tooltip-html={tooltip} data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} />
+              <foreignObject
+                ref={el => {
+                  // targetRef.current = el
+                  barRefs.current[index] = el
+                }}
+                x={barX}
+                y={barY}
+                width={barWidth}
+                height={barHeight}
+                style={{ border: `${borderWidth}px solid #333`, backgroundColor: barColor[barPosition], ...borderRadius }}
+                data-tooltip-html={tooltip}
+                data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+              />
               {config.yAxis.displayNumbersOnBar && (
                 <Text verticalAnchor='middle' x={textX} y={textY} {...textProps[barPosition]}>
                   {formatNumber(d[seriesKey], 'left')}
@@ -155,6 +208,7 @@ export default function DeviationBar({ height, xScale }) {
 
         {shouldShowTargetLine && <Line from={{ x: targetX, y: 0 }} to={{ x: targetX, y: height }} stroke='#333' strokeWidth={2} />}
       </Group>
+      <foreignObject y={height / 2} ref={targetRef}></foreignObject>
     </ErrorBoundary>
   )
 }