From 271f3c2317e327eb9be3e924485b449a6e400dd0 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Mon, 9 May 2022 11:01:51 +0200 Subject: [PATCH] [Chart download] Add .svg to file name, fix chart background colors --- .../block-fee-rates-graph.component.ts | 5 +- .../block-fees-graph.component.ts | 5 +- .../block-rewards-graph.component.ts | 5 +- .../hashrate-chart.component.ts | 5 +- .../hashrate-chart-pools.component.ts | 5 +- .../incoming-transactions-graph.component.ts | 5 +- .../mempool-graph/mempool-graph.component.ts | 5 +- .../pool-ranking/pool-ranking.component.ts | 7 ++- .../statistics/statistics.component.html | 57 +++++++++---------- frontend/src/app/shared/graphs.utils.ts | 2 +- 10 files changed, 55 insertions(+), 46 deletions(-) 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 e2ec22a53..101c27618 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 @@ -147,7 +147,6 @@ export class BlockFeeRatesGraphComponent implements OnInit { prepareChartOptions(data) { this.chartOptions = { - backgroundColor: '#11131f', color: ['#D81B60', '#8E24AA', '#1E88E5', '#7CB342', '#FDD835', '#6D4C41', '#546E7A'], animation: false, grid: { @@ -305,13 +304,15 @@ export class BlockFeeRatesGraphComponent implements OnInit { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 40; + this.chartOptions.backgroundColor = '#11131f'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, excludeComponents: ['dataZoom'], - }), `block-fee-rates-${this.timespan}-${now.getTime() / 1000}`); + }), `block-fee-rates-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`); // @ts-ignore this.chartOptions.grid.bottom = prevBottom; + this.chartOptions.backgroundColor = 'none'; this.chartInstance.setOption(this.chartOptions); } } diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts index ede7ee3dc..f419472c9 100644 --- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts +++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts @@ -88,7 +88,6 @@ export class BlockFeesGraphComponent implements OnInit { prepareChartOptions(data) { this.chartOptions = { - backgroundColor: '#11131f', animation: false, color: [ new graphic.LinearGradient(0, 0, 0, 0.65, [ @@ -210,13 +209,15 @@ export class BlockFeesGraphComponent implements OnInit { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 40; + this.chartOptions.backgroundColor = '#11131f'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, excludeComponents: ['dataZoom'], - }), `block-fees-${this.timespan}-${now.getTime() / 1000}`); + }), `block-fees-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`); // @ts-ignore this.chartOptions.grid.bottom = prevBottom; + this.chartOptions.backgroundColor = 'none'; this.chartInstance.setOption(this.chartOptions); } } diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts index c9f78787a..102b73b1a 100644 --- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts +++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts @@ -86,7 +86,6 @@ export class BlockRewardsGraphComponent implements OnInit { prepareChartOptions(data) { this.chartOptions = { - backgroundColor: '#11131f', animation: false, color: [ new graphic.LinearGradient(0, 0, 0, 0.65, [ @@ -210,13 +209,15 @@ export class BlockRewardsGraphComponent implements OnInit { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 40; + this.chartOptions.backgroundColor = '#11131f'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, excludeComponents: ['dataZoom'], - }), `block-rewards-${this.timespan}-${now.getTime() / 1000}`); + }), `block-rewards-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`); // @ts-ignore this.chartOptions.grid.bottom = prevBottom; + this.chartOptions.backgroundColor = 'none'; this.chartInstance.setOption(this.chartOptions); } } diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts index 50c66df09..faeb2c8ce 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts @@ -152,7 +152,6 @@ export class HashrateChartComponent implements OnInit { } this.chartOptions = { - backgroundColor: '#11131f', title: title, animation: false, color: [ @@ -359,13 +358,15 @@ export class HashrateChartComponent implements OnInit { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 30; + this.chartOptions.backgroundColor = '#11131f'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, excludeComponents: ['dataZoom'], - }), `hashrate-difficulty-${this.timespan}-${now.getTime() / 1000}`); + }), `hashrate-difficulty-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`); // @ts-ignore this.chartOptions.grid.bottom = prevBottom; + this.chartOptions.backgroundColor = 'none'; this.chartInstance.setOption(this.chartOptions); } } diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts index cf4ecc78d..d6bfd66d6 100644 --- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts +++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts @@ -166,7 +166,6 @@ export class HashrateChartPoolsComponent implements OnInit { } this.chartOptions = { - backgroundColor: '#11131f', title: title, animation: false, grid: { @@ -267,13 +266,15 @@ export class HashrateChartPoolsComponent implements OnInit { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 30; + this.chartOptions.backgroundColor = '#11131f'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, excludeComponents: ['dataZoom'], - }), `pools-dominance-${this.timespan}-${now.getTime() / 1000}`); + }), `pools-dominance-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`); // @ts-ignore this.chartOptions.grid.bottom = prevBottom; + this.chartOptions.backgroundColor = 'none'; this.chartInstance.setOption(this.chartOptions); } } 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 9b86f8adb..328742946 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 @@ -62,7 +62,6 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges { mountChart(): void { this.mempoolStatsChartOption = { - backgroundColor: '#11131f', grid: { height: this.height, right: this.right, @@ -240,13 +239,15 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges { const now = new Date(); // @ts-ignore this.mempoolStatsChartOption.grid.height = prevHeight + 20; + this.mempoolStatsChartOption.backgroundColor = '#11131f'; this.chartInstance.setOption(this.mempoolStatsChartOption); download(this.chartInstance.getDataURL({ pixelRatio: 2, excludeComponents: ['dataZoom'], - }), `incoming-vbytes-${timespan}-${now.getTime() / 1000}`); + }), `incoming-vbytes-${timespan}-${Math.round(now.getTime() / 1000)}.svg`); // @ts-ignore this.mempoolStatsChartOption.grid.height = prevHeight; + this.mempoolStatsChartOption.backgroundColor = 'none'; 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 bf956e489..dfb111fdb 100644 --- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts @@ -169,7 +169,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges { } this.mempoolVsizeFeesOptions = { - backgroundColor: '#11131f', series: this.inverted ? [...seriesGraph].reverse() : seriesGraph, hover: true, color: this.inverted ? [...newColors].reverse() : newColors, @@ -397,13 +396,15 @@ export class MempoolGraphComponent implements OnInit, OnChanges { const now = new Date(); // @ts-ignore this.mempoolVsizeFeesOptions.grid.height = prevHeight + 20; + this.mempoolVsizeFeesOptions.backgroundColor = '#11131f'; this.chartInstance.setOption(this.mempoolVsizeFeesOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, excludeComponents: ['dataZoom'], - }), `mempool-graph-${timespan}-${now.getTime() / 1000}`); + }), `mempool-graph-${timespan}-${Math.round(now.getTime() / 1000)}.svg`); // @ts-ignore this.mempoolVsizeFeesOptions.grid.height = prevHeight; + this.mempoolVsizeFeesOptions.backgroundColor = 'none'; this.chartInstance.setOption(this.mempoolVsizeFeesOptions); } } diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts index ec2989c46..3308e0f4b 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts @@ -207,7 +207,6 @@ export class PoolRankingComponent implements OnInit { prepareChartOptions(miningStats) { this.chartOptions = { - backgroundColor: '#11131f', animation: false, color: chartColors, tooltip: { @@ -290,10 +289,14 @@ export class PoolRankingComponent implements OnInit { onSaveChart() { const now = new Date(); + this.chartOptions.backgroundColor = '#11131f'; + this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, excludeComponents: ['dataZoom'], - }), `pools-ranking-${this.timespan}-${now.getTime() / 1000}`); + }), `pools-ranking-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`); + this.chartOptions.backgroundColor = 'none'; + this.chartInstance.setOption(this.chartOptions); } } diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index 734ebbd18..ddeda4d80 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -3,18 +3,22 @@
- Mempool by vBytes (sat/vByte) + + Mempool by vBytes (sat/vByte) -
+
- +
@@ -82,23 +84,20 @@
- Transaction vBytes per second (vB/s) + + Transaction vBytes per second (vB/s) +
-
- +
-
+ \ No newline at end of file diff --git a/frontend/src/app/shared/graphs.utils.ts b/frontend/src/app/shared/graphs.utils.ts index 1560a6e17..429989b84 100644 --- a/frontend/src/app/shared/graphs.utils.ts +++ b/frontend/src/app/shared/graphs.utils.ts @@ -79,7 +79,7 @@ export const formatterXAxisTimeCategory = ( }; export const download = (href, name) => { - var a = document.createElement('a'); + const a = document.createElement('a'); a.download = name; a.href = href; document.body.appendChild(a);