[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
elastic · Jun 9, 2020 · e67b29f · e67b29f
1 parent 6a9dbbc
commit e67b29f
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,