Project

General

Profile

1
<div class="uk-section-default uk-section uk-section-small uk-padding-remove-bottom" style="min-height: 325px">
2

    
3
  <!-- MARGIN-TOP  -->
4
  <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="true"></div>
5
  <div class="uk-container">
6

    
7
    <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
8
      <div class="uk-width-1-1@m uk-first-column">
9

    
10
        <h1 class="uk-h2">Metrics</h1>
11

    
12
        <!-- TOP HELP CONTENT -->
13
        <help-content #topHelperContent [position]="'top'"
14
                      [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
15
        </help-content>
16

    
17
        <div class="uk-container uk-margin-medium-top uk-margin-medium-bottom">
18
          <div class="uk-grid">
19

    
20
            <!-- LEFT HELP CONTENT -->
21
            <aside-help-content #leftHelperContent [position]="'left'"
22
                                [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
23
            </aside-help-content>
24

    
25
            <!-- MIDDLE -->
26
            <div class=" uk-width-expand@m">
27

    
28
              <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
29
              <div *ngIf="loadingMessage" class="loading-big">
30
                <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
31
                  {{ loadingMessage }}
32
                </div>
33
                <div class="whiteFilm"></div>
34
              </div>
35
              <div *ngIf="repoMetrics">
36
                <div class="uk-grid">
37
                  <div class="uk-width-1-1 uk-margin-bottom">
38
                    <div class="uk-float-right">
39
                      <a class="uk-button uk-button-primary"
40
                         [routerLink]="['/getImpact/usagestats',repoId]" title="">Get statistics report</a>
41
                    </div>
42
                  </div>
43
                  <div class="uk-width-1-1 uk-margin-medium-bottom">
44
                    <div>
45
                      <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match uk-grid" uk-grid="">
46
                        <div class="metrics-openaire uk-first-column">
47
                          <div class="uk-tile uk-tile-default uk-padding-small">
48
                            <div class="uk-text-center">   {{ pageViews }}</div>
49
                            <div class="uk-text-center"> views in OpenAIRE</div>
50
                          </div>
51
                        </div>
52
                        <div class="metrics-views">
53
                          <div class="uk-tile uk-tile-muted uk-padding-small">
54
                            <div class="uk-text-center">  {{ totalViews }}
55
                              <span *ngIf="repoMetrics.metricsNumbers.total_openaire_views">( {{ repoMetrics.metricsNumbers.total_openaire_views }} from OpenAIRE )</span>
56
                            </div>
57
                            <div class="uk-text-center">views in local repository</div>
58
                          </div>
59
                        </div>
60
                        <div class="metrics-downloads">
61
                          <div class="uk-tile uk-tile-primary uk-padding-small">
62
                            <div class="uk-text-center">  {{ totalDownloads }}
63
                              <span *ngIf="repoMetrics.metricsNumbers.total_openaire_downloads">( {{ repoMetrics.metricsNumbers.total_openaire_downloads }} from OpenAIRE )</span></div>
64
                            <div class="uk-text-center">downloads in local repository</div>
65
                          </div>
66
                        </div>
67
                      </div>
68
                    </div>
69
                  </div>
70
                  <div class="uk-width-1-1 uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-bottom uk-padding">
71
                    <iframe class="statsFrame" [src]="viewsUrl"></iframe>
72
                  </div>
73
                  <div class="uk-width-1-1 uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-bottom uk-padding">
74
                    <iframe class="statsFrame" [src]="downloadsUrl"></iframe>
75
                  </div>
76
                </div>
77
              </div>
78

    
79
            </div>
80

    
81
            <!-- RIGHT HELP CONTENT -->
82
            <aside-help-content #rightHelperContent [position]="'right'"
83
                                [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
84
            </aside-help-content>
85

    
86
          </div>
87
        </div>
88

    
89

    
90
        <!-- BOTTOM HELP CONTENT -->
91
        <help-content #bottomHelperContent [position]="'bottom'"
92
                      [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
93
        </help-content>
94

    
95

    
96
      </div>
97
    </div>
98
  </div>
99
</div>
100

    
(5-5/12)