Skip to content

N
nexpie-grafana-theme
Commit e0a35a39 by Torkel Ödegaard
Options

work in progress for legend values

parent d9ec9ed1
Showing with 55 additions and 103 deletions
src/app/dashboards/default.json
......@@ -46,39 +46,12 @@
"x-axis": true,
"y-axis": true,
"scale": 1,
"y_format": "none",
"y2_format": "none",
"y_formats": ["short", "short"],
"grid": {
"max": null,
"min": 0
},
"annotate": {
"enable": false,
"query": "*",
"size": 20,
"field": "_type",
"sort": [
"_score",
"desc"
]
},
"auto_int": true,
"resolution": 100,
"interval": "5m",
"intervals": [
"auto",
"1s",
"1m",
"5m",
"10m",
"30m",
"1h",
"3h",
"12h",
"1d",
"1w",
"1y"
],
"lines": true,
"fill": 1,
"linewidth": 2,
......@@ -87,7 +60,6 @@
"bars": false,
"stack": true,
"spyable": true,
"zoomlinks": false,
"options": false,
"legend": true,
"interactive": true,
......
src/app/directives/grafanaGraph.js
......@@ -64,11 +64,6 @@ function (angular, $, kbn, moment, _) {
return;
}
_.each(data, function(series) {
series.label = series.info.alias;
series.color = series.info.color;
});
_.each(_.keys(scope.hiddenSeries), function(seriesAlias) {
var dataSeries = _.find(data, function(series) {
return series.info.alias === seriesAlias;
......@@ -138,10 +133,8 @@ function (angular, $, kbn, moment, _) {
addAnnotations(options);
for (var i = 0; i < data.length; i++) {
var _d = data[i].time_series.getFlotPairs(scope.panel.nullPointMode);
data[i].yaxis = data[i].info.yaxis;
var _d = data[i].getFlotPairs(scope.panel.nullPointMode);
data[i].data = _d;
data[i].info.y_format = data[i].yaxis === 1 ? scope.panel.y_format : scope.panel.y2_format;
}
configureAxisOptions(data, options);
......@@ -165,7 +158,7 @@ function (angular, $, kbn, moment, _) {
url += scope.panel['x-axis'] ? '' : '&hideAxes=true';
url += scope.panel['y-axis'] ? '' : '&hideYAxis=true';
switch(scope.panel.y_format) {
switch(scope.panel.y_formats[0]) {
case 'bytes':
url += '&yUnitSystem=binary';
break;
......@@ -241,10 +234,10 @@ function (angular, $, kbn, moment, _) {
var secondY = _.clone(defaults);
secondY.position = 'right';
options.yaxes.push(secondY);
configureAxisMode(options.yaxes[1], scope.panel.y2_format);
configureAxisMode(options.yaxes[1], scope.panel.y_formats[1]);
}
configureAxisMode(options.yaxes[0], scope.panel.y_format);
configureAxisMode(options.yaxes[0], scope.panel.y_formats[0]);
}
function configureAxisMode(axis, format) {
......@@ -293,10 +286,10 @@ function (angular, $, kbn, moment, _) {
item.datapoint[1] - item.datapoint[2] :
item.datapoint[1];
if(item.series.info.y_format === 'bytes') {
value = kbn.byteFormat(value,2);
value = kbn.byteFormat(value, 2);
}
if(item.series.info.y_format === 'short') {
value = kbn.shortFormat(value,2);
value = kbn.shortFormat(value, 2);
}
if(item.series.info.y_format === 'ms') {
value = kbn.msFormat(value);
......
src/app/panels/graphite/axisEditor.html
<div class="editor-row">
<div class="section">
<h5>Axis</h5>
<h5>Axes</h5>
<div class="editor-option">
<label class="small">X-Axis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
</div>
......@@ -10,11 +10,11 @@
</div>
<div class="editor-option">
<label class="small">Left Y Format <tip>Y-axis formatting</tip></label>
<select class="input-small" ng-model="panel.y_format" ng-options="f for f in ['none','short','bytes', 'ms']" ng-change="render()"></select>
<select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'ms']" ng-change="render()"></select>
</div>
<div class="editor-option">
<label class="small">Right Y Format <tip>Y-axis formatting</tip></label>
<select class="input-small" ng-model="panel.y2_format" ng-options="f for f in ['none','short','bytes', 'ms']" ng-change="render()"></select>
<select class="input-small" ng-model="panel.y_formats[2]" ng-options="f for f in ['none','short','bytes', 'ms']" ng-change="render()"></select>
</div>
<div class="editor-option">
......
src/app/panels/graphite/legend.html
......@@ -9,7 +9,7 @@
</i>
<span class='small histogram-legend-item'>
<a ng-click="toggleSeries(series)" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
{{series.alias}}
{{series.alias}} [max: {{series.max}}, min: {{series.min}}, total: {{series.total}}, avg: {{series.avg}}, current: {{series.current}}]
</a>
</span>
</span>
......
src/app/panels/graphite/module.js
......@@ -99,36 +99,23 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
*/
scale : 1,
/** @scratch /panels/histogram/3
* y_format:: 'none','bytes','short '
* y_formats :: 'none','bytes','short', 'ms'
*/
y_format : 'short',
y2_format : 'short',
y_formats : ['short', 'short'],
/** @scratch /panels/histogram/5
* grid object:: Min and max y-axis values
* grid.min::: Minimum y-axis value
* grid.max::: Maximum y-axis value
* grid.ma1::: Maximum y-axis value
*/
grid : {
max: null,
min: 0
},
/** @scratch /panels/histogram/3
* ==== Annotations
* annotate object:: A query can be specified, the results of which will be displayed as markers on
* the chart. For example, for noting code deploys.
* annotate.enable::: Should annotations, aka markers, be shown?
* annotate.query::: Lucene query_string syntax query to use for markers.
* annotate.size::: Max number of markers to show
* annotate.field::: Field from documents to show
* annotate.sort::: Sort array in format [field,order], For example [`@timestamp',`desc']
*/
annotate : {
enable : false,
query : "*",
size : 20,
field : '_type',
sort : ['_score','desc']
},
/** @scratch /panels/histogram/3
* resolution:: If auto_int is true, shoot for this many bars.
*/
......@@ -199,6 +186,15 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
_.defaults($scope.panel.annotate,_d.annotate);
_.defaults($scope.panel.grid,_d.grid);
// backward compatible stuff
if ($scope.panel.y_format) {
$scope.panel.y_formats[0] = $scope.panel.y_format;
delete $scope.panel.y_format;
}
if ($scope.panel.y2_format) {
$scope.panel.y_formats[1] = $scope.panel.y2_format;
delete $scope.panel.y2_format;
}
$scope.init = function() {
// Hide view options by default
......@@ -284,6 +280,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.panelMeta.loading = false;
$scope.legend = [];
// png renderer returns just a url
if (_.isString(results)) {
$scope.render(results);
return;
......@@ -297,26 +294,21 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
var color = $scope.panel.aliasColors[alias] || $scope.colors[data.length];
var yaxis = $scope.panel.aliasYAxis[alias] || 1;
var time_series = new timeSeries.ZeroFilled({
start_date: $scope.range && $scope.range.from,
end_date: $scope.range && $scope.range.to,
datapoints: targetData.datapoints
});
var seriesInfo = {
alias: alias,
color: color,
enable: true,
yaxis: yaxis,
y_format: $scope.panel.y_formats[yaxis - 1]
};
$scope.legend.push(seriesInfo);
data.push({
var series = new timeSeries.ZeroFilled({
datapoints: targetData.datapoints,
info: seriesInfo,
time_series: time_series,
});
$scope.legend.push(seriesInfo);
data.push(series);
});
$scope.render(data);
......
src/app/panels/graphite/timeSeries.js
......@@ -6,41 +6,21 @@ function (_) {
var ts = {};
// trim the ms off of a time, but return it with empty ms.
function getDatesTime(date) {
return Math.floor(date.getTime() / 1000)*1000;
}
/**
* Certain graphs require 0 entries to be specified for them to render
* properly (like the line graph). So with this we will caluclate all of
* the expected time measurements, and fill the missing ones in with 0
* @param {object} opts An object specifying some/all of the options
*
* OPTIONS:
* @opt {string} interval The interval notion describing the expected spacing between
* each data point.
* @opt {date} start_date (optional) The start point for the time series, setting this and the
* end_date will ensure that the series streches to resemble the entire
* expected result
* @opt {date} end_date (optional) The end point for the time series, see start_date
*/
ts.ZeroFilled = function (opts) {
opts = _.defaults(opts, {
start_date: null,
end_date: null,
datapoints: []
});
this.start_time = opts.start_date && getDatesTime(opts.start_date);
this.end_time = opts.end_date && getDatesTime(opts.end_date);
this.opts = opts;
this.datapoints = opts.datapoints;
this.info = opts.info;
this.label = opts.info.alias;
this.color = opts.info.color;
this.yaxis = opts.info.yaxis;
};
ts.ZeroFilled.prototype.getFlotPairs = function (fillStyle) {
var result = [];
this.info.total = 0;
this.info.max = null;
this.info.min = 212312321312;
_.each(this.datapoints, function(valueArray) {
var currentTime = valueArray[1];
var currentValue = valueArray[0];
......@@ -53,8 +33,23 @@ function (_) {
}
}
if (_.isNumber(currentValue)) {
this.info.total += currentValue;
}
if (currentValue > this.info.max) {
this.info.max = currentValue;
}
if (currentValue < this.info.min) {
this.info.min = currentValue;
}
result.push([currentTime * 1000, currentValue]);
});
}, this);
this.info.avg = this.info.total / result.length;
this.info.current = result[result.length-1][1];
return result;
};
......
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