@cdc/chart 4.25.10 → 4.26.1

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

@@ -1,109 +0,0 @@
-import React, { useContext, memo } from 'react'
-
-// cdc
-import ConfigContext from '../../../ConfigContext'
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import { isDateScale } from '@cdc/core/helpers/cove/date'
-
-// visx & d3
-import * as allCurves from '@visx/curve'
-import { AreaClosed, LinePath, Bar } from '@visx/shape'
-import { Group } from '@visx/group'
-
-const AreaChart = props => {
-  const { xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff } = props
-  // import data from context
-  let {
-    transformedData: data,
-    config,
-    handleLineType,
-    parseDate,
-
-    seriesHighlight,
-    colorScale,
-    rawData
-  } = useContext(ConfigContext)
-
-  if (!data) return
-
-  const handleX = d => {
-    return (
-      (isDateScale(config.xAxis)
-        ? xScale(parseDate(d[config.xAxis.dataKey], false))
-        : xScale(d[config.xAxis.dataKey])) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
-    )
-  }
-
-  const handleY = (d, index, s = undefined) => {
-    return yScale(d[s.dataKey])
-  }
-
-  return (
-    data && (
-      <svg>
-        <ErrorBoundary component='AreaChart'>
-          <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size)}>
-            {(config.runtime.areaSeriesKeys || config.series).map((s, index) => {
-              let seriesData = data.map(d => {
-                return {
-                  [config.xAxis.dataKey]: d[config.xAxis.dataKey],
-                  [s.dataKey]: d[s.dataKey]
-                }
-              })
-
-              let curveType = allCurves[s.lineType]
-              let transparentArea =
-                config.legend.behavior === 'highlight' &&
-                seriesHighlight.length > 0 &&
-                seriesHighlight.indexOf(s.dataKey) === -1
-              let displayArea =
-                config.legend.behavior === 'highlight' ||
-                seriesHighlight.length === 0 ||
-                seriesHighlight.indexOf(s.dataKey) !== -1
-
-              return (
-                <React.Fragment key={index}>
-                  {/* prettier-ignore */}
-                  <LinePath
-                    data={seriesData}
-                    x={d => handleX(d)}
-                    y={d => handleY(d, index, s)}
-                    stroke={displayArea ?  colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
-                    strokeWidth={2}
-                    strokeOpacity={1}
-                    shapeRendering='geometricPrecision'
-                    curve={curveType}
-                    strokeDasharray={s.type ? handleLineType(s.type) : 0}
-                  />
-
-                  {/* prettier-ignore */}
-                  <AreaClosed
-                    key={'area-chart'}
-                    fill={displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
-                    fillOpacity={transparentArea ? 0.25 : 0.5}
-                    data={seriesData}
-                    x={d => handleX(d)}
-                    y={d => handleY(d, index, s)}
-                    yScale={yScale}
-                    curve={curveType}
-                    strokeDasharray={s.type ? handleLineType(s.type) : 0}
-                  />
-                </React.Fragment>
-              )
-            })}
-            <Bar
-              width={Number(xMax)}
-              height={Number(yMax)}
-              fill={'transparent'}
-              fillOpacity={0.05}
-              onMouseMove={e => handleTooltipMouseOver(e, rawData)}
-              onMouseLeave={handleTooltipMouseOff}
-            />
-          </Group>
-        </ErrorBoundary>
-      </svg>
-    )
-  )
-}
-
-export default memo(AreaChart)

package/src/components/Brush/BrushChart.tsx

@@ -1,128 +0,0 @@
-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'
-export interface BrushChartProps {
-  xMax: number
-  yMax: number
-  brushPosition: { start: { x: number }; end: { x: number } }
-  onBrushChange: (bounds: any) => void
-  brushKey: number
-  brushHandleProps: { startValue: string; endValue: string; endPos: number; startPos: number }
-  brushRef: React.RefObject<BrushRef>
-}
-
-const BrushChart: FC<BrushChartProps> = ({
-  xMax,
-  yMax,
-  brushPosition,
-  onBrushChange,
-  brushKey,
-  brushHandleProps,
-  brushRef
-}) => {
-  const { tableData, config, dashboardConfig } = useContext(ConfigContext)
-  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 range = config?.xAxis?.sortByRecentDate ? [xMax, 0] : [0, xMax]
-  const xScale = scaleBand<string>({
-    domain: config?.xAxis?.sortByRecentDate ? mappedDates.reverse() : mappedDates,
-    range: range,
-    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
-        disableDraggingOverlay={false}
-        renderBrushHandle={props => (
-          <BrushHandle
-            left={Number(config.runtime.yAxis.size)}
-            pixelDistance={brushHandleProps.endPos - brushHandleProps.startPos}
-            textProps={brushHandleProps}
-            isBrushing={brushRef.current?.state.isBrushing}
-            {...props}
-          />
-        )}
-        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}
-        useWindowMoveEvents={true}
-      />
-    </Group>
-  )
-}
-
-export default BrushChart
-
-const BrushHandle = props => {
-  const { x, y, isBrushing, className, textProps } = props
-  const pathWidth = 8
-
-  // Flip the SVG path horizontally for the left handle
-  const isLeft = className.includes('left')
-  const transform = isLeft ? 'scale(-1, 1)' : 'translate(0,0)'
-  const textAnchor = isLeft ? 'end' : 'start'
-  const tooltipText = isLeft ? ` Drag edges to focus on a specific segment ` : ''
-  const textFontSize = APP_FONT_SIZE / 1.4
-  const textWidth = getTextWidth(textProps.startValue, `${textFontSize}px`)
-  const textPosLeft = x > 0 ? 0 : 55
-  const textPosRight = y < textProps.xMax ? 0 : -50
-  return (
-    <Group left={x + pathWidth / 2} top={-2}>
-      <Text
-        pointerEvents='visiblePainted'
-        dominantBaseline='hanging'
-        x={isLeft ? textPosLeft : textPosRight}
-        y={25}
-        verticalAnchor='start'
-        textAnchor={textAnchor}
-        fontSize={textFontSize}
-      >
-        {isLeft ? textProps.startValue : textProps.endValue}
-      </Text>
-      <path
-        cursor='ew-resize'
-        d='M0.5,10A6,6 0 0 1 6.5,16V14A6,6 0 0 1 0.5,20ZM2.5,18V12M4.5,18V12'
-        fill='#297EF1'
-        strokeWidth='1'
-        transform={transform}
-      />
-    </Group>
-  )
-}

package/src/components/Brush/BrushController.tsx

@@ -1,71 +0,0 @@
-import { useState, useEffect, useContext, useRef } from 'react'
-import ConfigContext, { ChartDispatchContext } from '../../ConfigContext'
-import BrushChart from './BrushChart'
-import { isDateScale } from '@cdc/core/helpers/cove/date'
-import { BrushRef } from './types'
-
-const BrushController = ({ yMax, xMax }) => {
-  const { tableData, config, parseDate, dashboardConfig, formatDate } = useContext(ConfigContext)
-  const [brushHandleProps, setBrushHandleProps] = useState({
-    startPos: 0,
-    endPos: 0,
-    startValue: '',
-    endValue: '',
-    xMax: xMax
-  })
-  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 brushRef = useRef<BrushRef | null>(null)
-
-  const [brushPosition, setBrushPosition] = useState({
-    start: { x: 0 },
-    end: { x: xMax }
-  })
-
-  const handleBrushChange = (bounds: any) => {
-    if (!bounds) return dispatch({ type: 'SET_BRUSH_DATA', payload: [] })
-    const filteredValues = bounds?.xValues?.filter(val => val !== undefined)
-    if (filteredValues?.length === 0) dispatch({ type: 'SET_BRUSH_DATA', payload: [] })
-    const selected = bounds?.xValues || []
-
-    const filteredData = tableData.filter(row => selected.includes(row[dataKey]))
-    const endValue = filteredValues
-      .slice()
-      .reverse()
-      .find(item => item !== undefined)
-    const startValue = filteredValues.find(item => item !== undefined)
-    const formatIfDate = value => (isDateScale(config.runtime.xAxis) ? formatDate(parseDate(value)) : value)
-
-    setBrushHandleProps(prev => ({
-      ...prev,
-      startPos: brushRef.current?.state.start.x,
-      endPos: brushRef.current?.state.end.x,
-      endValue: formatIfDate(endValue),
-      startValue: formatIfDate(startValue)
-    }))
-    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 (
-    <BrushChart
-      brushRef={brushRef}
-      brushHandleProps={brushHandleProps}
-      xMax={xMax}
-      yMax={yMax}
-      brushPosition={brushPosition}
-      onBrushChange={handleBrushChange}
-      brushKey={brushKey}
-    />
-  )
-}
-export default BrushController

package/src/components/Brush/types.tsx

@@ -1,8 +0,0 @@
-export type BrushRef = {
-  reset: () => void
-  state: {
-    start: { x: number; y: number }
-    end: { x: number; y: number }
-    isBrushing: boolean
-  }
-}

package/src/components/BrushChart.tsx

@@ -1,223 +0,0 @@
-import { Group } from '@visx/group'
-import { useContext, useEffect, useRef, useState } from 'react'
-import ConfigContext, { ChartDispatchContext } from '../ConfigContext'
-import * as d3 from 'd3'
-import { Text } from '@visx/text'
-import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
-import _ from 'lodash'
-
-interface BrushChartProps {
-  xMax: number
-  yMax: number
-}
-
-const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
-  const { tableData, config, dashboardConfig, formatDate, parseDate } = useContext(ConfigContext)
-  const dispatch = useContext(ChartDispatchContext)
-  const [brushState, setBrushState] = useState({ isBrushing: false, selection: [] })
-  const [brushKey, setBrushKey] = useState(0)
-  const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
-  const isDashboardFilters = sharedFilters?.length > 0
-  const [tooltip, showTooltip] = useState(false)
-  const svgRef = useRef()
-  const brushheight = 25
-  const borderRadius = 15
-  const xDomain = d3.extent(tableData, d => new Date(d[config.runtime.originalXAxis.dataKey]))
-
-  const xScale = d3.scaleTime().domain(xDomain).range([0, xMax])
-
-  const tooltipText = 'Drag edges to focus on a specific segment '
-  const textWidth = getTextWidth(tooltipText, `normal ${16 / 1.1}px sans-serif`)
-  const DASHBOARD_MARGIN = 50
-  const BRUSH_HEIGHT_MULTIPLIER = 1.5
-
-  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 handleMouseOver = () => {
-    // show tooltip text only once before brush triggered
-    if (brushState.selection[0] === 0 && xMax === brushState.selection[1]) {
-      showTooltip(true)
-    }
-  }
-  const handleMouseLeave = () => {
-    // hide tooltip text if brush was triggered
-    if (brushState.selection[0] !== 0 || brushState.selection[1] !== xMax) {
-      showTooltip(false)
-    }
-    showTooltip(false)
-  }
-
-  const brushHandle = (g, selection, firstDate, lastDate) => {
-    const textWidth = getTextWidth(firstDate, `normal ${16 / 1.1}px sans-serif`)
-    const textPositionLeft = selection[0] < textWidth ? 0 : -textWidth
-    const textPositionRight = xMax - selection[1] < textWidth ? -textWidth : 0
-
-    return g
-      .selectAll('.handle--custom')
-      .data([{ side: 'left' }, { side: 'right' }])
-      .join(enter => {
-        const handleGroup = enter.append('g').attr('class', 'handle--custom')
-        handleGroup
-          .append('text')
-          .attr('x', d => (d.side === 'left' ? textPositionLeft : textPositionRight))
-          .attr('y', 30)
-          .text(d => (d.side === 'left' ? firstDate : lastDate))
-          .attr('font-size', '13px')
-        return handleGroup
-      })
-
-      .attr('display', 'block')
-      .attr('transform', selection === null ? null : (_, i) => `translate(${selection[i]},${'10'})`)
-  }
-
-  const initializeBrush = () => {
-    const svg = d3.select(svgRef.current).attr('overflow', 'visible')
-
-    svg
-      .append('rect') // prettier-ignore
-      .attr('fill', '#949494')
-      .attr('stroke', '#c5c5c5')
-      .attr('stroke-width', 2)
-      .attr('ry', borderRadius)
-      .attr('rx', borderRadius)
-      .attr('height', brushheight)
-      .attr('width', xMax)
-
-    const brushHandler = event => {
-      const selection = event?.selection
-      //if (!selection) return
-      let isUserBrushing = event.type === 'brush' && selection && selection.length > 0
-
-      const [x0, x1] = selection.map(value => xScale.invert(value))
-
-      const newFilteredData = _.filter(tableData, d => {
-        const parsedDate = new Date(d[config.xAxis.dataKey])
-        return parsedDate && !isNaN(parsedDate.getTime()) && parsedDate >= x0 && parsedDate <= x1
-      })
-
-      const sortByRecentDate = config.xAxis.sortByRecentDate
-
-      const sortedData = _.sortBy(newFilteredData, item => new Date(item[config.xAxis.dataKey]))
-
-      // If ascending is false, reverse the sorted array
-      const finalData: object[] = !sortByRecentDate ? sortedData : sortedData.reverse()
-
-      // Retrieve the start and end dates based on the sorted data array
-      const startDate: string = _.get(_.first(finalData), config.xAxis.dataKey, '')
-      const endDate: string = _.get(_.last(finalData), config.xAxis.dataKey, '')
-      // add custom blue colored handlers to each corners of brush
-      svg.selectAll('.handle--custom').remove()
-      // Parse and format the dates, setting them to an empty string if undefined
-      const parseAndFormatDate = date => (date ? formatDate(parseDate(date)) : '')
-      const formattedStartDate = parseAndFormatDate(startDate)
-      const formattedEndDate = parseAndFormatDate(endDate)
-      svg.call(brushHandle, selection, formattedStartDate, formattedEndDate)
-
-      const payload = {
-        active: config.xAxis.brushActive,
-        isBrushing: isUserBrushing,
-        data: finalData
-      }
-      dispatch({ type: 'SET_BRUSH_CONFIG', payload: payload })
-      setBrushState({
-        isBrushing: true,
-        selection
-      })
-    }
-
-    const brush = d3
-      .brushX()
-      .extent([
-        [0, 0],
-        [xMax, 25]
-      ]) // brush extent
-      .on('start brush end', brushHandler)
-
-    const defaultSelection = [0, xMax]
-    let brushGroup = svg.append('g').call(brush).call(brush.move, defaultSelection)
-    brushGroup.select('.overlay').style('pointer-events', 'none')
-
-    brushGroup
-      .selectAll('.selection')
-      .attr('fill', '#474747')
-      .attr('fill-opacity', 1)
-      .attr('rx', borderRadius)
-      .attr('ry', borderRadius)
-  }
-
-  useEffect(() => {
-    const isFiltersActive = config.filters?.some(filter => filter.active)
-    const isExclusionsActive = config.exclusions?.active
-
-    if ((isFiltersActive || isExclusionsActive || isDashboardFilters) && config.brush?.active) {
-      setBrushKey(prevKey => prevKey + 1)
-    }
-    dispatch({ type: 'SET_BRUSH_CONFIG', payload: { ...config.brush, data: tableData } })
-
-    return () => dispatch({ type: 'SET_BRUSH_CONFIG', payload: { ...config.brush, data: [] } })
-  }, [config.filters, config.exclusions, config.brush?.active, isDashboardFilters])
-
-  // this effect handles where brush chart is missing on production. it helpes re render
-  useEffect(() => {
-    let timeoutId = null
-
-    const checkAndInitializeBrush = () => {
-      if (xMax > 0) {
-        initializeBrush()
-      } else {
-        // Clear the existing timeout and set a new one
-        clearTimeout(timeoutId)
-        timeoutId = setTimeout(checkAndInitializeBrush, 500)
-      }
-    }
-
-    checkAndInitializeBrush()
-
-    // Cleanup function to clear timeout
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId)
-      }
-    }
-  }, [xMax])
-
-  // reset brush on keychange
-  useEffect(() => {
-    if (brushKey) {
-      initializeBrush()
-    }
-  }, [brushKey])
-
-  if (!brushState.isBrushing) {
-    initializeBrush()
-  }
-
-  return (
-    <Group
-      onMouseLeave={handleMouseLeave}
-      onMouseOver={handleMouseOver}
-      className='brush-container'
-      left={Number(config.runtime.yAxis.size)}
-      top={calculateGroupTop()}
-    >
-      <Text
-        pointerEvents='visiblePainted'
-        display={tooltip ? 'block' : 'none'}
-        fontSize={16}
-        x={(Number(xMax) - Number(textWidth)) / 2}
-        y={-10}
-      >
-        Drag edges to focus on a specific segment
-      </Text>
-      <svg width={'100%'} height={brushheight * 3} ref={svgRef}></svg>
-    </Group>
-  )
-}
-
-export default BrushChart

package/src/helpers/sort.ts

@@ -1,7 +0,0 @@
-export const sortAsc = (a, b) => {
-  return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
-}
-
-export const sortDesc = (a, b) => {
-  return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
-}

package/src/hooks/useActiveElement.js

@@ -1,19 +0,0 @@
-import { useState, useEffect } from 'react'
-// Use for accessibility testing
-const useActiveElement = () => {
-  const [active, setActive] = useState(document.activeElement)
-
-  const handleFocusIn = e => {
-    setActive(document.activeElement)
-  }
-
-  useEffect(() => {
-    document.addEventListener('focusin', handleFocusIn)
-    return () => {
-      document.removeEventListener('focusin', handleFocusIn)
-    }
-  }, [])
-
-  return active
-}
-export default useActiveElement

package/src/hooks/useChartClasses.js

@@ -1,41 +0,0 @@
-export default function useChartClasses(config) {
-  let lineDatapointClass = ''
-  let barBorderClass = ''
-
-  if (config.lineDatapointStyle === 'hover') {
-    lineDatapointClass = ' chart-line--hover'
-  }
-  if (config.lineDatapointStyle === 'always show') {
-    lineDatapointClass = ' chart-line--always'
-  }
-  if (config.barHasBorder === 'false') {
-    barBorderClass = ' chart-bar--no-border'
-  }
-
-  let innerContainerClasses = ['cove-component__inner']
-  config.title && innerContainerClasses.push('component--has-title')
-  config.subtext && innerContainerClasses.push('component--has-subtext')
-  config.biteStyle && innerContainerClasses.push(`bite__style--${config.biteStyle}`)
-  config.general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
-
-  let contentClasses = ['cove-component__content']
-  config.visualizationType === 'Spark Line' && contentClasses.push('sparkline')
-  !config.visual?.border && contentClasses.push('no-borders')
-  config.visual?.borderColorTheme && contentClasses.push('component--has-borderColorTheme')
-  config.visual?.accent && contentClasses.push('component--has-accent')
-  config.visual?.background && contentClasses.push('component--has-background')
-  config.visual?.hideBackgroundColor && contentClasses.push('component--hideBackgroundColor')
-
-  let sparkLineStyles = {
-    width: '100%',
-    height: '100px'
-  }
-
-  return {
-    barBorderClass,
-    lineDatapointClass,
-    contentClasses,
-    innerContainerClasses,
-    sparkLineStyles
-  }
-}