Skip to content

N
nexpie-grafana-theme
Commit 8b83f057 by Torkel Odegaard
Options

added yaxis label

parent b5e05ab7
Showing with 173 additions and 64 deletions
src/app/controllers/search.js
...@@ -16,7 +16,7 @@ function (angular, _, config, $) { ...@@ -16,7 +16,7 @@ function (angular, _, config, $) {
$scope.giveSearchFocus = 0; $scope.giveSearchFocus = 0;
$scope.selectedIndex = null; $scope.selectedIndex = null;
keyboardManager.bind('s', function() { keyboardManager.bind('shift+s', function() {
$element.find('.dropdown').addClass('open'); $element.find('.dropdown').addClass('open');
$scope.giveSearchFocus += 1; $scope.giveSearchFocus += 1;
}); });
......
src/app/panels/graphite/axisEditor.html 0 → 100644
<div class="editor-row">
<div class="editor-row">
<div class="editor-option">
<label class="small">Left y-axis label</label>
<input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-large" ng-model="panel.leftYAxisLabel">
</div>
<div class="editor-option">
<label class="small">Right y-axis label</label>
<input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-large" ng-model="panel.rightYAxisLabel">
</div>
</div>
</div>
\ No newline at end of file
src/app/panels/graphite/editor.html
<div class="editor-row"> <div class="editor-row">
<h5>Graphite Targets</h5> <div ng-repeat="target in panel.targets">
<div ng-repeat="target in panel.targets"> <div class="row-fluid">
<div class="span12">
<div class="row-fluid"> <input type="text" ng-model="target.target" class="input-large" style="width:95%" ng-model-onblur ng-change="get_data()" bs-typeahead="typeAheadSource" ata-min-length=0 />
<div class="span12"> <i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" style="position: relative; top: -5px; left: 5px;"></i>
<input type="text" ng-model="target.target" class="input-large" style="width:95%" ng-model-onblur ng-change="get_data()" /> </div>
<i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" style="position: relative; top: -5px; left: 5px;"></i> </div>
</div>
</div>
</div> </div>
<button ng-click="add_target(panel.target)" class="btn btn-success" ng-show="editor.index == 1">Add target</button> <a ng-click="add_target(panel.target)" ng-show="editor.index == 1">Add target</a>
</div> </div>
\ No newline at end of file
src/app/panels/graphite/module.html
...@@ -100,7 +100,8 @@ ...@@ -100,7 +100,8 @@
</form> </form>
<center><img ng-show='panel.loading && _.isUndefined(data)' src="img/load_big.gif"></center> <center><img ng-show='panel.loading && _.isUndefined(data)' src="img/load_big.gif"></center>
<div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div> <div histogram-chart class="pointer histogram-chart" params="{{panel}}">
</div>
<span ng-show="panel.legend" ng-repeat='series in legend' class="histogram-legend"> <span ng-show="panel.legend" ng-repeat='series in legend' class="histogram-legend">
<i class='icon-circle' ng-style="{color: series.color}"></i> <i class='icon-circle' ng-style="{color: series.color}"></i>
...@@ -118,11 +119,6 @@ ...@@ -118,11 +119,6 @@
<div ng-show="editorTabs[editor.index] == 'General'"> <div ng-show="editorTabs[editor.index] == 'General'">
<div ng-include src="'app/partials/panelgeneral.html'"></div> <div ng-include src="'app/partials/panelgeneral.html'"></div>
</div> </div>
<div ng-show="editorTabs[editor.index] == 'Panel'">
<div ng-include src="edit_path(panel.type)"></div>
</div>
<div ng-repeat="tab in panelMeta.editorTabs" ng-show="editorTabs[editor.index] == tab.title"> <div ng-repeat="tab in panelMeta.editorTabs" ng-show="editorTabs[editor.index] == tab.title">
<div ng-include src="tab.src"></div> <div ng-include src="tab.src"></div>
</div> </div>
......
src/app/panels/graphite/module.js
...@@ -48,14 +48,20 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) { ...@@ -48,14 +48,20 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
], ],
editorTabs : [ editorTabs : [
{ {
title:'Targets',
src:'app/panels/graphite/editor.html'
},
{
title:'Axis labels',
src:'app/panels/graphite/axisEditor.html'
},
{
title:'Style', title:'Style',
src:'app/panels/graphite/styleEditor.html' src:'app/panels/graphite/styleEditor.html'
} }
], ],
status : "Stable", status : "Work in progress",
description : "A bucketed time series chart of the current query or queries. Uses the "+ description : " Graphite graphing panel"
"Elasticsearch date_histogram facet. If using time stamped indices this panel will query"+
" them sequentially to attempt to apply the lighest possible load to your Elasticsearch cluster"
}; };
// Set and populate defaults // Set and populate defaults
...@@ -223,6 +229,10 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) { ...@@ -223,6 +229,10 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
} }
}; };
$scope.typeAheadSource = function (str) {
return ["test", "asd", "testing2" + str];
};
$scope.remove_panel_from_row = function(row, panel) { $scope.remove_panel_from_row = function(row, panel) {
if ($scope.inEditMode) { if ($scope.inEditMode) {
$rootScope.$emit('fullEditMode', false); $rootScope.$emit('fullEditMode', false);
...@@ -409,12 +419,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) { ...@@ -409,12 +419,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
$scope.$emit('render'); $scope.$emit('render');
}; };
$scope.setEditorTabs = function(panelMeta) {
$scope.editorTabs = ['General'];
if(!_.isUndefined(panelMeta.editorTabs)) {
$scope.editorTabs = _.union($scope.editorTabs,_.pluck(panelMeta.editorTabs,'title'));
}
return $scope.editorTabs;
};
}); });
module.directive('histogramChart', function(dashboard, filterSrv) { module.directive('histogramChart', function(dashboard, filterSrv) {
return { return {
restrict: 'A', restrict: 'A',
template: '<div></div>', template: '<div> </div>',
link: function(scope, elem) { link: function(scope, elem) {
var data, plot; var data, plot;
...@@ -560,6 +579,17 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) { ...@@ -560,6 +579,17 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
plot = $.plot(elem, data, options); plot = $.plot(elem, data, options);
if (scope.panel.leftYAxisLabel) {
elem.css('margin-left', '10px');
var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
.text(scope.panel.leftYAxisLabel)
.appendTo(elem);
yaxisLabel.css("margin-top", yaxisLabel.width() / 2 - 20);
} else if (elem.css('margin-left')) {
elem.css('margin-left', '');
}
} catch(e) { } catch(e) {
console.log(e); console.log(e);
// Nothing to do here // Nothing to do here
......
src/app/services/keyboardManager.js
define([ define([
'angular', 'angular'
'underscore',
'jquery'
], ],
function (angular, _, $) { function (angular) {
'use strict'; 'use strict';
var module = angular.module('kibana.services'); var module = angular.module('kibana.services');
...@@ -21,7 +19,7 @@ function (angular, _, $) { ...@@ -21,7 +19,7 @@ function (angular, _, $) {
'keyCode': false 'keyCode': false
}; };
// Store all keyboard combination shortcuts // Store all keyboard combination shortcuts
keyboardManagerService.keyboardEvent = {} keyboardManagerService.keyboardEvent = {};
// Add a new keyboard combination shortcut // Add a new keyboard combination shortcut
keyboardManagerService.bind = function (label, callback, opt) { keyboardManagerService.bind = function (label, callback, opt) {
var fct, elt, code, k; var fct, elt, code, k;
...@@ -29,7 +27,10 @@ function (angular, _, $) { ...@@ -29,7 +27,10 @@ function (angular, _, $) {
opt = angular.extend({}, defaultOpt, opt); opt = angular.extend({}, defaultOpt, opt);
label = label.toLowerCase(); label = label.toLowerCase();
elt = opt.target; elt = opt.target;
if(typeof opt.target == 'string') elt = document.getElementById(opt.target);
if(typeof opt.target === 'string') {
elt = document.getElementById(opt.target);
}
fct = function (e) { fct = function (e) {
e = e || $window.event; e = e || $window.event;
...@@ -37,19 +38,37 @@ function (angular, _, $) { ...@@ -37,19 +38,37 @@ function (angular, _, $) {
// Disable event handler when focus input and textarea // Disable event handler when focus input and textarea
if (opt['inputDisabled']) { if (opt['inputDisabled']) {
var elt; var elt;
if (e.target) elt = e.target; if (e.target) {
else if (e.srcElement) elt = e.srcElement; elt = e.target;
if (elt.nodeType == 3) elt = elt.parentNode; }
if (elt.tagName == 'INPUT' || elt.tagName == 'TEXTAREA') return; else if (e.srcElement) {
elt = e.srcElement;
}
if (elt.nodeType === 3) {
elt = elt.parentNode;
}
if (elt.tagName === 'INPUT' || elt.tagName === 'TEXTAREA') {
return;
}
} }
// Find out which key is pressed // Find out which key is pressed
if (e.keyCode) code = e.keyCode; if (e.keyCode) {
else if (e.which) code = e.which; code = e.keyCode;
}
else if (e.which) {
code = e.which;
}
var character = String.fromCharCode(code).toLowerCase(); var character = String.fromCharCode(code).toLowerCase();
if (code == 188) character = ","; // If the user presses , when the type is onkeydown if (code === 188) {
if (code == 190) character = "."; // If the user presses , when the type is onkeydown character = ","; // If the user presses , when the type is onkeydown
}
if (code === 190) {
character = "."; // If the user presses , when the type is onkeydown
}
var keys = label.split("+"); var keys = label.split("+");
// Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked // Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked
...@@ -152,39 +171,47 @@ function (angular, _, $) { ...@@ -152,39 +171,47 @@ function (angular, _, $) {
// Foreach keys in label (split on +) // Foreach keys in label (split on +)
for(var i=0, l=keys.length; k=keys[i],i<l; i++) { for(var i=0, l=keys.length; k=keys[i],i<l; i++) {
switch (k) { switch (k) {
case 'ctrl': case 'ctrl':
case 'control': case 'control':
kp++; kp++;
modifiers.ctrl.wanted = true; modifiers.ctrl.wanted = true;
break; break;
case 'shift': case 'shift':
case 'alt': case 'alt':
case 'meta': case 'meta':
kp++; kp++;
modifiers[k].wanted = true; modifiers[k].wanted = true;
break; break;
} }
if (k.length > 1) { // If it is a special key if (k.length > 1) { // If it is a special key
if(special_keys[k] == code) kp++; if(special_keys[k] === code) {
kp++;
}
} else if (opt['keyCode']) { // If a specific key is set into the config } else if (opt['keyCode']) { // If a specific key is set into the config
if (opt['keyCode'] == code) kp++; if (opt['keyCode'] === code) {
kp++;
}
} else { // The special keys did not match } else { // The special keys did not match
if(character == k) kp++; if(character === k) {
kp++;
}
else { else {
if(shift_nums[character] && e.shiftKey) { // Stupid Shift key bug created by using lowercase if(shift_nums[character] && e.shiftKey) { // Stupid Shift key bug created by using lowercase
character = shift_nums[character]; character = shift_nums[character];
if(character == k) kp++; if(character === k) {
kp++;
}
} }
} }
} }
} }
if(kp == keys.length && if(kp === keys.length &&
modifiers.ctrl.pressed == modifiers.ctrl.wanted && modifiers.ctrl.pressed === modifiers.ctrl.wanted &&
modifiers.shift.pressed == modifiers.shift.wanted && modifiers.shift.pressed === modifiers.shift.wanted &&
modifiers.alt.pressed == modifiers.alt.wanted && modifiers.alt.pressed === modifiers.alt.wanted &&
modifiers.meta.pressed == modifiers.meta.wanted) { modifiers.meta.pressed === modifiers.meta.wanted) {
$timeout(function() { $timeout(function() {
callback(e); callback(e);
}, 1); }, 1);
...@@ -211,22 +238,40 @@ function (angular, _, $) { ...@@ -211,22 +238,40 @@ function (angular, _, $) {
'event': opt['type'] 'event': opt['type']
}; };
//Attach the function with the event //Attach the function with the event
if(elt.addEventListener) elt.addEventListener(opt['type'], fct, false); if(elt.addEventListener) {
else if(elt.attachEvent) elt.attachEvent('on' + opt['type'], fct); elt.addEventListener(opt['type'], fct, false);
else elt['on' + opt['type']] = fct; }
else if(elt.attachEvent) {
elt.attachEvent('on' + opt['type'], fct);
}
else {
elt['on' + opt['type']] = fct;
}
}; };
// Remove the shortcut - just specify the shortcut and I will remove the binding // Remove the shortcut - just specify the shortcut and I will remove the binding
keyboardManagerService.unbind = function (label) { keyboardManagerService.unbind = function (label) {
label = label.toLowerCase(); label = label.toLowerCase();
var binding = keyboardManagerService.keyboardEvent[label]; var binding = keyboardManagerService.keyboardEvent[label];
delete(keyboardManagerService.keyboardEvent[label]) delete(keyboardManagerService.keyboardEvent[label]);
if(!binding) return;
if(!binding) {
return;
}
var type = binding['event'], var type = binding['event'],
elt = binding['target'], elt = binding['target'],
callback = binding['callback']; callback = binding['callback'];
if(elt.detachEvent) elt.detachEvent('on' + type, callback);
else if(elt.removeEventListener) elt.removeEventListener(type, callback, false); if(elt.detachEvent) {
else elt['on'+type] = false; elt.detachEvent('on' + type, callback);
}
else if(elt.removeEventListener) {
elt.removeEventListener(type, callback, false);
}
else {
elt['on'+type] = false;
}
}; };
// //
return keyboardManagerService; return keyboardManagerService;
......
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/vendor/bootstrap/less/grafana.less
...@@ -40,4 +40,27 @@ ...@@ -40,4 +40,27 @@
.grafana-search-metric-name { .grafana-search-metric-name {
color: @blue; color: @blue;
} }
}
.yaxisLabel {
top: 50%;
left: -20px;
transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
.axisLabel {
color: @textColor;
font-size: @fontSizeSmall;
position: absolute;
text-align: center;
font-size: 12px;
} }
\ No newline at end of file
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