Multiple Layout

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

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 | 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: 'GrapeCity-Internal-Use-Only,GrapeCity,E195393772372914#B0KV4Ny56Vr5Wb7w6buJWeGRWb4NXUnNXRlFWWXl6SoN5VzVkYslmQ95WTENkTllVQzd4QhpEejdDNJZlWOp6M7oERQNnWspkaaB5QMhnR7dmUkRnVJR4L5cHTKNkZZdDbRBzZIxmSSR6NrpVQaVUQrBlc6ImYysSd4UlUEZGbw2kMl9UOzQVMId6ZXtUN83CO5RzaZt4VY5kM5pkUGpUUUV7UExUeGpUdTV5dFJ4bPhTc8pGeXJHWrkzNlFzdUtWTr5UQDdVckdGbSVUWr2yMPNzctZVRxEEW9lEbsZHUKJnVaRXT5p6Z0tWMqJGVrtSTIZnaopGSWZXbVNjY0hzQB5We4dnUr3ER8MkI0IyUiwiIGZUNwEkN5MjI0ICSiwSM9ETO6czNygTM0IicfJye#4Xfd5nIZRVV9IiOiMkIsISM6ByUKN7dllmVhRXYEJiOi8kI1tlOiQmcQJCLiEDMzATOwAyMwgDMwIDMyIiOiQncDJCLiI7au26YukHdpNWZwFmcn9iKsAnau26YukHdpNWZwFmcn9iKs86Yu46bj9Se4l6YlBXYydmLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLt36YukHdpNWZwFmcn9iKiojIz5GRiwiI9RXaDVGchJ7RiojIh94QiwSZ5JHd0ICb6VkIsICNxkjM7MjM7czM9MTN9EjI0ICZJJye0ICRiwiI34zZN3yZGNlUnJDe5wkQPVlcBh7SppmUNBlU9dWS7J4ZMRES4MTZkRXTxM7Uq5GeQdHcyFHVup6dQd6ZDpEVrNDSh9kbNdzZrl4dwdPQ', 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; 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== */