insight-tcr/src/app/home/home.page.html

A blockchain explorer for Bitcore

<ion-header no-border>
  <ion-toolbar>
    <ng-container *ngIf="(config.currentChain$ | async) as currentChain">
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
        <ion-back-button></ion-back-button>
      </ion-buttons>
      <ion-title>{{ currentChain.name }}</ion-title>
      <ion-buttons slot="end">
        <ion-button [routerLink]="['/' + currentChain.code + '/search/']">
          <ion-icon slot="icon-only" name="search"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ng-container>
  </ion-toolbar>
</ion-header>

<div class="home-daily-transactions">
  <div class="header">
    <span class="title">{{ rangeUnit }} Transactions</span>
    <!-- TODO: range selector -->
    <div class="range-selector">
      <div
        [ngClass]="{ selected: transactionsRange === 'lastMonth' }"
        (click)="show1M()"
      >
        1M
      </div>
      <div
        [ngClass]="{ selected: transactionsRange === 'last3Months' }"
        (click)="show3M()"
      >
        3M
      </div>
      <div
        [ngClass]="{ selected: transactionsRange === 'lastYear' }"
        (click)="show1Y()"
      >
        1Y
      </div>
      <div
        [ngClass]="{ selected: transactionsRange === 'all' }"
        (click)="showAll()"
      >
        ALL
      </div>
    </div>
  </div>
  <ng-container *ngIf="(dailyTransactions$ | async) as dailyTransactions">
    <div class="chart">
      <ngx-charts-bar-vertical
        [scheme]="dailyTransactionsBarColor"
        [results]="dailyTransactions[transactionsRange]"
        [xAxis]="false"
        [yAxis]="true"
        [yAxisLabel]="'Transactions'"
        [showGridLines]="true"
        [barPadding]="barPadding"
        [roundEdges]="false"
        (select)="clickedDay($event)"
      >
      </ngx-charts-bar-vertical>
    </div>
  </ng-container>
</div>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size="12" size-md>
        <div class="home-placeholder top-element">signs of life</div>
      </ion-col>
      <ion-col size="12" size-md>
        <div class="home-placeholder top-element">last 6 blocks</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>