diff --git a/CHANGELOG.md b/CHANGELOG.md index 61e9d0c1f43..7ebcafedd18 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ vNext **New features or improvements** - Allow [[..]] filter notation in all text panels (markdown/html/text) (Issue #511) +- New legend display option "Align as table" (Issue #136) +- New legend display option "Right side", will show legend to the right of the graph (Issue #556) +- Enhanced InfluxDB series aliasing (legend names) with pattern replacements (Issue #525) **Changes** - Use unix epoch for Graphite from/to for absolute time ranges (Closes #536) diff --git a/src/app/components/require.config.js b/src/app/components/require.config.js index 3b70deb82e4..80ad4326789 100644 --- a/src/app/components/require.config.js +++ b/src/app/components/require.config.js @@ -39,7 +39,6 @@ require.config({ 'jquery.flot.stack': '../vendor/jquery/jquery.flot.stack', 'jquery.flot.stackpercent':'../vendor/jquery/jquery.flot.stackpercent', 'jquery.flot.time': '../vendor/jquery/jquery.flot.time', - 'jquery.flot.byte': '../vendor/jquery/jquery.flot.byte', modernizr: '../vendor/modernizr-2.6.1', @@ -80,7 +79,6 @@ require.config({ // 'jquery-ui': ['jquery'], 'jquery.flot': ['jquery'], - 'jquery.flot.byte': ['jquery', 'jquery.flot'], 'jquery.flot.pie': ['jquery', 'jquery.flot'], 'jquery.flot.events': ['jquery', 'jquery.flot'], 'jquery.flot.selection':['jquery', 'jquery.flot'], diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index a1bd21c5683..ae33815dbed 100755 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -18,6 +18,7 @@ function (angular, $, kbn, moment, _) { var data, plot, annotations; var hiddenData = {}; var dashboard = scope.dashboard; + var legendSideLastValue = null; scope.$on('refresh',function() { if (scope.otherPanelInFullscreenMode()) { return; } @@ -56,7 +57,7 @@ function (angular, $, kbn, moment, _) { height = height - 32; // subtract panel title bar - if (scope.panel.legend.show) { + if (scope.panel.legend.show && !scope.panel.legend.rightSide) { height = height - 21; // subtract one line legend } @@ -136,6 +137,7 @@ function (angular, $, kbn, moment, _) { yaxes: [], xaxis: {}, grid: { + minBorderMargin: 0, markings: [], backgroundColor: null, borderWidth: 0, @@ -162,9 +164,30 @@ function (angular, $, kbn, moment, _) { addAnnotations(options); configureAxisOptions(data, options); - plot = $.plot(elem, data, options); + // if legend is to the right delay plot draw a few milliseconds + // so the legend width calculation can be done + if (shouldDelayDraw(panel)) { + console.log('delay'); + legendSideLastValue = panel.legend.rightSide; + setTimeout(function() { + plot = $.plot(elem, data, options); + addAxisLabels(); + }, 50); + } + else { + plot = $.plot(elem, data, options); + addAxisLabels(); + } + } - addAxisLabels(); + function shouldDelayDraw(panel) { + if (panel.legend.rightSide) { + return true; + } + if (legendSideLastValue !== null && panel.legend.rightSide !== legendSideLastValue) { + return true; + } + return false; } function addTimeAxis(options) { @@ -354,8 +377,10 @@ function (angular, $, kbn, moment, _) { url += scope.panel.fill !== 0 ? ('&areaAlpha=' + (scope.panel.fill/10).toFixed(1)) : ''; url += scope.panel.linewidth !== 0 ? '&lineWidth=' + scope.panel.linewidth : ''; url += scope.panel.legend.show ? '&hideLegend=false' : '&hideLegend=true'; - url += scope.panel.grid.min !== null ? '&yMin=' + scope.panel.grid.min : ''; - url += scope.panel.grid.max !== null ? '&yMax=' + scope.panel.grid.max : ''; + url += scope.panel.grid.leftMin !== null ? '&yMin=' + scope.panel.grid.leftMin : ''; + url += scope.panel.grid.leftMax !== null ? '&yMax=' + scope.panel.grid.leftMax : ''; + url += scope.panel.grid.rightMin !== null ? '&yMin=' + scope.panel.grid.rightMin : ''; + url += scope.panel.grid.rightMax !== null ? '&yMax=' + scope.panel.grid.rightMax : ''; url += scope.panel['x-axis'] ? '' : '&hideAxes=true'; url += scope.panel['y-axis'] ? '' : '&hideYAxis=true'; diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html index eb8ac3fb081..9edef939e16 100644 --- a/src/app/panels/graph/axisEditor.html +++ b/src/app/panels/graph/axisEditor.html @@ -33,47 +33,25 @@ -
- - -
-
-
Grid thresholds
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
- -
-
Legend
+
Legend styles
+
+ +
+
+ +
@@ -100,6 +78,29 @@
+
+
Grid thresholds
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
Show Axes
diff --git a/src/app/panels/graph/legend.html b/src/app/panels/graph/legend.html index 84aab5020f6..e2afc984ef6 100755 --- a/src/app/panels/graph/legend.html +++ b/src/app/panels/graph/legend.html @@ -1,38 +1,40 @@ - - - - +
+ +
+
+ + +
+
{{series.alias}} - - -   Current: {{series.current}}  - - -   Min: {{series.min}}  - - -   Max: {{series.max}}  - - -   Total: {{series.total}}  - - -   Avg: {{series.avg}}  - - - - +
+
+ Current: {{series.current}} +
+
+ Min: {{series.min}} +
+
+ Max: {{series.max}} +
+
+ Total: {{series.total}} +
+
+ Avg: {{series.avg}} +
+
+ +
+