feat(tooltip): pass datum to customHTML callback function (#1879)

- updated handler for tooltip show event to extract the datum from the event details and pass it as an argument to the customHTML callback function if one was specific within the chart options Close #1518 Signed-off-by: Steven Massola <steven.massola@ibm.com>
carbon-design-system · Aug 28, 2024 · 9a76784 · 9a76784
1 parent 79d3988
commit 9a76784
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/packages/core/src/components/axes/ruler-binned.ts b/packages/core/src/components/axes/ruler-binned.ts
@@ -86,6 +86,7 @@ export class BinnedRuler extends Ruler {
 
 			if (thereIsMatchingData) {
 				this.services.events.dispatchEvent(Events.Tooltip.SHOW, {
+					event,
 					mousePosition: [x, y],
 					hoveredElement: rulerLine,
 					items: [

diff --git a/packages/core/src/components/axes/ruler.ts b/packages/core/src/components/axes/ruler.ts
@@ -159,6 +159,7 @@ export class Ruler extends Component {
 			this.elementsToHighlight = elementsToHighlight
 
 			this.services.events.dispatchEvent(Events.Tooltip.SHOW, {
+				event,
 				mousePosition: [x, y],
 				hoveredElement: rulerLine,
 				data: this.formatTooltipData(tooltipData)

diff --git a/packages/core/src/components/essentials/tooltip.ts b/packages/core/src/components/essentials/tooltip.ts
@@ -27,6 +27,7 @@ export class Tooltip extends Component {
 
 	handleShowTooltip = (e: any) => {
 		const data = e.detail.data || e.detail.items
+		const datum = select(e.detail.event.target).datum()
 
 		let defaultHTML: any
 		const formattedItems = this.formatItems(this.getItems(e))
@@ -49,7 +50,7 @@ export class Tooltip extends Component {
 			} else {
 				tooltipTextContainer.html(
 					`<div class="title-tooltip"><p>${sanitizeHtml(
-						this.model.getOptions().tooltip.customHTML(data, defaultHTML)
+						this.model.getOptions().tooltip.customHTML(data, defaultHTML, datum)
 					)}</p></div>`
 				)
 			}

diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts
@@ -159,9 +159,10 @@ export interface TooltipOptions {
 	valueFormatter?: (value: any, label: string) => string
 	/**
 	 * custom function for returning tooltip HTML
-	 * passed an array or object with the data, and then the default tooltip markup
+	 * passed an array or object with the data, the default tooltip markup
+	 * and the corresponding datum of the hovered element
 	 */
-	customHTML?: (data: any, defaultHTML: string) => string
+	customHTML?: (data: any, defaultHTML: string, datum: any) => string
 	/**
 	 * customizes the `Group` label shown inside tooltips
 	 */