Multiple Layout

This demo shows how to visualize the data with different layouts.

<p>This demo shows how to visualize the data with different layouts.</p> <p>Try changing the view to see how the same data is displayed differently in each.</p>
<!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 | 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.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" /> <!-- 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.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"> <!-- 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="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; } .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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNob3djYXNlL011bHRpcGxlTGF5b3V0L3B1cmVqcy9zdHlsZXMuc2NzcyIsIlNob3djYXNlL011bHRpcGxlTGF5b3V0L3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsNkNBQUE7QUNDRjs7QURFQTtFQUNFLGdDQUFBO0FDQ0Y7O0FERUE7RUFDRSxZQUFBO0FDQ0Y7O0FERUE7RUFDRSxzQkFBQTtBQ0NGOztBREVBO0VBQ0UsYUFBQTtFQUNBLHNCQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLFdBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGFBQUE7RUFDQSxtQkFBQTtFQUNBLHNCQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNDRjtBRENFO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsdUJBQUE7RUFDQSxZQUFBO0FDQ0o7QURFRTtFQUNFLGVBQUE7RUFDQSxnQkFBQTtBQ0FKO0FER0U7RUFDRSxZQUFBO0VBQ0Esa0JBQUE7QUNESjtBRElFOztFQUVFLFlBQUE7QUNGSjs7QURNQTtFQUNFLFdBQUE7RUFDQSxZQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNIRjs7QURNQTtFQUNFLFdBQUE7RUFDQSxZQUFBO0VBQ0Esa0JBQUE7RUFDQSxnQkFBQTtFQUNBLHlCQUFBO0VBQ0EsaUJBQUE7QUNIRjs7QURNQTtFQUNFLFVBQUE7QUNIRjs7QURNQTtFQUNFLFVBQUE7QUNIRjs7QURNQTtFQUNFLHFCQUFBO0FDSEY7O0FETUE7RUFDRSxZQUFBO0VBQ0EscUJBQUE7QUNIRjs7QURNQTtFQUNFLFlBQUE7QUNIRjs7QURNQTtFQUNFLG1CQUFBO0FDSEY7O0FETUE7RUFDRSxZQUFBO0VBQ0EsV0FBQTtFQUNBLG1CQUFBO0VBQ0EsbUJBQUE7RUFDQSx1QkFBQTtFQUNBLGNBQUE7RUFDQSxlQUFBO0VBQ0EsZ0JBQUE7QUNIRjs7QURNQTs7RUFFRSxZQUFBO0FDSEY7O0FETUE7RUFDRSxrQkFBQTtFQUNBLGFBQUE7RUFDQSxZQUFBO0FDSEY7O0FETUE7RUFDRSxZQUFBO0FDSEY7O0FETUE7RUFDRSxlQUFBO0VBQ0EsZ0JBQUE7QUNIRjs7QURNQTtFQUNFLFlBQUE7RUFDQSxlQUFBO0VBQ0EsZ0JBQUE7RUFDQSxrQkFBQTtBQ0hGOztBRE1BO0VBQ0UsV0FBQTtFQUNBLGtCQUFBO0VBQ0EsZ0JBQUE7RUFDQSxXQUFBO0VBQ0EsZ0JBQUE7RUFDQSx3Q0FBQTtBQ0hGOztBRE1BO0VBQ0UsbUJBQUE7QUNIRjs7QURNQTtFQUNFLG1CQUFBO0FDSEY7O0FETUE7RUFDRSxtQkFBQTtBQ0hGOztBRE1BO0VBQ0UsbUJBQUE7QUNIRjs7QURNQTtFQUNFLG1CQUFBO0FDSEY7O0FETUE7RUFDRSxtQkFBQTtBQ0hGOztBRE1BO0VBQ0UsbUJBQUE7QUNIRjs7QURNQTtFQUNFLG1CQUFBO0FDSEY7O0FETUE7RUFDRSxtQkFBQTtBQ0hGOztBRE1BO0VBQ0UsbUJBQUE7QUNIRjs7QURNQTtFQUNFLGlCQUFBO0FDSEY7O0FETUE7RUFDRSxxQkFBQTtBQ0hGIiwiZmlsZSI6IlNob3djYXNlL011bHRpcGxlTGF5b3V0L3B1cmVqcy9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiKiB7XG4gIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwKTtcbn1cblxuLmdjLXJvdyB7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZjJmMmYyO1xufVxuXG4uZ2MtcG9wdXAtZWRpdGluZy1hcmVhIHtcbiAgd2lkdGg6IDQ1NHB4O1xufVxuXG4uZ2MtZ3JpZCB7XG4gIGJvcmRlcjogMXB4IG5vbmUgd2hpdGU7XG59XG5cbi5tYWluLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IGF1dG87XG4gIG92ZXJmbG93OiBhdXRvO1xuICBwYWRkaW5nOiAxMHB4O1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xuXG4gIC5idG4ge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBoZWlnaHQ6IDMycHg7XG4gIH1cblxuICAub3B0aW9uLXJvdyB7XG4gICAgZm9udC1zaXplOiAxNHB4O1xuICAgIG1hcmdpbi10b3A6IDEwcHg7XG4gIH1cblxuICAjYnRuLWdyb3VwLWthbmJhbiB7XG4gICAgaGVpZ2h0OiBhdXRvO1xuICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgfVxuXG4gICNidG4tZGVwYXJ0bWVudCxcbiAgI2J0bi11c2VyIHtcbiAgICB3aWR0aDogMTIwcHg7XG4gIH1cbn1cblxuLmdyaWQge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xufVxuXG4uZW1wbG95ZWUtcGhvdG8ge1xuICB3aWR0aDogNDBweDtcbiAgaGVpZ2h0OiA0MHB4O1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIG1hcmdpbi1sZWZ0OiA1cHg7XG4gIGJvcmRlcjogc29saWQgMXB4ICNlMGUwZTA7XG4gIG1hcmdpbi1yaWdodDogNXB4O1xufVxuXG4udGltZWxpbmUtbGVmdHNoYXBlLWdyb3VwIHtcbiAgd2lkdGg6IDBweDtcbn1cblxuLnRpbWVsaW5lLXJpZ2h0c2hhcGUtZ3JvdXAge1xuICB3aWR0aDogMHB4O1xufVxuXG4udGltZWxpbmVMZWZ0QnRucyB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbn1cblxuLnRpbWVsaW5lUmlnaHRCdG5zIHtcbiAgZmxvYXQ6IHJpZ2h0O1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG59XG5cbi5nYy1jZWxsLWJvcmRlciB7XG4gIGJvcmRlcjogbm9uZTtcbn1cblxuLmdjLWdyb3VwLWhlYWRlci1yb3cge1xuICBiYWNrZ3JvdW5kOiBpbml0aWFsO1xufVxuXG4uZ3JvdXAtaXRlbS10aXRsZSB7XG4gIGJvcmRlcjogbm9uZTtcbiAgY29sb3I6ICMyMjI7XG4gIGJhY2tncm91bmQ6ICNjNDhjNDM7XG4gIHdoaXRlLXNwYWNlOiBub3JtYWw7XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuICBwYWRkaW5nOiAwLjRlbTtcbiAgZm9udC1zaXplOiAxM3B4O1xuICBmb250LXdlaWdodDogNjAwO1xufVxuXG4uZ3JvdXAtcGhvdG8tY29udGFpbmVyLFxuLmdyb3VwLWl0ZW0tZGVzY3JpcHRpb24ge1xuICBib3JkZXI6IG5vbmU7XG59XG5cbi5ncm91cC1waG90by1jb250YWluZXIge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGJvdHRvbTogMC40ZW07XG4gIHJpZ2h0OiAwLjRlbTtcbn1cblxuLmdyb3VwLWl0ZW0tZGVzY3JpcHRpb24ge1xuICBwYWRkaW5nOiA4cHg7XG59XG5cbi5nYy10cmVsbGlzLWdyb3VwLWhlYWRlci1pbm5lciB7XG4gIGZvbnQtc2l6ZTogMTJweDtcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbn1cblxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICBmb250LXNpemU6IDEycHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cblxuLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyIHtcbiAgaGVpZ2h0OiA5NSU7XG4gIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgY29sb3I6ICMyMjI7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG4gIGJveC1zaGFkb3c6IDAgM3B4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG59XG5cbi5maW5pc2gge1xuICBiYWNrZ3JvdW5kOiAjZDJmZmQxO1xufVxuXG4uZWlnaHR5LXBlciB7XG4gIGJhY2tncm91bmQ6ICNhMGZmOWQ7XG59XG5cbi5maWZ0eS1wZXIge1xuICBiYWNrZ3JvdW5kOiAjY2ZjZmZmO1xufVxuXG4udGhpcnR5LXBlciB7XG4gIGJhY2tncm91bmQ6ICM5OGQ4ZmY7XG59XG5cbi5zdGFydCB7XG4gIGJhY2tncm91bmQ6ICNmZmRkNjc7XG59XG5cbi5maW5pc2gtaGVhZCB7XG4gIGJhY2tncm91bmQ6ICM4N2ZmODQ7XG59XG5cbi5laWdodHktcGVyLWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjNzRkYzcyO1xufVxuXG4uZmlmdHktcGVyLWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjYTFhMWUyO1xufVxuXG4udGhpcnR5LXBlci1oZWFkIHtcbiAgYmFja2dyb3VuZDogIzRiYmNmZjtcbn1cblxuLnN0YXJ0LWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjZmZiNDAwO1xufVxuXG4udHJlbGxpcy1ncm91cGluZyAuZ2MtdHJlbGxpcy1ncm91cC1oZWFkZXIge1xuICBsaW5lLWhlaWdodDogMjRweDtcbn1cblxuLmdjLW1haW5saW5lIHtcbiAgcGFkZGluZzogMCAhaW1wb3J0YW50O1xufVxuIiwiKiB7XG4gIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwKTtcbn1cblxuLmdjLXJvdyB7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZjJmMmYyO1xufVxuXG4uZ2MtcG9wdXAtZWRpdGluZy1hcmVhIHtcbiAgd2lkdGg6IDQ1NHB4O1xufVxuXG4uZ2MtZ3JpZCB7XG4gIGJvcmRlcjogMXB4IG5vbmUgd2hpdGU7XG59XG5cbi5tYWluLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IGF1dG87XG4gIG92ZXJmbG93OiBhdXRvO1xuICBwYWRkaW5nOiAxMHB4O1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xufVxuLnNhbXBsZS1vcHRpb25zIC5idG4ge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgaGVpZ2h0OiAzMnB4O1xufVxuLnNhbXBsZS1vcHRpb25zIC5vcHRpb24tcm93IHtcbiAgZm9udC1zaXplOiAxNHB4O1xuICBtYXJnaW4tdG9wOiAxMHB4O1xufVxuLnNhbXBsZS1vcHRpb25zICNidG4tZ3JvdXAta2FuYmFuIHtcbiAgaGVpZ2h0OiBhdXRvO1xuICB2aXNpYmlsaXR5OiBoaWRkZW47XG59XG4uc2FtcGxlLW9wdGlvbnMgI2J0bi1kZXBhcnRtZW50LFxuLnNhbXBsZS1vcHRpb25zICNidG4tdXNlciB7XG4gIHdpZHRoOiAxMjBweDtcbn1cblxuLmdyaWQge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xufVxuXG4uZW1wbG95ZWUtcGhvdG8ge1xuICB3aWR0aDogNDBweDtcbiAgaGVpZ2h0OiA0MHB4O1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIG1hcmdpbi1sZWZ0OiA1cHg7XG4gIGJvcmRlcjogc29saWQgMXB4ICNlMGUwZTA7XG4gIG1hcmdpbi1yaWdodDogNXB4O1xufVxuXG4udGltZWxpbmUtbGVmdHNoYXBlLWdyb3VwIHtcbiAgd2lkdGg6IDBweDtcbn1cblxuLnRpbWVsaW5lLXJpZ2h0c2hhcGUtZ3JvdXAge1xuICB3aWR0aDogMHB4O1xufVxuXG4udGltZWxpbmVMZWZ0QnRucyB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbn1cblxuLnRpbWVsaW5lUmlnaHRCdG5zIHtcbiAgZmxvYXQ6IHJpZ2h0O1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG59XG5cbi5nYy1jZWxsLWJvcmRlciB7XG4gIGJvcmRlcjogbm9uZTtcbn1cblxuLmdjLWdyb3VwLWhlYWRlci1yb3cge1xuICBiYWNrZ3JvdW5kOiBpbml0aWFsO1xufVxuXG4uZ3JvdXAtaXRlbS10aXRsZSB7XG4gIGJvcmRlcjogbm9uZTtcbiAgY29sb3I6ICMyMjI7XG4gIGJhY2tncm91bmQ6ICNjNDhjNDM7XG4gIHdoaXRlLXNwYWNlOiBub3JtYWw7XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuICBwYWRkaW5nOiAwLjRlbTtcbiAgZm9udC1zaXplOiAxM3B4O1xuICBmb250LXdlaWdodDogNjAwO1xufVxuXG4uZ3JvdXAtcGhvdG8tY29udGFpbmVyLFxuLmdyb3VwLWl0ZW0tZGVzY3JpcHRpb24ge1xuICBib3JkZXI6IG5vbmU7XG59XG5cbi5ncm91cC1waG90by1jb250YWluZXIge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGJvdHRvbTogMC40ZW07XG4gIHJpZ2h0OiAwLjRlbTtcbn1cblxuLmdyb3VwLWl0ZW0tZGVzY3JpcHRpb24ge1xuICBwYWRkaW5nOiA4cHg7XG59XG5cbi5nYy10cmVsbGlzLWdyb3VwLWhlYWRlci1pbm5lciB7XG4gIGZvbnQtc2l6ZTogMTJweDtcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbn1cblxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICBmb250LXNpemU6IDEycHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cblxuLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyIHtcbiAgaGVpZ2h0OiA5NSU7XG4gIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgY29sb3I6ICMyMjI7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG4gIGJveC1zaGFkb3c6IDAgM3B4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG59XG5cbi5maW5pc2gge1xuICBiYWNrZ3JvdW5kOiAjZDJmZmQxO1xufVxuXG4uZWlnaHR5LXBlciB7XG4gIGJhY2tncm91bmQ6ICNhMGZmOWQ7XG59XG5cbi5maWZ0eS1wZXIge1xuICBiYWNrZ3JvdW5kOiAjY2ZjZmZmO1xufVxuXG4udGhpcnR5LXBlciB7XG4gIGJhY2tncm91bmQ6ICM5OGQ4ZmY7XG59XG5cbi5zdGFydCB7XG4gIGJhY2tncm91bmQ6ICNmZmRkNjc7XG59XG5cbi5maW5pc2gtaGVhZCB7XG4gIGJhY2tncm91bmQ6ICM4N2ZmODQ7XG59XG5cbi5laWdodHktcGVyLWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjNzRkYzcyO1xufVxuXG4uZmlmdHktcGVyLWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjYTFhMWUyO1xufVxuXG4udGhpcnR5LXBlci1oZWFkIHtcbiAgYmFja2dyb3VuZDogIzRiYmNmZjtcbn1cblxuLnN0YXJ0LWhlYWQge1xuICBiYWNrZ3JvdW5kOiAjZmZiNDAwO1xufVxuXG4udHJlbGxpcy1ncm91cGluZyAuZ2MtdHJlbGxpcy1ncm91cC1oZWFkZXIge1xuICBsaW5lLWhlaWdodDogMjRweDtcbn1cblxuLmdjLW1haW5saW5lIHtcbiAgcGFkZGluZzogMCAhaW1wb3J0YW50O1xufSJdfQ== */