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

Candlestick: Add tooltip options (#81307)

Browse Source
This commit is contained in:
Adela Almasan 2024-01-26 10:02:44 -06:00 committed by GitHub
parent 8ca080d47c
commit 09fcb3c6cc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,8 @@ import { OptionsWithTooltip, TooltipDisplayMode, SortOrder } from '@grafana/sche
export function addTooltipOptions<T extends OptionsWithTooltip>(
builder: PanelOptionsEditorBuilder<T>,
singleOnly = false
singleOnly = false,
defaultOptions?: Partial<OptionsWithTooltip>
) {
const category = ['Tooltip'];
const modeOptions = singleOnly
@ -28,7 +29,7 @@ export function addTooltipOptions<T extends OptionsWithTooltip>(
path: 'tooltip.mode',
name: 'Tooltip mode',
category,
defaultValue: 'single',
defaultValue: defaultOptions?.tooltip?.mode ?? TooltipDisplayMode.Single,
settings: {
options: modeOptions,
},
@ -37,7 +38,7 @@ export function addTooltipOptions<T extends OptionsWithTooltip>(
path: 'tooltip.sort',
name: 'Values sort order',
category,
defaultValue: SortOrder.None,
defaultValue: defaultOptions?.tooltip?.sort ?? SortOrder.None,
showIf: (options: T) => options.tooltip?.mode === TooltipDisplayMode.Multi,
settings: {
options: sortOptions,

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

@ -266,7 +266,9 @@ export const CandlestickPanel = ({
{showNewVizTooltips ? (
<TooltipPlugin2
config={uplotConfig}
hoverMode={TooltipHoverMode.xAll}
hoverMode={
options.tooltip.mode === TooltipDisplayMode.Single ? TooltipHoverMode.xOne : TooltipHoverMode.xAll
}
queryZoom={onChangeTimeRange}
clientZoom={true}
render={(u, dataIdxs, seriesIdx, isPinned = false, dismiss, timeRange2, viaSync) => {
@ -293,14 +295,14 @@ export const CandlestickPanel = ({
seriesFrame={alignedDataFrame}
dataIdxs={dataIdxs}
seriesIdx={seriesIdx}
mode={TooltipDisplayMode.Multi}
mode={options.tooltip.mode}
isPinned={isPinned}
annotate={enableAnnotationCreation ? annotate : undefined}
/>
);
}}
maxWidth={options.tooltip?.maxWidth}
maxHeight={options.tooltip?.maxHeight}
maxWidth={options.tooltip.maxWidth}
maxHeight={options.tooltip.maxHeight}
/>
) : (
<>

5
public/app/plugins/panel/candlestick/module.tsx
View File

@ -137,7 +137,10 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(CandlestickPane
},
});
// commonOptionsBuilder.addTooltipOptions(builder);
if (config.featureToggles.newVizTooltips) {
commonOptionsBuilder.addTooltipOptions(builder, false, opts);
}
commonOptionsBuilder.addLegendOptions(builder);
})
.setDataSupport({ annotations: true, alertStates: true })

6
public/app/plugins/panel/candlestick/types.ts
View File

@ -1,4 +1,4 @@
import { LegendDisplayMode } from '@grafana/schema';
import { LegendDisplayMode, SortOrder, TooltipDisplayMode } from '@grafana/schema';
import {
defaultOptions as defaultOptionsBase,
@ -21,6 +21,10 @@ export const defaultOptions: Partial<Options> = {
placement: 'bottom',
calcs: [],
},
tooltip: {
mode: TooltipDisplayMode.Multi,
sort: SortOrder.None,
},
};
export {