Server Side Sort and Filter

This demo shows the server side sorting and filtering in DataViews.

<p>This demo shows the server side sorting and filtering in DataViews.</p> <p>Local sort and filter only apply to the current page. If you want to arrange the data on the server, set the <strong>serverSideSort</strong> and <strong>serverSideFilter</strong> options to true.</p> <p>When server side sort or filter is applied, sort descriptors and filter descriptors are sent in the parameters of the loadRange callback.</p> <p>Sort descriptors (<strong>params.sort</strong>) is an array, which has its element made up of a string <strong>field</strong> and a boolean <strong>ascending</strong>.</p> <p>Filter descriptors (<strong>params.filter</strong>) contains a string <strong>field</strong>, a string <strong>operator</strong>, and an Array or any type <strong>value</strong>.</p> <p>Try sorting and filtering the data using the drop down menus above the grid.</p> <p><span style="color:#c7254e;font-style:italic;">This demo calls some API items from the internet, make sure your internet connection is working and runing this demo with HTTP or HTTPS protocol.</span></p>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/DataBinding/ServerSideSortAndFilter/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="filter, filtering" /> <meta name="description" content="This demo shows the server side sorting and filtering in DataViews." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Server Side Sort and Filter | Features | 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/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/pageui.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="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/lodash/lodash.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/js/pageui.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.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="option-row"> <label>Sort by country:</label> <select id="sort-selector"> <option value="none" selected>none</option> <option value="ascending">ascending</option> <option value="descending">descending</option> </select> </div> <div class="option-row"> <label>Filter by country:</label> <select id="filter-selector"> <option value="none" selected>none</option> <option value="United States">United States</option> <option value="Australia">Australia</option> <option value="United Kingdom">United Kingdom</option> <option value="Canada">Canada</option> <option value="France">France</option> <option value="Germany">Germany</option> </select> </div> </div> <div id="grid" class="grid"></div> <div id="page-nav" class="container"></div> </div> <script src="locale.js" type="text/javascript"></script> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </body> </html>
var cols = [ { id: 'id', caption: 'Order Id', dataField: 'Transaction_Id', dataType: 'number', allowEditing: false, }, { id: 'date', caption: 'Date', dataField: 'Transaction_Date', dataType: 'date', format: 'mm/dd/yyyy', width: 95, }, { id: 'product', caption: 'Product', dataField: 'Product', width: '*', minWidth: 290, }, { id: 'price', caption: 'Price', dataField: 'Price', dataType: 'number', width: 60, }, { id: 'quantity', caption: 'Qty', dataField: 'Quantity', dataType: 'number', width: 45, }, { id: 'paymentType', caption: 'Payment', dataField: 'Payment_Type', width: 95, }, { id: 'name', caption: 'Name', dataField: 'Name', width: 140, }, { id: 'city', caption: 'City', dataField: 'City', width: 125, }, { id: 'state', caption: 'State', dataField: 'State', width: 105, }, { id: 'country', caption: 'Country', dataField: 'Country', width: 125, }, ]; var layout = new GC.DataViews.GridLayout({ colWidth: 80, colHeaderHeight: 30, rowHeight: 38, pageSize: 10, }); var dataView = new GC.DataViews.DataView(document.getElementById('grid'), dataSource, cols, layout); PageUI.init(dataView.data.pageController); $('#sort-selector').on('change', onSelectChange); $('#filter-selector').on('change', onFilterChange); var sortValue = 'none'; var filterValue = 'none'; function onSelectChange(e) { var value = e.target.value; if (value !== sortValue) { sortValue = value; switch (sortValue) { case 'ascending': dataView.options.sorting = { field: 'country', ascending: true, }; break; case 'descending': dataView.options.sorting = { field: 'country', ascending: false, }; break; default: dataView.options.sorting = null; } } } function onFilterChange(e) { var value = e.target.value; if (value !== filterValue) { filterValue = value; dataView.options.filtering = filterValue === 'none' ? null : { field: 'country', operator: 'equal', value: value, }; } }
var baseUrl = ''.concat(process.env.SITE_ROOT, '/remotedata/api/records'); function getRecords(start, count, sort, filter) { var snippets = []; if (_.isArray(sort)) { _.forEach(sort, function(sortDescriptor) { snippets.push('sort='.concat(sortDescriptor.ascending ? '' : '-').concat(sortDescriptor.field.toLowerCase())); }); } if (_.isArray(filter)) { _.forEach(filter, function(filterDescriptor) { var value = filterDescriptor.value; var field = filterDescriptor.field.toLowerCase(); if (_.isArray(value)) { var tempArr = []; _.forEach(value, function(v) { tempArr.push(encodeURIComponent(''.concat(field, '=').concat(v))); }); snippets.push(tempArr.join('&&')); } else { snippets.push('filter='.concat(encodeURIComponent(''.concat(field, '=').concat(value)))); } }); } if (start !== undefined) { snippets.push('start='.concat(start)); } if (count !== undefined) { snippets.push('count='.concat(count)); } if (snippets.length > 0) { return ''.concat(baseUrl, '?').concat(snippets.join('&')); } return baseUrl; } var dataSource = { loadRange: function loadRange(params) { $.ajax({ url: getRecords( params.pageIndex ? params.pageSize * params.pageIndex : undefined, params.pageSize, params.sort, params.filter ), crossDomain: true, success: function success(result) { params.success(result.m_Item2, result.m_Item1); }, error: function error(xhr, status) { params.failed(); if (status !== 'abort') { alert(locale.loadFailed); } }, }); }, serverSideSort: true, serverSideFilter: true, };
var locale = { sortByCountry: 'Sort by country:', filterByCountry: 'Filter by country:', none: 'none', ascending: 'ascending', descending: 'descending', loadFailed: 'Failed to load data from remote web site.', };
.main-container { display: flex; flex-direction: column; width: 100%; height: 100%; } .main-container .sample-options { display: flex; background: #fbfbfb; box-sizing: border-box; overflow: hidden; padding: 10px; flex-grow: 0; flex-shrink: 0; } .main-container .sample-options .option-row { margin-right: 5px; } .main-container .sample-options .option-row label { margin-right: 5px; } .main-container #page-nav { overflow: hidden; } #grid, .grid { height: calc(100% - 52px - 42px); width: 100%; flex-grow: 1; flex-shrink: 1; } .gc-row { line-height: 36px; } #page-nav.container { border: solid rgba(0, 0, 0, 0.2); border-width: 0 1px 1px 1px; box-sizing: border-box; font-size: 16px; height: 42px; padding: 3px 0; text-align: left; width: 100%; flex-grow: 0; flex-shrink: 0; } #page-nav.container .page-part-left { display: inline-block; margin-left: 6px; vertical-align: middle; } #page-nav.container .page-part-right { display: inline-block; float: right; margin: 3px 6px; vertical-align: middle; } #page-nav.container .button { border: 1px solid transparent; border-radius: 4px; color: #000; padding: 6px 12px; transition: background-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } #page-nav.container .button:not(.intangible):hover { background-color: #d7d7d7; } #page-nav.container .content { padding: 6px 6px; } #page-nav.container .content input { font-size: 15px; width: 28px; } #page-nav.container .divider { border-left: 1px solid #c2c2c2; height: 20px; width: 0; } #page-nav.container .intangible { cursor: inherit; opacity: 0.3; -webkit-user-select: none; -ms-user-select: none; user-select: none; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0RhdGFCaW5kaW5nL1NlcnZlclNpZGVTb3J0QW5kRmlsdGVyL3B1cmVqcy9zdHlsZXMuc2NzcyIsIkZlYXR1cmVzL0RhdGFCaW5kaW5nL1NlcnZlclNpZGVTb3J0QW5kRmlsdGVyL3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsYUFBQTtFQUNBLHNCQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7QUNDRjtBRENFO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0VBQ0Esc0JBQUE7RUFDQSxnQkFBQTtFQUNBLGFBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtBQ0NKO0FEQ0k7RUFDRSxpQkFBQTtBQ0NOO0FEQ007RUFDRSxpQkFBQTtBQ0NSO0FESUU7RUFDRSxnQkFBQTtBQ0ZKOztBRE1BOztFQUVFLGdDQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0FDSEY7O0FETUE7RUFDRSxpQkFBQTtBQ0hGOztBRE1BO0VBQ0UsZ0NBQUE7RUFDQSwyQkFBQTtFQUNBLHNCQUFBO0VBQ0EsZUFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0VBQ0EsZ0JBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNIRjtBREtFO0VBQ0UscUJBQUE7RUFDQSxnQkFBQTtFQUNBLHNCQUFBO0FDSEo7QURNRTtFQUNFLHFCQUFBO0VBQ0EsWUFBQTtFQUNBLGVBQUE7RUFDQSxzQkFBQTtBQ0pKO0FET0U7RUFDRSw2QkFBQTtFQUNBLGtCQUFBO0VBQ0EsV0FBQTtFQUNBLGlCQUFBO0VBQ0EsbUVBQUE7QUNMSjtBRFFFO0VBQ0UseUJBQUE7QUNOSjtBRFNFO0VBQ0UsZ0JBQUE7QUNQSjtBRFVFO0VBQ0UsZUFBQTtFQUNBLFdBQUE7QUNSSjtBRFdFO0VBQ0UsOEJBQUE7RUFDQSxZQUFBO0VBQ0EsUUFBQTtBQ1RKO0FEWUU7RUFDRSxlQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO01BQUEscUJBQUE7VUFBQSxpQkFBQTtBQ1ZKIiwiZmlsZSI6IkZlYXR1cmVzL0RhdGFCaW5kaW5nL1NlcnZlclNpZGVTb3J0QW5kRmlsdGVyL3B1cmVqcy9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcblxuICAuc2FtcGxlLW9wdGlvbnMge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgcGFkZGluZzogMTBweDtcbiAgICBmbGV4LWdyb3c6IDA7XG4gICAgZmxleC1zaHJpbms6IDA7XG5cbiAgICAub3B0aW9uLXJvdyB7XG4gICAgICBtYXJnaW4tcmlnaHQ6IDVweDtcblxuICAgICAgbGFiZWwge1xuICAgICAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICAjcGFnZS1uYXYge1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gIH1cbn1cblxuI2dyaWQsXG4uZ3JpZCB7XG4gIGhlaWdodDogY2FsYygxMDAlIC0gNTJweCAtIDQycHgpO1xuICB3aWR0aDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbn1cblxuLmdjLXJvdyB7XG4gIGxpbmUtaGVpZ2h0OiAzNnB4O1xufVxuXG4jcGFnZS1uYXYuY29udGFpbmVyIHtcbiAgYm9yZGVyOiBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuMik7XG4gIGJvcmRlci13aWR0aDogMCAxcHggMXB4IDFweDtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBoZWlnaHQ6IDQycHg7XG4gIHBhZGRpbmc6IDNweCAwO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICB3aWR0aDogMTAwJTtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcblxuICAucGFnZS1wYXJ0LWxlZnQge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBtYXJnaW4tbGVmdDogNnB4O1xuICAgIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIH1cblxuICAucGFnZS1wYXJ0LXJpZ2h0IHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgZmxvYXQ6IHJpZ2h0O1xuICAgIG1hcmdpbjogM3B4IDZweDtcbiAgICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICB9XG5cbiAgLmJ1dHRvbiB7XG4gICAgYm9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgYm9yZGVyLXJhZGl1czogNHB4O1xuICAgIGNvbG9yOiAjMDAwO1xuICAgIHBhZGRpbmc6IDZweCAxMnB4O1xuICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC41cyBjdWJpYy1iZXppZXIoMC4yMiwgMC42MSwgMC4zNiwgMSk7XG4gIH1cblxuICAuYnV0dG9uOm5vdCguaW50YW5naWJsZSk6aG92ZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNkN2Q3ZDc7XG4gIH1cblxuICAuY29udGVudCB7XG4gICAgcGFkZGluZzogNnB4IDZweDtcbiAgfVxuXG4gIC5jb250ZW50IGlucHV0IHtcbiAgICBmb250LXNpemU6IDE1cHg7XG4gICAgd2lkdGg6IDI4cHg7XG4gIH1cblxuICAuZGl2aWRlciB7XG4gICAgYm9yZGVyLWxlZnQ6IDFweCBzb2xpZCAjYzJjMmMyO1xuICAgIGhlaWdodDogMjBweDtcbiAgICB3aWR0aDogMDtcbiAgfVxuXG4gIC5pbnRhbmdpYmxlIHtcbiAgICBjdXJzb3I6IGluaGVyaXQ7XG4gICAgb3BhY2l0eTogMC4zO1xuICAgIHVzZXItc2VsZWN0OiBub25lO1xuICB9XG59XG4iLCIubWFpbi1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuLm1haW4tY29udGFpbmVyIC5zYW1wbGUtb3B0aW9ucyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBhZGRpbmc6IDEwcHg7XG4gIGZsZXgtZ3JvdzogMDtcbiAgZmxleC1zaHJpbms6IDA7XG59XG4ubWFpbi1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIC5vcHRpb24tcm93IHtcbiAgbWFyZ2luLXJpZ2h0OiA1cHg7XG59XG4ubWFpbi1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIC5vcHRpb24tcm93IGxhYmVsIHtcbiAgbWFyZ2luLXJpZ2h0OiA1cHg7XG59XG4ubWFpbi1jb250YWluZXIgI3BhZ2UtbmF2IHtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbn1cblxuI2dyaWQsXG4uZ3JpZCB7XG4gIGhlaWdodDogY2FsYygxMDAlIC0gNTJweCAtIDQycHgpO1xuICB3aWR0aDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbn1cblxuLmdjLXJvdyB7XG4gIGxpbmUtaGVpZ2h0OiAzNnB4O1xufVxuXG4jcGFnZS1uYXYuY29udGFpbmVyIHtcbiAgYm9yZGVyOiBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuMik7XG4gIGJvcmRlci13aWR0aDogMCAxcHggMXB4IDFweDtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBoZWlnaHQ6IDQycHg7XG4gIHBhZGRpbmc6IDNweCAwO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICB3aWR0aDogMTAwJTtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcbn1cbiNwYWdlLW5hdi5jb250YWluZXIgLnBhZ2UtcGFydC1sZWZ0IHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBtYXJnaW4tbGVmdDogNnB4O1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xufVxuI3BhZ2UtbmF2LmNvbnRhaW5lciAucGFnZS1wYXJ0LXJpZ2h0IHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBmbG9hdDogcmlnaHQ7XG4gIG1hcmdpbjogM3B4IDZweDtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cbiNwYWdlLW5hdi5jb250YWluZXIgLmJ1dHRvbiB7XG4gIGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIGNvbG9yOiAjMDAwO1xuICBwYWRkaW5nOiA2cHggMTJweDtcbiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjVzIGN1YmljLWJlemllcigwLjIyLCAwLjYxLCAwLjM2LCAxKTtcbn1cbiNwYWdlLW5hdi5jb250YWluZXIgLmJ1dHRvbjpub3QoLmludGFuZ2libGUpOmhvdmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2Q3ZDdkNztcbn1cbiNwYWdlLW5hdi5jb250YWluZXIgLmNvbnRlbnQge1xuICBwYWRkaW5nOiA2cHggNnB4O1xufVxuI3BhZ2UtbmF2LmNvbnRhaW5lciAuY29udGVudCBpbnB1dCB7XG4gIGZvbnQtc2l6ZTogMTVweDtcbiAgd2lkdGg6IDI4cHg7XG59XG4jcGFnZS1uYXYuY29udGFpbmVyIC5kaXZpZGVyIHtcbiAgYm9yZGVyLWxlZnQ6IDFweCBzb2xpZCAjYzJjMmMyO1xuICBoZWlnaHQ6IDIwcHg7XG4gIHdpZHRoOiAwO1xufVxuI3BhZ2UtbmF2LmNvbnRhaW5lciAuaW50YW5naWJsZSB7XG4gIGN1cnNvcjogaW5oZXJpdDtcbiAgb3BhY2l0eTogMC4zO1xuICB1c2VyLXNlbGVjdDogbm9uZTtcbn0iXX0= */