|
2 | 2 | <div class="aggregation-chart"> |
3 | 3 | <osm-spinner [spinnerId]="'aggregation-chart-spinner'"></osm-spinner> |
4 | 4 | <div class="filter-dropdown-group"> |
5 | | - <div class="btn-group pull-left perc-element" data-toggle="buttons" id="stack-bars-switch" *ngIf="!isHidden"> |
6 | | - <label class="btn btn-sm btn-default" id="switch-beside-button" |
7 | | - [class.active]="!aggregationChartDataService.stackBars" (click)="changeStackBars(beside.value); redraw()"> |
8 | | - <input #beside type="radio" name="stackBars" [value]="false"> |
9 | | - Beside |
10 | | - </label> |
11 | | - <label class="btn btn-sm btn-default" id="switch-infront-button" |
12 | | - [class.active]="aggregationChartDataService.stackBars" (click)="changeStackBars(inFront.value); redraw()"> |
13 | | - <input #inFront type="radio" name="stackBars" [value]="true"> |
14 | | - In Front |
15 | | - </label> |
| 5 | + <div *ngIf="showDiagramTypeSwitch" class="btn-group pull-left perc-element" data-toggle="buttons" |
| 6 | + id="stack-bars-switch"> |
| 7 | + <button (click)="selectDiagramType('grouped')" [class.active]="!aggregationChartDataService.stackBars" |
| 8 | + class="btn btn-sm btn-default" |
| 9 | + id="switch-beside-button"> |
| 10 | + {{'frontend.de.iteratec.osm.barchart.settings.beside' | translate }} |
| 11 | + </button> |
| 12 | + <button (click)="selectDiagramType('stacked')" [class.active]="aggregationChartDataService.stackBars" |
| 13 | + class="btn btn-sm btn-default" |
| 14 | + id="switch-infront-button"> |
| 15 | + {{'frontend.de.iteratec.osm.barchart.settings.inFront' | translate }} |
| 16 | + </button> |
16 | 17 | </div> |
17 | | - <div class="btn-group pull-left perc-element" data-toggle="buttons" id="aggregation-value-switch"> |
18 | | - <label class="btn btn-sm btn-default" id="aggregation-average-button" |
19 | | - [class.active]="aggregationChartDataService.aggregationType === 'avg'" |
20 | | - (click)="aggregationChartDataService.aggregationType = average.value; redraw()"> |
21 | | - <input #average type="radio" name="aggregationValue" value="avg" checked> |
22 | | - Average |
23 | | - </label> |
24 | | - <label class="btn btn-sm btn-default" id="aggregation-percentile-button" |
25 | | - [class.active]="aggregationChartDataService.aggregationType === 'percentile'" |
26 | | - (click)="aggregationChartDataService.aggregationType = percentile.value; redraw()"> |
27 | | - <input #percentile type="radio" name="aggregationValue" value="percentile"> |
28 | | - Percentile |
29 | | - </label> |
| 18 | + <div class="btn-group pull-left perc-element" data-toggle="buttons" id="aggregation-type-switch"> |
| 19 | + <button (click)="selectAggregationType('avg')" |
| 20 | + [class.active]="aggregationChartDataService.aggregationType === 'avg'" |
| 21 | + class="btn btn-sm btn-default" id="aggregation-average-button"> |
| 22 | + {{'frontend.de.iteratec.osm.barchart.settings.average' | translate }} |
| 23 | + </button> |
| 24 | + <button (click)="selectAggregationType('percentile')" |
| 25 | + [class.active]="aggregationChartDataService.aggregationType === 'percentile'" |
| 26 | + [disabled]="!enoughPercentileValues()" |
| 27 | + class="btn btn-sm btn-default" id="aggregation-percentile-button" |
| 28 | + title="{{!enoughPercentileValues() ? ('frontend.de.iteratec.osm.barchart.settings.notEnoughData' | translate) : ''}}"> |
| 29 | + {{'frontend.de.iteratec.osm.barchart.settings.percentile' | translate }} |
| 30 | + </button> |
| 31 | + |
30 | 32 | </div> |
31 | 33 |
|
32 | | - <input class="btn btn-sm btn-default perc-element" id="percentage-field" type="number" placeholder="%" |
33 | | - [(ngModel)]="percentileValue" (ngModelChange)="reloadPercentile()" min="1" max="100" style="max-width: 5em;" [disabled]="aggregationChartDataService.aggregationType === 'avg'"/> |
34 | | - <input class="form-control perc-element perc-slider" id="percentage-slider" type="range" |
35 | | - [(ngModel)]="percentileValue" (mouseup)="reloadPercentile()" min="5" max="100" step="5" [disabled]="aggregationChartDataService.aggregationType === 'avg'"/> |
| 34 | + <input (ngModelChange)="reloadPercentile()" *ngIf="enoughPercentileValues()" |
| 35 | + [(ngModel)]="aggregationChartDataService.percentileValue" |
| 36 | + [disabled]="aggregationChartDataService.aggregationType === 'avg'" |
| 37 | + class="btn btn-sm btn-default perc-element" id="percentage-field" max="100" min="1" |
| 38 | + placeholder="%" style="max-width: 5em;" |
| 39 | + type="number"/> |
| 40 | + <input (mouseup)="reloadPercentile()" *ngIf="enoughPercentileValues()" |
| 41 | + [(ngModel)]="aggregationChartDataService.percentileValue" |
| 42 | + [disabled]="aggregationChartDataService.aggregationType === 'avg'" |
| 43 | + class="form-control perc-element perc-slider" id="percentage-slider" max="100" min="5" |
| 44 | + step="5" |
| 45 | + type="range"/> |
36 | 46 |
|
37 | | - <button id="filter-dropdown" type="button" class="btn btn-default btn-sm dropdown-toggle perc-element" |
| 47 | + <button aria-expanded="false" aria-haspopup="true" class="btn btn-default btn-sm dropdown-toggle perc-element" |
38 | 48 | data-toggle="dropdown" |
39 | | - aria-haspopup="true" aria-expanded="false">Filter <span class="caret"></span> |
| 49 | + id="filter-dropdown" type="button">{{'frontend.de.iteratec.osm.barchart.filter' | translate }} <span |
| 50 | + class="caret"></span> |
40 | 51 | </button> |
41 | 52 | <ul class="dropdown-menu pull-right"> |
42 | | - <li id="all-bars-header" class="dropdown-header"> |
| 53 | + <li class="dropdown-header" id="all-bars-header"> |
43 | 54 | {{'frontend.de.iteratec.osm.barchart.filter.noFilterHeader' | translate }} |
44 | 55 | </li> |
45 | 56 | <li> |
46 | | - <a class="chart-filter" (click)="selectFilter('desc')"><i [ngClass]="aggregationChartDataService.descSelected ? 'fas fa-check' : 'fas fa-check filter-inactive'"></i> |
| 57 | + <a (click)="selectFilter('desc')" class="chart-filter"><i |
| 58 | + [ngClass]="aggregationChartDataService.descSelected ? 'fas fa-check' : 'fas fa-check filter-inactive'"></i> |
47 | 59 | {{'frontend.de.iteratec.osm.barchart.filter.noFilterDesc' | translate }} |
48 | 60 | </a> |
49 | 61 | </li> |
50 | 62 | <li> |
51 | | - <a class="chart-filter" (click)="selectFilter('asc')"><i [ngClass]="aggregationChartDataService.ascSelected ? 'fas fa-check' : 'fas fa-check filter-inactive'"></i> |
| 63 | + <a (click)="selectFilter('asc')" class="chart-filter"><i |
| 64 | + [ngClass]="aggregationChartDataService.ascSelected ? 'fas fa-check' : 'fas fa-check filter-inactive'"></i> |
52 | 65 | {{'frontend.de.iteratec.osm.barchart.filter.noFilterAsc' | translate }} |
53 | 66 | </a> |
54 | 67 | </li> |
55 | 68 | <ng-container *ngIf="hasFilterRules"> |
56 | | - <li id="customer-journey-header" class="dropdown-header"> |
| 69 | + <li class="dropdown-header" id="customer-journey-header"> |
57 | 70 | {{'frontend.de.iteratec.osm.barchart.filter.customerJourneyHeader' | translate}} |
58 | 71 | </li> |
59 | 72 | <li *ngFor="let filterRule of filterRules | keyvalue"> |
60 | | - <a class="chart-filter" (click)="selectFilter(filterRule.key)"> |
61 | | - <i [ngClass]="filterRule.value.selected ? 'fas fa-check' : 'fas fa-check filter-inactive'" ></i> |
| 73 | + <a (click)="selectFilter(filterRule.key)" class="chart-filter"> |
| 74 | + <i [ngClass]="filterRule.value.selected ? 'fas fa-check' : 'fas fa-check filter-inactive'"></i> |
62 | 75 | {{filterRule.key}} |
63 | 76 | </a> |
64 | 77 | </li> |
65 | 78 | </ng-container> |
66 | 79 | </ul> |
67 | 80 |
|
68 | 81 | <div class="in-chart-buttons"> |
69 | | - <a data-toggle="modal" role="button" title="Download as PNG"> |
| 82 | + <a data-toggle="modal" role="button" title="{{'frontend.de.iteratec.osm.barchart.download.png' | translate}}"> |
70 | 83 | <i class="fas fa-download"></i> |
71 | 84 | </a> |
72 | 85 | </div> |
73 | 86 |
|
74 | 87 | </div> |
75 | 88 |
|
76 | 89 | <div class="svg-container"> |
77 | | - <svg #svg id="aggregation-chart-svg" class="aggregation-chart-svg" xmlns="http://www.w3.org/1999/html" (window:resize)="redraw()"></svg> |
| 90 | + <svg #svg (window:resize)="redraw()" class="aggregation-chart-svg" id="aggregation-chart-svg" |
| 91 | + xmlns="http://www.w3.org/1999/html"></svg> |
78 | 92 | </div> |
79 | 93 | </div> |
80 | 94 | </div> |
0 commit comments