@cdc/chart 4.23.10 → 4.23.11

package/src/hooks/{useScales.js → useScales.ts}

@@ -1,16 +1,30 @@
-import { scaleBand, scaleLinear, scaleLog, scalePoint, scaleTime } from '@visx/scale'
+import { LogScaleConfig, scaleBand, scaleLinear, scaleLog, scalePoint, scaleTime } from '@visx/scale'
 import { useContext } from 'react'
 import ConfigContext from '../ConfigContext'
-// TODO move props in
+import { ChartConfig } from '../types/ChartConfig'
+import { ChartContext } from '../types/ChartContext'
+
+type useScaleProps = {
+  config: ChartConfig // standard chart config
+  data: Object[] // standard data array
+  max: number // maximum value from useMinMax hook
+  min: number // minimum value from useMinMax hook
+  xAxisDataMapped: Object[] // array of x axis date/category items
+  xMax: number // chart svg width
+  yMax: number // chart svg height
+}
 
-const useScales = properties => {
+const useScales = (properties: useScaleProps) => {
   let { xAxisDataMapped, xMax, yMax, min, max, config, data } = properties
-  const { rawData, dimensions } = useContext(ConfigContext)
+
+  const { rawData, dimensions } = useContext<ChartContext>(ConfigContext)
 
   const [screenWidth, screenHeight] = 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
 
@@ -21,6 +35,7 @@ const useScales = properties => {
   let g1xScale = null
   let seriesScale = null
   let xScaleNoPadding = null
+  let xScaleBrush = null
 
   const scaleTypes = {
     TIME: 'time',
@@ -41,6 +56,7 @@ const useScales = properties => {
 
   // handle  Vertical bars
   if (!isHorizontal) {
+    xScaleBrush = composeScalePoint(xAxisDataKeysMapped, [0, xMax], 0.5)
     xScale = composeScalePoint(xAxisDataMapped, [0, xMax], 0.5)
     xScale.type = scaleTypes.POINT
     yScale = composeYScale(properties)
@@ -53,6 +69,7 @@ const useScales = properties => {
       domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)],
       range: [0, xMax]
     })
+    xScaleBrush = xScale
     xScale.type = scaleTypes.LINEAR
   }
 
@@ -170,21 +187,49 @@ const useScales = properties => {
     const leftWidthOffsetMobile = (Number(config.forestPlot.leftWidthOffsetMobile) / 100) * xMax
 
     if (screenWidth > 480) {
-      xScale = scaleLinear({
-        domain: [Math.min(...data.map(d => parseFloat(d.Lower))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d.Upper))) + xAxisPadding],
-        range: [leftWidthOffset, xMax - rightWidthOffset],
-        type: 'linear'
-      })
+      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, xMax - rightWidthOffset]
+        })
+        xScale.type = scaleTypes.LINEAR
+      }
+      if (config.forestPlot.type === 'Logarithmic') {
+        let max = Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper])))
+        let fp_min = Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower])))
+
+        xScale = scaleLog<LogScaleConfig>({
+          domain: [fp_min, max],
+          range: [leftWidthOffset, xMax - rightWidthOffset],
+          nice: true
+        })
+        xScale.type = scaleTypes.LOG
+      }
     } else {
-      xScale = scaleLinear({
-        domain: [Math.min(...data.map(d => parseFloat(d.Lower))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d.Upper))) + xAxisPadding],
-        range: [leftWidthOffsetMobile, xMax - rightWidthOffsetMobile],
-        type: 'linear'
-      })
+      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: [leftWidthOffsetMobile, xMax - rightWidthOffsetMobile],
+          type: scaleTypes.LINEAR
+        })
+      }
+
+      if (config.forestPlot.type === 'Logarithmic') {
+        let max = Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper])))
+        let fp_min = Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower])))
+
+        xScale = scaleLog<LogScaleConfig>({
+          domain: [fp_min, max],
+          range: [leftWidthOffset, xMax - rightWidthOffset],
+          nice: true,
+          base: max > 1 ? 10 : 2,
+          round: false,
+          type: scaleTypes.LOG
+        })
+      }
     }
   }
-
-  return { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding }
+  return { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding, xScaleBrush }
 }
 
 export default useScales
@@ -205,11 +250,13 @@ const composeXScale = ({ min, max, xMax, config }) => {
   })
 }
 
-const composeYScale = ({ min, max, yMax, config }) => {
+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
   // Select the appropriate scale function
   const scaleFunc = config.useLogScale ? scaleLog : scaleLinear
+
+  if (config.visualizationType === 'Combo') max = leftMax
   // Return the configured scale function
   return scaleFunc({
     domain: [min, max],

package/src/hooks/useTooltip.jsx

@@ -5,14 +5,16 @@ import { defaultStyles } from '@visx/tooltip'
 // third party
 import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
+import { DataTransform } from '@cdc/core/helpers/DataTransform'
+const transform = new DataTransform()
 
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 
 export const useTooltip = props => {
-  const { tableData: data, config, formatNumber, capitalize, formatDate, parseDate } = useContext(ConfigContext)
+  const { tableData, config, formatNumber, capitalize, formatDate, parseDate, setSharedFilter } = useContext(ConfigContext)
   const { xScale, yScale, showTooltip, hideTooltip } = props
   const { xAxis, visualizationType, orientation, yAxis, runtime } = config
-
+  const data = transform.applySuppression(tableData, config.suppressedData)
   /**
    * Provides the tooltip information based on the tooltip data array and svg cursor coordinates
    * @function getTooltipInformation
@@ -51,13 +53,12 @@ export const useTooltip = props => {
     const { x, y } = eventSvgCoords
 
     // Additional data for pie charts
-    const { data: pieChartData, arc } = additionalChartData
+    const { data: pieChartData, arc } = additionalChartData ?? {}
 
     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)
     includedSeries.push(config.xAxis.dataKey)
-
     if (config.visualizationType === 'Forecasting') {
       config.series.map(s => {
         s.confidenceIntervals.map(c => {
@@ -68,6 +69,17 @@ export const useTooltip = props => {
         })
       })
     }
+    function getColumnNames(columns) {
+      let names = []
+      for (let key in columns) {
+        if (columns.hasOwnProperty(key)) {
+          names.push(columns[key].name)
+        }
+      }
+      return names
+    }
+    includedSeries.push(...getColumnNames(config.columns))
+    includedSeries.push(...getColumnNames(config.columns))
 
     const yScaleValues = getYScaleValues(closestXScaleValue, includedSeries)
 
@@ -75,7 +87,7 @@ export const useTooltip = props => {
 
     const resolvedScaleValues = orientation === 'vertical' ? yScaleValues : xScaleValues
 
-    const forestPlotXValue = visualizationType === 'Forest Plot' ? data?.filter(d => d[xAxis.dataKey] === getClosestYValue(y))[0][config.forestPlot.estimateField] : null
+    // const forestPlotXValue = visualizationType === 'Forest Plot' ? data?.filter(d => d[xAxis.dataKey] === getClosestYValue(y))?.[0]?.[config.forestPlot.estimateField] : null
 
     const getAxisPosition = seriesKey => {
       const seriesObj = config.series.filter(s => s.dataKey === seriesKey)[0]
@@ -84,49 +96,61 @@ export const useTooltip = props => {
     }
 
     const getTooltipDataArray = () => {
-      if (visualizationType === 'Forest Plot') {
-        const columns = config.columns
-        const columnsWithTooltips = []
-
-        for (const [colKeys, colVals] of Object.entries(columns)) {
-          const formattingParams = {
-            addColPrefix: config.columns[colKeys].prefix,
-            addColSuffix: config.columns[colKeys].suffix,
-            addColRoundTo: config.columns[colKeys].roundToPlace ? config.columns[colKeys].roundToPlace : '',
-            addColCommas: config.columns[colKeys].commas
-          }
-
-          let closestValue = getClosestYValue(y, colVals.name)
-
-          const formattedValue = formatColNumber(closestValue, 'left', true, config, formattingParams)
+      const columns = config.columns
+      const columnsWithTooltips = []
+      const tooltipItems = []
+
+      for (const [colKeys, colVals] of Object.entries(columns)) {
+        const formattingParams = {
+          addColPrefix: config.columns[colKeys].prefix,
+          addColSuffix: config.columns[colKeys].suffix,
+          addColRoundTo: config.columns[colKeys].roundToPlace ? config.columns[colKeys].roundToPlace : '',
+          addColCommas: config.columns[colKeys].commas
+        }
+        let closestValue = null
 
-          if (colVals.tooltips) {
-            columnsWithTooltips.push([colVals.label, formattedValue])
-          }
+        if (config.visualizationType === 'Pie') {
+          closestValue = arc?.data[colVals.name]
+        } else {
+          closestValue = resolvedScaleValues[0][colVals.name]
         }
 
-        const tooltipItems = []
-        tooltipItems.push([config.xAxis.dataKey, getClosestYValue(y)])
+        const formattedValue = formatColNumber(closestValue, 'left', true, config, formattingParams)
 
-        columnsWithTooltips.forEach(columnData => {
-          tooltipItems.push([columnData[0], columnData[1]])
-        })
-        return tooltipItems
+        if (colVals.tooltips) {
+          columnsWithTooltips.push([colVals.label, formattedValue])
+        }
       }
+      const additionalTooltipItems = []
+
+      columnsWithTooltips.forEach(columnData => {
+        additionalTooltipItems.push([columnData[0], columnData[1]])
+      })
 
       if (visualizationType === 'Pie') {
-        return [
+        tooltipItems.push(
+          // ignore
           [config.xAxis.dataKey, pieChartData],
           [config.runtime.yAxis.dataKey, formatNumber(arc?.data[config.runtime.yAxis.dataKey])],
           ['Percent', `${Math.round((((arc?.endAngle - arc?.startAngle) * 180) / Math.PI / 360) * 100) + '%'}`]
-        ]
+        )
+      }
+      if (visualizationType === 'Forest Plot') {
+        tooltipItems.push([config.xAxis.dataKey, getClosestYValue(y)])
       }
 
-      return getIncludedTooltipSeries()
-        .filter(Boolean)
-        .flatMap((seriesKey, index) => {
-          return resolvedScaleValues[0][seriesKey] ? [[seriesKey, resolvedScaleValues[0][seriesKey], getAxisPosition(seriesKey)]] : []
-        })
+      if (visualizationType !== 'Pie' && visualizationType !== 'Forest Plot') {
+        tooltipItems.push(
+          ...getIncludedTooltipSeries()
+            ?.filter(Boolean)
+            .flatMap(seriesKey => {
+              const formattedValue = seriesKey === config.xAxis.dataKey ? resolvedScaleValues[0][seriesKey] : formatNumber(resolvedScaleValues[0][seriesKey], getAxisPosition(seriesKey))
+              return resolvedScaleValues[0][seriesKey] ? [[seriesKey, formattedValue]] : []
+            })
+        )
+      }
+
+      return [...tooltipItems, ...additionalTooltipItems]
     }
 
     // Returns an array of arrays.
@@ -253,9 +277,13 @@ export const useTooltip = props => {
       if (!x) throw new Error('COVE: no x value in handleTooltipClick.')
       let closestXScaleValue = getXValueFromCoordinate(x)
       if (!closestXScaleValue) throw new Error('COVE: no closest x scale value in handleTooltipClick')
-      let datum = config.data.filter(item => item[config.xAxis.dataKey] === closestXScaleValue)
+      let datum = config.data?.filter(item => item[config.xAxis.dataKey] === closestXScaleValue)
 
-      if (setSharedFilter) {
+      if (!datum[0]) {
+        throw new Error(`COVE: no data found matching the closest xScale value: ${closestXScaleValue}`)
+      }
+
+      if (setSharedFilter && config?.uid && datum?.[0]) {
         setSharedFilter(config.uid, datum[0])
       }
     } catch (e) {
@@ -328,7 +356,7 @@ export const useTooltip = props => {
       if (!config.dashboard) {
         switch (visualizationType) {
           case 'Combo':
-            standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys, ...stageColumns, ...ciItems]
+            standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys, ...ciItems]
             break
           case 'Forecasting':
             standardLoopItems = [runtime.xAxis.dataKey, ...stageColumns, ...ciItems]
@@ -346,7 +374,6 @@ export const useTooltip = props => {
             standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys]
           default:
             throw new Error('No visualization type found in handleTooltipMouseOver')
-            break
         }
       }
 
@@ -403,7 +430,7 @@ export const useTooltip = props => {
     if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ` : '')} ${config.xAxis.type === 'date' ? value : value}`}</li>
 
     // TOOLTIP BODY
-    return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${formatNumber(value, axisPosition)}`}</li>
+    return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${value}`}</li>
   }
 
   return {

package/src/scss/main.scss

@@ -74,34 +74,6 @@
     }
   }
 
-  .chart-title {
-    position: relative;
-    padding: 0.6em 0.8em;
-    margin: 0;
-    color: #fff;
-    font-size: 1.1em;
-    border-bottom-width: 3px;
-    border-bottom-style: solid;
-
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-
-    em {
-      font-style: italic;
-    }
-
-    strong {
-      font-weight: bold;
-    }
-
-    &:not(:empty) {
-      margin: 0 0 1rem 0 !important;
-      padding: 0.6em 0.8em;
-      border-bottom-width: 3px;
-      border-bottom-style: solid;
-    }
-  }
-
   .chart-description {
     margin-bottom: 20px;
   }
@@ -560,14 +532,14 @@
 
     &.animated {
       .vertical rect,
-      .vertical foreignObject {
+      .vertical foreignObject div {
         opacity: 0;
         animation: growBar 0.5s linear forwards;
         animation-play-state: paused;
       }
 
       .horizontal rect,
-      .horizontal foreignObject {
+      .horizontal foreignObject div {
         opacity: 0;
         animation: growBarH 0.5s linear forwards;
         animation-play-state: paused;
@@ -575,7 +547,7 @@
 
       &.animate {
         rect,
-        foreignObject {
+        foreignObject div {
           animation-play-state: running;
         }
       }
@@ -674,10 +646,6 @@
     background: transparent;
   }
 
-  .chart-title:not(:empty) {
-    margin-bottom: 0 !important;
-  }
-
   .cove-component__content .chart-container {
     padding: 1em;
   }

package/src/types/ChartConfig.ts

@@ -0,0 +1,43 @@
+import { type ForestPlotConfigSettings } from './ForestPlot'
+
+export type ChartColumns = {
+  [key: string]: {
+    label: string
+    dataTable: boolean
+    tooltips: boolean
+    prefix: string
+    suffix: string
+    forestPlot: boolean
+    startingPoint: string
+    forestPlotAlignRight: boolean
+    name?: string
+  }
+}
+
+type Series = {
+  dataKey: string
+  axis: string
+}
+
+type AllChartsConfig = {
+  columns: ChartColumns
+  forestPlot: ForestPlotConfigSettings
+  isLollipopChart: boolean
+  legend: {
+    behavior: 'highlight' | unknown
+  }
+  orientation: 'vertical' | 'horizontal'
+  runtime: {}
+  series: Series[]
+  useLogScale: boolean
+  visualizationType: 'Area Chart' | 'Bar' | 'Deviation Bar' | 'Forest Plot' | 'Paired Bar' | 'Scatter Plot' | 'Spark Line'
+  xScale: Function
+  yScale: Function
+}
+
+export type LineChartConfig = {
+  visualizationType: 'Line'
+  lineDatapointStyle: 'hidden' | 'always show' | 'hover'
+} & AllCharts
+
+export type ChartConfig = LineChartConfig | AllChartsConfig

package/src/types/ChartContext.ts

@@ -0,0 +1,38 @@
+import { type ChartConfig } from './ChartConfig'
+
+// Line Chart Specific Context
+type LineChartContext = {
+  colorScale: Function
+  config: ChartConfig
+  dimensions: [screenWidth: number, screenHeight: number]
+  formatDate: Function
+  formatNumber: Function
+  handleLineType: Function
+  isNumber: unknown
+  parseDate: Function
+  rawData: Object[]
+  seriesHighlight: String[]
+  tableData: Object[]
+  transformedData: Object[]
+  updateConfig: Function
+  visualizationType: 'Line'
+}
+
+export type ChartContext =
+  | LineChartContext
+  | {
+      colorScale?: Function
+      config?: ChartConfig
+      dimensions: [screenWidth: number, screenHeight: number]
+
+      formatDate?: Function
+      formatNumber?: Function
+      handleLineType?: Function
+      isNumber?: boolean
+      parseDate?: Function
+      rawData?: Object[]
+      seriesHighlight?: String[]
+      tableData?: Object[]
+      transformedData?: Object[]
+      updateConfig?: Function
+    }

package/src/types/ChartProps.ts

@@ -0,0 +1,7 @@
+export type BarChartProps = {
+  seriesScale: Function
+  xMax: number
+  xScale: Function
+  yMax: number
+  yScale: Function
+}

package/src/types/ForestPlot.ts

@@ -0,0 +1,60 @@
+import { type Color } from '@cdc/core/types/Color'
+
+export type ForestPlotConfigSettings = {
+  colors: {
+    line: Color // color of line of effect
+    shape: Color // color for effect estimate shape
+  }
+  // description - appears below the study column.
+  description: {
+    show: boolean
+    text: string
+    location: number
+  }
+  // effect estimates
+  estimateField: string // column chose for the effect estimate
+  estimateRadius: string
+  hideDateCategoryCol: boolean
+  leftWidthOffset: number
+  lineOfNoEffect: {
+    show: boolean
+  }
+  lower: string
+  upper: string
+  // type - determines the type of scale we're using, including the position of line of effect (0 or 1)
+  type: 'Linear' | 'Logarithmic'
+  pooledResult: {
+    diamondHeight: number
+    column: string
+  }
+  // rowHeight - height of study
+  rowHeight: number
+  // radius - scaling for effect estimates
+  radius: {
+    min: number
+    max: number
+    /** @deprecated - moved to estimateField due to duplication */
+    scalingColumn: string
+  }
+  /** @deprecated - moved to pooledResult */
+  regression: {
+    lower: number
+    upper: number
+    estimateField: number
+  }
+  result: {
+    show: boolean
+    text: string
+    location: number
+  }
+  rightWidthOffset: number
+  shape: string
+  startAt: number
+  title: string // centered title above the chart
+
+  /** @deprecated - moved to lineOfNoEffect*/
+  showZeroLine: boolean
+  // labels under chart
+  leftLabel: string
+  rightLabel: string
+}