JSFiddle - React, Tailwind, and code Playground

Current Trends

by Dug Sohn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<br/>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h1>

        Current Trends <span style="color:red">+14%</span> <small>Compared to Previous Cycle*</small> </h1>
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="col-sm-3">
      <h2>
        So Far This Cycle
      </h2>

    </div>
    <div class="col-sm-9 progress">
      <div class="bar current progress-bar progress-bar-striped progress-bar-animated bg-success">
        <h4>
          592 kWh <small>in 21 days</small>
        </h4>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3">
      <h2>
        Previous Cycle
      </h2>

    </div>
    <div class="col-sm-9">
      <div class="bar previous">
        <h4>
          882 kWh
        </h4>
      </div>
    </div>
  </div>
  <br/>

  <div class="row ">
    <div class="col-sm-12 text-center">
      <div class="gexstimate">

        <h2 class="text-center ">

          June Usage Gexstimate ** <span style="color:red">1006 kWh</span> </h2>

      </div>
      <h5 style="display:none">
        <button class="btn...

SCSS

@import url(//fonts.googleapis.com/css?family=Oswald:400);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
body {
  font-family: "Open Sans", sans-serif;
  color: #555
}

a, a:link, .btn {
  color: rgba(46, 177, 52, 1.0);
  }
  
hr {
  margin:10px 3px;
  border-color:#fff
}
h2 {margin-top:0}
.chart {
  margin: 0 auto;
  width: 250px;
  height: 250px;
  position: relative;
  font-family: "Oswald", sans-serif;
}
p { margin-bottom:0; font-size:12px}

.doughnutTip {
  position: absolute;
  float: left;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  border-radius: 1px;
  background: rgba(0, 0, 0, .8);
  color: #ddd;
  font-size: 17px;
  text-shadow: 0 1px 0 #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transform: all .3s;
  pointer-events: none;
  font-family: "Oswald", sans-serif;
}

.doughnutTip:after {
  position: absolute;
  left: 50%;
  bottom: -6px;
  content: "";
  height: 0;
  margin: 0 0 0 -6px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, .7);
  line-height: 0;
}

.doughnutSummary {
  position: absolute;
  top: 45%;
  left: 50%;
  color: #d5d5d5;
  text-align: center;
  cursor: default;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
}

.doughnutSummaryTitle {
  position: absolute;
  top: 85%;
  width: 100%;
  font-size: 13px;
  letter-spacing: .06em;
  line-height: 16px;
  color: #000;
  letter-spacing: 1px;
  font-family: "Oswald", sans-serif;
}

.doughnutTypeTitle {
  position: absolute;
  top: 50%;
  width: 100%;
  font-size: 22px;
  letter-spacing: .06em;
  line-height: 22px;
}

.doughnutSummaryNumber {
  position: absolute;
  top: 10%;
  width: 100%;
  margin-top: -3%;
  font-size: 65px;
  left: 0;
  color: rgb(43, 166, 40);
  letter-spacing: -2px;
  font-family: "Oswald", sans-serif;
}


.doughnutSummaryNumber:after {
 ...

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "categoryField": "year",
  "rotate": false,
  "startDuration": 2,
  "categoryAxis": {
    "gridPosition": "start",
    "position": "left"
  },
  "trendLines": [],
  "graphs": [{
      "balloonText": "2016: [[value]] kWh",
      "fillAlphas": 0.8,
      "id": "AmGraph-1",
      "lineAlpha": 0.2,
      "title": "Income",
      "type": "column",
      "valueField": "2016"
    },
    {
      "balloonText": "2017:[[value]] kwh",
      "fillAlphas": 0.8,
      "id": "AmGraph-2",
      "lineAlpha": 0.2,
      "title": "Expenses",
      "type": "column",
      "valueField": "2017"
    }
  ],
  "guides": [],
  "valueAxes": [{
    "id": "ValueAxis-1",
    "position": "top",
    "axisAlpha": 0,
    "title": "Usage in kWH"

  }],
  "allLabels": [],
  "balloon": {},
  "titles": [],
  "dataProvider": [{
      "year": 'Jan',
      "2016": 928,
      "2017": 900,
    
      "months": [{
    "year": 1,
    "2016": 1
  }, {
    "year": 2,
    "2016": 2
  }, {
    "year": 3,
    "2016": 1
  }, {
    "year": 4,
    "2016": 3
  }, {
    "year": 5,
    "2016": 2.5
  }, {
    "year": 6,
    "2016": 1.1
  }, {
    "year": 7,
    "2016": 2.9
  }, {
    "year": 8,
    "2016": 3.5
  }, {
    "year": 9,
    "2016": 3.1
  }, {
    "year": 10,
    "2016": 1.1
  }, {
    "year": 11,
    "2016": 1
  }, {
    "year": 12,
    "2016": 3
  }, {
    "year": 13,
    "2016": 2
    }, {
    "year": 14,
    "2016": 1
    }, {
    "year": 15,
    "2016": 1
    }, {
    "year": 16,
    "2016": 5
    }, {
    "year": 17,
    "2016": 4
    }, {
    "year": 18,
    "2016": 2
    }, {
    "year": 19,
    "2016": 1
    }, {
    "year": 20,
    "2016": 1
    }, {
    "year": 21,
    "2016": 2
    }, {
    "year": 22,
    "2016": 5
    }, {
    "year": 23,
    "2016": 1
    }, {
    "year": 24,
    "2016": 3
    }, {
    "year": 25,
    "2016": 4
    }, {
    "year": 26,
    "2016": 1
    }, {
    "year": 27,
    "2016": 2
   ...