diff --git a/public/app/core/components/Picker/Unit/UnitGroup.tsx b/public/app/core/components/Picker/Unit/UnitGroup.tsx index 0bb2dce408e..d1dc5405d25 100644 --- a/public/app/core/components/Picker/Unit/UnitGroup.tsx +++ b/public/app/core/components/Picker/Unit/UnitGroup.tsx @@ -15,11 +15,12 @@ export default class UnitGroup extends PureComponent }; componentDidMount() { - const value = this.props.selectProps.value[this.props.selectProps.value.length - 1].value; - console.log(value); + if (this.props.selectProps) { + const value = this.props.selectProps.value[this.props.selectProps.value.length - 1]; - if (value && this.props.options.some(option => option.value === value)) { - this.setState({ expanded: true }); + if (value && this.props.options.some(option => option.value === value)) { + this.setState({ expanded: true }); + } } } diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx index 7d1dc7d54d1..f34101cfda9 100644 --- a/public/app/plugins/panel/gauge/module.tsx +++ b/public/app/plugins/panel/gauge/module.tsx @@ -7,12 +7,17 @@ import { NullValueMode, PanelOptionsProps, PanelProps } from 'app/types'; import { getTimeSeriesVMs } from 'app/viz/state/timeSeries'; export interface Options { - stat: { value: string; text: string }; - unit: { label: string; value: string }; + decimals: number; + stat: string; + unit: string; } interface Props extends PanelProps {} +interface OptionsState { + decimals: number; +} + const statOptions = [ { value: 'min', text: 'Min' }, { value: 'max', text: 'Max' }, @@ -40,13 +45,15 @@ class GaugePanel extends PureComponent { } } -class GaugeOptions extends PureComponent> { - onUnitChange = value => { - this.props.onChange({ ...this.props.options, unit: value }); - }; +class GaugeOptions extends PureComponent, OptionsState> { + onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value }); - onStatChange = value => { - this.props.onChange({ ...this.props.options, stat: value }); + onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value }); + + onDecimalChange = event => { + if (!isNaN(event.target.value)) { + this.props.onChange({ ...this.props.options, decimals: event.target.value }); + } }; render() { @@ -57,18 +64,27 @@ class GaugeOptions extends PureComponent> {
option.value === this.props.options.stat.value)} width={12} options={statOptions} getOptionLabel={i => i.text} getOptionValue={i => i.value} onSelected={this.onStatChange} - value={this.props.options.stat} + value={statOptions.find(option => option.value === this.props.options.stat)} />
- this.onUnitChange(value)} /> + this.onUnitChange(value)} /> +
+
+ +
diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx index 7d77b6fa130..852b130d0a4 100644 --- a/public/app/viz/Gauge.tsx +++ b/public/app/viz/Gauge.tsx @@ -5,16 +5,17 @@ import config from '../core/config'; import kbn from '../core/utils/kbn'; interface Props { + decimals: number; timeSeries: TimeSeriesVMs; minValue?: number; maxValue?: number; showThresholdMarkers?: boolean; thresholds?: number[]; showThresholdLables?: boolean; - unit: { label: string; value: string }; + unit: string; width: number; height: number; - stat?: { value: string; text: string }; + stat?: string; } const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)']; @@ -40,10 +41,10 @@ export class Gauge extends PureComponent { } formatValue(value) { - const { unit } = this.props; + const { decimals, unit } = this.props; - const formatFunc = kbn.valueFormats[unit.value]; - return formatFunc(value); + const formatFunc = kbn.valueFormats[unit]; + return formatFunc(value, decimals); } draw() { @@ -59,8 +60,6 @@ export class Gauge extends PureComponent { stat, } = this.props; - console.log(stat); - const dimension = Math.min(width, height * 1.3); const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)'; const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)'; @@ -105,7 +104,9 @@ export class Gauge extends PureComponent { value: { color: fontColor, formatter: () => { - return this.formatValue(timeSeries[0].stats[stat.value]); + if (timeSeries[0]) { + return this.formatValue(timeSeries[0].stats[stat]); + } }, font: { size: fontSize,