@cdc/chart 4.25.10 → 4.25.11

package/src/components/Annotations/components/findNearestDatum.ts

@@ -1,41 +1,3 @@
-import { timeParse } from 'd3-time-format'
-
-const getXValueFromCoordinate = (x, isClick = false) => {
-  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 (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)
-
-    let numerator = x
-    const index = Math.floor((Number(numerator) - eachBand / 2) / eachBand)
-    return xScale.domain()[index] // fixes off by 1 error
-  }
-
-  if (config.xAxis.type === 'date') {
-    const xValue = x // Assuming x is the coordinate on the chart
-    const xTimestamp = convertXValueToTimestamp(x, 0, xMax, xScale.domain())
-
-    // Calculate the closest date to the x coordinate
-    let closestDate = null
-    let minDistance = Number.MAX_VALUE
-
-    xScale.domain().forEach(timestamp => {
-      const distance = Math.abs(xTimestamp - timestamp)
-      if (distance < minDistance) {
-        minDistance = distance
-        closestDate = timestamp
-      }
-    })
-
-    return closestDate
-  }
-
-  return x
-}
-
 const findNearestDatum = ({ data, xScale, yScale, config, xMax, annotationSeriesKey }, xPosition) => {
   const { xAxis, visualizationType, orientation } = config
 
@@ -62,7 +24,7 @@ const findNearestDatum = ({ data, xScale, yScale, config, xMax, annotationSeries
     return domain[index]
   }
 
-  const getXValueFromCoordinate = (x, isClick = false) => {
+  const getXValueFromCoordinate = x => {
     if (visualizationType === 'Pie') return
     if (orientation === 'horizontal') return
 
@@ -85,7 +47,10 @@ const findNearestDatum = ({ data, xScale, yScale, config, xMax, annotationSeries
     }
 
     // Check the type of x equal to point or if the type of xAxis is equal to continuous or date
-    if (config.xAxis.type === 'categorical' || (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')) {
+    if (
+      config.xAxis.type === 'categorical' ||
+      (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')
+    ) {
       const range = xScale.range()[1] - xScale.range()[0]
       const eachBand = range / (xScale.domain().length + 1)
 
@@ -135,4 +100,4 @@ const findNearestDatum = ({ data, xScale, yScale, config, xMax, annotationSeries
   return { x, y }
 }
 
-export { findNearestDatum, getXValueFromCoordinate }
+export { findNearestDatum }

package/src/components/AreaChart/components/AreaChart.Stacked.jsx

@@ -13,17 +13,21 @@ import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
 const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff }) => {
   // import data from context
-  let { transformedData, config, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
+  let { transformedData, config, seriesHighlight, colorScale, rawData, parseDate } = useContext(ConfigContext)
   const data = config.brush?.active && config.brush.data?.length ? config.brush.data : transformedData
   // Draw transparent bars over the chart to get tooltip data
   // Turn DEBUG on for additional context.
   if (!data) return
 
   const handleDateCategory = value => {
-    if (config.xAxis.type === 'categorical') return xScale(value)
+    if (config.xAxis.type === 'categorical') {
+      return xScale(value) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    }
     if (isDateScale(config.xAxis)) {
-      let date = new Date(value)
-      return xScale(date)
+      const scaledValue = xScale(parseDate(value, false))
+      // Add bandwidth offset to center on band scales (date type)
+      // For date-time (time scale), bandwidth doesn't exist so no offset added
+      return scaledValue + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
     }
   }
 
@@ -65,7 +69,7 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
                       key={stack.key}
                       d={path(stack) || ''}
                       strokeWidth={2}
-                      stroke={displayArea ?  colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[stack.key] : stack.key) : '#000' : 'transparent'}
+                      stroke={displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[stack.key] : stack.key) : '#000' : 'transparent'}
                       fillOpacity={transparentArea ? 0.2 : 1}
                       fill={displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[stack.key] : stack.key) : '#000' : 'transparent'}
                     />
@@ -74,7 +78,7 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
               }}
             </AreaStack>
             {/* prettier-ignore */}
-            <Bar width={Number(xMax)} height={Number(yMax)} fill={'transparent'}   onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />
+            <Bar width={Number(xMax)} height={Number(yMax)} fill={'transparent'} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />
           </Group>
         </ErrorBoundary>
       </svg>

package/src/components/AreaChart/index.tsx

@@ -1,4 +1,3 @@
-import AreaChart from './components/AreaChart'
 import AreaChartStacked from './components/AreaChart.Stacked'
 
-export { AreaChart, AreaChartStacked }
+export { AreaChartStacked }

package/src/components/BarChart/components/BarChart.Horizontal.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 // Local context and hooks
 import ConfigContext from '../../../ConfigContext'
@@ -26,7 +26,7 @@ import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 
-export const BarChartHorizontal = () => {
+const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
   const {
     isHorizontal,
@@ -54,12 +54,12 @@ export const BarChartHorizontal = () => {
     formatDate,
     parseDate,
     setSharedFilter,
-    currentViewport
+    vizViewport
   } = useContext<ChartContext>(ConfigContext)
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
-  const LABEL_FONT_SIZE = isMobileFontViewport(currentViewport) ? 13 : 16
+  const LABEL_FONT_SIZE = isMobileFontViewport(vizViewport) ? 13 : 16
 
   const hasConfidenceInterval = [config.confidenceKeys?.upper, config.confidenceKeys?.lower].every(
     v => v != null && String(v).trim() !== ''

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -23,7 +23,7 @@ import { type ChartContext } from '../../../types/ChartContext'
 import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 
-export const BarChartVertical = () => {
+const BarChartVertical = () => {
   const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph, barChart } =
     useContext<BarChartContextValues>(BarChartContext)
   const {
@@ -46,6 +46,7 @@ export const BarChartVertical = () => {
     colorScale,
     config,
     currentViewport,
+    vizViewport,
     dashboardConfig,
     tableData,
     formatDate,
@@ -58,7 +59,7 @@ export const BarChartVertical = () => {
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
-  const LABEL_FONT_SIZE = isMobileFontViewport(currentViewport) ? 13 : 16
+  const LABEL_FONT_SIZE = isMobileFontViewport(vizViewport) ? 13 : 16
 
   const root = document.documentElement
 

package/src/components/BoxPlot/helpers/index.ts

@@ -29,7 +29,7 @@ export const handleTooltip = (boxplot, columnCategory, key, q1, q3, median, iqr,
   `
 }
 
-export const calculateBoxPlotStats = (values: number[]) => {
+const calculateBoxPlotStats = (values: number[]) => {
   if (!values || values.length === 0) return {}
 
   // Sort the values
@@ -82,7 +82,7 @@ const getValuesBySeriesKey = (group: string, config, data) => {
 }
 
 // Helper to calculate outliers based on IQR
-export const calculateOutliers = (values: number[], firstQuartile: number, thirdQuartile: number) => {
+const calculateOutliers = (values: number[], firstQuartile: number, thirdQuartile: number) => {
   const iqr = thirdQuartile - firstQuartile
   const lowerBound = firstQuartile - 1.5 * iqr
   const upperBound = thirdQuartile + 1.5 * iqr
@@ -90,7 +90,7 @@ export const calculateOutliers = (values: number[], firstQuartile: number, third
 }
 
 // Helper to calculate non-outliers based on IQR
-export const calculateNonOutliers = (values: number[], firstQuartile: number, thirdQuartile: number): number[] => {
+const calculateNonOutliers = (values: number[], firstQuartile: number, thirdQuartile: number): number[] => {
   const iqr = thirdQuartile - firstQuartile
   const lowerBound = firstQuartile - 1.5 * iqr
   const upperBound = thirdQuartile + 1.5 * iqr

package/src/components/Brush/BrushChart.tsx

@@ -6,7 +6,7 @@ import ConfigContext from '../../ConfigContext'
 import { Text } from '@visx/text'
 import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
-export interface BrushChartProps {
+interface BrushChartProps {
   xMax: number
   yMax: number
   brushPosition: { start: { x: number }; end: { x: number } }