opt-cc/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.html

<div class="overview" xmlns="http://www.w3.org/1999/html">

  <h2 class="pull-left">Spielerstatistik - {{campaignPlayer.name}}</h2>
  <h2 class="pull-right">{{campaignPlayer.campaign.title}} Kampagne</h2>


  <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"></span>
      <ngx-charts-linear-gauge
        [view]="[200, 100]"
        [scheme]="colorScheme"
        [value]="respawnDeathRatio"
        [previousValue]="0.5"
        [max]="1"
        [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">
      <ngx-charts-line-chart
        [results]="killData"
        [showRefLines]="showRefLines"
        [showRefLabels]="showRefLabels"
        [referenceLines]="killRefLines"
        [scheme]="colorScheme"
        [gradient]="gradient"
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        [legend]="legend"
        [legendTitle]="legendTitle"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [yAxisLabel]="yAxisKill"
        [autoScale]="autoscale"
        [timeline]="timeline"
        [roundDomains]="roundDomains">
      </ngx-charts-line-chart>
    </div>

    <div class="chart-container">
      <ngx-charts-line-chart
        [results]="friendlyFireData"
        [showRefLines]="showRefLines"
        [showRefLabels]="showRefLabels"
        [referenceLines]="friendlyFireRefLines"
        [scheme]="colorScheme"
        [gradient]="gradient"
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        [legend]="legend"
        [legendTitle]="legendTitle"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [yAxisLabel]="yAxisFriendlyFire"
        [autoScale]="autoscale"
        [timeline]="timeline"
        [roundDomains]="roundDomains">
      </ngx-charts-line-chart>
    </div>

    <div class="chart-container">
      <ngx-charts-line-chart
        [results]="deathData"
        [showRefLines]="showRefLines"
        [showRefLabels]="showRefLabels"
        [referenceLines]="deathRefLines"
        [scheme]="colorScheme"
        [gradient]="gradient"
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        [legend]="legend"
        [legendTitle]="legendTitle"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [yAxisLabel]="yAxisDeath"
        [autoScale]="autoscale"
        [timeline]="timeline"
        [roundDomains]="roundDomains">
      </ngx-charts-line-chart>
    </div>

    <div class="chart-container">
      <ngx-charts-line-chart
        [results]="respawnData"
        [showRefLines]="showRefLines"
        [showRefLabels]="showRefLabels"
        [referenceLines]="respawnRefLines"
        [scheme]="colorScheme"
        [gradient]="gradient"
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        [legend]="legend"
        [legendTitle]="legendTitle"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [yAxisLabel]="yAxisRespawn"
        [autoScale]="autoscale"
        [timeline]="timeline"
        [roundDomains]="roundDomains">
      </ngx-charts-line-chart>
    </div>

    <div class="chart-container">
      <ngx-charts-line-chart
        [results]="reviveData"
        [showRefLines]="showRefLines"
        [showRefLabels]="showRefLabels"
        [referenceLines]="reviveRefLines"
        [scheme]="colorScheme"
        [gradient]="gradient"
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        [legend]="legend"
        [legendTitle]="legendTitle"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [yAxisLabel]="yAxisRevive"
        [autoScale]="autoscale"
        [timeline]="timeline"
        [roundDomains]="roundDomains">
      </ngx-charts-line-chart>
    </div>

    <div class="chart-container">
      <ngx-charts-line-chart
        [results]="captureData"
        [showRefLines]="showRefLines"
        [showRefLabels]="showRefLabels"
        [referenceLines]="captureRefLines"
        [scheme]="colorScheme"
        [gradient]="gradient"
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        [legend]="legend"
        [legendTitle]="legendTitle"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [yAxisLabel]="yAxisCapture"
        [autoScale]="autoscale"
        [timeline]="timeline"
        [roundDomains]="roundDomains">
      </ngx-charts-line-chart>
    </div>
  </div>

</div>