@cdc/chart 4.25.10 → 4.25.11

package/src/hooks/useScales.ts

@@ -13,6 +13,9 @@ import ConfigContext from '../ConfigContext'
 import { ChartConfig } from '../types/ChartConfig'
 import { ChartContext } from '../types/ChartContext'
 import _ from 'lodash'
+import { getYAxisAutoPadding } from '../helpers/getYAxisAutoPadding'
+import getMinMax from '../helpers/getMinMax'
+import { countNumOfTicks } from '../helpers/countNumOfTicks'
 
 const scaleTypes = {
   TIME: 'time',
@@ -27,23 +30,84 @@ export const TOP_PADDING = 10
 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
+  tableData: Object[] // table data for getMinMax
+  minValue: number // raw minimum value from data
+  maxValue: number // raw maximum value from data
+  existPositiveValue: boolean // whether data contains positive values
+  isAllLine: boolean // whether all series are line type
   xAxisDataMapped: Object[] // array of x axis date/category items
   xMax: number // chart svg width
   yMax: number // chart svg height
+  needsYAxisAutoPadding?: boolean // whether Y-axis needs auto padding for label overflow
+  currentViewport?: string // current viewport for tick calculation
 }
 
 const useScales = (properties: useScaleProps) => {
-  let { xAxisDataMapped, xMax, yMax, min, max, config, data } = properties
-
-  const { rawData, dimensions } = useContext<ChartContext>(ConfigContext)
+  let {
+    xAxisDataMapped,
+    xMax,
+    yMax,
+    config,
+    data,
+    tableData,
+    minValue,
+    maxValue,
+    existPositiveValue,
+    isAllLine,
+    needsYAxisAutoPadding,
+    currentViewport
+  } = properties
+
+  const context = useContext<ChartContext>(ConfigContext)
+  const { rawData, dimensions, convertLineToBarGraph = false } = context
 
   const [screenWidth] = dimensions
+  const isHorizontal = config.orientation === 'horizontal'
+  const { visualizationType, xAxis, forestPlot, runtime } = config
+  const isForestPlot = visualizationType === 'Forest Plot'
+
+  const minMaxProps = {
+    config,
+    minValue,
+    maxValue,
+    existPositiveValue,
+    data,
+    isAllLine,
+    tableData,
+    convertLineToBarGraph
+  }
+  let { min, max, leftMax, rightMax } = getMinMax(minMaxProps)
+
+  const yTickCount = countNumOfTicks({
+    axis: 'yAxis',
+    max,
+    runtime,
+    currentViewport,
+    isHorizontal,
+    data,
+    config,
+    min
+  })
+  const handleNumTicks = isForestPlot ? config.data.length : yTickCount
+
+  // Apply auto-padding if needed
+  if (needsYAxisAutoPadding && !isHorizontal) {
+    for (let i = 0; i < 3; i++) {
+      const scale = composeYScale({ min, max, yMax, config, leftMax })
+      const padding = getYAxisAutoPadding(scale, handleNumTicks, maxValue, minValue, config)
+      if (i === 0 || padding > 0) {
+        const adjustedConfig = { ...config, yAxis: { ...config.yAxis, scalePadding: padding, enablePadding: true } }
+        const result = getMinMax({ ...minMaxProps, config: adjustedConfig })
+        min = result.min
+        max = result.max
+        leftMax = result.leftMax
+        rightMax = result.rightMax
+      }
+    }
+  }
+
   const seriesDomain = config.runtime.barSeriesKeys || config.runtime.seriesKeys
   const xAxisType = config.runtime.xAxis.type
-  const isHorizontal = config.orientation === 'horizontal'
-  const { visualizationType, xAxis, forestPlot } = config
   const paddingRange = ['Area Chart', 'Forecasting'].includes(config.visualizationType) ? 1 : 1 - config.barThickness
   //  define scales
   let xScale = null
@@ -59,7 +123,7 @@ const useScales = (properties: useScaleProps) => {
 
   // handle  Horizontal bars
   if (isHorizontal) {
-    xScale = composeXScale({ min: min * 1.03, ...properties })
+    xScale = composeXScale({ min: min * 1.03, max, xMax, config })
     xScale.type = config.yAxis.type === 'logarithmic' ? scaleTypes.LOG : scaleTypes.LINEAR
     yScale = getYScaleFunction(xAxisType, xAxisDataMapped)
     yScale.rangeRound([0, yMax])
@@ -69,7 +133,7 @@ const useScales = (properties: useScaleProps) => {
   // handle  Vertical bars
   if (!isHorizontal) {
     xScale = composeScaleBand(xAxisDataMapped, [0, xMax], paddingRange)
-    yScale = composeYScale(properties)
+    yScale = composeYScale({ min, max, yMax, config, leftMax })
     seriesScale = composeScaleBand(seriesDomain, [0, xScale.bandwidth()], 0)
   }
 
@@ -290,17 +354,29 @@ const useScales = (properties: useScaleProps) => {
       }
     }
   }
-  return { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding, xScaleAnnotation }
+  return {
+    xScale,
+    yScale,
+    seriesScale,
+    g1xScale,
+    g2xScale,
+    xScaleNoPadding,
+    xScaleAnnotation,
+    min,
+    max,
+    leftMax,
+    rightMax
+  }
 }
 
 export default useScales
 
-export const getFirstDayOfMonth = ms => {
+const getFirstDayOfMonth = ms => {
   const date = new Date(ms)
   return new Date(date.getFullYear(), date.getMonth(), 1).getTime()
 }
 
-export const dateFormatHasMonthButNoDays = dateFormat => {
+const dateFormatHasMonthButNoDays = dateFormat => {
   return (
     (dateFormat.includes('%b') ||
       dateFormat.includes('%B') ||
@@ -352,28 +428,6 @@ export const getTickValues = (xAxisDataMapped, xScale, num, config) => {
   }
 }
 
-// Ensure that the last tick is shown for charts with a "Date (Linear Scale)" scale
-export const filterAndShiftLinearDateTicks = (config, axisProps, xAxisDataMapped, formatDate) => {
-  let ticks = axisProps.ticks
-  const filteredTickValues = getTicks(axisProps.scale, axisProps.numTicks)
-  if (filteredTickValues.length < xAxisDataMapped.length) {
-    let shift = 0
-    const lastIdx = xAxisDataMapped.indexOf(filteredTickValues[filteredTickValues.length - 1])
-    if (lastIdx < xAxisDataMapped.length - 1) {
-      shift = !config.xAxis.sortByRecentDate
-        ? xAxisDataMapped.length - 1 - lastIdx
-        : xAxisDataMapped.indexOf(filteredTickValues[0]) * -1
-    }
-    ticks = filteredTickValues.map(value => {
-      return axisProps.ticks[axisProps.ticks.findIndex(tick => tick.value === value) + shift]
-    })
-  }
-  ticks.forEach((tick, i) => {
-    tick.formattedValue = formatDate(tick.value, i, ticks)
-  })
-  return ticks
-}
-
 /// helper functions
 const composeXScale = ({ min, max, xMax, config }) => {
   // Adjust min value if using logarithmic scale

package/src/hooks/useSmallMultipleSynchronization.ts

@@ -0,0 +1,59 @@
+import { useContext } from 'react'
+import ConfigContext from '../ConfigContext'
+
+/**
+ * Custom hook to handle synchronized tooltips in small multiples.
+ * This hook provides mouse event handlers that coordinate tooltip display across multiple chart tiles.
+ *
+ * @param xMax - The maximum x coordinate of the chart area
+ * @param yMax - The maximum y coordinate of the chart area
+ * @param getXValueFromCoordinate - Function to convert pixel x-coordinate to data value
+ * @returns Object with onMouseMove and onMouseLeave handlers, or null if not in small multiples
+ */
+export const useSmallMultipleSynchronization = (
+  xMax: number,
+  yMax: number,
+  getXValueFromCoordinate: (x: number) => any
+) => {
+  const { config, handleSmallMultipleHover } = useContext(ConfigContext)
+
+  // If not in small multiples mode, return null handlers
+  if (!handleSmallMultipleHover) {
+    return {
+      onMouseMove: null,
+      onMouseLeave: null
+    }
+  }
+
+  const yAxisSize = Number(config.yAxis.size || 0)
+
+  const onMouseMove = (event: any) => {
+    const svgRect = event.currentTarget.getBoundingClientRect()
+    const x = event.clientX - svgRect.left
+    const y = event.clientY - svgRect.top
+
+    // Only trigger synchronized tooltips when mouse is over the valid chart area
+    // (to the right of the Y-axis and within chart bounds)
+    const isOverChartArea = x >= yAxisSize && x <= yAxisSize + xMax && y >= 0 && y <= yMax
+
+    if (isOverChartArea) {
+      const xAxisValue = getXValueFromCoordinate(x - yAxisSize)
+      if (xAxisValue !== null && xAxisValue !== undefined) {
+        handleSmallMultipleHover(xAxisValue, y)
+        return
+      }
+    }
+
+    // If we're not over a valid area or couldn't get a value, hide synchronized tooltips
+    handleSmallMultipleHover(null, null)
+  }
+
+  const onMouseLeave = () => {
+    handleSmallMultipleHover(null, null)
+  }
+
+  return {
+    onMouseMove,
+    onMouseLeave
+  }
+}

package/src/hooks/useTooltip.tsx

@@ -1,4 +1,4 @@
-import { useContext, useRef } from 'react'
+import { useContext, useRef, useLayoutEffect } from 'react'
 // Local imports
 import parse from 'html-react-parser'
 import ConfigContext from '../ConfigContext'
@@ -28,6 +28,14 @@ export const useTooltip = props => {
   const { xScale, yScale, seriesScale, showTooltip, hideTooltip, interactionLabel = '' } = props
   const { xAxis, visualizationType, orientation, yAxis, runtime } = config
 
+  // Track the latest xScale in a ref to prevent stale closures
+  const xScaleRef = useRef(xScale)
+
+  // Update ref whenever xScale prop changes
+  useLayoutEffect(() => {
+    xScaleRef.current = xScale
+  }, [xScale])
+
   const Y_AXIS_SIZE = Number(config.yAxis.size || 0)
 
   // function handles only Single series hovered data tooltips
@@ -289,15 +297,15 @@ export const useTooltip = props => {
    */
   const getXValueFromCoordinateDate = x => {
     if (config.xAxis.type === 'categorical' || config.visualizationType === 'Combo') {
-      let eachBand = xScale.step()
+      let eachBand = xScaleRef.current.step()
       let numerator = x
       const index = Math.floor(Number(numerator) / eachBand)
-      return xScale.domain()[index - 1] // fixes off by 1 error
+      return xScaleRef.current.domain()[index - 1] // fixes off by 1 error
     }
 
     if (isDateScale(config.xAxis) && config.visualizationType !== 'Combo') {
       const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
-      const x0 = xScale.invert(xScale(x))
+      const x0 = xScaleRef.current.invert(xScaleRef.current(x))
       const index = bisectDate(config.data, x0, 1)
       const val = parseDate(config.data[index - 1][config.xAxis.dataKey])
       return val
@@ -309,12 +317,12 @@ export const useTooltip = props => {
    * @function getXValueFromCoordinate
    * @returns {String} - the closest x value to the cursor position
    */
-  const getXValueFromCoordinate = (x, isClick = false) => {
+  const getXValueFromCoordinate = x => {
     if (visualizationType === 'Pie') return
     if (orientation === 'horizontal') return
 
     // Check the type of x equal to point or if the type of xAxis is equal to continuous or date
-    if (xScale.type === 'point' || xAxis.type === 'continuous' || isDateScale(xAxis)) {
+    if (xScaleRef.current.type === 'point' || xAxis.type === 'continuous' || isDateScale(xAxis)) {
       // Find the closest x value by calculating the minimum distance
       let closestX = null
       let minDistance = Number.MAX_VALUE
@@ -322,9 +330,11 @@ export const useTooltip = props => {
 
       const barThicknessOffset = config.xAxis.type === 'date' ? xScale.bandwidth() / 2 : 0
       data.forEach(d => {
-        const xPosition = isDateScale(xAxis) ? xScale(parseDate(d[xAxis.dataKey])) : xScale(d[xAxis.dataKey])
+        const xPosition = isDateScale(xAxis)
+          ? xScaleRef.current(parseDate(d[xAxis.dataKey]))
+          : xScaleRef.current(d[xAxis.dataKey])
         let bwOffset = config.barHeight
-        const distance = Math.abs(Number(xPosition + barThicknessOffset - offset + (isClick ? bwOffset * 2 : 0)))
+        const distance = Math.abs(Number(xPosition + barThicknessOffset - offset))
 
         if (distance <= minDistance) {
           minDistance = distance
@@ -334,16 +344,50 @@ export const useTooltip = props => {
       return closestX
     }
 
+    // For band scales, find which band the mouse x-coordinate falls within
     if (config.xAxis.type === 'categorical' || visualizationType === 'Combo') {
-      let range = xScale.range()[1] - xScale.range()[0]
-      let eachBand = range / (xScale.domain().length + 1)
+      const domain = xScaleRef.current.domain()
+      const bandwidth = xScaleRef.current.bandwidth()
 
-      let numerator = x
-      const index = Math.floor((Number(numerator) - eachBand / 2) / eachBand)
-      return xScale.domain()[index] // fixes off by 1 error
+      let closestValue = null
+      let minDistance = Number.MAX_VALUE
+
+      domain.forEach(value => {
+        const bandStart = xScaleRef.current(value)
+        const bandCenter = bandStart + bandwidth / 2
+        const distance = Math.abs(x - bandCenter)
+
+        if (distance < minDistance) {
+          minDistance = distance
+          closestValue = value
+        }
+      })
+
+      return closestValue
     }
   }
 
+  /**
+   * Helper for converting data value to pixel coordinate (inverse of getXValueFromCoordinate)
+   * @function getCoordinateFromXValue
+   * @param {any} xAxisValue - X-axis data value (date, number, or category)
+   * @returns {number} - pixel coordinate for the data value
+   */
+  const getCoordinateFromXValue = xAxisValue => {
+    if (visualizationType === 'Pie') return 0
+    if (orientation === 'horizontal') return 0
+
+    // Convert data value to pixel coordinate using current xScale
+    let pixelX = isDateScale(xAxis) ? xScaleRef.current(parseDate(xAxisValue)) : xScaleRef.current(xAxisValue)
+
+    // For band scales (bar charts, categorical axes), add bandwidth offset to point to center of bar
+    if (xScaleRef.current.bandwidth) {
+      pixelX += xScaleRef.current.bandwidth() / 2
+    }
+
+    return pixelX
+  }
+
   const findClosest = (dataArray: [any, number][], mouseXorY) => {
     let dataColumn: Object
     dataArray.find(([d, xOrY]) => {
@@ -431,7 +475,7 @@ export const useTooltip = props => {
       const eventSvgCoords = localPoint(e)
       const { x } = eventSvgCoords
       if (!x) throw new Error('COVE: no x value in handleTooltipClick.')
-      let closestXScaleValue = getXValueFromCoordinate(x, true)
+      let closestXScaleValue = getXValueFromCoordinate(x)
       let datum = config.data?.filter(item => item[config.xAxis.dataKey] === closestXScaleValue)
       if (!closestXScaleValue) throw new Error('COVE: no closest x scale value in handleTooltipClick')
       if (isDateScale(xAxis) && closestXScaleValue) {
@@ -502,7 +546,7 @@ export const useTooltip = props => {
         const dataWithXScale = dataToSearch.map(
           d => [d, seriesScale(d[dynamicSeries.dynamicCategory])] as [Object, number]
         )
-        const xOffset = x - Y_AXIS_SIZE - xScale(closestXScaleValue)
+        const xOffset = x - Y_AXIS_SIZE - xScaleRef.current(closestXScaleValue)
         dataToSearch = [findClosest(dataWithXScale, xOffset)]
       }
     }
@@ -645,6 +689,7 @@ export const useTooltip = props => {
     getIncludedTooltipSeries,
     getXValueFromCoordinate,
     getXValueFromCoordinateDate,
+    getCoordinateFromXValue,
     handleTooltipClick,
     handleTooltipMouseOff,
     handleTooltipMouseOver,

package/src/scss/main.scss

@@ -1,52 +1,4 @@
-@import '@cdc/core/styles/accessibility';
-
-@mixin breakpoint($class) {
-  @if $class == xs {
-    @media (max-width: 767px) {
-      @content;
-    }
-  } @else if $class == sm {
-    @media (min-width: 768px) {
-      @content;
-    }
-  } @else if $class == md {
-    @media (min-width: 960px) {
-      @content;
-    }
-  } @else if $class == lg {
-    @media (min-width: 1300px) {
-      @content;
-    }
-  } @else {
-    @warn "Breakpoint mixin supports: xs, sm, md, lg";
-  }
-}
-
-@mixin breakpointClass($class) {
-  @if $class == xs {
-    &.xs,
-    &.xxs {
-      @content;
-    }
-  } @else if $class == sm {
-    &.sm,
-    &.md,
-    &.lg {
-      @content;
-    }
-  } @else if $class == md {
-    &.md,
-    &.lg {
-      @content;
-    }
-  } @else if $class == lg {
-    &.lg {
-      @content;
-    }
-  } @else {
-    @warn "Breakpoint Class mixin supports: xs, sm, md, lg";
-  }
-}
+@import '@cdc/core/styles/v2/utils/breakpoints';
 
 .form-container {
   overflow-y: auto;
@@ -91,37 +43,6 @@
 
   border-radius: 3px;
 
-  .checkbox-group {
-    padding: 16px;
-    border: 1px solid #c4c4c4;
-    border-radius: 8px;
-    margin-top: 8px;
-    margin-bottom: 24px;
-  }
-
-  .loader {
-    width: 100%;
-    text-align: center;
-    display: inline-block;
-    animation: spin 1s linear infinite;
-
-    &::before {
-      content: '\21BB';
-    }
-  }
-
-  .warning-icon {
-    position: relative;
-    top: 2px;
-    width: 15px;
-    height: 15px;
-    margin-left: 5px;
-
-    path {
-      fill: #d8000c;
-    }
-  }
-
   .chart-description {
     margin-bottom: 20px;
   }

package/src/store/chart.actions.ts

@@ -12,6 +12,7 @@ type SET_EXCLUDED_DATA = Action<'SET_EXCLUDED_DATA', object[]>
 type SET_FILTERED_DATA = Action<'SET_FILTERED_DATA', object[]>
 type SET_SERIES_HIGHLIGHT = Action<'SET_SERIES_HIGHLIGHT', string[]>
 type SET_VIEWPORT = Action<'SET_VIEWPORT', string>
+type SET_VIZ_VIEWPORT = Action<'SET_VIZ_VIEWPORT', string>
 type SET_DIMENSIONS = Action<'SET_DIMENSIONS', DimensionsType>
 type SET_CONTAINER = Action<'SET_CONTAINER', object>
 type SET_LOADED_EVENT = Action<'SET_LOADED_EVENT', boolean>
@@ -26,6 +27,7 @@ type ChartActions =
   | SET_FILTERED_DATA
   | SET_SERIES_HIGHLIGHT
   | SET_VIEWPORT
+  | SET_VIZ_VIEWPORT
   | SET_DIMENSIONS
   | SET_CONTAINER
   | SET_LOADED_EVENT

package/src/store/chart.reducer.ts

@@ -13,6 +13,7 @@ type ChartState = {
   filteredData: object[]
   seriesHighlight: string[]
   currentViewport: ViewportSize
+  vizViewport: ViewportSize
   dimensions: DimensionsType
   container: HTMLElement | null
   coveLoadedEventRan: boolean
@@ -32,6 +33,7 @@ export const getInitialState = (configObj: ChartConfig): ChartState => {
     seriesHighlight:
       configObj && configObj?.legend?.seriesHighlight?.length ? [...configObj?.legend?.seriesHighlight] : [],
     currentViewport: 'lg',
+    vizViewport: 'lg',
     dimensions: [0, 0],
     container: null,
     coveLoadedEventRan: false,
@@ -61,6 +63,8 @@ export const reducer = (state: ChartState, action: ChartActions): ChartState =>
       return { ...state, seriesHighlight: action.payload }
     case 'SET_VIEWPORT':
       return { ...state, currentViewport: action.payload }
+    case 'SET_VIZ_VIEWPORT':
+      return { ...state, vizViewport: action.payload }
     case 'SET_DIMENSIONS':
       return { ...state, dimensions: action.payload }
     case 'SET_CONTAINER':

package/src/types/ChartConfig.ts

@@ -10,12 +10,13 @@ import { BoxPlot } from '@cdc/core/types/BoxPlot'
 import { General as CoreGeneral } from '@cdc/core/types/General'
 
 // Extend the core General type to include palette information for charts
-export type General = CoreGeneral & {
+type General = CoreGeneral & {
   palette?: {
     name?: string
     version?: string
     isReversed?: boolean
     customColors?: string[]
+    customColorsOrdered?: string[]
   }
 }
 import { type Link } from './../components/Sankey/types'
@@ -30,7 +31,7 @@ import { Version } from '@cdc/core/types/Version'
 import Footnotes from '@cdc/core/types/Footnotes'
 
 export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
-export type ChartColumns = Record<string, Column>
+type ChartColumns = Record<string, Column>
 export type ChartOrientation = 'vertical' | 'horizontal'
 export type VisualizationType =
   | 'Area Chart'
@@ -75,6 +76,7 @@ type DataFormat = {
   bottomSuffix: string
   commas: boolean
   prefix: string
+  preserveOriginalDecimals?: boolean
   rightCommas: boolean
   rightPrefix: string
   rightRoundTo: number
@@ -91,7 +93,7 @@ type Exclusions = {
   dateEnd: string
 }
 
-export type Legend = CoreLegend & {
+type Legend = CoreLegend & {
   seriesHighlight: string[]
   unified: boolean
   hideSuppressionLink: boolean
@@ -192,8 +194,22 @@ export type AllChartsConfig = {
   runtimeDataUrl: string
   series: Series
   showLineSeriesLabels: boolean
+  showAreaUnderLine?: boolean
   showSidebar: boolean
   showTitle: boolean
+  smallMultiples?: {
+    mode?: 'by-column' | 'by-series'
+    tileColumn?: string
+    tilesPerRowDesktop?: number
+    tilesPerRowMobile?: number
+    tileOrderType?: 'asc' | 'desc' | 'custom'
+    tileOrder?: string[]
+    tileTitles?: { [key: string]: string }
+    independentYAxis?: boolean
+    colorMode?: 'same' | 'different'
+    synchronizedTooltips?: boolean
+    showAreaUnderLine?: boolean
+  }
   sortData: 'ascending' | 'descending'
   stackedAreaChartLineType: string
   suppressedData?: { label: string; icon: string; value: string }[]
@@ -217,6 +233,8 @@ export type AllChartsConfig = {
   visualizationSubType: string
   xAxis: Axis
   yAxis: Axis
+  hideXAxisLabel?: boolean
+  hideYAxisLabel?: boolean
   xScale: Function
   yScale: Function
   regions: Region[]
@@ -248,7 +266,7 @@ export type AllChartsConfig = {
   }
 } & MarkupConfig
 
-export type ForestPlotConfig = {
+type ForestPlotConfig = {
   visualizationType: 'Forest Plot'
   forestPlot: ForestPlotConfigSettings
 } & AllChartsConfig &
@@ -263,7 +281,7 @@ export type LineChartConfig = {
 } & AllChartsConfig &
   MarkupConfig
 
-export type SankeyLink = {
+type SankeyLink = {
   depth: number
   height: number
   id: string
@@ -284,7 +302,7 @@ type StoryNode = {
   segmentTextBefore: string
 }
 
-export type SankeyChartConfig = {
+type SankeyChartConfig = {
   enableTooltips: boolean
   data: [
     {

package/src/types/ChartContext.ts

@@ -16,7 +16,9 @@ type SharedChartContext = {
   clean: Function
   colorScale?: ColorScale
   config: ChartConfig
+  convertLineToBarGraph?: boolean
   currentViewport?: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+  vizViewport?: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   dashboardConfig?: DashboardConfig
   // process top level chart aria label for each chart type
   handleChartAriaLabels: (config: any) => string
@@ -33,6 +35,7 @@ type SharedChartContext = {
   parentRef?: React.RefObject<HTMLDivElement>
   setLegendIsolateValues?: Function
   svgRef?: React.RefObject<SVGSVGElement>
+  handleSmallMultipleHover?: (xAxisValue: any, yCoordinate: number) => void
 }
 
 // Line Chart Specific Context