Changes

server/controllers/BlockchainBlock.ts

@@ -1232,7 +1232,7 @@ export class BlockchainBlockController {
           // DifficultyCuckatoo: DifficultyCuckatoo,
           // DifficultyProgpow: DifficultyProgpow,
           Maxrange: Maxrange,
-          Minrange: (Minrange * 0.3),
+          Minrange: (Minrange * 0.2),
           TargetDifficulty: TargetDifficulty
         },
       });

server/i18n/de.json

@@ -8,6 +8,8 @@
 	"hashrate-growth-chart" : "HashRate-Wachstumstabelle",
 	"block-interval" : "Sperrintervall",
     "transactions-vs-date" : "Transaktionen nach Datum",
+    "total-difficulty" : "Gesamtschwierigkeit",
+    "target-difficulty" : "Zielschwierigkeit",
     "home": {
         "HEADER_TEXT": "Sie befinden sich in Beta",
         "COUNTDOWN": "Mainnet-Countdown",
@@ -62,7 +64,6 @@
         "SEARCH_RESULT1" : "Ihr Suchbegriff",
         "SEARCH_RESULT2" : "ist zu kurz",
         "SEARCH_RESULT3" : "Bitte geben Sie mindestens sechs Zeichen ein, wenn Sie nach Hash suchen",
-        "total-difficulty" : "Gesamtschwierigkeit",
         "PEERS" : "Gleichaltrigen",
         "CAPABILITIES" : "Fähigkeiten",
         "USER_AGENT" : "User Agent",

server/i18n/en.json

@@ -8,6 +8,8 @@
 	"hashrate-growth-chart" : "HashRate Growth Chart",
 	"block-interval" : "Block Interval",
     "transactions-vs-date" : "Transactions by Date",
+    "total-difficulty" : "Total Difficulty",
+    "target-difficulty" : "Target Difficulty",
     "home": {
         "HEADER_TEXT": "You are on Beta",
         "COUNTDOWN": "Mainnet Countdown",

src/app/shared/components/plotly/plotly.component.ts

@@ -36,6 +36,9 @@ import {
     }
     @Input() set layout(layout: any) {
       this._layout = layout;
+      if(this._plotlyJs){
+        this.showChart();
+      }
     }
 
     get layout(): any {
@@ -46,6 +49,9 @@ import {
     }
     @Input() set options(options: any) {
        this._options = options;
+       if(this._plotlyJs){
+        this.showChart();
+      }
     }
     get options(): any {
       return this._options;

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

@@ -1,6 +1,63 @@
 <div class="view_content detail_graph py-4">
   <div class="container">
+    <!-- <div *ngIf="this.title=='Total Difficulty'" class="row ">
 
+      <div class="col-md-9">
+        <div class="box_shadow_large bg-white p-3">
+          <div class="overflow-hidden">
+            <div class="blocks detail_graph">
+
+              <h2 class="chart_heading text-uppercase d-inline-block">Total Difficulty</h2>
+              <epic-explorer-plotly *ngIf="linearTotalGraphData.data" [data]="linearTotalGraphData.data"
+                [layout]="linearTotalGraphData.layout">
+              </epic-explorer-plotly>
+              <div class="day_filter diff_margin">
+                <a href="JavaScript:void(0);" (click)="
+          totalDifficultyreq('', '', '1 day',''); selectedTarget = 6; TdifficultyRange = '1 day'
+        " id="6" #itemtarget6 [ngClass]="{ active: selectedTarget == itemtarget6.id, txt_primay: true }">1 Day</a>
+                <a href="JavaScript:void(0);" (click)="
+            totalDifficultyreq('', '', '1 week',''); selectedTarget = 1; TdifficultyRange = '1 week'
+          " id="1" #itemtarget1 [ngClass]="{ active: selectedTarget == itemtarget1.id, txt_primay: true }">1
+                  {{'home.WEEK' | translate}}</a>
+                <a href="JavaScript:void(0);" (click)="
+            totalDifficultyreq('', '', '15 days',''); selectedTarget = 2; TdifficultyRange = '15 days'
+          " id="2" #itemtarget2 [ngClass]="{ active: selectedTarget == itemtarget2.id, day15_txt: true }">15
+                  {{'home.DAYS' | translate}}</a>
+                <a href="JavaScript:void(0);" (click)="
+            totalDifficultyreq('', '', '30 days',''); selectedTarget = 3; TdifficultyRange = '30 days'
+          " id="3" #itemtarget3 [ngClass]="{ active: selectedTarget == itemtarget3.id, day30_txt: true }">30
+                  {{'home.DAYS' | translate}}</a>
+                <a href="JavaScript:void(0);" (click)="
+            totalDifficultyreq('', '', '60 days',''); selectedTarget = 4; TdifficultyRange = '60 days'
+          " id="4" #itemtarget4 [ngClass]="{ active: selectedTarget == itemtarget4.id, day60_txt: true }">60
+                  {{'home.DAYS' | translate}}</a>
+                <a href="JavaScript:void(0);" (click)="
+            totalDifficultyreq('', '', '3 months',''); selectedTarget = 5; TdifficultyRange = '3 months'
+          " id="5" #itemtarget5 [ngClass]="{ active: selectedTarget == itemtarget5.id, day3m_txt: true }">3
+                  {{'home.MONTHS' | translate}}</a>
+              </div>
+              <div class="day_filter">
+                <a href="JavaScript:void(0);" (click)="
+          totalDifficultyreq('', '', TdifficultyRange,'cuckatoo'); selectedTarget12 = 1
+        " id="1" #itemtarget121
+                  [ngClass]="{ active: selectedTarget12 == itemtarget121.id, txt_primay: true }">Cuckoo</a>
+                <a href="JavaScript:void(0);" (click)="
+        totalDifficultyreq('', '', TdifficultyRange,'progpow'); selectedTarget12 = 2
+        " id="2" #itemtarget122
+                  [ngClass]="{ active: selectedTarget12 == itemtarget122.id, txt_primay: true }">ProgPow</a>
+                <a href="JavaScript:void(0);" (click)="
+        totalDifficultyreq('', '', TdifficultyRange,'randomx'); selectedTarget12 = 3
+        " id="3" #itemtarget123
+                  [ngClass]="{ active: selectedTarget12 == itemtarget123.id, txt_primay: true }">RandomX</a>
+              </div>
+
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+    </div> -->
     <div class="row">
 
       <div class="col-md-9">
@@ -8,31 +65,37 @@
           <div class="overflow-hidden">
             <div class="blocks detail_graph">
 
-            <h2 class="chart_heading text-uppercase d-inline-block">{{this.title=='Total Difficulty' ? 'Target Difficulty' : this.chartType | translate}}</h2>
+              <h2 class="chart_heading text-uppercase d-inline-block">
+                {{chartType | translate}}</h2>
               <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'">
 
-      <a href="JavaScript:void(0);" *ngIf="this.title=='Total Difficulty'" (click)="
+                <a href="JavaScript:void(0);" *ngIf="this.title=='Total Difficulty' || this.title=='Target Difficulty'" (click)="
             ChartFromView('', '', '1 day', comp.Type); selectedItem = 6; comp.difficultyRange = '1 day'
               " id="6" #item6 [ngClass]="{ active: selectedItem == item6.id, txt_primay: true }">1 Day</a>
                 <a href="JavaScript:void(0);" (click)="
             ChartFromView('', '', '1 week', comp.Type); selectedItem = 1; comp.difficultyRange = '1 week'
-              " id="1" #item1 [ngClass]="{ active: selectedItem == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
+              " id="1" #item1 [ngClass]="{ active: selectedItem == item1.id, txt_primay: true }">1
+                  {{'home.WEEK' | translate}}</a>
                 <a href="JavaScript:void(0);" (click)="
             ChartFromView('', '', '15 days', comp.Type); selectedItem = 2; comp.difficultyRange = '15 days'
-              " id="2" #item2 [ngClass]="{ active: selectedItem == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
+              " id="2" #item2 [ngClass]="{ active: selectedItem == item2.id, day15_txt: true }">15
+                  {{'home.DAYS' | translate}}</a>
                 <a href="JavaScript:void(0);" (click)="
             ChartFromView('', '', '30 days', comp.Type); selectedItem = 3; comp.difficultyRange = '30 days'
-              " id="3" #item3 [ngClass]="{ active: selectedItem == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
+              " id="3" #item3 [ngClass]="{ active: selectedItem == item3.id, day30_txt: true }">30
+                  {{'home.DAYS' | translate}}</a>
                 <a href="JavaScript:void(0);" (click)="
             ChartFromView('', '', '60 days', comp.Type); selectedItem = 4; comp.difficultyRange = '60 days'
-              " id="4" #item4 [ngClass]="{ active: selectedItem == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
+              " id="4" #item4 [ngClass]="{ active: selectedItem == item4.id, day60_txt: true }">60
+                  {{'home.DAYS' | translate}}</a>
                 <a href="JavaScript:void(0);" (click)="
             ChartFromView('', '', '3 months', comp.Type); selectedItem = 5; comp.difficultyRange = '3 months'
-              " id="5" #item5 [ngClass]="{ active: selectedItem == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
+              " id="5" #item5 [ngClass]="{ active: selectedItem == item5.id, day3m_txt: true }">3
+                  {{'home.MONTHS' | translate}}</a>
               </div>
-          <div class="day_filter"  *ngIf="this.title=='Total Difficulty'">
+              <div class="day_filter" *ngIf="this.title=='Target Difficulty'">
                 <a href="JavaScript:void(0);" (click)="
             ChartFromView('', '', comp.difficultyRange,'cuckatoo'); selectedItem12 = 1
           " id="1" #item121 [ngClass]="{ active: selectedItem12 == item121.id, txt_primay: true }">Cuckoo</a>
@@ -41,14 +104,30 @@
           " id="2" #item122 [ngClass]="{ active: selectedItem12 == item122.id, txt_primay: true }">ProgPow</a>
                 <a href="JavaScript:void(0);" (click)="
           ChartFromView('', '', comp.difficultyRange,'randomx'); selectedItem12 = 3
+          " id="3" #item123 [ngClass]="{ active: selectedItem12 == item123.id, txt_primay: true }">RandomX</a>
+              </div>
+              <div class="day_filter" *ngIf="this.title=='Total Difficulty'">
+                  <a href="JavaScript:void(0);" (click)="
+              ChartFromView('', '', comp.TdifficultyRange,'cuckatoo'); selectedItem12 = 1
+            " id="1" #item121 [ngClass]="{ active: selectedItem12 == item121.id, txt_primay: true }">Cuckoo</a>
+                  <a href="JavaScript:void(0);" (click)="
+            ChartFromView('', '', comp.TdifficultyRange,'progpow'); selectedItem12 = 2
+            " id="2" #item122 [ngClass]="{ active: selectedItem12 == item122.id, txt_primay: true }">ProgPow</a>
+                  <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 class="day_filter" *ngIf="this.title=='Transactions over time'">
-              <a href="JavaScript:void(0);" (click)="ChartFromView(GraphtDate, GraphtHour, GraphtInput,'Input'); selectedItem8 = 1" id="1" #item1
+                <a href="JavaScript:void(0);"
+                  (click)="ChartFromView(GraphtDate, GraphtHour, GraphtInput,'Input'); selectedItem8 = 1" id="1" #item1
                   [ngClass]="{ active: selectedItem8 == item1.id, txt_primay: true }">{{'home.INPUT' | translate}}</a>
-            <a href="JavaScript:void(0);" (click)="ChartFromView(GraphtDate, GraphtHour, GraphtKernal,'Kernal'); selectedItem8 = 2" id="2" #item2
+                <a href="JavaScript:void(0);"
+                  (click)="ChartFromView(GraphtDate, GraphtHour, GraphtKernal,'Kernal'); selectedItem8 = 2" id="2"
+                  #item2
                   [ngClass]="{ active: selectedItem8 == item2.id, day15_txt: true }">{{'home.KERNELS' | translate}}</a>
-            <a href="JavaScript:void(0);" (click)="ChartFromView(GraphtDate, GraphtHour, GraphtOutput,'Output'); selectedItem8 = 3" id="3" #item3
+                <a href="JavaScript:void(0);"
+                  (click)="ChartFromView(GraphtDate, GraphtHour, GraphtOutput,'Output'); selectedItem8 = 3" id="3"
+                  #item3
                   [ngClass]="{ active: selectedItem8 == item3.id, day30_txt: true }">{{'home.OUTPUT' | translate}}</a>
               </div>
 
@@ -72,70 +151,33 @@
         <div class="box_shadow_large bg-white p-3">
           <h2 class="chart_heading mb-2 d-inline-block">{{'home.EXPLORE' | translate}}</h2>
           <ul class="list-unstyled pl-3">
-          <li class="mb-1" *ngIf="this.title!='Total Difficulty'"><a routerLink="/chart/difficulty">{{'home.DIFFICULTY' | translate}}</a></li>
+            <li class="mb-1" *ngIf="this.title!='Target Difficulty'"><a
-          <li class="mb-1" *ngIf="this.title!='Transactions over time'"><a routerLink="/chart/transactions-by-time">{{'home.TRANSACTIONS_BY_TIME' | translate}}</a></li>
+                routerLink="/chart/target-difficulty">{{'target-difficulty' | translate}}</a></li>
-          <li class="mb-1" *ngIf="this.title!='Blocks'"><a routerLink="/chart/blocks">{{'home.BLOCKS' | translate}}</a></li>
+            <li class="mb-1" *ngIf="this.title!='Total Difficulty'"><a
-          <li class="mb-1" *ngIf="this.title!='Blocks Mined'"><a routerLink="/chart/blocks-mined">{{'home.BLOCKS_MINED' | translate}}</a></li>
+              routerLink="/chart/total-difficulty">{{'total-difficulty' | translate}}</a></li>
-          <li class="mb-1" *ngIf="this.title!='Transaction Fees'"><a routerLink="/chart/transaction-fees">{{'home.TRANSACTION_FEES' | translate}}</a></li>
+            <li class="mb-1" *ngIf="this.title!='Transactions over time'"><a
-          <li class="mb-1" *ngIf="this.title!='Supply Growth'"><a routerLink="/chart/supply-growth">{{'home.SUPPLY_GROWTH' | translate}}</a></li>
+                routerLink="/chart/transactions-by-time">{{'home.TRANSACTIONS_BY_TIME' | translate}}</a></li>
+            <li class="mb-1" *ngIf="this.title!='Blocks'"><a
+                routerLink="/chart/blocks">{{'home.BLOCKS' | translate}}</a></li>
+            <li class="mb-1" *ngIf="this.title!='Blocks Mined'"><a
+                routerLink="/chart/blocks-mined">{{'home.BLOCKS_MINED' | translate}}</a></li>
+            <li class="mb-1" *ngIf="this.title!='Transaction Fees'"><a
+                routerLink="/chart/transaction-fees">{{'home.TRANSACTION_FEES' | translate}}</a></li>
+            <li class="mb-1" *ngIf="this.title!='Supply Growth'"><a
+                routerLink="/chart/supply-growth">{{'home.SUPPLY_GROWTH' | translate}}</a></li>
             <!-- <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 over time'"><a routerLink="/chart/block-interval">{{'home.BLOCK_INTERVAL' | translate}}</a></li>
+            <li class="mb-1" *ngIf="this.title!='Transactions over time'"><a
-          <li class="mb-1" *ngIf="this.title!='Transactions by Date'"><a routerLink="/chart/transactions-vs-date">{{'home.TRANSACTIONS_VS_DATE' | translate}}</a></li>
+                routerLink="/chart/block-interval">{{'home.BLOCK_INTERVAL' | 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!='Transactions by 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>
 
     </div>
-      <div *ngIf="this.title=='Total Difficulty'" class="row mt-3">
 
-          <div class="col-md-9">
-              <div class="box_shadow_large bg-white p-3">
-              <div class="overflow-hidden">
-                <div class="blocks detail_graph">
-
-            <h2 class="chart_heading text-uppercase d-inline-block">Total Difficulty</h2>
-  <epic-explorer-plotly *ngIf="linearTotalGraphData.data" [data]="linearTotalGraphData.data" [layout]="linearTotalGraphData.layout">
-  </epic-explorer-plotly>
-  <div class="day_filter diff_margin">
-      <a href="JavaScript:void(0);" (click)="
-        totalDifficultyreq('', '', '1 day',''); selectedTarget = 6; TdifficultyRange = '1 day'
-      " id="6" #itemtarget6 [ngClass]="{ active: selectedTarget == itemtarget6.id, txt_primay: true }">1 Day</a>
-      <a href="JavaScript:void(0);" (click)="
-          totalDifficultyreq('', '', '1 week',''); selectedTarget = 1; TdifficultyRange = '1 week'
-        " id="1" #itemtarget1 [ngClass]="{ active: selectedTarget == itemtarget1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
-      <a href="JavaScript:void(0);" (click)="
-          totalDifficultyreq('', '', '15 days',''); selectedTarget = 2; TdifficultyRange = '15 days'
-        " id="2" #itemtarget2 [ngClass]="{ active: selectedTarget == itemtarget2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
-      <a href="JavaScript:void(0);" (click)="
-          totalDifficultyreq('', '', '30 days',''); selectedTarget = 3; TdifficultyRange = '30 days'
-        " id="3" #itemtarget3 [ngClass]="{ active: selectedTarget == itemtarget3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
-      <a href="JavaScript:void(0);" (click)="
-          totalDifficultyreq('', '', '60 days',''); selectedTarget = 4; TdifficultyRange = '60 days'
-        " id="4" #itemtarget4 [ngClass]="{ active: selectedTarget == itemtarget4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
-      <a href="JavaScript:void(0);" (click)="
-          totalDifficultyreq('', '', '3 months',''); selectedTarget = 5; TdifficultyRange = '3 months'
-        " id="5" #itemtarget5 [ngClass]="{ active: selectedTarget == itemtarget5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
-    </div>
-    <div class="day_filter">
-        <a href="JavaScript:void(0);" (click)="
-        totalDifficultyreq('', '', TdifficultyRange,'cuckatoo'); selectedTarget12 = 1
-      " id="1" #itemtarget121 [ngClass]="{ active: selectedTarget12 == itemtarget121.id, txt_primay: true }">Cuckoo</a>
-      <a href="JavaScript:void(0);" (click)="
-      totalDifficultyreq('', '', TdifficultyRange,'progpow'); selectedTarget12 = 2
-      " id="2" #itemtarget122 [ngClass]="{ active: selectedTarget12 == itemtarget122.id, txt_primay: true }">ProgPow</a>
-      <a href="JavaScript:void(0);" (click)="
-      totalDifficultyreq('', '', TdifficultyRange,'randomx'); selectedTarget12 = 3
-      " id="3" #itemtarget123 [ngClass]="{ active: selectedTarget12 == itemtarget123.id, txt_primay: true }">RandomX</a>
-  </div>
-
-          </div>
-
-      </div>
-      </div>
-    </div>
-
-      </div>
   </div>
 </div>

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

@@ -55,20 +55,35 @@ export class GraphDetailComponent implements OnInit {
       this.chartType = params['hashid'];
       //console.log(this.chartType);
     switch(this.chartType){
-      case 'difficulty':
+      case 'total-difficulty':
-        this.totalDifficultyreq();
+        // this.totalDifficultyreq();
-          this.comp.Difficultyreq().then(res => {
+          this.comp.Difficultyreq('total').then(res => {
-            this.hashdata = this.comp.linearGraphData;
+            this.hashdata = this.comp.linearTotalGraphData;
+            console.log('this.comp.linearTotalGraphData',this.comp.linearTotalGraphData);
             this.hashdata.layout.height = 500;
             this.title = 'Total Difficulty';
             this.selectedItem = 6;
-            this.selectedTarget = 6;
             this.titleService.setTitle(
               this.route.snapshot.data.title + ' - ' + this.title,
             );
             //console.log(this.hashdata);
           });
           break;
+        case 'target-difficulty':
+            // this.totalDifficultyreq();
+              this.comp.Difficultyreq('target').then(res => {
+                this.hashdata = this.comp.linearGraphData;
+                console.log('this.comp.linearGraphData',this.comp.linearGraphData);
+                this.hashdata.layout.height = 500;
+                this.title = 'Target Difficulty';
+                this.selectedItem = 6;
+                this.titleService.setTitle(
+                  this.route.snapshot.data.title + ' - ' + this.title,
+                );
+                //console.log(this.hashdata);
+              });
+              break;
+        
       case 'transactions-by-time':
           this.comp.Transactionheatmapreq().then(res => {
             this.hashdata = this.comp.heatMapGrowthData;
@@ -200,13 +215,20 @@ export class GraphDetailComponent implements OnInit {
   ) {
     // (p1, p2, p3, p4, p5) for (fromDate, ToDate, interval, fordifficult, forblocks) for difficult and nar chart
     // AND For heatmap and others - It will change
-    this.comp.Type = p4 != '' ? p4 : this.comp.Type == '' ? 'cuckatoo' : this.comp.Type;
+    this.comp.Type = p4 != '' && (p4 == 'cuckatoo' || p4 == 'progpow' || p4 == 'randomx') ? p4 : this.comp.Type == '' ? 'cuckatoo' : this.comp.Type;
 
     switch (this.chartType) {
-      case 'difficulty':
+      case 'target-difficulty':
-        this.comp.Difficultyreq(p1, p2, p3, p4).then(res => {
+        this.comp.Difficultyreq('target',p1, p2, p3, p4).then(res => {
           this.hashdata = this.comp.linearGraphData;
           this.hashdata.layout.height = 500;
+          this.title = 'Target Difficulty';
+        });
+        break;
+        case 'total-difficulty':
+        this.comp.Difficultyreq('total',p1, p2, p3, p4).then(res => {
+          this.hashdata = this.comp.linearTotalGraphData;
+          this.hashdata.layout.height = 500;
           this.title = 'Total Difficulty';
         });
         break;
@@ -221,7 +243,7 @@ export class GraphDetailComponent implements OnInit {
         });
         break;
       case 'blocks':
-        this.comp.Difficultyreq(p1, p2, p3).then(res => {
+        this.comp.blockreq(p1, p2, p3).then(res => {
           this.hashdata = this.comp.barGraphData;
           this.hashdata.layout.height = 500;
           this.title = 'Blocks';
@@ -296,74 +318,46 @@ export class GraphDetailComponent implements OnInit {
     }
   }
 
-  totalDifficultyreq(
-    fromDate = '',
-    ToDate = '',
-    interval = '',
-    type = ''
-  ) {
-    this.Type = type != '' ? type : this.Type == '' ? 'cuckatoo' : this.Type;
-    return new Promise((resolve, reject) => {
-      let params = new HttpParams();
-      params = params.append('FromDate', fromDate);
-      params = params.append('ToDate', ToDate);
-      params = params.append('Interval', interval);
-      params = params.append('Type', this.Type);
-      params = params.append('Difftype', 'total');
-      this.chartService
-        .apiGetRequest(params, '/blockchain_block/totaldiff')
-        .subscribe(
-          res => {
-            if (res['status'] == 200) {
-              let DifficultychartDate = res.response.Date;
-                let TargetDifficulty = res.response.TargetDifficulty;
   
-                this.totaldifficultyChartFunc(
-                  DifficultychartDate,
-                  TargetDifficulty,
-                  this.Type
-                );
-              resolve();
-            }
-          },
-          error => {},
-        );
-    });
-  }
 
-  totaldifficultyChartFunc(DifficultychartDate, TargetDifficulty, Type) {
+  // totaldifficultyChartFunc(DifficultychartDate, TargetDifficulty, Type, range) {
-    this.linearTotalGraphData = {
+  //   this.linearTotalGraphData = {
-      data: [
+  //     data: [
-        {
+  //       {
-          x: DifficultychartDate,
+  //         x: DifficultychartDate,
-          y: TargetDifficulty,
+  //         y: TargetDifficulty,
-          text: TargetDifficulty,
+  //         text: TargetDifficulty,
-          mode: 'lines+markers',
+  //         mode: 'lines+markers',
-          type: 'scatter',
+  //         type: 'scatter',
-          name: '',
+  //         name: '',
-          line: { color: '#ac3333' },
+  //         line: { color: '#ac3333' },
-          hovertemplate: '%{x}<br> Difficulty : %{text:,}',
+  //         hovertemplate: '%{x}<br> Difficulty : %{text:,}',
-        },
+  //       },
-      ],
+  //     ],
-      layout: {
+  //     layout: {
-        hovermode: 'closest',
+  //       hovermode: 'closest',
-        height: 250,
+  //       height: 500,
-        autosize: true,
+  //       autosize: true,
-        showlegend: false,
+  //       showlegend: false,
-        xaxis: {
+  //       xaxis: {
-          tickangle: -45,
+  //         tickangle: -45,
-          tickformat: '%m-%d',
+  //         tickformat: '%m-%d',
-        },
+  //         fixedrange: true,
-        yaxis: {
+  //         showgrid: true
-          title: 'Diff',
+  //       },
-        },
+  //       yaxis: {
-        margin: {
+  //         title: 'Diff',
-          l: 50,
+  //         fixedrange: true,
-          r: 50,
+  //         showgrid: true,
-          b: 50,
+  //         range: range
-          t: 50,
+  //       },
-        },
+  //       margin: {
-      },
+  //         l: 50,
-    };
+  //         r: 50,
-  }
+  //         b: 50,
+  //         t: 50,
+  //       },
+  //     },
+  //   };
+  // }
 }

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

@@ -25,38 +25,109 @@
       </div>
       <div class="day_filter diff_margin">
         <a href="JavaScript:void(0);" (click)="
-          Difficultyreq('', '', '1 day',''); selectedItem = 6; difficultyRange = '1 day'
+          Difficultyreq('target', '', '', '1 day',''); selectedItem = 6; difficultyRange = '1 day'
         " id="6" #item6 [ngClass]="{ active: selectedItem == item6.id, txt_primay: true }">1 Day</a>
         <a href="JavaScript:void(0);" (click)="
-            Difficultyreq('', '', '1 week',''); selectedItem = 1; difficultyRange = '1 week'
+            Difficultyreq('target', '', '', '1 week',''); selectedItem = 1; difficultyRange = '1 week'
           " id="1" #item1 [ngClass]="{ active: selectedItem == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="
-            Difficultyreq('', '', '15 days',''); selectedItem = 2; difficultyRange = '15 days'
+            Difficultyreq('target', '', '', '15 days',''); selectedItem = 2; difficultyRange = '15 days'
           " id="2" #item2 [ngClass]="{ active: selectedItem == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="
-            Difficultyreq('', '', '30 days',''); selectedItem = 3; difficultyRange = '30 days'
+            Difficultyreq('target', '', '', '30 days',''); selectedItem = 3; difficultyRange = '30 days'
           " id="3" #item3 [ngClass]="{ active: selectedItem == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="
-            Difficultyreq('', '', '60 days',''); selectedItem = 4; difficultyRange = '60 days'
+            Difficultyreq('target', '', '', '60 days',''); selectedItem = 4; difficultyRange = '60 days'
           " id="4" #item4 [ngClass]="{ active: selectedItem == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="
-            Difficultyreq('', '', '3 months',''); selectedItem = 5; difficultyRange = '3 months'
+            Difficultyreq('target', '', '', '3 months',''); selectedItem = 5; difficultyRange = '3 months'
           " id="5" #item5 [ngClass]="{ active: selectedItem == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
       </div>
 
       <div class="explore_all text-right">
           <div class="d-inline float-left difficulty_filter day_filter p-0 bg-transparent">
               <a href="JavaScript:void(0);" (click)="
-              Difficultyreq('', '', difficultyRange,'cuckatoo'); selectedItem12 = 1
+              Difficultyreq('target', '', '', difficultyRange,'cuckatoo'); selectedItem12 = 1
             " id="1" #item121 [ngClass]="{ active: selectedItem12 == item121.id, txt_primay: true }">Cuckoo</a>
             <a href="JavaScript:void(0);" (click)="
-              Difficultyreq('', '', difficultyRange,'progpow'); selectedItem12 = 2
+              Difficultyreq('target', '', '', difficultyRange,'progpow'); selectedItem12 = 2
             " id="2" #item122 [ngClass]="{ active: selectedItem12 == item122.id, txt_primay: true }">ProgPow</a>
             <a href="JavaScript:void(0);" (click)="
-              Difficultyreq('', '', difficultyRange,'randomx'); selectedItem12 = 3
+              Difficultyreq('target', '', '', difficultyRange,'randomx'); selectedItem12 = 3
             " id="3" #item123 [ngClass]="{ active: selectedItem12 == item123.id, txt_primay: true }">RandomX</a>
         </div>
-        <a routerLink="/chart/difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i
+        <a routerLink="/chart/target-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i
+          class="fa fa-long-arrow-right"></i></span></a>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-lg-4 mb-4">
+      <div class="box_shadow">
+        <div class="blocks">
+          <h2 class="chart_heading d-inline-block">{{'home.TOTAL_DIFFICULTY' | translate}}</h2>
+          <!-- <span class="txn_count" *ngIf="this.lg_last.length > 0"><span *ngFor="let l of lg_last">{{
+            this.l | number</span>
+          }}</span> -->
+          <div class="chart_show">
+              <epic-explorer-plotly *ngIf="linearTotalGraphData.data" [data]="linearTotalGraphData.data"
+              [layout]="linearTotalGraphData.layout">
+            </epic-explorer-plotly>
+            <div *ngIf="!linearTotalGraphData.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 diff_margin">
+            <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>
+            <a href="JavaScript:void(0);" (click)="
+        Difficultyreq('total', '', '', '1 week',''); selectedTarget = 1; TdifficultyRange = '1 week'
+      " id="1" #itemtarget1 [ngClass]="{ active: selectedTarget == itemtarget1.id, txt_primay: true }">1
+              {{'home.WEEK' | translate}}</a>
+            <a href="JavaScript:void(0);" (click)="
+        Difficultyreq('total', '', '', '15 days',''); selectedTarget = 2; TdifficultyRange = '15 days'
+      " id="2" #itemtarget2 [ngClass]="{ active: selectedTarget == itemtarget2.id, day15_txt: true }">15
+              {{'home.DAYS' | translate}}</a>
+            <a href="JavaScript:void(0);" (click)="
+        Difficultyreq('total', '', '', '30 days',''); selectedTarget = 3; TdifficultyRange = '30 days'
+      " id="3" #itemtarget3 [ngClass]="{ active: selectedTarget == itemtarget3.id, day30_txt: true }">30
+              {{'home.DAYS' | translate}}</a>
+            <a href="JavaScript:void(0);" (click)="
+        Difficultyreq('total', '', '', '60 days',''); selectedTarget = 4; TdifficultyRange = '60 days'
+      " id="4" #itemtarget4 [ngClass]="{ active: selectedTarget == itemtarget4.id, day60_txt: true }">60
+              {{'home.DAYS' | translate}}</a>
+            <a href="JavaScript:void(0);" (click)="
+        Difficultyreq('total', '', '', '3 months',''); selectedTarget = 5; TdifficultyRange = '3 months'
+      " id="5" #itemtarget5 [ngClass]="{ active: selectedTarget == itemtarget5.id, day3m_txt: true }">3
+              {{'home.MONTHS' | translate}}</a>
+          </div>
+  
+        <div class="explore_all text-right">
+            <div class="d-inline float-left difficulty_filter day_filter p-0 bg-transparent">
+                <a href="JavaScript:void(0);" (click)="
+                Difficultyreq('total', '', '', TdifficultyRange,'cuckatoo'); selectedTarget12 = 1
+              " id="1" #itemtarget121
+                        [ngClass]="{ active: selectedTarget12 == itemtarget121.id, txt_primay: true }">Cuckoo</a>
+                      <a href="JavaScript:void(0);" (click)="
+              Difficultyreq('total', '', '', TdifficultyRange,'progpow'); selectedTarget12 = 2
+              " id="2" #itemtarget122
+                        [ngClass]="{ active: selectedTarget12 == itemtarget122.id, txt_primay: true }">ProgPow</a>
+                      <a href="JavaScript:void(0);" (click)="
+              Difficultyreq('total', '', '', TdifficultyRange,'randomx'); selectedTarget12 = 3
+              " id="3" #itemtarget123
+                        [ngClass]="{ active: selectedTarget12 == itemtarget123.id, txt_primay: true }">RandomX</a>
+          </div>
+          <a routerLink="/chart/total-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i
             class="fa fa-long-arrow-right"></i></span></a>
         </div>
       </div>

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

@@ -24,6 +24,7 @@ export class GraphListComponent implements OnInit {
   public transcationGraphData: any = [];
   public stackGraphData: any = [];
   public pieGraphData: any = [];
+  public linearTotalGraphData: any = [];
 
   public lg_last: any;
   public ag_last: any = '';
@@ -49,6 +50,8 @@ export class GraphListComponent implements OnInit {
   public selectedItem10: Number = 3;
   public selectedItem11: Number = 3;
   public selectedItem12: Number = 1;
+  public selectedTarget: Number = 6;
+  public selectedTarget12: Number = 1;
 
   public tInput: any;
   public tOutput: any;
@@ -57,6 +60,7 @@ export class GraphListComponent implements OnInit {
   public tHour: any;
   public Type: any = '';
   public difficultyRange: any = '1 day';
+  public TdifficultyRange: any = '1 day';
 
   viewchartvar: boolean;
 
@@ -71,8 +75,8 @@ export class GraphListComponent implements OnInit {
 
   ngOnInit() {
     /* Total Difficulty and blocks chart fetching */
-    this.Difficultyreq();
+    this.Difficultyreq('target');
-
+    this.Difficultyreq('total');
     this.blockreq();
 
     /* Transcation fee chart fetching */
@@ -376,6 +380,7 @@ export class GraphListComponent implements OnInit {
   }
 
   Difficultyreq(
+    difftype = '',
     fromDate = '',
     ToDate = '',
     interval = '',
@@ -388,6 +393,7 @@ export class GraphListComponent implements OnInit {
       params = params.append('ToDate', ToDate);
       params = params.append('Interval', interval);
       params = params.append('Type', this.Type);
+      params = params.append('Difftype', difftype);
       this.chartService
         .apiGetRequest(params, '/blockchain_block/totaldiff')
         .subscribe(
@@ -396,13 +402,28 @@ export class GraphListComponent implements OnInit {
               let DifficultychartDate = res.response.Date;
               let BlocksChartDate = res.response.blockDate;
                 let TargetDifficulty = res.response.TargetDifficulty;
+                let range = [res.response.Minrange, res.response.Maxrange]
                 this.lg_last =
                 TargetDifficulty[TargetDifficulty.length - 1];
+                
+                switch(difftype){
+                  case 'total':
+                      this.totaldifficultyChartFunc(
+                        DifficultychartDate,
+                        TargetDifficulty,
+                        this.Type,
+                        range
+                      );
+                    break;
+                  case 'target':
                       this.difficultyChartFunc(
                         DifficultychartDate,
                         TargetDifficulty,
-                  this.Type
+                        this.Type,
+                        range
                       );
+                   break;
+                }
               resolve();
             }
           },
@@ -439,7 +460,8 @@ export class GraphListComponent implements OnInit {
     });
   }
 
-  difficultyChartFunc(DifficultychartDate, TargetDifficulty, Type) {
+  difficultyChartFunc(DifficultychartDate, TargetDifficulty, Type, range) {
+    console.log('range rangerangerange@@@@@@@22444',range);
     this.linearGraphData = {
       data: [
         {
@@ -491,9 +513,14 @@ export class GraphListComponent implements OnInit {
         xaxis: {
           tickangle: -45,
           tickformat: '%m-%d',
+          showgrid: true,
+          fixedrange: true
         },
         yaxis: {
           title: 'Diff',
+          showgrid: true,
+          fixedrange: true,
+          range: range
         },
         margin: {
           l: 50,
@@ -574,7 +601,7 @@ export class GraphListComponent implements OnInit {
           title: 'Blocks',
           rangemode: 'nonnegative',
           fixedrange: true,
-          showgrid: true,
+          showgrid: true
         },
         margin: {
           l: 50,
@@ -607,9 +634,13 @@ export class GraphListComponent implements OnInit {
        xaxis: {
           tickangle: -45,
           tickformat: '%m-%d',
+          showgrid: true,
+          fixedrange: true
         },
         yaxis: {
           title: 'Blocks',
+          showgrid: true,
+          fixedrange: true
         },
         margin: {
           l: 50,
@@ -647,9 +678,13 @@ export class GraphListComponent implements OnInit {
         xaxis: {
           tickangle: -45,
           tickformat: '%m-%d',
+          showgrid: true,
+          fixedrange: true
         },
         yaxis: {
           title: 'Blocks',
+          showgrid: true,
+          fixedrange: true
         },
         margin: {
           l: 50,
@@ -1032,10 +1067,13 @@ export class GraphListComponent implements OnInit {
           showgrid: false,
           zeroline: false,
           tickformat: '%m-%d',
+          fixedrange: true
         },
         yaxis: {
           showline: false,
           title: 'Estimated Hashrate (GH/s)',
+          showgrid: true,
+          fixedrange: true
         },
         margin: {
           l: 50,
@@ -1048,4 +1086,44 @@ export class GraphListComponent implements OnInit {
       options: null,
     };
   }
+  totaldifficultyChartFunc(DifficultychartDate, TargetDifficulty, Type, range) {
+    this.linearTotalGraphData = {
+      data: [
+        {
+          x: DifficultychartDate,
+          y: TargetDifficulty,
+          text: TargetDifficulty,
+          mode: 'lines+markers',
+          type: 'scatter',
+          name: '',
+          line: { color: '#ac3333' },
+          hovertemplate: '%{x}<br> Difficulty : %{text:,}',
+        },
+      ],
+      layout: {
+        hovermode: 'closest',
+        height: 250,
+        autosize: true,
+        showlegend: false,
+        xaxis: {
+          tickangle: -45,
+          tickformat: '%m-%d',
+          fixedrange: true,
+          showgrid: true
+        },
+        yaxis: {
+          title: 'Diff',
+          fixedrange: true,
+          showgrid: true,
+          range: range
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          b: 50,
+          t: 50,
+        },
+      },
+    };
+  }
 }