Two-one layout

HTML

<script src="https://cdn.jsdelivr.net/npm/keen-analysis@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@keen.io/dataviz@latest/dist/dataviz.min.js"></script>
<div class="keen-dashboard">
  <div class="container grid grid-two-and-one">
    <div class="chart-stage" id="chart-01" style="height: 350px;"></div>
    <div class="chart-stage" id="chart-02" style="height: 350px;"></div>
    <div class="two">
      <div class="chart-stage" id="chart-03" style="height: 350px;"></div>
    </div>
  </div>

  <div class="container">
    <p class="small text-muted">Built with &#9829; by <a href="https://keen.io" target="_blank" rel="noopener noreferrer">Keen IO</a></p>
  </div>
</div>

CSS

:root {
  --grid-gap: 15px;
}

/* GENERAL */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:before,
:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}

a {
  color: #428bca;
  text-decoration: none;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}

h1,
h2,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h4,
h5,
h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 12px;
}

.text-muted {
  color: #777;
}

small,
.small {
  font-size: 85%;
}

.lead {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .lead {
    font-size: 21px;
  }
}

.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

/* NAV */

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.nav-tabs>li>a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.nav>li>a:hover,
.nav>li>a:focus {
  text-decoration: none;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

.nav-list {
  padding-left: 0;
  list-style: none;
}

.nav-list>li {
  display: block;
}

.nav-list>li>a {
  display: block;
  padding: 10px 15px;
  line-height: 20px;
  color: #777777;
  text-decoration:...

JavaScript

const client = new KeenAnalysis({
   projectId: '5c87b64ec9e77c0001cf5b6e',
   readKey: 'FB952962910C97DE3E1C6A25EB2FC6B22FDB1ACA9D572948EA18227287BC4E12'
 });

 // metric chart

 const metricChart = new KeenDataviz({
   type: 'metric',
   container: '#chart-01',
   settings: {
     theme: {
       metric: {
         icon: {
           margins: {
             top: 30,
             left: 30,
             bottom: 0,
             right: 20
           },
           enabled: true,
           type: 'brand',
           style: 'regular',
         },
       },
     },
     caption: 'Total purchase',
   },
 });

 client
   .query({
     analysisType: 'count',
     eventCollection: 'mobile_purchases',
     timeframe: {
       "start": "2019-03-20T00:00:00+00:00",
       "end": "2019-03-26T12:00:00+00:00"
     },
     timezone: 'UTC',
   })
   .then(result => metricChart.render(result))
   .catch(error => metricChart.error(error.body));

 // funnel chart

 const funnelChart = new KeenDataviz({
   container: '#chart-02',
   type: 'funnel',
   mappings: {
     pageviews: 'Page Views',
     signups: 'Singups',
     purchases: 'Purchases',
   },
   widget: {
     title: {
       content: 'Funnel',
     },
   },
 });

 client
   .query({
     analysisType: 'funnel',
     steps: [{
         actorProperty: 'user.uuid',
         eventCollection: 'pageviews',
         timeframe: {
           "start": "2019-03-13T00:00:00+01:00",
           "end": "2019-05-31T00:00:00+02:00"
         },
         timezone: "Europe/Paris",
       },
       {
         actorProperty: 'user.uuid',
         eventCollection: 'signups',
         timeframe: {
           "start": "2019-03-13T00:00:00+01:00",
           "end": "2019-05-31T00:00:00+02:00"
         },
         timezone: "Europe/Paris",
       },
       {
         actorProperty: 'user.uuid',
         eventCollection: 'purchases',
         timeframe: {
           "start": "2019-03-13T00:00:00+01:00",
           "end": "2019-05-31T00:00:00+02:00"
   ...