This commit is contained in:
SuriyaR 2019-07-30 17:16:39 +05:30
commit 67b29c4683
7 changed files with 296 additions and 56 deletions

View File

@ -1123,7 +1123,7 @@ export class BlockchainBlockController {
RandomX = []; RandomX = [];
stackNBlockQuery.forEach(e => { stackNBlockQuery.forEach(e => {
date.push(moment(e.date).format('YYYY-MM-DD')); date.push(moment(e.date).format('YYYY-MM-DD'));
Blocks.push({Cuckaroo: parseInt(e.cuckaroo), Cuckatoo : parseInt(e.cuckatoo), ProgPow : parseInt(e.progpow), RandomX : parseInt(e.randomx)}) // Blocks.push({Cuckaroo: parseInt(e.cuckaroo), Cuckatoo : parseInt(e.cuckatoo), ProgPow : parseInt(e.progpow), RandomX : parseInt(e.randomx)})
Cuckaroo.push(parseInt(e.cuckaroo)); Cuckaroo.push(parseInt(e.cuckaroo));
Cuckatoo.push(parseInt(e.cuckatoo)); Cuckatoo.push(parseInt(e.cuckatoo));
ProgPow.push(parseInt(e.progpow)); ProgPow.push(parseInt(e.progpow));
@ -1132,10 +1132,13 @@ export class BlockchainBlockController {
response.status(200).json({ response.status(200).json({
status: 200, status: 200,
timestamp: Date.now(), timestamp: Date.now(),
message: 'Total Difficulty and Blocks Data fetched Successfully', message: 'Stack Data fetched Successfully',
response: { response: {
Date: date, Date: date,
Blocks Cuckaroo:Cuckaroo,
Cuckatoo:Cuckatoo,
ProgPow:ProgPow,
RandomX:RandomX
}, },
}); });
} catch (error) { } catch (error) {
@ -1197,26 +1200,20 @@ export class BlockchainBlockController {
.catch(err_msg => { .catch(err_msg => {
next(err_msg); next(err_msg);
}); });
// let date = [], let label = [],
// Blocks = [], value = [];
// Cuckaroo = [],
// Cuckatoo = [], stackNBlockQuery.forEach(e => {
// ProgPow = [], label.push("Cuckaroo","Cuckatoo","ProgPow","RandomX");
// RandomX = []; value.push(parseInt(e.cuckaroo),parseInt(e.cuckatoo),parseInt(e.progpow),parseInt(e.randomx));
// stackNBlockQuery.forEach(e => { });
// date.push(moment(e.date).format('YYYY-MM-DD'));
// Blocks.push({Cuckaroo: parseInt(e.cuckaroo), Cuckatoo : parseInt(e.cuckatoo), ProgPow : parseInt(e.progpow), RandomX : parseInt(e.randomx)})
// Cuckaroo.push(parseInt(e.cuckaroo));
// Cuckatoo.push(parseInt(e.cuckatoo));
// ProgPow.push(parseInt(e.progpow));
// RandomX.push(parseInt(e.randomx));
// });
response.status(200).json({ response.status(200).json({
status: 200, status: 200,
timestamp: Date.now(), timestamp: Date.now(),
message: 'Piechart for block is fetched Successfully', message: 'Piechart for block is fetched Successfully',
response: { response: {
...stackNBlockQuery label,
value
}, },
}); });
} catch (error) { } catch (error) {

View File

@ -69,8 +69,8 @@
</div> </div>
<div class="d-inline-block align-middle ml-2"> <div class="d-inline-block align-middle ml-2">
<span class="">{{'home.DIFFICULTY' | translate}}</span> <span class="">{{'home.DIFFICULTY' | translate}}</span>
<h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.TotalDifficulty }}</h6>
</div> </div>
<h6 class="view_txt">Cuckaroo : {{ hashdata.BlockchainBlockFetchQuery.TotalDifficultyCuckaroo }} | Cuckatoo : {{ hashdata.BlockchainBlockFetchQuery.TotalDifficultyCuckatoo }} <br/> Progpow : {{ hashdata.BlockchainBlockFetchQuery.TotalDifficultyProgpow }} | Randomx : {{ hashdata.BlockchainBlockFetchQuery.TotalDifficultyRandomx }}</h6>
</div> </div>
<div class="col-sm-6 col-md-4 mt-4 pt-2"> <div class="col-sm-6 col-md-4 mt-4 pt-2">
<div class="d-inline-block align-middle"> <div class="d-inline-block align-middle">

View File

@ -66,6 +66,8 @@
<li class="mb-1" *ngIf="this.title!='HashRate Growth Chart'"><a routerLink="/chart/hashrate-growth-chart">{{'home.HASHRATE_GROWTH_CHART' | translate}}</a></li> <li class="mb-1" *ngIf="this.title!='HashRate Growth Chart'"><a routerLink="/chart/hashrate-growth-chart">{{'home.HASHRATE_GROWTH_CHART' | translate}}</a></li>
<li class="mb-1" *ngIf="this.title!='Transactions by time'"><a routerLink="/chart/block-interval">{{'home.BLOCK_INTERVAL' | translate}}</a></li> <li class="mb-1" *ngIf="this.title!='Transactions by time'"><a routerLink="/chart/block-interval">{{'home.BLOCK_INTERVAL' | translate}}</a></li>
<li class="mb-1" *ngIf="this.title!='Transactions Vs Date'"><a routerLink="/chart/transactions-vs-date">{{'home.TRANSACTIONS_VS_DATE' | translate}}</a></li> <li class="mb-1" *ngIf="this.title!='Transactions Vs Date'"><a routerLink="/chart/transactions-vs-date">{{'home.TRANSACTIONS_VS_DATE' | translate}}</a></li>
<li class="mb-1" *ngIf="this.title!='Stackbar Chart'"><a routerLink="/chart/stackchart">Stackbar Chart</a></li>
<li class="mb-1" *ngIf="this.title!='Pie Chart'"><a routerLink="/chart/piechart">Pie Chart</a></li>
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -145,6 +145,26 @@ export class GraphDetailComponent implements OnInit {
); );
}); });
break; break;
case 'stackchart':
this.comp.stackchartreq().then(res => {
this.hashdata = this.comp.stackGraphData;
this.hashdata.layout.height = 500;
this.title = 'Stackbar Chart';
this.titleService.setTitle(
this.route.snapshot.data.title + ' - ' + this.title,
);
});
break;
case 'piechart':
this.comp.piechartreq().then(res => {
this.hashdata = this.comp.pieGraphData;
this.hashdata.layout.height = 500;
this.title = 'Pie Chart';
this.titleService.setTitle(
this.route.snapshot.data.title + ' - ' + this.title,
);
});
break;
case 'transactions-vs-date': case 'transactions-vs-date':
this.comp.Transactionlinechartreq().then(res => { this.comp.Transactionlinechartreq().then(res => {
this.hashdata = this.comp.feeGraphData; this.hashdata = this.comp.feeGraphData;
@ -235,6 +255,24 @@ export class GraphDetailComponent implements OnInit {
this.title = 'Block Interval'; this.title = 'Block Interval';
}); });
break; break;
case 'stackchart':
this.comp.stackchartreq(p1, p2, p3).then(res => {
this.hashdata = this.comp.stackGraphData;
this.hashdata.layout.height = 500;
// this.hashdata.layout.width =
// window.innerWidth - window.innerWidth / 2.8;
this.title = 'Stackbar Chart';
});
break;
case 'piechart':
this.comp.piechartreq(p1, p2, p3).then(res => {
this.hashdata = this.comp.pieGraphData;
this.hashdata.layout.height = 500;
// this.hashdata.layout.width =
// window.innerWidth - window.innerWidth / 2.8;
this.title = 'Pie Chart';
});
break;
case 'transactions-vs-date': case 'transactions-vs-date':
this.comp.Transactionlinechartreq(p1, p2, p3).then(res => { this.comp.Transactionlinechartreq(p1, p2, p3).then(res => {
this.hashdata = this.comp.feeGraphData; this.hashdata = this.comp.feeGraphData;

View File

@ -395,9 +395,9 @@
<div [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}"> <div [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
<div class="box_shadow"> <div class="box_shadow">
<div class="blocks"> <div class="blocks">
<h2 class="chart_heading d-inline-block">{{'home.TRANSACTIONS_VS_DATE' | translate}}</h2> <h2 class="chart_heading d-inline-block">Stackbar Chart</h2>
<span class="txn_count" *ngIf="this.tg_last">{{ <span class="txn_count" *ngIf="this.sg_last">{{
this.tg_last | number this.sg_last | number
}}</span> }}</span>
<div class="chart_show"> <div class="chart_show">
@ -440,4 +440,52 @@
</div> </div>
</div> </div>
<div [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
<div class="box_shadow">
<div class="blocks">
<h2 class="chart_heading d-inline-block">Pie Chart</h2>
<span class="txn_count" *ngIf="this.pg_last">{{
this.pg_last | number
}}</span>
<div class="chart_show">
<epic-explorer-plotly *ngIf="pieGraphData.data" [data]="pieGraphData.data" [layout]="pieGraphData.layout">
</epic-explorer-plotly>
<div *ngIf="!pieGraphData.data" class="feedback_div news_desc text-center">
<div class="graph_img background_loading mx-auto mb-3"></div>
<div class=" p-3 bg-white">
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
<p class="mb-2 background_loading para_load"></p>
</div>
</div>
</div>
</div>
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="piechartreq('', '', '1 week'); selectedItem10 = 1" id="1"
#item1 [ngClass]="{ active: selectedItem11 == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
piechartreq('', '', '15 days'); selectedItem11 = 2
" id="2" #item2 [ngClass]="{ active: selectedItem11 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
piechartreq('', '', '30 days'); selectedItem10 = 3
" id="3" #item3 [ngClass]="{ active: selectedItem11 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
piechartreq('', '', '60 days'); selectedItem10 = 4
" id="4" #item4 [ngClass]="{ active: selectedItem11 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
<a href="JavaScript:void(0);" (click)="
piechartreq('', '', '3 months'); selectedItem10 = 5
" id="5" #item5 [ngClass]="{ active: selectedItem11 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
</div>
<div class="explore_all text-right">
<a routerLink="/chart/piechart"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
class="fa fa-long-arrow-right"></i></span></a>
</div>
</div>
</div>
</div> </div>

View File

@ -22,6 +22,7 @@ export class GraphListComponent implements OnInit {
public heatMapGrowthData: any = []; public heatMapGrowthData: any = [];
public transcationGraphData: any = []; public transcationGraphData: any = [];
public stackGraphData: any = []; public stackGraphData: any = [];
public pieGraphData: any = [];
public lg_last: any = ''; public lg_last: any = '';
public ag_last: any = ''; public ag_last: any = '';
@ -34,6 +35,7 @@ export class GraphListComponent implements OnInit {
public tg_last: any = ''; public tg_last: any = '';
public hg_last: any = ''; public hg_last: any = '';
public sg_last: any = ''; public sg_last: any = '';
public pg_last: any = '';
public selectedItem: Number = 3; public selectedItem: Number = 3;
public selectedItem3: Number = 3; public selectedItem3: Number = 3;
@ -44,6 +46,7 @@ export class GraphListComponent implements OnInit {
public selectedItem8: Number = 1; public selectedItem8: Number = 1;
public selectedItem9: Number = 3; public selectedItem9: Number = 3;
public selectedItem10: Number = 3; public selectedItem10: Number = 3;
public selectedItem11: Number = 3;
public tInput: any; public tInput: any;
public tOutput: any; public tOutput: any;
@ -81,6 +84,40 @@ export class GraphListComponent implements OnInit {
/* Stack chart fetching */ /* Stack chart fetching */
this.stackchartreq(); this.stackchartreq();
/* Pie chart fetching */
this.piechartreq();
}
piechartreq(
fromDate = '',
ToDate = '',
interval = '',
) {
return new Promise((resolve, reject) => {
let params = new HttpParams();
params = params.append('FromDate', fromDate);
params = params.append('ToDate', ToDate);
params = params.append('Interval', interval);
this.chartService
.apiGetRequest(params, '/blockchain_block/blockpiechart')
.subscribe(
res => {
if (res['status'] == 200) {
let plabel = res.response.label;
let pvalues = res.response.value;
this.pg_last =
pvalues[pvalues.length - 1];
this.piechartFunc(
plabel,
pvalues,
);
resolve();
}
},
error => {},
);
});
} }
stackchartreq( stackchartreq(
@ -98,13 +135,19 @@ export class GraphListComponent implements OnInit {
.subscribe( .subscribe(
res => { res => {
if (res['status'] == 200) { if (res['status'] == 200) {
let DifficultychartDate = res.response.Date; let sDate = res.response.Date;
let Difficultychartval = res.response.TotalDifficulty; let Cuckaroo = res.response.Cuckaroo;
this.lg_last = let Cuckatoo = res.response.Cuckatoo;
Difficultychartval[Difficultychartval.length - 1]; let ProgPow = res.response.ProgPow;
let RandomX = res.response.RandomX;
this.sg_last =
RandomX[RandomX.length - 1];
this.stackchartFunc( this.stackchartFunc(
DifficultychartDate, sDate,
Difficultychartval, Cuckaroo,
Cuckatoo,
ProgPow,
RandomX
); );
resolve(); resolve();
} }
@ -223,21 +266,25 @@ export class GraphListComponent implements OnInit {
if (res['status'] == 200) { if (res['status'] == 200) {
let mDate = res.response.date; let mDate = res.response.date;
let ProgPow = res.response.ProgPow; let ProgPow = res.response.ProgPow;
let Cuckoo = res.response.Cuckoo; let Cuckaroo = res.response.Cuckaroo;
let Cuckatoo = res.response.Cuckatoo;
let RandomX = res.response.RandomX; let RandomX = res.response.RandomX;
let ProgPowper = res.response.ProgPowper; let ProgPowper = res.response.ProgPowper;
let Cuckooper = res.response.Cuckooper; let Cuckarooper = res.response.Cuckarooper;
let Cuckatooper = res.response.Cuckatooper;
let RandomXper = res.response.RandomXper; let RandomXper = res.response.RandomXper;
this.dg_last = RandomXper[RandomXper.length - 1]; this.dg_last = RandomXper[RandomXper.length - 1];
this.blockminedFunc( this.blockminedFunc(
mDate, mDate,
ProgPow, ProgPow,
Cuckoo, Cuckaroo,
Cuckatoo,
RandomX, RandomX,
ProgPowper, ProgPowper,
Cuckooper, Cuckarooper,
Cuckatooper,
RandomXper, RandomXper,
); );
resolve(); resolve();
@ -337,12 +384,18 @@ export class GraphListComponent implements OnInit {
if (res['status'] == 200) { if (res['status'] == 200) {
let DifficultychartDate = res.response.Date; let DifficultychartDate = res.response.Date;
if (fordifficult) { if (fordifficult) {
let Difficultychartval = res.response.TotalDifficulty; let DifficultyCuckaroo = res.response.DifficultyCuckaroo;
let DifficultyCuckatoo = res.response.DifficultyCuckatoo;
let DifficultyProgpow = res.response.DifficultyProgpow;
let DifficultyRandomx = res.response.DifficultyRandomx;
this.lg_last = this.lg_last =
Difficultychartval[Difficultychartval.length - 1]; DifficultyCuckaroo[DifficultyCuckaroo.length - 1];
this.difficultyChartFunc( this.difficultyChartFunc(
DifficultychartDate, DifficultychartDate,
Difficultychartval, DifficultyCuckaroo,
DifficultyCuckatoo,
DifficultyProgpow,
DifficultyRandomx
); );
} }
if (forblocks) { if (forblocks) {
@ -358,18 +411,48 @@ export class GraphListComponent implements OnInit {
}); });
} }
difficultyChartFunc(DifficultychartDate, Difficultychartval) { difficultyChartFunc(DifficultychartDate, DifficultyCuckaroo, DifficultyCuckatoo, DifficultyProgpow, DifficultyRandomx) {
this.linearGraphData = { this.linearGraphData = {
data: [ data: [
{ {
x: DifficultychartDate, x: DifficultychartDate,
y: Difficultychartval, y: DifficultyCuckaroo,
text: Difficultychartval, text: DifficultyCuckaroo,
mode: 'lines+markers', mode: 'lines+markers',
type: 'scatter', type: 'scatter',
name: '', name: '',
line: { color: '#ac3333' }, line: { color: '#ac3333' },
hovertemplate: '%{x}<br> Total Difficulty : %{text:,}', hovertemplate: '%{x}<br> Cuckaroo : %{text:,}',
},
{
x: DifficultychartDate,
y: DifficultyCuckatoo,
text: DifficultyCuckatoo,
mode: 'lines+markers',
type: 'scatter',
name: '',
line: { color: '#A876C6' },
hovertemplate: '%{x}<br> Cuckatoo : %{text:,}',
},
{
x: DifficultychartDate,
y: DifficultyProgpow,
text: DifficultyProgpow,
mode: 'lines+markers',
type: 'scatter',
name: '',
line: { color: '#54CFDC' },
hovertemplate: '%{x}<br> Progpow : %{text:,}',
},
{
x: DifficultychartDate,
y: DifficultyRandomx,
text: DifficultyRandomx,
mode: 'lines+markers',
type: 'scatter',
name: '',
line: { color: '#77817C' },
hovertemplate: '%{x}<br> Randomx : %{text:,}',
}, },
], ],
layout: { layout: {
@ -394,37 +477,97 @@ export class GraphListComponent implements OnInit {
}; };
} }
stackchartFunc(DifficultychartDate, Blockval) { stackchartFunc(sDate, Cuckaroo, Cuckatoo, ProgPow, RandomX) {
this.stackGraphData = { this.stackGraphData = {
data: [ data: [
{ {
x: ['giraffes', 'orangutans', 'monkeys'], x: sDate,
y: [20, 14, 23], y: Cuckaroo,
name: 'SF Zoo', name: '',
type: 'bar', type: 'bar',
text: Cuckaroo,
hovertemplate: '%{x}<br> Cuckatoo : %{text:,}',
marker: { marker: {
color: Blockval, color: '#77817C',
colorscale: 'Viridis',
}, },
}, },
{ {
x: ['giraffes', 'orangutans', 'monkeys'], x: sDate,
y: [12, 18, 29], y: Cuckatoo,
name: 'LA Zoo', name: '',
type: 'bar', type: 'bar',
text: Cuckatoo,
hovertemplate: '%{x}<br> Cuckaroo : %{text:,}',
marker: { marker: {
color: Blockval, color: '#54CFDC',
colorscale: 'Viridis', },
},
{
x: sDate,
y: ProgPow,
name: '',
type: 'bar',
text: ProgPow,
hovertemplate: '%{x}<br> ProgPow : %{text:,}',
marker: {
color: '#825f5f',
},
},
{
x: sDate,
y: RandomX,
name: '',
type: 'bar',
text: RandomX,
hovertemplate: '%{x}<br> RandomX : %{text:,}',
marker: {
color: '#a9df5f',
}, },
} }
], ],
layout: { layout: {
hovermode: 'closest', hovermode: 'closest',
width: 350,
height: 250,
autosize: true,
showlegend: false,
barmode: 'relative',
xaxis: {
tickangle: -45,
tickformat: '%m-%d',
},
yaxis: {
title: 'Block',
},
margin: {
l: 50,
r: 50,
b: 50,
t: 50,
},
},
options: null,
};
}
piechartFunc(plabel, pvalues) {
this.pieGraphData = {
data: [
{
values: pvalues,
labels: plabel,
type: 'pie'
}
],
layout: {
hovermode: 'closest',
width: 350,
height: 250, height: 250,
autosize: true, autosize: true,
showlegend: false, showlegend: false,
barmode: 'stack',
xaxis: { xaxis: {
tickangle: -45, tickangle: -45,
tickformat: '%m-%d', tickformat: '%m-%d',
@ -598,14 +741,14 @@ export class GraphListComponent implements OnInit {
}; };
} }
blockminedFunc(mDate,ProgPow, Cuckoo, RandomX, ProgPowper, Cuckooper, RandomXper) { blockminedFunc(mDate,ProgPow, Cuckaroo, Cuckatoo, RandomX, ProgPowper, Cuckarooper, Cuckatooper, RandomXper) {
this.doubleareaGraphData = { this.doubleareaGraphData = {
data: [ data: [
{ {
x: mDate, x: mDate,
y: Cuckooper, y: Cuckarooper,
text: Cuckoo, text: Cuckaroo,
hovertemplate: 'Cuckoo :%{y} % ( %{text:,} )', hovertemplate: 'Cuckaroo :%{y} % ( %{text:,} )',
name: '', name: '',
fill: 'tozeroy', fill: 'tozeroy',
type: 'line', type: 'line',
@ -613,6 +756,18 @@ export class GraphListComponent implements OnInit {
color: '#f5ca19', color: '#f5ca19',
}, },
}, },
{
x: mDate,
y: Cuckatooper,
text: Cuckatoo,
hovertemplate: 'Cuckatoo :%{y} % ( %{text:,} )',
name: '',
fill: 'tozeroy',
type: 'line',
line: {
color: '#f5c1a9',
},
},
{ {
x: mDate, x: mDate,
y: RandomXper, y: RandomXper,

View File

@ -49,7 +49,7 @@
<div class="block_div"><h6 >Age</h6><span class="blck_value">{{ hashvalue.age }}</span></div> <div class="block_div"><h6 >Age</h6><span class="blck_value">{{ hashvalue.age }}</span></div>
</div> </div>
<div class="col-6 col-md-3 tble_col"> <div class="col-6 col-md-3 tble_col">
<div class="block_div"><h6>Difficulty</h6><span class="blck_value">{{ hashvalue.target_difficulty | number }}</span></div> <div class="block_div"><h6>Difficulty</h6><span class="blck_value" title="Cuckaroo : {{ hashvalue.target_difficulty_cuckaroo | number }}, Cuckatoo : {{ hashvalue.target_difficulty_cuckatoo | number }}, Progpow : {{ hashvalue.target_difficulty_progpow | number }}, Randomx : {{ hashvalue.target_difficulty_randomx | number }}">{{ hashvalue.target_difficulty_cuckaroo | number }}, {{ hashvalue.target_difficulty_cuckatoo | number }}, {{ hashvalue.target_difficulty_progpow | number }}, {{ hashvalue.target_difficulty_randomx | number }}</span></div>
</div> </div>
<div class="col-6 col-sm-6 col-md-3 tble_col"> <div class="col-6 col-sm-6 col-md-3 tble_col">
<div class="block_div"><h6 class="mb-0">Pow Algo</h6><span class="blck_value">{{ hashvalue.powalgo }}</span></div> <div class="block_div"><h6 class="mb-0">Pow Algo</h6><span class="blck_value">{{ hashvalue.powalgo }}</span></div>