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">
{{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)="
ChartFromView('', '', comp.difficultyRange,'all'); selectedItem12 = 4
" id="4" #item124 [ngClass]="{ active: selectedItem12 == item124.id, txt_primay: true }">All</a>
@ -93,7 +93,7 @@
<a href="JavaScript:void(0);" (click)="
ChartFromView('', '', comp.TdifficultyRange,'randomx'); selectedItem12 = 3
" 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>
<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> -->
<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)="
Difficultyreq('total', '', '', TdifficultyRange,'all'); selectedTarget12 = 4
" id="4" #itemtarget124
@ -25,7 +25,7 @@
Difficultyreq('total', '', '', TdifficultyRange,'randomx'); selectedTarget12 = 3
" id="3" #itemtarget123
[ngClass]="{ active: selectedTarget12 == itemtarget123.id, txt_primay: true }">RandomX</a>
</div>
</div> -->
<epic-explorer-plotly *ngIf="linearTotalGraphData.data" [data]="linearTotalGraphData.data"
[layout]="linearTotalGraphData.layout">
</epic-explorer-plotly>
@ -43,7 +43,7 @@
</div>
</div>
</div>
<div class="day_filter diff_margin">
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '1 day',''); selectedTarget = 6; TdifficultyRange = '1 day'
" id="6" #itemtarget6 [ngClass]="{ active: selectedTarget == itemtarget6.id, txt_primay: true }">1 day</a>
@ -530,7 +530,7 @@
}}</span> -->
<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)="
Difficultyreq('target', '', '', difficultyRange,'all'); selectedItem12 = 4
" id="4" #item124 [ngClass]="{ active: selectedItem12 == item124.id, txt_primay: true }">All</a>
@ -543,7 +543,7 @@
<a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', difficultyRange,'randomx'); selectedItem12 = 3
" 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>
<div *ngIf="!linearGraphData.data" class="feedback_div news_desc text-center">
@ -560,7 +560,7 @@
</div>
</div>
</div>
<div class="day_filter diff_margin">
<div class="day_filter">
<a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', '1 day',''); selectedItem = 6; difficultyRange = '1 day'
" 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;
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') {
this.viewchartvar = true;
@ -135,7 +135,7 @@ export class GraphListComponent implements OnInit {
resolve();
}
},
error => {},
error => { },
);
});
}
@ -170,7 +170,7 @@ export class GraphListComponent implements OnInit {
resolve();
}
},
error => {},
error => { },
);
});
}
@ -224,7 +224,7 @@ export class GraphListComponent implements OnInit {
resolve();
}
},
error => {},
error => { },
);
});
}
@ -266,7 +266,7 @@ export class GraphListComponent implements OnInit {
resolve();
}
},
error => {},
error => { },
);
});
}
@ -304,7 +304,7 @@ export class GraphListComponent implements OnInit {
resolve();
}
},
error => {},
error => { },
);
});
}
@ -327,7 +327,7 @@ export class GraphListComponent implements OnInit {
resolve();
}
},
error => {},
error => { },
);
});
}
@ -351,7 +351,7 @@ export class GraphListComponent implements OnInit {
resolve();
}
},
error => {},
error => { },
);
});
}
@ -374,7 +374,7 @@ export class GraphListComponent implements OnInit {
resolve();
}
},
error => {},
error => { },
);
});
}
@ -404,7 +404,7 @@ export class GraphListComponent implements OnInit {
let DifficultyRandomx = res.response.DifficultyRandomx;
let DifficultyProgpow = res.response.DifficultyProgpow;
let data;
switch(this.Type) {
switch (this.Type) {
case 'all':
data =
[
@ -412,30 +412,32 @@ export class GraphListComponent implements OnInit {
x: DifficultychartDate,
y: DifficultyCuckatoo,
text: DifficultychartDate,
mode: 'lines+markers',
// mode: 'lines+markers',
type: 'scatter',
name: '',
line: { color: '#ac3333' },
// line: { color: '#ac3333' },
hovertemplate: '%{text}<br> Cuckoo : %{y:,}',
},
{
x: DifficultychartDate,
y: DifficultyProgpow,
text: DifficultychartDate,
mode: 'lines+markers',
// mode: 'lines+markers',
type: 'scatter',
name: '',
line: { color: '#ac3333' },
yaxis: 'y2',
// line: { color: '#ac3333' },
hovertemplate: '%{text}<br> Progpow : %{y:,}',
},
{
x: DifficultychartDate,
y: DifficultyRandomx,
text: DifficultychartDate,
mode: 'lines+markers',
// mode: 'lines+markers',
type: 'scatter',
name: '',
line: { color: '#ac3333' },
yaxis: 'y3',
// line: { color: '#ac3333' },
hovertemplate: '%{text}<br> RandomX : %{y:,}',
},
];
@ -462,7 +464,7 @@ export class GraphListComponent implements OnInit {
// this.lg_last =
// TargetDifficulty[TargetDifficulty.length - 1];
switch(difftype){
switch (difftype) {
case 'total':
this.totaldifficultyChartFunc(
DifficultychartDate,
@ -485,7 +487,7 @@ export class GraphListComponent implements OnInit {
resolve();
}
},
error => {},
error => { },
);
});
}
@ -513,7 +515,7 @@ export class GraphListComponent implements OnInit {
resolve();
}
},
error => {},
error => { },
);
});
}
@ -521,23 +523,42 @@ export class GraphListComponent implements OnInit {
difficultyChartFunc(DifficultychartDate, data, Type, range, tickformat) {
// console.log('range rangerangerange',range);
this.linearGraphData = {
data: data ,
data: data,
layout: {
hovermode: 'closest',
// hovermode: 'closest',
height: 250,
autosize: true,
showlegend: false,
xaxis: {
tickangle: -45,
tickformat: tickformat,
showgrid: true,
fixedrange: true
fixedrange: true,
// showgrid: true
},
yaxis: {
title: 'Diff',
showgrid: true,
title: 'Cuckoo',
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: {
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 = {
data: [
{
@ -1109,7 +1130,7 @@ export class GraphListComponent implements OnInit {
this.linearTotalGraphData = {
data: data,
layout: {
hovermode: 'closest',
// hovermode: 'closest',
height: 250,
autosize: true,
showlegend: false,
@ -1117,13 +1138,32 @@ export class GraphListComponent implements OnInit {
tickangle: -45,
tickformat: tickformat,
fixedrange: true,
showgrid: true
// showgrid: true
},
yaxis: {
title: 'Diff',
title: 'Cuckoo',
fixedrange: true,
showgrid: 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: {
l: 50,