[TSVB] Allows the user to change the tooltip mode (#67775)
* 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
This commit is contained in:
parent
e74440b138
commit
88754d2cb2
|
@ -61,6 +61,7 @@ class TimeseriesPanelConfigUi extends Component {
|
||||||
axis_min: '',
|
axis_min: '',
|
||||||
legend_position: 'right',
|
legend_position: 'right',
|
||||||
show_grid: 1,
|
show_grid: 1,
|
||||||
|
tooltip_mode: 'show_all',
|
||||||
};
|
};
|
||||||
const model = { ...defaults, ...this.props.model };
|
const model = { ...defaults, ...this.props.model };
|
||||||
const { selectedTab } = this.state;
|
const { selectedTab } = this.state;
|
||||||
|
@ -85,6 +86,22 @@ class TimeseriesPanelConfigUi extends Component {
|
||||||
value: 'left',
|
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) => {
|
const selectedPositionOption = positionOptions.find((option) => {
|
||||||
return model.axis_position === option.value;
|
return model.axis_position === option.value;
|
||||||
});
|
});
|
||||||
|
@ -134,6 +151,10 @@ class TimeseriesPanelConfigUi extends Component {
|
||||||
return model.legend_position === option.value;
|
return model.legend_position === option.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const selectedTooltipMode = tooltipModeOptions.find((option) => {
|
||||||
|
return model.tooltip_mode === option.value;
|
||||||
|
});
|
||||||
|
|
||||||
let view;
|
let view;
|
||||||
if (selectedTab === 'data') {
|
if (selectedTab === 'data') {
|
||||||
view = (
|
view = (
|
||||||
|
@ -356,6 +377,24 @@ class TimeseriesPanelConfigUi extends Component {
|
||||||
<EuiFlexItem>
|
<EuiFlexItem>
|
||||||
<YesNo value={model.show_grid} name="show_grid" onChange={this.props.onChange} />
|
<YesNo value={model.show_grid} name="show_grid" onChange={this.props.onChange} />
|
||||||
</EuiFlexItem>
|
</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>
|
</EuiFlexGroup>
|
||||||
</EuiPanel>
|
</EuiPanel>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -250,6 +250,7 @@ export class TimeseriesVisualization extends Component {
|
||||||
showGrid={Boolean(model.show_grid)}
|
showGrid={Boolean(model.show_grid)}
|
||||||
legend={Boolean(model.show_legend)}
|
legend={Boolean(model.show_legend)}
|
||||||
legendPosition={model.legend_position}
|
legendPosition={model.legend_position}
|
||||||
|
tooltipMode={model.tooltip_mode}
|
||||||
xAxisLabel={getAxisLabelString(interval)}
|
xAxisLabel={getAxisLabelString(interval)}
|
||||||
xAxisFormatter={this.xAxisFormatter(interval)}
|
xAxisFormatter={this.xAxisFormatter(interval)}
|
||||||
annotations={this.prepareAnnotations()}
|
annotations={this.prepareAnnotations()}
|
||||||
|
|
|
@ -61,6 +61,7 @@ export const TimeSeries = ({
|
||||||
showGrid,
|
showGrid,
|
||||||
legend,
|
legend,
|
||||||
legendPosition,
|
legendPosition,
|
||||||
|
tooltipMode,
|
||||||
xAxisLabel,
|
xAxisLabel,
|
||||||
series,
|
series,
|
||||||
yAxis,
|
yAxis,
|
||||||
|
@ -131,7 +132,7 @@ export const TimeSeries = ({
|
||||||
baseTheme={theme}
|
baseTheme={theme}
|
||||||
tooltip={{
|
tooltip={{
|
||||||
snap: true,
|
snap: true,
|
||||||
type: TooltipType.VerticalCursor,
|
type: tooltipMode === 'show_focused' ? TooltipType.Follow : TooltipType.VerticalCursor,
|
||||||
headerFormatter: tooltipFormatter,
|
headerFormatter: tooltipFormatter,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -69,6 +69,7 @@ export const metricsVisDefinition = {
|
||||||
axis_scale: 'normal',
|
axis_scale: 'normal',
|
||||||
show_legend: 1,
|
show_legend: 1,
|
||||||
show_grid: 1,
|
show_grid: 1,
|
||||||
|
tooltip_mode: 'show_all',
|
||||||
},
|
},
|
||||||
component: VisEditor,
|
component: VisEditor,
|
||||||
},
|
},
|
||||||
|
|
|
@ -247,6 +247,9 @@ export const visPayloadSchema = schema.object({
|
||||||
series: schema.arrayOf(seriesItems),
|
series: schema.arrayOf(seriesItems),
|
||||||
show_grid: numberIntegerRequired,
|
show_grid: numberIntegerRequired,
|
||||||
show_legend: numberIntegerRequired,
|
show_legend: numberIntegerRequired,
|
||||||
|
tooltip_mode: schema.maybe(
|
||||||
|
schema.oneOf([schema.literal('show_all'), schema.literal('show_focused')])
|
||||||
|
),
|
||||||
time_field: stringOptionalNullable,
|
time_field: stringOptionalNullable,
|
||||||
time_range_mode: stringOptionalNullable,
|
time_range_mode: stringOptionalNullable,
|
||||||
type: stringRequired,
|
type: stringRequired,
|
||||||
|
|
Loading…
Reference in a new issue