IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

added yaxis label

Browse Source
This commit is contained in:
Torkel Odegaard 2013-12-15 21:27:07 +01:00
parent b5e05ab7e7
commit 8b83f05796
8 changed files with 171 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/controllers/search.js
View File

@ -16,7 +16,7 @@ function (angular, _, config, $) {
$scope.giveSearchFocus = 0;
$scope.selectedIndex = null;
keyboardManager.bind('s', function() {
keyboardManager.bind('shift+s', function() {
$element.find('.dropdown').addClass('open');
$scope.giveSearchFocus += 1;
});

14
src/app/panels/graphite/axisEditor.html Normal file
View File

@ -0,0 +1,14 @@
<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>

18
src/app/panels/graphite/editor.html
View File

@ -1,17 +1,15 @@
<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">
<input type="text" ng-model="target.target" class="input-large" style="width:95%" ng-model-onblur ng-change="get_data()" />
<i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" style="position: relative; top: -5px; left: 5px;"></i>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<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 />
<i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" style="position: relative; top: -5px; left: 5px;"></i>
</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>

8
src/app/panels/graphite/module.html
View File

@ -100,7 +100,8 @@
</form>
<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">
<i class='icon-circle' ng-style="{color: series.color}"></i>
@ -118,11 +119,6 @@
<div ng-show="editorTabs[editor.index] == 'General'">
<div ng-include src="'app/partials/panelgeneral.html'"></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-include src="tab.src"></div>
</div>

40
src/app/panels/graphite/module.js
View File

@ -47,15 +47,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
}
],
editorTabs : [
{
title:'Targets',
src:'app/panels/graphite/editor.html'
},
{
title:'Axis labels',
src:'app/panels/graphite/axisEditor.html'
},
{
title:'Style',
src:'app/panels/graphite/styleEditor.html'
}
],
status : "Stable",
description : "A bucketed time series chart of the current query or queries. Uses the "+
"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"
status : "Work in progress",
description : " Graphite graphing panel"
};
// Set and populate defaults
@ -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) {
if ($scope.inEditMode) {
$rootScope.$emit('fullEditMode', false);
@ -409,12 +419,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
$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) {
return {
restrict: 'A',
template: '<div></div>',
template: '<div> </div>',
link: function(scope, elem) {
var data, plot;
@ -560,6 +579,17 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
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) {
console.log(e);
// Nothing to do here

129
src/app/services/keyboardManager.js
View File

@ -1,9 +1,7 @@
define([
'angular',
'underscore',
'jquery'
'angular'
],
function (angular, _, $) {
function (angular) {
'use strict';
var module = angular.module('kibana.services');
@ -21,7 +19,7 @@ function (angular, _, $) {
'keyCode': false
};
// Store all keyboard combination shortcuts
keyboardManagerService.keyboardEvent = {}
keyboardManagerService.keyboardEvent = {};
// Add a new keyboard combination shortcut
keyboardManagerService.bind = function (label, callback, opt) {
var fct, elt, code, k;
@ -29,7 +27,10 @@ function (angular, _, $) {
opt = angular.extend({}, defaultOpt, opt);
label = label.toLowerCase();
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) {
e = e || $window.event;
@ -37,19 +38,37 @@ function (angular, _, $) {
// Disable event handler when focus input and textarea
if (opt['inputDisabled']) {
var elt;
if (e.target) elt = e.target;
else if (e.srcElement) elt = e.srcElement;
if (elt.nodeType == 3) elt = elt.parentNode;
if (elt.tagName == 'INPUT' || elt.tagName == 'TEXTAREA') return;
if (e.target) {
elt = e.target;
}
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
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
if (e.keyCode) {
code = e.keyCode;
}
else if (e.which) {
code = e.which;
}
var character = String.fromCharCode(code).toLowerCase();
if (code == 188) character = ","; // If the user presses , when the type is onkeydown
if (code == 190) character = "."; // If the user presses , when the type is onkeydown
if (code === 188) {
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("+");
// 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, _, $) {
// Foreach keys in label (split on +)
for(var i=0, l=keys.length; k=keys[i],i<l; i++) {
switch (k) {
case 'ctrl':
case 'control':
kp++;
modifiers.ctrl.wanted = true;
break;
case 'shift':
case 'alt':
case 'meta':
kp++;
modifiers[k].wanted = true;
break;
case 'ctrl':
case 'control':
kp++;
modifiers.ctrl.wanted = true;
break;
case 'shift':
case 'alt':
case 'meta':
kp++;
modifiers[k].wanted = true;
break;
}
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
if (opt['keyCode'] == code) kp++;
if (opt['keyCode'] === code) {
kp++;
}
} else { // The special keys did not match
if(character == k) kp++;
if(character === k) {
kp++;
}
else {
if(shift_nums[character] && e.shiftKey) { // Stupid Shift key bug created by using lowercase
character = shift_nums[character];
if(character == k) kp++;
if(character === k) {
kp++;
}
}
}
}
}
if(kp == keys.length &&
modifiers.ctrl.pressed == modifiers.ctrl.wanted &&
modifiers.shift.pressed == modifiers.shift.wanted &&
modifiers.alt.pressed == modifiers.alt.wanted &&
modifiers.meta.pressed == modifiers.meta.wanted) {
if(kp === keys.length &&
modifiers.ctrl.pressed === modifiers.ctrl.wanted &&
modifiers.shift.pressed === modifiers.shift.wanted &&
modifiers.alt.pressed === modifiers.alt.wanted &&
modifiers.meta.pressed === modifiers.meta.wanted) {
$timeout(function() {
callback(e);
}, 1);
@ -211,22 +238,40 @@ function (angular, _, $) {
'event': opt['type']
};
//Attach the function with the event
if(elt.addEventListener) elt.addEventListener(opt['type'], fct, false);
else if(elt.attachEvent) elt.attachEvent('on' + opt['type'], fct);
else elt['on' + opt['type']] = fct;
if(elt.addEventListener) {
elt.addEventListener(opt['type'], fct, false);
}
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
keyboardManagerService.unbind = function (label) {
label = label.toLowerCase();
var binding = keyboardManagerService.keyboardEvent[label];
delete(keyboardManagerService.keyboardEvent[label])
if(!binding) return;
delete(keyboardManagerService.keyboardEvent[label]);
if(!binding) {
return;
}
var type = binding['event'],
elt = binding['target'],
callback = binding['callback'];
if(elt.detachEvent) elt.detachEvent('on' + type, callback);
else if(elt.removeEventListener) elt.removeEventListener(type, callback, false);
else elt['on'+type] = false;
if(elt.detachEvent) {
elt.detachEvent('on' + type, callback);
}
else if(elt.removeEventListener) {
elt.removeEventListener(type, callback, false);
}
else {
elt['on'+type] = false;
}
};
//
return keyboardManagerService;

2
src/css/bootstrap.dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

23
src/vendor/bootstrap/less/grafana.less vendored
View File

@ -40,4 +40,27 @@
.grafana-search-metric-name {
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;
}