diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 0577c6fbfcc..323cd4e6f6b 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -20,7 +20,7 @@ var panelTemplate = `
- +
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index 30761238d82..9a67f24890e 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -92,48 +92,11 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) { } }, scope); - function getLegendHeight(panelHeight) { - const LEGEND_PADDING = 23; - - if (!panel.legend.show || panel.legend.rightSide) { - return 0; - } - - let legendHeight = getLegendContainerHeight() + LEGEND_PADDING; - return Math.min(legendHeight, Math.floor(panelHeight/2)); - } - - function getLegendContainerHeight() { - try { - let graphWrapperElem = elem.parent().parent(); - let legendElem = graphWrapperElem.find('.graph-legend-wrapper'); - let legendHeight = legendElem.height(); - return legendHeight; - } catch (e) { - console.log(e); - return 0; - } - } - - function setElementHeight() { - try { - var height = ctrl.height - getLegendHeight(ctrl.height); - elem.css('height', height + 'px'); - - return true; - } catch (e) { // IE throws errors sometimes - console.log(e); - return false; - } - } - function shouldAbortRender() { if (!data) { return true; } - if (!setElementHeight()) { return true; } - if (panelWidth === 0) { return true; } @@ -152,6 +115,10 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) { $("
").text(panel.yaxes[1].label).appendTo(elem); } + if (ctrl.dataWarning) { + $(`
${ctrl.dataWarning.title}
`).appendTo(elem); + } + thresholdManager.draw(plot); } diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index 854adef48fb..4444c8b35ce 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/public/app/plugins/panel/graph/legend.ts @@ -10,7 +10,6 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { return { link: function(scope, elem) { - var $container = $('
'); var firstRender = true; var ctrl = scope.ctrl; var panel = ctrl.panel; @@ -20,7 +19,9 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { var legendScrollbar; scope.$on("$destroy", function() { - legendScrollbar.destroy(); + if (!legendScrollbar) { + legendScrollbar.destroy(); + } }); ctrl.events.on('render-legend', () => { @@ -73,9 +74,9 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { var el = $(e.currentTarget); var index = getSeriesIndexForElement(el); var seriesInfo = seriesList[index]; - var scrollPosition = $($container.children('tbody')).scrollTop(); + var scrollPosition = $(elem.children('tbody')).scrollTop(); ctrl.toggleSeries(seriesInfo, e); - $($container.children('tbody')).scrollTop(scrollPosition); + $(elem.children('tbody')).scrollTop(scrollPosition); } function sortLegend(e) { @@ -117,22 +118,21 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { } if (firstRender) { - elem.append($container); - $container.on('click', '.graph-legend-icon', openColorSelector); - $container.on('click', '.graph-legend-alias', toggleSeries); - $container.on('click', 'th', sortLegend); + elem.on('click', '.graph-legend-icon', openColorSelector); + elem.on('click', '.graph-legend-alias', toggleSeries); + elem.on('click', 'th', sortLegend); firstRender = false; } seriesList = data; - $container.empty(); + elem.empty(); // Set min-width if side style and there is a value, otherwise remove the CSS propery var width = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth + "px" : ""; - $container.css("min-width", width); + elem.css("min-width", width); - $container.toggleClass('graph-legend-table', panel.legend.alignAsTable === true); + elem.toggleClass('graph-legend-table', panel.legend.alignAsTable === true); var tableHeaderElem; if (panel.legend.alignAsTable) { @@ -162,7 +162,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { if (!panel.legend.rightSide) { renderLegendElement(tableHeaderElem); updateLegendDecimals(); - $container.empty(); + elem.empty(); } else { updateLegendDecimals(); } @@ -214,26 +214,17 @@ module.directive('graphLegend', function(popoverSrv, $timeout) { var seriesElements = renderSeriesLegendElements(); if (panel.legend.alignAsTable) { - var maxHeight = ctrl.height; - - if (!panel.legend.rightSide) { - maxHeight = maxHeight/2; - } - - var topPadding = 6; var tbodyElem = $(''); - tbodyElem.css("max-height", maxHeight - topPadding); tbodyElem.append(tableHeaderElem); tbodyElem.append(seriesElements); - $container.append(tbodyElem); + elem.append(tbodyElem); } else { - var maxLegendHeight = ctrl.height / 2; - $container.css("max-height", maxLegendHeight - 6); - $container.append(seriesElements); + elem.append(seriesElements); + } - if (!legendScrollbar) { - legendScrollbar = new PerfectScrollbar($container[0]); - } + if (!legendScrollbar) { + legendScrollbar = new PerfectScrollbar(elem[0]); + } else { legendScrollbar.update(); } } diff --git a/public/app/plugins/panel/graph/template.ts b/public/app/plugins/panel/graph/template.ts index 6ded97ce33a..0b9eb8227df 100644 --- a/public/app/plugins/panel/graph/template.ts +++ b/public/app/plugins/panel/graph/template.ts @@ -1,22 +1,10 @@ var template = ` -
-
- -
- {{ctrl.dataWarning.title}} -
- -
-
- +
+
-
-
- -
+
+
`; export default template; - - diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index fcf95d6d702..119f1c905cc 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -1,10 +1,39 @@ -.graph-canvas-wrapper { - position: relative; - cursor: crosshair; +.graph-panel { + display: flex; + flex-direction: column; + height: 100%; + + &--legend-right { + flex-direction: row; + + // .graph-panel__chart { + // display: table-cell; + // width: 100%; + // position: relative; + // } + + .graph-legend { + max-height: 100%; + position: relative; + left: 4px; + margin: 0 0 0 1rem; + } + + .graph-legend-series { + display: block; + padding-left: 0px; + } + + .graph-legend-table .graph-legend-series { + display: table-row; + } + } } -.histogram-chart { +.graph-panel__chart { position: relative; + cursor: crosshair; + flex-grow: 1; } .datapoints-warning { @@ -23,6 +52,8 @@ .graph-legend { @include clearfix(); + flex: 0 1 auto; + max-height: 30%; margin: 0 $spacer; text-align: center; width: calc(100% - $spacer); @@ -161,39 +192,6 @@ } } -.graph-legend-rightside { - - &.graph-wrapper { - display: table; - width: 100%; - } - - .graph-canvas-wrapper { - display: table-cell; - width: 100%; - position: relative; - } - - .graph-legend-wrapper { - display: table-cell; - vertical-align: top; - position: relative; - left: 4px; - } - - .graph-legend { - margin: 0 0 0 1rem; - } - - .graph-legend-series { - display: block; - padding-left: 0px; - } - - .graph-legend-table .graph-legend-series { - display: table-row; - } -} .graph-legend-series-hidden { .graph-legend-value,