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>

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

@ -65,7 +65,7 @@ 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;
@ -135,7 +135,7 @@ export class GraphListComponent implements OnInit {
resolve(); resolve();
} }
}, },
error => {}, error => { },
); );
}); });
} }
@ -170,7 +170,7 @@ export class GraphListComponent implements OnInit {
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 => { },
); );
}); });
} }
@ -404,7 +404,7 @@ export class GraphListComponent implements OnInit {
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 =
[ [
@ -412,30 +412,32 @@ export class GraphListComponent implements OnInit {
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:,}',
}, },
]; ];
@ -462,7 +464,7 @@ export class GraphListComponent implements OnInit {
// 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,
@ -485,7 +487,7 @@ export class GraphListComponent implements OnInit {
resolve(); resolve();
} }
}, },
error => {}, error => { },
); );
}); });
} }
@ -513,7 +515,7 @@ export class GraphListComponent implements OnInit {
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,
@ -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: [
{ {
@ -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,