stackbar, difficulty chart

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 = [],
+      let label = [],
-      // Blocks = [],
+      value = [];
-      //   Cuckaroo = [],
+
-      //   Cuckatoo = [],
+      stackNBlockQuery.forEach(e => {
-      //   ProgPow = [],
+        label.push("Cuckaroo","Cuckatoo","ProgPow","RandomX");
-      //   RandomX = [];
+        value.push(parseInt(e.cuckaroo),parseInt(e.cuckatoo),parseInt(e.progpow),parseInt(e.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));
-      // });
       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/home/graph-list/graph-list.component.html

@@ -396,8 +396,8 @@
     <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">{{
+        <span class="txn_count" *ngIf="this.sg_last">{{
-          this.tg_last | number
+          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">{{'home.TRANSACTIONS_VS_DATE' | translate}}</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.values;
+                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 sDate = res.response.Date;
-              let Difficultychartval = res.response.TotalDifficulty;
+              let Cuckaroo = res.response.Cuckaroo;
-                this.lg_last =
+              let Cuckatoo = res.response.Cuckatoo;
-                  Difficultychartval[Difficultychartval.length - 1];
+              let ProgPow = res.response.ProgPow;
+              let RandomX = res.response.RandomX;
+                this.sg_last =
+                RandomX[RandomX.length - 1];
                 this.stackchartFunc(
-                  DifficultychartDate,
+                  sDate,
-                  Difficultychartval,
+                  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,
+          y: DifficultyCuckaroo,
-          text: Difficultychartval,
+          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'],
+          x: sDate,
-          y: [20, 14, 23],
+          y: Cuckaroo,
-          name: 'SF Zoo',
+          name: '',
           type: 'bar',
+          text: Cuckaroo,
+          hovertemplate: '%{x}<br> Cuckatoo : %{text:,}',
           marker: {
-            color: Blockval,
+            color: '#77817C',
-            colorscale: 'Viridis',
           },
         },
         {
-          x: ['giraffes', 'orangutans', 'monkeys'],
+          x: sDate,
-          y: [12, 18, 29],
+          y: Cuckatoo,
-          name: 'LA Zoo',
+          name: '',
           type: 'bar',
+          text: Cuckatoo,
+          hovertemplate: '%{x}<br> Cuckaroo : %{text:,}',
           marker: {
-            color: Blockval,
+            color: '#54CFDC',
-            colorscale: 'Viridis',
+          },
+        },
+        {
+          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,
+          y: Cuckarooper,
-          text: Cuckoo,
+          text: Cuckaroo,
-          hovertemplate: 'Cuckoo :%{y} % ( %{text:,} )',
+          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,