Commit 4e1f49f8 by Peter Holmberg

refactor options, show labels and markers

parent e0064ed3
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>
);
}
}
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>
);
}
}
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>
);
}
}
import React, { PureComponent } from 'react'; 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 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'; import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
export interface Options { interface Props extends PanelProps<OptionsProps> {}
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' },
];
class GaugePanel extends PureComponent<Props> { class GaugePanel extends PureComponent<Props> {
render() { render() {
...@@ -43,64 +19,4 @@ class GaugePanel extends PureComponent<Props> { ...@@ -43,64 +19,4 @@ class GaugePanel extends PureComponent<Props> {
} }
} }
class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> { export { GaugePanel as Panel, Options as PanelOptions };
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 };
...@@ -7,15 +7,15 @@ import kbn from '../core/utils/kbn'; ...@@ -7,15 +7,15 @@ import kbn from '../core/utils/kbn';
interface Props { interface Props {
decimals: number; decimals: number;
timeSeries: TimeSeriesVMs; timeSeries: TimeSeriesVMs;
minValue?: number; minValue: number;
maxValue?: number; maxValue: number;
showThresholdMarkers?: boolean; showThresholdMarkers: boolean;
thresholds?: number[]; thresholds: number[];
showThresholdLables?: boolean; showThresholdLabels: boolean;
unit: string; unit: string;
width: number; width: number;
height: number; height: number;
stat?: string; stat: string;
prefix: string; prefix: string;
suffix: string; suffix: string;
} }
...@@ -23,7 +23,6 @@ interface Props { ...@@ -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)']; 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> { export class Gauge extends PureComponent<Props> {
parentElement: any;
canvasElement: any; canvasElement: any;
static defaultProps = { static defaultProps = {
...@@ -31,7 +30,7 @@ export class Gauge extends PureComponent<Props> { ...@@ -31,7 +30,7 @@ export class Gauge extends PureComponent<Props> {
maxValue: 100, maxValue: 100,
prefix: '', prefix: '',
showThresholdMarkers: true, showThresholdMarkers: true,
showThresholdLables: false, showThresholdLabels: false,
suffix: '', suffix: '',
thresholds: [0, 100], thresholds: [0, 100],
}; };
...@@ -56,7 +55,7 @@ export class Gauge extends PureComponent<Props> { ...@@ -56,7 +55,7 @@ export class Gauge extends PureComponent<Props> {
timeSeries, timeSeries,
maxValue, maxValue,
minValue, minValue,
showThresholdLables, showThresholdLabels,
showThresholdMarkers, showThresholdMarkers,
thresholds, thresholds,
width, width,
...@@ -64,6 +63,10 @@ export class Gauge extends PureComponent<Props> { ...@@ -64,6 +63,10 @@ export class Gauge extends PureComponent<Props> {
stat, stat,
} = this.props; } = this.props;
console.log('-------------------');
console.log('showThresholdMarkers', showThresholdMarkers);
console.log('showThresholdLabels', showThresholdLabels);
const dimension = Math.min(width, height * 1.3); const dimension = Math.min(width, height * 1.3);
const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)'; 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)'; const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)';
...@@ -98,7 +101,7 @@ export class Gauge extends PureComponent<Props> { ...@@ -98,7 +101,7 @@ export class Gauge extends PureComponent<Props> {
threshold: { threshold: {
values: formattedThresholds, values: formattedThresholds,
label: { label: {
show: showThresholdLables, show: showThresholdLabels,
margin: thresholdMarkersWidth + 1, margin: thresholdMarkersWidth + 1,
font: { size: thresholdLabelFontSize }, font: { size: thresholdLabelFontSize },
}, },
...@@ -144,7 +147,7 @@ export class Gauge extends PureComponent<Props> { ...@@ -144,7 +147,7 @@ export class Gauge extends PureComponent<Props> {
const { height, width } = this.props; const { height, width } = this.props;
return ( return (
<div className="singlestat-panel" ref={element => (this.parentElement = element)}> <div className="singlestat-panel">
<div <div
style={{ style={{
height: `${height * 0.9}px`, 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