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

2022-05-09 11:01:51 +02:00 · 2022-05-09 11:01:51 +02:00 · 271f3c2317
commit 271f3c2317
parent c62ed62db6
10 changed files with 55 additions and 46 deletions
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
+++ b/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);
  }
 }
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
+++ b/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);
  }
 }
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
+++ b/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);
  }
 }
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/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);
  }
 }
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
+++ b/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);
  }
 }
--- 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
@ -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);
  }
 }
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/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);
  }
 }
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/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);
  }
 }

--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/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,20 +84,17 @@
    <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>
--- a/frontend/src/app/shared/graphs.utils.ts
+++ b/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);