Add download button on pool ranking and mempool graphs

2024-11-20 10:21:52 +01:00 · 2022-05-05 16:38:16 +09:00 · 2022-05-05 16:38:16 +09:00 · 7a487046b9
commit 7a487046b9
parent e8bb18fbc3
11 changed files with 80 additions and 14 deletions
--- 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>

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

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

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

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

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

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

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