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 def7d96aa..4ef952848 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 @@ -1,7 +1,7 @@
Block fee rates - diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html index 9f5ca6797..fc11bc827 100644 --- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html +++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html @@ -1,7 +1,7 @@
Block fees - diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html index 81067c8b0..d29cd6a21 100644 --- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html +++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html @@ -2,7 +2,7 @@
Block rewards - diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html index afe6a79af..8075c3b88 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html @@ -19,7 +19,7 @@
Hashrate & Difficulty - diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html index 15a6b046b..7fe787888 100644 --- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html +++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html @@ -2,7 +2,7 @@
Mining pools dominance - diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html index e9c022782..05f9d5afb 100644 --- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html +++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html @@ -1,4 +1,6 @@ -
+
+
\ No newline at end of file diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts index 89a089f06..9b86f8adb 100644 --- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts +++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts @@ -2,7 +2,7 @@ import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit } import { EChartsOption } from 'echarts'; import { OnChanges } from '@angular/core'; import { StorageService } from 'src/app/services/storage.service'; -import { formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils'; +import { download, formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils'; import { formatNumber } from '@angular/common'; @Component({ @@ -34,6 +34,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges { renderer: 'svg' }; windowPreference: string; + chartInstance: any = undefined; constructor( @Inject(LOCALE_ID) private locale: string, @@ -61,6 +62,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges { mountChart(): void { this.mempoolStatsChartOption = { + backgroundColor: '#11131f', grid: { height: this.height, right: this.right, @@ -224,7 +226,27 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges { }; } + onChartInit(ec) { + this.chartInstance = ec; + } + isMobile() { return window.innerWidth <= 767.98; } + + onSaveChart(timespan) { + // @ts-ignore + const prevHeight = this.mempoolStatsChartOption.grid.height; + const now = new Date(); + // @ts-ignore + this.mempoolStatsChartOption.grid.height = prevHeight + 20; + this.chartInstance.setOption(this.mempoolStatsChartOption); + download(this.chartInstance.getDataURL({ + pixelRatio: 2, + excludeComponents: ['dataZoom'], + }), `incoming-vbytes-${timespan}-${now.getTime() / 1000}`); + // @ts-ignore + this.mempoolStatsChartOption.grid.height = prevHeight; + this.chartInstance.setOption(this.mempoolStatsChartOption); + } } diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts index 3b4e18fb4..bf956e489 100644 --- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts @@ -1,12 +1,12 @@ import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core'; import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe'; -import { formatNumber } from "@angular/common"; +import { formatNumber } from '@angular/common'; import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface'; import { StateService } from 'src/app/services/state.service'; import { StorageService } from 'src/app/services/storage.service'; import { EChartsOption } from 'echarts'; import { feeLevels, chartColors } from 'src/app/app.constants'; -import { formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils'; +import { download, formatterXAxis, formatterXAxisLabel } from 'src/app/shared/graphs.utils'; @Component({ selector: 'app-mempool-graph', @@ -45,6 +45,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { feeLevelsOrdered = []; chartColorsOrdered = chartColors; inverted: boolean; + chartInstance: any = undefined; constructor( private vbytesPipe: VbytesPipe, @@ -83,6 +84,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { this.hoverIndexSerie = e.target.parent.parent.__ecComponentInfo.index; } }); + this.chartInstance = myChart; } handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) { @@ -99,7 +101,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { generateArray(mempoolStats: OptimizedMempoolStats[]) { const finalArray: number[][][] = []; let feesArray: number[][] = []; - let limitFeesTemplate = this.template === 'advanced' ? 26 : 20; + const limitFeesTemplate = this.template === 'advanced' ? 26 : 20; for (let index = limitFeesTemplate; index > -1; index--) { feesArray = []; mempoolStats.forEach((stats) => { @@ -167,6 +169,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { } this.mempoolVsizeFeesOptions = { + backgroundColor: '#11131f', series: this.inverted ? [...seriesGraph].reverse() : seriesGraph, hover: true, color: this.inverted ? [...newColors].reverse() : newColors, @@ -387,5 +390,21 @@ export class MempoolGraphComponent implements OnInit, OnChanges { isMobile() { return window.innerWidth <= 767.98; } + + onSaveChart(timespan) { + // @ts-ignore + const prevHeight = this.mempoolVsizeFeesOptions.grid.height; + const now = new Date(); + // @ts-ignore + this.mempoolVsizeFeesOptions.grid.height = prevHeight + 20; + this.chartInstance.setOption(this.mempoolVsizeFeesOptions); + download(this.chartInstance.getDataURL({ + pixelRatio: 2, + excludeComponents: ['dataZoom'], + }), `mempool-graph-${timespan}-${now.getTime() / 1000}`); + // @ts-ignore + this.mempoolVsizeFeesOptions.grid.height = prevHeight; + this.chartInstance.setOption(this.mempoolVsizeFeesOptions); + } } diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html index e497ee08e..50675eee0 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html @@ -25,7 +25,7 @@
Mining pools share - diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index 79dcc6fe2..254aec3f5 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -4,6 +4,10 @@
Mempool by vBytes (sat/vByte) + +
- Transaction vBytes per second (vB/s)
+ +
- { + this.timespan = this.radioGroupForm.controls.dateSpan.value; this.spinnerLoading = true; if (this.radioGroupForm.controls.dateSpan.value === '2h') { this.websocketService.want(['blocks', 'live-2h-chart']); @@ -195,4 +202,12 @@ export class StatisticsComponent implements OnInit { stat.vbytes_per_second = Math.min(median * capRatio, stat.vbytes_per_second); } } + + onSaveChart(name) { + if (name === 'mempool') { + this.mempoolGraph.onSaveChart(this.timespan); + } else if (name === 'incoming') { + this.incomingGraph.onSaveChart(this.timespan); + } + } }