From c4b02d7063ac0ed5659fe882c1f38505c94c530e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 13 Oct 2023 17:25:51 +0200 Subject: [PATCH] BarChart: Improve data links UX in tooltip (#76514) --- .../data-hover/DataHoverView.tsx | 38 +++++++------------ 1 file changed, 13 insertions(+), 25 deletions(-) diff --git a/public/app/features/visualization/data-hover/DataHoverView.tsx b/public/app/features/visualization/data-hover/DataHoverView.tsx index f8f2f075b60..5c651d3ff10 100644 --- a/public/app/features/visualization/data-hover/DataHoverView.tsx +++ b/public/app/features/visualization/data-hover/DataHoverView.tsx @@ -11,7 +11,7 @@ import { LinkModel, } from '@grafana/data'; import { SortOrder, TooltipDisplayMode } from '@grafana/schema'; -import { LinkButton, useStyles2, VerticalGroup } from '@grafana/ui'; +import { TextLink, useStyles2 } from '@grafana/ui'; import { renderValue } from 'app/plugins/panel/geomap/utils/uiUtils'; export interface Props { @@ -60,8 +60,10 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he if (mode === TooltipDisplayMode.Single && columnIndex != null && !field.hovered) { continue; } + const value = field.values[rowIndex]; const fieldDisplay = field.display ? field.display(value) : { text: `${value}`, numeric: +value }; + if (field.getLinks) { field.getLinks({ calculatedValue: fieldDisplay, valueRowIndex: rowIndex }).forEach((link) => { const key = `${link.title}/${link.href}`; @@ -87,29 +89,6 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he displayValues.sort((a, b) => arrayUtils.sortValues(sortOrder)(a.value, b.value)); } - const renderLinks = () => - links.length > 0 && ( - - - - {links.map((link, i) => ( - - {link.title} - - ))} - - - - ); - return (
{header && ( @@ -125,7 +104,16 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he {renderValue(displayValue.valueString)} ))} - {renderLinks()} + {links.map((link, i) => ( + + Link + + + {link.title} + + + + ))}