@cdc/chart 4.24.10 → 4.24.12

package/src/components/BoxPlot/BoxPlot.tsx

@@ -0,0 +1,131 @@
+import React, { useContext } from 'react'
+import { BoxPlot } from '@visx/stats'
+import { Group } from '@visx/group'
+import ConfigContext from '../../ConfigContext'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
+import { handleTooltip, calculateBoxPlotStats, createPlots } from './helpers/index'
+import _ from 'lodash'
+
+const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
+  const { config, colorScale, seriesHighlight, transformedData: data } = useContext(ConfigContext)
+  const { boxplot } = config
+
+  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
+  const boxWidth = xScale.bandwidth()
+  const constrainedWidth = Math.min(40, boxWidth)
+  const color_0 = _.get(colorPalettesChart, [config.palette, 0], '#000')
+
+  return (
+    <ErrorBoundary component='BoxPlot'>
+      <Group left={Number(config.yAxis.size)} className='boxplot' key={`boxplot-group`}>
+        {createPlots(data, config).map((d, i) => {
+          const offset = boxWidth - constrainedWidth
+          const radius = 4
+
+          return (
+            <Group
+              key={`boxplotplot-${d.columnCategory}`}
+              left={xScale(d.columnCategory) + (xScale.bandwidth() - seriesScale.bandwidth()) / 2}
+            >
+              {config.series.map((item, index) => {
+                const valuesByKey = d.keyValues[item.dataKey]
+                const { min, max, median, firstQuartile, thirdQuartile } = calculateBoxPlotStats(valuesByKey)
+                let iqr = Number(thirdQuartile - firstQuartile).toFixed(config.dataFormat.roundTo)
+
+                const isTransparent =
+                  config.legend.behavior === 'highlight' &&
+                  seriesHighlight.length > 0 &&
+                  seriesHighlight.indexOf(item.dataKey) === -1
+                const displayPlot =
+                  config.legend.behavior === 'highlight' ||
+                  seriesHighlight.length === 0 ||
+                  seriesHighlight.indexOf(item.dataKey) !== -1
+                const fillOpacity = isTransparent ? 0.3 : 0.5
+
+                return (
+                  <Group key={`boxplotplot-${item.dataKey}-${index}`}>
+                    {boxplot.plotNonOutlierValues &&
+                      valuesByKey.map((value, index) => {
+                        return (
+                          <circle
+                            display={displayPlot ? 'block' : 'none'}
+                            cx={seriesScale(item.dataKey) + seriesScale.bandwidth() / 2}
+                            cy={yScale(value)}
+                            r={radius}
+                            fill={'#ccc'}
+                            style={{ opacity: fillOpacity, fillOpacity: 1, stroke: 'black' }}
+                            key={`boxplot-${i}--circle-${index}`}
+                          />
+                        )
+                      })}
+                    {displayPlot && (
+                      <BoxPlot
+                        display={displayPlot ? 'block' : 'none'}
+                        data-left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
+                        key={`box-plot-${i}-${item}`}
+                        min={Number(min)}
+                        max={Number(max)}
+                        left={seriesScale(item.dataKey)}
+                        firstQuartile={firstQuartile}
+                        thirdQuartile={thirdQuartile}
+                        median={median}
+                        boxWidth={seriesScale.bandwidth()}
+                        fill={colorScale(item.dataKey)}
+                        fillOpacity={fillOpacity}
+                        stroke={fillOpacity ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0.1)'}
+                        valueScale={yScale}
+                        outliers={boxplot.plotOutlierValues ? d.columnOutliers : []}
+                        outlierProps={{
+                          style: {
+                            fill: `${color_0}`,
+                            opacity: fillOpacity
+                          }
+                        }}
+                        medianProps={{
+                          style: {
+                            stroke: 'black',
+                            opacity: fillOpacity
+                          }
+                        }}
+                        boxProps={{
+                          style: {
+                            stroke: 'black',
+                            strokeWidth: boxplot.borders === 'true' ? 1 : 0,
+                            opacity: fillOpacity
+                          }
+                        }}
+                        maxProps={{
+                          style: {
+                            stroke: 'black',
+                            opacity: fillOpacity
+                          }
+                        }}
+                        container
+                        containerProps={{
+                          'data-tooltip-html': handleTooltip(
+                            boxplot,
+                            d,
+                            item.dataKey,
+                            firstQuartile,
+                            thirdQuartile,
+                            median,
+                            iqr
+                          ),
+                          'data-tooltip-id': tooltip_id,
+                          tabIndex: -1
+                        }}
+                      />
+                    )}
+                  </Group>
+                )
+              })}
+            </Group>
+          )
+        })}
+      </Group>
+    </ErrorBoundary>
+  )
+}
+
+export default CoveBoxPlot

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

@@ -0,0 +1,54 @@
+import { max, min, median, quantile } from 'd3-array'
+import _ from 'lodash'
+
+interface Plot {
+  columnCategory: string
+  keyValues: { [key: string]: number[] }
+}
+export const handleTooltip = (boxplot, d, key, q1, q3, median, iqr) => {
+  return `
+      <strong>${d.columnCategory}</strong></br>
+       <strong>Key:${key}</strong></br>
+      ${boxplot.labels.q1}: ${q1}<br/>
+      ${boxplot.labels.q3}: ${q3}<br/>
+      ${boxplot.labels.iqr}: ${iqr}<br/>
+      ${boxplot.labels.median}: ${median}
+    `
+}
+
+export const calculateBoxPlotStats = values => {
+  if (!values || !values.length) return {}
+  const sortedValues = _.sortBy(values)
+  return {
+    min: min(values),
+    max: max(values),
+    median: median(values),
+    firstQuartile: quantile(sortedValues, 0.25),
+    thirdQuartile: quantile(sortedValues, 0.75)
+  }
+}
+const getValuesBySeriesKey = (group: string, config, data) => {
+  const allSeriesKeys = config.series.map(item => item?.dataKey)
+  const result = {}
+  const filteredData = data.filter(item => item[config.xAxis.dataKey] === group)
+  allSeriesKeys.forEach(key => {
+    result[key] = filteredData.map(item => item[key])
+  })
+
+  return result
+}
+
+export const createPlots = (data, config) => {
+  const dataKeys = data.map(d => d[config.xAxis.dataKey])
+  const plots: Plot[] = []
+  const groups: string[] = _.uniq(dataKeys)
+  if (groups && groups.length > 0) {
+    groups.forEach(group => {
+      plots.push({
+        columnCategory: group,
+        keyValues: getValuesBySeriesKey(group, config, data)
+      })
+    })
+  }
+  return plots
+}

package/src/components/BrushChart.tsx

@@ -4,6 +4,7 @@ import ConfigContext 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
@@ -11,7 +12,7 @@ interface BrushChartProps {
 }
 
 const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
-  const { tableData, config, setBrushConfig, dashboardConfig, formatDate } = useContext(ConfigContext)
+  const { tableData, config, setBrushConfig, dashboardConfig, formatDate, parseDate } = useContext(ConfigContext)
   const [brushState, setBrushState] = useState({ isBrushing: false, selection: [] })
   const [brushKey, setBrushKey] = useState(0)
   const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
@@ -26,9 +27,15 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
 
   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 => {
-    return Number(yMax) + config.xAxis.axisBBox + brushheight * 1.5
+    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 = () => {
@@ -85,41 +92,31 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
 
       const [x0, x1] = selection.map(value => xScale.invert(value))
 
-      // filter and update brush state directly
-      const newFilteredData = tableData.filter(d => {
-        const dateValue = d[config.runtime.originalXAxis.dataKey]
-        // Check if the date value exists and is valid
-        if (!dateValue) {
-          return false
-        }
+      const newFilteredData = _.filter(tableData, d => {
+        const parsedDate = new Date(d[config.xAxis.dataKey])
+        return parsedDate && !isNaN(parsedDate.getTime()) && parsedDate >= x0 && parsedDate <= x1
+      })
 
-        const parsedDate = new Date(dateValue)
+      const sortByRecentDate = config.xAxis.sortByRecentDate
 
-        // Check if parsedDate is a valid date
-        if (isNaN(parsedDate.getTime())) {
-          return false
-        }
+      const sortedData = _.sortBy(newFilteredData, item => new Date(item[config.xAxis.dataKey]))
 
-        // Check if the date falls within the selection range
-        if (parsedDate >= x0 && parsedDate <= x1) {
-          return true
-        }
-      })
+      // If ascending is false, reverse the sorted array
+      const finalData = !sortByRecentDate ? sortedData : sortedData.reverse()
 
-      const firstDate = (newFilteredData.length && newFilteredData[0][config?.runtime?.originalXAxis?.dataKey]) ?? ''
-      const lastDate =
-        (newFilteredData.length &&
-          newFilteredData[newFilteredData.length - 1][config?.runtime?.originalXAxis?.dataKey]) ??
-        ''
+      // Retrieve the start and end dates based on the sorted data array
+      const startDate = _.get(_.first(finalData), config.xAxis.dataKey, '')
+      const endDate = _.get(_.last(finalData), config.xAxis.dataKey, '')
       // add custom blue colored handlers to each corners of brush
       svg.selectAll('.handle--custom').remove()
       // append handler
-      svg.call(brushHandle, selection, firstDate, lastDate)
+      const [formattedStartDate, formattedEndDate] = [startDate, endDate].map(date => formatDate(parseDate(date)))
+      svg.call(brushHandle, selection, formattedStartDate, formattedEndDate)
 
       setBrushConfig({
         active: config.brush.active,
         isBrushing: isUserBrushing,
-        data: newFilteredData
+        data: finalData
       })
       setBrushState({
         isBrushing: true,