IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 16:15:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

mixing color when

Browse Source
This commit is contained in:
Peter Holmberg 2018-12-12 16:16:05 +01:00
parent 4dbfcde782
commit dbba523d3b
1 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
public/app/plugins/panel/gauge/Thresholds.tsx
View File

@ -1,5 +1,6 @@
import React, { PureComponent } from 'react';
import classNames from 'classnames/bind';
import tinycolor from 'tinycolor2';
import { ColorPicker } from 'app/core/components/colorpicker/ColorPicker';
import { OptionModuleProps } from './module';
import { Threshold } from 'app/types';
@ -21,7 +22,7 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
this.state = {
thresholds: this.props.options.thresholds || [
{ index: 0, label: 'Min', value: 0, canRemove: false, color: BasicGaugeColor.Green },
{ index: 1, label: 'Max', value: 100, canRemove: false },
{ index: 1, label: 'Max', value: 100, canRemove: false, color: BasicGaugeColor.Red },
],
};
}
@ -39,12 +40,13 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
// Setting value to a value between the new threshold.
const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
const color = tinycolor.mix(thresholds[index - 1].color, thresholds[index].color, 50).toRgbString();
this.setState(
{
thresholds: this.sortThresholds([
...newThresholds,
{ index: index, label: '', value: value, canRemove: true, color: BasicGaugeColor.Orange },
{ index: index, label: '', value: value, canRemove: true, color: color },
]),
},
() => this.updateGauge()
@ -127,7 +129,6 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
const { thresholds } = this.state;
const min = thresholds[0];
const max = thresholds[1];
return [
<div className="threshold-row threshold-row-min" key="min">
@ -154,18 +155,6 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
<div className="threshold-row-add-label">Add new threshold by clicking the line.</div>
</div>
</div>,
<div className="threshold-row threshold-row-max" key="max">
<div className="threshold-row-inner">
<div className="threshold-row-color" />
<input
className="threshold-row-input"
onBlur={this.onBlur}
onChange={event => this.onChangeThresholdValue(event, max)}
value={max.value}
/>
<div className="threshold-row-label">{max.label}</div>
</div>
</div>,
];
}
@ -173,6 +162,10 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
const { thresholds } = this.state;
return thresholds.map((threshold, index) => {
if (index === thresholds.length - 1) {
return null;
}
const rowStyle = classNames({
'threshold-row': true,
'threshold-row-min': index === 0,
@ -183,14 +176,15 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
<div className={rowStyle} key={`${threshold.index}-${index}`}>
<div className="threshold-row-inner">
<div className="threshold-row-color">
{threshold.color && (
<div className="threshold-row-color-inner">
<ColorPicker
color={threshold.color}
onChange={color => this.onChangeThresholdColor(threshold, color)}
/>
</div>
)}
{threshold.color &&
index !== thresholds.length - 1 && (
<div className="threshold-row-color-inner">
<ColorPicker
color={threshold.color}
onChange={color => this.onChangeThresholdColor(threshold, color)}
/>
</div>
)}
</div>
<input
className="threshold-row-input"
@ -288,6 +282,7 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
render() {
const { thresholds } = this.state;
const max = thresholds[thresholds.length - 1];
return (
<div className="section gf-form-group">
@ -296,6 +291,18 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
<div className="color-indicators">{this.renderIndicator()}</div>
<div className="threshold-rows">
{thresholds.length > 2 ? this.renderThresholds() : this.renderNoThresholds()}
<div className="threshold-row threshold-row-max">
<div className="threshold-row-inner">
<div className="threshold-row-color" />
<input
className="threshold-row-input"
onBlur={this.onBlur}
onChange={event => this.onChangeThresholdValue(event, max)}
value={max.value}
/>
<div className="threshold-row-label">{max.label}</div>
</div>
</div>
</div>
</div>
</div>