Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow hiding the TSVB axis for time series #8504

Merged
merged 2 commits into from
Oct 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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 @@
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 @@
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 = [

Check warning on line 140 in src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js#L140

Added line #L140 was not covered by tests
{
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;

Check warning on line 157 in src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js#L156-L157

Added lines #L156 - L157 were not covered by tests
});

const chartTypeOptions = [
{
label: intl.formatMessage({
Expand Down Expand Up @@ -505,17 +534,19 @@
/>
}
>
{/*
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 @@
/>
}
>
{/*
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 @@
/>
</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
Loading