Skip to content

Commit

Permalink
Allow hiding the TSVB axis for time series (#8504) (#8547)
Browse files Browse the repository at this point in the history
* Allow hiding the TSVB axis for time series
* Compress non-OUI input fields
* Allow setting scale of each axis for time series

---------



(cherry picked from commit 2ffb11f)

Signed-off-by: Miki <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
  • Loading branch information
3 people authored Oct 11, 2024
1 parent 9434dc2 commit 81a96a4
Show file tree
Hide file tree
Showing 12 changed files with 175 additions and 86 deletions.
6 changes: 6 additions & 0 deletions changelogs/fragments/8504.yml
Original file line number Diff line number Diff line change
@@ -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))
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,3 @@
.tvbAggRow__unavailable {
margin-top: -$euiSizeXS;
}

.tvbAgg__input {
@include euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: false);
}
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import {
EuiSpacer,
EuiCompressedFormRow,
EuiCompressedFieldNumber,
EuiFormControlLayout,
} from '@elastic/eui';
import { i18n } from '@osd/i18n';
import { MODEL_TYPES } from '../../../../common/model_options';
Expand Down Expand Up @@ -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?
*/}
<input
className="tvbAgg__input"
type="text"
onChange={handleNumberChange('window')}
value={model.window}
/>
<EuiFormControlLayout compressed={true}>
{/*
EUITODO: The following input couldn't be converted to EUI because of type mis-match.
Should it be text or number?
*/}
<input
className="euiFieldText euiFieldText--compressed"
type="text"
onChange={handleNumberChange('window')}
value={model.window}
/>
</EuiFormControlLayout>
</EuiCompressedFormRow>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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?
*/}
<input
className="tvbAgg__input"
onChange={handleNumberChange('lag')}
value={model.lag}
type="text"
/>
<EuiFormControlLayout compressed={true}>
{/*
EUITODO: The following input couldn't be converted to EUI because of type mis-match.
Should it be text or number?
*/}
<input
className="euiFieldText euiFieldText--compressed"
onChange={handleNumberChange('lag')}
value={model.lag}
type="text"
/>
</EuiFormControlLayout>
</EuiCompressedFormRow>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -206,15 +207,17 @@ const TopHitAggUi = (props) => {
<FormattedMessage id="visTypeTimeseries.topHit.sizeLabel" defaultMessage="Size" />
}
>
{/*
EUITODO: The following input couldn't be converted to EUI because of type mis-match.
Should it be text or number?
*/}
<input
className="tvbAgg__input"
value={model.size}
onChange={handleTextChange('size')}
/>
<EuiFormControlLayout compressed={true}>
{/*
EUITODO: The following input couldn't be converted to EUI because of type mis-match.
Should it be text or number?
*/}
<input
className="euiFieldText euiFieldText--compressed"
value={model.size}
onChange={handleTextChange('size')}
/>
</EuiFormControlLayout>
</EuiCompressedFormRow>
</EuiFlexItem>
<EuiFlexItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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.
*/}
<input
id={htmlId('gaugeMax')}
className="tvbAgg__input"
type="number"
onChange={handleTextChange('gauge_max')}
value={model.gauge_max}
/>
<EuiFormControlLayout compressed={true}>
{/*
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.
*/}
<input
id={htmlId('gaugeMax')}
className="euiFieldText euiFieldText--compressed"
type="number"
onChange={handleTextChange('gauge_max')}
value={model.gauge_max}
/>
</EuiFormControlLayout>
</EuiCompressedFormRow>
</EuiFlexItem>
<EuiFlexItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ import {
EuiHorizontalRule,
EuiCode,
EuiText,
EuiFormControlLayout,
} from '@elastic/eui';
import { FormattedMessage } from '@osd/i18n/react';
import { QueryBarWrapper } from '../query_bar_wrapper';
Expand Down Expand Up @@ -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?
*/}
<input
className="tvbAgg__input"
type="number"
onChange={handleTextChange('pivot_rows')}
value={model.pivot_rows}
/>
<EuiFormControlLayout compressed={true}>
{/*
EUITODO: The following input couldn't be converted to EUI because of type mis-match.
Should it be number or string?
*/}
<input
className="euiFieldText euiFieldText--compressed"
type="number"
onChange={handleTextChange('pivot_rows')}
value={model.pivot_rows}
/>
</EuiFormControlLayout>
</EuiCompressedFormRow>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ import {
EuiCompressedFormRow,
EuiFormLabel,
EuiSpacer,
EuiCompressedFieldText,
EuiCompressedFieldNumber,
EuiTitle,
EuiHorizontalRule,
} from '@elastic/eui';
Expand Down Expand Up @@ -271,7 +271,7 @@ class TimeseriesPanelConfigUi extends Component {
/>
}
>
<EuiCompressedFieldText
<EuiCompressedFieldNumber
onChange={handleTextChange('axis_min')}
value={model.axis_min}
/>
Expand All @@ -287,7 +287,7 @@ class TimeseriesPanelConfigUi extends Component {
/>
}
>
<EuiCompressedFieldText
<EuiCompressedFieldNumber
onChange={handleTextChange('axis_max')}
value={model.axis_max}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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.
*/}
<input
className="tvbAgg__input"
type="number"
disabled={disableSeparateYaxis}
onChange={handleTextChange('axis_min')}
value={model.axis_min}
/>
<EuiFormControlLayout compressed={true}>
{/*
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.
*/}
<input
className="euiFieldText euiFieldText--compressed"
type="number"
disabled={disableSeparateYaxis}
onChange={handleTextChange('axis_min')}
value={model.axis_min}
/>
</EuiFormControlLayout>
</EuiCompressedFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand All @@ -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.
*/}
<input
className="tvbAgg__input"
disabled={disableSeparateYaxis}
onChange={handleTextChange('axis_max')}
value={model.axis_max}
/>
<EuiFormControlLayout compressed={true}>
{/*
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.
*/}
<input
className="euiFieldText euiFieldText--compressed"
type="number"
disabled={disableSeparateYaxis}
onChange={handleTextChange('axis_max')}
value={model.axis_max}
/>
</EuiFormControlLayout>
</EuiCompressedFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand All @@ -560,6 +594,26 @@ export const TimeseriesConfig = injectI18n(function (props) {
/>
</EuiCompressedFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiCompressedFormRow
id={htmlId('axisScale')}
label={
<FormattedMessage
id="visTypeTimeseries.timeseries.optionsTab.axisScaleLabel"
defaultMessage="Axis scale"
/>
}
>
<EuiCompressedComboBox
isClearable={false}
isDisabled={disableSeparateYaxis}
options={scaleOptions}
selectedOptions={selectedAxisScaleOption ? [selectedAxisScaleOption] : []}
onChange={handleSelectChange('axis_scale')}
singleSelection={{ asPlainText: true }}
/>
</EuiCompressedFormRow>
</EuiFlexItem>
</EuiFlexGroup>

<EuiHorizontalRule margin="s" />
Expand Down
Loading

0 comments on commit 81a96a4

Please sign in to comment.