<app-breadcrumb [path]="routes.PIE_CHARTS"></app-breadcrumb>

<div class="cards-wrapper">
  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Basic Pie Chart</p>
    </mat-card-title>
    <app-simple-pie-chart></app-simple-pie-chart>
  </mat-card>

  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Basic Donut Pie Chart</p>
    </mat-card-title>
    <app-pie-chart [pieChartData]="pieChartData$ | async"></app-pie-chart>
  </mat-card>
</div>

<div class="cards-wrapper">
  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Dynamic Pie Chart</p>
    </mat-card-title>
    <app-update-pie-chart></app-update-pie-chart>
  </mat-card>

  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Monochrome Pie Chart</p>
    </mat-card-title>
    <app-monochome-pie-chart></app-monochome-pie-chart>
  </mat-card>
</div>
