@cdc/chart 4.24.12 → 4.25.1

package/src/components/Annotations/components/AnnotationDraggable.tsx

@@ -16,31 +16,23 @@ import {
   handleTextY
 } from './helpers'
 
-import useColorScale from '../../../hooks/useColorScale'
-
 // visx
 import { HtmlLabel, CircleSubject, EditableAnnotation, Connector, Annotation as VisxAnnotation } from '@visx/annotation'
 import { Drag } from '@visx/drag'
 import { MarkerArrow } from '@visx/marker'
 import { LinePath } from '@visx/shape'
-import { fontSizes } from '@cdc/core/helpers/cove/fontSettings'
 
 // styles
 import './AnnotationDraggable.styles.css'
 
 const Annotations = ({ xScale, yScale, xScaleAnnotation, xMax, svgRef, onDragStateChange }) => {
   // prettier-ignore
-  const {
-    config,
-    dimensions,
-    isEditor,
-    updateConfig
-  } = useContext(ConfigContext)
+  const { config, dimensions, isEditor, updateConfig, colorScale } = useContext(ConfigContext)
 
   // destructure config items here...
   const { annotations } = config
   const [height] = dimensions
-  const { colorScale } = useColorScale()
+
   const AnnotationComponent = isEditor ? EditableAnnotation : VisxAnnotation
 
   return (
@@ -134,7 +126,7 @@ const Annotations = ({ xScale, yScale, xScaleAnnotation, xMax, svgRef, onDragSta
                   </p>
                 </>
               )}
-              <div style={{ fontSize: fontSizes[config.fontSize] }} dangerouslySetInnerHTML={sanitizedData()} />
+              <div dangerouslySetInnerHTML={sanitizedData()} />
             </div>
           </HtmlLabel>
           {annotation.connectionType === 'line' && (

package/src/components/Annotations/components/AnnotationDropdown.tsx

@@ -3,13 +3,13 @@ import ConfigContext from '../../../ConfigContext'
 import './AnnotationDropdown.styles.css'
 import Icon from '@cdc/core/components/ui/Icon'
 import Annotation from '..'
-import { fontSizes } from '@cdc/core/helpers/cove/fontSettings'
+import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
 
 const AnnotationDropdown = () => {
   const { currentViewport: viewport, config } = useContext(ConfigContext)
   const [expanded, setExpanded] = useState(false)
 
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[config?.fontSize]}px`
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${appFontSize}px`
 
   const {
     config: { annotations }
@@ -21,7 +21,7 @@ const AnnotationDropdown = () => {
   }
 
   const handleAccordionClassName = () => {
-    const classNames = ['data-table-heading', 'annotation__dropdown-list']
+    const classNames = ['data-table-heading', 'annotation__dropdown-list', 'p-3']
     if (!expanded) {
       classNames.push('collapsed')
     }

package/src/components/Axis/Categorical.Axis.tsx

@@ -6,12 +6,11 @@ import { Text } from '@visx/text'
 import ConfigContext from '../../ConfigContext'
 import chroma from 'chroma-js'
 import createBarElement from '@cdc/core/components/createBarElement'
-import { useBarChart } from '../../hooks/useBarChart'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
 
 const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
   const { config } = useContext(ConfigContext)
-  const { fontSize } = useBarChart()
 
   const { orientation } = config
 
@@ -95,9 +94,9 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
           barStacks.map(barStack =>
             barStack.bars.map(bar => {
               const isLastIndex = config.yAxis.categories.length - 1 === barStack.index
-              const textSize = fontSize[config.fontSize] / 1.3
+              const textSize = appFontSize / 1.3
               const textColor = chroma(bar.color).luminance() < 0.4 ? '#fff' : '#000'
-              const textWidth = getTextWidth(bar.key, `normal ${textSize}px sans-serif`)
+              const textWidth = getTextWidth(bar.key)
               const displayText = Number(textWidth) < bar.width && bar.height > textSize
               const tooltip = `<ul>
               <li class="tooltip-heading""> Label : ${bar.key}  </li>

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

@@ -11,7 +11,7 @@ import { Text } from '@visx/text'
 import { BarGroup } from '@visx/shape'
 
 // CDC core components and helpers
-import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { getColorContrast, getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getBarConfig, testZeroValue } from '../helpers'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
@@ -45,7 +45,6 @@ export const BarChartHorizontal = () => {
     updateBars,
     assignColorsToValues,
     section,
-    fontSize,
     isLabelBelowBar,
     displayNumbersOnBar,
     lollipopBarWidth,
@@ -136,7 +135,7 @@ export const BarChartHorizontal = () => {
                   const barDefaultLabel = !config.yAxis.displayNumbersOnBar ? '' : yAxisValue
 
                   // check if bar text/value string fits into  each bars.
-                  const textWidth = getTextWidth(barDefaultLabel, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                  const textWidth = getTextWidth(barDefaultLabel)
                   const textFits = Number(textWidth) < defaultBarWidth - 5
 
                   // control text position
@@ -201,8 +200,12 @@ export const BarChartHorizontal = () => {
                   // update label color
                   if (barColor && labelColor && textFits) {
                     labelColor = getContrastColor('#000', barColor)
+                    let constrast = getColorContrast('#000', barColor)
+                    const contrastLevel = 7
+                    if (constrast < contrastLevel) {
+                      labelColor = '#fff'
+                    }
                   }
-
                   const background = () => {
                     if (isRegularLollipopColor) return barColor
                     if (isTwoToneLollipopColor) return chroma(barColor).brighten(1)
@@ -215,7 +218,13 @@ export const BarChartHorizontal = () => {
                   const yPos = barHeight * bar.index + barHeight / 2
                   const [upperPos, lowerPos] = ['upper', 'lower'].map(position => {
                     if (!hasConfidenceInterval) return
-                    const d = datum.dynamicData ? datum.CI[bar.key][position] : datum[config.confidenceKeys[position]]
+                    if (datum.dynamicData) {
+                      const ci = datum.CI[bar.key]
+                      if (!ci) return
+                      const d = ci[position]
+                      return xScale(d)
+                    }
+                    const d = datum[config.confidenceKeys[position]]
                     return xScale(d)
                   })
                   // End Confidence Interval Variables

package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx

@@ -4,7 +4,7 @@ import { useBarChart } from '../../../hooks/useBarChart'
 import { BarStackHorizontal } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
-import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { getColorContrast, getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 // types
@@ -30,7 +30,7 @@ const BarChartStackedHorizontal = () => {
   } = useContext<ChartContext>(ConfigContext)
 
   // prettier-ignore
-  const { barBorderWidth, displayNumbersOnBar, fontSize, getAdditionalColumn, hoveredBar, isHorizontal, isLabelBelowBar, onMouseLeaveBar, onMouseOverBar, updateBars, barStackedSeriesKeys } = useBarChart()
+  const { barBorderWidth, displayNumbersOnBar, getAdditionalColumn, hoveredBar, isHorizontal, isLabelBelowBar, onMouseLeaveBar, onMouseOverBar, updateBars, barStackedSeriesKeys } = useBarChart()
 
   const { orientation, visualizationSubType } = config
   return (
@@ -59,7 +59,13 @@ const BarChartStackedHorizontal = () => {
                   seriesHighlight.length === 0 ||
                   seriesHighlight.indexOf(bar.key) !== -1
                 config.barHeight = Number(config.barHeight)
-                const labelColor = getContrastColor('#000', colorScale(config.runtime.seriesLabels[bar.key]))
+                let barColor = colorScale(config.runtime.seriesLabels[bar.key])
+                let labelColor = getContrastColor('#000', barColor)
+                let constrast = getColorContrast('#000', barColor)
+                const contrastLevel = 7
+                if (constrast < contrastLevel) {
+                  labelColor = '#fff'
+                }
                 // tooltips
                 const xAxisValue = formatNumber(data[bar.index][bar.key], 'left')
                 const yAxisValue =
@@ -69,7 +75,7 @@ const BarChartStackedHorizontal = () => {
                 const yAxisTooltip = config.runtime.yAxis.label
                   ? `${config.runtime.yAxis.label}: ${yAxisValue}`
                   : yAxisValue
-                const textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                const textWidth = getTextWidth(xAxisValue)
                 const additionalColTooltip = getAdditionalColumn(hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
                 const tooltip = `<ul>

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

@@ -233,12 +233,12 @@ export const BarChartVertical = () => {
                   const xPos = barX + (config.xAxis.type !== 'date-time' ? barWidth / 2 : 0)
 
                   const upperPos = yScale(
-                    datum.dynamicData && datum.CI[bar.key]
+                    datum.dynamicData && datum?.CI?.[bar.key]
                       ? datum.CI[bar.key].upper
                       : datum[config.confidenceKeys.upper]
                   )
                   const lowerPos = yScale(
-                    datum.dynamicData && datum.CI[bar.key]
+                    datum.dynamicData && datum?.CI?.[bar.key]
                       ? datum.CI[bar.key].lower
                       : datum[config.confidenceKeys.lower]
                   )

package/src/components/BoxPlot/BoxPlot.tsx

@@ -4,7 +4,7 @@ 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 { handleTooltip, createPlots } from './helpers/index'
 import _ from 'lodash'
 
 const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
@@ -13,13 +13,16 @@ const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
 
   const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
   const boxWidth = xScale.bandwidth()
+
+  const bodyStyles = getComputedStyle(document.body)
+  const defaultColor = bodyStyles.getPropertyValue('--cool-gray-90').trim()
   const constrainedWidth = Math.min(40, boxWidth)
   const color_0 = _.get(colorPalettesChart, [config.palette, 0], '#000')
-
+  const plots = createPlots(data, config)
   return (
     <ErrorBoundary component='BoxPlot'>
       <Group left={Number(config.yAxis.size)} className='boxplot' key={`boxplot-group`}>
-        {createPlots(data, config).map((d, i) => {
+        {plots.map((d, i) => {
           const offset = boxWidth - constrainedWidth
           const radius = 4
 
@@ -29,10 +32,6 @@ const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
               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 &&
@@ -42,19 +41,19 @@ const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
                   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) => {
+                      d.columnNonOutliers[item.dataKey].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' }}
+                            opacity={fillOpacity}
+                            fill={defaultColor}
+                            style={{ stroke: defaultColor }}
                             key={`boxplot-${i}--circle-${index}`}
                           />
                         )
@@ -64,53 +63,56 @@ const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
                         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)}
+                        min={Number(d.min[item.dataKey])}
+                        max={Number(d.max[item.dataKey])}
                         left={seriesScale(item.dataKey)}
-                        firstQuartile={firstQuartile}
-                        thirdQuartile={thirdQuartile}
-                        median={median}
+                        firstQuartile={d.q1[item.dataKey]}
+                        thirdQuartile={d.q3[item.dataKey]}
+                        median={d.median[item.dataKey]}
                         boxWidth={seriesScale.bandwidth()}
                         fill={colorScale(item.dataKey)}
-                        fillOpacity={fillOpacity}
-                        stroke={fillOpacity ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0.1)'}
+                        fillOpacity={1}
+                        stroke={defaultColor}
                         valueScale={yScale}
-                        outliers={boxplot.plotOutlierValues ? d.columnOutliers : []}
+                        outliers={boxplot.plotOutlierValues ? _.map(d.columnOutliers[item.dataKey], item => item) : []}
                         outlierProps={{
                           style: {
-                            fill: `${color_0}`,
-                            opacity: fillOpacity
+                            fill: defaultColor,
+                            opacity: fillOpacity,
+                            stroke: defaultColor
                           }
                         }}
                         medianProps={{
                           style: {
-                            stroke: 'black',
-                            opacity: fillOpacity
+                            opacity: fillOpacity,
+                            stroke: defaultColor
                           }
                         }}
                         boxProps={{
                           style: {
-                            stroke: 'black',
-                            strokeWidth: boxplot.borders === 'true' ? 1 : 0,
+                            stroke: defaultColor,
+                            strokeWidth: boxplot.borders === 'true' ? 1.5 : 0,
                             opacity: fillOpacity
                           }
                         }}
                         maxProps={{
                           style: {
-                            stroke: 'black',
-                            opacity: fillOpacity
+                            opacity: fillOpacity,
+                            stroke: defaultColor
                           }
                         }}
                         container
                         containerProps={{
                           'data-tooltip-html': handleTooltip(
                             boxplot,
-                            d,
+                            d.columnCategory,
                             item.dataKey,
-                            firstQuartile,
-                            thirdQuartile,
-                            median,
-                            iqr
+                            _.round(d.q1[item.dataKey], config.dataFormat.roundTo),
+                            _.round(d.q3[item.dataKey], config.dataFormat.roundTo),
+                            _.round(d.median[item.dataKey], config.dataFormat.roundTo),
+                            _.round(d.iqr[item.dataKey], config.dataFormat.roundTo),
+                            config.xAxis.label,
+                            defaultColor
                           ),
                           'data-tooltip-id': tooltip_id,
                           tabIndex: -1

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

@@ -1,32 +1,65 @@
-import { max, min, median, quantile } from 'd3-array'
 import _ from 'lodash'
+import * as d3 from 'd3-array'
 
 interface Plot {
   columnCategory: string
-  keyValues: { [key: string]: number[] }
+  columnOutliers: Record<string, number[]>
+  columnNonOutliers: Record<string, number[]>
+  keyValues: Record<string, number[]>
+  min: Record<string, number | null>
+  max: Record<string, number | null>
+  q1: Record<string, number>
+  q3: Record<string, number>
+  median: Record<string, number | null>
+  iqr: Record<string, number>
 }
-export const handleTooltip = (boxplot, d, key, q1, q3, median, iqr) => {
+export const handleTooltip = (boxplot, columnCategory, key, q1, q3, median, iqr, label, color) => {
   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}
-    `
+    <div class="p-2  text-red" style="max-width: 300px; word-wrap: break-word; opacity:0.7; background: rgba(255, 255, 255, 0.9)">
+      <div class="fw-bold" style="color: ${color};">
+        ${label ? `${label} : ${columnCategory}` : columnCategory}
+      </div>
+      <div class="" style="background: ${color}; height: 2px;"></div>
+        <strong>Key:</strong> ${key}<br/>
+        <strong>${boxplot.labels.q1}:</strong> ${q1}<br/>
+        <strong>${boxplot.labels.q3}:</strong> ${q3}<br/>
+        <strong>${boxplot.labels.iqr}:</strong> ${iqr}<br/>
+        <strong>${boxplot.labels.median}:</strong> ${median}
+    </div>
+  `
 }
 
-export const calculateBoxPlotStats = values => {
-  if (!values || !values.length) return {}
+export const calculateBoxPlotStats = (values: number[]) => {
+  if (!values || values.length === 0) return {}
+
+  // Sort the values
   const sortedValues = _.sortBy(values)
+
+  // Quartiles
+  const firstQuartile = d3.quantile(sortedValues, 0.25) ?? 0
+  const thirdQuartile = d3.quantile(sortedValues, 0.75) ?? 0
+
+  // Interquartile Range (IQR)
+  const iqr = thirdQuartile - firstQuartile
+
+  // Outlier Bounds
+  const lowerBound = firstQuartile - 1.5 * iqr
+  const upperBound = thirdQuartile + 1.5 * iqr
+
+  // Non-Outlier Values
+  const nonOutliers = sortedValues.filter(value => value >= lowerBound && value <= upperBound)
+
+  // Calculate Box Plot Stats
   return {
-    min: min(values),
-    max: max(values),
-    median: median(values),
-    firstQuartile: quantile(sortedValues, 0.25),
-    thirdQuartile: quantile(sortedValues, 0.75)
+    min: d3.min(nonOutliers), // Smallest non-outlier value
+    max: d3.max(nonOutliers), // Largest non-outlier value
+    median: d3.median(sortedValues), // Median of all values
+    firstQuartile,
+    thirdQuartile,
+    iqr
   }
 }
+
 const getValuesBySeriesKey = (group: string, config, data) => {
   const allSeriesKeys = config.series.map(item => item?.dataKey)
   const result = {}
@@ -38,17 +71,74 @@ const getValuesBySeriesKey = (group: string, config, data) => {
   return result
 }
 
+// Helper to calculate outliers based on IQR
+export const calculateOutliers = (values: number[], firstQuartile: number, thirdQuartile: number) => {
+  const iqr = thirdQuartile - firstQuartile
+  const lowerBound = firstQuartile - 1.5 * iqr
+  const upperBound = thirdQuartile + 1.5 * iqr
+  return values.filter(value => value < lowerBound || value > upperBound)
+}
+
+// Helper to calculate non-outliers based on IQR
+export 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
+
+  // Return values within the bounds
+  return values.filter(value => value >= lowerBound && value <= upperBound)
+}
+
+// Main function to create plots with additional outlier data
 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 => {
+      const keyValues = getValuesBySeriesKey(group, config, data)
+      const columnOutliers: Record<string, number[]> = {}
+      const columnNonOutliers: Record<string, number[]> = {}
+      const columnMedian = {}
+      const columnMin = {}
+      const columnMax = {}
+      const columnQ1 = {}
+      const columnQ3 = {}
+      const columnIqr = {}
+
+      // Calculate outliers and non-outliers for each series key
+      Object.keys(keyValues).forEach(key => {
+        const values = keyValues[key]
+
+        // Calculate box plot statistics
+        const { firstQuartile, thirdQuartile, min, max, median, iqr } = calculateBoxPlotStats(values)
+        // Calculate outliers and non-outliers
+        columnOutliers[key] = calculateOutliers(values, firstQuartile, thirdQuartile).map(Number)
+        columnNonOutliers[key] = calculateNonOutliers(values, firstQuartile, thirdQuartile).map(Number)
+        columnMedian[key] = median
+        columnMin[key] = min
+        columnMax[key] = max
+        columnQ1[key] = firstQuartile
+        columnQ3[key] = thirdQuartile
+        columnIqr[key] = iqr
+      })
+
+      // Add the plot object to the plots array
       plots.push({
         columnCategory: group,
-        keyValues: getValuesBySeriesKey(group, config, data)
+        keyValues,
+        columnOutliers,
+        columnNonOutliers,
+        min: columnMin,
+        max: columnMax,
+        q1: columnQ1,
+        q3: columnQ3,
+        median: columnMedian,
+        iqr: columnIqr
       })
     })
   }
+
   return plots
 }

package/src/components/DeviationBar.jsx

@@ -30,7 +30,6 @@ export default function DeviationBar({ height, xScale }) {
       : roundingStyle === 'finger'
       ? '15px'
       : '0px'
-  const fontSize = { small: 16, medium: 18, large: 20 }
   const isRounded = config.barStyle === 'rounded'
   const target = Number(config.xAxis.target)
   const seriesKey = config.series[0].dataKey
@@ -65,7 +64,7 @@ export default function DeviationBar({ height, xScale }) {
       const firstBarValue = data[0][seriesKey]
       const barPosition = firstBarValue < target ? 'left' : 'right'
       const label = `${config.xAxis.targetLabel} ${formatNumber(config.xAxis.target || 0, 'left')}`
-      const labelWidth = getTextWidth(label, `bold ${fontSize[config.fontSize]}px sans-serif`)
+      const labelWidth = getTextWidth(label)
       let labelY = config.isLollipopChart ? lollipopBarHeight / 2 : Number(config.barHeight) / 2
       let paddingX = 0
       let labelX = 0
@@ -165,10 +164,7 @@ export default function DeviationBar({ height, xScale }) {
           config.heights.horizontal = totalheight
 
           // text,labels postiions
-          const textWidth = getTextWidth(
-            formatNumber(barValue, 'left'),
-            `normal ${fontSize[config.fontSize]}px sans-serif`
-          )
+          const textWidth = getTextWidth(formatNumber(barValue, 'left'))
           const textFits = textWidth < barWidth - 6
           const textX = barBaseX
           const textY = barY + barHeight / 2