Bisq markets: Volume and other fixes.
This commit is contained in:
		
							parent
							
								
									d99fd5d59a
								
							
						
					
					
						commit
						1d4ed85d50
					
				@ -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,
 | 
			
		||||
 | 
			
		||||
@ -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))
 | 
			
		||||
        ;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -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'));
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -64,7 +64,7 @@ export class BisqApiService {
 | 
			
		||||
    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/offers?market=' + market);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  getMarket24hVolumes$(): Observable<any[]> {
 | 
			
		||||
    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/24hvolumes');
 | 
			
		||||
  getMarketVolumesByTime$(period: string): Observable<any[]> {
 | 
			
		||||
    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/volumes/' + period);
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -8,13 +8,13 @@
 | 
			
		||||
      <th i18n>Currency</th>
 | 
			
		||||
      <th i18n>Pair</th>
 | 
			
		||||
      <th i18n>Price</th>
 | 
			
		||||
      <th i18n>Volume (24h)</th>
 | 
			
		||||
      <th i18n>Trades (24h)</th>
 | 
			
		||||
      <th i18n>Volume (7d)</th>
 | 
			
		||||
      <th i18n>Trades (7d)</th>
 | 
			
		||||
    </thead>
 | 
			
		||||
    <tbody *ngIf="tickers.value; else loadingTmpl">
 | 
			
		||||
      <tr *ngFor="let ticker of tickers.value; trackBy: trackByFn; let i = index">
 | 
			
		||||
        <td>{{ i + 1 }}</td>
 | 
			
		||||
        <td>{{ ticker.market.lname }}</td>
 | 
			
		||||
        <td>{{ ticker.market.rtype === 'crypto' ? ticker.market.lname : ticker.market.rname }}</td>
 | 
			
		||||
        <td><a [routerLink]="['/market' | relativeUrl, ticker.pair_url]">{{ ticker.pair }}</a></td>
 | 
			
		||||
        <td>
 | 
			
		||||
          <app-fiat *ngIf="ticker.market.rtype === 'crypto'; else fiat" [value]="ticker.last * 100000000"></app-fiat>
 | 
			
		||||
 | 
			
		||||
@ -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;
 | 
			
		||||
      })
 | 
			
		||||
 | 
			
		||||
@ -6,16 +6,13 @@
 | 
			
		||||
      <h1>{{ currency.market.lname }} - {{ currency.pair }}</h1>
 | 
			
		||||
      <div class="float-left">
 | 
			
		||||
        <span class="priceheader">
 | 
			
		||||
          <ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto"><span class="green-color">{{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }}</span></ng-container>
 | 
			
		||||
          <ng-template #headerPriceCrypto>{{ hlocData[hlocData.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
 | 
			
		||||
          <ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto"><span class="green-color">{{ hlocData.hloc[hlocData.hloc.length - 1].close | currency: currency.market.rsymbol }}</span></ng-container>
 | 
			
		||||
          <ng-template #headerPriceCrypto>{{ hlocData.hloc[hlocData.hloc.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
 | 
			
		||||
        </span> 
 | 
			
		||||
      </div>
 | 
			
		||||
  
 | 
			
		||||
      <form [formGroup]="radioGroupForm" class="mb-3 float-right">
 | 
			
		||||
        <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="interval">
 | 
			
		||||
          <label ngbButtonLabel class="btn-primary btn-sm">
 | 
			
		||||
            <input ngbButton type="radio" [value]="'minute'"> 1M
 | 
			
		||||
          </label>
 | 
			
		||||
          <label ngbButtonLabel class="btn-primary btn-sm">
 | 
			
		||||
            <input ngbButton type="radio" [value]="'half_hour'"> 30M
 | 
			
		||||
          </label>
 | 
			
		||||
@ -43,7 +40,9 @@
 | 
			
		||||
        </div>
 | 
			
		||||
      </form>
 | 
			
		||||
 | 
			
		||||
      <app-lightweight-charts [data]="hlocData"></app-lightweight-charts>
 | 
			
		||||
      <app-lightweight-charts [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="currency.market.rtype === 'crypto' ? currency.market.lprecision : currency.market.rprecision"></app-lightweight-charts>
 | 
			
		||||
      
 | 
			
		||||
      <div class="float-right small mt-2">Powered by <a href="https://www.tradingview.com/" target="_blank">Tradingview</a></div>
 | 
			
		||||
      
 | 
			
		||||
      <br>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -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)',
 | 
			
		||||
            };
 | 
			
		||||
          })
 | 
			
		||||
        };
 | 
			
		||||
      }),
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
@ -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() {
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user