@cdc/chart 4.23.5 → 4.23.6

package/src/components/LineChart.jsx

@@ -62,6 +62,8 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                     ${yAxisTooltip}<br />
                     ${xAxisTooltip}
                   </div>`
+
+                // TODO: move all instances of circleRadii to state.
                 let circleRadii = 4.5
 
                 return (
@@ -107,7 +109,7 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                 strokeOpacity={1}
                 strokeDasharray={lineType ? handleLineType(lineType) : 0}
                 defined={(item, i) => {
-                  return item[config.runtime.seriesLabels[seriesKey]] !== '' && item[config.runtime.seriesLabels[seriesKey]] !== null && item[config.runtime.seriesLabels[seriesKey]] !== undefined
+                  return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
                 }}
               />
               {config.animate && (

package/src/components/LinearChart.jsx

@@ -5,6 +5,8 @@ import { Group } from '@visx/group'
 import { Line } from '@visx/shape'
 import { Text } from '@visx/text'
 import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
+import { localPoint } from '@visx/event'
+import { useTooltip } from '@visx/tooltip'
 
 import BarChart from './BarChart'
 import ConfigContext from '../ConfigContext'
@@ -23,9 +25,10 @@ import useScales from '../hooks/useScales'
 import useMinMax from '../hooks/useMinMax'
 import useRightAxis from '../hooks/useRightAxis'
 import useTopAxis from '../hooks/useTopAxis'
+import Forecasting from './Forecasting'
 
 export default function LinearChart() {
-  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, handleLineType } = useContext(ConfigContext)
+  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, handleLineType, rawData } = useContext(ConfigContext)
 
   // getters & functions
   const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
@@ -52,7 +55,7 @@ export default function LinearChart() {
   const [animatedChart, setAnimatedChart] = useState(false)
   const properties = { data, config, minValue, maxValue, isAllLine, existPositiveValue, xAxisDataMapped, xMax, yMax }
   const { min, max } = useMinMax(properties)
-  const { xScale, yScale, seriesScale, g1xScale, g2xScale } = useScales({ ...properties, min, max })
+  const { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding } = useScales({ ...properties, min, max })
 
   // refs
   const triggerRef = useRef()
@@ -63,7 +66,7 @@ export default function LinearChart() {
 
   const handleLeftTickFormatting = tick => {
     if (config.useLogScale && tick === 0.1) {
-      //when logaritmic scale applyed change value of FIRST  tick
+      //when logarithmic scale applied change value of first tick
       tick = 0
     }
     if (config.runtime.yAxis.type === 'date') return formatDate(parseDate(tick))
@@ -118,6 +121,109 @@ export default function LinearChart() {
     return tickCount
   }
 
+  // Tooltip helper for getting data to the closest date/category hovered.
+  const getXValueFromCoordinate = x => {
+    if (xScale.type === 'point') {
+      // Find the closest x value by calculating the minimum distance
+      let closestX = null
+      let minDistance = Number.MAX_VALUE
+      let offset = x - yAxis.size
+
+      data.forEach(d => {
+        const xPosition = xAxis.type === 'date' ? xScale(parseDate(d[xAxis.dataKey])) : xScale(d[xAxis.dataKey])
+        const distance = Math.abs(Number(xPosition - offset))
+
+        if (distance < minDistance) {
+          minDistance = distance
+          closestX = xAxis.type === 'date' ? parseDate(d[xAxis.dataKey]) : d[xAxis.dataKey]
+        }
+      })
+      return closestX
+    }
+  }
+
+  // import tooltip helpers
+  const { tooltipData, showTooltip, hideTooltip } = useTooltip()
+
+  const handleTooltipMouseOver = (e, data) => {
+    // get the svg coordinates of the mouse
+    // and get the closest values
+    const eventSvgCoords = localPoint(e)
+    const { x, y } = eventSvgCoords
+
+    const { runtime } = config
+
+    let closestXScaleValue = getXValueFromCoordinate(x)
+    let formattedDate = formatDate(closestXScaleValue)
+
+    let yScaleValues
+    if (xAxis.type === 'categorical') {
+      yScaleValues = data.filter(d => d[xAxis.dataKey] === closestXScaleValue)
+    } else {
+      yScaleValues = rawData.filter(d => formatDate(parseDate(d[xAxis.dataKey])) === formattedDate)
+    }
+
+    let seriesToInclude = []
+    let stageColumns = []
+    let ciItems = []
+
+    // loop through series for items to add to tooltip.
+    // there is probably a better way of doing this.
+    config.series?.map(s => {
+      if (s.type === 'Forecasting') {
+        stageColumns.push(s.stageColumn)
+
+        // greedy fn 😭
+        s?.confidenceIntervals.map(ci => {
+          if (ci.showInTooltip === true) {
+            ciItems.push(ci.low)
+            ciItems.push(ci.high)
+          }
+        })
+      }
+    })
+
+    let standardLoopItems = []
+
+    if (config.visualizationType === 'Combo') {
+      standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.barSeriesKeys, ...stageColumns, ...ciItems]
+    } else {
+      standardLoopItems = [runtime.xAxis.dataKey, ...stageColumns, ...ciItems]
+    }
+
+    standardLoopItems.map(seriesKey => {
+      if (!seriesKey) return false
+      if (!yScaleValues[0]) return false
+      for (const item of Object.entries(yScaleValues[0])) {
+        if (item[0] === seriesKey) {
+          seriesToInclude.push(item)
+        }
+      }
+    })
+
+    // filter out the series that aren't added to the map.
+    if (!seriesToInclude) return
+    let initialTooltipData = Object.fromEntries(seriesToInclude) ? Object.fromEntries(seriesToInclude) : {}
+
+    let tooltipData = {}
+    tooltipData.data = initialTooltipData
+    tooltipData.dataXPosition = x + 10
+    tooltipData.dataYPosition = y
+
+    let tooltipInformation = {
+      tooltipData: tooltipData,
+      tooltipTop: 0,
+      tooltipValues: yScaleValues,
+      tooltipLeft: x
+    }
+
+    showTooltip(tooltipInformation)
+  }
+
+  const handleTooltipMouseOff = () => {
+    hideTooltip()
+  }
+
   // Make sure the chart is visible if in the editor
   /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
@@ -144,7 +250,7 @@ export default function LinearChart() {
   ) : (
     <ErrorBoundary component='LinearChart'>
       <svg width={width} height={height} className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''}`} role='img' aria-label={handleChartAriaLabels(config)} tabIndex={0} ref={svgRef}>
-        {/* Higlighted regions */}
+        {/* Highlighted regions */}
         {config.regions
           ? config.regions.map(region => {
               if (!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
@@ -288,7 +394,7 @@ export default function LinearChart() {
                     )
                   })}
                   {!config.yAxis.rightHideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
-                  <Text className='y-label' textAnchor='middle' verticalAnchor='start' transform={`translate(${config.yAxis.rightLabelOffsetSize ? config.yAxis.rightLabelOffsetSize : 0}, ${axisCenter}) rotate(90)`} fontWeight='bold' fill={config.yAxis.rightAxisLabelColor}>
+                  <Text className='y-label' textAnchor='middle' verticalAnchor='start' transform={`translate(${config.yAxis.rightLabelOffsetSize ? config.yAxis.rightLabelOffsetSize : 0}, ${axisCenter}) rotate(-90)`} fontWeight='bold' fill={config.yAxis.rightAxisLabelColor}>
                     {props.label}
                   </Text>
                 </Group>
@@ -428,28 +534,49 @@ export default function LinearChart() {
             </AxisBottom>
           </>
         )}
-
         {config.visualizationType === 'Deviation Bar' && <DeviationBar xScale={xScale} yScale={yScale} width={xMax} height={yMax} />}
         {config.visualizationType === 'Paired Bar' && <PairedBarChart originalWidth={width} width={xMax} height={yMax} />}
         {config.visualizationType === 'Scatter Plot' && <CoveScatterPlot xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} />}
         {config.visualizationType === 'Box Plot' && <CoveBoxPlot xScale={xScale} yScale={yScale} />}
         {(config.visualizationType === 'Area Chart' || config.visualizationType === 'Combo') && <CoveAreaChart xScale={xScale} yScale={yScale} yMax={yMax} xMax={xMax} chartRef={svgRef} />}
-
-        {/* Bar chart */}
-        {/* TODO: Make this just bar or combo? */}
-        {config.visualizationType !== 'Line' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Area Chart' && config.visualizationType !== 'Scatter Plot' && config.visualizationType !== 'Deviation Bar' && (
-          <>
-            <BarChart xScale={xScale} yScale={yScale} seriesScale={seriesScale} xMax={xMax} yMax={yMax} getXAxisData={getXAxisData} getYAxisData={getYAxisData} animatedChart={animatedChart} visible={animatedChart} />
-          </>
+        {(config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && <BarChart xScale={xScale} yScale={yScale} seriesScale={seriesScale} xMax={xMax} yMax={yMax} getXAxisData={getXAxisData} getYAxisData={getYAxisData} animatedChart={animatedChart} visible={animatedChart} />}
+        {(config.visualizationType === 'Line' || config.visualizationType === 'Combo') && <LineChart xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} xMax={xMax} yMax={yMax} seriesStyle={config.series} />}
+        {(config.visualizationType === 'Forecasting' || config.visualizationType === 'Combo') && (
+          <Forecasting
+            hideTooltip={hideTooltip}
+            showTooltip={showTooltip}
+            tooltipData={tooltipData}
+            xScale={xScale}
+            yScale={yScale}
+            width={xMax}
+            height={yMax}
+            xScaleNoPadding={xScaleNoPadding}
+            chartRef={svgRef}
+            getXValueFromCoordinate={getXValueFromCoordinate}
+            handleTooltipMouseOver={handleTooltipMouseOver}
+            handleTooltipMouseOff={handleTooltipMouseOff}
+          />
         )}
 
+        {/* y anchors */}
+        {config.yAxis.anchors &&
+          config.yAxis.anchors.map(anchor => {
+            return <Line strokeDasharray={handleLineType(anchor.lineStyle)} stroke='rgba(0,0,0,1)' className='customAnchor' from={{ x: 0 + config.yAxis.size, y: yScale(anchor.value) }} to={{ x: xMax, y: yScale(anchor.value) }} display={config.runtime.horizontal ? 'none' : 'block'} />
+          })}
+
         {/* Line chart */}
         {/* TODO: Make this just line or combo? */}
-        {config.visualizationType !== 'Bar' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Area Chart' && config.visualizationType !== 'Scatter Plot' && config.visualizationType !== 'Deviation Bar' && (
-          <>
-            <LineChart xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} xMax={xMax} yMax={yMax} seriesStyle={config.series} />
-          </>
-        )}
+        {config.visualizationType !== 'Bar' &&
+          config.visualizationType !== 'Paired Bar' &&
+          config.visualizationType !== 'Box Plot' &&
+          config.visualizationType !== 'Area Chart' &&
+          config.visualizationType !== 'Scatter Plot' &&
+          config.visualizationType !== 'Deviation Bar' &&
+          config.visualizationType !== 'Forecasting' && (
+            <>
+              <LineChart xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} xMax={xMax} yMax={yMax} seriesStyle={config.series} />
+            </>
+          )}
 
         {/* y anchors */}
         {config.yAxis.anchors &&