Revision 57451
Added by Konstantinos Triantafyllou over 4 years ago
monitor.component.html | ||
---|---|---|
1 |
<schema2jsonld [URL]="properties.baseLink" |
|
2 |
[logoURL]="properties.baseLink+'/assets/common-assets/logo-small-monitor.png'" type="home" |
|
3 |
name="OpenAIRE Monitor"> |
|
4 |
</schema2jsonld> |
|
5 |
<div |
|
6 |
uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}" |
|
7 |
tm-header-transparent="light" tm-header-transparent-placeholder=""> |
|
8 |
<div *ngIf="status === errorCodes.LOADING" class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"> |
|
9 |
<span class="loading-gif uk-align-center"></span> |
|
10 |
</div> |
|
11 |
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" |
|
12 |
class="uk-background-primary uk-light uk-padding-small"> |
|
13 |
<div class="uk-flex uk-flex-middle topic-nav" uk-grid> |
|
14 |
<div class="uk-width-1-5@m uk-margin-left"> |
|
15 |
<span class="uk-text-bold uk-h4">{{stakeholder.index_name}}</span><br> |
|
16 |
<span class="uk-h5">Monitor Dashboard</span> |
|
1 |
<div class="disable_transitions sidebar_main_open sidebar_main_swipe"> |
|
2 |
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" id="header_main"> |
|
3 |
<nav class="uk-navbar"> |
|
4 |
<div class="uk-navbar-center"> |
|
5 |
<ul class="uk-navbar-nav"> |
|
6 |
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index"> |
|
7 |
<li *ngIf="topic.isPublic && topic.isActive" |
|
8 |
[ngClass]="(topic.alias === activeTopic.alias)?'uk-active':''"> |
|
9 |
<a (click)="navigateTo(stakeholder.alias, topic.alias)">{{topic.name}}</a> |
|
10 |
</li> |
|
11 |
</ng-template> |
|
12 |
</ul> |
|
17 | 13 |
</div> |
18 |
<nav class="uk-width-3-5@m uk-navbar" uk-navbar> |
|
19 |
<div class="uk-navbar-center"> |
|
20 |
<ul class="uk-navbar-nav"> |
|
21 |
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index"> |
|
22 |
<li *ngIf="topic.isPublic && topic.isActive" |
|
23 |
[ngClass]="(topic.alias === activeTopic.alias)?'uk-active':''"> |
|
24 |
<a (click)="navigateTo(stakeholder.alias, topic.alias)">{{topic.name}}</a> |
|
25 |
</li> |
|
26 |
</ng-template> |
|
27 |
</ul> |
|
28 |
</div> |
|
29 |
</nav> |
|
30 |
</div> |
|
14 |
</nav> |
|
31 | 15 |
</div> |
32 |
<div uk-grid> |
|
33 |
<sidebar [menuItems]="sideMenuItems" class="uk-width-1-5 sidebar"></sidebar> |
|
34 |
<div *ngIf="activeSubCategory" |
|
35 |
class="uk-width-expand uk-background-muted uk-padding uk-text-center@s uk-text-left@m"> |
|
36 |
<h5 class="uk-margin-bottom uk-text-bold">Indicators</h5> |
|
37 |
<div class="uk-grid-medium uk-margin-bottom" uk-grid uk-height-match="target: div > h6"> |
|
16 |
<dashboard-sidebar [items]="sideBar.items" [name]="stakeholder.index_name" |
|
17 |
class="uk-width-1-5"></dashboard-sidebar> |
|
18 |
<div *ngIf="activeSubCategory" |
|
19 |
id="page_content"> |
|
20 |
<div id="page_content_inner"> |
|
21 |
<h5 class="uk-margin uk-margin-top uk-text-bold">Indicators</h5> |
|
22 |
<div class="uk-grid uk-grid-medium uk-margin-bottom" uk-height-match="target: div > h6"> |
|
38 | 23 |
<ng-template ngFor [ngForOf]="activeSubCategory.numbers" let-number let-i="index"> |
39 | 24 |
<div *ngIf="number.isActive && number.isPublic" |
40 |
[class.uk-width-1-3@m]="number.width === 'small'" |
|
41 |
[class.uk-width-1-2@m]="number.width === 'medium'" |
|
42 |
[class.uk-width-1-1@m]="number.width === 'large'"> |
|
43 |
<div class="uk-card uk-card-default uk-box-shadow-large uk-padding-small" [attr.uk-tooltip]="number.description"> |
|
44 |
<h6>{{number.name}}</h6> |
|
45 |
<div class="uk-h2" *ngIf="numberResults.get(i)"> |
|
46 |
{{numberResults.get(i)|number}} |
|
25 |
[class.uk-width-medium-1-3]="number.width === 'small'" |
|
26 |
[class.uk-width-medium-1-2]="number.width === 'medium'" |
|
27 |
[class.uk-width-medium-1-1]="number.width === 'large'"> |
|
28 |
<div class="md-card" |
|
29 |
[attr.uk-tooltip]="number.description"> |
|
30 |
<div class="md-card-content"> |
|
31 |
<span class="uk-text-muted uk-text-small uk-margin-bottom">{{number.name}}</span> |
|
32 |
<h2 *ngIf="numberResults.get(i)" class="uk-margin-remove"> |
|
33 |
<span class="countUpMe">{{numberResults.get(i) | number}}</span> |
|
34 |
</h2> |
|
47 | 35 |
</div> |
48 |
<div *ngIf="!numberResults.get(i)" class="uk-animation-fade uk-width-1-1" role="alert"> |
|
49 |
<span class="loading-gif uk-align-center"></span> |
|
50 |
</div> |
|
51 | 36 |
</div> |
52 | 37 |
</div> |
53 | 38 |
</ng-template> |
54 | 39 |
</div> |
55 |
<div class="uk-grid-medium uk-margin-bottom" uk-grid uk-height-match="target: div > h5">
|
|
40 |
<div class="uk-grid uk-grid-medium uk-margin-bottom" uk-height-match="target: div > div > h5">
|
|
56 | 41 |
<ng-template ngFor [ngForOf]="activeSubCategory.charts" let-chart let-i="index"> |
57 | 42 |
<div *ngIf="chart.isActive && chart.isPublic" |
58 |
[class.uk-width-1-3@m]="chart.width === 'small'" |
|
59 |
[class.uk-width-1-2@m]="chart.width === 'medium'" |
|
60 |
[class.uk-width-1-1@m]="chart.width === 'large'"> |
|
61 |
<div> |
|
62 |
<h5 class="uk-margin-bottom uk-margin-top">{{chart.name}}</h5> |
|
63 |
<div class="uk-card uk-card-default uk-box-shadow-large uk-padding-small" [attr.uk-tooltip]="chart.description"> |
|
64 |
<div *ngIf="chart.indicatorPaths.length > 1" class="uk-button-group"> |
|
65 |
<button *ngFor="let indicatorPath of chart.indicatorPaths;" |
|
66 |
class="uk-button" |
|
67 |
(click)="setActiveChart(i, indicatorPath.type)" |
|
68 |
[class.uk-button-secondary]="chartsActiveType.get(i).url === indicatorPath.url"> |
|
69 |
{{indicatorPath.type}} |
|
70 |
</button> |
|
43 |
[class.uk-width-medium-1-3]="chart.width === 'small'" |
|
44 |
[class.uk-width-medium-1-2]="chart.width === 'medium'" |
|
45 |
[class.uk-width-medium-1-1]="chart.width === 'large'"> |
|
46 |
<div> |
|
47 |
<h5 class="uk-margin-bottom uk-margin-top">{{chart.name}}</h5> |
|
48 |
<div class="md-card" |
|
49 |
[attr.uk-tooltip]="chart.description"> |
|
50 |
<div class="md-card-content uk-text-center"> |
|
51 |
<div *ngIf="chart.indicatorPaths.length > 1" class="uk-button-group"> |
|
52 |
<button *ngFor="let indicatorPath of chart.indicatorPaths;" |
|
53 |
class="uk-button" |
|
54 |
(click)="setActiveChart(i, indicatorPath.type)" |
|
55 |
[class.uk-button-secondary]="chartsActiveType.get(i).url === indicatorPath.url"> |
|
56 |
{{indicatorPath.type}} |
|
57 |
</button> |
|
58 |
</div> |
|
59 |
<iframe *ngIf="chartsActiveType.get(i).source !== 'fake'" |
|
60 |
[src]="getUrlByStakeHolder(chartsActiveType.get(i))" |
|
61 |
class="uk-width-1-1" height="300"></iframe> |
|
62 |
<img *ngIf="chartsActiveType.get(i).source === 'fake'" |
|
63 |
[src]="getUrlByStakeHolder(chartsActiveType.get(i))" |
|
64 |
class="uk-width-1-1"> |
|
65 |
</div> |
|
71 | 66 |
</div> |
72 |
<iframe *ngIf="chartsActiveType.get(i).source !== 'fake'" |
|
73 |
[src]="getUrlByStakeHolder(chartsActiveType.get(i))" |
|
74 |
class="uk-width-1-1 uk-height-medium"></iframe> |
|
75 |
<img *ngIf="chartsActiveType.get(i).source === 'fake'" |
|
76 |
[src]="getUrlByStakeHolder(chartsActiveType.get(i))" |
|
77 |
class="uk-width-1-1 uk-height-medium"> |
|
78 | 67 |
</div> |
79 | 68 |
</div> |
80 |
</div> |
|
81 | 69 |
</ng-template> |
82 | 70 |
</div> |
83 | 71 |
</div> |
Also available in: Unified diff
[Monitor-Dashboard]: Add new dashboard theme and make monitor page base on it.