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

Metrics base on new theme

This commit is contained in:
Konstantinos Triantafyllou 2022-04-19 13:58:10 +03:00
parent b19ef578b4
commit 69273b938a
3 changed files with 101 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
landingPages/landing-utils/metrics/metrics.component.css
View File

@ -1,116 +1,40 @@
.metrics {
position: relative;
display: inline-block;
--text-gradient-color: linear-gradient(92deg, var(--primary-light-color) 0, var(--primary-dark-color) 100%);
}
.metrics .widget {
position: absolute;
left: -50%;
transform: translateX(25%);
margin-top: -100%;
margin-left: 40px;
width: 350px;
z-index: 3;
}
.metrics .widget:after {
/*position: absolute;*/
/*left: 80%;*/
/*transform: translateX(-65%);*/
/*top: -10px;*/
/*width: 0;*/
/*height: 0;*/
/*content: '';*/
/*border-left: 10px solid transparent;*/
/*border-right: 10px solid transparent;*/
/*border-bottom: 10px solid #2E2D7A;*/
.metrics .uk-dropdown:before {
position: absolute;
left: 0;
transform: translateX(-100%);
top: 25px;
top: 14px;
width: 0;
height: 0;
content: '';
border-left: 10px solid transparent;
border-right: 10px solid #2E2D7A;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 21px solid transparent;
border-right: 21px solid var(--muted-color);
border-bottom: 21px solid transparent;
border-top: 21px solid transparent;
}
.metrics .uk-dropdown:after {
position: absolute;
left: 0;
transform: translateX(-100%);
top: 15px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid var(--default-color);
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
}
.metrics .m-badge .number {
font-size: 18px;
color: #222080;
color: var(--primary-color);
font-weight: 700;
text-align: center;
}
.metrics .widget > .body {
box-shadow: 0 3px 6px #00000029;
border-radius: 4px 4px 0 4px;
padding: 10px 18px;
background: #2E2D7A no-repeat padding-box;
color: white;
font-size: 12px;
height: inherit;
}
.metrics .widget > .body > div {
opacity: 0;
height: inherit;
overflow: hidden;
}
.metrics .widget > .body .charts {
margin-top: 10px;
opacity: 0;
}
.metrics .widget > .body .charts .uk-slidenav {
background-color: #bbbbca;
color: #49494f;
padding: 5px;
border-radius: 50%;
}
.metrics .widget > .footer {
background: #FFFFFF;
box-shadow: 0 3px 6px #00000029;
border-radius: 0 0 4px 4px;
font-size: 11px;
padding: 5px 10px;
color: rgba(126, 126, 126, 0.80);
display: inline-block;
float: right;
position: relative;
z-index: -1;
transform: translateY(-80px);
}
.metrics .widget .footer > *:first-child {
margin-right: 10px;
line-height: 33px;
vertical-align: middle;
}
.metrics .widget .number {
color: currentColor;
font-weight: 700;
font-size: 18px;
}
.metrics .uk-grid-divider>:not(.uk-first-column)::before {
border-left: 1px solid #ffffff;
}
.metrics ul.uk-slider-items > li {
background-color: white;
}
.metrics .uk-table {
color: #1a1a1a;
}
.metrics .uk-table th {
color: rgba(26, 26, 26, 0.8);
}

236
landingPages/landing-utils/metrics/metrics.component.ts
View File

@ -5,7 +5,6 @@ import {ErrorCodes} from '../../../utils/properties/errorCodes';
import {Subscription, zip} from 'rxjs';
import {EnvProperties} from '../../../utils/properties/env-properties';
import {animate, state, style, transition, trigger} from "@angular/animations";
import {ClickEvent} from "../../../utils/click/click-outside-or-esc.directive";
@Component({
@ -14,173 +13,92 @@ import {ClickEvent} from "../../../utils/click/click-outside-or-esc.directive";
template: `
<div *ngIf="metrics && (pageViews >0 || metrics.totalViews > 0|| metrics.totalDownloads >0)" class="metrics"
click-outside-or-esc (clickOutside)="close($event)">
<div class="m-badge clickable" (click)="toggle($event)">
<a class="m-badge uk-link-reset uk-display-block">
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="usage counts">
<div class="number">{{total | number}}</div>
</div>
<div class="widget" [@widget]="state.toString()">
<div class="body">
<div [@body]="state.toString()">
<div *ngIf="entityType == 'projects'" class="uk-margin-bottom">
<i class="uk-text-center">Project metrics
are derived from aggregating individual research results metrics.
</i>
</a>
<div class="uk-dropdown uk-background-default" uk-dropdown="pos: right-top; mode: click; offset: 30">
<div class="uk-padding-small uk-width-large@l uk-width-medium">
<div *ngIf="entityType == 'projects'" class="uk-alert uk-alert-primary uk-margin-small-bottom">
<span class="uk-text-center uk-text-small">Project metrics
are derived from aggregating individual research results metrics.
</span>
</div>
<div class="uk-child-width-1-3@m uk-grid-small uk-grid-divider uk-margin-top" uk-grid>
<div class="uk-text-center">
<div class="number uk-text-bold uk-text-background">{{metrics.totalDownloads | number}}</div>
<div>Downloads</div>
</div>
<div class="uk-child-width-1-3@m uk-grid-small uk-grid-divider uk-grid-match" uk-grid>
<div class="uk-text-center uk-first-column">
<div class="number">{{metrics.totalDownloads | number}}</div>
<div>Downloads</div>
</div>
<div class="uk-text-center">
<div class="number">{{pageViews | number}}</div>
<div>OpenAIRE views</div>
</div>
<div class="uk-text-center">
<div class="number">{{metrics.totalViews | number}}</div>
<div>Total views</div>
</div>
<div class="uk-text-center">
<div class="number uk-text-bold uk-text-background">{{pageViews | number}}</div>
<div>OpenAIRE views</div>
</div>
<div *ngIf="(metrics.totalViews > 0 && viewsFrameUrl) || (metrics.totalDownloads > 0 && downloadsFrameUrl)"
[@charts]="state.toString()"
class="charts uk-visible-toggle" tabindex="-1" uk-slider>
<ul class="uk-slider-items uk-child-width-1-1">
<li *ngIf="metrics && metrics.infos.size > 0" class="uk-overflow-auto" style="height: 200px">
<table
class="uk-table uk-table-small uk-table-striped">
<thead>
<tr>
<th class="uk-text-center uk-text-bold">From</th>
<th class="uk-text-center uk-text-bold">Views</th>
<th class="uk-text-center uk-text-bold">Downloads</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let key of getKeys(metrics.infos)">
<td class="uk-text-center">
<a href="{{metrics.infos.get(key).url}}">
{{metrics.infos.get(key).name}}
</a>
</td>
<td class="uk-text-center">
{{metrics.infos.get(key).numOfViews | number}}
<!-- <span *ngIf="metrics.infos.get(key).numOfViews > 0 && metrics.infos.get(key).openaireViews > 0">
( {{metrics.infos.get(key).openaireViews | number}} from OpenAIRE )
</span>-->
</td>
<td class="uk-text-center">
{{metrics.infos.get(key).numOfDownloads | number}}
<!--<span *ngIf="metrics.infos.get(key).numOfDownloads > 0 && metrics.infos.get(key).openaireDownloads > 0">
( {{metrics.infos.get(key).openaireDownloads | number}} from OpenAIRE )
</span>-->
</td>
</tr>
</tbody>
</table>
</li>
<!-- remove check for datasources when with the new charts -->
<li #element>
<i-frame *ngIf="metricsClicked && metrics.totalViews > 0 && viewsFrameUrl"
[height]="200"
[url]=viewsFrameUrl [addClass]="false">
</i-frame>
</li>
<li #element>
<i-frame *ngIf="metricsClicked && metrics.totalDownloads > 0 && downloadsFrameUrl"
[height]="200"
[url]=downloadsFrameUrl [addClass]="false">
</i-frame>
</li>
</ul>
<div class="uk-text-right uk-margin-small-top">
<a href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a href="#" class="uk-margin-small-left" uk-slidenav-next uk-slider-item="next"></a>
</div>
<div class="uk-text-center">
<div class="number uk-text-bold uk-text-background">{{metrics.totalViews | number}}</div>
<div>Total views</div>
</div>
</div>
</div>
<div class="footer uk-flex uk-flex-middle" [@footer]="state.toString()">
<span>Powered by</span>
<a href="https://usagecounts.openaire.eu" target="_blank">
<img width="120" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="usage counts">
</a>
<div class="uk-padding">
<div *ngIf="(metrics.totalViews > 0 && viewsFrameUrl) || (metrics.totalDownloads > 0 && downloadsFrameUrl)"
class="uk-position-relative uk-visible-toggle uk-slider uk-margin-small-top" tabIndex="1" uk-slider>
<div class="uk-slider-container">
<ul class="uk-slider-items uk-child-width-1-1">
<li *ngIf="metrics && metrics.infos.size > 0" class="uk-overflow-auto" style="height: 200px">
<table
class="uk-table uk-table-small uk-table-striped">
<thead>
<tr>
<th class="uk-text-center uk-text-bold">From</th>
<th class="uk-text-center uk-text-bold">Views</th>
<th class="uk-text-center uk-text-bold">Downloads</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let key of getKeys(metrics.infos)">
<td class="uk-text-center">
<a href="{{metrics.infos.get(key).url}}">
{{metrics.infos.get(key).name}}
</a>
</td>
<td class="uk-text-center">
{{metrics.infos.get(key).numOfViews | number}}
<!-- <span *ngIf="metrics.infos.get(key).numOfViews > 0 && metrics.infos.get(key).openaireViews > 0">
( {{metrics.infos.get(key).openaireViews | number}} from OpenAIRE )
</span>-->
</td>
<td class="uk-text-center">
{{metrics.infos.get(key).numOfDownloads | number}}
<!--<span *ngIf="metrics.infos.get(key).numOfDownloads > 0 && metrics.infos.get(key).openaireDownloads > 0">
( {{metrics.infos.get(key).openaireDownloads | number}} from OpenAIRE )
</span>-->
</td>
</tr>
</tbody>
</table>
</li>
<!-- remove check for datasources when with the new charts -->
<li *ngIf="metricsClicked && metrics.totalViews > 0 && viewsFrameUrl">
<i-frame [height]="200" [url]=viewsFrameUrl [addClass]="false"></i-frame>
</li>
<li *ngIf="metricsClicked && metrics.totalDownloads > 0 && downloadsFrameUrl">
<i-frame [height]="200" [url]=downloadsFrameUrl [addClass]="false"></i-frame>
</li>
</ul>
</div>
<a class="uk-position-center-left-out" uk-slider-item="previous"><span uk-icon="icon: chevron-left; ratio: 2"></span></a>
<a class="uk-position-center-right-out" uk-slider-item="next"><span uk-icon="icon: chevron-right; ratio: 2"></span></a>
</div>
</div>
<div class="uk-flex uk-flex-center uk-flex-middle">
<span class="uk-margin-small-right">Powered by</span>
<a href="https://usagecounts.openaire.eu" target="_blank">
<img width="120" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="usage counts">
</a>
</div>
</div>
</div>
</div>
`,
animations: [
trigger('widget', [
state('-1', style({
width: '150px',
opacity: 0,
height: '60px',
})),
state('0', style({
width: '150px',
opacity: 0,
height: '60px',
"margin-top": '-25px'
})),
state('1', style({
width: '150px',
opacity: 1,
height: '60px',
})),
state('2', style({
width: '350px',
height: 'auto',
})),
state('3', style({
width: '350px',
height: 'auto',
})),
state('4', style({
width: '350px',
height: 'auto',
})),
transition('0 => 1', [
animate('300ms ease-out')
]),
transition('1 => 2', [
animate('400ms cubic-bezier(.18,.89,.56,1)')
])
]),
trigger('body', [
state('2', style({
opacity: 1,
height: 'auto',
})),
state('3', style({
opacity: 1,
height: 'auto'
})),
state('4', style({
opacity: 1,
height: 'auto'
})),
transition('* => 2', [
animate('400ms cubic-bezier(.18,.89,.56,1)')
])
]),
trigger('charts', [
state('3', style({
opacity: 1
})),
state('4', style({
opacity: 1
})),
transition('* => 3', [
animate('800ms ease-out')
])
]),
trigger('footer', [
state('4', style({
transform: 'translateY(0)'
})),
transition('3 => 4', [
animate('800ms ease-out')
])
])
]
`
})
export class MetricsComponent {

3
landingPages/landing-utils/metrics/metrics.module.ts
View File

@ -10,10 +10,11 @@ import {MetricsService} from '../../../services/metrics.service';
import {ErrorMessagesModule} from '../../../utils/errorMessages.module';
import {IFrameModule} from "../../../utils/iframe.module";
import {ClickModule} from "../../../utils/click/click.module";
import {IconsModule} from "../../../utils/icons/icons.module";
@NgModule({
imports: [
CommonModule, FormsModule, ErrorMessagesModule, IFrameModule, ClickModule
CommonModule, FormsModule, ErrorMessagesModule, IFrameModule, ClickModule, IconsModule
],
declarations: [
MetricsComponent