JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="panel panel-filled">
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="file-display">Upload only csv files</label>
                            <div class="input-group">
                                <input id="file-display" type="text" class="form-control" placeholder="File name...">
                                <span class="input-group-btn">
                                    <label style="margin-left: 2px;" for="doc" class="btn btn-warning">
                                        <input accept=".csv" style="display: none" type="file" name="doc" id="doc">
                                        <i class="fa fa-upload"></i>
                                        <span class="bold">Upload</span>
                                    </label>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-warning">Upload</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

.btn.sqr-btn {
            border-radius: 0px;
        }

        body {
            background: #2f323b;
            font-family: 'Roboto Condensed', sans-serif;
            color: #949ba2;
        }

        .panel.panel-filled {
            background-color: rgba(68, 70, 79, 0.5);
        }

        .form-control {
            color: #949ba2;
            border: none;
            border-radius: 4px;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transition: none;
            -o-transition: none;
            transition: none;
            background-color: #494b54;
        }

        .form-control:focus {
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        .btn-warning {
            color: #949ba2;
            background-color: transparent;
            border-color: #f7af3e;
        }

        .btn-warning:focus,
        .btn-warning.focus {
            color: #ffffff;
            background-color: rgba(247, 175, 62, 0.1);
            border-color: #f7af3e;
            outline: 0;
            box-shadow: none;
        }

        .btn-warning:hover {
            color: #ffffff;
            background-color: rgba(247, 175, 62, 0.1);
            border-color: #f7af3e;
        }

        .btn-warning:active,
        .btn-warning.active,
        .open>.dropdown-toggle.btn-warning {
            color: #ffffff;
            background-color: rgba(247, 175, 62, 0.1);
            border-color: #f7af3e;
        }

        .btn-warning:active:hover,
        .btn-warning.active:hover,
        .open>.dropdown-toggle.btn-warning:hover,
        .btn-warning:active:focus,
        .btn-warning.active:focus,
        .open>.dropdown-toggle.btn-warning:focus,
        .btn-warning:active.focus,
        .btn-warning.active.focus,
        .open>.dropdown-toggle.btn-warning.focus {
            color: #ffffff;
            background-color: rgba(247, 175, 62, 0.1);
            border-color: #f9c36f;
           ...

JavaScript

var data = [
  [1472045400000, 108.57, 108.75, 107.68, 108.03],
  [1472131800000, 107.39, 107.88, 106.68, 107.57],
  [1472218200000, 107.41, 107.95, 106.31, 106.94],
  [1472477400000, 106.62, 107.44, 106.29, 106.82],
  [1472563800000, 105.8, 106.5, 105.5, 106],
  [1472650200000, 105.66, 106.57, 105.64, 106.1],
  [1472736600000, 106.14, 106.8, 105.62, 106.73],
  [1472823000000, 107.7, 108, 106.82, 107.73],
  [1473168600000, 107.9, 108.3, 107.51, 107.7],
  [1473255000000, 107.83, 108.76, 107.07, 108.36],
  [1473341400000, 107.25, 107.27, 105.24, 105.52]
];
var setting = {
  period: 5,
  field: "close"
};

console.log(EMA(data, setting));

function SMA(array, setting) {
  var temp = [];
  for (let index = 0; index < array.length; index++) {
    const element = array[index];
    if (index >= setting.period - 1) {
      temp.push([
        element[0],
        avg(
          array.slice(index - (setting.period - 1), index + 1),
          getFieldIndex("close")
        )
      ]);
    }
  }
  return temp;
}

function EMA(array, setting) {
  var temp = [];
  for (let index = 0; index < array.length; index++) {
    const element = array[index];
    if ((index = setting.period - 1)) {
      temp.push([
        element[0],
        avg(
          array.slice(index - (setting.period - 1), index + 1),
          getFieldIndex("close")
        )
      ]);
    } else if (index > setting.period - 1) {
      console.log(index);
    }
  }
}

function avg(array, pos) {
  var sum = 0;
  for (let index = 0; index < array.length; index++) {
    const element = array[index];
    sum += element[pos];
  }
  return Number((sum / array.length).toFixed(2));
}

function getFieldIndex(field) {
  var mapping = {
    open: 1,
    high: 2,
    low: 3,
    close: 4
  };
  return mapping["close"];
}

/*...