Merge branch 'master' of https://gitlab.com/epic-tech/explorer2.epic.tech-angular8

server/controllers/BlockchainBlock.ts

@@ -1123,7 +1123,7 @@ export class BlockchainBlockController {
         RandomX = [];
       stackNBlockQuery.forEach(e => {
         date.push(moment(e.date).format('YYYY-MM-DD'));
-        Blocks.push({Cuckaroo: parseInt(e.cuckaroo), Cuckatoo : parseInt(e.cuckatoo), ProgPow : parseInt(e.progpow), RandomX : parseInt(e.randomx)})
+        // Blocks.push({Cuckaroo: parseInt(e.cuckaroo), Cuckatoo : parseInt(e.cuckatoo), ProgPow : parseInt(e.progpow), RandomX : parseInt(e.randomx)})
         Cuckaroo.push(parseInt(e.cuckaroo));
         Cuckatoo.push(parseInt(e.cuckatoo));
         ProgPow.push(parseInt(e.progpow));
@@ -1132,10 +1132,13 @@ export class BlockchainBlockController {
       response.status(200).json({
         status: 200,
         timestamp: Date.now(),
-        message: 'Total Difficulty and Blocks Data fetched Successfully',
+        message: 'Stack Data fetched Successfully',
         response: {
           Date: date,
-          Blocks
+          Cuckaroo:Cuckaroo,
+          Cuckatoo:Cuckatoo,
+          ProgPow:ProgPow,
+          RandomX:RandomX
         },
       });
     } catch (error) {
@@ -1197,26 +1200,20 @@ export class BlockchainBlockController {
         .catch(err_msg => {
           next(err_msg);
         });
-      // let date = [],
-      // Blocks = [],
-      //   Cuckaroo = [],
-      //   Cuckatoo = [],
-      //   ProgPow = [],
-      //   RandomX = [];
-      // stackNBlockQuery.forEach(e => {
-      //   date.push(moment(e.date).format('YYYY-MM-DD'));
-      //   Blocks.push({Cuckaroo: parseInt(e.cuckaroo), Cuckatoo : parseInt(e.cuckatoo), ProgPow : parseInt(e.progpow), RandomX : parseInt(e.randomx)})
-      //   Cuckaroo.push(parseInt(e.cuckaroo));
-      //   Cuckatoo.push(parseInt(e.cuckatoo));
-      //   ProgPow.push(parseInt(e.progpow));
-      //   RandomX.push(parseInt(e.randomx));
-      // });
+      let label = [],
+      value = [];
+
+      stackNBlockQuery.forEach(e => {
+        label.push("Cuckaroo","Cuckatoo","ProgPow","RandomX");
+        value.push(parseInt(e.cuckaroo),parseInt(e.cuckatoo),parseInt(e.progpow),parseInt(e.randomx));
+      });
       response.status(200).json({
         status: 200,
         timestamp: Date.now(),
         message: 'Piechart for block is fetched Successfully',
         response: {
-          ...stackNBlockQuery
+          label,
+          value
         },
       });
     } catch (error) {

src/app/view/block-view/block-detail/block-detail.component.html

@@ -69,8 +69,8 @@
           </div>
           <div class="d-inline-block align-middle ml-2">
             <span class="">{{'home.DIFFICULTY' | translate}}</span>
-            <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.TotalDifficulty }}</h6>
           </div>
+          <h6 class="view_txt">Cuckaroo : {{ hashdata.BlockchainBlockFetchQuery.TotalDifficultyCuckaroo }} | Cuckatoo : {{ hashdata.BlockchainBlockFetchQuery.TotalDifficultyCuckatoo }} <br/> Progpow : {{ hashdata.BlockchainBlockFetchQuery.TotalDifficultyProgpow }} | Randomx : {{ hashdata.BlockchainBlockFetchQuery.TotalDifficultyRandomx }}</h6>
         </div>
         <div class="col-sm-6 col-md-4 mt-4 pt-2">
           <div class="d-inline-block align-middle">

src/app/view/graph-view/graph-detail/graph-detail.component.html

@@ -66,6 +66,8 @@
           <li class="mb-1" *ngIf="this.title!='HashRate Growth Chart'"><a routerLink="/chart/hashrate-growth-chart">{{'home.HASHRATE_GROWTH_CHART' | translate}}</a></li>
           <li class="mb-1" *ngIf="this.title!='Transactions by time'"><a routerLink="/chart/block-interval">{{'home.BLOCK_INTERVAL' | translate}}</a></li>
           <li class="mb-1" *ngIf="this.title!='Transactions Vs Date'"><a routerLink="/chart/transactions-vs-date">{{'home.TRANSACTIONS_VS_DATE' | translate}}</a></li>
+          <li class="mb-1" *ngIf="this.title!='Stackbar Chart'"><a routerLink="/chart/stackchart">Stackbar Chart</a></li>
+          <li class="mb-1" *ngIf="this.title!='Pie Chart'"><a routerLink="/chart/piechart">Pie Chart</a></li>
         </ul>
        </div>
       </div>

src/app/view/graph-view/graph-detail/graph-detail.component.ts

@@ -145,6 +145,26 @@ export class GraphDetailComponent implements OnInit {
             );
           });
           break;
+        case 'stackchart':
+        this.comp.stackchartreq().then(res => {
+          this.hashdata = this.comp.stackGraphData;
+          this.hashdata.layout.height = 500;
+          this.title = 'Stackbar Chart';
+          this.titleService.setTitle(
+            this.route.snapshot.data.title + ' - ' + this.title,
+          );
+        });
+        break;
+        case 'piechart':
+        this.comp.piechartreq().then(res => {
+          this.hashdata = this.comp.pieGraphData;
+          this.hashdata.layout.height = 500;
+          this.title = 'Pie Chart';
+          this.titleService.setTitle(
+            this.route.snapshot.data.title + ' - ' + this.title,
+          );
+        });
+        break;
         case 'transactions-vs-date':
           this.comp.Transactionlinechartreq().then(res => {
             this.hashdata = this.comp.feeGraphData;
@@ -235,6 +255,24 @@ export class GraphDetailComponent implements OnInit {
           this.title = 'Block Interval';
         });
         break;
+      case 'stackchart':
+        this.comp.stackchartreq(p1, p2, p3).then(res => {
+          this.hashdata = this.comp.stackGraphData;
+          this.hashdata.layout.height = 500;
+          // this.hashdata.layout.width =
+          //   window.innerWidth - window.innerWidth / 2.8;
+          this.title = 'Stackbar Chart';
+        });
+        break;
+      case 'piechart':
+        this.comp.piechartreq(p1, p2, p3).then(res => {
+          this.hashdata = this.comp.pieGraphData;
+          this.hashdata.layout.height = 500;
+          // this.hashdata.layout.width =
+          //   window.innerWidth - window.innerWidth / 2.8;
+          this.title = 'Pie Chart';
+        });
+        break;
       case 'transactions-vs-date':
         this.comp.Transactionlinechartreq(p1, p2, p3).then(res => {
           this.hashdata = this.comp.feeGraphData;

src/app/view/home/graph-list/graph-list.component.html

@@ -395,9 +395,9 @@
   <div [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
     <div class="box_shadow">
       <div class="blocks">
-        <h2 class="chart_heading d-inline-block">{{'home.TRANSACTIONS_VS_DATE' | translate}}</h2>
-        <span class="txn_count" *ngIf="this.tg_last">{{
-          this.tg_last | number
+        <h2 class="chart_heading d-inline-block">Stackbar Chart</h2>
+        <span class="txn_count" *ngIf="this.sg_last">{{
+          this.sg_last | number
         }}</span>
 
         <div class="chart_show">
@@ -440,4 +440,52 @@
     </div>
   </div>
 
+  <div [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
+    <div class="box_shadow">
+      <div class="blocks">
+        <h2 class="chart_heading d-inline-block">Pie Chart</h2>
+        <span class="txn_count" *ngIf="this.pg_last">{{
+          this.pg_last | number
+        }}</span>
+
+        <div class="chart_show">
+          <epic-explorer-plotly *ngIf="pieGraphData.data" [data]="pieGraphData.data" [layout]="pieGraphData.layout">
+          </epic-explorer-plotly>
+          <div *ngIf="!pieGraphData.data" class="feedback_div news_desc text-center">
+            <div class="graph_img background_loading mx-auto mb-3"></div>
+            <div class=" p-3 bg-white">
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+              <p class="mb-2 background_loading para_load"></p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="day_filter">
+        <a href="JavaScript:void(0);" (click)="piechartreq('', '', '1 week'); selectedItem10 = 1" id="1"
+          #item1 [ngClass]="{ active: selectedItem11 == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
+        <a href="JavaScript:void(0);" (click)="
+        piechartreq('', '', '15 days'); selectedItem11 = 2
+          " id="2" #item2 [ngClass]="{ active: selectedItem11 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
+        <a href="JavaScript:void(0);" (click)="
+        piechartreq('', '', '30 days'); selectedItem10 = 3
+          " id="3" #item3 [ngClass]="{ active: selectedItem11 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
+        <a href="JavaScript:void(0);" (click)="
+        piechartreq('', '', '60 days'); selectedItem10 = 4
+          " id="4" #item4 [ngClass]="{ active: selectedItem11 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
+        <a href="JavaScript:void(0);" (click)="
+        piechartreq('', '', '3 months'); selectedItem10 = 5
+          " id="5" #item5 [ngClass]="{ active: selectedItem11 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
+      </div>
+      <div class="explore_all text-right">
+        <a routerLink="/chart/piechart"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
+              class="fa fa-long-arrow-right"></i></span></a>
+      </div>
+    </div>
+  </div>
+
 </div>

src/app/view/home/graph-list/graph-list.component.ts

@@ -22,6 +22,7 @@ export class GraphListComponent implements OnInit {
   public heatMapGrowthData: any = [];
   public transcationGraphData: any = [];
   public stackGraphData: any = [];
+  public pieGraphData: any = [];
 
   public lg_last: any = '';
   public ag_last: any = '';
@@ -34,6 +35,7 @@ export class GraphListComponent implements OnInit {
   public tg_last: any = '';
   public hg_last: any = '';
   public sg_last: any = '';
+  public pg_last: any = '';
 
   public selectedItem: Number = 3;
   public selectedItem3: Number = 3;
@@ -44,6 +46,7 @@ export class GraphListComponent implements OnInit {
   public selectedItem8: Number = 1;
   public selectedItem9: Number = 3;
   public selectedItem10: Number = 3;
+  public selectedItem11: Number = 3;
 
   public tInput: any;
   public tOutput: any;
@@ -81,6 +84,40 @@ export class GraphListComponent implements OnInit {
     /* Stack chart fetching */
     this.stackchartreq();
 
+    /* Pie chart fetching */
+    this.piechartreq();
+
+  }
+
+  piechartreq(
+    fromDate = '',
+    ToDate = '',
+    interval = '',
+  ) {
+    return new Promise((resolve, reject) => {
+      let params = new HttpParams();
+      params = params.append('FromDate', fromDate);
+      params = params.append('ToDate', ToDate);
+      params = params.append('Interval', interval);
+      this.chartService
+        .apiGetRequest(params, '/blockchain_block/blockpiechart')
+        .subscribe(
+          res => {
+            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,
+                );
+              resolve();
+            }
+          },
+          error => {},
+        );
+    });
   }
 
   stackchartreq(
@@ -98,13 +135,19 @@ export class GraphListComponent implements OnInit {
         .subscribe(
           res => {
             if (res['status'] == 200) {
-              let DifficultychartDate = res.response.Date;
-              let Difficultychartval = res.response.TotalDifficulty;
-                this.lg_last =
-                  Difficultychartval[Difficultychartval.length - 1];
+              let sDate = res.response.Date;
+              let Cuckaroo = res.response.Cuckaroo;
+              let Cuckatoo = res.response.Cuckatoo;
+              let ProgPow = res.response.ProgPow;
+              let RandomX = res.response.RandomX;
+                this.sg_last =
+                RandomX[RandomX.length - 1];
                 this.stackchartFunc(
-                  DifficultychartDate,
-                  Difficultychartval,
+                  sDate,
+                  Cuckaroo,
+                  Cuckatoo,
+                  ProgPow,
+                  RandomX
                 );
               resolve();
             }
@@ -223,21 +266,25 @@ export class GraphListComponent implements OnInit {
             if (res['status'] == 200) {
               let mDate = res.response.date;
               let ProgPow = res.response.ProgPow;
-              let Cuckoo = res.response.Cuckoo;
+              let Cuckaroo = res.response.Cuckaroo;
+              let Cuckatoo = res.response.Cuckatoo;
               let RandomX = res.response.RandomX;
               
               let ProgPowper = res.response.ProgPowper;
-              let Cuckooper = res.response.Cuckooper;
+              let Cuckarooper = res.response.Cuckarooper;
+              let Cuckatooper = res.response.Cuckatooper;
               let RandomXper = res.response.RandomXper;
 
               this.dg_last = RandomXper[RandomXper.length - 1];
               this.blockminedFunc(
                 mDate,
                 ProgPow,
-                Cuckoo,
+                Cuckaroo,
+                Cuckatoo,
                 RandomX,
                 ProgPowper,
-                Cuckooper,
+                Cuckarooper,
+                Cuckatooper,
                 RandomXper,
               );
               resolve();
@@ -337,12 +384,18 @@ export class GraphListComponent implements OnInit {
             if (res['status'] == 200) {
               let DifficultychartDate = res.response.Date;
               if (fordifficult) {
-                let Difficultychartval = res.response.TotalDifficulty;
+                let DifficultyCuckaroo = res.response.DifficultyCuckaroo;
+                let DifficultyCuckatoo = res.response.DifficultyCuckatoo;
+                let DifficultyProgpow = res.response.DifficultyProgpow;
+                let DifficultyRandomx = res.response.DifficultyRandomx;
                 this.lg_last =
-                  Difficultychartval[Difficultychartval.length - 1];
+                DifficultyCuckaroo[DifficultyCuckaroo.length - 1];
                 this.difficultyChartFunc(
                   DifficultychartDate,
-                  Difficultychartval,
+                  DifficultyCuckaroo,
+                  DifficultyCuckatoo,
+                  DifficultyProgpow,
+                  DifficultyRandomx
                 );
               }
               if (forblocks) {
@@ -358,18 +411,48 @@ export class GraphListComponent implements OnInit {
     });
   }
 
-  difficultyChartFunc(DifficultychartDate, Difficultychartval) {
+  difficultyChartFunc(DifficultychartDate, DifficultyCuckaroo, DifficultyCuckatoo, DifficultyProgpow, DifficultyRandomx) {
     this.linearGraphData = {
       data: [
         {
           x: DifficultychartDate,
-          y: Difficultychartval,
-          text: Difficultychartval,
+          y: DifficultyCuckaroo,
+          text: DifficultyCuckaroo,
           mode: 'lines+markers',
           type: 'scatter',
           name: '',
           line: { color: '#ac3333' },
-          hovertemplate: '%{x}<br> Total Difficulty : %{text:,}',
+          hovertemplate: '%{x}<br> Cuckaroo : %{text:,}',
+        },
+        {
+          x: DifficultychartDate,
+          y: DifficultyCuckatoo,
+          text: DifficultyCuckatoo,
+          mode: 'lines+markers',
+          type: 'scatter',
+          name: '',
+          line: { color: '#A876C6' },
+          hovertemplate: '%{x}<br> Cuckatoo : %{text:,}',
+        },
+        {
+          x: DifficultychartDate,
+          y: DifficultyProgpow,
+          text: DifficultyProgpow,
+          mode: 'lines+markers',
+          type: 'scatter',
+          name: '',
+          line: { color: '#54CFDC' },
+          hovertemplate: '%{x}<br> Progpow : %{text:,}',
+        },
+        {
+          x: DifficultychartDate,
+          y: DifficultyRandomx,
+          text: DifficultyRandomx,
+          mode: 'lines+markers',
+          type: 'scatter',
+          name: '',
+          line: { color: '#77817C' },
+          hovertemplate: '%{x}<br> Randomx : %{text:,}',
         },
       ],
       layout: {
@@ -394,37 +477,97 @@ export class GraphListComponent implements OnInit {
     };
   }
 
-  stackchartFunc(DifficultychartDate, Blockval) {
+  stackchartFunc(sDate, Cuckaroo, Cuckatoo, ProgPow, RandomX) {
     this.stackGraphData = {
       data: [
         {
-          x: ['giraffes', 'orangutans', 'monkeys'],
-          y: [20, 14, 23],
-          name: 'SF Zoo',
+          x: sDate,
+          y: Cuckaroo,
+          name: '',
           type: 'bar',
+          text: Cuckaroo,
+          hovertemplate: '%{x}<br> Cuckatoo : %{text:,}',
           marker: {
-            color: Blockval,
-            colorscale: 'Viridis',
+            color: '#77817C',
           },
         },
         {
-          x: ['giraffes', 'orangutans', 'monkeys'],
-          y: [12, 18, 29],
-          name: 'LA Zoo',
+          x: sDate,
+          y: Cuckatoo,
+          name: '',
           type: 'bar',
+          text: Cuckatoo,
+          hovertemplate: '%{x}<br> Cuckaroo : %{text:,}',
           marker: {
-            color: Blockval,
-            colorscale: 'Viridis',
+            color: '#54CFDC',
+          },
+        },
+        {
+          x: sDate,
+          y: ProgPow,
+          name: '',
+          type: 'bar',
+          text: ProgPow,
+          hovertemplate: '%{x}<br> ProgPow : %{text:,}',
+          marker: {
+            color: '#825f5f',
+          },
+        },
+        {
+          x: sDate,
+          y: RandomX,
+          name: '',
+          type: 'bar',
+          text: RandomX,
+          hovertemplate: '%{x}<br> RandomX : %{text:,}',
+          marker: {
+            color: '#a9df5f',
           },
         }
 
       ],
       layout: {
         hovermode: 'closest',
+        width: 350,
+        height: 250,
+        autosize: true,
+        showlegend: false,
+        barmode: 'relative',
+        xaxis: {
+          tickangle: -45,
+          tickformat: '%m-%d',
+        },
+        yaxis: {
+          title: 'Block',
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          b: 50,
+          t: 50,
+        },
+      },
+      options: null,
+    };
+  }
+
+
+  piechartFunc(plabel, pvalues) {
+     this.pieGraphData = {
+      data: [
+        {
+          values: pvalues,
+          labels: plabel,
+          type: 'pie'
+        }
+
+      ],
+      layout: {
+        hovermode: 'closest',
+        width: 350,
         height: 250,
         autosize: true,
         showlegend: false,
-        barmode: 'stack',
        xaxis: {
           tickangle: -45,
           tickformat: '%m-%d',
@@ -598,14 +741,14 @@ export class GraphListComponent implements OnInit {
     };
   }
 
-  blockminedFunc(mDate,ProgPow, Cuckoo, RandomX, ProgPowper, Cuckooper, RandomXper) {
+  blockminedFunc(mDate,ProgPow, Cuckaroo, Cuckatoo, RandomX, ProgPowper, Cuckarooper, Cuckatooper, RandomXper) {
     this.doubleareaGraphData = {
       data: [
         {
           x: mDate,
-          y: Cuckooper,
-          text: Cuckoo,
-          hovertemplate: 'Cuckoo :%{y} % ( %{text:,} )',
+          y: Cuckarooper,
+          text: Cuckaroo,
+          hovertemplate: 'Cuckaroo :%{y} % ( %{text:,} )',
           name: '',
           fill: 'tozeroy',
           type: 'line',
@@ -613,6 +756,18 @@ export class GraphListComponent implements OnInit {
             color: '#f5ca19',
           },
         },
+        {
+          x: mDate,
+          y: Cuckatooper,
+          text: Cuckatoo,
+          hovertemplate: 'Cuckatoo :%{y} % ( %{text:,} )',
+          name: '',
+          fill: 'tozeroy',
+          type: 'line',
+          line: {
+            color: '#f5c1a9',
+          },
+        },
         {
           x: mDate,
           y: RandomXper,

src/app/view/home/latestblocks/latestblocks.component.html

@@ -49,7 +49,7 @@
         <div class="block_div"><h6 >Age</h6><span class="blck_value">{{ hashvalue.age }}</span></div>
       </div>
       <div class="col-6 col-md-3 tble_col">
-        <div class="block_div"><h6>Difficulty</h6><span class="blck_value">{{ hashvalue.target_difficulty | number }}</span></div>
+        <div class="block_div"><h6>Difficulty</h6><span class="blck_value" title="Cuckaroo : {{ hashvalue.target_difficulty_cuckaroo | number }}, Cuckatoo :  {{ hashvalue.target_difficulty_cuckatoo | number }}, Progpow : {{ hashvalue.target_difficulty_progpow | number }}, Randomx : {{ hashvalue.target_difficulty_randomx | number }}">{{ hashvalue.target_difficulty_cuckaroo | number }}, {{ hashvalue.target_difficulty_cuckatoo | number }}, {{ hashvalue.target_difficulty_progpow | number }}, {{ hashvalue.target_difficulty_randomx | number }}</span></div>
       </div>
       <div class="col-6 col-sm-6 col-md-3 tble_col">
         <div class="block_div"><h6 class="mb-0">Pow Algo</h6><span class="blck_value">{{ hashvalue.powalgo }}</span></div>