<div class="row">
  <div class="col-12">
    <app-heading></app-heading>
    <app-breadcrumb></app-breadcrumb>
    <div class="separator mb-5"></div>
  </div>
</div>
<div class="row">
  <div class="col-12">

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'charts.line' | translate}}</h5>
        <div class="row">
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-line-chart [shadow]="true" [options]="chartDataConfig.lineChartOptions"
                [data]="lineChartData"></app-line-chart>
            </div>
          </div>
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.no-shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-line-chart [shadow]="false" [options]="chartDataConfig.lineChartOptions"
                [data]="lineChartData"></app-line-chart>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'charts.polar' | translate}}</h5>
        <div class="row">
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-polar-chart [shadow]="true" [options]="chartDataConfig.polarAreaChartOptions"
                [data]="polarAreaChartData"></app-polar-chart>
            </div>
          </div>
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.no-shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-polar-chart [shadow]="false" [options]="chartDataConfig.polarAreaChartOptions"
                [data]="polarAreaChartData"></app-polar-chart>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'charts.area' | translate}}</h5>
        <div class="row">
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-area-chart [shadow]="true" [options]="chartDataConfig.areaChartOptions"
                [data]="areaChartData"></app-area-chart>
            </div>
          </div>
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.no-shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-area-chart [shadow]="false" [options]="chartDataConfig.areaChartOptions"
                [data]="areaChartData"></app-area-chart>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'charts.scatter' | translate}}</h5>
        <div class="row">
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-scatter-chart [shadow]="true" [options]="chartDataConfig.scatterChartOptions"
                [data]="scatterChartData"></app-scatter-chart>
            </div>
          </div>
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.no-shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-scatter-chart [shadow]="false" [options]="chartDataConfig.scatterChartOptions"
                [data]="scatterChartData"></app-scatter-chart>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'charts.bar' | translate}}</h5>
        <div class="row">
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-bar-chart [shadow]="true" [options]="chartDataConfig.barChartOptions"
                [data]="barChartData"></app-bar-chart>
            </div>
          </div>
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.no-shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-bar-chart [shadow]="false" [options]="chartDataConfig.barChartOptions"
                [data]="barChartData"></app-bar-chart>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'charts.radar' | translate}}</h5>
        <div class="row">
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-radar-chart [shadow]="true" [options]="chartDataConfig.radarChartOptions"
                [data]="radarChartData"></app-radar-chart>
            </div>
          </div>
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.no-shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-radar-chart [shadow]="false" [options]="chartDataConfig.radarChartOptions"
                [data]="radarChartData"></app-radar-chart>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'charts.pie' | translate}}</h5>
        <div class="row">
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-pie-chart [shadow]="true" [options]="chartDataConfig.pieChartOptions"
                [data]="pieChartData"></app-pie-chart>
            </div>
          </div>
          <div class="col-lg-6 mb-5">
            <h6 class="mb-4">{{'charts.no-shadow' | translate}}</h6>
            <div class="chart-container chart">
              <app-pie-chart [shadow]="false" [options]="chartDataConfig.pieChartOptions"
                [data]="pieChartData"></app-pie-chart>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
          <h5 class="mb-4">{{'charts.pie' | translate}}</h5>
          <div class="row">
            <div class="col-lg-6 mb-5">
              <h6 class="mb-4">{{'charts.shadow' | translate}}</h6>
              <div class="chart-container chart">
                <app-doughnut-chart [shadow]="true" [options]="chartDataConfig.doughnutChartOptions"
                  [data]="doughnutChartData"></app-doughnut-chart>
              </div>
            </div>
            <div class="col-lg-6 mb-5">
              <h6 class="mb-4">{{'charts.no-shadow' | translate}}</h6>
              <div class="chart-container chart">
                <app-doughnut-chart [shadow]="false" [options]="chartDataConfig.doughnutChartOptions"
                  [data]="doughnutChartData"></app-doughnut-chart>
              </div>
            </div>
          </div>
        </div>
      </div>

  </div>
</div>
