131 lines
3.9 KiB
TypeScript
131 lines
3.9 KiB
TypeScript
import { ChangeDetectorRef, Component } from '@angular/core';
|
|
import { FormControl } from '@angular/forms';
|
|
import { combineLatest, map, Observable, shareReplay } from 'rxjs';
|
|
|
|
import { environment } from '../../../environments/environment';
|
|
import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
|
|
import { AppService } from '../../services/app.service';
|
|
import { bitcoinAddressValidator } from '../../validators/bitcoin-address.validator';
|
|
import { AverageTimeToBlockPipe } from 'src/app/pipes/average-time-to-block.pipe';
|
|
|
|
|
|
@Component({
|
|
selector: 'app-splash',
|
|
templateUrl: './splash.component.html',
|
|
styleUrls: ['./splash.component.scss']
|
|
})
|
|
export class SplashComponent {
|
|
|
|
public address: FormControl;
|
|
|
|
public chartData$: Observable<any>;
|
|
public blockData$: Observable<any>;
|
|
public userAgents$: Observable<any>;
|
|
public highScores$: Observable<any>;
|
|
public uptime$: Observable<string>;
|
|
|
|
public chartOptions: any;
|
|
|
|
public stratumURL = '';
|
|
public secureStratumURL = '';
|
|
|
|
private info$: Observable<any>;
|
|
|
|
private networkInfo: any;
|
|
|
|
constructor(private appService: AppService, private cdr: ChangeDetectorRef) {
|
|
|
|
this.info$ = this.appService.getInfo().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
|
|
|
|
if (environment.STRATUM_URL.length > 1) {
|
|
this.stratumURL = environment.STRATUM_URL;
|
|
} else {
|
|
this.stratumURL = window.location.hostname + ':3333';
|
|
}
|
|
|
|
if (environment.SECURE_STRATUM_URL.length > 1) {
|
|
this.secureStratumURL = environment.SECURE_STRATUM_URL;
|
|
} else {
|
|
this.secureStratumURL = window.location.hostname + ':4333';
|
|
}
|
|
|
|
this.blockData$ = this.info$.pipe(map(info => info.blockData));
|
|
this.userAgents$ = this.info$.pipe(map(info => info.userAgents));
|
|
this.highScores$ = this.info$.pipe(map(info => info.highScores));
|
|
this.uptime$ = this.info$.pipe(map(info => info.uptime))
|
|
|
|
this.chartData$ = combineLatest([this.appService.getInfoChart(), this.appService.getNetworkInfo()]).pipe(
|
|
map(([chartData, networkInfo]) => {
|
|
this.networkInfo = networkInfo;
|
|
return {
|
|
|
|
labels: chartData.map((d: any) => d.label),
|
|
datasets: [
|
|
{
|
|
label: 'Public-Pool Hashrate',
|
|
data: chartData.map((d: any) => d.data),
|
|
fill: false,
|
|
backgroundColor: documentStyle.getPropertyValue('--primary-color'),
|
|
borderColor: documentStyle.getPropertyValue('--primary-color'),
|
|
tension: .4,
|
|
pointRadius: 1,
|
|
borderWidth: 1
|
|
}
|
|
]
|
|
}
|
|
})
|
|
);
|
|
|
|
this.address = new FormControl(null, bitcoinAddressValidator());
|
|
|
|
|
|
|
|
const documentStyle = getComputedStyle(document.documentElement);
|
|
const textColor = documentStyle.getPropertyValue('--text-color');
|
|
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
|
const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
|
|
|
|
|
|
this.chartOptions = {
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: textColor
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
type: 'time',
|
|
time: {
|
|
unit: 'day', // Set the unit to 'minute'
|
|
},
|
|
ticks: {
|
|
color: textColorSecondary
|
|
},
|
|
grid: {
|
|
color: surfaceBorder,
|
|
drawBorder: false,
|
|
display: true
|
|
}
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: textColorSecondary,
|
|
callback: (value: number) => {
|
|
return HashSuffixPipe.transform(value) + " - " + AverageTimeToBlockPipe.transform(value, this.networkInfo.difficulty);
|
|
}
|
|
},
|
|
grid: {
|
|
color: surfaceBorder,
|
|
drawBorder: false
|
|
},
|
|
type: 'logarithmic',
|
|
}
|
|
}
|
|
};
|
|
|
|
}
|
|
}
|