Fix: some legacy dashboards got their widgets misplaced when using au…

…to height.
matsumo · Apr 8, 2018 · 9899abf · 9899abf
1 parent d023864
commit 9899abf
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 24 deletions.
diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js
@@ -180,10 +180,13 @@ function DashboardCtrl(
           if (this.refreshRate === null) {
             const refreshRate = Math.max(30, parseFloat($location.search().refresh));
 
-            this.setRefreshRate({
-              name: durationHumanize(refreshRate),
-              rate: refreshRate,
-            }, false);
+            this.setRefreshRate(
+              {
+                name: durationHumanize(refreshRate),
+                rate: refreshRate,
+              },
+              false,
+            );
           }
         }
       },
@@ -246,6 +249,7 @@ function DashboardCtrl(
             _.extend(widget.options.position, widget.$originalPosition);
             items[widget.id] = widget.options.position;
           });
+          this.dashboard.widgets = Dashboard.prepareWidgetsForDashboard(this.dashboard.widgets);
           if (this.updateGridItems) {
             this.updateGridItems(items);
           }

diff --git a/client/app/services/dashboard.js b/client/app/services/dashboard.js
@@ -29,6 +29,9 @@ function prepareWidgetsForDashboard(widgets) {
             : widget.options.position.sizeY,
         );
         widget.options.position.row = row;
+        if (widget.options.position.sizeY < 1) {
+          widget.options.position.sizeY = defaultWidgetSizeY;
+        }
       });
       return row + height;
     }, 0)
@@ -125,6 +128,7 @@ function Dashboard($resource, $http, currentUser, Widget, dashboardGridOptions)
   };
 
   resource.prepareDashboardWidgets = prepareDashboardWidgets;
+  resource.prepareWidgetsForDashboard = prepareWidgetsForDashboard;
 
   return resource;
 }

diff --git a/client/app/services/widget.js b/client/app/services/widget.js
@@ -10,14 +10,14 @@ function Widget($resource, $http, Query, Visualization, dashboardGridOptions) {
     'api/widgets/:id',
     { id: '@id' },
     {
-    get: { method: 'GET' },
-    save: {
-      method: 'POST',
-      transformRequest: flatten([prepareForSave, $http.defaults.transformRequest]),
-    },
-    query: { method: 'GET', isArray: true },
-    remove: { method: 'DELETE' },
-    delete: { method: 'DELETE' },
+      get: { method: 'GET' },
+      save: {
+        method: 'POST',
+        transformRequest: flatten([prepareForSave, $http.defaults.transformRequest]),
+      },
+      query: { method: 'GET', isArray: true },
+      remove: { method: 'DELETE' },
+      delete: { method: 'DELETE' },
     },
   );
 
@@ -63,25 +63,29 @@ function Widget($resource, $http, Query, Visualization, dashboardGridOptions) {
     widget.width = 1; // Backward compatibility, user on back-end
 
     const visualizationOptions = {
+      autoHeight: false,
       sizeX: Math.round(dashboardGridOptions.columns / 2),
-      sizeY: -1, // auto-height
+      sizeY: dashboardGridOptions.defaultSizeY,
       minSizeX: dashboardGridOptions.minSizeX,
       maxSizeX: dashboardGridOptions.maxSizeX,
       minSizeY: dashboardGridOptions.minSizeY,
       maxSizeY: dashboardGridOptions.maxSizeY,
     };
-    const visualization = widget.visualization ?
-      Visualization.visualizations[widget.visualization.type] : null;
+    const visualization = widget.visualization ? Visualization.visualizations[widget.visualization.type] : null;
     if (isObject(visualization)) {
       const options = extend({}, visualization.defaultOptions);
 
+      if (Object.prototype.hasOwnProperty.call(options, 'autoHeight')) {
+        visualizationOptions.autoHeight = options.autoHeight;
+      }
+
       // Width constraints
       const minColumns = parseInt(options.minColumns, 10);
-      if (isFinite(minColumns) && (minColumns >= 0)) {
+      if (isFinite(minColumns) && minColumns >= 0) {
         visualizationOptions.minSizeX = minColumns;
       }
       const maxColumns = parseInt(options.maxColumns, 10);
-      if (isFinite(maxColumns) && (maxColumns >= 0)) {
+      if (isFinite(maxColumns) && maxColumns >= 0) {
         visualizationOptions.maxSizeX = Math.min(maxColumns, dashboardGridOptions.columns);
       }
 
@@ -96,17 +100,17 @@ function Widget($resource, $http, Query, Visualization, dashboardGridOptions) {
         visualizationOptions.minSizeY = minRows;
       }
       const maxRows = parseInt(options.maxRows, 10);
-      if (isFinite(maxRows) && (maxRows >= 0)) {
+      if (isFinite(maxRows) && maxRows >= 0) {
         visualizationOptions.maxSizeY = maxRows;
       }
 
       // Default dimensions
       const defaultWidth = parseInt(options.defaultColumns, 10);
-      if (isFinite(defaultWidth) && (defaultWidth > 0)) {
+      if (isFinite(defaultWidth) && defaultWidth > 0) {
         visualizationOptions.sizeX = defaultWidth;
       }
       const defaultHeight = parseInt(options.defaultRows, 10);
-      if (isFinite(defaultHeight) && (defaultHeight > 0)) {
+      if (isFinite(defaultHeight) && defaultHeight > 0) {
         visualizationOptions.sizeY = defaultHeight;
       }
     }
@@ -133,7 +137,6 @@ function Widget($resource, $http, Query, Visualization, dashboardGridOptions) {
   return WidgetConstructor;
 }
 
-
 export default function init(ngModule) {
   ngModule.factory('Widget', Widget);
 }
diff --git a/client/app/visualizations/box-plot/index.js b/client/app/visualizations/box-plot/index.js
@@ -176,9 +176,15 @@ export default function init(ngModule) {
 
     const editTemplate = '<boxplot-editor></boxplot-editor>';
 
+    const defaultOptions = {
+      defaultRows: 8,
+      minRows: 5,
+    };
+
     VisualizationProvider.registerVisualization({
       type: 'BOXPLOT',
       name: 'Boxplot (Deprecated)',
+      defaultOptions,
       renderTemplate,
       editorTemplate: editTemplate,
     });

diff --git a/client/app/visualizations/cohort/index.js b/client/app/visualizations/cohort/index.js
@@ -20,7 +20,8 @@ const DEFAULT_OPTIONS = {
   totalColumn: 'total',
   valueColumn: 'value',
 
-  defaultRows: -1,
+  autoHeight: true,
+  defaultRows: 8,
 };
 
 function groupData(sortedData) {

diff --git a/client/app/visualizations/table/index.js b/client/app/visualizations/table/index.js
@@ -19,7 +19,8 @@ const DISPLAY_AS_OPTIONS = [
 
 const DEFAULT_OPTIONS = {
   itemsPerPage: 15,
-  defaultRows: -1,
+  autoHeight: true,
+  defaultRows: 14,
   defaultColumns: 3,
   minColumns: 2,
 };

diff --git a/client/app/visualizations/word-cloud/index.js b/client/app/visualizations/word-cloud/index.js
@@ -98,7 +98,7 @@ export default function init(ngModule) {
   ngModule.directive('wordCloudRenderer', wordCloudRenderer);
 
   const defaultOptions = {
-    defaultRows: -1,
+    defaultRows: 8,
   };
 
   ngModule.config((VisualizationProvider) => {