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) => `
`; let itemFormatted = '