Handle stack-of-N-blocks in new fee graph

backend/src/api/mempool-blocks.ts

@@ -143,7 +143,7 @@ class MempoolBlocks {
           const stackWeight = transactionsSorted.slice(index).reduce((total, tx) => total + (tx.weight || 0), 0);
           if (stackWeight > config.MEMPOOL.BLOCK_WEIGHT_UNITS) {
             onlineStats = true;
-            feeStatsCalculator = new OnlineFeeStatsCalculator(stackWeight, 0.5);
+            feeStatsCalculator = new OnlineFeeStatsCalculator(stackWeight, 0.5, [10, 20, 30, 40, 50, 60, 70, 80, 90]);
             feeStatsCalculator.processNext(tx);
           }
         }
@@ -334,7 +334,7 @@ class MempoolBlocks {
     if (hasBlockStack) {
       stackWeight = blocks[blocks.length - 1].reduce((total, tx) => total + (mempool[tx]?.weight || 0), 0);
       hasBlockStack = stackWeight > config.MEMPOOL.BLOCK_WEIGHT_UNITS;
-      feeStatsCalculator = new OnlineFeeStatsCalculator(stackWeight, 0.5);
+      feeStatsCalculator = new OnlineFeeStatsCalculator(stackWeight, 0.5, [10, 20, 30, 40, 50, 60, 70, 80, 90]);
     }
 
     const readyBlocks: { transactionIds, transactions, totalSize, totalWeight, totalFees, feeStats }[] = [];

frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts

@@ -10,6 +10,8 @@ import { VbytesPipe } from '../../shared/pipes/bytes-pipe/vbytes.pipe';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeeDistributionGraphComponent implements OnInit, OnChanges {
+  @Input() feeRange: number[];
+  @Input() vsize: number;
   @Input() transactions: TransactionStripped[];
   @Input() height: number | string = 210;
   @Input() top: number | string = 20;
@@ -18,6 +20,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
   @Input() numSamples: number = 200;
   @Input() numLabels: number = 10;
 
+  simple: boolean = false;
   data: number[][];
   labelInterval: number = 50;
 
@@ -36,11 +39,17 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges() {
+    this.simple = !!this.feeRange?.length;
     this.prepareChart();
     this.mountChart();
   }
 
   prepareChart() {
+    if (this.simple) {
+      this.data = this.feeRange.map((rate, index) => [index * 10, rate]);
+      this.labelInterval = 1;
+      return;
+    }
     this.data = [];
     if (!this.transactions?.length) {
       return;
@@ -56,14 +65,14 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
     this.labelInterval = this.numSamples / this.numLabels;
     while (nextSample <= maxBlockVSize) {
       if (txIndex >= txs.length) {
-        samples.push([1 - (sampleIndex / this.numSamples), 0]);
+        samples.push([(1 - (sampleIndex / this.numSamples)) * 100, 0]);
         nextSample += sampleInterval;
         sampleIndex++;
         break;
       }
 
       while (txs[txIndex] && nextSample < cumVSize + txs[txIndex].vsize) {
-        samples.push([1 - (sampleIndex / this.numSamples), txs[txIndex].rate]);
+        samples.push([(1 - (sampleIndex / this.numSamples)) * 100, txs[txIndex].rate]);
         nextSample += sampleInterval;
         sampleIndex++;
       }
@@ -84,7 +93,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
       xAxis: {
         type: 'category',
         boundaryGap: false,
-        name: 'MvB',
+        name: '% Weight',
         nameLocation: 'middle',
         nameGap: 0,
         nameTextStyle: {
@@ -93,7 +102,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
         },
         axisLabel: {
           interval: (index: number): boolean => { return index && (index % this.labelInterval === 0); },
-          formatter: (value: number): string => { return Number(value).toFixed(1); },
+          formatter: (value: number): string => { return Number(value).toFixed(0); },
         },
         axisTick: {
           interval: (index:number): boolean => { return (index % this.labelInterval === 0); },

frontend/src/app/components/mempool-block/mempool-block.component.html

@@ -39,11 +39,11 @@
             </tr>
           </tbody>
         </table>
-        <app-fee-distribution-graph *ngIf="webGlEnabled" [transactions]="mempoolBlockTransactions$ | async" ></app-fee-distribution-graph>
+        <app-fee-distribution-graph *ngIf="webGlEnabled" [transactions]="mempoolBlockTransactions$ | async" [feeRange]="mempoolBlock.isStack ? mempoolBlock.feeRange : []" [vsize]="mempoolBlock.blockVSize" ></app-fee-distribution-graph>
       </div>
       <div class="col-md chart-container">
         <app-mempool-block-overview *ngIf="webGlEnabled" [index]="mempoolBlockIndex" (txPreviewEvent)="setTxPreview($event)"></app-mempool-block-overview>
-        <app-fee-distribution-graph *ngIf="!webGlEnabled" [transactions]="mempoolBlockTransactions$ | async" ></app-fee-distribution-graph>
+        <app-fee-distribution-graph *ngIf="!webGlEnabled" [transactions]="mempoolBlockTransactions$ | async" [feeRange]="mempoolBlock.isStack ? mempoolBlock.feeRange : []" [vsize]="mempoolBlock.blockVSize" ></app-fee-distribution-graph>
       </div>
     </div>
   </div>

frontend/src/app/components/mempool-block/mempool-block.component.ts

@@ -54,6 +54,7 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
                 const ordinal = this.getOrdinal(mempoolBlocks[this.mempoolBlockIndex]);
                 this.ordinal$.next(ordinal);
                 this.seoService.setTitle(ordinal);
+                mempoolBlocks[this.mempoolBlockIndex].isStack = mempoolBlocks[this.mempoolBlockIndex].blockVSize > this.stateService.blockVSize;
                 return mempoolBlocks[this.mempoolBlockIndex];
               })
             );