Incorrect rendering of charts in the fullscrean mode once view mode i…

…s changing between charts and table. Fixed abixen#1265
AliShahrivarian · Oct 5, 2017 · 7cd1829 · 7cd1829
1 parent b51ff8b
commit 7cd1829
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 15 deletions.
diff --git a/.../application/multi-visualisation/javascript/multivisualisation-module-chart.controller.js b/.../application/multi-visualisation/javascript/multivisualisation-module-chart.controller.js
@@ -76,6 +76,7 @@
                     multivisualisationModuleChart.data = chartParams.data;
                 }
                 $scope.$emit(platformParameters.events.STOP_REQUEST);
+                $scope.$emit(platformParameters.events.DRAW_MODULE_FINISHED);
             }
 
             function onQueryError(error) {
@@ -88,10 +89,10 @@
             moduleResponseErrorHandler.handle(error, $scope);
         }
 
-        function onRedrawModule(event, args) {
-            // if args and args.containerHeight provided then change chart height
-            if (args && args.containerHeight) {
-                $scope.multivisualisationModuleChart.options.chart.height = args.containerHeight;
+        function onRedrawModule(event, containerHeight) {
+            // if containerHeight provided then change chart height
+            if (containerHeight) {
+                $scope.multivisualisationModuleChart.options.chart.height = containerHeight;
             }
             multivisualisationModuleChart.api.update();
         }

diff --git a/abixen-platform-web-client/src/main/web/application/javascript/application-parameters.js b/abixen-platform-web-client/src/main/web/application/javascript/application-parameters.js
@@ -35,6 +35,7 @@ var platformParameters = {
         SHOW_LOADER: 'SHOW_LOADER',
         HIDE_LOADER: 'HIDE_LOADER',
         REDRAW_MODULE: 'REDRAW_MODULE',
+        DRAW_MODULE_FINISHED: 'DRAW_MODULE_FINISHED',
         SHOW_PERMISSION_DENIED_TO_MODULE: 'SHOW_PERMISSION_DENIED_TO_MODULE',
         SIDEBAR_ELEMENT_SELECTED: 'SIDEBAR_ELEMENT_SELECTED',
         CONFIGURATION_MODE: 'CONFIGURATION_MODE',
@@ -44,7 +45,8 @@ var platformParameters = {
         SHOW_CONFIGURATION_MODE_ICON: 'SHOW_CONFIGURATION_MODE_ICON',
         SHOW_EXIT_CONFIGURATION_MODE_ICON: 'SHOW_EXIT_CONFIGURATION_MODE_ICON',
         UPDATE_MODULE_CONTROL_ICONS: 'UPDATE_MODULE_CONTROL_ICONS',
-        REGISTER_MODULE_CONTROL_ICONS: 'REGISTER_MODULE_CONTROL_ICONS'
+        REGISTER_MODULE_CONTROL_ICONS: 'REGISTER_MODULE_CONTROL_ICONS',
+        GET_CONTAINER_HEIGHT: 'GET_CONTAINER_HEIGHT'
     },
     statusAlertTypes: {
         SUCCESS: 'success',

diff --git a/...m-web-client/src/main/web/application/modules/dashboard/javascript/dashboard.directive.js b/...m-web-client/src/main/web/application/modules/dashboard/javascript/dashboard.directive.js
@@ -216,6 +216,22 @@
             },
             link: function ($scope) {
 
+                function getFullScreenContainerHeight() {
+                    var topBar = document.getElementsByClassName('top-bar')[0];
+                    var moduleFullScreenHeight = (window.innerHeight - topBar.offsetHeight - parseInt(getComputedStyle(topBar.children[0]).marginBottom) - 8);
+                    return moduleFullScreenHeight;
+                }
+                function getFullScreenContainerBodyHeight() {
+                    var moduleFullScreen = angular.element(document.getElementById('module-full-screen'));
+                    // get height of window and subtract top toolbar height from it and subtract toolbar margin from it
+                    var topBar = document.getElementsByClassName('top-bar')[0];
+                    // new height of full screen mode
+                    var moduleFullScreenNewHeight = (window.innerHeight - topBar.offsetHeight - parseInt(getComputedStyle(topBar.children[0]).marginBottom) - 8);
+                    var moduleHeaderHeight = parseInt(moduleFullScreen[0].getElementsByClassName('module-header')[0].offsetHeight);
+                    // new height of content
+                    return moduleFullScreenNewHeight - moduleHeaderHeight;
+                }
+
                 $scope.$on('FULL_SCREEN_MODE', function (event, moduleId, fullScreenMode, callback) {
                     var dashboardSubContainer = angular.element(document.getElementById('dashboard-sub-container'));
                     var newContainerHeight = 450;
@@ -228,14 +244,9 @@
                         dashboardContainer.append(module);
                         var moduleFullScreen = angular.element(document.getElementById('module-full-screen'));
                         moduleFullScreen.append(moduleContent);
-                        // get height of window and subtract top toolbar height from it and subtract toolbar margin from it
-                        var topBar = document.getElementsByClassName('top-bar')[0];
-                        // new height of full screen mode
-                        var moduleFullScreenNewHeight = (window.innerHeight - topBar.offsetHeight - parseInt(getComputedStyle(topBar.children[0]).marginBottom) - 8);
-                        moduleFullScreen[0].style.height = moduleFullScreenNewHeight + 'px';
-                        var moduleHeaderHeight = parseInt(moduleFullScreen[0].getElementsByClassName('module-header')[0].offsetHeight);
+                        moduleFullScreen[0].style.height = getFullScreenContainerHeight() + 'px';
                         // new height of content
-                        newContainerHeight = moduleFullScreenNewHeight - moduleHeaderHeight;
+                        newContainerHeight = getFullScreenContainerBodyHeight();
                         var moduleBody = moduleFullScreen[0].getElementsByClassName('module-body')[0];
                         moduleBody.style.height = newContainerHeight + 'px';
                         moduleBody.style.overflow = 'auto';
@@ -250,7 +261,11 @@
                         var moduleFullScreen = angular.element(document.getElementById('platform-dashboard-row-full-screen'));
                         moduleFullScreen.remove();
                     }
-                    callback({ containerHeight: newContainerHeight });
+                    callback(newContainerHeight);
+                });
+                $scope.$on(platformParameters.events.GET_CONTAINER_HEIGHT, function (event, fullScreenMode, callback) {
+                    var newContainerHeight = fullScreenMode ? getFullScreenContainerBodyHeight() : 450;
+                    callback(newContainerHeight);
                 });
             },
             templateUrl: 'application/modules/dashboard/html/dashboard.html'

diff --git a/...form-web-client/src/main/web/application/modules/dashboard/javascript/module.directive.js b/...form-web-client/src/main/web/application/modules/dashboard/javascript/module.directive.js
@@ -156,14 +156,22 @@
                 $scope.$on(platformParameters.events.UPDATE_MODULE_CONTROL_ICONS, function (event, icons) {
                     $scope.moduleState.moduleIcons = icons;
                 });
+                $scope.$on(platformParameters.events.DRAW_MODULE_FINISHED, function (event) {
+                    if ($scope.moduleState.fullScreenMode) {
+                        function callback(containerHeight) {
+                            $scope.$broadcast(platformParameters.events.REDRAW_MODULE, containerHeight);
+                        }
+                        $scope.$emit(platformParameters.events.GET_CONTAINER_HEIGHT, $scope.moduleState.fullScreenMode, callback)
+                    }
+                });
                 $scope.toggleFullScreenMode = function () {
                     $scope.moduleState.fullScreenMode = !$scope.moduleState.fullScreenMode;
                     if ($scope.moduleState.fullScreenMode && $scope.moduleState.isCollapsed) {
                         $scope.moduleState.isCollapsed = false;
                     }
 
-                    function onModeChanged(args) {
-                        $scope.$broadcast(platformParameters.events.REDRAW_MODULE, args);
+                    function onModeChanged(containerHeight) {
+                        $scope.$broadcast(platformParameters.events.REDRAW_MODULE, containerHeight);
                     }
 
                     $scope.$emit('FULL_SCREEN_MODE', $scope.definition.wid, $scope.moduleState.fullScreenMode, onModeChanged);