machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Various fixes and design updates.

Browse Source
This commit is contained in:
Simon Lindh
2020-02-24 22:51:27 +07:00
committed by wiz
parent 76fd441e07
commit 90a1fcaf8d
14 changed files with 55 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@@ -10,18 +10,15 @@ import { StateService } from 'src/app/services/state.service';
})
export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() markHeight = 0;
@Input() txFeePerVSize: number;
blocks: Block[] = [];
blocksSubscription: Subscription;
interval: any;
trigger = 0;
blockWidth = 125;
blockPadding = 30;
arrowLeftPx = 30;
rightPosition = 0;
arrowVisible = false;
arrowLeftPx = 30;
constructor(
private stateService: StateService,
@@ -56,38 +53,10 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
this.arrowVisible = false;
return;
}
const block = this.blocks.find((b) => b.height === this.markHeight);
if (!block) {
return;
}
const blockindex = this.blocks.indexOf(block);
this.arrowVisible = true;
this.rightPosition = blockindex * -(this.blockWidth + this.blockPadding) - 30;
if (!this.txFeePerVSize) {
return;
}
for (let i = 0; i < block.feeRange.length - 1; i++) {
if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) {
const feeRangeIndex = block.feeRange.findIndex((val, index) => this.txFeePerVSize < block.feeRange[index + 1]);
const feeRangeChunkSize = 1 / (block.feeRange.length - 1);
const txFee = this.txFeePerVSize - block.feeRange[i];
const max = block.feeRange[i + 1] - block.feeRange[i];
const blockLocation = txFee / max;
const chunkPositionOffset = blockLocation * feeRangeChunkSize;
const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset;
const blockedFilledPercentage = (block.weight > 4000000 ? 4000000 : block.weight) / 4000000;
const arrowRightPosition = blockindex * (-this.blockWidth + this.blockPadding)
+ ((1 - feePosition) * blockedFilledPercentage * this.blockWidth);
this.rightPosition = arrowRightPosition - 93;
break;
}
const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
if (blockindex !== -1) {
this.arrowVisible = true;
this.arrowLeftPx = blockindex * 155 + 30;
}
}
@@ -100,13 +69,13 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
if (window.innerWidth <= 768) {
return {
top: 155 * this.blocks.indexOf(block) + 'px',
background: `repeating-linear-gradient(to right, #2d3348, #2d3348 ${greenBackgroundHeight}%,
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
#9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
};
} else {
return {
left: 155 * this.blocks.indexOf(block) + 'px',
background: `repeating-linear-gradient(to right, #2d3348, #2d3348 ${greenBackgroundHeight}%,
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
#9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
};
}