From aec6d57fc303e2f9893632bbfefc03870dcfa8da Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 30 Aug 2022 09:08:34 +0200
Subject: [PATCH] When there is no stats for the past 7 days, don't show %
 changes

---
 backend/src/api/explorer/statistics.api.ts    |  2 +-
 .../channels-statistics.component.html        | 40 +++++++-------
 .../channels-statistics.component.scss        | 12 ++++-
 .../node-statistics.component.html            | 54 ++++++++-----------
 .../node-statistics.component.scss            | 12 ++++-
 5 files changed, 65 insertions(+), 55 deletions(-)

diff --git a/backend/src/api/explorer/statistics.api.ts b/backend/src/api/explorer/statistics.api.ts
index 7bf3d9107..558ee86fd 100644
--- a/backend/src/api/explorer/statistics.api.ts
+++ b/backend/src/api/explorer/statistics.api.ts
@@ -27,7 +27,7 @@ class StatisticsApi {
   public async $getLatestStatistics(): Promise<any> {
     try {
       const [rows]: any = await DB.query(`SELECT * FROM lightning_stats ORDER BY added DESC LIMIT 1`);
-      const [rows2]: any = await DB.query(`SELECT * FROM lightning_stats ORDER BY added DESC LIMIT 1 OFFSET 7`);
+      const [rows2]: any = await DB.query(`SELECT * FROM lightning_stats WHERE DATE(added) = DATE(NOW() - INTERVAL 7 DAY)`);
       return {
         latest: rows[0],
         previous: rows2[0],
diff --git a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
index 033438cf3..31261a84b 100644
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
+++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
@@ -9,44 +9,44 @@
 <div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward">
 
   <div class="fee-estimation-container" *ngIf="mode === 'avg'">
-    <div class="item">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
       <h5 class="card-title" i18n="ln.average-capacity">Avg Capacity</h5>
       <div class="card-text">
-        <div class="fee-text">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           {{ statistics.latest?.avg_capacity || 0 | number: '1.0-0' }}
           <span i18n="shared.sat-vbyte|sat/vB">sats</span>
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.avg_capacity" [previous]="statistics.previous?.avg_capacity"></app-change>
         </span>
       </div>
     </div>
 
-    <div class="item">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
       <h5 class="card-title" i18n="ln.average-feerate">Avg Fee Rate</h5>
       <div class="card-text" i18n-ngbTooltip="ln.average-feerate-desc"
         ngbTooltip="The average fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
         placement="bottom">
-        <div class="fee-text">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           {{ statistics.latest?.avg_fee_rate || 0 | number: '1.0-0' }}
           <span i18n="shared.sat-vbyte|sat/vB">ppm</span>
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.avg_fee_rate" [previous]="statistics.previous?.avg_fee_rate"></app-change>
         </span>
       </div>
     </div>
 
-    <div class="item">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
       <h5 class="card-title" i18n="ln.average-basefee">Avg Base Fee</h5>
       <div class="card-text" i18n-ngbTooltip="ln.average-basefee-desc"
         ngbTooltip="The average base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom">
         <div class="card-text">
-          <div class="fee-text">
+          <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
             {{ statistics.latest?.avg_base_fee_mtokens || 0 | number: '1.0-0' }}
             <span i18n="shared.sat-vbyte|sat/vB">msats</span>
           </div>
-          <span class="fiat">
+          <span class="fiat" *ngIf="statistics.previous">
             <app-change [current]="statistics.latest?.avg_base_fee_mtokens" [previous]="statistics.previous?.avg_base_fee_mtokens"></app-change>
           </span>
         </div>
@@ -55,43 +55,45 @@
   </div>
 
   <div class="fee-estimation-container" *ngIf="mode === 'med'">
-    <div class="item">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
       <h5 class="card-title" i18n="ln.median-capacity">Med Capacity</h5>
       <div class="card-text">
-        <div class="fee-text">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           {{ statistics.latest?.med_capacity || 0 | number: '1.0-0' }}
           <span i18n="shared.sat-vbyte|sat/vB">sats</span>
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.med_capacity" [previous]="statistics.previous?.med_capacity"></app-change>
         </span>
       </div>
     </div>
-    <div class="item">
+
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
       <h5 class="card-title" i18n="ln.average-feerate">Med Fee Rate</h5>
       <div class="card-text" i18n-ngbTooltip="ln.median-feerate-desc"
-        ngbTooltip="The average fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
+        ngbTooltip="The median fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
         placement="bottom">
-        <div class="fee-text">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           {{ statistics.latest?.med_fee_rate || 0 | number: '1.0-0' }}
           <span i18n="shared.sat-vbyte|sat/vB">ppm</span>
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.med_fee_rate" [previous]="statistics.previous?.med_fee_rate"></app-change>
         </span>
       </div>
     </div>
-    <div class="item">
+
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
       <h5 class="card-title" i18n="ln.median-basefee">Med Base Fee</h5>
       <div class="card-text" i18n-ngbTooltip="ln.median-basefee-desc"
         ngbTooltip="The median base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom">
         <div class="card-text">
-          <div class="fee-text">
+          <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
             {{ statistics.latest?.med_base_fee_mtokens || 0 | number: '1.0-0' }}
             <span i18n="shared.sat-vbyte|sat/vB">msats</span>
           </div>
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.med_base_fee_mtokens" [previous]="statistics.previous?.med_base_fee_mtokens"></app-change>
         </span>
       </div>
diff --git a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
index 372d9eb78..e97f0d0af 100644
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
+++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
@@ -18,6 +18,10 @@
   }
 }
 
+.fee-estimation-wrapper {
+  min-height: 77px;
+}
+
 .fee-estimation-container {
   display: flex;
   justify-content: space-between;
@@ -30,7 +34,10 @@
     width: -webkit-fill-available;
     @media (min-width: 376px) {
       margin: 0 auto 0px;
-    }    
+    }
+    &.more-padding {
+      padding-top: 10px;
+    }  
     &:first-child{
       display: none;
       @media (min-width: 485px) {
@@ -57,6 +64,9 @@
       margin: auto;
       line-height: 1.45;
       padding: 0px 2px;
+      &.no-border {
+        border-bottom: none;
+      }
     }
     .fiat {
       display: block;
diff --git a/frontend/src/app/lightning/node-statistics/node-statistics.component.html b/frontend/src/app/lightning/node-statistics/node-statistics.component.html
index 152ee2dbe..ae4ea3dd7 100644
--- a/frontend/src/app/lightning/node-statistics/node-statistics.component.html
+++ b/frontend/src/app/lightning/node-statistics/node-statistics.component.html
@@ -1,76 +1,64 @@
 <div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward">
   <div class="fee-estimation-container">
-    <div class="item">
-      <h5 class="card-title" i18n="mining.average-fee">Capacity</h5>
-      <div class="card-text" i18n-ngbTooltip="mining.average-fee" ngbTooltip="Percentage change past week"
-        placement="bottom">
-        <div class="fee-text">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
+      <h5 class="card-title" i18n="lightning.capacity">Capacity</h5>
+      <div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
+        [disableTooltip]="!statistics.previous" placement="bottom">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           <app-amount [satoshis]="statistics.latest?.total_capacity" digitsInfo="1.2-2"></app-amount>
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.total_capacity" [previous]="statistics.previous?.total_capacity">
           </app-change>
         </span>
       </div>
     </div>
-    <div class="item">
-      <h5 class="card-title" i18n="mining.rewards">Nodes</h5>
-      <div class="card-text" i18n-ngbTooltip="mining.rewards-desc" ngbTooltip="Percentage change past week"
-        placement="bottom">
-        <div class="fee-text">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
+      <h5 class="card-title" i18n="lightning.nodes">Nodes</h5>
+      <div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
+      [disableTooltip]="!statistics.previous">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           {{ statistics.latest?.node_count || 0 | number }}
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.node_count" [previous]="statistics.previous?.node_count"></app-change>
         </span>
       </div>
     </div>
-    <div class="item">
-      <h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5>
-      <div class="card-text" i18n-ngbTooltip="mining.rewards-per-tx-desc" ngbTooltip="Percentage change past week"
-        placement="bottom">
-        <div class="fee-text">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
+      <h5 class="card-title" i18n="lightning.channels">Channels</h5>
+      <div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
+      [disableTooltip]="!statistics.previous">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           {{ statistics.latest?.channel_count || 0 | number }}
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.channel_count" [previous]="statistics.previous?.channel_count">
           </app-change>
         </span>
       </div>
     </div>
-    <!--
-    <div class="item">
-      <h5 class="card-title" i18n="mining.average-fee">Average Channel</h5>
-      <div class="card-text" i18n-ngbTooltip="mining.average-fee"
-        ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
-        <app-amount [satoshis]="statistics.latest.average_channel_size" digitsInfo="1.2-3"></app-amount>
-        <span class="fiat">
-          <app-change [current]="statistics.latest.average_channel_size" [previous]="statistics.previous.average_channel_size"></app-change>
-        </span>
-      </div>
-    </div>
-    -->
   </div>
 </div>
 
 <ng-template #loadingReward>
   <div class="fee-estimation-container loading-container">
     <div class="item">
-      <h5 class="card-title" i18n="mining.rewards">Nodes</h5>
+      <h5 class="card-title" i18n="lightning.nodes">Nodes</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>
         <div class="skeleton-loader"></div>
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5>
+      <h5 class="card-title" i18n="lightning.channels">Channels</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>
         <div class="skeleton-loader"></div>
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="mining.average-fee">Average Channel</h5>
+      <h5 class="card-title" i18n="lightning.average-channels">Average Channel</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>
         <div class="skeleton-loader"></div>
diff --git a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss b/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
index acc4578f3..1532f9c4b 100644
--- a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
+++ b/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
@@ -18,6 +18,10 @@
   }
 }
 
+.fee-estimation-wrapper {
+  min-height: 77px;
+}
+
 .fee-estimation-container {
   display: flex;
   justify-content: space-between;
@@ -30,7 +34,10 @@
     width: -webkit-fill-available;
     @media (min-width: 376px) {
       margin: 0 auto 0px;
-    }    
+    }
+    &.more-padding {
+      padding-top: 10px;
+    }  
     &:first-child{
       display: none;
       @media (min-width: 485px) {
@@ -57,6 +64,9 @@
       margin: auto;
       line-height: 1.45;
       padding: 0px 2px;
+      &.no-border {
+        border-bottom: none;
+      }
     }
     .fiat {
       display: block;