From 1d4ed85d50168496be1c85b5331b8c98d9b52bd9 Mon Sep 17 00:00:00 2001 From: softsimon Date: Wed, 10 Mar 2021 23:02:55 +0700 Subject: [PATCH] Bisq markets: Volume and other fixes. --- backend/src/api/bisq/markets-api.ts | 4 +-- backend/src/index.ts | 2 +- backend/src/routes.ts | 6 ++--- frontend/src/app/bisq/bisq-api.service.ts | 4 +-- .../bisq-dashboard.component.html | 6 ++--- .../bisq-dashboard.component.ts | 4 +-- .../bisq-market/bisq-market.component.html | 13 +++++----- .../bisq/bisq-market/bisq-market.component.ts | 19 +++++++++----- .../lightweight-charts.component.ts | 25 +++++++++++++++++++ 9 files changed, 57 insertions(+), 26 deletions(-) diff --git a/backend/src/api/bisq/markets-api.ts b/backend/src/api/bisq/markets-api.ts index c29a4dc70..558c390a0 100644 --- a/backend/src/api/bisq/markets-api.ts +++ b/backend/src/api/bisq/markets-api.ts @@ -457,8 +457,8 @@ class BisqMarketsApi { } } - get24hVolumes(): MarketVolume[] { - const timestamp_from = new Date().getTime() / 1000 - 86400; + getVolumesByTime(time: number): MarketVolume[] { + const timestamp_from = new Date().getTime() / 1000 - time; const timestamp_to = new Date().getTime() / 1000; const trades = this.getTradesByCriteria(undefined, timestamp_to, timestamp_from, diff --git a/backend/src/index.ts b/backend/src/index.ts index 6f52fe20b..2754cdfbd 100644 --- a/backend/src/index.ts +++ b/backend/src/index.ts @@ -203,7 +203,7 @@ class Server { .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/ticker', routes.getBisqMarketTicker.bind(routes)) .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/trades', routes.getBisqMarketTrades.bind(routes)) .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/volumes', routes.getBisqMarketVolumes.bind(routes)) - .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/24hvolumes', routes.getBisqMarket24hVolumes.bind(routes)) + .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/volumes/7d', routes.getBisqMarketVolumes7d.bind(routes)) ; } diff --git a/backend/src/routes.ts b/backend/src/routes.ts index fc9acfc28..c4da9feda 100644 --- a/backend/src/routes.ts +++ b/backend/src/routes.ts @@ -401,12 +401,12 @@ class Routes { } } - public getBisqMarket24hVolumes(req: Request, res: Response) { - const result = bisqMarket.get24hVolumes(); + public getBisqMarketVolumes7d(req: Request, res: Response) { + const result = bisqMarket.getVolumesByTime(604800); if (result) { res.json(result); } else { - res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarket24hVolumes error')); + res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarketVolumes7d error')); } } diff --git a/frontend/src/app/bisq/bisq-api.service.ts b/frontend/src/app/bisq/bisq-api.service.ts index 783d0369f..94c065142 100644 --- a/frontend/src/app/bisq/bisq-api.service.ts +++ b/frontend/src/app/bisq/bisq-api.service.ts @@ -64,7 +64,7 @@ export class BisqApiService { return this.httpClient.get(API_BASE_URL + '/markets/offers?market=' + market); } - getMarket24hVolumes$(): Observable { - return this.httpClient.get(API_BASE_URL + '/markets/24hvolumes'); + getMarketVolumesByTime$(period: string): Observable { + return this.httpClient.get(API_BASE_URL + '/markets/volumes/' + period); } } diff --git a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html index 55dde5ec9..c9f3d772c 100644 --- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html +++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html @@ -8,13 +8,13 @@ Currency Pair Price - Volume (24h) - Trades (24h) + Volume (7d) + Trades (7d) {{ i + 1 }} - {{ ticker.market.lname }} + {{ ticker.market.rtype === 'crypto' ? ticker.market.lname : ticker.market.rname }} {{ ticker.pair }} diff --git a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts index f9e19142d..497382c12 100644 --- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts +++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts @@ -24,7 +24,7 @@ export class BisqDashboardComponent implements OnInit { this.tickers$ = combineLatest([ this.bisqApiService.getMarketsTicker$(), this.bisqApiService.getMarkets$(), - this.bisqApiService.getMarket24hVolumes$(), + this.bisqApiService.getMarketVolumesByTime$('7d'), ]) .pipe( map(([tickers, markets, volumes]) => { @@ -37,7 +37,7 @@ export class BisqDashboardComponent implements OnInit { newTickers.push(tickers[t]); } - newTickers.sort((a, b) => (b.volume && b.volume.volume || 0) - (a.volume && a.volume.volume || 0)); + newTickers.sort((a, b) => (b.volume && b.volume.num_trades || 0) - (a.volume && a.volume.num_trades || 0)); return newTickers; }) diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.html b/frontend/src/app/bisq/bisq-market/bisq-market.component.html index bc7190538..fef8aeb58 100644 --- a/frontend/src/app/bisq/bisq-market/bisq-market.component.html +++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.html @@ -6,16 +6,13 @@

{{ currency.market.lname }} - {{ currency.pair }}

- {{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }} - {{ hlocData[hlocData.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }} + {{ hlocData.hloc[hlocData.hloc.length - 1].close | currency: currency.market.rsymbol }} + {{ hlocData.hloc[hlocData.hloc.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}
- @@ -43,8 +40,10 @@
- - + + +
Powered by Tradingview
+
diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.ts b/frontend/src/app/bisq/bisq-market/bisq-market.component.ts index 8fba629f6..05e9a79e9 100644 --- a/frontend/src/app/bisq/bisq-market/bisq-market.component.ts +++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.ts @@ -46,11 +46,8 @@ export class BisqMarketComponent implements OnInit, OnDestroy { this.offers$ = this.route.paramMap .pipe( map(routeParams => routeParams.get('pair')), - tap((marketPair) => this.websocketService.startTrackBisqMarket(marketPair)), switchMap((marketPair) => this.bisqApiService.getMarketOffers$(marketPair)), - map((offers) => { - return offers[Object.keys(offers)[0]]; - }) + map((offers) => offers[Object.keys(offers)[0]]) ); this.hlocData$ = combineLatest([ @@ -62,11 +59,21 @@ export class BisqMarketComponent implements OnInit, OnDestroy { const pair = routeParams.get('pair'); return this.bisqApiService.getMarketsHloc$(pair, interval); }), - map((hloc) => { - return hloc.map((h) => { + map((hlocData) => { + hlocData = hlocData.map((h) => { h.time = h.period_start; return h; }); + return { + hloc: hlocData, + volume: hlocData.map((h) => { + return { + time: h.time, + value: h.volume_right, + color: h.close > h.avg ? 'rgba(0, 150, 136, 0.8)' : 'rgba(255,82,82, 0.8)', + }; + }) + }; }), ); } diff --git a/frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts b/frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts index 1fe72261c..30bfc1e9e 100644 --- a/frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts +++ b/frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts @@ -9,7 +9,11 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, O }) export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnDestroy { @Input() data: any; + @Input() volumeData: any; + @Input() precision: number; + lineSeries: any; + volumeSeries: any; chart: any; constructor( @@ -36,6 +40,18 @@ export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnD }, }); this.lineSeries = this.chart.addCandlestickSeries(); + + this.volumeSeries = this.chart.addHistogramSeries({ + color: '#26a69a', + priceFormat: { + type: 'volume', + }, + priceScaleId: '', + scaleMargins: { + top: 0.8, + bottom: 0, + }, + }); } ngAfterViewInit(): void { @@ -60,6 +76,15 @@ export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnD return; } this.lineSeries.setData(this.data); + this.volumeSeries.setData(this.volumeData); + + this.lineSeries.applyOptions({ + priceFormat: { + type: 'price', + precision: this.precision, + minMove: 0.0000001, + }, + }); } ngOnDestroy() {