widgetify block fee rates chart

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

@@ -1,13 +1,13 @@
-<app-indexing-progress></app-indexing-progress>
+<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
 
-<div class="full-container">
-  <div class="card-header mb-0 mb-md-4">
+<div [class.full-container]="!widget">
+  <div *ngIf="!widget" class="card-header mb-0 mb-md-4">
     <div class="d-flex d-md-block align-items-baseline">
       <span i18n="mining.block-fee-rates">Block Fee Rates</span>
       <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>
-    </div>  
+    </div>
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
@@ -45,11 +45,45 @@
     </form>
   </div>
 
-  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
+  <div *ngIf="widget">
+    <div class="block-fee-rates" *ngIf="(statsObservable$ | async) as stats; else loadingStats">
+      <div class="item">
+        <h5 class="card-title" i18n="mining.avg-block-fee-1m">Avg Block Fee (1m)</h5>
+        <p class="card-text">
+          <app-fee-rate [fee]="stats.avgMedianRate"></app-fee-rate>
+        </p>
+      </div>
+      <div class="item">
+        <h5 class="card-title" i18n="block.???">???</h5>
+        <p class="card-text">
+          ???
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div [class.chart]="!widget" [class.chart-widget]="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>
+</div>
+
+<ng-template #loadingStats>
+  <div class="block-fee-rates">
+    <div class="item">
+      <h5 class="card-title" i18n="mining.avg-block-fee">Avg Block Fee</h5>
+      <p class="card-text">
+        <span class="skeleton-loader skeleton-loader-big"></span>
+      </p>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="block.???">???</h5>
+      <p class="card-text">
+        <span class="skeleton-loader skeleton-loader-big"></span>
+      </p>
+    </div>
+  </div>
+</ng-template>