Add download feature on mining charts
This commit is contained in:
parent
953f9405fc
commit
e8bb18fbc3
@ -48,7 +48,8 @@ import { DashboardComponent } from './dashboard/dashboard.component';
|
|||||||
import { DifficultyComponent } from './components/difficulty/difficulty.component';
|
import { DifficultyComponent } from './components/difficulty/difficulty.component';
|
||||||
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
|
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
|
||||||
import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
|
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 { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
|
||||||
import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
|
import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
|
||||||
import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
|
import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
|
||||||
@ -195,5 +196,6 @@ export class AppModule {
|
|||||||
library.addIcons(faAngleLeft);
|
library.addIcons(faAngleLeft);
|
||||||
library.addIcons(faBook);
|
library.addIcons(faBook);
|
||||||
library.addIcons(faListUl);
|
library.addIcons(faListUl);
|
||||||
|
library.addIcons(faDownload);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,10 @@
|
|||||||
<div class="full-container">
|
<div class="full-container">
|
||||||
<div class="card-header mb-0 mb-md-4">
|
<div class="card-header mb-0 mb-md-4">
|
||||||
<span i18n="mining.block-fee-rates">Block fee rates</span>
|
<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">
|
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
|
||||||
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
||||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1">
|
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1">
|
||||||
|
@ -6,7 +6,7 @@ import { ApiService } from 'src/app/services/api.service';
|
|||||||
import { SeoService } from 'src/app/services/seo.service';
|
import { SeoService } from 'src/app/services/seo.service';
|
||||||
import { formatNumber } from '@angular/common';
|
import { formatNumber } from '@angular/common';
|
||||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
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 { StorageService } from 'src/app/services/storage.service';
|
||||||
import { MiningService } from 'src/app/services/mining.service';
|
import { MiningService } from 'src/app/services/mining.service';
|
||||||
import { selectPowerOfTen } from 'src/app/bitcoin.utils';
|
import { selectPowerOfTen } from 'src/app/bitcoin.utils';
|
||||||
@ -147,6 +147,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
|
|||||||
|
|
||||||
prepareChartOptions(data) {
|
prepareChartOptions(data) {
|
||||||
this.chartOptions = {
|
this.chartOptions = {
|
||||||
|
backgroundColor: '#11131f',
|
||||||
color: ['#D81B60', '#8E24AA', '#1E88E5', '#7CB342', '#FDD835', '#6D4C41', '#546E7A'],
|
color: ['#D81B60', '#8E24AA', '#1E88E5', '#7CB342', '#FDD835', '#6D4C41', '#546E7A'],
|
||||||
animation: false,
|
animation: false,
|
||||||
grid: {
|
grid: {
|
||||||
@ -297,4 +298,20 @@ export class BlockFeeRatesGraphComponent implements OnInit {
|
|||||||
isMobile() {
|
isMobile() {
|
||||||
return (window.innerWidth <= 767.98);
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,10 @@
|
|||||||
<div class="full-container">
|
<div class="full-container">
|
||||||
<div class="card-header mb-0 mb-md-4">
|
<div class="card-header mb-0 mb-md-4">
|
||||||
<span i18n="mining.block-fees">Block fees</span>
|
<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">
|
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
|
||||||
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
||||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
|
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
|
||||||
@ -37,7 +41,8 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions">
|
<div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
|
||||||
|
(chartInit)="onChartInit($event)">
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center loadingGraphs" *ngIf="isLoading">
|
<div class="text-center loadingGraphs" *ngIf="isLoading">
|
||||||
<div class="spinner-border text-light"></div>
|
<div class="spinner-border text-light"></div>
|
||||||
|
@ -6,7 +6,7 @@ import { ApiService } from 'src/app/services/api.service';
|
|||||||
import { SeoService } from 'src/app/services/seo.service';
|
import { SeoService } from 'src/app/services/seo.service';
|
||||||
import { formatNumber } from '@angular/common';
|
import { formatNumber } from '@angular/common';
|
||||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
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 { StorageService } from 'src/app/services/storage.service';
|
||||||
import { MiningService } from 'src/app/services/mining.service';
|
import { MiningService } from 'src/app/services/mining.service';
|
||||||
|
|
||||||
@ -40,6 +40,7 @@ export class BlockFeesGraphComponent implements OnInit {
|
|||||||
isLoading = true;
|
isLoading = true;
|
||||||
formatNumber = formatNumber;
|
formatNumber = formatNumber;
|
||||||
timespan = '';
|
timespan = '';
|
||||||
|
chartInstance: any = undefined;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
@Inject(LOCALE_ID) public locale: string,
|
@Inject(LOCALE_ID) public locale: string,
|
||||||
@ -87,6 +88,7 @@ export class BlockFeesGraphComponent implements OnInit {
|
|||||||
|
|
||||||
prepareChartOptions(data) {
|
prepareChartOptions(data) {
|
||||||
this.chartOptions = {
|
this.chartOptions = {
|
||||||
|
backgroundColor: '#11131f',
|
||||||
animation: false,
|
animation: false,
|
||||||
color: [
|
color: [
|
||||||
new graphic.LinearGradient(0, 0, 0, 0.65, [
|
new graphic.LinearGradient(0, 0, 0, 0.65, [
|
||||||
@ -194,7 +196,27 @@ export class BlockFeesGraphComponent implements OnInit {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onChartInit(ec) {
|
||||||
|
this.chartInstance = ec;
|
||||||
|
}
|
||||||
|
|
||||||
isMobile() {
|
isMobile() {
|
||||||
return (window.innerWidth <= 767.98);
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,6 +2,10 @@
|
|||||||
|
|
||||||
<div class="card-header mb-0 mb-md-4">
|
<div class="card-header mb-0 mb-md-4">
|
||||||
<span i18n="mining.block-rewards">Block rewards</span>
|
<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">
|
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
|
||||||
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
||||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
|
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
|
||||||
@ -38,7 +42,8 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions">
|
<div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
|
||||||
|
(chartInit)="onChartInit($event)">
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center loadingGraphs" *ngIf="isLoading">
|
<div class="text-center loadingGraphs" *ngIf="isLoading">
|
||||||
<div class="spinner-border text-light"></div>
|
<div class="spinner-border text-light"></div>
|
||||||
|
@ -6,7 +6,7 @@ import { ApiService } from 'src/app/services/api.service';
|
|||||||
import { SeoService } from 'src/app/services/seo.service';
|
import { SeoService } from 'src/app/services/seo.service';
|
||||||
import { formatNumber } from '@angular/common';
|
import { formatNumber } from '@angular/common';
|
||||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
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 { MiningService } from 'src/app/services/mining.service';
|
||||||
import { StorageService } from 'src/app/services/storage.service';
|
import { StorageService } from 'src/app/services/storage.service';
|
||||||
|
|
||||||
@ -40,6 +40,7 @@ export class BlockRewardsGraphComponent implements OnInit {
|
|||||||
isLoading = true;
|
isLoading = true;
|
||||||
formatNumber = formatNumber;
|
formatNumber = formatNumber;
|
||||||
timespan = '';
|
timespan = '';
|
||||||
|
chartInstance: any = undefined;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
@Inject(LOCALE_ID) public locale: string,
|
@Inject(LOCALE_ID) public locale: string,
|
||||||
@ -85,6 +86,7 @@ export class BlockRewardsGraphComponent implements OnInit {
|
|||||||
|
|
||||||
prepareChartOptions(data) {
|
prepareChartOptions(data) {
|
||||||
this.chartOptions = {
|
this.chartOptions = {
|
||||||
|
backgroundColor: '#11131f',
|
||||||
animation: false,
|
animation: false,
|
||||||
color: [
|
color: [
|
||||||
new graphic.LinearGradient(0, 0, 0, 0.65, [
|
new graphic.LinearGradient(0, 0, 0, 0.65, [
|
||||||
@ -194,7 +196,27 @@ export class BlockRewardsGraphComponent implements OnInit {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onChartInit(ec) {
|
||||||
|
this.chartInstance = ec;
|
||||||
|
}
|
||||||
|
|
||||||
isMobile() {
|
isMobile() {
|
||||||
return (window.innerWidth <= 767.98);
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -19,6 +19,10 @@
|
|||||||
|
|
||||||
<div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
|
<div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
|
||||||
<span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
|
<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">
|
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
|
||||||
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
||||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
|
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
|
||||||
@ -46,7 +50,8 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</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>
|
||||||
<div class="text-center loadingGraphs" *ngIf="isLoading">
|
<div class="text-center loadingGraphs" *ngIf="isLoading">
|
||||||
<div class="spinner-border text-light"></div>
|
<div class="spinner-border text-light"></div>
|
||||||
|
@ -9,6 +9,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
|
|||||||
import { selectPowerOfTen } from 'src/app/bitcoin.utils';
|
import { selectPowerOfTen } from 'src/app/bitcoin.utils';
|
||||||
import { StorageService } from 'src/app/services/storage.service';
|
import { StorageService } from 'src/app/services/storage.service';
|
||||||
import { MiningService } from 'src/app/services/mining.service';
|
import { MiningService } from 'src/app/services/mining.service';
|
||||||
|
import { download } from 'src/app/shared/graphs.utils';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-hashrate-chart',
|
selector: 'app-hashrate-chart',
|
||||||
@ -43,6 +44,8 @@ export class HashrateChartComponent implements OnInit {
|
|||||||
hashrateObservable$: Observable<any>;
|
hashrateObservable$: Observable<any>;
|
||||||
isLoading = true;
|
isLoading = true;
|
||||||
formatNumber = formatNumber;
|
formatNumber = formatNumber;
|
||||||
|
timespan = '';
|
||||||
|
chartInstance: any = undefined;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
@Inject(LOCALE_ID) public locale: string,
|
@Inject(LOCALE_ID) public locale: string,
|
||||||
@ -74,6 +77,7 @@ export class HashrateChartComponent implements OnInit {
|
|||||||
if (!this.widget && !firstRun) {
|
if (!this.widget && !firstRun) {
|
||||||
this.storageService.setValue('miningWindowPreference', timespan);
|
this.storageService.setValue('miningWindowPreference', timespan);
|
||||||
}
|
}
|
||||||
|
this.timespan = timespan;
|
||||||
firstRun = false;
|
firstRun = false;
|
||||||
this.miningWindowPreference = timespan;
|
this.miningWindowPreference = timespan;
|
||||||
this.isLoading = true;
|
this.isLoading = true;
|
||||||
@ -148,6 +152,7 @@ export class HashrateChartComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.chartOptions = {
|
this.chartOptions = {
|
||||||
|
backgroundColor: '#11131f',
|
||||||
title: title,
|
title: title,
|
||||||
animation: false,
|
animation: false,
|
||||||
color: [
|
color: [
|
||||||
@ -340,7 +345,27 @@ export class HashrateChartComponent implements OnInit {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onChartInit(ec) {
|
||||||
|
this.chartInstance = ec;
|
||||||
|
}
|
||||||
|
|
||||||
isMobile() {
|
isMobile() {
|
||||||
return (window.innerWidth <= 767.98);
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,6 +2,10 @@
|
|||||||
|
|
||||||
<div class="card-header mb-0 mb-md-4">
|
<div class="card-header mb-0 mb-md-4">
|
||||||
<span i18n="mining.pools-dominance">Mining pools dominance</span>
|
<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">
|
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
|
||||||
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
||||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
|
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
|
||||||
@ -29,8 +33,9 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chart"
|
<div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
|
||||||
echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
|
(chartInit)="onChartInit($event)">
|
||||||
|
</div>
|
||||||
<div class="text-center loadingGraphs" *ngIf="isLoading">
|
<div class="text-center loadingGraphs" *ngIf="isLoading">
|
||||||
<div class="spinner-border text-light"></div>
|
<div class="spinner-border text-light"></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -8,6 +8,8 @@ import { FormBuilder, FormGroup } from '@angular/forms';
|
|||||||
import { poolsColor } from 'src/app/app.constants';
|
import { poolsColor } from 'src/app/app.constants';
|
||||||
import { StorageService } from 'src/app/services/storage.service';
|
import { StorageService } from 'src/app/services/storage.service';
|
||||||
import { MiningService } from 'src/app/services/mining.service';
|
import { MiningService } from 'src/app/services/mining.service';
|
||||||
|
import { download } from 'src/app/shared/graphs.utils';
|
||||||
|
import { time } from 'console';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-hashrate-chart-pools',
|
selector: 'app-hashrate-chart-pools',
|
||||||
@ -39,6 +41,8 @@ export class HashrateChartPoolsComponent implements OnInit {
|
|||||||
|
|
||||||
hashrateObservable$: Observable<any>;
|
hashrateObservable$: Observable<any>;
|
||||||
isLoading = true;
|
isLoading = true;
|
||||||
|
timespan = '';
|
||||||
|
chartInstance: any = undefined;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
@Inject(LOCALE_ID) public locale: string,
|
@Inject(LOCALE_ID) public locale: string,
|
||||||
@ -68,6 +72,7 @@ export class HashrateChartPoolsComponent implements OnInit {
|
|||||||
if (!firstRun) {
|
if (!firstRun) {
|
||||||
this.storageService.setValue('miningWindowPreference', timespan);
|
this.storageService.setValue('miningWindowPreference', timespan);
|
||||||
}
|
}
|
||||||
|
this.timespan = timespan;
|
||||||
firstRun = false;
|
firstRun = false;
|
||||||
this.isLoading = true;
|
this.isLoading = true;
|
||||||
return this.apiService.getHistoricalPoolsHashrate$(timespan)
|
return this.apiService.getHistoricalPoolsHashrate$(timespan)
|
||||||
@ -161,6 +166,7 @@ export class HashrateChartPoolsComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.chartOptions = {
|
this.chartOptions = {
|
||||||
|
backgroundColor: '#11131f',
|
||||||
title: title,
|
title: title,
|
||||||
animation: false,
|
animation: false,
|
||||||
grid: {
|
grid: {
|
||||||
@ -247,7 +253,27 @@ export class HashrateChartPoolsComponent implements OnInit {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onChartInit(ec) {
|
||||||
|
this.chartInstance = ec;
|
||||||
|
}
|
||||||
|
|
||||||
isMobile() {
|
isMobile() {
|
||||||
return (window.innerWidth <= 767.98);
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -25,6 +25,10 @@
|
|||||||
|
|
||||||
<div class="card-header" *ngIf="!widget">
|
<div class="card-header" *ngIf="!widget">
|
||||||
<span i18n="mining.mining-pool-share">Mining pools share</span>
|
<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"
|
<form [formGroup]="radioGroupForm" class="formRadioGroup"
|
||||||
*ngIf="!widget && (miningStatsObservable$ | async) as stats">
|
*ngIf="!widget && (miningStatsObservable$ | async) as stats">
|
||||||
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
||||||
|
@ -11,6 +11,7 @@ import { MiningService, MiningStats } from '../../services/mining.service';
|
|||||||
import { StateService } from '../../services/state.service';
|
import { StateService } from '../../services/state.service';
|
||||||
import { chartColors, poolsColor } from 'src/app/app.constants';
|
import { chartColors, poolsColor } from 'src/app/app.constants';
|
||||||
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
|
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
|
||||||
|
import { download } from 'src/app/shared/graphs.utils';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-pool-ranking',
|
selector: 'app-pool-ranking',
|
||||||
@ -29,6 +30,7 @@ export class PoolRankingComponent implements OnInit {
|
|||||||
chartInitOptions = {
|
chartInitOptions = {
|
||||||
renderer: 'svg',
|
renderer: 'svg',
|
||||||
};
|
};
|
||||||
|
timespan = '';
|
||||||
chartInstance: any = undefined;
|
chartInstance: any = undefined;
|
||||||
|
|
||||||
@HostBinding('attr.dir') dir = 'ltr';
|
@HostBinding('attr.dir') dir = 'ltr';
|
||||||
@ -69,6 +71,7 @@ export class PoolRankingComponent implements OnInit {
|
|||||||
.pipe(
|
.pipe(
|
||||||
startWith(this.miningWindowPreference), // (trigger when the page loads)
|
startWith(this.miningWindowPreference), // (trigger when the page loads)
|
||||||
tap((value) => {
|
tap((value) => {
|
||||||
|
this.timespan = value;
|
||||||
if (!this.widget) {
|
if (!this.widget) {
|
||||||
this.storageService.setValue('miningWindowPreference', value);
|
this.storageService.setValue('miningWindowPreference', value);
|
||||||
}
|
}
|
||||||
@ -204,6 +207,7 @@ export class PoolRankingComponent implements OnInit {
|
|||||||
|
|
||||||
prepareChartOptions(miningStats) {
|
prepareChartOptions(miningStats) {
|
||||||
this.chartOptions = {
|
this.chartOptions = {
|
||||||
|
backgroundColor: '#11131f',
|
||||||
animation: false,
|
animation: false,
|
||||||
color: chartColors,
|
color: chartColors,
|
||||||
tooltip: {
|
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}`);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -77,3 +77,12 @@ export const formatterXAxisTimeCategory = (
|
|||||||
return date.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
|
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);
|
||||||
|
};
|
||||||
|
Loading…
x
Reference in New Issue
Block a user