Game Statistic

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

Description
index.html
app.js
data.js
styles.css

This demo shows a typical use of column configurations in a video game statistics table.

Try using the different panels for filtering and grouping the data.

This demo shows a typical use of column configurations in a video game statistics table. Try using the different panels for filtering and grouping the data.
<!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 | MESCIUS 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" /> <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: 'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr', SJS_LICENSE_KEY: 'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep', }, }; </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"> <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== */