cloudfoundry/stratos

<mat-card *ngIf="metricData$ | async as metricData">
  <mat-card-header>
    <mat-card-title>
      {{metricType}} <br />
      <div class="autoscaler-metric-subtitle">
        {{paramsMetricsStart | date:'medium'}} ~
        {{paramsMetricsEnd | date:'medium'}}
      </div>
    </mat-card-title>
  </mat-card-header>
  <mat-card-content class="autoscaler-chart-card">
    <div class="autoscaler-chart-gauge">
      <ngx-charts-gauge [margin]="[0,30,0,70]" [customColors]="[metricData[0].entity.latest.colorTarget[0]]"
        [results]="[metricData[0].entity.latest.target[0]]" [animations]="true" [textValue]="" [scheme]="'cool'"
        [min]="0" [max]="metricData[0].entity.chartMaxValue" [units]="metricData[0].entity.unit" [angleSpan]="240"
        [startAngle]="-120" [showAxis]="true" [bigSegments]="10" [smallSegments]="5" [tooltipDisabled]="false"
        (select)="select($event)">
      </ngx-charts-gauge>
    </div>
    <div class="autoscaler-chart-combo">
      <app-autoscaler-combo-chart-component [scheme]="comboBarScheme" [colorSchemeLine]="lineChartScheme"
        [customColors]="metricData[0].entity.formated.colorTarget" [results]="metricData[0].entity.formated.target"
        [animations]="true" [lineChart]="metricData[0].entity.markline" [tooltipDisabled]="false"
        [yLeftAxisScaleFactor]="yLeftAxisScale" [gradient]="false" [xAxis]="true" [yAxis]="true" [legend]="true"
        [legendData]="appAutoscalerAppMetricLegend.legendColor" [showGridLines]="true" [showXAxisLabel]="true"
        [showYAxisLabel]="true" [yAxisLabel]="metricData[0].entity.unit" [metricName]="metricType"
        [yScaleMax]="metricData[0].entity.chartMaxValue">
      </app-autoscaler-combo-chart-component>
    </div>
  </mat-card-content>
</mat-card>