Merge pull request #2642 from mononaut/ln-fee-distribution

Add incoming/outgoing fee histogram to node page
2025-05-31 10:10:04 +02:00 · 2022-10-16 07:12:45 +09:00 · 2022-10-16 07:12:45 +09:00 · 4c170b08f4
commit 4c170b08f4
parent 7bdde13b40 893aa03622
8 changed files with 353 additions and 0 deletions
--- a/backend/src/api/explorer/nodes.api.ts
+++ b/backend/src/api/explorer/nodes.api.ts
@ -129,6 +129,56 @@ class NodesApi {
    }
  }

+  public async $getFeeHistogram(node_public_key: string): Promise<unknown> {
+    try {
+      const inQuery = `
+        SELECT CASE WHEN fee_rate <= 10.0 THEN CEIL(fee_rate)
+                    WHEN (fee_rate > 10.0 and fee_rate <= 100.0) THEN CEIL(fee_rate / 10.0) * 10.0
+                    WHEN (fee_rate > 100.0 and fee_rate <= 1000.0) THEN CEIL(fee_rate / 100.0) * 100.0
+                    WHEN fee_rate > 1000.0 THEN CEIL(fee_rate / 1000.0) * 1000.0
+               END as bucket,
+               count(short_id) as count,
+               sum(capacity) as capacity
+        FROM (
+          SELECT CASE WHEN node1_public_key = ? THEN node2_fee_rate WHEN node2_public_key = ? THEN node1_fee_rate END as fee_rate,
+                 short_id as short_id,
+                 capacity as capacity
+          FROM channels
+          WHERE status = 1 AND (channels.node1_public_key = ? OR channels.node2_public_key = ?)
+        ) as fee_rate_table
+        GROUP BY bucket;
+      `;
+      const [inRows]: any[] = await DB.query(inQuery, [node_public_key, node_public_key, node_public_key, node_public_key]);
+
+      const outQuery = `
+        SELECT CASE WHEN fee_rate <= 10.0 THEN CEIL(fee_rate)
+                    WHEN (fee_rate > 10.0 and fee_rate <= 100.0) THEN CEIL(fee_rate / 10.0) * 10.0
+                    WHEN (fee_rate > 100.0 and fee_rate <= 1000.0) THEN CEIL(fee_rate / 100.0) * 100.0
+                    WHEN fee_rate > 1000.0 THEN CEIL(fee_rate / 1000.0) * 1000.0
+               END as bucket,
+               count(short_id) as count,
+               sum(capacity) as capacity
+        FROM (
+          SELECT CASE WHEN node1_public_key = ? THEN node1_fee_rate WHEN node2_public_key = ? THEN node2_fee_rate END as fee_rate,
+                 short_id as short_id,
+                 capacity as capacity
+          FROM channels
+          WHERE status = 1 AND (channels.node1_public_key = ? OR channels.node2_public_key = ?)
+        ) as fee_rate_table
+        GROUP BY bucket;
+      `;
+      const [outRows]: any[] = await DB.query(outQuery, [node_public_key, node_public_key, node_public_key, node_public_key]);
+
+      return {
+        incoming: inRows.length > 0 ? inRows : [],
+        outgoing: outRows.length > 0 ? outRows : [],
+      };
+    } catch (e) {
+      logger.err(`Cannot get node fee distribution for ${node_public_key}. Reason: ${(e instanceof Error ? e.message : e)}`);
+      throw e;
+    }
+  }
+
  public async $getAllNodes(): Promise<any> {
    try {
      const query = `SELECT * FROM nodes`;
--- a/backend/src/api/explorer/nodes.routes.ts
+++ b/backend/src/api/explorer/nodes.routes.ts
@ -20,6 +20,7 @@ class NodesRoutes {
      .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/rankings/connectivity', this.$getTopNodesByChannels)
      .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/rankings/age', this.$getOldestNodes)
      .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/:public_key/statistics', this.$getHistoricalNodeStats)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/:public_key/fees/histogram', this.$getFeeHistogram)
      .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/:public_key', this.$getNode)
      .get(config.MEMPOOL.API_URL_PREFIX + 'lightning/nodes/group/:name', this.$getNodeGroup)
    ;
@ -95,6 +96,22 @@ class NodesRoutes {
    }
  }

+  private async $getFeeHistogram(req: Request, res: Response) {
+    try {
+      const node = await nodesApi.$getFeeHistogram(req.params.public_key);
+      if (!node) {
+        res.status(404).send('Node not found');
+        return;
+      }
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 60).toUTCString());
+      res.json(node);
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
  private async $getNodesRanking(req: Request, res: Response): Promise<void> {
    try {
      const topCapacityNodes = await nodesApi.$getTopCapacityNodes(false);
--- a/frontend/src/app/lightning/lightning-api.service.ts
+++ b/frontend/src/app/lightning/lightning-api.service.ts
@ -53,6 +53,10 @@ export class LightningApiService {
    return this.httpClient.get<any>(this.apiBasePath + '/api/v1/lightning/nodes/' + publicKey + '/statistics');
  }

+  getNodeFeeHistogram$(publicKey: string): Observable<any> {
+    return this.httpClient.get<any>(this.apiBasePath + '/api/v1/lightning/nodes/' + publicKey + '/fees/histogram');
+  }
+
  getNodesRanking$(): Observable<INodesRanking> {
    return this.httpClient.get<INodesRanking>(this.apiBasePath + '/api/v1/lightning/nodes/rankings');
  }
--- a/frontend/src/app/lightning/lightning.module.ts
+++ b/frontend/src/app/lightning/lightning.module.ts
@ -15,6 +15,7 @@ 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 { NodeStatisticsChartComponent } from './node-statistics-chart/node-statistics-chart.component';
+import { NodeFeeChartComponent } from './node-fee-chart/node-fee-chart.component';
 import { GraphsModule } from '../graphs/graphs.module';
 import { NodesNetworksChartComponent } from './nodes-networks-chart/nodes-networks-chart.component';
 import { ChannelsStatisticsComponent } from './channels-statistics/channels-statistics.component';
@ -38,6 +39,7 @@ import { GroupComponent } from './group/group.component';
    NodesListComponent,
    NodeStatisticsComponent,
    NodeStatisticsChartComponent,
+    NodeFeeChartComponent,
    NodeComponent,
    ChannelsListComponent,
    ChannelComponent,
@ -73,6 +75,7 @@ import { GroupComponent } from './group/group.component';
    NodesListComponent,
    NodeStatisticsComponent,
    NodeStatisticsChartComponent,
+    NodeFeeChartComponent,
    NodeComponent,
    ChannelsListComponent,
    ChannelComponent,
--- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.html
+++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.html
@ -0,0 +1,7 @@
+<div class="full-container">
+  <h2 i18n="lightning.node-fee-distribution">Fee distribution</h2>
+  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
+  <div class="text-center loadingGraphs" *ngIf="isLoading">
+    <div class="spinner-border text-light"></div>d
+  </div>
+</div>
--- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.scss
+++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.scss
@ -0,0 +1,5 @@
+.full-container {
+  margin-top: 25px;
+  margin-bottom: 25px;
+  min-height: 100%;
+}
--- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
+++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
@ -0,0 +1,265 @@
+import { Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import { switchMap } from 'rxjs/operators';
+import { download } from '../../shared/graphs.utils';
+import { LightningApiService } from '../lightning-api.service';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe';
+
+@Component({
+  selector: 'app-node-fee-chart',
+  templateUrl: './node-fee-chart.component.html',
+  styleUrls: ['./node-fee-chart.component.scss'],
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 15px);
+      z-index: 100;
+    }
+  `],
+})
+export class NodeFeeChartComponent implements OnInit {
+  chartOptions: EChartsOption = {};
+  chartInitOptions = {
+    renderer: 'svg',
+  };
+
+  @HostBinding('attr.dir') dir = 'ltr';
+
+  isLoading = true;
+  chartInstance: any = undefined;
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    private lightningApiService: LightningApiService,
+    private activatedRoute: ActivatedRoute,
+    private amountShortenerPipe: AmountShortenerPipe,
+  ) {
+  }
+
+  ngOnInit(): void {
+
+    this.activatedRoute.paramMap
+      .pipe(
+        switchMap((params: ParamMap) => {
+          this.isLoading = true;
+          return this.lightningApiService.getNodeFeeHistogram$(params.get('public_key'));
+        }),
+      ).subscribe((data) => {
+        if (data && data.incoming && data.outgoing) {
+          const outgoingHistogram = this.bucketsToHistogram(data.outgoing);
+          const incomingHistogram = this.bucketsToHistogram(data.incoming);
+          this.prepareChartOptions(outgoingHistogram, incomingHistogram);
+        }
+        this.isLoading = false;
+      });
+  }
+
+  bucketsToHistogram(buckets): { label: string, count: number, capacity: number}[] {
+    const histogram = [];
+    let increment = 1;
+    let lower = -increment;
+    let upper = 0;
+
+    let nullBucket;
+    if (buckets.length && buckets[0] && buckets[0].bucket == null) {
+      nullBucket = buckets.shift();
+    }
+
+    while (upper <= 5000) {
+      let bucket;
+      if (buckets.length && buckets[0] && upper >= Number(buckets[0].bucket)) {
+        bucket = buckets.shift();
+      }
+      histogram.push({
+        label: upper === 0 ? '0 ppm' : `${lower} - ${upper} ppm`,
+        count: Number(bucket?.count || 0) + (upper === 0 ? Number(nullBucket?.count || 0) : 0),
+        capacity: Number(bucket?.capacity || 0) + (upper === 0 ? Number(nullBucket?.capacity || 0) : 0),
+      });
+
+      if (upper >= increment * 10) {
+        increment *= 10;
+        lower = increment;
+        upper = increment + increment;
+      } else {
+        lower += increment;
+        upper += increment;
+      }
+    }
+    const rest = buckets.reduce((acc, bucket) => {
+      acc.count += Number(bucket.count);
+      acc.capacity += Number(bucket.capacity);
+      return acc;
+    }, { count: 0, capacity: 0 });
+    histogram.push({
+      label: `5000+ ppm`,
+      count: rest.count,
+      capacity: rest.capacity,
+    });
+    return histogram;
+  }
+
+  prepareChartOptions(outgoingData, incomingData): void {
+    let title: object;
+    if (outgoingData.length === 0) {
+      title = {
+        textStyle: {
+          color: 'grey',
+          fontSize: 15
+        },
+        text: $localize`No data to display yet. Try again later.`,
+        left: 'center',
+        top: 'center'
+      };
+    }
+
+    this.chartOptions = {
+      title: outgoingData.length === 0 ? title : undefined,
+      animation: false,
+      grid: {
+        top: 30,
+        bottom: 20,
+        right: 20,
+        left: 65,
+      },
+      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): string => {
+          return `
+            <b style="color: white; margin-left: 2px">${ticks[0].data.label}</b><br>
+            <br>
+            <b style="color: white; margin-left: 2px">${ticks[0].marker} Outgoing</b><br>
+            <span>Capacity: ${this.amountShortenerPipe.transform(ticks[0].data.capacity, 2, undefined, true)} sats</span><br>
+            <span>Channels: ${ticks[0].data.count}</span><br>
+            <br>
+            <b style="color: white; margin-left: 2px">${ticks[1].marker} Incoming</b><br>
+            <span>Capacity: ${this.amountShortenerPipe.transform(ticks[1].data.capacity, 2, undefined, true)} sats</span><br>
+            <span>Channels: ${ticks[1].data.count}</span><br>
+          `;
+        }
+      },
+      xAxis: outgoingData.length === 0 ? undefined : {
+        type: 'category',
+        axisLine: { onZero: true },
+        axisLabel: {
+          align: 'center',
+          fontSize: 11,
+          lineHeight: 12,
+          hideOverlap: true,
+          padding: [0, 5],
+        },
+        data: outgoingData.map(bucket => bucket.label)
+      },
+      legend: outgoingData.length === 0 ? undefined : {
+        padding: 10,
+        data: [
+          {
+            name: 'Outgoing Fees',
+            inactiveColor: 'rgb(110, 112, 121)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+          {
+            name: 'Incoming Fees',
+            inactiveColor: 'rgb(110, 112, 121)',
+            textStyle: {
+              color: 'white',
+            },
+            icon: 'roundRect',
+          },
+        ],
+      },
+      yAxis: outgoingData.length === 0 ? undefined : [
+        {
+          type: 'value',
+          axisLabel: {
+            color: 'rgb(110, 112, 121)',
+            formatter: (val) => {
+              return `${this.amountShortenerPipe.transform(Math.abs(val), 2, undefined, true)} sats`;
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              type: 'dotted',
+              color: '#ffffff66',
+              opacity: 0.25,
+            }
+          },
+        },
+      ],
+      series: outgoingData.length === 0 ? undefined : [
+        {
+          zlevel: 0,
+          name: 'Outgoing Fees',
+          data: outgoingData.map(bucket => ({
+            value: bucket.capacity,
+            label: bucket.label,
+            capacity: bucket.capacity,
+            count: bucket.count,
+          })),
+          type: 'bar',
+          barWidth: '90%',
+          barMaxWidth: 50,
+          stack: 'fees',
+        },
+        {
+          zlevel: 0,
+          name: 'Incoming Fees',
+          data: incomingData.map(bucket => ({
+            value: -bucket.capacity,
+            label: bucket.label,
+            capacity: bucket.capacity,
+            count: bucket.count,
+          })),
+          type: 'bar',
+          barWidth: '90%',
+          barMaxWidth: 50,
+          stack: 'fees',
+        },
+      ],
+    };
+  }
+
+  onChartInit(ec) {
+    if (this.chartInstance !== undefined) {
+      return;
+    }
+
+    this.chartInstance = ec;
+  }
+
+  isMobile() {
+    return (window.innerWidth <= 767.98);
+  }
+
+  onSaveChart() {
+    // @ts-ignore
+    const prevBottom = this.chartOptions.grid.bottom;
+    // @ts-ignore
+    this.chartOptions.grid.bottom = 40;
+    this.chartOptions.backgroundColor = '#11131f';
+    this.chartInstance.setOption(this.chartOptions);
+    download(this.chartInstance.getDataURL({
+      pixelRatio: 2,
+    }), `node-fee-chart.svg`);
+    // @ts-ignore
+    this.chartOptions.grid.bottom = prevBottom;
+    this.chartOptions.backgroundColor = 'none';
+    this.chartInstance.setOption(this.chartOptions);
+  }
+}
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/frontend/src/app/lightning/node/node.component.html
@ -140,6 +140,8 @@

    <app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels>

+    <app-node-fee-chart style="display:block;margin-bottom: 40px"></app-node-fee-chart>
+
    <div class="d-flex">
      <h2 *ngIf="channelsListStatus === 'open'">
        <span i18n="lightning.open-channels">Open channels</span>