JSFiddle - React, Tailwind, and code Playground

by askhflajsf

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<h1>New OHLC data (now just <span></span> objects)</h1>
<p>Go to <a href="#link">original data</a></p>
<pre id="ohlc"></pre>
<h1 id="link">Old original data (<span></span> objects)</h1>
<p><a href="#">Back to top</a></p>
<pre id="original"></pre>

JavaScript

function convertToOHLC(data) {

  // Sort chronologically, needed for open/close later on

  data.sort((a, b) => d3.ascending(a.date, b.date));

  var result = [];

  // Convert milliseconds to date strings

  var format = d3.timeFormat("%Y-%m-%d");
  data.forEach(d => d.date = format(new Date(d.date * 1000)));

  // Create an array with all the different days

  var allDates = [...new Set(data.map(d => d.date))];

  // Populate each day with our new OHLC data

  allDates.forEach(d => {
    var tempObject = {};
    var filteredData = data.filter(e => e.date === d);

    tempObject.date = d;
    tempObject.open = filteredData[0].price;
    tempObject.close = filteredData[filteredData.length - 1].price;
    tempObject.high = d3.max(filteredData, e => e.price);
    tempObject.min = d3.min(filteredData, e => e.price);

    // Save the result

    result.push(tempObject);
  })

  // And return it

  return result
}

/* https://localbitcoins.com/api-docs/ */

var btcExchangeAPI = 'https://cors-anywhere.herokuapp.com/localbitcoins.com/bitcoincharts/';

function getTradeData(country) {
  $.getJSON(btcExchangeAPI + country + '/trades.json', function(data) {
    var localBitcoinsData = convertToOHLC(data);

    console.log(localBitcoinsData);
    $('#ohlc').text(JSON.stringify(localBitcoinsData, null, 2));
    $('#original').text(JSON.stringify(data, null, 2));

    $('h1:nth-of-type(1) span').append(localBitcoinsData.length);
    $('h1:nth-of-type(2) span').append(data.length);
  });
}
getTradeData('eur');