MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

create tooltips for all landing page metrics card (BIP and UsageCounts)

This commit is contained in:
Alex Martzios 2023-02-20 19:29:21 +02:00
parent 3d296f3234
commit f17b25d66f
6 changed files with 66 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
landingPages/dataProvider/dataProvider.component.html
View File

@ -185,14 +185,18 @@
<div *ngIf="dataProviderInfo && hasMetrics">
<div class="landing-metrics-card uk-width-medium uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
<div class="uk-width-expand uk-flex uk-flex-middle">
<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
<div>
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="download" [ratio]="0.8" [flex]="true"></icon></div>
<div *ngIf="totalViews" class="cell uk-flex uk-flex-middle"><icon name="visibility" [ratio]="0.8" [flex]="true"></icon></div>
</div>
<div>
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">Downloads</div>
<div *ngIf="totalViews" class="cell">Views</div>
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getDownloadsTooltip">Downloads</div>
<div *ngIf="totalViews" class="cell"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getViewsTooltip">Views</div>
</div>
<div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="totalDownloads" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"

8
landingPages/dataProvider/dataProvider.component.ts
View File

@ -855,4 +855,12 @@ export class DataProviderComponent {
let formatted = NumberUtils.roundNumber(+num);
return formatted.number + formatted.size;
}
get getDownloadsTooltip() {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div";
}
get getViewsTooltip() {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Views provided by <strong>UsageCounts</strong></div";
}
}

10
landingPages/project/project.component.html
View File

@ -336,14 +336,18 @@
<div *ngIf="projectInfo && hasMetrics">
<div class="landing-metrics-card uk-width-medium uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
<div class="uk-width-expand uk-flex uk-flex-middle">
<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
<div>
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="download" [ratio]="0.8" [flex]="true"></icon></div>
<div *ngIf="totalViews" class="cell uk-flex uk-flex-middle"><icon name="visibility" [ratio]="0.8" [flex]="true"></icon></div>
</div>
<div>
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom">Downloads</div>
<div *ngIf="totalViews" class="cell">Views</div>
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getDownloadsTooltip">Downloads</div>
<div *ngIf="totalViews" class="cell"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getViewsTooltip">Views</div>
</div>
<div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="totalDownloads" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"

8
landingPages/project/project.component.ts
View File

@ -989,4 +989,12 @@ export class ProjectComponent {
let formatted = NumberUtils.roundNumber(+num);
return formatted.number + formatted.size;
}
get getDownloadsTooltip() {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div";
}
get getViewsTooltip() {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Views provided by <strong>UsageCounts</strong></div";
}
}

22
landingPages/result/resultLanding.component.html
View File

@ -609,7 +609,7 @@
class="uk-margin-medium-top uk-padding uk-padding-remove-vertical">
<div class="landing-metrics-card uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
<div class="uk-width-expand uk-flex uk-flex-middle">
<div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
<div>
<div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="cite" [ratio]="0.8" [flex]="true"></icon></div>
<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="fire" [ratio]="0.8" [flex]="true"></icon></div>
@ -618,11 +618,21 @@
<div *ngIf="resultLandingInfo.measure.views" class="cell uk-flex uk-flex-middle"><icon name="visibility" [ratio]="0.8" [flex]="true"></icon></div>
</div>
<div>
<div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom">Citations</div>
<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom">Popularity</div>
<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom">Influence</div>
<div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom">Downloads</div>
<div *ngIf="resultLandingInfo.measure.views" class="cell">Views</div>
<div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getCitationsTooltip">Citations</div>
<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getPopularityTooltip">Popularity</div>
<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getInfluenceTooltip">Influence</div>
<div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getDownloadsTooltip">Downloads</div>
<div *ngIf="resultLandingInfo.measure.views" class="cell"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getViewsTooltip">Views</div>
</div>
<div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="resultLandingInfo.measure.citations" [attr.uk-tooltip]="resultLandingInfo.measure.citations >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"

20
landingPages/result/resultLanding.component.ts
View File

@ -1050,4 +1050,24 @@ export class ResultLandingComponent {
public closeFsModal(fsModal: FullScreenModalComponent) {
fsModal.cancel();
}
get getCitationsTooltip() {
return "<div>This is an alternative to the \"Influence\" indicator, which also reflects the overall/total impact of an article in the research community at large, based on the underlying citation network (diachronically).</div><div class='uk-flex uk-margin-top'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'><span class='uk-text-uppercase'>Citations provided by <strong>BIP!</strong></div";
}
get getPopularityTooltip() {
return "<div>This indicator reflects the \"current\" impact/attention (the \"hype\") of an article in the research community at large, based on the underlying citation network.</div><div class='uk-flex uk-margin-top'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'><span class='uk-text-uppercase'>Popularity provided by <strong>BIP!</strong></div";
}
get getInfluenceTooltip() {
return "<div>This indicator reflects the overall/total impact of an article in the research community at large, based on the underlying citation network (diachronically).</div><div class='uk-flex uk-margin-top'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'><span class='uk-text-uppercase'>Influence provided by <strong>BIP!</strong></div";
}
get getDownloadsTooltip() {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div";
}
get getViewsTooltip() {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Views provided by <strong>UsageCounts</strong></div";
}
}