From 0cbfbe6efe2d79327f65b2b80da1d1fd04fc2138 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 10 Oct 2024 16:42:22 +0000 Subject: [PATCH] Allow hiding the TSVB axis for time series (#8504) * Allow hiding the TSVB axis for time series Also: * Compress non-OUI input fields * Allow setting scale of each axis for time series Signed-off-by: Miki * Changeset file for PR #8504 created/updated --------- Signed-off-by: Miki Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit 2ffb11f6c99bf8153bf5e5b9c8c36f10ccecce15) Signed-off-by: github-actions[bot] --- changelogs/fragments/8504.yml | 6 ++ .../application/components/aggs/_agg_row.scss | 4 - .../components/aggs/moving_average.js | 23 ++-- .../components/aggs/serial_diff.js | 23 ++-- .../application/components/aggs/top_hit.js | 21 ++-- .../components/panel_config/gauge.js | 25 +++-- .../components/panel_config/table.js | 23 ++-- .../components/panel_config/timeseries.js | 6 +- .../components/vis_types/timeseries/config.js | 102 +++++++++++++----- .../components/vis_types/timeseries/vis.js | 21 +++- .../visualizations/constants/chart.js | 6 ++ .../public/metrics_type.ts | 1 + 12 files changed, 175 insertions(+), 86 deletions(-) create mode 100644 changelogs/fragments/8504.yml diff --git a/changelogs/fragments/8504.yml b/changelogs/fragments/8504.yml new file mode 100644 index 000000000000..3ccc6590581d --- /dev/null +++ b/changelogs/fragments/8504.yml @@ -0,0 +1,6 @@ +feat: +- Allow hiding the TSVB axis for time series visualizations ([#8504](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8504)) +- Allow setting scale of each axis for TSVB time series ([#8504](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8504)) + +fix: +- Compress non-OUI input fields in TSVB visualizations ([#8504](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8504)) \ No newline at end of file diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/_agg_row.scss b/src/plugins/vis_type_timeseries/public/application/components/aggs/_agg_row.scss index f021d0f1905a..13c874435d36 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/aggs/_agg_row.scss +++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/_agg_row.scss @@ -17,7 +17,3 @@ .tvbAggRow__unavailable { margin-top: -$euiSizeXS; } - -.tvbAgg__input { - @include euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: false); -} diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/moving_average.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/moving_average.js index 22254d3d4a08..cdc80d0650a9 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/aggs/moving_average.js +++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/moving_average.js @@ -45,6 +45,7 @@ import { EuiSpacer, EuiCompressedFormRow, EuiCompressedFieldNumber, + EuiFormControlLayout, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; import { MODEL_TYPES } from '../../../../common/model_options'; @@ -207,16 +208,18 @@ export const MovingAverageAgg = (props) => { }) } > - {/* - EUITODO: The following input couldn't be converted to EUI because of type mis-match. - Should it be text or number? - */} - + + {/* + EUITODO: The following input couldn't be converted to EUI because of type mis-match. + Should it be text or number? + */} + + diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/serial_diff.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/serial_diff.js index b3fb682d7bb6..dfc8b9101605 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/aggs/serial_diff.js +++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/serial_diff.js @@ -43,6 +43,7 @@ import { EuiFormLabel, EuiCompressedFormRow, EuiSpacer, + EuiFormControlLayout, } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public'; @@ -117,16 +118,18 @@ export const SerialDiffAgg = (props) => { /> } > - {/* - EUITODO: The following input couldn't be converted to EUI because of type mis-match. - Should it be text or number? - */} - + + {/* + EUITODO: The following input couldn't be converted to EUI because of type mis-match. + Should it be text or number? + */} + + diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/top_hit.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/top_hit.js index 7580c1c881bd..65ed49714a6e 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/aggs/top_hit.js +++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/top_hit.js @@ -44,6 +44,7 @@ import { EuiCompressedComboBox, EuiSpacer, EuiCompressedFormRow, + EuiFormControlLayout, } from '@elastic/eui'; import { injectI18n, FormattedMessage } from '@osd/i18n/react'; import { OSD_FIELD_TYPES } from '../../../../../../plugins/data/public'; @@ -206,15 +207,17 @@ const TopHitAggUi = (props) => { } > - {/* - EUITODO: The following input couldn't be converted to EUI because of type mis-match. - Should it be text or number? - */} - + + {/* + EUITODO: The following input couldn't be converted to EUI because of type mis-match. + Should it be text or number? + */} + + diff --git a/src/plugins/vis_type_timeseries/public/application/components/panel_config/gauge.js b/src/plugins/vis_type_timeseries/public/application/components/panel_config/gauge.js index d623915074a9..1d2b32a035d4 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/panel_config/gauge.js +++ b/src/plugins/vis_type_timeseries/public/application/components/panel_config/gauge.js @@ -52,6 +52,7 @@ import { EuiCompressedFieldNumber, EuiTitle, EuiHorizontalRule, + EuiFormControlLayout, } from '@elastic/eui'; import { injectI18n, FormattedMessage } from '@osd/i18n/react'; import { QueryBarWrapper } from '../query_bar_wrapper'; @@ -215,17 +216,19 @@ class GaugePanelConfigUi extends Component { /> } > - {/* - EUITODO: The following input couldn't be converted to EUI because of type mis-match. - It accepts a null value, but is passed a empty string. - */} - + + {/* + EUITODO: The following input couldn't be converted to EUI because of type mis-match. + It accepts a null value, but is passed a empty string. + */} + + diff --git a/src/plugins/vis_type_timeseries/public/application/components/panel_config/table.js b/src/plugins/vis_type_timeseries/public/application/components/panel_config/table.js index e5ce1e9f9865..a7fef70aeaed 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/panel_config/table.js +++ b/src/plugins/vis_type_timeseries/public/application/components/panel_config/table.js @@ -52,6 +52,7 @@ import { EuiHorizontalRule, EuiCode, EuiText, + EuiFormControlLayout, } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import { QueryBarWrapper } from '../query_bar_wrapper'; @@ -164,16 +165,18 @@ export class TablePanelConfig extends Component { /> } > - {/* - EUITODO: The following input couldn't be converted to EUI because of type mis-match. - Should it be number or string? - */} - + + {/* + EUITODO: The following input couldn't be converted to EUI because of type mis-match. + Should it be number or string? + */} + + 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 ac95f5450df1..09c094178502 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 @@ -48,7 +48,7 @@ import { EuiCompressedFormRow, EuiFormLabel, EuiSpacer, - EuiCompressedFieldText, + EuiCompressedFieldNumber, EuiTitle, EuiHorizontalRule, } from '@elastic/eui'; @@ -271,7 +271,7 @@ class TimeseriesPanelConfigUi extends Component { /> } > - @@ -287,7 +287,7 @@ class TimeseriesPanelConfigUi extends Component { /> } > - diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js index d0a4af543610..41dd2fee0bc2 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js @@ -47,13 +47,14 @@ import { EuiCompressedFieldNumber, EuiFormLabel, EuiSpacer, + EuiFormControlLayout, } from '@elastic/eui'; import { FormattedMessage, injectI18n } from '@osd/i18n/react'; import { getDefaultQueryLanguage } from '../../lib/get_default_query_language'; import { QueryBarWrapper } from '../../query_bar_wrapper'; import { isPercentDisabled } from '../../lib/stacked'; -import { STACKED_OPTIONS } from '../../../visualizations/constants/chart'; +import { STACKED_OPTIONS, AXIS_POSITION } from '../../../visualizations/constants/chart'; export const TimeseriesConfig = injectI18n(function (props) { const handleSelectChange = createSelectHandler(props.onChange); @@ -114,20 +115,48 @@ export const TimeseriesConfig = injectI18n(function (props) { id: 'visTypeTimeseries.timeSeries.rightLabel', defaultMessage: 'Right', }), - value: 'right', + value: AXIS_POSITION.RIGHT, }, { label: intl.formatMessage({ id: 'visTypeTimeseries.timeSeries.leftLabel', defaultMessage: 'Left', }), - value: 'left', + value: AXIS_POSITION.LEFT, + }, + { + label: intl.formatMessage({ + id: 'visTypeTimeseries.timeSeries.hiddenLabel', + defaultMessage: 'Hidden', + }), + value: AXIS_POSITION.HIDDEN, }, ]; + const selectedAxisPosOption = positionOptions.find((option) => { return model.axis_position === option.value; }); + const scaleOptions = [ + { + label: intl.formatMessage({ + id: 'visTypeTimeseries.timeseries.scaleOptions.normalLabel', + defaultMessage: 'Normal', + }), + value: 'normal', + }, + { + label: intl.formatMessage({ + id: 'visTypeTimeseries.timeseries.scaleOptions.logLabel', + defaultMessage: 'Log', + }), + value: 'log', + }, + ]; + const selectedAxisScaleOption = scaleOptions.find((option) => { + return model.axis_scale === option.value; + }); + const chartTypeOptions = [ { label: intl.formatMessage({ @@ -505,17 +534,19 @@ export const TimeseriesConfig = injectI18n(function (props) { /> } > - {/* - EUITODO: The following input couldn't be converted to EUI because of type mis-match. - It accepts a null value, but is passed a empty string. - */} - + + {/* + EUITODO: The following input couldn't be converted to EUI because of type mis-match. + It accepts a null value, but is passed a empty string. + */} + + @@ -528,16 +559,19 @@ export const TimeseriesConfig = injectI18n(function (props) { /> } > - {/* - EUITODO: The following input couldn't be converted to EUI because of type mis-match. - It accepts a null value, but is passed a empty string. - */} - + + {/* + EUITODO: The following input couldn't be converted to EUI because of type mis-match. + It accepts a null value, but is passed a empty string. + */} + + @@ -560,6 +594,26 @@ export const TimeseriesConfig = injectI18n(function (props) { /> + + + } + > + + + 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 db0dc4de77a6..cbf293cb1781 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 @@ -43,7 +43,7 @@ import { replaceVars } from '../../lib/replace_vars'; import { getAxisLabelString } from '../../lib/get_axis_label_string'; import { getInterval } from '../../lib/get_interval'; import { createXaxisFormatter } from '../../lib/create_xaxis_formatter'; -import { STACKED_OPTIONS } from '../../../visualizations/constants'; +import { STACKED_OPTIONS, AXIS_POSITION } from '../../../visualizations/constants'; import { getCoreStart } from '../../../../services'; export class TimeseriesVisualization extends Component { @@ -202,7 +202,11 @@ export class TimeseriesVisualization extends Component { seriesGroup.axisFormatter = 'percent'; seriesGroup.axis_min = seriesGroup.axis_min || 0; seriesGroup.axis_max = seriesGroup.axis_max || 1; - seriesGroup.axis_position = model.axis_position; + // If the axis is hidden, arbitrarily set it to left + seriesGroup.axis_position = + seriesGroup.axis_position === AXIS_POSITION.HIDDEN + ? AXIS_POSITION.LEFT + : model.axis_position; } series @@ -219,8 +223,11 @@ export class TimeseriesVisualization extends Component { domain, groupId, id: yAxisIdGenerator(seriesGroup.id), - position: seriesGroup.axis_position, - hide: isStackedWithinSeries, + position: + seriesGroup.axis_position === AXIS_POSITION.HIDDEN + ? AXIS_POSITION.LEFT + : seriesGroup.axis_position, + hide: isStackedWithinSeries || seriesGroup.axis_position === AXIS_POSITION.HIDDEN, tickFormatter: seriesGroup.stacked === STACKED_OPTIONS.PERCENT ? this.yAxisStackedByPercentFormatter @@ -231,7 +238,11 @@ export class TimeseriesVisualization extends Component { tickFormatter: allSeriesHaveSameFormatters ? seriesGroupTickFormatter : (val) => val, id: yAxisIdGenerator('main'), groupId: mainAxisGroupId, - position: model.axis_position, + position: + seriesGroup.axis_position === AXIS_POSITION.HIDDEN + ? AXIS_POSITION.LEFT + : model.axis_position, + hide: seriesGroup.axis_position === AXIS_POSITION.HIDDEN, domain: mainAxisDomain, }); diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/constants/chart.js b/src/plugins/vis_type_timeseries/public/application/visualizations/constants/chart.js index a9a82d5c2bef..a21111cad21d 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/constants/chart.js +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/constants/chart.js @@ -51,3 +51,9 @@ export const STACKED_OPTIONS = { STACKED: 'stacked', STACKED_WITHIN_SERIES: 'stacked_within_series', }; + +export const AXIS_POSITION = { + LEFT: 'left', + RIGHT: 'right', + HIDDEN: 'hidden', +}; diff --git a/src/plugins/vis_type_timeseries/public/metrics_type.ts b/src/plugins/vis_type_timeseries/public/metrics_type.ts index ed3ea21c25e2..337689e2f57d 100644 --- a/src/plugins/vis_type_timeseries/public/metrics_type.ts +++ b/src/plugins/vis_type_timeseries/public/metrics_type.ts @@ -65,6 +65,7 @@ export const metricsVisDefinition = { ], separate_axis: 0, axis_position: 'right', + axis_scale: 'normal', formatter: 'number', chart_type: 'line', line_width: 1,