diff --git a/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.js b/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.js index 0b8b4be67b7a..3e5e335a9ea3 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.js +++ b/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.js @@ -61,6 +61,7 @@ class TimeseriesPanelConfigUi extends Component { axis_min: '', legend_position: 'right', show_grid: 1, + tooltip_mode: 'show_all', }; const model = { ...defaults, ...this.props.model }; const { selectedTab } = this.state; @@ -85,6 +86,22 @@ class TimeseriesPanelConfigUi extends Component { value: 'left', }, ]; + const tooltipModeOptions = [ + { + label: intl.formatMessage({ + id: 'visTypeTimeseries.timeseries.tooltipOptions.showAll', + defaultMessage: 'Show all values', + }), + value: 'show_all', + }, + { + label: intl.formatMessage({ + id: 'visTypeTimeseries.timeseries.tooltipOptions.showFocused', + defaultMessage: 'Show focused values', + }), + value: 'show_focused', + }, + ]; const selectedPositionOption = positionOptions.find((option) => { return model.axis_position === option.value; }); @@ -134,6 +151,10 @@ class TimeseriesPanelConfigUi extends Component { return model.legend_position === option.value; }); + const selectedTooltipMode = tooltipModeOptions.find((option) => { + return model.tooltip_mode === option.value; + }); + let view; if (selectedTab === 'data') { view = ( @@ -356,6 +377,24 @@ class TimeseriesPanelConfigUi extends Component { + + + + + + + + diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js index b4c563f3c11f..ddfaf3c1428d 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js @@ -250,6 +250,7 @@ export class TimeseriesVisualization extends Component { showGrid={Boolean(model.show_grid)} legend={Boolean(model.show_legend)} legendPosition={model.legend_position} + tooltipMode={model.tooltip_mode} xAxisLabel={getAxisLabelString(interval)} xAxisFormatter={this.xAxisFormatter(interval)} annotations={this.prepareAnnotations()} diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js index 274b46bce271..c53482b5db07 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js @@ -61,6 +61,7 @@ export const TimeSeries = ({ showGrid, legend, legendPosition, + tooltipMode, xAxisLabel, series, yAxis, @@ -131,7 +132,7 @@ export const TimeSeries = ({ baseTheme={theme} tooltip={{ snap: true, - type: TooltipType.VerticalCursor, + type: tooltipMode === 'show_focused' ? TooltipType.Follow : TooltipType.VerticalCursor, headerFormatter: tooltipFormatter, }} /> diff --git a/src/plugins/vis_type_timeseries/public/metrics_type.ts b/src/plugins/vis_type_timeseries/public/metrics_type.ts index 2b0734ceb4d4..c06f94efb3c4 100644 --- a/src/plugins/vis_type_timeseries/public/metrics_type.ts +++ b/src/plugins/vis_type_timeseries/public/metrics_type.ts @@ -69,6 +69,7 @@ export const metricsVisDefinition = { axis_scale: 'normal', show_legend: 1, show_grid: 1, + tooltip_mode: 'show_all', }, component: VisEditor, }, diff --git a/src/plugins/vis_type_timeseries/server/routes/post_vis_schema.ts b/src/plugins/vis_type_timeseries/server/routes/post_vis_schema.ts index e8838f57ae36..bf2ea8651c5a 100644 --- a/src/plugins/vis_type_timeseries/server/routes/post_vis_schema.ts +++ b/src/plugins/vis_type_timeseries/server/routes/post_vis_schema.ts @@ -247,6 +247,9 @@ export const visPayloadSchema = schema.object({ series: schema.arrayOf(seriesItems), show_grid: numberIntegerRequired, show_legend: numberIntegerRequired, + tooltip_mode: schema.maybe( + schema.oneOf([schema.literal('show_all'), schema.literal('show_focused')]) + ), time_field: stringOptionalNullable, time_range_mode: stringOptionalNullable, type: stringRequired,