Dashboard stats graph

frontend/src/app/lightning/channels-list/channels-list.component.ts

@@ -40,6 +40,8 @@ export class ChannelsListComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(): void {
+    this.channelStatusForm.get('status').setValue(this.defaultStatus, { emitEvent: false })
+
     this.channels$ = combineLatest([
       this.channelsPage$,
       this.channelStatusForm.get('status').valueChanges.pipe(startWith(this.defaultStatus))

frontend/src/app/lightning/lightning-api.service.ts

@@ -41,4 +41,8 @@ export class LightningApiService {
   listTopNodes$(): Observable<any> {
     return this.httpClient.get<any>(API_BASE_URL + '/nodes/top');
   }
+
+  listStatistics$(): Observable<any> {
+    return this.httpClient.get<any>(API_BASE_URL + '/statistics');
+  }
 }

frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html

@@ -24,6 +24,20 @@
       </div>
     </div>
 
+    <div class="col">
+      <div class="card">
+        <div class="card-body">
+          <app-lightning-statistics-chart [widget]=true></app-lightning-statistics-chart>
+        </div>
+      </div>
+    </div>
+
+    <div class="col">
+      <div class="card-wrapper">
+        
+      </div>
+    </div>
+
     <div class="col">
       <div class="card">
         <div class="card-body">

frontend/src/app/lightning/lightning.module.ts

@@ -13,6 +13,8 @@ import { ChannelComponent } from './channel/channel.component';
 import { LightningWrapperComponent } from './lightning-wrapper/lightning-wrapper.component';
 import { ChannelBoxComponent } from './channel/channel-box/channel-box.component';
 import { ClosingTypeComponent } from './channel/closing-type/closing-type.component';
+import { LightningStatisticsChartComponent } from './statistics-chart/lightning-statistics-chart.component';
+import { NgxEchartsModule } from 'ngx-echarts';
 @NgModule({
   declarations: [
     LightningDashboardComponent,
@@ -24,12 +26,16 @@ import { ClosingTypeComponent } from './channel/closing-type/closing-type.compon
     LightningWrapperComponent,
     ChannelBoxComponent,
     ClosingTypeComponent,
+    LightningStatisticsChartComponent,
   ],
   imports: [
     CommonModule,
     SharedModule,
     RouterModule,
     LightningRoutingModule,
+    NgxEchartsModule.forRoot({
+      echarts: () => import('echarts')
+    })
   ],
   providers: [
     LightningApiService,

frontend/src/app/lightning/node/node.component.html

@@ -91,20 +91,6 @@
 
     <app-channels-list [publicKey]="node.public_key"></app-channels-list>
 
-    <!--
-
-    <br>
-    <div class="title-tx">
-      <h2 class="text-left">
-        <ng-template [ngIf]="!transactions?.length">&nbsp;</ng-template>
-        <ng-template i18n="X of X Address Transaction" [ngIf]="transactions?.length === 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transaction</ng-template>
-        <ng-template i18n="X of X Address Transactions (Plural)" [ngIf]="transactions?.length > 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions</ng-template>
-      </h2>
-    </div>
-
-    <app-transactions-list [transactions]="transactions" [showConfirmations]="true" [address]="address.address" (loadMore)="loadMore()"></app-transactions-list>
-    -->
-
 </div>
 
 <br>

frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html

@@ -0,0 +1,32 @@
+<div [class]="widget === false ? 'full-container' : ''">
+
+  <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
+    <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
+    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+    </button>
+  </div>
+
+  <div [class]="!widget ? 'chart' : 'chart-widget'" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
+  <div class="text-center loadingGraphs" *ngIf="isLoading">
+    <div class="spinner-border text-light"></div>
+  </div>
+
+</div>
+
+<ng-template #loadingStats>
+  <div class="pool-distribution">
+    <div class="item">
+      <h5 class="card-title" i18n="mining.miners-luck">Hashrate</h5>
+      <p class="card-text">
+        <span class="skeleton-loader skeleton-loader-big"></span>
+      </p>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="master-page.blocks">Difficulty</h5>
+      <p class="card-text">
+        <span class="skeleton-loader skeleton-loader-big"></span>
+      </p>
+    </div>
+  </div>
+</ng-template>

frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss

@@ -0,0 +1,135 @@
+.card-header {
+  border-bottom: 0;
+  font-size: 18px;
+  @media (min-width: 465px) {
+    font-size: 20px;
+  }
+}
+
+.main-title {
+  position: relative;
+  color: #ffffff91;
+  margin-top: -13px;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}
+
+.full-container {
+  padding: 0px 15px;
+  width: 100%;
+  min-height: 500px;
+  height: calc(100% - 150px);
+  @media (max-width: 992px) {
+    height: 100%;
+    padding-bottom: 100px;
+  };
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+  padding-bottom: 20px;
+  padding-right: 10px;
+  @media (max-width: 992px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 829px) {
+    padding-bottom: 50px;
+  }
+  @media (max-width: 767px) {
+    padding-bottom: 25px;
+  }
+  @media (max-width: 629px) {
+    padding-bottom: 55px;
+  }
+  @media (max-width: 567px) {
+    padding-bottom: 55px;
+  }
+}
+.chart-widget {
+  width: 100%;
+  height: 100%;
+  max-height: 270px;
+}
+
+.formRadioGroup {
+  margin-top: 6px;
+  display: flex;
+  flex-direction: column;
+  @media (min-width: 991px) {
+    position: relative;
+    top: -65px;
+  }
+  @media (min-width: 830px) and (max-width: 991px) {
+    position: relative;
+    top: 0px;
+  }
+  @media (min-width: 830px) {
+    flex-direction: row;
+    float: right;
+    margin-top: 0px;
+  }
+  .btn-sm {
+    font-size: 9px;
+    @media (min-width: 830px) {
+      font-size: 14px;
+    }
+  }
+}
+
+.pool-distribution {
+  min-height: 56px;
+  display: block;
+  @media (min-width: 485px) {
+    display: flex;
+    flex-direction: row;
+  }
+  h5 {
+    margin-bottom: 10px;
+  }
+  .item {
+    width: 50%;
+    display: inline-block;
+    margin: 0px auto 20px;
+    &:nth-child(2) {
+      order: 2;
+      @media (min-width: 485px) {
+        order: 3;
+      }
+    }
+    &:nth-child(3) {
+      order: 3;
+      @media (min-width: 485px) {
+        order: 2;
+        display: block;
+      }
+      @media (min-width: 768px) {
+        display: none;
+      }
+      @media (min-width: 992px) {
+        display: block;
+      }
+    }
+    .card-title {
+      font-size: 1rem;
+      color: #4a68b9;
+    }
+    .card-text {
+      font-size: 18px;
+      span {
+        color: #ffffff66;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.skeleton-loader {
+  width: 100%;
+  display: block;
+  max-width: 80px;
+  margin: 15px auto 3px;
+}

frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts

@@ -0,0 +1,301 @@
+import { Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
+import { EChartsOption, graphic } from 'echarts';
+import { Observable } from 'rxjs';
+import { startWith, switchMap, tap } from 'rxjs/operators';
+import { SeoService } from 'src/app/services/seo.service';
+import { formatNumber } from '@angular/common';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { StorageService } from 'src/app/services/storage.service';
+import { MiningService } from 'src/app/services/mining.service';
+import { download } from 'src/app/shared/graphs.utils';
+import { LightningApiService } from '../lightning-api.service';
+
+@Component({
+  selector: 'app-lightning-statistics-chart',
+  templateUrl: './lightning-statistics-chart.component.html',
+  styleUrls: ['./lightning-statistics-chart.component.scss'],
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 15px);
+      z-index: 100;
+    }
+  `],
+})
+export class LightningStatisticsChartComponent implements OnInit {
+  @Input() right: number | string = 65;
+  @Input() left: number | string = 55;
+  @Input() widget = false;
+
+  miningWindowPreference: string;
+  radioGroupForm: FormGroup;
+
+  chartOptions: EChartsOption = {};
+  chartInitOptions = {
+    renderer: 'svg',
+  };
+
+  @HostBinding('attr.dir') dir = 'ltr';
+
+  blockSizesWeightsObservable$: Observable<any>;
+  isLoading = true;
+  formatNumber = formatNumber;
+  timespan = '';
+  chartInstance: any = undefined;
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    private seoService: SeoService,
+    private lightningApiService: LightningApiService,
+    private formBuilder: FormBuilder,
+    private storageService: StorageService,
+    private miningService: MiningService,
+  ) {
+  }
+
+  ngOnInit(): void {
+    let firstRun = true;
+
+    this.seoService.setTitle($localize`:@@mining.hashrate-difficulty:Hashrate and Weight`);
+    this.miningWindowPreference = this.miningService.getDefaultTimespan('24h');
+    this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
+    this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
+
+    this.radioGroupForm.get('dateSpan').valueChanges
+      .pipe(
+        startWith(this.miningWindowPreference),
+        switchMap((timespan) => {
+          this.timespan = timespan;
+          if (!firstRun) {
+            this.storageService.setValue('miningWindowPreference', timespan);
+          }
+          firstRun = false;
+          this.miningWindowPreference = timespan;
+          this.isLoading = true;
+          return this.lightningApiService.listStatistics$()
+            .pipe(
+              tap((data) => {
+                this.prepareChartOptions({
+                  nodes: data.map(val => [val.added * 1000, val.node_count]),
+                  capacity: data.map(val => [val.added * 1000, val.total_capacity]),
+                });
+                this.isLoading = false;
+              }),
+            );
+        }),
+      ).subscribe(() => {
+      });
+  }
+
+  prepareChartOptions(data) {
+    let title: object;
+    if (data.nodes.length === 0) {
+      title = {
+        textStyle: {
+          color: 'grey',
+          fontSize: 15
+        },
+        text: `Indexing in progess`,
+        left: 'center',
+        top: 'center'
+      };
+    }
+
+    this.chartOptions = {
+      title: title,
+      animation: false,
+      color: [
+        '#FDD835',
+        '#D81B60',
+      ],
+      grid: {
+        top: 30,
+        bottom: 70,
+        right: this.right,
+        left: this.left,
+      },
+      tooltip: {
+        show: !this.isMobile(),
+        trigger: 'axis',
+        axisPointer: {
+          type: 'line'
+        },
+        backgroundColor: 'rgba(17, 19, 31, 1)',
+        borderRadius: 4,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+        textStyle: {
+          color: '#b1b1b1',
+          align: 'left',
+        },
+        borderColor: '#000',
+        formatter: (ticks) => {
+          let sizeString = '';
+          let weightString = '';
+
+          for (const tick of ticks) {
+            if (tick.seriesIndex === 0) { // Nodes
+              sizeString = `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.2-2')}`;
+            } else if (tick.seriesIndex === 1) { // Capacity
+              weightString = `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1] / 100000000, this.locale, '1.0-0')} BTC`;
+            }
+          }
+
+          const date = new Date(ticks[0].data[0]).toLocaleDateString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
+
+          let tooltip = `<b style="color: white; margin-left: 18px">${date}</b><br>
+            <span>${sizeString}</span><br>
+            <span>${weightString}</span>`;
+
+          return tooltip;
+        }
+      },
+      xAxis: data.nodes.length === 0 ? undefined : {
+        type: 'time',
+        splitNumber: this.isMobile() ? 5 : 10,
+        axisLabel: {
+          hideOverlap: true,
+        }
+      },
+      legend: data.nodes.length === 0 ? undefined : {
+        padding: 10,
+        data: [
+          {
+            name: 'Nodes',
+            inactiveColor: 'rgb(110, 112, 121)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+          {
+            name: 'Capacity',
+            inactiveColor: 'rgb(110, 112, 121)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+        ],
+        selected: JSON.parse(this.storageService.getValue('sizes_ln_legend'))  ?? {
+          'Nodes': true,
+          'Capacity': true,
+        }
+      },
+      yAxis: data.nodes.length === 0 ? undefined : [
+        {
+          min: (value) => {
+            return value.min * 0.9;
+          },
+          type: 'value',
+          axisLabel: {
+            color: 'rgb(110, 112, 121)',
+            formatter: (val) => {
+              return `${Math.round(val)}`;
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              type: 'dotted',
+              color: '#ffffff66',
+              opacity: 0.25,
+            }
+          },
+        },
+        {
+          min: (value) => {
+            return value.min * 0.9;
+          },
+          type: 'value',
+          position: 'right',
+          axisLabel: {
+            color: 'rgb(110, 112, 121)',
+            formatter: (val) => {
+              return `${val / 100000000} BTC`;
+            }
+          },
+          splitLine: {
+            show: false,
+          }
+        }
+      ],
+      series: data.nodes.length === 0 ? [] : [
+        {
+          zlevel: 0,
+          name: 'Nodes',
+          showSymbol: false,
+          symbol: 'none',
+          data: data.nodes,
+          type: 'line',
+          lineStyle: {
+            width: 2,
+          },
+          markLine: {
+            silent: true,
+            symbol: 'none',
+            lineStyle: {
+              type: 'solid',
+              color: '#ffffff66',
+              opacity: 1,
+              width: 1,
+            },
+            data: [{
+              yAxis: 1,
+              label: {
+                position: 'end',
+                show: true,
+                color: '#ffffff',
+                formatter: `1 MB`
+              }
+            }],
+          }
+        },
+        {
+          zlevel: 1,
+          yAxisIndex: 1,
+          name: 'Capacity',
+          showSymbol: false,
+          symbol: 'none',
+          data: data.capacity,
+          type: 'line',
+          lineStyle: {
+            width: 2,
+          }
+        }
+      ],
+    };
+  }
+
+  onChartInit(ec) {
+    if (this.chartInstance !== undefined) {
+      return;
+    }
+
+    this.chartInstance = ec;
+
+    this.chartInstance.on('legendselectchanged', (e) => {
+      this.storageService.setValue('sizes_ln_legend', JSON.stringify(e.selected));
+    });
+  }
+
+  isMobile() {
+    return (window.innerWidth <= 767.98);
+  }
+
+  onSaveChart() {
+    // @ts-ignore
+    const prevBottom = this.chartOptions.grid.bottom;
+    const now = new Date();
+    // @ts-ignore
+    this.chartOptions.grid.bottom = 40;
+    this.chartOptions.backgroundColor = '#11131f';
+    this.chartInstance.setOption(this.chartOptions);
+    download(this.chartInstance.getDataURL({
+      pixelRatio: 2,
+    }), `block-sizes-weights-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`);
+    // @ts-ignore
+    this.chartOptions.grid.bottom = prevBottom;
+    this.chartOptions.backgroundColor = 'none';
+    this.chartInstance.setOption(this.chartOptions);
+  }
+}

lightning-backend/src/api/explorer/general.routes.ts

@@ -2,12 +2,14 @@ import config from '../../config';
 import { Express, Request, Response } from 'express';
 import nodesApi from './nodes.api';
 import channelsApi from './channels.api';
+import statisticsApi from './statistics.api';
 class GeneralRoutes {
   constructor() { }
 
   public initRoutes(app: Express) {
     app
     .get(config.MEMPOOL.API_URL_PREFIX + 'search', this.$searchNodesAndChannels)
+    .get(config.MEMPOOL.API_URL_PREFIX + 'statistics', this.$getStatistics)
   ;
   }
 
@@ -27,6 +29,15 @@ class GeneralRoutes {
       res.status(500).send(e instanceof Error ? e.message : e);
     }
   }
+
+  private async $getStatistics(req: Request, res: Response) {
+    try {
+      const statistics = await statisticsApi.$getStatistics();
+      res.json(statistics);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
 }
 
 export default new GeneralRoutes();

lightning-backend/src/api/explorer/statistics.api.ts

@@ -0,0 +1,17 @@
+import logger from '../../logger';
+import DB from '../../database';
+
+class StatisticsApi {
+  public async $getStatistics(): Promise<any> {
+    try {
+      const query = `SELECT UNIX_TIMESTAMP(added) AS added, channel_count, node_count, total_capacity FROM statistics ORDER BY id DESC`;
+      const [rows]: any = await DB.query(query);
+      return rows;
+    } catch (e) {
+      logger.err('$getStatistics error: ' + (e instanceof Error ? e.message : e));
+      throw e;
+    }
+  }
+}
+
+export default new StatisticsApi();