mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
refactor options, show labels and markers
This commit is contained in:
Peter Holmberg
parent
e0064ed38e
commit
4e1f49f883
42
public/app/plugins/panel/gauge/GaugeOptions.tsx
Normal file
42
public/app/plugins/panel/gauge/GaugeOptions.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { OptionsProps } from './Options';
|
||||
import { Switch } from 'app/core/components/Switch/Switch';
|
||||
|
||||
interface Props {
|
||||
onChange: (item: any) => any;
|
||||
options: OptionsProps;
|
||||
}
|
||||
|
||||
export default class GaugeOptions extends PureComponent<Props> {
|
||||
toggleThresholdLabels = () =>
|
||||
this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
|
||||
|
||||
toggleThresholdMarkers = () =>
|
||||
this.props.onChange({ ...this.props.options, showThresholdMarkers: !this.props.options.showThresholdMarkers });
|
||||
|
||||
render() {
|
||||
const { showThresholdLabels, showThresholdMarkers } = this.props.options;
|
||||
|
||||
return (
|
||||
<div className="section gf-form-group">
|
||||
<h5 className="page-heading">Gauge</h5>
|
||||
<div className="gf-form-inline">
|
||||
<Switch
|
||||
label="Threshold labels"
|
||||
labelClass="width-10"
|
||||
checked={showThresholdLabels}
|
||||
onChange={this.toggleThresholdLabels}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
<Switch
|
||||
label="Threshold labels"
|
||||
labelClass="width-10"
|
||||
checked={showThresholdMarkers}
|
||||
onChange={this.toggleThresholdMarkers}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
28
public/app/plugins/panel/gauge/Options.tsx
Normal file
28
public/app/plugins/panel/gauge/Options.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import ValueOptions from './ValueOptions';
|
||||
import { PanelOptionsProps } from 'app/types';
|
||||
import GaugeOptions from './GaugeOptions';
|
||||
|
||||
export interface OptionsProps {
|
||||
decimals: number;
|
||||
prefix: string;
|
||||
showThresholdLabels: boolean;
|
||||
showThresholdMarkers: boolean;
|
||||
stat: string;
|
||||
suffix: string;
|
||||
unit: string;
|
||||
thresholds: number[];
|
||||
minValue: number;
|
||||
maxValue: number;
|
||||
}
|
||||
|
||||
export default class Options extends PureComponent<PanelOptionsProps<OptionsProps>> {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<ValueOptions onChange={this.props.onChange} options={this.props.options} />
|
||||
<GaugeOptions onChange={this.props.onChange} options={this.props.options} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
85
public/app/plugins/panel/gauge/ValueOptions.tsx
Normal file
85
public/app/plugins/panel/gauge/ValueOptions.tsx
Normal file
@ -0,0 +1,85 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Label } from 'app/core/components/Label/Label';
|
||||
import SimplePicker from 'app/core/components/Picker/SimplePicker';
|
||||
import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker';
|
||||
import { OptionsProps } from './Options';
|
||||
|
||||
const statOptions = [
|
||||
{ value: 'min', text: 'Min' },
|
||||
{ value: 'max', text: 'Max' },
|
||||
{ value: 'avg', text: 'Average' },
|
||||
{ value: 'current', text: 'Current' },
|
||||
{ value: 'total', text: 'Total' },
|
||||
{ value: 'name', text: 'Name' },
|
||||
{ value: 'first', text: 'First' },
|
||||
{ value: 'delta', text: 'Delta' },
|
||||
{ value: 'diff', text: 'Difference' },
|
||||
{ value: 'range', text: 'Range' },
|
||||
{ value: 'last_time', text: 'Time of last point' },
|
||||
];
|
||||
|
||||
const labelWidth = 6;
|
||||
|
||||
interface Props {
|
||||
onChange: (arg: any) => void;
|
||||
options: OptionsProps;
|
||||
}
|
||||
|
||||
export default class ValueOptions extends PureComponent<Props> {
|
||||
onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.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 });
|
||||
}
|
||||
};
|
||||
|
||||
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 className="section gf-form-group">
|
||||
<h5 className="page-heading">Value</h5>
|
||||
<div className="gf-form-inline">
|
||||
<Label width={labelWidth}>Stat</Label>
|
||||
<SimplePicker
|
||||
width={12}
|
||||
options={statOptions}
|
||||
getOptionLabel={i => i.text}
|
||||
getOptionValue={i => i.value}
|
||||
onSelected={this.onStatChange}
|
||||
value={statOptions.find(option => option.value === stat)}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
<Label width={labelWidth}>Unit</Label>
|
||||
<UnitPicker defaultValue={unit} onSelected={value => this.onUnitChange(value)} />
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
<Label width={labelWidth}>Decimals</Label>
|
||||
<input
|
||||
className="gf-form-input width-12"
|
||||
type="number"
|
||||
placeholder="auto"
|
||||
value={decimals || ''}
|
||||
onChange={this.onDecimalChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
<Label width={labelWidth}>Prefix</Label>
|
||||
<input className="gf-form-input width-12" type="text" value={prefix || ''} onChange={this.onPrefixChange} />
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
<Label width={labelWidth}>Suffix</Label>
|
||||
<input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,34 +1,10 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Label } from 'app/core/components/Label/Label';
|
||||
import SimplePicker from 'app/core/components/Picker/SimplePicker';
|
||||
import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker';
|
||||
import Gauge from 'app/viz/Gauge';
|
||||
import { NullValueMode, PanelOptionsProps, PanelProps } from 'app/types';
|
||||
import Options, { OptionsProps } from './Options';
|
||||
import { NullValueMode, PanelProps } from 'app/types';
|
||||
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> {}
|
||||
|
||||
const statOptions = [
|
||||
{ value: 'min', text: 'Min' },
|
||||
{ value: 'max', text: 'Max' },
|
||||
{ value: 'avg', text: 'Average' },
|
||||
{ value: 'current', text: 'Current' },
|
||||
{ value: 'total', text: 'Total' },
|
||||
{ value: 'name', text: 'Name' },
|
||||
{ value: 'first', text: 'First' },
|
||||
{ value: 'delta', text: 'Delta' },
|
||||
{ value: 'diff', text: 'Difference' },
|
||||
{ value: 'range', text: 'Range' },
|
||||
{ value: 'last_time', text: 'Time of last point' },
|
||||
];
|
||||
interface Props extends PanelProps<OptionsProps> {}
|
||||
|
||||
class GaugePanel extends PureComponent<Props> {
|
||||
render() {
|
||||
@ -43,64 +19,4 @@ class GaugePanel extends PureComponent<Props> {
|
||||
}
|
||||
}
|
||||
|
||||
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 });
|
||||
|
||||
onDecimalChange = event => {
|
||||
if (!isNaN(event.target.value)) {
|
||||
this.props.onChange({ ...this.props.options, decimals: event.target.value });
|
||||
}
|
||||
};
|
||||
|
||||
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">
|
||||
<h5 className="page-heading">Value</h5>
|
||||
<div className="gf-form-inline">
|
||||
<Label width={5}>Stat</Label>
|
||||
<SimplePicker
|
||||
width={12}
|
||||
options={statOptions}
|
||||
getOptionLabel={i => i.text}
|
||||
getOptionValue={i => i.value}
|
||||
onSelected={this.onStatChange}
|
||||
value={statOptions.find(option => option.value === stat)}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
<Label width={5}>Unit</Label>
|
||||
<UnitPicker defaultValue={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={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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export { GaugePanel as Panel, GaugeOptions as PanelOptions };
|
||||
export { GaugePanel as Panel, Options as PanelOptions };
|
||||
|
||||
@ -7,15 +7,15 @@ import kbn from '../core/utils/kbn';
|
||||
interface Props {
|
||||
decimals: number;
|
||||
timeSeries: TimeSeriesVMs;
|
||||
minValue?: number;
|
||||
maxValue?: number;
|
||||
showThresholdMarkers?: boolean;
|
||||
thresholds?: number[];
|
||||
showThresholdLables?: boolean;
|
||||
minValue: number;
|
||||
maxValue: number;
|
||||
showThresholdMarkers: boolean;
|
||||
thresholds: number[];
|
||||
showThresholdLabels: boolean;
|
||||
unit: string;
|
||||
width: number;
|
||||
height: number;
|
||||
stat?: string;
|
||||
stat: string;
|
||||
prefix: string;
|
||||
suffix: string;
|
||||
}
|
||||
@ -23,7 +23,6 @@ interface Props {
|
||||
const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
|
||||
|
||||
export class Gauge extends PureComponent<Props> {
|
||||
parentElement: any;
|
||||
canvasElement: any;
|
||||
|
||||
static defaultProps = {
|
||||
@ -31,7 +30,7 @@ export class Gauge extends PureComponent<Props> {
|
||||
maxValue: 100,
|
||||
prefix: '',
|
||||
showThresholdMarkers: true,
|
||||
showThresholdLables: false,
|
||||
showThresholdLabels: false,
|
||||
suffix: '',
|
||||
thresholds: [0, 100],
|
||||
};
|
||||
@ -56,7 +55,7 @@ export class Gauge extends PureComponent<Props> {
|
||||
timeSeries,
|
||||
maxValue,
|
||||
minValue,
|
||||
showThresholdLables,
|
||||
showThresholdLabels,
|
||||
showThresholdMarkers,
|
||||
thresholds,
|
||||
width,
|
||||
@ -64,6 +63,10 @@ export class Gauge extends PureComponent<Props> {
|
||||
stat,
|
||||
} = this.props;
|
||||
|
||||
console.log('-------------------');
|
||||
console.log('showThresholdMarkers', showThresholdMarkers);
|
||||
console.log('showThresholdLabels', showThresholdLabels);
|
||||
|
||||
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)';
|
||||
@ -98,7 +101,7 @@ export class Gauge extends PureComponent<Props> {
|
||||
threshold: {
|
||||
values: formattedThresholds,
|
||||
label: {
|
||||
show: showThresholdLables,
|
||||
show: showThresholdLabels,
|
||||
margin: thresholdMarkersWidth + 1,
|
||||
font: { size: thresholdLabelFontSize },
|
||||
},
|
||||
@ -144,7 +147,7 @@ export class Gauge extends PureComponent<Props> {
|
||||
const { height, width } = this.props;
|
||||
|
||||
return (
|
||||
<div className="singlestat-panel" ref={element => (this.parentElement = element)}>
|
||||
<div className="singlestat-panel">
|
||||
<div
|
||||
style={{
|
||||
height: `${height * 0.9}px`,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user