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>
      </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

// document ready
(function($) {


  // 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'
  };


  // 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: value[0].data
            };

            // key count
            i++;

          });

        }

      });

    }


    // if logChart exist destroy before rendering new log
    if (log_chart) log_chart.destroy();


    // add graph to wrapper
    $('.log-chart-wrapper').html('<canvas id="log_chart"></canvas>');


    // attach chart js to get element
    var ctx = document.getElementById('log_chart').getContext('2d');


    // log chart settings
    log_chart = new Chart(ctx, {
      type: 'line',
      data: log_data,
      options: {
        responsive: true,
        title: {
          display: true,
          text: log_meta.title,
          fontFamily: 'Panton',
          fontColor: '#fff',
         ...