IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

VizTooltips: Render data links only when anchored (#83737)

Browse Source
This commit is contained in:
Leon Sorokin 2024-02-29 17:28:37 -06:00 committed by GitHub
parent 88ebef5cba
commit 859ecf2a34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 31 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React, { ReactNode } from 'react';
import { Field, FieldType, getFieldDisplayName, LinkModel, TimeRange } from '@grafana/data'; import { FieldType, getFieldDisplayName, TimeRange } from '@grafana/data';
import { SortOrder } from '@grafana/schema/dist/esm/common/common.gen'; import { SortOrder } from '@grafana/schema/dist/esm/common/common.gen';
import { TooltipDisplayMode, useStyles2 } from '@grafana/ui'; import { TooltipDisplayMode, useStyles2 } from '@grafana/ui';
import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent'; import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
@ -65,12 +65,14 @@ export const StateTimelineTooltip2 = ({
contentItems.push({ label: 'Duration', value: duration }); contentItems.push({ label: 'Duration', value: duration });
} }
let links: Array<LinkModel<Field>> = []; let footer: ReactNode;
if (seriesIdx != null) { if (isPinned && seriesIdx != null) {
const field = seriesFrame.fields[seriesIdx]; const field = seriesFrame.fields[seriesIdx];
const dataIdx = dataIdxs[seriesIdx]!; const dataIdx = dataIdxs[seriesIdx]!;
links = getDataLinks(field, dataIdx); const links = getDataLinks(field, dataIdx);
footer = <VizTooltipFooter dataLinks={links} annotate={annotate} />;
} }
const headerItem: VizTooltipItem = { const headerItem: VizTooltipItem = {
@ -79,14 +81,10 @@ export const StateTimelineTooltip2 = ({
}; };
return ( return (
<div>
<div className={styles.wrapper}> <div className={styles.wrapper}>
<VizTooltipHeader item={headerItem} isPinned={isPinned} /> <VizTooltipHeader item={headerItem} isPinned={isPinned} />
<VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} /> <VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} />
{(links.length > 0 || isPinned) && ( {footer}
<VizTooltipFooter dataLinks={links} annotate={isPinned ? annotate : undefined} />
)}
</div>
</div> </div>
); );
}; };

18
public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx
View File

@ -1,7 +1,7 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React from 'react'; import React, { ReactNode } from 'react';
import { DataFrame, FieldType, LinkModel, Field, getFieldDisplayName } from '@grafana/data'; import { DataFrame, FieldType, getFieldDisplayName } from '@grafana/data';
import { SortOrder, TooltipDisplayMode } from '@grafana/schema/dist/esm/common/common.gen'; import { SortOrder, TooltipDisplayMode } from '@grafana/schema/dist/esm/common/common.gen';
import { useStyles2 } from '@grafana/ui'; import { useStyles2 } from '@grafana/ui';
import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent'; import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
@ -59,12 +59,14 @@ export const TimeSeriesTooltip = ({
(field) => field.type === FieldType.number (field) => field.type === FieldType.number
); );
let links: Array<LinkModel<Field>> = []; let footer: ReactNode;
if (seriesIdx != null) { if (isPinned && seriesIdx != null) {
const field = seriesFrame.fields[seriesIdx]; const field = seriesFrame.fields[seriesIdx];
const dataIdx = dataIdxs[seriesIdx]!; const dataIdx = dataIdxs[seriesIdx]!;
links = getDataLinks(field, dataIdx); const links = getDataLinks(field, dataIdx);
footer = <VizTooltipFooter dataLinks={links} annotate={annotate} />;
} }
const headerItem: VizTooltipItem = { const headerItem: VizTooltipItem = {
@ -73,14 +75,10 @@ export const TimeSeriesTooltip = ({
}; };
return ( return (
<div>
<div className={styles.wrapper}> <div className={styles.wrapper}>
<VizTooltipHeader item={headerItem} isPinned={isPinned} /> <VizTooltipHeader item={headerItem} isPinned={isPinned} />
<VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} /> <VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} />
{(links.length > 0 || isPinned) && ( {footer}
<VizTooltipFooter dataLinks={links} annotate={isPinned ? annotate : undefined} />
)}
</div>
</div> </div>
); );
}; };

10
public/app/plugins/panel/xychart/XYChartTooltip.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { ReactNode } from 'react';
import { DataFrame, Field, getFieldDisplayName } from '@grafana/data'; import { DataFrame, Field, getFieldDisplayName } from '@grafana/data';
import { alpha } from '@grafana/data/src/themes/colorManipulator'; import { alpha } from '@grafana/data/src/themes/colorManipulator';
@ -83,13 +83,19 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, allSeries, dismiss,
}); });
} }
let footer: ReactNode;
if (isPinned && seriesIdx != null) {
const links = getDataLinks(yField, rowIndex); const links = getDataLinks(yField, rowIndex);
footer = <VizTooltipFooter dataLinks={links} />;
}
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<VizTooltipHeader item={headerItem} isPinned={isPinned} /> <VizTooltipHeader item={headerItem} isPinned={isPinned} />
<VizTooltipContent items={contentItems} isPinned={isPinned} /> <VizTooltipContent items={contentItems} isPinned={isPinned} />
{(links.length > 0 || isPinned) && <VizTooltipFooter dataLinks={links} />} {footer}
</div> </div>
); );
}; };