@cdc/chart 4.25.6 → 4.25.8

package/src/hooks/useScales.ts

@@ -44,7 +44,7 @@ const useScales = (properties: useScaleProps) => {
   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
   let yScale = null
@@ -68,22 +68,16 @@ const useScales = (properties: useScaleProps) => {
 
   // handle  Vertical bars
   if (!isHorizontal) {
-    xScale = composeScaleBand(xAxisDataMapped, [0, xMax], 1 - config.barThickness)
+    xScale = composeScaleBand(xAxisDataMapped, [0, xMax], paddingRange)
     yScale = composeYScale(properties)
     seriesScale = composeScaleBand(seriesDomain, [0, xScale.bandwidth()], 0)
   }
 
-  // handle Linear scaled viz
-  if (config.xAxis.type === 'date' && !isHorizontal) {
-    const xAxisDataMappedSorted = sortXAxisData(xAxisDataMapped, config.xAxis.sortByRecentDate)
-    xScale = composeScaleBand(xAxisDataMappedSorted, [0, xMax], 1 - config.barThickness)
-  }
-
   // handle Linear scaled viz
   if (config.xAxis.type === 'date' && !isHorizontal) {
     const sorted = sortXAxisData(xAxisDataMapped, config.xAxis.sortByRecentDate)
 
-    xScale = composeScaleBand(sorted, [0, xMax], 1 - config.barThickness)
+    xScale = composeScaleBand(sorted, [0, xMax], paddingRange)
     xScale.type = scaleTypes.BAND
   }
 
@@ -153,44 +147,50 @@ const useScales = (properties: useScaleProps) => {
 
   // handle Box plot
   if (visualizationType === 'Box Plot') {
-    const allOutliers = []
-    const hasOutliers =
-      config.boxplot.plots.map(b => b.columnOutliers.map(outlier => allOutliers.push(outlier))) &&
-      !config.boxplot.hideOutliers
-
-    // check if outliers are lower
-    if (hasOutliers) {
-      let outlierMin = Math.min(...allOutliers)
-      let outlierMax = Math.max(...allOutliers)
-
-      // check if outliers exceed standard bounds
-      if (outlierMin < min) min = outlierMin
-      if (outlierMax > max) max = outlierMax
+    const {
+      boxplot: { plots, hideOutliers },
+      xAxis: { dataKey },
+      orientation,
+      runtime: { seriesKeys },
+      series,
+      barThickness
+    } = config
+
+    // 1) merge outliers + fences
+    let lo = min,
+      hi = max
+    for (const { columnOutliers = [], columnLowerBounds: lb, columnUpperBounds: ub } of plots) {
+      if (!hideOutliers && columnOutliers.length) {
+        lo = Math.min(lo, ...columnOutliers)
+        hi = Math.max(hi, ...columnOutliers)
+      }
+      lo = Math.min(lo, lb)
+      hi = Math.max(hi, ub)
     }
+    ;[min, max] = [lo, hi]
 
-    // check fences for max/min
-    let lowestFence = Math.min(...config.boxplot.plots.map(item => item.columnLowerBounds))
-    let highestFence = Math.max(...config.boxplot.plots.map(item => item.columnUpperBounds))
+    // 2) unique categories
+    const cats = Array.from(new Set(data.map(d => d[dataKey])))
 
-    if (lowestFence < min) min = lowestFence
-    if (highestFence > max) max = highestFence
+    if (orientation === 'horizontal') {
+      xScale = composeXScale({ min, max, xMax, config })
+      xScale.type = scaleTypes.LINEAR
 
-    // Set Scales
+      yScale = composeScaleBand(cats, [0, yMax], 0.4)
+      seriesScale = composeScaleBand(seriesKeys, [0, yScale.bandwidth()], 0.3)
+    } else {
+      xScale = composeScaleBand(cats, [0, xMax], 1 - barThickness)
+      xScale.type = scaleTypes.BAND
 
-    const categories = _.uniq(data.map(d => d[config.xAxis.dataKey]))
-    const range = [0, config.barThickness * 100 || 1]
-    const domain = _.map(config.series, 'dataKey')
-    yScale = scaleLinear({
-      range: [yMax, 0],
-      round: true,
-      domain: [min, max]
-    })
-    xScale = scaleBand({
-      range: [0, xMax],
-      domain: categories
-    })
-    xScale.type = scaleTypes.BAND
-    seriesScale = composeScaleBand(domain, range)
+      // numeric → Y
+      yScale = composeYScale({ min, max, yMax, config, leftMax: 0 })
+
+      seriesScale = composeScaleBand(
+        series.map(s => s.dataKey),
+        [0, xScale.bandwidth()],
+        0
+      )
+    }
   }
 
   // handle Paired bar

package/src/hooks/useTooltip.tsx

@@ -286,10 +286,11 @@ export const useTooltip = props => {
       let minDistance = Number.MAX_VALUE
       let offset = x
 
+      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])
         let bwOffset = config.barHeight
-        const distance = Math.abs(Number(xPosition - offset + (isClick ? bwOffset * 2 : 0)))
+        const distance = Math.abs(Number(xPosition + barThicknessOffset - offset + (isClick ? bwOffset * 2 : 0)))
 
         if (distance <= minDistance) {
           minDistance = distance
@@ -593,7 +594,7 @@ export const useTooltip = props => {
 
     return (
       <li style={style} className='tooltip-body mb-1'>
-        {displayText}
+        {displayText !== undefined ? parse(String(displayText)) : displayText}
       </li>
     )
   }

package/src/index.jsx

@@ -14,6 +14,11 @@ let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcChart configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} isDebug={isDebug} />
+    <CdcChart
+      interactionLabel={domContainer.attributes['data-config']?.value}
+      configUrl={domContainer.attributes['data-config'].value}
+      isEditor={isEditor}
+      isDebug={isDebug}
+    />
   </React.StrictMode>
 )

package/src/scss/main.scss

@@ -1,3 +1,5 @@
+@import '@cdc/core/styles/accessibility';
+
 @mixin breakpoint($class) {
   @if $class == xs {
     @media (max-width: 767px) {
@@ -513,10 +515,6 @@
     }
   }
 
-  [tabindex]:focus-visible {
-    outline: 2px solid rgb(0, 95, 204) !important;
-  }
-
   // ANIMATIONS
   // Pie Chart Animations
   .animated-pie {

package/src/store/chart.actions.ts

@@ -16,7 +16,7 @@ type SET_DIMENSIONS = Action<'SET_DIMENSIONS', DimensionsType>
 type SET_CONTAINER = Action<'SET_CONTAINER', object>
 type SET_LOADED_EVENT = Action<'SET_LOADED_EVENT', boolean>
 type SET_DRAG_ANNOTATIONS = Action<'SET_DRAG_ANNOTATIONS', boolean>
-type SET_BRUSH_CONFIG = Action<'SET_BRUSH_CONFIG', object>
+type SET_BRUSH_DATA = Action<'SET_BRUSH_DATA', object[]>
 type ChartActions =
   | SET_CONFIG
   | UPDATE_CONFIG
@@ -31,6 +31,6 @@ type ChartActions =
   | SET_LOADED_EVENT
   | SET_DRAG_ANNOTATIONS
   | SET_LOADING
-  | SET_BRUSH_CONFIG
+  | SET_BRUSH_DATA
 
 export default ChartActions

package/src/store/chart.reducer.ts

@@ -18,11 +18,7 @@ type ChartState = {
   coveLoadedEventRan: boolean
   isDraggingAnnotation: boolean
   imageId: string
-  brushConfig: {
-    data: object[]
-    isActive: boolean
-    isBrushing: boolean
-  }
+  brushData: object[] | []
 }
 
 export const getInitialState = (configObj: ChartConfig): ChartState => {
@@ -41,11 +37,7 @@ export const getInitialState = (configObj: ChartConfig): ChartState => {
     coveLoadedEventRan: false,
     isDraggingAnnotation: false,
     imageId: `cove-${Math.random().toString(16).slice(-4)}`,
-    brushConfig: {
-      data: [],
-      isActive: false,
-      isBrushing: false
-    }
+    brushData: []
   }
 }
 
@@ -77,7 +69,7 @@ export const reducer = (state: ChartState, action: ChartActions): ChartState =>
       return { ...state, coveLoadedEventRan: action.payload }
     case 'SET_DRAG_ANNOTATIONS':
       return { ...state, isDraggingAnnotation: action.payload }
-    case 'SET_BRUSH_CONFIG':
-      return { ...state, brushConfig: action.payload }
+    case 'SET_BRUSH_DATA':
+      return { ...state, brushData: action.payload }
   }
 }

package/src/types/ChartConfig.ts

@@ -44,7 +44,7 @@ export interface PreliminaryDataItem {
   iconCode: string
   label: string
   lineCode: string
-  seriesKey: string
+  seriesKeys: string[]
   style: string
   symbol: string
   type: 'effect' | 'suppression'
@@ -120,11 +120,6 @@ export type AllChartsConfig = {
   barStyle: 'lollipop' | 'rounded' | 'flat'
   barThickness: number
   boxplot: BoxPlot
-  brush: {
-    active: boolean
-    data: object[]
-    isBrushing: boolean
-  }
   chartMessage: { noData?: string }
   color: string
   colorMatchLineSeriesLabels: boolean

package/src/components/BoxPlot/index.tsx

@@ -1,3 +0,0 @@
-import BoxPlot from './BoxPlot'
-
-export default BoxPlot

package/src/components/Brush/BrushController..tsx

@@ -1,39 +0,0 @@
-import { useState, useEffect, useContext } from 'react'
-import ConfigContext, { ChartDispatchContext } from '../../ConfigContext'
-import ZoomBrush from './BrushChart'
-const BrushController = ({ yMax, xMax }) => {
-  const { tableData, config, parseDate, dashboardConfig } = useContext(ConfigContext)
-  const dataKey = config.xAxis.dataKey
-  const [brushKey, setBrushKey] = useState(0)
-  const dispatch = useContext(ChartDispatchContext)
-  const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
-  const isDashboardFilters = sharedFilters?.length > 0
-  const [brushPosition, setBrushPosition] = useState({
-    start: { x: 0 },
-    end: { x: xMax }
-  })
-
-  const handleBrushChange = (bounds: any) => {
-    const selected = bounds.xValues || []
-    const filteredData = tableData.filter(row => selected.includes(row[dataKey]))
-    dispatch({ type: 'SET_BRUSH_DATA', payload: filteredData })
-  }
-
-  // whenever your other filters change:
-  useEffect(() => {
-    setBrushPosition({ start: { x: 0 }, end: { x: xMax } })
-    dispatch({ type: 'SET_BRUSH_DATA', payload: [] })
-    setBrushKey(k => k + 1)
-  }, [config.filters, config.exclusions, config.brush?.active, isDashboardFilters])
-
-  return (
-    <ZoomBrush
-      xMax={xMax}
-      yMax={yMax}
-      brushPosition={brushPosition}
-      onBrushChange={handleBrushChange}
-      brushKey={brushKey}
-    />
-  )
-}
-export default BrushController