From 472a76560f8edf6874b692064c8b3d8114a9e615 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Wed, 30 Aug 2023 22:25:33 +0900 Subject: [PATCH] Tidy acceleration dashboard, add missing fields --- .../acceleration-fees-graph.component.html | 42 +++++------ .../acceleration-fees-graph.component.ts | 70 ++++++++++++------- .../block-fee-rates-graph.component.html | 38 +++++----- .../block-fee-rates-graph.component.ts | 14 ++++ 4 files changed, 97 insertions(+), 67 deletions(-) diff --git a/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.html b/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.html index 2cf3fbc0b..6a56ac6ca 100644 --- a/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.html +++ b/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.html @@ -28,17 +28,17 @@
-
-
-
???
+
+
+
Avg Fee Delta (24h)

- ??? + {{ stats.avgFeeDelta | number }} sat

-
-
???
+
+
Avg Fee Delta (1w)

- ??? + {{ stats.avgFeeDelta | number }} sat

@@ -53,19 +53,19 @@
- -
-
-
???
-

- -

-
-
-
???
-

- -

-
+ +
+
Avg Fee Delta (24h)
+

+ +

+
+ + +
+
Avg Fee Delta (1w)
+

+ +

diff --git a/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.ts b/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.ts index bba0cbc3e..ca3dde69c 100644 --- a/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.ts +++ b/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.ts @@ -38,6 +38,7 @@ export class AccelerationFeesGraphComponent implements OnInit { renderer: 'svg', }; + hrStatsObservable$: Observable; statsObservable$: Observable; isLoading = true; formatNumber = formatNumber; @@ -67,18 +68,26 @@ export class AccelerationFeesGraphComponent implements OnInit { this.miningWindowPreference = '1w'; this.isLoading = true; this.timespan = this.miningWindowPreference; + + this.hrStatsObservable$ = this.apiService.getAccelerationHistory$('24h').pipe( + map((accelerations) => { + return { + avgFeeDelta: accelerations.filter(acc => acc.status === 'mined' || acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length + }; + }) + ); + this.statsObservable$ = combineLatest([ this.apiService.getAccelerationHistory$(this.miningWindowPreference), this.apiService.getHistoricalBlockFees$(this.miningWindowPreference), ]).pipe( tap(([accelerations, blockFeesResponse]) => { - console.log(accelerations, blockFeesResponse.body); this.prepareChartOptions(accelerations, blockFeesResponse.body); this.isLoading = false; }), map(([accelerations, blockFeesResponse]) => { return { - + avgFeeDelta: accelerations.filter(acc => acc.status === 'mined' || acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length }; }), ); @@ -112,12 +121,7 @@ export class AccelerationFeesGraphComponent implements OnInit { this.prepareChartOptions(accelerations, blockFeesResponse.body); this.isLoading = false; this.cd.markForCheck(); - }), - map(([accelerations, blockFeesResponse]) => { - return { - - }; - }), + }) ); } } @@ -159,6 +163,7 @@ export class AccelerationFeesGraphComponent implements OnInit { this.chartOptions = { title: title, color: [ + '#1E88E5', new graphic.LinearGradient(0, 0, 0, 0.65, [ { offset: 0, color: '#F4511E' }, { offset: 0.25, color: '#FB8C00' }, @@ -166,7 +171,6 @@ export class AccelerationFeesGraphComponent implements OnInit { { offset: 0.75, color: '#FDD835' }, { offset: 1, color: '#7CB342' } ]), - '#1E88E5', ], animation: false, grid: { @@ -197,9 +201,9 @@ export class AccelerationFeesGraphComponent implements OnInit { ${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}
`; for (const tick of data) { - if (tick.seriesIndex === 0) { + if (tick.seriesIndex === 1) { tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')} sats
`; - } else if (tick.seriesIndex === 1) { + } else if (tick.seriesIndex === 0) { tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}
`; } } @@ -224,17 +228,17 @@ export class AccelerationFeesGraphComponent implements OnInit { legend: (this.widget || data.length === 0) ? undefined : { data: [ { - name: 'Total fee delta', + name: 'Total accelerations', inactiveColor: 'rgb(110, 112, 121)', - textStyle: { + textStyle: { color: 'white', }, icon: 'roundRect', }, { - name: 'Total accelerations', + name: 'Total fee delta', inactiveColor: 'rgb(110, 112, 121)', - textStyle: { + textStyle: { color: 'white', }, icon: 'roundRect', @@ -247,7 +251,11 @@ export class AccelerationFeesGraphComponent implements OnInit { axisLabel: { color: 'rgb(110, 112, 121)', formatter: (val) => { - return `${val / 100_000_000} BTC`; + if (val >= 1_000_000) { + return `${(val / 100_000_000).toPrecision(5)} BTC`; + } else { + return `${val} sats`; + } } }, splitLine: { @@ -273,6 +281,24 @@ export class AccelerationFeesGraphComponent implements OnInit { }, ], series: data.length === 0 ? undefined : [ + { + legendHoverLink: false, + zlevel: 0, + yAxisIndex: 1, + name: 'Total accelerations', + data: data.map(block => [block.timestamp * 1000, block.accelerations, block.avgHeight]), + type: 'line', + symbol: 'none', + areaStyle: { + color: '#1E88E5', + opacity: 0.5 + }, + lineStyle: { + width: 1, + opacity: 1, + }, + step: 'middle', + }, { legendHoverLink: false, zlevel: 1, @@ -283,20 +309,10 @@ export class AccelerationFeesGraphComponent implements OnInit { smooth: 0.25, symbol: 'none', lineStyle: { - width: 1, + width: 2, opacity: 1, } }, - { - legendHoverLink: false, - zlevel: 0, - yAxisIndex: 1, - name: 'Total accelerations', - data: data.map(block => [block.timestamp * 1000, block.accelerations, block.avgHeight]), - type: 'bar', - barWidth: '100%', - large: true, - }, ], dataZoom: (this.widget || data.length === 0 )? undefined : [{ type: 'inside', diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html index f5eb5d1cf..8676b8a44 100644 --- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html @@ -46,17 +46,17 @@
-
-
-
Avg Block Fee (1m)
+
+
+
Avg Block Fee (24h)

-
-
???
+
+
Avg Block Fee (1m)

- ??? +

@@ -71,19 +71,19 @@
+ +
+
Avg Block Fee (24h)
+

+ +

+
+ -
-
-
Avg Block Fee
-

- -

-
-
-
???
-

- -

-
+
+
Avg Block Fee (1m)
+

+ +

\ No newline at end of file diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts index 7f73a197a..0283b2d00 100644 --- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts @@ -41,6 +41,7 @@ export class BlockFeeRatesGraphComponent implements OnInit { renderer: 'svg', }; + hrStatsObservable$: Observable; statsObservable$: Observable; isLoading = true; formatNumber = formatNumber; @@ -85,6 +86,19 @@ export class BlockFeeRatesGraphComponent implements OnInit { }); } + this.hrStatsObservable$ = combineLatest([ + this.apiService.getHistoricalBlockFeeRates$('24h'), + this.stateService.rateUnits$ + ]).pipe( + map(([response, rateUnits]) => { + return { + blockCount: parseInt(response.headers.get('x-total-count'), 10), + avgMedianRate: response.body.length ? response.body.reduce((acc, rate) => acc + rate.avgFee_50, 0) / response.body.length : 0, + }; + }), + share(), + ); + this.statsObservable$ = combineLatest([ this.widget ? of(this.miningWindowPreference) : this.radioGroupForm.get('dateSpan').valueChanges.pipe(startWith(this.radioGroupForm.controls.dateSpan.value)), this.stateService.rateUnits$