diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx index f34101cfda9..cef89ff7894 100644 --- a/public/app/plugins/panel/gauge/module.tsx +++ b/public/app/plugins/panel/gauge/module.tsx @@ -8,16 +8,14 @@ import { getTimeSeriesVMs } from 'app/viz/state/timeSeries'; export interface Options { decimals: number; + prefix: string; stat: string; + suffix: string; unit: string; } interface Props extends PanelProps {} -interface OptionsState { - decimals: number; -} - const statOptions = [ { value: 'min', text: 'Min' }, { value: 'max', text: 'Max' }, @@ -45,7 +43,7 @@ class GaugePanel extends PureComponent { } } -class GaugeOptions extends PureComponent, OptionsState> { +class GaugeOptions extends PureComponent> { onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value }); onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value }); @@ -56,7 +54,12 @@ class GaugeOptions extends PureComponent, OptionsStat } }; + onPrefixChange = event => this.props.onChange({ ...this.props.options, prefix: event.target.value }); + + onSuffixChange = event => this.props.onChange({ ...this.props.options, suffix: event.target.value }); + render() { + const { stat, unit, decimals, prefix, suffix } = this.props.options; return (
@@ -69,12 +72,12 @@ class GaugeOptions extends PureComponent, OptionsStat getOptionLabel={i => i.text} getOptionValue={i => i.value} onSelected={this.onStatChange} - value={statOptions.find(option => option.value === this.props.options.stat)} + value={statOptions.find(option => option.value === stat)} />
- this.onUnitChange(value)} /> + this.onUnitChange(value)} />
@@ -82,10 +85,18 @@ class GaugeOptions extends PureComponent, OptionsStat className="gf-form-input width-12" type="number" placeholder="auto" - value={this.props.options.decimals || ''} + value={decimals || ''} onChange={this.onDecimalChange} />
+
+ + +
+
+ + +
); diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx index 852b130d0a4..950b01a96f5 100644 --- a/public/app/viz/Gauge.tsx +++ b/public/app/viz/Gauge.tsx @@ -16,6 +16,8 @@ interface Props { width: number; height: number; stat?: string; + prefix: string; + suffix: string; } const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)']; @@ -27,8 +29,10 @@ export class Gauge extends PureComponent { static defaultProps = { minValue: 0, maxValue: 100, + prefix: '', showThresholdMarkers: true, showThresholdLables: false, + suffix: '', thresholds: [0, 100], }; @@ -41,10 +45,10 @@ export class Gauge extends PureComponent { } formatValue(value) { - const { decimals, unit } = this.props; + const { decimals, prefix, suffix, unit } = this.props; const formatFunc = kbn.valueFormats[unit]; - return formatFunc(value, decimals); + return `${prefix} ${formatFunc(value, decimals)} ${suffix}`; } draw() { @@ -107,6 +111,8 @@ export class Gauge extends PureComponent { if (timeSeries[0]) { return this.formatValue(timeSeries[0].stats[stat]); } + + return ''; }, font: { size: fontSize,