Header with Sparkline | Features | MESCIUS DataViewsJS JavaScript Demos

This example shows how you can summarize grouped data with Sparklines both in the data grid and in a standalone container. The Customized Header demo shows how you can customize group header settings. This demo takes the concept further by using a Sparkline to show trends in data groups by Country. It also presents sales totals in a pie Sparkline that is placed outside the grid. You can place a Sparkline in the group headers by using a Sparkline formula (defined as lineSparklineFormula in the source code) and then adding that formula to the groupHeader property in the column definition. You can create a standalone Sparkline view by defining data (defined as percentagePie in the source code) and configuring the Sparkline. Configure the Sparkline by initializing the Sparkline.PieSparkline plugin (defined as pieSparkline in the source code).

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Grouping/HeaderWithSparkline/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="grouping, aggregates, aggregation, presenter, chart, rendering" />
<meta
name="description"
content="This example shows how you can summarize grouped data with Sparklines both in the data grid and in a standalone container."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Header with Sparkline | Features | 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/node_modules/flexboxgrid/dist/flexboxgrid.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/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 row">
<div id="grid" class="grid col-xs-12 col-sm-7 col-md-8 col-lg-9"></div>
<div class="sparkline col-xs-12 col-sm-5 col-md-4 col-lg-3">
<h3>2018 GDP Percentage</h3>
<div class="row middle-xs between-xs">
<div class="legend col-xs-4">
<div>
<div class="pie-mark-owner">
<label>USA</label>
</div>
<div class="pie-mark" style="background: #490a3d"></div>
</div>
<div>
<div class="pie-mark-owner">
<label>China</label>
</div>
<div class="pie-mark" style="background: #bd1550"></div>
</div>
<div>
<div class="pie-mark-owner">
<label>Japan</label>
</div>
<div class="pie-mark" style="background: #e97f02"></div>
</div>
<div>
<div class="pie-mark-owner">
<label>Other</label>
</div>
<div class="pie-mark" style="background: #8c847b"></div>
</div>
</div>
<div id="sales-curve" class="col-xs-8"></div>
</div>
</div>
</div>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

function currentTheme() {
var path = window.parent.location.pathname.split('/');
var slug = path[path.length - 1].toLowerCase();
var themes = ['blue', 'bootstrap', 'flat'];
return themes.indexOf(slug) >= 0 ? slug : '';
}
var sparklineColor = '#fcfeff'; // inside shell with theme
if (window.frameElement && currentTheme()) {
var themeColors = {
blue: '#003f59',
bootstrap: '#333',
flat: 'white',
};
var themeColor = themeColors[currentTheme()];
if (themeColor) {
sparklineColor = themeColor;
}
}
function encodeSparklineSettings(settings) {
var json = JSON.stringify(settings).replace(/\"/g, '');
return '\\"' + json + '\\"';
}
var sparklineSettings = encodeSparklineSettings({
seriesColor: sparklineColor,
});
var lineSparkline = '=LINESPARKLINE([gdpGrowth],[year],'.concat(sparklineSettings, ')');
var cols = [
{
id: 'country',
caption: 'Country',
dataField: 'Country',
groupHeader: 'growth trend: {{=it.eval("'.concat(lineSparkline, '")}}'),
},
{
id: 'year',
caption: 'Year',
dataField: 'Year',
dataType: 'number',
},
{
id: 'gdp',
caption: 'GDP (current US$)',
dataField: 'GDP',
dataType: 'number',
format: '$#,##',
},
{
id: 'gdpGrowth',
caption: 'GDP growth(annual %)',
dataField: 'GDP growth',
dataType: 'number',
format: '0.0%',
},
];
var layout = new GC.DataViews.GridLayout({
grouping: [
{
field: 'country',
collapsed: true,
footer: {
visible: false,
},
},
],
});
var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout);
var colorMap = {
'United States': '#490A3D',
China: '#BD1550',
Japan: '#E97F02',
Others: '#8c847b',
};
var percentagePie = dataView.data.evaluate('=summarize(filter([year]="2018"), [country], "gdp", sum([gdp]))');
var sum = dataView.data.evaluate('=sumx(filter([year]="2018"&&[country]<>"World"), [gdp])');
percentagePie[3].gdp -= sum;
percentagePie[3].country = 'Others';
var pieSparkline = new GC.DataViews.PieSparkline({
values: percentagePie.map(function (item) {
return item.gdp;
}),
colors: percentagePie.map(function (item) {
return colorMap[item.country];
}),
});
pieSparkline.paint(document.getElementById('sales-curve'));
document.getElementById('grid').focus();

var data = [
{
Country: 'United States',
Year: '2004',
GDP: '12274928000000.0',
'GDP growth': '0.038',
},
{
Country: 'United States',
Year: '2005',
GDP: '13093726000000.0',
'GDP growth': '0.033',
},
{
Country: 'United States',
Year: '2006',
GDP: '13855888000000.0',
'GDP growth': '0.027',
},
{
Country: 'United States',
Year: '2007',
GDP: '14477635000000.0',
'GDP growth': '0.018',
},
{
Country: 'United States',
Year: '2008',
GDP: '14718582000000.0',
'GDP growth': '-0.003',
},
{
Country: 'United States',
Year: '2009',
GDP: '14418739000000.0',
'GDP growth': '-0.028',
},
{
Country: 'United States',
Year: '2010',
GDP: '14964372000000.0',
'GDP growth': '0.025',
},
{
Country: 'United States',
Year: '2011',
GDP: '15517926000000.0',
'GDP growth': '0.016',
},
{
Country: 'United States',
Year: '2012',
GDP: '16155255000000.0',
'GDP growth': '0.022',
},
{
Country: 'United States',
Year: '2013',
GDP: '16663160000000.0',
'GDP growth': '0.015',
},
{
Country: 'United States',
Year: '2014',
GDP: '17348071500000.0',
'GDP growth': '0.024',
},
{
Country: 'United States',
Year: '2018',
GDP: '17946996000000.0',
'GDP growth': '0.024',
},
{
Country: 'China',
Year: '2004',
GDP: '1941745602165.1',
'GDP growth': '0.101\t',
},
{
Country: 'China',
Year: '2005',
GDP: '2268598904116.3',
'GDP growth': '0.114',
},
{
Country: 'China',
Year: '2006',
GDP: '2729784031906.1',
'GDP growth': '0.127\t',
},
{
Country: 'China',
Year: '2007',
GDP: '3523094314820.9',
'GDP growth': '0.142\t',
},
{
Country: 'China',
Year: '2008',
GDP: '4558431073438.2',
'GDP growth': '0.096\t',
},
{
Country: 'China',
Year: '2009',
GDP: '5059419738267.4',
'GDP growth': '0.092\t',
},
{
Country: 'China',
Year: '2010',
GDP: '6039658508485.6',
'GDP growth': '0.106\t',
},
{
Country: 'China',
Year: '2011',
GDP: '7492432097810.1',
'GDP growth': '0.095\t',
},
{
Country: 'China',
Year: '2012',
GDP: '8461623162714.1',
'GDP growth': '0.078\t',
},
{
Country: 'China',
Year: '2013',
GDP: '9490602600148.5',
'GDP growth': '0.077\t',
},
{
Country: 'China',
Year: '2014',
GDP: '10351111762216.4',
'GDP growth': '0.073\t',
},
{
Country: 'China',
Year: '2018',
GDP: '10866443998394.2',
'GDP growth': '0.069',
},
{
Country: 'Japan',
Year: '2004',
GDP: '4655803055650.6',
'GDP growth': '0.024\t',
},
{
Country: 'Japan',
Year: '2005',
GDP: '4571867441130.4',
'GDP growth': '0.013\t',
},
{
Country: 'Japan',
Year: '2006',
GDP: '4356750212598.0',
'GDP growth': '0.017\t',
},
{
Country: 'Japan',
Year: '2007',
GDP: '4356347794333.1',
'GDP growth': '0.022\t',
},
{
Country: 'Japan',
Year: '2008',
GDP: '4849184641953.6',
'GDP growth': '-0.010\t',
},
{
Country: 'Japan',
Year: '2009',
GDP: '5035141567658.9',
'GDP growth': '-0.055\t',
},
{
Country: 'Japan',
Year: '2010',
GDP: '5498717815809.8',
'GDP growth': '0.047\t',
},
{
Country: 'Japan',
Year: '2011',
GDP: '5908989186412.2',
'GDP growth': '-0.005\t',
},
{
Country: 'Japan',
Year: '2012',
GDP: '5957250118648.8',
'GDP growth': '0.017\t',
},
{
Country: 'Japan',
Year: '2013',
GDP: '4908862837290.5',
'GDP growth': '0.014\t',
},
{
Country: 'Japan',
Year: '2014',
GDP: '4596156556721.9',
'GDP growth': '0.000\t',
},
{
Country: 'Japan',
Year: '2018',
GDP: '4123257609614.7',
'GDP growth': '0.005\t',
},
{
Country: 'World',
Year: '2004',
GDP: '43552125346243.3',
'GDP growth': '0.045',
},
{
Country: 'World',
Year: '2005',
GDP: '47142587523753.3',
'GDP growth': '0.038',
},
{
Country: 'World',
Year: '2006',
GDP: '51074511683436.2',
'GDP growth': '0.044',
},
{
Country: 'World',
Year: '2007',
GDP: '57583425018506.1',
'GDP growth': '0.043',
},
{
Country: 'World',
Year: '2008',
GDP: '63128556653064.6',
'GDP growth': '0.018',
},
{
Country: 'World',
Year: '2009',
GDP: '59835529905240.6',
'GDP growth': '-0.017',
},
{
Country: 'World',
Year: '2010',
GDP: '65647819210535.0',
'GDP growth': '0.043',
},
{
Country: 'World',
Year: '2011',
GDP: '72843138849548.9',
'GDP growth': '0.031',
},
{
Country: 'World',
Year: '2012',
GDP: '74428356862439.7',
'GDP growth': '0.025',
},
{
Country: 'World',
Year: '2013',
GDP: '76431318769141.1',
'GDP growth': '0.024',
},
{
Country: 'World',
Year: '2014',
GDP: '78106337567715.3',
'GDP growth': '0.026',
},
{
Country: 'World',
Year: '2018',
GDP: '73433643553307.7',
'GDP growth': '0.025\t',
},
];

.main-container.row {
width: 100%;
height: 100%;
margin: 0;
}
.main-container.row #grid {
height: 100%;
padding: 0;
}
.main-container.row .sparkline {
background: #f1f1f1;
border: solid 1px #e0e0e0;
border-radius: 4px;
color: #777;
display: inline-block;
font-family: "Roboto", sans-serif;
font-weight: 300;
text-align: center;
}
.main-container.row .sparkline .legend {
display: inline-block;
vertical-align: middle;
}
.main-container.row .sparkline .pie-mark {
display: inline-block;
height: 10px;
width: 35px;
}
.main-container.row .sparkline .pie-mark-owner {
display: inline-block;
width: 50px;
}
.main-container.row #sales-curve {
display: inline-block;
position: relative;
vertical-align: middle;
width: 150px;
height: 150px;
}
@media (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
.main-container.row #grid {
height: 60vh;
}
.main-container.row .sparkline {
height: 40vh;
}
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0dyb3VwaW5nL0hlYWRlcldpdGhTcGFya2xpbmUvcHVyZWpzL3N0eWxlcy5zY3NzIiwiRmVhdHVyZXMvR3JvdXBpbmcvSGVhZGVyV2l0aFNwYXJrbGluZS9wdXJlanMvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFdBQUE7RUFDQSxZQUFBO0VBQ0EsU0FBQTtBQ0NGO0FEQ0U7RUFDRSxZQUFBO0VBQ0EsVUFBQTtBQ0NKO0FERUU7RUFDRSxtQkFBQTtFQUNBLHlCQUFBO0VBQ0Esa0JBQUE7RUFDQSxXQUFBO0VBQ0EscUJBQUE7RUFDQSxpQ0FBQTtFQUNBLGdCQUFBO0VBQ0Esa0JBQUE7QUNBSjtBREVJO0VBQ0UscUJBQUE7RUFDQSxzQkFBQTtBQ0FOO0FER0k7RUFDRSxxQkFBQTtFQUNBLFlBQUE7RUFDQSxXQUFBO0FDRE47QURJSTtFQUNFLHFCQUFBO0VBQ0EsV0FBQTtBQ0ZOO0FETUU7RUFDRSxxQkFBQTtFQUNBLGtCQUFBO0VBQ0Esc0JBQUE7RUFDQSxZQUFBO0VBQ0EsYUFBQTtBQ0pKOztBRFVFO0VBRUk7SUFDRSxZQUFBO0VDUk47RURVSTtJQUNFLFlBQUE7RUNSTjtBQUNGIiwiZmlsZSI6IkZlYXR1cmVzL0dyb3VwaW5nL0hlYWRlcldpdGhTcGFya2xpbmUvcHVyZWpzL3N0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIubWFpbi1jb250YWluZXIucm93IHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgbWFyZ2luOiAwO1xuXG4gICNncmlkIHtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgcGFkZGluZzogMDtcbiAgfVxuXG4gIC5zcGFya2xpbmUge1xuICAgIGJhY2tncm91bmQ6ICNmMWYxZjE7XG4gICAgYm9yZGVyOiBzb2xpZCAxcHggI2UwZTBlMDtcbiAgICBib3JkZXItcmFkaXVzOiA0cHg7XG4gICAgY29sb3I6ICM3Nzc7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIGZvbnQtZmFtaWx5OiAnUm9ib3RvJywgc2Fucy1zZXJpZjtcbiAgICBmb250LXdlaWdodDogMzAwO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcblxuICAgIC5sZWdlbmQge1xuICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgICB9XG5cbiAgICAucGllLW1hcmsge1xuICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgaGVpZ2h0OiAxMHB4O1xuICAgICAgd2lkdGg6IDM1cHg7XG4gICAgfVxuXG4gICAgLnBpZS1tYXJrLW93bmVyIHtcbiAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgIHdpZHRoOiA1MHB4O1xuICAgIH1cbiAgfVxuXG4gICNzYWxlcy1jdXJ2ZSB7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICAgIHdpZHRoOiAxNTBweDtcbiAgICBoZWlnaHQ6IDE1MHB4O1xuICB9XG59XG5cbi8vIG1vc3Qgc21hcnRwaG9uZXNcbkBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDQ4MHB4KSB7XG4gIEBtZWRpYSAob3JpZW50YXRpb246IHBvcnRyYWl0KSB7XG4gICAgLm1haW4tY29udGFpbmVyLnJvdyB7XG4gICAgICAjZ3JpZCB7XG4gICAgICAgIGhlaWdodDogNjB2aDtcbiAgICAgIH1cbiAgICAgIC5zcGFya2xpbmUge1xuICAgICAgICBoZWlnaHQ6IDQwdmg7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iLCIubWFpbi1jb250YWluZXIucm93IHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgbWFyZ2luOiAwO1xufVxuLm1haW4tY29udGFpbmVyLnJvdyAjZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbiAgcGFkZGluZzogMDtcbn1cbi5tYWluLWNvbnRhaW5lci5yb3cgLnNwYXJrbGluZSB7XG4gIGJhY2tncm91bmQ6ICNmMWYxZjE7XG4gIGJvcmRlcjogc29saWQgMXB4ICNlMGUwZTA7XG4gIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgY29sb3I6ICM3Nzc7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgZm9udC1mYW1pbHk6IFwiUm9ib3RvXCIsIHNhbnMtc2VyaWY7XG4gIGZvbnQtd2VpZ2h0OiAzMDA7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cbi5tYWluLWNvbnRhaW5lci5yb3cgLnNwYXJrbGluZSAubGVnZW5kIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xufVxuLm1haW4tY29udGFpbmVyLnJvdyAuc3BhcmtsaW5lIC5waWUtbWFyayB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgaGVpZ2h0OiAxMHB4O1xuICB3aWR0aDogMzVweDtcbn1cbi5tYWluLWNvbnRhaW5lci5yb3cgLnNwYXJrbGluZSAucGllLW1hcmstb3duZXIge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHdpZHRoOiA1MHB4O1xufVxuLm1haW4tY29udGFpbmVyLnJvdyAjc2FsZXMtY3VydmUge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgd2lkdGg6IDE1MHB4O1xuICBoZWlnaHQ6IDE1MHB4O1xufVxuXG5AbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA0ODBweCkgYW5kIChvcmllbnRhdGlvbjogcG9ydHJhaXQpIHtcbiAgLm1haW4tY29udGFpbmVyLnJvdyAjZ3JpZCB7XG4gICAgaGVpZ2h0OiA2MHZoO1xuICB9XG4gIC5tYWluLWNvbnRhaW5lci5yb3cgLnNwYXJrbGluZSB7XG4gICAgaGVpZ2h0OiA0MHZoO1xuICB9XG59Il19 */