Game Statistic | Showcase | MESCIUS DataViewsJS Demos

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== */