Revenue Breakdown

This example shows how to display hierarchical data, such as a revenue breakdown, in the card layout using a tree column.

This example shows how to display hierarchical data, such as a revenue breakdown, in the card layout using a tree column. The layout can have three different orientations to fit effectively into your application: left, center, and right. The default card layout engine provides an option called hierarchy in which you can configure the hierarchical information for your data. For example, hierarchy: The 'parentField' and 'keyField' in hierarchy.descriptor are two key settings that help the grid build data items as a tree: 'parentField' indicates that the parent of each data record is stored in this property 'keyField' is the unique property that is used to find its parent item.
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/DataViews/Card/RevenueBreakdown/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="tree, treecard, tree card, hierarchy, hierarchical, parent child, chart" /> <meta name="description" content="This example shows how to display hierarchical data, such as a revenue breakdown, in the card layout using a tree column." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Revenue Breakdown | 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.cardlayout.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.core.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.cardlayout.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> <template id="card-template"> <div class="v-container"> <div class="c-container"> <div> <div class="project-name" data-column="name"></div> <div class="project-overall"> <div class="overall-revenue"> <div class="revenue-unit">$</div> <div class="revenue-number" data-column="totalSales"></div> </div> <div class="overall-growth"> <div class="growth-content" data-column="growth"></div> <div class="growth-unit">of last year</div> </div> </div> <div class="project-history"> <div class="history-title">Annual Revenue</div> <div class="history-chart" data-column="barChart"></div> </div> </div> </div> </div> </template> <div class="main-container"> <div class="sample-options"> <div class="btn-group" role="group"> <button id="left" class="btn btn-default"> Left </button> <button id="center" class="btn btn-default active"> Center </button> <button id="right" class="btn btn-default"> Right </button> </div> </div> <div class="outer"> <div class="inner"> <div id="grid" class="grid"></div> </div> </div> </div> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </body> </html>
window.ColumnSparkline = GC.DataViews.ColumnSparkline; var cols = [ { id: 'id', dataField: 'id', visible: false, }, { id: 'parent', dataField: 'parent', visible: false, }, { id: 'name', dataField: 'name', }, { id: 'totalSales', dataField: '=sumx(hierarchy.children(true, true), [sales])', format: '#,##0', }, { id: 'totalSalesLastYear', dataField: '=sumx(hierarchy.children(true, true), [salesLastYear])', }, { id: 'totalSalesTwoYearBefore', dataField: '=sumx(hierarchy.children(true, true), [salesTwoYearBefore])', }, { id: 'totalSalesThreeYearBefore', dataField: '=sumx(hierarchy.children(true, true), [salesThreeYearBefore])', }, { id: 'growth', dataField: '=rounddown(([totalSales] - [totalSalesLastYear]) / [totalSalesLastYear] * 100, 2)', presenter: '{{?it.growth>=0}}<span class="growth-positive">+{{=it.growth}}%</span>{{??}}<span class="growth-negative">{{=it.growth}}%</span>{{?}}', }, { id: 'barChart', asyncRender: renderSparkline, }, { id: 'sales', dataField: 'sales', }, { id: 'salesLastYear', dataField: 'salesLastYear', }, { id: 'salesTwoYearBefore', dataField: 'salesTwoYearBefore', }, { id: 'salesThreeYearBefore', dataField: 'salesThreeYearBefore', }, ]; function renderSparkline(dataItem, container) { var names = ['totalSalesThreeYearBefore', 'totalSalesTwoYearBefore', 'totalSalesLastYear', 'totalSales']; var item = dataItem && names.map(function (name) { return dataItem[name]; }); if (item) { var sparkline = new window.ColumnSparkline({ values: item, setting: { minAxisType: 2, manualMin: 0, }, }); sparkline.paint(container); } } var dataView = new GC.DataViews.DataView( document.getElementById('grid'), data, cols, new GC.DataViews.CardLayout({ cardHeight: 240, cardWidth: 280, rowTemplate: '#card-template', hierarchy: { keyField: 'id', parentField: 'parent', collapsed: false, column: 'department', alignment: 'center', lineLength: 30, footer: { visible: false, }, }, }) ); function changeAlignment(name) { $('.sample-options .btn-group .btn').removeClass('active'); $('#'.concat(name)).addClass('active'); dataView.options.hierarchy.alignment = name; dataView.invalidate(); } $('#left').click(changeAlignment.bind(null, 'left')); $('#center').click(changeAlignment.bind(null, 'center')); $('#right').click(changeAlignment.bind(null, 'right'));
// revenue breakdown var data = [ { id: 1, name: 'Retail Sales', parent: null, }, { id: 2, name: 'Product', parent: 1, }, { id: 3, name: 'Software', sales: 1762000, salesLastYear: 1600000, salesTwoYearBefore: 1480300, salesThreeYearBefore: 1404000, parent: 2, }, { id: 4, name: 'Hardware', sales: 783000, salesLastYear: 700000, salesTwoYearBefore: 680000, salesThreeYearBefore: 580000, parent: 2, }, { id: 5, name: 'Services', parent: 1, }, { id: 6, name: 'Consulting', sales: 1000000, salesLastYear: 900000, salesTwoYearBefore: 800000, salesThreeYearBefore: 700000, parent: 5, }, { id: 7, name: 'Support', sales: 240000, salesLastYear: 250000, salesTwoYearBefore: 160000, salesThreeYearBefore: 120000, parent: 5, }, { id: 8, name: 'Design', sales: 90000, salesLastYear: 70000, salesTwoYearBefore: 20000, salesThreeYearBefore: 0, parent: 5, }, ];
#card-template { display: none; } .main-container { display: flex; flex-direction: column; width: 100%; height: 100%; } .sample-options { flex-grow: 0; flex-shrink: 0; display: flex; background: #fbfbfb; box-sizing: border-box; float: right; overflow: hidden; padding: 10px; } .outer { flex-grow: 1; flex-shrink: 1; width: 100%; height: 100%; overflow: scroll; position: relative; } .inner { height: 100%; position: relative; width: 1410px; } .grid { height: 100%; width: 100%; } .gc-viewport { background: url("/dataviewsjs/demos/images/grid-background.png"); } .grid .gc-cell.c1 { text-align: right; justify-content: flex-end; } /*card styles*/ /*virtual container*/ .v-container { height: 100%; padding: 30px 20px; width: 100%; } /*card container*/ .c-container { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); height: 100%; padding: 10px; width: 100%; } .c-container .gc-cell { text-align: center; justify-content: center; } .c-container .gc-cell.revenue-number { color: #000; display: inline-block; font-size: 24px; text-align: left; vertical-align: middle; width: 130px; } .project-name { font-size: 18px; font-weight: bold; justify-content: center; } .project-overall { color: #a0a0a0; height: 40px; margin: 10px 0; vertical-align: middle; } .overall-revenue { display: inline-block; vertical-align: middle; } .revenue-unit { display: inline-block; font-size: 14px; margin-right: 2px; vertical-align: middle; } .overall-growth { display: inline-block; height: 40px; text-align: right; vertical-align: middle; } .overall-growth .gc-cell { text-align: right; } .growth-positive { color: #76b150; } .growth-negative { color: #ab5656; } .history-title { border-top: 1px solid #e0e0e0; color: #b8b8b8; text-align: center; } .history-chart { height: 56px; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9DYXJkL1JldmVudWVCcmVha2Rvd24vcHVyZWpzL3N0eWxlcy5zY3NzIiwiRGF0YVZpZXdzL0NhcmQvUmV2ZW51ZUJyZWFrZG93bi9wdXJlanMvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGFBQUE7QUNDRjs7QURFQTtFQUNFLGFBQUE7RUFDQSxzQkFBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0FDQ0Y7O0FERUE7RUFDRSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGFBQUE7RUFDQSxtQkFBQTtFQUNBLHNCQUFBO0VBQ0EsWUFBQTtFQUNBLGdCQUFBO0VBQ0EsYUFBQTtBQ0NGOztBREVBO0VBQ0UsWUFBQTtFQUNBLGNBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGdCQUFBO0VBQ0Esa0JBQUE7QUNDRjs7QURFQTtFQUNFLFlBQUE7RUFDQSxrQkFBQTtFQUNBLGFBQUE7QUNDRjs7QURFQTtFQUNFLFlBQUE7RUFDQSxXQUFBO0FDQ0Y7O0FERUE7RUFDRSxnRUFBQTtBQ0NGOztBREVBO0VBQ0UsaUJBQUE7RUFDQSx5QkFBQTtBQ0NGOztBREVBLGNBQUE7QUFDQSxvQkFBQTtBQUNBO0VBQ0UsWUFBQTtFQUNBLGtCQUFBO0VBQ0EsV0FBQTtBQ0NGOztBREVBLGlCQUFBO0FBQ0E7RUFDRSxzQkFBQTtFQUNBLHlCQUFBO0VBQ0Esa0JBQUE7RUFDQSx3Q0FBQTtFQUNBLFlBQUE7RUFDQSxhQUFBO0VBQ0EsV0FBQTtBQ0NGO0FEQ0U7RUFDRSxrQkFBQTtFQUNBLHVCQUFBO0FDQ0o7QURDSTtFQUNFLFdBQUE7RUFDQSxxQkFBQTtFQUNBLGVBQUE7RUFDQSxnQkFBQTtFQUNBLHNCQUFBO0VBQ0EsWUFBQTtBQ0NOOztBRElBO0VBQ0UsZUFBQTtFQUNBLGlCQUFBO0VBQ0EsdUJBQUE7QUNERjs7QURJQTtFQUNFLGNBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLHNCQUFBO0FDREY7O0FESUE7RUFDRSxxQkFBQTtFQUNBLHNCQUFBO0FDREY7O0FESUE7RUFDRSxxQkFBQTtFQUNBLGVBQUE7RUFDQSxpQkFBQTtFQUNBLHNCQUFBO0FDREY7O0FESUE7RUFDRSxxQkFBQTtFQUNBLFlBQUE7RUFDQSxpQkFBQTtFQUNBLHNCQUFBO0FDREY7O0FESUE7RUFDRSxpQkFBQTtBQ0RGOztBRElBO0VBQ0UsY0FBQTtBQ0RGOztBRElBO0VBQ0UsY0FBQTtBQ0RGOztBRElBO0VBQ0UsNkJBQUE7RUFDQSxjQUFBO0VBQ0Esa0JBQUE7QUNERjs7QURJQTtFQUNFLFlBQUE7QUNERiIsImZpbGUiOiJEYXRhVmlld3MvQ2FyZC9SZXZlbnVlQnJlYWtkb3duL3B1cmVqcy9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiI2NhcmQtdGVtcGxhdGUge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4ubWFpbi1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBkaXNwbGF5OiBmbGV4O1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBmbG9hdDogcmlnaHQ7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBhZGRpbmc6IDEwcHg7XG59XG5cbi5vdXRlciB7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG92ZXJmbG93OiBzY3JvbGw7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cblxuLmlubmVyIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxNDEwcHg7XG59XG5cbi5ncmlkIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogMTAwJTtcbn1cblxuLmdjLXZpZXdwb3J0IHtcbiAgYmFja2dyb3VuZDogdXJsKCcvZGF0YXZpZXdzanMvZGVtb3MvaW1hZ2VzL2dyaWQtYmFja2dyb3VuZC5wbmcnKTtcbn1cblxuLmdyaWQgLmdjLWNlbGwuYzEge1xuICB0ZXh0LWFsaWduOiByaWdodDtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbn1cblxuLypjYXJkIHN0eWxlcyovXG4vKnZpcnR1YWwgY29udGFpbmVyKi9cbi52LWNvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwJTtcbiAgcGFkZGluZzogMzBweCAyMHB4O1xuICB3aWR0aDogMTAwJTtcbn1cblxuLypjYXJkIGNvbnRhaW5lciovXG4uYy1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuICBib3JkZXI6IDFweCBzb2xpZCAjZTBlMGUwO1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIGJveC1zaGFkb3c6IDAgMCAxMHB4IHJnYmEoMCwgMCwgMCwgMC4wNSk7XG4gIGhlaWdodDogMTAwJTtcbiAgcGFkZGluZzogMTBweDtcbiAgd2lkdGg6IDEwMCU7XG5cbiAgLmdjLWNlbGwge1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuICAgICYucmV2ZW51ZS1udW1iZXIge1xuICAgICAgY29sb3I6ICMwMDA7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICB0ZXh0LWFsaWduOiBsZWZ0O1xuICAgICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgICAgIHdpZHRoOiAxMzBweDtcbiAgICB9XG4gIH1cbn1cblxuLnByb2plY3QtbmFtZSB7XG4gIGZvbnQtc2l6ZTogMThweDtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xufVxuXG4ucHJvamVjdC1vdmVyYWxsIHtcbiAgY29sb3I6ICNhMGEwYTA7XG4gIGhlaWdodDogNDBweDtcbiAgbWFyZ2luOiAxMHB4IDA7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG59XG5cbi5vdmVyYWxsLXJldmVudWUge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG59XG5cbi5yZXZlbnVlLXVuaXQge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGZvbnQtc2l6ZTogMTRweDtcbiAgbWFyZ2luLXJpZ2h0OiAycHg7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG59XG5cbi5vdmVyYWxsLWdyb3d0aCB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgaGVpZ2h0OiA0MHB4O1xuICB0ZXh0LWFsaWduOiByaWdodDtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLm92ZXJhbGwtZ3Jvd3RoIC5nYy1jZWxsIHtcbiAgdGV4dC1hbGlnbjogcmlnaHQ7XG59XG5cbi5ncm93dGgtcG9zaXRpdmUge1xuICBjb2xvcjogIzc2YjE1MDtcbn1cblxuLmdyb3d0aC1uZWdhdGl2ZSB7XG4gIGNvbG9yOiAjYWI1NjU2O1xufVxuXG4uaGlzdG9yeS10aXRsZSB7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCAjZTBlMGUwO1xuICBjb2xvcjogI2I4YjhiODtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufVxuXG4uaGlzdG9yeS1jaGFydCB7XG4gIGhlaWdodDogNTZweDtcbn1cbiIsIiNjYXJkLXRlbXBsYXRlIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cblxuLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcbiAgZGlzcGxheTogZmxleDtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZmxvYXQ6IHJpZ2h0O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwYWRkaW5nOiAxMHB4O1xufVxuXG4ub3V0ZXIge1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBvdmVyZmxvdzogc2Nyb2xsO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi5pbm5lciB7XG4gIGhlaWdodDogMTAwJTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogMTQxMHB4O1xufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG59XG5cbi5nYy12aWV3cG9ydCB7XG4gIGJhY2tncm91bmQ6IHVybChcIi9kYXRhdmlld3Nqcy9kZW1vcy9pbWFnZXMvZ3JpZC1iYWNrZ3JvdW5kLnBuZ1wiKTtcbn1cblxuLmdyaWQgLmdjLWNlbGwuYzEge1xuICB0ZXh0LWFsaWduOiByaWdodDtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbn1cblxuLypjYXJkIHN0eWxlcyovXG4vKnZpcnR1YWwgY29udGFpbmVyKi9cbi52LWNvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwJTtcbiAgcGFkZGluZzogMzBweCAyMHB4O1xuICB3aWR0aDogMTAwJTtcbn1cblxuLypjYXJkIGNvbnRhaW5lciovXG4uYy1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuICBib3JkZXI6IDFweCBzb2xpZCAjZTBlMGUwO1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIGJveC1zaGFkb3c6IDAgMCAxMHB4IHJnYmEoMCwgMCwgMCwgMC4wNSk7XG4gIGhlaWdodDogMTAwJTtcbiAgcGFkZGluZzogMTBweDtcbiAgd2lkdGg6IDEwMCU7XG59XG4uYy1jb250YWluZXIgLmdjLWNlbGwge1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xufVxuLmMtY29udGFpbmVyIC5nYy1jZWxsLnJldmVudWUtbnVtYmVyIHtcbiAgY29sb3I6ICMwMDA7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgZm9udC1zaXplOiAyNHB4O1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICB3aWR0aDogMTMwcHg7XG59XG5cbi5wcm9qZWN0LW5hbWUge1xuICBmb250LXNpemU6IDE4cHg7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cblxuLnByb2plY3Qtb3ZlcmFsbCB7XG4gIGNvbG9yOiAjYTBhMGEwO1xuICBoZWlnaHQ6IDQwcHg7XG4gIG1hcmdpbjogMTBweCAwO1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xufVxuXG4ub3ZlcmFsbC1yZXZlbnVlIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xufVxuXG4ucmV2ZW51ZS11bml0IHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBmb250LXNpemU6IDE0cHg7XG4gIG1hcmdpbi1yaWdodDogMnB4O1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xufVxuXG4ub3ZlcmFsbC1ncm93dGgge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGhlaWdodDogNDBweDtcbiAgdGV4dC1hbGlnbjogcmlnaHQ7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG59XG5cbi5vdmVyYWxsLWdyb3d0aCAuZ2MtY2VsbCB7XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xufVxuXG4uZ3Jvd3RoLXBvc2l0aXZlIHtcbiAgY29sb3I6ICM3NmIxNTA7XG59XG5cbi5ncm93dGgtbmVnYXRpdmUge1xuICBjb2xvcjogI2FiNTY1Njtcbn1cblxuLmhpc3RvcnktdGl0bGUge1xuICBib3JkZXItdG9wOiAxcHggc29saWQgI2UwZTBlMDtcbiAgY29sb3I6ICNiOGI4Yjg7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cblxuLmhpc3RvcnktY2hhcnQge1xuICBoZWlnaHQ6IDU2cHg7XG59Il19 */