Add new component incoming-transactions-graph;

Refactor component mempool-graph;
Refactor component fee-distribution-graph;
Add incoming-transactions-graph to dashboard;
Add incoming-transactions-graph to statistics;
Add incoming-transactions-graph to television;
Add mempool-graph to dashboard;
Add mempool-graph to statistics;
Add mempool-graph to television;
Remove chartist.component;

frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.html

@@ -0,0 +1 @@
+<div class="echarts" echarts [options]="mempoolStatsChartOption"></div>

frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts

@@ -0,0 +1,162 @@
+import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy } from '@angular/core';
+import { formatDate } from '@angular/common';
+import { EChartsOption } from 'echarts';
+import { OnChanges } from '@angular/core';
+
+@Component({
+  selector: 'app-incoming-transactions-graph',
+  templateUrl: './incoming-transactions-graph.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
+  @Input() data: any;
+  @Input() theme: string;
+  @Input() height: number | string = '200';
+  @Input() right: number | string = '10';
+  @Input() top: number | string = '20';
+  @Input() left: number | string = '50';
+
+  mempoolStatsChartOption: EChartsOption = {};
+
+  constructor(
+    @Inject(LOCALE_ID) private locale: string,
+  ) { }
+
+  ngOnChanges(): void {
+    this.mountChart();
+  }
+
+  ngOnInit(): void {
+    this.mountChart();
+  }
+
+  mountChart(): void {
+    this.mempoolStatsChartOption = {
+      grid: {
+        height: this.height,
+        right: this.right,
+        top: this.top,
+        left: this.left,
+      },
+      tooltip: {
+        trigger: 'axis',
+        position: (pos, params, el, elRect, size) => {
+          const obj = { top: -20 };
+          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 80;
+          return obj;
+        },
+        extraCssText: `background: transparent;
+                      border: none;
+                      box-shadow: none;`,
+        axisPointer: {
+          type: 'cross',
+          label: {
+            formatter: (axis: any) => {
+              if (axis.axisDimension === 'y') {
+                return `${Math.floor(axis.value)}`;
+              }
+              if (axis.axisDimension === 'x') {
+                return axis.value;
+              }
+            },
+          }
+        },
+        formatter: (params: any) => {
+          const colorSpan = (color: string) => `<div class="indicator" style="background-color: ` + color + `"></div>`;
+          let itemFormatted = '<div>' + params[0].axisValue + '</div>';
+          params.map((item: any, index: number) => {
+            if (index < 26) {
+              itemFormatted += `<div class="item">
+                ${colorSpan(item.color)}
+                <div class="grow"></div>
+                <div class="value">${item.value}</div>
+              </div>`;
+            }
+          });
+          if (this.theme !== '') {
+            return `<div class="tx-wrapper-tooltip-chart ${this.theme}">${itemFormatted}</div>`;
+          }
+          return `<div class="tx-wrapper-tooltip-chart">${itemFormatted}</div>`;
+        }
+      },
+      xAxis: {
+        type: 'category',
+        data: this.data.labels.map((value: any) => formatDate(value, 'HH:mm', this.locale)),
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            type: 'dotted',
+            color: '#ffffff66',
+            opacity: 0.25,
+          }
+        }
+      },
+      series: [
+        {
+          data: this.data.series[0],
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          lineStyle: {
+            width: 3,
+          },
+          markLine: {
+            silent: true,
+            symbol: 'none',
+            lineStyle: {
+              color: '#fff',
+              opacity: 0.75,
+              width: 2,
+            },
+            data: [{
+              yAxis: 1667,
+              label: {
+                show: false,
+                color: '#ffffff',
+              }
+            }],
+          }
+        },
+      ],
+      visualMap: {
+        show: false,
+        top: 50,
+        right: 10,
+        pieces: [{
+          gt: 0,
+          lte: 1667,
+          color: '#7CB342'
+        },
+        {
+          gt: 1667,
+          lte: 2000,
+          color: '#FDD835'
+        },
+        {
+          gt: 2000,
+          lte: 2500,
+          color: '#FFB300'
+        },
+        {
+          gt: 2500,
+          lte: 3000,
+          color: '#FB8C00'
+        },
+        {
+          gt: 3000,
+          lte: 3500,
+          color: '#F4511E'
+        },
+        {
+          gt: 3500,
+          color: '#D81B60'
+        }],
+        outOfRange: {
+          color: '#999'
+        }
+      },
+    };
+  }
+}