Metrics: add short version option
Dataprovider Landing: change tabs to accordion, changes dataProviderInfo and tabs info to work better with accordion view git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@52373 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki
parent
2bca86e5eb
commit
51ec98b9c7
|
|
@ -69,7 +69,8 @@
|
|||
[_dataproviderService]="_dataproviderService">
|
||||
</tabs-->
|
||||
<div *ngIf="showTabs">
|
||||
<ul *ngIf="dataProviderInfo.tabs != undefined" class="uk-tab uk-visible@xl" uk-tab="connect: #tab-content">
|
||||
|
||||
<!--ul *ngIf="dataProviderInfo.tabs != undefined" class="uk-tab uk-visible@xl" uk-tab="connect: #tab-content">
|
||||
<li *ngFor="let tab of dataProviderInfo.tabs; let i=index" id="{{dataProviderInfo.tabs[i].content}}"
|
||||
[class]="activeTab==tab.name?'uk-active':''">
|
||||
<a
|
||||
|
|
@ -129,64 +130,85 @@
|
|||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ul-->
|
||||
<ul class="custom-accordion" uk-accordion *ngIf="dataProviderInfo.tabs2 != undefined">
|
||||
|
||||
<!--ul *ngIf="dataProviderInfo.tabs != undefined" id="tab-content" class="uk-switcher uk-margin custom-tab-content"-->
|
||||
<div *ngIf="dataProviderInfo.tabs != undefined" class="uk-margin custom-tab-content">
|
||||
|
||||
<!--div class="uk-animation-fade" *ngFor="let tab of dataProviderInfo.tabs; let i=index"-->
|
||||
<div class="uk-animation-fade">
|
||||
<!--*ngIf="tab.content=='publicationsTab'"-->
|
||||
<li *ngIf="dataProviderInfo.tabs2.indexOf('Publications') != -1" (click)="search('publicationsTab', 1, 10); activeTab='Publications'">
|
||||
<a class="uk-accordion-title" href="#">Publications
|
||||
<span class="uk-badge uk-badge-notification">
|
||||
{{fetchPublications.searchUtils.totalResults | number}}
|
||||
</span>
|
||||
</a>
|
||||
<div class="uk-accordion-content">
|
||||
<publicationsTab *ngIf="activeTab=='Publications'"
|
||||
[paramsForSearchLink]="paramsForSearchLink"
|
||||
[fetchPublications] = "fetchPublications" [(properties)]=properties>
|
||||
</publicationsTab>
|
||||
<!--*ngIf="tab.content=='datasetsTab'"-->
|
||||
</div>
|
||||
</li>
|
||||
<li *ngIf="dataProviderInfo.tabs2.indexOf('Research Data') != -1" (click)="search('datasetsTab', 1, 10); activeTab='Research Data'">
|
||||
<a class="uk-accordion-title" href="#">Research Data</a>
|
||||
<div class="uk-accordion-content">
|
||||
<p>
|
||||
<datasetsTab *ngIf="activeTab=='Research Data'"
|
||||
[paramsForSearchLink]="paramsForSearchLink"
|
||||
[fetchDatasets]="fetchDatasets" [(properties)]=properties>
|
||||
</datasetsTab>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li *ngIf="dataProviderInfo.tabs2.indexOf('Software') != -1" (click)="search('softwareTab', 1, 10); activeTab='Software'">
|
||||
<a class="uk-accordion-title" href="#">Software</a>
|
||||
<div class="uk-accordion-content">
|
||||
<softwareTab *ngIf="activeTab=='Software'"
|
||||
[paramsForSearchLink]="paramsForSearchLink"
|
||||
[fetchSoftware]="fetchSoftware" [(properties)]=properties>
|
||||
</softwareTab>
|
||||
<!--*ngIf=" tab.content=='projectsTab'"-->
|
||||
</div>
|
||||
</li>
|
||||
<li *ngIf="dataProviderInfo.tabs2.indexOf('Projects') != -1" (click)="search('projectsTab', 1, 10); activeTab='Projects'">
|
||||
<a class="uk-accordion-title" href="#">Projects</a>
|
||||
<div class="uk-accordion-content">
|
||||
<projectsTab *ngIf="activeTab=='Projects'"
|
||||
[paramsForSearchLink]="paramsForSearchLink"
|
||||
[fetchProjects]="fetchProjects" [(properties)]=properties>
|
||||
</projectsTab>
|
||||
<!--*ngIf=" tab.content=='datasourcesTab'"-->
|
||||
</div>
|
||||
</li>
|
||||
<li *ngIf="dataProviderInfo.tabs2.indexOf('Content Providers') != -1" (click)="search('datasourcesTab', 1, 10); activeTab='Content Providers'">
|
||||
<a class="uk-accordion-title" href="#">Content Providers</a>
|
||||
<div class="uk-accordion-content">
|
||||
<datasourcesTab *ngIf="activeTab=='Content Providers'"
|
||||
[paramsForSearchLink]="paramsForSearchLink"
|
||||
[fetchDataproviders]="fetchDataproviders" [(properties)]=properties>
|
||||
</datasourcesTab>
|
||||
<!--*ngIf=" tab.content=='organizationsTab'"-->
|
||||
</div>
|
||||
</li>
|
||||
<li *ngIf="dataProviderInfo.tabs2.indexOf('Organizations') != -1" (click)="search('organizationsTab', 1, 10); activeTab='Organizations'">
|
||||
<a class="uk-accordion-title" href="#">Organizations</a>
|
||||
<div class="uk-accordion-content">
|
||||
<organizationsTab *ngIf="activeTab=='Organizations'"
|
||||
[organizations]="dataProviderInfo.organizations">
|
||||
</organizationsTab>
|
||||
<!--*ngIf=" tab.content=='relatedDatasourcesTab'"-->
|
||||
</div>
|
||||
</li>
|
||||
<li *ngIf="dataProviderInfo.tabs2.indexOf('Related Content Providers') != -1" (click)="search('relatedDatasourcesTab', 1, 10); activeTab='Related Content Providers'">
|
||||
<a class="uk-accordion-title" href="#">Related Content Providers</a>
|
||||
<div class="uk-accordion-content">
|
||||
<relatedDatasourcesTab *ngIf="activeTab=='Related Content Providers'"
|
||||
[dataproviderId]="datasourceId"
|
||||
[results]="dataProviderInfo.relatedDatasources"
|
||||
[loading]="loadingRelatedDatasources"
|
||||
[fetchPublications]="fetchAggregatorsPublications"
|
||||
[fetchDatasets]="fetchAggregatorsDatasets" [(properties)]=properties>
|
||||
<!--[type]="relatedDataprovidersResultsType"-->
|
||||
</relatedDatasourcesTab>
|
||||
|
||||
<!-- *ngIf=" tab.content=='statisticsTab' && statsClicked"-->
|
||||
</div>
|
||||
</li>
|
||||
<li *ngIf="dataProviderInfo.tabs2.indexOf('Statistics') != -1" (click)="search('statisticsTab', 1, 10); activeTab='Statistics'">
|
||||
<a class="uk-accordion-title" href="#">Statistics</a>
|
||||
<div class="uk-accordion-content">
|
||||
<div *ngIf="activeTab=='Statistics' && statsClicked">
|
||||
<!--div *ngIf="fetchPublications.searchUtils.totalResults == 0 && fetchDatasets.searchUtils.totalResults == 0" class = "uk-alert uk-alert-primary">
|
||||
No statistics available
|
||||
</div-->
|
||||
<!--div *ngIf="fetchPublications.searchUtils.status == errorCodes.NONE && fetchDatasets.searchUtils.status == errorCodes.NONE"
|
||||
class="uk-alert uk-alert-primary uk-animation-fade" role="alert">No statistics available</div>
|
||||
<div *ngIf="fetchPublications.searchUtils.status == errorCodes.ERROR || fetchDatasets.searchUtils.status == errorCodes.ERROR"
|
||||
class="uk-alert uk-alert-warning uk-animation-fade" role="alert">An Error Occured</div>
|
||||
<div *ngIf="fetchPublications.searchUtils.status == errorCodes.NOT_AVAILABLE || fetchDatasets.searchUtils.status == errorCodes.NOT_AVAILABLE"
|
||||
class="uk-alert uk-alert-danger uk-animation-fade" role="alert">Service not available</div>
|
||||
<div *ngIf="fetchPublications.searchUtils.status == errorCodes.LOADING || fetchDatasets.searchUtils.status == errorCodes.LOADING"
|
||||
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img class="loading-gif uk-align-center" ></div-->
|
||||
|
||||
<errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status]" [type]="'statistics'"></errorMessages>
|
||||
|
||||
|
|
@ -216,9 +238,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!--*ngIf=" tab.content=='metricsTab'"-->
|
||||
<!--[name]="dataProviderInfo.title['name']"-->
|
||||
|
||||
|
||||
<li *ngIf="dataProviderInfo.tabs2.indexOf('Metrics') != -1" (click)="search('metricsTab', 1, 10); activeTab='Metrics'">
|
||||
<a class="uk-accordion-title" href="#">Metrics</a>
|
||||
<div class="uk-accordion-content">
|
||||
<metrics *ngIf="activeTab=='Metrics'" [pageViews]="pageViews"
|
||||
[id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"
|
||||
(metricsResults)="metricsResults($event)" [(properties)] = properties>
|
||||
|
|
@ -230,7 +256,87 @@
|
|||
[url]=downloadsFrameUrl width="100%" height="250">
|
||||
</i-frame>
|
||||
</div>
|
||||
<!--/ul-->
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!--div *ngIf="dataProviderInfo.tabs != undefined" class="uk-margin custom-tab-content">
|
||||
|
||||
<div class="uk-animation-fade">
|
||||
<publicationsTab *ngIf="activeTab=='Publications'"
|
||||
[paramsForSearchLink]="paramsForSearchLink"
|
||||
[fetchPublications] = "fetchPublications" [(properties)]=properties>
|
||||
</publicationsTab>
|
||||
<datasetsTab *ngIf="activeTab=='Research Data'"
|
||||
[paramsForSearchLink]="paramsForSearchLink"
|
||||
[fetchDatasets]="fetchDatasets" [(properties)]=properties>
|
||||
</datasetsTab>
|
||||
<softwareTab *ngIf="activeTab=='Software'"
|
||||
[paramsForSearchLink]="paramsForSearchLink"
|
||||
[fetchSoftware]="fetchSoftware" [(properties)]=properties>
|
||||
</softwareTab>
|
||||
<projectsTab *ngIf="activeTab=='Projects'"
|
||||
[paramsForSearchLink]="paramsForSearchLink"
|
||||
[fetchProjects]="fetchProjects" [(properties)]=properties>
|
||||
</projectsTab>
|
||||
<datasourcesTab *ngIf="activeTab=='Content Providers'"
|
||||
[paramsForSearchLink]="paramsForSearchLink"
|
||||
[fetchDataproviders]="fetchDataproviders" [(properties)]=properties>
|
||||
</datasourcesTab>
|
||||
<organizationsTab *ngIf="activeTab=='Organizations'"
|
||||
[organizations]="dataProviderInfo.organizations">
|
||||
</organizationsTab>
|
||||
<relatedDatasourcesTab *ngIf="activeTab=='Related Content Providers'"
|
||||
[dataproviderId]="datasourceId"
|
||||
[results]="dataProviderInfo.relatedDatasources"
|
||||
[loading]="loadingRelatedDatasources"
|
||||
[fetchPublications]="fetchAggregatorsPublications"
|
||||
[fetchDatasets]="fetchAggregatorsDatasets" [(properties)]=properties>
|
||||
</relatedDatasourcesTab>
|
||||
|
||||
<div *ngIf="activeTab=='Statistics' && statsClicked">
|
||||
|
||||
<errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status]" [type]="'statistics'"></errorMessages>
|
||||
|
||||
<div *ngIf="(fetchPublications.searchUtils.totalResults != 0 || fetchDatasets.searchUtils.totalResults != 0)">
|
||||
<p class="uk-text-bold">Latest Research Result Timeline</p>
|
||||
<i-frame [url]=docsTimelineUrl width="800" height="350"></i-frame>
|
||||
<p class="uk-text-bold">Research Result Types</p>
|
||||
<i-frame [url]=docsTypesUrl width="800" height="350"></i-frame>
|
||||
</div>
|
||||
|
||||
|
||||
<div *ngIf="fetchPublications.searchUtils.totalResults > 0 || (fetchDatasets.searchUtils.totalResults > 0)">
|
||||
|
||||
<p class="uk-text-bold">Funders in Research Results of content provider</p>
|
||||
<i-frame [url]=docsFunderUrl width="800" height="350"></i-frame>
|
||||
|
||||
</div>
|
||||
<div *ngIf="fetchPublications.searchUtils.totalResults > 0 ">
|
||||
<p class="uk-text-bold">Projects with most Publications</p>
|
||||
<i-frame [url]=pubsProjectsUrl width="800" height="350"></i-frame>
|
||||
</div>
|
||||
<div *ngIf="(fetchDatasets.searchUtils.totalResults > 0)">
|
||||
<div>
|
||||
<p class="uk-text-bold">Projects with most Research Data</p>
|
||||
<i-frame [url]=dataProjectsUrl width="800" height="350"></i-frame>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<metrics *ngIf="activeTab=='Metrics'" [pageViews]="pageViews"
|
||||
[id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"
|
||||
(metricsResults)="metricsResults($event)" [(properties)] = properties>
|
||||
</metrics>
|
||||
<i-frame *ngIf="activeTab=='Metrics' && metricsClicked && totalViews > 0"
|
||||
[url]=viewsFrameUrl width="100%" height="250">
|
||||
</i-frame>
|
||||
<i-frame *ngIf="activeTab=='Metrics' && metricsClicked && totalDownloads > 0"
|
||||
[url]=downloadsFrameUrl width="100%" height="250">
|
||||
</i-frame>
|
||||
</div>
|
||||
|
||||
</div-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -239,10 +345,15 @@
|
|||
<div>
|
||||
Share - Bookmark<addThis ></addThis>
|
||||
</div>
|
||||
<metrics [pageViews]="pageViews" shortView=true
|
||||
[id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"
|
||||
(metricsResults)="metricsResults($event)" [(properties)] = properties>
|
||||
</metrics>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -93,32 +93,40 @@ export class DataProviderService {
|
|||
if(this.dataProviderInfo.tabs == undefined) {
|
||||
this.dataProviderInfo.tabs = new Array<{"name": string, "content": string}>();
|
||||
}
|
||||
|
||||
this.dataProviderInfo.tabs = [];
|
||||
if(this.dataProviderInfo.tabsInTypes.publicationsTab.has(data[1].classid)) {
|
||||
this.dataProviderInfo.tabs.push({"name": "Publications", "content": "publicationsTab"});
|
||||
this.dataProviderInfo.tabs2.push("Publications");
|
||||
}
|
||||
if(this.dataProviderInfo.tabsInTypes.datasetsTab.has(data[1].classid)) {
|
||||
this.dataProviderInfo.tabs.push({"name": "Research Data", "content": "datasetsTab"});
|
||||
this.dataProviderInfo.tabs2.push("Research Data");
|
||||
}
|
||||
|
||||
if(this.dataProviderInfo.tabsInTypes.projectsTab.has(data[1].classid)) {
|
||||
this.dataProviderInfo.tabs.push({"name": "Projects", "content": "projectsTab"});
|
||||
this.dataProviderInfo.tabs2.push("Projects");
|
||||
}
|
||||
if(this.dataProviderInfo.tabsInTypes.datasourcesTab.has(data[1].classid)) {
|
||||
this.dataProviderInfo.tabs.push({"name": "Content Providers", "content": "datasourcesTab"});
|
||||
this.dataProviderInfo.tabs2.push("Content Providers");
|
||||
}
|
||||
this.dataProviderInfo.tabs.push({"name": "Organizations", "content": "organizationsTab"});
|
||||
this.dataProviderInfo.tabs2.push("Organizations");
|
||||
|
||||
if(this.dataProviderInfo.tabsInTypes.relatedDatasourcesTab.has(data[1].classid)) {
|
||||
this.dataProviderInfo.tabs.push({"name": "Related Content Providers", "content": "relatedDatasourcesTab"});
|
||||
this.dataProviderInfo.tabs2.push("Related Content Providers");
|
||||
}
|
||||
|
||||
if(this.dataProviderInfo.tabsInTypes.statisticsTab.has(data[1].classid)) {
|
||||
this.dataProviderInfo.tabs.push({"name": "Statistics", "content": "statisticsTab"});
|
||||
this.dataProviderInfo.tabs2.push("Statistics");
|
||||
}
|
||||
|
||||
if(this.dataProviderInfo.tabsInTypes.softwareTab.has(data[1].classid)) {
|
||||
this.dataProviderInfo.tabs.push({"name": "Software", "content": "softwareTab"});
|
||||
this.dataProviderInfo.tabs2.push("Software");
|
||||
}
|
||||
|
||||
/*if(this.dataProviderInfo.tabsInTypes.otherTab.has(data[1].classid)) {
|
||||
|
|
@ -126,6 +134,7 @@ export class DataProviderService {
|
|||
}*/
|
||||
|
||||
this.dataProviderInfo.tabs.push({"name": "Metrics", "content": "metricsTab"});
|
||||
this.dataProviderInfo.tabs2.push("Metrics");
|
||||
|
||||
if(this.dataProviderInfo.resultTypes.collectedFrom.has(data[1].classid)) {
|
||||
this.dataProviderInfo.resultsBy = "collectedFrom";
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import{EnvProperties} from '../../utils/properties/env-properties';
|
|||
@Component({
|
||||
selector: 'metrics',
|
||||
template: `
|
||||
<div *ngIf="!shortView">
|
||||
<errorMessages [status]="[status]" [type]="'metrics'"></errorMessages>
|
||||
<div *ngIf="metrics != undefined" class="uk-child-width-1-3@m uk-grid-small uk-grid-match uk-grid" uk-grid="">
|
||||
<div *ngIf="entityType == 'projects'" class="uk-width-1-1 uk-text-center uk-text-meta uk-margin">Project metrics are derived from aggregating individual research results metrics.</div>
|
||||
|
|
@ -71,6 +72,28 @@ import{EnvProperties} from '../../utils/properties/env-properties';
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div *ngIf="shortView">
|
||||
<dl *ngIf="metrics" class="uk-description-list-line">
|
||||
<dt class="title">Other Metrics</dt>
|
||||
<dd class="line" >
|
||||
{{metrics.pageViews | number}} views in OpenAIRE
|
||||
</dd>
|
||||
<dd class="line">
|
||||
{{metrics.totalViews | number}}
|
||||
<span *ngIf="metrics.totalViews > 0 && metrics.totalOpenaireViews > 0">
|
||||
( {{metrics.totalOpenaireViews | number}} from OpenAIRE )
|
||||
</span>
|
||||
views in local repository
|
||||
</dd>
|
||||
<dd class="line">
|
||||
{{metrics.totalDownloads | number}}
|
||||
<span *ngIf="metrics.totalDownloads > 0 && metrics.totalOpenaireDownloads > 0">
|
||||
( {{metrics.totalOpenaireDownloads | number}} from OpenAIRE )
|
||||
</span> downloads in local repository
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
||||
|
|
@ -82,6 +105,7 @@ export class MetricsComponent {
|
|||
//@Input() name: string = "";
|
||||
@Input() pageViews: number = 0;
|
||||
@Input() properties:EnvProperties;
|
||||
@Input() shortView:boolean = false;
|
||||
|
||||
public metrics: Metrics;
|
||||
public errorCodes:ErrorCodes;
|
||||
|
|
@ -113,7 +137,6 @@ export class MetricsComponent {
|
|||
data => {
|
||||
this.metrics = data;
|
||||
this.status = this.errorCodes.DONE;
|
||||
|
||||
this.metricsResults.emit({
|
||||
totalViews: this.metrics.totalViews,
|
||||
totalDownloads: this.metrics.totalDownloads,
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export class DataProviderInfo {
|
|||
aggregationStatus: {"fundedContent": string, "indexRecords": string}; //collected from datasource api
|
||||
|
||||
tabs: {"name": string, "content": string}[];
|
||||
tabs2: string[] =[];
|
||||
tabsInTypes = {
|
||||
"publicationsTab": new Set<string>(
|
||||
[ "aggregator::pubsrepository::institutional",
|
||||
|
|
|
|||
Loading…
Reference in New Issue