Multiple Layout | Showcase | MESCIUS DataViewsJS JavaScript 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/purejs/" />
<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 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/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: '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/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.gantt.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/dataviews/gc.dataviews.timeline.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div class="main-container">
<div class="sample-options">
<div class="option-row">
<div class="btn-group" role="group">
<button id="btn-gantt" class="btn btn-default">Gantt View</button>
<button id="btn-kanban" class="btn btn-default">Kanban View</button>
<button id="btn-timeline" class="btn btn-default">Timeline View</button>
<button id="btn-grid" class="btn btn-default">Grid View</button>
</div>
</div>
<div id="btn-group-kanban" class="option-row">
<div class="btn-group" role="group">
<button id="btn-department" class="btn btn-default">By Department</button>
<button id="btn-user" class="btn btn-default">By User</button>
</div>
</div>
</div>
<div id="grid" class="grid"></div>
</div>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

var photoPresenter = '<img class="employee-photo" src={{=it.photo}} />';
var 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'],
},
};
var cols = function cols(view) {
var dateFormat = view === 'timeline' ? 'MMMM dd, hh:mmtt' : 'mmm dd,yyyy';
var 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(function (id) {
return all.filter(function (c) {
return c.id === id;
})[0];
});
};
var groupBy = {
department: [
{
field: 'department',
header: {
height: 24,
},
},
{
field: 'stage',
header: {
height: 24,
},
},
],
user: [
{
field: 'user',
header: {
height: 24,
},
},
{
field: 'stage',
header: {
height: 24,
},
},
],
};
function switchView(view, layout) {
Object.keys(views).forEach(function (key) {
$('#btn-'.concat(key)).removeClass('active');
});
$('#btn-'.concat(view)).addClass('active');
$('#btn-group-kanban').css('visibility', view === 'kanban' ? 'visible' : 'hidden');
if (view === 'kanban') {
$('#btn-department').addClass('active');
$('#btn-user').removeClass('active');
}
var dataView = GC.DataViews.DataView.getControlByElement(document.body);
if (dataView) dataView.destroy();
new GC.DataViews.DataView(document.getElementById('grid'), data, cols(view), layout);
}
function showGanttView() {
var layout = new GC.DataViews.GridLayout({
colHeaderHeight: 48,
rowHeight: 48,
allowEditing: true,
editMode: 'none',
showRowHeader: false,
hierarchy: {
keyField: 'id',
parentField: 'parentID',
collapsed: false,
column: 'id',
footer: {
visible: false,
},
},
});
switchView('gantt', layout);
}
function showKanbanView() {
var rowTemplate =
'<div class="group-item-container">\n  <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{{?}}">\n    <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>\n    <div data-column="photo" class="group-photo-container"></div>\n    <div data-column="description" class="group-item-description"></div>\n  </div>\n</div>';
var trellis = new GC.DataViews.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;
}
}
});
var layout = new GC.DataViews.GridLayout({
grouping: groupBy.department,
rowTemplate: rowTemplate,
rowHeight: 140,
groupStrategy: trellis,
});
switchView('kanban', layout);
}
function showTimelineView() {
var groupDetailEventTemplate =
'<div style="margin:5px;">\n  <div style="font-size:14px;font-weight: bold;">{{=it.title}}</div>\n  <div style="font-size:14px;font-weight: normal;">{{=it.description}}</div>\n  <blockquote style="display: block;font-size:13px;font-family: "Helvetic Neue, Helvetica, Arial">User:{{=it.user}}</blockquote>\n  <span style="margin-right: auto" >End:{{=it.end}}</span>\n</div>';
var formatter = new GC.DataViews.GeneralFormatter('mmmm dd');
var timeline = new GC.DataViews.TimelineGrouping({});
var layout = new GC.DataViews.GridLayout({
grouping: {
field: 'start',
converter: function converter(field) {
return formatter.format(field);
},
},
autoRowHeight: true,
rowTemplate: groupDetailEventTemplate,
groupStrategy: timeline,
});
switchView('timeline', layout);
}
function showGridView() {
var layout = new GC.DataViews.GridLayout({
colHeaderHeight: 40,
rowHeight: 40,
showRowHeader: false,
});
switchView('grid', layout);
}
function byDepartment() {
$('#btn-department').addClass('active');
$('#btn-user').removeClass('active');
var dataView = GC.DataViews.DataView.getControlByElement(document.body);
dataView.data.groupDescriptors = groupBy.department;
dataView.invalidate();
}
function byUser() {
$('#btn-department').removeClass('active');
$('#btn-user').addClass('active');
var dataView = GC.DataViews.DataView.getControlByElement(document.body);
dataView.data.groupDescriptors = groupBy.user;
dataView.invalidate();
}
$('#btn-gantt').click(showGanttView);
$('#btn-kanban').click(showKanbanView);
$('#btn-timeline').click(showTimelineView);
$('#btn-grid').click(showGridView);
$('#btn-department').click(byDepartment);
$('#btn-user').click(byUser);
showGanttView();

var 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',
},
];
var SITE_ROOT = window.process.env.SITE_ROOT;
data.forEach(function (rec) {
rec.start = new Date(rec.start);
rec.end = new Date(rec.end);
rec.photo = ''.concat(SITE_ROOT, '/images/').concat(rec.user, '.jpg');
});

* {
-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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNob3djYXNlL011bHRpcGxlTGF5b3V0L3B1cmVqcy9zdHlsZXMuc2NzcyIsIlNob3djYXNlL011bHRpcGxlTGF5b3V0L3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsNkNBQUE7QUNDRjs7QURFQTtFQUNFLGdDQUFBO0FDQ0Y7O0FERUE7RUFDRSxZQUFBO0FDQ0Y7O0FERUE7RUFDRSxzQkFBQTtBQ0NGOztBREVBO0VBQ0UsYUFBQTtFQUNBLHNCQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLFdBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGFBQUE7RUFDQSxtQkFBQTtFQUNBLHNCQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNDRjtBRENFO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsdUJBQUE7RUFDQSxZQUFBO0FDQ0o7QURFRTtFQUNFLGVBQUE7RUFDQSxnQkFBQTtBQ0FKO0FER0U7RUFDRSxZQUFBO0VBQ0Esa0JBQUE7QUNESjtBRElFOztFQUVFLFlBQUE7QUNGSjs7QURNQTtFQUNFLFdBQUE7RUFDQSxZQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNIRjs7QURNQTtFQUNFLFdBQUE7RUFDQSxZQUFBO0VBQ0Esa0JBQUE7RUFDQSxnQkFBQTtFQUNBLHlCQUFBO0VBQ0EsaUJBQUE7QUNIRjs7QURNQTtFQUNFLFVBQUE7QUNIRjs7QURNQTtFQUNFLFVBQUE7QUNIRjs7QURNQTtFQUNFLHFCQUFBO0FDSEY7O0FETUE7RUFDRSxZQUFBO0VBQ0EscUJBQUE7QUNIRjs7QURNQTtFQUNFLFlBQUE7QUNIRjs7QURNQTtFQUNFLG1CQUFBO0FDSEY7O0FETUE7RUFDRSxZQUFBO0VBQ0EsV0FBQTtFQUNBLG1CQUFBO0VBQ0EsbUJBQUE7RUFDQSx1QkFBQTtFQUNBLGNBQUE7RUFDQSxlQUFBO0VBQ0EsZ0JBQUE7QUNIRjs7QURNQTs7RUFFRSxZQUFBO0FDSEY7O0FETUE7RUFDRSxrQkFBQTtFQUNBLGFBQUE7RUFDQSxZQUFBO0FDSEY7O0FETUE7RUFDRSxZQUFBO0FDSEY7O0FETUE7RUFDRSxlQUFBO0VBQ0EsZ0JBQUE7QUNIRjs7QURNQTtFQUNFLFlBQUE7RUFDQSxlQUFBO0VBQ0EsZ0JBQUE7RUFDQSxrQkFBQTtFQUNBLFdBQUE7QUNIRjs7QURNQTtFQUNFLFdBQUE7RUFDQSxrQkFBQTtFQUNBLGdCQUFBO0VBQ0EsV0FBQTtFQUNBLGdCQUFBO0VBQ0Esd0NBQUE7QUNIRjs7QURNQTtFQUNFLG1CQUFBO0FDSEY7O0FETUE7RUFDRSxtQkFBQTtBQ0hGOztBRE1BO0VBQ0UsbUJBQUE7QUNIRjs7QURNQTtFQUNFLG1CQUFBO0FDSEY7O0FETUE7RUFDRSxtQkFBQTtBQ0hGOztBRE1BO0VBQ0UsbUJBQUE7QUNIRjs7QURNQTtFQUNFLG1CQUFBO0FDSEY7O0FETUE7RUFDRSxtQkFBQTtBQ0hGOztBRE1BO0VBQ0UsbUJBQUE7QUNIRjs7QURNQTtFQUNFLG1CQUFBO0FDSEY7O0FETUE7RUFDRSxpQkFBQTtBQ0hGOztBRE1BO0VBQ0UscUJBQUE7QUNIRiIsImZpbGUiOiJTaG93Y2FzZS9NdWx0aXBsZUxheW91dC9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIioge1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHJnYmEoMCwgMCwgMCwgMCk7XG59XG5cbi5nYy1yb3cge1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2YyZjJmMjtcbn1cblxuLmdjLXBvcHVwLWVkaXRpbmctYXJlYSB7XG4gIHdpZHRoOiA0NTRweDtcbn1cblxuLmdjLWdyaWQge1xuICBib3JkZXI6IDFweCBub25lIHdoaXRlO1xufVxuXG4ubWFpbi1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiBhdXRvO1xuICBvdmVyZmxvdzogYXV0bztcbiAgcGFkZGluZzogMTBweDtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcblxuICAuYnRuIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgaGVpZ2h0OiAzMnB4O1xuICB9XG5cbiAgLm9wdGlvbi1yb3cge1xuICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICBtYXJnaW4tdG9wOiAxMHB4O1xuICB9XG5cbiAgI2J0bi1ncm91cC1rYW5iYW4ge1xuICAgIGhlaWdodDogYXV0bztcbiAgICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gIH1cblxuICAjYnRuLWRlcGFydG1lbnQsXG4gICNidG4tdXNlciB7XG4gICAgd2lkdGg6IDEyMHB4O1xuICB9XG59XG5cbi5ncmlkIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbn1cblxuLmVtcGxveWVlLXBob3RvIHtcbiAgd2lkdGg6IDQwcHg7XG4gIGhlaWdodDogNDBweDtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBtYXJnaW4tbGVmdDogNXB4O1xuICBib3JkZXI6IHNvbGlkIDFweCAjZTBlMGUwO1xuICBtYXJnaW4tcmlnaHQ6IDVweDtcbn1cblxuLnRpbWVsaW5lLWxlZnRzaGFwZS1ncm91cCB7XG4gIHdpZHRoOiAwcHg7XG59XG5cbi50aW1lbGluZS1yaWdodHNoYXBlLWdyb3VwIHtcbiAgd2lkdGg6IDBweDtcbn1cblxuLnRpbWVsaW5lTGVmdEJ0bnMge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG59XG5cbi50aW1lbGluZVJpZ2h0QnRucyB7XG4gIGZsb2F0OiByaWdodDtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xufVxuXG4uZ2MtY2VsbC1ib3JkZXIge1xuICBib3JkZXI6IG5vbmU7XG59XG5cbi5nYy1ncm91cC1oZWFkZXItcm93IHtcbiAgYmFja2dyb3VuZDogaW5pdGlhbDtcbn1cblxuLmdyb3VwLWl0ZW0tdGl0bGUge1xuICBib3JkZXI6IG5vbmU7XG4gIGNvbG9yOiAjMjIyO1xuICBiYWNrZ3JvdW5kOiAjYzQ4YzQzO1xuICB3aGl0ZS1zcGFjZTogbm9ybWFsO1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgcGFkZGluZzogMC40ZW07XG4gIGZvbnQtc2l6ZTogMTNweDtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbn1cblxuLmdyb3VwLXBob3RvLWNvbnRhaW5lcixcbi5ncm91cC1pdGVtLWRlc2NyaXB0aW9uIHtcbiAgYm9yZGVyOiBub25lO1xufVxuXG4uZ3JvdXAtcGhvdG8tY29udGFpbmVyIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBib3R0b206IDAuNGVtO1xuICByaWdodDogMC40ZW07XG59XG5cbi5ncm91cC1pdGVtLWRlc2NyaXB0aW9uIHtcbiAgcGFkZGluZzogOHB4O1xufVxuXG4uZ2MtdHJlbGxpcy1ncm91cC1oZWFkZXItaW5uZXIge1xuICBmb250LXNpemU6IDEycHg7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG59XG5cbi5ncm91cC1pdGVtLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwJTtcbiAgZm9udC1zaXplOiAxMnB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIG1hcmdpbjogNXB4O1xufVxuXG4uZ3JvdXAtaXRlbS1jb250YWluZXItaW5uZXIge1xuICBoZWlnaHQ6IDk1JTtcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjb2xvcjogIzIyMjtcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgYm94LXNoYWRvdzogMCAzcHggNXB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbn1cblxuLmZpbmlzaCB7XG4gIGJhY2tncm91bmQ6ICNkMmZmZDE7XG59XG5cbi5laWdodHktcGVyIHtcbiAgYmFja2dyb3VuZDogI2EwZmY5ZDtcbn1cblxuLmZpZnR5LXBlciB7XG4gIGJhY2tncm91bmQ6ICNjZmNmZmY7XG59XG5cbi50aGlydHktcGVyIHtcbiAgYmFja2dyb3VuZDogIzk4ZDhmZjtcbn1cblxuLnN0YXJ0IHtcbiAgYmFja2dyb3VuZDogI2ZmZGQ2Nztcbn1cblxuLmZpbmlzaC1oZWFkIHtcbiAgYmFja2dyb3VuZDogIzg3ZmY4NDtcbn1cblxuLmVpZ2h0eS1wZXItaGVhZCB7XG4gIGJhY2tncm91bmQ6ICM3NGRjNzI7XG59XG5cbi5maWZ0eS1wZXItaGVhZCB7XG4gIGJhY2tncm91bmQ6ICNhMWExZTI7XG59XG5cbi50aGlydHktcGVyLWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjNGJiY2ZmO1xufVxuXG4uc3RhcnQtaGVhZCB7XG4gIGJhY2tncm91bmQ6ICNmZmI0MDA7XG59XG5cbi50cmVsbGlzLWdyb3VwaW5nIC5nYy10cmVsbGlzLWdyb3VwLWhlYWRlciB7XG4gIGxpbmUtaGVpZ2h0OiAyNHB4O1xufVxuXG4uZ2MtbWFpbmxpbmUge1xuICBwYWRkaW5nOiAwICFpbXBvcnRhbnQ7XG59XG4iLCIqIHtcbiAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiByZ2JhKDAsIDAsIDAsIDApO1xufVxuXG4uZ2Mtcm93IHtcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNmMmYyZjI7XG59XG5cbi5nYy1wb3B1cC1lZGl0aW5nLWFyZWEge1xuICB3aWR0aDogNDU0cHg7XG59XG5cbi5nYy1ncmlkIHtcbiAgYm9yZGVyOiAxcHggbm9uZSB3aGl0ZTtcbn1cblxuLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogYXV0bztcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGZsZXgtZ3JvdzogMDtcbiAgZmxleC1zaHJpbms6IDA7XG59XG4uc2FtcGxlLW9wdGlvbnMgLmJ0biB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBoZWlnaHQ6IDMycHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICBmb250LXNpemU6IDE0cHg7XG4gIG1hcmdpbi10b3A6IDEwcHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgI2J0bi1ncm91cC1rYW5iYW4ge1xuICBoZWlnaHQ6IGF1dG87XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbn1cbi5zYW1wbGUtb3B0aW9ucyAjYnRuLWRlcGFydG1lbnQsXG4uc2FtcGxlLW9wdGlvbnMgI2J0bi11c2VyIHtcbiAgd2lkdGg6IDEyMHB4O1xufVxuXG4uZ3JpZCB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG59XG5cbi5lbXBsb3llZS1waG90byB7XG4gIHdpZHRoOiA0MHB4O1xuICBoZWlnaHQ6IDQwcHg7XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgbWFyZ2luLWxlZnQ6IDVweDtcbiAgYm9yZGVyOiBzb2xpZCAxcHggI2UwZTBlMDtcbiAgbWFyZ2luLXJpZ2h0OiA1cHg7XG59XG5cbi50aW1lbGluZS1sZWZ0c2hhcGUtZ3JvdXAge1xuICB3aWR0aDogMHB4O1xufVxuXG4udGltZWxpbmUtcmlnaHRzaGFwZS1ncm91cCB7XG4gIHdpZHRoOiAwcHg7XG59XG5cbi50aW1lbGluZUxlZnRCdG5zIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xufVxuXG4udGltZWxpbmVSaWdodEJ0bnMge1xuICBmbG9hdDogcmlnaHQ7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbn1cblxuLmdjLWNlbGwtYm9yZGVyIHtcbiAgYm9yZGVyOiBub25lO1xufVxuXG4uZ2MtZ3JvdXAtaGVhZGVyLXJvdyB7XG4gIGJhY2tncm91bmQ6IGluaXRpYWw7XG59XG5cbi5ncm91cC1pdGVtLXRpdGxlIHtcbiAgYm9yZGVyOiBub25lO1xuICBjb2xvcjogIzIyMjtcbiAgYmFja2dyb3VuZDogI2M0OGM0MztcbiAgd2hpdGUtc3BhY2U6IG5vcm1hbDtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIHBhZGRpbmc6IDAuNGVtO1xuICBmb250LXNpemU6IDEzcHg7XG4gIGZvbnQtd2VpZ2h0OiA2MDA7XG59XG5cbi5ncm91cC1waG90by1jb250YWluZXIsXG4uZ3JvdXAtaXRlbS1kZXNjcmlwdGlvbiB7XG4gIGJvcmRlcjogbm9uZTtcbn1cblxuLmdyb3VwLXBob3RvLWNvbnRhaW5lciB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYm90dG9tOiAwLjRlbTtcbiAgcmlnaHQ6IDAuNGVtO1xufVxuXG4uZ3JvdXAtaXRlbS1kZXNjcmlwdGlvbiB7XG4gIHBhZGRpbmc6IDhweDtcbn1cblxuLmdjLXRyZWxsaXMtZ3JvdXAtaGVhZGVyLWlubmVyIHtcbiAgZm9udC1zaXplOiAxMnB4O1xuICBmb250LXdlaWdodDogNDAwO1xufVxuXG4uZ3JvdXAtaXRlbS1jb250YWluZXIge1xuICBoZWlnaHQ6IDEwMCU7XG4gIGZvbnQtc2l6ZTogMTJweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBtYXJnaW46IDVweDtcbn1cblxuLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyIHtcbiAgaGVpZ2h0OiA5NSU7XG4gIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgY29sb3I6ICMyMjI7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG4gIGJveC1zaGFkb3c6IDAgM3B4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG59XG5cbi5maW5pc2gge1xuICBiYWNrZ3JvdW5kOiAjZDJmZmQxO1xufVxuXG4uZWlnaHR5LXBlciB7XG4gIGJhY2tncm91bmQ6ICNhMGZmOWQ7XG59XG5cbi5maWZ0eS1wZXIge1xuICBiYWNrZ3JvdW5kOiAjY2ZjZmZmO1xufVxuXG4udGhpcnR5LXBlciB7XG4gIGJhY2tncm91bmQ6ICM5OGQ4ZmY7XG59XG5cbi5zdGFydCB7XG4gIGJhY2tncm91bmQ6ICNmZmRkNjc7XG59XG5cbi5maW5pc2gtaGVhZCB7XG4gIGJhY2tncm91bmQ6ICM4N2ZmODQ7XG59XG5cbi5laWdodHktcGVyLWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjNzRkYzcyO1xufVxuXG4uZmlmdHktcGVyLWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjYTFhMWUyO1xufVxuXG4udGhpcnR5LXBlci1oZWFkIHtcbiAgYmFja2dyb3VuZDogIzRiYmNmZjtcbn1cblxuLnN0YXJ0LWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjZmZiNDAwO1xufVxuXG4udHJlbGxpcy1ncm91cGluZyAuZ2MtdHJlbGxpcy1ncm91cC1oZWFkZXIge1xuICBsaW5lLWhlaWdodDogMjRweDtcbn1cblxuLmdjLW1haW5saW5lIHtcbiAgcGFkZGluZzogMCAhaW1wb3J0YW50O1xufSJdfQ== */