diff --git a/public/app/plugins/panel/graph/threshold_manager.ts b/public/app/plugins/panel/graph/threshold_manager.ts index f0bc7d62499..dcebc45c1e7 100644 --- a/public/app/plugins/panel/graph/threshold_manager.ts +++ b/public/app/plugins/panel/graph/threshold_manager.ts @@ -216,12 +216,6 @@ export class ThresholdManager { break; } case 'custom': { - if (!threshold.fillColor) { - threshold.fillColor = 'rgba(255, 255, 255, 1)'; - } - if (!threshold.lineColor) { - threshold.lineColor = 'rgba(255, 255, 255, 0)'; - } fillColor = threshold.fillColor; lineColor = threshold.lineColor; break; diff --git a/public/app/plugins/panel/graph/thresholds_form.html b/public/app/plugins/panel/graph/thresholds_form.html index 99e2f530c8d..075b4824d28 100644 --- a/public/app/plugins/panel/graph/thresholds_form.html +++ b/public/app/plugins/panel/graph/thresholds_form.html @@ -23,7 +23,7 @@
@@ -73,4 +73,4 @@ - \ No newline at end of file + diff --git a/public/app/plugins/panel/graph/thresholds_form.ts b/public/app/plugins/panel/graph/thresholds_form.ts index 4f480873d5b..08acd887559 100644 --- a/public/app/plugins/panel/graph/thresholds_form.ts +++ b/public/app/plugins/panel/graph/thresholds_form.ts @@ -1,5 +1,6 @@ import coreModule from 'app/core/core_module'; - +import config from 'app/core/config'; +import tinycolor from 'tinycolor2'; export class ThresholdFormCtrl { panelCtrl: any; panel: any; @@ -56,6 +57,19 @@ export class ThresholdFormCtrl { this.render(); }; } + + onThresholdTypeChange(index) { + // Because of the ng-model binding, threshold's color mode is already set here + if (this.panel.thresholds[index].colorMode === 'custom') { + this.panel.thresholds[index].fillColor = tinycolor(config.theme.colors.blueBase) + .setAlpha(0.2) + .toRgbString(); + this.panel.thresholds[index].lineColor = tinycolor(config.theme.colors.blueShade) + .setAlpha(0.6) + .toRgbString(); + } + this.panelCtrl.render(); + } } coreModule.directive('graphThresholdForm', () => {