@cdc/chart 4.26.7 → 4.26.10

package/src/hooks/useTooltip.tsx

@@ -5,6 +5,7 @@ import ConfigContext from '../ConfigContext'
 import { type ChartContext } from '../types/ChartContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
+import { getSeriesValueLabel } from '@cdc/core/helpers/getSeriesName'
 // Third-party library imports
 import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
@@ -16,18 +17,50 @@ import uniq from 'lodash/uniq'
 import { getHorizontalBarHeights } from '../components/BarChart/helpers/getBarHeights'
 import {
   findColumnConfigByName,
+  getAdditionalColumnFormattingParams,
   getSeriesColumnFormattingParams,
   getSeriesOwnedColumnNames
 } from '../helpers/seriesColumnSettings'
 import {
   buildTooltipRow,
   getTooltipSeriesMarker,
+  shouldShowTooltipSeriesRow,
   tooltipHasMarkerColumn,
   type TooltipRow
 } from '../helpers/tooltipHelpers'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
 
+type TooltipListItemProps = {
+  row: TooltipRow
+  index: number
+  useMarkerColumn?: boolean
+}
+
+type TooltipBodyProps = Omit<TooltipListItemProps, 'useMarkerColumn'> & {
+  activeLabel: string
+  useMarkerColumn: boolean
+}
+
+const renderTooltipMarker = (
+  shouldRenderMarkerSlot: boolean,
+  markerColor: TooltipRow['markerColor'],
+  markerShape: NonNullable<TooltipRow['markerShape']>
+) => {
+  if (!shouldRenderMarkerSlot) return null
+
+  return (
+    <span className='tooltip-marker-slot' aria-hidden='true'>
+      {markerColor ? (
+        <span
+          className={`tooltip-marker-swatch tooltip-marker-swatch--${markerShape}`}
+          style={{ backgroundColor: markerColor }}
+        />
+      ) : null}
+    </span>
+  )
+}
+
 export const useTooltip = props => {
   // Track the last X-axis value to prevent duplicate analytics events
   const lastAnalyticsXValue = useRef<string | number | null>(null)
@@ -41,7 +74,8 @@ export const useTooltip = props => {
     formatTooltipsDate,
     parseDate,
     setSharedFilter,
-    isDraggingAnnotation
+    isDraggingAnnotation,
+    seriesHighlight
   } = useContext<ChartContext>(ConfigContext)
   const { xScale, yScale, seriesScale, showTooltip, hideTooltip, interactionLabel = '' } = props
   const { xAxis, visualizationType, orientation, yAxis, runtime } = config
@@ -153,11 +187,7 @@ export const useTooltip = props => {
       if (seriesOwnedColumnNames.includes(columnName)) continue
 
       // Extra columns own their affixes; explicit blanks prevent fallback to the value-axis units.
-      const formattingParams = {
-        addColPrefix: '',
-        addColSuffix: '',
-        ...getSeriesColumnFormattingParams(column)
-      }
+      const formattingParams = getAdditionalColumnFormattingParams(column)
 
       const pieColumnData = additionalChartData?.data?.[column.name]
       const columnData =
@@ -268,29 +298,36 @@ export const useTooltip = props => {
               const seriesObjWithName = config.runtime.series.find(
                 series => series.dataKey === seriesKey && series.name !== undefined
               )
+              const showTooltipSeriesRow = shouldShowTooltipSeriesRow({
+                legendBehavior: config.legend?.behavior,
+                seriesHighlight,
+                seriesKey
+              })
 
               if (
                 (value === null || value === undefined || value === '' || formattedValue === 'N/A') &&
                 config.general.hideNullValue
               ) {
                 return []
-              } else if (seriesObjWithName && seriesObjWithName.name === '') {
+              } else if (config.xAxis?.dataKey == seriesKey) {
                 return [
                   createTooltipRow({
-                    key: '',
+                    key: seriesKey,
                     value: formattedValue,
                     axisPosition: getAxisPosition(seriesKey),
-                    kind: 'series',
-                    seriesKey
+                    kind: 'heading'
                   })
                 ]
-              } else if (config.xAxis?.dataKey == seriesKey) {
+              } else if (!showTooltipSeriesRow) {
+                return []
+              } else if (seriesObjWithName && seriesObjWithName.name === '') {
                 return [
                   createTooltipRow({
-                    key: seriesKey,
+                    key: '',
                     value: formattedValue,
                     axisPosition: getAxisPosition(seriesKey),
-                    kind: 'heading'
+                    kind: 'series',
+                    seriesKey
                   })
                 ]
               } else {
@@ -758,37 +795,23 @@ export const useTooltip = props => {
     }
   }
 
-  /**
-   * find the original series and use the name property if available
-   * otherwise default back to the original column name.
-   * @param {String} input - original columnName
-   * @returns user defined series name.
-   */
-  const getSeriesNameFromLabel = originalColumnName => {
-    let series = config.runtime.series.filter(s => s.dataKey === originalColumnName)
-    if (series[0] && series[0].name !== undefined) return series[0]?.name
-    const columnConfig = findColumnConfigByName(config.columns || {}, originalColumnName)?.columnConfig
-    if (columnConfig?.label !== undefined) return columnConfig.label
-    return originalColumnName
-  }
+  const renderForestPlotTooltipItem = (row: TooltipRow, activeLabel: string) => {
+    if (row.key === config.xAxis.dataKey)
+      return (
+        <li className='tooltip-heading'>{`${capitalize(config.xAxis.dataKey ? `${config.xAxis.dataKey}: ` : '')} ${
+          isDateScale(yAxis) ? formatDate(parseDate(row.key, false)) : row.value
+        }`}</li>
+      )
 
-  const TooltipListItem = ({ row, index, useMarkerColumn = false }) => {
-    const { key, value, axisPosition, kind, markerColor, markerShape = 'circle' } = row
+    return <li className='tooltip-body'>{`${activeLabel}: ${formatNumber(row.value, 'left')}`}</li>
+  }
 
-    if (visualizationType === 'Forest Plot') {
-      if (key === config.xAxis.dataKey)
-        return (
-          <li className='tooltip-heading'>{`${capitalize(config.xAxis.dataKey ? `${config.xAxis.dataKey}: ` : '')} ${
-            isDateScale(yAxis) ? formatDate(parseDate(key, false)) : value
-          }`}</li>
-        )
-      return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${formatNumber(value, 'left')}`}</li>
-    }
+  const renderTooltipHeading = (row: TooltipRow) => {
+    const { key, value } = row
     const formattedDate = config.tooltips.dateDisplayFormat
       ? formatTooltipsDate(parseDate(value, false))
       : formatDate(parseDate(value, false))
 
-    // TOOLTIP HEADING
     if (visualizationType === 'Bar' && orientation === 'horizontal' && key === config.xAxis.dataKey)
       return (
         <li className='tooltip-heading'>{`${capitalize(
@@ -805,20 +828,25 @@ export const useTooltip = props => {
         )} ${isDateScale(xAxis) ? formattedDate : value}`}</li>
       )
 
-    // TOOLTIP BODY
-    // handle suppressed tooltip items
-    const shouldCheckSuppression = config.visualizationSubType !== 'stacked'
-    let suppressionEntry
-    if (shouldCheckSuppression && config.preliminaryData) {
-      suppressionEntry = config.preliminaryData.find(
-        pd =>
-          pd.label &&
-          pd.type === 'suppression' &&
-          pd.displayTooltip &&
-          value === pd.value &&
-          (!pd.column || key === pd.column)
-      )
-    }
+    return null
+  }
+
+  const getSuppressionEntry = (row: TooltipRow) => {
+    if (config.visualizationSubType === 'stacked' || !config.preliminaryData) return undefined
+
+    return config.preliminaryData.find(
+      pd =>
+        pd.label &&
+        pd.type === 'suppression' &&
+        pd.displayTooltip &&
+        row.value === pd.value &&
+        (!pd.column || row.key === pd.column)
+    )
+  }
+
+  const renderTooltipBody = ({ row, index, useMarkerColumn, activeLabel }: TooltipBodyProps) => {
+    const { value, kind, markerColor, markerShape = 'circle' } = row
+    const suppressionEntry = getSuppressionEntry(row)
 
     // Remove suppressed items entirely if not showing symbols
     if (suppressionEntry && !config.general.showSuppressedSymbol) {
@@ -830,22 +858,12 @@ export const useTooltip = props => {
     let newValue = label || value
     const style = displayGray ? { color: '#8b8b8a' } : {}
 
-    if (index == 1 && config.yAxis?.inlineLabel) {
+    if (index === 1 && config.yAxis?.inlineLabel) {
       newValue = `${config.dataFormat.prefix}${newValue}${config.dataFormat.suffix}`
     }
-    const activeLabel = getSeriesNameFromLabel(key)
     const displayText = activeLabel ? `${activeLabel}: ${newValue}` : newValue
     const shouldRenderMarkerSlot = useMarkerColumn && kind !== 'heading'
-    const markerSlot = shouldRenderMarkerSlot ? (
-      <span className='tooltip-marker-slot' aria-hidden='true'>
-        {markerColor ? (
-          <span
-            className={`tooltip-marker-swatch tooltip-marker-swatch--${markerShape}`}
-            style={{ backgroundColor: markerColor }}
-          />
-        ) : null}
-      </span>
-    ) : null
+    const markerSlot = renderTooltipMarker(shouldRenderMarkerSlot, markerColor, markerShape)
     const content = displayText !== undefined ? parse(String(displayText)) : displayText
 
     return (
@@ -861,6 +879,19 @@ export const useTooltip = props => {
     )
   }
 
+  const TooltipListItem = ({ row, index, useMarkerColumn = false }: TooltipListItemProps) => {
+    const activeLabel = row.kind === 'series' ? getSeriesValueLabel(row.key, config) : row.key
+
+    if (visualizationType === 'Forest Plot') {
+      return renderForestPlotTooltipItem(row, activeLabel)
+    }
+
+    const heading = renderTooltipHeading(row)
+    if (heading) return heading
+
+    return renderTooltipBody({ row, index, useMarkerColumn, activeLabel })
+  }
+
   return {
     getIncludedTooltipSeries,
     getXValueFromCoordinate,

package/src/scss/main.scss

@@ -49,11 +49,61 @@
     margin-bottom: 0 !important;
   }
 
+  .chart-required-fields-alerts {
+    display: grid;
+    gap: 0.75rem;
+
+    > .alert {
+      justify-content: flex-start;
+      margin: 0;
+      width: 100%;
+
+      .alert-message,
+      > .d-flex {
+        align-items: center;
+        display: flex;
+      }
+    }
+
+    &__link {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      cursor: pointer;
+      font: inherit;
+      font-weight: 700;
+      padding: 0;
+      text-decoration: underline;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration-thickness: 2px;
+      }
+    }
+  }
+
+  .y-axis-top-title-row {
+    display: flex;
+    gap: 1rem;
+    margin: 0 0 0.5rem;
+    width: 100%;
+  }
+
   .y-axis-top-title {
     font-family: var(--fonts-nunito, var(--app-font-secondary));
     font-weight: 700;
     line-height: 1.4;
-    margin: 0 0 0.5rem;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .y-axis-top-title-row--split .y-axis-top-title {
+    flex: 1 1 0;
+  }
+
+  .y-axis-top-title--right {
+    margin-left: auto;
+    text-align: right;
   }
 
   .legend-top {
@@ -203,6 +253,24 @@
         outline-offset: 5px;
         border-radius: 1px;
       }
+
+      &--interactive {
+        border-radius: 1px;
+        isolation: isolate;
+        position: relative;
+
+        &:hover,
+        &:focus-visible {
+          &::before {
+            background-color: var(--colors-cyan-10, #eff9fa);
+            border-radius: 6px;
+            content: '';
+            inset: -6px;
+            position: absolute;
+            z-index: -1;
+          }
+        }
+      }
     }
 
     &__outer {
@@ -255,7 +323,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    font-size: 1em;
+    font-size: var(--legend-item-font-size);
     vertical-align: middle;
 
     & > span {
@@ -268,6 +336,10 @@
       max-height: 1px;
     }
 
+    & > p {
+      font-size: var(--legend-item-font-size);
+    }
+
     & > span[class*='Asterisk'] {
       transform: scale(1.8);
       margin-top: 15px;

package/src/store/chart.reducer.ts

@@ -1,7 +1,8 @@
 import ChartActions from './chart.actions'
 import defaults from '../data/initial-state.js'
-import { ChartConfig, type ViewportSize } from '../types/ChartConfig'
+import { ChartConfig } from '../types/ChartConfig'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
+import type { ViewPort } from '@cdc/core/types/ViewPort'
 
 type ChartState = {
   isLoading: boolean
@@ -11,8 +12,8 @@ type ChartState = {
   excludedData: object[]
   filteredData: object[]
   seriesHighlight: string[]
-  currentViewport: ViewportSize
-  vizViewport: ViewportSize
+  currentViewport: ViewPort
+  vizViewport: ViewPort
   dimensions: DimensionsType
   container: HTMLElement | null
   coveLoadedEventRan: boolean