diff --git a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts index bc3c642db..7ad147b28 100644 --- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts +++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts @@ -90,6 +90,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit { this.prepareChartOptions({ sizes: data.sizes.map(val => [val.timestamp * 1000, val.avgSize / 1000000, val.avgHeight]), weights: data.weights.map(val => [val.timestamp * 1000, val.avgWeight / 1000000, val.avgHeight]), + sizePerWeight: data.weights.map((val, i) => [val.timestamp * 1000, data.sizes[i].avgSize / (val.avgWeight / 4), val.avgHeight]), }); this.isLoading = false; }), @@ -124,6 +125,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit { color: [ '#FDD835', '#D81B60', + '#14EDF5', ], grid: { top: 30, @@ -153,6 +155,8 @@ export class BlockSizesWeightsGraphComponent implements OnInit { tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.2-2')} MB`; } else if (tick.seriesIndex === 1) { // Weight tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.2-2')} MWU`; + } else if (tick.seriesIndex === 2) { // Size per weight + tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.2-2')} B/vB`; } tooltip += `
`; } @@ -192,10 +196,19 @@ export class BlockSizesWeightsGraphComponent implements OnInit { }, icon: 'roundRect', }, + { + name: $localize`Size per weight`, + inactiveColor: 'rgb(110, 112, 121)', + textStyle: { + color: 'white', + }, + icon: 'roundRect', + }, ], selected: JSON.parse(this.storageService.getValue('sizes_weights_legend')) ?? { 'Size': true, 'Weight': true, + 'Size per weight': true, } }, yAxis: data.sizes.length === 0 ? undefined : [ @@ -262,6 +275,18 @@ export class BlockSizesWeightsGraphComponent implements OnInit { lineStyle: { width: 2, } + }, + { + zlevel: 1, + yAxisIndex: 0, + name: $localize`Size per weight`, + showSymbol: false, + symbol: 'none', + data: data.sizePerWeight, + type: 'line', + lineStyle: { + width: 2, + } } ], dataZoom: [{ diff --git a/frontend/src/app/interfaces/node-api.interface.ts b/frontend/src/app/interfaces/node-api.interface.ts index c35eb8098..c11cb5828 100644 --- a/frontend/src/app/interfaces/node-api.interface.ts +++ b/frontend/src/app/interfaces/node-api.interface.ts @@ -151,6 +151,19 @@ export interface RewardStats { totalTx: number; } +export interface BlockSizesAndWeights { + sizes: { + timestamp: number; + avgHeight: number; + avgSize: number; + }[]; + weights: { + timestamp: number; + avgHeight: number; + avgWeight: number; + }[]; +} + export interface AuditScore { hash: string; matchRate?: number; diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index 6eff41f61..04b2b72e2 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; -import { HttpClient, HttpParams } from '@angular/common/http'; +import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http'; import { CpfpInfo, OptimizedMempoolStats, AddressInformation, LiquidPegs, ITranslators, - PoolStat, BlockExtended, TransactionStripped, RewardStats, AuditScore } from '../interfaces/node-api.interface'; + PoolStat, BlockExtended, TransactionStripped, RewardStats, AuditScore, BlockSizesAndWeights } from '../interfaces/node-api.interface'; import { Observable } from 'rxjs'; import { StateService } from './state.service'; import { WebsocketResponse } from '../interfaces/websocket.interface'; @@ -222,8 +222,8 @@ export class ApiService { ); } - getHistoricalBlockSizesAndWeights$(interval: string | undefined) : Observable { - return this.httpClient.get( + getHistoricalBlockSizesAndWeights$(interval: string | undefined) : Observable> { + return this.httpClient.get( this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/sizes-weights` + (interval !== undefined ? `/${interval}` : ''), { observe: 'response' } );