Add download feature on mining charts

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

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

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

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>

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

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>

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

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>

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

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>

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

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

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

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