From 1b25a71d9f5a0fd56df1e8e2012ae65115c9d7cc Mon Sep 17 00:00:00 2001 From: natsoni Date: Fri, 3 May 2024 11:53:33 +0200 Subject: [PATCH 01/10] Add accelerations category to graphs page --- .../src/app/components/graphs/graphs.component.html | 11 ++++++++++- .../src/app/components/graphs/graphs.component.scss | 5 +++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/components/graphs/graphs.component.html b/frontend/src/app/components/graphs/graphs.component.html index 94241b825..073aa02dc 100644 --- a/frontend/src/app/components/graphs/graphs.component.html +++ b/frontend/src/app/components/graphs/graphs.component.html @@ -1,4 +1,4 @@ -
+
Mempool @@ -43,6 +43,15 @@ i18n="lightning.nodes-channels-world-map">Lightning Nodes Channels World Map
+ +
+ +
+ Acceleration Fees + +
+
diff --git a/frontend/src/app/components/graphs/graphs.component.scss b/frontend/src/app/components/graphs/graphs.component.scss index 0a066266d..715ec1b42 100644 --- a/frontend/src/app/components/graphs/graphs.component.scss +++ b/frontend/src/app/components/graphs/graphs.component.scss @@ -1,8 +1,8 @@ .menu { - flex-grow: 1; + flex-wrap: wrap; padding: 0 35px; @media (min-width: 576px) { - max-width: 400px; + max-width: 600px; } & > * { @@ -11,5 +11,6 @@ &.last-child { margin-inline-end: 0; } + margin-bottom: 5px; } } \ No newline at end of file From 453a2224cd754adf311ba773c3bd347144496736 Mon Sep 17 00:00:00 2001 From: natsoni Date: Fri, 3 May 2024 12:33:05 +0200 Subject: [PATCH 02/10] Add block fees vs subsidy bar chart --- backend/src/api/mining/mining-routes.ts | 21 + backend/src/api/mining/mining.ts | 7 + backend/src/repositories/BlocksRepository.ts | 46 ++ .../block-fees-subsidy-graph.component.html | 31 ++ .../block-fees-subsidy-graph.component.scss | 76 +++ .../block-fees-subsidy-graph.component.ts | 432 ++++++++++++++++++ .../components/graphs/graphs.component.html | 2 + frontend/src/app/graphs/graphs.module.ts | 2 + .../src/app/graphs/graphs.routing.module.ts | 6 + frontend/src/app/services/api.service.ts | 7 + 10 files changed, 630 insertions(+) create mode 100644 frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html create mode 100644 frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.scss create mode 100644 frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts diff --git a/backend/src/api/mining/mining-routes.ts b/backend/src/api/mining/mining-routes.ts index 3492114b5..7fa59e219 100644 --- a/backend/src/api/mining/mining-routes.ts +++ b/backend/src/api/mining/mining-routes.ts @@ -24,6 +24,8 @@ class MiningRoutes { .get(config.MEMPOOL.API_URL_PREFIX + 'mining/difficulty-adjustments', this.$getDifficultyAdjustments) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/reward-stats/:blockCount', this.$getRewardStats) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fees/:interval', this.$getHistoricalBlockFees) + .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/exact-fees/:height', this.$getHistoricalExactBlockFees) + .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/exact-fees', this.$getHistoricalExactBlockFees) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/rewards/:interval', this.$getHistoricalBlockRewards) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fee-rates/:interval', this.$getHistoricalBlockFeeRates) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/sizes-weights/:interval', this.$getHistoricalBlockSizeAndWeight) @@ -217,6 +219,25 @@ class MiningRoutes { } } + private async $getHistoricalExactBlockFees(req: Request, res: Response) { + try { + const heightRegex = /^(0|[1-9]\d{0,9})$/; + if (req.params.height !== undefined && !heightRegex.test(req.params.height)) { + throw new Error('Invalid height parameter'); + } + + const blockFees = await mining.$getHistoricalExactBlockFees(req.params.height); + const blockCount = await BlocksRepository.$blockCount(null, null); + res.header('Pragma', 'public'); + res.header('Cache-control', 'public'); + res.header('X-total-count', blockCount.toString()); + res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString()); + res.json(blockFees); + } catch (e) { + res.status(500).send(e instanceof Error ? e.message : e); + } + } + private async $getHistoricalBlockRewards(req: Request, res: Response) { try { const blockRewards = await mining.$getHistoricalBlockRewards(req.params.interval); diff --git a/backend/src/api/mining/mining.ts b/backend/src/api/mining/mining.ts index 85554db2d..845e571f6 100644 --- a/backend/src/api/mining/mining.ts +++ b/backend/src/api/mining/mining.ts @@ -50,6 +50,13 @@ class Mining { ); } + /** + * Get historical (not averaged) block total fee + */ + public async $getHistoricalExactBlockFees(height: string | null = null): Promise { + return await BlocksRepository.$getHistoricalExactBlockFees(height); + } + /** * Get historical block rewards */ diff --git a/backend/src/repositories/BlocksRepository.ts b/backend/src/repositories/BlocksRepository.ts index e6e92d60f..ca2377e92 100644 --- a/backend/src/repositories/BlocksRepository.ts +++ b/backend/src/repositories/BlocksRepository.ts @@ -689,6 +689,52 @@ class BlocksRepository { } } + /** + * Get the historical block fees + */ + public async $getHistoricalExactBlockFees(height: string | null): Promise { + try { + let query = `SELECT + blocks.height, + fees, + prices.USD + FROM blocks + JOIN blocks_prices on blocks_prices.height = blocks.height + JOIN prices on prices.id = blocks_prices.price_id + `; + + if (height !== null) { + query += ` WHERE blocks.height <= ${height}`; + } + query += ` ORDER BY blocks.height DESC LIMIT 20000`; + + const [rows]: any = await DB.query(query); + + // Add accelerations data if available + if (config.MEMPOOL_SERVICES.ACCELERATIONS && rows.length > 0) { + + let query = ` + SELECT height, boost_cost FROM accelerations + WHERE height >= ${rows[rows.length - 1].height} AND height <= ${rows[0].height} + `; + const [accelerations]: any = await DB.query(query); + + for (let i = 0; i < accelerations.length; ++i) { + const idx = rows.findIndex((block) => block.height === accelerations[i].height); + if (idx !== -1) { + if (rows[idx].accelerations === undefined) rows[idx].accelerations = 0; + rows[idx].accelerations += accelerations[i].boost_cost; + } + } + } + + return rows; + } catch (e) { + logger.err('Cannot generate exact block fees history. Reason: ' + (e instanceof Error ? e.message : e)); + throw e; + } + } + /** * Get the historical averaged block rewards */ diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html new file mode 100644 index 000000000..77eea19e1 --- /dev/null +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html @@ -0,0 +1,31 @@ + + +
+
+
+ Block Fees Vs Subsidy + +
+ +
+ +
+ +
+
+
+ +
+
+
+ +
+ +
diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.scss b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.scss new file mode 100644 index 000000000..d29c62447 --- /dev/null +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.scss @@ -0,0 +1,76 @@ +.card-header { + border-bottom: 0; + font-size: 18px; + @media (min-width: 465px) { + font-size: 20px; + } + @media (min-width: 992px) { + height: 40px; + } +} + +.main-title { + position: relative; + color: #ffffff91; + margin-top: -13px; + font-size: 10px; + text-transform: uppercase; + font-weight: 500; + text-align: center; + padding-bottom: 3px; +} + +.full-container { + display: flex; + flex-direction: column; + padding: 0px 15px; + width: 100%; + height: calc(100vh - 225px); + min-height: 400px; + @media (min-width: 992px) { + height: calc(100vh - 150px); + } +} + +.chart { + display: flex; + flex: 1; + width: 100%; + padding-bottom: 20px; + padding-right: 10px; + @media (max-width: 992px) { + padding-bottom: 25px; + } + @media (max-width: 829px) { + padding-bottom: 50px; + } + @media (max-width: 767px) { + padding-bottom: 25px; + } + @media (max-width: 629px) { + padding-bottom: 55px; + } + @media (max-width: 567px) { + padding-bottom: 55px; + } +} +.chart-widget { + width: 100%; + height: 100%; + max-height: 270px; +} + +.disabled { + pointer-events: none; + opacity: 0.5; +} + +.scrollable-dropdown { + max-height: 500px; + overflow-y: auto; +} + +.selected { + background-color: var(--active-bg); + color: #fff; +} \ No newline at end of file diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts new file mode 100644 index 000000000..54d4f70a1 --- /dev/null +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts @@ -0,0 +1,432 @@ +import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'; +import { EChartsOption } from '../../graphs/echarts'; +import { Observable } from 'rxjs'; +import { map, share, startWith, switchMap, tap } from 'rxjs/operators'; +import { ApiService } from '../../services/api.service'; +import { SeoService } from '../../services/seo.service'; +import { formatNumber } from '@angular/common'; +import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { download, formatterXAxis } from '../../shared/graphs.utils'; +import { ActivatedRoute, Router } from '@angular/router'; +import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe'; +import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe'; +import { StateService } from '../../services/state.service'; + +@Component({ + selector: 'app-block-fees-subsidy-graph', + templateUrl: './block-fees-subsidy-graph.component.html', + styleUrls: ['./block-fees-subsidy-graph.component.scss'], + styles: [` + .loadingGraphs { + position: absolute; + top: 50%; + left: calc(50% - 15px); + z-index: 100; + } + `], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class BlockFeesSubsidyGraphComponent implements OnInit { + @Input() right: number | string = 45; + @Input() left: number | string = 75; + + radioGroupForm: UntypedFormGroup; + + chartOptions: EChartsOption = {}; + chartInitOptions = { + renderer: 'svg', + }; + + statsObservable$: Observable; + isLoading = true; + formatNumber = formatNumber; + endBlock = ''; + blockCount = 0; + chartInstance: any = undefined; + showFiat = false; + dropdownOptions = []; + step = 20000; + includeAccelerations = false; + + constructor( + @Inject(LOCALE_ID) public locale: string, + private seoService: SeoService, + private apiService: ApiService, + private formBuilder: UntypedFormBuilder, + public stateService: StateService, + private route: ActivatedRoute, + private router: Router, + private fiatShortenerPipe: FiatShortenerPipe, + private fiatCurrencyPipe: FiatCurrencyPipe, + ) { + this.radioGroupForm = this.formBuilder.group({ endBlock: '' }); + this.radioGroupForm.controls.endBlock.setValue(''); + } + + ngOnInit(): void { + this.seoService.setTitle($localize`:@@mining.block-fees-subsidy:Block Fees Vs Subsidy`); + this.seoService.setDescription($localize`:@@meta.description.bitcoin.graphs.block-fees-subsidy:See the mining fees earned per Bitcoin block compared to the Bitcoin block subsidy, visualized in BTC and USD over time.`); + + this.route.queryParams.subscribe((params) => { + if (/^(0|[1-9]\d{0,9})$/.test(params['height'])) { + this.radioGroupForm.controls.endBlock.setValue(params['height'], { emitEvent: false }); + } + }); + + this.includeAccelerations = this.stateService.env.ACCELERATOR; + + this.statsObservable$ = this.radioGroupForm.get('endBlock').valueChanges + .pipe( + startWith(this.radioGroupForm.controls.endBlock.value), + switchMap((endBlock) => { + this.isLoading = true; + this.endBlock = endBlock; + return this.apiService.getHistoricalExactBlockFees$(endBlock === '' ? undefined : endBlock) + .pipe( + tap((response) => { + let blockReward = 50 * 100_000_000; + const subsidies = {}; + for (let i = 0; i <= 33; i++) { + subsidies[i] = blockReward; + blockReward = Math.floor(blockReward / 2); + } + + const existingHeights = new Set(response.body.map(val => val.height)); + + for (let i = response.body[0].height; i <= response.body[response.body.length - 1].height; i++) { + if (!existingHeights.has(i)) { + response.body.push({ height: i, fees: 0, missing: true }); + } + } + + response.body.sort((a, b) => a.height - b.height); + + const data = { + blockHeight: response.body.map(val => val.height), + blockSubsidy: response.body.map(val => val?.missing ? 0 : subsidies[Math.floor(Math.min(val.height / 210000, 33))] / 100_000_000), + blockSubsidyFiat: response.body.map(val => val?.missing ? 0 : subsidies[Math.floor(Math.min(val.height / 210000, 33))] / 100_000_000 * val.USD), + blockFees: response.body.map(val => val.fees / 100_000_000), + blockFeesFiat: response.body.map(val => val.fees / 100_000_000 * val.USD), + } + + let accelerationData = {}; + if (this.includeAccelerations) { + accelerationData = { + blockAccelerations: response.body.map(val => val?.accelerations ? val.accelerations / 100_000_000 : 0), + blockAccelerationsFiat: response.body.map(val => val?.accelerations ? val.accelerations / 100_000_000 * val.USD : 0), + } + } + + this.prepareChartOptions(data, accelerationData); + this.isLoading = false; + }), + map((response) => { + this.blockCount = parseInt(response.headers.get('x-total-count'), 10); + if (this.radioGroupForm.controls.endBlock.value === '') this.radioGroupForm.controls.endBlock.setValue((this.blockCount - 1).toString(), { emitEvent: false }); + this.dropdownOptions = [(this.blockCount - 1).toString()]; + if (this.blockCount) { + let i = this.blockCount - 1 - this.step; + while (i >= 0) { + this.dropdownOptions.push(i.toString()); + i -= this.step; + } + } + return { + blockCount: this.blockCount, + }; + }), + ); + }), + share() + ); + } + + prepareChartOptions(data, accelerationData) { + let title: object; + if (data.blockFees.length === 0) { + title = { + textStyle: { + color: 'grey', + fontSize: 15 + }, + text: $localize`:@@23555386d8af1ff73f297e89dd4af3f4689fb9dd:Indexing blocks`, + left: 'center', + top: 'center' + }; + } + + this.chartOptions = { + title: title, + color: [ + 'var(--orange)', + 'var(--success)', + 'var(--tertiary)' + ], + animation: false, + grid: { + top: 80, + bottom: 80, + right: this.right, + left: this.left, + }, + tooltip: { + show: !this.isMobile(), + trigger: 'axis', + axisPointer: { + type: 'line' + }, + backgroundColor: 'color-mix(in srgb, var(--active-bg) 95%, transparent)', + borderRadius: 4, + shadowColor: 'color-mix(in srgb, var(--active-bg) 95%, transparent)', + textStyle: { + color: 'var(--tooltip-grey)', + align: 'left', + }, + borderColor: 'var(--active-bg)', + formatter: function (data) { + if (data.length <= 0) { + return ''; + } + + let tooltip = `Block ${data[0].axisValue}
`; + for (let i = data.length - 1; i >= 0; i--) { + const tick = data[i]; + if (tick.seriesName.includes('Accelerations') && tick.data === 0) continue; + if (!this.showFiat) tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data, this.locale, '1.0-3')} BTC
`; + else tooltip += `${tick.marker} ${tick.seriesName}: ${this.fiatCurrencyPipe.transform(tick.data, null, 'USD') }
`; + } + if (!this.showFiat) tooltip += `
${formatNumber(data.reduce((acc, val) => acc + val.data, 0), this.locale, '1.0-3')} BTC
`; + else tooltip += `
${this.fiatCurrencyPipe.transform(data.reduce((acc, val) => acc + val.data, 0), null, 'USD')}
`; + return tooltip; + }.bind(this) + }, + xAxis: data.blockFees.length === 0 ? undefined : + { + type: 'category', + data: data.blockHeight, + axisLabel: { + hideOverlap: true, + color: 'var(--grey)', + } + }, + legend: data.blockFees.length === 0 ? undefined : { + data: [ + { + name: 'Subsidy', + inactiveColor: 'var(--grey)', + textStyle: { + color: 'white', + }, + icon: 'roundRect', + }, + { + name: 'Fees', + inactiveColor: 'var(--grey)', + textStyle: { + color: 'white', + }, + icon: 'roundRect', + }, + this.includeAccelerations ? { + name: 'Accelerations', + inactiveColor: 'var(--grey)', + textStyle: { + color: 'white', + }, + icon: 'roundRect', + } : null, + { + name: 'Subsidy (USD)', + inactiveColor: 'var(--grey)', + textStyle: { + color: 'white', + }, + icon: 'roundRect', + }, + { + name: 'Fees (USD)', + inactiveColor: 'var(--grey)', + textStyle: { + color: 'white', + }, + icon: 'roundRect', + }, + this.includeAccelerations ? { + name: 'Accelerations (USD)', + inactiveColor: 'var(--grey)', + textStyle: { + color: 'white', + }, + icon: 'roundRect', + } : null + ].filter(legend => legend !== null), + selected: { + 'Subsidy (USD)': this.showFiat, + 'Fees (USD)': this.showFiat, + 'Accelerations (USD)': this.showFiat, + 'Subsidy': !this.showFiat, + 'Fees': !this.showFiat, + 'Accelerations': !this.showFiat, + }, + }, + yAxis: data.blockFees.length === 0 ? undefined : [ + { + type: 'value', + axisLabel: { + color: 'var(--grey)', + formatter: (val) => { + return `${val} BTC`; + } + }, + min: 0, + splitLine: { + lineStyle: { + type: 'dotted', + color: 'var(--transparent-fg)', + opacity: 0.25, + } + }, + }, + { + type: 'value', + position: 'right', + axisLabel: { + color: 'var(--grey)', + formatter: function(val) { + return this.fiatShortenerPipe.transform(val, null, 'USD'); + }.bind(this) + }, + splitLine: { + show: false, + }, + }, + ], + series: data.blockFees.length === 0 ? undefined : [ + { + name: 'Subsidy', + yAxisIndex: 0, + type: 'bar', + stack: 'total', + data: data.blockSubsidy, + }, + { + name: 'Fees', + yAxisIndex: 0, + type: 'bar', + stack: 'total', + data: data.blockFees, + }, + { + name: 'Accelerations', + yAxisIndex: 0, + type: 'bar', + stack: 'total', + data: accelerationData.blockAccelerations, + }, + { + name: 'Subsidy (USD)', + yAxisIndex: 1, + type: 'bar', + stack: 'total', + data: data.blockSubsidyFiat, + }, + { + name: 'Fees (USD)', + yAxisIndex: 1, + type: 'bar', + stack: 'total', + data: data.blockFeesFiat, + }, + { + name: 'Accelerations (USD)', + yAxisIndex: 1, + type: 'bar', + stack: 'total', + data: accelerationData.blockAccelerationsFiat, + }, + ], + dataZoom: data.blockFees.length === 0 ? undefined : [{ + type: 'inside', + realtime: true, + zoomLock: true, + maxSpan: 100, + minSpan: 1, + moveOnMouseMove: false, + }, { + showDetail: false, + show: true, + type: 'slider', + brushSelect: false, + realtime: true, + left: 20, + right: 15, + selectedDataBackground: { + lineStyle: { + color: '#fff', + opacity: 0.45, + }, + }, + }], + }; + } + + onChartInit(ec) { + this.chartInstance = ec; + + this.chartInstance.on('legendselectchanged', (params) => { + const isFiat = params.name.includes('USD'); + if (isFiat === this.showFiat) return; + + const isActivation = params.selected[params.name]; + if (isFiat === isActivation) { + this.showFiat = true; + this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Subsidy' }); + this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Fees' }); + this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Accelerations' }); + this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Subsidy (USD)' }); + this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Fees (USD)' }); + this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Accelerations (USD)' }); + } else { + this.showFiat = false; + this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Subsidy' }); + this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Fees' }); + this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Accelerations' }); + this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Subsidy (USD)' }); + this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Fees (USD)' }); + this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Accelerations (USD)' }); + } + }); + } + + isMobile() { + return (window.innerWidth <= 767.98); + } + + onSaveChart() { + // @ts-ignore + const prevBottom = this.chartOptions.grid.bottom; + const now = new Date(); + // @ts-ignore + this.chartOptions.grid.bottom = 40; + this.chartOptions.backgroundColor = 'var(--active-bg)'; + this.chartInstance.setOption(this.chartOptions); + download(this.chartInstance.getDataURL({ + pixelRatio: 2, + excludeComponents: ['dataZoom'], + }), `block-fees-subsidy-${this.endBlock}-${Math.round(now.getTime() / 1000)}.svg`); + // @ts-ignore + this.chartOptions.grid.bottom = prevBottom; + this.chartOptions.backgroundColor = 'none'; + this.chartInstance.setOption(this.chartOptions); + } + + selectBlockSpan(value: string) { + this.radioGroupForm.controls.endBlock.setValue(value); + this.router.navigate([], { queryParams: { height: value }, queryParamsHandling: 'merge' }); + } + + endBlockToSelector(value: string): string { + if (parseInt(value, 10) > this.blockCount) value = (this.blockCount).toString(); + return `Blocks ${Math.max(0, parseInt(value, 10) - this.step)} - ` + value; + } +} diff --git a/frontend/src/app/components/graphs/graphs.component.html b/frontend/src/app/components/graphs/graphs.component.html index 073aa02dc..c72aa8eb8 100644 --- a/frontend/src/app/components/graphs/graphs.component.html +++ b/frontend/src/app/components/graphs/graphs.component.html @@ -17,6 +17,8 @@ i18n="mining.block-fee-rates">Block Fee Rates Block Fees + Block Fees Vs Subsidy Block Rewards { + return this.httpClient.get( + this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/exact-fees` + + (height !== undefined ? `/${height}` : ''), { observe: 'response' } + ); + } + getHistoricalBlockRewards$(interval: string | undefined) : Observable { return this.httpClient.get( this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/rewards` + From 6d595dcdb63cbddb0fd01622ed07e44640fda577 Mon Sep 17 00:00:00 2001 From: natsoni Date: Sat, 4 May 2024 16:56:02 +0200 Subject: [PATCH 03/10] Fix graph menu styling --- .../src/app/components/graphs/graphs.component.html | 11 +++++------ .../src/app/components/graphs/graphs.component.scss | 4 ++-- .../src/app/components/graphs/graphs.component.ts | 6 +++--- .../components/statistics/statistics.component.scss | 2 +- 4 files changed, 11 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/components/graphs/graphs.component.html b/frontend/src/app/components/graphs/graphs.component.html index c72aa8eb8..53d18bbc2 100644 --- a/frontend/src/app/components/graphs/graphs.component.html +++ b/frontend/src/app/components/graphs/graphs.component.html @@ -1,9 +1,9 @@ -
+
- Mempool -
+
-
+
- diff --git a/frontend/src/app/components/graphs/graphs.component.scss b/frontend/src/app/components/graphs/graphs.component.scss index 715ec1b42..c1944d3ae 100644 --- a/frontend/src/app/components/graphs/graphs.component.scss +++ b/frontend/src/app/components/graphs/graphs.component.scss @@ -1,5 +1,5 @@ .menu { - flex-wrap: wrap; + flex-grow: 1; padding: 0 35px; @media (min-width: 576px) { max-width: 600px; @@ -11,6 +11,6 @@ &.last-child { margin-inline-end: 0; } - margin-bottom: 5px; + margin-bottom: 5px; } } \ No newline at end of file diff --git a/frontend/src/app/components/graphs/graphs.component.ts b/frontend/src/app/components/graphs/graphs.component.ts index 050b69848..95eb28d5e 100644 --- a/frontend/src/app/components/graphs/graphs.component.ts +++ b/frontend/src/app/components/graphs/graphs.component.ts @@ -8,7 +8,7 @@ import { WebsocketService } from '../../services/websocket.service'; styleUrls: ['./graphs.component.scss'], }) export class GraphsComponent implements OnInit { - padding = 'w-50'; + flexWrap = false; constructor( public stateService: StateService, @@ -18,8 +18,8 @@ export class GraphsComponent implements OnInit { ngOnInit(): void { this.websocketService.want(['blocks']); - if (this.stateService.env.MINING_DASHBOARD === true && this.stateService.env.LIGHTNING === true) { - this.padding = 'w-33'; + if (this.stateService.env.ACCELERATOR === true && (this.stateService.env.MINING_DASHBOARD === true || this.stateService.env.LIGHTNING === true)) { + this.flexWrap = true; } } } diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss index 835a170cc..468d00ed7 100644 --- a/frontend/src/app/components/statistics/statistics.component.scss +++ b/frontend/src/app/components/statistics/statistics.component.scss @@ -53,7 +53,7 @@ } } .formRadioGroup.mining { - @media (min-width: 1035px) { + @media (min-width: 1200px) { position: relative; top: -100px; } From d0cba30543c9d3fc1d607ae0b175a2df4fb1bc2a Mon Sep 17 00:00:00 2001 From: natsoni Date: Sat, 4 May 2024 18:29:52 +0200 Subject: [PATCH 04/10] Fix fees vs subsidy graph when blocks are not fully indexed --- .../block-fees-subsidy-graph.component.html | 18 ++++---- .../block-fees-subsidy-graph.component.ts | 43 +++++++++++++------ 2 files changed, 41 insertions(+), 20 deletions(-) diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html index 77eea19e1..e9e3e9ea9 100644 --- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html @@ -9,16 +9,18 @@
-
- -
- +
+ +
-
+
{ + if (response.body.length === 0) { + this.isLoading = false; + return; + } let blockReward = 50 * 100_000_000; const subsidies = {}; for (let i = 0; i <= 33; i++) { @@ -121,18 +127,25 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { this.isLoading = false; }), map((response) => { - this.blockCount = parseInt(response.headers.get('x-total-count'), 10); - if (this.radioGroupForm.controls.endBlock.value === '') this.radioGroupForm.controls.endBlock.setValue((this.blockCount - 1).toString(), { emitEvent: false }); - this.dropdownOptions = [(this.blockCount - 1).toString()]; - if (this.blockCount) { - let i = this.blockCount - 1 - this.step; - while (i >= 0) { - this.dropdownOptions.push(i.toString()); - i -= this.step; + const blockCount = parseInt(response.headers.get('x-total-count'), 10); + const chainTip = this.stateService.latestBlockHeight; + + this.indexedBlocksInterval = { + start: chainTip - blockCount, + end: chainTip, + }; + + if (this.radioGroupForm.controls.endBlock.value === '') this.radioGroupForm.controls.endBlock.setValue((this.indexedBlocksInterval.end).toString(), { emitEvent: false }); + this.dropdownOptions = [(this.indexedBlocksInterval.end).toString()]; + if (this.indexedBlocksInterval.end - this.step > this.indexedBlocksInterval.start) { + let newEndBlock = this.indexedBlocksInterval.end - this.step; + while (newEndBlock > this.indexedBlocksInterval.start) { + this.dropdownOptions.push(newEndBlock.toString()); + newEndBlock -= this.step; } } return { - blockCount: this.blockCount, + indexedBlocksInterval: this.indexedBlocksInterval, }; }), ); @@ -155,6 +168,9 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { }; } + this.lowerBound = data.blockHeight[0]; + this.upperBound = data.blockHeight[data.blockHeight.length - 1]; + this.chartOptions = { title: title, color: [ @@ -426,7 +442,10 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { } endBlockToSelector(value: string): string { - if (parseInt(value, 10) > this.blockCount) value = (this.blockCount).toString(); - return `Blocks ${Math.max(0, parseInt(value, 10) - this.step)} - ` + value; + let upperBound = Math.min(this.indexedBlocksInterval.end, parseInt(value, 10)); + let lowerBound = Math.max(0, parseInt(value, 10) - this.step); + if (lowerBound < this.indexedBlocksInterval.start) lowerBound = this.indexedBlocksInterval.start + 1; + if (lowerBound > upperBound) lowerBound = upperBound; + return `Blocks ${lowerBound} - ${upperBound}`; } } From f16afe20be4070527054ade892cbb8e27608b899 Mon Sep 17 00:00:00 2001 From: natsoni Date: Sun, 5 May 2024 15:24:03 +0200 Subject: [PATCH 05/10] Update data length limit in fees bar chart to 10k blocks at once --- backend/src/repositories/BlocksRepository.ts | 2 +- .../block-fees-subsidy-graph.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/backend/src/repositories/BlocksRepository.ts b/backend/src/repositories/BlocksRepository.ts index ca2377e92..8a667c351 100644 --- a/backend/src/repositories/BlocksRepository.ts +++ b/backend/src/repositories/BlocksRepository.ts @@ -706,7 +706,7 @@ class BlocksRepository { if (height !== null) { query += ` WHERE blocks.height <= ${height}`; } - query += ` ORDER BY blocks.height DESC LIMIT 20000`; + query += ` ORDER BY blocks.height DESC LIMIT 10000`; const [rows]: any = await DB.query(query); diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts index 8c70b6379..9e3e6e81e 100644 --- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts @@ -47,7 +47,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { chartInstance: any = undefined; showFiat = false; dropdownOptions = []; - step = 20000; + step = 10000; includeAccelerations = false; constructor( From 0ef76f3e6416c6dbcbedea120a690fa9c8de2719 Mon Sep 17 00:00:00 2001 From: natsoni Date: Sat, 11 May 2024 14:36:17 +0200 Subject: [PATCH 06/10] Block subsidy graph back to timespan selection mode --- backend/src/api/mining/mining-routes.ts | 21 -- backend/src/api/mining/mining.ts | 7 - backend/src/repositories/BlocksRepository.ts | 46 ---- .../block-fees-subsidy-graph.component.html | 35 ++- .../block-fees-subsidy-graph.component.scss | 10 - .../block-fees-subsidy-graph.component.ts | 203 ++++++------------ frontend/src/app/services/api.service.ts | 7 - 7 files changed, 93 insertions(+), 236 deletions(-) diff --git a/backend/src/api/mining/mining-routes.ts b/backend/src/api/mining/mining-routes.ts index 7fa59e219..3492114b5 100644 --- a/backend/src/api/mining/mining-routes.ts +++ b/backend/src/api/mining/mining-routes.ts @@ -24,8 +24,6 @@ class MiningRoutes { .get(config.MEMPOOL.API_URL_PREFIX + 'mining/difficulty-adjustments', this.$getDifficultyAdjustments) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/reward-stats/:blockCount', this.$getRewardStats) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fees/:interval', this.$getHistoricalBlockFees) - .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/exact-fees/:height', this.$getHistoricalExactBlockFees) - .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/exact-fees', this.$getHistoricalExactBlockFees) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/rewards/:interval', this.$getHistoricalBlockRewards) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fee-rates/:interval', this.$getHistoricalBlockFeeRates) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/sizes-weights/:interval', this.$getHistoricalBlockSizeAndWeight) @@ -219,25 +217,6 @@ class MiningRoutes { } } - private async $getHistoricalExactBlockFees(req: Request, res: Response) { - try { - const heightRegex = /^(0|[1-9]\d{0,9})$/; - if (req.params.height !== undefined && !heightRegex.test(req.params.height)) { - throw new Error('Invalid height parameter'); - } - - const blockFees = await mining.$getHistoricalExactBlockFees(req.params.height); - const blockCount = await BlocksRepository.$blockCount(null, null); - res.header('Pragma', 'public'); - res.header('Cache-control', 'public'); - res.header('X-total-count', blockCount.toString()); - res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString()); - res.json(blockFees); - } catch (e) { - res.status(500).send(e instanceof Error ? e.message : e); - } - } - private async $getHistoricalBlockRewards(req: Request, res: Response) { try { const blockRewards = await mining.$getHistoricalBlockRewards(req.params.interval); diff --git a/backend/src/api/mining/mining.ts b/backend/src/api/mining/mining.ts index 845e571f6..85554db2d 100644 --- a/backend/src/api/mining/mining.ts +++ b/backend/src/api/mining/mining.ts @@ -50,13 +50,6 @@ class Mining { ); } - /** - * Get historical (not averaged) block total fee - */ - public async $getHistoricalExactBlockFees(height: string | null = null): Promise { - return await BlocksRepository.$getHistoricalExactBlockFees(height); - } - /** * Get historical block rewards */ diff --git a/backend/src/repositories/BlocksRepository.ts b/backend/src/repositories/BlocksRepository.ts index 8a667c351..e6e92d60f 100644 --- a/backend/src/repositories/BlocksRepository.ts +++ b/backend/src/repositories/BlocksRepository.ts @@ -689,52 +689,6 @@ class BlocksRepository { } } - /** - * Get the historical block fees - */ - public async $getHistoricalExactBlockFees(height: string | null): Promise { - try { - let query = `SELECT - blocks.height, - fees, - prices.USD - FROM blocks - JOIN blocks_prices on blocks_prices.height = blocks.height - JOIN prices on prices.id = blocks_prices.price_id - `; - - if (height !== null) { - query += ` WHERE blocks.height <= ${height}`; - } - query += ` ORDER BY blocks.height DESC LIMIT 10000`; - - const [rows]: any = await DB.query(query); - - // Add accelerations data if available - if (config.MEMPOOL_SERVICES.ACCELERATIONS && rows.length > 0) { - - let query = ` - SELECT height, boost_cost FROM accelerations - WHERE height >= ${rows[rows.length - 1].height} AND height <= ${rows[0].height} - `; - const [accelerations]: any = await DB.query(query); - - for (let i = 0; i < accelerations.length; ++i) { - const idx = rows.findIndex((block) => block.height === accelerations[i].height); - if (idx !== -1) { - if (rows[idx].accelerations === undefined) rows[idx].accelerations = 0; - rows[idx].accelerations += accelerations[i].boost_cost; - } - } - } - - return rows; - } catch (e) { - logger.err('Cannot generate exact block fees history. Reason: ' + (e instanceof Error ? e.message : e)); - throw e; - } - } - /** * Get the historical averaged block rewards */ diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html index e9e3e9ea9..8e44cbf51 100644 --- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html @@ -9,18 +9,31 @@
- -
- -
- -
+
+
+ + + + + + +
- +
; isLoading = true; formatNumber = formatNumber; - endBlock = ''; - indexedBlocksInterval = { start: 0, end: 0 }; - lowerBound = 0; - upperBound = 0; + timespan = ''; chartInstance: any = undefined; showFiat = false; - dropdownOptions = []; - step = 10000; - includeAccelerations = false; constructor( @Inject(LOCALE_ID) public locale: string, @@ -56,40 +53,43 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { private apiService: ApiService, private formBuilder: UntypedFormBuilder, public stateService: StateService, + private storageService: StorageService, + private miningService: MiningService, private route: ActivatedRoute, - private router: Router, private fiatShortenerPipe: FiatShortenerPipe, private fiatCurrencyPipe: FiatCurrencyPipe, ) { - this.radioGroupForm = this.formBuilder.group({ endBlock: '' }); - this.radioGroupForm.controls.endBlock.setValue(''); + this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' }); + this.radioGroupForm.controls.dateSpan.setValue('1y'); } ngOnInit(): void { this.seoService.setTitle($localize`:@@mining.block-fees-subsidy:Block Fees Vs Subsidy`); this.seoService.setDescription($localize`:@@meta.description.bitcoin.graphs.block-fees-subsidy:See the mining fees earned per Bitcoin block compared to the Bitcoin block subsidy, visualized in BTC and USD over time.`); - this.route.queryParams.subscribe((params) => { - if (/^(0|[1-9]\d{0,9})$/.test(params['height'])) { - this.radioGroupForm.controls.endBlock.setValue(params['height'], { emitEvent: false }); + this.miningWindowPreference = this.miningService.getDefaultTimespan('1m'); + this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference }); + this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference); + + this.route + .fragment + .subscribe((fragment) => { + if (['1m', '3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) { + this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false }); } }); - this.includeAccelerations = this.stateService.env.ACCELERATOR; - - this.statsObservable$ = this.radioGroupForm.get('endBlock').valueChanges + this.statsObservable$ = this.radioGroupForm.get('dateSpan').valueChanges .pipe( - startWith(this.radioGroupForm.controls.endBlock.value), - switchMap((endBlock) => { + startWith(this.radioGroupForm.controls.dateSpan.value), + switchMap((timespan) => { this.isLoading = true; - this.endBlock = endBlock; - return this.apiService.getHistoricalExactBlockFees$(endBlock === '' ? undefined : endBlock) + this.storageService.setValue('miningWindowPreference', timespan); + this.timespan = timespan; + this.isLoading = true; + return this.apiService.getHistoricalBlockFees$(timespan) .pipe( tap((response) => { - if (response.body.length === 0) { - this.isLoading = false; - return; - } let blockReward = 50 * 100_000_000; const subsidies = {}; for (let i = 0; i <= 33; i++) { @@ -97,55 +97,21 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { blockReward = Math.floor(blockReward / 2); } - const existingHeights = new Set(response.body.map(val => val.height)); - - for (let i = response.body[0].height; i <= response.body[response.body.length - 1].height; i++) { - if (!existingHeights.has(i)) { - response.body.push({ height: i, fees: 0, missing: true }); - } - } - - response.body.sort((a, b) => a.height - b.height); - const data = { - blockHeight: response.body.map(val => val.height), - blockSubsidy: response.body.map(val => val?.missing ? 0 : subsidies[Math.floor(Math.min(val.height / 210000, 33))] / 100_000_000), - blockSubsidyFiat: response.body.map(val => val?.missing ? 0 : subsidies[Math.floor(Math.min(val.height / 210000, 33))] / 100_000_000 * val.USD), - blockFees: response.body.map(val => val.fees / 100_000_000), - blockFeesFiat: response.body.map(val => val.fees / 100_000_000 * val.USD), - } - - let accelerationData = {}; - if (this.includeAccelerations) { - accelerationData = { - blockAccelerations: response.body.map(val => val?.accelerations ? val.accelerations / 100_000_000 : 0), - blockAccelerationsFiat: response.body.map(val => val?.accelerations ? val.accelerations / 100_000_000 * val.USD : 0), - } - } - - this.prepareChartOptions(data, accelerationData); + timestamp: response.body.map(val => val.timestamp * 1000), + blockHeight: response.body.map(val => val.avgHeight), + blockFees: response.body.map(val => val.avgFees / 100_000_000), + blockFeesFiat: response.body.filter(val => val['USD'] > 0).map(val => val.avgFees / 100_000_000 * val['USD']), + blockSubsidy: response.body.map(val => subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000), + blockSubsidyFiat: response.body.filter(val => val['USD'] > 0).map(val => subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000 * val['USD']), + }; + + this.prepareChartOptions(data); this.isLoading = false; }), map((response) => { - const blockCount = parseInt(response.headers.get('x-total-count'), 10); - const chainTip = this.stateService.latestBlockHeight; - - this.indexedBlocksInterval = { - start: chainTip - blockCount, - end: chainTip, - }; - - if (this.radioGroupForm.controls.endBlock.value === '') this.radioGroupForm.controls.endBlock.setValue((this.indexedBlocksInterval.end).toString(), { emitEvent: false }); - this.dropdownOptions = [(this.indexedBlocksInterval.end).toString()]; - if (this.indexedBlocksInterval.end - this.step > this.indexedBlocksInterval.start) { - let newEndBlock = this.indexedBlocksInterval.end - this.step; - while (newEndBlock > this.indexedBlocksInterval.start) { - this.dropdownOptions.push(newEndBlock.toString()); - newEndBlock -= this.step; - } - } return { - indexedBlocksInterval: this.indexedBlocksInterval, + blockCount: parseInt(response.headers.get('x-total-count'), 10), }; }), ); @@ -154,7 +120,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { ); } - prepareChartOptions(data, accelerationData) { + prepareChartOptions(data) { let title: object; if (data.blockFees.length === 0) { title = { @@ -168,15 +134,11 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { }; } - this.lowerBound = data.blockHeight[0]; - this.upperBound = data.blockHeight[data.blockHeight.length - 1]; - this.chartOptions = { title: title, color: [ 'var(--orange)', 'var(--success)', - 'var(--tertiary)' ], animation: false, grid: { @@ -204,10 +166,9 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { return ''; } - let tooltip = `Block ${data[0].axisValue}
`; + let tooltip = `Around block ${data[0].axisValue}
`; for (let i = data.length - 1; i >= 0; i--) { const tick = data[i]; - if (tick.seriesName.includes('Accelerations') && tick.data === 0) continue; if (!this.showFiat) tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data, this.locale, '1.0-3')} BTC
`; else tooltip += `${tick.marker} ${tick.seriesName}: ${this.fiatCurrencyPipe.transform(tick.data, null, 'USD') }
`; } @@ -216,15 +177,37 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { return tooltip; }.bind(this) }, - xAxis: data.blockFees.length === 0 ? undefined : - { - type: 'category', - data: data.blockHeight, - axisLabel: { - hideOverlap: true, - color: 'var(--grey)', + xAxis: data.blockFees.length === 0 ? undefined : [ + { + type: 'category', + data: data.blockHeight, + show: false, + axisLabel: { + hideOverlap: true, + } + }, + { + type: 'category', + data: data.timestamp, + show: true, + position: 'bottom', + axisLabel: { + color: 'var(--grey)', + formatter: (val) => { + return formatterXAxis(this.locale, this.timespan, parseInt(val, 10)); + } + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, } - }, + ], legend: data.blockFees.length === 0 ? undefined : { data: [ { @@ -243,14 +226,6 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { }, icon: 'roundRect', }, - this.includeAccelerations ? { - name: 'Accelerations', - inactiveColor: 'var(--grey)', - textStyle: { - color: 'white', - }, - icon: 'roundRect', - } : null, { name: 'Subsidy (USD)', inactiveColor: 'var(--grey)', @@ -267,22 +242,12 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { }, icon: 'roundRect', }, - this.includeAccelerations ? { - name: 'Accelerations (USD)', - inactiveColor: 'var(--grey)', - textStyle: { - color: 'white', - }, - icon: 'roundRect', - } : null - ].filter(legend => legend !== null), + ], selected: { 'Subsidy (USD)': this.showFiat, 'Fees (USD)': this.showFiat, - 'Accelerations (USD)': this.showFiat, 'Subsidy': !this.showFiat, 'Fees': !this.showFiat, - 'Accelerations': !this.showFiat, }, }, yAxis: data.blockFees.length === 0 ? undefined : [ @@ -332,13 +297,6 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { stack: 'total', data: data.blockFees, }, - { - name: 'Accelerations', - yAxisIndex: 0, - type: 'bar', - stack: 'total', - data: accelerationData.blockAccelerations, - }, { name: 'Subsidy (USD)', yAxisIndex: 1, @@ -353,13 +311,6 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { stack: 'total', data: data.blockFeesFiat, }, - { - name: 'Accelerations (USD)', - yAxisIndex: 1, - type: 'bar', - stack: 'total', - data: accelerationData.blockAccelerationsFiat, - }, ], dataZoom: data.blockFees.length === 0 ? undefined : [{ type: 'inside', @@ -398,18 +349,14 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { this.showFiat = true; this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Subsidy' }); this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Fees' }); - this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Accelerations' }); this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Subsidy (USD)' }); this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Fees (USD)' }); - this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Accelerations (USD)' }); } else { this.showFiat = false; this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Subsidy' }); this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Fees' }); - this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Accelerations' }); this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Subsidy (USD)' }); this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Fees (USD)' }); - this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Accelerations (USD)' }); } }); } @@ -429,23 +376,11 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { download(this.chartInstance.getDataURL({ pixelRatio: 2, excludeComponents: ['dataZoom'], - }), `block-fees-subsidy-${this.endBlock}-${Math.round(now.getTime() / 1000)}.svg`); + }), `block-fees-subsidy-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`); // @ts-ignore this.chartOptions.grid.bottom = prevBottom; this.chartOptions.backgroundColor = 'none'; this.chartInstance.setOption(this.chartOptions); } - selectBlockSpan(value: string) { - this.radioGroupForm.controls.endBlock.setValue(value); - this.router.navigate([], { queryParams: { height: value }, queryParamsHandling: 'merge' }); - } - - endBlockToSelector(value: string): string { - let upperBound = Math.min(this.indexedBlocksInterval.end, parseInt(value, 10)); - let lowerBound = Math.max(0, parseInt(value, 10) - this.step); - if (lowerBound < this.indexedBlocksInterval.start) lowerBound = this.indexedBlocksInterval.start + 1; - if (lowerBound > upperBound) lowerBound = upperBound; - return `Blocks ${lowerBound} - ${upperBound}`; - } } diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index 1d755baa5..0531916a0 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -333,13 +333,6 @@ export class ApiService { ); } - getHistoricalExactBlockFees$(height: string | undefined) : Observable { - return this.httpClient.get( - this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/exact-fees` + - (height !== undefined ? `/${height}` : ''), { observe: 'response' } - ); - } - getHistoricalBlockRewards$(interval: string | undefined) : Observable { return this.httpClient.get( this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/rewards` + From 42d591bf4c8854193b32169fcd519977c78c01cd Mon Sep 17 00:00:00 2001 From: natsoni Date: Sun, 12 May 2024 18:48:50 +0200 Subject: [PATCH 07/10] Block subsidy graph: add lower timeframes --- backend/src/api/mining/mining.ts | 2 +- .../block-fees-subsidy-graph.component.html | 9 +++++++++ .../block-fees-subsidy-graph.component.ts | 15 ++++++++++----- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/backend/src/api/mining/mining.ts b/backend/src/api/mining/mining.ts index 85554db2d..a4e92900f 100644 --- a/backend/src/api/mining/mining.ts +++ b/backend/src/api/mining/mining.ts @@ -45,7 +45,7 @@ class Mining { */ public async $getHistoricalBlockFees(interval: string | null = null): Promise { return await BlocksRepository.$getHistoricalBlockFees( - this.getTimeRange(interval, 5), + this.getTimeRange(interval), Common.getSqlInterval(interval) ); } diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html index 8e44cbf51..e14c991f0 100644 --- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html @@ -11,6 +11,15 @@
+ + + diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts index f4e0eb5ff..41090cb25 100644 --- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts @@ -67,14 +67,14 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { this.seoService.setTitle($localize`:@@mining.block-fees-subsidy:Block Fees Vs Subsidy`); this.seoService.setDescription($localize`:@@meta.description.bitcoin.graphs.block-fees-subsidy:See the mining fees earned per Bitcoin block compared to the Bitcoin block subsidy, visualized in BTC and USD over time.`); - this.miningWindowPreference = this.miningService.getDefaultTimespan('1m'); + this.miningWindowPreference = this.miningService.getDefaultTimespan('24h'); this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference }); this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference); this.route .fragment .subscribe((fragment) => { - if (['1m', '3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) { + if (['24h', '3d', '1w', '1m', '3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) { this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false }); } }); @@ -137,8 +137,8 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { this.chartOptions = { title: title, color: [ - 'var(--orange)', - 'var(--success)', + '#ff9f00', + '#0aab2f', ], animation: false, grid: { @@ -166,7 +166,12 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { return ''; } - let tooltip = `Around block ${data[0].axisValue}
`; + let tooltip = ''; + if (['24h', '3d'].includes(this.timespan)) { + tooltip += $localize`At block ${data[0].axisValue}
`; + } else { + tooltip += $localize`Around block ${data[0].axisValue}
`; + } for (let i = data.length - 1; i >= 0; i--) { const tick = data[i]; if (!this.showFiat) tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data, this.locale, '1.0-3')} BTC
`; From c2a3ff4b67aba88f62f1be513beefaf71b57304f Mon Sep 17 00:00:00 2001 From: natsoni Date: Tue, 14 May 2024 20:31:25 +0200 Subject: [PATCH 08/10] Improve granularity when zoom in block fees bar graph --- backend/src/api/mining/mining-routes.ts | 21 ++ backend/src/api/mining/mining.ts | 29 +++ backend/src/repositories/BlocksRepository.ts | 4 +- .../block-fees-subsidy-graph.component.html | 2 +- .../block-fees-subsidy-graph.component.ts | 228 +++++++++++++++--- frontend/src/app/services/api.service.ts | 6 + 6 files changed, 254 insertions(+), 36 deletions(-) diff --git a/backend/src/api/mining/mining-routes.ts b/backend/src/api/mining/mining-routes.ts index 3492114b5..b6ce3ba70 100644 --- a/backend/src/api/mining/mining-routes.ts +++ b/backend/src/api/mining/mining-routes.ts @@ -24,6 +24,7 @@ class MiningRoutes { .get(config.MEMPOOL.API_URL_PREFIX + 'mining/difficulty-adjustments', this.$getDifficultyAdjustments) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/reward-stats/:blockCount', this.$getRewardStats) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fees/:interval', this.$getHistoricalBlockFees) + .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fees', this.$getBlockFeesTimespan) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/rewards/:interval', this.$getHistoricalBlockRewards) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fee-rates/:interval', this.$getHistoricalBlockFeeRates) .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/sizes-weights/:interval', this.$getHistoricalBlockSizeAndWeight) @@ -217,6 +218,26 @@ class MiningRoutes { } } + private async $getBlockFeesTimespan(req: Request, res: Response) { + try { + if (!parseInt(req.query.from as string, 10) || !parseInt(req.query.to as string, 10)) { + throw new Error('Invalid timestamp range'); + } + if (parseInt(req.query.from as string, 10) > parseInt(req.query.to as string, 10)) { + throw new Error('from must be less than to'); + } + const blockFees = await mining.$getBlockFeesTimespan(parseInt(req.query.from as string, 10), parseInt(req.query.to as string, 10)); + const blockCount = await BlocksRepository.$blockCount(null, null); + res.header('Pragma', 'public'); + res.header('Cache-control', 'public'); + res.header('X-total-count', blockCount.toString()); + res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString()); + res.json(blockFees); + } catch (e) { + res.status(500).send(e instanceof Error ? e.message : e); + } + } + private async $getHistoricalBlockRewards(req: Request, res: Response) { try { const blockRewards = await mining.$getHistoricalBlockRewards(req.params.interval); diff --git a/backend/src/api/mining/mining.ts b/backend/src/api/mining/mining.ts index a4e92900f..21ee4b35a 100644 --- a/backend/src/api/mining/mining.ts +++ b/backend/src/api/mining/mining.ts @@ -50,6 +50,17 @@ class Mining { ); } + /** + * Get timespan block total fees + */ + public async $getBlockFeesTimespan(from: number, to: number): Promise { + return await BlocksRepository.$getHistoricalBlockFees( + this.getTimeRangeFromTimespan(from, to), + null, + {from, to} + ); + } + /** * Get historical block rewards */ @@ -646,6 +657,24 @@ class Mining { } } + private getTimeRangeFromTimespan(from: number, to: number, scale = 1): number { + const timespan = to - from; + switch (true) { + case timespan > 3600 * 24 * 365 * 4: return 86400 * scale; // 24h + case timespan > 3600 * 24 * 365 * 3: return 43200 * scale; // 12h + case timespan > 3600 * 24 * 365 * 2: return 43200 * scale; // 12h + case timespan > 3600 * 24 * 365: return 28800 * scale; // 8h + case timespan > 3600 * 24 * 30 * 6: return 28800 * scale; // 8h + case timespan > 3600 * 24 * 30 * 3: return 10800 * scale; // 3h + case timespan > 3600 * 24 * 30: return 7200 * scale; // 2h + case timespan > 3600 * 24 * 7: return 1800 * scale; // 30min + case timespan > 3600 * 24 * 3: return 300 * scale; // 5min + case timespan > 3600 * 24: return 1 * scale; + default: return 1 * scale; + } + } + + // Finds the oldest block in a consecutive chain back from the tip // assumes `blocks` is sorted in ascending height order private getOldestConsecutiveBlock(blocks: DifficultyBlock[]): DifficultyBlock { diff --git a/backend/src/repositories/BlocksRepository.ts b/backend/src/repositories/BlocksRepository.ts index e6e92d60f..0077a0b79 100644 --- a/backend/src/repositories/BlocksRepository.ts +++ b/backend/src/repositories/BlocksRepository.ts @@ -663,7 +663,7 @@ class BlocksRepository { /** * Get the historical averaged block fees */ - public async $getHistoricalBlockFees(div: number, interval: string | null): Promise { + public async $getHistoricalBlockFees(div: number, interval: string | null, timespan?: {from: number, to: number}): Promise { try { let query = `SELECT CAST(AVG(blocks.height) as INT) as avgHeight, @@ -677,6 +677,8 @@ class BlocksRepository { if (interval !== null) { query += ` WHERE blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`; + } else if (timespan) { + query += ` WHERE blockTimestamp BETWEEN FROM_UNIXTIME(${timespan.from}) AND FROM_UNIXTIME(${timespan.to})`; } query += ` GROUP BY UNIX_TIMESTAMP(blockTimestamp) DIV ${div}`; diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html index e14c991f0..ee1d78f35 100644 --- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html @@ -45,7 +45,7 @@
-
diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts index 41090cb25..a720998b2 100644 --- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts @@ -1,18 +1,19 @@ -import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core'; import { EChartsOption } from '../../graphs/echarts'; import { Observable } from 'rxjs'; -import { map, share, startWith, switchMap, tap } from 'rxjs/operators'; +import { catchError, map, share, startWith, switchMap, tap } from 'rxjs/operators'; import { ApiService } from '../../services/api.service'; import { SeoService } from '../../services/seo.service'; import { formatNumber } from '@angular/common'; import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; import { download, formatterXAxis } from '../../shared/graphs.utils'; -import { ActivatedRoute } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe'; import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe'; import { StateService } from '../../services/state.service'; import { MiningService } from '../../services/mining.service'; import { StorageService } from '../../services/storage.service'; +import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe'; @Component({ selector: 'app-block-fees-subsidy-graph', @@ -41,11 +42,16 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { }; statsObservable$: Observable; + data: any; + subsidies: { [key: number]: number } = {}; isLoading = true; formatNumber = formatNumber; timespan = ''; chartInstance: any = undefined; showFiat = false; + updateZoom = false; + zoomSpan = 100; + zoomTimeSpan = ''; constructor( @Inject(LOCALE_ID) public locale: string, @@ -56,11 +62,16 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { private storageService: StorageService, private miningService: MiningService, private route: ActivatedRoute, + private router: Router, + private zone: NgZone, private fiatShortenerPipe: FiatShortenerPipe, private fiatCurrencyPipe: FiatCurrencyPipe, + private cd: ChangeDetectorRef, ) { this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' }); this.radioGroupForm.controls.dateSpan.setValue('1y'); + + this.subsidies = this.initSubsidies(); } ngOnInit(): void { @@ -86,27 +97,21 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { this.isLoading = true; this.storageService.setValue('miningWindowPreference', timespan); this.timespan = timespan; + this.zoomTimeSpan = timespan; this.isLoading = true; return this.apiService.getHistoricalBlockFees$(timespan) .pipe( tap((response) => { - let blockReward = 50 * 100_000_000; - const subsidies = {}; - for (let i = 0; i <= 33; i++) { - subsidies[i] = blockReward; - blockReward = Math.floor(blockReward / 2); - } - - const data = { + this.data = { timestamp: response.body.map(val => val.timestamp * 1000), blockHeight: response.body.map(val => val.avgHeight), blockFees: response.body.map(val => val.avgFees / 100_000_000), blockFeesFiat: response.body.filter(val => val['USD'] > 0).map(val => val.avgFees / 100_000_000 * val['USD']), - blockSubsidy: response.body.map(val => subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000), - blockSubsidyFiat: response.body.filter(val => val['USD'] > 0).map(val => subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000 * val['USD']), + blockSubsidy: response.body.map(val => this.subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000), + blockSubsidyFiat: response.body.filter(val => val['USD'] > 0).map(val => this.subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000 * val['USD']), }; - this.prepareChartOptions(data); + this.prepareChartOptions(); this.isLoading = false; }), map((response) => { @@ -120,9 +125,9 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { ); } - prepareChartOptions(data) { + prepareChartOptions() { let title: object; - if (data.blockFees.length === 0) { + if (this.data.blockFees.length === 0) { title = { textStyle: { color: 'grey', @@ -165,13 +170,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { if (data.length <= 0) { return ''; } - - let tooltip = ''; - if (['24h', '3d'].includes(this.timespan)) { - tooltip += $localize`At block ${data[0].axisValue}
`; - } else { - tooltip += $localize`Around block ${data[0].axisValue}
`; - } + let tooltip = `${formatterXAxis(this.locale, this.zoomTimeSpan, parseInt(this.data.timestamp[data[0].dataIndex], 10))}
`; for (let i = data.length - 1; i >= 0; i--) { const tick = data[i]; if (!this.showFiat) tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data, this.locale, '1.0-3')} BTC
`; @@ -179,13 +178,18 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { } if (!this.showFiat) tooltip += `
${formatNumber(data.reduce((acc, val) => acc + val.data, 0), this.locale, '1.0-3')} BTC
`; else tooltip += `
${this.fiatCurrencyPipe.transform(data.reduce((acc, val) => acc + val.data, 0), null, 'USD')}
`; + if (['24h', '3d'].includes(this.zoomTimeSpan)) { + tooltip += `` + $localize`At block ${data[0].axisValue}` + ``; + } else { + tooltip += `` + $localize`Around block ${data[0].axisValue}` + ``; + } return tooltip; }.bind(this) }, - xAxis: data.blockFees.length === 0 ? undefined : [ + xAxis: this.data.blockFees.length === 0 ? undefined : [ { type: 'category', - data: data.blockHeight, + data: this.data.blockHeight, show: false, axisLabel: { hideOverlap: true, @@ -193,7 +197,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { }, { type: 'category', - data: data.timestamp, + data: this.data.timestamp, show: true, position: 'bottom', axisLabel: { @@ -213,7 +217,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { }, } ], - legend: data.blockFees.length === 0 ? undefined : { + legend: this.data.blockFees.length === 0 ? undefined : { data: [ { name: 'Subsidy', @@ -255,7 +259,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { 'Fees': !this.showFiat, }, }, - yAxis: data.blockFees.length === 0 ? undefined : [ + yAxis: this.data.blockFees.length === 0 ? undefined : [ { type: 'value', axisLabel: { @@ -287,37 +291,37 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { }, }, ], - series: data.blockFees.length === 0 ? undefined : [ + series: this.data.blockFees.length === 0 ? undefined : [ { name: 'Subsidy', yAxisIndex: 0, type: 'bar', stack: 'total', - data: data.blockSubsidy, + data: this.data.blockSubsidy, }, { name: 'Fees', yAxisIndex: 0, type: 'bar', stack: 'total', - data: data.blockFees, + data: this.data.blockFees, }, { name: 'Subsidy (USD)', yAxisIndex: 1, type: 'bar', stack: 'total', - data: data.blockSubsidyFiat, + data: this.data.blockSubsidyFiat, }, { name: 'Fees (USD)', yAxisIndex: 1, type: 'bar', stack: 'total', - data: data.blockFeesFiat, + data: this.data.blockFeesFiat, }, ], - dataZoom: data.blockFees.length === 0 ? undefined : [{ + dataZoom: this.data.blockFees.length === 0 ? undefined : [{ type: 'inside', realtime: true, zoomLock: true, @@ -364,12 +368,168 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Fees (USD)' }); } }); + + this.chartInstance.on('datazoom', (params) => { + if (params.silent || this.isLoading) { + return; + } + this.updateZoom = true; + }); + + this.chartInstance.on('click', (e) => { + this.zone.run(() => { + if (['24h', '3d'].includes(this.zoomTimeSpan)) { + const url = new RelativeUrlPipe(this.stateService).transform(`/block/${e.name}`); + if (e.event.event.shiftKey || e.event.event.ctrlKey || e.event.event.metaKey) { + window.open(url); + } else { + this.router.navigate([url]); + } + } + }); + }); + } + + @HostListener('document:mouseup', ['$event']) + onMouseUp(event: MouseEvent) { + if (this.updateZoom) { + this.onZoom(); + this.updateZoom = false; + } } isMobile() { return (window.innerWidth <= 767.98); } + initSubsidies(): { [key: number]: number } { + let blockReward = 50 * 100_000_000; + const subsidies = {}; + for (let i = 0; i <= 33; i++) { + subsidies[i] = blockReward; + blockReward = Math.floor(blockReward / 2); + } + return subsidies; + } + + onZoom() { + const option = this.chartInstance.getOption(); + const timestamps = option.xAxis[1].data; + const startTimestamp = timestamps[option.dataZoom[0].startValue]; + const endTimestamp = timestamps[option.dataZoom[0].endValue]; + + // Avoid to fetch new data if not needed + if (option.dataZoom[0].end - option.dataZoom[0].start >= this.zoomSpan + 0.1 + || this.getTimeRangeFromTimespan(Math.floor(startTimestamp / 1000), Math.floor(endTimestamp / 1000), false) as number === this.getTimeRange(this.zoomTimeSpan) + ) { + this.zoomSpan = option.dataZoom[0].end - option.dataZoom[0].start; + this.zoomTimeSpan = this.getTimeRangeFromTimespan(Math.floor(startTimestamp / 1000), Math.floor(endTimestamp / 1000), true) as string; + return; + } + + this.isLoading = true; + this.cd.detectChanges(); + + const subscription = this.apiService.getBlockFeesFromTimespan$(Math.floor(startTimestamp / 1000), Math.floor(endTimestamp / 1000)) + .pipe( + tap((response) => { + const startIndex = option.dataZoom[0].startValue; + const endIndex = option.dataZoom[0].endValue; + + // Update series with more granular data + const lengthBefore = this.data.timestamp.length; + this.data.timestamp.splice(startIndex, endIndex - startIndex, ...response.body.map(val => val.timestamp * 1000)); + this.data.blockHeight.splice(startIndex, endIndex - startIndex, ...response.body.map(val => val.avgHeight)); + this.data.blockFees.splice(startIndex, endIndex - startIndex, ...response.body.map(val => val.avgFees / 100_000_000)); + this.data.blockFeesFiat.splice(startIndex, endIndex - startIndex, ...response.body.filter(val => val['USD'] > 0).map(val => val.avgFees / 100_000_000 * val['USD'])); + this.data.blockSubsidy.splice(startIndex, endIndex - startIndex, ...response.body.map(val => this.subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000)); + this.data.blockSubsidyFiat.splice(startIndex, endIndex - startIndex, ...response.body.filter(val => val['USD'] > 0).map(val => this.subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000 * val['USD'])); + option.series[0].data = this.data.blockSubsidy; + option.series[1].data = this.data.blockFees; + option.series[2].data = this.data.blockSubsidyFiat; + option.series[3].data = this.data.blockFeesFiat; + option.xAxis[0].data = this.data.blockHeight; + option.xAxis[1].data = this.data.timestamp; + this.chartInstance.setOption(option, true); + const lengthAfter = this.data.timestamp.length; + + // Update the zoom to keep the same range after the update + this.chartInstance.dispatchAction({ + type: 'dataZoom', + startValue: startIndex, + endValue: endIndex + lengthAfter - lengthBefore, + silent: true, + }); + + // Update the chart + const newOption = this.chartInstance.getOption(); + this.zoomSpan = newOption.dataZoom[0].end - newOption.dataZoom[0].start; + this.zoomTimeSpan = this.getTimeRangeFromTimespan(Math.floor(this.data.timestamp[newOption.dataZoom[0].startValue] / 1000), Math.floor(this.data.timestamp[newOption.dataZoom[0].endValue] / 1000), true) as string; + this.isLoading = false; + }), + catchError(() => { + const newOption = this.chartInstance.getOption(); + this.zoomSpan = newOption.dataZoom[0].end - newOption.dataZoom[0].start; + this.zoomTimeSpan = this.getTimeRangeFromTimespan(Math.floor(this.data.timestamp[newOption.dataZoom[0].startValue] / 1000), Math.floor(this.data.timestamp[newOption.dataZoom[0].endValue] / 1000), true) as string; + this.isLoading = false; + this.cd.detectChanges(); + return []; + }) + ).subscribe(() => { + subscription.unsubscribe(); + this.cd.detectChanges(); + }); + } + + getTimeRange(interval: string, scale = 1): number { + switch (interval) { + case '4y': return 43200 * scale; // 12h + case '3y': return 43200 * scale; // 12h + case '2y': return 28800 * scale; // 8h + case '1y': return 28800 * scale; // 8h + case '6m': return 10800 * scale; // 3h + case '3m': return 7200 * scale; // 2h + case '1m': return 1800 * scale; // 30min + case '1w': return 300 * scale; // 5min + case '3d': return 1 * scale; + case '24h': return 1 * scale; + default: return 86400 * scale; + } + } + + getTimeRangeFromTimespan(from: number, to: number, toString: boolean, scale = 1): number | string { + const timespan = to - from; + if (toString) { + switch (true) { + case timespan >= 3600 * 24 * 365 * 4: return 'all'; + case timespan >= 3600 * 24 * 365 * 3: return '4y'; + case timespan >= 3600 * 24 * 365 * 2: return '3y'; + case timespan >= 3600 * 24 * 365: return '2y'; + case timespan >= 3600 * 24 * 30 * 6: return '1y'; + case timespan >= 3600 * 24 * 30 * 3: return '6m'; + case timespan >= 3600 * 24 * 30: return '3m'; + case timespan >= 3600 * 24 * 7: return '1m'; + case timespan >= 3600 * 24 * 3: return '1w'; + case timespan >= 3600 * 24: return '3d'; + default: return '24h'; + } + } else { + switch (true) { + case timespan > 3600 * 24 * 365 * 4: return 86400 * scale; // 24h + case timespan > 3600 * 24 * 365 * 3: return 43200 * scale; // 12h + case timespan > 3600 * 24 * 365 * 2: return 43200 * scale; // 12h + case timespan > 3600 * 24 * 365: return 28800 * scale; // 8h + case timespan > 3600 * 24 * 30 * 6: return 28800 * scale; // 8h + case timespan > 3600 * 24 * 30 * 3: return 10800 * scale; // 3h + case timespan > 3600 * 24 * 30: return 7200 * scale; // 2h + case timespan > 3600 * 24 * 7: return 1800 * scale; // 30min + case timespan > 3600 * 24 * 3: return 300 * scale; // 5min + case timespan > 3600 * 24: return 1 * scale; + default: return 1 * scale; + } + } + } + onSaveChart() { // @ts-ignore const prevBottom = this.chartOptions.grid.bottom; diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index 0531916a0..7efcdcce5 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -333,6 +333,12 @@ export class ApiService { ); } + getBlockFeesFromTimespan$(from: number, to: number): Observable { + return this.httpClient.get( + this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/fees?from=${from}&to=${to}`, { observe: 'response' } + ); + } + getHistoricalBlockRewards$(interval: string | undefined) : Observable { return this.httpClient.get( this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/rewards` + From ec54ed6f94ede2722ce82cf6db94014eb227cb13 Mon Sep 17 00:00:00 2001 From: natsoni Date: Wed, 15 May 2024 13:07:32 +0200 Subject: [PATCH 09/10] Remove bar graph data update logic and fix mobile navigation --- .../block-fees-subsidy-graph.component.ts | 75 +++++-------------- 1 file changed, 17 insertions(+), 58 deletions(-) diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts index a720998b2..7ec372bc4 100644 --- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts @@ -390,8 +390,8 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { }); } - @HostListener('document:mouseup', ['$event']) - onMouseUp(event: MouseEvent) { + @HostListener('document:pointerup', ['$event']) + onPointerUp(event: PointerEvent) { if (this.updateZoom) { this.onZoom(); this.updateZoom = false; @@ -418,15 +418,6 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { const startTimestamp = timestamps[option.dataZoom[0].startValue]; const endTimestamp = timestamps[option.dataZoom[0].endValue]; - // Avoid to fetch new data if not needed - if (option.dataZoom[0].end - option.dataZoom[0].start >= this.zoomSpan + 0.1 - || this.getTimeRangeFromTimespan(Math.floor(startTimestamp / 1000), Math.floor(endTimestamp / 1000), false) as number === this.getTimeRange(this.zoomTimeSpan) - ) { - this.zoomSpan = option.dataZoom[0].end - option.dataZoom[0].start; - this.zoomTimeSpan = this.getTimeRangeFromTimespan(Math.floor(startTimestamp / 1000), Math.floor(endTimestamp / 1000), true) as string; - return; - } - this.isLoading = true; this.cd.detectChanges(); @@ -464,13 +455,13 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { // Update the chart const newOption = this.chartInstance.getOption(); this.zoomSpan = newOption.dataZoom[0].end - newOption.dataZoom[0].start; - this.zoomTimeSpan = this.getTimeRangeFromTimespan(Math.floor(this.data.timestamp[newOption.dataZoom[0].startValue] / 1000), Math.floor(this.data.timestamp[newOption.dataZoom[0].endValue] / 1000), true) as string; + this.zoomTimeSpan = this.getTimeRangeFromTimespan(Math.floor(this.data.timestamp[newOption.dataZoom[0].startValue] / 1000), Math.floor(this.data.timestamp[newOption.dataZoom[0].endValue] / 1000)); this.isLoading = false; }), catchError(() => { const newOption = this.chartInstance.getOption(); this.zoomSpan = newOption.dataZoom[0].end - newOption.dataZoom[0].start; - this.zoomTimeSpan = this.getTimeRangeFromTimespan(Math.floor(this.data.timestamp[newOption.dataZoom[0].startValue] / 1000), Math.floor(this.data.timestamp[newOption.dataZoom[0].endValue] / 1000), true) as string; + this.zoomTimeSpan = this.getTimeRangeFromTimespan(Math.floor(this.data.timestamp[newOption.dataZoom[0].startValue] / 1000), Math.floor(this.data.timestamp[newOption.dataZoom[0].endValue] / 1000)); this.isLoading = false; this.cd.detectChanges(); return []; @@ -481,52 +472,20 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { }); } - getTimeRange(interval: string, scale = 1): number { - switch (interval) { - case '4y': return 43200 * scale; // 12h - case '3y': return 43200 * scale; // 12h - case '2y': return 28800 * scale; // 8h - case '1y': return 28800 * scale; // 8h - case '6m': return 10800 * scale; // 3h - case '3m': return 7200 * scale; // 2h - case '1m': return 1800 * scale; // 30min - case '1w': return 300 * scale; // 5min - case '3d': return 1 * scale; - case '24h': return 1 * scale; - default: return 86400 * scale; - } - } - - getTimeRangeFromTimespan(from: number, to: number, toString: boolean, scale = 1): number | string { + getTimeRangeFromTimespan(from: number, to: number): string { const timespan = to - from; - if (toString) { - switch (true) { - case timespan >= 3600 * 24 * 365 * 4: return 'all'; - case timespan >= 3600 * 24 * 365 * 3: return '4y'; - case timespan >= 3600 * 24 * 365 * 2: return '3y'; - case timespan >= 3600 * 24 * 365: return '2y'; - case timespan >= 3600 * 24 * 30 * 6: return '1y'; - case timespan >= 3600 * 24 * 30 * 3: return '6m'; - case timespan >= 3600 * 24 * 30: return '3m'; - case timespan >= 3600 * 24 * 7: return '1m'; - case timespan >= 3600 * 24 * 3: return '1w'; - case timespan >= 3600 * 24: return '3d'; - default: return '24h'; - } - } else { - switch (true) { - case timespan > 3600 * 24 * 365 * 4: return 86400 * scale; // 24h - case timespan > 3600 * 24 * 365 * 3: return 43200 * scale; // 12h - case timespan > 3600 * 24 * 365 * 2: return 43200 * scale; // 12h - case timespan > 3600 * 24 * 365: return 28800 * scale; // 8h - case timespan > 3600 * 24 * 30 * 6: return 28800 * scale; // 8h - case timespan > 3600 * 24 * 30 * 3: return 10800 * scale; // 3h - case timespan > 3600 * 24 * 30: return 7200 * scale; // 2h - case timespan > 3600 * 24 * 7: return 1800 * scale; // 30min - case timespan > 3600 * 24 * 3: return 300 * scale; // 5min - case timespan > 3600 * 24: return 1 * scale; - default: return 1 * scale; - } + switch (true) { + case timespan >= 3600 * 24 * 365 * 4: return 'all'; + case timespan >= 3600 * 24 * 365 * 3: return '4y'; + case timespan >= 3600 * 24 * 365 * 2: return '3y'; + case timespan >= 3600 * 24 * 365: return '2y'; + case timespan >= 3600 * 24 * 30 * 6: return '1y'; + case timespan >= 3600 * 24 * 30 * 3: return '6m'; + case timespan >= 3600 * 24 * 30: return '3m'; + case timespan >= 3600 * 24 * 7: return '1m'; + case timespan >= 3600 * 24 * 3: return '1w'; + case timespan >= 3600 * 24: return '3d'; + default: return '24h'; } } From 86c3ef68e422b32a91b4e5439e538fb210f272a9 Mon Sep 17 00:00:00 2001 From: natsoni Date: Wed, 15 May 2024 17:05:18 +0200 Subject: [PATCH 10/10] Graph: don't refresh data if timespan is 24h or 3d --- .../block-fees-subsidy-graph.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts index 7ec372bc4..88d27033f 100644 --- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts @@ -370,7 +370,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { }); this.chartInstance.on('datazoom', (params) => { - if (params.silent || this.isLoading) { + if (params.silent || this.isLoading || ['24h', '3d'].includes(this.timespan)) { return; } this.updateZoom = true;