Multiple y axis

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

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'">

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>

View File

@ -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:,}',
},
];
@ -523,21 +525,40 @@ export class GraphListComponent implements OnInit {
this.linearGraphData = {
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,
@ -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,