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

Use dynamic gradient based on fee levels on mempool blocks.

Browse Source 
fixes #64
This commit is contained in:
softsimon 2020-05-24 22:23:56 +07:00
parent 4d2fcf96c6
commit ba007a4b17
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
4 changed files with 57 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app/app.constants.ts Normal file
View File

@ -0,0 +1,26 @@
export const mempoolFeeColors = [
'bd7c13',
'bd7718',
'bd7619',
'bd721d',
'be6e21',
'be6b24',
'be6827',
'be652a',
'be622d',
'be5f30',
'be5c33',
'bf543b',
'c0513e',
'c04d42',
'c14a45',
'c2454a',
'c3424d',
'c33f50',
'c3404f',
'c43955',
'c5345a',
];
export const feeLevels = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200,
250, 300, 350, 400, 500, 600, 700, 800, 900, 1000, 1200, 1400, 1600, 1800, 2000];

1
frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
View File

@ -1,5 +1,4 @@
import { Component, Input, OnChanges } from '@angular/core';
import { VbytesPipe } from 'src/app/pipes/bytes-pipe/vbytes.pipe';
import * as Chartist from 'chartist';
@Component({

2
frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
View File

@ -1,7 +1,7 @@
<div class="mempool-blocks-container">
<div class="flashing">
<div *ngFor="let projectedBlock of mempoolBlocks; let i = index; trackBy: trackByFn">
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="getStyleForMempoolBlockAtIndex(i)">
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
<a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
<div class="block-body" *ngIf="mempoolBlocks?.length">
<div class="fees">

36
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@ -4,15 +4,17 @@ import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
import { StateService } from 'src/app/services/state.service';
import { Router } from '@angular/router';
import { take } from 'rxjs/operators';
import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
@Component({
selector: 'app-mempool-blocks',
templateUrl: './mempool-blocks.component.html',
styleUrls: ['./mempool-blocks.component.scss']
styleUrls: ['./mempool-blocks.component.scss'],
})
export class MempoolBlocksComponent implements OnInit, OnDestroy {
mempoolBlocks: MempoolBlock[];
mempoolBlocksFull: MempoolBlock[];
mempoolBlockStyles = [];
mempoolBlocksSubscription: Subscription;
network = '';
@ -27,7 +29,6 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
txFeePerVSize: number;
resetTransitionTimeout: number;
blocksLeftToHalving: number;
constructor(
@ -47,6 +48,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
const stringifiedBlocks = JSON.stringify(blocks);
this.mempoolBlocksFull = JSON.parse(stringifiedBlocks);
this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks));
this.updateMempoolBlockStyles();
this.calculateTransactionPosition();
});
@ -132,12 +134,34 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
return medianNr;
}
getStyleForMempoolBlockAtIndex(index: number) {
const greenBackgroundHeight = 100 - this.mempoolBlocks[index].blockVSize / 1000000 * 100;
updateMempoolBlockStyles() {
this.mempoolBlockStyles = [];
this.mempoolBlocksFull.forEach((block, i) => this.mempoolBlockStyles.push(this.getStyleForMempoolBlock(block, i)));
}
getStyleForMempoolBlock(mempoolBlock: MempoolBlock, index: number) {
const emptyBackgroundSpacePercentage = Math.max(100 - mempoolBlock.blockVSize / 1000000 * 100, 0);
const backgroundGradients = [`repeating-linear-gradient(to right, #554b45, #554b45 ${emptyBackgroundSpacePercentage}%`];
const gradientColors = [];
const trimmedFeeRange = index === 0 ? mempoolBlock.feeRange.slice(0, -1) : mempoolBlock.feeRange;
trimmedFeeRange.forEach((fee: number) => {
let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fee >= feeLvl);
feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
gradientColors.push(mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]);
});
gradientColors.forEach((color, i, gc) => {
backgroundGradients.push(`
#${i === 0 ? color : gc[i - 1]} ${ i === 0 ? emptyBackgroundSpacePercentage : (i / gradientColors.length) * 100 }%,
#${color} ${Math.round(((i + 1) / gradientColors.length) * 100)}%
`);
});
return {
'right': 40 + index * 155 + 'px',
'background': `repeating-linear-gradient(to right, #554b45, #554b45 ${greenBackgroundHeight}%,
#bd7c13 ${Math.max(greenBackgroundHeight, 0)}%, #c5345a 100%)`,
'background': backgroundGradients.join(',') + ')'
};
}