Skip to content

N
nexpie-grafana-theme
Commit 4e1f49f8 by Peter Holmberg
Options

refactor options, show labels and markers

parent e0064ed3
Showing with 173 additions and 99 deletions
public/app/plugins/panel/gauge/GaugeOptions.tsx 0 → 100644
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>
);
}
}
public/app/plugins/panel/gauge/Options.tsx 0 → 100644
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>
);
}
}
public/app/plugins/panel/gauge/ValueOptions.tsx 0 → 100644
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>
);
}
}
public/app/plugins/panel/gauge/module.tsx
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 };
public/app/viz/Gauge.tsx
......@@ -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`,
......
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