From 57b8a76c6414e44fd3add9e7a6d40c7a4d61f847 Mon Sep 17 00:00:00 2001
From: SuriyaR <suriya.blazews@gmail.com>
Date: Tue, 13 Aug 2019 16:09:02 +0530
Subject: [PATCH] Multiple y axis

---
 .../graph-detail/graph-detail.component.html  |   4 +-
 .../home/graph-list/graph-list.component.html |  12 +-
 .../home/graph-list/graph-list.component.ts   | 318 ++++++++++--------
 3 files changed, 187 insertions(+), 147 deletions(-)

diff --git a/src/app/view/graph-view/graph-detail/graph-detail.component.html b/src/app/view/graph-view/graph-detail/graph-detail.component.html
index ffd3909..60a1e08 100644
--- a/src/app/view/graph-view/graph-detail/graph-detail.component.html
+++ b/src/app/view/graph-view/graph-detail/graph-detail.component.html
@@ -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'">
diff --git a/src/app/view/home/graph-list/graph-list.component.html b/src/app/view/home/graph-list/graph-list.component.html
index cae6cc1..81e76ac 100644
--- a/src/app/view/home/graph-list/graph-list.component.html
+++ b/src/app/view/home/graph-list/graph-list.component.html
@@ -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>
diff --git a/src/app/view/home/graph-list/graph-list.component.ts b/src/app/view/home/graph-list/graph-list.component.ts
index 2c0a9d0..ed568c5 100644
--- a/src/app/view/home/graph-list/graph-list.component.ts
+++ b/src/app/view/home/graph-list/graph-list.component.ts
@@ -65,8 +65,8 @@ 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;
     } else {
@@ -126,16 +126,16 @@ export class GraphListComponent implements OnInit {
             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,
-                );
+              this.pg_last =
+                pvalues[pvalues.length - 1];
+              this.piechartFunc(
+                plabel,
+                pvalues,
+              );
               resolve();
             }
           },
-          error => {},
+          error => { },
         );
     });
   }
@@ -159,18 +159,18 @@ export class GraphListComponent implements OnInit {
               let Cuckoo = res.response.Cuckoo;
               let ProgPow = res.response.ProgPow;
               let RandomX = res.response.RandomX;
-                this.sg_last =
+              this.sg_last =
                 RandomX[RandomX.length - 1];
-                this.stackchartFunc(
-                  sDate,
-                  Cuckoo,
-                  ProgPow,
-                  RandomX
-                );
+              this.stackchartFunc(
+                sDate,
+                Cuckoo,
+                ProgPow,
+                RandomX
+              );
               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 => { },
         );
     });
   }
@@ -400,49 +400,51 @@ export class GraphListComponent implements OnInit {
           res => {
             if (res['status'] == 200) {
               let DifficultychartDate = res.response.Date;
-              let DifficultyCuckatoo =  res.response.DifficultyCuckatoo;
+              let DifficultyCuckatoo = res.response.DifficultyCuckatoo;
               let DifficultyRandomx = res.response.DifficultyRandomx;
               let DifficultyProgpow = res.response.DifficultyProgpow;
               let data;
-              switch(this.Type) { 
+              switch (this.Type) {
                 case 'all':
-                    data = 
+                  data =
                     [
                       {
                         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:,}',
                       },
                     ];
-                break;
+                  break;
                 default:
-                    let yvalue = this.Type == 'cuckatoo' ? DifficultyCuckatoo : this.Type == 'progpow' ? DifficultyProgpow : this.Type == 'randomx' ? DifficultyRandomx : []
-                    data = 
+                  let yvalue = this.Type == 'cuckatoo' ? DifficultyCuckatoo : this.Type == 'progpow' ? DifficultyProgpow : this.Type == 'randomx' ? DifficultyRandomx : []
+                  data =
                     [
                       {
                         x: DifficultychartDate,
@@ -454,38 +456,38 @@ export class GraphListComponent implements OnInit {
                         line: { color: '#ac3333' },
                         hovertemplate: '%{text}<br> Difficulty : %{y:,}',
                       }];
-                break;
-              } 
+                  break;
+              }
 
-                let range = [res.response.Minrange, res.response.Maxrange]
-                let tickformat = res.response.tickFormat;
-                // this.lg_last =
-                // TargetDifficulty[TargetDifficulty.length - 1];
+              let range = [res.response.Minrange, res.response.Maxrange]
+              let tickformat = res.response.tickFormat;
+              // this.lg_last =
+              // TargetDifficulty[TargetDifficulty.length - 1];
 
-                switch(difftype){
-                  case 'total':
-                      this.totaldifficultyChartFunc(
-                        DifficultychartDate,
-                        data,
-                        this.Type,
-                        range,
-                        tickformat
-                      );
-                    break;
-                  case 'target':
-                      this.difficultyChartFunc(
-                        DifficultychartDate,
-                        data,
-                        this.Type,
-                        range,
-                        tickformat
-                      );
-                   break;
-                }
+              switch (difftype) {
+                case 'total':
+                  this.totaldifficultyChartFunc(
+                    DifficultychartDate,
+                    data,
+                    this.Type,
+                    range,
+                    tickformat
+                  );
+                  break;
+                case 'target':
+                  this.difficultyChartFunc(
+                    DifficultychartDate,
+                    data,
+                    this.Type,
+                    range,
+                    tickformat
+                  );
+                  break;
+              }
               resolve();
             }
           },
-          error => {},
+          error => { },
         );
     });
   }
@@ -507,13 +509,13 @@ export class GraphListComponent implements OnInit {
             if (res['status'] == 200) {
               let DifficultychartDate = res.response.Date;
               let BlocksChartDate = res.response.blockDate;
-                let Blockval = res.response.Blocks;
-                this.brg_last = Blockval[Blockval.length - 1];
-                this.totalBlocksFunc(BlocksChartDate, Blockval);
+              let Blockval = res.response.Blocks;
+              this.brg_last = Blockval[Blockval.length - 1];
+              this.totalBlocksFunc(BlocksChartDate, Blockval);
               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,
@@ -633,7 +654,7 @@ export class GraphListComponent implements OnInit {
 
 
   piechartFunc(plabel, pvalues) {
-     this.pieGraphData = {
+    this.pieGraphData = {
       data: [
         {
           values: pvalues,
@@ -648,7 +669,7 @@ export class GraphListComponent implements OnInit {
         height: 250,
         autosize: false,
         showlegend: false,
-       xaxis: {
+        xaxis: {
           tickangle: -45,
           tickformat: '%m-%d',
           showgrid: true,
@@ -822,7 +843,7 @@ export class GraphListComponent implements OnInit {
       ],
       layout: {
         hovermode: 'closest',
-       // width: 350,
+        // width: 350,
         height: 250,
         autosize: true,
         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 = {
       data: [
         {
@@ -932,64 +953,64 @@ export class GraphListComponent implements OnInit {
 
   transactionheatmapFunc(tDate, tHour, tInput, hovertext) {
     return new Promise((resolve, reject) => {
-    this.heatMapGrowthData = {
-      data: [
-        {
-          x: tHour,
-          y: tDate,
-          z: tInput,
-          name: '',
-          text: hovertext,
-          hovertemplate: hovertext + ': %{z:,} ',
-          colorscale: 'Rainbow',
-          type: 'heatmap',
-          visible: true,
-          colorbar: { thickness: 3 },
-          xgap: 1,
-          ygap: 1,
-        },
-      ],
-      layout: {
-        hovermode: 'closest',
-        height: 250,
-        //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,
+      this.heatMapGrowthData = {
+        data: [
+          {
+            x: tHour,
+            y: tDate,
+            z: tInput,
+            name: '',
+            text: hovertext,
+            hovertemplate: hovertext + ': %{z:,} ',
+            colorscale: 'Rainbow',
+            type: 'heatmap',
+            visible: true,
+            colorbar: { thickness: 3 },
+            xgap: 1,
+            ygap: 1,
+          },
+        ],
+        layout: {
+          hovermode: 'closest',
+          height: 250,
+          //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,
+          },
+          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: {
-          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,
-      },
-      options: null,
-    };
-    resolve();
-  });
+        options: null,
+      };
+      resolve();
+    });
   }
   transactionlinechartFunc(Tdate, Ttotalinput, Ttotalkernal, Ttotaloutput) {
     this.feeGraphData = {
@@ -1027,7 +1048,7 @@ export class GraphListComponent implements OnInit {
       ],
       layout: {
         autosize: true,
-       // width: 350,
+        // width: 350,
         height: 250,
         xaxis: {
           showgrid: true,
@@ -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,