project & dataProvider landing: use ngFor loop on the measure.counts arrays to display the correct measures
This commit is contained in:
parent
b500fcb957
commit
87c91e23fb
|
|
@ -189,18 +189,21 @@
|
|||
<div class="uk-width-expand uk-flex uk-flex-middle">
|
||||
<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
|
||||
<div>
|
||||
<div *ngIf="dataProviderInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon [name]="dataProviderInfo.measure.counts[1].icon" [ratio]="0.8" [flex]="true"></icon></div>
|
||||
<div *ngIf="dataProviderInfo.measure.counts[0].value" class="cell uk-flex uk-flex-middle"><icon [name]="dataProviderInfo.measure.counts[0].icon" [ratio]="0.8" [flex]="true"></icon></div>
|
||||
<ng-container>
|
||||
<ng-container *ngFor="let measure of dataProviderInfo.measure.counts; let i = index">
|
||||
<div *ngIf="measure.value" class="cell uk-flex uk-flex-middle" [class.uk-margin-xsmall-bottom]="i != dataProviderInfo.measure.counts.length - 1">
|
||||
<icon [name]="measure.icon" [ratio]="0.8" [flex]="true"></icon>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div>
|
||||
<div *ngIf="dataProviderInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom">
|
||||
<a class="uk-text-capitalize">{{dataProviderInfo.measure.counts[1].name}}</a>
|
||||
<ng-container *ngTemplateOutlet="dropInfo; context: {option: dataProviderInfo.measure.counts[1].name}"></ng-container>
|
||||
</div>
|
||||
<div *ngIf="dataProviderInfo.measure.counts[0].value" class="cell">
|
||||
<a class="uk-text-capitalize">{{dataProviderInfo.measure.counts[0].name}}</a>
|
||||
<ng-container *ngTemplateOutlet="dropInfo; context: {option: dataProviderInfo.measure.counts[0].name}"></ng-container>
|
||||
</div>
|
||||
<ng-container *ngFor="let measure of dataProviderInfo.measure.counts; let i = index">
|
||||
<div *ngIf="measure.value" class="cell" [class.uk-margin-xsmall-bottom]="i != dataProviderInfo.measure.counts.length - 1">
|
||||
<a class="uk-text-capitalize">{{measure.name}}</a>
|
||||
<ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: false}"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<ng-template #dropInfo let-option=option>
|
||||
<div class="uk-dropdown" uk-dropdown="pos: bottom-left; mode:click; container: #modal-container;">
|
||||
|
|
@ -209,10 +212,12 @@
|
|||
</div>
|
||||
</ng-template>
|
||||
<div class="uk-text-uppercase uk-text-bolder">
|
||||
<div *ngIf="dataProviderInfo.measure.counts[1].value" [attr.uk-tooltip]="dataProviderInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{dataProviderInfo.measure.counts[1].value | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(dataProviderInfo.measure.counts[1].value)}}</div>
|
||||
<div *ngIf="dataProviderInfo.measure.counts[0].value" [attr.uk-tooltip]="dataProviderInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{dataProviderInfo.measure.counts[0].value | number}}" class="cell">{{formatNumber(dataProviderInfo.measure.counts[0].value)}}</div>
|
||||
<ng-container *ngFor="let measure of dataProviderInfo.measure.counts; let i = index">
|
||||
<div *ngIf="measure.value" [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{measure.value | number}}" class="cell" [class.uk-margin-xsmall-bottom]="i != dataProviderInfo.measure.counts.length - 1">
|
||||
{{formatNumber(measure.value)}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -780,14 +785,14 @@
|
|||
<li class="uk-padding-remove">
|
||||
<a href="#">Overview</a>
|
||||
</li>
|
||||
<li *ngIf="dataProviderInfo.measure.counts[1].value || dataProviderInfo.measure.counts[0].value">
|
||||
<li *ngIf="hasMetrics">
|
||||
<a href="#" (click)="clickedUsageMetrics()">Usage</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="uk-switcher uk-margin-large-top">
|
||||
<!-- overview -->
|
||||
<li>
|
||||
<div *ngIf="dataProviderInfo.measure.counts[1].value || dataProviderInfo.measure.counts[0].value">
|
||||
<div *ngIf="hasMetrics">
|
||||
<div class="uk-grid-divider" uk-grid>
|
||||
<div>
|
||||
<div class="uk-text-center uk-margin-small-bottom">
|
||||
|
|
@ -803,32 +808,21 @@
|
|||
<div>
|
||||
<table class="uk-table uk-table-small">
|
||||
<tbody>
|
||||
<tr *ngIf="dataProviderInfo.measure.counts[1].value">
|
||||
<td class="uk-padding-remove-top">
|
||||
<icon [name]="dataProviderInfo.measure.counts[1].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-top uk-text-capitalize">
|
||||
{{dataProviderInfo.measure.counts[1].name}}
|
||||
</td>
|
||||
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"
|
||||
[attr.uk-tooltip]="dataProviderInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{dataProviderInfo.measure.counts[1].value | number}}">
|
||||
{{formatNumber(dataProviderInfo.measure.counts[1].value)}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="dataProviderInfo.measure.counts[0].value">
|
||||
<td class="uk-padding-remove-bottom">
|
||||
<icon [name]="dataProviderInfo.measure.counts[0].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom uk-text-capitalize">
|
||||
{{dataProviderInfo.measure.counts[0].name}}
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
|
||||
[attr.uk-tooltip]="dataProviderInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{dataProviderInfo.measure.counts[0].value | number}}">
|
||||
{{formatNumber(dataProviderInfo.measure.counts[0].value)}}
|
||||
</td>
|
||||
</tr>
|
||||
<ng-container *ngFor="let measure of dataProviderInfo.measure.counts; let i = index">
|
||||
<tr>
|
||||
<td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == dataProviderInfo.measure.counts.length - 1">
|
||||
<icon [name]="measure.icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
|
||||
</td>
|
||||
<td class="uk-text-capitalize" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == dataProviderInfo.measure.counts.length - 1">
|
||||
{{measure.name}}
|
||||
</td>
|
||||
<td class="uk-text-uppercase uk-text-bolder" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == dataProviderInfo.measure.counts.length - 1"
|
||||
[attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{measure.value | number}}">
|
||||
{{formatNumber(measure.value)}}
|
||||
</td>
|
||||
</tr>
|
||||
</ng-container>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -836,21 +830,17 @@
|
|||
</div>
|
||||
</li>
|
||||
<!-- usage -->
|
||||
<li *ngIf="dataProviderInfo.measure.counts[1].value || dataProviderInfo.measure.counts[0].value">
|
||||
<li *ngIf="hasMetrics">
|
||||
<div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="isMobile">
|
||||
<div class="uk-margin-large-right uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="!isMobile">
|
||||
<div *ngIf="dataProviderInfo.measure.counts[1].value" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile">
|
||||
<div class="uk-text-background uk-text-bold number metrics-number"
|
||||
[attr.uk-tooltip]="dataProviderInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{dataProviderInfo.measure.counts[1].value | number}}">{{formatNumber(dataProviderInfo.measure.counts[1].value)}}</div>
|
||||
<div class="uk-text-bold uk-text-capitalize">{{dataProviderInfo.measure.counts[1].name}}</div>
|
||||
</div>
|
||||
<div *ngIf="dataProviderInfo.measure.counts[0].value" class="uk-text-center uk-margin-medium-bottom">
|
||||
<div class="uk-text-background uk-text-bold number metrics-number"
|
||||
[attr.uk-tooltip]="dataProviderInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{dataProviderInfo.measure.counts[0].value | number}}">{{formatNumber(dataProviderInfo.measure.counts[0].value)}}</div>
|
||||
<div class="uk-text-bold uk-text-capitalize">{{dataProviderInfo.measure.counts[0].name}}</div>
|
||||
</div>
|
||||
<ng-container *ngFor="let measure of dataProviderInfo.measure.counts; let i = index">
|
||||
<div *ngIf="measure.value" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile">
|
||||
<div class="uk-text-background uk-text-bold number metrics-number"
|
||||
[attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{measure.value | number}}">{{formatNumber(measure.value)}}</div>
|
||||
<div class="uk-text-bold uk-text-capitalize">{{measure.name}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
|
||||
<div *ngIf="metricsClicked && downloadsFrameUrl && totalDownloads" class="uk-margin-large-right">
|
||||
|
|
|
|||
|
|
@ -713,7 +713,7 @@ export class DataProviderComponent {
|
|||
public get hasMetrics(): boolean {
|
||||
// return !(this.totalViews != null && this.totalDownloads != null) || this.totalViews > 0 || this.totalDownloads > 0;
|
||||
// return (this.totalViews != null && this.totalViews > 0) || (this.totalDownloads != null && this.totalDownloads > 0);
|
||||
return this.dataProviderInfo.measure?.counts?.length && (this.dataProviderInfo.measure?.counts[0].value > 0 || this.dataProviderInfo.measure?.counts[1].value);
|
||||
return this.dataProviderInfo.measure?.counts?.length > 0;
|
||||
}
|
||||
|
||||
// public openStatistics() {
|
||||
|
|
|
|||
|
|
@ -322,18 +322,21 @@
|
|||
<div class="uk-width-expand uk-flex uk-flex-middle">
|
||||
<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
|
||||
<div>
|
||||
<div *ngIf="projectInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon [name]="projectInfo.measure.counts[1].icon" [ratio]="0.8" [flex]="true"></icon></div>
|
||||
<div *ngIf="projectInfo.measure.counts[0].value" class="cell uk-flex uk-flex-middle"><icon [name]="projectInfo.measure.counts[0].icon" [ratio]="0.8" [flex]="true"></icon></div>
|
||||
<ng-container>
|
||||
<ng-container *ngFor="let measure of projectInfo.measure.counts; let i = index">
|
||||
<div *ngIf="measure.value" class="cell uk-flex uk-flex-middle" [class.uk-margin-xsmall-bottom]="i != projectInfo.measure.counts.length - 1">
|
||||
<icon [name]="measure.icon" [ratio]="0.8" [flex]="true"></icon>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div>
|
||||
<div *ngIf="projectInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom">
|
||||
<a class="uk-text-capitalize">{{projectInfo.measure.counts[1].name}}</a>
|
||||
<ng-container *ngTemplateOutlet="dropInfo; context: {option: projectInfo.measure.counts[1].name}"></ng-container>
|
||||
</div>
|
||||
<div *ngIf="projectInfo.measure.counts[0].value" class="cell">
|
||||
<a class="uk-text-capitalize">{{projectInfo.measure.counts[0].name}}</a>
|
||||
<ng-container *ngTemplateOutlet="dropInfo; context: {option: projectInfo.measure.counts[0].name}"></ng-container>
|
||||
</div>
|
||||
<ng-container *ngFor="let measure of projectInfo.measure.counts; let i = index">
|
||||
<div *ngIf="measure.value" class="cell" [class.uk-margin-xsmall-bottom]="i != projectInfo.measure.counts.length - 1">
|
||||
<a class="uk-text-capitalize">{{measure.name}}</a>
|
||||
<ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: false}"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<ng-template #dropInfo let-option=option>
|
||||
<div class="uk-dropdown" uk-dropdown="pos: bottom-left; mode:click; container: #modal-container;">
|
||||
|
|
@ -342,10 +345,12 @@
|
|||
</div>
|
||||
</ng-template>
|
||||
<div class="uk-text-uppercase uk-text-bolder">
|
||||
<div *ngIf="projectInfo.measure.counts[1].value" [attr.uk-tooltip]="projectInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{projectInfo.measure.counts[1].value | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(projectInfo.measure.counts[1].value)}}</div>
|
||||
<div *ngIf="projectInfo.measure.counts[0].value" [attr.uk-tooltip]="projectInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{projectInfo.measure.counts[0].value | number}}" class="cell">{{formatNumber(projectInfo.measure.counts[0].value)}}</div>
|
||||
<ng-container *ngFor="let measure of projectInfo.measure.counts; let i = index">
|
||||
<div *ngIf="measure.value" [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{measure.value | number}}" class="cell" [class.uk-margin-xsmall-bottom]="i != projectInfo.measure.counts.length - 1">
|
||||
{{formatNumber(measure.value)}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -843,14 +848,14 @@
|
|||
<li class="uk-padding-remove">
|
||||
<a href="#">Overview</a>
|
||||
</li>
|
||||
<li *ngIf="projectInfo.measure.counts[1].value || projectInfo.measure.counts[0].value">
|
||||
<li *ngIf="hasMetrics">
|
||||
<a href="#" (click)="clickedUsageMetrics()">Usage</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="uk-switcher uk-margin-large-top">
|
||||
<!-- overview -->
|
||||
<li>
|
||||
<div *ngIf="projectInfo.measure.counts[1].value || projectInfo.measure.counts[0].value">
|
||||
<div *ngIf="hasMetrics">
|
||||
<div class="uk-grid-divider" uk-grid>
|
||||
<div>
|
||||
<div class="uk-text-center uk-margin-small-bottom">
|
||||
|
|
@ -866,32 +871,21 @@
|
|||
<div>
|
||||
<table class="uk-table uk-table-small">
|
||||
<tbody>
|
||||
<tr *ngIf="projectInfo.measure.counts[1].value">
|
||||
<td class="uk-padding-remove-top">
|
||||
<icon [name]="projectInfo.measure.counts[1].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-top uk-text-capitalize">
|
||||
{{projectInfo.measure.counts[1].name}}
|
||||
</td>
|
||||
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"
|
||||
[attr.uk-tooltip]="projectInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{projectInfo.measure.counts[1].value | number}}">
|
||||
{{formatNumber(projectInfo.measure.counts[1].value)}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="projectInfo.measure.counts[0].value">
|
||||
<td class="uk-padding-remove-bottom">
|
||||
<icon [name]="projectInfo.measure.counts[0].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom uk-text-capitalize">
|
||||
{{projectInfo.measure.counts[0].name}}
|
||||
</td>
|
||||
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
|
||||
[attr.uk-tooltip]="projectInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{projectInfo.measure.counts[0].value | number}}">
|
||||
{{formatNumber(projectInfo.measure.counts[0].value)}}
|
||||
</td>
|
||||
</tr>
|
||||
<ng-container *ngFor="let measure of projectInfo.measure.counts; let i = index">
|
||||
<tr>
|
||||
<td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == projectInfo.measure.counts.length - 1">
|
||||
<icon [name]="measure.icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
|
||||
</td>
|
||||
<td class="uk-text-capitalize" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == projectInfo.measure.counts.length - 1">
|
||||
{{measure.name}}
|
||||
</td>
|
||||
<td class="uk-text-uppercase uk-text-bolder" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == projectInfo.measure.counts.length - 1"
|
||||
[attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{measure.value | number}}">
|
||||
{{formatNumber(measure.value)}}
|
||||
</td>
|
||||
</tr>
|
||||
</ng-container>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -899,19 +893,17 @@
|
|||
</div>
|
||||
</li>
|
||||
<!-- usage -->
|
||||
<li *ngIf="projectInfo.measure.counts[1].value || projectInfo.measure.counts[0].value">
|
||||
<li *ngIf="hasMetrics">
|
||||
<div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="isMobile">
|
||||
<div class="uk-margin-large-right uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="!isMobile">
|
||||
<div *ngIf="projectInfo.measure.counts[1].value" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile">
|
||||
<div class="uk-text-background uk-text-bold number metrics-number" [attr.uk-tooltip]="projectInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{projectInfo.measure.counts[1].value | number}}">{{formatNumber(projectInfo.measure.counts[1].value)}}</div>
|
||||
<div class="uk-text-bold uk-text-capitalize">{{projectInfo.measure.counts[1].name}}</div>
|
||||
</div>
|
||||
<div *ngIf="projectInfo.measure.counts[0].value" class="uk-text-center uk-margin-medium-bottom">
|
||||
<div class="uk-text-background uk-text-bold number metrics-number" [attr.uk-tooltip]="projectInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{projectInfo.measure.counts[0].value | number}}">{{formatNumber(projectInfo.measure.counts[0].value)}}</div>
|
||||
<div class="uk-text-bold uk-text-capitalize">{{projectInfo.measure.counts[0].name}}</div>
|
||||
</div>
|
||||
<ng-container *ngFor="let measure of projectInfo.measure.counts; let i = index">
|
||||
<div *ngIf="measure.value" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile">
|
||||
<div class="uk-text-background uk-text-bold number metrics-number"
|
||||
[attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="{{measure.value | number}}">{{formatNumber(measure.value)}}</div>
|
||||
<div class="uk-text-bold uk-text-capitalize">{{measure.name}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
|
||||
<div *ngIf="metricsClicked && downloadsFrameUrl && totalDownloads" class="uk-margin-large-right">
|
||||
|
|
|
|||
|
|
@ -597,7 +597,7 @@ export class ProjectComponent {
|
|||
|
||||
public get hasMetrics(): boolean {
|
||||
// return !(this.totalViews != null && this.totalDownloads != null) || this.totalViews > 0 || this.totalDownloads > 0;
|
||||
return this.projectInfo.measure?.counts?.length && (this.projectInfo.measure?.counts[0].value > 0 || this.projectInfo.measure?.counts[1].value);
|
||||
return this.projectInfo.measure?.counts?.length > 0;
|
||||
}
|
||||
|
||||
public viewAllOrganizationsClick() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue