Add new hidden widget cards for latest and timeseries value

ui/src/app/components/dashboard.directive.js

@@ -58,6 +58,7 @@ function Dashboard() {
             columns: '=',
             margins: '=',
             isEdit: '=',
+            hideWidgets: '=?',
             autofillHeight: '=',
             mobileAutofillHeight: '=?',
             mobileRowHeight: '=?',
@@ -100,6 +101,8 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
 
     vm.gridster = null;
 
+    vm.hideWidgets = angular.isDefined(vm.hideWidgets) ? vm.hideWidgets : false;
+
     vm.isMobileDisabled = angular.isDefined(vm.isMobileDisabled) ? vm.isMobileDisabled : false;
 
     vm.isMobileSize = false;
@@ -122,10 +125,10 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
         maxRows: 100,
         columns: vm.columns ? vm.columns : 24,
         margins: vm.margins ? vm.margins : [10, 10],
-        minSizeX: 1,
+        minSizeX: vm.hideWidgets ? 0 : 1,
-        minSizeY: 1,
+        minSizeY: vm.hideWidgets ? 0 : 1,
-        defaultSizeX: 8,
+        defaultSizeX: vm.hideWidgets ? 0 : 8,
-        defaultSizeY: 6,
+        defaultSizeY: vm.hideWidgets ? 0 : 6,
         resizable: {
             enabled: vm.isEdit
         },
@@ -143,11 +146,11 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
     vm.widgetIds = [];
 
     vm.widgetItemMap = {
-        sizeX: 'vm.widgetLayoutInfo[widget.id].sizeX',
+        sizeX: 'vm.widgetIsHidden(widget) ? 0 : vm.widgetLayoutInfo[widget.id].sizeX',
-        sizeY: 'vm.widgetLayoutInfo[widget.id].sizeY',
+        sizeY: 'vm.widgetIsHidden(widget) ? 0 : vm.widgetLayoutInfo[widget.id].sizeY',
         row: 'vm.widgetLayoutInfo[widget.id].row',
         col: 'vm.widgetLayoutInfo[widget.id].col',
-        minSizeY: 'widget.minSizeY',
+        minSizeY: 'vm.widgetIsHidden(widget) ? 0 : widget.minSizeY',
         maxSizeY: 'widget.maxSizeY'
     };
 
@@ -195,6 +198,7 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
     vm.widgetActions = widgetActions;
     vm.dropWidgetShadow = dropWidgetShadow;
     vm.enableWidgetFullscreen = enableWidgetFullscreen;
+    vm.widgetIsHidden = widgetIsHidden;
     vm.hasTimewindow = hasTimewindow;
     vm.hasAggregation = hasAggregation;
     vm.editWidget = editWidget;
@@ -335,6 +339,13 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
         $scope.$broadcast('toggleDashboardEditMode', vm.isEdit);
     });
 
+    $scope.$watch('vm.hideWidgets', function () {
+        vm.gridsterOpts.minSizeX = vm.hideWidgets ? 0 : 1,
+        vm.gridsterOpts.minSizeY = vm.hideWidgets ? 0 : 1,
+        vm.gridsterOpts.defaultSizeX = vm.hideWidgets ? 0 : 8,
+        vm.gridsterOpts.defaultSizeY = vm.hideWidgets ? 0 : 6
+    });
+
     $scope.$watch('vm.isMobileSize', function (newVal, prevVal) {
         if (!angular.equals(newVal, prevVal)) {
             $scope.$broadcast('mobileModeChanged', vm.isMobileSize);
@@ -1017,6 +1028,16 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
         }
     }
 
+    function widgetIsHidden(widget) {
+        if (!vm.hideWidgets)
+            return false;
+        if (angular.isDefined(widget.config.settings.hidden)) {
+            return widget.config.settings.hidden;
+        } else {
+            return false;
+        }
+    }
+
     function hasTimewindow(widget) {
         if (widget.type === types.widgetType.timeseries.value || widget.type === types.widgetType.alarm.value) {
             return angular.isDefined(widget.config.useDashboardTimewindow) ?

ui/src/app/components/widget/widget.controller.js

@@ -865,7 +865,7 @@ export default function WidgetController($scope, $state, $timeout, $window, $ocL
         var sizeChanged = false;
 
         if (!widgetContext.width || widgetContext.width != width || !widgetContext.height || widgetContext.height != height) {
-            if (width > 0 && height > 0) {
+            if ((width > 0 && height > 0) || (widgetContext.settings.hidden === true)) {
                 widgetContext.$container.css('height', height + 'px');
                 widgetContext.$container.css('width', width + 'px');
                 widgetContext.width = width;

ui/src/app/dashboard/layouts/dashboard-layout.tpl.html

@@ -49,6 +49,7 @@
             state-controller="vm.dashboardCtx.stateController"
             dashboard-timewindow="vm.dashboardCtx.dashboardTimewindow"
             is-edit="vm.isEdit"
+            hide-widgets="!vm.isEdit"
             autofill-height="vm.layoutCtx.gridSettings.autoFillHeight && !vm.isEdit"
             mobile-autofill-height="vm.layoutCtx.gridSettings.mobileAutoFillHeight && !vm.isEdit"
             mobile-row-height="vm.layoutCtx.gridSettings.mobileRowHeight"