Trellis Board | Showcase | MESCIUS DataViewsJS Demos

This demo shows how to use TrellisGrouping to simulate a technical support scrum whiteboard. Try adding groups using the included menu, or edit items in those groups.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Showcase/TrellisBoard/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="trello, trellis" />
<meta
name="description"
content="This demo shows how to use TrellisGrouping to simulate a technical support scrum whiteboard."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trellis Board | Showcase | MESCIUS DataViewsJS JavaScript Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/node_modules/ispin/dist/ispin.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/bootstrap-snippet.min.css" rel="stylesheet" type="text/css" />
<link
href="/dataviewsjs/demos/node_modules/@fortawesome/fontawesome-free/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.trellis.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'purejs',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/lodash/lodash.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/imask/dist/imask.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/ispin/dist/ispin.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.trellis.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/systemjs/dist/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<template id="trellis-card" style="display: none">
<div class="card-container">
<div class="card-title-icon">
<span class="title-icon card-edit fa fa-edit" title="Edit card"></span>
<span class="title-icon card-remove fa fa-trash-alt" title="Remove card"></span>
</div>
{{? it.priority}}
<div class="card-label" data-column="priority"></div>
{{?}}
<div class="card-content card-description" data-column="description"></div>
{{? it.image}}
<div class="card-image" data-column="image"></div>
{{?}} {{? it.evaluation}}
<div class="card-evaluation" data-column="evaluation"></div>
{{?}}
</div>
</template>
<div class="main-container">
<div class="wrapper">
<div class="board-header">
<span class="title">Hornet scrum whiteboard</span>
<a class="pull-right" onclick="showMenuPanel();">Show Menu</a>
</div>
<div class="board-content">
<div class="grid-container">
<div id="grid"></div>
</div>
<div id="trellis-menu" class="trellis-menu">
<div class="trellis-menu-header">
<span class="header-title">Menu</span>
<span class="fa fa-times pull-right" onclick="showMenuPanel();"></span>
</div>
<div class="trellis-menu-body">
<div class="trellis-menu-group-label">Add Group</div>
<div id="add-group-container" class="add-group-container">
<input class="trellis-addGroupInput" placeholder="Input Group Name..." />
<button type="button" class="btn btn-default trellis-editBtn" onclick="addNewGroup();">Add</button>
</div>
<div class="activities-container">
<div class="split-line"></div>
<div class="trellis-menu-group-label">Activity</div>
<div class="trellis-menu-activities"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
System.import('./app.js');
</script>
</body>
</html>

import { GridLayout } from '@grapecity/dataviews.grid';
import TrellisGrouping from '@grapecity/dataviews.trellis';
import { getPanelWidth } from './utils';
import { appClickHandler, handleMoveCard } from './handlers';
const colors = ['#00D8FF', '#74ACC8', '#808080', '#F5A623', '#D0021B'];
window.colors = colors;
const priorityPresenter =
'<div style="display: inline-block;background: {{=colors[it.priority/100 -1]}}; width:100%;height:3px;margin:3px 3px 3px 0;"></div>';
const imagePresenter = '<div style="padding:8px; height:auto"><img style="width:100%;" src={{=it.image}} /></div>';
const evaluationPresenter =
'<div style="padding-bottom: 5px"><span title="Evaluation" style="background: {{=colors[it.priority/100 -1]}};">{{=it.evaluation}}</span></div>';
const cols = [
{ id: 'image', dataField: 'image', presenter: imagePresenter },
{ id: 'priority', dataField: 'priority', presenter: priorityPresenter },
{ id: 'description', dataField: 'description' },
{ id: 'evaluation', dataField: 'evaluation', presenter: evaluationPresenter },
];
const trellisGrouping = new TrellisGrouping({
panelUnitWidth: getPanelWidth(),
});
const layout = new GridLayout({
grouping: [
{
field: 'category',
header: {
height: 35,
template: `<div class="trellis-card-header">
<span>{{=it.name}}</span>
<div class="group-header-options">
<span class="group-remove fa fa-trash-alt"></span>
</div>
</div>`,
},
footer: {
visible: true,
height: 24,
template: '<div class="trellis-card-add">Add a item...</div>',
},
preDefinedGroups: ['STORIES', 'TO DO/ISSUES', 'PROCESSING', 'DONE'],
},
],
rowTemplate: '#trellis-card',
groupStrategy: trellisGrouping,
autoRowHeight: true,
});
let dataView;
$(() => {
$.getJSON('data.json', function (data) {
data.forEach((record) => {
if (record.image) {
record.image = window.process.env.SITE_ROOT + record.image;
}
});
dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout);
});
});
trellisGrouping.dragDropping.addHandler(handleMoveCard);
document.addEventListener('click', appClickHandler);
window.addEventListener('resize', () => {
if (dataView) {
trellisGrouping.options.panelUnitWidth = getPanelWidth();
dataView.invalidate();
}
});
window.showMenuPanel = function showMenuPanel() {
$('#trellis-menu').toggleClass('hide');
};

[
{
"category": "TO DO/ISSUES",
"priority": 500,
"evaluation": 1.5,
"description": "Facebook demo can't scroll well.",
"image": "/images/t_facebook.png"
},
{
"category": "TO DO/ISSUES",
"priority": 100,
"evaluation": 0.5,
"description": "Format is not correct in new version."
},
{
"category": "TO DO/ISSUES",
"priority": 200,
"evaluation": 0.25,
"description": "There is no response when clicking the group header.",
"image": "/images/t_groupHeader.png"
},
{
"category": "TO DO/ISSUES",
"priority": 400,
"evaluation": 2,
"description": "Horizontal layout engine layout is incorrect when ending editing.",
"image": "/images/t_horizontal.png"
},
{
"category": "TO DO/ISSUES",
"priority": 400,
"evaluation": 3,
"description": "SearchBox can't work in IE or FireFox.",
"image": "/images/t_searchbox.png"
},
{
"category": "PROCESSING",
"priority": 400,
"evaluation": 2.5,
"description": "The font style is different. We need to make it unified.",
"image": "/images/t_font.jpg"
},
{
"category": "PROCESSING",
"priority": 300,
"evaluation": 1,
"description": "The tool panel don't support mousewheel event."
},
{
"category": "PROCESSING",
"priority": 300,
"evaluation": 3,
"description": "There is no drag drop indicator when dragging the column header in the Horizontal Layout Engine."
},
{
"category": "PROCESSING",
"priority": 300,
"evaluation": 1,
"description": "The button style is different.",
"image": "/images/t_buttons.jpg"
},
{
"category": "PROCESSING",
"priority": 400,
"evaluation": 3,
"description": "The items in the drop down list in SearchBox should be customizable.",
"image": "/images/t_dropdown.png"
},
{
"category": "DONE",
"priority": 200,
"evaluation": 3,
"description": "The chat row template demo can't load data normally.",
"image": "/images/t_chat.png"
},
{
"category": "DONE",
"priority": 500,
"evaluation": 3,
"description": "If the group header is selected, the whole group items should be selected."
},
{
"category": "DONE",
"priority": 500,
"evaluation": 3,
"description": "If the tree header is selected, its children should not be selected.",
"image": "/images/t_select.png"
},
{
"category": "DONE",
"priority": 200,
"evaluation": 3,
"description": "The layout goes wrong when resizing with row template."
},
{
"category": "DONE",
"priority": 200,
"evaluation": 3,
"description": "The inline edit can't commit values when clicking another row."
},
{
"category": "STORIES",
"priority": 400,
"evaluation": 1,
"description": "Group footer should not be selected."
},
{
"category": "STORIES",
"priority": 400,
"evaluation": 2,
"description": "Group header and footer should support template."
},
{
"category": "STORIES",
"priority": 500,
"evaluation": 3,
"description": "Hierarchical footer should not be selected."
},
{
"category": "STORIES",
"priority": 400,
"evaluation": 2,
"description": "Select an item in SearchBox, and then press delete, the item should be deleted."
},
{
"category": "STORIES",
"priority": 400,
"evaluation": 1,
"description": "The sort icon should be placed in front of the column header caption."
}
]

import { createElement, getGroupInfo, encodeValue, getDataView } from './utils';
import { pushActivity } from './log';
const dialogId = 'card-edit-dialog';
export function openEditDialog(hitTestInfo) {
const overlay = createElement('<div class="popup-overlay"></div>');
document.body.appendChild(overlay);
const row = hitTestInfo.groupInfo.row;
const groupInfo = getGroupInfo(hitTestInfo.groupInfo.path);
const record =
row >= 0
? groupInfo.getItem(row)
: {
description: '',
category: groupInfo.name,
priority: 100,
evaluation: 0.25,
};
const priority = record.priority;
const description = record.description || '';
const evaluation = !isNaN(record.evaluation) ? record.evaluation : '';
const palette = [
{ priority: 'lowest', color: '#00D8FF', weight: 100 },
{ priority: 'low', color: '#74ACC8', weight: 200 },
{ priority: 'medium', color: '#808080', weight: 300 },
{ priority: 'high', color: '#F5A623', weight: 400 },
{ priority: 'highest', color: '#D0021B', weight: 500 },
];
const colorPicker = palette.map((it) => {
const checked = priority && priority === 100 * (1 + colors.indexOf(it.color)) ? ' checked' : '';
const className = `color-picker-item${checked}`;
const style = `background-color:${it.color}`;
return `<div title="${it.priority}" data-color="${it.color}" style="${style}" class="${className}">${it.weight}</div>`;
});
const html = `<div id="${dialogId}" class="edit-dialog" style="position: absolute;">
<div class="flex0">
<div class="text-label">Priority</div>
<div class="color-picker-group">${colorPicker.join('')}</div>
</div>
<div class="description-editor flex1">
<div class="text-label">Description</div>
<textarea placeholder="Here is Description...">${description}</textarea>
</div>
<div class="evaluation-picker flex0">
<div class="text-label">Workloads</div>
<div>
<input class="workInput" type="text" min="0.25" max="40" step="0.25"  placeholder="Here is Evaluation..." value="${evaluation}" />
</div>
</div>
<div class="modify-card-footer flex0">
<button type="button" class="btn btn-default cancel-button">Cancel</button>
<button type="button" class="btn btn-default ok-button">OK</button>
</div>
</div>`;
const dialog = createElement(html);
document.body.appendChild(dialog);
const rect = dialog.getBoundingClientRect();
const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const left = parseInt((windowWidth - rect.width) / 2 + window.pageXOffset, 10);
dialog.style.left = left + 'px';
dialog.style.top = '10px';
dialog.style.bottom = '10px';
dialog.querySelector('textarea').focus();
const close = () => {
$(`#${dialogId} *`).off();
dialog.parentNode.removeChild(dialog);
overlay.removeEventListener('click', close);
overlay.parentNode.removeChild(overlay);
};
const submit = () => {
const pickedColor = dialog.querySelector('.color-picker-item.checked');
const color = pickedColor && pickedColor.getAttribute('data-color');
const description = dialog.querySelector('.description-editor textarea');
const evaluation = dialog.querySelector('.evaluation-picker input');
close();
const oldData = _.clone(record);
const round = (value) => Math.round(value * 4) / 4;
_.assign(record, {
priority: 100 * (colors.indexOf(color) + 1),
description: encodeValue(description.value),
evaluation: round(parseFloat(evaluation.value)),
});
const dataView = getDataView();
if (row >= 0) {
dataView.invalidate();
pushActivity({
action: 'editCard',
oldValue: oldData,
value: record,
});
} else {
dataView.data.insertDataItems(record);
pushActivity({
action: 'addCard',
value: record.description,
group: groupInfo.name,
});
}
};
overlay.addEventListener('click', close);
$(`#${dialogId} .color-picker-item`)
.off()
.click(function () {
if (!$(this).hasClass('checked')) {
$(`#${dialogId} .color-picker-item`).removeClass('checked');
$(this).addClass('checked');
}
});
const okBtn = $(`#${dialogId} .ok-button`);
okBtn.off().click(submit);
$(`#${dialogId} .cancel-button`).off().click(close);
workInput($(`#${dialogId} .workInput`).off());
}
function workInput(el) {
const opts = {
mask: Number,
radix: '.',
min: parseFloat(el.attr('min')),
max: parseFloat(el.attr('max')),
};
const mask = IMask(el[0], opts);
el.change(function () {
mask.updateValue(el.val());
});
// emulate number input
new ISpin(el[0], {
step: parseFloat(el.attr('step')),
min: opts.min,
max: opts.max,
});
}

import _ from 'lodash';
import { getDataView, getPanelWidth, getGroupInfo } from './utils';
import { pushActivity } from './log';
import { openEditDialog } from './edit';
export function addNewGroup() {
const nameInput = document.getElementById('add-group-container').querySelector('input');
const name = (nameInput.value || '').toUpperCase();
if (!name) {
return;
}
nameInput.value = '';
const dataView = getDataView();
const groups = dataView.data.groups;
const existingGroup = _.find(groups, (g) => g.name === name);
if (existingGroup) {
return;
}
let descriptors = dataView.data.groupDescriptors;
if (descriptors.length) {
const grouping = _.cloneDeep(descriptors[0]);
grouping.preDefinedGroups = [...grouping.preDefinedGroups, name];
descriptors = [grouping];
}
const trellisGrouping = dataView.options.groupStrategy;
trellisGrouping.options.panelUnitWidth = getPanelWidth();
dataView.data.groupDescriptors = descriptors;
pushActivity({
action: 'addGroup',
group: name,
});
dataView.invalidate();
}
export function removeGroup(hitTestInfo) {
const dataView = getDataView();
var len = dataView.data.groups.length;
if (len <= 1) {
return;
}
const path = hitTestInfo.groupInfo.path;
const groupInfo = getGroupInfo(path);
const groupDescriptors = dataView.data.groupDescriptors;
_.remove(groupDescriptors[0].preDefinedGroups, function (value) {
return value === groupInfo.name;
});
dataView.data.suspendRefresh();
dataView.data.groupDescriptors = groupDescriptors;
var indexes = _.map(groupInfo.getItems(), 'sourceIndex');
indexes = indexes.sort(function (a, b) {
return b - a;
});
_.each(indexes, function (index) {
dataView.data.removeDataItems(index);
});
dataView.data.resumeRefresh();
dataView.data.removeEmptyGroup();
const trellisGrouping = dataView.options.groupStrategy;
trellisGrouping.options.panelUnitWidth = getPanelWidth();
dataView.invalidate();
pushActivity({
action: 'removeGroup',
group: groupInfo.name,
});
}
let oldHitInfo;
export function handleMoveCard(args) {
if (args.status === 'beforeDragging') {
oldHitInfo = args.hitInfo;
}
if (args.status === 'beforeDropping') {
const oldGroup = oldHitInfo.groupInfo;
if (args.hitInfo && args.hitInfo.groupInfo) {
const newGroup = args.hitInfo.groupInfo;
if (!_.isEqual(newGroup.path, oldGroup.path) || newGroup.row !== oldGroup.row) {
pushActivity({
action: 'movingCard',
newGroup: getGroupInfo(newGroup.path).name,
oldGroup: getGroupInfo(oldGroup.path).name,
});
}
}
}
}
export function removeCard(hitTestInfo) {
const dataView = getDataView();
const row = hitTestInfo.groupInfo.row;
const groupInfo = getGroupInfo(hitTestInfo.groupInfo.path);
const item = groupInfo.getItems()[row];
dataView.data.removeDataItems(item.sourceIndex);
pushActivity({
action: 'removeCard',
group: groupInfo.name,
value: item.description,
});
}
// for purejs demo
window.addNewGroup = addNewGroup;
export function appClickHandler(event) {
const dataView = getDataView();
const hitTestInfo = dataView.hitTest(event);
let target = event.target;
while (target) {
if ($(target).hasClass('gc-row') && hitTestInfo.groupInfo.area === 'groupContent') {
openEditDialog(hitTestInfo);
break;
} else if ($(target).hasClass('trellis-card-add')) {
openEditDialog(hitTestInfo);
break;
} else if ($(target).hasClass('card-remove')) {
removeCard(hitTestInfo);
break;
} else if ($(target).hasClass('card-edit')) {
openEditDialog(hitTestInfo);
break;
} else if ($(target).hasClass('group-remove')) {
removeGroup(hitTestInfo);
break;
} else {
target = target.parentNode;
}
}
}

import { createElement } from './utils';
function renderContent(activity) {
switch (activity.action) {
case 'addCard':
return `<span>Add card ${activity.value} to group ${activity.group}</span>`;
case 'removeCard':
return `<span>Remove card ${activity.value} from group ${activity.group}</span>`;
case 'editCard': {
const oldValue = activity.oldValue;
const value = activity.value;
const header = `<span>Edit card <i>${oldValue.description}</i>:<br /></span>`;
const fields = ['priority', 'description', 'evaluation'];
const content = fields
.map((field) => {
if (oldValue[field] === value[field]) {
return undefined;
}
if (field === 'description') {
return `<span>change description to "${value.description}"<br /></span>`;
}
return `<span>change ${field} from ${oldValue[field]}  to ${value[field]}<br /></span>`;
})
.filter((s) => !!s);
return header + content.join('');
}
case 'movingCard':
return `<span>Move item from group ${activity.oldGroup} to group ${activity.newGroup}</span>`;
case 'addGroup':
return `<span><b>Add group </b>${activity.group}</span>`;
case 'removeGroup':
return `<span><b>Remove group </b>${activity.group}</span>`;
default:
return '';
}
}
export function pushActivity(activity) {
const content = renderContent(activity);
const container = document.querySelector('#trellis-menu .trellis-menu-activities');
const children = container.children;
if (children.length) {
const element = createElement(`<div>${content}<div class="split-line"></div><div>`);
container.insertBefore(element, children[0]);
} else {
const element = createElement(`<div>${content}<div>`);
container.appendChild(element);
}
}

.main-container {
overflow: hidden;
height: 100%;
}
.wrapper {
position: relative;
height: 100%;
}
.grid-container {
height: 100%;
}
.grid-container #grid {
height: 100%;
}
.board-header {
padding: 6px 12px;
background: #0b3954;
height: 32px;
}
.board-header a {
color: white;
font-size: 15px;
font-weight: bold;
}
.board-header .title {
color: #fff;
}
.board-content {
height: calc(100% - 32px);
}
.gc-grid {
border: none;
font-family: inherit;
}
.gc-cell {
padding: 0;
margin: 2px;
}
.trellis-grouping .gc-trellis-group-header {
text-align: left;
padding: 6px 12px;
font-size: 20px;
font-weight: 300;
color: black;
font-family: inherit;
}
.trellis-grouping .gc-trellis-viewport {
background: white;
}
.trellis-grouping .gc-trellis-row {
background: transparent;
padding: 6px 12px;
}
.trellis-grouping .gc-trellis-group-header,
.trellis-grouping .gc-trellis-group-content {
background: none;
}
.trellis-grouping .gc-trellis-group-footer {
background: none;
padding: 6px 12px;
}
.gc-trellis-group-footer:hover {
cursor: pointer;
color: #000;
}
.gc-cell {
white-space: normal;
}
.card-container {
border: 1px solid #e0e0e0;
background: white;
position: relative;
border-radius: 4px;
border-bottom-width: 3px;
padding: 0.4em;
}
.gc-trellis-row:hover .card-container {
background: #f1f1f1;
}
.gc-trellis-row:hover .card-title-icon {
display: inline-block;
}
.card-label {
font-size: 0;
}
.card-title-icon {
position: absolute;
right: 12px;
top: 6px;
display: none;
background: #0b3954;
border-radius: 4px;
}
.card-title-icon .title-icon {
display: inline-block;
width: 11px;
height: 13px;
margin: 3px;
color: #fff;
}
.card-title-icon .title-icon:hover {
cursor: pointer;
opacity: 1;
}
.card-evaluation span {
display: inline-block;
padding: 0 5px;
min-width: 30px;
line-height: 30px;
border-radius: 50%;
background: lightgrey;
text-align: center;
color: white;
font-weight: 600;
}
.group-header-options {
font-size: 16px;
}
.group-header-options span {
opacity: 0.5;
}
.group-header-options span:hover {
cursor: pointer;
opacity: 1;
}
.hide {
display: none !important;
}
.edit-dialog {
display: flex;
flex-direction: column;
background: white;
width: 300px;
padding: 10px;
border-radius: 4px;
z-index: 11111;
}
.edit-dialog .flex0 {
flex-shrink: 0;
flex-grow: 0;
}
.edit-dialog .flex1 {
flex-shrink: 1;
flex-grow: 1;
}
.edit-dialog .color-picker-group {
height: 35px;
}
.edit-dialog .color-picker-group .color-picker-item {
display: inline-block;
width: 54px;
line-height: 35px;
height: 100%;
position: relative;
color: white;
text-align: center;
cursor: pointer;
}
.edit-dialog .color-picker-group .color-picker-item.checked:after {
content: "";
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAn0lEQVQoU53SYQ3DIBCG4fcUbBIqYRYmYQqWOaiTTkKdrBIqZQ6+5Qg0hbK2gV9A8uTu4zAalzU6TkNJV6Azs9mLnYIRfYAb8DKz8RAWKCQzXymjpB6YUit+X0NZRUkj8AS+wN3xHloySnJwidV9/wCGmCk1FbKlQ2hVkoeeVricUoayV93BG7QZRwVXUXWOEXuW9zpT2fvhHP99yWb4A7pfPQ9SebFhAAAAAElFTkSuQmCC");
position: absolute;
right: 0px;
top: 3px;
height: 15px;
width: 15px;
}
.edit-dialog .description-editor {
margin-top: 5px;
}
.edit-dialog .description-editor textarea {
width: 100%;
height: 130px;
resize: none;
border: 2px inset #eee;
}
.edit-dialog .modify-card-footer {
height: 40px;
margin-top: 10px;
}
.text-label {
height: 25px;
line-height: 25px;
font-size: 15px;
font-weight: bold;
}
.popup-overlay {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.trellis-menu {
width: 270px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: #f5f5f5;
overflow: hidden;
display: flex;
flex-direction: column;
}
.trellis-menu-header {
padding: 6px 12px;
background: #e0e0e0;
flex: 0 0 auto;
}
.split-line {
border-top: 1px solid lightgrey;
height: 1px;
margin-top: 8px;
margin-bottom: 8px;
flex: 0 0 auto;
}
.trellis-menu-group-label {
font-size: 15px;
margin-bottom: 5px;
font-weight: bold;
flex: 0 0 auto;
}
.btn {
border-radius: 0px;
width: 70px;
font-weight: bold;
}
.cancel-button,
.ok-button {
float: right;
margin-left: 10px;
}
.trellis-addGroupInput {
width: 100%;
padding: 6px 12px;
margin-bottom: 0.4em;
}
.menu-setting-option {
padding: 5px;
}
.menu-setting-option:hover {
cursor: pointer;
background: lightgrey;
}
.add-group-container {
overflow: hidden;
flex: 0 0 auto;
}
log,
.activities-container {
display: flex;
flex-direction: column;
flex: 1;
}
.trellis-menu-body {
position: relative;
padding: 6px 12px;
flex: 1;
display: flex;
flex-direction: column;
}
.trellis-menu-activities {
height: 400px;
overflow: auto;
flex: 1;
}
.trellis-card-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 35px;
width: 100%;
}
.trellis-card-header > span:first-child {
display: block;
width: 100%;
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.pull-right {
margin-top: 3px;
cursor: pointer;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNob3djYXNlL1RyZWxsaXNCb2FyZC9wdXJlanMvc3R5bGVzLnNjc3MiLCJTaG93Y2FzZS9UcmVsbGlzQm9hcmQvcHVyZWpzL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxnQkFBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLGtCQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0UsWUFBQTtBQ0NGO0FEQ0U7RUFDRSxZQUFBO0FDQ0o7O0FER0E7RUFDRSxpQkFBQTtFQUNBLG1CQUFBO0VBQ0EsWUFBQTtBQ0FGO0FERUU7RUFDRSxZQUFBO0VBQ0EsZUFBQTtFQUNBLGlCQUFBO0FDQUo7O0FESUE7RUFDRSxXQUFBO0FDREY7O0FESUE7RUFDRSx5QkFBQTtBQ0RGOztBRElBO0VBQ0UsWUFBQTtFQUNBLG9CQUFBO0FDREY7O0FESUE7RUFDRSxVQUFBO0VBQ0EsV0FBQTtBQ0RGOztBRElBO0VBQ0UsZ0JBQUE7RUFDQSxpQkFBQTtFQUNBLGVBQUE7RUFDQSxnQkFBQTtFQUNBLFlBQUE7RUFDQSxvQkFBQTtBQ0RGOztBRElBO0VBQ0UsaUJBQUE7QUNERjs7QURJQTtFQUNFLHVCQUFBO0VBQ0EsaUJBQUE7QUNERjs7QURJQTs7RUFFRSxnQkFBQTtBQ0RGOztBRElBO0VBQ0UsZ0JBQUE7RUFDQSxpQkFBQTtBQ0RGOztBRElBO0VBQ0UsZUFBQTtFQUNBLFdBQUE7QUNERjs7QURJQTtFQUNFLG1CQUFBO0FDREY7O0FESUE7RUFDRSx5QkFBQTtFQUNBLGlCQUFBO0VBQ0Esa0JBQUE7RUFDQSxrQkFBQTtFQUNBLHdCQUFBO0VBQ0EsY0FBQTtBQ0RGOztBRElBO0VBQ0UsbUJBQUE7QUNERjs7QURJQTtFQUNFLHFCQUFBO0FDREY7O0FESUE7RUFDRSxZQUFBO0FDREY7O0FESUE7RUFDRSxrQkFBQTtFQUNBLFdBQUE7RUFDQSxRQUFBO0VBQ0EsYUFBQTtFQUNBLG1CQUFBO0VBQ0Esa0JBQUE7QUNERjs7QURJQTtFQUNFLHFCQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7RUFDQSxXQUFBO0VBQ0EsV0FBQTtBQ0RGOztBRElBO0VBQ0UsZUFBQTtFQUNBLFVBQUE7QUNERjs7QURJQTtFQUNFLHFCQUFBO0VBQ0EsY0FBQTtFQUNBLGVBQUE7RUFDQSxpQkFBQTtFQUNBLGtCQUFBO0VBQ0EscUJBQUE7RUFDQSxrQkFBQTtFQUNBLFlBQUE7RUFDQSxnQkFBQTtBQ0RGOztBRElBO0VBQ0UsZUFBQTtBQ0RGOztBRElBO0VBQ0UsWUFBQTtBQ0RGOztBRElBO0VBQ0UsZUFBQTtFQUNBLFVBQUE7QUNERjs7QURJQTtFQUNFLHdCQUFBO0FDREY7O0FESUE7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSxpQkFBQTtFQUNBLFlBQUE7RUFDQSxhQUFBO0VBQ0Esa0JBQUE7RUFDQSxjQUFBO0FDREY7QURHRTtFQUNFLGNBQUE7RUFDQSxZQUFBO0FDREo7QURJRTtFQUNFLGNBQUE7RUFDQSxZQUFBO0FDRko7QURLRTtFQUNFLFlBQUE7QUNISjtBREtJO0VBQ0UscUJBQUE7RUFDQSxXQUFBO0VBQ0EsaUJBQUE7RUFDQSxZQUFBO0VBQ0Esa0JBQUE7RUFDQSxZQUFBO0VBQ0Esa0JBQUE7RUFDQSxlQUFBO0FDSE47QURLTTtFQUNFLFdBQUE7RUFDQSx5VUFBQTtFQUNBLGtCQUFBO0VBQ0EsVUFBQTtFQUNBLFFBQUE7RUFDQSxZQUFBO0VBQ0EsV0FBQTtBQ0hSO0FEUUU7RUFDRSxlQUFBO0FDTko7QURRSTtFQUNFLFdBQUE7RUFDQSxhQUFBO0VBQ0EsWUFBQTtFQUNBLHNCQUFBO0FDTk47QURVRTtFQUNFLFlBQUE7RUFDQSxnQkFBQTtBQ1JKOztBRFlBO0VBQ0UsWUFBQTtFQUNBLGlCQUFBO0VBQ0EsZUFBQTtFQUNBLGlCQUFBO0FDVEY7O0FEWUE7RUFDRSxlQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7RUFDQSxPQUFBO0VBQ0EsTUFBQTtFQUNBLDhCQUFBO0FDVEY7O0FEWUE7RUFDRSxZQUFBO0VBQ0EsWUFBQTtFQUNBLGtCQUFBO0VBQ0EsUUFBQTtFQUNBLE1BQUE7RUFDQSxtQkFBQTtFQUNBLGdCQUFBO0VBQ0EsYUFBQTtFQUNBLHNCQUFBO0FDVEY7O0FEWUE7RUFDRSxpQkFBQTtFQUNBLG1CQUFBO0VBQ0EsY0FBQTtBQ1RGOztBRFlBO0VBQ0UsK0JBQUE7RUFDQSxXQUFBO0VBQ0EsZUFBQTtFQUNBLGtCQUFBO0VBQ0EsY0FBQTtBQ1RGOztBRFlBO0VBQ0UsZUFBQTtFQUNBLGtCQUFBO0VBQ0EsaUJBQUE7RUFDQSxjQUFBO0FDVEY7O0FEWUE7RUFDRSxrQkFBQTtFQUNBLFdBQUE7RUFDQSxpQkFBQTtBQ1RGOztBRFlBOztFQUVFLFlBQUE7RUFDQSxpQkFBQTtBQ1RGOztBRFlBO0VBQ0UsV0FBQTtFQUNBLGlCQUFBO0VBQ0Esb0JBQUE7QUNURjs7QURZQTtFQUNFLFlBQUE7QUNURjs7QURZQTtFQUNFLGVBQUE7RUFDQSxxQkFBQTtBQ1RGOztBRFlBO0VBQ0UsZ0JBQUE7RUFDQSxjQUFBO0FDVEY7O0FEWUE7O0VBRUUsYUFBQTtFQUNBLHNCQUFBO0VBQ0EsT0FBQTtBQ1RGOztBRFlBO0VBQ0Usa0JBQUE7RUFDQSxpQkFBQTtFQUNBLE9BQUE7RUFDQSxhQUFBO0VBQ0Esc0JBQUE7QUNURjs7QURZQTtFQUNFLGFBQUE7RUFDQSxjQUFBO0VBQ0EsT0FBQTtBQ1RGOztBRFlBO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsOEJBQUE7RUFDQSxZQUFBO0VBQ0EsV0FBQTtBQ1RGOztBRFlBO0VBQ0UsY0FBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGdCQUFBO0VBQ0EsdUJBQUE7RUFDQSxrQkFBQTtBQ1RGOztBRFlBO0VBQ0UsZUFBQTtFQUNBLGVBQUE7QUNURiIsImZpbGUiOiJTaG93Y2FzZS9UcmVsbGlzQm9hcmQvcHVyZWpzL3N0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIubWFpbi1jb250YWluZXIge1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi53cmFwcGVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5ncmlkLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwJTtcblxuICAjZ3JpZCB7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICB9XG59XG5cbi5ib2FyZC1oZWFkZXIge1xuICBwYWRkaW5nOiA2cHggMTJweDtcbiAgYmFja2dyb3VuZDogIzBiMzk1NDtcbiAgaGVpZ2h0OiAzMnB4O1xuXG4gIGEge1xuICAgIGNvbG9yOiB3aGl0ZTtcbiAgICBmb250LXNpemU6IDE1cHg7XG4gICAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gIH1cbn1cblxuLmJvYXJkLWhlYWRlciAudGl0bGUge1xuICBjb2xvcjogI2ZmZjtcbn1cblxuLmJvYXJkLWNvbnRlbnQge1xuICBoZWlnaHQ6IGNhbGMoMTAwJSAtIDMycHgpO1xufVxuXG4uZ2MtZ3JpZCB7XG4gIGJvcmRlcjogbm9uZTtcbiAgZm9udC1mYW1pbHk6IGluaGVyaXQ7XG59XG5cbi5nYy1jZWxsIHtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAycHg7XG59XG5cbi50cmVsbGlzLWdyb3VwaW5nIC5nYy10cmVsbGlzLWdyb3VwLWhlYWRlciB7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG4gIHBhZGRpbmc6IDZweCAxMnB4O1xuICBmb250LXNpemU6IDIwcHg7XG4gIGZvbnQtd2VpZ2h0OiAzMDA7XG4gIGNvbG9yOiBibGFjaztcbiAgZm9udC1mYW1pbHk6IGluaGVyaXQ7XG59XG5cbi50cmVsbGlzLWdyb3VwaW5nIC5nYy10cmVsbGlzLXZpZXdwb3J0IHtcbiAgYmFja2dyb3VuZDogd2hpdGU7XG59XG5cbi50cmVsbGlzLWdyb3VwaW5nIC5nYy10cmVsbGlzLXJvdyB7XG4gIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICBwYWRkaW5nOiA2cHggMTJweDtcbn1cblxuLnRyZWxsaXMtZ3JvdXBpbmcgLmdjLXRyZWxsaXMtZ3JvdXAtaGVhZGVyLFxuLnRyZWxsaXMtZ3JvdXBpbmcgLmdjLXRyZWxsaXMtZ3JvdXAtY29udGVudCB7XG4gIGJhY2tncm91bmQ6IG5vbmU7XG59XG5cbi50cmVsbGlzLWdyb3VwaW5nIC5nYy10cmVsbGlzLWdyb3VwLWZvb3RlciB7XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIHBhZGRpbmc6IDZweCAxMnB4O1xufVxuXG4uZ2MtdHJlbGxpcy1ncm91cC1mb290ZXI6aG92ZXIge1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGNvbG9yOiAjMDAwO1xufVxuXG4uZ2MtY2VsbCB7XG4gIHdoaXRlLXNwYWNlOiBub3JtYWw7XG59XG5cbi5jYXJkLWNvbnRhaW5lciB7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNlMGUwZTA7XG4gIGJhY2tncm91bmQ6IHdoaXRlO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgYm9yZGVyLWJvdHRvbS13aWR0aDogM3B4O1xuICBwYWRkaW5nOiAwLjRlbTtcbn1cblxuLmdjLXRyZWxsaXMtcm93OmhvdmVyIC5jYXJkLWNvbnRhaW5lciB7XG4gIGJhY2tncm91bmQ6ICNmMWYxZjE7XG59XG5cbi5nYy10cmVsbGlzLXJvdzpob3ZlciAuY2FyZC10aXRsZS1pY29uIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xufVxuXG4uY2FyZC1sYWJlbCB7XG4gIGZvbnQtc2l6ZTogMDtcbn1cblxuLmNhcmQtdGl0bGUtaWNvbiB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgcmlnaHQ6IDEycHg7XG4gIHRvcDogNnB4O1xuICBkaXNwbGF5OiBub25lO1xuICBiYWNrZ3JvdW5kOiAjMGIzOTU0O1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG59XG5cbi5jYXJkLXRpdGxlLWljb24gLnRpdGxlLWljb24ge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHdpZHRoOiAxMXB4O1xuICBoZWlnaHQ6IDEzcHg7XG4gIG1hcmdpbjogM3B4O1xuICBjb2xvcjogI2ZmZjtcbn1cblxuLmNhcmQtdGl0bGUtaWNvbiAudGl0bGUtaWNvbjpob3ZlciB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgb3BhY2l0eTogMTtcbn1cblxuLmNhcmQtZXZhbHVhdGlvbiBzcGFuIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBwYWRkaW5nOiAwIDVweDtcbiAgbWluLXdpZHRoOiAzMHB4O1xuICBsaW5lLWhlaWdodDogMzBweDtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBiYWNrZ3JvdW5kOiBsaWdodGdyZXk7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgY29sb3I6IHdoaXRlO1xuICBmb250LXdlaWdodDogNjAwO1xufVxuXG4uZ3JvdXAtaGVhZGVyLW9wdGlvbnMge1xuICBmb250LXNpemU6IDE2cHg7XG59XG5cbi5ncm91cC1oZWFkZXItb3B0aW9ucyBzcGFuIHtcbiAgb3BhY2l0eTogMC41O1xufVxuXG4uZ3JvdXAtaGVhZGVyLW9wdGlvbnMgc3Bhbjpob3ZlciB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgb3BhY2l0eTogMTtcbn1cblxuLmhpZGUge1xuICBkaXNwbGF5OiBub25lICFpbXBvcnRhbnQ7XG59XG5cbi5lZGl0LWRpYWxvZyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGJhY2tncm91bmQ6IHdoaXRlO1xuICB3aWR0aDogMzAwcHg7XG4gIHBhZGRpbmc6IDEwcHg7XG4gIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgei1pbmRleDogMTExMTE7XG5cbiAgLmZsZXgwIHtcbiAgICBmbGV4LXNocmluazogMDtcbiAgICBmbGV4LWdyb3c6IDA7XG4gIH1cblxuICAuZmxleDEge1xuICAgIGZsZXgtc2hyaW5rOiAxO1xuICAgIGZsZXgtZ3JvdzogMTtcbiAgfVxuXG4gIC5jb2xvci1waWNrZXItZ3JvdXAge1xuICAgIGhlaWdodDogMzVweDtcblxuICAgIC5jb2xvci1waWNrZXItaXRlbSB7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgICB3aWR0aDogNTRweDtcbiAgICAgIGxpbmUtaGVpZ2h0OiAzNXB4O1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgY29sb3I6IHdoaXRlO1xuICAgICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuXG4gICAgICAmLmNoZWNrZWQ6YWZ0ZXIge1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgYmFja2dyb3VuZDogdXJsKCdkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUE0QUFBQU9DQVlBQUFBZlNDM1JBQUFBbjBsRVFWUW9VNTNTWVEzRElCQ0c0ZmNVYkJJcVlSWW1ZUXFXT2FpVFRrS2RyQklxWlE2KzVRZzBoYksyZ1Y5QTh1VHU0ekFhbHpVNlRrTkpWNkF6czltTG5ZSVJmWUFiOERLejhSQVdLQ1F6WHltanBCNllVaXQrWDBOWlJVa2o4QVMrd04zeEhsb3lTbkp3aWRWOS93Q0dtQ2sxRmJLbFEyaFZrb2VlVnJpY1VvYXlWOTNCRzdRWlJ3VlhVWFdPRVh1Vzl6cFQyZnZoSFA5OXlXYjRBN3BmUFE5U2ViRmhBQUFBQUVsRlRrU3VRbUNDJyk7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgcmlnaHQ6IDBweDtcbiAgICAgICAgdG9wOiAzcHg7XG4gICAgICAgIGhlaWdodDogMTVweDtcbiAgICAgICAgd2lkdGg6IDE1cHg7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLmRlc2NyaXB0aW9uLWVkaXRvciB7XG4gICAgbWFyZ2luLXRvcDogNXB4O1xuXG4gICAgdGV4dGFyZWEge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBoZWlnaHQ6IDEzMHB4O1xuICAgICAgcmVzaXplOiBub25lO1xuICAgICAgYm9yZGVyOiAycHggaW5zZXQgI2VlZTtcbiAgICB9XG4gIH1cblxuICAubW9kaWZ5LWNhcmQtZm9vdGVyIHtcbiAgICBoZWlnaHQ6IDQwcHg7XG4gICAgbWFyZ2luLXRvcDogMTBweDtcbiAgfVxufVxuXG4udGV4dC1sYWJlbCB7XG4gIGhlaWdodDogMjVweDtcbiAgbGluZS1oZWlnaHQ6IDI1cHg7XG4gIGZvbnQtc2l6ZTogMTVweDtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG59XG5cbi5wb3B1cC1vdmVybGF5IHtcbiAgcG9zaXRpb246IGZpeGVkO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBsZWZ0OiAwO1xuICB0b3A6IDA7XG4gIGJhY2tncm91bmQ6IHJnYmEoMCwgMCwgMCwgMC42KTtcbn1cblxuLnRyZWxsaXMtbWVudSB7XG4gIHdpZHRoOiAyNzBweDtcbiAgaGVpZ2h0OiAxMDAlO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAwO1xuICB0b3A6IDA7XG4gIGJhY2tncm91bmQ6ICNmNWY1ZjU7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG59XG5cbi50cmVsbGlzLW1lbnUtaGVhZGVyIHtcbiAgcGFkZGluZzogNnB4IDEycHg7XG4gIGJhY2tncm91bmQ6ICNlMGUwZTA7XG4gIGZsZXg6IDAgMCBhdXRvO1xufVxuXG4uc3BsaXQtbGluZSB7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCBsaWdodGdyZXk7XG4gIGhlaWdodDogMXB4O1xuICBtYXJnaW4tdG9wOiA4cHg7XG4gIG1hcmdpbi1ib3R0b206IDhweDtcbiAgZmxleDogMCAwIGF1dG87XG59XG5cbi50cmVsbGlzLW1lbnUtZ3JvdXAtbGFiZWwge1xuICBmb250LXNpemU6IDE1cHg7XG4gIG1hcmdpbi1ib3R0b206IDVweDtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gIGZsZXg6IDAgMCBhdXRvO1xufVxuXG4uYnRuIHtcbiAgYm9yZGVyLXJhZGl1czogMHB4O1xuICB3aWR0aDogNzBweDtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG59XG5cbi5jYW5jZWwtYnV0dG9uLFxuLm9rLWJ1dHRvbiB7XG4gIGZsb2F0OiByaWdodDtcbiAgbWFyZ2luLWxlZnQ6IDEwcHg7XG59XG5cbi50cmVsbGlzLWFkZEdyb3VwSW5wdXQge1xuICB3aWR0aDogMTAwJTtcbiAgcGFkZGluZzogNnB4IDEycHg7XG4gIG1hcmdpbi1ib3R0b206IDAuNGVtO1xufVxuXG4ubWVudS1zZXR0aW5nLW9wdGlvbiB7XG4gIHBhZGRpbmc6IDVweDtcbn1cblxuLm1lbnUtc2V0dGluZy1vcHRpb246aG92ZXIge1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGJhY2tncm91bmQ6IGxpZ2h0Z3JleTtcbn1cblxuLmFkZC1ncm91cC1jb250YWluZXIge1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBmbGV4OiAwIDAgYXV0bztcbn1cblxubG9nLFxuLmFjdGl2aXRpZXMtY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgZmxleDogMTtcbn1cblxuLnRyZWxsaXMtbWVudS1ib2R5IHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBwYWRkaW5nOiA2cHggMTJweDtcbiAgZmxleDogMTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbn1cblxuLnRyZWxsaXMtbWVudS1hY3Rpdml0aWVzIHtcbiAgaGVpZ2h0OiA0MDBweDtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIGZsZXg6IDE7XG59XG5cbi50cmVsbGlzLWNhcmQtaGVhZGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBoZWlnaHQ6IDM1cHg7XG4gIHdpZHRoOiAxMDAlO1xufVxuXG4udHJlbGxpcy1jYXJkLWhlYWRlciA+IHNwYW46Zmlyc3QtY2hpbGQge1xuICBkaXNwbGF5OiBibG9jaztcbiAgd2lkdGg6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG5cbi5wdWxsLXJpZ2h0IHtcbiAgbWFyZ2luLXRvcDogM3B4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG4iLCIubWFpbi1jb250YWluZXIge1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi53cmFwcGVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5ncmlkLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwJTtcbn1cbi5ncmlkLWNvbnRhaW5lciAjZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLmJvYXJkLWhlYWRlciB7XG4gIHBhZGRpbmc6IDZweCAxMnB4O1xuICBiYWNrZ3JvdW5kOiAjMGIzOTU0O1xuICBoZWlnaHQ6IDMycHg7XG59XG4uYm9hcmQtaGVhZGVyIGEge1xuICBjb2xvcjogd2hpdGU7XG4gIGZvbnQtc2l6ZTogMTVweDtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG59XG5cbi5ib2FyZC1oZWFkZXIgLnRpdGxlIHtcbiAgY29sb3I6ICNmZmY7XG59XG5cbi5ib2FyZC1jb250ZW50IHtcbiAgaGVpZ2h0OiBjYWxjKDEwMCUgLSAzMnB4KTtcbn1cblxuLmdjLWdyaWQge1xuICBib3JkZXI6IG5vbmU7XG4gIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xufVxuXG4uZ2MtY2VsbCB7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogMnB4O1xufVxuXG4udHJlbGxpcy1ncm91cGluZyAuZ2MtdHJlbGxpcy1ncm91cC1oZWFkZXIge1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICBwYWRkaW5nOiA2cHggMTJweDtcbiAgZm9udC1zaXplOiAyMHB4O1xuICBmb250LXdlaWdodDogMzAwO1xuICBjb2xvcjogYmxhY2s7XG4gIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xufVxuXG4udHJlbGxpcy1ncm91cGluZyAuZ2MtdHJlbGxpcy12aWV3cG9ydCB7XG4gIGJhY2tncm91bmQ6IHdoaXRlO1xufVxuXG4udHJlbGxpcy1ncm91cGluZyAuZ2MtdHJlbGxpcy1yb3cge1xuICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgcGFkZGluZzogNnB4IDEycHg7XG59XG5cbi50cmVsbGlzLWdyb3VwaW5nIC5nYy10cmVsbGlzLWdyb3VwLWhlYWRlcixcbi50cmVsbGlzLWdyb3VwaW5nIC5nYy10cmVsbGlzLWdyb3VwLWNvbnRlbnQge1xuICBiYWNrZ3JvdW5kOiBub25lO1xufVxuXG4udHJlbGxpcy1ncm91cGluZyAuZ2MtdHJlbGxpcy1ncm91cC1mb290ZXIge1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBwYWRkaW5nOiA2cHggMTJweDtcbn1cblxuLmdjLXRyZWxsaXMtZ3JvdXAtZm9vdGVyOmhvdmVyIHtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBjb2xvcjogIzAwMDtcbn1cblxuLmdjLWNlbGwge1xuICB3aGl0ZS1zcGFjZTogbm9ybWFsO1xufVxuXG4uY2FyZC1jb250YWluZXIge1xuICBib3JkZXI6IDFweCBzb2xpZCAjZTBlMGUwO1xuICBiYWNrZ3JvdW5kOiB3aGl0ZTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIGJvcmRlci1ib3R0b20td2lkdGg6IDNweDtcbiAgcGFkZGluZzogMC40ZW07XG59XG5cbi5nYy10cmVsbGlzLXJvdzpob3ZlciAuY2FyZC1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kOiAjZjFmMWYxO1xufVxuXG4uZ2MtdHJlbGxpcy1yb3c6aG92ZXIgLmNhcmQtdGl0bGUtaWNvbiB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbn1cblxuLmNhcmQtbGFiZWwge1xuICBmb250LXNpemU6IDA7XG59XG5cbi5jYXJkLXRpdGxlLWljb24ge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAxMnB4O1xuICB0b3A6IDZweDtcbiAgZGlzcGxheTogbm9uZTtcbiAgYmFja2dyb3VuZDogIzBiMzk1NDtcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xufVxuXG4uY2FyZC10aXRsZS1pY29uIC50aXRsZS1pY29uIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB3aWR0aDogMTFweDtcbiAgaGVpZ2h0OiAxM3B4O1xuICBtYXJnaW46IDNweDtcbiAgY29sb3I6ICNmZmY7XG59XG5cbi5jYXJkLXRpdGxlLWljb24gLnRpdGxlLWljb246aG92ZXIge1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIG9wYWNpdHk6IDE7XG59XG5cbi5jYXJkLWV2YWx1YXRpb24gc3BhbiB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgcGFkZGluZzogMCA1cHg7XG4gIG1pbi13aWR0aDogMzBweDtcbiAgbGluZS1oZWlnaHQ6IDMwcHg7XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgYmFja2dyb3VuZDogbGlnaHRncmV5O1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIGNvbG9yOiB3aGl0ZTtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbn1cblxuLmdyb3VwLWhlYWRlci1vcHRpb25zIHtcbiAgZm9udC1zaXplOiAxNnB4O1xufVxuXG4uZ3JvdXAtaGVhZGVyLW9wdGlvbnMgc3BhbiB7XG4gIG9wYWNpdHk6IDAuNTtcbn1cblxuLmdyb3VwLWhlYWRlci1vcHRpb25zIHNwYW46aG92ZXIge1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIG9wYWNpdHk6IDE7XG59XG5cbi5oaWRlIHtcbiAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50O1xufVxuXG4uZWRpdC1kaWFsb2cge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBiYWNrZ3JvdW5kOiB3aGl0ZTtcbiAgd2lkdGg6IDMwMHB4O1xuICBwYWRkaW5nOiAxMHB4O1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIHotaW5kZXg6IDExMTExO1xufVxuLmVkaXQtZGlhbG9nIC5mbGV4MCB7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBmbGV4LWdyb3c6IDA7XG59XG4uZWRpdC1kaWFsb2cgLmZsZXgxIHtcbiAgZmxleC1zaHJpbms6IDE7XG4gIGZsZXgtZ3JvdzogMTtcbn1cbi5lZGl0LWRpYWxvZyAuY29sb3ItcGlja2VyLWdyb3VwIHtcbiAgaGVpZ2h0OiAzNXB4O1xufVxuLmVkaXQtZGlhbG9nIC5jb2xvci1waWNrZXItZ3JvdXAgLmNvbG9yLXBpY2tlci1pdGVtIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB3aWR0aDogNTRweDtcbiAgbGluZS1oZWlnaHQ6IDM1cHg7XG4gIGhlaWdodDogMTAwJTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBjb2xvcjogd2hpdGU7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuLmVkaXQtZGlhbG9nIC5jb2xvci1waWNrZXItZ3JvdXAgLmNvbG9yLXBpY2tlci1pdGVtLmNoZWNrZWQ6YWZ0ZXIge1xuICBjb250ZW50OiBcIlwiO1xuICBiYWNrZ3JvdW5kOiB1cmwoXCJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUE0QUFBQU9DQVlBQUFBZlNDM1JBQUFBbjBsRVFWUW9VNTNTWVEzRElCQ0c0ZmNVYkJJcVlSWW1ZUXFXT2FpVFRrS2RyQklxWlE2KzVRZzBoYksyZ1Y5QTh1VHU0ekFhbHpVNlRrTkpWNkF6czltTG5ZSVJmWUFiOERLejhSQVdLQ1F6WHltanBCNllVaXQrWDBOWlJVa2o4QVMrd04zeEhsb3lTbkp3aWRWOS93Q0dtQ2sxRmJLbFEyaFZrb2VlVnJpY1VvYXlWOTNCRzdRWlJ3VlhVWFdPRVh1Vzl6cFQyZnZoSFA5OXlXYjRBN3BmUFE5U2ViRmhBQUFBQUVsRlRrU3VRbUNDXCIpO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAwcHg7XG4gIHRvcDogM3B4O1xuICBoZWlnaHQ6IDE1cHg7XG4gIHdpZHRoOiAxNXB4O1xufVxuLmVkaXQtZGlhbG9nIC5kZXNjcmlwdGlvbi1lZGl0b3Ige1xuICBtYXJnaW4tdG9wOiA1cHg7XG59XG4uZWRpdC1kaWFsb2cgLmRlc2NyaXB0aW9uLWVkaXRvciB0ZXh0YXJlYSB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEzMHB4O1xuICByZXNpemU6IG5vbmU7XG4gIGJvcmRlcjogMnB4IGluc2V0ICNlZWU7XG59XG4uZWRpdC1kaWFsb2cgLm1vZGlmeS1jYXJkLWZvb3RlciB7XG4gIGhlaWdodDogNDBweDtcbiAgbWFyZ2luLXRvcDogMTBweDtcbn1cblxuLnRleHQtbGFiZWwge1xuICBoZWlnaHQ6IDI1cHg7XG4gIGxpbmUtaGVpZ2h0OiAyNXB4O1xuICBmb250LXNpemU6IDE1cHg7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xufVxuXG4ucG9wdXAtb3ZlcmxheSB7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgbGVmdDogMDtcbiAgdG9wOiAwO1xuICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuNik7XG59XG5cbi50cmVsbGlzLW1lbnUge1xuICB3aWR0aDogMjcwcHg7XG4gIGhlaWdodDogMTAwJTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICByaWdodDogMDtcbiAgdG9wOiAwO1xuICBiYWNrZ3JvdW5kOiAjZjVmNWY1O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xufVxuXG4udHJlbGxpcy1tZW51LWhlYWRlciB7XG4gIHBhZGRpbmc6IDZweCAxMnB4O1xuICBiYWNrZ3JvdW5kOiAjZTBlMGUwO1xuICBmbGV4OiAwIDAgYXV0bztcbn1cblxuLnNwbGl0LWxpbmUge1xuICBib3JkZXItdG9wOiAxcHggc29saWQgbGlnaHRncmV5O1xuICBoZWlnaHQ6IDFweDtcbiAgbWFyZ2luLXRvcDogOHB4O1xuICBtYXJnaW4tYm90dG9tOiA4cHg7XG4gIGZsZXg6IDAgMCBhdXRvO1xufVxuXG4udHJlbGxpcy1tZW51LWdyb3VwLWxhYmVsIHtcbiAgZm9udC1zaXplOiAxNXB4O1xuICBtYXJnaW4tYm90dG9tOiA1cHg7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xuICBmbGV4OiAwIDAgYXV0bztcbn1cblxuLmJ0biB7XG4gIGJvcmRlci1yYWRpdXM6IDBweDtcbiAgd2lkdGg6IDcwcHg7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xufVxuXG4uY2FuY2VsLWJ1dHRvbixcbi5vay1idXR0b24ge1xuICBmbG9hdDogcmlnaHQ7XG4gIG1hcmdpbi1sZWZ0OiAxMHB4O1xufVxuXG4udHJlbGxpcy1hZGRHcm91cElucHV0IHtcbiAgd2lkdGg6IDEwMCU7XG4gIHBhZGRpbmc6IDZweCAxMnB4O1xuICBtYXJnaW4tYm90dG9tOiAwLjRlbTtcbn1cblxuLm1lbnUtc2V0dGluZy1vcHRpb24ge1xuICBwYWRkaW5nOiA1cHg7XG59XG5cbi5tZW51LXNldHRpbmctb3B0aW9uOmhvdmVyIHtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBiYWNrZ3JvdW5kOiBsaWdodGdyZXk7XG59XG5cbi5hZGQtZ3JvdXAtY29udGFpbmVyIHtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgZmxleDogMCAwIGF1dG87XG59XG5cbmxvZyxcbi5hY3Rpdml0aWVzLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGZsZXg6IDE7XG59XG5cbi50cmVsbGlzLW1lbnUtYm9keSB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgcGFkZGluZzogNnB4IDEycHg7XG4gIGZsZXg6IDE7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG59XG5cbi50cmVsbGlzLW1lbnUtYWN0aXZpdGllcyB7XG4gIGhlaWdodDogNDAwcHg7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBmbGV4OiAxO1xufVxuXG4udHJlbGxpcy1jYXJkLWhlYWRlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgaGVpZ2h0OiAzNXB4O1xuICB3aWR0aDogMTAwJTtcbn1cblxuLnRyZWxsaXMtY2FyZC1oZWFkZXIgPiBzcGFuOmZpcnN0LWNoaWxkIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHdpZHRoOiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufVxuXG4ucHVsbC1yaWdodCB7XG4gIG1hcmdpbi10b3A6IDNweDtcbiAgY3Vyc29yOiBwb2ludGVyO1xufSJdfQ== */

import _ from 'lodash';
import { getControlByElement } from '@grapecity/dataviews.core';
export function classNames(...args) {
const t = args.filter(_.identity).map((a) => (_.isString(a) ? a : Object.keys(a).filter((k) => !!a[k])));
return _.flatten(t).join(' ');
}
export function getDataView() {
return getControlByElement(document.body);
}
export function getPanelWidth() {
const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
return Math.min(300, Math.max(100, parseInt((windowWidth - 50) / 4, 10)));
}
export function getGroupInfo(path) {
const dataView = getDataView();
const groups = dataView.data.groups;
let currentGroup = groups[path[0]];
for (let i = 1; i < path.length; i++) {
if (currentGroup && currentGroup.groups) {
currentGroup = currentGroup.groups[path[i]];
} else {
return null;
}
}
return currentGroup;
}
export function createElement(html) {
const div = document.createElement('div');
div.innerHTML = html;
return div.children[0];
}
export function encodeValue(value) {
const elem = document.createElement('textarea');
elem.textContent = value;
return elem.innerHTML;
}

(function () {
const IS_PROD = window.process.env.NODE_ENV === 'production';
const USE_NPM = window.process.env.USE_NPM;
const USE_CDN = window.process.env.USE_CDN;
const SITE_ROOT = window.process.env.SITE_ROOT;
const FRAMEWORK = window.process.env.FRAMEWORK;
const ext = IS_PROD ? '.min.js' : '.js';
function js(name) {
return name + ext;
}
function npm(t) {
if (!t.file) {
t.file = IS_PROD ? t.prod : t.dev;
}
const version = USE_CDN && t.version ? '@' + t.version : '';
const path = t.pkg + version + '/' + t.file;
if (USE_CDN) {
return 'https://unpkg.com/' + path;
}
return 'npm:' + path;
}
function dv(t) {
if (USE_CDN || USE_NPM) {
t.file = 'dist/' + t.file + '.min.js';
return npm(t);
}
return SITE_ROOT + '/static/dataviews/' + js(t.file);
}
const isTypeScript = FRAMEWORK === 'angular';
const babelConfig = {
es2015: true,
react: true,
};
const meta = {
js: {
babelOptions: babelConfig,
},
ts: {
typescriptOptions: {
tsconfig: true
},
},
};
const map = {
// gc.dataviews packages
'@grapecity/dataviews.common': dv({pkg:'@grapecity/dataviews.common',file:'gc.dataviews.common',version:'1.8.17'}),
'@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.17'}),
'@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.17'}),
'@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.17'}),
'@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.17'}),
'@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.17'}),
'@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.17'}),
'@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.17'}),
'@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.17'}),
'@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.17'}),
'@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.17'}),
'@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.17'}),
'@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.17'}),
'@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.17'}),
// third-party libs
react: npm({pkg:'react',prod:'umd/react.production.min.js',dev:'umd/react.development.js',version:'16.13.1'}),
'react-dom': npm({pkg:'react-dom',prod:'umd/react-dom.production.min.js',dev:'umd/react-dom.development.js',version:'16.13.1'}),
'react-router-dom': npm({pkg:'react-router-dom',prod:'umd/react-router-dom.min.js',dev:'umd/react-router-dom.js',version:'5.2.0'}),
'vue': npm({pkg:'vue',file:'dist/vue.js',version:'2.6.12'}),
'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.4.3'}),
'lodash': npm({pkg: 'lodash', file: js('lodash')}),
'zone.js': npm({pkg: 'zone.js', file: js('dist/zone')}),
'rxjs': npm({pkg: 'rxjs', file: js('bundles/rxjs.umd')}),
'rxjs/operators': npm({pkg:'rxjs-operators-bundle',prod:'dist/bundle.min.js',dev:'dist/bundle.js',version:'1.0.2'}),
'@angular/core': npm({pkg: '@angular/core', file: js('bundles/core.umd')}),
'@angular/common': npm({pkg: '@angular/common', file: js('bundles/common.umd')}),
'@angular/compiler': npm({pkg: '@angular/compiler', file: js('bundles/compiler.umd')}),
'@angular/platform-browser': npm({pkg: '@angular/platform-browser', file: js('bundles/platform-browser.umd')}),
'@angular/platform-browser-dynamic': npm({pkg: '@angular/platform-browser-dynamic', file: js('bundles/platform-browser-dynamic.umd')}),
'@angular/http': npm({pkg: '@angular/http', file: js('bundles/http.umd')}),
'@angular/common/http': npm({pkg: '@angular/common', file: js('bundles/common-http.umd')}),
'@angular/router': npm({pkg: '@angular/router', file: js('bundles/router.umd')}),
'@angular/forms': npm({pkg: '@angular/forms', file: js('bundles/forms.umd')}),
// systemjs plugins
'systemjs-plugin-json': npm({pkg:'systemjs-plugin-json',file:'json.js',version:'0.3.0'}),
'systemjs-plugin-css': npm({pkg:'systemjs-plugin-css',file:'css.js',version:'0.1.37'}),
'systemjs-plugin-babel': npm({pkg:'systemjs-plugin-babel',file:'plugin-babel.js',version:'0.0.25'}),
'systemjs-babel-build': npm({pkg:'systemjs-plugin-babel',file:'systemjs-babel-browser.js',version:'0.0.25'}),
'plugin-typescript': npm({pkg:'plugin-typescript',file:'lib/plugin.js',version:'8.0.0'}),
'typescript': npm({pkg:'typescript',file:'lib/typescript.js',version:'4.0.2'}),
'systemjs-vue-browser': npm({pkg:'systemjs-vue-browser',file:'index.js',version:'1.0.11'}),
};
const config = {
defaultJSExtensions: true,
transpiler: isTypeScript ? 'plugin-typescript' : 'systemjs-plugin-babel',
typescriptOptions: {
tsconfig: true
},
meta: {
'*.json': {loader: 'systemjs-plugin-json'},
'*.css': {loader: 'systemjs-plugin-css'},
'*.vue': {loader: 'systemjs-vue-browser'},
'*.js': meta.js,
'*.ts': meta.ts,
'app.js': {
format: 'esm',
babelOptions: babelConfig,
},
'typescript': {
exports: 'ts',
},
'@grapecity/dataviews.common': {
format: 'amd',
},
'@grapecity/dataviews.core': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.grid': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.cardlayout': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.masonry': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.calendar': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.timeline': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.trellis': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.gantt': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.searchbox': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.react': {
format: 'amd',
deps: [
'react',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.vue': {
format: 'amd',
deps: [
'vue',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.angular': {
format: 'amd',
deps: [
'@angular/core',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.csvexport': {
format: 'amd',
deps: [
'@grapecity/dataviews.common'
],
},
},
paths: {
// paths serve as alias
'npm:': SITE_ROOT + '/node_modules/',
},
// map tells the System loader where to look for things
map: map,
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'.': { defaultExtension: isTypeScript ? 'ts' : 'js' },
node_modules: { defaultExtension: 'js' },
}
};
// fast format detection to avoid detection by source code using regexp
Object.keys(map).filter(function (key) {
return !config.meta[key];
}).forEach(function (key) {
const path = map[key];
if (path.indexOf('/umd') >= 0 || path.indexOf('.umd') >= 0) {
config.meta[key] = { format: 'amd' };
}
if (path.indexOf('/cjs') >= 0) {
config.meta[key] = { format: 'cjs' };
}
});
System.config(config);
})(this);