Multiple Layout | Showcase | MESCIUS DataViewsJS React Demos

This demo shows how to visualize the data with different layouts. Try changing the view to see how the same data is displayed differently in each.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Showcase/MultipleLayout/react/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="grid, timeline, trello, trellis, gantt" />
<meta name="description" content="This demo shows how to visualize the data with different layouts." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multiple Layout | Showcase | MESCIUS DataViewsJS React 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/static/css/bootstrap-snippet.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.gantt.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="/dataviewsjs/demos/static/dataviews/gc.dataviews.timeline.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: 'react',
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/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>
<div id="root"></div>
<script type="text/javascript">
System.import('./app.js');
</script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';
import DataView from '@grapecity/dataviews.react';
import { GridLayout } from '@grapecity/dataviews.grid';
import TrellisGrouping from '@grapecity/dataviews.trellis';
import TimelineGrouping from '@grapecity/dataviews.timeline';
import '@grapecity/dataviews.gantt';
import { data } from './data';
import locale from './locale';
const photoPresenter = '<img class="employee-photo" src={{=it.photo}} />';
const views = {
gantt: {
cols: ['id', 'start', 'end', 'percentComplete', 'gantt', 'description', 'user', 'predecessorID', 'parentID'],
},
grid: {
cols: [
'id',
'start',
'end',
'percentComplete',
'title',
'description',
'stage',
'user',
'predecessorID',
'parentID',
],
},
kanban: {
cols: ['title', 'description', 'user', 'photo', 'percentComplete'],
},
timeline: {
cols: ['topic', 'start', 'end', 'speaker', 'content', 'photo'],
},
};
export const cols = (view) => {
const dateFormat = view === 'timeline' ? 'MMMM dd, hh:mmtt' : 'mmm dd,yyyy';
const all = [
{
id: 'id',
caption: 'Id',
dataField: 'id',
width: 80,
allowResizing: view !== 'gantt',
},
{
id: 'topic',
dataField: 'topic',
},
{
id: 'speaker',
dataField: 'speaker',
},
{
id: 'content',
dataField: 'content',
},
{
id: 'start',
caption: 'Start Date',
dataField: 'start',
width: 100,
dataType: 'date',
format: dateFormat,
allowResizing: view !== 'gantt',
},
{
id: 'end',
caption: 'End Date',
dataField: 'end',
width: 113,
dataType: 'date',
format: dateFormat,
allowResizing: view !== 'gantt',
},
{
id: 'percentComplete',
caption: '% complete',
dataField: 'percentComplete',
width: 100,
allowEditing: false,
allowResizing: view !== 'gantt',
},
{
id: 'gantt',
ganttColumn: {
timeLineScale: 'month',
scale: 300,
start: 'start',
end: 'end',
text: 'title',
},
width: '*',
},
{
id: 'title',
caption: 'Title',
dataField: 'title',
allowEditing: false,
},
{
id: 'description',
caption: 'Description',
dataField: 'description',
visible: view !== 'gantt',
},
{
id: 'stage',
caption: 'Stage',
dataField: 'stage',
},
{
id: 'user',
caption: 'User',
dataField: 'user',
visible: view !== 'gantt',
},
{
id: 'predecessorID',
caption: 'predecessorID',
dataField: 'predecessorID',
visible: false,
allowEditing: false,
},
{
id: 'parentID',
caption: 'parentID',
dataField: 'parentID',
visible: false,
allowEditing: false,
},
{
id: 'photo',
dataField: 'photo',
presenter: photoPresenter,
},
];
return views[view].cols.map((id) => all.filter((c) => c.id === id)[0]);
};
const { useState } = React;
const groupBy = {
department: [
{ field: 'department', header: { height: 24 } },
{ field: 'stage', header: { height: 24 } },
],
user: [
{ field: 'user', header: { height: 24 } },
{ field: 'stage', header: { height: 24 } },
],
};
function createGanttLayout() {
return new GridLayout({
colHeaderHeight: 48,
rowHeight: 48,
allowEditing: true,
editMode: 'none',
showRowHeader: false,
hierarchy: {
keyField: 'id',
parentField: 'parentID',
collapsed: false,
column: 'id',
footer: {
visible: false,
},
},
});
}
function createKanbanLayout() {
const rowTemplate = `<div class="group-item-container">
<div class="group-item-container-inner {{? it.percentComplete==1}}finish{{?? it.percentComplete>=0.8}}eighty-per{{?? it.percentComplete>=0.5}}fifty-per{{?? it.percentComplete>=0.1}}thirty-per{{??}}start{{?}}">
<div data-column="title" class="group-item-title  {{? it.percentComplete==1}}finish-head{{?? it.percentComplete>=0.8}}eighty-per-head{{?? it.percentComplete>=0.5}}fifty-per-head{{?? it.percentComplete>=0.1}}thirty-per-head{{??}}start-head{{?}}"></div>
<div data-column="photo" class="group-photo-container"></div>
<div data-column="description" class="group-item-description"></div>
</div>
</div>`;
const trellis = new TrellisGrouping({
panelUnitWidth: 190,
});
trellis.dragDropping.addHandler(function (args) {
if (args.status === 'beforeDropping' && $('#btnUser').hasClass('active')) {
var txt = document.elementFromPoint(args.event.clientX, args.event.clientY).innerText;
var item = dataView.data.sourceCollection.filter(function (it) {
return txt.indexOf(it.description) >= 0 || txt.indexOf(it.title) >= 0;
});
if (item.length > 0 && item[0].user !== args.dataItem.user) {
args.cancel = true;
}
}
});
return new GridLayout({
grouping: groupBy.department,
rowTemplate: rowTemplate,
rowHeight: 140,
groupStrategy: trellis,
});
}
function createTimelineLayout() {
const groupDetailEventTemplate = `<div style="margin:5px;">
<div style="font-size:14px;font-weight: bold;">{{=it.title}}</div>
<div style="font-size:14px;font-weight: normal;">{{=it.description}}</div>
<blockquote style="display: block;font-size:13px;font-family: "Helvetic Neue, Helvetica, Arial">User:{{=it.user}}</blockquote>
<span style="margin-right: auto" >End:{{=it.end}}</span>
</div>`;
const formatter = new GC.DataViews.GeneralFormatter('mmmm dd');
const timeline = new TimelineGrouping({});
return new GridLayout({
grouping: {
field: 'start',
converter: function (field) {
return formatter.format(field);
},
},
autoRowHeight: true,
rowTemplate: groupDetailEventTemplate,
groupStrategy: timeline,
});
}
function createGridLayout() {
return new GridLayout({
colHeaderHeight: 40,
rowHeight: 40,
showRowHeader: false,
});
}
function createLayout(view) {
switch (view) {
case 'gantt':
return createGanttLayout();
case 'kanban':
return createKanbanLayout();
case 'timeline':
return createTimelineLayout();
default:
return createGridLayout();
}
}
const App = () => {
const [view, setView] = useState('gantt');
const [groupName, setGroupName] = useState('department');
const btnClass = (isActive) => {
const active = isActive ? ' active' : '';
return `btn btn-default${active}`;
};
const layout = createLayout(view);
const options = view === 'kanban' ? { grouping: groupBy[groupName] } : {};
return (
<div className="main-container">
<div className="sample-options">
<div className="option-row">
<div className="btn-group" role="group">
<button id="btn-gantt" className={btnClass(view === 'gantt')} onClick={() => setView('gantt')}>
{locale.ganttView}
</button>
<button id="btn-kanban" className={btnClass(view === 'kanban')} onClick={() => setView('kanban')}>
{locale.kanbanView}
</button>
<button id="btn-timeline" className={btnClass(view === 'timeline')} onClick={() => setView('timeline')}>
{locale.timelineView}
</button>
<button id="btn-grid" className={btnClass(view === 'grid')} onClick={() => setView('grid')}>
{locale.gridView}
</button>
</div>
</div>
<div
id="btn-group-kanban"
className="option-row"
style={{ visibility: view === 'kanban' ? 'visible' : 'hidden' }}
>
<div className="btn-group" role="group">
<button
id="btn-department"
className={btnClass(groupName === 'department')}
onClick={() => setGroupName('department')}
>
{locale.byDepartment}
</button>
<button id="btn-user" className={btnClass(groupName === 'user')} onClick={() => setGroupName('user')}>
{locale.byUser}
</button>
</div>
</div>
</div>
<DataView id="grid" className="grid" data={data} cols={cols(view)} layout={layout} options={options} />
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));

export const data = [
{
id: '1',
stage: 'Completed',
description: 'Design the WebSite',
title: 'SITE DESIGN',
start: 'Jan 10,2018',
end: 'Jan 16,2018',
percentComplete: 1,
user: 'Steve',
department: 'Design',
},
{
id: '2',
parentID: '1',
stage: 'Completed',
description: 'Do Market Research',
title: 'MARKET RESEARCH',
start: 'Jan 10,2018',
end: 'Jan 16,2018',
percentComplete: 1,
user: 'David',
department: 'Marketing',
},
{
id: '3',
parentID: '1',
stage: 'In Progress',
predecessorID: '2',
description: 'Visual Design',
title: 'VISUAL DESIGN',
start: 'Jan 11,2018',
end: 'Jan 16,2018',
percentComplete: 0.1,
user: 'Troy',
department: 'Design',
},
{
id: '4',
parentID: '1',
stage: 'In Progress',
description: 'Programming the Website',
predecessorID: '3',
title: 'PROGRAMMING',
start: 'Jan 16,2018',
end: 'Jan 29,2018',
percentComplete: 0.45,
user: 'Clark',
department: 'Engineering',
},
{
id: '5',
parentID: '1',
stage: 'To do',
predecessorID: '4',
description: 'Test the Website',
title: 'TESTING',
start: 'Jan 29,2018',
end: 'Feb 10,2018',
percentComplete: 0,
user: 'Smith',
department: 'Testing',
},
{
id: '6',
stage: 'To do',
description: 'Kick off',
title: 'KICK OFF',
start: 'Jan 22,2018',
end: 'Jan 22,2018',
percentComplete: 0,
content: '',
user: 'Clark',
department: 'Engineering',
},
{
id: '7',
stage: 'In Progress',
description: 'Marketing',
title: 'MARKETING',
start: 'Jan 11,2018',
end: 'Jan 22,2018',
percentComplete: 0.42,
user: 'Garcia',
department: 'Marketing',
},
{
id: '8',
parentID: '7',
stage: 'In Progress',
predecessorID: '6',
description: 'Determine Creative Concepts',
title: 'DETERMINE CREATIVE CONCEPT',
start: 'Jan 11,2018',
end: 'Jan 17,2018',
percentComplete: 0.56,
user: 'Steve',
department: 'Design',
},
{
id: '9',
parentID: '7',
stage: 'In Progress',
predecessorID: '6',
description: 'Preparing Messages',
title: 'PREPARING MESSAGES',
start: 'Jan 11,2018',
end: 'Jan 15,2018',
percentComplete: 0.74,
user: 'Garcia',
department: 'Marketing',
},
{
id: '10',
parentID: '7',
stage: 'To do',
predecessorID: '8,9',
description: 'Launch Marketing Program',
title: 'LAUNCH MARKETING PROGRAM',
start: 'Jan 12,2018',
end: 'Jan 22,2018',
percentComplete: 0,
user: 'Tracy',
department: 'Marketing',
},
{
id: '11',
stage: 'To do',
predecessorID: '13,10',
description: 'Pre launch of Website',
title: 'PRE RELEASE',
start: 'Jan 30,2018',
end: 'Jan 30,2018',
percentComplete: 0,
user: 'Troy',
department: 'Marketing',
},
{
id: '12',
stage: 'In Progress',
description: 'Prepare Budget',
title: 'BUDGET',
start: 'Jan 10,2018',
end: 'Jan 15,2018',
percentComplete: 0.87,
user: 'Scott',
department: 'Finance',
},
{
id: '13',
stage: 'In Progress',
predecessorID: '12',
description: 'Conforming',
title: 'CONFORMING',
start: 'Jan 17,2018',
end: 'Jan 21,2018',
percentComplete: 0.1,
user: 'Clark',
department: 'Engineering',
},
{
id: '14',
stage: 'To do',
predecessorID: '5,11',
description: 'Final Release of Website',
title: 'FINAL RELEASE',
start: 'Feb 15,2018',
end: 'Feb 15,2018',
percentComplete: 0,
user: 'David',
department: 'Marketing',
},
];
const SITE_ROOT = window.process.env.SITE_ROOT;
data.forEach((rec) => {
rec.start = new Date(rec.start);
rec.end = new Date(rec.end);
rec.photo = `${SITE_ROOT}/images/${rec.user}.jpg`;
});

module.exports = {
ganttView: 'Gantt View',
kanbanView: 'Kanban View',
timelineView: 'Timeline View',
gridView: 'Grid View',
byDepartment: 'By Department',
byUser: 'By User',
};

* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.gc-row {
border-bottom: 1px solid #f2f2f2;
}
.gc-popup-editing-area {
width: 454px;
}
.gc-grid {
border: 1px none white;
}
.main-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.sample-options {
width: 100%;
height: auto;
overflow: auto;
padding: 10px;
background: #fbfbfb;
box-sizing: border-box;
flex-grow: 0;
flex-shrink: 0;
}
.sample-options .btn {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
}
.sample-options .option-row {
font-size: 14px;
margin-top: 10px;
}
.sample-options #btn-group-kanban {
height: auto;
visibility: hidden;
}
.sample-options #btn-department,
.sample-options #btn-user {
width: 120px;
}
.grid {
width: 100%;
height: 100%;
flex-grow: 1;
flex-shrink: 1;
}
.employee-photo {
width: 40px;
height: 40px;
border-radius: 50%;
margin-left: 5px;
border: solid 1px #e0e0e0;
margin-right: 5px;
}
.timeline-leftshape-group {
width: 0px;
}
.timeline-rightshape-group {
width: 0px;
}
.timelineLeftBtns {
display: inline-block;
}
.timelineRightBtns {
float: right;
display: inline-block;
}
.gc-cell-border {
border: none;
}
.gc-group-header-row {
background: initial;
}
.group-item-title {
border: none;
color: #222;
background: #c48c43;
white-space: normal;
text-overflow: ellipsis;
padding: 0.4em;
font-size: 13px;
font-weight: 600;
}
.group-photo-container,
.group-item-description {
border: none;
}
.group-photo-container {
position: absolute;
bottom: 0.4em;
right: 0.4em;
}
.group-item-description {
padding: 8px;
}
.gc-trellis-group-header-inner {
font-size: 12px;
font-weight: 400;
}
.group-item-container {
height: 100%;
font-size: 12px;
overflow: hidden;
position: relative;
margin: 5px;
}
.group-item-container-inner {
height: 95%;
border-radius: 4px;
overflow: hidden;
color: #222;
font-weight: 400;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}
.finish {
background: #d2ffd1;
}
.eighty-per {
background: #a0ff9d;
}
.fifty-per {
background: #cfcfff;
}
.thirty-per {
background: #98d8ff;
}
.start {
background: #ffdd67;
}
.finish-head {
background: #87ff84;
}
.eighty-per-head {
background: #74dc72;
}
.fifty-per-head {
background: #a1a1e2;
}
.thirty-per-head {
background: #4bbcff;
}
.start-head {
background: #ffb400;
}
.trellis-grouping .gc-trellis-group-header {
line-height: 24px;
}
.gc-mainline {
padding: 0 !important;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNob3djYXNlL011bHRpcGxlTGF5b3V0L3JlYWN0L3N0eWxlcy5zY3NzIiwiU2hvd2Nhc2UvTXVsdGlwbGVMYXlvdXQvcmVhY3Qvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLDZDQUFBO0FDQ0Y7O0FERUE7RUFDRSxnQ0FBQTtBQ0NGOztBREVBO0VBQ0UsWUFBQTtBQ0NGOztBREVBO0VBQ0Usc0JBQUE7QUNDRjs7QURFQTtFQUNFLGFBQUE7RUFDQSxzQkFBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0FDQ0Y7O0FERUE7RUFDRSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7RUFDQSxhQUFBO0VBQ0EsbUJBQUE7RUFDQSxzQkFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0FDQ0Y7QURDRTtFQUNFLGFBQUE7RUFDQSxtQkFBQTtFQUNBLHVCQUFBO0VBQ0EsWUFBQTtBQ0NKO0FERUU7RUFDRSxlQUFBO0VBQ0EsZ0JBQUE7QUNBSjtBREdFO0VBQ0UsWUFBQTtFQUNBLGtCQUFBO0FDREo7QURJRTs7RUFFRSxZQUFBO0FDRko7O0FETUE7RUFDRSxXQUFBO0VBQ0EsWUFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0FDSEY7O0FETUE7RUFDRSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGtCQUFBO0VBQ0EsZ0JBQUE7RUFDQSx5QkFBQTtFQUNBLGlCQUFBO0FDSEY7O0FETUE7RUFDRSxVQUFBO0FDSEY7O0FETUE7RUFDRSxVQUFBO0FDSEY7O0FETUE7RUFDRSxxQkFBQTtBQ0hGOztBRE1BO0VBQ0UsWUFBQTtFQUNBLHFCQUFBO0FDSEY7O0FETUE7RUFDRSxZQUFBO0FDSEY7O0FETUE7RUFDRSxtQkFBQTtBQ0hGOztBRE1BO0VBQ0UsWUFBQTtFQUNBLFdBQUE7RUFDQSxtQkFBQTtFQUNBLG1CQUFBO0VBQ0EsdUJBQUE7RUFDQSxjQUFBO0VBQ0EsZUFBQTtFQUNBLGdCQUFBO0FDSEY7O0FETUE7O0VBRUUsWUFBQTtBQ0hGOztBRE1BO0VBQ0Usa0JBQUE7RUFDQSxhQUFBO0VBQ0EsWUFBQTtBQ0hGOztBRE1BO0VBQ0UsWUFBQTtBQ0hGOztBRE1BO0VBQ0UsZUFBQTtFQUNBLGdCQUFBO0FDSEY7O0FETUE7RUFDRSxZQUFBO0VBQ0EsZUFBQTtFQUNBLGdCQUFBO0VBQ0Esa0JBQUE7RUFDQSxXQUFBO0FDSEY7O0FETUE7RUFDRSxXQUFBO0VBQ0Esa0JBQUE7RUFDQSxnQkFBQTtFQUNBLFdBQUE7RUFDQSxnQkFBQTtFQUNBLHdDQUFBO0FDSEY7O0FETUE7RUFDRSxtQkFBQTtBQ0hGOztBRE1BO0VBQ0UsbUJBQUE7QUNIRjs7QURNQTtFQUNFLG1CQUFBO0FDSEY7O0FETUE7RUFDRSxtQkFBQTtBQ0hGOztBRE1BO0VBQ0UsbUJBQUE7QUNIRjs7QURNQTtFQUNFLG1CQUFBO0FDSEY7O0FETUE7RUFDRSxtQkFBQTtBQ0hGOztBRE1BO0VBQ0UsbUJBQUE7QUNIRjs7QURNQTtFQUNFLG1CQUFBO0FDSEY7O0FETUE7RUFDRSxtQkFBQTtBQ0hGOztBRE1BO0VBQ0UsaUJBQUE7QUNIRjs7QURNQTtFQUNFLHFCQUFBO0FDSEYiLCJmaWxlIjoiU2hvd2Nhc2UvTXVsdGlwbGVMYXlvdXQvcmVhY3Qvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIioge1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHJnYmEoMCwgMCwgMCwgMCk7XG59XG5cbi5nYy1yb3cge1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2YyZjJmMjtcbn1cblxuLmdjLXBvcHVwLWVkaXRpbmctYXJlYSB7XG4gIHdpZHRoOiA0NTRweDtcbn1cblxuLmdjLWdyaWQge1xuICBib3JkZXI6IDFweCBub25lIHdoaXRlO1xufVxuXG4ubWFpbi1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiBhdXRvO1xuICBvdmVyZmxvdzogYXV0bztcbiAgcGFkZGluZzogMTBweDtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcblxuICAuYnRuIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgaGVpZ2h0OiAzMnB4O1xuICB9XG5cbiAgLm9wdGlvbi1yb3cge1xuICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICBtYXJnaW4tdG9wOiAxMHB4O1xuICB9XG5cbiAgI2J0bi1ncm91cC1rYW5iYW4ge1xuICAgIGhlaWdodDogYXV0bztcbiAgICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gIH1cblxuICAjYnRuLWRlcGFydG1lbnQsXG4gICNidG4tdXNlciB7XG4gICAgd2lkdGg6IDEyMHB4O1xuICB9XG59XG5cbi5ncmlkIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbn1cblxuLmVtcGxveWVlLXBob3RvIHtcbiAgd2lkdGg6IDQwcHg7XG4gIGhlaWdodDogNDBweDtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBtYXJnaW4tbGVmdDogNXB4O1xuICBib3JkZXI6IHNvbGlkIDFweCAjZTBlMGUwO1xuICBtYXJnaW4tcmlnaHQ6IDVweDtcbn1cblxuLnRpbWVsaW5lLWxlZnRzaGFwZS1ncm91cCB7XG4gIHdpZHRoOiAwcHg7XG59XG5cbi50aW1lbGluZS1yaWdodHNoYXBlLWdyb3VwIHtcbiAgd2lkdGg6IDBweDtcbn1cblxuLnRpbWVsaW5lTGVmdEJ0bnMge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG59XG5cbi50aW1lbGluZVJpZ2h0QnRucyB7XG4gIGZsb2F0OiByaWdodDtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xufVxuXG4uZ2MtY2VsbC1ib3JkZXIge1xuICBib3JkZXI6IG5vbmU7XG59XG5cbi5nYy1ncm91cC1oZWFkZXItcm93IHtcbiAgYmFja2dyb3VuZDogaW5pdGlhbDtcbn1cblxuLmdyb3VwLWl0ZW0tdGl0bGUge1xuICBib3JkZXI6IG5vbmU7XG4gIGNvbG9yOiAjMjIyO1xuICBiYWNrZ3JvdW5kOiAjYzQ4YzQzO1xuICB3aGl0ZS1zcGFjZTogbm9ybWFsO1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgcGFkZGluZzogMC40ZW07XG4gIGZvbnQtc2l6ZTogMTNweDtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbn1cblxuLmdyb3VwLXBob3RvLWNvbnRhaW5lcixcbi5ncm91cC1pdGVtLWRlc2NyaXB0aW9uIHtcbiAgYm9yZGVyOiBub25lO1xufVxuXG4uZ3JvdXAtcGhvdG8tY29udGFpbmVyIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBib3R0b206IDAuNGVtO1xuICByaWdodDogMC40ZW07XG59XG5cbi5ncm91cC1pdGVtLWRlc2NyaXB0aW9uIHtcbiAgcGFkZGluZzogOHB4O1xufVxuXG4uZ2MtdHJlbGxpcy1ncm91cC1oZWFkZXItaW5uZXIge1xuICBmb250LXNpemU6IDEycHg7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG59XG5cbi5ncm91cC1pdGVtLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwJTtcbiAgZm9udC1zaXplOiAxMnB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIG1hcmdpbjogNXB4O1xufVxuXG4uZ3JvdXAtaXRlbS1jb250YWluZXItaW5uZXIge1xuICBoZWlnaHQ6IDk1JTtcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjb2xvcjogIzIyMjtcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgYm94LXNoYWRvdzogMCAzcHggNXB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbn1cblxuLmZpbmlzaCB7XG4gIGJhY2tncm91bmQ6ICNkMmZmZDE7XG59XG5cbi5laWdodHktcGVyIHtcbiAgYmFja2dyb3VuZDogI2EwZmY5ZDtcbn1cblxuLmZpZnR5LXBlciB7XG4gIGJhY2tncm91bmQ6ICNjZmNmZmY7XG59XG5cbi50aGlydHktcGVyIHtcbiAgYmFja2dyb3VuZDogIzk4ZDhmZjtcbn1cblxuLnN0YXJ0IHtcbiAgYmFja2dyb3VuZDogI2ZmZGQ2Nztcbn1cblxuLmZpbmlzaC1oZWFkIHtcbiAgYmFja2dyb3VuZDogIzg3ZmY4NDtcbn1cblxuLmVpZ2h0eS1wZXItaGVhZCB7XG4gIGJhY2tncm91bmQ6ICM3NGRjNzI7XG59XG5cbi5maWZ0eS1wZXItaGVhZCB7XG4gIGJhY2tncm91bmQ6ICNhMWExZTI7XG59XG5cbi50aGlydHktcGVyLWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjNGJiY2ZmO1xufVxuXG4uc3RhcnQtaGVhZCB7XG4gIGJhY2tncm91bmQ6ICNmZmI0MDA7XG59XG5cbi50cmVsbGlzLWdyb3VwaW5nIC5nYy10cmVsbGlzLWdyb3VwLWhlYWRlciB7XG4gIGxpbmUtaGVpZ2h0OiAyNHB4O1xufVxuXG4uZ2MtbWFpbmxpbmUge1xuICBwYWRkaW5nOiAwICFpbXBvcnRhbnQ7XG59XG4iLCIqIHtcbiAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiByZ2JhKDAsIDAsIDAsIDApO1xufVxuXG4uZ2Mtcm93IHtcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNmMmYyZjI7XG59XG5cbi5nYy1wb3B1cC1lZGl0aW5nLWFyZWEge1xuICB3aWR0aDogNDU0cHg7XG59XG5cbi5nYy1ncmlkIHtcbiAgYm9yZGVyOiAxcHggbm9uZSB3aGl0ZTtcbn1cblxuLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogYXV0bztcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGZsZXgtZ3JvdzogMDtcbiAgZmxleC1zaHJpbms6IDA7XG59XG4uc2FtcGxlLW9wdGlvbnMgLmJ0biB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBoZWlnaHQ6IDMycHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICBmb250LXNpemU6IDE0cHg7XG4gIG1hcmdpbi10b3A6IDEwcHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgI2J0bi1ncm91cC1rYW5iYW4ge1xuICBoZWlnaHQ6IGF1dG87XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbn1cbi5zYW1wbGUtb3B0aW9ucyAjYnRuLWRlcGFydG1lbnQsXG4uc2FtcGxlLW9wdGlvbnMgI2J0bi11c2VyIHtcbiAgd2lkdGg6IDEyMHB4O1xufVxuXG4uZ3JpZCB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG59XG5cbi5lbXBsb3llZS1waG90byB7XG4gIHdpZHRoOiA0MHB4O1xuICBoZWlnaHQ6IDQwcHg7XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgbWFyZ2luLWxlZnQ6IDVweDtcbiAgYm9yZGVyOiBzb2xpZCAxcHggI2UwZTBlMDtcbiAgbWFyZ2luLXJpZ2h0OiA1cHg7XG59XG5cbi50aW1lbGluZS1sZWZ0c2hhcGUtZ3JvdXAge1xuICB3aWR0aDogMHB4O1xufVxuXG4udGltZWxpbmUtcmlnaHRzaGFwZS1ncm91cCB7XG4gIHdpZHRoOiAwcHg7XG59XG5cbi50aW1lbGluZUxlZnRCdG5zIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xufVxuXG4udGltZWxpbmVSaWdodEJ0bnMge1xuICBmbG9hdDogcmlnaHQ7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbn1cblxuLmdjLWNlbGwtYm9yZGVyIHtcbiAgYm9yZGVyOiBub25lO1xufVxuXG4uZ2MtZ3JvdXAtaGVhZGVyLXJvdyB7XG4gIGJhY2tncm91bmQ6IGluaXRpYWw7XG59XG5cbi5ncm91cC1pdGVtLXRpdGxlIHtcbiAgYm9yZGVyOiBub25lO1xuICBjb2xvcjogIzIyMjtcbiAgYmFja2dyb3VuZDogI2M0OGM0MztcbiAgd2hpdGUtc3BhY2U6IG5vcm1hbDtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIHBhZGRpbmc6IDAuNGVtO1xuICBmb250LXNpemU6IDEzcHg7XG4gIGZvbnQtd2VpZ2h0OiA2MDA7XG59XG5cbi5ncm91cC1waG90by1jb250YWluZXIsXG4uZ3JvdXAtaXRlbS1kZXNjcmlwdGlvbiB7XG4gIGJvcmRlcjogbm9uZTtcbn1cblxuLmdyb3VwLXBob3RvLWNvbnRhaW5lciB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYm90dG9tOiAwLjRlbTtcbiAgcmlnaHQ6IDAuNGVtO1xufVxuXG4uZ3JvdXAtaXRlbS1kZXNjcmlwdGlvbiB7XG4gIHBhZGRpbmc6IDhweDtcbn1cblxuLmdjLXRyZWxsaXMtZ3JvdXAtaGVhZGVyLWlubmVyIHtcbiAgZm9udC1zaXplOiAxMnB4O1xuICBmb250LXdlaWdodDogNDAwO1xufVxuXG4uZ3JvdXAtaXRlbS1jb250YWluZXIge1xuICBoZWlnaHQ6IDEwMCU7XG4gIGZvbnQtc2l6ZTogMTJweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBtYXJnaW46IDVweDtcbn1cblxuLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyIHtcbiAgaGVpZ2h0OiA5NSU7XG4gIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgY29sb3I6ICMyMjI7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG4gIGJveC1zaGFkb3c6IDAgM3B4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG59XG5cbi5maW5pc2gge1xuICBiYWNrZ3JvdW5kOiAjZDJmZmQxO1xufVxuXG4uZWlnaHR5LXBlciB7XG4gIGJhY2tncm91bmQ6ICNhMGZmOWQ7XG59XG5cbi5maWZ0eS1wZXIge1xuICBiYWNrZ3JvdW5kOiAjY2ZjZmZmO1xufVxuXG4udGhpcnR5LXBlciB7XG4gIGJhY2tncm91bmQ6ICM5OGQ4ZmY7XG59XG5cbi5zdGFydCB7XG4gIGJhY2tncm91bmQ6ICNmZmRkNjc7XG59XG5cbi5maW5pc2gtaGVhZCB7XG4gIGJhY2tncm91bmQ6ICM4N2ZmODQ7XG59XG5cbi5laWdodHktcGVyLWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjNzRkYzcyO1xufVxuXG4uZmlmdHktcGVyLWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjYTFhMWUyO1xufVxuXG4udGhpcnR5LXBlci1oZWFkIHtcbiAgYmFja2dyb3VuZDogIzRiYmNmZjtcbn1cblxuLnN0YXJ0LWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjZmZiNDAwO1xufVxuXG4udHJlbGxpcy1ncm91cGluZyAuZ2MtdHJlbGxpcy1ncm91cC1oZWFkZXIge1xuICBsaW5lLWhlaWdodDogMjRweDtcbn1cblxuLmdjLW1haW5saW5lIHtcbiAgcGFkZGluZzogMCAhaW1wb3J0YW50O1xufSJdfQ== */

(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);

Multiple Layout (React)

Feedback