From d7a28462ea7b00f8f5895056d70e34b93fdc095e Mon Sep 17 00:00:00 2001 From: Azize Elamrani Date: Wed, 8 Feb 2017 21:11:57 +0100 Subject: [PATCH] fix: resize charts when necessary and better initialization of charts --- e2e/mocked-backend.js | 1 + .../admin/healthcheck/healthcheck.controller.js | 4 ++-- src/app/api/admin/healthcheck/healthcheck.html | 6 +++--- .../components/analytics/timeframe.directive.js | 3 ++- src/app/components/chart/chart.directive.js | 15 ++++++++------- src/app/components/diff/diff.directive.js | 2 +- .../components/widget/widget-chart.directive.js | 5 ++--- src/app/components/widget/widget-chart.html | 6 +++--- .../components/widget/widget-line.directive.js | 2 ++ .../components/widget/widget-table.directive.js | 4 +++- src/app/components/widget/widget.directive.js | 7 +++++++ src/app/index.route.js | 1 - 12 files changed, 34 insertions(+), 22 deletions(-) diff --git a/e2e/mocked-backend.js b/e2e/mocked-backend.js index 4e5da34a73..6f0621cd29 100644 --- a/e2e/mocked-backend.js +++ b/e2e/mocked-backend.js @@ -20,6 +20,7 @@ exports.httpBackendMock = function() { $httpBackend.whenGET('/management/apis/').respond([]); $httpBackend.whenGET('/management/user/').respond({username: 'MockedUser'}); $httpBackend.whenGET('/management/user/MockedUser/picture').respond('pic'); + $httpBackend.whenGET('/management/configuration/views/').respond([]); $httpBackend.whenGET('/management/policies/').respond([{ "id" : "rate-limit", diff --git a/src/app/api/admin/healthcheck/healthcheck.controller.js b/src/app/api/admin/healthcheck/healthcheck.controller.js index 38015af8cd..9a21d5cbd3 100644 --- a/src/app/api/admin/healthcheck/healthcheck.controller.js +++ b/src/app/api/admin/healthcheck/healthcheck.controller.js @@ -265,7 +265,7 @@ class ApiHealthCheckController { }; var okCounter = 0; - if (response.data.buckets.true) { + if (response.data.buckets && response.data.buckets.true) { _this.$scope.chartData.series.push({ data: response.data.buckets.true, name: "OK", @@ -280,7 +280,7 @@ class ApiHealthCheckController { } var koCounter = 0; - if (response.data.buckets.false) { + if (response.data.buckets && response.data.buckets.false) { _this.$scope.chartData.series.push({ data: response.data.buckets.false, name: "KO", diff --git a/src/app/api/admin/healthcheck/healthcheck.html b/src/app/api/admin/healthcheck/healthcheck.html index bc47c7c567..1549d159ed 100644 --- a/src/app/api/admin/healthcheck/healthcheck.html +++ b/src/app/api/admin/healthcheck/healthcheck.html @@ -70,7 +70,7 @@
CUSTOM TIMEFRAME
- + @@ -119,7 +119,7 @@

Frequency

- {{timeUnit}} + {{timeUnit}}
@@ -140,7 +140,7 @@

Request

- {{httpMethod}} + {{httpMethod}} diff --git a/src/app/components/analytics/timeframe.directive.js b/src/app/components/analytics/timeframe.directive.js index 19a534bd66..b7909e73b8 100644 --- a/src/app/components/analytics/timeframe.directive.js +++ b/src/app/components/analytics/timeframe.directive.js @@ -204,6 +204,7 @@ class TimeframeController { tf = that.timeframes[0]; } + // timeframeChange event is dynamically initialized, so we have to define a timeout to correctly fired it this.$timeout(function () { that.$scope.$broadcast('timeframeChange', { interval: tf.interval, @@ -215,7 +216,7 @@ class TimeframeController { from: timeframe.from, to: timeframe.to }); - }); + }, 200); this.$scope.current = { interval: tf.interval, diff --git a/src/app/components/chart/chart.directive.js b/src/app/components/chart/chart.directive.js index 533c8ab134..ab80fa24fc 100644 --- a/src/app/components/chart/chart.directive.js +++ b/src/app/components/chart/chart.directive.js @@ -34,12 +34,12 @@ class ChartDirective { let lastOptions; scope.$watch('options', function (newOptions) { - if (!lastOptions) { + setTimeout(function () { setChartSize(); - } - displayChart(newOptions, chartElement); - lastOptions = newOptions; - }, true); + displayChart(newOptions, chartElement); + lastOptions = newOptions; + }); + }); function onWindowResized() { setTimeout(function () { @@ -70,8 +70,9 @@ class ChartDirective { function setChartSize() { let containerElement = element.parent().parent().parent().parent(); - element.css('height', scope.height || containerElement.height()); - element.css('width', scope.width || containerElement.width()); + let parentElement = element.parent(); + element.css('height', scope.height || parentElement.height() || containerElement.height()); + element.css('width', scope.width || parentElement.width() || containerElement.width()); } function initSynchronizedCharts() { diff --git a/src/app/components/diff/diff.directive.js b/src/app/components/diff/diff.directive.js index ff62f05254..c6cae5d9a5 100644 --- a/src/app/components/diff/diff.directive.js +++ b/src/app/components/diff/diff.directive.js @@ -27,7 +27,7 @@ class DiffDirective { var oldValue = scope.oldValue; var newValue = scope.newValue; - if (oldValue !== null && newValue !== null) { + if (oldValue && newValue) { elem.html(''); var diff = JsDiff.diffJson(oldValue, newValue); diff.forEach(function(part){ diff --git a/src/app/components/widget/widget-chart.directive.js b/src/app/components/widget/widget-chart.directive.js index fdca61fe49..493dcd8c2e 100644 --- a/src/app/components/widget/widget-chart.directive.js +++ b/src/app/components/widget/widget-chart.directive.js @@ -22,9 +22,8 @@ class WidgetChartDirective { this.templateUrl = 'app/components/widget/widget-chart.html'; } - controller($scope, $http, $compile) { - $scope.$http = $http; - $scope.$compile = $compile; + controller($scope) { + 'ngInject'; $scope.refresh = function() { // Call the analytics service diff --git a/src/app/components/widget/widget-chart.html b/src/app/components/widget/widget-chart.html index 8f5fb7df07..64d11775bd 100644 --- a/src/app/components/widget/widget-chart.html +++ b/src/app/components/widget/widget-chart.html @@ -15,17 +15,17 @@ limitations under the License. --> -
+
-
+
-
+

No data

diff --git a/src/app/components/widget/widget-line.directive.js b/src/app/components/widget/widget-line.directive.js index 784a042f40..ebbf51003c 100644 --- a/src/app/components/widget/widget-line.directive.js +++ b/src/app/components/widget/widget-line.directive.js @@ -23,6 +23,8 @@ class WidgetChartLineDirective { } controller($scope, $rootScope) { + 'ngInject'; + //from https://material.google.com/style/color.html#color-color-palette //shade 500 & 900 // diff --git a/src/app/components/widget/widget-table.directive.js b/src/app/components/widget/widget-table.directive.js index 3ee90b17db..4f3d549cb2 100644 --- a/src/app/components/widget/widget-table.directive.js +++ b/src/app/components/widget/widget-table.directive.js @@ -17,12 +17,14 @@ class WidgetChartTableDirective { constructor() { this.restrict = 'E'; this.scope = { - data: "=data" + data: '=data' }; this.templateUrl = 'app/components/widget/widget-table.html'; } controller($scope) { + 'ngInject'; + this.$scope = $scope; this.$scope.selected = []; diff --git a/src/app/components/widget/widget.directive.js b/src/app/components/widget/widget.directive.js index d1d8b039c1..0f569bb458 100644 --- a/src/app/components/widget/widget.directive.js +++ b/src/app/components/widget/widget.directive.js @@ -20,6 +20,13 @@ class WidgetDirective { templateUrl: 'app/components/widget/widget.html', scope: { widget: '=' + }, + controller: function ($scope) { + 'ngInject'; + + $scope.$on('gridster-resized', function () { + $scope.$broadcast('onWidgetResize'); + }); } }; } diff --git a/src/app/index.route.js b/src/app/index.route.js index f07206faad..62a29e2849 100644 --- a/src/app/index.route.js +++ b/src/app/index.route.js @@ -132,7 +132,6 @@ function routerConfig($stateProvider, $urlRouterProvider) { } }) .state('apis.admin.general', { - abstract: true, url: '', templateUrl: 'app/api/admin/general/api.html', controller: 'ApiGeneralController',