opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-29 09:32:21 +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 TODO docs
| Property | Type | Required | Default | Description | | Property | Type | Required | Default | Description |
|----------|--------|----------|---------|---------------------------------------------------------------| |-------------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. | | `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `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 ### Options
It extends [OptionsWithLegend](#optionswithlegend). It extends [OptionsWithLegend](#optionswithlegend) and [OptionsWithTooltip](#optionswithtooltip).
| Property | Type | Required | Default | Description | | Property | Type | Required | Default | Description |
|--------------------|-----------------------------------------|----------|---------|--------------------------------------------------------------------------| |--------------------|-----------------------------------------|----------|---------|----------------------------------------------------------------------------|
| `candleStyle` | string | **Yes** | | Sets the style of the candlesticks | | `candleStyle` | string | **Yes** | | Sets the style of the candlesticks |
| `colorStrategy` | string | **Yes** | | Sets the color strategy for the candlesticks | | `colorStrategy` | string | **Yes** | | Sets the color strategy for the candlesticks |
| `colors` | [CandlestickColors](#candlestickcolors) | **Yes** | | | | `colors` | [CandlestickColors](#candlestickcolors) | **Yes** | | |
| `fields` | [object](#fields) | **Yes** | `map[]` | Map fields to appropriate dimension | | `fields` | [object](#fields) | **Yes** | `map[]` | Map fields to appropriate dimension |
| `legend` | [VizLegendOptions](#vizlegendoptions) | **Yes** | | *(Inherited from [OptionsWithLegend](#optionswithlegend))*<br/>TODO docs | | `legend` | [VizLegendOptions](#vizlegendoptions) | **Yes** | | *(Inherited from [OptionsWithLegend](#optionswithlegend))*<br/>TODO docs |
| `mode` | string | **Yes** | | Sets which dimensions are used for the visualization | | `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 | | `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 ### OptionsWithLegend
@ -246,6 +247,25 @@ TODO docs
| `sortDesc` | boolean | No | | | | `sortDesc` | boolean | No | | |
| `width` | number | 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 ### Fields
Map fields to appropriate dimension 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 | | Property | Type | Required | Default | Description |
|------------------|---------|----------|---------|----------------------------------------------------------------| |------------------|---------|----------|---------|----------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. | | `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 | | `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 | | `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 TODO docs
| Property | Type | Required | Default | Description | | Property | Type | Required | Default | Description |
|----------|--------|----------|---------|---------------------------------------------------------------| |-------------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. | | `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `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 TODO docs
| Property | Type | Required | Default | Description | | Property | Type | Required | Default | Description |
|----------|--------|----------|---------|---------------------------------------------------------------| |-------------|--------|----------|---------|---------------------------------------------------------------|
| `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. | | `mode` | string | **Yes** | | TODO docs<br/>Possible values are: `single`, `multi`, `none`. |
| `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. | | `sort` | string | **Yes** | | TODO docs<br/>Possible values are: `asc`, `desc`, `none`. |
| `maxHeight` | number | No | | |
| `maxWidth` | number | No | | |
### PieChartLegendOptions ### PieChartLegendOptions

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

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

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

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

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

@ -256,6 +256,8 @@ BarGaugeSizing: "auto" | "manual" @cuetsy(kind="enum")
VizTooltipOptions: { VizTooltipOptions: {
mode: TooltipDisplayMode mode: TooltipDisplayMode
sort: SortOrder sort: SortOrder
maxWidth?: number
maxHeight?: number
} @cuetsy(kind="interface") } @cuetsy(kind="interface")
Labels: { 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', up: 'green',
}; };
export interface Options extends common.OptionsWithLegend { export interface Options extends common.OptionsWithLegend, common.OptionsWithTooltip {
/** /**
* Sets the style of the candlesticks * 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 * Controls tooltip options
*/ */
export interface HeatmapTooltip { export interface HeatmapTooltip {
maxHeight?: number;
maxWidth?: number;
/** /**
* Controls how the tooltip is shown * 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 { ColorIndicator, DEFAULT_COLOR_INDICATOR } from './types';
import { getColorIndicatorClass } from './utils'; import { getColorIndicatorClass } from './utils';
export enum ColorIndicatorPosition {
Leading,
Trailing,
}
interface Props { interface Props {
color?: string; color?: string;
colorIndicator?: ColorIndicator; colorIndicator?: ColorIndicator;
position?: ColorIndicatorPosition;
} }
export type ColorIndicatorStyles = ReturnType<typeof getStyles>; export type ColorIndicatorStyles = ReturnType<typeof getStyles>;
@ -18,22 +24,29 @@ export type ColorIndicatorStyles = ReturnType<typeof getStyles>;
export const VizTooltipColorIndicator = ({ export const VizTooltipColorIndicator = ({
color = FALLBACK_COLOR, color = FALLBACK_COLOR,
colorIndicator = DEFAULT_COLOR_INDICATOR, colorIndicator = DEFAULT_COLOR_INDICATOR,
position = ColorIndicatorPosition.Leading,
}: Props) => { }: Props) => {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
return ( return (
<span <span
style={{ backgroundColor: color }} 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 // @TODO Update classes/add svgs
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
colorIndicator: css({ leading: css({
marginRight: theme.spacing(0.5), marginRight: theme.spacing(0.5),
}), }),
trailing: css({
marginLeft: theme.spacing(0.5),
}),
series: css({ series: css({
width: '14px', width: '14px',
height: '4px', 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 { useStyles2 } from '../../themes';
import { Tooltip } from '../Tooltip'; import { Tooltip } from '../Tooltip';
import { VizTooltipColorIndicator } from './VizTooltipColorIndicator'; import { ColorIndicatorPosition, VizTooltipColorIndicator } from './VizTooltipColorIndicator';
import { ColorPlacement, LabelValue } from './types'; import { ColorPlacement, LabelValue } from './types';
interface Props extends LabelValue { interface Props extends LabelValue {
@ -73,8 +73,13 @@ export const VizTooltipRow = ({
<div className={styles.valueWrapper}> <div className={styles.valueWrapper}>
{color && colorPlacement === ColorPlacement.leading && ( {color && colorPlacement === ColorPlacement.leading && (
<VizTooltipColorIndicator color={color} colorIndicator={colorIndicator} /> <VizTooltipColorIndicator
color={color}
colorIndicator={colorIndicator}
position={ColorIndicatorPosition.Leading}
/>
)} )}
{!isPinned ? ( {!isPinned ? (
<div className={cx(styles.value, isActive)}>{value}</div> <div className={cx(styles.value, isActive)}>{value}</div>
) : ( ) : (
@ -90,10 +95,11 @@ export const VizTooltipRow = ({
)} )}
{color && colorPlacement === ColorPlacement.trailing && ( {color && colorPlacement === ColorPlacement.trailing && (
<> <VizTooltipColorIndicator
&nbsp; color={color}
<VizTooltipColorIndicator color={color} colorIndicator={colorIndicator} /> colorIndicator={colorIndicator}
</> position={ColorIndicatorPosition.Trailing}
/>
)} )}
</div> </div>
</div> </div>
@ -113,7 +119,7 @@ const getStyles = (theme: GrafanaTheme2, justify: string, marginRight: string) =
fontWeight: 400, fontWeight: 400,
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
overflow: 'hidden', overflow: 'hidden',
marginRight: theme.spacing(0.5), marginRight: theme.spacing(2),
}), }),
value: css({ value: css({
fontWeight: 500, 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'; 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? // todo: barchart? histogram?
export const enum TooltipHoverMode { export const enum TooltipHoverMode {
@ -41,6 +42,9 @@ interface TooltipPlugin2Props {
// selected time range (for annotation triggering) // selected time range (for annotation triggering)
timeRange: TimeRange2 | null timeRange: TimeRange2 | null
) => React.ReactNode; ) => React.ReactNode;
maxWidth?: number;
maxHeight?: number;
} }
interface TooltipContainerState { interface TooltipContainerState {
@ -91,7 +95,15 @@ const maybeZoomAction = (e?: MouseEvent | null) => e != null && !e.ctrlKey && !e
/** /**
* @alpha * @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 domRef = useRef<HTMLDivElement>(null);
const [{ plot, isHovering, isPinned, contents, style, dismiss }, setState] = useReducer(mergeState, INITIAL_STATE); 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 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); const renderRef = useRef(render);
renderRef.current = render; renderRef.current = render;
@ -469,7 +483,7 @@ export const TooltipPlugin2 = ({ config, hoverMode, render, clientZoom = false,
return null; return null;
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2, maxWidth: number, maxHeight: number) => ({
tooltipWrapper: css({ tooltipWrapper: css({
top: 0, top: 0,
left: 0, left: 0,
@ -481,6 +495,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
border: `1px solid ${theme.colors.border.weak}`, border: `1px solid ${theme.colors.border.weak}`,
boxShadow: theme.shadows.z2, boxShadow: theme.shadows.z2,
userSelect: 'text', userSelect: 'text',
maxWidth: `${maxWidth}px`,
maxHeight: `${maxHeight}px`,
overflowY: 'auto',
}), }),
pinned: css({ pinned: css({
boxShadow: theme.shadows.z3, 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: { settings: {
options: sortOptions, 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") } @cuetsy(kind="interface")
Options: { Options: {
common.OptionsWithLegend common.OptionsWithLegend
common.OptionsWithTooltip
// Sets which dimensions are used for the visualization // Sets which dimensions are used for the visualization
mode: VizDisplayMode & (*"candles+volume" | _) 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', up: 'green',
}; };
export interface Options extends common.OptionsWithLegend { export interface Options extends common.OptionsWithLegend, common.OptionsWithTooltip {
/** /**
* Sets the style of the candlesticks * 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({ wrapper: css({
display: 'flex', display: 'flex',
flexDirection: 'column', 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 <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, 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']; category = ['Legend'];
builder.addBooleanSwitch({ builder.addBooleanSwitch({
path: 'legend.show', path: 'legend.show',

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

@ -79,7 +79,9 @@ composableKinds: PanelCfg: lineage: {
// Controls tooltip options // Controls tooltip options
HeatmapTooltip: { HeatmapTooltip: {
// Controls how the tooltip is shown // 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 // Controls if the tooltip shows a histogram of the y-axis values
yHistogram?: bool yHistogram?: bool
// Controls if the tooltip shows a color scale in header // 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 * Controls tooltip options
*/ */
export interface HeatmapTooltip { export interface HeatmapTooltip {
maxHeight?: number;
maxWidth?: number;
/** /**
* Controls how the tooltip is shown * 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 */} {/* 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 { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader'; import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
import { ColorIndicator, ColorPlacement, LabelValue } from '@grafana/ui/src/components/VizTooltip/types'; 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 { findNextStateIndex, fmtDuration } from 'app/core/components/TimelineChart/utils';
import { getDataLinks } from '../status-history/utils'; import { getDataLinks } from '../status-history/utils';
@ -193,6 +192,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css({ wrapper: css({
display: 'flex', display: 'flex',
flexDirection: 'column', 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 <AnnotationsPlugin2

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

@ -154,6 +154,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css({ wrapper: css({
display: 'flex', display: 'flex',
flexDirection: 'column', 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 { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader'; import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
import { ColorIndicator, ColorPlacement, LabelValue } from '@grafana/ui/src/components/VizTooltip/types'; 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'; import { getDataLinks } from '../status-history/utils';
@ -160,6 +159,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css({ wrapper: css({
display: 'flex', display: 'flex',
flexDirection: 'column', 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 <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> </UPlotChart>

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

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