Merge branch 'master' into influxdb_alias_seriename

public/app/plugins/datasource/grafana/datasource.ts

@@ -1,17 +1,39 @@
 ///<reference path="../../../headers/common.d.ts" />
 
+import _ from 'lodash';
+
 class GrafanaDatasource {
 
   /** @ngInject */
   constructor(private backendSrv) {}
 
   query(options) {
-    return this.backendSrv.get('/api/metrics/test', {
-      from: options.range.from.valueOf(),
-      to: options.range.to.valueOf(),
-      scenario: 'random_walk',
-      interval: options.intervalMs,
-      maxDataPoints: options.maxDataPoints
+    return this.backendSrv.post('/api/tsdb/query', {
+      from: options.range.from.valueOf().toString(),
+      to: options.range.to.valueOf().toString(),
+      queries: [
+        {
+          "refId": "A",
+          "scenarioId": "random_walk",
+          "intervalMs": options.intervalMs,
+          "maxDataPoints": options.maxDataPoints,
+        }
+      ]
+    }).then(res => {
+
+      var data = [];
+      if (res.results) {
+        _.forEach(res.results, queryRes => {
+          for (let series of queryRes.series) {
+            data.push({
+              target: series.name,
+              datapoints: series.points
+            });
+          }
+        });
+      }
+
+      return {data: data};
     });
   }
 

public/app/plugins/panel/graph/graph.ts

@@ -183,6 +183,24 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) {
         }
       }
 
+      // Series could have different timeSteps,
+      // let's find the smallest one so that bars are correctly rendered.
+      function getMinTimeStepOfSeries(data) {
+        var min = Number.MAX_VALUE;
+
+        for (let i = 0; i < data.length; i++) {
+          if (!data[i].stats.timeStep) {
+            continue;
+          }
+
+          if (data[i].stats.timeStep < min) {
+            min = data[i].stats.timeStep;
+          }
+        }
+
+        return min;
+      }
+
       // Function for rendering panel
       function render_panel() {
         panelWidth =  elem.width();
@@ -279,9 +297,7 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) {
             break;
           }
           default: {
-            if (data.length && data[0].stats.timeStep) {
-              options.series.bars.barWidth = data[0].stats.timeStep / 1.5;
-            }
+            options.series.bars.barWidth = getMinTimeStepOfSeries(data) / 1.5;
             addTimeAxis(options);
             break;
           }

public/app/plugins/panel/graph/graph_tooltip.js

@@ -2,7 +2,7 @@ define([
   'jquery',
   'lodash'
 ],
-function ($, _) {
+function ($) {
   'use strict';
 
   function GraphTooltip(elem, dashboard, scope, getSeriesFn) {
@@ -21,7 +21,10 @@ function ($, _) {
       var initial = last*ps;
       var len = series.datapoints.points.length;
       for (var j = initial; j < len; j += ps) {
-        if (series.datapoints.points[j] > posX) {
+        // Special case of a non stepped line, highlight the very last point just before a null point
+        if ((series.datapoints.points[initial] != null && series.datapoints.points[j] == null && ! series.lines.steps)
+            //normal case
+            || series.datapoints.points[j] > posX) {
           return Math.max(j - ps,  0)/ps;
         }
       }
@@ -51,23 +54,35 @@ function ($, _) {
       //now we know the current X (j) position for X and Y values
       var last_value = 0; //needed for stacked values
 
+      var minDistance, minTime;
+
       for (i = 0; i < seriesList.length; i++) {
         series = seriesList[i];
 
         if (!series.data.length || (panel.legend.hideEmpty && series.allIsNull)) {
+          // Init value & yaxis so that it does not brake series sorting
           results.push({ hidden: true, value: 0, yaxis: 0 });
           continue;
         }
 
         if (!series.data.length || (panel.legend.hideZero && series.allIsZero)) {
+          // Init value & yaxis so that it does not brake series sorting
           results.push({ hidden: true, value: 0, yaxis: 0 });
           continue;
         }
 
         hoverIndex = this.findHoverIndexFromData(pos.x, series);
-        hoverDistance = Math.abs(pos.x - series.data[hoverIndex][0]);
+        hoverDistance = pos.x - series.data[hoverIndex][0];
         pointTime = series.data[hoverIndex][0];
 
+        // Take the closest point before the cursor, or if it does not exist, the closest after
+        if (! minDistance
+            || (hoverDistance >=0 && (hoverDistance < minDistance || minDistance < 0))
+            || (hoverDistance < 0 && hoverDistance > minDistance)) {
+          minDistance = hoverDistance;
+          minTime = pointTime;
+        }
+
         if (series.stack) {
           if (panel.tooltip.value_type === 'individual') {
             value = series.data[hoverIndex][1];
@@ -89,6 +104,7 @@ function ($, _) {
           hoverIndex = this.findHoverIndexFromDataPoints(pos.x, series, hoverIndex);
         }
 
+        // Be sure we have a yaxis so that it does not brake series sorting
         yaxis = 0;
         if (series.yaxis) {
           yaxis = series.yaxis.n;
@@ -106,8 +122,8 @@ function ($, _) {
         });
       }
 
-      // Find point which closer to pointer
-      results.time = _.min(results, 'distance').time;
+      // Time of the point closer to pointer
+      results.time = minTime;
 
       return results;
     };
@@ -153,6 +169,8 @@ function ($, _) {
 
         seriesHtml = '';
 
+        absoluteTime = dashboard.formatDate(seriesHoverInfo.time, tooltipFormat);
+
         // Dynamically reorder the hovercard for the current time point if the
         // option is enabled, sort by yaxis by default.
         if (panel.tooltip.sort === 2) {
@@ -169,8 +187,6 @@ function ($, _) {
           });
         }
 
-        var distance, time;
-
         for (i = 0; i < seriesHoverInfo.length; i++) {
           hoverInfo = seriesHoverInfo[i];
 
@@ -178,11 +194,6 @@ function ($, _) {
             continue;
           }
 
-          if (! distance || hoverInfo.distance < distance) {
-            distance = hoverInfo.distance;
-            time = hoverInfo.time;
-          }
-
           var highlightClass = '';
           if (item && i === item.seriesIndex) {
             highlightClass = 'graph-tooltip-list-item--highlight';
@@ -198,7 +209,6 @@ function ($, _) {
           plot.highlight(hoverInfo.index, hoverInfo.hoverIndex);
         }
 
-        absoluteTime = dashboard.formatDate(time, tooltipFormat);
         self.showTooltip(absoluteTime, seriesHtml, pos);
       }
       // single series tooltip

public/app/plugins/panel/graph/module.ts

@@ -66,7 +66,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     // fill factor
     fill          : 1,
     // line width in pixels
-    linewidth     : 2,
+    linewidth     : 1,
     // show hide points
     points        : false,
     // point radius in pixels

public/app/plugins/panel/graph/specs/graph_specs.ts

@@ -135,7 +135,7 @@ describe('grafanaGraph', function() {
     });
 
     it('should set barWidth', function() {
-      expect(ctx.plotOptions.series.bars.barWidth).to.be(10/1.5);
+      expect(ctx.plotOptions.series.bars.barWidth).to.be(1/1.5);
     });
   });