From c019c7bc76156512c7bac01f4d3641e9c47de649 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Mon, 9 May 2022 00:47:10 -0400
Subject: [PATCH 01/12] Add faq on address lookups / electrs issues

---
 frontend/src/app/docs/api-docs/api-docs-data.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/app/docs/api-docs/api-docs-data.ts b/frontend/src/app/docs/api-docs/api-docs-data.ts
index badd02619..9b0fe5df7 100644
--- a/frontend/src/app/docs/api-docs/api-docs-data.ts
+++ b/frontend/src/app/docs/api-docs/api-docs-data.ts
@@ -4583,5 +4583,13 @@ export const faqData = [
     fragment: "install-mempool-with-docker",
     title: "Can I install Mempool using Docker?",
     answer: "Yes, we publish Docker images (or you can build your own). Check out <a href='https://github.com/mempool/mempool/tree/master/docker' target='_blank'>the documentation</a> for details."
+  },
+  {
+    type: "endpoint",
+    category: "advanced",
+    showConditions: bitcoinNetworks,
+    fragment: "address-lookup-issues",
+    title: "Why do I get an error for certain address lookups on my Mempool instance?",
+    answer: "<p>Mempool uses an Electrum server to do address lookups. There are several implementations of the Electrum server protocol, and Mempool can use any of them.</p><p>But the implementation you use affects performance. <a href='https://github.com/romanz/electrs' target='_blank'>romanz/electrs</a> is a common choice for its low resource requirements, and most full-node distros use it. While this implementation works great for basic queries, it will struggle with queries to look up addresses with many transactions—especially when run on low-power hardware like a Raspberry Pi.</p><p>To remedy this, you will need to power Mempool with a more powerful Electrum server. Consider <a href='https://github.com/cculianu/Fulcrum' target='_blank'>Fulcrum</a>. Fulcrum requires more resources than romanz/electrs but can still run on a Raspberry Pi and handles heavy queries much more efficiently.</p><p>If you have stronger hardware, consider running <a href='https://github.com/Blockstream/electrs' target='_blank'>blockstream/electrs</a>, which is the backend <a href='https://mempool.space'>mempool.space</a> uses.</p>"
   }
 ];

From 48ed9fe82486c698ff0479b5202e646f7ea588e3 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Mon, 9 May 2022 00:49:17 -0400
Subject: [PATCH 02/12] Add faq link to address lookup error

---
 frontend/src/app/components/address/address.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index 0ac64f86d..fa9e14651 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -134,7 +134,7 @@
       <ng-template #displayServerError><i class="small">({{ error.error }})</i></ng-template>
       <ng-template [ngIf]="error.status === 413 || error.status === 405" [ngIfElse]="displayServerError">
         <ng-container i18n="Electrum server limit exceeded error">
-          <i>The number of transactions on this address exceeds the Electrum server limit</i>
+          <i>There many transactions on this address, more than your backend can handle. See more on <a href="/docs/faq#address-lookup-issues">setting up a stronger backend</a>.</i>
           <br><br>
           Consider viewing this address on the official Mempool website instead:
         </ng-container>

From 9a2043fab23ea01c2d62f0e86e0812f023c083c2 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Mon, 9 May 2022 01:13:54 -0400
Subject: [PATCH 03/12] Remove $ from commands in repo docs

---
 README.md        | 38 +++++++++++++++++++-------------------
 docker/README.md |  4 ++--
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index a6032a18a..db921d86d 100644
--- a/README.md
+++ b/README.md
@@ -41,10 +41,10 @@ You will need [Bitcoin Core](https://github.com/bitcoin/bitcoin), [Electrum Serv
 Clone the Mempool repo, and checkout the latest release tag:
 
 ```bash
-$ git clone https://github.com/mempool/mempool
-$ cd mempool
-$ latestrelease=$(curl -s https://api.github.com/repos/mempool/mempool/releases/latest|grep tag_name|head -1|cut -d '"' -f4)
-$ git checkout $latestrelease
+git clone https://github.com/mempool/mempool
+cd mempool
+latestrelease=$(curl -s https://api.github.com/repos/mempool/mempool/releases/latest|grep tag_name|head -1|cut -d '"' -f4)
+git checkout $latestrelease
 ```
 
 ### 2. Configure Bitcoin Core
@@ -63,11 +63,11 @@ Install MariaDB from your OS package manager:
 
 ```bash
 # Debian, Ubuntu, etc.
-$ apt-get install mariadb-server mariadb-client
+apt-get install mariadb-server mariadb-client
 
 # macOS
-$ brew install mariadb
-$ mysql.server start
+brew install mariadb
+mysql.server start
 ```
 
 Create a database and grant privileges:
@@ -88,15 +88,15 @@ Query OK, 0 rows affected (0.00 sec)
 Install Mempool dependencies with npm and build the backend:
 
 ```bash
-$ cd backend
-$ npm install --prod
-$ npm run build
+cd backend
+npm install --prod
+npm run build
 ```
 
 In the `backend` folder, make a copy of the sample config:
 
 ```bash
-$ cp mempool-config.sample.json mempool-config.json
+cp mempool-config.sample.json mempool-config.json
 ```
 
 Edit `mempool-config.json` with your Bitcoin Core node RPC credentials:
@@ -133,7 +133,7 @@ Edit `mempool-config.json` with your Bitcoin Core node RPC credentials:
 Start the backend:
 
 ```bash
-$ npm run start
+npm run start
 ```
 
 When it's running, you should see output like this:
@@ -164,15 +164,15 @@ Updating mempool
 Install the Mempool dependencies with npm and build the frontend:
 
 ```bash
-$ cd frontend
-$ npm install --prod
-$ npm run build
+cd frontend
+npm install --prod
+npm run build
 ```
 
 Install the output into the nginx webroot folder:
 
 ```bash
-$ sudo rsync -av --delete dist/ /var/www/
+sudo rsync -av --delete dist/ /var/www/
 ```
 
 ### 6. `nginx` + `certbot`
@@ -181,13 +181,13 @@ Install the supplied `nginx.conf` and `nginx-mempool.conf` in `/etc/nginx`:
 
 ```bash
 # install nginx and certbot
-$ apt-get install -y nginx python3-certbot-nginx
+apt-get install -y nginx python3-certbot-nginx
 
 # install the mempool configuration for nginx
-$ cp nginx.conf nginx-mempool.conf /etc/nginx/
+cp nginx.conf nginx-mempool.conf /etc/nginx/
 
 # replace example.com with your domain name
-$ certbot --nginx -d example.com
+certbot --nginx -d example.com
 ```
 
 If everything went well, you should see the beautiful mempool :grin:
diff --git a/docker/README.md b/docker/README.md
index da7bf20e3..07590d0dd 100644
--- a/docker/README.md
+++ b/docker/README.md
@@ -34,7 +34,7 @@ The IP address in the example above refers to Docker's default gateway IP addres
 Now, run:
 
 ```bash
-$ docker-compose up
+docker-compose up
 ```
 
 Your Mempool instance should be running at http://localhost. The graphs will be populated as new transactions are detected.
@@ -59,7 +59,7 @@ Of course, if your Docker host IP address is different, update accordingly.
 With `bitcoind` and Electrum Server set up, run Mempool with:
 
 ```bash
-$ docker-compose up
+docker-compose up
 ```
 
 ## Further Configuration

From 054826321325df449915e77f5cee478cecb44f84 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Mon, 9 May 2022 13:47:58 -0400
Subject: [PATCH 04/12] Make electrum server faq answer a list

---
 frontend/src/app/docs/api-docs/api-docs-data.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/docs/api-docs/api-docs-data.ts b/frontend/src/app/docs/api-docs/api-docs-data.ts
index 9b0fe5df7..b0d4d1c4f 100644
--- a/frontend/src/app/docs/api-docs/api-docs-data.ts
+++ b/frontend/src/app/docs/api-docs/api-docs-data.ts
@@ -4590,6 +4590,6 @@ export const faqData = [
     showConditions: bitcoinNetworks,
     fragment: "address-lookup-issues",
     title: "Why do I get an error for certain address lookups on my Mempool instance?",
-    answer: "<p>Mempool uses an Electrum server to do address lookups. There are several implementations of the Electrum server protocol, and Mempool can use any of them.</p><p>But the implementation you use affects performance. <a href='https://github.com/romanz/electrs' target='_blank'>romanz/electrs</a> is a common choice for its low resource requirements, and most full-node distros use it. While this implementation works great for basic queries, it will struggle with queries to look up addresses with many transactions—especially when run on low-power hardware like a Raspberry Pi.</p><p>To remedy this, you will need to power Mempool with a more powerful Electrum server. Consider <a href='https://github.com/cculianu/Fulcrum' target='_blank'>Fulcrum</a>. Fulcrum requires more resources than romanz/electrs but can still run on a Raspberry Pi and handles heavy queries much more efficiently.</p><p>If you have stronger hardware, consider running <a href='https://github.com/Blockstream/electrs' target='_blank'>blockstream/electrs</a>, which is the backend <a href='https://mempool.space'>mempool.space</a> uses.</p>"
+    answer: "<p>If you're getting errors when doing address lookups, it's probably because of your Electrum server backend.</p><p>Mempool uses an Electrum server to do address lookups. There are several implementations of the Electrum server protocol, and Mempool can use any of them, but the implementation you use affects performance:</p><ol><li><a href='https://github.com/romanz/electrs' target='_blank'>romanz/electrs</a>. This is a common choice for its low resource requirements, and most full-node distros use it. But while this implementation works great for basic queries, it will struggle with heavier ones (e.g. looking up addresses with many transactions)—especially when running on low-power hardware like a Raspberry Pi.</li><li><a href='https://github.com/cculianu/Fulcrum' target='_blank'>Fulcrum</a>. Fulcrum requires more resources than romanz/electrs but it can still run on a Raspberry Pi, and it handles heavy queries much more efficiently. If you're having issues with romanz/electrs, Fulcrum is worth a try.</li><li><a href='https://github.com/Blockstream/electrs' target='_blank'>blockstream/electrs</a>. If you have stronger hardware, consider running Blockstream's electrs implementation. It's the backend mempool.space uses, and is also what powers blockstream.info.</li></ol>"
   }
 ];

From e8bb18fbc36f2ab5966837a90a32a8a48fb4dbde Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Thu, 5 May 2022 16:18:28 +0900
Subject: [PATCH 05/12] Add download feature on mining charts

---
 frontend/src/app/app.module.ts                |  4 ++-
 .../block-fee-rates-graph.component.html      |  4 +++
 .../block-fee-rates-graph.component.ts        | 19 +++++++++++++-
 .../block-fees-graph.component.html           |  7 ++++-
 .../block-fees-graph.component.ts             | 24 ++++++++++++++++-
 .../block-rewards-graph.component.html        |  7 ++++-
 .../block-rewards-graph.component.ts          | 24 ++++++++++++++++-
 .../hashrate-chart.component.html             |  7 ++++-
 .../hashrate-chart.component.ts               | 25 ++++++++++++++++++
 .../hashrate-chart-pools.component.html       |  9 +++++--
 .../hashrate-chart-pools.component.ts         | 26 +++++++++++++++++++
 .../pool-ranking/pool-ranking.component.html  |  4 +++
 .../pool-ranking/pool-ranking.component.ts    | 12 +++++++++
 frontend/src/app/shared/graphs.utils.ts       |  9 +++++++
 14 files changed, 172 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 8738c37f1..ef40be5a3 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -48,7 +48,8 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { DifficultyComponent } from './components/difficulty/difficulty.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
-  faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl } from '@fortawesome/free-solid-svg-icons';
+  faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
+  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload } from '@fortawesome/free-solid-svg-icons';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
 import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
 import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
@@ -195,5 +196,6 @@ export class AppModule {
     library.addIcons(faAngleLeft);
     library.addIcons(faBook);
     library.addIcons(faListUl);
+    library.addIcons(faDownload);
   }
 }
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 1fb97407b..def7d96aa 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,6 +1,10 @@
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-fee-rates">Block fee rates</span>
+    <button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+    </button>
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1">
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 9b4363fd8..e2ec22a53 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
@@ -6,7 +6,7 @@ import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { formatNumber } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from 'src/app/shared/graphs.utils';
+import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from 'src/app/shared/graphs.utils';
 import { StorageService } from 'src/app/services/storage.service';
 import { MiningService } from 'src/app/services/mining.service';
 import { selectPowerOfTen } from 'src/app/bitcoin.utils';
@@ -147,6 +147,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
 
   prepareChartOptions(data) {
     this.chartOptions = {
+      backgroundColor: '#11131f',
       color: ['#D81B60', '#8E24AA', '#1E88E5', '#7CB342', '#FDD835', '#6D4C41', '#546E7A'],
       animation: false,
       grid: {
@@ -297,4 +298,20 @@ export class BlockFeeRatesGraphComponent implements OnInit {
   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.chartInstance.setOption(this.chartOptions);
+    download(this.chartInstance.getDataURL({
+      pixelRatio: 2,
+      excludeComponents: ['dataZoom'],
+    }), `block-fee-rates-${this.timespan}-${now.getTime() / 1000}`);
+    // @ts-ignore
+    this.chartOptions.grid.bottom = prevBottom;
+    this.chartInstance.setOption(this.chartOptions);
+  }
 }
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 eaf30ef17..9f5ca6797 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,6 +1,10 @@
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-fees">Block fees</span>
+    <button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+    </button>
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
@@ -37,7 +41,8 @@
     </form>
   </div>
 
-  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions">
+  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    (chartInit)="onChartInit($event)">
   </div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
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 e6aeaa61c..ede7ee3dc 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
@@ -6,7 +6,7 @@ import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { formatNumber } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { formatterXAxisLabel } from 'src/app/shared/graphs.utils';
+import { download, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
 import { StorageService } from 'src/app/services/storage.service';
 import { MiningService } from 'src/app/services/mining.service';
 
@@ -40,6 +40,7 @@ export class BlockFeesGraphComponent implements OnInit {
   isLoading = true;
   formatNumber = formatNumber;
   timespan = '';
+  chartInstance: any = undefined;
 
   constructor(
     @Inject(LOCALE_ID) public locale: string,
@@ -87,6 +88,7 @@ export class BlockFeesGraphComponent implements OnInit {
 
   prepareChartOptions(data) {
     this.chartOptions = {
+      backgroundColor: '#11131f',
       animation: false,
       color: [
         new graphic.LinearGradient(0, 0, 0, 0.65, [
@@ -194,7 +196,27 @@ export class BlockFeesGraphComponent implements OnInit {
     };
   }
 
+  onChartInit(ec) {
+    this.chartInstance = ec;
+  }
+
   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.chartInstance.setOption(this.chartOptions);
+    download(this.chartInstance.getDataURL({
+      pixelRatio: 2,
+      excludeComponents: ['dataZoom'],
+    }), `block-fees-${this.timespan}-${now.getTime() / 1000}`);
+    // @ts-ignore
+    this.chartOptions.grid.bottom = prevBottom;
+    this.chartInstance.setOption(this.chartOptions);
+  }
 }
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 922439e41..81067c8b0 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,6 +2,10 @@
 
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-rewards">Block rewards</span>
+    <button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+    </button>
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
@@ -38,7 +42,8 @@
     </form>
   </div>
 
-  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions">
+  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    (chartInit)="onChartInit($event)">
   </div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
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 f525c0c4b..c9f78787a 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
@@ -6,7 +6,7 @@ import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { formatNumber } from '@angular/common';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { formatterXAxisLabel } from 'src/app/shared/graphs.utils';
+import { download, formatterXAxisLabel } from 'src/app/shared/graphs.utils';
 import { MiningService } from 'src/app/services/mining.service';
 import { StorageService } from 'src/app/services/storage.service';
 
@@ -40,6 +40,7 @@ export class BlockRewardsGraphComponent implements OnInit {
   isLoading = true;
   formatNumber = formatNumber;
   timespan = '';
+  chartInstance: any = undefined;
 
   constructor(
     @Inject(LOCALE_ID) public locale: string,
@@ -85,6 +86,7 @@ export class BlockRewardsGraphComponent implements OnInit {
 
   prepareChartOptions(data) {
     this.chartOptions = {
+      backgroundColor: '#11131f',
       animation: false,
       color: [
         new graphic.LinearGradient(0, 0, 0, 0.65, [
@@ -194,7 +196,27 @@ export class BlockRewardsGraphComponent implements OnInit {
     };
   }
 
+  onChartInit(ec) {
+    this.chartInstance = ec;
+  }
+
   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.chartInstance.setOption(this.chartOptions);
+    download(this.chartInstance.getDataURL({
+      pixelRatio: 2,
+      excludeComponents: ['dataZoom'],
+    }), `block-rewards-${this.timespan}-${now.getTime() / 1000}`);
+    // @ts-ignore
+    this.chartOptions.grid.bottom = prevBottom;
+    this.chartInstance.setOption(this.chartOptions);
+  }
 }
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 4223eb50f..afe6a79af 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
@@ -19,6 +19,10 @@
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
     <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
+    <button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+    </button>
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
@@ -46,7 +50,8 @@
     </form>
   </div>
 
-  <div [class]="!widget ? 'chart' : 'chart-widget'" echarts [initOpts]="chartInitOptions" [options]="chartOptions">
+  <div [class]="!widget ? 'chart' : 'chart-widget'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    (chartInit)="onChartInit($event)">
   </div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
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 e2c2e1db0..50c66df09 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -9,6 +9,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { selectPowerOfTen } from 'src/app/bitcoin.utils';
 import { StorageService } from 'src/app/services/storage.service';
 import { MiningService } from 'src/app/services/mining.service';
+import { download } from 'src/app/shared/graphs.utils';
 
 @Component({
   selector: 'app-hashrate-chart',
@@ -43,6 +44,8 @@ export class HashrateChartComponent implements OnInit {
   hashrateObservable$: Observable<any>;
   isLoading = true;
   formatNumber = formatNumber;
+  timespan = '';
+  chartInstance: any = undefined;
 
   constructor(
     @Inject(LOCALE_ID) public locale: string,
@@ -74,6 +77,7 @@ export class HashrateChartComponent implements OnInit {
           if (!this.widget && !firstRun) {
             this.storageService.setValue('miningWindowPreference', timespan);
           }
+          this.timespan = timespan;
           firstRun = false;
           this.miningWindowPreference = timespan;
           this.isLoading = true;
@@ -148,6 +152,7 @@ export class HashrateChartComponent implements OnInit {
     }
 
     this.chartOptions = {
+      backgroundColor: '#11131f',
       title: title,
       animation: false,
       color: [
@@ -340,7 +345,27 @@ export class HashrateChartComponent implements OnInit {
     };
   }
 
+  onChartInit(ec) {
+    this.chartInstance = ec;
+  }
+
   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 = 30;
+    this.chartInstance.setOption(this.chartOptions);
+    download(this.chartInstance.getDataURL({
+      pixelRatio: 2,
+      excludeComponents: ['dataZoom'],
+    }), `hashrate-difficulty-${this.timespan}-${now.getTime() / 1000}`);
+    // @ts-ignore
+    this.chartOptions.grid.bottom = prevBottom;
+    this.chartInstance.setOption(this.chartOptions);
+  }
 }
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 97f6c5164..15a6b046b 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,6 +2,10 @@
 
   <div class="card-header  mb-0 mb-md-4">
     <span i18n="mining.pools-dominance">Mining pools dominance</span>
+    <button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+    </button>
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
@@ -29,8 +33,9 @@
     </form>
   </div>
 
-  <div class="chart"
-    echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
+  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+    (chartInit)="onChartInit($event)">
+  </div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
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 e974b20aa..cf4ecc78d 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
@@ -8,6 +8,8 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { poolsColor } from 'src/app/app.constants';
 import { StorageService } from 'src/app/services/storage.service';
 import { MiningService } from 'src/app/services/mining.service';
+import { download } from 'src/app/shared/graphs.utils';
+import { time } from 'console';
 
 @Component({
   selector: 'app-hashrate-chart-pools',
@@ -39,6 +41,8 @@ export class HashrateChartPoolsComponent implements OnInit {
 
   hashrateObservable$: Observable<any>;
   isLoading = true;
+  timespan = '';
+  chartInstance: any = undefined;
 
   constructor(
     @Inject(LOCALE_ID) public locale: string,
@@ -68,6 +72,7 @@ export class HashrateChartPoolsComponent implements OnInit {
           if (!firstRun) {
             this.storageService.setValue('miningWindowPreference', timespan);
           }
+          this.timespan = timespan;
           firstRun = false;
           this.isLoading = true;
           return this.apiService.getHistoricalPoolsHashrate$(timespan)
@@ -161,6 +166,7 @@ export class HashrateChartPoolsComponent implements OnInit {
     }
 
     this.chartOptions = {
+      backgroundColor: '#11131f',
       title: title,
       animation: false,
       grid: {
@@ -247,7 +253,27 @@ export class HashrateChartPoolsComponent implements OnInit {
     };
   }
 
+  onChartInit(ec) {
+    this.chartInstance = ec;
+  }
+
   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 = 30;
+    this.chartInstance.setOption(this.chartOptions);
+    download(this.chartInstance.getDataURL({
+      pixelRatio: 2,
+      excludeComponents: ['dataZoom'],
+    }), `pools-dominance-${this.timespan}-${now.getTime() / 1000}`);
+    // @ts-ignore
+    this.chartOptions.grid.bottom = prevBottom;
+    this.chartInstance.setOption(this.chartOptions);
+  }
 }
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 9a9fe45bd..e497ee08e 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -25,6 +25,10 @@
 
   <div class="card-header" *ngIf="!widget">
     <span i18n="mining.mining-pool-share">Mining pools share</span>
+    <button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+    </button>
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup"
       *ngIf="!widget && (miningStatsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
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 4056b0ed6..ec2989c46 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -11,6 +11,7 @@ import { MiningService, MiningStats } from '../../services/mining.service';
 import { StateService } from '../../services/state.service';
 import { chartColors, poolsColor } from 'src/app/app.constants';
 import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { download } from 'src/app/shared/graphs.utils';
 
 @Component({
   selector: 'app-pool-ranking',
@@ -29,6 +30,7 @@ export class PoolRankingComponent implements OnInit {
   chartInitOptions = {
     renderer: 'svg',
   };
+  timespan = '';
   chartInstance: any = undefined;
 
   @HostBinding('attr.dir') dir = 'ltr';
@@ -69,6 +71,7 @@ export class PoolRankingComponent implements OnInit {
         .pipe(
           startWith(this.miningWindowPreference), // (trigger when the page loads)
           tap((value) => {
+            this.timespan = value;
             if (!this.widget) {
               this.storageService.setValue('miningWindowPreference', value);
             }
@@ -204,6 +207,7 @@ export class PoolRankingComponent implements OnInit {
 
   prepareChartOptions(miningStats) {
     this.chartOptions = {
+      backgroundColor: '#11131f',
       animation: false,
       color: chartColors,
       tooltip: {
@@ -283,5 +287,13 @@ export class PoolRankingComponent implements OnInit {
       },
     };
   }
+
+  onSaveChart() {
+    const now = new Date();
+    download(this.chartInstance.getDataURL({
+      pixelRatio: 2,
+      excludeComponents: ['dataZoom'],
+    }), `pools-ranking-${this.timespan}-${now.getTime() / 1000}`);
+  }
 }
 
diff --git a/frontend/src/app/shared/graphs.utils.ts b/frontend/src/app/shared/graphs.utils.ts
index cf12f2f94..1560a6e17 100644
--- a/frontend/src/app/shared/graphs.utils.ts
+++ b/frontend/src/app/shared/graphs.utils.ts
@@ -77,3 +77,12 @@ export const formatterXAxisTimeCategory = (
       return date.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
   }
 };
+
+export const download = (href, name) => {
+  var a = document.createElement('a');
+  a.download = name;
+  a.href = href;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+};

From 7a487046b9334c8390a506693fc8b9268acecb53 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Thu, 5 May 2022 16:38:16 +0900
Subject: [PATCH 06/12] Add download button on pool ranking and mempool graphs

---
 .../block-fee-rates-graph.component.html      |  2 +-
 .../block-fees-graph.component.html           |  2 +-
 .../block-rewards-graph.component.html        |  2 +-
 .../hashrate-chart.component.html             |  2 +-
 .../hashrate-chart-pools.component.html       |  2 +-
 ...incoming-transactions-graph.component.html |  4 ++-
 .../incoming-transactions-graph.component.ts  | 24 +++++++++++++++++-
 .../mempool-graph/mempool-graph.component.ts  | 25 ++++++++++++++++---
 .../pool-ranking/pool-ranking.component.html  |  2 +-
 .../statistics/statistics.component.html      | 12 +++++++--
 .../statistics/statistics.component.ts        | 17 ++++++++++++-
 11 files changed, 80 insertions(+), 14 deletions(-)

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 @@
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-fee-rates">Block fee rates</span>
-    <button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
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 @@
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-fees">Block fees</span>
-    <button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
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 @@
 
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-rewards">Block rewards</span>
-    <button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
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 @@
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
     <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
-    <button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
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 @@
 
   <div class="card-header  mb-0 mb-md-4">
     <span i18n="mining.pools-dominance">Mining pools dominance</span>
-    <button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
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 @@
-<div class="echarts" echarts [initOpts]="mempoolStatsChartInitOption" [options]="mempoolStatsChartOption" (chartRendered)="rendered()"></div>
+<div class="echarts" echarts [initOpts]="mempoolStatsChartInitOption" [options]="mempoolStatsChartOption" (chartRendered)="rendered()"
+  (chartInit)="onChartInit($event)">
+</div>
 <div class="text-center loadingGraphs" *ngIf="isLoading">
   <div class="spinner-border text-light"></div>
 </div>
\ 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 @@
 
   <div class="card-header" *ngIf="!widget">
     <span i18n="mining.mining-pool-share">Mining pools share</span>
-    <button #saveChart class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
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 @@
       <div class="card mb-3">
         <div class="card-header">
           <i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
+          <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart('mempool')">
+            <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+          </button>
+
           <form [formGroup]="radioGroupForm" class="formRadioGroup" [class]="stateService.env.MINING_DASHBOARD ? 'mining' : ''" (click)="saveGraphPreference()">
             <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
               <label ngbButtonLabel class="btn-primary btn-sm">
@@ -60,7 +64,7 @@
         </div>
         <div class="card-body">
           <div class="incoming-transactions-graph">
-            <app-mempool-graph
+            <app-mempool-graph #mempoolgraph
               dir="ltr"
               [template]="'advanced'"
               [limitFee]="500"
@@ -80,9 +84,13 @@
         <div class="card-header">
             <i class="fa fa-area-chart"></i> <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
         </div>
+        <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart('incoming')">
+          <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+        </button>
+
         <div class="card-body">
           <div class="incoming-transactions-graph">
-            <app-incoming-transactions-graph
+            <app-incoming-transactions-graph #incominggraph
               [height]="500"
               [left]="65"
               [template]="'advanced'"
diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts
index 252bb13af..17fd2ede6 100644
--- a/frontend/src/app/components/statistics/statistics.component.ts
+++ b/frontend/src/app/components/statistics/statistics.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, LOCALE_ID, Inject } from '@angular/core';
+import { Component, OnInit, LOCALE_ID, Inject, ViewChild, ElementRef } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { of, merge} from 'rxjs';
@@ -12,6 +12,8 @@ import { StateService } from 'src/app/services/state.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { StorageService } from 'src/app/services/storage.service';
 import { feeLevels, chartColors } from 'src/app/app.constants';
+import { MempoolGraphComponent } from '../mempool-graph/mempool-graph.component';
+import { IncomingTransactionsGraphComponent } from '../incoming-transactions-graph/incoming-transactions-graph.component';
 
 @Component({
   selector: 'app-statistics',
@@ -19,6 +21,9 @@ import { feeLevels, chartColors } from 'src/app/app.constants';
   styleUrls: ['./statistics.component.scss']
 })
 export class StatisticsComponent implements OnInit {
+  @ViewChild('mempoolgraph') mempoolGraph: MempoolGraphComponent;
+  @ViewChild('incominggraph') incomingGraph: IncomingTransactionsGraphComponent;
+
   network = '';
 
   loading = true;
@@ -38,6 +43,7 @@ export class StatisticsComponent implements OnInit {
   graphWindowPreference: string;
   inverted: boolean;
   feeLevelDropdownData = [];
+  timespan = '';
 
   constructor(
     @Inject(LOCALE_ID) private locale: string,
@@ -75,6 +81,7 @@ export class StatisticsComponent implements OnInit {
     )
     .pipe(
       switchMap(() => {
+        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);
+    }
+  }
 }

From c62ed62db6924746882eb379f8221192d332a3b6 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Thu, 5 May 2022 17:48:57 +0900
Subject: [PATCH 07/12] Change download button position so it's not hidden on
 mobile

---
 .../block-fee-rates-graph.component.html                      | 2 +-
 .../block-fee-rates-graph.component.scss                      | 4 ++--
 .../block-fees-graph/block-fees-graph.component.html          | 2 +-
 .../block-fees-graph/block-fees-graph.component.scss          | 4 ++--
 .../block-rewards-graph/block-rewards-graph.component.html    | 2 +-
 .../block-rewards-graph/block-rewards-graph.component.scss    | 4 ++--
 .../components/hashrate-chart/hashrate-chart.component.html   | 2 +-
 .../components/hashrate-chart/hashrate-chart.component.scss   | 4 ++--
 .../hashrates-chart-pools/hashrate-chart-pools.component.html | 2 +-
 .../hashrates-chart-pools/hashrate-chart-pools.component.scss | 4 ++--
 .../app/components/pool-ranking/pool-ranking.component.html   | 2 +-
 .../app/components/pool-ranking/pool-ranking.component.scss   | 4 ++--
 .../src/app/components/statistics/statistics.component.html   | 4 ++--
 .../src/app/components/statistics/statistics.component.scss   | 4 ++--
 14 files changed, 22 insertions(+), 22 deletions(-)

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 4ef952848..a4325927f 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 @@
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-fee-rates">Block fee rates</span>
-    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
index 54dbe5fad..007a2cd06 100644
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
@@ -59,11 +59,11 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }
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 fc11bc827..88ce7db8a 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 @@
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-fees">Block fees</span>
-    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
index 54dbe5fad..007a2cd06 100644
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
@@ -59,11 +59,11 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }
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 d29cd6a21..32b4a66a0 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 @@
 
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-rewards">Block rewards</span>
-    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
index 54dbe5fad..007a2cd06 100644
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
@@ -59,11 +59,11 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }
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 8075c3b88..532d433bc 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 @@
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
     <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
-    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
index 86c1f8ec3..fa044a4d6 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -59,11 +59,11 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }
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 7fe787888..67cd3ff83 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 @@
 
   <div class="card-header  mb-0 mb-md-4">
     <span i18n="mining.pools-dominance">Mining pools dominance</span>
-    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
index e89c8f173..b15df44fa 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
@@ -53,11 +53,11 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }
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 50675eee0..5d3d5dd3d 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 @@
 
   <div class="card-header" *ngIf="!widget">
     <span i18n="mining.mining-pool-share">Mining pools share</span>
-    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
index 2d253eef6..d5eedd5d3 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -37,11 +37,11 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }
diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index 254aec3f5..734ebbd18 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -4,7 +4,7 @@
       <div class="card mb-3">
         <div class="card-header">
           <i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
-          <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart('mempool')">
+          <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')">
             <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
           </button>
 
@@ -84,7 +84,7 @@
         <div class="card-header">
             <i class="fa fa-area-chart"></i> <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
         </div>
-        <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart('incoming')">
+        <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
           <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
         </button>
 
diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss
index 530e62385..49765c71c 100644
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@@ -53,11 +53,11 @@
   }
 }
 .formRadioGroup.mining {
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }

From 271f3c2317e327eb9be3e924485b449a6e400dd0 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Mon, 9 May 2022 11:01:51 +0200
Subject: [PATCH 08/12] [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 @@
     <div>
       <div class="card mb-3">
         <div class="card-header">
-          <i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
+          <i class="fa fa-area-chart"></i>
+          <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
           <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')">
             <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
           </button>
 
-          <form [formGroup]="radioGroupForm" class="formRadioGroup" [class]="stateService.env.MINING_DASHBOARD ? 'mining' : ''" (click)="saveGraphPreference()">
+          <form [formGroup]="radioGroupForm" class="formRadioGroup"
+            [class]="stateService.env.MINING_DASHBOARD ? 'mining' : ''" (click)="saveGraphPreference()">
             <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
               <label ngbButtonLabel class="btn-primary btn-sm">
-                <input ngbButton type="radio" [value]="'2h'" [routerLink]="['/graphs' | relativeUrl]" fragment="2h"> 2H (LIVE)
+                <input ngbButton type="radio" [value]="'2h'" [routerLink]="['/graphs' | relativeUrl]" fragment="2h"> 2H
+                (LIVE)
               </label>
               <label ngbButtonLabel class="btn-primary btn-sm">
-                <input ngbButton type="radio" [value]="'24h'" [routerLink]="['/graphs' | relativeUrl]" fragment="24h"> 24H
+                <input ngbButton type="radio" [value]="'24h'" [routerLink]="['/graphs' | relativeUrl]" fragment="24h">
+                24H
               </label>
               <label ngbButtonLabel class="btn-primary btn-sm">
                 <input ngbButton type="radio" [value]="'1w'" [routerLink]="['/graphs' | relativeUrl]" fragment="1w"> 1W
@@ -41,39 +45,37 @@
             <div class="small-buttons">
               <div ngbDropdown #myDrop="ngbDropdown">
                 <button class="btn btn-primary btn-sm" id="dropdownFees" ngbDropdownAnchor (click)="myDrop.toggle()">
-                  <fa-icon [icon]="['fas', 'filter']" [fixedWidth]="true" i18n-title="statistics.component-filter.title" title="Filter"></fa-icon>
+                  <fa-icon [icon]="['fas', 'filter']" [fixedWidth]="true" i18n-title="statistics.component-filter.title"
+                    title="Filter"></fa-icon>
                 </button>
                 <div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
                   <ul>
                     <ng-template ngFor let-feeData let-i="index" [ngForOf]="feeLevelDropdownData">
                       <ng-template [ngIf]="feeData.fee <= 400">
-                        <li (click)="filterFeeIndex = feeData.fee" [class]="filterFeeIndex > feeData.fee ? 'inactive' : ''">
+                        <li (click)="filterFeeIndex = feeData.fee"
+                          [class]="filterFeeIndex > feeData.fee ? 'inactive' : ''">
                           <span class="square" [ngStyle]="{'backgroundColor': feeData.color}"></span>
                           <span class="fee-text">{{ feeData.range }}</span>
-                      </li>
+                        </li>
                       </ng-template>
                     </ng-template>
                   </ul>
                 </div>
               </div>
 
-              <button (click)="invertGraph()" class="btn btn-primary btn-sm"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" i18n-title="statistics.component-invert.title" title="Invert"></fa-icon></button>
+              <button (click)="invertGraph()" class="btn btn-primary btn-sm">
+                <fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true"
+                  i18n-title="statistics.component-invert.title" title="Invert"></fa-icon>
+              </button>
             </div>
           </form>
           <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading && mempoolStats.length"></div>
         </div>
         <div class="card-body">
           <div class="incoming-transactions-graph">
-            <app-mempool-graph #mempoolgraph
-              dir="ltr"
-              [template]="'advanced'"
-              [limitFee]="500"
-              [limitFilterFee]="filterFeeIndex"
-              [height]="500"
-              [left]="65"
-              [right]="10"
-              [data]="mempoolStats && mempoolStats.length ? mempoolStats : null"
-            ></app-mempool-graph>
+            <app-mempool-graph #mempoolgraph dir="ltr" [template]="'advanced'" [limitFee]="500"
+              [limitFilterFee]="filterFeeIndex" [height]="500" [left]="65" [right]="10"
+              [data]="mempoolStats && mempoolStats.length ? mempoolStats : null"></app-mempool-graph>
           </div>
         </div>
       </div>
@@ -82,23 +84,20 @@
     <div>
       <div class="card mb-3">
         <div class="card-header">
-            <i class="fa fa-area-chart"></i> <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
+          <i class="fa fa-area-chart"></i>
+          <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
+          <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
+            <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+          </button>
         </div>
-        <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
-          <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-        </button>
 
         <div class="card-body">
           <div class="incoming-transactions-graph">
-            <app-incoming-transactions-graph #incominggraph
-              [height]="500"
-              [left]="65"
-              [template]="'advanced'"
-              [data]="mempoolTransactionsWeightPerSecondData"
-            ></app-incoming-transactions-graph>
+            <app-incoming-transactions-graph #incominggraph [height]="500" [left]="65" [template]="'advanced'"
+              [data]="mempoolTransactionsWeightPerSecondData"></app-incoming-transactions-graph>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</div>
\ 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);

From 802e10e0a97e56147449fcfe228ed90d9fa8ce10 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Mon, 2 May 2022 17:28:58 +0900
Subject: [PATCH 09/12] Create indexing sticky notification that show indexing
 progress in all mining dashboard related pages

---
 backend/src/api/blocks.ts                     |  6 +++-
 backend/src/repositories/BlocksRepository.ts  | 18 ++++++++++++
 frontend/src/app/app.module.ts                |  2 ++
 .../block-fee-rates-graph.component.html      |  2 ++
 .../block-fees-graph.component.html           |  2 ++
 .../block-rewards-graph.component.html        |  2 ++
 .../blocks-list/blocks-list.component.html    |  2 ++
 .../hashrate-chart.component.html             |  2 ++
 .../hashrate-chart.component.ts               |  6 +---
 .../hashrate-chart-pools.component.html       |  2 ++
 .../hashrate-chart-pools.component.ts         |  6 +---
 .../loading-indicator.component.html          |  3 ++
 .../loading-indicator.component.scss          | 14 +++++++++
 .../loading-indicator.component.ts            | 29 +++++++++++++++++++
 .../mining-dashboard.component.html           |  2 ++
 .../mining-dashboard.component.ts             |  5 ----
 .../pool-ranking/pool-ranking.component.html  |  2 ++
 .../app/components/pool/pool.component.html   |  2 ++
 .../src/app/components/pool/pool.component.ts |  8 ++---
 19 files changed, 95 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/app/components/loading-indicator/loading-indicator.component.html
 create mode 100644 frontend/src/app/components/loading-indicator/loading-indicator.component.scss
 create mode 100644 frontend/src/app/components/loading-indicator/loading-indicator.component.ts

diff --git a/backend/src/api/blocks.ts b/backend/src/api/blocks.ts
index 633e797d1..7e79f6421 100644
--- a/backend/src/api/blocks.ts
+++ b/backend/src/api/blocks.ts
@@ -221,9 +221,10 @@ class Blocks {
       const lastBlockToIndex = Math.max(0, currentBlockHeight - indexingBlockAmount + 1);
 
       logger.debug(`Indexing blocks from #${currentBlockHeight} to #${lastBlockToIndex}`);
+      loadingIndicators.setProgress('block-indexing', 0);
 
       const chunkSize = 10000;
-      let totaIndexed = await blocksRepository.$blockCount(null, null);
+      let totaIndexed = await blocksRepository.$blockCountBetweenHeight(currentBlockHeight, lastBlockToIndex);
       let indexedThisRun = 0;
       let newlyIndexed = 0;
       const startedAt = new Date().getTime() / 1000;
@@ -256,6 +257,7 @@ class Blocks {
             logger.debug(`Indexing block #${blockHeight} | ~${blockPerSeconds} blocks/sec | total: ${totaIndexed}/${indexingBlockAmount} (${progress}%) | elapsed: ${runningFor} seconds | left: ~${timeLeft} seconds`);
             timer = new Date().getTime() / 1000;
             indexedThisRun = 0;
+            loadingIndicators.setProgress('block-indexing', progress);
           }
           const blockHash = await bitcoinApi.$getBlockHash(blockHeight);
           const block = BitcoinApi.convertBlock(await bitcoinClient.getBlock(blockHash));
@@ -269,9 +271,11 @@ class Blocks {
         currentBlockHeight -= chunkSize;
       }
       logger.info(`Indexed ${newlyIndexed} blocks`);
+      loadingIndicators.setProgress('block-indexing', 100);
     } catch (e) {
       logger.err('Block indexing failed. Trying again later. Reason: ' + (e instanceof Error ? e.message : e));
       this.blockIndexingStarted = false;
+      loadingIndicators.setProgress('block-indexing', 100);
       return;
     }
 
diff --git a/backend/src/repositories/BlocksRepository.ts b/backend/src/repositories/BlocksRepository.ts
index c5267c461..e04080a9c 100644
--- a/backend/src/repositories/BlocksRepository.ts
+++ b/backend/src/repositories/BlocksRepository.ts
@@ -188,6 +188,24 @@ class BlocksRepository {
     }
   }
 
+  /**
+   * Get blocks count for a period
+   */
+   public async $blockCountBetweenHeight(startHeight: number, endHeight: number): Promise<number> {
+    const params: any[] = [];
+    let query = `SELECT count(height) as blockCount
+      FROM blocks
+      WHERE height <= ${startHeight} AND height >= ${endHeight}`;
+
+    try {
+      const [rows] = await DB.query(query, params);
+      return <number>rows[0].blockCount;
+    } catch (e) {
+      logger.err(`Cannot count blocks for this pool (using offset). Reason: ` + (e instanceof Error ? e.message : e));
+      throw e;
+    }
+  }
+
   /**
    * Get the oldest indexed block
    */
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index ef40be5a3..c72460bb6 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -76,6 +76,7 @@ import { DataCyDirective } from './data-cy.directive';
 import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fees-graph.component';
 import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component';
 import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component';
+import { LoadingIndicatorComponent } from './components/loading-indicator/loading-indicator.component';
 
 @NgModule({
   declarations: [
@@ -132,6 +133,7 @@ import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/
     BlockFeesGraphComponent,
     BlockRewardsGraphComponent,
     BlockFeeRatesGraphComponent,
+    LoadingIndicatorComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
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 a4325927f..f4ee2bd07 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,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-fee-rates">Block fee rates</span>
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 88ce7db8a..b31ba5678 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,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-fees">Block fees</span>
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 32b4a66a0..d961e70bf 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
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="full-container">
 
   <div class="card-header mb-0 mb-md-4">
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html
index 703ccb6fc..c6746b142 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="container-xl" [class]="widget ? 'widget' : 'full-height'">
   <h1 *ngIf="!widget" class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
 
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 532d433bc..d9977a0e8 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div [class]="widget === false ? 'full-container' : ''">
 
   <div *ngIf="widget">
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 faeb2c8ce..f20f9db3a 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -136,16 +136,12 @@ export class HashrateChartComponent implements OnInit {
   prepareChartOptions(data) {
     let title: object;
     if (data.hashrates.length === 0) {
-      const lastBlock = new Date(data.timestamp * 1000);
-      const dd = String(lastBlock.getDate()).padStart(2, '0');
-      const mm = String(lastBlock.getMonth() + 1).padStart(2, '0'); // January is 0!
-      const yyyy = lastBlock.getFullYear();
       title = {
         textStyle: {
           color: 'grey',
           fontSize: 15
         },
-        text: `Indexing in progess - ${yyyy}-${mm}-${dd}`,
+        text: `Indexing in progess`,
         left: 'center',
         top: 'center'
       };
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 67cd3ff83..b8bff0020 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
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="full-container">
 
   <div class="card-header  mb-0 mb-md-4">
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 d6bfd66d6..528a783d5 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
@@ -150,16 +150,12 @@ export class HashrateChartPoolsComponent implements OnInit {
   prepareChartOptions(data) {
     let title: object;
     if (data.series.length === 0) {
-      const lastBlock = new Date(data.timestamp * 1000);
-      const dd = String(lastBlock.getDate()).padStart(2, '0');
-      const mm = String(lastBlock.getMonth() + 1).padStart(2, '0'); // January is 0!
-      const yyyy = lastBlock.getFullYear();
       title = {
         textStyle: {
           color: 'grey',
           fontSize: 15
         },
-        text: `Indexing in progess - ${yyyy}-${mm}-${dd}`,
+        text: `Indexing in progess`,
         left: 'center',
         top: 'center',
       };
diff --git a/frontend/src/app/components/loading-indicator/loading-indicator.component.html b/frontend/src/app/components/loading-indicator/loading-indicator.component.html
new file mode 100644
index 000000000..a3929c621
--- /dev/null
+++ b/frontend/src/app/components/loading-indicator/loading-indicator.component.html
@@ -0,0 +1,3 @@
+<div *ngIf="this.indexingProgress$ | async as progress" class="sticky-loading">
+  <span *ngIf="progress >= 0" class="mr-auto badge badge-pill badge-warning">Indexing blocks ({{ progress }}%)</span>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/components/loading-indicator/loading-indicator.component.scss b/frontend/src/app/components/loading-indicator/loading-indicator.component.scss
new file mode 100644
index 000000000..cb49e08ab
--- /dev/null
+++ b/frontend/src/app/components/loading-indicator/loading-indicator.component.scss
@@ -0,0 +1,14 @@
+.sticky-loading {
+  position: fixed;
+  right: 10px;
+  z-index: 100;
+  @media (width > 991px) {
+    bottom: 15px;
+  }
+  @media (576px <= width <= 991px) {
+    bottom: 60px;
+  }
+  @media (width <= 575px) {
+    top: 17px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/loading-indicator/loading-indicator.component.ts b/frontend/src/app/components/loading-indicator/loading-indicator.component.ts
new file mode 100644
index 000000000..2dfbc81c6
--- /dev/null
+++ b/frontend/src/app/components/loading-indicator/loading-indicator.component.ts
@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { StateService } from 'src/app/services/state.service';
+import { WebsocketService } from 'src/app/services/websocket.service';
+
+@Component({
+  selector: 'app-loading-indicator',
+  templateUrl: './loading-indicator.component.html',
+  styleUrls: ['./loading-indicator.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LoadingIndicatorComponent implements OnInit {
+  @Input() name: string;
+
+  public indexingProgress$: Observable<number>;
+
+  constructor(
+    private stateService: StateService,
+    private websocketService: WebsocketService
+  ) {}
+
+  ngOnInit() {
+    this.indexingProgress$ = this.stateService.loadingIndicators$
+      .pipe(
+        map((indicators) => indicators[this.name] ?? -1)
+      );
+  }
+}
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
index 3b32408c8..db395bf39 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="container-xl dashboard-container">
 
   <div class="row row-cols-1 row-cols-md-2">
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
index cfd1eafbd..352586f14 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
@@ -1,8 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { map } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
-import { StateService } from 'src/app/services/state.service';
-import { Observable } from 'rxjs';
 import { WebsocketService } from 'src/app/services/websocket.service';
 
 @Component({
@@ -12,8 +9,6 @@ import { WebsocketService } from 'src/app/services/websocket.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MiningDashboardComponent implements OnInit {
-  private blocks = [];
-
   constructor(
     private seoService: SeoService,
     private websocketService: WebsocketService,
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 5d3d5dd3d..56c73a8c0 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div [class]="widget === false ? 'full-container' : ''">
 
   <div *ngIf="widget">
diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html
index c51360a2d..c9d12ee22 100644
--- a/frontend/src/app/components/pool/pool.component.html
+++ b/frontend/src/app/components/pool/pool.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="container-xl">
 
   <!-- Pool overview -->
diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts
index 9d644121a..3111d78b8 100644
--- a/frontend/src/app/components/pool/pool.component.ts
+++ b/frontend/src/app/components/pool/pool.component.ts
@@ -111,7 +111,7 @@ export class PoolComponent implements OnInit {
           color: 'grey',
           fontSize: 15
         },
-        text: `No data`,
+        text: `Indexing in progress`,
         left: 'center',
         top: 'center'
       };
@@ -164,14 +164,14 @@ export class PoolComponent implements OnInit {
           `;
         }.bind(this)
       },
-      xAxis: {
+      xAxis: data.length === 0 ? undefined : {
         type: 'time',
         splitNumber: (this.isMobile()) ? 5 : 10,
         axisLabel: {
           hideOverlap: true,
         }
       },
-      yAxis: [
+      yAxis: data.length === 0 ? undefined : [
         {
           min: (value) => {
             return value.min * 0.9;
@@ -190,7 +190,7 @@ export class PoolComponent implements OnInit {
           }
         },
       ],
-      series: [
+      series: data.length === 0 ? undefined : [
         {
           zlevel: 0,
           name: 'Hashrate',

From de7c4774ecce21b187848820ed42673f61d70ab9 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 10 May 2022 14:52:37 +0200
Subject: [PATCH 10/12] Added indexing progress indicator for hashrates, update
 logging

---
 backend/src/api/blocks.ts                     | 12 ++---
 backend/src/api/loading-indicators.ts         |  4 +-
 backend/src/api/mining.ts                     | 44 +++++++++++++------
 frontend/src/app/app.module.ts                |  2 +
 .../block-fee-rates-graph.component.html      |  2 +-
 .../block-fees-graph.component.html           |  2 +-
 .../block-rewards-graph.component.html        |  2 +-
 .../blocks-list/blocks-list.component.html    |  2 +-
 .../hashrate-chart.component.html             |  2 +-
 .../hashrate-chart-pools.component.html       |  2 +-
 .../indexing-progress.component.html          |  3 ++
 .../indexing-progress.component.ts            | 14 ++++++
 .../loading-indicator.component.html          |  2 +-
 .../loading-indicator.component.scss          | 16 ++++---
 .../loading-indicator.component.ts            |  1 +
 .../mining-dashboard.component.html           |  2 +-
 .../pool-ranking/pool-ranking.component.html  |  2 +-
 .../app/components/pool/pool.component.html   |  2 +-
 18 files changed, 78 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/app/components/indexing-progress/indexing-progress.component.html
 create mode 100644 frontend/src/app/components/indexing-progress/indexing-progress.component.ts

diff --git a/backend/src/api/blocks.ts b/backend/src/api/blocks.ts
index 7e79f6421..6af631382 100644
--- a/backend/src/api/blocks.ts
+++ b/backend/src/api/blocks.ts
@@ -224,7 +224,7 @@ class Blocks {
       loadingIndicators.setProgress('block-indexing', 0);
 
       const chunkSize = 10000;
-      let totaIndexed = await blocksRepository.$blockCountBetweenHeight(currentBlockHeight, lastBlockToIndex);
+      let totalIndexed = await blocksRepository.$blockCountBetweenHeight(currentBlockHeight, lastBlockToIndex);
       let indexedThisRun = 0;
       let newlyIndexed = 0;
       const startedAt = new Date().getTime() / 1000;
@@ -247,17 +247,17 @@ class Blocks {
             break;
           }
           ++indexedThisRun;
-          ++totaIndexed;
+          ++totalIndexed;
           const elapsedSeconds = Math.max(1, Math.round((new Date().getTime() / 1000) - timer));
           if (elapsedSeconds > 5 || blockHeight === lastBlockToIndex) {
             const runningFor = Math.max(1, Math.round((new Date().getTime() / 1000) - startedAt));
             const blockPerSeconds = Math.max(1, Math.round(indexedThisRun / elapsedSeconds));
-            const progress = Math.round(totaIndexed / indexingBlockAmount * 100);
-            const timeLeft = Math.round((indexingBlockAmount - totaIndexed) / blockPerSeconds);
-            logger.debug(`Indexing block #${blockHeight} | ~${blockPerSeconds} blocks/sec | total: ${totaIndexed}/${indexingBlockAmount} (${progress}%) | elapsed: ${runningFor} seconds | left: ~${timeLeft} seconds`);
+            const progress = Math.round(totalIndexed / indexingBlockAmount * 10000) / 100;
+            const timeLeft = Math.round((indexingBlockAmount - totalIndexed) / blockPerSeconds);
+            logger.debug(`Indexing block #${blockHeight} | ~${blockPerSeconds.toFixed(2)} blocks/sec | total: ${totalIndexed}/${indexingBlockAmount} (${progress}%) | elapsed: ${runningFor} seconds | left: ~${timeLeft} seconds`);
             timer = new Date().getTime() / 1000;
             indexedThisRun = 0;
-            loadingIndicators.setProgress('block-indexing', progress);
+            loadingIndicators.setProgress('block-indexing', progress, false);
           }
           const blockHash = await bitcoinApi.$getBlockHash(blockHeight);
           const block = BitcoinApi.convertBlock(await bitcoinClient.getBlock(blockHash));
diff --git a/backend/src/api/loading-indicators.ts b/backend/src/api/loading-indicators.ts
index c2d682d1c..38d5aea96 100644
--- a/backend/src/api/loading-indicators.ts
+++ b/backend/src/api/loading-indicators.ts
@@ -12,8 +12,8 @@ class LoadingIndicators {
     this.progressChangedCallback = fn;
   }
 
-  public setProgress(name: string, progressPercent: number) {
-    const newProgress = Math.round(progressPercent);
+  public setProgress(name: string, progressPercent: number, rounded: boolean = true) {
+    const newProgress = rounded === true ? Math.round(progressPercent) : progressPercent;
     if (newProgress >= 100) {
       delete this.loadingIndicators[name];
     } else {
diff --git a/backend/src/api/mining.ts b/backend/src/api/mining.ts
index 2c7530643..0909d6100 100644
--- a/backend/src/api/mining.ts
+++ b/backend/src/api/mining.ts
@@ -6,6 +6,7 @@ import bitcoinClient from './bitcoin/bitcoin-client';
 import logger from '../logger';
 import blocks from './blocks';
 import { Common } from './common';
+import loadingIndicators from './loading-indicators';
 
 class Mining {
   hashrateIndexingStarted = false;
@@ -131,7 +132,7 @@ class Mining {
    * [INDEXING] Generate weekly mining pool hashrate history
    */
   public async $generatePoolHashrateHistory(): Promise<void> {
-    if (!blocks.blockIndexingCompleted || this.weeklyHashrateIndexingStarted) {
+    if (!blocks.blockIndexingCompleted || this.hashrateIndexingStarted || this.weeklyHashrateIndexingStarted) {
       return;
     }
 
@@ -167,7 +168,10 @@ class Mining {
       let indexedThisRun = 0;
       let totalIndexed = 0;
       let newlyIndexed = 0;
-      let startedAt = new Date().getTime();
+      const startedAt = new Date().getTime() / 1000;
+      let timer = new Date().getTime() / 1000;
+
+      loadingIndicators.setProgress('weekly-hashrate-indexing', 0);
 
       while (toTimestamp > genesisTimestamp) {
         const fromTimestamp = toTimestamp - 604800000;
@@ -214,14 +218,17 @@ class Mining {
         await HashratesRepository.$saveHashrates(hashrates);
         hashrates.length = 0;
 
-        const elapsedSeconds = Math.max(1, Math.round((new Date().getTime()) - startedAt)) / 1000;
+        const elapsedSeconds = Math.max(1, Math.round((new Date().getTime() / 1000) - timer));
         if (elapsedSeconds > 1) {
-          const weeksPerSeconds = (indexedThisRun / elapsedSeconds).toFixed(2);
+          const runningFor = Math.max(1, Math.round((new Date().getTime() / 1000) - startedAt));
+          const weeksPerSeconds = Math.max(1, Math.round(indexedThisRun / elapsedSeconds));
+          const progress = Math.round(totalIndexed / totalWeekIndexed * 10000) / 100;
+          const timeLeft = Math.round((totalWeekIndexed - totalIndexed) / weeksPerSeconds);
           const formattedDate = new Date(fromTimestamp).toUTCString();
-          const weeksLeft = Math.round(totalWeekIndexed - totalIndexed);
-          logger.debug(`Getting weekly pool hashrate for ${formattedDate} | ~${weeksPerSeconds} weeks/sec | ~${weeksLeft} weeks left to index`);
-          startedAt = new Date().getTime();
+          logger.debug(`Getting weekly pool hashrate for ${formattedDate} | ~${weeksPerSeconds.toFixed(2)} weeks/sec | total: ~${totalIndexed}/${Math.round(totalWeekIndexed)} (${progress}%) | elapsed: ${runningFor} seconds | left: ~${timeLeft} seconds`);
+          timer = new Date().getTime() / 1000;
           indexedThisRun = 0;
+          loadingIndicators.setProgress('weekly-hashrate-indexing', progress, false);
         }
 
         toTimestamp -= 604800000;
@@ -233,7 +240,9 @@ class Mining {
       if (newlyIndexed > 0) {
         logger.info(`Indexed ${newlyIndexed} pools weekly hashrate`);
       }
+      loadingIndicators.setProgress('weekly-hashrate-indexing', 100);
     } catch (e) {
+      loadingIndicators.setProgress('weekly-hashrate-indexing', 100);
       this.weeklyHashrateIndexingStarted = false;
       throw e;
     }
@@ -273,7 +282,10 @@ class Mining {
       let indexedThisRun = 0;
       let totalIndexed = 0;
       let newlyIndexed = 0;
-      let startedAt = new Date().getTime();
+      const startedAt = new Date().getTime() / 1000;
+      let timer = new Date().getTime() / 1000;
+
+      loadingIndicators.setProgress('daily-hashrate-indexing', 0);
 
       while (toTimestamp > genesisTimestamp) {
         const fromTimestamp = toTimestamp - 86400000;
@@ -312,15 +324,17 @@ class Mining {
           hashrates.length = 0;
         }
 
-        const elapsedSeconds = Math.max(1, Math.round(new Date().getTime() - startedAt)) / 1000;
+        const elapsedSeconds = Math.max(1, Math.round((new Date().getTime() / 1000) - timer));
         if (elapsedSeconds > 1) {
-          const daysPerSeconds = (indexedThisRun / elapsedSeconds).toFixed(2);
+          const runningFor = Math.max(1, Math.round((new Date().getTime() / 1000) - startedAt));
+          const daysPerSeconds = Math.max(1, Math.round(indexedThisRun / elapsedSeconds));
+          const progress = Math.round(totalIndexed / totalDayIndexed * 10000) / 100;
+          const timeLeft = Math.round((totalDayIndexed - totalIndexed) / daysPerSeconds);
           const formattedDate = new Date(fromTimestamp).toUTCString();
-          const daysLeft = Math.round(totalDayIndexed - totalIndexed);
-          logger.debug(`Getting network daily hashrate for ${formattedDate} | ~${daysPerSeconds} days/sec | ` +
-            `~${daysLeft} days left to index`);
-          startedAt = new Date().getTime();
+          logger.debug(`Getting network daily hashrate for ${formattedDate} | ~${daysPerSeconds.toFixed(2)} days/sec | total: ~${totalIndexed}/${Math.round(totalDayIndexed)} (${progress}%) | elapsed: ${runningFor} seconds | left: ~${timeLeft} seconds`);
+          timer = new Date().getTime() / 1000;
           indexedThisRun = 0;
+          loadingIndicators.setProgress('daily-hashrate-indexing', progress);
         }
 
         toTimestamp -= 86400000;
@@ -346,7 +360,9 @@ class Mining {
       if (newlyIndexed > 0) {
         logger.info(`Indexed ${newlyIndexed} day of network hashrate`);
       }
+      loadingIndicators.setProgress('daily-hashrate-indexing', 100);
     } catch (e) {
+      loadingIndicators.setProgress('daily-hashrate-indexing', 100);
       this.hashrateIndexingStarted = false;
       throw e;
     }
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index c72460bb6..09e26e906 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -77,6 +77,7 @@ import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fee
 import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component';
 import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component';
 import { LoadingIndicatorComponent } from './components/loading-indicator/loading-indicator.component';
+import { IndexingProgressComponent } from './components/indexing-progress/indexing-progress.component';
 
 @NgModule({
   declarations: [
@@ -134,6 +135,7 @@ import { LoadingIndicatorComponent } from './components/loading-indicator/loadin
     BlockRewardsGraphComponent,
     BlockFeeRatesGraphComponent,
     LoadingIndicatorComponent,
+    IndexingProgressComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
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 f4ee2bd07..f15356c2f 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,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
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 b31ba5678..c78311d71 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,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
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 d961e70bf..d730ac7d1 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
@@ -1,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="full-container">
 
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html
index c6746b142..b19620594 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -1,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="container-xl" [class]="widget ? 'widget' : 'full-height'">
   <h1 *ngIf="!widget" class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
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 d9977a0e8..8ec254e95 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
@@ -1,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div [class]="widget === false ? 'full-container' : ''">
 
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 b8bff0020..80f2baa54 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
@@ -1,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="full-container">
 
diff --git a/frontend/src/app/components/indexing-progress/indexing-progress.component.html b/frontend/src/app/components/indexing-progress/indexing-progress.component.html
new file mode 100644
index 000000000..6d745d7b7
--- /dev/null
+++ b/frontend/src/app/components/indexing-progress/indexing-progress.component.html
@@ -0,0 +1,3 @@
+<app-loading-indicator [name]="'block-indexing'" [label]="'Indexing blocks'"></app-loading-indicator>
+<app-loading-indicator [name]="'daily-hashrate-indexing'" [label]="'Indexing network hashrate'"></app-loading-indicator>
+<app-loading-indicator [name]="'weekly-hashrate-indexing'" [label]="'Indexing pools hashrate'"></app-loading-indicator>
diff --git a/frontend/src/app/components/indexing-progress/indexing-progress.component.ts b/frontend/src/app/components/indexing-progress/indexing-progress.component.ts
new file mode 100644
index 000000000..121e77c7d
--- /dev/null
+++ b/frontend/src/app/components/indexing-progress/indexing-progress.component.ts
@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-indexing-progress',
+  templateUrl: './indexing-progress.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IndexingProgressComponent implements OnInit {
+  constructor(
+  ) {}
+
+  ngOnInit() {
+  }
+}
diff --git a/frontend/src/app/components/loading-indicator/loading-indicator.component.html b/frontend/src/app/components/loading-indicator/loading-indicator.component.html
index a3929c621..49dbc2983 100644
--- a/frontend/src/app/components/loading-indicator/loading-indicator.component.html
+++ b/frontend/src/app/components/loading-indicator/loading-indicator.component.html
@@ -1,3 +1,3 @@
 <div *ngIf="this.indexingProgress$ | async as progress" class="sticky-loading">
-  <span *ngIf="progress >= 0" class="mr-auto badge badge-pill badge-warning">Indexing blocks ({{ progress }}%)</span>
+  <span *ngIf="progress >= 0" class="mr-auto badge badge-pill badge-warning">{{ this.label }} ({{ progress }}%)</span>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/components/loading-indicator/loading-indicator.component.scss b/frontend/src/app/components/loading-indicator/loading-indicator.component.scss
index cb49e08ab..b919fa2b8 100644
--- a/frontend/src/app/components/loading-indicator/loading-indicator.component.scss
+++ b/frontend/src/app/components/loading-indicator/loading-indicator.component.scss
@@ -1,14 +1,18 @@
 .sticky-loading {
-  position: fixed;
+  position: absolute;
   right: 10px;
   z-index: 100;
-  @media (width > 991px) {
-    bottom: 15px;
+  font-size: 14px;
+  @media (width >= 992px) {
+    left: 32px;
+    top: 55px;
   }
-  @media (576px <= width <= 991px) {
-    bottom: 60px;
+  @media (576px <= width < 992px ) {
+    left: 18px;
+    top: 55px;
   }
   @media (width <= 575px) {
-    top: 17px;
+    left: 18px;
+    top: 100px;
   }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/loading-indicator/loading-indicator.component.ts b/frontend/src/app/components/loading-indicator/loading-indicator.component.ts
index 2dfbc81c6..3f59c2701 100644
--- a/frontend/src/app/components/loading-indicator/loading-indicator.component.ts
+++ b/frontend/src/app/components/loading-indicator/loading-indicator.component.ts
@@ -12,6 +12,7 @@ import { WebsocketService } from 'src/app/services/websocket.service';
 })
 export class LoadingIndicatorComponent implements OnInit {
   @Input() name: string;
+  @Input() label: string;
 
   public indexingProgress$: Observable<number>;
 
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
index db395bf39..bf8ba2cf7 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
@@ -1,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="container-xl dashboard-container">
 
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 56c73a8c0..17120d64d 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -1,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div [class]="widget === false ? 'full-container' : ''">
 
diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html
index c9d12ee22..be7437363 100644
--- a/frontend/src/app/components/pool/pool.component.html
+++ b/frontend/src/app/components/pool/pool.component.html
@@ -1,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="container-xl">
 

From 8398c3bcc588c0ba0432e89f64ee04b7d6e2cdab Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 10 May 2022 14:57:43 +0200
Subject: [PATCH 11/12] Hide indexing notification in widget mode

---
 .../src/app/components/blocks-list/blocks-list.component.html   | 2 +-
 .../app/components/hashrate-chart/hashrate-chart.component.html | 2 +-
 .../src/app/components/pool-ranking/pool-ranking.component.html | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html
index b19620594..e31214443 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -1,4 +1,4 @@
-<app-indexing-progress></app-indexing-progress>
+<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
 
 <div class="container-xl" [class]="widget ? 'widget' : 'full-height'">
   <h1 *ngIf="!widget" class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
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 8ec254e95..8739f18fb 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
@@ -1,4 +1,4 @@
-<app-indexing-progress></app-indexing-progress>
+<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
 
 <div [class]="widget === false ? 'full-container' : ''">
 
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 17120d64d..12b5ffb2a 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -1,4 +1,4 @@
-<app-indexing-progress></app-indexing-progress>
+<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
 
 <div [class]="widget === false ? 'full-container' : ''">
 

From df177e0ea75e16726767af44ee7385b287a2ba72 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 10 May 2022 15:26:12 +0200
Subject: [PATCH 12/12] Localize indexing progress notifications

---
 .../indexing-progress/indexing-progress.component.html      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/indexing-progress/indexing-progress.component.html b/frontend/src/app/components/indexing-progress/indexing-progress.component.html
index 6d745d7b7..783566744 100644
--- a/frontend/src/app/components/indexing-progress/indexing-progress.component.html
+++ b/frontend/src/app/components/indexing-progress/indexing-progress.component.html
@@ -1,3 +1,3 @@
-<app-loading-indicator [name]="'block-indexing'" [label]="'Indexing blocks'"></app-loading-indicator>
-<app-loading-indicator [name]="'daily-hashrate-indexing'" [label]="'Indexing network hashrate'"></app-loading-indicator>
-<app-loading-indicator [name]="'weekly-hashrate-indexing'" [label]="'Indexing pools hashrate'"></app-loading-indicator>
+<app-loading-indicator [name]="'block-indexing'" i18n-label label="Indexing blocks"></app-loading-indicator>
+<app-loading-indicator [name]="'daily-hashrate-indexing'" i18n-label label="Indexing network hashrate"></app-loading-indicator>
+<app-loading-indicator [name]="'weekly-hashrate-indexing'" i18n-label label="Indexing pools hashrate"></app-loading-indicator>