dashboard.component.html 2.6 KB
<div fxLayout="row wrap">
  <div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
    <mat-card class="card-widget mat-teal">
      <div mat-card-widget>
        <div mat-card-float-icon>
          <mat-icon>money</mat-icon>
        </div>
        <div class="pl-0">
          <h2 mat-card-widget-title>103</h2>
          <p>Deposits</p>
        </div>
      </div>
    </mat-card>
  </div>
  <div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
    <mat-card class="card-widget mat-purple">
      <div mat-card-widget>
        <div mat-card-float-icon>
          <mat-icon>money</mat-icon>
        </div>
        <div class="pl-0">
          <h2 mat-card-widget-title>230</h2>
          <p>Withdrawals</p>
        </div>
      </div>
    </mat-card>
  </div>
  <div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
    <mat-card class="card-widget mat-indigo">
      <div mat-card-widget>
        <div mat-card-float-icon>
          <mat-icon>person</mat-icon>
        </div>
        <div class="pl-0">
          <h2 mat-card-widget-title>870</h2>
          <p>Players</p>
        </div>
      </div>
    </mat-card>
  </div>
  <div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
    <mat-card class="card-widget mat-red">
      <div mat-card-widget>
        <div mat-card-float-icon>
          <mat-icon>person</mat-icon>
        </div>
        <div class="pl-0">
          <h2 mat-card-widget-title>323</h2>
          <p>Affiliates</p>
        </div>
      </div>
    </mat-card>
  </div>
  <!-- bar Player | Affiliates -->
  <div fxFlex.gt-sm="50" fxFlex.gt-xs="30" fxFlex="100">
    <mat-card>
      <mat-card-title>Players | Affiliates</mat-card-title>
      <!-- <mat-card-subtitle>Playesrs | Affiliates</mat-card-subtitle> -->
      <mat-card-content>
        <canvas height="200" baseChart class="chart" 
          [datasets]="barChartData" 
          [labels]="barChartLabels"
          [options]="barChartStackedOptions" 
          [colors]="lineChartColors" 
          [legend]="barChartLegend"
          [chartType]="barChartType"></canvas>
      </mat-card-content>
    </mat-card>
  </div>
  <!-- line Payment -> Deposits | Withdrawals -->
  <div fxFlex.gt-sm="50" fxFlex.gt-xs="30" fxFlex="100">
    <mat-card>
      <mat-card-title>Deposits | Withdrawals</mat-card-title>
      <mat-card-content>
        <canvas height="200" baseChart class="chart"
         [datasets]="lineChartData"
         [labels]="lineChartLabels"
         [options]="lineChartOptions"
         [colors]="lineChartColors"
         [legend]="lineChartLegend"
         [chartType]="lineChartType"></canvas>
      </mat-card-content>
    </mat-card>
  </div>

</div>