IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

prefix and suffix

Browse Source
This commit is contained in:
Peter Holmberg 2018-11-19 16:00:18 +01:00
parent 37729bf9f1
commit 22e64eb287
2 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
public/app/plugins/panel/gauge/module.tsx
View File

@ -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<Options> {}
interface OptionsState {
decimals: number;
}
const statOptions = [
{ value: 'min', text: 'Min' },
{ value: 'max', text: 'Max' },
@ -45,7 +43,7 @@ class GaugePanel extends PureComponent<Props> {
}
}
class GaugeOptions extends PureComponent<PanelOptionsProps<Options>, OptionsState> {
class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
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<PanelOptionsProps<Options>, 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 (
<div>
<div className="section gf-form-group">
@ -69,12 +72,12 @@ class GaugeOptions extends PureComponent<PanelOptionsProps<Options>, 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)}
/>
</div>
<div className="gf-form-inline">
<Label width={5}>Unit</Label>
<UnitPicker defaultValue={this.props.options.unit} onSelected={value => this.onUnitChange(value)} />
<UnitPicker defaultValue={unit} onSelected={value => this.onUnitChange(value)} />
</div>
<div className="gf-form-inline">
<Label width={5}>Decimals</Label>
@ -82,10 +85,18 @@ class GaugeOptions extends PureComponent<PanelOptionsProps<Options>, OptionsStat
className="gf-form-input width-12"
type="number"
placeholder="auto"
value={this.props.options.decimals || ''}
value={decimals || ''}
onChange={this.onDecimalChange}
/>
</div>
<div className="gf-form-inline">
<Label width={5}>Prefix</Label>
<input className="gf-form-input width-12" type="text" value={prefix || ''} onChange={this.onPrefixChange} />
</div>
<div className="gf-form-inline">
<Label width={5}>Suffix</Label>
<input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
</div>
</div>
</div>
);

10
public/app/viz/Gauge.tsx
View File

@ -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<Props> {
static defaultProps = {
minValue: 0,
maxValue: 100,
prefix: '',
showThresholdMarkers: true,
showThresholdLables: false,
suffix: '',
thresholds: [0, 100],
};
@ -41,10 +45,10 @@ export class Gauge extends PureComponent<Props> {
}
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<Props> {
if (timeSeries[0]) {
return this.formatValue(timeSeries[0].stats[stat]);
}
return '';
},
font: {
size: fontSize,