JSFiddle - React, Tailwind, and code Playground

by Rasmus Bergström

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div id="monitor" class="panel panel-default tab-box">
    <div class="panel-heading">
        <h3 class="panel-title">
            <i class="fa fa-signal"></i>
            Monitoring report
        </h3>
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#fuel-tab" data-toggle="tab">Fuel data</a>
            </li>
            <li>
                <a href="#co2-tab" data-toggle="tab">Co2 data</a>
            </li>
        </ul>
    </div>
    <div class="panel-body">
        <div class="tab-content">
            <div id="fuel-tab" class="tab-pane active">
                <div class="row">
                    <div class="col-sm-12 col-md-7 chart">
                        <div class="caption">
                            Fuel consumption last 12 months
                            <span class="label label-default">Liter/100km</span>
                        </div>
                        <div id="fuel-consumption"></div>
                        <div class="legend">
                            <span id="city" class="label">City</span>
                            <span id="highway" class="label">Highway</span>
                            <span id="idle" class="label">Idle</span>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-5 chart">
                        <div class="caption">
                            Fuel projection this month
                        </div>
      ...

CSS

.tab-box .panel-heading > .nav-tabs {
  float: right;
  margin-top: -2px;
  display: inline-block;
  border-bottom: 0;
}
.tab-box .panel-heading > .nav-tabs > li > a {
  border: 0;
  padding: 6px 7px;
}
@media (min-width: 444px) {
  .tab-box .panel-heading > .nav-tabs > li > a {
    padding: 6px 15px;
  }
}
.tab-box .panel-heading > .nav-tabs > li.active > a {
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-bottom: 0;
  border-top: 1px solid #7c1c1d;
  background: #fff;
}
.panel.panel-default > .panel-heading h3 {
  display: inline-block;
}

JavaScript

$(function () {
    // Fuel per 100k data //
    var fuel_data = [
     {"period": "2013-01", "city": 66, "highway": 34, "idle": 9},
     {"period": "2013-02", "city": 62, "highway": 33, "idle": 8},
     {"period": "2013-03", "city": 61, "highway": 32, "idle": 7},
     {"period": "2013-04", "city": 66, "highway": 32, "idle": 6},
     {"period": "2013-05", "city": 67, "highway": 31, "idle": 5},
     {"period": "2013-06", "city": 68, "highway": 43, "idle": 7},
     {"period": "2013-07", "city": 62, "highway": 32, "idle": 5},
     {"period": "2013-08", "city": 61, "highway": 32, "idle": 5},
     {"period": "2013-09", "city": 58, "highway": 32, "idle": 7},
     {"period": "2013-10", "city": 60, "highway": 32, "idle": 7},
     {"period": "2013-11", "city": 60, "highway": 32, "idle": 6},
     {"period": "2013-12", "city": 62, "highway": 32, "idle": 8}
    ];
    Morris.Line({
      element: 'fuel-consumption',
      hideHover: 'auto',
      data: fuel_data,
      xkey: 'period',
      xLabels: 'month',
      ykeys: ['city', 'highway', 'idle'],
      postUnits: ' l/100km',
      labels: ['City', 'Highway', 'Idle'],
      resize: true,
      lineColors: ['#A52A2A','#72A0C1','#7BB661']
      //yLabelFormat: function(y) { return y.toString() + ' l/100km'; }
    });
    // / Fuel per 1000k data //
    // Fuel projection //
    Morris.Donut({
      element: 'fuel-projection',
      hideHover: 'auto',
      resize: true,
      data: [
        {label: 'Consumption until today', value: 180 },
        {label: 'Projected consumption', value: 400 },
      ],
      colors: ['#7BB661','#72A0C1'],
      formatter: function (y) { return y + " liters" }
    });
    // / Fuel projection //
    // CO2 Emissons //
    bar = Morris.Bar({
      element: 'co2-emissions',
      resize: true,
      data: [
        {month: 'Jan', emissions: 35},
        {month: 'Feb', emissions: 37},
        {month: 'Mar', emissions: 40},
        {month: 'Apr', emissions: 38},
        {month: 'Maj', emissions:...