From e67b29f5aa2a3c0084b0e7983d853c2bc19f0516 Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Tue, 9 Jun 2020 12:22:47 +0300
Subject: [PATCH] [TSVB] Allows the user to change the tooltip mode (#67775)
 (#68622)

* Allows the user to select the tooltip mode

* Fix problem on new TSVB and add new field to schema

* Change default value on tooltip dropdown for the focused series option
---
 .../components/panel_config/timeseries.js     | 39 +++++++++++++++++++
 .../components/vis_types/timeseries/vis.js    |  1 +
 .../visualizations/views/timeseries/index.js  |  3 +-
 .../public/metrics_type.ts                    |  1 +
 .../server/routes/post_vis_schema.ts          |  3 ++
 5 files changed, 46 insertions(+), 1 deletion(-)

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 {
               <EuiFlexItem>
                 <YesNo value={model.show_grid} name="show_grid" onChange={this.props.onChange} />
               </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiFormLabel>
+                  <FormattedMessage
+                    id="visTypeTimeseries.timeseries.optionsTab.tooltipMode"
+                    defaultMessage="Tooltip"
+                  />
+                </EuiFormLabel>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiComboBox
+                  isClearable={false}
+                  id={htmlId('tooltipMode')}
+                  options={tooltipModeOptions}
+                  selectedOptions={selectedTooltipMode ? [selectedTooltipMode] : []}
+                  onChange={handleSelectChange('tooltip_mode')}
+                  singleSelection={{ asPlainText: true }}
+                />
+              </EuiFlexItem>
             </EuiFlexGroup>
           </EuiPanel>
         </div>
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,