<div class="fade-in player-campaign-detail-container" xmlns="http://www.w3.org/1999/html">
  <h2 class="pull-left">Kampagnendetails - {{campaignPlayer.name}}</h2>
  <h2 class="pull-right">{{campaignPlayer.campaign.title}} Kampagne</h2>

  <span class="btn btn-default btn-back" (click)="navigateBack()">< Zurück</span>

  <div class="sum-container">
    <div class="gauge-container pull-left">
      <ngx-charts-linear-gauge
        [view]="[200, 100]"
        [scheme]="colorScheme"
        [value]="kdRatio"
        [previousValue]="1"
        [max]="maxKd"
        [min]="0"
        [units]="'Kill/Death'">
      </ngx-charts-linear-gauge>
      <span style="height: 150px; display: block;"></span>
      <ngx-charts-linear-gauge
        [view]="[200, 100]"
        [scheme]="colorScheme"
        [value]="respawnDeathRatio"
        [previousValue]="0.5"
        [max]="maxRespawnDeathRatio"
        [min]="0"
        [units]="'Respawn/Death'">
      </ngx-charts-linear-gauge>
    </div>

    <div class="sum-bar-container pull-left">
      <ngx-charts-bar-horizontal
        [scheme]="colorSchemeBar"
        [results]="sumData"
        [gradient]="gradient"
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel">
      </ngx-charts-bar-horizontal>
    </div>
  </div>

  <div class="charts-parent">
    <div class="chart-container" *ngFor="let category of graphData">
      <ngx-charts-line-chart
        [results]="category.data"
        [showRefLines]="showRefLines"
        [showRefLabels]="showRefLabels"
        [referenceLines]="category.refLine"
        [scheme]="colorScheme"
        [gradient]="gradient"
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        [legend]="legend"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [yAxisLabel]="category.label"
        [autoScale]="autoscale"
        [timeline]="timeline"
        [roundDomains]="roundDomains">
      </ngx-charts-line-chart>
    </div>
  </div>
</div>