diff --git a/src/app/dashboards/default.json b/src/app/dashboards/default.json index 2e3ac8bdfff..577332d8b4a 100644 --- a/src/app/dashboards/default.json +++ b/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, diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index dbfa71c75bd..115cd5bd95d 100644 --- a/src/app/directives/grafanaGraph.js +++ b/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); diff --git a/src/app/panels/graphite/axisEditor.html b/src/app/panels/graphite/axisEditor.html index 3bf31cf4fb4..ccb62b551d6 100644 --- a/src/app/panels/graphite/axisEditor.html +++ b/src/app/panels/graphite/axisEditor.html @@ -1,7 +1,7 @@
-
Axis
+
Axes
@@ -10,11 +10,11 @@
- +
- +
diff --git a/src/app/panels/graphite/legend.html b/src/app/panels/graphite/legend.html index 259153385f1..ab95477b112 100644 --- a/src/app/panels/graphite/legend.html +++ b/src/app/panels/graphite/legend.html @@ -9,7 +9,7 @@ - {{series.alias}} + {{series.alias}} [max: {{series.max}}, min: {{series.min}}, total: {{series.total}}, avg: {{series.avg}}, current: {{series.current}}] diff --git a/src/app/panels/graphite/module.js b/src/app/panels/graphite/module.js index 20a34b22ea1..e4193d532db 100644 --- a/src/app/panels/graphite/module.js +++ b/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); diff --git a/src/app/panels/graphite/timeSeries.js b/src/app/panels/graphite/timeSeries.js index 02eec94e7fb..02907b406ce 100644 --- a/src/app/panels/graphite/timeSeries.js +++ b/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; };