Skip to content

Commit

Permalink
Merge pull request #1 from johann8384/v3.1.0-plus
Browse files Browse the repository at this point in the history
V3.1.0 plus
  • Loading branch information
johann8384 committed Sep 12, 2014
2 parents a8a8dce + 43fbf92 commit 5bd1266
Show file tree
Hide file tree
Showing 19 changed files with 1,697 additions and 21 deletions.
2 changes: 2 additions & 0 deletions docs/kibana/panels/table.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ still available in the expanded view of the event.
localTime:: Set to true to adjust the timeField to the browser's local time
timeField:: If localTime is set to true, this field will be adjusted to the browsers local time
spyable:: Set to false to disable the inspect icon
download:: Set to false to disable the download icon
headings:: Add headings to CSV output

==== Queries
queries object:: This object describes the queries to use on this panel.
Expand Down
7 changes: 5 additions & 2 deletions src/app/panels/histogram/editor.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,11 @@ <h5>Transform Series</h5>
<div class="editor-option">
<label class="small">Seconds <tip>Normalize intervals to per-second</tip></label><input type="checkbox" ng-model="panel.scaleSeconds" ng-checked="panel.scaleSeconds">
</div>
<div class="editor-option">
<label class="small">Derivative <tip>Plot the change per interval in the series</tip></label><input type="checkbox" ng-model="panel.derivative" ng-checked="panel.derivative" ng-change="set_refresh(true)">
<div class="editor-option" ng-show="!panel.integral">
<label class="small">Derivative <tip>Plot the change per interval in the series</tip></label><input type="checkbox" ng-model="panel.derivative" ng-checked="panel.derivative && !panel.integral" ng-change="set_refresh(true)">
</div>
<div class="editor-option" ng-show="!panel.derivative">
<label class="small">Integral <tip>Plot sum over interval in the series</tip></label><input type="checkbox" ng-model="panel.integral" ng-checked="panel.integral && !panel.derivative" ng-change="set_refresh(true)">
</div>
<div class="editor-option">
<label class="small">Zero fill <tip>Fills zeros in gaps.</tip></label><input type="checkbox" ng-model="panel.zerofill" ng-checked="panel.zerofill" ng-change="set_refresh(true)">
Expand Down
2 changes: 1 addition & 1 deletion src/app/panels/histogram/module.html
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
<span ng-show="panel.legend_counts"> ({{series.hits}})</span>
</span>
</span>
<span ng-show="panel.legend" class="small"><span ng-show="panel.derivative"> change in </span><span class="strong" ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong ng-hide="panel.scaleSeconds">{{panel.interval}}</strong><strong ng-show="panel.scaleSeconds">1s</strong> | (<strong>{{hits}}</strong> hits)</span>
<span ng-show="panel.legend" class="small"><span ng-show="panel.derivative"> change in </span><span ng-show="panel.integral"> integral over </span><span class="strong" ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong ng-hide="panel.scaleSeconds">{{panel.interval}}</strong><strong ng-show="panel.scaleSeconds">1s</strong> | (<strong>{{hits}}</strong> hits)</span>
</div>
<form class="form-inline bordered histogram-options" ng-show="options">
<span>
Expand Down
23 changes: 20 additions & 3 deletions src/app/panels/histogram/module.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
* Status: *Stable*
*
* The histogram panel allow for the display of time charts. It includes several modes and tranformations
* to display event counts, mean, min, max and total of numeric fields, and derivatives of counter
* to display event counts, mean, min, max and total of numeric fields, derivatives, and integrals of counter
* fields.
*
*/
Expand Down Expand Up @@ -228,6 +228,10 @@ function (angular, app, $, _, kbn, moment, timeSeries, numeral) {
*/

derivative : false,
/** @scratch /panels/histogram/3
* integral:: Show each point on the x-axis as the sum with the previous point
*/
integral : false,
/** @scratch /panels/histogram/3
* tooltip object::
* tooltip.value_type::: Individual or cumulative controls how tooltips are display on stacked charts
Expand Down Expand Up @@ -418,7 +422,8 @@ function (angular, app, $, _, kbn, moment, timeSeries, numeral) {
interval: _interval,
start_date: _range && _range.from,
end_date: _range && _range.to,
fill_style: $scope.panel.derivative ? 'null' : $scope.panel.zerofill ? 'minimal' : 'no'
fill_style: $scope.panel.derivative ? 'null' : $scope.panel.zerofill ? 'minimal' :
($scope.panel.integral ? 'all' : 'minimal')
};
time_series = new timeSeries.ZeroFilled(tsOpts);
hits = 0;
Expand Down Expand Up @@ -597,12 +602,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, numeral) {
if(i === 0 || p[1] === null) {
_v = [p[0],null];
} else {
_v = series[i-1][1] === null ? [p[0],null] : [p[0],p[1]-(series[i-1][1])];
_v = series[i-1][1] === null ? [p[0],null] : [p[0],p[1]-series[i-1][1]];
}
return _v;
});
};

var integral = function(series) {
var sum = 0;
return _.map(series, function(p) {
p[1] = p[1] || 0;
sum = sum + p[1];
return [p[0], sum];
});
};

// Function for rendering panel
function render_panel(data) {
// IE doesn't work without this
Expand Down Expand Up @@ -730,6 +744,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, numeral) {
if(scope.panel.derivative) {
_d = derivative(_d);
}
if(scope.panel.integral){
_d = integral(_d);
}
if(scope.panel.scale !== 1) {
_d = scale(_d,scope.panel.scale);
}
Expand Down
100 changes: 100 additions & 0 deletions src/app/panels/multifieldhistogram/editor.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<style>
.querySelect .query {
margin-right: 5px;
}
.querySelect .selected {
border: 3px solid;
}
.querySelect .unselected {
border: 0px solid;
}
</style>
<div class="editor-row row-fluid">
<div class="section span12">
<h5>Values</h5>
<table class="table table-condensed table-striped">
<thead>
<tr>
<th></th>
<th>Chart value</th>
<th>Transform Series</th>
<th>Queries</th>
<th ng-show="panel.values.length > 1">Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="value in panel.values">
<td>
<label class="small">&nbsp</label>
<i class="icon-circle pointer" data-unique="1" bs-popover="'app/panels/multifieldhistogram/meta.html'" data-placement="right" ng-style="{color: value.color}"></i></td>
<td>
<div class="editor-option">
<label class="small">Mode</label>
<select ng-change="set_refresh(true)" class="input-small" ng-model="value.mode" ng-options="f for f in ['count','min','mean','max','total']"></select>
</div>
<div class="editor-option" ng-show="value.mode != 'count'">
<label class="small">Value Field <tip>This field must contain a numeric value</tip></label>
<input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-medium" ng-model="value.value_field">
</div>
</td>
<td>
<div class="editor-option" ng-show="value.mode != 'count'">
<label class="small">Scale</label>
<input type="text" class="input-mini" ng-model="value.scale">
</div>
<div class="editor-option">
<label class="small">Seconds <tip>Normalize intervals to per-second</tip></label>
<input type="checkbox" ng-model="value.scaleSeconds" ng-checked="value.scaleSeconds">
</div>
<div class="editor-option">
<label class="small">Derivative <tip>Plot the change per interval in the series</tip></label>
<input type="checkbox" ng-model="value.derivative" ng-checked="value.derivative" ng-change="set_refresh(true)">
</div>
<div class="editor-option">
<label class="small">Zero fill <tip>Fills zeros in gaps.</tip></label>
<input type="checkbox" ng-model="value.zerofill" ng-checked="value.zerofill" ng-change="set_refresh(true)">
</div>
</td>
<td>
<div class="editor-option querySelect">
<label class="small">Selected Queries</label>
<span ng-style="{'border-color': querySrv.list()[id].color}" ng-class="{selected:_.contains(value.queries,id),unselected:!_.contains(value.queries,id)}" ng-repeat="id in querySrv.ids()" ng-click="value.queries = _.toggleInOut(value.queries,id);set_refresh(true);" class="query pointer badge">
<i class="icon-circle" ng-style="{color: querySrv.list()[id].color}"></i>
<span> {{querySrv.list()[id].alias || querySrv.list()[id].query}}</span>
</span>
</div>
</td>
<td ng-show="panel.values.length > 1">
<label class="small">&nbsp</label>
<i ng-click="panel.values = _.without(panel.values, value);set_refresh(true)" class="pointer icon-remove"></i>
</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-success" ng-click="add_new_value(panel);set_refresh(true)"><i class="icon-plus-sign"></i> Add value</button>
</div>
</div>
<div class="editor-row">
<div class="section">
<h5>Time Options</h5>
<div class="editor-option">
<label class="small">Time Field</label>
<input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.time_field">
</div>
<div class="editor-option">
<label class="small">Time correction</label>
<select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
</div>
<div class="editor-option">
<label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" />
</div>
<div class="editor-option" ng-show='panel.auto_int'>
<label class="small">Resolution <tip>Shoot for this many data points, rounding to sane intervals</tip></label>
<input type="number" class='input-mini' ng-model="panel.resolution" ng-change='set_refresh(true)'/>
</div>
<div class="editor-option" ng-hide='panel.auto_int'>
<label class="small">Interval <tip>Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</tip></label>
<input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/>
</div>
</div>
</div>
57 changes: 57 additions & 0 deletions src/app/panels/multifieldhistogram/interval.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
define([
'kbn'
],
function (kbn) {
'use strict';

/**
* manages the interval logic
* @param {[type]} interval_string An interval string in the format '1m', '1y', etc
*/
function Interval(interval_string) {
this.string = interval_string;

var info = kbn.describe_interval(interval_string);
this.type = info.type;
this.ms = Math.ceil(info.sec * 1000 * info.count);

// does the length of the interval change based on the current time?
if (this.type === 'y' || this.type === 'M') {
// we will just modify this time object rather that create a new one constantly
this.get = this.get_complex;
this.date = new Date(0);
} else {
this.get = this.get_simple;
}
}

Interval.prototype = {
toString: function () {
return this.string;
},
after: function(current_ms) {
return this.get(current_ms, 1);
},
before: function (current_ms) {
return this.get(current_ms, -1);
},
get_complex: function (current, delta) {
this.date.setTime(current);
switch(this.type) {
case 'M':
this.date.setUTCMonth(this.date.getUTCMonth() + delta);
break;
case 'y':
this.date.setUTCFullYear(this.date.getUTCFullYear() + delta);
break;
}
return this.date.getTime();
},
get_simple: function (current, delta) {
return current + (delta * this.ms);
}
};

return Interval;

});
39 changes: 39 additions & 0 deletions src/app/panels/multifieldhistogram/markersEditor.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<div class="editor-row">
<h4>Markers</h4>
<div class="small">
Here you can specify a query to be plotted on your chart as a marker. Hovering over a marker will display the field you specify below. If more documents are found than the limit you set, they will be scored by Elasticsearch and events that best match your query will be displayed.
</div>
<style>
.querySelect .query {
margin-right: 5px;
}
.querySelect .selected {
border: 3px solid;
}
.querySelect .unselected {
border: 0px solid;
}
</style>
<p>
<div class="editor-option">
<label class="small">Enable</label>
<input type="checkbox" ng-change="set_refresh(true)" ng-model="panel.annotate.enable" ng-checked="panel.annotate.enable">
</div>
<div class="editor-option" ng-show="panel.annotate.enable">
<label class="small">Marker Query</label>
<input type="text" ng-change="set_refresh(true)" class="input-large" ng-model="panel.annotate.query"/>
</div>
<div class="editor-option" ng-show="panel.annotate.enable">
<label class="small">Tooltip field</label>
<input type="text" class="input-small" ng-model="panel.annotate.field" bs-typeahead="fields.list"/>
</div>
<div class="editor-option" ng-show="panel.annotate.enable">
<label class="small">Limit <tip>Max markers on the chart</tip></label>
<input type="number" class="input-mini" ng-model="panel.annotate.size" ng-change="set_refresh(true)"/>
</div>
<div class="editor-option" ng-show="panel.annotate.enable">
<label class="small">Sort <tip>Determine the most relevant markers using this field</tip></label>
<input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.annotate.sort[0]" ng-change="set_refresh(true)" />
<i ng-click="panel.annotate.sort[1] = _.toggle(panel.annotate.sort[1],'desc','asc');set_refresh(true)" ng-class="{'icon-chevron-up': panel.annotate.sort[1] == 'asc','icon-chevron-down': panel.annotate.sort[1] == 'desc'}"></i>
</div>
</div>
22 changes: 22 additions & 0 deletions src/app/panels/multifieldhistogram/meta.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<div class="panel-query-meta row-fluid" style="width:260px">
<style>
.panel-query-meta fieldset label {
margin-top: 3px;
}
</style>

<fieldset>
<label class="small">Legend value</label>
<input class="input-medium input-value-alias" type="text" ng-model="value.alias" placeholder='Alias...' ng-change="set_refresh(true);" />
</fieldset>

<hr class="small" />
<div>
<i ng-repeat="color in querySrv.colors" class="pointer" ng-class="{'icon-circle-blank':value.color == color,'icon-circle':value.color != color}" ng-style="{color:color}" ng-click="value.color = color;set_refresh(true);"> </i>
</div>

<div class="pull-right">
<a class="btn btn-mini btn-value-remove-color" ng-click="value.color = null;set_refresh(true);" ng-show="value.color" class="pointer">Remove color</a>
<input class="btn btn-mini" ng-click="set_refresh(true);dismiss();" type="submit"/ value="Close">
</div>
</div>
Loading

0 comments on commit 5bd1266

Please sign in to comment.