Header with Sparkline

This example shows how you can summarize grouped data with Sparklines both in the data grid and in a standalone container.

<p>This example shows how you can summarize grouped data with Sparklines both in the data grid and in a standalone container.</p> <p>The <strong>Customized Header</strong> 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 <strong>Country</strong>. It also presents sales totals in a pie Sparkline that is placed outside the grid.</p> <p>You can place a Sparkline in the group headers by using a Sparkline formula (defined as <strong>lineSparklineFormula</strong> in the source code) and then adding that formula to the <strong>groupHeader</strong> property in the column definition.</p> <p>You can create a standalone Sparkline view by defining data (defined as <strong>percentagePie</strong> in the source code) and configuring the Sparkline. Configure the Sparkline by initializing the <strong>Sparkline.PieSparkline</strong> plugin (defined as <strong>pieSparkline</strong> in the source code).</p>
<!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 | 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/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" /> <!-- 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/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 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 */