Merge pull request #2110 from mempool/nymkappa/bugfix/block-prediction-chart-no-data

Fix block prediction chart when there is few or no data available

frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.ts

@@ -98,7 +98,21 @@ export class BlockPredictionGraphComponent implements OnInit {
   }
 
   prepareChartOptions(data) {
+    let title: object;
+    if (data.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: data.length === 0 ? title : undefined,
       animation: false,
       grid: {
         top: 30,
@@ -133,14 +147,13 @@ export class BlockPredictionGraphComponent implements OnInit {
           return tooltip;
         }
       },
-      xAxis: {
+      xAxis: data.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)),
@@ -152,7 +165,7 @@ export class BlockPredictionGraphComponent implements OnInit {
         },
         data: data.map(prediction => prediction[0])
       },
-      yAxis: [
+      yAxis: data.length === 0 ? undefined : [
         {
           type: 'value',
           axisLabel: {
@@ -170,7 +183,7 @@ export class BlockPredictionGraphComponent implements OnInit {
           },
         },
       ],
-      series: [
+      series: data.length === 0 ? undefined : [
         {
           zlevel: 0,
           name: $localize`Match rate`,
@@ -183,9 +196,10 @@ export class BlockPredictionGraphComponent implements OnInit {
           })),
           type: 'bar',
           barWidth: '90%',
+          barMaxWidth: 50,
         },
       ],
-      dataZoom: [{
+      dataZoom: data.length === 0 ? undefined : [{
         type: 'inside',
         realtime: true,
         zoomLock: true,