in src/plugins/vis_type_timeseries/public/application/components/panel_config/gauge.js [90:348]
render() {
const { selectedTab } = this.state;
const { intl } = this.props;
const defaults = {
gauge_max: '',
filter: { query: '', language: getDefaultQueryLanguage() },
gauge_style: 'circle',
gauge_inner_width: '',
gauge_width: '',
};
const model = { ...defaults, ...this.props.model };
const handleSelectChange = createSelectHandler(this.props.onChange);
const handleTextChange = createTextHandler(this.props.onChange);
const styleOptions = [
{
label: intl.formatMessage({
id: 'visTypeTimeseries.gauge.styleOptions.circleLabel',
defaultMessage: 'Circle',
}),
value: 'circle',
},
{
label: intl.formatMessage({
id: 'visTypeTimeseries.gauge.styleOptions.halfCircleLabel',
defaultMessage: 'Half Circle',
}),
value: 'half',
},
];
const htmlId = htmlIdGenerator();
const selectedGaugeStyleOption = styleOptions.find((option) => {
return model.gauge_style === option.value;
});
let view;
if (selectedTab === 'data') {
view = (
<SeriesEditor
colorPicker={true}
fields={this.props.fields}
limit={limitOfSeries[PANEL_TYPES.GAUGE]}
model={this.props.model}
name={this.props.name}
onChange={this.props.onChange}
/>
);
} else {
view = (
<div className="tvbPanelConfig__container">
<EuiPanel>
<EuiTitle size="s">
<span>
<FormattedMessage
id="visTypeTimeseries.gauge.optionsTab.dataLabel"
defaultMessage="Data"
/>
</span>
</EuiTitle>
<EuiSpacer size="m" />
<IndexPattern
fields={this.props.fields}
model={this.props.model}
onChange={this.props.onChange}
/>
<EuiHorizontalRule />
<EuiFlexGroup responsive={false} wrap={true}>
<EuiFlexItem>
<EuiFormRow
id={htmlId('panelFilter')}
label={
<FormattedMessage
id="visTypeTimeseries.gauge.optionsTab.panelFilterLabel"
defaultMessage="Panel filter"
/>
}
fullWidth
>
<QueryBarWrapper
query={{
language: model.filter.language || getDefaultQueryLanguage(),
query: model.filter.query || '',
}}
onChange={(filter) => this.props.onChange({ filter })}
indexPatterns={[model.index_pattern || model.default_index_pattern]}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormLabel>
<FormattedMessage
id="visTypeTimeseries.gauge.optionsTab.ignoreGlobalFilterLabel"
defaultMessage="Ignore global filter?"
/>
</EuiFormLabel>
<EuiSpacer size="m" />
<YesNo
value={model.ignore_global_filter}
name="ignore_global_filter"
onChange={this.props.onChange}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
<EuiSpacer />
<EuiPanel>
<EuiTitle size="s">
<span>
<FormattedMessage
id="visTypeTimeseries.gauge.optionsTab.styleLabel"
defaultMessage="Style"
/>
</span>
</EuiTitle>
<EuiSpacer size="m" />
<EuiFlexGroup responsive={false} wrap={true}>
<EuiFlexItem>
<EuiFormRow
id={htmlId('gaugeMax')}
label={
<FormattedMessage
id="visTypeTimeseries.gauge.optionsTab.gaugeMaxLabel"
defaultMessage="Gauge max (empty for auto)"
/>
}
>
{/*
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}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
id={htmlId('gaugeStyle')}
label={
<FormattedMessage
id="visTypeTimeseries.gauge.optionsTab.gaugeStyleLabel"
defaultMessage="Gauge style"
/>
}
>
<EuiComboBox
isClearable={false}
options={styleOptions}
selectedOptions={selectedGaugeStyleOption ? [selectedGaugeStyleOption] : []}
onChange={handleSelectChange('gauge_style')}
singleSelection={{ asPlainText: true }}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
id={htmlId('innerLine')}
label={
<FormattedMessage
id="visTypeTimeseries.gauge.optionsTab.innerLineWidthLabel"
defaultMessage="Inner line width"
/>
}
>
<EuiFieldNumber
onChange={handleTextChange('gauge_inner_width')}
value={Number(model.gauge_inner_width)}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
id={htmlId('gaugeLine')}
label={
<FormattedMessage
id="visTypeTimeseries.gauge.optionsTab.gaugeLineWidthLabel"
defaultMessage="Gauge line width"
/>
}
>
<EuiFieldNumber
onChange={handleTextChange('gauge_width')}
value={Number(model.gauge_width)}
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
<EuiHorizontalRule />
<EuiFlexGroup responsive={false} wrap={true} alignItems="center">
<EuiFlexItem grow={false}>
<EuiFormLabel>
<FormattedMessage
id="visTypeTimeseries.gauge.optionsTab.backgroundColorLabel"
defaultMessage="Background color:"
/>
</EuiFormLabel>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ColorPicker
onChange={this.props.onChange}
name="background_color"
value={model.background_color}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormLabel>
<FormattedMessage
id="visTypeTimeseries.gauge.optionsTab.innerColorLabel"
defaultMessage="Inner color:"
/>
</EuiFormLabel>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ColorPicker
onChange={this.props.onChange}
name="gauge_inner_color"
value={model.gauge_inner_color}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiHorizontalRule />
<EuiTitle size="xxs">
<span>
<FormattedMessage
id="visTypeTimeseries.gauge.optionsTab.colorRulesLabel"
defaultMessage="Color rules"
/>
</span>
</EuiTitle>
<EuiSpacer size="s" />
<ColorRules
primaryName="gauge color"
primaryVarName="gauge"
secondaryName="text color"
secondaryVarName="text"
model={model}
onChange={this.props.onChange}
name="gauge_color_rules"
/>
</EuiPanel>
</div>
);
}
return (
<>
<EuiTabs size="s">
<EuiTab isSelected={selectedTab === 'data'} onClick={() => this.switchTab('data')}>