JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<div class="container-fluid">
  <div class="row justify-content-center mt-5">
    <div class="col-12 mb-5">

      <div class="log-chart-wrapper pl-5 pr-5"></div>

    </div>
    <div class="col-10 mb-5">

      <form id="log_input">
        <div class="form-group">
          <label for="log_input_data">Log Data</label>
          <textarea class="form-control" id="log_input_data" rows="10"></textarea>
          <small class="form-text text-muted">Copy paste your csv log code here.</small>
        </div>
        <button type="submit" class="btn btn-success">Submit Log</button>
        <button type="button" class="btn btn-info file-upload">Choose file</button>
        <input type="file" name="file" accept=".csv" style="display: none" />
      </form>

    </div>
  </div>
</div>

SCSS

HTML,
BODY {
  background: #1f2024;
  min-height: 100%;
  height: 100%;
  font-size: 1em;
}


/* graph elements
-------------------------------------------------- */

#chartjs-tooltip {
  opacity: 1;
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: white;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.chartjs-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
}


/* formss
-------------------------------------------------- */

TEXTAREA {

  &.form-control {
    background: #25262b;
    border-radius: 0;
    border: 0;
    color: #fff;

    &:focus {
      background: #25262b;
      border: 0;
    }
  }

}

JavaScript

// @codekit-prepend "../bower/bootstrap/dist/js/bootstrap"
// @codekit-prepend "vendor/chart.min.js"
// @codekit-prepend "vendor/hammer.js"
// @codekit-prepend "vendor/chartjs-plugin-zoom.min.js"

// document ready
(function($) {


  var $fileInput = $('input[type=file]');
  $('button.file-upload').on('click', function() {
    $fileInput.click();
  })

  $('input[type=file]').on('change', function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();

    reader.readAsText(file, "UTF-8");
    reader.onload = function(e) {
      var contents = e.target.result;
      $('#log_input_data').val(contents);
      $('form#log_input').submit();
    }

  });


  // vars
  var test_log = [];
  var new_log;
  var log_chart;
  var log_meta;

  const log_data = {};


  // graph line accents
  var accents = {
    0: '#646464',
    1: '#1dbe44',
    2: '#d2c4fd',
    3: '#fd9827',
    4: '#faf9c9',
    5: '#25ceca',
    6: '#6cb842',
    7: '#4fa8fb',
    8: '#e76324',
    9: '#93bc54',
    10: '#fcafa6'
  };


  // render the graph
  function render_chart(data) {

    // if data exists
    if (data) {

      // log meta var
      log_meta = data.meta;

      console.log(log_meta.title);

      // loop through each json object
      $.each(data, function(key, value) {

        // if key is measurements
        if (key === 'measurements') {

          // data sets empty array
          log_data.datasets = [];

          // key counter
          let i = 0;

          // loop through data set items
          $.each(value, function(key, value) {

            // lets stack our data sets
            log_data.datasets[i] = {
              label: key,
              background: accents[i],
              borderColor: accents[i],
              fill: false,
              borderWidth: 2,
              pointRadius: 0,
              pointHoverRadius: 5,
              yAxisID: i > 0 ? 'right-y-axis' : 'left-y-axis',
              lineTension: 0.1,
              data:...