@cdc/chart 4.23.6 → 4.23.8

package/src/components/Forecasting.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext } from 'react'
 
 // cdc
 import ConfigContext from '../ConfigContext'
@@ -6,43 +6,21 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 
 // visx & d3
-import { useTooltipInPortal, defaultStyles } from '@visx/tooltip'
 import { curveMonotoneX } from '@visx/curve'
-import { Bar, Area, LinePath, Line } from '@visx/shape'
+import { Bar, Area, LinePath } from '@visx/shape'
 import { Group } from '@visx/group'
 
-const Forecasting = ({ xScale, yScale, height, width, chartRef, handleTooltipMouseOver, tooltipData, showTooltip, handleTooltipMouseOff }) => {
-  const { transformedData: data, rawData, config, seriesHighlight, formatNumber } = useContext(ConfigContext)
+const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, handleTooltipMouseOff }) => {
+  const { transformedData: data, rawData, config, seriesHighlight } = useContext(ConfigContext)
   const { xAxis, yAxis, legend, runtime } = config
   const DEBUG = false
 
-  // sets the portal x/y for where tooltips should appear on the page.
-  const [chartPosition, setChartPosition] = useState(null)
-  useEffect(() => {
-    setChartPosition(chartRef.current.getBoundingClientRect())
-  }, [chartRef])
-
-  // a unique id is needed for tooltips.
-  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
-
-  // it appears we need to use TooltipInPortal.
-  const { TooltipInPortal } = useTooltipInPortal({
-    detectBounds: true,
-    // when tooltip containers are scrolled, this will correctly update the Tooltip position
-    scroll: true
-  })
-
-  const TooltipListItem = ({ item }) => {
-    const [label, value] = item
-    return label === config.xAxis.dataKey ? `${label}: ${value}` : `${label}: ${formatNumber(value, 'left')}`
-  }
-
   return (
     data && (
       <ErrorBoundary component='ForecastingChart'>
-        <Group className='forecasting-items' key='forecasting-items-wrapper' left={yAxis.size}>
+        <Group className='forecasting-items' key='forecasting-items-wrapper' left={Number(yAxis.size)}>
           {runtime.forecastingSeriesKeys?.map((group, index) => {
-            if (!group || !group.stages) return
+            if (!group || !group.stages) return false
             return group.stages.map((stage, stageIndex) => {
               const { behavior } = legend
               const groupData = rawData.filter(d => d[group.stageColumn] === stage.key)
@@ -54,13 +32,24 @@ const Forecasting = ({ xScale, yScale, height, width, chartRef, handleTooltipMou
                   {group.confidenceIntervals?.map((ciGroup, ciGroupIndex) => {
                     const palette = colorPalettesChart[stage.color]
 
+                    const getFill = () => {
+                      if (displayArea) return palette[ciGroupIndex] ? palette[ciGroupIndex] : 'transparent'
+                      return 'transparent'
+                    }
+
+                    const getStroke = () => {
+                      if (displayArea) return palette[2] ? palette[2] : 'transparent'
+                      return 'transparent'
+                    }
+
+                    if (ciGroup.high === '' || ciGroup.low === '') return
                     return (
                       <Group key={`forecasting-areas--stage-${stage.key.replaceAll(' ', '-')}--group-${stageIndex}-${ciGroupIndex}`}>
                         {/* prettier-ignore */}
                         <Area
                           curve={curveMonotoneX}
                           data={groupData}
-                          fill={displayArea ? palette[ciGroupIndex] : 'transparent'}
+                          fill={getFill()}
                           opacity={transparentArea ? 0.1 : 0.5}
                           x={d => xScale(Date.parse(d[xAxis.dataKey]))}
                           y0={d => yScale(d[ciGroup.low])}
@@ -70,26 +59,10 @@ const Forecasting = ({ xScale, yScale, height, width, chartRef, handleTooltipMou
                         {ciGroupIndex === 0 && (
                           <>
                             {/* prettier-ignore */}
-                            <LinePath
-                              data={groupData}
-                              x={ d => xScale(Date.parse(d[xAxis.dataKey])) }
-                              y={ d => yScale(d[ciGroup.high])}
-                              curve={curveMonotoneX}
-                              stroke={displayArea ? palette[2] : 'transparent'}
-                              strokeWidth={1}
-                              strokeOpacity={1}
-                            />
+                            <LinePath data={groupData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.high]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
 
                             {/* prettier-ignore */}
-                            <LinePath
-                              data={groupData}
-                              x={ d => xScale(Date.parse(d[xAxis.dataKey])) }
-                              y={ d => yScale(d[ciGroup.low])}
-                              curve={curveMonotoneX}
-                              stroke={displayArea ? palette[2] : 'transparent'}
-                              strokeWidth={1}
-                              strokeOpacity={1}
-                            />
+                            <LinePath data={groupData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.low]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
                           </>
                         )}
                       </Group>
@@ -99,46 +72,10 @@ const Forecasting = ({ xScale, yScale, height, width, chartRef, handleTooltipMou
               )
             })
           })}
-
-          {tooltipData && Object.entries(tooltipData.data).length > 0 && config?.runtime?.forecastingSeriesKeys?.length > 0 && (config.visualizationType === 'Combo' || config.visualizationType === 'Forecasting') && (
-            <TooltipInPortal key={Math.random()} top={tooltipData.dataYPosition + chartPosition?.top} left={tooltipData.dataXPosition + chartPosition?.left} style={defaultStyles}>
-              <ul
-                style={{
-                  listStyle: 'none',
-                  paddingLeft: 'unset',
-                  fontFamily: 'sans-serif',
-                  margin: 'auto',
-                  lineHeight: '1rem'
-                }}
-                data-tooltip-id={tooltip_id}
-              >
-                {typeof tooltipData === 'object' &&
-                  Object.entries(tooltipData.data).map((item, index) => (
-                    <li style={{ padding: '2.5px 0' }} key={`li-${index}`}>
-                      <TooltipListItem item={item} />
-                    </li>
-                  ))}
-              </ul>
-            </TooltipInPortal>
-          )}
-          {config?.runtime?.forecastingSeriesKeys?.length > 0 && (config.visualizationType === 'Combo' || config.visualizationType === 'Forecasting') && (
-            <Group key='tooltip-hover-section'>
-              <Bar key={'bars'} width={Number(width)} height={Number(height)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
-            </Group>
-          )}
-        </Group>
-
-        {showTooltip && tooltipData && config.visual.verticalHoverLine && (
-          <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
-            <Line from={{ x: tooltipData.dataXPosition - 10, y: 0 }} to={{ x: tooltipData.dataXPosition - 10, y: height }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='vertical-tooltip-line' />
+          <Group key='tooltip-hover-section'>
+            <Bar key={'bars'} width={Number(width)} height={Number(height)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
           </Group>
-        )}
-
-        {showTooltip && tooltipData && config.visual.horizontalHoverLine && (
-          <Group key='tooltipLine-horizontal' className='horizontal-tooltip-line' left={config.yAxis.size ? config.yAxis.size : 0}>
-            <Line from={{ x: 0, y: tooltipData.dataYPosition }} to={{ x: width, y: tooltipData.dataYPosition }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='horizontal-tooltip-line' />
-          </Group>
-        )}
+        </Group>
       </ErrorBoundary>
     )
   )

package/src/components/ForestPlot.jsx

@@ -0,0 +1,191 @@
+import React, { useContext, useEffect } from 'react'
+
+// visx
+import { Group } from '@visx/group'
+import { Line, Bar, Circle, LinePath } from '@visx/shape'
+import { GlyphDiamond } from '@visx/glyph'
+import { Text } from '@visx/text'
+import { scaleLinear } from '@visx/scale'
+import { curveLinearClosed } from '@visx/curve'
+
+// cdc
+import ConfigContext from '../ConfigContext'
+import { getFontSize } from '@cdc/core/helpers/cove/number'
+
+const ForestPlot = props => {
+  const { transformedData: data, updateConfig, dimensions, rawData } = useContext(ConfigContext)
+  const { xScale, yScale, config, height, width, handleTooltipMouseOff, handleTooltipMouseOver, maxWidth, maxHeight } = props
+  const { forestPlot, runtime, dataFormat } = config
+  const [screenWidth, screenHeight] = dimensions
+
+  // Requirements for forest plot
+  // - force legend to be hidden for this chart type
+  // - reset the date category axis to zero
+  useEffect(() => {
+    if (!config.legend.hide) {
+      updateConfig({
+        ...config,
+        legend: {
+          ...config.legend,
+          hide: true
+        },
+        xAxis: {
+          ...config.xAxis,
+          size: 0
+        }
+      })
+    }
+  }, [])
+
+  const diamondHeight = 5
+
+  // diamond path
+  const regressionPoints = [
+    { x: xScale(forestPlot.regression.lower), y: height - Number(config.forestPlot.rowHeight) },
+    { x: xScale(forestPlot.regression.estimateField), y: height - diamondHeight - Number(config.forestPlot.rowHeight) },
+    { x: xScale(forestPlot.regression.upper), y: height - Number(config.forestPlot.rowHeight) },
+    { x: xScale(forestPlot.regression.estimateField), y: height + diamondHeight - Number(config.forestPlot.rowHeight) },
+    { x: xScale(forestPlot.regression.lower), y: height - Number(config.forestPlot.rowHeight) }
+  ]
+
+  const topMarginOffset = config.forestPlot.rowHeight
+
+  const topLine = [
+    { x: 0, y: topMarginOffset },
+    { x: width, y: topMarginOffset }
+  ]
+
+  const bottomLine = [
+    { x: 0, y: height },
+    { x: width, y: height }
+  ]
+
+  const columnsOnChart = Object.entries(config.columns)
+    .map(entry => entry[1])
+    .filter(entry => entry.forestPlot === true)
+
+  const rightOffset = forestPlot.rightWidthOffset !== 0 ? (Number(forestPlot.rightWidthOffset) / 100) * width : width
+  const leftOffset = forestPlot.leftWidthOffset !== 0 ? (Number(forestPlot.leftWidthOffset) / 100) * width : width
+  const chartWidth = width - rightOffset - leftOffset
+
+  return (
+    <>
+      <Group>
+        {forestPlot.title !== '' && (
+          <Text className={`forest-plot--title`} x={xScale(0)} y={0} textAnchor='middle' verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+            {forestPlot.title}
+          </Text>
+        )}
+        {forestPlot.regression.showBaseLine && <Line from={{ x: xScale(forestPlot.regression.estimateField), y: 0 + topMarginOffset }} to={{ x: xScale(forestPlot.regression.estimateField), y: height }} className='forestplot__baseline' stroke={forestPlot.regression.baseLineColor || 'black'} />}
+        {forestPlot.showZeroLine && <Line from={{ x: xScale(0), y: 0 + topMarginOffset }} to={{ x: xScale(0), y: height }} className='forestplot__zero-line' stroke='gray' strokeDasharray={'5 5'} />}
+
+        {data.map((d, i) => {
+          // calculate both square and circle size based on radius.min and radius.max
+          const scaleRadius = scaleLinear({
+            domain: xScale.domain(),
+            range: [forestPlot.radius.min, forestPlot.radius.max]
+          })
+
+          // glyph settings
+          const diamondSize = forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.estimateField]) * 5 : 4
+          const rectSize = forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.estimateField]) : 4
+          const shapeColor = forestPlot.colors.shape ? forestPlot.colors.shape : 'black'
+          const lineColor = forestPlot.colors.line ? forestPlot.colors.line : 'black'
+
+          // ci size
+          const ciEndSize = 4
+
+          return (
+            <Group>
+              {/* Confidence Interval Paths */}
+              <path
+                stroke={lineColor}
+                strokeWidth={1}
+                className='lower-ci'
+                d={`
+                    M${xScale(d[forestPlot.lower])} ${yScale(i) - Number(ciEndSize)}
+                    L${xScale(d[forestPlot.lower])} ${yScale(i) + Number(ciEndSize)}
+                `}
+              />
+
+              <path
+                stroke={lineColor}
+                strokeWidth={1}
+                className='upper-ci'
+                d={`
+                    M${xScale(d[forestPlot.upper])} ${yScale(i) - Number(ciEndSize)}
+                    L${xScale(d[forestPlot.upper])} ${yScale(i) + Number(ciEndSize)}
+                `}
+              />
+
+              {/* main line */}
+              <line stroke={lineColor} className={`line-${d[config.yAxis.dataKey]}`} key={i} x1={xScale(d[forestPlot.lower])} x2={xScale(d[forestPlot.upper])} y1={yScale(i)} y2={yScale(i)} />
+              {forestPlot.shape === 'circle' && (
+                <Circle className='forest-plot--circle' cx={xScale(Number(d[forestPlot.estimateField]))} cy={yScale(i)} r={forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.estimateField]) : 4} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />
+              )}
+              {forestPlot.shape === 'square' && <rect className='forest-plot--square' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i) - rectSize / 2} width={rectSize} height={rectSize} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />}
+              {forestPlot.shape === 'diamond' && <GlyphDiamond className='forest-plot--diamond' size={diamondSize} top={yScale(i)} left={xScale(Number(d[forestPlot.estimateField]))} fill={shapeColor} />}
+              {forestPlot.shape === 'text' && (
+                <Text className='forest-plot--text' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i)} textAnchor='middle' verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={shapeColor}>
+                  {d[forestPlot.estimateField]}
+                </Text>
+              )}
+            </Group>
+          )
+        })}
+
+        {/* regression diamond */}
+        {regressionPoints && forestPlot.regression.showDiamond && <LinePath data={regressionPoints} x={d => d.x} y={d => d.y} stroke='black' strokeWidth={2} fill={forestPlot.regression.baseLineColor} curve={curveLinearClosed} />}
+        {/* regression text */}
+        {forestPlot.regression.description && (
+          <Text x={0 - Number(config.xAxis.size)} width={width} y={height - config.forestPlot.rowHeight - Number(forestPlot.rowHeight) / 3} verticalAnchor='start' textAnchor='start' style={{ fontWeight: 'bold', fontSize: 12 }}>
+            {forestPlot.regression.description}
+          </Text>
+        )}
+
+        <Bar key='forest-plot-tooltip-area' className='forest-plot-tooltip-area' width={width} height={height} fill={false ? 'red' : 'transparent'} fillOpacity={0.5} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
+      </Group>
+      <Line from={topLine[0]} to={topLine[1]} style={{ stroke: 'black', strokeWidth: 2 }} className='forestplot__top-line' />
+      <Line from={bottomLine[0]} to={bottomLine[1]} style={{ stroke: 'black', strokeWidth: 2 }} className='forestplot__bottom-line' />
+
+      {/* column data */}
+      {columnsOnChart.map(column => {
+        return rawData.map((d, i) => {
+          return (
+            <Text className={`${d[column.name]}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={yScale(i)} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+              {d[column.name]}
+            </Text>
+          )
+        })
+      })}
+
+      {/* X Axis DataKey Cols*/}
+      {!forestPlot.hideDateCategoryCol &&
+        data.map((d, i) => {
+          return (
+            <Text className={`${d[config.xAxis.dataKey]}`} x={0} y={yScale(i)} textAnchor={'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+              {d[config.xAxis.dataKey]}
+            </Text>
+          )
+        })}
+
+      {/* X Axis Datakey Header */}
+      {!forestPlot.hideDateCategoryCol && config.xAxis.dataKey && (
+        <Text className={config.xAxis.dataKey} x={0} y={0} textAnchor={'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+          {config.xAxis.dataKey}
+        </Text>
+      )}
+
+      {/* column headers */}
+      {columnsOnChart.map(column => {
+        return (
+          <Text className={`${column.label}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={0} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+            {column.label}
+          </Text>
+        )
+      })}
+    </>
+  )
+}
+
+export default ForestPlot