stackbar, difficulty chart

2019-07-30 16:18:20 +05:30 · 2019-07-30 16:18:20 +05:30 · 4e56f6dd2c
commit 4e56f6dd2c
parent c4481eb245
3 changed files with 253 additions and 53 deletions
--- a/server/controllers/BlockchainBlock.ts
+++ b/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) {
--- a/src/app/view/home/graph-list/graph-list.component.html
+++ b/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">{{
-          this.tg_last | number
+        <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">{{'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>
--- a/src/app/view/home/graph-list/graph-list.component.ts
+++ b/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 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,