jsteele/grafana-statusmap
2
0
Fork 0
mirror of https://github.com/timberjoegithub/grafana-statusmap.git synced 2026-07-22 07:49:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #23 from flant/discrete_preset_of_solarized_colors

Browse Source 
Solarized preset for discrete color mode
This commit is contained in:
Ivan Mikheykin
2018-11-26 16:31:02 +03:00
committed by GitHub
parent ca2fcb582a 76dc89b2dc
commit ec8f8e386a
7 changed files with 165 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2
View File
@@ -146,6 +146,8 @@ This plugin is based on "Heatmap" panel by Grafana and partly inspired by ideas
##### v0.0.3
- Add solarized preset
- Reorganize statuses editor for discrete mode
- Separate options for vertical and horizontal spacing for cards
- Add simple sort options for Y axis
- Fix display null values as zero
dist/README.md
Vendored
+2
View File
@@ -146,6 +146,8 @@ This plugin is based on "Heatmap" panel by Grafana and partly inspired by ideas
##### v0.0.3
- Add solarized preset
- Reorganize statuses editor for discrete mode
- Separate options for vertical and horizontal spacing for cards
- Add simple sort options for Y axis
- Fix display null values as zero
dist/partials/options_editor.html
Vendored
+61 -31
View File
@@ -55,40 +55,70 @@
<strong>Note:</strong> Multiple values displayed using color with least index<br/>
</div>
<div class="gf-form" ng-repeat="threshold in ctrl.panel.color.thresholds">
<label class="gf-form-label width-2">{{ $index }}</label>
<label class="gf-form-label width-9" ng-if="ctrl.panel.useMax">If bucket has value</label>
<label class="gf-form-label width-9" ng-if="!ctrl.panel.useMax">If bucket value ==</label>
<input type="text" class="input-small gf-form-input width-4" ng-model="threshold.value" ng-change="ctrl.render()"/>
<label class="gf-form-label">
fill
</label>
<label class="gf-form-label">
<spectrum-picker ng-model="threshold.color" ng-change="ctrl.render()"/>
</label>
<label class="gf-form-label">set tooltip</label>
<input type="text" class="input-small gf-form-input width-9" ng-model="threshold.tooltip" ng-change="ctrl.render()"/>
<label class="gf-form-label">
<a class="pointer" ng-click="ctrl.onEditorRemoveThreshold($index)">
<i class="fa fa-trash"/>
</a>
</label>
<div class="gf-form" ng-show="ctrl.panel.color.thresholds.length == 0">
<label class="gf-form-label width-2">0</label>
<label class="gf-form-input width-30">No statuses defined. Add new status or use presets below.</label>
</div>
<div class="gf-form">
<label class="gf-form-label" ng-show="ctrl.panel.color.thresholds.length == 0">
<a class="pointer" ng-click="ctrl.onEditorAddThreeLights()">
Add trafic lights
</a>
</label>
<label class="gf-form-label">
<a class="pointer" ng-click="ctrl.onEditorAddThreshold()">
Add new status
</a>
</label>
<div class="gf-form-inline" ng-repeat="threshold in ctrl.panel.color.thresholds">
<div class="gf-form">
<label class="gf-form-label width-2">{{ $index }}</label>
</div>
<div class="gf-form">
<label class="gf-form-label width-9 query-keyword" ng-if="ctrl.panel.useMax">If bucket has value</label>
<label class="gf-form-label width-9 query-keyword" ng-if="!ctrl.panel.useMax">If bucket value ==</label>
<input type="text" class="input-small gf-form-input width-4" ng-model="threshold.value" ng-change="ctrl.render()"/>
<label class="gf-form-label query-keyword">
fill
</label>
<label class="gf-form-label">
<spectrum-picker ng-model="threshold.color" ng-change="ctrl.render()"/>
</label>
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword">set tooltip</label>
<input type="text" class="input-small gf-form-input width-9" ng-model="threshold.tooltip" ng-change="ctrl.render()"/>
</div>
<div class="gf-form">
<label class="gf-form-label">
<a class="pointer" tabindex="1" ng-click="ctrl.onEditorRemoveThreshold($index)">
<i class="fa fa-trash"/>
</a>
</label>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form"></div>
<div class="gf-form">
<button class="btn btn-inverse" ng-click="ctrl.onEditorAddThreshold()">
<i class="fa fa-plus"></i> Add new status
</button>
</div>
<div class="gf-form">
<button class="btn btn-inverse" ng-click="ctrl.onEditorRemoveThresholds()">
<i class="fa fa-minus"></i> Remove all
</button>
</div>
</div>
<div class="gf-form-inline" ng-show="ctrl.panel.color.thresholds.length == 0">
<div class="gf-form"></div>
<div class="gf-form">
<label class="gf-form-label">Presets</label>
</div>
<div class="gf-form">
<button class="btn" ng-click="ctrl.onEditorAddThreeLights()">
Red-Yellow-Green
</button>
</div>
<div class="gf-form">
<button class="btn" ng-click="ctrl.onEditorAddSolarized()">
Solarized
</button>
</div>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.color.mode !== 'discrete'">
dist/status_heatmap_ctrl.js
Vendored
+20
View File
@@ -226,6 +226,11 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
_this.render();
};
_this.onEditorRemoveThresholds = function () {
_this.panel.color.thresholds = [];
_this.render();
};
_this.onEditorAddThreeLights = function () {
_this.panel.color.thresholds.push({ color: "red", value: 2, tooltip: "error" });
_this.panel.color.thresholds.push({ color: "yellow", value: 1, tooltip: "warning" });
@@ -233,6 +238,18 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
_this.render();
};
_this.onEditorAddSolarized = function () {
_this.panel.color.thresholds.push({ color: "#b58900", value: 0, tooltip: "yellow" });
_this.panel.color.thresholds.push({ color: "#cb4b16", value: 1, tooltip: "orange" });
_this.panel.color.thresholds.push({ color: "#dc322f", value: 2, tooltip: "red" });
_this.panel.color.thresholds.push({ color: "#d33682", value: 3, tooltip: "magenta" });
_this.panel.color.thresholds.push({ color: "#6c71c4", value: 4, tooltip: "violet" });
_this.panel.color.thresholds.push({ color: "#268bd2", value: 5, tooltip: "blue" });
_this.panel.color.thresholds.push({ color: "#2aa198", value: 6, tooltip: "cyan" });
_this.panel.color.thresholds.push({ color: "#859900", value: 7, tooltip: "green" });
_this.render();
};
_this.link = function (scope, elem, attrs, ctrl) {
rendering(scope, elem, attrs, ctrl);
};
@@ -354,6 +371,9 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
// override calculateInterval for discrete color mode
/* https://ethanschoonover.com/solarized/ */
// group values into buckets by target
dist/status_heatmap_ctrl.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/partials/options_editor.html
+61 -31
View File
@@ -55,40 +55,70 @@
<strong>Note:</strong> Multiple values displayed using color with least index<br/>
</div>
<div class="gf-form" ng-repeat="threshold in ctrl.panel.color.thresholds">
<label class="gf-form-label width-2">{{ $index }}</label>
<label class="gf-form-label width-9" ng-if="ctrl.panel.useMax">If bucket has value</label>
<label class="gf-form-label width-9" ng-if="!ctrl.panel.useMax">If bucket value ==</label>
<input type="text" class="input-small gf-form-input width-4" ng-model="threshold.value" ng-change="ctrl.render()"/>
<label class="gf-form-label">
fill
</label>
<label class="gf-form-label">
<spectrum-picker ng-model="threshold.color" ng-change="ctrl.render()"/>
</label>
<label class="gf-form-label">set tooltip</label>
<input type="text" class="input-small gf-form-input width-9" ng-model="threshold.tooltip" ng-change="ctrl.render()"/>
<label class="gf-form-label">
<a class="pointer" ng-click="ctrl.onEditorRemoveThreshold($index)">
<i class="fa fa-trash"/>
</a>
</label>
<div class="gf-form" ng-show="ctrl.panel.color.thresholds.length == 0">
<label class="gf-form-label width-2">0</label>
<label class="gf-form-input width-30">No statuses defined. Add new status or use presets below.</label>
</div>
<div class="gf-form">
<label class="gf-form-label" ng-show="ctrl.panel.color.thresholds.length == 0">
<a class="pointer" ng-click="ctrl.onEditorAddThreeLights()">
Add trafic lights
</a>
</label>
<label class="gf-form-label">
<a class="pointer" ng-click="ctrl.onEditorAddThreshold()">
Add new status
</a>
</label>
<div class="gf-form-inline" ng-repeat="threshold in ctrl.panel.color.thresholds">
<div class="gf-form">
<label class="gf-form-label width-2">{{ $index }}</label>
</div>
<div class="gf-form">
<label class="gf-form-label width-9 query-keyword" ng-if="ctrl.panel.useMax">If bucket has value</label>
<label class="gf-form-label width-9 query-keyword" ng-if="!ctrl.panel.useMax">If bucket value ==</label>
<input type="text" class="input-small gf-form-input width-4" ng-model="threshold.value" ng-change="ctrl.render()"/>
<label class="gf-form-label query-keyword">
fill
</label>
<label class="gf-form-label">
<spectrum-picker ng-model="threshold.color" ng-change="ctrl.render()"/>
</label>
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword">set tooltip</label>
<input type="text" class="input-small gf-form-input width-9" ng-model="threshold.tooltip" ng-change="ctrl.render()"/>
</div>
<div class="gf-form">
<label class="gf-form-label">
<a class="pointer" tabindex="1" ng-click="ctrl.onEditorRemoveThreshold($index)">
<i class="fa fa-trash"/>
</a>
</label>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form"></div>
<div class="gf-form">
<button class="btn btn-inverse" ng-click="ctrl.onEditorAddThreshold()">
<i class="fa fa-plus"></i> Add new status
</button>
</div>
<div class="gf-form">
<button class="btn btn-inverse" ng-click="ctrl.onEditorRemoveThresholds()">
<i class="fa fa-minus"></i> Remove all
</button>
</div>
</div>
<div class="gf-form-inline" ng-show="ctrl.panel.color.thresholds.length == 0">
<div class="gf-form"></div>
<div class="gf-form">
<label class="gf-form-label">Presets</label>
</div>
<div class="gf-form">
<button class="btn" ng-click="ctrl.onEditorAddThreeLights()">
Red-Yellow-Green
</button>
</div>
<div class="gf-form">
<button class="btn" ng-click="ctrl.onEditorAddSolarized()">
Solarized
</button>
</div>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.color.mode !== 'discrete'">
src/status_heatmap_ctrl.js
+18
View File
@@ -244,12 +244,30 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
this.render();
};
onEditorRemoveThresholds = () => {
this.panel.color.thresholds = [];
this.render();
};
onEditorAddThreeLights = () => {
this.panel.color.thresholds.push({color: "red", value: 2, tooltip: "error" });
this.panel.color.thresholds.push({color: "yellow", value: 1, tooltip: "warning" });
this.panel.color.thresholds.push({color: "green", value: 0, tooltip: "ok" });
this.render();
};
/* https://ethanschoonover.com/solarized/ */
onEditorAddSolarized = () => {
this.panel.color.thresholds.push({color: "#b58900", value: 0, tooltip: "yellow" });
this.panel.color.thresholds.push({color: "#cb4b16", value: 1, tooltip: "orange" });
this.panel.color.thresholds.push({color: "#dc322f", value: 2, tooltip: "red" });
this.panel.color.thresholds.push({color: "#d33682", value: 3, tooltip: "magenta" });
this.panel.color.thresholds.push({color: "#6c71c4", value: 4, tooltip: "violet" });
this.panel.color.thresholds.push({color: "#268bd2", value: 5, tooltip: "blue" });
this.panel.color.thresholds.push({color: "#2aa198", value: 6, tooltip: "cyan" });
this.panel.color.thresholds.push({color: "#859900", value: 7, tooltip: "green" });
this.render();
}
link = (scope, elem, attrs, ctrl) => {
rendering(scope, elem, attrs, ctrl);