mempool/frontend/src/app/components/address-graph/address-graph.component.ts

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import { echarts, EChartsOption } from '@app/graphs/echarts';
import { BehaviorSubject, Observable, Subscription, combineLatest, of } from 'rxjs';
import { catchError, map, switchMap, tap } from 'rxjs/operators';
import { AddressTxSummary, ChainStats } from '@interfaces/electrs.interface';
import { ElectrsApiService } from '@app/services/electrs-api.service';
import { AmountShortenerPipe } from '@app/shared/pipes/amount-shortener.pipe';
import { Router } from '@angular/router';
import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pipe';
import { StateService } from '@app/services/state.service';
import { PriceService } from '@app/services/price.service';
import { FiatCurrencyPipe } from '@app/shared/pipes/fiat-currency.pipe';

const periodSeconds = {
  '1d': (60 * 60 * 24),
  '3d': (60 * 60 * 24 * 3),
  '1w': (60 * 60 * 24 * 7),
  '1m': (60 * 60 * 24 * 30),
  '6m': (60 * 60 * 24 * 180),
  '1y': (60 * 60 * 24 * 365),
};

@Component({
  selector: 'app-address-graph',
  templateUrl: './address-graph.component.html',
  styleUrls: ['./address-graph.component.scss'],
  styles: [`
    .loadingGraphs {
      position: absolute;
      top: 50%;
      left: calc(50% - 15px);
      z-index: 99;
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AddressGraphComponent implements OnChanges, OnDestroy {
  @Input() address: string;
  @Input() isPubkey: boolean = false;
  @Input() stats: ChainStats;
  @Input() addressSummary$: Observable<AddressTxSummary[]> | null;
  @Input() period: '1d' | '3d' | '1w' | '1m' | '6m' | '1y' | 'all' = 'all';
  @Input() height: number = 200;
  @Input() right: number | string = 10;
  @Input() left: number | string = 70;
  @Input() widget: boolean = false;
  @Input() defaultFiat: boolean = false;

  data: any[] = [];
  fiatData: any[] = [];
  hoverData: any[] = [];
  conversions: any;
  allowZoom: boolean = false;
  initialRight = this.right;
  initialLeft = this.left;
  selected = { [$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`]: true, 'Fiat': false };

  subscription: Subscription;
  redraw$: BehaviorSubject<boolean> = new BehaviorSubject(false);

  chartOptions: EChartsOption = {};
  chartInitOptions = {
    renderer: 'svg',
  };

  error: any;
  isLoading = true;
  chartInstance: any = undefined;

  constructor(
    @Inject(LOCALE_ID) public locale: string,
    public stateService: StateService,
    private electrsApiService: ElectrsApiService,
    private router: Router,
    private amountShortenerPipe: AmountShortenerPipe,
    private cd: ChangeDetectorRef,
    private relativeUrlPipe: RelativeUrlPipe,
    private priceService: PriceService,
    private fiatCurrencyPipe: FiatCurrencyPipe,
    private zone: NgZone,
  ) {}

  ngOnChanges(changes: SimpleChanges): void {
    this.isLoading = true;
    if (!this.addressSummary$ && (!this.address || !this.stats)) {
      return;
    }
    if (changes.defaultFiat) {
      this.selected['Fiat'] = !!this.defaultFiat;
    }
    if (changes.address || changes.isPubkey || changes.addressSummary$ || changes.stats) {
      if (this.subscription) {
        this.subscription.unsubscribe();
      }
      this.subscription = combineLatest([
        this.redraw$,
        (this.addressSummary$ || (this.isPubkey
          ? this.electrsApiService.getScriptHashSummary$((this.address.length === 66 ? '21' : '41') + this.address + 'ac')
          : this.electrsApiService.getAddressSummary$(this.address)).pipe(
          catchError(e => {
            this.error = `Failed to fetch address balance history: ${e?.status || ''} ${e?.statusText || 'unknown error'}`;
            return of(null);
          }),
        )),
        this.stateService.conversions$
      ]).pipe(
        switchMap(([redraw, addressSummary, conversions]) => {
          this.conversions = conversions;
          if (addressSummary) {
            let extendedSummary = this.extendSummary(addressSummary);
            return this.priceService.getPriceByBulk$(extendedSummary.map(d => d.time), 'USD').pipe(
              tap((prices) => {
                if (prices.length !== extendedSummary.length) {
                  extendedSummary = extendedSummary.map(item => ({ ...item, price: 0 }));
                } else {
                  extendedSummary = extendedSummary.map((item, index) => {
                    let price = 0;
                    if (prices[index].price) {
                      price = prices[index].price['USD'];
                    } else if (this.conversions && this.conversions['USD']) {
                      price = this.conversions['USD'];
                    }
                    return { ...item, price: price }
                  });
                }
              }),
              map(() => [redraw, extendedSummary, conversions])
            )
          } else {
            return of([redraw, addressSummary, conversions]);
          }
        })
      ).subscribe(([redraw, addressSummary, conversions]) => {
        if (addressSummary) {
          this.error = null;
          this.allowZoom = addressSummary.length > 100 && !this.widget;
          this.prepareChartOptions(addressSummary);
        }
        this.isLoading = false;
        this.cd.markForCheck();
      });
    } else {
      // re-trigger subscription
      this.redraw$.next(true);
    }
  }

  prepareChartOptions(summary: AddressTxSummary[]) {
    if (!summary) {
      return;
    }

    const total = this.stats ? (this.stats.funded_txo_sum - this.stats.spent_txo_sum) : summary.reduce((acc, tx) => acc + tx.value, 0);
    let runningTotal = total;
    const processData = summary.map(d => {
        const balance = runningTotal;
        const fiatBalance = runningTotal * d.price / 100_000_000;
        runningTotal -= d.value;
        return {
            time: d.time * 1000,
            balance,
            fiatBalance,
            d
        };
    }).reverse();

    this.data = processData.filter(({ d }) => d.txid !== undefined).map(({ time, balance, d }) => [time, balance, d]);
    this.fiatData = processData.map(({ time, fiatBalance, balance, d }) => [time, fiatBalance, d, balance]);

    const now = Date.now();
    if (this.period !== 'all') {
      const start = now - (periodSeconds[this.period] * 1000);
      this.data = this.data.filter(d => d[0] >= start);
      const startFiat = this.data[0]?.[0] ?? start; // Make sure USD data starts at the same time as BTC data
      this.fiatData = this.fiatData.filter(d => d[0] >= startFiat);
    }
    this.data.push(
      {value: [now, total], symbol: 'none', tooltip: { show: false }}
    );

    const maxValue = this.data.reduce((acc, d) => Math.max(acc, Math.abs(d[1] ?? d.value[1])), 0);
    const minValue = this.data.reduce((acc, d) => Math.min(acc, Math.abs(d[1] ?? d.value[1])), maxValue);

    this.right = this.selected['Fiat'] ? +this.initialRight + 40 : this.initialRight;
    this.left = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? this.initialLeft : +this.initialLeft - 40;

    this.chartOptions = {
      color: [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#FDD835' },
          { offset: 1, color: '#FB8C00' },
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#4CAF50' },
          { offset: 1, color: '#1B5E20' },
        ]),
      ],
      animation: false,
      grid: {
        top: 20,
        bottom: this.allowZoom ? 65 : 20,
        right: this.right,
        left: this.left,
      },
      legend: !this.stateService.isAnyTestnet() ? {
        data: [
          {
            name: $localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`,
            inactiveColor: 'var(--grey)',
            textStyle: {
              color: 'white',
            },
            icon: 'roundRect',
          },
          {
            name: 'Fiat',
            inactiveColor: 'var(--grey)',
            textStyle: {
              color: 'white',
            },
            icon: 'roundRect',
          }
        ],
        selected: this.selected,
        formatter: function (name) {
          return name === 'Fiat' ? 'USD' : 'BTC';
        }
      } : undefined,
      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) {
          const btcData = data.filter(d => d.seriesName !== 'Fiat');
          const fiatData = data.filter(d => d.seriesName === 'Fiat');
          data = btcData.length ? btcData : fiatData;
          if ((!btcData.length || !btcData[0]?.data?.[2]?.txid) && !fiatData.length) {
            return '';
          }
          let tooltip = '<div>';

          const hasTx = data[0].data[2].txid;
          const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });

          tooltip += `<div>
            <div style="text-align: right;">
            <div><b>${date}</b></div>`;

          if (hasTx) {
            const header = data.length === 1
            ? `${data[0].data[2].txid.slice(0, 6)}...${data[0].data[2].txid.slice(-6)}`
            : `${data.length} transactions`;
            tooltip += `<div><b>${header}</b></div>`;
          }

          const formatBTC = (val, decimal) => (val / 100_000_000).toFixed(decimal);
          const formatFiat = (val) => this.fiatCurrencyPipe.transform(val, null, 'USD');

          const btcVal = btcData.reduce((total, d) => total + d.data[2].value, 0);
          const fiatVal = fiatData.reduce((total, d) => total + d.data[2].value * d.data[2].price / 100_000_000, 0);
          const btcColor = btcVal === 0 ? '' : (btcVal > 0 ? 'var(--green)' : 'var(--red)');
          const fiatColor = fiatVal === 0 ? '' : (fiatVal > 0 ? 'var(--green)' : 'var(--red)');
          const btcSymbol = btcVal > 0 ? '+' : '';
          const fiatSymbol = fiatVal > 0 ? '+' : '';

          if (btcData.length && fiatData.length) {
            tooltip += `<div style="display: flex; justify-content: space-between; color: ${btcColor}">
              <span style="text-align: left; margin-right: 10px;">${btcSymbol} ${formatBTC(btcVal, 4)} BTC</span>
              <span style="text-align: right;">${fiatSymbol} ${formatFiat(fiatVal)}</span>
            </div>
            <div style="display: flex; justify-content: space-between;">
              <span style="text-align: left; margin-right: 10px;">${formatBTC(btcData[0].data[1], 4)} BTC</span>
              <span style="text-align: right;">${formatFiat(fiatData[0].data[1])}</span>
            </div>`;
          } else if (btcData.length) {
            tooltip += `<span style="color: ${btcColor}">${btcSymbol} ${formatBTC(btcVal, 8)} BTC</span><br>
              <span>${formatBTC(data[0].data[1], 8)} BTC</span>`;
          } else {
            if (this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`]) {
              tooltip += `<div style="display: flex; justify-content: space-between;">
                <span style="text-align: left; margin-right: 10px;">${formatBTC(data[0].data[3], 4)} BTC</span>
                <span style="text-align: right;">${formatFiat(data[0].data[1])}</span>
              </div>`;
            } else {
              tooltip += `${hasTx ? `<span style="color: ${fiatColor}">${fiatSymbol} ${formatFiat(fiatVal)}</span><br>` : ''}
              <span>${formatFiat(data[0].data[1])}</span>`;
            }
          }

          tooltip += `</div></div>`;
          return tooltip;
        }.bind(this)
      },
      xAxis: {
        type: 'time',
        splitNumber: this.isMobile() ? 5 : 10,
        axisLabel: {
          hideOverlap: true,
        }
      },
      yAxis: [
        {
          type: 'value',
          position: 'left',
          axisLabel: {
            color: 'rgb(110, 112, 121)',
            formatter: (val): string => {
              let valSpan = maxValue - (this.period === 'all' ? 0 : minValue);
              if (valSpan > 100_000_000_000) {
                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 0, undefined, true)} BTC`;
              }
              else if (valSpan > 1_000_000_000) {
                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 2, undefined, true)} BTC`;
              } else if (valSpan > 100_000_000) {
                return `${(val / 100_000_000).toFixed(1)} BTC`;
              } else if (valSpan > 10_000_000) {
                return `${(val / 100_000_000).toFixed(2)} BTC`;
              } else if (valSpan > 1_000_000) {
                if (maxValue > 100_000_000_000) {
                  return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 3, undefined, true)} BTC`;
                }
                return `${(val / 100_000_000).toFixed(3)} BTC`;
              } else {
                return `${this.amountShortenerPipe.transform(val, 0, undefined, true)} sats`;
              }
            }
          },
          splitLine: {
            show: false,
          },
          min: this.period === 'all' ? 0 : 'dataMin'
        },
        {
          type: 'value',
          axisLabel: {
            color: 'rgb(110, 112, 121)',
            formatter: function(val) {
              return `$${this.amountShortenerPipe.transform(val, 0, undefined, true)}`;
            }.bind(this)
          },
          splitLine: {
            show: false,
          },
          min: this.period === 'all' ? 0 : 'dataMin'
        },
      ],
      series: [
        {
          name: $localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`,
          yAxisIndex: 0,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 8,
          data: this.data,
          areaStyle: {
            opacity: 0.5,
          },
          triggerLineEvent: true,
          type: 'line',
          smooth: false,
          step: 'end'
        }, !this.stateService.isAnyTestnet() ?
        {
          name: 'Fiat',
          yAxisIndex: 1,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 8,
          data: this.fiatData,
          areaStyle: {
            opacity: 0.5,
          },
          triggerLineEvent: true,
          type: 'line',
          smooth: false,
          step: 'end'
        } : undefined
      ],
      dataZoom: this.allowZoom ? [{
        type: 'inside',
        realtime: true,
        zoomLock: true,
        maxSpan: 100,
        minSpan: 5,
        moveOnMouseMove: false,
      }, {
        showDetail: false,
        show: true,
        type: 'slider',
        brushSelect: false,
        realtime: true,
        left: this.left,
        right: this.right,
        selectedDataBackground: {
          lineStyle: {
            color: '#fff',
            opacity: 0.45,
          },
        },
      }] : undefined
    };
  }

  onChartClick(e) {
    if (this.hoverData?.length && this.hoverData[0]?.[2]?.txid) {
      this.zone.run(() => { 
        const url = this.relativeUrlPipe.transform(`/tx/${this.hoverData[0][2].txid}`);
        if (e.event.event.shiftKey || e.event.event.ctrlKey || e.event.event.metaKey) {
          window.open(url);
        } else {
          this.router.navigate([url]);
        }
      });
    }
  }

  onTooltip(e) {
    this.hoverData = (e?.dataByCoordSys?.[0]?.dataByAxis?.[0]?.seriesDataIndices || []).map(indices => this.data[indices.dataIndex]);
  }

  onLegendSelectChanged(e) {
    this.selected = e.selected;
    this.right = this.selected['Fiat'] ? +this.initialRight + 40 : this.initialRight;
    this.left = this.selected[$localize`:@@7e69426bd97a606d8ae6026762858e6e7c86a1fd:Balance`] ? this.initialLeft : +this.initialLeft - 40;

    this.chartOptions = {
      grid: {
        right: this.right,
        left: this.left,
      },
      legend: {
        selected: this.selected,
      },
      dataZoom: this.allowZoom ? [{
        left: this.left,
        right: this.right,
      }, {
        left: this.left,
        right: this.right,
      }] : undefined
    };

    if (this.chartInstance) {
      this.chartInstance.setOption(this.chartOptions);
    }
  }

  onChartInit(ec) {
    this.chartInstance = ec;
    this.chartInstance.on('showTip', this.onTooltip.bind(this));
    this.chartInstance.on('click', 'series', this.onChartClick.bind(this));
    this.chartInstance.on('legendselectchanged', this.onLegendSelectChanged.bind(this));
  }

  ngOnDestroy(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

  isMobile() {
    return (window.innerWidth <= 767.98);
  }

  extendSummary(summary) {
    let extendedSummary = summary.slice();

    // Add a point at today's date to make the graph end at the current time
    extendedSummary.unshift({ time: Date.now() / 1000, value: 0 });
    extendedSummary.reverse();
    
    let oneHour = 60 * 60;
    // Fill gaps longer than interval
    for (let i = 0; i < extendedSummary.length - 1; i++) {
      let hours = Math.floor((extendedSummary[i + 1].time - extendedSummary[i].time) / oneHour);      
      if (hours > 1) {
        for (let j = 1; j < hours; j++) {
          let newTime = extendedSummary[i].time + oneHour * j;
          extendedSummary.splice(i + j, 0, { time: newTime, value: 0 });
        }
        i += hours - 1;
      }
    }
  
    return extendedSummary.reverse();
  }
}