[Chart download] Add .svg to file name, fix chart background colors

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

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

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

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

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

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

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

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

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>

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