set default layout for new added charts (apache#5425)

(cherry picked from commit daf2116)
graceguo-supercat · Aug 14, 2018 · 37d1d4d · 37d1d4d
1 parent 1f0d2fa
commit 37d1d4d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/superset/assets/src/dashboard/reducers/getInitialState.js b/superset/assets/src/dashboard/reducers/getInitialState.js
@@ -9,7 +9,11 @@ import { getColorFromScheme } from '../../modules/colors';
 import findFirstParentContainerId from '../util/findFirstParentContainer';
 import getEmptyLayout from '../util/getEmptyLayout';
 import newComponentFactory from '../util/newComponentFactory';
-import { DASHBOARD_HEADER_ID } from '../util/constants';
+import {
+  DASHBOARD_HEADER_ID,
+  GRID_DEFAULT_CHART_WIDTH,
+  GRID_COLUMN_COUNT,
+} from '../util/constants';
 import {
   DASHBOARD_HEADER_TYPE,
   CHART_TYPE,
@@ -55,6 +59,10 @@ export default function(bootstrapData) {
 
   // find root level chart container node for newly-added slices
   const parentId = findFirstParentContainerId(layout);
+  const parent = layout[parentId];
+  let newSlicesContainer;
+  let newSlicesContainerWidth = 0;
+
   const chartQueries = {};
   const slices = {};
   const sliceIds = new Set();
@@ -84,20 +92,26 @@ export default function(bootstrapData) {
 
       sliceIds.add(key);
 
-      // if chart is newly added from explore view, add a row in layout
+      // if there are newly added slices from explore view, fill slices into 1 or more rows
       if (!chartIdToLayoutId[key] && layout[parentId]) {
-        const parent = layout[parentId];
-        const rowContainer = newComponentFactory(ROW_TYPE);
-        layout[rowContainer.id] = rowContainer;
-        parent.children.push(rowContainer.id);
+        if (
+          newSlicesContainerWidth === 0 ||
+          newSlicesContainerWidth + GRID_DEFAULT_CHART_WIDTH > GRID_COLUMN_COUNT
+        ) {
+          newSlicesContainer = newComponentFactory(ROW_TYPE);
+          layout[newSlicesContainer.id] = newSlicesContainer;
+          parent.children.push(newSlicesContainer.id);
+          newSlicesContainerWidth = 0;
+        }
 
         const chartHolder = newComponentFactory(CHART_TYPE, {
           chartId: slice.slice_id,
         });
 
         layout[chartHolder.id] = chartHolder;
-        rowContainer.children.push(chartHolder.id);
+        newSlicesContainer.children.push(chartHolder.id);
         chartIdToLayoutId[chartHolder.meta.chartId] = chartHolder.id;
+        newSlicesContainerWidth += GRID_DEFAULT_CHART_WIDTH;
       }
     }
 

diff --git a/superset/assets/src/dashboard/util/constants.js b/superset/assets/src/dashboard/util/constants.js
@@ -23,6 +23,7 @@ export const GRID_MIN_COLUMN_COUNT = 1;
 export const GRID_MIN_ROW_UNITS = 5;
 export const GRID_MAX_ROW_UNITS = 100;
 export const GRID_MIN_ROW_HEIGHT = GRID_GUTTER_SIZE;
+export const GRID_DEFAULT_CHART_WIDTH = 4;
 
 // Header types
 export const SMALL_HEADER = 'SMALL_HEADER';

diff --git a/superset/assets/src/dashboard/util/newComponentFactory.js b/superset/assets/src/dashboard/util/newComponentFactory.js
@@ -11,18 +11,25 @@ import {
   TAB_TYPE,
 } from './componentTypes';
 
-import { MEDIUM_HEADER, BACKGROUND_TRANSPARENT } from './constants';
+import {
+  MEDIUM_HEADER,
+  BACKGROUND_TRANSPARENT,
+  GRID_DEFAULT_CHART_WIDTH,
+} from './constants';
 
 const typeToDefaultMetaData = {
-  [CHART_TYPE]: { width: 3, height: 30 },
-  [COLUMN_TYPE]: { width: 3, background: BACKGROUND_TRANSPARENT },
+  [CHART_TYPE]: { width: GRID_DEFAULT_CHART_WIDTH, height: 50 },
+  [COLUMN_TYPE]: {
+    width: GRID_DEFAULT_CHART_WIDTH,
+    background: BACKGROUND_TRANSPARENT,
+  },
   [DIVIDER_TYPE]: null,
   [HEADER_TYPE]: {
     text: 'New header',
     headerSize: MEDIUM_HEADER,
     background: BACKGROUND_TRANSPARENT,
   },
-  [MARKDOWN_TYPE]: { width: 3, height: 30 },
+  [MARKDOWN_TYPE]: { width: GRID_DEFAULT_CHART_WIDTH, height: 50 },
   [ROW_TYPE]: { background: BACKGROUND_TRANSPARENT },
   [TABS_TYPE]: null,
   [TAB_TYPE]: { text: 'New Tab' },