53 lines
2.0 KiB
HTML
53 lines
2.0 KiB
HTML
<div class="fade-in fraction-stats-container">
|
|
<mat-button-toggle-group class="chart-select-group"
|
|
#group="matButtonToggleGroup"
|
|
[(ngModel)]="activeChartSelect"
|
|
(change)="selectChart(group.value)">
|
|
<mat-button-toggle *ngFor="let labelKey of labelsKeys" value="{{labels[labelKey]}}">
|
|
{{labels[labelKey] | translate}}
|
|
</mat-button-toggle>
|
|
</mat-button-toggle-group>
|
|
|
|
<div *ngIf="showLineChart" class="chart-container">
|
|
<ngx-charts-line-chart
|
|
[scheme]="colorScheme"
|
|
[results]="lineChartData"
|
|
[gradient]="gradient"
|
|
[xAxis]="xAxis"
|
|
[yAxis]="yAxis"
|
|
[legend]="legend"
|
|
[legendTitle]="legendTitle"
|
|
[showXAxisLabel]="showXAxisLabel"
|
|
[showYAxisLabel]="showYAxisLabel"
|
|
[yAxisLabel]="chartYAxisLabel"
|
|
[autoScale]="autoscale"
|
|
[timeline]="timeline"
|
|
[roundDomains]="roundDomains">
|
|
</ngx-charts-line-chart>
|
|
</div>
|
|
|
|
<div *ngIf="!showLineChart" class="chart-container">
|
|
<ngx-charts-bar-vertical-stacked
|
|
[scheme]="colorScheme"
|
|
[results]="barChartData"
|
|
[xAxis]="xAxis"
|
|
[yAxis]="yAxis"
|
|
[legend]="legend"
|
|
[legendTitle]="legendTitle"
|
|
[showXAxisLabel]="showXAxisLabel"
|
|
[showYAxisLabel]="showYAxisLabel"
|
|
[yAxisLabel]="chartYAxisLabel"
|
|
[animations]="barAnimations"
|
|
[barPadding]="barPadding"
|
|
[xAxisTickFormatting]="axisFormatX"
|
|
[yAxisTickFormatting]="axisFormatY">
|
|
<ng-template #tooltipTemplate let-model="model">
|
|
<small>{{'stats.fraction.tooltip.flag.minute' | translate}} {{model.series}}</small>
|
|
<div>{{model.name}} {{'stats.fraction.tooltip.flag.flag' | translate}}</div>
|
|
<div *ngIf="model.value === 0">{{'stats.fraction.tooltip.flag.lost' | translate}}</div>
|
|
<div *ngIf="model.value !== 0">{{'stats.fraction.tooltip.flag.safe' | translate}}</div>
|
|
</ng-template>
|
|
</ngx-charts-bar-vertical-stacked>
|
|
</div>
|
|
</div>
|