Changes

server/i18n/de.json

@@ -1,5 +1,5 @@
 {
-	"total-difficulty" : "Gesamtschwierigkeit",
+	"difficulty" : "Schwierigkeit",
 	"transactions-by-time" : "Transaktionen im Zeitverlauf",
 	"blocks" : "Blöcke",
 	"transaction-fees" : "Transkationsgebühren",

server/i18n/en.json

@@ -1,5 +1,5 @@
 {
-	"total-difficulty" : "Total Difficulty",
+	"difficulty" : "Difficulty",
 	"transactions-by-time" : "Transactions over time",
 	"blocks" : "Blocks",
 	"transaction-fees" : "Transaction Fees",

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

@@ -8,7 +8,7 @@
               <div class="overflow-hidden">
                 <div class="blocks detail_graph">
 
-            <h2 class="chart_heading text-uppercase d-inline-block">{{this.chartType | translate}}</h2>
+            <h2 class="chart_heading text-uppercase d-inline-block">{{this.title=='Total Difficulty' ? 'Target Difficulty' : this.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'">
@@ -32,7 +32,7 @@
             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>
           </div>
-          <div class="day_filter"  *ngIf="this.title!='Transactions over time'">
+          <div class="day_filter"  *ngIf="this.title=='Total 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>
@@ -72,7 +72,7 @@
        <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/total-difficulty">{{'home.TOTAL_DIFFICULTY' | translate}}</a></li>
+          <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!='Transactions over time'"><a 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>
@@ -87,6 +87,55 @@
        </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

@@ -25,13 +25,16 @@ export class GraphDetailComponent implements OnInit {
   public selectedItem8: Number = 2;
   public selectedItem12: Number = 1;
   public Type: any = '';
-
+  public selectedTarget: Number = 3;
+  public selectedTarget12: Number = 1;
   
   public GraphtInput: any;
   public GraphtOutput: any;
   public GraphtKernal: any;
   public GraphtDate: any;
   public GraphtHour: any;
+  public linearTotalGraphData: any = [];
+  public TdifficultyRange: any = '1 day';
 
   constructor(
     private route: ActivatedRoute,
@@ -41,9 +44,7 @@ export class GraphDetailComponent implements OnInit {
     public translate: TransServiceService
   ) {}
   ngOnInit() {
-    if(this.title=='Total Difficulty'){
+
-      this.selectedItem = 6;
-    }
     var self = this;
     var x = setInterval(function() {
       self.TimeArr = self.chartService.GetTimer()
@@ -54,11 +55,14 @@ export class GraphDetailComponent implements OnInit {
       this.chartType = params['hashid'];
       //console.log(this.chartType);
     switch(this.chartType){
-      case 'total-difficulty':
+      case 'difficulty':
+        this.totalDifficultyreq();
           this.comp.Difficultyreq().then(res => {
             this.hashdata = this.comp.linearGraphData;
             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,
             );
@@ -199,7 +203,7 @@ export class GraphDetailComponent implements OnInit {
     this.comp.Type = p4 != '' ? p4 : this.comp.Type == '' ? 'cuckatoo' : this.comp.Type;
 
     switch (this.chartType) {
-      case 'total-difficulty':
+      case 'difficulty':
         this.comp.Difficultyreq(p1, p2, p3, p4).then(res => {
           this.hashdata = this.comp.linearGraphData;
           this.hashdata.layout.height = 500;
@@ -291,4 +295,75 @@ export class GraphDetailComponent implements OnInit {
         break;
     }
   }
+
+  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) {
+    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',
+        },
+        yaxis: {
+          title: 'Diff',
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          b: 50,
+          t: 50,
+        },
+      },
+    };
+  }
 }

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

@@ -23,7 +23,7 @@
           </div>
         </div>
       </div>
-      <div class="day_filter">
+      <div class="day_filter diff_margin">
         <a href="JavaScript:void(0);" (click)="
           Difficultyreq('', '', '1 day',''); selectedItem = 6; difficultyRange = '1 day'
         " id="6" #item6 [ngClass]="{ active: selectedItem == item6.id, txt_primay: true }">1 Day</a>
@@ -45,7 +45,7 @@
       </div>
 
       <div class="explore_all text-right">
-          <div class="d-inline float-left difficulty_filter">
+          <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
             " id="1" #item121 [ngClass]="{ active: selectedItem12 == item121.id, txt_primay: true }">Cuckoo</a>
@@ -56,7 +56,7 @@
               Difficultyreq('', '', difficultyRange,'randomx'); selectedItem12 = 3
             " id="3" #item123 [ngClass]="{ active: selectedItem12 == item123.id, txt_primay: true }">RandomX</a>
         </div>
-        <a routerLink="/chart/total-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i
+        <a routerLink="/chart/difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i
           class="fa fa-long-arrow-right"></i></span></a>
       </div>
     </div>

src/assets/css/style.css

@@ -644,3 +644,4 @@ body.dark_theme {
 .dark_theme .tab_hdng{color: #ffffff;}
 .dark_theme .view_content table{border-color: #384566;}
 .dark_theme .card-body{background-color: #1c2437;}
+.diff_margin{margin-bottom: -10px !important; margin-top: -10px !important;}