@cdc/chart 4.25.8 → 4.25.11

package/src/hooks/useReduceData.ts

@@ -1,37 +1,74 @@
 import isNumber from '@cdc/core/helpers/isNumber'
+import { useMemo } from 'react'
 
 function useReduceData(config, data) {
-  const isBar = config.series.every(({ type }) => type === 'Bar')
-  const isAllLine = config.series.every(({ type }) => ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg'].includes(type))
-  const sumYValues = seriesKeys => xValue =>
-    seriesKeys.reduce((yTotal, k) => (isNaN(Number(xValue[k])) ? yTotal : yTotal + Number(xValue[k])), 0)
-  const getSeriesKey = seriesKey => {
-    const series = config.runtime.series.find(item => item.dataKey === seriesKey)
-    return series?.dynamicCategory ? series.originalDataKey : seriesKey
-  }
-  const getMaxValueFromData = () => {
-    let max = Math.max(
-      ...data?.map(d =>
-        Math.max(
-          ...config.runtime.seriesKeys.map(key => {
-            const seriesKey = getSeriesKey(key)
-            return isNumber(d[seriesKey]) ? Number(cleanChars(d[seriesKey])) : 0
-          })
-        )
-      )
-    )
+  return useMemo(() => {
+    if (!data || !config?.runtime?.seriesKeys) {
+      return { minValue: 0, maxValue: 0, existPositiveValue: false, isAllLine: false }
+    }
+
+    const isBar = config.series.every(({ type }) => type === 'Bar')
+    const isAllLine = config.series.every(({ type }) => ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg'].includes(type))
+
+    const cleanChars = value => {
+      if (value === null || value === '') {
+        return ''
+      }
+      return typeof value === 'string' ? value.replace(/[,$]/g, '') : value
+    }
+
+    const getSeriesKey = seriesKey => {
+      const series = config.runtime.series.find(item => item.dataKey === seriesKey)
+      return series?.dynamicCategory ? series.originalDataKey : seriesKey
+    }
+
+    const seriesKeysMap = new Map()
+    config.runtime.seriesKeys.forEach(key => {
+      seriesKeysMap.set(key, getSeriesKey(key))
+    })
+
+    let minValue = Infinity
+    let maxValue = -Infinity
+    let existPositiveValue = false
+    const stackedTotals = []
+
+    for (let i = 0; i < data.length; i++) {
+      const row = data[i]
+      let rowMax = -Infinity
+      let rowMin = Infinity
+      let stackedSum = 0
+
+      for (const key of config.runtime.seriesKeys) {
+        const seriesKey = seriesKeysMap.get(key)
+        const cleanValue = cleanChars(row[seriesKey])
+
+        if (isNumber(cleanValue)) {
+          const numValue = Number(cleanValue)
+
+          if (numValue > rowMax) rowMax = numValue
+          if (numValue < rowMin) rowMin = numValue
+
+          if (numValue >= 0) existPositiveValue = true
+
+          if (!isNaN(numValue)) stackedSum += numValue
+        }
+      }
+
+      if (rowMax > maxValue) maxValue = rowMax
+      if (rowMin < minValue) minValue = rowMin
+
+      if (!isNaN(stackedSum)) stackedTotals.push(stackedSum)
+    }
 
     if (
       (config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && isBar)) &&
       config.visualizationSubType === 'stacked'
     ) {
-      const yTotals = data.map(sumYValues(config.runtime.seriesKeys)).filter(num => !isNaN(num))
-      max = Math.max(...yTotals)
+      maxValue = Math.max(...stackedTotals)
     }
 
     if (config.visualizationSubType === 'stacked' && config.visualizationType === 'Area Chart') {
-      const yTotals = data.map(sumYValues(config.runtime.seriesKeys))
-      max = Math.max(...yTotals)
+      maxValue = Math.max(...stackedTotals)
     }
 
     if (
@@ -39,62 +76,60 @@ function useReduceData(config, data) {
       config.series &&
       config.series.dataKey
     ) {
-      max = Math.max(
-        ...data.map(d => (isNumber(d[config.series.dataKey]) ? Number(cleanChars(d[config.series.dataKey])) : 0))
-      )
+      let specialMax = -Infinity
+      for (const row of data) {
+        const cleanValue = cleanChars(row[config.series.dataKey])
+        if (isNumber(cleanValue)) {
+          const numValue = Number(cleanValue)
+          if (numValue > specialMax) specialMax = numValue
+        }
+      }
+      maxValue = specialMax
     }
 
     if (config.visualizationType === 'Combo' && config.visualizationSubType === 'stacked' && !isBar) {
       if (config.runtime.barSeriesKeys && config.runtime.lineSeriesKeys) {
-        const yTotals = data.map(sumYValues(config.runtime.barSeriesKeys))
-
-        const lineMax = Math.max(
-          ...data.map(d => Math.max(...config.runtime.lineSeriesKeys.map(key => Number(cleanChars(d[key])))))
-        )
-        const barMax = Math.max(...yTotals)
-
-        max = Math.max(barMax, lineMax)
+        let barMax = -Infinity
+        let lineMax = -Infinity
+
+        for (const row of data) {
+          let barSum = 0
+          let rowLineMax = -Infinity
+
+          for (const key of config.runtime.barSeriesKeys) {
+            const cleanValue = cleanChars(row[key])
+            if (isNumber(cleanValue)) {
+              const numValue = Number(cleanValue)
+              if (!isNaN(numValue)) barSum += numValue
+            }
+          }
+
+          for (const key of config.runtime.lineSeriesKeys) {
+            const cleanValue = cleanChars(row[key])
+            if (isNumber(cleanValue)) {
+              const numValue = Number(cleanValue)
+              if (numValue > rowLineMax) rowLineMax = numValue
+            }
+          }
+
+          if (barSum > barMax) barMax = barSum
+          if (rowLineMax > lineMax) lineMax = rowLineMax
+        }
+
+        maxValue = Math.max(barMax, lineMax)
       }
     }
 
-    return max
-  }
-
-  const getMinValueFromData = () => {
-    const minNumberFromData = Math.min(
-      ...data.map(d =>
-        Math.min(
-          ...config.runtime.seriesKeys.map(key => {
-            const seriesKey = getSeriesKey(key)
-            return isNumber(d[seriesKey]) ? Number(cleanChars(d[seriesKey])) : Infinity
-          })
-        )
-      )
-    )
-
-    return String(minNumberFromData)
-  }
-
-  const findPositiveNum = () => {
-    if (!config.runtime.seriesKeys) {
-      return false
-    }
-    return config.runtime.seriesKeys.some(key => data.some(d => d[getSeriesKey(key)] >= 0))
-  }
+    if (minValue === Infinity) minValue = 0
+    if (maxValue === -Infinity) maxValue = 0
 
-  const cleanChars = value => {
-    if (value === null || value === '') {
-      return ''
+    return {
+      minValue: Number(minValue),
+      maxValue: Number(maxValue),
+      existPositiveValue,
+      isAllLine
     }
-
-    return typeof value === 'string' ? value.replace(/[,$]/g, '') : value
-  }
-
-  const maxValue = Number(getMaxValueFromData())
-  const minValue = Number(getMinValueFromData())
-  const existPositiveValue = findPositiveNum()
-
-  return { minValue, maxValue, existPositiveValue, isAllLine }
+  }, [config, data])
 }
 
 export default useReduceData

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
+  }
+}