Game Statistic

This example uses a common control slicer to filter in DataViews.

<p>This demo shows a typical use of column configurations in a video game statistics table.</p> <p>Try using the different panels for filtering and grouping the data.</p>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Showcase/GameStatistics/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="multi column, presenter, header selection" /> <meta name="description" content="This example uses a common control slicer to filter in DataViews." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Game Statistics | 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.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/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"> <input class="gc-input filter" id="input" type="text" placeholder="Filter..." onkeyup="filter()" /> <button class="showToolPanelBtn btn btn-default">ToolPanel</button> </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>
function monthPresenter(name) { return "<div class='div' style='background-color:{{? it." .concat(name, '<10000}}lightcoral{{?? it.') .concat(name, ">50000}}lightgreen{{?}}'>${{=it.") .concat(name, '}}</div>'); } function createMonthColumns() { var total = { id: 'totalWinnings', headerGroupShow: 'collapsed', caption: 'Total Winnings', align: 'right', dataField: '=[Jan]+[Feb]+[Mar]+[Apr]+[May]+[Jun]+[Jul]+[Aug]+[Sep]+[Oct]+[Nov]+[Dec]', format: '$#,#', width: 130, }; var months = monthNames.map(function(name) { return { id: name, caption: name, dataField: name, headerGroupShow: 'expanded', presenter: monthPresenter(name), width: 70, align: 'center', }; }); return [total].concat(months); } var photoPresenter = '<img class="photo" src="{{=it.photo}}">{{=" "+it.country}}</img>'; var starPresenter = '<div class="stars-box {{=it.rating}}"></div>'; var cols = [ { caption: 'Participant', columns: [ { id: 'name', caption: 'Name', dataField: 'firstName,lastName', width: 120, }, { id: 'country2', caption: 'Country', dataField: 'photo,country', presenter: photoPresenter, width: 105, }, { id: 'language', caption: 'Language', dataField: 'language', width: 100, }, ], }, { caption: 'Game of Choice', columns: [ { id: 'game', caption: 'Game of Choice', dataField: 'game', width: 160, }, { id: 'bought', caption: 'Bought', dataField: 'bought', presenter: '<span>{{?it.bought<1}}✔{{??it.bought==1}}✖{{?}}</span>', align: 'center', width: 75, }, ], }, { id: 'rating', caption: 'Rating', dataField: 'rating', width: 110, presenter: starPresenter, }, { caption: 'Monthly', isCollapsed: false, columns: createMonthColumns(), }, ]; var layout = new GC.DataViews.GridLayout({ selectionMode: 'multiple', allowHeaderSelect: true, showToolPanel: false, }); var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout); function showToolPanel() { dataView.options.showToolPanel = !dataView.options.showToolPanel; } window.filter = function filter() { var fields = ['firstName', 'lastName', 'country', 'language', 'game', 'bought', 'rating']; var filterInput = document.getElementById('input'); var value = filterInput.value; var values = value ? value.split(/\s/).filter(_.identity) : []; var conditions = values.map(function(value) { var search = fields.map(function(fieldName) { return 'search("'.concat(value, '",[').concat(fieldName, '],1,-1) >0'); }); return '('.concat(search.join('||'), ')'); }); dataView.data.filter(conditions.join('&&')).do(); filterInput.focus(); }; $('.showToolPanelBtn').click(showToolPanel); //focus data.view by default document.querySelector('#grid').focus();
var firstNames = [ 'Sophie', 'Isabelle', 'Emily', 'Olivia', 'Lily', 'Chloe', 'Isabella', 'Amelia', 'Jessica', 'Sophia', 'Ava', 'Charlotte', 'Mia', 'Lucy', 'Grace', 'Ruby', 'Ella', 'Evie', 'Freya', 'Isla', 'Poppy', 'Daisy', 'Layla', ]; var lastNames = [ 'Beckham', 'Black', 'Braxton', 'Brennan', 'Brock', 'Bryson', 'Cadwell', 'Cage', 'Carson', 'Chandler', 'Cohen', 'Cole', 'Corbin', 'Dallas', 'Dalton', 'Dane', 'Donovan', 'Easton', 'Fisher', 'Fletcher', 'Grady', 'Greyson', 'Griffin', 'Gunner', 'Hayden', 'Hudson', 'Hunter', 'Jacoby', 'Jagger', 'Jaxon', 'Jett', 'Kade', 'Kane', 'Keating', 'Keegan', 'Kingston', 'Kobe', ]; var games = [ 'Chess', 'Cross and Circle game', 'Downfall', 'DVONN', 'Fanorona', 'Game of the Generals', 'Ghosts', 'Abalone', 'Agon', 'Backgammon', 'Battleship', 'Blockade', 'Blood Bowl', 'Bul', 'Camelot', 'Checkers', 'Go', 'Gipf', 'Guess Who?', 'Hare and Hounds', 'Hex', 'Hijara', 'Isola', 'Janggi (Korean Chess)', 'Le Jeu de la Guerre', 'Patolli', 'Plateau', 'Rithmomachy', 'Senet', 'Shogi', 'Space Hulk', 'Stratego', 'Sugoroku', 'Tablut', 'Tantrix', 'Wari', 'Xiangqi (Chinese chess)', 'YINSH', 'Kalah', 'Kamisado', 'Liu po', 'Lost Cities', 'Mad Gab', 'Master Mind', "Nine Men's Morris", 'Obsession', 'Othello', ]; var booleanValues = [true, false, null]; var countries = ['UK', 'France', 'Italy', 'Germany']; var languages = ['English', 'French', 'Italian', '(other)']; var photos = [ 'https://flags.fmcdn.net/data/flags/mini/gb.png', 'https://flags.fmcdn.net/data/flags/mini/fr.png', 'https://flags.fmcdn.net/data/flags/mini/it.png', 'https://flags.fmcdn.net/data/flags/mini/de.png', ]; var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; function createData() { var data = []; var _loop = function _loop() { var rand = Math.round(Math.random() * 100); var record = { firstName: firstNames[rand % firstNames.length], lastName: lastNames[rand % lastNames.length], country: countries[rand % countries.length], language: languages[rand % languages.length], photo: photos[rand % photos.length], game: games[rand % games.length], bought: booleanValues[rand % booleanValues.length], rating: 'rating' + (rand % 6), }; _.each(monthNames, function(name) { record[name] = Math.round(Math.random() * 100000); }); data.push(record); }; for (var i = 0; i < 1000; i++) { _loop(); } return data; } var data = createData();
html, body { height: 100%; background-color: #efefef; } a { cursor: pointer; } * { font-family: Arial, sans-serif; } .main-container { display: flex; flex-direction: column; width: 100%; height: 100%; } .sample-options { display: flex; align-items: center; overflow: hidden; padding: 10px; flex-grow: 0; flex-shrink: 0; } .grid { width: 100%; height: calc(100% - 52px); flex-grow: 1; flex-shrink: 1; } .stars-box { height: 18px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAARCAYAAADQWvz5AAAACXBIWXMAAAsSAAALEgHS3X78AAAA/0lEQVQ4EY2UwW0CMRBFnxF30gFQQeDqE50AHdAKHUAHoQM4ZM9LBUk6IBUMmrUR7I7H4ksjWX/+fM3aXxtEhCqasOnaUQ412dgwFrvMVI1GhnlFE1bAZ1fp7KJuBBvnbODfURNmwM+AnRPl12jdjZLJzvDKpZ5BkG++gA9ABVOjqOMP0A1varQAzsCkOuLjH1iNiNLmba6u1Me1m43SpjuKclNX4OSOWJy6mTRbeLUmaPDWZqyPI1F6cSi9WmsYC6MpGVUT7GlKRgvDvKHpG6WwvWbpAixz6fmB6TCYw40eK2s2tkTRV2lzaW+be+bzSkb7nA3720icbqKapxFwBx7qRr1Qs6HiAAAAAElFTkSuQmCC"); } .rating0 { width: 0; } .rating1 { width: 16px; } .rating2 { width: 32px; } .rating3 { width: 48px; } .rating4 { width: 64px; } .rating5 { width: 80px; } .div { width: 100%; height: 100%; } .photo { width: 15px; height: 10px; margin-right: 5px; } .c10, .c11, .c12, .c13, .c14, .c15, .c16, .c17, .c18, .c7, .c8, .c9 { padding: 0; border: 0; } .gc-column-header-cell { border-right: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2); text-align: center !important; justify-content: center !important; } .gc-cell { border: 0; border-right: 1px dashed #808080; } .odd { background-color: #f6f6f6; } .filter { width: 400px; margin-right: 10px; } .showToolPanelBtn { height: 32px; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNob3djYXNlL0dhbWVTdGF0aXN0aWNzL3B1cmVqcy9zdHlsZXMuc2NzcyIsIlNob3djYXNlL0dhbWVTdGF0aXN0aWNzL3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFLFlBQUE7RUFDQSx5QkFBQTtBQ0NGOztBREVBO0VBQ0UsZUFBQTtBQ0NGOztBREVBO0VBQ0UsOEJBQUE7QUNDRjs7QURFQTtFQUNFLGFBQUE7RUFDQSxzQkFBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0FDQ0Y7O0FERUE7RUFDRSxhQUFBO0VBQ0EsbUJBQUE7RUFDQSxnQkFBQTtFQUNBLGFBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtBQ0NGOztBREVBO0VBQ0UsV0FBQTtFQUNBLHlCQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNDRjs7QURFQTtFQUNFLFlBQUE7RUFDQSwyZUFBQTtBQ0NGOztBREVBO0VBQ0UsUUFBQTtBQ0NGOztBREVBO0VBQ0UsV0FBQTtBQ0NGOztBREVBO0VBQ0UsV0FBQTtBQ0NGOztBREVBO0VBQ0UsV0FBQTtBQ0NGOztBREVBO0VBQ0UsV0FBQTtBQ0NGOztBREVBO0VBQ0UsV0FBQTtBQ0NGOztBREVBO0VBQ0UsV0FBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLFdBQUE7RUFDQSxZQUFBO0VBQ0EsaUJBQUE7QUNDRjs7QURFQTs7Ozs7Ozs7Ozs7O0VBWUUsVUFBQTtFQUNBLFNBQUE7QUNDRjs7QURFQTtFQUNFLDBDQUFBO0VBQ0EsMkNBQUE7RUFDQSw2QkFBQTtFQUNBLGtDQUFBO0FDQ0Y7O0FERUE7RUFDRSxTQUFBO0VBQ0EsZ0NBQUE7QUNDRjs7QURFQTtFQUNFLHlCQUFBO0FDQ0Y7O0FERUE7RUFDRSxZQUFBO0VBQ0Esa0JBQUE7QUNDRjs7QURFQTtFQUNFLFlBQUE7QUNDRiIsImZpbGUiOiJTaG93Y2FzZS9HYW1lU3RhdGlzdGljcy9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImh0bWwsXG5ib2R5IHtcbiAgaGVpZ2h0OiAxMDAlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWZlZmVmO1xufVxuXG5hIHtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG4qIHtcbiAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmO1xufVxuXG4ubWFpbi1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwYWRkaW5nOiAxMHB4O1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xufVxuXG4uZ3JpZCB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IGNhbGMoMTAwJSAtIDUycHgpO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xufVxuXG4uc3RhcnMtYm94IHtcbiAgaGVpZ2h0OiAxOHB4O1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJ2RhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQklBQUFBUkNBWUFBQURRV3Z6NUFBQUFDWEJJV1hNQUFBc1NBQUFMRWdIUzNYNzhBQUFBLzBsRVFWUTRFWTJVd1cwQ01SQkZueEYzMGdGUVFlRHFFNTBBSGRBS0hVQUhvUU00Wk05TEJVazZJQlVNbXJVUjdJN0g0a3NqV1gvK2ZNM2FYeHRFaENxYXNPbmFVUTQxMmRnd0Zydk1WSTFHaG5sRkUxYkFaMWZwN0tKdUJCdm5iT0RmVVJObXdNK0FuUlBsMTJqZGpaTEp6dkRLcFo1QmtHKytnQTlBQlZPanFPTVAwQTF2YXJRQXpzQ2tPdUxqSDFpTmlOTG1iYTZ1MU1lMW00M1NwanVLY2xOWDRPU09XSnk2bVRSYmVMVW1hUERXWnF5UEkxRjZjU2k5V21zWUM2TXBHVlVUN0dsS1JndkR2S0hwRzZXd3ZXYnBBaXh6NmZtQjZUQ1l3NDBlSzJzMnRrVFJWMmx6YVcrYmUrYnpTa2I3bkEzNzIwaWNicUthcHhGd0J4N3FScjFRczZIaUFBQUFBRWxGVGtTdVFtQ0MnKTtcbn1cblxuLnJhdGluZzAge1xuICB3aWR0aDogMDtcbn1cblxuLnJhdGluZzEge1xuICB3aWR0aDogMTZweDtcbn1cblxuLnJhdGluZzIge1xuICB3aWR0aDogMzJweDtcbn1cblxuLnJhdGluZzMge1xuICB3aWR0aDogNDhweDtcbn1cblxuLnJhdGluZzQge1xuICB3aWR0aDogNjRweDtcbn1cblxuLnJhdGluZzUge1xuICB3aWR0aDogODBweDtcbn1cblxuLmRpdiB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5waG90byB7XG4gIHdpZHRoOiAxNXB4O1xuICBoZWlnaHQ6IDEwcHg7XG4gIG1hcmdpbi1yaWdodDogNXB4O1xufVxuXG4uYzEwLFxuLmMxMSxcbi5jMTIsXG4uYzEzLFxuLmMxNCxcbi5jMTUsXG4uYzE2LFxuLmMxNyxcbi5jMTgsXG4uYzcsXG4uYzgsXG4uYzkge1xuICBwYWRkaW5nOiAwO1xuICBib3JkZXI6IDA7XG59XG5cbi5nYy1jb2x1bW4taGVhZGVyLWNlbGwge1xuICBib3JkZXItcmlnaHQ6IDFweCBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuMik7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuMik7XG4gIHRleHQtYWxpZ246IGNlbnRlciAhaW1wb3J0YW50O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlciAhaW1wb3J0YW50O1xufVxuXG4uZ2MtY2VsbCB7XG4gIGJvcmRlcjogMDtcbiAgYm9yZGVyLXJpZ2h0OiAxcHggZGFzaGVkICM4MDgwODA7XG59XG5cbi5vZGQge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMjQ2LCAyNDYsIDI0Nik7XG59XG5cbi5maWx0ZXIge1xuICB3aWR0aDogNDAwcHg7XG4gIG1hcmdpbi1yaWdodDogMTBweDtcbn1cblxuLnNob3dUb29sUGFuZWxCdG4ge1xuICBoZWlnaHQ6IDMycHg7XG59XG4iLCJodG1sLFxuYm9keSB7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2VmZWZlZjtcbn1cblxuYSB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuKiB7XG4gIGZvbnQtZmFtaWx5OiBBcmlhbCwgc2Fucy1zZXJpZjtcbn1cblxuLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcGFkZGluZzogMTBweDtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcbn1cblxuLmdyaWQge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiBjYWxjKDEwMCUgLSA1MnB4KTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbn1cblxuLnN0YXJzLWJveCB7XG4gIGhlaWdodDogMThweDtcbiAgYmFja2dyb3VuZC1pbWFnZTogdXJsKFwiZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFCSUFBQUFSQ0FZQUFBRFFXdno1QUFBQUNYQklXWE1BQUFzU0FBQUxFZ0hTM1g3OEFBQUEvMGxFUVZRNEVZMlV3VzBDTVJCRm54RjMwZ0ZRUWVEcUU1MEFIZEFLSFVBSG9RTTRaTTlMQlVrNklCVU1tclVSN0k3SDRrc2pXWC8rZk0zYVh4dEVoQ3Fhc09uYVVRNDEyZGd3RnJ2TVZJMUdobmxGRTFiQVoxZnA3S0p1QkJ2bmJPRGZVUk5td00rQW5SUGwxMmpkalpMSnp2REtwWjVCa0crK2dBOUFCVk9qcU9NUDBBMXZhclFBenNDa091TGpIMWlOaU5MbWJhNnUxTWUxbTQzU3BqdUtjbE5YNE9TT1dKeTZtVFJiZUxVbWFQRFdacXlQSTFGNmNTaTlXbXNZQzZNcEdWVVQ3R2xLUmd2RHZLSHBHNld3dldicEFpeHo2Zm1CNlRDWXc0MGVLMnMydGtUUlYybHphVytiZStielNrYjduQTM3MjBpY2JxS2FweEZ3Qng3cVJyMVFzNkhpQUFBQUFFbEZUa1N1UW1DQ1wiKTtcbn1cblxuLnJhdGluZzAge1xuICB3aWR0aDogMDtcbn1cblxuLnJhdGluZzEge1xuICB3aWR0aDogMTZweDtcbn1cblxuLnJhdGluZzIge1xuICB3aWR0aDogMzJweDtcbn1cblxuLnJhdGluZzMge1xuICB3aWR0aDogNDhweDtcbn1cblxuLnJhdGluZzQge1xuICB3aWR0aDogNjRweDtcbn1cblxuLnJhdGluZzUge1xuICB3aWR0aDogODBweDtcbn1cblxuLmRpdiB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5waG90byB7XG4gIHdpZHRoOiAxNXB4O1xuICBoZWlnaHQ6IDEwcHg7XG4gIG1hcmdpbi1yaWdodDogNXB4O1xufVxuXG4uYzEwLFxuLmMxMSxcbi5jMTIsXG4uYzEzLFxuLmMxNCxcbi5jMTUsXG4uYzE2LFxuLmMxNyxcbi5jMTgsXG4uYzcsXG4uYzgsXG4uYzkge1xuICBwYWRkaW5nOiAwO1xuICBib3JkZXI6IDA7XG59XG5cbi5nYy1jb2x1bW4taGVhZGVyLWNlbGwge1xuICBib3JkZXItcmlnaHQ6IDFweCBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuMik7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuMik7XG4gIHRleHQtYWxpZ246IGNlbnRlciAhaW1wb3J0YW50O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlciAhaW1wb3J0YW50O1xufVxuXG4uZ2MtY2VsbCB7XG4gIGJvcmRlcjogMDtcbiAgYm9yZGVyLXJpZ2h0OiAxcHggZGFzaGVkICM4MDgwODA7XG59XG5cbi5vZGQge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjZmNmY2O1xufVxuXG4uZmlsdGVyIHtcbiAgd2lkdGg6IDQwMHB4O1xuICBtYXJnaW4tcmlnaHQ6IDEwcHg7XG59XG5cbi5zaG93VG9vbFBhbmVsQnRuIHtcbiAgaGVpZ2h0OiAzMnB4O1xufSJdfQ== */