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

<div class="cards-wrapper">
  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Basic Line Chart</p>
    </mat-card-title>
    <app-basic-line-chart [basicLineChartData]="basicLineChartData$ | async" [currentTheme]="currentTheme"></app-basic-line-chart>
  </mat-card>

  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Line Chart with Data Labels</p>
    </mat-card-title>
    <app-line-data-labels-chart [lineDataLabelsChartData]="lineDataLabelsChartData$ | async" [currentTheme]="currentTheme"></app-line-data-labels-chart>
  </mat-card>
</div>

<div class="cards-wrapper">
  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Zoomable Timeseries Chart</p>
    </mat-card-title>
    <app-zoomable-timeseries-chart></app-zoomable-timeseries-chart>
  </mat-card>

  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>Dynamic Updating Chart</p>
    </mat-card-title>
    <app-dynamic-updating-chart [dynamicUpdatingChartData]="dynamicUpdatingChartData$ | async" [currentTheme]="currentTheme"></app-dynamic-updating-chart>
  </mat-card>
</div>
