opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-28 12:52:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

VizTooltip: Add sizing options (#80306)

Browse Source 
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
Co-authored-by: Adela Almasan <adela.almasan@grafana.com>
This commit is contained in:
Ihor Yeromin
2024-01-18 00:49:09 +02:00
committed by GitHub
parent db83eb30a2
commit cbc84a802d
35 changed files with 195 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/sources/developers/kinds/composable/barchart/panelcfg/schema-reference.md
View File

@ -173,9 +173,11 @@ TODO docs
TODO docs
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| Property | Type | Required | Default | Description |
|-------------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| `maxHeight` | number | No | | |
| `maxWidth` | number | No | | |

40
docs/sources/developers/kinds/composable/candlestick/panelcfg/schema-reference.md
View File

@ -210,17 +210,18 @@ TODO docs
### Options
It extends [OptionsWithLegend](#optionswithlegend).
It extends [OptionsWithLegend](#optionswithlegend) and [OptionsWithTooltip](#optionswithtooltip).
| Property | Type | Required | Default | Description |
|--------------------|-----------------------------------------|----------|---------|--------------------------------------------------------------------------|
| `candleStyle` | string | **Yes** | | Sets the style of the candlesticks |
| `colorStrategy` | string | **Yes** | | Sets the color strategy for the candlesticks |
| `colors` | [CandlestickColors](#candlestickcolors) | **Yes** | | |
| `fields` | [object](#fields) | **Yes** | `map[]` | Map fields to appropriate dimension |
| `legend` | [VizLegendOptions](#vizlegendoptions) | **Yes** | | *(Inherited from [OptionsWithLegend](#optionswithlegend))*<br/>TODO docs |
| `mode` | string | **Yes** | | Sets which dimensions are used for the visualization |
| `includeAllFields` | boolean | No | `false` | When enabled, all fields will be sent to the graph |
| Property | Type | Required | Default | Description |
|--------------------|-----------------------------------------|----------|---------|----------------------------------------------------------------------------|
| `candleStyle` | string | **Yes** | | Sets the style of the candlesticks |
| `colorStrategy` | string | **Yes** | | Sets the color strategy for the candlesticks |
| `colors` | [CandlestickColors](#candlestickcolors) | **Yes** | | |
| `fields` | [object](#fields) | **Yes** | `map[]` | Map fields to appropriate dimension |
| `legend` | [VizLegendOptions](#vizlegendoptions) | **Yes** | | *(Inherited from [OptionsWithLegend](#optionswithlegend))*<br/>TODO docs |
| `mode` | string | **Yes** | | Sets which dimensions are used for the visualization |
| `tooltip` | [VizTooltipOptions](#viztooltipoptions) | **Yes** | | *(Inherited from [OptionsWithTooltip](#optionswithtooltip))*<br/>TODO docs |
| `includeAllFields` | boolean | No | `false` | When enabled, all fields will be sent to the graph |
### OptionsWithLegend
@ -246,6 +247,25 @@ TODO docs
| `sortDesc` | boolean | No | | |
| `width` | number | No | | |
### OptionsWithTooltip
TODO docs
| Property | Type | Required | Default | Description |
|-----------|-----------------------------------------|----------|---------|-------------|
| `tooltip` | [VizTooltipOptions](#viztooltipoptions) | **Yes** | | TODO docs |
### VizTooltipOptions
TODO docs
| Property | Type | Required | Default | Description |
|-------------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| `maxHeight` | number | No | | |
| `maxWidth` | number | No | | |
### Fields
Map fields to appropriate dimension

2
docs/sources/developers/kinds/composable/heatmap/panelcfg/schema-reference.md
View File

@ -127,6 +127,8 @@ Controls tooltip options
| Property | Type | Required | Default | Description |
|------------------|---------|----------|---------|----------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `maxHeight` | number | No | | |
| `maxWidth` | number | No | | |
| `showColorScale` | boolean | No | | Controls if the tooltip shows a color scale in header |
| `yHistogram` | boolean | No | | Controls if the tooltip shows a histogram of the y-axis values |

10
docs/sources/developers/kinds/composable/histogram/panelcfg/schema-reference.md
View File

@ -137,9 +137,11 @@ TODO docs
TODO docs
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| Property | Type | Required | Default | Description |
|-------------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| `maxHeight` | number | No | | |
| `maxWidth` | number | No | | |

10
docs/sources/developers/kinds/composable/piechart/panelcfg/schema-reference.md
View File

@ -71,10 +71,12 @@ TODO docs
TODO docs
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| Property | Type | Required | Default | Description |
|-------------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| `maxHeight` | number | No | | |
| `maxWidth` | number | No | | |
### PieChartLegendOptions

10
docs/sources/developers/kinds/composable/statetimeline/panelcfg/schema-reference.md
View File

@ -109,9 +109,11 @@ TODO docs
TODO docs
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| Property | Type | Required | Default | Description |
|-------------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| `maxHeight` | number | No | | |
| `maxWidth` | number | No | | |

10
docs/sources/developers/kinds/composable/statushistory/panelcfg/schema-reference.md
View File

@ -108,9 +108,11 @@ TODO docs
TODO docs
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| Property | Type | Required | Default | Description |
|-------------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| `maxHeight` | number | No | | |
| `maxWidth` | number | No | | |

10
docs/sources/developers/kinds/composable/timeseries/panelcfg/schema-reference.md
View File

@ -223,9 +223,11 @@ TODO docs
TODO docs
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| Property | Type | Required | Default | Description |
|-------------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| `maxHeight` | number | No | | |
| `maxWidth` | number | No | | |

10
docs/sources/developers/kinds/composable/trend/panelcfg/schema-reference.md
View File

@ -215,9 +215,11 @@ TODO docs
TODO docs
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| Property | Type | Required | Default | Description |
|-------------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| `maxHeight` | number | No | | |
| `maxWidth` | number | No | | |

10
docs/sources/developers/kinds/composable/xychart/panelcfg/schema-reference.md
View File

@ -192,10 +192,12 @@ TODO docs
TODO docs
| Property | Type | Required | Default | Description |
|----------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| Property | Type | Required | Default | Description |
|-------------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| `maxHeight` | number | No | | |
| `maxWidth` | number | No | | |
### ScatterSeriesConfig

2
packages/grafana-schema/src/common/common.gen.ts
View File

@ -666,6 +666,8 @@ export enum BarGaugeSizing {
* TODO docs
*/
export interface VizTooltipOptions {
maxHeight?: number;
maxWidth?: number;
mode: TooltipDisplayMode;
sort: SortOrder;
}

2
packages/grafana-schema/src/common/mudball.cue
View File

@ -256,6 +256,8 @@ BarGaugeSizing: "auto" | "manual" @cuetsy(kind="enum")
VizTooltipOptions: {
mode: TooltipDisplayMode
sort: SortOrder
maxWidth?: number
maxHeight?: number
} @cuetsy(kind="interface")
Labels: {

2
packages/grafana-schema/src/raw/composable/candlestick/panelcfg/x/CandlestickPanelCfg_types.gen.ts
View File

@ -64,7 +64,7 @@ export const defaultCandlestickColors: Partial<CandlestickColors> = {
up: 'green',
};
export interface Options extends common.OptionsWithLegend {
export interface Options extends common.OptionsWithLegend, common.OptionsWithTooltip {
/**
* Sets the style of the candlesticks
*/

2
packages/grafana-schema/src/raw/composable/heatmap/panelcfg/x/HeatmapPanelCfg_types.gen.ts
View File

@ -129,6 +129,8 @@ export interface FilterValueRange {
* Controls tooltip options
*/
export interface HeatmapTooltip {
maxHeight?: number;
maxWidth?: number;
/**
* Controls how the tooltip is shown
*/

17
packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx
View File

@ -8,9 +8,15 @@ import { useStyles2 } from '../../themes';
import { ColorIndicator, DEFAULT_COLOR_INDICATOR } from './types';
import { getColorIndicatorClass } from './utils';
export enum ColorIndicatorPosition {
Leading,
Trailing,
}
interface Props {
color?: string;
colorIndicator?: ColorIndicator;
position?: ColorIndicatorPosition;
}
export type ColorIndicatorStyles = ReturnType<typeof getStyles>;
@ -18,22 +24,29 @@ export type ColorIndicatorStyles = ReturnType<typeof getStyles>;
export const VizTooltipColorIndicator = ({
color = FALLBACK_COLOR,
colorIndicator = DEFAULT_COLOR_INDICATOR,
position = ColorIndicatorPosition.Leading,
}: Props) => {
const styles = useStyles2(getStyles);
return (
<span
style={{ backgroundColor: color }}
className={cx(styles.colorIndicator, getColorIndicatorClass(colorIndicator, styles))}
className={cx(
position === ColorIndicatorPosition.Leading ? styles.leading : styles.trailing,
getColorIndicatorClass(colorIndicator, styles)
)}
/>
);
};
// @TODO Update classes/add svgs
const getStyles = (theme: GrafanaTheme2) => ({
colorIndicator: css({
leading: css({
marginRight: theme.spacing(0.5),
}),
trailing: css({
marginLeft: theme.spacing(0.5),
}),
series: css({
width: '14px',
height: '4px',

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

@ -6,7 +6,7 @@ import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '../../themes';
import { Tooltip } from '../Tooltip';
import { VizTooltipColorIndicator } from './VizTooltipColorIndicator';
import { ColorIndicatorPosition, VizTooltipColorIndicator } from './VizTooltipColorIndicator';
import { ColorPlacement, LabelValue } from './types';
interface Props extends LabelValue {
@ -73,8 +73,13 @@ export const VizTooltipRow = ({
<div className={styles.valueWrapper}>
{color && colorPlacement === ColorPlacement.leading && (
<VizTooltipColorIndicator color={color} colorIndicator={colorIndicator} />
<VizTooltipColorIndicator
color={color}
colorIndicator={colorIndicator}
position={ColorIndicatorPosition.Leading}
/>
)}
{!isPinned ? (
<div className={cx(styles.value, isActive)}>{value}</div>
) : (
@ -90,10 +95,11 @@ export const VizTooltipRow = ({
)}
{color && colorPlacement === ColorPlacement.trailing && (
<>
&nbsp;
<VizTooltipColorIndicator color={color} colorIndicator={colorIndicator} />
</>
<VizTooltipColorIndicator
color={color}
colorIndicator={colorIndicator}
position={ColorIndicatorPosition.Trailing}
/>
)}
</div>
</div>
@ -113,7 +119,7 @@ const getStyles = (theme: GrafanaTheme2, justify: string, marginRight: string) =
fontWeight: 400,
textOverflow: 'ellipsis',
overflow: 'hidden',
marginRight: theme.spacing(0.5),
marginRight: theme.spacing(2),
}),
value: css({
fontWeight: 500,

25
packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
View File

@ -11,7 +11,8 @@ import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
import { CloseButton } from './CloseButton';
export const DEFAULT_TOOLTIP_WIDTH = 280;
export const DEFAULT_TOOLTIP_WIDTH = 300;
export const DEFAULT_TOOLTIP_HEIGHT = 600;
// todo: barchart? histogram?
export const enum TooltipHoverMode {
@ -41,6 +42,9 @@ interface TooltipPlugin2Props {
// selected time range (for annotation triggering)
timeRange: TimeRange2 | null
) => React.ReactNode;
maxWidth?: number;
maxHeight?: number;
}
interface TooltipContainerState {
@ -91,7 +95,15 @@ const maybeZoomAction = (e?: MouseEvent | null) => e != null && !e.ctrlKey && !e
/**
* @alpha
*/
export const TooltipPlugin2 = ({ config, hoverMode, render, clientZoom = false, queryZoom }: TooltipPlugin2Props) => {
export const TooltipPlugin2 = ({
config,
hoverMode,
render,
clientZoom = false,
queryZoom,
maxWidth,
maxHeight,
}: TooltipPlugin2Props) => {
const domRef = useRef<HTMLDivElement>(null);
const [{ plot, isHovering, isPinned, contents, style, dismiss }, setState] = useReducer(mergeState, INITIAL_STATE);
@ -101,7 +113,9 @@ export const TooltipPlugin2 = ({ config, hoverMode, render, clientZoom = false,
const sizeRef = useRef<TooltipContainerSize>();
const styles = useStyles2(getStyles);
maxWidth ??= DEFAULT_TOOLTIP_WIDTH;
maxHeight ??= DEFAULT_TOOLTIP_HEIGHT;
const styles = useStyles2(getStyles, maxWidth, maxHeight);
const renderRef = useRef(render);
renderRef.current = render;
@ -469,7 +483,7 @@ export const TooltipPlugin2 = ({ config, hoverMode, render, clientZoom = false,
return null;
};
const getStyles = (theme: GrafanaTheme2) => ({
const getStyles = (theme: GrafanaTheme2, maxWidth: number, maxHeight: number) => ({
tooltipWrapper: css({
top: 0,
left: 0,
@ -481,6 +495,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
border: `1px solid ${theme.colors.border.weak}`,
boxShadow: theme.shadows.z2,
userSelect: 'text',
maxWidth: `${maxWidth}px`,
maxHeight: `${maxHeight}px`,
overflowY: 'auto',
}),
pinned: css({
boxShadow: theme.shadows.z3,

18
packages/grafana-ui/src/options/builder/tooltip.tsx
View File

@ -42,5 +42,23 @@ export function addTooltipOptions<T extends OptionsWithTooltip>(
settings: {
options: sortOptions,
},
})
.addNumberInput({
path: 'tooltip.maxWidth',
name: 'Max width',
category,
settings: {
integer: true,
placeholder: '300',
},
})
.addNumberInput({
path: 'tooltip.maxHeight',
name: 'Max height',
category,
settings: {
integer: true,
placeholder: '600',
},
});
}

2
public/app/plugins/panel/candlestick/CandlestickPanel.tsx
View File

@ -295,6 +295,8 @@ export const CandlestickPanel = ({
/>
);
}}
maxWidth={options.tooltip.maxWidth}
maxHeight={options.tooltip.maxHeight}
/>
) : (
<>

1
public/app/plugins/panel/candlestick/panelcfg.cue
View File

@ -48,6 +48,7 @@ composableKinds: PanelCfg: {
} @cuetsy(kind="interface")
Options: {
common.OptionsWithLegend
common.OptionsWithTooltip
// Sets which dimensions are used for the visualization
mode: VizDisplayMode & (*"candles+volume" | _)

2
public/app/plugins/panel/candlestick/panelcfg.gen.ts
View File

@ -61,7 +61,7 @@ export const defaultCandlestickColors: Partial<CandlestickColors> = {
up: 'green',
};
export interface Options extends common.OptionsWithLegend {
export interface Options extends common.OptionsWithLegend, common.OptionsWithTooltip {
/**
* Sets the style of the candlesticks
*/

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

@ -394,6 +394,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css({
display: 'flex',
flexDirection: 'column',
width: '280px',
}),
});

2
public/app/plugins/panel/heatmap/HeatmapPanel.tsx
View File

@ -274,6 +274,8 @@ export const HeatmapPanel = ({
/>
);
}}
maxWidth={options.tooltip.maxWidth}
maxHeight={options.tooltip.maxHeight}
/>
)}
<AnnotationsPlugin2

20
public/app/plugins/panel/heatmap/module.tsx
View File

@ -422,6 +422,26 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
showIf: (opts) => opts.tooltip.mode !== TooltipDisplayMode.None && config.featureToggles.newVizTooltips,
});
builder.addNumberInput({
path: 'tooltip.maxWidth',
name: 'Max width',
category,
settings: {
integer: true,
placeholder: '300',
},
});
builder.addNumberInput({
path: 'tooltip.maxHeight',
name: 'Max height',
category,
settings: {
integer: true,
placeholder: '600',
},
});
category = ['Legend'];
builder.addBooleanSwitch({
path: 'legend.show',

4
public/app/plugins/panel/heatmap/panelcfg.cue
View File

@ -79,7 +79,9 @@ composableKinds: PanelCfg: lineage: {
// Controls tooltip options
HeatmapTooltip: {
// Controls how the tooltip is shown
mode: ui.TooltipDisplayMode
mode: ui.TooltipDisplayMode
maxHeight?: number
maxWidth?: number
// Controls if the tooltip shows a histogram of the y-axis values
yHistogram?: bool
// Controls if the tooltip shows a color scale in header

2
public/app/plugins/panel/heatmap/panelcfg.gen.ts
View File

@ -126,6 +126,8 @@ export interface FilterValueRange {
* Controls tooltip options
*/
export interface HeatmapTooltip {
maxHeight?: number;
maxWidth?: number;
/**
* Controls how the tooltip is shown
*/

2
public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
View File

@ -236,6 +236,8 @@ export const StateTimelinePanel = ({
/>
);
}}
maxWidth={options.tooltip.maxWidth}
maxHeight={options.tooltip.maxHeight}
/>
)}
{/* Renders annotations */}

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

@ -19,7 +19,6 @@ import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTool
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 { DEFAULT_TOOLTIP_WIDTH } from '@grafana/ui/src/components/uPlot/plugins/TooltipPlugin2';
import { findNextStateIndex, fmtDuration } from 'app/core/components/TimelineChart/utils';
import { getDataLinks } from '../status-history/utils';
@ -193,6 +192,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css({
display: 'flex',
flexDirection: 'column',
width: DEFAULT_TOOLTIP_WIDTH,
}),
});

2
public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
View File

@ -263,6 +263,8 @@ export const StatusHistoryPanel = ({
/>
);
}}
maxWidth={options.tooltip.maxWidth}
maxHeight={options.tooltip.maxHeight}
/>
)}
<AnnotationsPlugin2

1
public/app/plugins/panel/status-history/StatusHistoryTooltip2.tsx
View File

@ -154,6 +154,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css({
display: 'flex',
flexDirection: 'column',
width: '280px',
}),
});

2
public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
View File

@ -141,6 +141,8 @@ export const TimeSeriesPanel = ({
/>
);
}}
maxWidth={options.tooltip.maxWidth}
maxHeight={options.tooltip.maxHeight}
/>
) : (
<>

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

@ -19,7 +19,6 @@ import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTool
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 { DEFAULT_TOOLTIP_WIDTH } from '@grafana/ui/src/components/uPlot/plugins/TooltipPlugin2';
import { getDataLinks } from '../status-history/utils';
@ -160,6 +159,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css({
display: 'flex',
flexDirection: 'column',
width: DEFAULT_TOOLTIP_WIDTH,
}),
});

2
public/app/plugins/panel/trend/TrendPanel.tsx
View File

@ -145,6 +145,8 @@ export const TrendPanel = ({
/>
);
}}
maxWidth={options.tooltip.maxWidth}
maxHeight={options.tooltip.maxHeight}
/>
) : (
<TooltipPlugin

2
public/app/plugins/panel/xychart/XYChartPanel.tsx
View File

@ -240,6 +240,8 @@ export const XYChartPanel = (props: Props) => {
/>
);
}}
maxWidth={props.options.tooltip.maxWidth}
maxHeight={props.options.tooltip.maxHeight}
/>
)}
</UPlotChart>

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

@ -131,6 +131,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css({
display: 'flex',
flexDirection: 'column',
width: '280px',
}),
});