@cdc/chart 4.25.3 → 4.25.6

package/src/hooks/useTooltip.tsx

@@ -1,5 +1,6 @@
 import { useContext } from 'react'
 // Local imports
+import parse from 'html-react-parser'
 import ConfigContext from '../ConfigContext'
 import { type ChartContext } from '../types/ChartContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
@@ -8,6 +9,7 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
 import _ from 'lodash'
+import { getHorizontalBarHeights } from '../components/BarChart/helpers/getBarHeights'
 
 export const useTooltip = props => {
   const {
@@ -21,31 +23,35 @@ export const useTooltip = props => {
     setSharedFilter,
     isDraggingAnnotation
   } = useContext<ChartContext>(ConfigContext)
-  const { xScale, yScale, showTooltip, hideTooltip } = props
+  const { xScale, yScale, seriesScale, 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
-   * @param {Array} tooltipDataArray - The array containing the tooltip data.
-   * @param {Object} eventSvgCoords - The object containing the SVG coordinates of the event.
-   * @return {Object} - The tooltip information with tooltip data.
-   */
+  const Y_AXIS_SIZE = Number(config.yAxis.size || 0)
 
-  // function handles only Single series hovred data tooltips
+  // function handles only Single series hovered 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
+    const dynamicSeries = config.series.find(s => s.dynamicCategory)
+    if (dynamicSeries) {
+      hoveredKey = datapoint[dynamicSeries.dynamicCategory]
+      hoveredValue = datapoint[dynamicSeries.dataKey]
+    } else {
+      let sum = 0
+      let threshold
+      try {
+        threshold = Number(yScale.invert(mouseY))
+      } catch (e) {
+        return []
+      }
+      for (let key of config.runtime?.seriesKeys) {
+        if (datapoint.hasOwnProperty(key)) {
+          sum += Number(datapoint[key])
+          if (sum >= threshold) {
+            hoveredValue = datapoint[key]
+            hoveredKey = key
+            break
+          }
         }
       }
     }
@@ -62,25 +68,6 @@ export const useTooltip = props => {
     return showMissingDataValue ? 'N/A' : formattedValue
   }
 
-  const getTooltipInformation = (tooltipDataArray, eventSvgCoords) => {
-    const { x, y } = eventSvgCoords
-    let initialTooltipData = tooltipDataArray || {}
-
-    const tooltipData = {
-      data: initialTooltipData,
-      dataXPosition: x + 10,
-      dataYPosition: y
-    }
-
-    const tooltipInformation = {
-      tooltipLeft: tooltipData.dataXPosition,
-      tooltipTop: tooltipData.dataYPosition,
-      tooltipData: tooltipData
-    }
-
-    return tooltipInformation
-  }
-
   /**
    * Handles the mouse over event for the tooltip.
    * @function handleTooltipMouseOver
@@ -89,81 +76,84 @@ export const useTooltip = props => {
    */
   const handleTooltipMouseOver = (e, additionalChartData) => {
     if (visualizationType === 'Bump Chart') return
-    e.stopPropagation()
+    //e.stopPropagation()
     if (isDraggingAnnotation) return
 
     const eventSvgCoords = localPoint(e)
     const { x, y } = eventSvgCoords
 
-    // Additional data for pie charts
-    const { data: pieChartData, arc } = additionalChartData ?? {}
-
-    const closestXScaleValue = getXValueFromCoordinate(x - Number(config.yAxis.size || 0))
-
-    const xScaleValues = data.filter(d => d[xAxis.dataKey] === getClosestYValue(y))
-
-    const resolvedScaleValues = orientation === 'vertical' ? getYScaleValues(closestXScaleValue) : xScaleValues
-
-    const getAxisPosition = seriesKey => {
-      const seriesObj = config.runtime.series.filter(s => s.dataKey === seriesKey)[0]
-      const position = seriesObj?.axis ? String(seriesObj.axis).toLowerCase() : 'left'
-      return position
-    }
+    const resolvedScaleValues = getResolvedScaleValues([x, y])
+    const singleSeriesValue = getYValueFromCoordinate(y, resolvedScaleValues)
+    const columnsWithTooltips = []
+    const tooltipItems = [] as any[][]
+    for (const [colKey, column] of Object.entries(config.columns)) {
+      const formattingParams = {
+        addColPrefix: column.prefix,
+        addColSuffix: column.suffix,
+        addColRoundTo: column.roundToPlace || '',
+        addColCommas: column.commas
+      }
 
-    const getTooltipDataArray = () => {
-      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
+      const pieColumnData = additionalChartData?.arc?.data[column.name]
+      const columnData =
+        config.tooltips.singleSeries && visualizationType === 'Line'
+          ? resolvedScaleValues.filter(
+              value => value[config.runtime.series[0].dynamicCategory] === singleSeriesValue
+            )[0][colKey]
+          : resolvedScaleValues[0]?.[colKey]
+      const closestValue = config.visualizationType === 'Pie' ? pieColumnData : columnData
 
-        if (config.visualizationType === 'Pie') {
-          closestValue = arc?.data[colVals.name]
-        } else {
-          closestValue = resolvedScaleValues[0]?.[colVals.name]
-        }
+      const formattedValue = formatColNumber(closestValue, 'left', true, config, formattingParams)
 
-        const formattedValue = formatColNumber(closestValue, 'left', true, config, formattingParams)
-
-        if (colVals.tooltips) {
-          columnsWithTooltips.push([colVals.label, formattedValue])
-        }
+      if (column.tooltips) {
+        columnsWithTooltips.push([column.label, formattedValue])
       }
-      const additionalTooltipItems = []
+    }
+    const additionalTooltipItems = [] as [string, string | number][]
 
-      columnsWithTooltips.forEach(columnData => {
-        additionalTooltipItems.push([columnData[0], columnData[1]])
-      })
+    columnsWithTooltips.forEach(columnData => {
+      additionalTooltipItems.push([columnData[0], columnData[1]])
+    })
 
-      if (visualizationType === 'Pie') {
-        const roundTo = Number(config.dataFormat.roundTo) || 0
+    if (visualizationType === 'Pie') {
+      const roundTo = Number(config.dataFormat.roundTo) || 0
 
-        const degrees = ((arc.endAngle - arc.startAngle) * 180) / Math.PI
+      const pieData = additionalChartData?.data ?? {}
+      const startAngle = additionalChartData?.startAngle ?? 0
+      const endAngle = additionalChartData?.endAngle ?? 0
+      const actualPieValue = Number(additionalChartData.data[config?.yAxis?.dataKey])
 
-        // Calculate the percentage of the full circle (360 degrees)
-        const percentageOfCircle = (degrees / 360) * 100
-        const roundedPercentage = percentageOfCircle.toFixed(roundTo)
+      const degrees = ((endAngle - startAngle) * 180) / Math.PI
+      const pctOf360 = (degrees / 360) * 100
+      const pctString = value => value.toFixed(roundTo) + '%'
+      const showPiePercent = config.dataFormat.showPiePercent || false
 
+      if (showPiePercent && pieData[config.xAxis.dataKey] === 'Calculated Area') {
+        tooltipItems.push(['', 'Calculated Area'])
+      } else {
         tooltipItems.push(
-          // ignore
-          [config.xAxis.dataKey, pieChartData],
-          [config.runtime.yAxis.dataKey, formatNumber(arc?.data[config.runtime.yAxis.dataKey])],
-          ['Percent', `${roundedPercentage + '%'}`]
+          [config.xAxis.dataKey, pieData[config.xAxis.dataKey]],
+          [
+            config.runtime.yAxis.dataKey,
+            showPiePercent ? pctString(actualPieValue) : formatNumber(pieData[config.runtime.yAxis.dataKey])
+          ],
+          showPiePercent ? [] : ['Percent', pctString(pctOf360)]
         )
       }
+    }
 
-      if (visualizationType === 'Forest Plot') {
-        tooltipItems.push([config.xAxis.dataKey, getClosestYValue(y)])
+    if (visualizationType === 'Forest Plot') {
+      tooltipItems.push([config.xAxis.dataKey, getClosestYValue(y)])
+    }
+
+    const isLinearChart = !['Pie', 'Forest Plot'].includes(visualizationType)
+    if (isLinearChart) {
+      const getAxisPosition = seriesKey => {
+        const seriesObj = config.runtime.series.filter(s => s.dataKey === seriesKey)[0]
+        const position = seriesObj?.axis ? String(seriesObj.axis).toLowerCase() : 'left'
+        return position
       }
-      // handle tooltip for all  hovered series
-      if (visualizationType !== 'Pie' && visualizationType !== 'Forest Plot' && !config.tooltips.singleSeries) {
+      if (!config.tooltips.singleSeries || visualizationType === 'Line') {
         tooltipItems.push(
           ...getIncludedTooltipSeries()
             ?.filter(seriesKey => {
@@ -191,37 +181,55 @@ export const useTooltip = props => {
             })
         )
 
-        config.runtime.series?.forEach(series => {
+        const runtimeSeries =
+          config.tooltips.singleSeries && visualizationType === 'Line'
+            ? [_.find(config.runtime.series, d => d.dataKey === singleSeriesValue)]
+            : config.runtime.series
+
+        runtimeSeries?.forEach(series => {
           if (series?.dynamicCategory) {
             const seriesKey = series.dataKey
             const resolvedScaleValue = resolvedScaleValues.find(v => v[series.dynamicCategory] === seriesKey)
-            if (!resolvedScaleValue) return
-            const value = resolvedScaleValue[series.originalDataKey]
-            const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
-            tooltipItems.push([seriesKey, formattedValue, getAxisPosition(seriesKey)])
+            if (resolvedScaleValue) {
+              const value = resolvedScaleValue[series.originalDataKey]
+              const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
+              tooltipItems.push([seriesKey, formattedValue, getAxisPosition(seriesKey)])
+            }
           }
         })
-      }
+      } else {
+        const dynamicSeries = config.series.find(s => s.dynamicCategory)
 
-      // handle tooltip for single hovered series
-      if (visualizationType !== 'Pie' && visualizationType !== 'Forest Plot' && config.tooltips.singleSeries) {
-        const [seriesKey, value] = findDataKeyByThreshold(y, resolvedScaleValues[0])
+        // Show Only the Hovered Series in Tooltip
+        const dataColumn = resolvedScaleValues[0]
+        const [seriesKey, value] = findDataKeyByThreshold(y, dataColumn)
         if (seriesKey && value) {
-          tooltipItems.push([config.xAxis.dataKey, closestXScaleValue])
+          const xVal = dataColumn[config.xAxis.dataKey]
+          const closestXScaleValue = getXValueFromCoordinate(x - Y_AXIS_SIZE)
+
+          tooltipItems.push([config.xAxis.dataKey, closestXScaleValue || xVal])
           const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
           tooltipItems.push([seriesKey, formattedValue])
+        } else if (dynamicSeries) {
+          Object.keys(dataColumn).forEach(key => {
+            tooltipItems.push([key, dataColumn[key]])
+          })
         }
       }
-
-      return [...tooltipItems, ...additionalTooltipItems]
     }
 
-    // Returns an array of arrays.
-    // ie. [ ['Date', '01/01/2023'], ['close', 300] ]
-    const tooltipDataArray = getTooltipDataArray()
+    const dataXPosition = eventSvgCoords.x + 10
+    const dataYPosition = eventSvgCoords.y
 
-    if (!tooltipDataArray) return
-    const tooltipInformation = getTooltipInformation(tooltipDataArray, eventSvgCoords)
+    const tooltipInformation = {
+      tooltipLeft: dataXPosition,
+      tooltipTop: dataYPosition,
+      tooltipData: {
+        data: [...tooltipItems, ...additionalTooltipItems],
+        dataXPosition,
+        dataYPosition
+      }
+    }
     showTooltip(tooltipInformation)
   }
 
@@ -291,10 +299,7 @@ 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') {
       let range = xScale.range()[1] - xScale.range()[0]
       let eachBand = range / (xScale.domain().length + 1)
 
@@ -302,17 +307,62 @@ export const useTooltip = props => {
       const index = Math.floor((Number(numerator) - eachBand / 2) / eachBand)
       return xScale.domain()[index] // fixes off by 1 error
     }
+  }
 
-    if (isDateScale(xAxis) && visualizationType !== 'Combo' && orientation !== 'horizontal') {
-      const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
-      const x0 = xScale.invert(x)
-      const index = bisectDate(config.data, x0, 1)
-      const val = parseDate(config.data[index - 1][config.xAxis.dataKey])
-      return val
+  const findClosest = (dataArray: [any, number][], mouseXorY) => {
+    let dataColumn: Object
+    dataArray.find(([d, xOrY]) => {
+      if (xOrY > mouseXorY) {
+        return true
+      }
+      dataColumn = d
+    })
+    return dataColumn
+  }
+
+  const getYValueFromCoordinate = (y, xData) => {
+    let closestYSeriesValue = null
+    let minDistance = Number.MAX_VALUE
+    let offset = y
+
+    xData.forEach(d => {
+      const yPosition = yScale(d[config.runtime.series[0].originalDataKey])
+      const distance = Math.abs(Number(yPosition - offset))
+
+      if (distance <= minDistance) {
+        minDistance = distance
+        closestYSeriesValue = d[config.runtime.series[0].dynamicCategory]
+      }
+    })
+    return closestYSeriesValue
+  }
+
+  const getClosestYValueHorizontalChart = mouseY => {
+    const barGroups = yScale.domain().map((group, index) => ({ group, index }))
+    const barsWithHeights = getHorizontalBarHeights<{ group }>(config, barGroups)
+
+    const barGroup = findClosest(
+      barsWithHeights.map(d => [d, _.round(d.y)]),
+      mouseY
+    )
+
+    const subGroupMouseY = mouseY - barGroup.y
+    const columns = data.filter(d => d[config.xAxis.dataKey] === barGroup.group)
+
+    if (config.series.length > 1 && !config.series.find(s => s.dynamicCategory)) {
+      const seriesWithY = config.series.map((c, i) => [c, config.barHeight * i]) as [Object, number][]
+      const hoveredSeries = findClosest(seriesWithY, subGroupMouseY)
+      const exludeColumns = config.series.filter(s => s.dataKey !== hoveredSeries.dataKey).map(s => s.dataKey)
+      const dataColumn = _.omit(columns[0], exludeColumns)
+      return dataColumn
+    } else {
+      const columnsWithY = columns.map((c, i) => [c, config.barHeight * i]) as [Object, number][]
+      const dataColumn = findClosest(columnsWithY, subGroupMouseY)
+      return dataColumn
     }
   }
 
-  const getClosestYValue = (yPosition, key) => {
+  const getClosestYValue = (yPosition, key = '') => {
     if (visualizationType === 'Pie') return
     let minDistance = Number.MAX_VALUE
     let closestYValue = null
@@ -369,11 +419,15 @@ export const useTooltip = props => {
   }
 
   /**
-   * Provides an array of objects with the closest y series data items
-   * @param {String} closestXScaleValue
-   * @returns an array of objects with the closest y series data items
+   * Provides an array of objects with the closest series data items
    */
-  const getYScaleValues = closestXScaleValue => {
+  const getResolvedScaleValues = ([x, y]) => {
+    if (orientation !== 'vertical') {
+      if (config.visualizationType === 'Bar' && config.tooltips.singleSeries) {
+        return [getClosestYValueHorizontalChart(y)]
+      }
+      return data.filter(d => d[xAxis.dataKey] === getClosestYValue(y))
+    }
     const runtimeSeries = config.runtime.series.filter(
       series => visualizationType === 'Pie' || (series.tooltip === true && !series.dynamicCategory)
     )
@@ -403,21 +457,22 @@ export const useTooltip = props => {
     const colNames = Object.values(config.columns).map(column => column.name)
     // @ Murad why are we adding them twice?
     includedSeries.push(...colNames, ...colNames)
+    const closestXScaleValue = getXValueFromCoordinate(x - Y_AXIS_SIZE)
 
-    try {
-      const dataToSearch = data.filter(d => d[xAxis.dataKey] === closestXScaleValue)
-      // Return an empty array if no matching data is found.
-      if (!dataToSearch || dataToSearch.length === 0) {
-        return []
-      }
+    let dataToSearch = (data || []).filter(d => d[xAxis.dataKey] === closestXScaleValue)
 
-      const yScaleValues = dataToSearch.map(object => {
-        return _.pick(object, includedSeries)
-      })
-      return yScaleValues
-    } catch (error) {
-      console.error('COVE', error)
+    if (config.tooltips.singleSeries && config.visualizationType !== 'Line') {
+      const dynamicSeries = config.series.find(s => s.dynamicCategory)
+      if (dynamicSeries) {
+        const dataWithXScale = dataToSearch.map(
+          d => [d, seriesScale(d[dynamicSeries.dynamicCategory])] as [Object, number]
+        )
+        const xOffset = x - Y_AXIS_SIZE - xScale(closestXScaleValue)
+        dataToSearch = [findClosest(dataWithXScale, xOffset)]
+      }
     }
+
+    return dataToSearch.map(d => _.pick(d, includedSeries))
   }
 
   /**
@@ -427,67 +482,26 @@ export const useTooltip = props => {
    * @returns {Array} Array of items to be included in the tooltip.
    */
   const getIncludedTooltipSeries = () => {
-    try {
-      let standardLoopItems
-
-      let stageColumns = []
-      let ciItems = []
-
-      // loop through series for items to add to tooltip.
-      // there is probably a better way of doing this.
-      config.runtime.series?.forEach(s => {
-        if (s.type === 'Forecasting') {
-          stageColumns.push(s.stageColumn)
-
-          s?.confidenceIntervals.forEach(ci => {
-            if (ci.showInTooltip === true) {
-              ciItems.push(ci.low)
-              ciItems.push(ci.high)
-            }
-          })
-        }
-      })
-
-      if (!config.dashboard) {
-        switch (visualizationType) {
-          case 'Combo':
-            standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys, ...ciItems]
-            break
-          case 'Forecasting':
-            standardLoopItems = [runtime.xAxis.dataKey, ...stageColumns, ...ciItems]
-            break
-          case 'Line':
-            standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys]
-            break
-          case 'Area Chart':
-            standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys]
-            break
-          case 'Bar':
-            standardLoopItems =
-              orientation === 'vertical'
-                ? [runtime.xAxis.dataKey, ...runtime?.seriesKeys]
-                : [runtime.yAxis.dataKey, ...runtime?.seriesKeys]
-            break
-          case 'Pie':
-            standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys]
-          default:
-            throw new Error('No visualization type found in handleTooltipMouseOver')
-        }
-      }
-
-      if (config.dashboard) {
-        standardLoopItems = [
-          runtime.xAxis.dataKey,
-          ...runtime?.barSeriesKeys,
-          ...runtime?.lineSeriesKeys,
-          ...stageColumns,
-          ...ciItems
-        ]
-      }
-
-      return standardLoopItems
-    } catch (error) {
-      console.error('COVE', error)
+    const forcastingSeries = config.runtime.series.filter(series => series.type === 'Forecasting')
+    const stageColumns = forcastingSeries.map(series => series.stageColumn)
+    const ciItems = forcastingSeries.flatMap(series =>
+      series.confidenceIntervals?.filter(ci => ci.showInTooltip).map(ci => [ci.low, ci.high])
+    )
+    const common = [runtime.xAxis.dataKey, ...runtime?.seriesKeys]
+    switch (visualizationType) {
+      case 'Line':
+      case 'Area Chart':
+      case 'Pie':
+        return common
+      case 'Combo':
+        return [...common, ...ciItems]
+      case 'Forecasting':
+        return [runtime.xAxis.dataKey, ...stageColumns, ...ciItems]
+
+      case 'Bar':
+        return orientation === 'vertical' ? common : [runtime.yAxis.dataKey, ...runtime?.seriesKeys]
+      default:
+        throw new Error('No visualization type found in handleTooltipMouseOver')
     }
   }
 
@@ -544,7 +558,9 @@ export const useTooltip = props => {
           config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ` : ''
         )} ${config.xAxis.type === 'date' ? formattedDate : value}`}</li>
       )
-
+    if (visualizationType === 'Pie' && config.dataFormat.showPiePercent && value === 'Calculated Area') {
+      return <li className='tooltip-heading'>{`${capitalize('Calculated Area')} `}</li>
+    }
     if (key === config.xAxis.dataKey)
       return (
         <li className='tooltip-heading'>{`${capitalize(
@@ -569,14 +585,14 @@ export const useTooltip = props => {
     let newValue = label || value
     const style = displayGray ? { color: '#8b8b8a' } : {}
 
-    if (index == 1 && config.dataFormat.onlyShowTopPrefixSuffix) {
+    if (index == 1 && config.yAxis?.inlineLabel) {
       newValue = `${config.dataFormat.prefix}${newValue}${config.dataFormat.suffix}`
     }
     const activeLabel = getSeriesNameFromLabel(key)
     const displayText = activeLabel ? `${activeLabel}: ${newValue}` : newValue
 
     return (
-      <li style={style} className='tooltip-body'>
+      <li style={style} className='tooltip-body mb-1'>
         {displayText}
       </li>
     )
@@ -586,7 +602,6 @@ export const useTooltip = props => {
     getIncludedTooltipSeries,
     getXValueFromCoordinate,
     getXValueFromCoordinateDate,
-    getYScaleValues,
     handleTooltipClick,
     handleTooltipMouseOff,
     handleTooltipMouseOver,

package/src/index.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import CdcChart from './CdcChart'
 import './coreStyles_chart.scss'
-
 import '@cdc/core/styles/cove-main.scss'
 import 'react-tooltip/dist/react-tooltip.css'
 
+import CdcChart from './CdcChart'
+
 let isEditor = window.location.href.includes('editor=true')
 let isDebug = window.location.href.includes('debug=true')
 

package/src/scss/main.scss

@@ -97,11 +97,6 @@
     margin-bottom: 24px;
   }
 
-  .visually-hidden {
-    position: fixed;
-    left: -10000px;
-  }
-
   .loader {
     width: 100%;
     text-align: center;
@@ -144,6 +139,17 @@
   }
 
   .legend-container {
+    #supression-tooltip {
+      font-family: 'Nunito', sans-serif;
+      font-size: 0.8337rem;
+      font-weight: 400;
+      max-width: 16.7rem;
+      padding: 0.5rem 1rem;
+      border-radius: 4px;
+      box-shadow: 0px 2px 2px rgba(28, 29, 31, 0.45);
+      white-space: normal;
+      line-height: 1.4;
+    }
     background: #fff;
     width: 100%;
     vertical-align: top;
@@ -232,12 +238,13 @@
     }
 
     &__outer {
-      &.definition-link {
+      &.link-container {
         display: flex;
         flex-direction: row;
         position: absolute;
         left: 0%;
         top: 108%;
+
         & > * {
           margin: 0;
         }

package/src/store/chart.actions.ts

@@ -1,10 +1,6 @@
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { ChartConfig } from '../types/ChartConfig'
-
-type Action<T, P = undefined, R = undefined> = {
-  type: T
-  payload?: P
-}
+import { Action } from '@cdc/core/types/Action'
 
 // Action Types
 type SET_CONFIG = Action<'SET_CONFIG', ChartConfig>
@@ -34,7 +30,7 @@ type ChartActions =
   | SET_CONTAINER
   | SET_LOADED_EVENT
   | SET_DRAG_ANNOTATIONS
-  | SET_BRUSH_CONFIG
   | SET_LOADING
+  | SET_BRUSH_CONFIG
 
 export default ChartActions