prettied up histogram hover, added line width options, fixed excessive refresh on string query
This commit is contained in:
Rashid Khan
@@ -1,61 +1,67 @@
|
||||
<div class="row-fluid" ng-controller='histogram'>
|
||||
<div class="span3">
|
||||
<form style="margin-bottom: 0px">
|
||||
<h6>Label</h6>
|
||||
<input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
|
||||
</form>
|
||||
<div ng-controller='histogram'>
|
||||
<div class="row-fluid">
|
||||
<div class="span3">
|
||||
<form style="margin-bottom: 0px">
|
||||
<h6>Label</h6>
|
||||
<input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
|
||||
</form>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<form class="input-append" style="margin-bottom: 0px">
|
||||
<h6>Query</h6>
|
||||
<input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
|
||||
<button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery=''"><i class="icon-plus"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="span1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<form class="input-append" style="margin-bottom: 0px">
|
||||
<h6>Query</h6>
|
||||
<input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
|
||||
<button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery=''"><i class="icon-plus"></i></button>
|
||||
</form>
|
||||
<div class="row-fluid" ng-repeat="q in panel.query">
|
||||
<div class="span3">
|
||||
<form style="margin-bottom: 0px">
|
||||
<input type="text" style="width:70%" ng-model="q.label">
|
||||
</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>
|
||||
</div>
|
||||
<div class="span1">
|
||||
<i class="icon-remove pointer" ng-click="remove_query(q)"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid" ng-repeat="q in panel.query">
|
||||
<div class="span3">
|
||||
<form style="margin-bottom: 0px">
|
||||
<input type="text" style="width:70%" ng-model="q.label">
|
||||
</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>
|
||||
</div>
|
||||
<div class="span1">
|
||||
<i class="icon-remove pointer" ng-click="remove_query(q)"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span3">
|
||||
<label class="small">Chart Options</label>
|
||||
<select ng-change="$emit('render')" multiple style="width:95%" ng-model="panel.show" ng-options="f for f in ['bars','points','stack','lines','legend','x-axis','y-axis']"></select>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label class="small">Line Fill (1 - 10)</label>
|
||||
<input ng-change="$emit('render')" type="number" class="input-mini" ng-model="panel.fill">
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="span2">
|
||||
<label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks">
|
||||
</div>
|
||||
</div>
|
||||
<h5>Panel Spy</h5>
|
||||
<div class="row-fluid">
|
||||
<div class="span2">
|
||||
<label class="small">Spyable</label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
|
||||
</div>
|
||||
<div class="span9 small">
|
||||
The panel spy shows 'behind the scenes' information about a panel. It can
|
||||
be accessed by clicking the <i class='icon-eye-open'></i> in the top right
|
||||
of the panel.
|
||||
<div class="row-fluid">
|
||||
<div class="span3">
|
||||
<label class="small">Chart Options</label>
|
||||
<select ng-change="$emit('render')" multiple style="width:95%" ng-model="panel.show" ng-options="f for f in ['bars','points','stack','lines','legend','x-axis','y-axis']"></select>
|
||||
</div>
|
||||
<div class="span2">
|
||||
<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>
|
||||
</div>
|
||||
<div class="span2">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="span2">
|
||||
<label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks">
|
||||
</div>
|
||||
</div>
|
||||
<h5>Panel Spy</h5>
|
||||
<div class="row-fluid">
|
||||
<div class="span2">
|
||||
<label class="small">Spyable</label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
|
||||
</div>
|
||||
<div class="span9 small">
|
||||
The panel spy shows 'behind the scenes' information about a panel. It can
|
||||
be accessed by clicking the <i class='icon-eye-open'></i> in the top right
|
||||
of the panel.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+17
-10
@@ -7,6 +7,7 @@ angular.module('kibana.histogram', [])
|
||||
interval : secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
|
||||
show : ['bars','y-axis','x-axis','legend'],
|
||||
fill : 3,
|
||||
linewidth : 3,
|
||||
timezone : 'browser', // browser, utc or a standard timezone
|
||||
spyable : true,
|
||||
zoomlinks : true,
|
||||
@@ -148,7 +149,6 @@ angular.module('kibana.histogram', [])
|
||||
i++;
|
||||
});
|
||||
|
||||
eventBus.broadcast($scope.$id,$scope.panel.group,'hits',$scope.hits)
|
||||
$scope.$emit('render')
|
||||
if(_segment < $scope.panel.index.length-1) {
|
||||
$scope.get_data(_segment+1,query_id)
|
||||
@@ -236,7 +236,12 @@ angular.module('kibana.histogram', [])
|
||||
},
|
||||
series: {
|
||||
stack: show.stack,
|
||||
lines: { show: show.lines, fill: scope.panel.fill/10 },
|
||||
lines: {
|
||||
show: show.lines,
|
||||
fill: scope.panel.fill/10,
|
||||
lineWidth: scope.panel.linewidth,
|
||||
steps: true
|
||||
},
|
||||
bars: { show: show.bars, fill: 1, barWidth: barwidth/1.8 },
|
||||
points: { show: show.points, fill: 1, fillColor: false},
|
||||
shadowSize: 1
|
||||
@@ -294,23 +299,25 @@ angular.module('kibana.histogram', [])
|
||||
var tooltip = $('#pie-tooltip').length ?
|
||||
$('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
|
||||
//var tooltip = $('#pie-tooltip')
|
||||
tooltip.text(contents).css({
|
||||
tooltip.html(contents).css({
|
||||
position: 'absolute',
|
||||
top : y + 5,
|
||||
left : x + 5,
|
||||
color : "#FFF",
|
||||
border : '1px solid #FFF',
|
||||
padding : '2px',
|
||||
'font-size': '8pt',
|
||||
'background-color': '#000',
|
||||
color : "#000",
|
||||
border : '3px solid #000',
|
||||
padding : '10px',
|
||||
'font-size': '11pt',
|
||||
'font-weight' : 'bold',
|
||||
'background-color': '#FFF',
|
||||
'border-radius': '10px',
|
||||
}).appendTo("body");
|
||||
}
|
||||
|
||||
elem.bind("plothover", function (event, pos, item) {
|
||||
if (item) {
|
||||
var percent = parseFloat(item.series.percent).toFixed(1) + "%";
|
||||
tt(pos.pageX, pos.pageY,
|
||||
item.datapoint[1].toFixed(1) + " @ " +
|
||||
"<div style='vertical-align:middle;display:inline-block;background:"+item.series.color+";height:20px;width:20px'></div> "+
|
||||
item.datapoint[1].toFixed(0) + " @ " +
|
||||
new Date(item.datapoint[0]).format('mm/dd HH:MM:ss'));
|
||||
} else {
|
||||
$("#pie-tooltip").remove();
|
||||
|
||||
Reference in New Issue
Block a user