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

Merge pull request #16079 from grafana/fix/threshold-custom-color

Browse Source 
Fix threshold editor color picker not working for custom colors
This commit is contained in:
Torkel Ödegaard 2019-03-19 18:39:17 +01:00 committed by GitHub
commit f69f0c2c31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/plugins/panel/graph/threshold_manager.ts
View File

@ -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;

4
public/app/plugins/panel/graph/thresholds_form.html
View File

@ -23,7 +23,7 @@
<label class="gf-form-label">Color</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="threshold.colorMode"
ng-options="f for f in ['custom', 'critical', 'warning', 'ok']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled">
ng-options="f for f in ['custom', 'critical', 'warning', 'ok']" ng-change="ctrl.onThresholdTypeChange($index)" ng-disabled="ctrl.disabled">
</select>
</div>
</div>
@ -73,4 +73,4 @@
</button>
</div>
</div>
</div>
</div>

16
public/app/plugins/panel/graph/thresholds_form.ts
View File

@ -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', () => {