IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-08 15:13:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(graph panel): changed to PR #4493 and other polish, removed the relative time from graph tooltip, did not think it worked that well

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-04-09 12:45:35 -04:00
parent 034244217f
commit 22b11d7d4d
5 changed files with 19 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/app/plugins/panel/graph/graph_tooltip.js
View File

@ -33,9 +33,8 @@ function ($) {
return j - 1;
};
this.showTooltip = function(absoluteTime, relativeTime, innerHtml, pos) {
var body = '<div class="graph-tooltip small"><div class="graph-tooltip-time">'+ absoluteTime +
' <span class="tone-down">(' + relativeTime + ')</span></div> ';
this.showTooltip = function(absoluteTime, innerHtml, pos) {
var body = '<div class="graph-tooltip small"><div class="graph-tooltip-time">'+ absoluteTime + '</div> ';
body += innerHtml + '</div>';
$tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY);
};
@ -109,7 +108,7 @@ function ($) {
var plot = elem.data().plot;
var plotData = plot.getData();
var seriesList = getSeriesFn();
var group, value, absoluteTime, relativeTime, hoverInfo, i, series, seriesHtml, tooltipFormat;
var group, value, absoluteTime, hoverInfo, i, series, seriesHtml, tooltipFormat;
if (panel.tooltip.msResolution) {
tooltipFormat = 'YYYY-MM-DD HH:mm:ss.SSS';
@ -132,7 +131,6 @@ function ($) {
seriesHtml = '';
relativeTime = dashboard.getRelativeTime(seriesHoverInfo.time);
absoluteTime = dashboard.formatDate(seriesHoverInfo.time, tooltipFormat);
for (i = 0; i < seriesHoverInfo.length; i++) {
@ -142,22 +140,22 @@ function ($) {
continue;
}
var highlightStyle = '';
var highlightClass = '';
if (item && i === item.seriesIndex) {
highlightStyle = ' style="font-weight: bold;"';
highlightClass = 'graph-tooltip-list-item--highlight';
}
series = seriesList[i];
value = series.formatValue(hoverInfo.value);
seriesHtml += '<div class="graph-tooltip-list-item"><div class="graph-tooltip-series-name"' + highlightStyle + '>';
seriesHtml += '<div class="graph-tooltip-list-item ' + highlightClass + '"><div class="graph-tooltip-series-name">';
seriesHtml += '<i class="fa fa-minus" style="color:' + series.color +';"></i> ' + series.label + ':</div>';
seriesHtml += '<div class="graph-tooltip-value">' + value + '</div></div>';
plot.highlight(i, hoverInfo.hoverIndex);
}
self.showTooltip(absoluteTime, relativeTime, seriesHtml, pos);
self.showTooltip(absoluteTime, seriesHtml, pos);
}
// single series tooltip
else if (item) {
@ -174,12 +172,11 @@ function ($) {
value = series.formatValue(value);
relativeTime = dashboard.getRelativeTime(item.datapoint[0]);
absoluteTime = dashboard.formatDate(item.datapoint[0], tooltipFormat);
group += '<div class="graph-tooltip-value">' + value + '</div>';
self.showTooltip(absoluteTime, relativeTime, group, pos);
self.showTooltip(absoluteTime, group, pos);
}
// no hit
else {

5
public/sass/_variables.dark.scss
View File

@ -39,6 +39,7 @@ $brand-primary: $orange;
$brand-success: $green;
$brand-warning: $brand-primary;
$brand-danger: $red;
$brand-text-highlight: #f7941d;
// Status colors
// -------------------------
@ -242,8 +243,8 @@ $infoBackground: $blue-dark;
// Tooltips and popovers
// -------------------------
$tooltipColor: $white;
$tooltipBackground: rgb(58, 57, 57);
$tooltipColor: $text-color;
$tooltipBackground: $dark-4;
$tooltipArrowWidth: 5px;
$tooltipArrowColor: $tooltipBackground;
$tooltipLinkColor: $link-color;

1
public/sass/_variables.light.scss
View File

@ -44,6 +44,7 @@ $brand-primary: $orange;
$brand-success: $green;
$brand-warning: $orange;
$brand-danger: $red;
$brand-text-highlight: #f7941d;
// Status colors
// -------------------------

13
public/sass/components/_panel_graph.scss
View File

@ -237,27 +237,28 @@
.graph-tooltip-time {
text-align: center;
font-weight: $font-weight-semi-bold;
position: relative;
top: -3px;
}
.tone-down {
opacity: 0.7;
padding: 0.2rem;
}
.graph-tooltip-list-item {
display: table-row;
&--highlight {
color: $brand-text-highlight;
}
}
.graph-tooltip-series-name {
display: table-cell;
padding: 0.15rem;
}
.graph-tooltip-value {
display: table-cell;
font-weight: bold;
padding-left: 10px;
padding-left: 15px;
text-align: right;
}
}

7
public/sass/components/_tooltip.scss
View File

@ -88,13 +88,6 @@
}
}
.grafana-tooltip hr {
padding: 2px;
color: #c8c8c8;
margin: 0px;
border-bottom: 0px solid #c8c8c8;
}
.grafana-tip {
padding-left: 5px;
}