@cdc/chart 4.24.5 → 4.24.9

package/src/hooks/useScales.ts

@@ -3,7 +3,7 @@ import { useContext } from 'react'
 import ConfigContext from '../ConfigContext'
 import { ChartConfig } from '../types/ChartConfig'
 import { ChartContext } from '../types/ChartContext'
-
+import * as d3 from 'd3'
 const scaleTypes = {
   TIME: 'time',
   LOG: 'log',
@@ -27,12 +27,10 @@ const useScales = (properties: useScaleProps) => {
 
   const { rawData, dimensions } = useContext<ChartContext>(ConfigContext)
 
-  const [screenWidth, screenHeight] = dimensions
+  const [screenWidth] = dimensions
   const seriesDomain = config.runtime.barSeriesKeys || config.runtime.seriesKeys
   const xAxisType = config.runtime.xAxis.type
   const isHorizontal = config.orientation === 'horizontal'
-  const getXAxisDataKeys = d => d[config.runtime.originalXAxis.dataKey]
-  const xAxisDataKeysMapped = data.map(d => getXAxisDataKeys(d))
 
   const { visualizationType } = config
 
@@ -43,12 +41,15 @@ const useScales = (properties: useScaleProps) => {
   let g1xScale = null
   let seriesScale = null
   let xScaleNoPadding = null
-  let xScaleBrush = null
+  let xScaleAnnotation = scaleLinear({
+    domain: [0, 100],
+    range: [0, xMax]
+  })
 
   // handle  Horizontal bars
   if (isHorizontal) {
     xScale = composeXScale({ min: min * 1.03, ...properties })
-    xScale.type = config.useLogScale ? scaleTypes.LOG : scaleTypes.LINEAR
+    xScale.type = config.yAxis.type === 'logarithmic' ? scaleTypes.LOG : scaleTypes.LINEAR
     yScale = getYScaleFunction(xAxisType, xAxisDataMapped)
     yScale.rangeRound([0, yMax])
     seriesScale = composeScalePoint(seriesDomain, [0, yMax])
@@ -56,16 +57,20 @@ const useScales = (properties: useScaleProps) => {
 
   // handle  Vertical bars
   if (!isHorizontal) {
-    xScaleBrush = composeScalePoint(xAxisDataKeysMapped, [0, xMax], 0.5)
     xScale = composeScaleBand(xAxisDataMapped, [0, xMax], 1 - config.barThickness)
     yScale = composeYScale(properties)
     seriesScale = composeScaleBand(seriesDomain, [0, xScale.bandwidth()], 0)
   }
 
-  // handle Area chart
+  // handle Linear scaled viz
+  if (config.xAxis.type === 'date' && !isHorizontal) {
+    const xAxisDataMappedSorted = xAxisDataMapped ? xAxisDataMapped.sort() : []
+    xScale = composeScaleBand(xAxisDataMappedSorted, [0, xMax], 1 - config.barThickness)
+  }
+
   if (config.xAxis.type === 'date-time') {
-    let xAxisMin = Math.min(...xAxisDataMapped)
-    let xAxisMax = Math.max(...xAxisDataMapped)
+    let xAxisMin = Math.min(...xAxisDataMapped.map(Number))
+    let xAxisMax = Math.max(...xAxisDataMapped.map(Number))
     xAxisMin -= (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
     xAxisMax += (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
     xScale = scaleTime({
@@ -74,7 +79,20 @@ const useScales = (properties: useScaleProps) => {
     })
 
     xScale.type = scaleTypes.TIME
-    seriesScale = composeScaleBand(seriesDomain, [0, config.barThickness * xMax], 0)
+
+    let minDistance = Number.MAX_VALUE
+    let xAxisDataMappedSorted = xAxisDataMapped ? xAxisDataMapped.sort() : []
+    for (let i = 0; i < xAxisDataMappedSorted.length - 1; i++) {
+      let distance = xScale(xAxisDataMappedSorted[i + 1]) - xScale(xAxisDataMappedSorted[i])
+
+      if (distance < minDistance) minDistance = distance
+    }
+
+    if (xAxisDataMapped.length === 1 || minDistance > xMax / 4) {
+      minDistance = xMax / 4
+    }
+
+    seriesScale = composeScaleBand(seriesDomain, [0, (config.barThickness || 1) * minDistance], 0)
   }
 
   // handle Deviation bar
@@ -107,7 +125,9 @@ const useScales = (properties: useScaleProps) => {
   // handle Box plot
   if (visualizationType === 'Box Plot') {
     const allOutliers = []
-    const hasOutliers = config.boxplot.plots.map(b => b.columnOutliers.map(outlier => allOutliers.push(outlier))) && !config.boxplot.hideOutliers
+    const hasOutliers =
+      config.boxplot.plots.map(b => b.columnOutliers.map(outlier => allOutliers.push(outlier))) &&
+      !config.boxplot.hideOutliers
 
     // check if outliers are lower
     if (hasOutliers) {
@@ -193,8 +213,11 @@ const useScales = (properties: useScaleProps) => {
     if (screenWidth > 480) {
       if (config.forestPlot.type === 'Linear') {
         xScale = scaleLinear({
-          domain: [Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower]))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper]))) + xAxisPadding],
-          range: [leftWidthOffset, dimensions[0] - rightWidthOffset]
+          domain: [
+            Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower]))) - xAxisPadding,
+            Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper]))) + xAxisPadding
+          ],
+          range: [leftWidthOffset, Number(screenWidth) - rightWidthOffset]
         })
         xScale.type = scaleTypes.LINEAR
       }
@@ -212,7 +235,10 @@ const useScales = (properties: useScaleProps) => {
     } else {
       if (config.forestPlot.type === 'Linear') {
         xScale = scaleLinear({
-          domain: [Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower]))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper]))) + xAxisPadding],
+          domain: [
+            Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower]))) - xAxisPadding,
+            Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper]))) + xAxisPadding
+          ],
           range: [leftWidthOffsetMobile, xMax - rightWidthOffsetMobile],
           type: scaleTypes.LINEAR
         })
@@ -233,7 +259,7 @@ const useScales = (properties: useScaleProps) => {
       }
     }
   }
-  return { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding, xScaleBrush }
+  return { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding, xScaleAnnotation }
 }
 
 export default useScales
@@ -273,31 +299,37 @@ export const getTickValues = (xAxisDataMapped, xScale, num) => {
 /// helper functions
 const composeXScale = ({ min, max, xMax, config }) => {
   // Adjust min value if using logarithmic scale
-  min = config.useLogScale && min >= 0 && min < 1 ? min + 0.1 : min
+  const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
+  min = isLogarithmicAxis && min >= 0 && min < 1 ? min + 0.1 : min
   // Select the appropriate scale function
-  const scaleFunc = config.useLogScale ? scaleLog : scaleLinear
+  const scaleFunc = isLogarithmicAxis ? scaleLog : scaleLinear
   // Return the configured scale function
   return scaleFunc({
     domain: [min, max],
     range: [0, xMax],
-    nice: config.useLogScale,
-    zero: config.useLogScale
+    nice: isLogarithmicAxis,
+    zero: isLogarithmicAxis
   })
 }
 
 const composeYScale = ({ min, max, yMax, config, leftMax }) => {
   // Adjust min value if using logarithmic scale
-  min = config.useLogScale && min >= 0 && min < 1 ? min + 0.1 : min
+  const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
+  min = isLogarithmicAxis && min >= 0 && min < 1 ? min + 0.1 : min
   // Select the appropriate scale function
-  const scaleFunc = config.useLogScale ? scaleLog : scaleLinear
+  const scaleFunc = isLogarithmicAxis ? scaleLog : scaleLinear
 
   if (config.visualizationType === 'Combo') max = leftMax
+
+  // If the visualization type is a bump chart then the domain and range need different values
+  const domainSet = config.visualizationType === 'Bump Chart' ? [1, max] : [min, max]
+  const yRange = config.visualizationType === 'Bump Chart' ? [30, yMax] : [yMax, 0]
   // Return the configured scale function
   return scaleFunc({
-    domain: [min, max],
-    range: [yMax, 0],
-    nice: config.useLogScale,
-    zero: config.useLogScale
+    domain: domainSet,
+    range: yRange,
+    nice: isLogarithmicAxis,
+    zero: isLogarithmicAxis
   })
 }
 

package/src/hooks/useTooltip.tsx

@@ -9,9 +9,20 @@ import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
 
 export const useTooltip = props => {
-  const { tableData: data, config, formatNumber, capitalize, formatDate, formatTooltipsDate, parseDate, setSharedFilter } = useContext<ChartContext>(ConfigContext)
+  const {
+    tableData: data,
+    config,
+    formatNumber,
+    capitalize,
+    formatDate,
+    formatTooltipsDate,
+    parseDate,
+    setSharedFilter,
+    isDraggingAnnotation
+  } = useContext<ChartContext>(ConfigContext)
   const { xScale, yScale, showTooltip, hideTooltip } = props
   const { xAxis, visualizationType, orientation, yAxis, runtime } = config
+
   /**
    * Provides the tooltip information based on the tooltip data array and svg cursor coordinates
    * @function getTooltipInformation
@@ -19,6 +30,42 @@ export const useTooltip = props => {
    * @param {Object} eventSvgCoords - The object containing the SVG coordinates of the event.
    * @return {Object} - The tooltip information with tooltip data.
    */
+
+  // function handles only Single series hovred data tooltips
+  const findDataKeyByThreshold = (mouseY, datapoint) => {
+    let sum = 0
+    let threshold = Number(yScale.invert(mouseY))
+    let hoveredKey = null
+    let hoveredValue = null
+
+    for (let key of config.runtime?.seriesKeys) {
+      if (datapoint.hasOwnProperty(key)) {
+        sum += Number(datapoint[key])
+        if (sum >= threshold) {
+          hoveredValue = datapoint[key]
+          hoveredKey = key
+          break
+        }
+      }
+    }
+
+    // Return null if no matching data is found
+    return [hoveredKey, hoveredValue]
+  }
+
+  const getFormattedValue = (seriesKey, value, config, getAxisPosition) => {
+    // handle case where data is missing
+    const showMissingDataValue = config.general.showMissingDataLabel && (!value || value === 'null')
+    let formattedValue = seriesKey === config.xAxis.dataKey ? value : formatNumber(value, getAxisPosition(seriesKey))
+
+    formattedValue =
+      showMissingDataValue && (config.visualizationSubType === 'stacked' ? !config.general.hideNullValue : true)
+        ? 'N/A'
+        : formattedValue
+
+    return formattedValue
+  }
+
   const getTooltipInformation = (tooltipDataArray, eventSvgCoords) => {
     const { x, y } = eventSvgCoords
     let initialTooltipData = tooltipDataArray || {}
@@ -45,7 +92,10 @@ export const useTooltip = props => {
    * @return {void} - The tooltip information is displayed
    */
   const handleTooltipMouseOver = (e, additionalChartData) => {
+    if (visualizationType === 'Bump Chart') return
     e.stopPropagation()
+    if (isDraggingAnnotation) return
+
     const eventSvgCoords = localPoint(e)
     const { x, y } = eventSvgCoords
 
@@ -54,10 +104,13 @@ export const useTooltip = props => {
 
     const closestXScaleValue = getXValueFromCoordinate(x - Number(config.yAxis.size || 0))
 
-    const includedSeries = visualizationType !== 'Pie' ? config.series.filter(series => series.tooltip === true).map(item => item.dataKey) : config.series.map(item => item.dataKey)
+    const includedSeries =
+      visualizationType !== 'Pie'
+        ? config.runtime.series.filter(series => series.tooltip === true).map(item => item.dataKey)
+        : config.runtime.series.map(item => item.dataKey)
     includedSeries.push(config.xAxis.dataKey)
     if (config.visualizationType === 'Forecasting') {
-      config.series.map(s => {
+      config.runtime.series.map(s => {
         s.confidenceIntervals.map(c => {
           if (c.showInTooltip) {
             includedSeries.push(c.high)
@@ -84,7 +137,7 @@ export const useTooltip = props => {
     const resolvedScaleValues = orientation === 'vertical' ? yScaleValues : xScaleValues
 
     const getAxisPosition = seriesKey => {
-      const seriesObj = config.series.filter(s => s.dataKey === seriesKey)[0]
+      const seriesObj = config.runtime.series.filter(s => s.dataKey === seriesKey)[0]
       const position = seriesObj?.axis ? String(seriesObj.axis).toLowerCase() : 'left'
       return position
     }
@@ -133,22 +186,34 @@ export const useTooltip = props => {
       if (visualizationType === 'Forest Plot') {
         tooltipItems.push([config.xAxis.dataKey, getClosestYValue(y)])
       }
-
-      if (visualizationType !== 'Pie' && visualizationType !== 'Forest Plot') {
+      // handle tooltip for all  hovered series
+      if (visualizationType !== 'Pie' && visualizationType !== 'Forest Plot' && !config.tooltips.singleSeries) {
         tooltipItems.push(
           ...getIncludedTooltipSeries()
-            ?.filter(seriesKey => config.series?.find(item => item.dataKey === seriesKey && item?.tooltip) || config.xAxis?.dataKey == seriesKey)
+            ?.filter(
+              seriesKey =>
+                config.runtime.series?.find(item => item.dataKey === seriesKey && item?.tooltip) ||
+                config.xAxis?.dataKey == seriesKey ||
+                visualizationType === 'Forecasting'
+            )
             ?.flatMap(seriesKey => {
-              let formattedValue = seriesKey === config.xAxis.dataKey ? resolvedScaleValues[0]?.[seriesKey] : formatNumber(resolvedScaleValues[0]?.[seriesKey], getAxisPosition(seriesKey))
-              const suppressed = config.preliminaryData?.find(pd => pd.label && pd.type === 'suppression' && pd.displayTooltip && resolvedScaleValues[0]?.[seriesKey] === pd.value && (!pd.column || seriesKey === pd.column))
-              if (suppressed) {
-                formattedValue = suppressed.label
-              }
-              return resolvedScaleValues?.[0]?.[seriesKey] ? [[seriesKey, formattedValue, getAxisPosition(seriesKey)]] : []
+              const value = resolvedScaleValues[0]?.[seriesKey]
+              const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
+              return [[seriesKey, formattedValue, getAxisPosition(seriesKey)]]
             })
         )
       }
 
+      // handle tooltip for single hovered series
+      if (visualizationType !== 'Pie' && visualizationType !== 'Forest Plot' && config.tooltips.singleSeries) {
+        const [seriesKey, value] = findDataKeyByThreshold(y, resolvedScaleValues[0])
+        if (seriesKey && value) {
+          tooltipItems.push([config.xAxis.dataKey, closestXScaleValue])
+          const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
+          tooltipItems.push([seriesKey, formattedValue])
+        }
+      }
+
       return [...tooltipItems, ...additionalTooltipItems]
     }
 
@@ -227,7 +292,10 @@ export const useTooltip = props => {
       return closestX
     }
 
-    if (config.xAxis.type === 'categorical' || (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')) {
+    if (
+      config.xAxis.type === 'categorical' ||
+      (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')
+    ) {
       let range = xScale.range()[1] - xScale.range()[0]
       let eachBand = range / (xScale.domain().length + 1)
 
@@ -275,6 +343,7 @@ export const useTooltip = props => {
       // Get the closest x axis value from the pointer.
       // After getting the closest value, return the data entry with that x scale value.
       // Pass the config.visual uid (not uuid) along with that data entry to setSharedFilters
+      if (config.visualizationType === 'Bump Chart') return
       const eventSvgCoords = localPoint(e)
       const { x } = eventSvgCoords
       if (!x) throw new Error('COVE: no x value in handleTooltipClick.')
@@ -323,7 +392,6 @@ export const useTooltip = props => {
       const yScaleValues = dataToSearch.map(object => {
         return Object.fromEntries(Object.entries(object).filter(([key, value]) => includedSeries.includes(key)))
       })
-
       return yScaleValues
     } catch (error) {
       console.error('COVE', error)
@@ -345,7 +413,7 @@ export const useTooltip = props => {
 
       // loop through series for items to add to tooltip.
       // there is probably a better way of doing this.
-      config.series?.forEach(s => {
+      config.runtime.series?.forEach(s => {
         if (s.type === 'Forecasting') {
           stageColumns.push(s.stageColumn)
 
@@ -373,7 +441,10 @@ export const useTooltip = props => {
             standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys]
             break
           case 'Bar':
-            standardLoopItems = orientation === 'vertical' ? [runtime.xAxis.dataKey, ...runtime?.seriesKeys] : [runtime.yAxis.dataKey, ...runtime?.seriesKeys]
+            standardLoopItems =
+              orientation === 'vertical'
+                ? [runtime.xAxis.dataKey, ...runtime?.seriesKeys]
+                : [runtime.yAxis.dataKey, ...runtime?.seriesKeys]
             break
           case 'Pie':
             standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys]
@@ -383,7 +454,13 @@ export const useTooltip = props => {
       }
 
       if (config.dashboard) {
-        standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.barSeriesKeys, ...runtime?.lineSeriesKeys, ...stageColumns, ...ciItems]
+        standardLoopItems = [
+          runtime.xAxis.dataKey,
+          ...runtime?.barSeriesKeys,
+          ...runtime?.lineSeriesKeys,
+          ...stageColumns,
+          ...ciItems
+        ]
       }
 
       return standardLoopItems
@@ -416,7 +493,7 @@ export const useTooltip = props => {
    * @returns user defined series name.
    */
   const getSeriesNameFromLabel = originalColumnName => {
-    let series = config.series.filter(s => s.dataKey === originalColumnName)
+    let series = config.runtime.series.filter(s => s.dataKey === originalColumnName)
     if (series[0]?.name) return series[0]?.name
     return originalColumnName
   }
@@ -426,18 +503,51 @@ export const useTooltip = props => {
     const [key, value, axisPosition] = additionalData
 
     if (visualizationType === 'Forest Plot') {
-      if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.xAxis.dataKey ? `${config.xAxis.dataKey}: ` : '')} ${isDateScale(yAxis) ? formatDate(parseDate(key, false)) : value}`}</li>
+      if (key === config.xAxis.dataKey)
+        return (
+          <li className='tooltip-heading'>{`${capitalize(config.xAxis.dataKey ? `${config.xAxis.dataKey}: ` : '')} ${
+            isDateScale(yAxis) ? formatDate(parseDate(key, false)) : value
+          }`}</li>
+        )
       return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${formatNumber(value, 'left')}`}</li>
     }
-    const formattedDate = config.tooltips.dateDisplayFormat ? formatTooltipsDate(parseDate(value, false)) : formatDate(parseDate(value, false))
+    const formattedDate = config.tooltips.dateDisplayFormat
+      ? formatTooltipsDate(parseDate(value, false))
+      : formatDate(parseDate(value, false))
 
     // TOOLTIP HEADING
-    if (visualizationType === 'Bar' && orientation === 'horizontal' && key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ` : '')} ${config.xAxis.type === 'date' ? formattedDate : value}`}</li>
-
-    if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ` : '')} ${isDateScale(xAxis) ? formattedDate : value}`}</li>
+    if (visualizationType === 'Bar' && orientation === 'horizontal' && key === config.xAxis.dataKey)
+      return (
+        <li className='tooltip-heading'>{`${capitalize(
+          config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ` : ''
+        )} ${config.xAxis.type === 'date' ? formattedDate : value}`}</li>
+      )
+
+    if (key === config.xAxis.dataKey)
+      return (
+        <li className='tooltip-heading'>{`${capitalize(
+          config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ` : ''
+        )} ${isDateScale(xAxis) ? formattedDate : value}`}</li>
+      )
 
     // TOOLTIP BODY
-    return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${value}`}</li>
+    // handle suppressed tooltip items
+    const { label, displayGray } =
+      (config.visualizationSubType !== 'stacked' &&
+        config.general.showSuppressedSymbol &&
+        config.preliminaryData?.find(
+          pd =>
+            pd.label &&
+            pd.type === 'suppression' &&
+            pd.displayTooltip &&
+            value === pd.value &&
+            (!pd.column || key === pd.column)
+        )) ||
+      {}
+    const newValue = label || value
+    const style = displayGray ? { color: '#8b8b8a' } : {}
+
+    return <li style={style} className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${newValue}`}</li>
   }
 
   return {

package/src/scss/DataTable.scss

@@ -1,6 +1,7 @@
 @include breakpointClass(md) {
   .data-table-container {
-    margin: 5px 1em;
+    margin: 5px 0em;
+    width: 100%;
   }
 }