apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

work in progress for legend values

Browse Source
pull/76/head
Torkel Ödegaard 12 years ago
parent d9ec9ed1ef
commit e0a35a3958
6 changed files with 55 additions and 103 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 30
      src/app/dashboards/default.json
  2. 19
      src/app/directives/grafanaGraph.js
  3. 6
      src/app/panels/graphite/axisEditor.html
  4. 2
      src/app/panels/graphite/legend.html
  5. 48
      src/app/panels/graphite/module.js
  6. 53
      src/app/panels/graphite/timeSeries.js

30
src/app/dashboards/default.json
Unescape View File

@ -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,

19
src/app/directives/grafanaGraph.js
Unescape View File

@ -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);

6
src/app/panels/graphite/axisEditor.html
Unescape View File

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

2
src/app/panels/graphite/legend.html
Unescape View File

@ -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>

48
src/app/panels/graphite/module.js
Unescape View File

@ -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);

53
src/app/panels/graphite/timeSeries.js
Unescape View File

@ -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;
};

Write Preview
Loading…
Cancel
Save