mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 06:47:52 +01:00
Code Issues Projects Releases Wiki Activity

[graph] use echart echart yaxis max property instead of modifying the data itself

Browse source
This commit is contained in:
nymkappa 2023-11-15 14:08:44 +09:00
parent c393483590
commit 2d30c0b588
No known key found for this signature in database
GPG key ID: E155910B16E8BD04
3 changed files with 27 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
View file

@ -7,6 +7,8 @@ import { formatNumber } from '@angular/common';
import { StateService } from '../../services/state.service';
import { Subscription } from 'rxjs';
const OUTLIERS_MEDIAN_MULTIPLIER = 4;
@Component({
selector: 'app-incoming-transactions-graph',
templateUrl: './incoming-transactions-graph.component.html',
@ -29,6 +31,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
@Input() left: number | string = '0';
@Input() template: ('widget' | 'advanced') = 'widget';
@Input() windowPreferenceOverride: string;
@Input() outlierCappingEnabled: boolean = false;
isLoading = true;
mempoolStatsChartOption: EChartsOption = {};
@ -40,6 +43,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
MA: number[][] = [];
weightMode: boolean = false;
rateUnitSub: Subscription;
medianVbytesPerSecond: number | undefined;
constructor(
@Inject(LOCALE_ID) private locale: string,
@ -65,16 +69,35 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
this.windowPreference = this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference');
const windowSize = Math.max(10, Math.floor(this.data.series[0].length / 8));
this.MA = this.calculateMA(this.data.series[0], windowSize);
if (this.outlierCappingEnabled === true) {
this.computeMedianVbytesPerSecond(this.data.series[0]);
}
this.mountChart();
}
rendered() {
if (!this.data) {
return;
return;
}
this.isLoading = false;
}
/**
* Calculate the median value of the vbytes per second chart to hide outliers
*/
computeMedianVbytesPerSecond(data: number[][]): void {
const vBytes: number[] = [];
for (const value of data) {
vBytes.push(value[1]);
}
const sorted = vBytes.slice().sort((a, b) => a - b);
const middle = Math.floor(sorted.length / 2);
this.medianVbytesPerSecond = sorted[middle];
if (sorted.length % 2 === 0) {
this.medianVbytesPerSecond = (sorted[middle - 1] + sorted[middle]) / 2;
}
}
/// calculate the moving average of the provided data based on windowSize
calculateMA(data: number[][], windowSize: number = 100): number[][] {
//update const variables that are not changed
@ -232,6 +255,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
}
],
yAxis: {
max: this.outlierCappingEnabled ? Math.round(this.medianVbytesPerSecond * OUTLIERS_MEDIAN_MULTIPLIER) : undefined,
type: 'value',
axisLabel: {
fontSize: 11,

2
frontend/src/app/components/statistics/statistics.component.html
View file

@ -128,7 +128,7 @@
<div class="card-body">
<div class="incoming-transactions-graph">
<app-incoming-transactions-graph #incominggraph [height]="500" [left]="65" [template]="'advanced'"
[data]="mempoolTransactionsWeightPerSecondData"></app-incoming-transactions-graph>
[data]="mempoolTransactionsWeightPerSecondData" [outlierCappingEnabled]="outlierCappingEnabled"></app-incoming-transactions-graph>
</div>
</div>
</div>

34
frontend/src/app/components/statistics/statistics.component.ts
View file

@ -160,10 +160,6 @@ export class StatisticsComponent implements OnInit {
labels: labels,
series: [mempoolStats.map((stats) => [stats.added * 1000, stats.vbytes_per_second])],
};
if (this.outlierCappingEnabled) {
this.capExtremeVbytesValues();
}
}
saveGraphPreference() {
@ -214,36 +210,8 @@ export class StatisticsComponent implements OnInit {
});
}
/**
* All value higher that "median * capRatio" are capped
*/
onOutlierToggleChange(e) {
onOutlierToggleChange(e): void {
this.outlierCappingEnabled = e.target.checked;
this.handleNewMempoolData(this.mempoolStats);
}
capExtremeVbytesValues() {
if (this.stateService.network.length !== 0) {
return; // Only cap on Bitcoin mainnet
}
let capRatio = 4;
// Find median value
const vBytes: number[] = [];
for (const stat of this.mempoolTransactionsWeightPerSecondData.series[0]) {
vBytes.push(stat[1]);
}
const sorted = vBytes.slice().sort((a, b) => a - b);
const middle = Math.floor(sorted.length / 2);
let median = sorted[middle];
if (sorted.length % 2 === 0) {
median = (sorted[middle - 1] + sorted[middle]) / 2;
}
// Cap
for (const stat of this.mempoolTransactionsWeightPerSecondData.series[0]) {
stat[1] = Math.min(median * capRatio, stat[1]);
}
}
onSaveChart(name) {