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 { export interface Options {
decimals: number; decimals: number;
prefix: string;
stat: string; stat: string;
suffix: string;
unit: 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' },
@ -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 }); onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.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() { render() {
const { stat, unit, decimals, prefix, suffix } = this.props.options;
return ( return (
<div> <div>
<div className="section gf-form-group"> <div className="section gf-form-group">
@ -69,12 +72,12 @@ class GaugeOptions extends PureComponent<PanelOptionsProps<Options>, OptionsStat
getOptionLabel={i => i.text} getOptionLabel={i => i.text}
getOptionValue={i => i.value} getOptionValue={i => i.value}
onSelected={this.onStatChange} onSelected={this.onStatChange}
value={statOptions.find(option => option.value === this.props.options.stat)} value={statOptions.find(option => option.value === 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} onSelected={value => this.onUnitChange(value)} /> <UnitPicker defaultValue={unit} onSelected={value => this.onUnitChange(value)} />
</div> </div>
<div className="gf-form-inline"> <div className="gf-form-inline">
<Label width={5}>Decimals</Label> <Label width={5}>Decimals</Label>
@ -82,10 +85,18 @@ class GaugeOptions extends PureComponent<PanelOptionsProps<Options>, OptionsStat
className="gf-form-input width-12" className="gf-form-input width-12"
type="number" type="number"
placeholder="auto" placeholder="auto"
value={this.props.options.decimals || ''} value={decimals || ''}
onChange={this.onDecimalChange} onChange={this.onDecimalChange}
/> />
</div> </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>
</div> </div>
); );

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

@ -16,6 +16,8 @@ interface Props {
width: number; width: number;
height: number; height: number;
stat?: string; 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)']; 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 = { static defaultProps = {
minValue: 0, minValue: 0,
maxValue: 100, maxValue: 100,
prefix: '',
showThresholdMarkers: true, showThresholdMarkers: true,
showThresholdLables: false, showThresholdLables: false,
suffix: '',
thresholds: [0, 100], thresholds: [0, 100],
}; };
@ -41,10 +45,10 @@ export class Gauge extends PureComponent<Props> {
} }
formatValue(value) { formatValue(value) {
const { decimals, unit } = this.props; const { decimals, prefix, suffix, unit } = this.props;
const formatFunc = kbn.valueFormats[unit]; const formatFunc = kbn.valueFormats[unit];
return formatFunc(value, decimals); return `${prefix} ${formatFunc(value, decimals)} ${suffix}`;
} }
draw() { draw() {
@ -107,6 +111,8 @@ export class Gauge extends PureComponent<Props> {
if (timeSeries[0]) { if (timeSeries[0]) {
return this.formatValue(timeSeries[0].stats[stat]); return this.formatValue(timeSeries[0].stats[stat]);
} }
return '';
}, },
font: { font: {
size: fontSize, size: fontSize,