Merge pull request #1521 from mempool/nymkappa/feature/fee-range-chart

Add block fee rates percentiles chart

backend/src/api/mining.ts

@@ -15,7 +15,7 @@ class Mining {
   }
 
   /**
-   * Get historical block reward and total fee
+   * Get historical block total fee
    */
   public async $getHistoricalBlockFees(interval: string | null = null): Promise<any> {
     return await BlocksRepository.$getHistoricalBlockFees(
@@ -34,6 +34,16 @@ class Mining {
     );
   }
 
+  /**
+   * Get historical block fee rates percentiles
+   */
+   public async $getHistoricalBlockFeeRates(interval: string | null = null): Promise<any> {
+    return await BlocksRepository.$getHistoricalBlockFeeRates(
+      this.getTimeRange(interval),
+      Common.getSqlInterval(interval)
+    );
+  }
+
   /**
    * Generate high level overview of the pool ranks and general stats
    */

backend/src/index.ts

@@ -326,6 +326,7 @@ class Server {
         .get(config.MEMPOOL.API_URL_PREFIX + 'mining/reward-stats/:blockCount', routes.$getRewardStats)
         .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fees/:interval', routes.$getHistoricalBlockFees)
         .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/rewards/:interval', routes.$getHistoricalBlockRewards)
+        .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/fee-rates/:interval', routes.$getHistoricalBlockFeeRates)
       ;
     }
 

backend/src/repositories/BlocksRepository.ts

@@ -387,7 +387,9 @@ class BlocksRepository {
    */
   public async $getHistoricalBlockFees(div: number, interval: string | null): Promise<any> {
     try {
-      let query = `SELECT CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
+      let query = `SELECT
+        CAST(AVG(height) as INT) as avg_height,
+        CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
         CAST(AVG(fees) as INT) as avg_fees
         FROM blocks`;
 
@@ -410,7 +412,9 @@ class BlocksRepository {
    */
    public async $getHistoricalBlockRewards(div: number, interval: string | null): Promise<any> {
     try {
-      let query = `SELECT CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
+      let query = `SELECT
+        CAST(AVG(height) as INT) as avg_height,
+        CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
         CAST(AVG(reward) as INT) as avg_rewards
         FROM blocks`;
 
@@ -427,6 +431,37 @@ class BlocksRepository {
       throw e;
     }
   }
+
+  /**
+   * Get the historical averaged block fee rate percentiles
+   */
+   public async $getHistoricalBlockFeeRates(div: number, interval: string | null): Promise<any> {
+    try {
+      let query = `SELECT
+        CAST(AVG(height) as INT) as avg_height,
+        CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[0]')) as INT) as avg_fee_0,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[1]')) as INT) as avg_fee_10,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[2]')) as INT) as avg_fee_25,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[3]')) as INT) as avg_fee_50,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[4]')) as INT) as avg_fee_75,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[5]')) as INT) as avg_fee_90,
+        CAST(AVG(JSON_EXTRACT(fee_span, '$[6]')) as INT) as avg_fee_100
+      FROM blocks`;
+
+      if (interval !== null) {
+        query += ` WHERE blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`;
+      }
+
+      query += ` GROUP BY UNIX_TIMESTAMP(blockTimestamp) DIV ${div}`;
+
+      const [rows]: any = await DB.query(query);
+      return rows;
+    } catch (e) {
+      logger.err('Cannot generate block fee rates history. Reason: ' + (e instanceof Error ? e.message : e));
+      throw e;
+    }
+  }
 }
 
 export default new BlocksRepository();

backend/src/routes.ts

@@ -670,6 +670,22 @@ class Routes {
     }
   }
 
+  public async $getHistoricalBlockFeeRates(req: Request, res: Response) {
+    try {
+      const blockFeeRates = await mining.$getHistoricalBlockFeeRates(req.params.interval ?? null);
+      const oldestIndexedBlockTimestamp = await BlocksRepository.$oldestBlockTimestamp();
+      res.header('Pragma', 'public');
+      res.header('Cache-control', 'public');
+      res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
+      res.json({
+        oldestIndexedBlockTimestamp: oldestIndexedBlockTimestamp,
+        blockFeeRates: blockFeeRates,
+      });
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
   public async getBlock(req: Request, res: Response) {
     try {
       const result = await bitcoinApi.$getBlock(req.params.hash);

frontend/src/app/app-routing.module.ts

@@ -35,6 +35,7 @@ import { GraphsComponent } from './components/graphs/graphs.component';
 import { BlocksList } from './components/blocks-list/blocks-list.component';
 import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fees-graph.component';
 import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component';
+import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component';
 
 let routes: Routes = [
   {
@@ -126,7 +127,11 @@ let routes: Routes = [
           {
             path: 'mining/block-rewards',
             component: BlockRewardsGraphComponent,
-          }
+          },
+          {
+            path: 'mining/block-fee-rates',
+            component: BlockFeeRatesGraphComponent,
+          },
         ],
       },
       {
@@ -264,7 +269,11 @@ let routes: Routes = [
               {
                 path: 'mining/block-rewards',
                 component: BlockRewardsGraphComponent,
-              }
+              },
+              {
+                path: 'mining/block-fee-rates',
+                component: BlockFeeRatesGraphComponent,
+              },
             ]
           },
           {
@@ -400,7 +409,11 @@ let routes: Routes = [
               {
                 path: 'mining/block-rewards',
                 component: BlockRewardsGraphComponent,
-              }
+              },
+              {
+                path: 'mining/block-fee-rates',
+                component: BlockFeeRatesGraphComponent,
+              },
             ]
           },
           {

frontend/src/app/app.module.ts

@@ -83,6 +83,7 @@ import { RewardStatsComponent } from './components/reward-stats/reward-stats.com
 import { DataCyDirective } from './data-cy.directive';
 import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fees-graph.component';
 import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component';
+import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component';
 
 @NgModule({
   declarations: [
@@ -147,6 +148,7 @@ import { BlockRewardsGraphComponent } from './components/block-rewards-graph/blo
     RewardStatsComponent,
     BlockFeesGraphComponent,
     BlockRewardsGraphComponent,
+    BlockFeeRatesGraphComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

frontend/src/app/bitcoin.utils.ts

@@ -143,8 +143,10 @@ export function selectPowerOfTen(val: number) {
   };
 
   let selectedPowerOfTen;
-  if (val < powerOfTen.mega) {
+  if (val < powerOfTen.kilo) {
     selectedPowerOfTen = { divider: 1, unit: '' }; // no scaling
+  } else if (val < powerOfTen.mega) {
+    selectedPowerOfTen = { divider: powerOfTen.kilo, unit: 'k' };
   } else if (val < powerOfTen.giga) {
     selectedPowerOfTen = { divider: powerOfTen.mega, unit: 'M' };
   } else if (val < powerOfTen.terra) {

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html

@@ -0,0 +1,47 @@
+<div class="full-container">
+  <div class="card-header mb-0 mb-md-4">
+    <span i18n="mining.block-fee-rates">Block fee rates</span>
+    <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
+      <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1">
+          <input ngbButton type="radio" [value]="'24h'" fragment="24h"> 24h
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 3">
+          <input ngbButton type="radio" [value]="'3d'" fragment="3d"> 3D
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 7">
+          <input ngbButton type="radio" [value]="'1w'" fragment="1w"> 1W
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 30">
+          <input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 90">
+          <input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 180">
+          <input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 365">
+          <input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 730">
+          <input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1095">
+          <input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay > 1095">
+          <input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
+        </label>
+      </div>
+    </form>
+  </div>
+
+  <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>
+  </div>
+
+</div>

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.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: 1130px) {
+    position: relative;
+    top: -65px;
+  }
+  @media (min-width: 830px) and (max-width: 1130px) {
+    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/components/block-fee-rates-graph/block-fee-rates-graph.component.ts

@@ -0,0 +1,300 @@
+import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import { Observable } from 'rxjs';
+import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
+import { ApiService } from 'src/app/services/api.service';
+import { SeoService } from 'src/app/services/seo.service';
+import { formatNumber } from '@angular/common';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from 'src/app/shared/graphs.utils';
+import { StorageService } from 'src/app/services/storage.service';
+import { MiningService } from 'src/app/services/mining.service';
+import { selectPowerOfTen } from 'src/app/bitcoin.utils';
+import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { StateService } from 'src/app/services/state.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-block-fee-rates-graph',
+  templateUrl: './block-fee-rates-graph.component.html',
+  styleUrls: ['./block-fee-rates-graph.component.scss'],
+  styles: [`
+    .loadingGraphs {
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 15px);
+      z-index: 100;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BlockFeeRatesGraphComponent implements OnInit {
+  @Input() right: number | string = 45;
+  @Input() left: number | string = 75;
+
+  miningWindowPreference: string;
+  radioGroupForm: FormGroup;
+
+  chartOptions: EChartsOption = {};
+  chartInitOptions = {
+    renderer: 'svg',
+  };
+
+  statsObservable$: Observable<any>;
+  isLoading = true;
+  formatNumber = formatNumber;
+  timespan = '';
+  chartInstance: any = undefined;
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    private seoService: SeoService,
+    private apiService: ApiService,
+    private formBuilder: FormBuilder,
+    private storageService: StorageService,
+    private miningService: MiningService,
+    private stateService: StateService,
+    private router: Router,
+    private zone: NgZone,
+  ) {
+    this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
+    this.radioGroupForm.controls.dateSpan.setValue('1y');
+  }
+
+  ngOnInit(): void {
+    this.seoService.setTitle($localize`:@@mining.block-fee-rates:Block Fee Rates`);
+    this.miningWindowPreference = this.miningService.getDefaultTimespan('24h');
+    this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
+    this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
+
+    this.statsObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
+      .pipe(
+        startWith(this.miningWindowPreference),
+        switchMap((timespan) => {
+          this.storageService.setValue('miningWindowPreference', timespan);
+          this.timespan = timespan;
+          this.isLoading = true;
+          return this.apiService.getHistoricalBlockFeeRates$(timespan)
+            .pipe(
+              tap((data: any) => {
+                // Group by percentile
+                const seriesData = {
+                  'Min': [],
+                  '10th': [],
+                  '25th': [],
+                  'Median': [],
+                  '75th': [],
+                  '90th': [],
+                  'Max': []
+                };
+                for (const rate of data.blockFeeRates) {
+                  const timestamp = rate.timestamp * 1000;
+                  seriesData['Min'].push([timestamp, rate.avg_fee_0, rate.avg_height]);
+                  seriesData['10th'].push([timestamp, rate.avg_fee_10, rate.avg_height]);
+                  seriesData['25th'].push([timestamp, rate.avg_fee_25, rate.avg_height]);
+                  seriesData['Median'].push([timestamp, rate.avg_fee_50, rate.avg_height]);
+                  seriesData['75th'].push([timestamp, rate.avg_fee_75, rate.avg_height]);
+                  seriesData['90th'].push([timestamp, rate.avg_fee_90, rate.avg_height]);
+                  seriesData['Max'].push([timestamp, rate.avg_fee_100, rate.avg_height]);
+                }
+
+                // Prepare chart
+                const series = [];
+                const legends = [];
+                for (const percentile in seriesData) {
+                  series.push({
+                    zlevel: 0,
+                    stack: 'Total',
+                    name: percentile,
+                    data: seriesData[percentile],
+                    type: 'bar',
+                    barWidth: '100%',
+                    large: true,
+                  });
+
+                  legends.push({
+                    name: percentile,
+                    inactiveColor: 'rgb(110, 112, 121)',
+                    textStyle: {
+                      color: 'white',
+                    },
+                    icon: 'roundRect',
+                    enabled: false,
+                    selected: false,
+                  });
+                }
+
+                this.prepareChartOptions({
+                  legends: legends,
+                  series: series,
+                });
+                this.isLoading = false;
+              }),
+              map((data: any) => {
+                const availableTimespanDay = (
+                  (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
+                ) / 3600 / 24;
+
+                return {
+                  availableTimespanDay: availableTimespanDay,
+                };
+              }),
+            );
+        }),
+        share()
+      );
+  }
+
+  prepareChartOptions(data) {
+    this.chartOptions = {
+      color: ['#D81B60', '#8E24AA', '#1E88E5', '#7CB342', '#FDD835', '#6D4C41', '#546E7A'],
+      animation: false,
+      grid: {
+        right: this.right,
+        left: this.left,
+        bottom: 80,
+        top: this.isMobile() ? 10 : 50,
+      },
+      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: function (data) {
+          if (data.length <= 0) {
+            return '';
+          }
+          let tooltip = `<b style="color: white; margin-left: 2px">
+            ${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;
+
+          for (const pool of data.reverse()) {
+            tooltip += `${pool.marker} ${pool.seriesName}: ${pool.data[1]} sats/vByte<br>`;
+          }
+
+          if (['24h', '3d'].includes(this.timespan)) {
+            tooltip += `<small>At block: ${data[0].data[2]}</small>`;
+          } else {
+            tooltip += `<small>Around block ${data[0].data[2]}</small>`;
+          }
+
+          return tooltip;
+        }.bind(this)
+      },
+      xAxis: data.series.length === 0 ? undefined :
+      {
+        name: formatterXAxisLabel(this.locale, this.timespan),
+        nameLocation: 'middle',
+        nameTextStyle: {
+          padding: [10, 0, 0, 0],
+        },
+        type: 'category',
+        boundaryGap: false,
+        axisLine: { onZero: true },
+        axisLabel: {
+          formatter: val => formatterXAxisTimeCategory(this.locale, this.timespan, parseInt(val, 10)),
+          align: 'center',
+          fontSize: 11,
+          lineHeight: 12,
+          hideOverlap: true,
+          padding: [0, 5],
+        },
+      },
+      legend: (data.series.length === 0) ? undefined : {
+        data: data.legends,
+        selected: JSON.parse(this.storageService.getValue('fee_rates_legend')) ?? {
+          'Min': true,
+          '10th': true,
+          '25th': true,
+          'Median': true,
+          '75th': true,
+          '90th': true,
+          'Max': false,
+        },
+        id: 4242,
+      },
+      yAxis: data.series.length === 0 ? undefined : {
+        position: 'left',
+        axisLabel: {
+          color: 'rgb(110, 112, 121)',
+          formatter: (val) => {
+            const selectedPowerOfTen: any = selectPowerOfTen(val);
+            const newVal = Math.round(val / selectedPowerOfTen.divider);
+            return `${newVal}${selectedPowerOfTen.unit} s/vB`;
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: '#ffffff66',
+            opacity: 0.25,
+          }
+        },
+        type: 'value',
+        max: (val) => this.timespan === 'all' ? Math.min(val.max, 5000) : undefined,
+      },
+      series: data.series,
+      dataZoom: [{
+        type: 'inside',
+        realtime: true,
+        zoomLock: true,
+        maxSpan: 100,
+        minSpan: 5,
+        moveOnMouseMove: false,
+      }, {
+        showDetail: false,
+        show: true,
+        type: 'slider',
+        brushSelect: false,
+        realtime: true,
+        left: 20,
+        right: 15,
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#fff',
+            opacity: 0.45,
+          },
+          areaStyle: {
+            opacity: 0,
+          }
+        },
+      }],
+    };
+  }
+
+  onChartInit(ec) {
+    if (this.chartInstance !== undefined) {
+      return;
+    }
+
+    this.chartInstance = ec;
+
+    this.chartInstance.on('click', (e) => {
+      if (e.data.data === 9999) { // "Other"
+        return;
+      }
+      this.zone.run(() => {
+        if (['24h', '3d'].includes(this.timespan)) {
+          const url = new RelativeUrlPipe(this.stateService).transform(`/block/${e.data[2]}`);
+          this.router.navigate([url]);
+        }
+      });
+    });
+
+    this.chartInstance.on('legendselectchanged', (e) => {
+      this.storageService.setValue('fee_rates_legend', JSON.stringify(e.selected));
+    });
+  }
+
+  isMobile() {
+    return (window.innerWidth <= 767.98);
+  }
+}

frontend/src/app/components/block-fees-graph/block-fees-graph.component.html

@@ -44,20 +44,3 @@
   </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/components/block-fees-graph/block-fees-graph.component.ts

@@ -25,7 +25,6 @@ import { MiningService } from 'src/app/services/mining.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BlockFeesGraphComponent implements OnInit {
-  @Input() tableOnly = false;
   @Input() right: number | string = 45;
   @Input() left: number | string = 75;
 
@@ -150,9 +149,13 @@ export class BlockFeesGraphComponent implements OnInit {
             }
           },
           splitLine: {
-            show: false,
+            lineStyle: {
+              type: 'dotted',
+              color: '#ffffff66',
+              opacity: 0.25,
             }
           },
+        },
       ],
       series: [
         {
@@ -172,7 +175,7 @@ export class BlockFeesGraphComponent implements OnInit {
         realtime: true,
         zoomLock: true,
         maxSpan: 100,
-        minSpan: 10,
+        minSpan: 5,
         moveOnMouseMove: false,
       }, {
         showDetail: false,

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html

@@ -45,20 +45,3 @@
   </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/components/block-rewards-graph/block-rewards-graph.component.ts

@@ -149,9 +149,13 @@ export class BlockRewardsGraphComponent implements OnInit {
             }
           },
           splitLine: {
-            show: false,
+            lineStyle: {
+              type: 'dotted',
+              color: '#ffffff66',
+              opacity: 0.25,
             }
           },
+        },
       ],
       series: [
         {
@@ -171,7 +175,7 @@ export class BlockRewardsGraphComponent implements OnInit {
         realtime: true,
         zoomLock: true,
         maxSpan: 100,
-        minSpan: 10,
+        minSpan: 5,
         moveOnMouseMove: false,
       }, {
         showDetail: false,

frontend/src/app/components/graphs/graphs.component.html

@@ -16,6 +16,10 @@
         [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="mining.hashrate-difficulty">
         Hashrate & Difficulty
       </a>
+      <a class="dropdown-item" routerLinkActive="active"
+        [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" i18n="mining.block-fee-rates">
+        Block Fee Rates
+      </a>
       <a class="dropdown-item" routerLinkActive="active"
         [routerLink]="['/graphs/mining/block-fees' | relativeUrl]" i18n="mining.block-fees">
         Block Fees

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -290,8 +290,12 @@ export class HashrateChartComponent implements OnInit {
             }
           },
           splitLine: {
-            show: false,
+            lineStyle: {
+              type: 'dotted',
+              color: '#ffffff66',
+              opacity: 0.25,
             }
+          },
         }
       ],
       series: data.hashrates.length === 0 ? [] : [
@@ -324,7 +328,7 @@ export class HashrateChartComponent implements OnInit {
         realtime: true,
         zoomLock: true,
         maxSpan: 100,
-        minSpan: 10,
+        minSpan: 5,
         moveOnMouseMove: false,
       }, {
         showDetail: false,

frontend/src/app/components/statistics/statistics.component.ts

@@ -179,7 +179,7 @@ export class StatisticsComponent implements OnInit {
     }
 
     // Find median value
-    const vBytes : number[] = [];
+    const vBytes: number[] = [];
     for (const stat of this.mempoolStats) {
       vBytes.push(stat.vbytes_per_second);
     }

frontend/src/app/services/api.service.ts

@@ -182,6 +182,13 @@ export class ApiService {
     );
   }
 
+  getHistoricalBlockFeeRates$(interval: string | undefined) : Observable<any> {
+    return this.httpClient.get<any[]>(
+      this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/fee-rates` +
+      (interval !== undefined ? `/${interval}` : '')
+    );
+  }
+
   getRewardStats$(blockCount: number = 144): Observable<RewardStats> {
     return this.httpClient.get<RewardStats>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/reward-stats/${blockCount}`);
   }

frontend/src/app/shared/graphs.utils.ts

@@ -1,10 +1,9 @@
 export const formatterXAxis = (
   locale: string,
   windowPreference: string,
-  value: string
+  value: string | number
 ) => {
-
+  if (typeof value === 'string' && value.length === 0) {
-  if(value.length === 0){
     return null;
   }
 
@@ -13,6 +12,7 @@ export const formatterXAxis = (
     case '2h':
       return date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });
     case '24h':
+    case '3d':
       return date.toLocaleTimeString(locale, { weekday: 'short', hour: 'numeric', minute: 'numeric' });
     case '1w':
     case '1m':
@@ -23,6 +23,8 @@ export const formatterXAxis = (
     case '2y':
     case '3y':
       return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
+    case 'all':
+      return date.toLocaleDateString(locale, { year: 'numeric', month: 'short' });
   }
 };
 
@@ -35,6 +37,7 @@ export const formatterXAxisLabel = (
     case '2h':
     case '24h':
       return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
+    case '3d':
     case '1w':
       return date.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
     case '1m':
@@ -47,3 +50,30 @@ export const formatterXAxisLabel = (
       return null;
   }
 };
+
+export const formatterXAxisTimeCategory = (
+  locale: string,
+  windowPreference: string,
+  value: number
+) => {
+  const date = new Date(value);
+  switch (windowPreference) {
+    case '2h':
+      return date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });
+    case '24h':
+      return date.toLocaleTimeString(locale, { weekday: 'short', hour: 'numeric' });
+    case '3d':
+    case '1w':
+      return date.toLocaleTimeString(locale, { month: 'short', day: 'numeric', hour: 'numeric' });
+    case '1m':
+    case '3m':
+      return date.toLocaleDateString(locale, { month: 'long', day: 'numeric' });
+    case '6m':
+    case '1y':
+      return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
+    case '2y':
+    case '3y':
+    case 'all':
+      return date.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
+  }
+};

production/nginx-cache-warmer

@@ -57,6 +57,16 @@ do for url in / \
 	'/api/v1/mining/blocks/rewards/2y' \
 	'/api/v1/mining/blocks/rewards/3y' \
 	'/api/v1/mining/blocks/rewards/all' \
+	'/api/v1/mining/blocks/fee-rates/24h' \
+	'/api/v1/mining/blocks/fee-rates/3d' \
+	'/api/v1/mining/blocks/fee-rates/1w' \
+	'/api/v1/mining/blocks/fee-rates/1m' \
+	'/api/v1/mining/blocks/fee-rates/3m' \
+	'/api/v1/mining/blocks/fee-rates/6m' \
+	'/api/v1/mining/blocks/fee-rates/1y' \
+	'/api/v1/mining/blocks/fee-rates/2y' \
+	'/api/v1/mining/blocks/fee-rates/3y' \
+	'/api/v1/mining/blocks/fee-rates/all' \
 
 	do
 		curl -s "https://${hostname}${url}" >/dev/null