Trellis with Grid Layout | Data Views | MESCIUS DataViewsJS Demos

This example demonstrates how you can use the Trellis grouping strategy with the Grid Layout Engine in DataViews to make a Kanban board similar to Trello™. This view is essentially a grid view grouped into vertical lists. Dragging a card from column to column changes the group and the underlying data value. There are three primary parts that make this demo work: References to grid.js and trellis.js provide the core functionality. A row template is configured to format each row as a card. The groupStrategy: trellis option/value pair is used to set the group strategy. You can switch between Default and Trellis views using the buttons at the top of the page to see what the data looks like in an ordinary grid.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/DataViews/Trellis/TrellisWithGridLayout/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="grouping, trellis" />
<meta
name="description"
content="This example demonstrates how you can use the Trellis grouping strategy with the Grid Layout Engine in DataViews to make a Kanban board similar to Trello™."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trellis with Grid Layout | Data Views | 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.core.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.grid.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.core.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.grid.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="btn-group">
<button id="normal" type="button" class="btn btn-default">Default</button>
<button id="trellis" type="button" class="btn btn-default active">Trellis</button>
</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 rowTemplate =
'<div class="group-item-container">\n  <div class="group-item-container-inner {{? it.progress==100}}finish{{?? it.progress>=80}}eighty-per{{?? it.progress>=50}}fifty-per{{?? it.progress>=30}}thirty-per{{??}}start{{?}}">\n    <div data-column="title" class="group-item-title"></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 photoPresenter = '<img class="employee-photo" src={{=it.photo}} />';
var cols = [
{
id: 'title',
name: 'title',
dataField: 'title',
},
{
id: 'description',
name: 'description',
dataField: 'description',
},
{
id: 'photo',
dataField: 'photo',
presenter: photoPresenter,
},
{
id: 'progress',
dataField: 'progress',
},
];
var trellis = new GC.DataViews.TrellisGrouping({
panelUnitWidth: 190,
});
var layout = new GC.DataViews.GridLayout({
grouping: [
{
field: 'work',
header: {
height: 24,
},
footer: {
visible: false,
},
},
{
field: 'category',
header: {
height: 24,
},
footer: {
visible: false,
},
},
],
rowTemplate: rowTemplate,
rowHeight: 120,
groupStrategy: trellis,
});
var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout);
function changeToNormalLayout() {
$('#normal').addClass('active');
$('#trellis').removeClass('active');
dataView.data.groupDescriptors = null;
var options = dataView.options;
options.groupStrategy = null;
options.rowHeight = 40;
options.colHeaderHeight = 40;
options.rowTemplate = null;
dataView.invalidate();
}
function changeToTrellisLayout() {
$('#normal').removeClass('active');
$('#trellis').addClass('active');
dataView.data.groupDescriptors = [
{
field: 'work',
header: {
height: 24,
},
footer: {
visible: false,
},
},
{
field: 'category',
header: {
height: 24,
},
footer: {
visible: false,
},
},
];
var options = dataView.options;
options.groupStrategy = trellis;
options.rowHeight = 120;
options.rowTemplate = rowTemplate;
dataView.invalidate();
}
$('#normal').click(changeToNormalLayout);
$('#trellis').click(changeToTrellisLayout);

// timeline board
var SITE_ROOT = window.process.env.SITE_ROOT;
var data = [
{
work: 'Future Work',
category: 'New Requests',
description: 'Update our logo.',
title: 'Update Logo',
photo: SITE_ROOT + '/images/ds.jpg',
progress: 0,
},
{
work: 'Future Work',
category: 'New Requests',
description: 'Update our logo2.',
title: 'Update Logo2',
photo: SITE_ROOT + '/images/gw.jpg',
progress: 0,
},
{
work: 'Future Work',
category: 'Approved',
description: "Click the '+' or '-' icons at the top of group.",
title: 'Read Me First',
photo: SITE_ROOT + '/images/ac.jpg',
progress: 0,
},
{
work: 'Doing Now',
category: 'Executive Team',
description: 'Come up with a schedule for alpha release',
title: 'Schedule me!',
photo: SITE_ROOT + '/images/ds.jpg',
progress: 10,
},
{
work: 'Doing Now',
category: 'Executive Team',
description: 'Come up with a schedule for onboarding',
title: 'Schedule me!',
photo: SITE_ROOT + '/images/ds.jpg',
progress: 20,
},
{
work: 'Doing Now',
category: 'Executive Team',
description: 'Find the hidden risk on the board',
title: 'Identify the problem.',
photo: SITE_ROOT + '/images/ds.jpg',
progress: 90,
},
{
work: 'Doing Now',
category: 'Executive Team',
description: 'Write a buzzword blog post.',
title: 'Blog Post',
photo: SITE_ROOT + '/images/ds.jpg',
progress: 20,
},
{
work: 'Doing Now',
category: 'Test Team',
description: 'Test the new IPhone app',
title: 'IPhone APP',
photo: SITE_ROOT + '/images/bw.jpg',
progress: 50,
},
{
work: 'Doing Now',
category: 'Test Team',
description: 'Calendar does not work',
title: 'Issue #987432',
photo: SITE_ROOT + '/images/bw.jpg',
progress: 70,
},
{
work: 'Doing Now',
category: 'Test Team',
description: 'Android mobile app',
title: 'Android APP',
photo: SITE_ROOT + '/images/bw.jpg',
progress: 80,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 3.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/gw.jpg',
progress: 40,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 2.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/gw.jpg',
progress: 70,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 1.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/hh.jpg',
progress: 70,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 1.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/hh.jpg',
progress: 20,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 1.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/hh.jpg',
progress: 20,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 1.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/ac.jpg',
progress: 60,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 1.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/ac.jpg',
progress: 90,
},
{
work: 'Ready to Archive (Last 14 Days)',
category: 'Finished as Planned',
description: 'Give development team more cards',
title: 'Create Some Cards',
photo: SITE_ROOT + '/images/ac.jpg',
progress: 100,
},
{
work: 'Ready to Archive (Last 14 Days)',
category: 'Started but not Finished',
description: 'Build a new website',
title: 'Assign a User',
photo: SITE_ROOT + '/images/ds.jpg',
progress: 100,
},
{
work: 'Ready to Archive (Last 14 Days)',
category: 'Discarded Requests',
description: 'A little slow on Android.',
title: 'Issue #987234',
photo: SITE_ROOT + '/images/gw.jpg',
progress: 100,
},
];

.main-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.sample-options {
display: flex;
background: #fbfbfb;
box-sizing: border-box;
float: right;
overflow: auto;
padding: 10px;
flex-grow: 0;
flex-shrink: 0;
}
.grid {
width: calc(100% - 20px);
height: 100%;
flex-grow: 1;
flex-shrink: 1;
margin: 0 10px;
}
.employee-photo {
border-radius: 50%;
height: 32px;
width: 32px;
}
.group-item-container {
height: 100%;
overflow: hidden;
position: relative;
}
.group-item-container .group-item-container-inner {
border-radius: 4px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
color: #f1f1f1;
height: 95%;
overflow: hidden;
margin: 5px;
}
.group-item-container .group-item-container-inner .group-item-title {
border: 0;
color: white;
font-size: 14px;
padding: 0.4em;
text-overflow: ellipsis;
white-space: nowrap;
}
.group-item-container .group-item-container-inner .group-photo-container {
bottom: 0;
position: absolute;
right: 10px;
}
.group-item-container .group-item-container-inner .group-item-description {
font-size: 10px;
padding: 8px;
}
.group-item-container .group-item-container-inner.finish {
background: #9ec7c9;
}
.group-item-container .group-item-container-inner.finish .group-item-title {
background: #5c989b;
}
.group-item-container .group-item-container-inner.eighty-per {
background: #a98daf;
}
.group-item-container .group-item-container-inner.eighty-per .group-item-title {
background: #85638d;
}
.group-item-container .group-item-container-inner.fifty-per {
background: #a19fbe;
}
.group-item-container .group-item-container-inner.fifty-per .group-item-title {
background: #6c6a91;
}
.group-item-container .group-item-container-inner.thirty-per {
background: #aa8995;
}
.group-item-container .group-item-container-inner.thirty-per .group-item-title {
background: #8e5a6d;
}
.group-item-container .group-item-container-inner.start {
background: #9eb3c9;
}
.group-item-container .group-item-container-inner.start .group-item-title {
background: #5d89b7;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9UcmVsbGlzL1RyZWxsaXNXaXRoR3JpZExheW91dC9wdXJlanMvc3R5bGVzLnNjc3MiLCJEYXRhVmlld3MvVHJlbGxpcy9UcmVsbGlzV2l0aEdyaWRMYXlvdXQvcHVyZWpzL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGFBQUE7RUFDQSxzQkFBQTtBQ0NGOztBREVBO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0VBQ0Esc0JBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGFBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtBQ0NGOztBREVBO0VBQ0Usd0JBQUE7RUFDQSxZQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7RUFDQSxjQUFBO0FDQ0Y7O0FERUE7RUFDRSxrQkFBQTtFQUNBLFlBQUE7RUFDQSxXQUFBO0FDQ0Y7O0FERUE7RUFDRSxZQUFBO0VBQ0EsZ0JBQUE7RUFDQSxrQkFBQTtBQ0NGO0FEQ0U7RUFDRSxrQkFBQTtFQUNBLHdDQUFBO0VBQ0EsY0FBQTtFQUNBLFdBQUE7RUFDQSxnQkFBQTtFQUNBLFdBQUE7QUNDSjtBRENJO0VBQ0UsU0FBQTtFQUNBLFlBQUE7RUFDQSxlQUFBO0VBQ0EsY0FBQTtFQUNBLHVCQUFBO0VBQ0EsbUJBQUE7QUNDTjtBREVJO0VBQ0UsU0FBQTtFQUNBLGtCQUFBO0VBQ0EsV0FBQTtBQ0FOO0FER0k7RUFDRSxlQUFBO0VBQ0EsWUFBQTtBQ0ROO0FESUk7RUFDRSxtQkFBQTtBQ0ZOO0FESU07RUFDRSxtQkFBQTtBQ0ZSO0FETUk7RUFDRSxtQkFBQTtBQ0pOO0FETU07RUFDRSxtQkFBQTtBQ0pSO0FEUUk7RUFDRSxtQkFBQTtBQ05OO0FEUU07RUFDRSxtQkFBQTtBQ05SO0FEVUk7RUFDRSxtQkFBQTtBQ1JOO0FEVU07RUFDRSxtQkFBQTtBQ1JSO0FEWUk7RUFDRSxtQkFBQTtBQ1ZOO0FEWU07RUFDRSxtQkFBQTtBQ1ZSIiwiZmlsZSI6IkRhdGFWaWV3cy9UcmVsbGlzL1RyZWxsaXNXaXRoR3JpZExheW91dC9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGZsb2F0OiByaWdodDtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIGZsZXgtZ3JvdzogMDtcbiAgZmxleC1zaHJpbms6IDA7XG59XG5cbi5ncmlkIHtcbiAgd2lkdGg6IGNhbGMoMTAwJSAtIDIwcHgpO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG4gIG1hcmdpbjogMCAxMHB4O1xufVxuXG4uZW1wbG95ZWUtcGhvdG8ge1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIGhlaWdodDogMzJweDtcbiAgd2lkdGg6IDMycHg7XG59XG5cbi5ncm91cC1pdGVtLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwJTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lciB7XG4gICAgYm9yZGVyLXJhZGl1czogNHB4O1xuICAgIGJveC1zaGFkb3c6IDAgM3B4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gICAgY29sb3I6ICNmMWYxZjE7XG4gICAgaGVpZ2h0OiA5NSU7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBtYXJnaW46IDVweDtcblxuICAgIC5ncm91cC1pdGVtLXRpdGxlIHtcbiAgICAgIGJvcmRlcjogMDtcbiAgICAgIGNvbG9yOiB3aGl0ZTtcbiAgICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICAgIHBhZGRpbmc6IDAuNGVtO1xuICAgICAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gICAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIH1cblxuICAgIC5ncm91cC1waG90by1jb250YWluZXIge1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgcmlnaHQ6IDEwcHg7XG4gICAgfVxuXG4gICAgLmdyb3VwLWl0ZW0tZGVzY3JpcHRpb24ge1xuICAgICAgZm9udC1zaXplOiAxMHB4O1xuICAgICAgcGFkZGluZzogOHB4O1xuICAgIH1cblxuICAgICYuZmluaXNoIHtcbiAgICAgIGJhY2tncm91bmQ6ICM5ZWM3Yzk7XG5cbiAgICAgIC5ncm91cC1pdGVtLXRpdGxlIHtcbiAgICAgICAgYmFja2dyb3VuZDogIzVjOTg5YjtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmLmVpZ2h0eS1wZXIge1xuICAgICAgYmFja2dyb3VuZDogbGlnaHRlbigjODU2MzhkLCAxNSUpO1xuXG4gICAgICAuZ3JvdXAtaXRlbS10aXRsZSB7XG4gICAgICAgIGJhY2tncm91bmQ6ICM4NTYzOGQ7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJi5maWZ0eS1wZXIge1xuICAgICAgYmFja2dyb3VuZDogI2ExOWZiZTtcblxuICAgICAgLmdyb3VwLWl0ZW0tdGl0bGUge1xuICAgICAgICBiYWNrZ3JvdW5kOiAjNmM2YTkxO1xuICAgICAgfVxuICAgIH1cblxuICAgICYudGhpcnR5LXBlciB7XG4gICAgICBiYWNrZ3JvdW5kOiAjYWE4OTk1O1xuXG4gICAgICAuZ3JvdXAtaXRlbS10aXRsZSB7XG4gICAgICAgIGJhY2tncm91bmQ6ICM4ZTVhNmQ7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJi5zdGFydCB7XG4gICAgICBiYWNrZ3JvdW5kOiAjOWViM2M5O1xuXG4gICAgICAuZ3JvdXAtaXRlbS10aXRsZSB7XG4gICAgICAgIGJhY2tncm91bmQ6ICM1ZDg5Yjc7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iLCIubWFpbi1jb250YWluZXIge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBkaXNwbGF5OiBmbGV4O1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBmbG9hdDogcmlnaHQ7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBwYWRkaW5nOiAxMHB4O1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xufVxuXG4uZ3JpZCB7XG4gIHdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4KTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xuICBtYXJnaW46IDAgMTBweDtcbn1cblxuLmVtcGxveWVlLXBob3RvIHtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBoZWlnaHQ6IDMycHg7XG4gIHdpZHRoOiAzMnB4O1xufVxuXG4uZ3JvdXAtaXRlbS1jb250YWluZXIge1xuICBoZWlnaHQ6IDEwMCU7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cbi5ncm91cC1pdGVtLWNvbnRhaW5lciAuZ3JvdXAtaXRlbS1jb250YWluZXItaW5uZXIge1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIGJveC1zaGFkb3c6IDAgM3B4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIGNvbG9yOiAjZjFmMWYxO1xuICBoZWlnaHQ6IDk1JTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgbWFyZ2luOiA1cHg7XG59XG4uZ3JvdXAtaXRlbS1jb250YWluZXIgLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyIC5ncm91cC1pdGVtLXRpdGxlIHtcbiAgYm9yZGVyOiAwO1xuICBjb2xvcjogd2hpdGU7XG4gIGZvbnQtc2l6ZTogMTRweDtcbiAgcGFkZGluZzogMC40ZW07XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lciAuZ3JvdXAtcGhvdG8tY29udGFpbmVyIHtcbiAgYm90dG9tOiAwO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAxMHB4O1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lciAuZ3JvdXAtaXRlbS1kZXNjcmlwdGlvbiB7XG4gIGZvbnQtc2l6ZTogMTBweDtcbiAgcGFkZGluZzogOHB4O1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lci5maW5pc2gge1xuICBiYWNrZ3JvdW5kOiAjOWVjN2M5O1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lci5maW5pc2ggLmdyb3VwLWl0ZW0tdGl0bGUge1xuICBiYWNrZ3JvdW5kOiAjNWM5ODliO1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lci5laWdodHktcGVyIHtcbiAgYmFja2dyb3VuZDogI2E5OGRhZjtcbn1cbi5ncm91cC1pdGVtLWNvbnRhaW5lciAuZ3JvdXAtaXRlbS1jb250YWluZXItaW5uZXIuZWlnaHR5LXBlciAuZ3JvdXAtaXRlbS10aXRsZSB7XG4gIGJhY2tncm91bmQ6ICM4NTYzOGQ7XG59XG4uZ3JvdXAtaXRlbS1jb250YWluZXIgLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyLmZpZnR5LXBlciB7XG4gIGJhY2tncm91bmQ6ICNhMTlmYmU7XG59XG4uZ3JvdXAtaXRlbS1jb250YWluZXIgLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyLmZpZnR5LXBlciAuZ3JvdXAtaXRlbS10aXRsZSB7XG4gIGJhY2tncm91bmQ6ICM2YzZhOTE7XG59XG4uZ3JvdXAtaXRlbS1jb250YWluZXIgLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyLnRoaXJ0eS1wZXIge1xuICBiYWNrZ3JvdW5kOiAjYWE4OTk1O1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lci50aGlydHktcGVyIC5ncm91cC1pdGVtLXRpdGxlIHtcbiAgYmFja2dyb3VuZDogIzhlNWE2ZDtcbn1cbi5ncm91cC1pdGVtLWNvbnRhaW5lciAuZ3JvdXAtaXRlbS1jb250YWluZXItaW5uZXIuc3RhcnQge1xuICBiYWNrZ3JvdW5kOiAjOWViM2M5O1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lci5zdGFydCAuZ3JvdXAtaXRlbS10aXRsZSB7XG4gIGJhY2tncm91bmQ6ICM1ZDg5Yjc7XG59Il19 */