Skip to content

N
nexpie-grafana-theme
Commit 6b6355e6 by Rashid Khan
Options

Added ability to customize interval in histogram, issue #7. Also fixed bug that… 

Added ability to customize interval in histogram, issue #7. Also fixed bug that caused editor and panel to be in different scopes
parent c5678139
Showing with 83 additions and 43 deletions
js/directives.js
......@@ -15,6 +15,19 @@ angular.module('kibana.directives', [])
}
};
})
.directive('addPanel', function($compile) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
scope.$watch('panel.type', function(n,o) {
if(!_.isUndefined(scope.panel.type)) {
var template = '<div ng-controller="'+scope.panel.type+'" ng-include src="\''+scope.edit_path(scope.panel.type)+'\'"></div>';
elem.html($compile(angular.element(template))(scope));
}
})
}
};
})
.directive('arrayJoin', function() {
return {
restrict: 'A',
......
panels/column/editor.html
<div ng-controller="column">
<div>
<div class="row-fluid">
<h4>Add Panel to Column</h4>
<select class="input-medium" ng-model="new_panel.type" ng-options="f for f in _.without(config.modules,'column')| stringSort" ng-change="reset_panel(new_panel.type);send_render();"></select>
......
panels/dashcontrol/editor.html
<div ng-controller="dashcontrol">
<div>
<h5>Allow saving to</h5>
<div class="row-fluid">
<div class="span2">
......
panels/debug/editor.html
<div class="row-fluid" ng-controller="debug">
<div class="row-fluid">
<div class="row-fluid">
<div class="span3">
<h5>Length</h5>
......
panels/fields/editor.html
<div class="row-fluid" ng-controller="fields">
<div class="row-fluid">
<div class="span3"><h6>Popup Position</h6>
<select class="input-small" ng-model="panel.micropanel_position" ng-options="f for f in ['top','right','bottom','left']" ng-change="reload_list();"></select></span>
</div>
......
panels/fields/module.js
......@@ -13,7 +13,7 @@
### Group Events
#### Recieves
* table_documents :: An object containing the documents in the table panel
*** Sends
#### Sends
* fields :: an object containing the sort order, existing fields and selected fields
*/
......@@ -42,7 +42,6 @@ angular.module('kibana.fields', [])
$scope.docs = docs.docs;
});
eventBus.register($scope,"get_fields", function(event,id) {
console.log("field.get_fields");
eventBus.broadcast($scope.$id,$scope.panel.group,"selected_fields",$scope.active);
});
}
......@@ -79,7 +78,7 @@ angular.module('kibana.fields', [])
}
$scope.build_search = function(field, value,negate) {
$scope.panel.query = add_to_query($scope.panel.query,field,value,negate)
$scope.panel.query = [add_to_query($scope.panel.query,field,value,negate)]
eventBus.broadcast($scope.$id,$scope.panel.group,'query',$scope.panel.query);
}
......
panels/histogram/editor.html
<div ng-controller='histogram'>
<div>
<div class="row-fluid">
<div class="span3">
<form style="margin-bottom: 0px">
......@@ -23,9 +23,8 @@
</form>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<input type="text" style="width:80%" ng-model="q.query">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
<form style="margin-bottom: 0px">
<input type="text" style="width:80%" ng-model="q.query" ng-change="set_refresh(true)">
</form>
</div>
<div class="span1">
......@@ -34,29 +33,38 @@
</div>
<h5>Chart Options</h5>
<div class="row-fluid" style="margin-bottom:10px;">
<div class="span1"> <label class="small">Bars</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
<div class="span1"> <label class="small">Lines</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
<div class="span1"> <label class="small">Points</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
<div class="span1"> <label class="small">Stack</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
<div class="span1"> <label class="small">Legend</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
<div class="span1"> <label class="small">xAxis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
<div class="span1"> <label class="small">yAxis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
<div class="span1"> <label class="small">Bars</label><input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
<div class="span1"> <label class="small">Lines</label><input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
<div class="span1"> <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
<div class="span1"> <label class="small">Stack</label><input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
<div class="span1"> <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
<div class="span1"> <label class="small">xAxis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
<div class="span1"> <label class="small">yAxis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
<div class="span2" ng-show="panel.lines">
<label class="small">Line Fill</label>
<select ng-change="$emit('render')" class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
<select class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
</div>
<div class="span2" ng-show="panel.lines">
<label class="small">Line Width</label>
<select ng-change="$emit('render')" class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
<select class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
</div>
</div>
<div class="row-fluid">
<div class="row-fluid">
<div class="span3">
<label class="small">Time correction</label>
<select ng-change="$emit('render')" ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
<select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
</div>
<div class="span2">
<label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" />
</div>
<div class="span2">
<label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks">
<label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" />
</div>
<div class="span2" ng-hide='panel.auto_int'>
<label class="small">Interval</label><input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/>
</div>
<div class="span3" ng-hide='panel.auto_int'>
<label class="small">Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</label>
</div>
</div>
<h5>Panel Spy</h5>
......
panels/histogram/module.js
......@@ -10,7 +10,8 @@
* query :: an array of objects as such: {query: 'somequery', label 'legent text'}.
this is usually populated by a stringquery panel wher the query and label
parameter are the same
* interval :: Generated automatically. Tells ES how to bucket the data points
* auto_int :: Auto calculate data point interval?
* interval :: Datapoint interval in elasticsearch date math format (eg 1d, 1w, 1y, 5y)
* fill :: Only applies to line charts. Level of area shading from 0-10
* linewidth :: Only applies to line charts. How thick the line should be in pixels
While the editor only exposes 0-10, this can be any numeric value.
......@@ -44,7 +45,8 @@ angular.module('kibana.histogram', [])
var _d = {
group : "default",
query : [ {query: "*", label:"Query"} ],
interval : secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
auto_int : true,
interval : '5m',
fill : 3,
linewidth : 3,
timezone : 'browser', // browser, utc or a standard timezone
......@@ -102,6 +104,9 @@ angular.module('kibana.histogram', [])
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
return
if ($scope.panel.auto_int)
$scope.panel.interval = secondsToHms(calculate_interval($scope.time.from,$scope.time.to,50,0)/1000);
$scope.panel.loading = true;
var _segment = _.isUndefined(segment) ? 0 : segment
var request = $scope.ejs.Request().indices($scope.panel.index[_segment]);
......@@ -206,7 +211,7 @@ angular.module('kibana.histogram', [])
// function $scope.zoom
// factor :: Zoom factor, so 0.5 = cuts timespan in half, 2 doubles timespan
$scope.zoom = function(factor) {
eventBus.broadcast($scope.$id,$scope.panel.group,'zoom',factor)
eventBus.broadcast($scope.$id,$scope.panel.group,'zoom',factor);
}
// I really don't like this function, too much dom manip. Break out into directive?
......@@ -220,11 +225,24 @@ angular.module('kibana.histogram', [])
}
}
$scope.set_refresh = function (state) {
$scope.refresh = state;
}
$scope.close_edit = function() {
if($scope.refresh)
$scope.get_data();
$scope.refresh = false;
$scope.$emit('render');
}
$scope.set_time = function(time) {
$scope.time = time;
$scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
$scope.panel.interval = secondsToHms(
calculate_interval(time.from,time.to,50,0)/1000);
// Should I be storing the index on the panel? It causes errors if the index
// goes away. Hmmm.
$scope.panel.index = time.index || $scope.panel.index
// Only calculate interval if auto_int is set, otherwise don't touch it
$scope.get_data();
}
......@@ -234,8 +252,6 @@ angular.module('kibana.histogram', [])
restrict: 'A',
link: function(scope, elem, attrs, ctrl) {
var height = scope.panel.height || scope.row.height;
// Receive render events
scope.$on('render',function(){
render_panel();
......@@ -248,6 +264,7 @@ angular.module('kibana.histogram', [])
// Function for rendering panel
function render_panel() {
// Set barwidth based on specified interval
var barwidth = interval_to_seconds(scope.panel.interval)*1000
......@@ -288,7 +305,7 @@ angular.module('kibana.histogram', [])
},
selection: {
mode: "x",
color: '#999'
color: '#ccc'
},
grid: {
backgroundColor: '#fff',
......@@ -323,15 +340,16 @@ angular.module('kibana.histogram', [])
}
function tt(x, y, contents) {
// If the tool tip already exists, don't recreate it, just update it
var tooltip = $('#pie-tooltip').length ?
$('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
//var tooltip = $('#pie-tooltip')
tooltip.html(contents).css({
position: 'absolute',
top : y + 5,
left : x + 5,
color : "#000",
border : '2px solid #000',
border : '1px solid #000',
padding : '10px',
'font-size': '11pt',
'font-weight' : 200,
......
panels/hits/editor.html
<div ng-controller="hits">
<div>
<div class="row-fluid">
<div class="span3">
<label class="small">Style</label>
......
panels/map/editor.html
<div class="row-fluid" ng-controller="map">
<div class="row-fluid">
<div class="span11">
The map panel uses 2 letter country or US state codes to plot concentrations on a map. Darker terroritories mean more records matched that area. If multiple queries are sent from a single panel the <strong>first query will be displayed</strong>
</div>
......
panels/pie/editor.html
<div class="row-fluid" ng-switch="panel.mode" ng-controller="pie">
<div class="row-fluid" ng-switch="panel.mode">
<div ng-switch-when="terms">
<div class="row-fluid">
<div class="span3">
......
panels/stringquery/editor.html
<div ng-controller="stringquery">
<div>
<div class="row-fluid">
<div class="span2">
<label class="small">Mulit-query</label><input type="checkbox" ng-change="set_multi(panel.multi) "ng-model="panel.multi" ng-checked="panel.multi">
......
panels/table/editor.html
<div class="row-fluid" ng-controller="table">
<div class="row-fluid">
<div style="width:90%">
<form class="input-append">
<h6>Query</h6>
......
panels/text/editor.html
<div ng-controller="text">
<div>
<div class="row-fluid">
<div class="span4">
<label class="small">Mode</label> <select class="input-medium" ng-model="panel.mode" ng-options="f for f in ['html','markdown','text']"></select>
......
panels/timepicker/editor.html
<div class="row-fluid" ng-controller="timepicker">
<div class="row-fluid">
<div class="span3">
<h6>Default Mode</h6>
<select style="width:85%" ng-model="panel.mode" ng-options="f for f in ['relative','absolute','since']"></select>
......
partials/paneleditor.html
......@@ -13,5 +13,6 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss();close_edit()">Close</button>
<!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
<button type="button" class="btn btn-success" ng-click="close_edit();dismiss()">Close</button>
</div>
\ No newline at end of file
partials/roweditor.html
......@@ -25,7 +25,7 @@
<div ng-show="!(_.isUndefined(panel.type))">
<div ng-include src="'partials/panelgeneral.html'"></div>
<div ng-include src="edit_path(panel.type)"></div>
<div add-panel="{{panel.type}}"></div>
<button ng-click="add_panel(row,panel); reset_panel();" class="btn btn-primary">Create Panel</button><br>
</div>
</div>
......
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