diff --git a/css/styles.css b/css/styles.css
index aacb4746..0db14205 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -757,6 +757,18 @@ ol li {
/****************/
+
+/*****************
+highcharts chart
+*****************/
+
+.highcharts-tooltip table {
+ width: 100%;
+}
+
+/****************/
+
+
@media (max-width: 1100px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.1rem;
diff --git a/js/markets.js b/js/markets.js
index 1e92868f..77c05b4c 100644
--- a/js/markets.js
+++ b/js/markets.js
@@ -1,343 +1,297 @@
-function getUrlParameter(sParam) {
- var sPageURL = decodeURIComponent(window.location.search.substring(1)),
- sURLVariables = sPageURL.split('&'),
- sParameterName,
- i;
+var pair = getUrlParameter( "currency" );
+buildData( pair );
- for (i = 0; i < sURLVariables.length; i++) {
- sParameterName = sURLVariables[i].split('=');
- if (sParameterName[0] === sParam) {
- return sParameterName[1] === undefined ? true : sParameterName[1];
- }
- }
-};
-
-function buildTKR(pair, print){
- if(pair !== undefined){
- var ticker = '';
- if (pair == 'btc'){
- ticker = 'BTC';
- }else{
- ticker = pair.replace("btc", '');
- ticker = ticker.replace("_", '').toUpperCase();
- }
- if(pair === 'btc' && print === false){return ''; }else{ return ticker; }
- }
-}
-
-function buildTitle(valueFinal, pair){
- if(pair !== 'btc'){
- var suffix = '';
- suffix = ' '+buildTKR(pair)+'';
- if(pair.startsWith("btc")){
- valueFinal = valueFinal;
- }else{
- valueFinal = 1 / valueFinal;
- }
- valueFinal = Math.round(valueFinal * 100) / 100;
- return '1 BTC'+''+valueFinal+''+suffix;
- }else{
- return 'Volume and'+'Trades';
- }
-}
+$( document ).ready( function() {
+ $(".chosen-select").chosen( { width: "100%" } );
-function getTrades(pair){
-
- var actionTicker = ' '+buildTKR(pair);
- var jsonUrl = '';
- var tradeDate = '';
- var dateFormat = "mmm d, yyyy - HH:MM:ss";
-
- if(pair === undefined || pair === 'all'){
-
- pair = 'all';
- jsonUrl = 'https://markets.bisq.network/api/trades?market=all&format=jsonpretty';
- //jsonUrl = baseUrl+'/js/sample_data/trades_all.json';
-
- $.get( jsonUrl, function( data ) {
+ $( '.chosen-select').change(function(){
+ var url = window.location.href.split( '?' )[0];
+ if( $( "#currency" ).val() !== 'Select' ) {
+ url += "?currency=" + encodeURIComponent( $( "#currency" ).val() );
+ }
- $('').append(
- $('| ').text('Date'),
- $(' | ').text('Action'),
- $(' | ').text('Price'),
- $(' | ').text('Amount in BTC'),
- $(' | ').text('Amount')
- ).appendTo('#trade-history-header');
+ window.location.href = url;
+ });
+});
- $.each( JSON.parse(data), function( key, val ) {
- /*
- amount: "0.03260000"
- direction: "SELL"
- market: "btc_usd"
- payment_method: "CLEAR_X_CHANGE"
- price: "7058.66910000"
- trade_date: 1539908123775
- trade_id: "FYFTP-ba7cb6c2-7a40-4b91-9a70-003ed8823585-080"
- volume: "230.11260000"
- */
+function getUrlParameter( requestedParam ) {
+ var queryString = decodeURIComponent( window.location.search.substring(1) );
+ var queryVars = queryString.split('&');
+ var queryParam = "";
- tradeDate = new Date(val.trade_date);
+ for( var i = 0; i < queryVars.length; i++ ) {
+ queryParam = queryVars[i].split( '=' );
- $(' |
').append(
- $('| ').html(tradeDate.format(dateFormat)),
- $(' | ').text(val.direction + ' ' + buildTKR(val.market)),
- $(' | ').text(parseFloat(val.price)),
- $(' | ').text(parseFloat(val.amount)),
- $(' | ').text(parseFloat(val.volume) + ' ' + buildTKR(val.market))
- ).appendTo('#trade-history-body');
+ if ( queryParam[0] === requestedParam ) {
+ return queryParam[1];
+ }
+ }
+};
- });
- });
+function buildTicker( pair ) {
+ var ticker = '';
+ if( !pair || pair === 'all' || pair === 'btc' ) {
+ return "BTC";
+ } else {
+ ticker = pair.replace( "btc", '' ).replace( "_", '' );
+ return ticker.toUpperCase();
+ }
+}
- }else{
+function buildChartTitle( valueFinal, pair ) {
+ if( pair !== 'btc' ) {
+ var suffix = '';
+ suffix = ' ' + buildTicker( pair ) + '';
+ if( !pair.startsWith( "btc" ) ) {
+ valueFinal = Math.round( ( 1 / valueFinal ) * 100 ) / 100;
+ }
+ return '1 BTC' + '' + roundToSigFigs( valueFinal ) + '' + suffix;
+ } else {
+ return 'Volume and' + 'Trades';
+ }
+}
- jsonUrl = 'https://markets.bisq.network/api/trades?market='+pair;
- //jsonUrl = baseUrl+'/js/sample_data/trades_'+pair+'.json';
+//keep all numbers to constant significant figures
+function roundToSigFigs( num ) {
- console.log(jsonUrl);
+ var precision = 0;
+ num = parseFloat( num );
+ if( num < parseFloat( .1 ) ) {
+ precision = Math.floor( Math.log10( num ) ) + 1;
+ return num.toPrecision( ( 5 + precision ) < 1 ? 1 : ( 5 + precision ) );
+ } else {
+ precision = Math.floor( Math.log10( num/.0001 ) ) - 1;
+ return num.toPrecision( precision );
+ }
+}
- $.get( jsonUrl, function( data ) {
+//fill past trades table
+function getTrades( pair ) {
- $('#offers').show();
+ var actionTicker = buildTicker( pair );
+ var jsonUrl = '';
+ var tradeDate = '';
+ var dateFormat = "mmm d, yyyy - HH:MM:ss";
- if(pair.startsWith("btc")){
- $(' |
').append(
- $('| ').text('Date'),
- $(' | ').text('Action'),
- $(' | ').text('Price ('+buildTKR(pair)+')'),
- $(' | ').text('Trade Size (BTC)'),
- $(' | ').text('Trade Size ('+buildTKR(pair)+')')
- ).appendTo('#trade-history-header');
+ if( !pair ) {
- }else{
- $(' |
').append(
- $('| ').text('Date'),
- $(' | ').text('Action'),
- $(' | ').text('Price (BTC)'),
- $(' | ').text('Trade Size ('+buildTKR(pair)+')'),
- $(' | ').text('Trade Size (BTC)')
- ).appendTo('#trade-history-header');
- }
+ pair = 'all';
+ jsonUrl = 'https://markets.bisq.network/api/trades?market=all&format=jsonpretty';
+ $.get( jsonUrl, function( data ) {
- $.each( JSON.parse(data) , function( key, val ) {
- /*
- amount: "0.03260000"
- direction: "SELL"
- market: "btc_usd"
- payment_method: "CLEAR_X_CHANGE"
- price: "7058.66910000"
- trade_date: 1539908123775
- trade_id: "FYFTP-ba7cb6c2-7a40-4b91-9a70-003ed8823585-080"
- volume: "230.11260000"
- */
+ $( ' |
' ).append(
+ $( '| ' ).text( 'Date' ),
+ $( ' | ' ).text( 'Action' ),
+ $( ' | ' ).text( 'Price' ),
+ $( ' | ' ).text( 'Amount in BTC' ),
+ $( ' | ' ).text( 'Trade Amount')
+ ).appendTo( '#trade-history-header' );
- tradeDate = new Date(val.trade_date);
+ data = JSON.parse(data);
+ $.each( data, function( key, val ) {
- $(' |
').append(
- $('| ').text(tradeDate.format(dateFormat)),
- $(' | ').text(val.direction+actionTicker),
- $(' | ').text(parseFloat(val.price)),
- $(' | ').text(parseFloat(val.amount)),
- $(' | ').text(parseFloat(val.volume))
- ).appendTo('#trade-history-body');
+ tradeDate = new Date( val.trade_date );
- });
+ $( ' |
' ).append(
+ $( '| ' ).html( tradeDate.format( dateFormat ) ),
+ $( ' | ' ).text( val.direction + ' ' + buildTicker( val.market ) ),
+ $( ' | ' ).text( roundToSigFigs( val.price ) + ( val.payment_method === 'BLOCK_CHAINS' ? ' BTC' : ' ' + buildTicker( val.market ) ) ),
+ $( ' | ' ).text( ( val.payment_method === 'BLOCK_CHAINS' ? roundToSigFigs( val.volume ) : roundToSigFigs( val.amount ) ) ),
+ $( ' | ' ).text( ( val.payment_method === 'BLOCK_CHAINS' ? roundToSigFigs( val.amount ) : roundToSigFigs( val.volume ) ) + ' ' + buildTicker( val.market ) )
- });
+ ).appendTo( '#trade-history-body' );
- }
+ });
-}
+ });
+ } else {
+ jsonUrl = 'https://markets.bisq.network/api/trades?market=' + pair;
+ $.get( jsonUrl, function( data ) {
+ $( '#offers').show();
+ if( pair.startsWith( "btc" ) ){
+ $( ' |
' ).append(
+ $( '| ' ).text( 'Date' ),
+ $( ' | ' ).text( 'Action' ),
+ $( ' | ' ).text( 'Price (' + buildTicker( pair ) + ')' ),
+ $( ' | ' ).text( 'Trade Size (BTC)' ),
+ $( ' | ' ).text( 'Trade Size (' + buildTicker( pair ) + ')' )
+ ).appendTo( '#trade-history-header' );
+ } else {
+ $( ' |
' ).append(
+ $( '| ' ).text( 'Date' ),
+ $( ' | ' ).text( 'Action' ),
+ $( ' | ' ).text( 'Price (BTC)' ),
+ $( ' | ' ).text( 'Trade Size (BTC)' ),
+ $( ' | ' ).text( 'Trade Size (' + buildTicker( pair ) + ')' )
+ ).appendTo( '#trade-history-header' );
+ }
+ data = JSON.parse( data );
+ $.each( data , function( key, val ) {
+ tradeDate = new Date(val.trade_date);
+ $( ' |
' ).append(
+ $( '| ' ).text( tradeDate.format( dateFormat ) ),
+ $( ' | ' ).text( val.direction + ' ' + actionTicker ),
+ $( ' | ' ).text( roundToSigFigs( parseFloat( val.price ) ) ),
+ $( ' | ' ).text( ( val.payment_method === 'BLOCK_CHAINS' ? roundToSigFigs( val.volume ) : roundToSigFigs( val.amount ) ) ),
+ $( ' | ' ).text( ( val.payment_method === 'BLOCK_CHAINS' ? roundToSigFigs( val.amount ) : roundToSigFigs( val.volume ) ) )
+ ).appendTo('#trade-history-body' );
+ });
+ });
-function getOffers(pair){
+ }
- if(pair == undefined || pair === 'all'){
- pair = 'all';
- }
+}
- var volTotal = 0;
- var jsonUrl = 'https://markets.bisq.network/api/offers?market='+pair+'&format=jsonpretty';
- //jsonUrl = baseUrl+'/js/sample_data/offers_'+pair+'.json';
+//fill current offers table
+function getOffers( pair ){
- console.log(jsonUrl);
+ if( !pair || pair === 'all' ){
+ return;
+ }
- $.getJSON( jsonUrl, function( data ) {
+ var jsonUrl = 'https://markets.bisq.network/api/offers?market=' + pair + '&format=jsonpretty';
+ $.getJSON( jsonUrl, function( data ) {
- if(pair.startsWith("btc")){
- $(' |
').append(
- $('| ').text('Price'),
- $(' | ').text('BTC'),
- $(' | ').text(buildTKR(pair)),
- $(' | ').text('Sum ('+buildTKR(pair)+')'),
+ if( pair.startsWith( "btc" ) ) {
+ $( ' |
' ).append(
+ $( '| ' ).text( 'Price' ),
+ $( ' | ' ).text( 'Offer Amount (BTC)' ),
+ $( ' | ' ).text( 'Offer Price (' + ( buildTicker( pair ) + ')' ) ),
).appendTo('#buy-offers-header');
- $(' |
').append(
- $('| ').text('Price'),
- $(' | ').text('BTC'),
- $(' | ').text(buildTKR(pair)),
- $(' | ').text('Sum ('+buildTKR(pair)+')'),
- ).appendTo('#sell-offers-header');
- }else{
- $(' |
').append(
- $('| ').text('Price'),
- $(' | ').text(buildTKR(pair)),
- $(' | ').text('BTC'),
- $(' | ').text('Sum (BTC)'),
+
+ $( ' |
' ).append(
+ $( '| ' ).text( 'Price' ),
+ $( ' | ' ).text( 'Offer Amount (BTC)' ),
+ $( ' | ' ).text( 'Offer Price (' + ( buildTicker( pair ) + ')' ) ),
+ ).appendTo( '#sell-offers-header' );
+ } else {
+ $( ' |
' ).append(
+ $( '| ' ).text( 'Price' ),
+ $( ' | ' ).text( 'Offer Amount (' + buildTicker( pair ) + ')' ),
+ $( ' | ' ).text( 'Offer Price (BTC)' ),
).appendTo('#buy-offers-header');
- $(' |
').append(
- $('| ').text('Price'),
- $(' | ').text(buildTKR(pair)),
- $(' | ').text('BTC'),
- $(' | ').text('Sum (BTC)'),
- ).appendTo('#sell-offers-header');
- }
+ $( ' |
' ).append(
+ $( '| ' ).text( 'Price' ),
+ $( ' | ' ).text( 'Offer Amount (' + buildTicker( pair ) + ')' ),
+ $( ' | ' ).text( 'Offer Price (BTC)' ),
+ ).appendTo( '#sell-offers-header' );
+ }
$.each( data[pair].buys, function( key, val ) {
- volTotal = parseFloat(volTotal) + parseFloat(val.volume);
- $(' |
').append(
- $('| ').text(parseFloat(val.price)),
- $(' | ').text(parseFloat(val.amount)),
- $(' | ').text(parseFloat(val.volume)),
- $(' | ').text(volTotal)
- ).appendTo('#buy-offers-body');
-
+ $( ' |
' ).append(
+ $( '| ' ).text( roundToSigFigs( parseFloat( val.price ) ) ),
+ $( ' | ' ).text( roundToSigFigs( parseFloat( val.amount ) ) ),
+ $( ' | ' ).text( roundToSigFigs( parseFloat( val.volume ) ) ),
+ ).appendTo('#buy-offers-body');
});
$.each( data[pair].sells, function( key, val ) {
- volTotal = parseFloat(volTotal) + parseFloat(val.volume);
- $(' |
').append(
- $('| ').text(parseFloat(val.price)),
- $(' | ').text(parseFloat(val.amount)),
- $(' | ').text(parseFloat(val.volume)),
- $(' | ').text(volTotal)
- ).appendTo('#sell-offers-body');
+ $( ' |
' ).append(
+ $( '| ' ).text( roundToSigFigs( parseFloat( val.price ) ) ),
+ $( ' | ' ).text( roundToSigFigs( parseFloat( val.amount ) ) ),
+ $( ' | ' ).text( roundToSigFigs( parseFloat( val.volume ) ) ),
+ ).appendTo( '#sell-offers-body' );
});
- $('#offers').show();
+ $( '#offers').show();
});
}
+//call table functions and build the chart
+function buildData( jsonUrl ){
+ var jsonUrl = "";
-function buildData(jsonUrl){
+ if( !pair || pair === 'all' ) {
+ pair = 'btc';
+ jsonUrl = "https://markets.bisq.network/api/volumes?basecurrency=btc&milliseconds=true×tamp=no&format=jscallback&fillgaps=&callback=?&interval=day";
+ getTrades();
- if(pair == undefined || pair === 'all'){
- //api/volumes?basecurrency=BTC&milliseconds=true×tamp=no&format=jscallback&fillgaps=
- pair = 'btc';
+ } else {
- jsonUrl = "https://markets.bisq.network/api/volumes?basecurrency=btc&milliseconds=true×tamp=no&format=jscallback&fillgaps=&callback=?&interval=day";
- //console.log("chart volumes: " + pair);
- getTrades('all');
+ jsonUrl = 'https://markets.bisq.network/api/hloc' + '?market=' + pair + '×tamp=no' + '&interval=minute' + '×tamp_from=' + '×tamp_to=' + '&format=jscallback'+'&callback=?';
+ getTrades( pair );
+ getOffers( pair );
- }else{
- var jsonUrl = 'https://markets.bisq.network/api/hloc'+'?market='+pair+'×tamp=no'+'&interval=minute'+'×tamp_from='+'×tamp_to='+'&format=jscallback'+'&callback=?';
- console.log("chart hloc: " + pair);
- getTrades(pair);
- getOffers(pair);
}
- $.getJSON(jsonUrl, function (data) {
+ $.getJSON( jsonUrl, function( data ) {
+ //split the data set into hloc and volume
+ var seriesTitle1 = 'Price';
+ var dataLength = data.length;
+ var avg = []; var volume = [];
- // split the data set into ohlc and volume
- var
- //ohlc = [],
- seriesTitle1 = 'Price',
- avg = [],
- volume = [],
- dataLength = data.length,
- // set the allowed units for data grouping
- groupingUnits = [[
- 'week', // unit name
- [1] // allowed multiples
- ], [
- 'month',
- [1, 2, 3, 4, 6]
- ]],
+ for( var i = 0; i < dataLength; i += 1 ) {
- i = 0;
+ if( pair === 'btc' ) {
+ avg.push([
+ data[i][0], // the date
+ data[i][2] // the num of trades
+ ]);
+ volume.push([
+ data[i][0], // the date
+ data[i][1] // the volume_right
+ ]);
+ seriesTitle1 = '# of trades';
- for (i; i < dataLength; i += 1) {
- /*
- ohlc.push([
- data[i][0], // the date
- data[i][1], // open
- data[i][2], // high
- data[i][3], // low
- data[i][4] // close
- ]);
- */
-
- if(pair === 'btc'){
-
- avg.push([
- data[i][0], // the date
- data[i][2] // the num of trades
- ]);
-
- volume.push([
- data[i][0], // the date
- data[i][1] // the volume_right
- ]);
-
- seriesTitle1 = 'Num of trades';
-
- }else{
- if(pair.startsWith("btc")){
- avg.push([
- data[i][0]*1000, // the date
- data[i][7] // the average
- ]);
- }else{
- avg.push([
- data[i][0]*1000, // the date
- (1 / data[i][7]) // the average
- ]);
- }
- volume.push([
- data[i][0]*1000, // the date
- data[i][6] // the volume_right
+ } else {
+ if( pair.startsWith( "btc" ) ) {
+ avg.push([
+ data[i][0] * 1000, // the date
+ data[i][7] // the average
+ ]);
+ } else {
+ avg.push([
+ data[i][0] * 1000, // the date
+ ( 1 / data[i][7] ) // the average
]);
+ }
+ volume.push([
+ data[i][0] * 1000, // the date
+ data[i][6] // the volume_right
+ ]);
}
}
Highcharts.setOptions({
- lang: {
- rangeSelectorZoom: ''
- }
+ lang: {
+ rangeSelectorZoom: ''
+ }
});
// create the chart
- Highcharts.stockChart('container', {
+ Highcharts.stockChart( 'container', {
rangeSelector: {
selected: 5,
@@ -374,26 +328,7 @@ function buildData(jsonUrl){
}
},
buttons: [
-
{
- type: 'hour',
- count: 1,
- text: '1H'
- },
-
- {
- type: 'day',
- count: 1,
- text: '1D'
- }, {
- type: 'week',
- count: 1,
- text: '1W'
- }, {
- type: 'month',
- count: 1,
- text: '1M'
- }, {
type: 'year',
count: 1,
text: '1Y'
@@ -421,7 +356,7 @@ function buildData(jsonUrl){
},
title: {
- text: buildTitle(data[dataLength-1][7], pair),
+ text: buildChartTitle(data[dataLength-1][7], pair),
align: 'left',
x:20,
y:30,
@@ -429,11 +364,6 @@ function buildData(jsonUrl){
style: { zIndex: 0, },
},
-
-
-
-
-
navigator: {
enabled: false
},
@@ -447,14 +377,6 @@ function buildData(jsonUrl){
enabled: false
},
- dataGrouping: {
- enabled: true,
- forced: true,
- units: [
- ['month', [1, 3, 6]]
- ]
- },
-
yAxis: [
{
labels: {
@@ -551,7 +473,7 @@ function buildData(jsonUrl){
type: 'line',
name: seriesTitle1,
tooltip: {
- valueSuffix: ' '+buildTKR(pair, false)
+ pointFormat: ' |
| {series.name}: | ' + ' ' + ( pair === 'btc' ? '{point.y:.0f}' : '{point.y:.2f}' ) + ' |
',
},
data: avg,
yAxis: 1,
@@ -560,7 +482,12 @@ function buildData(jsonUrl){
fillOpacity: 0.6,
yAxis: 0,
zIndex: 1,
- lineWidth: 1
+ lineWidth: 1,
+ dataGrouping: {
+ approximation: ( pair === 'btc' ) ? 'sum' : 'average',
+ enabled: true,
+ forced: true
+ },
},
@@ -570,7 +497,9 @@ function buildData(jsonUrl){
type: 'column',
name: 'Volume',
tooltip: {
- valueSuffix: ' ' + buildTKR(pair)
+ pointFormatter: function() {
+ return '| ' + this.series.name + ': | ' + Highcharts.numberFormat(this.y, 2, '.', ',') + ' ' + buildTicker( pair ) + ' |
';
+ }
},
data: volume,
color: '#bbb',
@@ -584,6 +513,8 @@ function buildData(jsonUrl){
shadow: false,
borderColor: '#c5c5c5',
dataGrouping: {
+ enabled: true,
+ forced: true,
groupAll: true
}
@@ -602,7 +533,6 @@ function buildData(jsonUrl){
shared: true,
useHTML: true,
headerFormat: '{point.key}',
- pointFormat: '| {series.name}: | ' + ' {point.y} {this.series.tooltipOptions.valueSuffix} |
',
footerFormat: '
',
valueDecimals: 2,
borderRadius: 0,
@@ -624,36 +554,4 @@ function buildData(jsonUrl){
});
});
-
- $('#container').append( "Test
" );
-
}
-
-
-
-
-
-var pair = getUrlParameter('currency');
-buildData(pair);
-
-
-$(document).ready(function() {
- $(".chosen-select").chosen({
- no_results_text: "Oops, nothing found!",
- width: "100%"
- });
- var currency = getUrlParameter('currency');
- if(currency !== undefined){
- $('.chosen-select').val(currency).trigger("chosen:updated");
- }
- $('.chosen-select').change(function(){
- var url = window.location.href.split('?')[0] + '?';
- if($("#currency").val()!='Select')
- url+='currency='+encodeURIComponent($("#currency").val())+'&';
- url = url.replace(/\&$/,'');
- console.log(url);
- window.location.href=url;
- //window.history.pushState("object or string", "Title", url);
- //buildData($("#currency").val());
- });
-});
diff --git a/markets.html b/markets.html
index b542da92..6d23188a 100644
--- a/markets.html
+++ b/markets.html
@@ -161,8 +161,12 @@ Trade History (Last 100 trades)
font-weight: 200;
}
-#tables tr:hover{
- background:#ecf9ed
+#tables tr:hover {
+ background: #ecf9ed;
+}
+
+#tables thead tr:hover {
+ background: initial;
}
#tables td{