@cdc/chart 4.26.3 → 4.26.4

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/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()
+  })
 })

package/src/types/ChartConfig.ts

@@ -102,6 +102,7 @@ type Legend = CoreLegend & {
   seriesHighlight: string[]
   unified: boolean
   hideSuppressionLink: boolean
+  tooltipLegendVisible?: boolean
   style: 'circles' | 'boxes' | 'gradient' | 'lines'
   subStyle: 'linear blocks' | 'smooth'
   hasShape: boolean

package/LICENSE

@@ -1,201 +0,0 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.