EpicCash/epic_explorer
4
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

Multiple y axis

Browse Source
This commit is contained in:
SuriyaR 2019-08-13 16:09:02 +05:30
parent eadb90e8d5
commit 57b8a76c64
3 changed files with 187 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/view/graph-view/graph-detail/graph-detail.component.html
View File

@ -67,7 +67,7 @@
<h2 class="chart_heading text-uppercase d-inline-block"> <h2 class="chart_heading text-uppercase d-inline-block">
{{chartType | translate}}</h2> {{chartType | translate}}</h2>
<div class="day_filter" *ngIf="this.title=='Target Difficulty'"> <!-- <div class="day_filter" *ngIf="this.title=='Target Difficulty'">
<a href="JavaScript:void(0);" (click)=" <a href="JavaScript:void(0);" (click)="
ChartFromView('', '', comp.difficultyRange,'all'); selectedItem12 = 4 ChartFromView('', '', comp.difficultyRange,'all'); selectedItem12 = 4
" id="4" #item124 [ngClass]="{ active: selectedItem12 == item124.id, txt_primay: true }">All</a> " id="4" #item124 [ngClass]="{ active: selectedItem12 == item124.id, txt_primay: true }">All</a>
@ -93,7 +93,7 @@
<a href="JavaScript:void(0);" (click)=" <a href="JavaScript:void(0);" (click)="
ChartFromView('', '', comp.TdifficultyRange,'randomx'); selectedItem12 = 3 ChartFromView('', '', comp.TdifficultyRange,'randomx'); selectedItem12 = 3
" id="3" #item123 [ngClass]="{ active: selectedItem12 == item123.id, txt_primay: true }">RandomX</a> " id="3" #item123 [ngClass]="{ active: selectedItem12 == item123.id, txt_primay: true }">RandomX</a>
</div> </div> -->
<epic-explorer-plotly *ngIf="hashdata.data" [data]="hashdata.data" [layout]="hashdata.layout"> <epic-explorer-plotly *ngIf="hashdata.data" [data]="hashdata.data" [layout]="hashdata.layout">
</epic-explorer-plotly> </epic-explorer-plotly>
<div class="day_filter" *ngIf="this.title!='Transactions over time'"> <div class="day_filter" *ngIf="this.title!='Transactions over time'">

12
src/app/view/home/graph-list/graph-list.component.html
View File

@ -8,7 +8,7 @@
}}</span> --> }}</span> -->
<div class="chart_show"> <div class="chart_show">
<div class="difficulty_filter day_filter p-0 bg-transparent mt-2"> <!-- <div class="difficulty_filter day_filter p-0 bg-transparent mt-2">
<a href="JavaScript:void(0);" (click)=" <a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', TdifficultyRange,'all'); selectedTarget12 = 4 Difficultyreq('total', '', '', TdifficultyRange,'all'); selectedTarget12 = 4
" id="4" #itemtarget124 " id="4" #itemtarget124
@ -25,7 +25,7 @@
Difficultyreq('total', '', '', TdifficultyRange,'randomx'); selectedTarget12 = 3 Difficultyreq('total', '', '', TdifficultyRange,'randomx'); selectedTarget12 = 3
" id="3" #itemtarget123 " id="3" #itemtarget123
[ngClass]="{ active: selectedTarget12 == itemtarget123.id, txt_primay: true }">RandomX</a> [ngClass]="{ active: selectedTarget12 == itemtarget123.id, txt_primay: true }">RandomX</a>
</div> </div> -->
<epic-explorer-plotly *ngIf="linearTotalGraphData.data" [data]="linearTotalGraphData.data" <epic-explorer-plotly *ngIf="linearTotalGraphData.data" [data]="linearTotalGraphData.data"
[layout]="linearTotalGraphData.layout"> [layout]="linearTotalGraphData.layout">
</epic-explorer-plotly> </epic-explorer-plotly>
@ -43,7 +43,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="day_filter diff_margin"> <div class="day_filter">
<a href="JavaScript:void(0);" (click)=" <a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '1 day',''); selectedTarget = 6; TdifficultyRange = '1 day' Difficultyreq('total', '', '', '1 day',''); selectedTarget = 6; TdifficultyRange = '1 day'
" id="6" #itemtarget6 [ngClass]="{ active: selectedTarget == itemtarget6.id, txt_primay: true }">1 day</a> " id="6" #itemtarget6 [ngClass]="{ active: selectedTarget == itemtarget6.id, txt_primay: true }">1 day</a>
@ -530,7 +530,7 @@
}}</span> --> }}</span> -->
<div class="chart_show"> <div class="chart_show">
<div class="difficulty_filter day_filter p-0 bg-transparent mt-2"> <!-- <div class="difficulty_filter day_filter p-0 bg-transparent mt-2">
<a href="JavaScript:void(0);" (click)=" <a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', difficultyRange,'all'); selectedItem12 = 4 Difficultyreq('target', '', '', difficultyRange,'all'); selectedItem12 = 4
" id="4" #item124 [ngClass]="{ active: selectedItem12 == item124.id, txt_primay: true }">All</a> " id="4" #item124 [ngClass]="{ active: selectedItem12 == item124.id, txt_primay: true }">All</a>
@ -543,7 +543,7 @@
<a href="JavaScript:void(0);" (click)=" <a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', difficultyRange,'randomx'); selectedItem12 = 3 Difficultyreq('target', '', '', difficultyRange,'randomx'); selectedItem12 = 3
" id="3" #item123 [ngClass]="{ active: selectedItem12 == item123.id, txt_primay: true }">RandomX</a> " id="3" #item123 [ngClass]="{ active: selectedItem12 == item123.id, txt_primay: true }">RandomX</a>
</div> </div> -->
<epic-explorer-plotly *ngIf="linearGraphData.data" [data]="linearGraphData.data" [layout]="linearGraphData.layout"> <epic-explorer-plotly *ngIf="linearGraphData.data" [data]="linearGraphData.data" [layout]="linearGraphData.layout">
</epic-explorer-plotly> </epic-explorer-plotly>
<div *ngIf="!linearGraphData.data" class="feedback_div news_desc text-center"> <div *ngIf="!linearGraphData.data" class="feedback_div news_desc text-center">
@ -560,7 +560,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="day_filter diff_margin"> <div class="day_filter">
<a href="JavaScript:void(0);" (click)=" <a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', '1 day',''); selectedItem = 6; difficultyRange = '1 day' Difficultyreq('target', '', '', '1 day',''); selectedItem = 6; difficultyRange = '1 day'
" id="6" #item6 [ngClass]="{ active: selectedItem == item6.id, txt_primay: true }">1 day</a> " id="6" #item6 [ngClass]="{ active: selectedItem == item6.id, txt_primay: true }">1 day</a>

318
src/app/view/home/graph-list/graph-list.component.ts
View File

@ -65,8 +65,8 @@ export class GraphListComponent implements OnInit {
viewchartvar: boolean; viewchartvar: boolean;
constructor(private chartService: ChartService, private http: HttpClient,public translate: TransServiceService, private router: Router, constructor(private chartService: ChartService, private http: HttpClient, public translate: TransServiceService, private router: Router,
) { ) {
if (this.router.url == '/all') { if (this.router.url == '/all') {
this.viewchartvar = true; this.viewchartvar = true;
} else { } else {
@ -126,16 +126,16 @@ export class GraphListComponent implements OnInit {
if (res['status'] == 200) { if (res['status'] == 200) {
let plabel = res.response.label; let plabel = res.response.label;
let pvalues = res.response.value; let pvalues = res.response.value;
this.pg_last = this.pg_last =
pvalues[pvalues.length - 1]; pvalues[pvalues.length - 1];
this.piechartFunc( this.piechartFunc(
plabel, plabel,
pvalues, pvalues,
); );
resolve(); resolve();
} }
}, },
error => {}, error => { },
); );
}); });
} }
@ -159,18 +159,18 @@ export class GraphListComponent implements OnInit {
let Cuckoo = res.response.Cuckoo; let Cuckoo = res.response.Cuckoo;
let ProgPow = res.response.ProgPow; let ProgPow = res.response.ProgPow;
let RandomX = res.response.RandomX; let RandomX = res.response.RandomX;
this.sg_last = this.sg_last =
RandomX[RandomX.length - 1]; RandomX[RandomX.length - 1];
this.stackchartFunc( this.stackchartFunc(
sDate, sDate,
Cuckoo, Cuckoo,
ProgPow, ProgPow,
RandomX RandomX
); );
resolve(); resolve();
} }
}, },
error => {}, error => { },
); );
}); });
} }
@ -224,7 +224,7 @@ export class GraphListComponent implements OnInit {
resolve(); resolve();
} }
}, },
error => {}, error => { },
); );
}); });
} }
@ -266,7 +266,7 @@ export class GraphListComponent implements OnInit {
resolve(); resolve();
} }
}, },
error => {}, error => { },
); );
}); });
} }
@ -304,7 +304,7 @@ export class GraphListComponent implements OnInit {
resolve(); resolve();
} }
}, },
error => {}, error => { },
); );
}); });
} }
@ -327,7 +327,7 @@ export class GraphListComponent implements OnInit {
resolve(); resolve();
} }
}, },
error => {}, error => { },
); );
}); });
} }
@ -351,7 +351,7 @@ export class GraphListComponent implements OnInit {
resolve(); resolve();
} }
}, },
error => {}, error => { },
); );
}); });
} }
@ -374,7 +374,7 @@ export class GraphListComponent implements OnInit {
resolve(); resolve();
} }
}, },
error => {}, error => { },
); );
}); });
} }
@ -400,49 +400,51 @@ export class GraphListComponent implements OnInit {
res => { res => {
if (res['status'] == 200) { if (res['status'] == 200) {
let DifficultychartDate = res.response.Date; let DifficultychartDate = res.response.Date;
let DifficultyCuckatoo = res.response.DifficultyCuckatoo; let DifficultyCuckatoo = res.response.DifficultyCuckatoo;
let DifficultyRandomx = res.response.DifficultyRandomx; let DifficultyRandomx = res.response.DifficultyRandomx;
let DifficultyProgpow = res.response.DifficultyProgpow; let DifficultyProgpow = res.response.DifficultyProgpow;
let data; let data;
switch(this.Type) { switch (this.Type) {
case 'all': case 'all':
data = data =
[ [
{ {
x: DifficultychartDate, x: DifficultychartDate,
y: DifficultyCuckatoo, y: DifficultyCuckatoo,
text: DifficultychartDate, text: DifficultychartDate,
mode: 'lines+markers', // mode: 'lines+markers',
type: 'scatter', type: 'scatter',
name: '', name: '',
line: { color: '#ac3333' }, // line: { color: '#ac3333' },
hovertemplate: '%{text}<br> Cuckoo : %{y:,}', hovertemplate: '%{text}<br> Cuckoo : %{y:,}',
}, },
{ {
x: DifficultychartDate, x: DifficultychartDate,
y: DifficultyProgpow, y: DifficultyProgpow,
text: DifficultychartDate, text: DifficultychartDate,
mode: 'lines+markers', // mode: 'lines+markers',
type: 'scatter', type: 'scatter',
name: '', name: '',
line: { color: '#ac3333' }, yaxis: 'y2',
// line: { color: '#ac3333' },
hovertemplate: '%{text}<br> Progpow : %{y:,}', hovertemplate: '%{text}<br> Progpow : %{y:,}',
}, },
{ {
x: DifficultychartDate, x: DifficultychartDate,
y: DifficultyRandomx, y: DifficultyRandomx,
text: DifficultychartDate, text: DifficultychartDate,
mode: 'lines+markers', // mode: 'lines+markers',
type: 'scatter', type: 'scatter',
name: '', name: '',
line: { color: '#ac3333' }, yaxis: 'y3',
// line: { color: '#ac3333' },
hovertemplate: '%{text}<br> RandomX : %{y:,}', hovertemplate: '%{text}<br> RandomX : %{y:,}',
}, },
]; ];
break; break;
default: default:
let yvalue = this.Type == 'cuckatoo' ? DifficultyCuckatoo : this.Type == 'progpow' ? DifficultyProgpow : this.Type == 'randomx' ? DifficultyRandomx : [] let yvalue = this.Type == 'cuckatoo' ? DifficultyCuckatoo : this.Type == 'progpow' ? DifficultyProgpow : this.Type == 'randomx' ? DifficultyRandomx : []
data = data =
[ [
{ {
x: DifficultychartDate, x: DifficultychartDate,
@ -454,38 +456,38 @@ export class GraphListComponent implements OnInit {
line: { color: '#ac3333' }, line: { color: '#ac3333' },
hovertemplate: '%{text}<br> Difficulty : %{y:,}', hovertemplate: '%{text}<br> Difficulty : %{y:,}',
}]; }];
break; break;
} }
let range = [res.response.Minrange, res.response.Maxrange] let range = [res.response.Minrange, res.response.Maxrange]
let tickformat = res.response.tickFormat; let tickformat = res.response.tickFormat;
// this.lg_last = // this.lg_last =
// TargetDifficulty[TargetDifficulty.length - 1]; // TargetDifficulty[TargetDifficulty.length - 1];
switch(difftype){ switch (difftype) {
case 'total': case 'total':
this.totaldifficultyChartFunc( this.totaldifficultyChartFunc(
DifficultychartDate, DifficultychartDate,
data, data,
this.Type, this.Type,
range, range,
tickformat tickformat
); );
break; break;
case 'target': case 'target':
this.difficultyChartFunc( this.difficultyChartFunc(
DifficultychartDate, DifficultychartDate,
data, data,
this.Type, this.Type,
range, range,
tickformat tickformat
); );
break; break;
} }
resolve(); resolve();
} }
}, },
error => {}, error => { },
); );
}); });
} }
@ -507,13 +509,13 @@ export class GraphListComponent implements OnInit {
if (res['status'] == 200) { if (res['status'] == 200) {
let DifficultychartDate = res.response.Date; let DifficultychartDate = res.response.Date;
let BlocksChartDate = res.response.blockDate; let BlocksChartDate = res.response.blockDate;
let Blockval = res.response.Blocks; let Blockval = res.response.Blocks;
this.brg_last = Blockval[Blockval.length - 1]; this.brg_last = Blockval[Blockval.length - 1];
this.totalBlocksFunc(BlocksChartDate, Blockval); this.totalBlocksFunc(BlocksChartDate, Blockval);
resolve(); resolve();
} }
}, },
error => {}, error => { },
); );
}); });
} }
@ -521,23 +523,42 @@ export class GraphListComponent implements OnInit {
difficultyChartFunc(DifficultychartDate, data, Type, range, tickformat) { difficultyChartFunc(DifficultychartDate, data, Type, range, tickformat) {
// console.log('range rangerangerange',range); // console.log('range rangerangerange',range);
this.linearGraphData = { this.linearGraphData = {
data: data , data: data,
layout: { layout: {
hovermode: 'closest', // hovermode: 'closest',
height: 250, height: 250,
autosize: true, autosize: true,
showlegend: false, showlegend: false,
xaxis: { xaxis: {
tickangle: -45, tickangle: -45,
tickformat: tickformat, tickformat: tickformat,
showgrid: true, fixedrange: true,
fixedrange: true // showgrid: true
}, },
yaxis: { yaxis: {
title: 'Diff', title: 'Cuckoo',
showgrid: true,
fixedrange: true, fixedrange: true,
range: range // showgrid: true,
// range: range
},
yaxis2: {
title: 'Progpow',
fixedrange: true,
// showgrid: true,
// range: range,
overlaying: 'y',
side: 'left',
position: 0.25
},
yaxis3: {
title: 'RandomX',
fixedrange: true,
// showgrid: true,
// range: range,
anchor: 'x',
overlaying: 'y',
side: 'right'
}, },
margin: { margin: {
l: 50, l: 50,
@ -633,7 +654,7 @@ export class GraphListComponent implements OnInit {
piechartFunc(plabel, pvalues) { piechartFunc(plabel, pvalues) {
this.pieGraphData = { this.pieGraphData = {
data: [ data: [
{ {
values: pvalues, values: pvalues,
@ -648,7 +669,7 @@ export class GraphListComponent implements OnInit {
height: 250, height: 250,
autosize: false, autosize: false,
showlegend: false, showlegend: false,
xaxis: { xaxis: {
tickangle: -45, tickangle: -45,
tickformat: '%m-%d', tickformat: '%m-%d',
showgrid: true, showgrid: true,
@ -822,7 +843,7 @@ export class GraphListComponent implements OnInit {
], ],
layout: { layout: {
hovermode: 'closest', hovermode: 'closest',
// width: 350, // width: 350,
height: 250, height: 250,
autosize: true, autosize: true,
xaxis: { xaxis: {
@ -849,7 +870,7 @@ export class GraphListComponent implements OnInit {
}; };
} }
blockminedFunc(mDate,ProgPow, Cuckoo, RandomX, ProgPowper, Cuckooper, RandomXper) { blockminedFunc(mDate, ProgPow, Cuckoo, RandomX, ProgPowper, Cuckooper, RandomXper) {
this.doubleareaGraphData = { this.doubleareaGraphData = {
data: [ data: [
{ {
@ -932,64 +953,64 @@ export class GraphListComponent implements OnInit {
transactionheatmapFunc(tDate, tHour, tInput, hovertext) { transactionheatmapFunc(tDate, tHour, tInput, hovertext) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.heatMapGrowthData = { this.heatMapGrowthData = {
data: [ data: [
{ {
x: tHour, x: tHour,
y: tDate, y: tDate,
z: tInput, z: tInput,
name: '', name: '',
text: hovertext, text: hovertext,
hovertemplate: hovertext + ': %{z:,} ', hovertemplate: hovertext + ': %{z:,} ',
colorscale: 'Rainbow', colorscale: 'Rainbow',
type: 'heatmap', type: 'heatmap',
visible: true, visible: true,
colorbar: { thickness: 3 }, colorbar: { thickness: 3 },
xgap: 1, xgap: 1,
ygap: 1, ygap: 1,
}, },
], ],
layout: { layout: {
hovermode: 'closest', hovermode: 'closest',
height: 250, height: 250,
//width: 365, //width: 365,
autosize: true,
annotations: [],
font: {
size: 8.5,
},
xaxis: {
ticks: '',
tickangle: screen.width < 767 ? '-90' : 360,
side: 'top',
autotick: false,
showgrid: true,
rangemode: 'nonnegative',
fixedrange: true,
autosize: true, autosize: true,
annotations: [],
font: {
size: 8.5,
},
xaxis: {
ticks: '',
tickangle: screen.width < 767 ? '-90' : 360,
side: 'top',
autotick: false,
showgrid: true,
rangemode: 'nonnegative',
fixedrange: true,
autosize: true,
},
yaxis: {
ticks: '',
ticksuffix: ' ',
tickformat: '%m-%d',
autosize: true,
showgrid: true,
autotick: false,
rangemode: 'nonnegative',
fixedrange: true,
},
margin: {
l: 30,
r: 0,
b: 50,
t: 50,
},
showlegend: false,
}, },
yaxis: { options: null,
ticks: '', };
ticksuffix: ' ', resolve();
tickformat: '%m-%d', });
autosize: true,
showgrid: true,
autotick: false,
rangemode: 'nonnegative',
fixedrange: true,
},
margin: {
l: 30,
r: 0,
b: 50,
t: 50,
},
showlegend: false,
},
options: null,
};
resolve();
});
} }
transactionlinechartFunc(Tdate, Ttotalinput, Ttotalkernal, Ttotaloutput) { transactionlinechartFunc(Tdate, Ttotalinput, Ttotalkernal, Ttotaloutput) {
this.feeGraphData = { this.feeGraphData = {
@ -1027,7 +1048,7 @@ export class GraphListComponent implements OnInit {
], ],
layout: { layout: {
autosize: true, autosize: true,
// width: 350, // width: 350,
height: 250, height: 250,
xaxis: { xaxis: {
showgrid: true, showgrid: true,
@ -1109,7 +1130,7 @@ export class GraphListComponent implements OnInit {
this.linearTotalGraphData = { this.linearTotalGraphData = {
data: data, data: data,
layout: { layout: {
hovermode: 'closest', // hovermode: 'closest',
height: 250, height: 250,
autosize: true, autosize: true,
showlegend: false, showlegend: false,
@ -1117,13 +1138,32 @@ export class GraphListComponent implements OnInit {
tickangle: -45, tickangle: -45,
tickformat: tickformat, tickformat: tickformat,
fixedrange: true, fixedrange: true,
showgrid: true // showgrid: true
}, },
yaxis: { yaxis: {
title: 'Diff', title: 'Cuckoo',
fixedrange: true, fixedrange: true,
showgrid: true, // showgrid: true,
range: range // range: range
},
yaxis2: {
title: 'Progpow',
fixedrange: true,
// showgrid: true,
// range: range,
overlaying: 'y',
side: 'left',
position: 0.25
},
yaxis3: {
title: 'RandomX',
fixedrange: true,
// showgrid: true,
// range: range,
anchor: 'x',
overlaying: 'y',
side: 'right'
}, },
margin: { margin: {
l: 50, l: 50,