halving and block mined chart

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

@@ -122,7 +122,7 @@
                 <div class="view_moble_tble web_hdng">
                     <div class="row">
                         <div class="col-lg-2">
-                         <div class="block_div"><h5 class="mb-0">{{'home.COMMIT' | translate}}</h5></div>
+                         <div class="block_div"><h5 class="mb-0 text-capitalize">{{'home.COMMIT' | translate}}</h5></div>
                         </div>
 
 
@@ -177,7 +177,7 @@
                           <div class="block_div"><h5 class="mb-0">{{'home.SPENT' | translate}}</h5></div>
                         </div>
                       <div class="col-lg-8 order-2">
-                        <div class="block_div"><h5 class="mb-0">{{'home.COMMIT' | translate}}</h5></div>
+                        <div class="block_div"><h5 class="mb-0 text-capitalize">{{'home.COMMIT' | translate}}</h5></div>
                       </div>
 
 

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

@@ -56,6 +56,10 @@ export class BlockDetailComponent implements OnInit {
           if (res['status'] == 200) {
             this.hasdata = true;
             this.hashdata = res.response;
+            //console.log(res.response.BlockchainBlockOutputFetchQuery);
+            if(res.response.BlockchainBlockOutputFetchQuery){
+              res.response.BlockchainBlockOutputFetchQuery.sort((a,b)=> (a.OutputType > b.OutputType ? 1 : -1))
+            }
           }
         },
         error => {

src/app/view/home/block-detail-list/block-detail-list.component.html

@@ -27,10 +27,13 @@
 <div class="row">
 
 
-  <div class="col-sm-7  col-md-8 mb-4">
+  <div class="col-sm-7 col-md-8 mb-2">
     <div class="position-relative">
       <epic-explorer-search></epic-explorer-search>
     </div>
+    <div *ngIf="halvingtext" class="text-center">
+      <p class="mb-0 mt-2">next halving {{this.halvingtext}}</p>
+    </div>
   </div>
   <div class="col-sm-5  col-md-4">
     <div class="blockchain_firstrow alignltp">
@@ -117,9 +120,10 @@
               <p class="block_heading">{{ "home.CIRCULATING_SUPPLY" | translate }}</p>
               <p class="block_value_v2 medtxtwid" [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''">
                 <ng2-odometer [number]="Block_supply" [config]="{ }"></ng2-odometer>
+                <span class="smalltext pl-2 epicipadresize">Epic</span>
                 <!-- {{ latestblockdetail.coin_existence | number }} -->
               </p>
-              <span class="smalltext">Epic</span>
+              <span class="smalltext">Max Supply <span style="color:#bf9b32;"> 21,000,000</span></span>
             </div>
           </div>
         </div>

src/app/view/home/block-detail-list/block-detail-list.component.ts

@@ -39,6 +39,7 @@ export class BlockDetailListComponent implements OnInit {
   timeout_8;
   timeout_9;
   timeout_10;
+  halvingtext;
   @ViewChild("minhgt", { static: false }) elementView: ElementRef;
 
   minHeight: number;
@@ -106,6 +107,43 @@ export class BlockDetailListComponent implements OnInit {
         );
     });
   }
+  public parseDays (value) { 
+    let year, months, week, days;
+    let text = "";
+    year = value >= 365 ? Math.floor(value / 365) : 0;
+    value = year ? value - (year*365) : value;
+    months = value >= 30 ? Math.floor((value % 365) / 30) : 0;
+    value = months ? value - (months*30) : value;
+    week = value >= 7 ? Math.floor((value % 365) / 7) : 0;
+    value = week ? value - (week*7) : value;
+    days = value < 7 ? Math.floor((value % 365) % 7) : 0;
+    if(year == 1){
+      text = "1 year ";
+    }else if (year > 1){
+      text = year+" years ";
+    }
+    if(months == 1){
+      text = text + "1 month ";
+    }else if (months > 1){
+      text = text + months+" months ";
+    }
+    if(week == 1){
+      text = text + "1 week ";
+    }else if (week > 1){
+      text = text + week+" weeks ";
+    }
+    if(days == 1){
+      text = text + "1 day ";
+    }else if (days > 1){
+      text = text + days+" days ";
+    }
+    return text;
+    // console.log("years = ", year); 
+    // console.log("months = ",months); 
+    // console.log("weeks = ",week); 
+    // console.log("days = ", days);
+    // console.log(text);
+  }
 
   public gettingprevioushashList() {
     return new Promise<void>((resolve, reject) => {
@@ -114,6 +152,37 @@ export class BlockDetailListComponent implements OnInit {
         .subscribe(
           res => {
             if (res["status"] == 200) {
+              // halving calculation
+              let timestamp = Math.floor(new Date().getTime() / 1000);
+              let blockReward = 4;
+              let currentCoin = res.response.coin_existence;
+              let endSupply = 16571520;
+
+              if(timestamp < 1685816999){
+                blockReward = 4;
+                endSupply = 16571520;
+              }else if(timestamp >= 1685816999){
+                blockReward = 2;
+                endSupply = 18875520;
+              }else if(timestamp >= 1754850599){
+                blockReward = 1;
+                endSupply = 20342880;
+              }else if(timestamp >= 1842805799){
+                blockReward = 0.15625;
+                endSupply = 20671380;
+              }else if(timestamp >= 1968863399){
+                blockReward = 0.078125;
+                endSupply = 20835630;
+              }
+
+              let remainingBlock = endSupply - currentCoin;
+              let remainingBlockPerDay = (60*24) * blockReward;
+              let daysLeft = Math.floor(remainingBlock/remainingBlockPerDay);
+              console.log(endSupply,currentCoin);
+              console.log(daysLeft);
+              this.halvingtext = this.parseDays(daysLeft);
+              // console.log(this.halvingtext);
+
               // var hasharray = res.response;
               this.latestblockdetail = res.response;
               // setInterval(() => this.incrementseconds(), 1000);

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

@@ -771,6 +771,8 @@ export class GraphListComponent implements OnInit {
       dtickval = 2 * 24 * 60 * 60 * 1000
     }else if (DifficultychartDate.length < 100571){
       dtickval = 6 * 24 * 60 * 60 * 1000
+    }else if (DifficultychartDate.length < 200571){
+      dtickval = 10 * 24 * 60 * 60 * 1000
     }else {
       tickformat = "%b %Y";
       dtickval = 5 * 30 * 24 * 60 * 60 * 1000
@@ -890,6 +892,8 @@ export class GraphListComponent implements OnInit {
 
     let dtickval;
     let tickformat = '%m-%d';
+    console.log('sDate.length');
+    console.log(sDate.length);
     if (sDate.length < 10){
       dtickval = 2 * 24 * 60 * 60 * 1000
     } else if (sDate.length < 20) {
@@ -898,6 +902,8 @@ export class GraphListComponent implements OnInit {
       dtickval = 6 * 24 * 60 * 60 * 1000
     } else if (sDate.length < 70) {
       dtickval = 8 * 24 * 60 * 60 * 1000
+    } else if (sDate.length < 90) {
+      dtickval = 12 * 24 * 60 * 60 * 1000
     } else { 
       tickformat = "%b %Y";
       dtickval = 4 * 30 * 24 * 60 * 60 * 1000;
@@ -917,22 +923,7 @@ export class GraphListComponent implements OnInit {
           marker: {
             color: '#bf9b30',
           },
-
         },
-
-        // {
-        //   x: sDate,
-        //   y: Cuckatoo,
-        //   name: '',
-        //   type: 'bar',
-        //   text: Cuckatoo,
-        //   hovertemplate: '%{x}<br> Cuckaroo : %{text:,}',
-        //   marker: {
-        //     color: '#54CFDC',
-        //   },
-
-        // },
-
         {
           x: sDate,
           y: ProgPow,
@@ -941,28 +932,22 @@ export class GraphListComponent implements OnInit {
           text: ProgPow,
           hovertemplate: '%{x}<br> ProgPoW : %{text:,}',
           hoverlabel: { namelength: 0 },
-
           marker: {
             color: '#C0C0C0',
           },
-
         },
-
         {
           x: sDate,
           y: RandomX,
-          name: 'Randomx',
+          name: 'RandomX',
           type: 'bar',
           text: RandomX,
           hovertemplate: '%{x}<br> RandomX : %{text:,}',
           hoverlabel: { namelength: 0 },
-
           marker: {
             color: '#B87333',
           },
-
         }
-
       ],
       layout: {
         hovermode: 'closest',
@@ -1127,6 +1112,8 @@ export class GraphListComponent implements OnInit {
       dtickval = 6 * 24 * 60 * 60 * 1000
     }else if (DifficultychartDate.length < 70) {
       dtickval = 8 * 24 * 60 * 60 * 1000
+    }else if (DifficultychartDate.length < 90) {
+      dtickval = 12 * 24 * 60 * 60 * 1000
     }else {
       tickformat = "%b %Y";
       dtickval = 4 * 30 * 24 * 60 * 60 * 1000;
@@ -1197,6 +1184,8 @@ export class GraphListComponent implements OnInit {
       dtickval = 6 * 24 * 60 * 60 * 1000;
     }else if (TfDate.length < 70) {
       dtickval = 8 * 24 * 60 * 60 * 1000;
+    }else if (TfDate.length < 90) {
+      dtickval = 12 * 24 * 60 * 60 * 1000;
     }else {
       tickformat = "%b %Y";
       dtickval = 5 * 30 * 24 * 60 * 60 * 1000;
@@ -1274,6 +1263,8 @@ export class GraphListComponent implements OnInit {
       dtickval = 6 * 24 * 60 * 60 * 1000
     }else if (gDate.length < 70) {
       dtickval = 8 * 24 * 60 * 60 * 1000
+    }else if (gDate.length < 90) {
+      dtickval = 12 * 24 * 60 * 60 * 1000
     }else {
       tickformat = "%b %Y";
       dtickval = 4 * 30 * 24 * 60 * 60 * 1000;
@@ -1351,6 +1342,8 @@ export class GraphListComponent implements OnInit {
       dtickval = 6 * 24 * 60 * 60 * 1000
     }else if (bDate.length < 70) {
       dtickval = 8 * 24 * 60 * 60 * 1000
+    }else if (bDate.length < 90) {
+      dtickval = 12 * 24 * 60 * 60 * 1000
     }else {
       tickformat = "%b %Y";
       dtickval = 4 * 30 * 24 * 60 * 60 * 1000;
@@ -1419,11 +1412,14 @@ export class GraphListComponent implements OnInit {
       dtickval = 6 * 24 * 60 * 60 * 1000
     }else if (mDate.length < 70) {
       dtickval = 8 * 24 * 60 * 60 * 1000
+    }else if (mDate.length < 90) {
+      dtickval = 12 * 24 * 60 * 60 * 1000
     }else {
       tickformat = "%b %Y";
       dtickval = 4 * 30 * 24 * 60 * 60 * 1000;
     }
 
+    //
     this.doubleareaGraphData = {
       data: [
         {
@@ -1432,62 +1428,36 @@ export class GraphListComponent implements OnInit {
           text: Cuckoo,
           hovertemplate: 'Cuckoo : %{y} % ( %{text:,} )',
           hoverlabel: { namelength: 0 },
-
           name: 'Cuckoo',
-          fill: 'tozeroy',
+          type: 'bar',
-          type: 'line',
+          marker: {
-          line: {
             color: '#bf9b30',
           },
-
         },
-
-        // {
-        //   x: mDate,
-        //   y: Cuckatooper,
-        //   text: Cuckatoo,
-        //   hovertemplate: 'Cuckatoo :%{y} % ( %{text:,} )',
-        //   name: '',
-        //   fill: 'tozeroy',
-        //   type: 'line',
-        //   line: {
-        //     color: '#f5c1a9',
-        //   },
-
-        // },
-
         {
           x: mDate,
           y: ProgPowper,
           text: ProgPow,
           hovertemplate: 'ProgPoW : %{y} % ( %{text:,} )',
           hoverlabel: { namelength: 0 },
-
+          type: 'bar',
-          fill: 'tozeroy',
-          type: 'line',
           name: 'ProgPoW',
-          line: {
+          marker: {
             color: '#C0C0C0',
           },
-
         },
-
         {
           x: mDate,
           y: RandomXper,
           text: RandomX,
           hovertemplate: 'RandomX : %{y} % ( %{text:,} )',
           hoverlabel: { namelength: 0 },
-
+          type: 'bar',
-          fill: 'tozeroy',
-          type: 'line',
           name: 'RandomX',
-          line: {
+          marker: {
             color: '#B87333',
           },
-
         },
-
       ],
       layout: {
         hovermode: 'closest',
@@ -1499,6 +1469,7 @@ export class GraphListComponent implements OnInit {
           x: 0.35, y: -0.5, font: { 'size': 10 }
         },
 
+        barmode: 'relative',
         xaxis: {
           tickformat: tickformat,
           tickangle: -45,
@@ -1780,6 +1751,8 @@ export class GraphListComponent implements OnInit {
       dtickval = 2 * 24 * 60 * 60 * 1000
     }else if (DifficultychartDate.length < 100000){
       dtickval = 6 * 24 * 60 * 60 * 1000
+    }else if (DifficultychartDate.length < 200000){
+      dtickval = 10 * 24 * 60 * 60 * 1000
     }else {
       tickformat = "%b %Y";
       dtickval = 4 * 30 * 24 * 60 * 60 * 1000

src/assets/css/responsive.css

@@ -47,6 +47,9 @@ p.block_value_v2.epicprice {  font-size: 22px;  line-height: normal;  height: au
 
 }
 @media (min-width: 768px) and (max-width: 991px){
+span.epicipadresize {
+    font-size: 9px;
+}
 .lgtxtwid .odometer-digit .odometer-value {
     width: 20px;
 }