apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor options, show labels and markers

Browse Source
pull/14234/head
Peter Holmberg 7 years ago
parent e0064ed38e
commit 4e1f49f883
5 changed files with 173 additions and 99 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 42
      public/app/plugins/panel/gauge/GaugeOptions.tsx
  2. 28
      public/app/plugins/panel/gauge/Options.tsx
  3. 85
      public/app/plugins/panel/gauge/ValueOptions.tsx
  4. 92
      public/app/plugins/panel/gauge/module.tsx
  5. 25
      public/app/viz/Gauge.tsx

42
public/app/plugins/panel/gauge/GaugeOptions.tsx
Unescape View 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
Unescape View 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
Unescape View 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>
);
}
}

92
public/app/plugins/panel/gauge/module.tsx
Unescape View File

@ -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 };

25
public/app/viz/Gauge.tsx
Unescape View File

@ -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`,

Write Preview
Loading…
Cancel
Save