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 1/4] 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 2/4] 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 3/4] 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 4/4] [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);