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

fix: refactoring #10922

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-02-15 12:42:17 +01:00
parent 4b4e38531b
commit 57103ec98a
5 changed files with 36 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/app/core/components/grafana_app.ts
View File

@ -87,6 +87,11 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
elem.toggleClass('playlist-active', newValue === true); elem.toggleClass('playlist-active', newValue === true);
}); });
// check if we are in server side render
if (document.cookie.indexOf('renderKey') !== -1) {
body.addClass('body--phantomjs');
}
// tooltip removal fix // tooltip removal fix
// manage page classes // manage page classes
var pageClass; var pageClass;

18
public/app/plugins/panel/graph/legend.ts
View File

@ -234,24 +234,6 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
elem.append(seriesElements); elem.append(seriesElements);
} }
// Phantomjs has rendering issue for CSS float property, so when legend values are present, legend takes
// all graph width and rendering fails. So it should be handled to avoid rendering timeout.
// See issue #10526 https://github.com/grafana/grafana/issues/10526
if (panel.legend.rightSide) {
const legendWidth = elem.parent().width();
const panelWidth = elem.parent().width();
let maxLegendElementWidth = _.max(_.map(seriesElements, el => $(el).width()));
maxLegendElementWidth = _.isNumber(maxLegendElementWidth) ? maxLegendElementWidth : 0;
const widthDiff = Math.abs(panelWidth - maxLegendElementWidth);
// Set width to content size, but table takes all space anyway, so width shouldn't be more
// than 40% of panel in this case.
if (widthDiff < panelWidth * 0.1 || legendWidth > panelWidth * 0.9) {
const maxTableWidthPercent = 0.4;
const maxWidth = Math.min(Math.ceil(maxLegendElementWidth * 1.05), panelWidth * maxTableWidthPercent);
elem.css('max-width', maxWidth);
}
}
if (!panel.legend.rightSide) { if (!panel.legend.rightSide) {
addScrollbar(); addScrollbar();
} else { } else {

4
public/sass/components/_dashboard_grid.scss
View File

@ -41,8 +41,8 @@
.theme-dark { .theme-dark {
.react-grid-item > .react-resizable-handle::after { .react-grid-item > .react-resizable-handle::after {
border-right: 2px solid $gray-4; border-right: 2px solid $gray-1;
border-bottom: 2px solid $gray-4; border-bottom: 2px solid $gray-1;
} }
} }

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

@ -70,19 +70,19 @@
font-size: 85%; font-size: 85%;
text-align: left; text-align: left;
&.current::before { &.current::before {
content: "Current: "; content: 'Current: ';
} }
&.max::before { &.max::before {
content: "Max: "; content: 'Max: ';
} }
&.min::before { &.min::before {
content: "Min: "; content: 'Min: ';
} }
&.total::before { &.total::before {
content: "Total: "; content: 'Total: ';
} }
&.avg::before { &.avg::before {
content: "Avg: "; content: 'Avg: ';
} }
} }
@ -106,6 +106,12 @@
padding-left: 6px; padding-left: 6px;
} }
.body--phantomjs {
.graph-legend-table {
display: table;
}
}
.graph-legend-table { .graph-legend-table {
tbody { tbody {
display: block; display: block;
@ -124,7 +130,7 @@
float: none; float: none;
.graph-legend-alias::after { .graph-legend-alias::after {
content: "(right-y)"; content: '(right-y)';
padding: 0 5px; padding: 0 5px;
color: $text-color-weak; color: $text-color-weak;
} }
@ -175,7 +181,7 @@
&.total, &.total,
&.avg { &.avg {
&::before { &::before {
content: ""; content: '';
} }
} }
} }