Skip to content

N
nexpie-grafana-theme
Commit 25c6b64f by Torkel Ödegaard
Options

Began working on exploring variable value groups/tags

parent a8aab0cb
Showing with 98 additions and 51 deletions
public/app/controllers/search.js
...@@ -123,32 +123,4 @@ function (angular, _, config) { ...@@ -123,32 +123,4 @@ function (angular, _, config) {
}); });
module.directive('tagColorFromName', function() {
function djb2(str) {
var hash = 5381;
for (var i = 0; i < str.length; i++) {
hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
}
return hash;
}
return {
scope: { tag: "=" },
link: function (scope, element) {
var name = scope.tag;
var hash = djb2(name.toLowerCase());
var colors = [
"#E24D42","#1F78C1","#BA43A9","#705DA0","#466803",
"#508642","#447EBC","#C15C17","#890F02","#757575",
"#0A437C","#6D1F62","#584477","#629E51","#2F4F4F",
"#BF1B00","#806EB7","#8a2eb8", "#699e00","#000000",
"#3F6833","#2F575E","#99440A","#E0752D","#0E4AB4",
"#58140C","#052B51","#511749","#3F2B5B",
];
var color = colors[Math.abs(hash % colors.length)];
element.css("background-color", color);
}
};
});
}); });
public/app/directives/tip.js
...@@ -78,4 +78,43 @@ function (angular, kbn) { ...@@ -78,4 +78,43 @@ function (angular, kbn) {
}; };
}); });
}); angular
.module('grafana.directives')
.directive('tagColorFromName', function() {
function djb2(str) {
var hash = 5381;
for (var i = 0; i < str.length; i++) {
hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
}
return hash;
}
return {
scope: { tagColorFromName: "=" },
link: function (scope, element) {
var hash = djb2(scope.tagColorFromName.toLowerCase());
var colors = [
"#E24D42","#1F78C1","#BA43A9","#705DA0","#466803",
"#508642","#447EBC","#C15C17","#890F02","#757575",
"#0A437C","#6D1F62","#584477","#629E51","#2F4F4F",
"#BF1B00","#806EB7","#8a2eb8", "#699e00","#000000",
"#3F6833","#2F575E","#99440A","#E0752D","#0E4AB4",
"#58140C","#052B51","#511749","#3F2B5B",
];
var borderColors = [
"#FF7368","#459EE7","#E069CF","#9683C6","#6C8E29",
"#76AC68","#6AA4E2","#E7823D","#AF3528","#9B9B9B",
"#3069A2","#934588","#7E6A9D","#88C477","#557575",
"#E54126","#A694DD","#B054DE", "#8FC426","#262626",
"#658E59","#557D84","#BF6A30","#FF9B53","#3470DA",
"#7E3A32","#2B5177","#773D6F","#655181",
];
var color = colors[Math.abs(hash % colors.length)];
var borderColor = borderColors[Math.abs(hash % borderColors.length)];
element.css("background-color", color);
element.css("border-color", borderColor);
}
};
});});
public/app/features/dashboard/partials/variableValueSelect.html
...@@ -15,12 +15,21 @@ ...@@ -15,12 +15,21 @@
</span> </span>
</div> </div>
<div class="variable-options-container" ng-if="!query.tagcloud"> <div class="variable-options-wrapper">
<a class="variable-option pointer" bindonce ng-repeat="option in search.options" <div class="variable-options-column">
ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)"> <a class="variable-option pointer" bindonce ng-repeat="option in search.options"
<span >{{option.text}}</label> ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)">
<span class="fa fa-fw variable-option-icon"></span> <span>{{option.text}}</span>
</a> <span class="fa fa-fw variable-option-icon"></span>
</a>
</div>
<div class="variable-options-column" ng-if="variable.tags">
<!-- <div class="variable&#45;options&#45;column&#45;header">Tags</div> -->
<a class="variable-option-tag pointer" ng-repeat="(key, values) in variable.tags" ng-click="selectTag(option, $event)">
<span class="label-tag" tag-color-from-name="key">{{key}}</span>
<span class="fa fa-fw variable-option-icon"></span>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
public/app/features/templating/editorCtrl.js
...@@ -82,6 +82,14 @@ function (angular, _) { ...@@ -82,6 +82,14 @@ function (angular, _) {
}; };
$scope.update = function() { $scope.update = function() {
$scope.current.tags = {
"Europe": ["backend_03", "backend_04"],
"USA": ["backend_01", "backend_02"],
"Asia": ["backend_01"],
"South America": ["backend_02"],
"Africa": ["backend_03"],
};
if ($scope.isValid()) { if ($scope.isValid()) {
$scope.runQuery().then(function() { $scope.runQuery().then(function() {
$scope.reset(); $scope.reset();
......
public/app/partials/search.html
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
ng-class="{'selected': $index == selectedIndex}" ng-href="{{row.url}}"> ng-class="{'selected': $index == selectedIndex}" ng-href="{{row.url}}">
<span class="search-result-tags"> <span class="search-result-tags">
<span ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name tag="tag" class="label label-tag"> <span ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name="tag" class="label label-tag">
{{tag}} {{tag}}
</span> </span>
<i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i> <i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>
......
public/css/less/overrides.less
...@@ -542,10 +542,13 @@ div.flot-text { ...@@ -542,10 +542,13 @@ div.flot-text {
.label-tag { .label-tag {
background-color: @purple; background-color: @purple;
color: darken(@white, 5%); color: darken(@white, 5%);
white-space: nowrap;
border-radius: 2px; border-radius: 2px;
text-shadow: none; text-shadow: none;
font-size: 13px; font-size: 13px;
padding: 4px 6px; padding: 2px 6px;
border-width: 1px;
border-style: solid;
.icon-tag { .icon-tag {
position: relative; position: relative;
top: 1px; top: 1px;
......
public/css/less/sidemenu.less
...@@ -91,7 +91,6 @@ ...@@ -91,7 +91,6 @@
display: block; display: block;
padding: 8px 0 4px 22px; padding: 8px 0 4px 22px;
background-color: @navbarBackground; background-color: @navbarBackground;
border-right: 3px solid @bodyBackground;
img { img {
border-radius: 50%; border-radius: 50%;
background: @iconContainerBackground; background: @iconContainerBackground;
......
public/css/less/submenu.less
...@@ -55,31 +55,48 @@ ...@@ -55,31 +55,48 @@
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }
.variable-options-container { .variable-options-wrapper {
display: table;
width: 100%;
}
.variable-options-column {
max-height: 350px; max-height: 350px;
overflow: auto; overflow: auto;
display: block; display: table-cell;
line-height: 26px; line-height: 26px;
&:nth-child(2) {
border-left: 1px solid @grafanaTargetFuncBackground;
}
} }
.variable-option { .variable-option-tag,
.variable-option,
.variable-options-column-header {
display: block; display: block;
padding: 0 8px; padding: 0 27px 0 8px;
position: relative;
&:hover, &.highlighted { .variable-option-icon { display: none }
background-color: @blueDark;
}
.fa {
line-height: 26px;
float: right;
padding-left: 4px;
}
&.selected { &.selected {
.variable-option-icon:before { .variable-option-icon:before {
content: "\f00c"; content: "\f00c";
} }
.variable-option-icon {
display: block;
padding-left: 4px;
line-height: 26px;
position: absolute;
right: 0;
top: 0;
}
}
}
.variable-option {
&:hover, &.highlighted {
background-color: @blueDark;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment