IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

improved tooltip styles, add multiple highlight points, and changed highligth size when graph plotted without points.

Browse Source
This commit is contained in:
toni-moreno 2014-09-29 12:48:08 +02:00
parent 7f33bec71c
commit 51333c9eda
2 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/directives/grafanaGraph.js
View File

@ -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 +'<br>'+ s;
s_final= group+ ": <b>"+value +'</b><br>'+ s;
s=s_final;
//higligth point
elem.flot.highlight(i,j);
}
$tooltip.html('<small style="font-size:0.7em;">Time@ <b>'+
timestamp + '</b><br>' + s + '</small>').place_tt(pos.pageX, pos.pageY);
timestamp + '</b><br><hr>' + s + '</small>').place_tt(pos.pageX, pos.pageY);
return;
}else {
console.log('WARNING: tootltip shared can not be shown becouse of from '

12
src/css/less/grafana.less
View File

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