diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx index d2e04323db4..e27dba7f400 100644 --- a/public/app/plugins/panel/gauge/Thresholds.tsx +++ b/public/app/plugins/panel/gauge/Thresholds.tsx @@ -29,8 +29,10 @@ export default class Thresholds extends PureComponent 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; + + // Set a color that lies between the previous thresholds const color = tinycolor.mix(thresholds[index - 1].color, thresholds[index].color, 50).toRgbString(); this.setState( diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx index 9e0370394b4..152e7c20b5e 100644 --- a/public/app/plugins/panel/gauge/module.tsx +++ b/public/app/plugins/panel/gauge/module.tsx @@ -48,10 +48,7 @@ export const defaultProps = { stat: '', unit: '', mappings: [], - thresholds: [ - { index: 0, value: 0, color: BasicGaugeColor.Green, label: 'Min', canRemove: false }, - { index: 1, value: 100, color: BasicGaugeColor.Red, label: 'Max', canRemove: false }, - ], + thresholds: [], }, }; diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts index 92c5125d3d6..b69f4e7d927 100644 --- a/public/app/types/panel.ts +++ b/public/app/types/panel.ts @@ -43,9 +43,8 @@ export enum MappingType { } export enum BasicGaugeColor { - Green = 'rgba(50, 172, 45, 0.97)', - Orange = 'rgba(237, 129, 40, 0.89)', - Red = 'rgb(212, 74, 58)', + Green = 'lightgreen', + Red = 'red', } interface BaseMap { diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx index 7afa512a00f..e6e04e8b5de 100644 --- a/public/app/viz/Gauge.tsx +++ b/public/app/viz/Gauge.tsx @@ -34,7 +34,7 @@ export class Gauge extends PureComponent { showThresholdMarkers: true, showThresholdLabels: false, suffix: '', - thresholds: [{ value: 0, color: BasicGaugeColor.Green }, { value: 100, color: BasicGaugeColor.Red }], + thresholds: [], unit: 'none', stat: 'avg', }; @@ -136,13 +136,20 @@ export class Gauge extends PureComponent { const thresholdMarkersWidth = gaugeWidth / 5; const thresholdLabelFontSize = fontSize / 2.5; - const formattedThresholds = thresholds.map((threshold, index) => { - return { - value: threshold.value, - // Hacky way to get correct color for threshold. - color: index === 0 ? threshold.color : thresholds[index - 1].color, - }; - }); + const formattedThresholds = [ + { value: minValue, color: BasicGaugeColor.Green }, + ...thresholds.map((threshold, index) => { + return { + value: threshold.value, + // Hacky way to get correct color for threshold. + color: index === 0 ? threshold.color : thresholds[index - 1].color, + }; + }), + { + value: maxValue, + color: BasicGaugeColor.Red, + }, + ]; console.log(formattedThresholds); @@ -174,11 +181,7 @@ export class Gauge extends PureComponent { value: { color: this.getFontColor(value), formatter: () => { - if (timeSeries[0]) { - return this.formatValue(value); - } - - return ''; + return this.formatValue(value); }, font: { size: fontSize,