Update chart colors.
This commit is contained in:
		
							parent
							
								
									344d1247bd
								
							
						
					
					
						commit
						6b5b80f866
					
				@ -1,6 +1,6 @@
 | 
			
		||||
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 | 
			
		||||
import { Observable, combineLatest } from 'rxjs';
 | 
			
		||||
import { filter, map } from 'rxjs/operators';
 | 
			
		||||
import { map } from 'rxjs/operators';
 | 
			
		||||
import { SeoService } from 'src/app/services/seo.service';
 | 
			
		||||
import { StateService } from 'src/app/services/state.service';
 | 
			
		||||
import { WebsocketService } from 'src/app/services/websocket.service';
 | 
			
		||||
 | 
			
		||||
@ -82,7 +82,7 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
 | 
			
		||||
            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)',
 | 
			
		||||
              color: h.close > h.avg ? 'rgba(0, 41, 74, 0.7)' : 'rgba(0, 41, 74, 1)',
 | 
			
		||||
            };
 | 
			
		||||
          })
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
@ -17,9 +17,9 @@
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
:host ::ng-deep .volumeText {
 | 
			
		||||
	color: rgba(37, 177, 53, 1);
 | 
			
		||||
	color: rgba(33, 150, 243, 0.7);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
:host ::ng-deep .tradesText {
 | 
			
		||||
	color: rgba(33, 150, 243, 1);
 | 
			
		||||
	color: rgba(37, 177, 53, 1);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -24,7 +24,6 @@ export class LightweightChartsAreaComponent implements OnChanges, OnDestroy {
 | 
			
		||||
  constructor(
 | 
			
		||||
    private element: ElementRef,
 | 
			
		||||
  ) {
 | 
			
		||||
    
 | 
			
		||||
    this.container = document.createElement('div');
 | 
			
		||||
    const chartholder = this.element.nativeElement.appendChild(this.container);
 | 
			
		||||
 | 
			
		||||
@ -54,20 +53,20 @@ export class LightweightChartsAreaComponent implements OnChanges, OnDestroy {
 | 
			
		||||
      },
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    this.areaSeries = this.chart.addAreaSeries({
 | 
			
		||||
      topColor: 'rgba(33, 150, 243, 0.9)',
 | 
			
		||||
      bottomColor: 'rgba(33, 150, 243, 0.1)',
 | 
			
		||||
      lineColor: 'rgba(33, 150, 243, 1)',
 | 
			
		||||
      lineWidth: 2,
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    this.lineSeries = this.chart.addLineSeries({
 | 
			
		||||
      color: 'rgba(37, 177, 53, 1)',
 | 
			
		||||
      lineColor: 'rgba(216, 27, 96, 1)',
 | 
			
		||||
      lineWidth: 2,
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    var toolTip = document.createElement('div');
 | 
			
		||||
    this.areaSeries = this.chart.addAreaSeries({
 | 
			
		||||
      topColor: 'rgba(33, 150, 243, 0.7)',
 | 
			
		||||
      bottomColor: 'rgba(33, 150, 243, 0.1)',
 | 
			
		||||
      lineColor: 'rgba(33, 150, 243, 0.1)',
 | 
			
		||||
      lineWidth: 2,
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    const toolTip = document.createElement('div');
 | 
			
		||||
    toolTip.className = 'floating-tooltip-2';
 | 
			
		||||
    chartholder.appendChild(toolTip);
 | 
			
		||||
 | 
			
		||||
@ -77,32 +76,32 @@ export class LightweightChartsAreaComponent implements OnChanges, OnDestroy {
 | 
			
		||||
        return;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      var dateStr = isBusinessDay(param.time)
 | 
			
		||||
      const dateStr = isBusinessDay(param.time)
 | 
			
		||||
        ? this.businessDayToString(param.time)
 | 
			
		||||
        : new Date(param.time * 1000).toLocaleDateString();
 | 
			
		||||
 | 
			
		||||
      toolTip.style.display = 'block';
 | 
			
		||||
      var price = param.seriesPrices.get(this.areaSeries);
 | 
			
		||||
      var line = param.seriesPrices.get(this.lineSeries);
 | 
			
		||||
      const price = param.seriesPrices.get(this.areaSeries);
 | 
			
		||||
      const line = param.seriesPrices.get(this.lineSeries);
 | 
			
		||||
 | 
			
		||||
      toolTip.innerHTML = 
 | 
			
		||||
      `<table><tr><td class="volumeText">Volume:<td class="text-right volumeText">${Math.round(price * 100) / 100} BTC</td></tr>
 | 
			
		||||
      toolTip.innerHTML = `<table>
 | 
			
		||||
        <tr><td class="tradesText"># of trades:</td><td class="text-right tradesText">${Math.round(line * 100) / 100}</td></tr>
 | 
			
		||||
        <tr><td class="volumeText">Volume:<td class="text-right volumeText">${Math.round(price * 100) / 100} BTC</td></tr>
 | 
			
		||||
        </table>
 | 
			
		||||
        <div>${dateStr}</div>`;
 | 
			
		||||
 | 
			
		||||
      var y = param.point.y;
 | 
			
		||||
      const y = param.point.y;
 | 
			
		||||
 | 
			
		||||
      var toolTipWidth = 100;
 | 
			
		||||
      var toolTipHeight = 80;
 | 
			
		||||
      var toolTipMargin = 15;
 | 
			
		||||
      const toolTipWidth = 100;
 | 
			
		||||
      const toolTipHeight = 80;
 | 
			
		||||
      const toolTipMargin = 15;
 | 
			
		||||
 | 
			
		||||
      var left = param.point.x + toolTipMargin;
 | 
			
		||||
      let left = param.point.x + toolTipMargin;
 | 
			
		||||
      if (left > this.width - toolTipWidth) {
 | 
			
		||||
        left = param.point.x - toolTipMargin - toolTipWidth;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      var top = y + toolTipMargin;
 | 
			
		||||
      let top = y + toolTipMargin;
 | 
			
		||||
      if (top > this.height - toolTipHeight) {
 | 
			
		||||
        top = y - toolTipHeight - toolTipMargin;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user