@cdc/chart 4.24.10 → 4.24.12-2

package/src/hooks/useTooltip.tsx

@@ -7,6 +7,7 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 // Third-party library imports
 import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
+import _ from 'lodash'
 
 export const useTooltip = props => {
   const {
@@ -56,11 +57,9 @@ export const useTooltip = props => {
   const getFormattedValue = (seriesKey, value, config, getAxisPosition) => {
     // handle case where data is missing
     const showMissingDataValue = config.general.showMissingDataLabel && (!value || value === 'null')
-    let formattedValue = seriesKey === config.xAxis.dataKey ? value : formatNumber(value, getAxisPosition(seriesKey))
+    const formattedValue = seriesKey === config.xAxis.dataKey ? value : formatNumber(value, getAxisPosition(seriesKey))
 
-    formattedValue = showMissingDataValue ? 'N/A' : formattedValue
-
-    return formattedValue
+    return showMissingDataValue ? 'N/A' : formattedValue
   }
 
   const getTooltipInformation = (tooltipDataArray, eventSvgCoords) => {
@@ -101,37 +100,9 @@ export const useTooltip = props => {
 
     const closestXScaleValue = getXValueFromCoordinate(x - Number(config.yAxis.size || 0))
 
-    const includedSeries =
-      visualizationType !== 'Pie'
-        ? config.runtime.series.filter(series => series.tooltip === true).map(item => item.dataKey)
-        : config.runtime.series.map(item => item.dataKey)
-    includedSeries.push(config.xAxis.dataKey)
-    if (config.visualizationType === 'Forecasting') {
-      config.runtime.series.map(s => {
-        s.confidenceIntervals.map(c => {
-          if (c.showInTooltip) {
-            includedSeries.push(c.high)
-            includedSeries.push(c.low)
-          }
-        })
-      })
-    }
-    function getColumnNames(columns) {
-      let names = []
-      for (let key in columns) {
-        if (columns.hasOwnProperty(key)) {
-          names.push(columns[key].name)
-        }
-      }
-      return names
-    }
-    includedSeries.push(...getColumnNames(config.columns))
-    includedSeries.push(...getColumnNames(config.columns))
-
-    const yScaleValues = getYScaleValues(closestXScaleValue, includedSeries)
     const xScaleValues = data.filter(d => d[xAxis.dataKey] === getClosestYValue(y))
 
-    const resolvedScaleValues = orientation === 'vertical' ? yScaleValues : xScaleValues
+    const resolvedScaleValues = orientation === 'vertical' ? getYScaleValues(closestXScaleValue) : xScaleValues
 
     const getAxisPosition = seriesKey => {
       const seriesObj = config.runtime.series.filter(s => s.dataKey === seriesKey)[0]
@@ -187,12 +158,12 @@ export const useTooltip = props => {
       if (visualizationType !== 'Pie' && visualizationType !== 'Forest Plot' && !config.tooltips.singleSeries) {
         tooltipItems.push(
           ...getIncludedTooltipSeries()
-            ?.filter(
-              seriesKey =>
-                config.runtime.series?.find(item => item.dataKey === seriesKey && item?.tooltip) ||
-                config.xAxis?.dataKey == seriesKey ||
-                visualizationType === 'Forecasting'
-            )
+            ?.filter(seriesKey => {
+              const series = config.runtime.series?.find(
+                s => s.dataKey === seriesKey && s?.tooltip && !s.dynamicCategory
+              )
+              return series || config.xAxis?.dataKey == seriesKey || visualizationType === 'Forecasting'
+            })
             ?.flatMap(seriesKey => {
               const value = resolvedScaleValues[0]?.[seriesKey]
               const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
@@ -206,6 +177,17 @@ export const useTooltip = props => {
               }
             })
         )
+
+        config.runtime.series?.forEach(series => {
+          if (series?.dynamicCategory) {
+            const seriesKey = series.dataKey
+            const resolvedScaleValue = resolvedScaleValues.find(v => v[series.dynamicCategory] === seriesKey)
+            if (!resolvedScaleValue) return
+            const value = resolvedScaleValue[series.originalDataKey]
+            const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
+            tooltipItems.push([seriesKey, formattedValue, getAxisPosition(seriesKey)])
+          }
+        })
       }
 
       // handle tooltip for single hovered series
@@ -376,25 +358,48 @@ export const useTooltip = props => {
   /**
    * Provides an array of objects with the closest y series data items
    * @param {String} closestXScaleValue
-   * @param {Array} includedSeries
    * @returns an array of objects with the closest y series data items
    */
-  const getYScaleValues = (closestXScaleValue, includedSeries) => {
-    try {
-      let dataToSearch
+  const getYScaleValues = closestXScaleValue => {
+    const runtimeSeries = config.runtime.series.filter(
+      series => visualizationType === 'Pie' || (series.tooltip === true && !series.dynamicCategory)
+    )
+    const includedSeries = runtimeSeries.map(item => item.dataKey)
+    includedSeries.push(config.xAxis.dataKey)
+    // get dynamic category series
+    const dynamicDataCategories = _.uniq(
+      config.runtime.series.flatMap(series => {
+        if (series.dynamicCategory) {
+          return [series.dynamicCategory, series.originalDataKey]
+        }
+      })
+    )
+    includedSeries.push(...dynamicDataCategories)
 
-      if (xAxis.type === 'categorical') {
-        dataToSearch = data.filter(d => d[xAxis.dataKey] === closestXScaleValue)
-      } else {
-        dataToSearch = data.filter(d => d[xAxis.dataKey] === closestXScaleValue)
-      }
+    if (config.visualizationType === 'Forecasting') {
+      config.runtime.series.map(s => {
+        s.confidenceIntervals.map(c => {
+          if (c.showInTooltip) {
+            includedSeries.push(c.high)
+            includedSeries.push(c.low)
+          }
+        })
+      })
+    }
+
+    const colNames = Object.values(config.columns).map(column => column.name)
+    // @ Murad why are we adding them twice?
+    includedSeries.push(...colNames, ...colNames)
+
+    try {
+      const dataToSearch = data.filter(d => d[xAxis.dataKey] === closestXScaleValue)
       // Return an empty array if no matching data is found.
       if (!dataToSearch || dataToSearch.length === 0) {
         return []
       }
 
       const yScaleValues = dataToSearch.map(object => {
-        return Object.fromEntries(Object.entries(object).filter(([key, value]) => includedSeries.includes(key)))
+        return _.pick(object, includedSeries)
       })
       return yScaleValues
     } catch (error) {
@@ -548,9 +553,13 @@ export const useTooltip = props => {
             (!pd.column || key === pd.column)
         )) ||
       {}
-    const newValue = label || value
+    let newValue = label || value
     const style = displayGray ? { color: '#8b8b8a' } : {}
 
+    if (index == 1 && config.dataFormat.onlyShowTopPrefixSuffix) {
+      newValue = `${config.dataFormat.prefix}${newValue}${config.dataFormat.suffix}`
+    }
+
     return <li style={style} className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${newValue}`}</li>
   }
 

package/src/scss/DataTable.scss

@@ -1,5 +1,10 @@
 .data-table-container {
   margin: 20px 0 0;
+
+  &.brush-active {
+    margin: 80px 0 0;
+  }
+
   width: 100%;
   &.download-link-above {
     margin: 0;

package/src/scss/main.scss

@@ -120,23 +120,6 @@
     }
   }
 
-  .btn {
-    background: #005eaa;
-    color: #fff !important;
-    border: 0;
-    padding: 0.4em 0.8em;
-    display: block;
-    border-radius: 5px;
-    transition: 0.1s all;
-    cursor: pointer;
-
-    &[disabled] {
-      opacity: 0.5;
-      z-index: -1;
-      position: relative;
-    }
-  }
-
   .warning-icon {
     position: relative;
     top: 2px;
@@ -157,7 +140,7 @@
   .subtext--responsive-ticks,
   .section-subtext {
     &--brush-active {
-      margin-top: 2.5em;
+      margin-top: 3em !important;
     }
   }
 
@@ -176,7 +159,7 @@
     border: 1px solid var(--lightGray);
     position: relative;
 
-    &.no-border {
+    &.border-0 {
       border: 1px solid transparent;
       padding: 0;
     }
@@ -213,7 +196,6 @@
 
     .legend-item {
       text-align: left;
-      align-items: flex-start !important;
       user-select: none;
       white-space: nowrap;
 
@@ -279,6 +261,10 @@
     }
   }
 
+  .legend-container__inner.flex-column-reverse div.legend-item:last-child {
+    margin-bottom: 0.2rem !important;
+  }
+
   .dynamic-legend-list {
     // overide traditional legend item that uses !important
     .legend-item {

package/src/types/ChartConfig.ts

@@ -8,6 +8,8 @@ import { Table } from '@cdc/core/types/Table'
 import { BoxPlot } from '@cdc/core/types/BoxPlot'
 import { General } from '@cdc/core/types/General'
 import { type Link } from './../components/Sankey/types'
+import { type DataDescription } from '@cdc/core/types/DataDescription'
+import { type Legend as CoreLegend } from '@cdc/core/types/Legend'
 import { ConfidenceInterval } from '@cdc/core/types/ConfidenceInterval'
 import { Region } from '@cdc/core/types/Region'
 import { VizFilter } from '@cdc/core/types/VizFilter'
@@ -75,27 +77,12 @@ type Exclusions = {
   dateEnd: string
 }
 
-export type Legend = {
+export type Legend = CoreLegend & {
   seriesHighlight: string[]
-  additionalCategories: string[]
-  // general legend onClick behavior
-  behavior: 'highlight' | 'isolate' | string
-  axisAlign: boolean
-  colorCode: string
-  description: string
-  // show or hide the legend
-  hide: boolean
-  highlightOnHover: boolean
-  label: string
-  position: 'left' | 'bottom' | 'top' | 'right'
-  reverseLabelOrder: boolean
-  singleRow: boolean
-  type: string
-  verticalSorted: boolean
   hideSuppressionLink: boolean
   style: 'circles' | 'boxes' | 'gradient' | 'lines'
   subStyle: 'linear blocks' | 'smooth'
-  hideSuppressedLabels: boolean
+
   tickRotation: string
   hideBorder: {
     side: boolean
@@ -136,7 +123,7 @@ export type AllChartsConfig = {
   data: Object[]
   dataUrl: string
   dataCutoff: number
-  dataDescription: string
+  dataDescription: Partial<DataDescription>
   dataFormat: DataFormat
   dataKey: string
   description: string
@@ -166,7 +153,7 @@ export type AllChartsConfig = {
   lollipopColorStyle: 'regular' | 'two-tone'
   lollipopShape: string
   lollipopSize: 'small' | 'medium' | 'large'
-  newViz: Object
+  newViz: boolean
   orientation: ChartOrientation
   palette: string
   pieType?: string

package/src/types/ChartContext.ts

@@ -1,6 +1,5 @@
 import { type ChartConfig } from './ChartConfig'
 import { PickD3Scale } from '@visx/scale'
-import { type SharedFilter } from '@cdc/dashboard/src/types/SharedFilter'
 import { type Annotation } from '@cdc/core/types/Annotation'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { type DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
@@ -70,7 +69,11 @@ export type ChartContext =
       formatTooltipsDate: Function
       formatNumber?: Function
       handleLineType?: Function
+      // 508 compliance: tabbing handler for charts
+      handleChartTabbing?: (chartConfig: ChartConfig, legendId: string) => string
       isNumber?: boolean
+      // 508 compliance: tabbing id for legends
+      legendId: string
       // url param added to allow various console logs and chart helpers
       isDebug?: boolean
       parseDate?: Function

package/src/types/ForestPlot.ts

@@ -50,4 +50,12 @@ export type ForestPlotConfigSettings = {
   // labels under chart
   leftLabel: string
   rightLabel: string
+  /** rightWidthOffsetMobile */
+  rightWidthOffsetMobile: number
+  /** leftWidthOffsetMobile */
+  leftWidthOffsetMobile: number
+  regression: {
+    showDiamond: boolean
+    description: boolean
+  }
 }

package/src/components/BoxPlot/BoxPlot.jsx

@@ -1,111 +0,0 @@
-import React, { useContext, useEffect } 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'
-
-const CoveBoxPlot = ({ xScale, yScale }) => {
-  const { config, setConfig } = useContext(ConfigContext)
-  const { boxplot } = config
-
-  useEffect(() => {
-    if (config.legend.hide === false) {
-      setConfig({
-        ...config,
-        legend: {
-          ...config.legend,
-          hide: true
-        }
-      })
-    }
-  }, []) // eslint-disable-line
-
-  // tooltips
-  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
-  const handleTooltip = d => {
-    return `
-      <strong>${d.columnCategory}</strong></br>
-      ${boxplot.labels.q1}: ${d.columnFirstQuartile}<br/>
-      ${boxplot.labels.q3}: ${d.columnThirdQuartile}<br/>
-      ${boxplot.labels.iqr}: ${d.columnIqr}<br/>
-      ${boxplot.labels.median}: ${d.columnMedian}
-    `
-  }
-
-  //  accessors & constants
-  const max = d => Number(d.columnMax)
-  const min = d => Number(d.columnMin)
-  const median = d => Number(d.columnMedian)
-  const thirdQuartile = d => Number(d.columnThirdQuartile)
-  const firstQuartile = d => Number(d.columnFirstQuartile)
-  const fillOpacity = 0.5
-  const boxWidth = xScale.bandwidth()
-  const constrainedWidth = Math.min(40, boxWidth)
-  const color_0 = colorPalettesChart[config?.palette][0] ? colorPalettesChart[config?.palette][0] : '#000'
-
-  return (
-    <ErrorBoundary component='BoxPlot'>
-      <Group className='boxplot' key={`boxplot-group`}>
-        {boxplot.plots.map((d, i) => {
-          const offset = boxWidth - constrainedWidth
-          const radius = 4
-          return (
-            <Group key={`boxplotplot-${i}`}>
-              {boxplot.plotNonOutlierValues &&
-                d.nonOutlierValues.map((value, index) => {
-                  return <circle cx={xScale(d.columnCategory) + Number(config.yAxis.size) + boxWidth / 2} cy={yScale(value)} r={radius} fill={'#ccc'} style={{ opacity: 1, fillOpacity: 1, stroke: 'black' }} key={`boxplot-${i}--circle-${index}`} />
-                })}
-              <BoxPlot
-                data-left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
-                key={`box-plot-${i}`}
-                min={min(d)}
-                max={max(d)}
-                left={Number(xScale(d.columnCategory)) + Number(config.yAxis.size) + offset / 2 + 0.5}
-                firstQuartile={firstQuartile(d)}
-                thirdQuartile={thirdQuartile(d)}
-                median={median(d)}
-                boxWidth={constrainedWidth}
-                fill={color_0}
-                fillOpacity={fillOpacity}
-                stroke='black'
-                valueScale={yScale}
-                outliers={boxplot.plotOutlierValues ? d.columnOutliers : []}
-                outlierProps={{
-                  style: {
-                    fill: `${color_0}`,
-                    opacity: 1
-                  }
-                }}
-                medianProps={{
-                  style: {
-                    stroke: 'black'
-                  }
-                }}
-                boxProps={{
-                  style: {
-                    stroke: 'black',
-                    strokeWidth: boxplot.borders === 'true' ? 1 : 0
-                  }
-                }}
-                maxProps={{
-                  style: {
-                    stroke: 'black'
-                  }
-                }}
-                container
-                containerProps={{
-                  'data-tooltip-html': handleTooltip(d),
-                  'data-tooltip-id': tooltip_id,
-                  tabIndex: -1
-                }}
-              />
-            </Group>
-          )
-        })}
-      </Group>
-    </ErrorBoundary>
-  )
-}
-
-export default CoveBoxPlot

package/src/hooks/useLegendClasses.ts

@@ -1,72 +0,0 @@
-type ConfigType = {
-  legend: {
-    position: 'left' | 'bottom' | 'top' | 'right'
-    singleRow?: boolean
-    reverseLabelOrder?: boolean
-    verticalSorted?: boolean
-    hideBorder: {
-      side?: boolean
-      topBottom?: boolean
-    }
-  }
-}
-
-const useLegendClasses = (config: ConfigType) => {
-  const containerClasses = ['legend-container']
-  const innerClasses = ['legend-container__inner']
-
-  // Handle legend positioning
-  switch (config.legend.position) {
-    case 'left':
-      containerClasses.push('left')
-      break
-    case 'right':
-      containerClasses.push('right')
-      break
-    case 'bottom':
-      containerClasses.push('bottom')
-      innerClasses.push('double-column', 'bottom')
-      break
-    case 'top':
-      containerClasses.push('top')
-      innerClasses.push('double-column', 'top')
-      break
-  }
-
-  // Handle single row configuration for 'bottom' and 'top' positions
-  if (['bottom', 'top'].includes(config.legend.position) && config.legend.singleRow) {
-    innerClasses.push('single-row')
-  }
-
-  // Reverse label order
-  if (config.legend.reverseLabelOrder) {
-    innerClasses.push('d-flex', 'flex-column-reverse')
-  }
-
-  // Vertical sorting for 'bottom' and 'top' positions
-  if (['bottom', 'top'].includes(config.legend.position) && config.legend.verticalSorted) {
-    innerClasses.push('vertical-sorted')
-  }
-
-  // Configure border classes
-  if (
-    config.legend.hideBorder.side &&
-    (['right', 'left'].includes(config.legend.position) || !config.legend.position)
-  ) {
-    containerClasses.push('no-border')
-  }
-
-  if (config.legend.hideBorder.topBottom && ['top', 'bottom'].includes(config.legend.position)) {
-    containerClasses.push('no-border')
-  }
-
-  if (config.legend.hideBorder.topBottom && ['top'].includes(config.legend.position)) {
-    containerClasses.push('p-0')
-  }
-
-  return {
-    containerClasses,
-    innerClasses
-  }
-}
-export default useLegendClasses