connect-admin/src/app/pages/stats/stats.component.html

556 lines
53 KiB
HTML

<div id="stats">
<div class="menubar ">
<div *ngIf="statisticsSum" class="page-title uk-article-title">
Statistics
<!--<small>[total number of projects is <span class="uk-text-bold">{{ statisticsSum.total_projects }}</span>]</small>-->
</div>
</div>
<div id="contentWrapper" class="content-wrapper">
<div>
<div class="contentPanel uk-margin-top">
<!-- <div *ngIf="errorMessage" class="uk-alert-danger uk-alert">{{ errorMessage }}</div>
<div *ngIf="loadingMessage" class="loading-big">
<div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">{{ loadingMessage }}</div>
<div class="whiteFilm"></div>
</div> -->
<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
<div class="uk-alert uk-alert-primary uk-margin-top-large">
<div>
<span class="uk-margin-small-right uk-icon uk-icon-justify" uk-icon="warning"></span>
<span>
Options for showing/hiding statistics from the community Monitor and Dashboard pages.<br>
Regardless of the administrator's choices, numbers equal to 0 will not appear in the community Monitor.<br>
Also, statistics of deactivated entities will not appear in either the community Monitor or Dashboard.
</span>
</div>
</div>
<div *ngIf="communityId">
<div class="users-list">
<div class="col-md-12">
<article class="uk-article ">
<div *ngIf="!statisticsSum || statisticsSum.total_projects==0" class="uk-alert uk-alert-info">
No statistics are available yet for {{ communityId.toUpperCase() }}
</div>
<div *ngIf="statisticsSum && statisticsSum.total_projects>0 && statisticsDisplay && chartsUrlMap"
class="uk-margin uk-margin-top">
<div>
<ul class="uk-tab uk-margin-top" data-uk-tab="{connect:'#tabs'}">
<li *ngFor="let entity of entitiesList"
(click)="onChangeEntity(entity)">
<a href="#">{{ entitiesMap.get(entity) }}</a>
</li>
</ul>
<ul id="tabs" class="uk-switcher" style="min-height:450px;">
<li *ngFor="let entity of entitiesList">
<div *ngIf="(displayedEntity == entity)">
<div class="uk-heading-divider">
<h3>{{ entitiesMap.get(entity) }} <small *ngIf="deactivatedEntity" class="uk-text-danger uk-text-small">(this entity has been deactivated)</small></h3>
<div uk-grid>
<div class="uk-width-1-3">
<div class="uk-flex uk-flex-middle uk-padding uk-padding-remove-top" uk-grid>
<div class="uk-card portal-card uk-text-right uk-padding-small uk-width-1-2">
<div
class="uk-text-large">{{statisticsSum[entity].total|number}}</div>
<div>Total
{{ entity == 'dataset' ? 'Research Data' : entitiesMap.get(entity) }}</div>
</div>
<div class="uk-width-expand">
<table class="uk-table uk-table-striped uk-width-expand@m uk-width-1-1@l">
<thead>
<tr>
<th>Show</th>
<th class="uk-text-center">#</th>
</tr>
</thead>
<tbody>
<tr>
<th>In Graph Analysis</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].numbers.map['total'].showInMonitor"
(change)="toggleShowInMonitor(entity,'numbers','total')"></mat-slide-toggle>
</th>
</tr>
<tr>
<th>In Overview</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].numbers.map['total'].showInDashboard"
(change)="toggleShowInDashboard(entity,'numbers','total')"></mat-slide-toggle>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="uk-width-1-3">
<div class="uk-flex uk-flex-middle uk-padding uk-padding-remove-top" uk-grid>
<div class="uk-card portal-card uk-text-right uk-padding-small uk-width-1-2">
<div
class="uk-text-large">{{statisticsSum[entity].projects|number}}</div>
<div>Projects</div>
</div>
<div class="uk-width-expand">
<table class="uk-table uk-table-striped uk-width-expand@m uk-width-1-1@l">
<thead>
<tr>
<th>Show</th>
<th class="uk-text-center">#</th>
</tr>
</thead>
<tbody>
<tr>
<th>In Graph Analysis</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].numbers.map['project'].showInMonitor"
(change)="toggleShowInMonitor(entity,'numbers','project')"></mat-slide-toggle>
</th>
</tr>
<tr>
<th>In Overview</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].numbers.map['project'].showInDashboard"
(change)="toggleShowInDashboard(entity,'numbers','project')"></mat-slide-toggle>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="uk-width-1-3">
<div class="uk-flex uk-flex-middle uk-padding uk-padding-remove-top" uk-grid>
<div class="uk-card portal-card uk-text-right uk-padding-small uk-width-1-2">
<div
class="uk-text-large">{{statisticsSum[entity].open_access|number}}</div>
<div>Open
{{ entity == 'dataset' ? 'Research Data' : entitiesMap.get(entity) }}</div>
</div>
<div class="uk-width-expand">
<table class="uk-table uk-table-striped uk-width-expand@m uk-width-1-1@l">
<thead>
<tr>
<th>Show</th>
<th class="uk-text-center">#</th>
</tr>
</thead>
<tbody>
<tr>
<th>In Graph Analysis</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].numbers.map['open'].showInMonitor"
(change)="toggleShowInMonitor(entity,'numbers','open')"></mat-slide-toggle>
</th>
</tr>
<tr>
<th>In Overview</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].numbers.map['open'].showInDashboard"
(change)="toggleShowInDashboard(entity,'numbers','open')"></mat-slide-toggle>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="uk-width-1-3">
<div class="uk-flex uk-flex-middle uk-padding uk-padding-remove-top" uk-grid>
<div class="uk-card portal-card uk-text-right uk-padding-small uk-width-1-2">
<div
class="uk-text-large">{{statisticsSum[entity].closed_access|number}}</div>
<div>Closed
{{ entity == 'dataset' ? 'Research Data' : entitiesMap.get(entity) }}</div>
</div>
<div class="uk-width-expand">
<table class="uk-table uk-table-striped uk-width-expand@m uk-width-1-1@l">
<thead>
<tr>
<th>Show</th>
<th class="uk-text-center">#</th>
</tr>
</thead>
<tbody>
<tr>
<th>In Graph Analysis</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].numbers.map['closed'].showInMonitor"
(change)="toggleShowInMonitor(entity,'numbers','closed')"></mat-slide-toggle>
</th>
</tr>
<tr>
<th>In Overview</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].numbers.map['closed'].showInDashboard"
(change)="toggleShowInDashboard(entity,'numbers','closed')"></mat-slide-toggle>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="uk-width-1-3">
<div class="uk-flex uk-flex-middle uk-padding uk-padding-remove-top" uk-grid>
<div class="uk-card portal-card uk-text-right uk-padding-small uk-width-1-2">
<div
class="uk-text-large">{{statisticsSum[entity].restricted|number}}</div>
<div>Restricted
{{ entity == 'dataset' ? 'Research Data' : entitiesMap.get(entity) }}</div>
</div>
<div class="uk-width-expand">
<table class="uk-table uk-table-striped uk-width-expand@m uk-width-1-1@l">
<thead>
<tr>
<th>Show</th>
<th class="uk-text-center">#</th>
</tr>
</thead>
<tbody>
<tr>
<th>In Graph Analysis</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].numbers.map['restricted'].showInMonitor"
(change)="toggleShowInMonitor(entity,'numbers','restricted')"></mat-slide-toggle>
</th>
</tr>
<tr>
<th>In Overview</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].numbers.map['restricted'].showInDashboard"
(change)="toggleShowInDashboard(entity,'numbers','restricted')"></mat-slide-toggle>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="uk-width-1-3">
<div class="uk-flex uk-flex-middle uk-padding uk-padding-remove-top" uk-grid>
<div class="uk-card portal-card uk-text-right uk-padding-small uk-width-1-2">
<div
class="uk-text-large">{{statisticsSum[entity].embargo|number}}</div>
<div>Embargo
{{ entity == 'dataset' ? 'Research Data' : entitiesMap.get(entity) }}</div>
</div>
<div class="uk-width-expand">
<table class="uk-table uk-table-striped uk-width-expand@m uk-width-1-1@l">
<thead>
<tr>
<th>Show</th>
<th class="uk-text-center">#</th>
</tr>
</thead>
<tbody>
<tr>
<th>In Graph Analysis</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].numbers.map['embargo'].showInMonitor"
(change)="toggleShowInMonitor(entity,'numbers','embargo')"></mat-slide-toggle>
</th>
</tr>
<tr>
<th>In Overview</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].numbers.map['embargo'].showInDashboard"
(change)="toggleShowInDashboard(entity,'numbers','embargo')"></mat-slide-toggle>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--<span>
<a (click)="toggleShowInMonitor(entity,'numbers','total')"
data-uk-tooltip
[title]="statisticsDisplay.entities[entity].numbers.map['total'].showInMonitor ? 'Hide in monitor' : 'Show in monitor'"
[ngStyle]="{'color': statisticsDisplay.entities[entity].numbers.map['total'].showInMonitor ? 'green' : 'red'}">
{{statisticsSum[entity].total | number}}
</a>
{{ entity == 'dataset' ? 'Datasets' : entitiesMap.get(entity) }}
from
<a (click)="toggleShowInMonitor(entity,'numbers','project')"
data-uk-tooltip
[title]="statisticsDisplay.entities[entity].numbers.map['project'].showInMonitor ? 'Hide in monitor' : 'Show in monitor'"
[ngStyle]="{'color': statisticsDisplay.entities[entity].numbers.map['project'].showInMonitor ? 'green' : 'red'}">
{{statisticsSum[entity].projects | number}}
</a>
project{{ statisticsSum[entity].projects == 1 ? '' : 's' }}.
</span><br>
<span>
<a (click)="toggleShowInMonitor(entity,'numbers','open')"
data-uk-tooltip
[title]="statisticsDisplay.entities[entity].numbers.map['open'].showInMonitor ? 'Hide in monitor' : 'Show in monitor'"
[ngStyle]="{'color': statisticsDisplay.entities[entity].numbers.map['open'].showInMonitor ? 'green' : 'red'}">
{{statisticsSum[entity].open_access | number}}
</a>
{{statisticsSum[entity].open_access == 1 ? 'is' : 'are'}} OA
</span>
<span>
,
<a (click)="toggleShowInMonitor(entity,'numbers','closed')"
data-uk-tooltip
[title]="statisticsDisplay.entities[entity].numbers.map['closed'].showInMonitor ? 'Hide in monitor' : 'Show in monitor'"
[ngStyle]="{'color': statisticsDisplay.entities[entity].numbers.map['closed'].showInMonitor ? 'green' : 'red'}">
{{statisticsSum[entity].closed_access | number}}
</a>
{{statisticsSum[entity].closed_access == 1 ? 'is' : 'are'}} closed
</span>
<span>
,
<a (click)="toggleShowInMonitor(entity,'numbers','restricted')"
data-uk-tooltip
[title]="statisticsDisplay.entities[entity].numbers.map['restricted'].showInMonitor ? 'Hide in monitor' : 'Show in monitor'"
[ngStyle]="{'color': statisticsDisplay.entities[entity].numbers.map['restricted'].showInMonitor ? 'green' : 'red'}">
{{statisticsSum[entity].restricted | number}}
</a>
{{statisticsSum[entity].restricted == 1 ? 'is' : 'are'}} restricted
</span>
<span>
and
<a (click)="toggleShowInMonitor(entity,'numbers','embargo')"
data-uk-tooltip
[title]="statisticsDisplay.entities[entity].numbers.map['embargo'].showInMonitor ? 'Hide in monitor' : 'Show in monitor'"
[ngStyle]="{'color': statisticsDisplay.entities[entity].numbers.map['embargo'].showInMonitor ? 'green' : 'red'}">
{{statisticsSum[entity].embargo | number}}
</a>
{{statisticsSum[entity].embargo == 1 ? 'is' : 'are'}} still in embargo.
</span>-->
</div>
</div>
<div *ngIf="statisticsSum[entity].total==0"
class="uk-alert uk-alert-info">
No {{ entitiesMap.get(entity) }} statistics available yet
</div>
<div *ngIf="statisticsSum[entity].total>0">
<div>
<div *ngIf="statisticsDisplay.entities[entity].charts.map['timeline'] &&
chartsUrlMap[entity + 'Timeline']"
class="uk-grid">
<div class="uk-width-expand@m uk-width-3-4@l">
<div class=" iframeContainer uk-height-large uk-margin-top">
<iframe [src]=chartsUrlMap[displayedTimeline] scrolling="no" class=""></iframe>
</div>
</div>
<div class="uk-margin-top">
<h6>Display options</h6>
<table class="uk-table uk-table-striped uk-width-expand@m uk-width-1-1@l">
<thead>
<tr>
<th>Show</th>
<th class="uk-text-center">#</th>
</tr>
</thead>
<tbody>
<tr>
<th>In Graph Analysis</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].charts.map['timeline'].showInMonitor"
(change)="toggleShowInMonitor(entity,'charts','timeline')"></mat-slide-toggle>
</th>
</tr>
<tr>
<th>In Overview</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].charts.map['timeline'].showInDashboard"
(change)="toggleShowInDashboard(entity,'charts','timeline')"></mat-slide-toggle>
</th>
</tr>
</tbody>
</table>
</div>
<!--<div style="margin-top:20px;">
<div style="margin-top:10px;">
<div class="uk-display-inline uk-vertical-align-middle"
style="min-width:50px; min-height:50px; border:2px solid #3e4e55; border-radius: 20px; margin-right: 10px;"
[ngStyle]="{'background-color': statisticsDisplay.entities[entity].charts.map['timeline'].showInMonitor ? 'lightgreen' : 'red'}">&nbsp;&nbsp;&nbsp;&nbsp;</div>
<a class="uk-label uk-label-arrow"
style="width:120px; text-align: center;"
(click)="toggleShowInMonitor(entity,'charts','timeline')">Show in Monitor</a>
</div>
<div style="margin-top:10px;">
<div class="uk-display-inline uk-vertical-align-middle"
style="min-width:50px; min-height:50px; border:2px solid #3e4e55; border-radius: 20px; margin-right: 10px;"
[ngStyle]="{'background-color': statisticsDisplay.entities[entity].charts.map['timeline'].showInDashboard ? 'lightgreen' : 'red'}">&nbsp;&nbsp;&nbsp;&nbsp;</div>
<a class="uk-label uk-label-arrow" style="width:120px; text-align: center;"
(click)="toggleShowInDashboard(entity,'charts','timeline')">Show in Dashboard</a>
</div>
</div>-->
</div>
<hr>
<div *ngIf="statisticsDisplay.entities[entity].charts.map['graph'] &&
chartsUrlMap[entity + 'Graph']"
class="uk-grid">
<div class="uk-width-expand@m uk-width-3-4@l">
<div class=" iframeContainer uk-height-large uk-margin-top">
<iframe [src]=chartsUrlMap[displayedGraph] scrolling="no" class=""></iframe>
</div>
</div>
<div class="uk-margin-top">
<h6>Display options</h6>
<table class="uk-table uk-table-striped uk-width-expand@m uk-width-1-1@l">
<thead>
<tr>
<th>Show</th>
<th class="uk-text-center">#</th>
</tr>
</thead>
<tbody>
<tr>
<th>In Graph Analysis</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].charts.map['graph'].showInMonitor"
(change)="toggleShowInMonitor(entity,'charts','graph')"></mat-slide-toggle>
</th>
</tr>
<tr>
<th>In Overview</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].charts.map['graph'].showInDashboard"
(change)="toggleShowInDashboard(entity,'charts','graph')"></mat-slide-toggle>
</th>
</tr>
</tbody>
</table>
</div>
</div>
<hr>
</div>
<div>
<h4 class="uk-text-uppercase uk-text-bold">{{ entitiesMap.get(entity) }} per project</h4>
</div>
<div class="uk-grid">
<div class="uk-width-3-4@l uk-width-1-1@m uk-first-column">
<ul class="uk-tab uk-margin-top" data-uk-tab="{connect: '#projectChartTabs'">
<li *ngIf="statisticsDisplay.entities[entity].charts.map['projectColumn'] && chartsUrlMap[entity + 'Projectcolumn']"
(click)="changeDisplayedProjectChart(entity + 'Projectcolumn')">
<a href="#">Columns</a>
</li>
<li *ngIf=" statisticsDisplay.entities[entity].charts.map['projectPie'] && chartsUrlMap[entity + 'Projectpie']"
(click)="changeDisplayedProjectChart(entity + 'Projectpie')">
<a href="#">Pie</a>
</li>
<li *ngIf=" statisticsDisplay.entities[entity].charts.map['projectTable'] && chartsUrlMap[entity + 'Projecttable']"
(click)="changeDisplayedProjectChart(entity + 'Projecttable')">
<a href="#">Table</a>
</li>
</ul>
<ul id="projectChartTabs" class="uk-switcher uk-margin">
<li>
<div *ngIf="displayedProjectChart == (entity + 'Projectcolumn')">
<div class=" iframeContainer uk-height-large uk-margin-top">
<iframe [src]=chartsUrlMap[displayedProjectChart] scrolling="no" class=""></iframe>
</div>
</div>
</li>
<li>
<div *ngIf="displayedProjectChart == (entity + 'Projectpie')">
<div class=" iframeContainer uk-height-large uk-margin-top">
<iframe [src]=chartsUrlMap[displayedProjectChart] scrolling="no" class=""></iframe>
</div>
</div>
</li>
<li>
<div *ngIf="displayedProjectChart == (entity + 'Projecttable')">
<div class=" iframeContainer uk-height-large uk-margin-top">
<iframe [src]=chartsUrlMap[displayedProjectChart] scrolling="no" class=""></iframe>
</div>
</div>
</li>
</ul>
</div>
<div class="uk-width-1-4@l uk-width-1-1@m uk-margin-top uk-first-column">
<h6>Display options</h6>
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Show</th>
<th>Column</th>
<th>Pie</th>
<th>Table</th>
<th>All</th>
</tr>
</thead>
<tbody>
<tr>
<th>In Graph Analysis</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].charts.map['projectColumn'].showInMonitor"
(change)="toggleShowInMonitor(entity,'charts','projectColumn')"></mat-slide-toggle>
</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].charts.map['projectPie'].showInMonitor"
(change)="toggleShowInMonitor(entity,'charts','projectPie')"></mat-slide-toggle>
</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].charts.map['projectTable'].showInMonitor"
(change)="toggleShowInMonitor(entity,'charts','projectTable')"></mat-slide-toggle>
</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="showAllInMonitor"
(change)="toggleShowAllInMonitor(entity)"></mat-slide-toggle>
</th>
</tr>
<tr>
<th>In Overview</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].charts.map['projectColumn'].showInDashboard"
(change)="toggleShowInDashboard(entity,'charts','projectColumn')"></mat-slide-toggle>
</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].charts.map['projectPie'].showInDashboard"
(change)="toggleShowInDashboard(entity,'charts','projectPie')"></mat-slide-toggle>
</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="statisticsDisplay.entities[entity].charts.map['projectTable'].showInDashboard"
(change)="toggleShowInDashboard(entity,'charts','projectTable')"></mat-slide-toggle>
</th>
<th class="uk-text-center">
<mat-slide-toggle [checked]="showAllInDashboard"
(change)="toggleShowAllInDashboard(entity)"></mat-slide-toggle>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
</div>