Add download button on pool ranking and mempool graphs

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>
 

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>
 

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>
 

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>
 

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>
 

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>

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);
+  }
 }

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);
+  }
 }
 

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>
 

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'"

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);
+    }
+  }
 }