BarChart: Improve data links UX in tooltip (#76514)

This commit is contained in:
Torkel Ödegaard 2023-10-13 17:25:51 +02:00 committed by GitHub
parent 20e624dafd
commit c4b02d7063
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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 && (
<tr>
<td colSpan={2}>
<VerticalGroup>
{links.map((link, i) => (
<LinkButton
key={i}
icon={'external-link-alt'}
target={link.target}
href={link.href}
onClick={link.onClick}
fill="text"
style={{ width: '100%' }}
>
{link.title}
</LinkButton>
))}
</VerticalGroup>
</td>
</tr>
);
return (
<div className={styles.wrapper}>
{header && (
@ -125,7 +104,16 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he
<td>{renderValue(displayValue.valueString)}</td>
</tr>
))}
{renderLinks()}
{links.map((link, i) => (
<tr key={i}>
<th>Link</th>
<td colSpan={2}>
<TextLink href={link.href} external={link.target === '_blank'} weight={'medium'} inline={false}>
{link.title}
</TextLink>
</td>
</tr>
))}
</tbody>
</table>
</div>