Number of Trades: ' + formatNumberShort(Math.abs(this.y)); }); return s; }, shared: true }, series: [{ name: 'Daily', color: '#0d67b3', negativeColor: "#b70300", borderColor: '#23262b', data: [], tooltip: { valueSuffix: ' ' } }], credits: { enabled: false }, }; tradeCount = jQuery.extend(true, {}, tradeCount); var tradeCount = new Highcharts.Chart(tradeCount); jQuery(function($) { 'use strict'; var frame_id = 0; if (localStorage.getItem("home_frame")) { var getArr = JSON.parse(localStorage.getItem("home_frame")); frame_id = getArr.id; $('.frame li').removeClass('active'); $('li[data-symbol = ' + getArr.symbol + ']').addClass('active'); } (function() { var $frame = $('#basic'); var $slidee = $frame.children('ul').eq(0); var $wrap = $frame.parent(); $frame.sly({ horizontal: 1, itemNav: 'basic', smart: 1, activateOn: 'click', mouseDragging: 1, touchDragging: 1, releaseSwing: 1, startAt: frame_id, scrollBar: $wrap.find('.scrollbar'), scrollBy: 1, pagesBar: $wrap.find('.pages'), activatePageOn: 'click', speed: 300, elasticBounds: 1, easing: 'easeOutExpo', dragHandle: 1, dynamicHandle: 1, clickBar: 1, }); $wrap.find('.frame li').on('click', function() { var id = $(this).data("id"); var symbol = $(this).data("symbol"); var name = $(this).data("name"); localStorage.setItem("home_frame", JSON.stringify({ id: id, symbol: symbol, name: name })); $('[id^=live_trades_]').empty(); $('[id^=spinner_]').show(); metricRequest(); tradesRequest(); }); metricRequest(); tradesRequest(); }()); function metricRequest() { const storedFrame = localStorage.getItem("home_frame"); const getArr = storedFrame ? JSON.parse(storedFrame) : { symbol: 'BTC', name: 'Bitcoin' }; const { symbol, name } = getArr; $('#heading').html(`${symbol} - ${name} Metrics`); ajaxRequest({ url: `home_data`, method: "GET", data: { symbol: symbol }, beforeSendCallback: function(xhr) { if (currentRequest) { currentRequest.abort(); } currentRequest = xhr; }, }) .then((response) => { for (const key in response) { $(`.${key}`).html(response[key]); } tradeCount.series[0].setData(response.transChart.reverse()); animateNumbers(); }) .catch((error) => { console.error("Metric Request Error: ", error); }).finally(() => { currentRequest = null; }); } function tradesRequest() { if (localStorage.getItem("home_frame")) { var getArr = JSON.parse(localStorage.getItem("home_frame")); var symbol = getArr.symbol; } else { var symbol = 'BTC'; } ajaxRequest({ url: `home_liveTrades`, method: "GET", data: { symbol: symbol }, beforeSendCallback: function(xhr) { if (tradesRequests) { tradesRequests.abort(); } tradesRequests = xhr; }, }) .then((response) => { var hourly = response['4h']; var fifteen_minute = response['1h']; for (var i in hourly) { var exc_id = i; var tag = ' ' + hourly[i]['btag']; bar_chart(exc_id, hourly[i], '4h'); } for (var i in fifteen_minute) { var exc_id = i; var tag = ' ' + fifteen_minute[i]['btag']; bar_chart(exc_id, fifteen_minute[i], '1h'); } tradesRequests = null; }) .catch((error) => { console.error("Home Trade Request Error: ", error); }); } function bar_chart(id, data, type) { var htmlDiv = ''; var exc_id = "#" + id; var tag = ' ' + data['btag']; if ($(`#live_trades_${type} .${id}`).length) { $('.buyQuantity_' + type).closest(exc_id + "_" + type + " .buyQuantity_" + type) .html( formatNumberShort(data['buy']) + tag); $('.sellQuantity_' + type).closest(exc_id + "_" + type + " .sellQuantity_" + type) .html( formatNumberShort(data['sell']) + tag); $("div#chartLine_" + type).closest(exc_id + "_" + type + " div#chartLine_" + type) .animate({ width: $("span.lineChartBuy_" + type).closest(exc_id + "_" + type + " span.lineChartBuy_" + type).width(data[ 'buy_prc'] + '%'), width: $("span.lineChartSell_" + type).closest(exc_id + "_" + type + " span.lineChartSell_" + type).width(data[ 'sell_prc' ] + '%') }, 2000); $('.bTotalPrc_' + type).closest(exc_id + "_" + type + " .bTotalPrc_" + type).html( parseFloat( data['buy_prc']).toFixed(2) + '%'); $('.sTotalPrc_' + type).closest(exc_id + "_" + type + " .sTotalPrc_" + type).html( parseFloat( data['sell_prc']).toFixed(2) + '%'); } else { htmlDiv = `