[Library | Trunk]:Metrics: Add table per repository

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59660 d315682c-612b-4755-9ff5-7f18f6832af3

landingPages/landing-utils/metrics/metrics.component.css

@@ -89,3 +89,15 @@
 .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);
+}

landingPages/landing-utils/metrics/metrics.component.ts

@@ -44,22 +44,53 @@ import {animate, state, style, transition, trigger} from "@angular/animations";
                  [@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>
                 <li #element>
-<!--                  [width]="element.offsetWidth"-->
                   <i-frame *ngIf="metricsClicked && metrics.totalViews > 0 && viewsFrameUrl"
                            [height]="200"
                            [url]=viewsFrameUrl>
                   </i-frame>
                 </li>
                 <li #element>
-<!--                  [width]="element.offsetWidth"-->
                   <i-frame *ngIf="metricsClicked && metrics.totalDownloads > 0 && downloadsFrameUrl"
                            [height]="200"
                            [url]=downloadsFrameUrl>
                   </i-frame>
                 </li>
               </ul>
-              <div class="uk-text-right">
+              <div class="uk-text-right uk-margin-small-top">
                 <a href="#" uk-slidenav-previous uk-slider-item="previous"></a>
                 <a href="#" class="space" uk-slidenav-next uk-slider-item="next"></a>
               </div>