set default layout for new added charts (#5425)

This commit is contained in:
Grace Guo 2018-07-27 11:59:32 -07:00 committed by GitHub
parent d373178451
commit daf21169ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 11 deletions

View File

@ -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;
}
}

View File

@ -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';

View File

@ -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' },