Trellis with Grid Layout

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™.

<p>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.</p> <p>There are three primary parts that make this demo work:</p> <ul> <li>References to <strong>grid.js</strong> and <strong>trellis.js</strong> provide the core functionality.</li> <li>A row template is configured to format each row as a card.</li> <li>The <strong>groupStrategy: trellis</strong> option/value pair is used to set the group strategy.</li> </ul> <p>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.</p>
<!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 | GrapeCity 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" /> <!-- Google Tag Manager --> <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <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: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </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"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display:none;visibility:hidden" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <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 */