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

Merge pull request #847 from MiguelMedeiros/add-filtering-mempool-charts

Browse Source 
Add mempool chart filtering.
This commit is contained in:
wiz 2021-10-08 09:54:28 +09:00 committed by GitHub
commit bf563cc195
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 195 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/app.module.ts
View File

@ -47,7 +47,7 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { FeesBoxComponent } from './components/fees-box/fees-box.component'; import { FeesBoxComponent } from './components/fees-box/fees-box.component';
import { DashboardComponent } from './dashboard/dashboard.component'; import { DashboardComponent } from './dashboard/dashboard.component';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle, import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import { ApiDocsComponent } from './components/api-docs/api-docs.component'; import { ApiDocsComponent } from './components/api-docs/api-docs.component';
import { CodeTemplateComponent } from './components/api-docs/code-template.component'; import { CodeTemplateComponent } from './components/api-docs/code-template.component';
@ -140,6 +140,7 @@ export class AppModule {
library.addIcons(faLink); library.addIcons(faLink);
library.addIcons(faBolt); library.addIcons(faBolt);
library.addIcons(faTint); library.addIcons(faTint);
library.addIcons(faFilter);
library.addIcons(faAngleDown); library.addIcons(faAngleDown);
library.addIcons(faAngleUp); library.addIcons(faAngleUp);
library.addIcons(faExchangeAlt); library.addIcons(faExchangeAlt);

164
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View File

@ -17,6 +17,7 @@ import { feeLevels, chartColors } from 'src/app/app.constants';
export class MempoolGraphComponent implements OnInit, OnChanges { export class MempoolGraphComponent implements OnInit, OnChanges {
@Input() data: any[]; @Input() data: any[];
@Input() limitFee = 350; @Input() limitFee = 350;
@Input() limitFilterFee = 1;
@Input() height: number | string = 200; @Input() height: number | string = 200;
@Input() top: number | string = 20; @Input() top: number | string = 20;
@Input() right: number | string = 10; @Input() right: number | string = 10;
@ -45,19 +46,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
ngOnInit(): void { ngOnInit(): void {
this.inverted = this.storageService.getValue('inverted-graph') === 'true'; this.inverted = this.storageService.getValue('inverted-graph') === 'true';
for (let i = 0; i < feeLevels.length; i++) {
if (feeLevels[i] === this.limitFee) {
this.feeLimitIndex = i;
}
if (feeLevels[i] <= this.limitFee) {
if (i === 0) {
this.feeLevelsOrdered.push('0 - 1');
} else {
this.feeLevelsOrdered.push(`${feeLevels[i - 1]} - ${feeLevels[i]}`);
}
}
}
this.chartColorsOrdered = chartColors.slice(0, this.feeLevelsOrdered.length);
this.mountFeeChart(); this.mountFeeChart();
} }
@ -68,9 +56,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
} }
onChartReady(myChart: any) { onChartReady(myChart: any) {
myChart.getZr().on('mousemove', e => { myChart.getZr().on('mousemove', (e: any) => {
if (e.target !== undefined) { if (e.target !== undefined &&
this.hoverIndexSerie = e.target.parent.parent.__ecComponentInfo.index; e.target.parent !== undefined &&
e.target.parent.parent !== null &&
e.target.parent.parent.__ecComponentInfo !== undefined) {
this.hoverIndexSerie = e.target.parent.parent.__ecComponentInfo.index;
} }
}); });
} }
@ -106,10 +97,11 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
} }
mountFeeChart() { mountFeeChart() {
this.orderLevels();
const { labels, series } = this.mempoolVsizeFeesData; const { labels, series } = this.mempoolVsizeFeesData;
const seriesGraph = series.map((value: Array<number>, index: number) => { const seriesGraph = series.map((value: Array<number>, index: number) => {
if (index <= this.feeLimitIndex){ if (index >= this.feeLimitIndex){
return { return {
name: this.feeLevelsOrdered[index], name: this.feeLevelsOrdered[index],
type: 'line', type: 'line',
@ -175,85 +167,81 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
type: 'line', type: 'line',
}, },
formatter: (params: any) => { formatter: (params: any) => {
const colorSpan = (index: any) => `<span class="indicator" style="background-color: ${this.chartColorsOrdered[index]}"></span> const { totalValue, totalValueArray } = this.getTotalValues(params);
<span>
${this.feeLevelsOrdered[index]}
</span>`;
const totals = (values: any) => {
let totalValueTemp = 0;
const totalValueArrayTemp = [];
const valuesInverted = this.inverted ? values : [...values].reverse();
for (const item of valuesInverted) {
totalValueTemp += item.value;
totalValueArrayTemp.push(totalValueTemp);
}
return {
totalValue: totalValueTemp,
totalValueArray: totalValueArrayTemp.reverse(),
valuesOrdered: this.inverted ? [...values].reverse() : values,
};
};
const { totalValue, totalValueArray, valuesOrdered } = totals(params);
const title = `<div class="title">
${params[0].axisValue}
<span class="total-value">
${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
</span>
</div>`;
const itemFormatted = []; const itemFormatted = [];
let totalParcial = 0; let totalParcial = 0;
let progressPercentageText = ''; let progressPercentageText = '';
params.map((item: any, index: number) => { const items = this.inverted ? [...params].reverse() : params;
items.map((item: any, index: number) => {
totalParcial += item.value; totalParcial += item.value;
let progressPercentage = 0; let progressPercentage = 0;
let progressPercentageSum = 0; let progressPercentageSum = 0;
if (index <= this.feeLimitIndex) { progressPercentage = (item.value / totalValue) * 100;
progressPercentage = (item.value / totalValue) * 100; progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
progressPercentageSum = (totalValueArray[index] / totalValue) * 100; let activeItemClass = '';
let activeItemClass = ''; let hoverActive: number;
const hoverActive = (this.inverted) ? Math.abs(item.seriesIndex - params.length + 1) : item.seriesIndex; if (this.inverted) {
if (this.hoverIndexSerie === hoverActive) { hoverActive = Math.abs(this.feeLevelsOrdered.length - item.seriesIndex - this.feeLevelsOrdered.length);
progressPercentageText = `<div class="total-parcial-active"> } else {
<span class="progress-percentage"> hoverActive = item.seriesIndex;
${formatNumber(progressPercentage, this.locale, '1.2-2')} }
<span class="symbol">%</span> if (this.hoverIndexSerie === hoverActive) {
progressPercentageText = `<div class="total-parcial-active">
<span class="progress-percentage">
${formatNumber(progressPercentage, this.locale, '1.2-2')}
<span class="symbol">%</span>
</span>
<span class="total-parcial-vbytes">
${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)}
</span>
<div class="total-percentage-bar">
<span class="total-percentage-bar-background">
<span style="
width: ${progressPercentage}%;
background: ${this.inverted ? this.chartColorsOrdered[index] : item.color}
"></span>
</span> </span>
<span class="total-parcial-vbytes"> </div>
${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)} </div>`;
</span> activeItemClass = 'active';
<div class="total-percentage-bar"> }
<span class="total-percentage-bar-background"> itemFormatted.push(`<tr class="item ${activeItemClass}">
<span style="width: ${progressPercentage}%; background: ${this.chartColorsOrdered[index]}"></span>
</span>
</div>
</div>`;
activeItemClass = 'active';
}
itemFormatted.push(`<tr class="item ${activeItemClass}">
<td class="indicator-container"> <td class="indicator-container">
${colorSpan(item.seriesIndex)} <span class="indicator" style="
</td> background-color: ${this.inverted ? this.chartColorsOrdered[index] : item.color}
<td class="total-progress-sum"> "></span>
<span> <span>
${this.vbytesPipe.transform(valuesOrdered[item.seriesIndex].value, 2, 'vB', 'MvB', false)} ${this.inverted ? this.feeLevelsOrdered[index] : item.seriesName}
</span> </span>
</td> </td>
<td class="total-progress-sum"> <td class="total-progress-sum">
<span> <span>
${this.vbytesPipe.transform(totalValueArray[item.seriesIndex], 2, 'vB', 'MvB', false)} ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}
</span>
</td>
<td class="total-progress-sum">
<span>
${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)}
</span> </span>
</td> </td>
<td class="total-progress-sum-bar"> <td class="total-progress-sum-bar">
<span class="total-percentage-bar-background"> <span class="total-percentage-bar-background">
<span style="width: ${progressPercentageSum.toFixed(2)}%; background-color: ${this.chartColorsOrdered[3]}"></span> <span style="
width: ${progressPercentageSum.toFixed(2)}%;
background-color: ${this.chartColorsOrdered[3]}
"></span>
</span> </span>
</td> </td>
</tr>`); </tr>`);
}
}); });
const classActive = (this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : ''; const classActive = (this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : '';
return `<div class="fees-wrapper-tooltip-chart ${classActive}"> return `<div class="fees-wrapper-tooltip-chart ${classActive}">
${title} <div class="title">
${params[0].axisValue}
<span class="total-value">
${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
</span>
</div>
<table> <table>
<thead> <thead>
<tr> <tr>
@ -332,5 +320,35 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
}, },
}; };
} }
getTotalValues = (values: any) => {
let totalValueTemp = 0;
const totalValueArray = [];
const valuesInverted = this.inverted ? values : [...values].reverse();
for (const item of valuesInverted) {
totalValueTemp += item.value;
totalValueArray.push(totalValueTemp);
}
return {
totalValue: totalValueTemp,
totalValueArray: totalValueArray.reverse(),
};
}
orderLevels() {
for (let i = 0; i < feeLevels.length; i++) {
if (feeLevels[i] === this.limitFilterFee) {
this.feeLimitIndex = i;
}
if (feeLevels[i] <= this.limitFee) {
if (i === 0) {
this.feeLevelsOrdered.push('0 - 1');
} else {
this.feeLevelsOrdered.push(`${feeLevels[i - 1]} - ${feeLevels[i]}`);
}
}
}
this.chartColorsOrdered = chartColors.slice(0, this.feeLevelsOrdered.length);
}
} }

38
frontend/src/app/components/statistics/statistics.component.html
View File

@ -36,6 +36,42 @@
<input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y <input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y
</label> </label>
</div> </div>
<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
<button class="btn btn-primary btn-sm ml-2" id="dropdownFees" ngbDropdownAnchor (click)="myDrop.toggle()">
<fa-icon [icon]="['fas', 'filter']" [fixedWidth]="true" i18n-title="statistics.component-filter.title" title="Filter"></fa-icon>
</button>
<div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
<ul>
<ng-template ngFor let-fee let-i="index" [ngForOf]="feeLevels">
<ng-template [ngIf]="fee === 1">
<li (click)="filterFees(fee)" [class]="filterFeeIndex > fee ? 'inactive' : ''">
<ng-template [ngIf]="inverted">
<span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
</ng-template>
<ng-template [ngIf]="!inverted">
<span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
</ng-template>
<span class="fee-text" >0 - {{ fee }}</span>
</li>
</ng-template>
<ng-template [ngIf]="fee <= 500 && fee !== 1">
<li (click)="filterFees(fee)" [class]="filterFeeIndex > fee ? 'inactive' : ''">
<ng-template [ngIf]="inverted">
<span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
<span class="fee-text" >{{feeLevels[i - 1]}} - {{ fee }}</span>
</ng-template>
<ng-template [ngIf]="!inverted">
<span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
<span class="fee-text" >{{feeLevels[i + 1]}} - {{ fee }}</span>
</ng-template>
</li>
</ng-template>
</ng-template>
</ul>
</div>
</div>
<button (click)="invertGraph()" class="btn btn-primary btn-sm ml-2 d-none d-md-inline"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" i18n-title="statistics.component-invert.title" title="Invert"></fa-icon></button> <button (click)="invertGraph()" class="btn btn-primary btn-sm ml-2 d-none d-md-inline"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" i18n-title="statistics.component-invert.title" title="Invert"></fa-icon></button>
</form> </form>
</div> </div>
@ -45,8 +81,10 @@
dir="ltr" dir="ltr"
[template]="'advanced'" [template]="'advanced'"
[limitFee]="500" [limitFee]="500"
[limitFilterFee]="filterFeeIndex"
[height]="500" [height]="500"
[left]="65" [left]="65"
[right]="10"
[data]="mempoolStats" [data]="mempoolStats"
></app-mempool-graph> ></app-mempool-graph>
</div> </div>

45
frontend/src/app/components/statistics/statistics.component.scss
View File

@ -61,3 +61,48 @@
.incoming-transactions-graph { .incoming-transactions-graph {
height: 600px; height: 600px;
} }
.dropdown-fees {
padding: 10px 0px;
min-width: 130px;
padding: 2px ​20px 0px;
left: -38px !important;
position: absolute !important;
ul {
list-style: none;
padding: 0px;
margin-bottom: 0px;
}
li {
width: 100%;
font-size: 14px;
padding: 0px 0px;
padding-left: 20px;
transition: 200ms all ease-in-out;
&:hover {
background-color: #10121e;
cursor: pointer;
}
}
.square {
transition: 200ms all ease-in-out;
height: 12px;
width: 12px;
margin-right: 10px;
border-radius: 1px;
display: inline-block;
position: relative;
top: 1px;
}
.inactive {
.square {
background-color: #ffffff66 !important;
}
.fee-text {
text-decoration: line-through;
color: #777;
}
}
}

19
frontend/src/app/components/statistics/statistics.component.ts
View File

@ -11,6 +11,7 @@ import { ApiService } from '../../services/api.service';
import { StateService } from 'src/app/services/state.service'; import { StateService } from 'src/app/services/state.service';
import { SeoService } from 'src/app/services/seo.service'; import { SeoService } from 'src/app/services/seo.service';
import { StorageService } from 'src/app/services/storage.service'; import { StorageService } from 'src/app/services/storage.service';
import { feeLevels, chartColors } from 'src/app/app.constants';
@Component({ @Component({
selector: 'app-statistics', selector: 'app-statistics',
@ -22,6 +23,10 @@ export class StatisticsComponent implements OnInit {
loading = true; loading = true;
spinnerLoading = false; spinnerLoading = false;
feeLevels = feeLevels;
chartColors = chartColors;
filterFeeIndex = 1;
dropDownOpen = false;
mempoolStats: OptimizedMempoolStats[] = []; mempoolStats: OptimizedMempoolStats[] = [];
@ -30,7 +35,7 @@ export class StatisticsComponent implements OnInit {
mempoolTransactionsWeightPerSecondData: any; mempoolTransactionsWeightPerSecondData: any;
radioGroupForm: FormGroup; radioGroupForm: FormGroup;
graphWindowPreference: String; graphWindowPreference: string;
inverted: boolean; inverted: boolean;
constructor( constructor(
@ -46,6 +51,10 @@ export class StatisticsComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.inverted = this.storageService.getValue('inverted-graph') === 'true'; this.inverted = this.storageService.getValue('inverted-graph') === 'true';
if (!this.inverted) {
this.feeLevels = [...feeLevels].reverse();
this.chartColors = [...chartColors].reverse();
}
this.seoService.setTitle($localize`:@@5d4f792f048fcaa6df5948575d7cb325c9393383:Graphs`); this.seoService.setTitle($localize`:@@5d4f792f048fcaa6df5948575d7cb325c9393383:Graphs`);
this.stateService.networkChanged$.subscribe((network) => this.network = network); this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.graphWindowPreference = this.storageService.getValue('graphWindowPreference') ? this.storageService.getValue('graphWindowPreference').trim() : '2h'; this.graphWindowPreference = this.storageService.getValue('graphWindowPreference') ? this.storageService.getValue('graphWindowPreference').trim() : '2h';
@ -131,4 +140,12 @@ export class StatisticsComponent implements OnInit {
this.storageService.setValue('inverted-graph', !this.inverted); this.storageService.setValue('inverted-graph', !this.inverted);
document.location.reload(); document.location.reload();
} }
filterFees(index: number) {
this.filterFeeIndex = index;
}
filterClick() {
this.dropDownOpen = !this.dropDownOpen;
}
} }

1
frontend/src/app/components/television/television.component.html
View File

@ -11,6 +11,7 @@
[limitFee]="500" [limitFee]="500"
[height]="600" [height]="600"
[left]="60" [left]="60"
[right]="10"
[data]="mempoolStats" [data]="mempoolStats"
[showZoom]="false" [showZoom]="false"
></app-mempool-graph> ></app-mempool-graph>