diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 1eaacb098a6..32454a1f4d7 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -113,7 +113,8 @@ function (angular, $, kbn, moment, _) { show: panel.points, fill: 1, fillColor: false, - radius: panel.pointradius + radius: panel.points ? panel.pointradius : 2 + // little points when highlight points }, shadowSize: 1 }, @@ -335,6 +336,7 @@ function (angular, $, kbn, moment, _) { if(scope.panel.tooltip.shared) { $tooltip.detach(); elem.flot.clearCrosshair(); + elem.flot.unhighlight(); } }); @@ -344,6 +346,8 @@ function (angular, $, kbn, moment, _) { //if tooltip shared we'll show a crosshair and will look for X and all Y series values //else we will take from item. if(scope.panel.tooltip.shared){ + //unhighligh previous points. + elem.flot.unhighlight(); //check if all series has same length if so, only one x index will //be checked and only for exact timestamp values var l = []; @@ -361,7 +365,9 @@ function (angular, $, kbn, moment, _) { break; } } - j--; //we take previous value in time. + if(j>0) { + j--; //we take previous value in time. + } //now we know the current X (j) position for X and Y values timestamp = dashboard.formatDate(series.data[j][0]); var last_value=0; //needed for stacked values @@ -384,12 +390,14 @@ function (angular, $, kbn, moment, _) { group = kbn.query_color_dot(series.color, 15) + ' '; } //pre-pending new values - s_final= group+ ": "+value +'
'+ s; + s_final= group+ ": "+value +'
'+ s; s=s_final; + //higligth point + elem.flot.highlight(i,j); } $tooltip.html('Time@ '+ - timestamp + '
' + s + '
').place_tt(pos.pageX, pos.pageY); + timestamp + '

' + s + '').place_tt(pos.pageX, pos.pageY); return; }else { console.log('WARNING: tootltip shared can not be shown becouse of from ' diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index b291b548219..d009f1eff89 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -438,6 +438,18 @@ select.grafana-target-segment-input { max-width: 800px; max-height: 600px; overflow: hidden; + line-height: 14px; +} + + + +.grafana-tooltip hr { + padding: 2px; + color: #c8c8c8; + margin: 0px; + border-bottom:0px solid #c8c8c8; + /*height:0px; + background-color: rgb(58, 57, 57);*/ } .tooltip.in {