diff --git a/docs/sources/developers/kinds/composable/barchart/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/barchart/panelcfg/schema-reference.md index e07747b77e6..2a3e4d43c76 100644 --- a/docs/sources/developers/kinds/composable/barchart/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/barchart/panelcfg/schema-reference.md @@ -173,9 +173,11 @@ TODO docs TODO docs -| Property | Type | Required | Default | Description | -|----------|--------|----------|---------|---------------------------------------------------------------| -| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | -| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| Property | Type | Required | Default | Description | +|-------------|--------|----------|---------|---------------------------------------------------------------| +| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | +| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| `maxHeight` | number | No | | | +| `maxWidth` | number | No | | | diff --git a/docs/sources/developers/kinds/composable/candlestick/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/candlestick/panelcfg/schema-reference.md index 75fe334da43..db0bbe51881 100644 --- a/docs/sources/developers/kinds/composable/candlestick/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/candlestick/panelcfg/schema-reference.md @@ -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))*
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))*
TODO docs | +| `mode` | string | **Yes** | | Sets which dimensions are used for the visualization | +| `tooltip` | [VizTooltipOptions](#viztooltipoptions) | **Yes** | | *(Inherited from [OptionsWithTooltip](#optionswithtooltip))*
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
Possible values are: `single`, `multi`, `none`. | +| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| `maxHeight` | number | No | | | +| `maxWidth` | number | No | | | + ### Fields Map fields to appropriate dimension diff --git a/docs/sources/developers/kinds/composable/heatmap/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/heatmap/panelcfg/schema-reference.md index 87b7fbfdd21..3c704e12265 100644 --- a/docs/sources/developers/kinds/composable/heatmap/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/heatmap/panelcfg/schema-reference.md @@ -127,6 +127,8 @@ Controls tooltip options | Property | Type | Required | Default | Description | |------------------|---------|----------|---------|----------------------------------------------------------------| | `mode` | string | **Yes** | | TODO docs
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 | diff --git a/docs/sources/developers/kinds/composable/histogram/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/histogram/panelcfg/schema-reference.md index f3f0efe9234..829b5a123f5 100644 --- a/docs/sources/developers/kinds/composable/histogram/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/histogram/panelcfg/schema-reference.md @@ -137,9 +137,11 @@ TODO docs TODO docs -| Property | Type | Required | Default | Description | -|----------|--------|----------|---------|---------------------------------------------------------------| -| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | -| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| Property | Type | Required | Default | Description | +|-------------|--------|----------|---------|---------------------------------------------------------------| +| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | +| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| `maxHeight` | number | No | | | +| `maxWidth` | number | No | | | diff --git a/docs/sources/developers/kinds/composable/piechart/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/piechart/panelcfg/schema-reference.md index 9c2a8060c23..89e7cf0bdf4 100644 --- a/docs/sources/developers/kinds/composable/piechart/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/piechart/panelcfg/schema-reference.md @@ -71,10 +71,12 @@ TODO docs TODO docs -| Property | Type | Required | Default | Description | -|----------|--------|----------|---------|---------------------------------------------------------------| -| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | -| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| Property | Type | Required | Default | Description | +|-------------|--------|----------|---------|---------------------------------------------------------------| +| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | +| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| `maxHeight` | number | No | | | +| `maxWidth` | number | No | | | ### PieChartLegendOptions diff --git a/docs/sources/developers/kinds/composable/statetimeline/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/statetimeline/panelcfg/schema-reference.md index be3e14fdc35..38750239165 100644 --- a/docs/sources/developers/kinds/composable/statetimeline/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/statetimeline/panelcfg/schema-reference.md @@ -109,9 +109,11 @@ TODO docs TODO docs -| Property | Type | Required | Default | Description | -|----------|--------|----------|---------|---------------------------------------------------------------| -| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | -| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| Property | Type | Required | Default | Description | +|-------------|--------|----------|---------|---------------------------------------------------------------| +| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | +| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| `maxHeight` | number | No | | | +| `maxWidth` | number | No | | | diff --git a/docs/sources/developers/kinds/composable/statushistory/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/statushistory/panelcfg/schema-reference.md index 1220c13da15..63d454b66a8 100644 --- a/docs/sources/developers/kinds/composable/statushistory/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/statushistory/panelcfg/schema-reference.md @@ -108,9 +108,11 @@ TODO docs TODO docs -| Property | Type | Required | Default | Description | -|----------|--------|----------|---------|---------------------------------------------------------------| -| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | -| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| Property | Type | Required | Default | Description | +|-------------|--------|----------|---------|---------------------------------------------------------------| +| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | +| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| `maxHeight` | number | No | | | +| `maxWidth` | number | No | | | diff --git a/docs/sources/developers/kinds/composable/timeseries/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/timeseries/panelcfg/schema-reference.md index 06347e81826..4f1c350d7c8 100644 --- a/docs/sources/developers/kinds/composable/timeseries/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/timeseries/panelcfg/schema-reference.md @@ -223,9 +223,11 @@ TODO docs TODO docs -| Property | Type | Required | Default | Description | -|----------|--------|----------|---------|---------------------------------------------------------------| -| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | -| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| Property | Type | Required | Default | Description | +|-------------|--------|----------|---------|---------------------------------------------------------------| +| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | +| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| `maxHeight` | number | No | | | +| `maxWidth` | number | No | | | diff --git a/docs/sources/developers/kinds/composable/trend/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/trend/panelcfg/schema-reference.md index 73ec1cfc49c..9bf489e4c0c 100644 --- a/docs/sources/developers/kinds/composable/trend/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/trend/panelcfg/schema-reference.md @@ -215,9 +215,11 @@ TODO docs TODO docs -| Property | Type | Required | Default | Description | -|----------|--------|----------|---------|---------------------------------------------------------------| -| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | -| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| Property | Type | Required | Default | Description | +|-------------|--------|----------|---------|---------------------------------------------------------------| +| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | +| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| `maxHeight` | number | No | | | +| `maxWidth` | number | No | | | diff --git a/docs/sources/developers/kinds/composable/xychart/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/xychart/panelcfg/schema-reference.md index 64886c535c8..17dc2eb6691 100644 --- a/docs/sources/developers/kinds/composable/xychart/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/xychart/panelcfg/schema-reference.md @@ -192,10 +192,12 @@ TODO docs TODO docs -| Property | Type | Required | Default | Description | -|----------|--------|----------|---------|---------------------------------------------------------------| -| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | -| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| Property | Type | Required | Default | Description | +|-------------|--------|----------|---------|---------------------------------------------------------------| +| `mode` | string | **Yes** | | TODO docs
Possible values are: `single`, `multi`, `none`. | +| `sort` | string | **Yes** | | TODO docs
Possible values are: `asc`, `desc`, `none`. | +| `maxHeight` | number | No | | | +| `maxWidth` | number | No | | | ### ScatterSeriesConfig diff --git a/packages/grafana-schema/src/common/common.gen.ts b/packages/grafana-schema/src/common/common.gen.ts index 0288674ce6d..69f962bfeb5 100644 --- a/packages/grafana-schema/src/common/common.gen.ts +++ b/packages/grafana-schema/src/common/common.gen.ts @@ -666,6 +666,8 @@ export enum BarGaugeSizing { * TODO docs */ export interface VizTooltipOptions { + maxHeight?: number; + maxWidth?: number; mode: TooltipDisplayMode; sort: SortOrder; } diff --git a/packages/grafana-schema/src/common/mudball.cue b/packages/grafana-schema/src/common/mudball.cue index ce4c0626d4b..0678d157a15 100644 --- a/packages/grafana-schema/src/common/mudball.cue +++ b/packages/grafana-schema/src/common/mudball.cue @@ -256,6 +256,8 @@ BarGaugeSizing: "auto" | "manual" @cuetsy(kind="enum") VizTooltipOptions: { mode: TooltipDisplayMode sort: SortOrder + maxWidth?: number + maxHeight?: number } @cuetsy(kind="interface") Labels: { diff --git a/packages/grafana-schema/src/raw/composable/candlestick/panelcfg/x/CandlestickPanelCfg_types.gen.ts b/packages/grafana-schema/src/raw/composable/candlestick/panelcfg/x/CandlestickPanelCfg_types.gen.ts index c5f4c5cdc15..659a960d660 100644 --- a/packages/grafana-schema/src/raw/composable/candlestick/panelcfg/x/CandlestickPanelCfg_types.gen.ts +++ b/packages/grafana-schema/src/raw/composable/candlestick/panelcfg/x/CandlestickPanelCfg_types.gen.ts @@ -64,7 +64,7 @@ export const defaultCandlestickColors: Partial = { up: 'green', }; -export interface Options extends common.OptionsWithLegend { +export interface Options extends common.OptionsWithLegend, common.OptionsWithTooltip { /** * Sets the style of the candlesticks */ diff --git a/packages/grafana-schema/src/raw/composable/heatmap/panelcfg/x/HeatmapPanelCfg_types.gen.ts b/packages/grafana-schema/src/raw/composable/heatmap/panelcfg/x/HeatmapPanelCfg_types.gen.ts index 70e0479dc0b..85669926292 100644 --- a/packages/grafana-schema/src/raw/composable/heatmap/panelcfg/x/HeatmapPanelCfg_types.gen.ts +++ b/packages/grafana-schema/src/raw/composable/heatmap/panelcfg/x/HeatmapPanelCfg_types.gen.ts @@ -129,6 +129,8 @@ export interface FilterValueRange { * Controls tooltip options */ export interface HeatmapTooltip { + maxHeight?: number; + maxWidth?: number; /** * Controls how the tooltip is shown */ diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx index 39e9c495f03..5525dd2e9a5 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx @@ -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; @@ -18,22 +24,29 @@ export type ColorIndicatorStyles = ReturnType; export const VizTooltipColorIndicator = ({ color = FALLBACK_COLOR, colorIndicator = DEFAULT_COLOR_INDICATOR, + position = ColorIndicatorPosition.Leading, }: Props) => { const styles = useStyles2(getStyles); return ( ); }; // @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', diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx index 913377d5f86..3b0f70620f4 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx @@ -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 = ({
{color && colorPlacement === ColorPlacement.leading && ( - + )} + {!isPinned ? (
{value}
) : ( @@ -90,10 +95,11 @@ export const VizTooltipRow = ({ )} {color && colorPlacement === ColorPlacement.trailing && ( - <> -   - - + )}
@@ -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, diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx index 1bea358f51c..f5378db98cf 100644 --- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx +++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx @@ -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(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(); - 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, diff --git a/packages/grafana-ui/src/options/builder/tooltip.tsx b/packages/grafana-ui/src/options/builder/tooltip.tsx index 4d8db873967..72af8574d68 100644 --- a/packages/grafana-ui/src/options/builder/tooltip.tsx +++ b/packages/grafana-ui/src/options/builder/tooltip.tsx @@ -42,5 +42,23 @@ export function addTooltipOptions( 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', + }, }); } diff --git a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx index 7aad6f2720f..bae0f5bfb1d 100644 --- a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx +++ b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx @@ -295,6 +295,8 @@ export const CandlestickPanel = ({ /> ); }} + maxWidth={options.tooltip.maxWidth} + maxHeight={options.tooltip.maxHeight} /> ) : ( <> diff --git a/public/app/plugins/panel/candlestick/panelcfg.cue b/public/app/plugins/panel/candlestick/panelcfg.cue index d4d7c769ed6..52c6b8c8a14 100644 --- a/public/app/plugins/panel/candlestick/panelcfg.cue +++ b/public/app/plugins/panel/candlestick/panelcfg.cue @@ -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" | _) diff --git a/public/app/plugins/panel/candlestick/panelcfg.gen.ts b/public/app/plugins/panel/candlestick/panelcfg.gen.ts index 8c704e366fe..f6eafc6f39c 100644 --- a/public/app/plugins/panel/candlestick/panelcfg.gen.ts +++ b/public/app/plugins/panel/candlestick/panelcfg.gen.ts @@ -61,7 +61,7 @@ export const defaultCandlestickColors: Partial = { up: 'green', }; -export interface Options extends common.OptionsWithLegend { +export interface Options extends common.OptionsWithLegend, common.OptionsWithTooltip { /** * Sets the style of the candlesticks */ diff --git a/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx b/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx index bf32a167584..469d07181d4 100644 --- a/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx +++ b/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx @@ -394,6 +394,5 @@ const getStyles = (theme: GrafanaTheme2) => ({ wrapper: css({ display: 'flex', flexDirection: 'column', - width: '280px', }), }); diff --git a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx index 0ab56d8f6b1..1c6d9432062 100644 --- a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx +++ b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx @@ -274,6 +274,8 @@ export const HeatmapPanel = ({ /> ); }} + maxWidth={options.tooltip.maxWidth} + maxHeight={options.tooltip.maxHeight} /> )} (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', diff --git a/public/app/plugins/panel/heatmap/panelcfg.cue b/public/app/plugins/panel/heatmap/panelcfg.cue index 13f690f82de..2bba82710ad 100644 --- a/public/app/plugins/panel/heatmap/panelcfg.cue +++ b/public/app/plugins/panel/heatmap/panelcfg.cue @@ -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 diff --git a/public/app/plugins/panel/heatmap/panelcfg.gen.ts b/public/app/plugins/panel/heatmap/panelcfg.gen.ts index b5589b134e3..2816a19c90c 100644 --- a/public/app/plugins/panel/heatmap/panelcfg.gen.ts +++ b/public/app/plugins/panel/heatmap/panelcfg.gen.ts @@ -126,6 +126,8 @@ export interface FilterValueRange { * Controls tooltip options */ export interface HeatmapTooltip { + maxHeight?: number; + maxWidth?: number; /** * Controls how the tooltip is shown */ diff --git a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx index d04a2960569..f950152b0c5 100644 --- a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx +++ b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx @@ -236,6 +236,8 @@ export const StateTimelinePanel = ({ /> ); }} + maxWidth={options.tooltip.maxWidth} + maxHeight={options.tooltip.maxHeight} /> )} {/* Renders annotations */} diff --git a/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx b/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx index 409b598cc2c..187a12fb9e2 100644 --- a/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx +++ b/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx @@ -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, }), }); diff --git a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx index 0b1891af582..7cd4dc0a6e1 100644 --- a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx +++ b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx @@ -263,6 +263,8 @@ export const StatusHistoryPanel = ({ /> ); }} + maxWidth={options.tooltip.maxWidth} + maxHeight={options.tooltip.maxHeight} /> )} ({ wrapper: css({ display: 'flex', flexDirection: 'column', - width: '280px', }), }); diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx index 659e41390e3..f38587cf9f5 100644 --- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx +++ b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx @@ -141,6 +141,8 @@ export const TimeSeriesPanel = ({ /> ); }} + maxWidth={options.tooltip.maxWidth} + maxHeight={options.tooltip.maxHeight} /> ) : ( <> diff --git a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx index be84e5d8d02..5c6be434311 100644 --- a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx +++ b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx @@ -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, }), }); diff --git a/public/app/plugins/panel/trend/TrendPanel.tsx b/public/app/plugins/panel/trend/TrendPanel.tsx index 4e519a12201..7d96c21e908 100644 --- a/public/app/plugins/panel/trend/TrendPanel.tsx +++ b/public/app/plugins/panel/trend/TrendPanel.tsx @@ -145,6 +145,8 @@ export const TrendPanel = ({ /> ); }} + maxWidth={options.tooltip.maxWidth} + maxHeight={options.tooltip.maxHeight} /> ) : ( { /> ); }} + maxWidth={props.options.tooltip.maxWidth} + maxHeight={props.options.tooltip.maxHeight} /> )} diff --git a/public/app/plugins/panel/xychart/XYChartTooltip.tsx b/public/app/plugins/panel/xychart/XYChartTooltip.tsx index 3970d64b8af..3a79fd6ba21 100644 --- a/public/app/plugins/panel/xychart/XYChartTooltip.tsx +++ b/public/app/plugins/panel/xychart/XYChartTooltip.tsx @@ -131,6 +131,5 @@ const getStyles = (theme: GrafanaTheme2) => ({ wrapper: css({ display: 'flex', flexDirection: 'column', - width: '280px', }), });