75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import { Component, ElementRef, ViewChild, Input, OnChanges, HostListener } from '@angular/core';
|
|
|
|
interface EpochProgress {
|
|
base: string;
|
|
change: number;
|
|
progress: number;
|
|
minedBlocks: number;
|
|
remainingBlocks: number;
|
|
expectedBlocks: number;
|
|
newDifficultyHeight: number;
|
|
colorAdjustments: string;
|
|
colorPreviousAdjustments: string;
|
|
estimatedRetargetDate: number;
|
|
previousRetarget: number;
|
|
blocksUntilHalving: number;
|
|
timeUntilHalving: number;
|
|
}
|
|
|
|
const EPOCH_BLOCK_LENGTH = 2016; // Bitcoin mainnet
|
|
|
|
@Component({
|
|
selector: 'app-difficulty-tooltip',
|
|
templateUrl: './difficulty-tooltip.component.html',
|
|
styleUrls: ['./difficulty-tooltip.component.scss'],
|
|
})
|
|
export class DifficultyTooltipComponent implements OnChanges {
|
|
@Input() status: string | void;
|
|
@Input() progress: EpochProgress | void = null;
|
|
@Input() cursorPosition: { x: number, y: number };
|
|
|
|
mined: number;
|
|
ahead: number;
|
|
behind: number;
|
|
expected: number;
|
|
remaining: number;
|
|
isAhead: boolean;
|
|
isBehind: boolean;
|
|
isMobile: boolean;
|
|
|
|
tooltipPosition = { x: 0, y: 0 };
|
|
|
|
@ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
|
|
|
|
constructor() {
|
|
this.onResize();
|
|
}
|
|
|
|
ngOnChanges(changes): void {
|
|
if (changes.cursorPosition && changes.cursorPosition.currentValue) {
|
|
let x = changes.cursorPosition.currentValue.x;
|
|
let y = changes.cursorPosition.currentValue.y - 50;
|
|
if (this.tooltipElement) {
|
|
const elementBounds = this.tooltipElement.nativeElement.getBoundingClientRect();
|
|
x -= elementBounds.width / 2;
|
|
x = Math.min(Math.max(x, 20), (window.innerWidth - 20 - elementBounds.width));
|
|
}
|
|
this.tooltipPosition = { x, y };
|
|
}
|
|
if ((changes.progress || changes.status) && this.progress && this.status) {
|
|
this.remaining = this.progress.remainingBlocks;
|
|
this.expected = this.progress.expectedBlocks;
|
|
this.mined = this.progress.minedBlocks;
|
|
this.ahead = Math.max(0, this.mined - this.expected);
|
|
this.behind = Math.max(0, this.expected - this.mined);
|
|
this.isAhead = this.ahead > 0;
|
|
this.isBehind = this.behind > 0;
|
|
}
|
|
}
|
|
|
|
@HostListener('window:resize', ['$event'])
|
|
onResize(): void {
|
|
this.isMobile = window.innerWidth <= 767.98;
|
|
}
|
|
}
|