[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,