Skip to content

N
nexpie-grafana-theme
Commit 37729bf9 by Peter Holmberg
Options

decimals

parent a8cf2dc5
Showing with 39 additions and 21 deletions
public/app/core/components/Picker/Unit/UnitGroup.tsx
...@@ -15,13 +15,14 @@ export default class UnitGroup extends PureComponent<ExtendedGroupProps, State> ...@@ -15,13 +15,14 @@ export default class UnitGroup extends PureComponent<ExtendedGroupProps, State>
}; };
componentDidMount() { componentDidMount() {
const value = this.props.selectProps.value[this.props.selectProps.value.length - 1].value; if (this.props.selectProps) {
console.log(value); const value = this.props.selectProps.value[this.props.selectProps.value.length - 1];
if (value && this.props.options.some(option => option.value === value)) { if (value && this.props.options.some(option => option.value === value)) {
this.setState({ expanded: true }); this.setState({ expanded: true });
} }
} }
}
componentDidUpdate(nextProps) { componentDidUpdate(nextProps) {
if (nextProps.selectProps.inputValue !== '') { if (nextProps.selectProps.inputValue !== '') {
......
public/app/plugins/panel/gauge/module.tsx
...@@ -7,12 +7,17 @@ import { NullValueMode, PanelOptionsProps, PanelProps } from 'app/types'; ...@@ -7,12 +7,17 @@ import { NullValueMode, PanelOptionsProps, PanelProps } from 'app/types';
import { getTimeSeriesVMs } from 'app/viz/state/timeSeries'; import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
export interface Options { export interface Options {
stat: { value: string; text: string }; decimals: number;
unit: { label: string; value: string }; stat: string;
unit: string;
} }
interface Props extends PanelProps<Options> {} interface Props extends PanelProps<Options> {}
interface OptionsState {
decimals: number;
}
const statOptions = [ const statOptions = [
{ value: 'min', text: 'Min' }, { value: 'min', text: 'Min' },
{ value: 'max', text: 'Max' }, { value: 'max', text: 'Max' },
...@@ -40,13 +45,15 @@ class GaugePanel extends PureComponent<Props> { ...@@ -40,13 +45,15 @@ class GaugePanel extends PureComponent<Props> {
} }
} }
class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> { class GaugeOptions extends PureComponent<PanelOptionsProps<Options>, OptionsState> {
onUnitChange = value => { onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
this.props.onChange({ ...this.props.options, unit: value });
}; onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });
onStatChange = value => { onDecimalChange = event => {
this.props.onChange({ ...this.props.options, stat: value }); if (!isNaN(event.target.value)) {
this.props.onChange({ ...this.props.options, decimals: event.target.value });
}
}; };
render() { render() {
...@@ -57,18 +64,27 @@ class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> { ...@@ -57,18 +64,27 @@ class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
<div className="gf-form-inline"> <div className="gf-form-inline">
<Label width={5}>Stat</Label> <Label width={5}>Stat</Label>
<SimplePicker <SimplePicker
defaultValue={statOptions.find(option => option.value === this.props.options.stat.value)}
width={12} width={12}
options={statOptions} options={statOptions}
getOptionLabel={i => i.text} getOptionLabel={i => i.text}
getOptionValue={i => i.value} getOptionValue={i => i.value}
onSelected={this.onStatChange} onSelected={this.onStatChange}
value={this.props.options.stat} value={statOptions.find(option => option.value === this.props.options.stat)}
/> />
</div> </div>
<div className="gf-form-inline"> <div className="gf-form-inline">
<Label width={5}>Unit</Label> <Label width={5}>Unit</Label>
<UnitPicker defaultValue={this.props.options.unit.value} onSelected={value => this.onUnitChange(value)} /> <UnitPicker defaultValue={this.props.options.unit} onSelected={value => this.onUnitChange(value)} />
</div>
<div className="gf-form-inline">
<Label width={5}>Decimals</Label>
<input
className="gf-form-input width-12"
type="number"
placeholder="auto"
value={this.props.options.decimals || ''}
onChange={this.onDecimalChange}
/>
</div> </div>
</div> </div>
</div> </div>
......
public/app/viz/Gauge.tsx
...@@ -5,16 +5,17 @@ import config from '../core/config'; ...@@ -5,16 +5,17 @@ import config from '../core/config';
import kbn from '../core/utils/kbn'; import kbn from '../core/utils/kbn';
interface Props { interface Props {
decimals: number;
timeSeries: TimeSeriesVMs; timeSeries: TimeSeriesVMs;
minValue?: number; minValue?: number;
maxValue?: number; maxValue?: number;
showThresholdMarkers?: boolean; showThresholdMarkers?: boolean;
thresholds?: number[]; thresholds?: number[];
showThresholdLables?: boolean; showThresholdLables?: boolean;
unit: { label: string; value: string }; unit: string;
width: number; width: number;
height: 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)']; 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<Props> { ...@@ -40,10 +41,10 @@ export class Gauge extends PureComponent<Props> {
} }
formatValue(value) { formatValue(value) {
const { unit } = this.props; const { decimals, unit } = this.props;
const formatFunc = kbn.valueFormats[unit.value]; const formatFunc = kbn.valueFormats[unit];
return formatFunc(value); return formatFunc(value, decimals);
} }
draw() { draw() {
...@@ -59,8 +60,6 @@ export class Gauge extends PureComponent<Props> { ...@@ -59,8 +60,6 @@ export class Gauge extends PureComponent<Props> {
stat, stat,
} = this.props; } = this.props;
console.log(stat);
const dimension = Math.min(width, height * 1.3); const dimension = Math.min(width, height * 1.3);
const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)'; 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)'; const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)';
...@@ -105,7 +104,9 @@ export class Gauge extends PureComponent<Props> { ...@@ -105,7 +104,9 @@ export class Gauge extends PureComponent<Props> {
value: { value: {
color: fontColor, color: fontColor,
formatter: () => { formatter: () => {
return this.formatValue(timeSeries[0].stats[stat.value]); if (timeSeries[0]) {
return this.formatValue(timeSeries[0].stats[stat]);
}
}, },
font: { font: {
size: fontSize, size: fontSize,
......
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