Commit 8615de81 by Peter Holmberg

moving min/max to gauge options

parent 1f533ddf
import React, { PureComponent } from 'react';
import { Switch } from 'app/core/components/Switch/Switch';
import { OptionModuleProps } from './module';
import { Label } from '../../../core/components/Label/Label';
export default class GaugeOptions extends PureComponent<OptionModuleProps> {
toggleThresholdLabels = () =>
onToggleThresholdLabels = () =>
this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
toggleThresholdMarkers = () =>
onToggleThresholdMarkers = () =>
this.props.onChange({ ...this.props.options, showThresholdMarkers: !this.props.options.showThresholdMarkers });
onMinValueChange = ({ target }) => this.props.onChange({ ...this.props.options, minValue: target.value });
onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value });
render() {
const { showThresholdLabels, showThresholdMarkers } = this.props.options;
......@@ -20,7 +25,7 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> {
label="Threshold labels"
labelClass="width-10"
checked={showThresholdLabels}
onChange={this.toggleThresholdLabels}
onChange={this.onToggleThresholdLabels}
/>
</div>
<div className="gf-form-inline">
......@@ -28,9 +33,17 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> {
label="Threshold markers"
labelClass="width-10"
checked={showThresholdMarkers}
onChange={this.toggleThresholdMarkers}
onChange={this.onToggleThresholdMarkers}
/>
</div>
<div className="gf-form-inline">
<Label width={6}>Min value</Label>
<input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} />
</div>
<div className="gf-form-inline">
<Label width={6}>Max value</Label>
<input type="text" className="gf-form-input width-12" onChange={this.onMaxValueChange} />
</div>
</div>
);
}
......
......@@ -169,22 +169,20 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
const rowStyle = classNames({
'threshold-row': true,
'threshold-row-min': index === 0,
'threshold-row-max': index === thresholds.length - 1,
});
return (
<div className={rowStyle} key={`${threshold.index}-${index}`}>
<div className="threshold-row-inner">
<div className="threshold-row-color">
{threshold.color &&
index !== thresholds.length - 1 && (
<div className="threshold-row-color-inner">
<ColorPicker
color={threshold.color}
onChange={color => this.onChangeThresholdColor(threshold, color)}
/>
</div>
)}
{threshold.color && (
<div className="threshold-row-color-inner">
<ColorPicker
color={threshold.color}
onChange={color => this.onChangeThresholdColor(threshold, color)}
/>
</div>
)}
</div>
<input
className="threshold-row-input"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment