IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

getting closer with no thresholds

Browse Source
This commit is contained in:
Peter Holmberg 2018-12-14 13:23:22 +01:00
parent 234095e6df
commit 3662f1c007
4 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,8 +29,10 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
return threshold; return threshold;
}); });
// Setting value to a value between the new threshold. // Setting value to a value between the previous thresholds
const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2; const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
// Set a color that lies between the previous thresholds
const color = tinycolor.mix(thresholds[index - 1].color, thresholds[index].color, 50).toRgbString(); const color = tinycolor.mix(thresholds[index - 1].color, thresholds[index].color, 50).toRgbString();
this.setState( this.setState(

5
public/app/plugins/panel/gauge/module.tsx
View File

@ -48,10 +48,7 @@ export const defaultProps = {
stat: '', stat: '',
unit: '', unit: '',
mappings: [], mappings: [],
thresholds: [ thresholds: [],
{ index: 0, value: 0, color: BasicGaugeColor.Green, label: 'Min', canRemove: false },
{ index: 1, value: 100, color: BasicGaugeColor.Red, label: 'Max', canRemove: false },
],
}, },
}; };

5
public/app/types/panel.ts
View File

@ -43,9 +43,8 @@ export enum MappingType {
} }
export enum BasicGaugeColor { export enum BasicGaugeColor {
Green = 'rgba(50, 172, 45, 0.97)', Green = 'lightgreen',
Orange = 'rgba(237, 129, 40, 0.89)', Red = 'red',
Red = 'rgb(212, 74, 58)',
} }
interface BaseMap { interface BaseMap {

17
public/app/viz/Gauge.tsx
View File

@ -34,7 +34,7 @@ export class Gauge extends PureComponent<Props> {
showThresholdMarkers: true, showThresholdMarkers: true,
showThresholdLabels: false, showThresholdLabels: false,
suffix: '', suffix: '',
thresholds: [{ value: 0, color: BasicGaugeColor.Green }, { value: 100, color: BasicGaugeColor.Red }], thresholds: [],
unit: 'none', unit: 'none',
stat: 'avg', stat: 'avg',
}; };
@ -136,13 +136,20 @@ export class Gauge extends PureComponent<Props> {
const thresholdMarkersWidth = gaugeWidth / 5; const thresholdMarkersWidth = gaugeWidth / 5;
const thresholdLabelFontSize = fontSize / 2.5; const thresholdLabelFontSize = fontSize / 2.5;
const formattedThresholds = thresholds.map((threshold, index) => { const formattedThresholds = [
{ value: minValue, color: BasicGaugeColor.Green },
...thresholds.map((threshold, index) => {
return { return {
value: threshold.value, value: threshold.value,
// Hacky way to get correct color for threshold. // Hacky way to get correct color for threshold.
color: index === 0 ? threshold.color : thresholds[index - 1].color, color: index === 0 ? threshold.color : thresholds[index - 1].color,
}; };
}); }),
{
value: maxValue,
color: BasicGaugeColor.Red,
},
];
console.log(formattedThresholds); console.log(formattedThresholds);
@ -174,11 +181,7 @@ export class Gauge extends PureComponent<Props> {
value: { value: {
color: this.getFontColor(value), color: this.getFontColor(value),
formatter: () => { formatter: () => {
if (timeSeries[0]) {
return this.formatValue(value); return this.formatValue(value);
}
return '';
}, },
font: { font: {
size: fontSize, size: fontSize,