Revision 60004
Added by Konstantinos Triantafyllou over 3 years ago
| monitor.component.html | ||
|---|---|---|
| 76 | 76 |
</div> |
| 77 | 77 |
<div inner> |
| 78 | 78 |
<div [class.uk-padding]="!isSmallScreen" class="uk-padding-remove-vertical"> |
| 79 |
<div *ngIf="privateStakeholder"> |
|
| 80 |
<div class="uk-text-center uk-height-medium">
|
|
| 79 |
<div *ngIf="privateStakeholder" class="message">
|
|
| 80 |
<div class="uk-text-center"> |
|
| 81 | 81 |
<h3><i> |
| 82 | 82 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"> |
| 83 | 83 |
<path d="M0 0h24v24H0z" fill="none"/> |
| ... | ... | |
| 91 | 91 |
</div> |
| 92 | 92 |
</div> |
| 93 | 93 |
<div *ngIf="!privateStakeholder"> |
| 94 |
<div |
|
| 95 |
*ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || |
|
| 96 |
(activeSubCategory.charts.length == 1 && activeSubCategory.charts[0].indicators.length == 0))) |
|
| 94 |
<div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || |
|
| 95 |
(activeSubCategory.charts.length == 1 && countIndicatorsToShow(activeSubCategory.charts[0].indicators) == 0))) |
|
| 97 | 96 |
&& ((activeSubCategory && |
| 98 | 97 |
activeSubCategory.description && |
| 99 | 98 |
activeSubCategory.description.length > 0) || |
| 100 | 99 |
(activeCategory && activeCategory.description && activeCategory.description.length > 0) || |
| 101 | 100 |
(activeTopic && activeTopic.description && activeTopic.description.length > 0))" |
| 102 |
class="uk-text-center"> |
|
| 101 |
class="uk-text-center">
|
|
| 103 | 102 |
<div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left"> |
| 104 | 103 |
{{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
|
| 105 | 104 |
: (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description : |
| ... | ... | |
| 107 | 106 |
</div> |
| 108 | 107 |
|
| 109 | 108 |
</div> |
| 110 |
<div *ngIf="!loading && !privateStakeholder &&
|
|
| 109 |
<ng-template [ngIf]="!loading && !privateStakeholder &&
|
|
| 111 | 110 |
(!activeSubCategory || |
| 112 | 111 |
( |
| 113 |
(activeSubCategory.numbers.length == 0 || (activeSubCategory.numbers.length == 1 && activeSubCategory.numbers[0].indicators.length == 0))
|
|
| 112 |
(activeSubCategory.numbers.length == 0 || (activeSubCategory.numbers.length == 1 && countIndicatorsToShow(activeSubCategory.numbers[0].indicators) == 0))
|
|
| 114 | 113 |
&& |
| 115 |
(activeSubCategory.charts.length == 0 || (activeSubCategory.charts.length == 1 && activeSubCategory.charts[0].indicators.length == 0))
|
|
| 116 |
) || !activeTopic || !activeCategory || !activeSubCategory)"> |
|
| 117 |
<div class=" uk-text-center"> |
|
| 114 |
(activeSubCategory.charts.length == 0 || (activeSubCategory.charts.length == 1 && countIndicatorsToShow(activeSubCategory.charts[0].indicators) == 0))
|
|
| 115 |
) || !activeTopic || !activeCategory || !activeSubCategory)" [ngIfElse]="content">
|
|
| 116 |
<div class="message uk-text-center">
|
|
| 118 | 117 |
<h3> |
| 119 | 118 |
No indicators available yet. Stay tuned! |
| 120 | 119 |
</h3> |
| 121 | 120 |
</div> |
| 122 |
</div> |
|
| 123 |
<div *ngIf="activeSubCategory" class="uk-grid uk-grid-medium uk-margin-bottom uk-margin-top" |
|
| 124 |
uk-height-match="target: div.uk-card"> |
|
| 125 |
<ng-template ngFor [ngForOf]="activeSubCategory.numbers" let-number let-i="index"> |
|
| 126 |
<h4 *ngIf="countIndicatorsToShow(number.indicators)> 0 " class="uk-width-1-1">{{number.title}}</h4>
|
|
| 127 |
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> |
|
| 128 |
<div *ngIf="isPublicOrIsMember(indicator.visibility)" |
|
| 129 |
[class.uk-width-1-3@m]="indicator.width === 'small'" |
|
| 130 |
[class.uk-width-1-2@m]="indicator.width === 'medium'" |
|
| 131 |
[class.uk-width-1-1]="indicator.width === 'large'" class=" uk-margin-bottom"> |
|
| 132 |
<div class="uk-card uk-card-default" |
|
| 133 |
[class.uk-disabled]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()" |
|
| 134 |
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"> |
|
| 135 |
<div class="uk-card-body uk-text-center"> |
|
| 136 |
<div *ngIf="properties.environment == 'development'">Filtered: |
|
| 137 |
{{indicator.indicatorPaths[0].filtersApplied}}
|
|
| 138 |
out of |
|
| 139 |
{{countSelectedFilters()}}</div>
|
|
| 140 |
<div class="uk-text-bold ">{{indicator.name}}</div>
|
|
| 141 |
<h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-bold"> |
|
| 142 |
<span>{{numberResults.get(i + '-' + j) | number}}</span>
|
|
| 143 |
</h3> |
|
| 144 |
<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>
|
|
| 121 |
</ng-template> |
|
| 122 |
<ng-template #content> |
|
| 123 |
<div class="uk-grid uk-grid-small uk-margin-bottom uk-margin-top" |
|
| 124 |
uk-height-match="target: .uk-card"> |
|
| 125 |
<ng-template ngFor [ngForOf]="activeSubCategory.numbers" let-number let-i="index"> |
|
| 126 |
<h5 *ngIf="countIndicatorsToShow(number.indicators)> 0 " |
|
| 127 |
class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
|
|
| 128 |
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> |
|
| 129 |
<div *ngIf="isPublicOrIsMember(indicator.visibility)" |
|
| 130 |
[ngClass]="getNumberClassBySize(indicator.width)" class=" uk-margin-bottom"> |
|
| 131 |
<div class="uk-card uk-card-default" |
|
| 132 |
[class.uk-disabled]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()" |
|
| 133 |
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"> |
|
| 134 |
<div class="uk-card-body uk-text-center"> |
|
| 135 |
<div *ngIf="properties.environment == 'development'">Filtered: |
|
| 136 |
{{indicator.indicatorPaths[0].filtersApplied}}
|
|
| 137 |
out of |
|
| 138 |
{{countSelectedFilters()}}</div>
|
|
| 139 |
<div class="uk-text-bold ">{{indicator.name}}</div>
|
|
| 140 |
<h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-bold"> |
|
| 141 |
<span>{{numberResults.get(i + '-' + j) | number}}</span>
|
|
| 142 |
</h3> |
|
| 143 |
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
|
|
| 144 |
</div> |
|
| 145 | 145 |
</div> |
| 146 | 146 |
</div> |
| 147 |
</div>
|
|
| 147 |
</ng-template>
|
|
| 148 | 148 |
</ng-template> |
| 149 |
</ng-template> |
|
| 150 |
</div> |
|
| 151 |
<div *ngIf="activeSubCategory"> |
|
| 152 |
<div *ngFor="let chart of activeSubCategory.charts; let i = index;" |
|
| 153 |
class="uk-grid uk-grid-medium uk-margin-bottom uk-flex uk-flex-middle " |
|
| 154 |
uk-height-match="target: div > div > div > div > .chartTitle"> |
|
| 155 |
|
|
| 156 |
<h3 *ngIf="chart.title && chart.title.length > 0 && countIndicatorsToShow(chart.indicators) > 0 " |
|
| 157 |
class="uk-width-1-1 uk-margin-top">{{chart.title}}</h3>
|
|
| 158 |
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index"> |
|
| 159 |
<div |
|
| 160 |
*ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)" |
|
| 161 |
[class.uk-width-1-3@m]="indicator.width === 'small'" |
|
| 162 |
[class.uk-width-1-2@m]="indicator.width === 'medium'" |
|
| 163 |
[class.uk-width-1-1]="indicator.width === 'large'" class="uk-margin-bottom"> |
|
| 164 |
<div class="indicatorBox"> |
|
| 149 |
</div> |
|
| 150 |
<div> |
|
| 151 |
<div *ngFor="let chart of activeSubCategory.charts; let i = index;" |
|
| 152 |
class="uk-grid uk-grid-small uk-margin-bottom uk-flex uk-flex-middle " |
|
| 153 |
uk-height-match="target: .uk-card"> |
|
| 154 |
<h5 *ngIf="chart.title && chart.title.length > 0 && countIndicatorsToShow(chart.indicators) > 0 " |
|
| 155 |
class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
|
|
| 156 |
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index"> |
|
| 157 |
<div |
|
| 158 |
*ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)" |
|
| 159 |
[ngClass]="getChartClassBySize(indicator.width)" class="uk-margin-bottom"> |
|
| 165 | 160 |
<div class="uk-card uk-card-default" |
| 166 | 161 |
[class.uk-disabled]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()" |
| 167 |
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()" |
|
| 168 |
> |
|
| 162 |
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"> |
|
| 169 | 163 |
<div class="uk-card-body uk-text-center"> |
| 170 | 164 |
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom "> |
| 171 | 165 |
<div>{{indicator.name + " "}}</div>
|
| ... | ... | |
| 191 | 185 |
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl" |
| 192 | 186 |
[class]="' uk-width-1-1 uk-height-' + |
| 193 | 187 |
(indicator.height?indicator.height.toLowerCase():'medium')"> |
| 194 |
<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>
|
|
| 188 |
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
|
|
| 195 | 189 |
</div> |
| 196 | 190 |
</div> |
| 197 | 191 |
</div> |
| 198 |
</div>
|
|
| 199 |
</ng-template>
|
|
| 192 |
</ng-template>
|
|
| 193 |
</div>
|
|
| 200 | 194 |
</div> |
| 201 |
</div> |
|
| 202 |
<div *ngIf="!loading && !privateStakeholder && (activeSubCategory || (activeTopic && |
|
| 203 |
(activeTopic.categories == null || activeTopic.categories.length == 0)))" class="uk-margin-small-top uk-flex"> |
|
| 204 |
<!-- Last Stats Date--> |
|
| 205 |
<div class="uk-width-2-3@m uk-width-1-2"> |
|
| 206 |
<img src="assets/common-assets/graph.svg" style="opacity: 0.4"> |
|
| 207 |
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by <a href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a></span> |
|
| 208 |
<span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-muted"> |
|
| 195 |
<div class="uk-margin-medium-top uk-flex"> |
|
| 196 |
<!-- Last Stats Date--> |
|
| 197 |
<div class="uk-width-2-3@m uk-width-1-2"> |
|
| 198 |
<img src="assets/common-assets/graph.svg" style="opacity: 0.4"> |
|
| 199 |
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by <a |
|
| 200 |
href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a></span> |
|
| 201 |
<span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-muted"> |
|
| 209 | 202 |
. Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}}
|
| 210 | 203 |
</span> |
| 204 |
</div> |
|
| 205 |
<!--Feedback--> |
|
| 206 |
<div class="uk-width-expand uk-text-right"> |
|
| 207 |
<span class="uk-text-muted">Send us your <a [href]="mailText" target="_self" |
|
| 208 |
(click)="mailMe()">feedback</a>.</span> |
|
| 209 |
</div> |
|
| 211 | 210 |
</div> |
| 212 |
<!--Feedback--> |
|
| 213 |
<div class="uk-width-expand uk-text-right"> |
|
| 214 |
<span class="uk-text-muted">Send us your <a [href]="mailText" target="_self" (click)="mailMe()">feedback</a>.</span> |
|
| 215 |
</div> |
|
| 216 |
</div> |
|
| 211 |
</ng-template> |
|
| 217 | 212 |
</div> |
| 218 | 213 |
</div> |
| 219 | 214 |
</div> |
Also available in: Unified diff
[Monitor Dashboard | Trunk]: Some UI changes