Add download feature on mining charts

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