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

<div class="cards-wrapper">
  <mat-card appearance="outlined" class="card">
    <mat-card-title>
     <p>ECharts Line Chart</p>
   </mat-card-title>
    <app-dynamic-updating-chart [currentTheme]="currentTheme"></app-dynamic-updating-chart>
  </mat-card>

  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Heatmap Chart</p>
    </mat-card-title>
    <app-heatmap-chart [heatmapChartData]="heatmapChartData$ | async" [currentTheme]="currentTheme"></app-heatmap-chart>
  </mat-card>
</div>

<div class="cards-wrapper">
  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Radar Chart</p>
    </mat-card-title>
    <app-radar-chart [radarChartData]="radarChartData$ | async" [currentTheme]="currentTheme"></app-radar-chart>
  </mat-card>

  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Bar Chart with Image</p>
    </mat-card-title>
    <app-image-bar-chart></app-image-bar-chart>
  </mat-card>
</div>

<div class="cards-wrapper">
  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Dashed Line Chart</p>
    </mat-card-title>
    <app-dashed-line-chart [dashedLineChartData]="dashedLineChartData$ | async"></app-dashed-line-chart>
  </mat-card>

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