@cdc/chart 4.25.3 → 4.25.6

package/src/components/BoxPlot/BoxPlot.tsx

@@ -5,6 +5,7 @@ import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 import { handleTooltip, createPlots } from './helpers/index'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import _ from 'lodash'
 
 const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
@@ -15,7 +16,7 @@ const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
   const boxWidth = xScale.bandwidth()
 
   const bodyStyles = getComputedStyle(document.body)
-  const defaultColor = bodyStyles.getPropertyValue('--cool-gray-90').trim()
+  const defaultColor = APP_FONT_COLOR
   const constrainedWidth = Math.min(40, boxWidth)
   const color_0 = _.get(colorPalettesChart, [config.palette, 0], '#000')
   const plots = createPlots(data, config)

package/src/components/Brush/BrushChart.tsx

@@ -0,0 +1,73 @@
+import React, { FC, useContext, useEffect, useRef, useState } from 'react'
+import { Brush } from '@visx/brush'
+import { Group } from '@visx/group'
+import { scaleBand, scaleLinear } from '@visx/scale'
+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'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+export interface ZoomBrushProps {
+  xMax: number
+  yMax: number
+  brushPosition: { start: { x: number }; end: { x: number } }
+  onBrushChange: (bounds: any) => void
+  brushKey: number
+}
+
+const ZoomBrush: FC<ZoomBrushProps> = ({ xMax, yMax, brushPosition, onBrushChange, brushKey }) => {
+  const { tableData, config, parseDate, dashboardConfig } = useContext(ConfigContext)
+  const brushRef = useRef(null)
+  const dataKey = config.xAxis.dataKey
+  const borderRadius = 15
+  const mappedDates: string[] = tableData.map(row => row[dataKey])
+  const brushheight = 25
+  const DASHBOARD_MARGIN = 50
+  const BRUSH_HEIGHT_MULTIPLIER = 1.5
+
+  const xScale = scaleBand<string>({
+    domain: mappedDates,
+    range: [0, xMax],
+    paddingInner: 0.1,
+    paddingOuter: 0.1
+  })
+  const yScale = scaleLinear({ domain: [0, yMax], range: [0, yMax] })
+
+  const calculateGroupTop = (): number => {
+    if (dashboardConfig?.type === 'dashboard') {
+      return Number(yMax) + config.xAxis.axisBBox + brushheight * BRUSH_HEIGHT_MULTIPLIER + DASHBOARD_MARGIN
+    } else {
+      return Number(yMax) + config.xAxis.axisBBox + brushheight * BRUSH_HEIGHT_MULTIPLIER
+    }
+  }
+
+  const style = {
+    fill: '#474747',
+    stroke: 'blue',
+    strokeOpacity: 0,
+    rx: borderRadius
+  }
+
+  return (
+    <Group left={config.yAxis.size} top={calculateGroupTop()}>
+      <rect fill='#949494' width={xMax} height={25} rx={borderRadius} pointerEvents='none' />
+      <Brush
+        innerRef={brushRef}
+        key={brushKey}
+        xScale={xScale}
+        yScale={yScale}
+        width={xMax}
+        height={25}
+        brushDirection='horizontal'
+        handleSize={8}
+        resizeTriggerAreas={['left', 'right']}
+        initialBrushPosition={brushPosition}
+        selectedBoxStyle={style}
+        onChange={onBrushChange}
+        disableDraggingOverlay={true}
+      />
+    </Group>
+  )
+}
+
+export default ZoomBrush

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

@@ -0,0 +1,39 @@
+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

package/src/components/DeviationBar.jsx

@@ -6,6 +6,7 @@ import { Text } from '@visx/text'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import useIntersectionObserver from '../hooks/useIntersectionObserver'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 export default function DeviationBar({ height, xScale }) {
@@ -14,7 +15,6 @@ export default function DeviationBar({ height, xScale }) {
     config,
     formatNumber,
     twoColorPalette,
-    updateConfig,
     parseDate,
     formatDate,
     currentViewport
@@ -178,7 +178,7 @@ export default function DeviationBar({ height, xScale }) {
           // colors
           const [leftColor, rightColor] = twoColorPalette[twoColor.palette]
           const barColor = { left: leftColor, right: rightColor }
-          const fill = getContrastColor('#000', barColor[barPosition])
+          const fill = getContrastColor(APP_FONT_COLOR, barColor[barPosition])
 
           let textProps = getTextProps(config.isLollipopChart, textFits, lollipopShapeSize, fill)
           // tooltips