From e530e4d4bc3368148ae19b984fccfc966d82a4cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 7 Nov 2014 12:14:46 +0100 Subject: [PATCH] Tech: rewrite of how the legend is implement, performance increase, and will make future legend enhancements easier --- src/app/directives/grafanaGraph.js | 4 - src/app/panels/graph/legend.html | 50 ------------ src/app/panels/graph/legend.js | 98 ++++++++++++++++++++++++ src/app/panels/graph/legend.popover.html | 27 +++++++ src/app/panels/graph/module.html | 27 +++---- src/app/panels/graph/module.js | 6 +- src/app/services/all.js | 1 + src/app/services/popoverSrv.js | 45 +++++++++++ src/css/less/graph.less | 3 - 9 files changed, 186 insertions(+), 75 deletions(-) delete mode 100755 src/app/panels/graph/legend.html create mode 100644 src/app/panels/graph/legend.js create mode 100644 src/app/panels/graph/legend.popover.html create mode 100644 src/app/services/popoverSrv.js diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index 374d5e34eab..fb506e59b11 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -46,10 +46,6 @@ function (angular, $, kbn, moment, _, GraphTooltip) { scope.get_data(); }); - scope.$on('toggleLegend', function() { - render_panel(); - }); - // Receive render events scope.$on('render',function(event, renderData) { data = renderData || data; diff --git a/src/app/panels/graph/legend.html b/src/app/panels/graph/legend.html deleted file mode 100755 index 42fbda69de8..00000000000 --- a/src/app/panels/graph/legend.html +++ /dev/null @@ -1,50 +0,0 @@ -
- -
-
- -
-
- - {{series.alias}} - -
-
-
-
-
-
-
- -
- - - diff --git a/src/app/panels/graph/legend.js b/src/app/panels/graph/legend.js new file mode 100644 index 00000000000..3632ee0deb1 --- /dev/null +++ b/src/app/panels/graph/legend.js @@ -0,0 +1,98 @@ +define([ + 'angular', + 'app', + 'lodash', + 'kbn', + 'jquery', + 'jquery.flot', + 'jquery.flot.time', +], +function (angular, app, _, kbn, $) { + 'use strict'; + + var module = angular.module('grafana.panels.graph'); + + module.directive('graphLegend', function(popoverSrv) { + + return { + link: function(scope, elem) { + var $container = $('
'); + var firstRender = true; + var panel = scope.panel; + var data; + var i; + + scope.$on('render', function(event, renderData) { + data = renderData || data; + if (data) { + render(); + } + }); + + function getSeriesIndexForElement(el) { + return el.parents('[data-series-index]').data('series-index'); + } + + function openColorSelector(e) { + var el = $(e.currentTarget); + var index = getSeriesIndexForElement(el); + var seriesInfo = data[index].info; + var popoverScope = scope.$new(); + popoverScope.series = seriesInfo; + popoverSrv.show({ + element: $(':first-child', el), + templateUrl: 'app/panels/graph/legend.popover.html', + scope: popoverScope + }); + } + + function toggleSeries(e) { + var el = $(e.currentTarget); + var index = getSeriesIndexForElement(el); + var seriesInfo = data[index].info; + scope.toggleSeries(seriesInfo, e); + } + + function render() { + if (firstRender) { + elem.append($container); + $container.on('click', '.graph-legend-icon', openColorSelector); + $container.on('click', '.graph-legend-alias', toggleSeries); + firstRender = false; + } + + $container.empty(); + + $container.toggleClass('graph-legend-table', panel.legend.alignAsTable); + + for (i = 0; i < data.length; i++) { + var series = data[i]; + var html = '
'; + html += '
'; + html += ''; + html += '
'; + + html += '
'; + html += '' + series.label + ''; + html += '
'; + + if (panel.legend.values) { + if (panel.legend.min) { html += '
' + series.info.min + '
'; } + if (panel.legend.max) { html += '
' + series.info.max + '
'; } + if (panel.legend.avg) { html += '
' + series.info.avg + '
'; } + if (panel.legend.current) { html += '
' + series.info.current + '
'; } + if (panel.legend.total) { html += '
' + series.info.total + '
'; } + } + + html += '
'; + $container.append($(html)); + } + } + } + }; + }); + +}); diff --git a/src/app/panels/graph/legend.popover.html b/src/app/panels/graph/legend.popover.html new file mode 100644 index 00000000000..ea029429b1c --- /dev/null +++ b/src/app/panels/graph/legend.popover.html @@ -0,0 +1,27 @@ +
+ × + +
+ + + +
+ +
+ + +
+
+ diff --git a/src/app/panels/graph/module.html b/src/app/panels/graph/module.html index 1f185049800..77aa8a038f9 100644 --- a/src/app/panels/graph/module.html +++ b/src/app/panels/graph/module.html @@ -1,25 +1,22 @@
-
-
+
+
-
- No datapoints Can be caused by timezone mismatch between browser and graphite server - Datapoints outside time range Can be caused by timezone mismatch between browser and graphite server -
+
+ No datapoints Can be caused by timezone mismatch between browser and graphite server + Datapoints outside time range Can be caused by timezone mismatch between browser and graphite server +
-
-
+
+
-
+
-
-
-
+
+
-
+
diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index 86546da2d1d..0da63bef1d0 100644 --- a/src/app/panels/graph/module.js +++ b/src/app/panels/graph/module.js @@ -7,6 +7,7 @@ define([ 'moment', 'components/timeSeries', './seriesOverridesCtrl', + './legend', 'services/panelSrv', 'services/annotationsSrv', 'services/datasourceSrv', @@ -23,7 +24,6 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { 'use strict'; var module = angular.module('grafana.panels.graph'); - app.useModule(module); module.controller('GraphCtrl', function($scope, $rootScope, panelSrv, annotationsSrv, timeSrv) { @@ -270,7 +270,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { }; $scope.render = function(data) { - $scope.$emit('render', data); + $scope.$broadcast('render', data); }; $scope.changeSeriesColor = function(series, color) { @@ -291,7 +291,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { $scope.toggleSeriesExclusiveMode(serie); } - $scope.$emit('toggleLegend', $scope.legend); + $scope.render(); }; $scope.toggleSeriesExclusiveMode = function(serie) { diff --git a/src/app/services/all.js b/src/app/services/all.js index 71fafd222c2..efb8c79fb15 100644 --- a/src/app/services/all.js +++ b/src/app/services/all.js @@ -9,6 +9,7 @@ define([ './timer', './keyboardManager', './annotationsSrv', + './popoverSrv', './playlistSrv', './unsavedChangesSrv', './dashboard/dashboardKeyBindings', diff --git a/src/app/services/popoverSrv.js b/src/app/services/popoverSrv.js new file mode 100644 index 00000000000..2bd6df0021a --- /dev/null +++ b/src/app/services/popoverSrv.js @@ -0,0 +1,45 @@ +define([ + 'angular', +], +function (angular) { + 'use strict'; + + var module = angular.module('grafana.services'); + + module.service('popoverSrv', function($templateCache, $timeout, $q, $http, $compile) { + + this.getTemplate = function(url) { + return $q.when($templateCache.get(url) || $http.get(url, {cache: true})); + }; + + this.show = function(options) { + var popover = options.element.data('popover'); + if (popover) { + popover.scope.$destroy(); + popover.destroy(); + return; + } + + this.getTemplate(options.templateUrl).then(function(result) { + var template = result.data; + + options.element.popover({ + content: template, + placement: 'bottom', + html: true + }); + + popover = options.element.data('popover'); + popover.hasContent = function () { + return template; + }; + + popover.toggle(); + popover.scope = options.scope; + $compile(popover.$tip)(popover.scope); + }); + }; + + }); + +}); diff --git a/src/css/less/graph.less b/src/css/less/graph.less index 0da3014410f..196b5e88c68 100644 --- a/src/css/less/graph.less +++ b/src/css/less/graph.less @@ -60,9 +60,6 @@ padding-left: 0; &.pull-right { float: none; - .graph-legend-alias::after { - content: 'y\00B2'; - } } }