@cdc/chart 4.26.3 → 4.26.5

package/src/hooks/useTooltip.tsx

@@ -8,13 +8,21 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 // Third-party library imports
 import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
-import _, { get } from 'lodash'
+import _ from 'lodash'
 import { getHorizontalBarHeights } from '../components/BarChart/helpers/getBarHeights'
 import {
   findColumnConfigByName,
   getSeriesColumnFormattingParams,
   getSeriesOwnedColumnNames
 } from '../helpers/seriesColumnSettings'
+import {
+  buildTooltipRow,
+  getTooltipSeriesMarker,
+  tooltipHasMarkerColumn,
+  type TooltipRow
+} from '../helpers/tooltipHelpers'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
 
 export const useTooltip = props => {
   // Track the last X-axis value to prevent duplicate analytics events
@@ -22,6 +30,7 @@ export const useTooltip = props => {
   const {
     tableData: data,
     config,
+    colorScale,
     formatNumber,
     capitalize,
     formatDate,
@@ -33,7 +42,6 @@ export const useTooltip = props => {
   const { xScale, yScale, seriesScale, showTooltip, hideTooltip, interactionLabel = '' } = props
   const { xAxis, visualizationType, orientation, yAxis, runtime } = config
   const seriesOwnedColumnNames = getSeriesOwnedColumnNames(config.series)
-
   // Track the latest xScale in a ref to prevent stale closures
   const xScaleRef = useRef(xScale)
 
@@ -42,7 +50,7 @@ export const useTooltip = props => {
     xScaleRef.current = xScale
   }, [xScale])
 
-  const Y_AXIS_SIZE = Number(config.yAxis.size || 0)
+  const Y_AXIS_SIZE = Number(props.yAxisWidth || 0)
 
   // function handles only Single series hovered data tooltips
   const findDataKeyByThreshold = (mouseY, datapoint) => {
@@ -85,11 +93,38 @@ export const useTooltip = props => {
     const formattedValue =
       seriesKey === config.xAxis.dataKey
         ? value
-        : formatColNumber(value, getAxisPosition(seriesKey), true, config, formattingParams)
+        : formatColNumber(value, getAxisPosition(seriesKey), false, config, formattingParams)
 
     return showMissingDataValue ? 'N/A' : formattedValue
   }
 
+  const createTooltipRow = ({
+    key,
+    value,
+    kind,
+    axisPosition,
+    seriesKey
+  }: {
+    key: string
+    value: string | number
+    kind: TooltipRow['kind']
+    axisPosition?: string
+    seriesKey?: string
+  }): TooltipRow =>
+    (() => {
+      const marker = kind === 'series' ? getTooltipSeriesMarker(config, colorScale, seriesKey || key) : null
+
+      return buildTooltipRow({
+        key,
+        value,
+        axisPosition,
+        kind,
+        seriesKey,
+        markerColor: marker?.markerColor ?? null,
+        markerShape: marker?.markerShape
+      })
+    })()
+
   /**
    * Handles the mouse over event for the tooltip.
    * @function handleTooltipMouseOver
@@ -108,7 +143,7 @@ export const useTooltip = props => {
     const singleSeriesValue = getYValueFromCoordinate(y, resolvedScaleValues)
 
     const columnsWithTooltips = []
-    const tooltipItems = [] as any[][]
+    const tooltipItems: TooltipRow[] = []
     for (const [colKey, column] of Object.entries(config.columns)) {
       const columnName = column.name || colKey
       if (seriesOwnedColumnNames.includes(columnName)) continue
@@ -129,16 +164,22 @@ export const useTooltip = props => {
           : resolvedScaleValues[0]?.[colKey]
       const closestValue = config.visualizationType === 'Pie' ? pieColumnData : columnData
 
-      const formattedValue = formatColNumber(closestValue, 'left', true, config, formattingParams)
+      const formattedValue = formatColNumber(closestValue, 'left', false, config, formattingParams)
 
       if (column.tooltips) {
         columnsWithTooltips.push([column.label, formattedValue])
       }
     }
-    const additionalTooltipItems = [] as [string, string | number][]
+    const additionalTooltipItems: TooltipRow[] = []
 
     columnsWithTooltips.forEach(columnData => {
-      additionalTooltipItems.push([columnData[0], columnData[1]])
+      additionalTooltipItems.push(
+        createTooltipRow({
+          key: columnData[0],
+          value: columnData[1],
+          kind: 'extra'
+        })
+      )
     })
 
     if (visualizationType === 'Pie') {
@@ -155,21 +196,46 @@ export const useTooltip = props => {
       const showPiePercent = config.dataFormat.showPiePercent || false
 
       if (showPiePercent && pieData[config.xAxis.dataKey] === 'Calculated Area') {
-        tooltipItems.push(['', 'Calculated Area'])
+        tooltipItems.push(
+          createTooltipRow({
+            key: '',
+            value: 'Calculated Area',
+            kind: 'heading'
+          })
+        )
       } else {
         tooltipItems.push(
-          [config.xAxis.dataKey, pieData[config.xAxis.dataKey]],
-          [
-            config.runtime.yAxis.label || config.runtime.yAxis.dataKey,
-            showPiePercent ? pctString(actualPieValue) : formatNumber(pieData[config.runtime.yAxis.dataKey])
-          ],
-          showPiePercent ? [] : ['Percent', pctString(pctOf360)]
+          createTooltipRow({
+            key: config.xAxis.dataKey,
+            value: pieData[config.xAxis.dataKey],
+            kind: 'heading'
+          }),
+          createTooltipRow({
+            key: config.runtime.yAxis.label || config.runtime.yAxis.dataKey,
+            value: showPiePercent ? pctString(actualPieValue) : formatNumber(pieData[config.runtime.yAxis.dataKey]),
+            kind: 'extra'
+          })
         )
+        if (!showPiePercent) {
+          tooltipItems.push(
+            createTooltipRow({
+              key: 'Percent',
+              value: pctString(pctOf360),
+              kind: 'extra'
+            })
+          )
+        }
       }
     }
 
     if (visualizationType === 'Forest Plot') {
-      tooltipItems.push([config.xAxis.dataKey, getClosestYValue(y)])
+      tooltipItems.push(
+        createTooltipRow({
+          key: config.xAxis.dataKey,
+          value: getClosestYValue(y),
+          kind: 'heading'
+        })
+      )
     }
 
     const isLinearChart = !['Pie', 'Forest Plot'].includes(visualizationType)
@@ -205,9 +271,34 @@ export const useTooltip = props => {
               ) {
                 return []
               } else if (seriesObjWithName && seriesObjWithName.name === '') {
-                return [['', formattedValue, getAxisPosition(seriesKey)]]
+                return [
+                  createTooltipRow({
+                    key: '',
+                    value: formattedValue,
+                    axisPosition: getAxisPosition(seriesKey),
+                    kind: 'series',
+                    seriesKey
+                  })
+                ]
+              } else if (config.xAxis?.dataKey == seriesKey) {
+                return [
+                  createTooltipRow({
+                    key: seriesKey,
+                    value: formattedValue,
+                    axisPosition: getAxisPosition(seriesKey),
+                    kind: 'heading'
+                  })
+                ]
               } else {
-                return [[seriesKey, formattedValue, getAxisPosition(seriesKey)]]
+                return [
+                  createTooltipRow({
+                    key: seriesKey,
+                    value: formattedValue,
+                    axisPosition: getAxisPosition(seriesKey),
+                    kind: 'series',
+                    seriesKey
+                  })
+                ]
               }
             })
         )
@@ -247,7 +338,15 @@ export const useTooltip = props => {
             if (resolvedScaleValue) {
               const value = resolvedScaleValue[series.originalDataKey]
               const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
-              tooltipItems.push([seriesKey, formattedValue, getAxisPosition(seriesKey)])
+              tooltipItems.push(
+                createTooltipRow({
+                  key: seriesKey,
+                  value: formattedValue,
+                  axisPosition: getAxisPosition(seriesKey),
+                  kind: 'series',
+                  seriesKey
+                })
+              )
             }
           }
         })
@@ -261,12 +360,31 @@ export const useTooltip = props => {
           const xVal = dataColumn[config.xAxis.dataKey]
           const closestXScaleValue = getXValueFromCoordinate(x - Y_AXIS_SIZE)
 
-          tooltipItems.push([config.xAxis.dataKey, closestXScaleValue || xVal])
+          tooltipItems.push(
+            createTooltipRow({
+              key: config.xAxis.dataKey,
+              value: closestXScaleValue || xVal,
+              kind: 'heading'
+            })
+          )
           const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
-          tooltipItems.push([seriesKey, formattedValue])
+          tooltipItems.push(
+            createTooltipRow({
+              key: seriesKey,
+              value: formattedValue,
+              kind: 'series',
+              seriesKey
+            })
+          )
         } else if (dynamicSeries) {
           Object.keys(dataColumn).forEach(key => {
-            tooltipItems.push([key, dataColumn[key]])
+            tooltipItems.push(
+              createTooltipRow({
+                key,
+                value: dataColumn[key],
+                kind: key === config.xAxis.dataKey ? 'heading' : 'extra'
+              })
+            )
           })
         }
       }
@@ -283,16 +401,11 @@ export const useTooltip = props => {
     }
 
     // Strip link tags from all tooltip values
-    const cleanTooltipItems = [...tooltipItems, ...additionalTooltipItems].map(item => {
-      // item can be [key, value] or [key, value, axisPosition]
-      if (Array.isArray(item)) {
-        // Only strip from value (item[1])
-        const newItem = [...item]
-        newItem[1] = stripLinkTags(newItem[1])
-        return newItem
-      }
-      return item
-    })
+    const cleanTooltipItems = [...tooltipItems, ...additionalTooltipItems].map(item => ({
+      ...item,
+      value: stripLinkTags(item.value)
+    }))
+    const useMarkerColumn = tooltipHasMarkerColumn(cleanTooltipItems)
 
     const tooltipInformation = {
       tooltipLeft: dataXPosition,
@@ -300,7 +413,8 @@ export const useTooltip = props => {
       tooltipData: {
         data: cleanTooltipItems,
         dataXPosition,
-        dataYPosition
+        dataYPosition,
+        useMarkerColumn
       }
     }
     showTooltip(tooltipInformation)
@@ -654,9 +768,8 @@ export const useTooltip = props => {
     return originalColumnName
   }
 
-  const TooltipListItem = ({ item }) => {
-    const [index, additionalData] = item
-    const [key, value, axisPosition] = additionalData
+  const TooltipListItem = ({ row, index, useMarkerColumn = false }) => {
+    const { key, value, axisPosition, kind, markerColor, markerShape = 'circle' } = row
 
     if (visualizationType === 'Forest Plot') {
       if (key === config.xAxis.dataKey)
@@ -718,10 +831,26 @@ export const useTooltip = props => {
     }
     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 content = displayText !== undefined ? parse(String(displayText)) : displayText
 
     return (
-      <li style={style} className='tooltip-body mb-1'>
-        {displayText !== undefined ? parse(String(displayText)) : displayText}
+      <li
+        style={style}
+        className={`tooltip-body mb-1 cove-prose ${shouldRenderMarkerSlot ? 'tooltip-body--marker-layout' : ''}`}
+      >
+        {markerSlot}
+        {shouldRenderMarkerSlot ? <span className='tooltip-body-content'>{content}</span> : content}
       </li>
     )
   }

package/src/index.jsx

@@ -9,12 +9,15 @@ let isEditor = window.location.href.includes('editor=true')
 let isDebug = window.location.href.includes('debug=true')
 
 let domContainer = document.getElementsByClassName('react-container')[0]
+let configUrl = domContainer.dataset.configUrl
+let injectedConfig = domContainer.coveConfig
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
     <CdcChart
-      interactionLabel={domContainer.attributes['data-config']?.value}
-      configUrl={domContainer.attributes['data-config'].value}
+      interactionLabel={configUrl}
+      config={injectedConfig}
+      configUrl={injectedConfig ? undefined : configUrl}
       isEditor={isEditor}
       isDebug={isDebug}
     />

package/src/scss/main.scss

@@ -1,5 +1,6 @@
 @import '@cdc/core/styles/utils/breakpoints';
 @import '@cdc/core/styles/layout/wrapper-padding';
+@import '@cdc/core/styles/layout/callout';
 
 .form-container {
   overflow-y: auto;
@@ -24,33 +25,17 @@
     background: transparent;
 
     .cdc-callout {
-      box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
-      border: 1px solid #dff2f6;
-      margin: 0;
-      padding: 1.25rem;
-      border-radius: 0.25rem;
-      position: relative;
-      background: transparent;
-
-      .cdc-callout__flag {
-        position: absolute;
-        top: -0.36rem;
-        right: 1.08rem;
-        width: 1.84rem;
-        height: auto;
-      }
+      --cdc-callout-background: transparent;
 
       .cove-visualization__title,
       .cove-visualization__header {
         background: transparent;
         border: 0;
-        color: var(--cool-gray-90, #1f2937);
         margin: 0 0 1rem;
         padding: 0;
         border-radius: 0;
 
         h2 {
-          color: var(--cool-gray-90, #1f2937);
           font-family: var(--fonts-nunito, var(--app-font-secondary));
           font-size: 1.1rem;
           font-weight: 700;
@@ -64,11 +49,17 @@
     margin-bottom: 0 !important;
   }
 
+  .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;
+  }
+
   .legend-top {
     .legend-wrapper .tooltip-boundary {
       display: flex;
       flex-wrap: wrap;
-      row-gap: var(--cove-visualization-section-gap, 1.5rem);
       order: 2;
 
       aside {
@@ -188,7 +179,7 @@
       white-space: nowrap;
     }
 
-    .legend-item>.legend-item {
+    .legend-item > .legend-item {
       display: inline-block;
       flex: 0 0 auto;
     }
@@ -222,11 +213,11 @@
         left: 0%;
         top: 108%;
 
-        &>* {
+        & > * {
           margin: 0;
         }
 
-        &>p,
+        & > p,
         a {
           margin-left: 5px;
         }
@@ -235,7 +226,6 @@
   }
 
   .dynamic-legend-list {
-
     // overide traditional legend item that uses !important
     .legend-item {
       align-items: flex-end !important;
@@ -268,7 +258,7 @@
     font-size: 1em;
     vertical-align: middle;
 
-    &>span {
+    & > span {
       display: flex;
       justify-items: center;
       align-items: center;
@@ -278,25 +268,25 @@
       max-height: 1px;
     }
 
-    &>span[class*='Asterisk'] {
+    & > span[class*='Asterisk'] {
       transform: scale(1.8);
       margin-top: 15px;
     }
 
-    &>span[class*='Dagger'] {
+    & > span[class*='Dagger'] {
       margin-top: 2px;
     }
 
-    &>span[class*='Sign'] {
+    & > span[class*='Sign'] {
       margin-top: 1px;
     }
 
-    &>svg {
+    & > svg {
       width: 50px;
       height: 23px;
     }
 
-    &>p {
+    & > p {
       margin: 0;
     }
   }
@@ -325,8 +315,8 @@
       min-width: 0;
       max-width: 100%;
 
-      >div,
-      >aside {
+      > div,
+      > aside {
         min-width: 0;
         max-width: 100%;
       }
@@ -339,7 +329,7 @@
 
     &.legend-top:not(.legend-hidden) {
       .legend-wrapper {
-        &>div {
+        & > div {
           order: 2;
           width: 100%;
         }
@@ -354,7 +344,7 @@
 
     &.legend-left:not(.legend-hidden) {
       .legend-wrapper {
-        &>div {
+        & > div {
           order: 2;
           width: 75%;
         }
@@ -369,7 +359,7 @@
 
     &.legend-right:not(.legend-hidden) {
       .legend-wrapper {
-        &>div {
+        & > div {
           order: 1;
           width: 75%;
         }
@@ -391,7 +381,7 @@
       flex-wrap: nowrap;
       flex-direction: column-reverse;
 
-      &>div.tooltip-boundary {
+      & > div.tooltip-boundary {
         margin-top: 1.5em;
       }
     }
@@ -401,14 +391,10 @@
       flex-direction: column;
     }
 
-    &.legend-hidden>svg {
+    &.legend-hidden > svg {
       width: 100% !important;
     }
 
-    &.dashboard-brush {
-      margin-bottom: 2.5em;
-    }
-
     // Brush touch support
     .brush-overlay {
       touch-action: none;
@@ -434,7 +420,7 @@
       pointer-events: none;
     }
 
-    >svg {
+    > svg {
       overflow: visible;
       font-size: 14px;
       margin: 1rem 0 2rem;
@@ -449,7 +435,7 @@
     }
 
     &.chart-line--hover {
-      >svg circle {
+      > svg circle {
         opacity: 0;
 
         &:hover {
@@ -459,12 +445,12 @@
     }
 
     &.chart-line--always {
-      >svg circle {
+      > svg circle {
         opacity: 1;
       }
 
       // Animations for line chart and data points
-      >svg.animated {
+      > svg.animated {
         circle {
           opacity: 0;
           animation: revealLolly 0.25s linear forwards;
@@ -525,7 +511,7 @@
 
   @include breakpointClass(md) {
     .visualization-container {
-      >svg {
+      > svg {
         font-size: 16px;
         width: 75%;
         order: 1;
@@ -608,7 +594,6 @@
     }
 
     &.animated {
-
       .vertical path,
       .vertical rect,
       .vertical foreignObject div {
@@ -626,7 +611,6 @@
       }
 
       &.animate {
-
         path,
         rect,
         foreignObject div {
@@ -685,7 +669,7 @@
   text-align: center;
   transform: scale(1);
 
-  >.visx-group[style] {
+  > .visx-group[style] {
     transform: scale(1);
   }
 }
@@ -707,7 +691,7 @@
 }
 
 .cove-visualization.type-chart.type-sparkline {
-  &.lg .visualization-container>svg {
+  &.lg .visualization-container > svg {
     width: 100%;
   }
 
@@ -738,7 +722,6 @@
         transform: translate(-20px, 0);
       }
     }
-
   }
 
   .subtext,

package/src/test/CdcChart.test.jsx

@@ -1,11 +1,35 @@
 import path from 'node:path'
+import fs from 'node:fs'
+import vm from 'node:vm'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
 import { describe, it, expect } from 'vitest'
 
+const extractMarkedExampleConfig = (content, label) => {
+  const match = content.match(
+    /<!-- README_EXAMPLE_CONFIG_START -->\s*```jsx\s*([\s\S]*?)\s*```\s*<!-- README_EXAMPLE_CONFIG_END -->/
+  )
+  expect(match, `${label} should contain a marked README example block`).toBeTruthy()
+  const configMatch = match[1].match(/const config = (\{[\s\S]*?\})\n\nfunction App\(\)/)
+  expect(configMatch, `${label} should define const config before function App()`).toBeTruthy()
+  return vm.runInNewContext(`(${configMatch[1]})`)
+}
+
 describe('Chart', () => {
   it('Can be built in isolation', async () => {
     const pkgDir = path.join(__dirname, '..')
     const result = await testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
   }, 300000)
+
+  it('keeps the minimal example in sync with the README docs', () => {
+    const pkgRoot = path.join(__dirname, '..', '..')
+    const minimalExamplePath = path.join(pkgRoot, 'examples', 'minimal-example.json')
+    const readmePath = path.join(pkgRoot, 'README.md')
+
+    const minimalExample = JSON.parse(fs.readFileSync(minimalExamplePath, 'utf8'))
+    const readmeBlock = extractMarkedExampleConfig(fs.readFileSync(readmePath, 'utf8'), 'README.md')
+
+    expect(readmeBlock).toEqual(minimalExample)
+    expect(minimalExample.version).toBeTruthy()
+  })
 })