fix: resize charts when necessary and better initialization of charts

gravitee-io · Feb 8, 2017 · d7a2846 · d7a2846
1 parent d20f915
commit d7a2846
Show file tree

Hide file tree

Showing 12 changed files with 34 additions and 22 deletions.
diff --git 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
@@ -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
@@ -70,7 +70,7 @@ <h6>CUSTOM TIMEFRAME</h6>
   <div layout="row" ng-if="hasData">
       <md-card flex="70">
         <md-card-content>
-          <gravitee-chart options="chartData" type="column" stacked="true" zoom="true"></gravitee-chart>
+          <gravitee-chart options="chartData" type="column" stacked="true" zoom="true" height="400"></gravitee-chart>
         </md-card-content>
       </md-card>
 
@@ -119,7 +119,7 @@ <h4>Frequency</h4>
         <md-input-container class="md-block" flex-gt-xs>
           <label>Time Unit</label>
           <md-select ng-model="healthCheckCtrl.healthcheck.unit" placeholder="Time unit" required ng-required="true">
-            <md-option ng-repeat="timeUnit in healthCheckCtrl.timeUnits">{{timeUnit}}</md-option>
+            <md-option ng-value="timeUnit" ng-repeat="timeUnit in healthCheckCtrl.timeUnits">{{timeUnit}}</md-option>
           </md-select>
         </md-input-container>
       </div>
@@ -140,7 +140,7 @@ <h4>Request</h4>
         <md-input-container class="md-block" flex-gt-xs>
           <label>HTTP Method</label>
           <md-select ng-model="healthCheckCtrl.healthcheck.request.method" placeholder="HTTP Method" ng-required="true">
-            <md-option ng-repeat="httpMethod in healthCheckCtrl.httpMethods">{{httpMethod}}</md-option>
+            <md-option ng-value="httpMethod" ng-repeat="httpMethod in healthCheckCtrl.httpMethods">{{httpMethod}}</md-option>
           </md-select>
         </md-input-container>
       </div>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -15,17 +15,17 @@
     limitations under the License.
 
 -->
-<div ng-show="fetchData" layout="column" layout-align="center center" flex>
+<div ng-if="fetchData" layout="column" layout-align="center center" flex>
   <md-progress-circular md-mode="indeterminate" class="md-accent md-hue-1" md-diameter="50"></md-progress-circular>
 </div>
 
-<div ng-show="!fetchData && results" ng-switch on="chart.type">
+<div ng-if="!fetchData && results" ng-switch on="chart.type">
   <gravitee-chart-table ng-switch-when="table" data="results"></gravitee-chart-table>
   <gravitee-chart-pie ng-switch-when="pie" data="results"></gravitee-chart-pie>
   <gravitee-chart-line ng-switch-when="line" data="results"></gravitee-chart-line>
 </div>
 
-<div ng-show="!fetchData && !results" layout="column" layout-align="center center" flex>
+<div ng-if="!fetchData && !results" layout="column" layout-align="center center" flex>
   <p><ng-md-icon icon="block" style="fill: grey"></ng-md-icon></p>
   <p>No data</p>
 </div>
diff --git 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
@@ -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
@@ -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
@@ -132,7 +132,6 @@ function routerConfig($stateProvider, $urlRouterProvider) {
       }
     })
     .state('apis.admin.general', {
-      abstract: true,
       url: '',
       templateUrl: 'app/api/admin/general/api.html',
       controller: 'ApiGeneralController',