Skip to content

N
nexpie-grafana-theme
Commit 234095e6 by Peter Holmberg
Options

starting with threshold refactor

parent c78d5fb2
Showing with 86 additions and 85 deletions
public/app/plugins/panel/gauge/GaugeOptions.tsx
...@@ -15,7 +15,7 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> { ...@@ -15,7 +15,7 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> {
onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value }); onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value });
render() { render() {
const { showThresholdLabels, showThresholdMarkers } = this.props.options; const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = this.props.options;
return ( return (
<div className="section gf-form-group"> <div className="section gf-form-group">
...@@ -38,11 +38,11 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> { ...@@ -38,11 +38,11 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> {
</div> </div>
<div className="gf-form-inline"> <div className="gf-form-inline">
<Label width={6}>Min value</Label> <Label width={6}>Min value</Label>
<input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} /> <input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} />
</div> </div>
<div className="gf-form-inline"> <div className="gf-form-inline">
<Label width={6}>Max value</Label> <Label width={6}>Max value</Label>
<input type="text" className="gf-form-input width-12" onChange={this.onMaxValueChange} /> <input type="text" className="gf-form-input width-12" onChange={this.onMaxValueChange} value={maxValue} />
</div> </div>
</div> </div>
); );
......
public/app/plugins/panel/gauge/Thresholds.tsx
...@@ -88,6 +88,7 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State> ...@@ -88,6 +88,7 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
); );
}; };
onChangeBaseColor = color => this.props.onChange({ ...this.props.options, baseColor: color });
onBlur = () => { onBlur = () => {
this.setState(prevState => ({ this.setState(prevState => ({
thresholds: this.sortThresholds(prevState.thresholds), thresholds: this.sortThresholds(prevState.thresholds),
...@@ -116,47 +117,10 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State> ...@@ -116,47 +117,10 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
return index < thresholds.length ? thresholds[index].color : BasicGaugeColor.Red; return index < thresholds.length ? thresholds[index].color : BasicGaugeColor.Red;
}; };
renderNoThresholds() {
const { thresholds } = this.state;
const min = thresholds[0];
return [
<div className="threshold-row threshold-row-min" key="min">
<div className="threshold-row-inner">
<div className="threshold-row-color">
<div className="threshold-row-color-inner">
<ColorPicker color={min.color} onChange={color => this.onChangeThresholdColor(min, color)} />
</div>
</div>
<input
className="threshold-row-input"
onBlur={this.onBlur}
onChange={event => this.onChangeThresholdValue(event, min)}
value={min.value}
/>
<div className="threshold-row-label">{min.label}</div>
</div>
</div>,
<div className="threshold-row" key="add">
<div className="threshold-row-inner">
<div onClick={() => this.onAddThreshold(1)} className="threshold-row-add">
<i className="fa fa-plus" />
</div>
<div className="threshold-row-add-label">Add new threshold by clicking the line.</div>
</div>
</div>,
];
}
renderThresholds() { renderThresholds() {
const { thresholds } = this.state; const { thresholds } = this.state;
return thresholds.map((threshold, index) => { return thresholds.map((threshold, index) => {
if (index === thresholds.length - 1) {
return null;
}
const rowStyle = classNames({ const rowStyle = classNames({
'threshold-row': true, 'threshold-row': true,
'threshold-row-min': index === 0, 'threshold-row-min': index === 0,
...@@ -182,13 +146,9 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State> ...@@ -182,13 +146,9 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
value={threshold.value} value={threshold.value}
onBlur={this.onBlur} onBlur={this.onBlur}
/> />
{threshold.canRemove ? ( <div onClick={() => this.onRemoveThreshold(threshold)} className="threshold-row-remove">
<div onClick={() => this.onRemoveThreshold(threshold)} className="threshold-row-remove"> <i className="fa fa-times" />
<i className="fa fa-times" /> </div>
</div>
) : (
<div className="threshold-row-label">{threshold.label}</div>
)}
</div> </div>
</div> </div>
); );
...@@ -260,38 +220,47 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State> ...@@ -260,38 +220,47 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
renderIndicator() { renderIndicator() {
const { thresholds } = this.state; const { thresholds } = this.state;
return thresholds.map((t, i) => { if (thresholds.length > 0) {
if (i <= thresholds.length - 1) { return thresholds.map((t, i) => {
return this.renderIndicatorSection(i); if (i <= thresholds.length - 1) {
} return this.renderIndicatorSection(i);
}
return null; return null;
}); });
}
return (
<div className="indicator-section" style={{ height: '100%' }}>
<div
onClick={() => this.onAddThreshold(0)}
style={{ height: '100%', backgroundColor: this.props.options.baseColor }}
/>
</div>
);
} }
render() { render() {
const { thresholds } = this.state; const { thresholds } = this.state;
const max = thresholds[thresholds.length - 1];
return ( return (
<div className="section gf-form-group"> <div className="section gf-form-group">
<h5 className="page-heading">Thresholds</h5> <h5 className="page-heading">Thresholds</h5>
<span>Click the colored line to add a threshold</span>
<div className="thresholds"> <div className="thresholds">
<div className="color-indicators">{this.renderIndicator()}</div> <div className="color-indicators">{this.renderIndicator()}</div>
<div className="threshold-rows"> <div className="threshold-rows">
{thresholds.length > 2 ? this.renderThresholds() : this.renderNoThresholds()} <div className="threshold-row threshold-row-base">
<div className="threshold-row threshold-row-max">
<div className="threshold-row-inner"> <div className="threshold-row-inner">
<div className="threshold-row-color" /> <div className="threshold-row-color">
<input <div className="threshold-row-color-inner">
className="threshold-row-input" <ColorPicker color={BasicGaugeColor.Green} onChange={color => this.onChangeBaseColor(color)} />
onBlur={this.onBlur} </div>
onChange={event => this.onChangeThresholdValue(event, max)} </div>
value={max.value} <div className="threshold-row-label">Base</div>
/>
<div className="threshold-row-label">{max.label}</div>
</div> </div>
</div> </div>
{thresholds.length > 0 && this.renderThresholds()}
</div> </div>
</div> </div>
</div> </div>
......
public/app/plugins/panel/gauge/module.tsx
...@@ -16,15 +16,18 @@ import { ...@@ -16,15 +16,18 @@ import {
} from 'app/types'; } from 'app/types';
export interface OptionsProps { export interface OptionsProps {
baseColor: string;
decimals: number; decimals: number;
mappings: Array<RangeMap | ValueMap>;
maxValue: number;
minValue: number;
prefix: string; prefix: string;
showThresholdLabels: boolean; showThresholdLabels: boolean;
showThresholdMarkers: boolean; showThresholdMarkers: boolean;
stat: string; stat: string;
suffix: string; suffix: string;
unit: string;
thresholds: Threshold[]; thresholds: Threshold[];
mappings: Array<RangeMap | ValueMap>; unit: string;
} }
export interface OptionModuleProps { export interface OptionModuleProps {
...@@ -34,6 +37,7 @@ export interface OptionModuleProps { ...@@ -34,6 +37,7 @@ export interface OptionModuleProps {
export const defaultProps = { export const defaultProps = {
options: { options: {
baseColor: BasicGaugeColor.Green,
minValue: 0, minValue: 0,
maxValue: 100, maxValue: 100,
prefix: '', prefix: '',
...@@ -45,8 +49,8 @@ export const defaultProps = { ...@@ -45,8 +49,8 @@ export const defaultProps = {
unit: '', unit: '',
mappings: [], mappings: [],
thresholds: [ thresholds: [
{ index: 0, label: 'Min', value: 0, canRemove: false, color: BasicGaugeColor.Green }, { index: 0, value: 0, color: BasicGaugeColor.Green, label: 'Min', canRemove: false },
{ index: 1, label: 'Max', value: 100, canRemove: false }, { index: 1, value: 100, color: BasicGaugeColor.Red, label: 'Max', canRemove: false },
], ],
}, },
}; };
......
public/app/viz/Gauge.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import $ from 'jquery'; import $ from 'jquery';
import { MappingType, RangeMap, Threshold, TimeSeriesVMs, ValueMap } from 'app/types'; import { BasicGaugeColor, MappingType, RangeMap, Threshold, TimeSeriesVMs, ValueMap } from 'app/types';
import config from '../core/config'; import config from '../core/config';
import kbn from '../core/utils/kbn'; import kbn from '../core/utils/kbn';
interface Props { interface Props {
baseColor: string;
decimals: number; decimals: number;
height: number; height: number;
mappings: Array<RangeMap | ValueMap>; mappings: Array<RangeMap | ValueMap>;
...@@ -25,6 +26,7 @@ export class Gauge extends PureComponent<Props> { ...@@ -25,6 +26,7 @@ export class Gauge extends PureComponent<Props> {
canvasElement: any; canvasElement: any;
static defaultProps = { static defaultProps = {
baseColor: BasicGaugeColor.Green,
maxValue: 100, maxValue: 100,
mappings: [], mappings: [],
minValue: 0, minValue: 0,
...@@ -32,11 +34,9 @@ export class Gauge extends PureComponent<Props> { ...@@ -32,11 +34,9 @@ export class Gauge extends PureComponent<Props> {
showThresholdMarkers: true, showThresholdMarkers: true,
showThresholdLabels: false, showThresholdLabels: false,
suffix: '', suffix: '',
thresholds: [ thresholds: [{ value: 0, color: BasicGaugeColor.Green }, { value: 100, color: BasicGaugeColor.Red }],
{ label: 'Min', value: 0, color: 'rgba(50, 172, 45, 0.97)' },
{ label: 'Max', value: 100, color: 'rgba(245, 54, 54, 0.9)' },
],
unit: 'none', unit: 'none',
stat: 'avg',
}; };
componentDidMount() { componentDidMount() {
...@@ -92,12 +92,43 @@ export class Gauge extends PureComponent<Props> { ...@@ -92,12 +92,43 @@ export class Gauge extends PureComponent<Props> {
return `${prefix} ${formattedValue} ${suffix}`; return `${prefix} ${formattedValue} ${suffix}`;
} }
getFontColor(value) {
const { baseColor, thresholds } = this.props;
if (thresholds.length > 0) {
const foo = thresholds.filter(t => value <= t.value);
if (foo.length > 0) {
return foo[0].color;
}
}
return baseColor;
}
draw() { draw() {
const { timeSeries, showThresholdLabels, showThresholdMarkers, thresholds, width, height, stat } = this.props; const {
maxValue,
minValue,
timeSeries,
showThresholdLabels,
showThresholdMarkers,
thresholds,
width,
height,
stat,
} = this.props;
let value: string | number = '';
if (timeSeries[0]) {
value = timeSeries[0].stats[stat];
} else {
value = 'N/A';
}
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 fontScale = parseInt('80', 10) / 100; const fontScale = parseInt('80', 10) / 100;
const fontSize = Math.min(dimension / 5, 100) * fontScale; const fontSize = Math.min(dimension / 5, 100) * fontScale;
const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1; const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
...@@ -113,12 +144,14 @@ export class Gauge extends PureComponent<Props> { ...@@ -113,12 +144,14 @@ export class Gauge extends PureComponent<Props> {
}; };
}); });
console.log(formattedThresholds);
const options = { const options = {
series: { series: {
gauges: { gauges: {
gauge: { gauge: {
min: thresholds[0].value, min: minValue,
max: thresholds[thresholds.length - 1].value, max: maxValue,
background: { color: backgroundColor }, background: { color: backgroundColor },
border: { color: null }, border: { color: null },
shadow: { show: false }, shadow: { show: false },
...@@ -139,10 +172,10 @@ export class Gauge extends PureComponent<Props> { ...@@ -139,10 +172,10 @@ export class Gauge extends PureComponent<Props> {
width: thresholdMarkersWidth, width: thresholdMarkersWidth,
}, },
value: { value: {
color: fontColor, color: this.getFontColor(value),
formatter: () => { formatter: () => {
if (timeSeries[0]) { if (timeSeries[0]) {
return this.formatValue(timeSeries[0].stats[stat]); return this.formatValue(value);
} }
return ''; return '';
...@@ -157,11 +190,6 @@ export class Gauge extends PureComponent<Props> { ...@@ -157,11 +190,6 @@ export class Gauge extends PureComponent<Props> {
}, },
}; };
let value: string | number = 'N/A';
if (timeSeries.length) {
value = timeSeries[0].stats[stat];
}
const plotSeries = { const plotSeries = {
data: [[0, value]], data: [[0, value]],
}; };
......
public/sass/components/_thresholds.scss
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
padding: 5px 8px; padding: 5px 8px;
} }
.threshold-row-min { .threshold-row-base {
margin-top: -22px; margin-top: -22px;
} }
......
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