IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-22 08:56:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

VizTooltip: Cleanup (#83462)

Browse Source
This commit is contained in:
Leon Sorokin 2024-02-27 12:07:55 -06:00 committed by GitHub
parent a30617f8bd
commit 0f1cefa942
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 73 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/grafana-ui/src/components/VizTooltip/HeaderLabel.tsx
View File

@ -1,24 +0,0 @@
import React from 'react';
import { VizTooltipRow } from './VizTooltipRow';
import { LabelValue } from './types';
interface Props {
headerLabel: LabelValue;
isPinned: boolean;
}
export const HeaderLabel = ({ headerLabel, isPinned }: Props) => {
const { label, value, color, colorIndicator } = headerLabel;
return (
<VizTooltipRow
label={label}
value={value}
color={color}
colorIndicator={colorIndicator}
marginRight={'22px'}
isPinned={isPinned}
/>
);
};

54
packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx
View File

@ -1,21 +1,21 @@
import { css } from '@emotion/css';
import React, { CSSProperties, ReactElement } from 'react';
import React, { CSSProperties, ReactNode } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '../../themes';
import { VizTooltipRow } from './VizTooltipRow';
import { LabelValue } from './types';
import { VizTooltipItem } from './types';
interface Props {
contentLabelValue: LabelValue[];
customContent?: ReactElement[];
interface VizTooltipContentProps {
items: VizTooltipItem[];
children?: ReactNode;
scrollable?: boolean;
isPinned: boolean;
}
export const VizTooltipContent = ({ contentLabelValue, customContent, isPinned, scrollable = false }: Props) => {
export const VizTooltipContent = ({ items, children, isPinned, scrollable = false }: VizTooltipContentProps) => {
const styles = useStyles2(getStyles);
const scrollableStyle: CSSProperties = scrollable
@ -27,31 +27,20 @@ export const VizTooltipContent = ({ contentLabelValue, customContent, isPinned,
return (
<div className={styles.wrapper} style={scrollableStyle}>
<div>
{contentLabelValue.map((labelValue, i) => {
const { label, value, color, colorIndicator, colorPlacement, isActive } = labelValue;
return (
<VizTooltipRow
key={i}
label={label}
value={value}
color={color}
colorIndicator={colorIndicator}
colorPlacement={colorPlacement}
isActive={isActive}
justify={'space-between'}
isPinned={isPinned}
/>
);
})}
</div>
{customContent?.map((content, i) => {
return (
<div key={i} className={styles.customContentPadding}>
{content}
</div>
);
})}
{items.map(({ label, value, color, colorIndicator, colorPlacement, isActive }, i) => (
<VizTooltipRow
key={i}
label={label}
value={value}
color={color}
colorIndicator={colorIndicator}
colorPlacement={colorPlacement}
isActive={isActive}
justify={'space-between'}
isPinned={isPinned}
/>
))}
{children}
</div>
);
};
@ -65,7 +54,4 @@ const getStyles = (theme: GrafanaTheme2) => ({
borderTop: `1px solid ${theme.colors.border.medium}`,
padding: theme.spacing(1),
}),
customContentPadding: css({
padding: `${theme.spacing(1)} 0`,
}),
});

25
packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx
View File

@ -1,27 +1,32 @@
import { css } from '@emotion/css';
import React, { ReactElement } from 'react';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '../../themes';
import { HeaderLabel } from './HeaderLabel';
import { VizTooltipHeaderLabelValue } from './VizTooltipHeaderLabelValue';
import { LabelValue } from './types';
import { VizTooltipRow } from './VizTooltipRow';
import { VizTooltipItem } from './types';
interface Props {
headerLabel: LabelValue;
keyValuePairs?: LabelValue[];
customValueDisplay?: ReactElement | null;
item: VizTooltipItem;
isPinned: boolean;
}
export const VizTooltipHeader = ({ headerLabel, keyValuePairs, customValueDisplay, isPinned }: Props) => {
export const VizTooltipHeader = ({ item, isPinned }: Props) => {
const styles = useStyles2(getStyles);
const { label, value, color, colorIndicator } = item;
return (
<div className={styles.wrapper}>
<HeaderLabel headerLabel={headerLabel} isPinned={isPinned} />
{customValueDisplay || <VizTooltipHeaderLabelValue keyValuePairs={keyValuePairs} isPinned={isPinned} />}
<VizTooltipRow
label={label}
value={value}
color={color}
colorIndicator={colorIndicator}
marginRight={'22px'}
isPinned={isPinned}
/>
</div>
);
};

25
packages/grafana-ui/src/components/VizTooltip/VizTooltipHeaderLabelValue.tsx
View File

@ -1,25 +0,0 @@
import React from 'react';
import { VizTooltipRow } from './VizTooltipRow';
import { LabelValue } from './types';
interface Props {
keyValuePairs?: LabelValue[];
isPinned: boolean;
}
export const VizTooltipHeaderLabelValue = ({ keyValuePairs, isPinned }: Props) => (
<>
{keyValuePairs?.map((keyValuePair, i) => (
<VizTooltipRow
key={i}
label={keyValuePair.label}
value={keyValuePair.value}
color={keyValuePair.color}
colorIndicator={keyValuePair.colorIndicator!}
justify={'space-between'}
isPinned={isPinned}
/>
))}
</>
);

6
packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
View File

@ -8,9 +8,9 @@ import { InlineToast } from '../InlineToast/InlineToast';
import { Tooltip } from '../Tooltip';
import { ColorIndicatorPosition, VizTooltipColorIndicator } from './VizTooltipColorIndicator';
import { ColorPlacement, LabelValue } from './types';
import { ColorPlacement, VizTooltipItem } from './types';
interface Props extends Omit<LabelValue, 'value'> {
interface VizTooltipRowProps extends Omit<VizTooltipItem, 'value'> {
value: string | number | null | ReactNode;
justify?: string;
isActive?: boolean; // for series list
@ -36,7 +36,7 @@ export const VizTooltipRow = ({
isActive = false,
marginRight = '0px',
isPinned,
}: Props) => {
}: VizTooltipRowProps) => {
const styles = useStyles2(getStyles, justify, marginRight);
const [showLabelTooltip, setShowLabelTooltip] = useState(false);

2
packages/grafana-ui/src/components/VizTooltip/types.ts
View File

@ -17,7 +17,7 @@ export enum ColorPlacement {
trailing = 'trailing',
}
export interface LabelValue {
export interface VizTooltipItem {
label: string;
value: string;
color?: string;

10
packages/grafana-ui/src/components/VizTooltip/utils.ts
View File

@ -2,7 +2,7 @@ import { FALLBACK_COLOR, Field, FieldType, formattedValueToString } from '@grafa
import { SortOrder, TooltipDisplayMode } from '@grafana/schema';
import { ColorIndicatorStyles } from './VizTooltipColorIndicator';
import { ColorIndicator, ColorPlacement, LabelValue } from './types';
import { ColorIndicator, ColorPlacement, VizTooltipItem } from './types';
export const calculateTooltipPosition = (
xPos = 0,
@ -70,9 +70,9 @@ export const getColorIndicatorClass = (colorIndicator: string, styles: ColorIndi
}
};
const numberCmp = (a: LabelValue, b: LabelValue) => a.numeric! - b.numeric!;
const numberCmp = (a: VizTooltipItem, b: VizTooltipItem) => a.numeric! - b.numeric!;
const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
const stringCmp = (a: LabelValue, b: LabelValue) => collator.compare(`${a.value}`, `${b.value}`);
const stringCmp = (a: VizTooltipItem, b: VizTooltipItem) => collator.compare(`${a.value}`, `${b.value}`);
export const getContentItems = (
fields: Field[],
@ -82,8 +82,8 @@ export const getContentItems = (
mode: TooltipDisplayMode,
sortOrder: SortOrder,
fieldFilter = (field: Field) => true
): LabelValue[] => {
let rows: LabelValue[] = [];
): VizTooltipItem[] => {
let rows: VizTooltipItem[] = [];
let allNumeric = false;

25
public/app/plugins/panel/heatmap/HeatmapHoverView.tsx
View File

@ -14,11 +14,11 @@ import {
ScopedVars,
} from '@grafana/data';
import { HeatmapCellLayout } from '@grafana/schema';
import { TooltipDisplayMode, useStyles2 } from '@grafana/ui';
import { TooltipDisplayMode, useStyles2, useTheme2 } from '@grafana/ui';
import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
import { ColorIndicator, ColorPlacement, LabelValue } from '@grafana/ui/src/components/VizTooltip/types';
import { ColorIndicator, ColorPlacement, VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
import { ColorScale } from 'app/core/components/ColorScale/ColorScale';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
@ -112,7 +112,7 @@ const HeatmapHoverCell = ({
let nonNumericOrdinalDisplay: string | undefined = undefined;
let contentItems: LabelValue[] = [];
let contentItems: VizTooltipItem[] = [];
const getYValueIndex = (idx: number) => {
return idx % data.yBucketCount! ?? 0;
@ -204,7 +204,7 @@ const HeatmapHoverCell = ({
return vals;
};
const getContentLabels = (): LabelValue[] => {
const getContentLabels = (): VizTooltipItem[] => {
const isMulti = mode === TooltipDisplayMode.Multi && !isPinned;
if (nonNumericOrdinalDisplay) {
@ -242,7 +242,7 @@ const HeatmapHoverCell = ({
let count = getCountValue(index);
if (mode === TooltipDisplayMode.Single || isPinned) {
const fromToInt: LabelValue[] = interval ? [{ label: 'Duration', value: formatMilliseconds(interval) }] : [];
const fromToInt: VizTooltipItem[] = interval ? [{ label: 'Duration', value: formatMilliseconds(interval) }] : [];
contentItems = [
{
@ -270,7 +270,7 @@ const HeatmapHoverCell = ({
toIdx++;
}
const vals: LabelValue[] = getDisplayData(fromIdx, toIdx);
const vals: VizTooltipItem[] = getDisplayData(fromIdx, toIdx);
vals.forEach((val) => {
contentItems.push({
label: val.label,
@ -330,7 +330,7 @@ const HeatmapHoverCell = ({
[index]
);
const headerLabel: LabelValue = {
const headerItem: VizTooltipItem = {
label: '',
value: xDisp(xBucketMax!)!,
};
@ -365,11 +365,18 @@ const HeatmapHoverCell = ({
}
const styles = useStyles2(getStyles);
const theme = useTheme2();
return (
<div className={styles.wrapper}>
<VizTooltipHeader headerLabel={headerLabel} isPinned={isPinned} />
<VizTooltipContent contentLabelValue={contentItems} customContent={customContent} isPinned={isPinned} />
<VizTooltipHeader item={headerItem} isPinned={isPinned} />
<VizTooltipContent items={contentItems} isPinned={isPinned}>
{customContent?.map((content, i) => (
<div key={i} style={{ padding: `${theme.spacing(1)} 0` }}>
{content}
</div>
))}
</VizTooltipContent>
{isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />}
</div>
);

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

@ -6,7 +6,7 @@ import { TooltipDisplayMode, useStyles2 } from '@grafana/ui';
import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
import { LabelValue } from '@grafana/ui/src/components/VizTooltip/types';
import { VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
import { getContentItems } from '@grafana/ui/src/components/VizTooltip/utils';
import { findNextStateIndex, fmtDuration } from 'app/core/components/TimelineChart/utils';
@ -73,7 +73,7 @@ export const StateTimelineTooltip2 = ({
links = getDataLinks(field, dataIdx);
}
const headerItem: LabelValue = {
const headerItem: VizTooltipItem = {
label: xField.type === FieldType.time ? '' : getFieldDisplayName(xField, seriesFrame, frames),
value: xVal,
};
@ -81,8 +81,8 @@ export const StateTimelineTooltip2 = ({
return (
<div>
<div className={styles.wrapper}>
<VizTooltipHeader headerLabel={headerItem} isPinned={isPinned} />
<VizTooltipContent contentLabelValue={contentItems} isPinned={isPinned} scrollable={scrollable} />
<VizTooltipHeader item={headerItem} isPinned={isPinned} />
<VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} />
{isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />}
</div>
</div>

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

@ -7,7 +7,7 @@ import { useStyles2 } from '@grafana/ui';
import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
import { LabelValue } from '@grafana/ui/src/components/VizTooltip/types';
import { VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
import { getContentItems } from '@grafana/ui/src/components/VizTooltip/utils';
import { getDataLinks } from '../status-history/utils';
@ -67,7 +67,7 @@ export const TimeSeriesTooltip = ({
links = getDataLinks(field, dataIdx);
}
const headerItem: LabelValue = {
const headerItem: VizTooltipItem = {
label: xField.type === FieldType.time ? '' : getFieldDisplayName(xField, seriesFrame, frames),
value: xVal,
};
@ -75,8 +75,8 @@ export const TimeSeriesTooltip = ({
return (
<div>
<div className={styles.wrapper}>
<VizTooltipHeader headerLabel={headerItem} isPinned={isPinned} />
<VizTooltipContent contentLabelValue={contentItems} isPinned={isPinned} scrollable={scrollable} />
<VizTooltipHeader item={headerItem} isPinned={isPinned} />
<VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} />
{isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />}
</div>
</div>

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

@ -6,7 +6,7 @@ import { useStyles2 } from '@grafana/ui';
import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
import { ColorIndicator, LabelValue } from '@grafana/ui/src/components/VizTooltip/types';
import { ColorIndicator, VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
import { getTitleFromHref } from 'app/features/explore/utils/links';
import { getStyles } from '../timeseries/TimeSeriesTooltip';
@ -53,7 +53,7 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, allSeries, dismiss,
colorThing = colorThing[rowIndex];
}
const headerItem: LabelValue = {
const headerItem: VizTooltipItem = {
label,
value: '',
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@ -61,7 +61,7 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, allSeries, dismiss,
colorIndicator: ColorIndicator.marker_md,
};
const contentItems: LabelValue[] = [
const contentItems: VizTooltipItem[] = [
{
label: getFieldDisplayName(xField, frame),
value: fmt(xField, xField.values[rowIndex]),
@ -101,8 +101,8 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, allSeries, dismiss,
return (
<div className={styles.wrapper}>
<VizTooltipHeader headerLabel={headerItem} isPinned={isPinned} />
<VizTooltipContent contentLabelValue={contentItems} isPinned={isPinned} />
<VizTooltipHeader item={headerItem} isPinned={isPinned} />
<VizTooltipContent items={contentItems} isPinned={isPinned} />
{isPinned && <VizTooltipFooter dataLinks={getLinks()} />}
</div>
);