Stack bar graph integration

server/controllers/BlockchainBlock.ts

@@ -225,6 +225,41 @@ export class BlockchainBlockController {
       this.TotalDifficultyNBlock,
     );
 
+    /**
+     * @swagger
+     * /epic_explorer/v1/blockchain_block/stackblock:
+     *   get:
+     *     tags:
+     *       - name: STACK_BLOCK | STACK_BLOCK CONTROLLER
+     *     description: To get Total Difficulty and Number of Blocks
+     *     summary: To get Total Difficulty and Number of Blocks
+     *     consumes:
+     *       - application/json
+     *     produces:
+     *       - application/json
+     *     parameters:
+     *       - name: FromDate
+     *         description: Enter the From date
+     *         in: query
+     *         type: string
+     *       - name: ToDate
+     *         description: Enter the To date
+     *         in: query
+     *         type: string
+     *       - name: Interval
+     *         description: Try to give Intevals such as 1 week/ 15 days/ 30 days/ 60 days/ 3 months
+     *         in: query
+     *         type: string
+     *     responses:
+     *       200:
+     *         description: Total Difficulty and No. of blocks   fetched successfully
+     */
+    this.router.get(
+      `${this.path}/stackblock`,
+      validationMiddleware(TotalDifficultyNBlockDto, true),
+      this.StackBlock,
+    );
+
     /**
      * @swagger
      * /epic_explorer/v1/blockchain_block/hashrate:
@@ -917,6 +952,85 @@ export class BlockchainBlockController {
     }
   };
 
+  private StackBlock = async (
+    request: Request,
+    response: Response,
+    next: NextFunction,
+  ) => {
+    try {
+      const TotalDifficultyNBlockRequestData: TotalDifficultyNBlockDto =
+        request.query;
+      if (TotalDifficultyNBlockRequestData.Interval) {
+        var timeIntervalQry =
+          "timestamp at time zone '" +
+          process.env.TIME_ZONE +
+          "' > current_date - interval '" +
+          TotalDifficultyNBlockRequestData.Interval +
+          "'";
+      } else if (
+        TotalDifficultyNBlockRequestData.FromDate ||
+        TotalDifficultyNBlockRequestData.ToDate
+      ) {
+        let fromdate = moment(TotalDifficultyNBlockRequestData.FromDate)
+          .utc()
+          .format('YYYY-MM-DD');
+        let todate = moment(TotalDifficultyNBlockRequestData.ToDate)
+          .utc()
+          .format('YYYY-MM-DD');
+
+        var timeIntervalQry =
+          "timestamp at time zone '" +
+          process.env.TIME_ZONE +
+          "'  BETWEEN SYMMETRIC '" +
+          fromdate +
+          "' AND '" +
+          todate +
+          "'";
+      } else {
+        var timeIntervalQry =
+          "timestamp at time zone '" +
+          process.env.TIME_ZONE +
+          "' > current_date - interval '30 days'";
+      }
+      const stackNBlockQuery = await getConnection()
+        .query(
+          "select 1 as hash, max(total_difficulty_cuckaroo) as total_difficulty_cuckaroo, max(total_difficulty_cuckatoo) as total_difficulty_cuckatoo, max(total_difficulty_progpow) as total_difficulty_progpow, max(total_difficulty_randomx) as total_difficulty_randomx, date(DATE_TRUNC('day', timestamp at time zone '" +
+            process.env.TIME_ZONE +
+            "')) as date, Count( CASE WHEN proof = 'RandomX' THEN 1 ELSE NULL END) AS RandomX, \
+                          Count( CASE  WHEN proof = 'Cuckoo' THEN 1 ELSE NULL END) AS Cuckoo,\
+                          Count( CASE WHEN proof = 'ProgPow' THEN 1 ELSE NULL END) AS ProgPow \
+            from blockchain_block where " +
+            timeIntervalQry +
+            "group by DATE_TRUNC('day', timestamp at time zone '" +
+            process.env.TIME_ZONE +
+            "') order by date",
+        )
+        .catch(err_msg => {
+          next(err_msg);
+        });
+      let date = [],
+        Difficulty = [],
+        blocks = [];
+        stackNBlockQuery.forEach(e => {
+        date.push(moment(e.date).format('YYYY-MM-DD'));
+        Difficulty.push(parseInt(e.total_difficulty));
+        blocks.push(parseInt(e.blocks));
+      });
+      response.status(200).json({
+        status: 200,
+        timestamp: Date.now(),
+        message: 'Total Difficulty and Blocks Data fetched Successfully',
+        response: {
+          Date: date,
+          Blocks: blocks,
+          TotalDifficulty: Difficulty,
+        },
+      });
+    } catch (error) {
+      next(new InternalServerErrorException(error));
+    }
+  };
+
   private HashRate = async (
     request: Request,
     response: Response,

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

@@ -391,4 +391,53 @@
       </div>
     </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.tg_last">{{
+          this.tg_last | number
+        }}</span>
+
+        <div class="chart_show">
+          <epic-explorer-plotly *ngIf="stackGraphData.data" [data]="stackGraphData.data" [layout]="stackGraphData.layout">
+          </epic-explorer-plotly>
+          <div *ngIf="!stackGraphData.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)="stackchartreq('', '', '1 week'); selectedItem10 = 1" id="1"
+          #item1 [ngClass]="{ active: selectedItem10 == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
+        <a href="JavaScript:void(0);" (click)="
+        stackchartreq('', '', '15 days'); selectedItem10 = 2
+          " id="2" #item2 [ngClass]="{ active: selectedItem10 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
+        <a href="JavaScript:void(0);" (click)="
+        stackchartreq('', '', '30 days'); selectedItem10 = 3
+          " id="3" #item3 [ngClass]="{ active: selectedItem10 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
+        <a href="JavaScript:void(0);" (click)="
+        stackchartreq('', '', '60 days'); selectedItem10 = 4
+          " id="4" #item4 [ngClass]="{ active: selectedItem10 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
+        <a href="JavaScript:void(0);" (click)="
+        stackchartreq('', '', '3 months'); selectedItem10 = 5
+          " id="5" #item5 [ngClass]="{ active: selectedItem10 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
+      </div>
+      <div class="explore_all text-right">
+        <a routerLink="/chart/stackchart"><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

@@ -21,6 +21,7 @@ export class GraphListComponent implements OnInit {
   public growthGraphData: any = [];
   public heatMapGrowthData: any = [];
   public transcationGraphData: any = [];
+  public stackGraphData: any = [];
 
   public lg_last: any = '';
   public ag_last: any = '';
@@ -32,6 +33,7 @@ export class GraphListComponent implements OnInit {
   public gg_last: any = '';
   public tg_last: any = '';
   public hg_last: any = '';
+  public sg_last: any = '';
 
   public selectedItem: Number = 3;
   public selectedItem3: Number = 3;
@@ -41,6 +43,7 @@ export class GraphListComponent implements OnInit {
   public selectedItem7: Number = 3;
   public selectedItem8: Number = 1;
   public selectedItem9: Number = 3;
+  public selectedItem10: Number = 3;
 
   public tInput: any;
   public tOutput: any;
@@ -75,9 +78,42 @@ export class GraphListComponent implements OnInit {
     /* Transaction2line chart fetching */
     this.Transactiondoublelinechartreq();
 
-    this.bubbleGraphdData = {};
+    /* Stack chart fetching */
+    this.stackchartreq();
+
   }
 
+  stackchartreq(
+    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/stackblock')
+        .subscribe(
+          res => {
+            if (res['status'] == 200) {
+              let DifficultychartDate = res.response.Date;
+              let Difficultychartval = res.response.TotalDifficulty;
+                this.lg_last =
+                  Difficultychartval[Difficultychartval.length - 1];
+                this.stackchartFunc(
+                  DifficultychartDate,
+                  Difficultychartval,
+                );
+              resolve();
+            }
+          },
+          error => {},
+        );
+    });
+  }
+  
   Transactiondoublelinechartreq(fromDate = '', ToDate = '', interval = '') {
     return new Promise((resolve, reject) => {
       let params = new HttpParams();
@@ -358,6 +394,56 @@ export class GraphListComponent implements OnInit {
     };
   }
 
+  stackchartFunc(DifficultychartDate, Blockval) {
+    this.stackGraphData = {
+      data: [
+        {
+          x: ['giraffes', 'orangutans', 'monkeys'],
+          y: [20, 14, 23],
+          name: 'SF Zoo',
+          type: 'bar',
+          marker: {
+            color: Blockval,
+            colorscale: 'Viridis',
+          },
+        },
+        {
+          x: ['giraffes', 'orangutans', 'monkeys'],
+          y: [12, 18, 29],
+          name: 'LA Zoo',
+          type: 'bar',
+          marker: {
+            color: Blockval,
+            colorscale: 'Viridis',
+          },
+        }
+
+      ],
+      layout: {
+        hovermode: 'closest',
+        height: 250,
+        autosize: true,
+        showlegend: false,
+        barmode: 'stack',
+        xaxis: {
+          tickangle: -45,
+          tickformat: '%m-%d',
+        },
+        yaxis: {
+          title: 'Block',
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          b: 50,
+          t: 50,
+        },
+      },
+      options: null,
+    };
+  }
+
+
   totalBlocksFunc(DifficultychartDate, Blockval) {
     this.barGraphData = {
       data: [