Add block fee rate percentiles chart

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`;
 
@@ -436,7 +440,9 @@ class BlocksRepository {
     try {
       connection = await DB.getConnection();
 
-      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(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,

backend/src/routes.ts

@@ -672,14 +672,14 @@ class Routes {
 
   public async $getHistoricalBlockFeeRates(req: Request, res: Response) {
     try {
-      const blockFees = await mining.$getHistoricalBlockFeeRates(req.params.interval ?? null);
+      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,
-        blockFees: blockFees,
+        blockFeeRates: blockFeeRates,
       });
     } catch (e) {
       res.status(500).send(e instanceof Error ? e.message : e);

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,46 @@
+<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">
+  </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,257 @@
+import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, 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 } 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';
+
+@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 = '';
+
+  constructor(
+    @Inject(LOCALE_ID) public locale: string,
+    private seoService: SeoService,
+    private apiService: ApiService,
+    private formBuilder: FormBuilder,
+    private storageService: StorageService,
+    private miningService: MiningService
+  ) {
+    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: 70,
+        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 : {
+        type: 'category',
+        splitNumber: this.isMobile() ? 5 : 10,
+        axisLabel: {
+          hideOverlap: true,
+          formatter: val => formatterXAxis(this.locale, this.timespan, parseInt(val, 10)),
+        },
+      },
+      legend: (data.series.length === 0) ? undefined : {
+        data: data.legends,
+        selected: {
+          'Min': true,
+          '10th': true,
+          '25th': true,
+          'Median': true,
+          '75th': true,
+          '90th': true,
+          'Max': false,
+        }
+      },
+      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} sats/vB`;
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: '#ffffff66',
+            opacity: 0.25,
+          }
+        },
+        type: 'value',
+        max: () => this.timespan === 'all' ? 5000 : undefined,
+      },
+      series: data.series,
+      dataZoom: [{
+        type: 'inside',
+        realtime: true,
+        zoomLock: true,
+        maxSpan: 100,
+        minSpan: 10,
+        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,
+          }
+        },
+      }],
+    };
+  }
+
+  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,8 +149,12 @@ export class BlockFeesGraphComponent implements OnInit {
             }
           },
           splitLine: {
-            show: false,
+            lineStyle: {
-          }
+              type: 'dotted',
+              color: '#ffffff66',
+              opacity: 0.25,
+            }
+          },
         },
       ],
       series: [

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

@@ -44,21 +44,4 @@
     <div class="spinner-border text-light"></div>
   </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/components/block-rewards-graph/block-rewards-graph.component.ts

@@ -149,8 +149,12 @@ export class BlockRewardsGraphComponent implements OnInit {
             }
           },
           splitLine: {
-            show: false,
+            lineStyle: {
-          }
+              type: 'dotted',
+              color: '#ffffff66',
+              opacity: 0.25,
+            }
+          },
         },
       ],
       series: [

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 ? [] : [

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':
@@ -22,6 +22,7 @@ export const formatterXAxis = (
       return date.toLocaleTimeString(locale, { month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' });
     case '2y':
     case '3y':
+    case 'all':
       return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
   }
 };