Project

General

Profile

« Previous | Next » 

Revision 57763

Added progress bars to the overview countries table

View differences:

countries-table.component.html
48 48
      <tr *ngFor="let countryOverview of countries">
49 49
        <td class=""><a [routerLink]="['/countryDashboard/' + countryOverview.country]">{{countryOverview.country}}</a></td>
50 50
        <td *ngIf="type=='overview'" class="uk-text-center">
51
          <ng-container *ngIf="countryOverview.repositories?.percentage !=null">{{countryOverview.repositories.percentage | number}}%</ng-container>
52
          <ng-container *ngIf="countryOverview.repositories===null || countryOverview.repositories.percentage===null">--</ng-container>
51
          <ng-container *ngIf="countryOverview.repositories?.oa !=null">{{countryOverview.repositories.oa | number}}</ng-container>
52
          <ng-container *ngIf="countryOverview.repositories===null || countryOverview.repositories.oa===null">--</ng-container>
53 53
        </td>
54 54
        <td *ngIf="type=='overview'" class="uk-text-center">
55
          <ng-container *ngIf="countryOverview.journals?.percentage !=null">{{countryOverview.journals.percentage | number}}%</ng-container>
56
          <ng-container *ngIf="countryOverview.journals===null || countryOverview.journals.percentage===null">--</ng-container>
55
          <ng-container *ngIf="countryOverview.journals?.oa !=null">{{countryOverview.journals.oa | number}}</ng-container>
56
          <ng-container *ngIf="countryOverview.journals===null || countryOverview.journals.oa===null">--</ng-container>
57 57
        </td>
58 58
        <td *ngIf="type=='overview'" class="uk-text-center">
59
          <ng-container *ngIf="countryOverview.policies?.percentage !=null">{{countryOverview.policies.percentage | number}}%</ng-container>
60
          <ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.percentage===null">--</ng-container>
59
          <ng-container *ngIf="countryOverview.policies?.oa !=null">{{countryOverview.policies.oa | number}}</ng-container>
60
          <ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.oa===null">--</ng-container>
61 61
        </td>
62 62
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
63
          <ng-container *ngIf="countryOverview.publications?.percentage !=null">{{countryOverview.publications.percentage | number}}%</ng-container>
64 63
          <ng-container *ngIf="countryOverview.publications===null || countryOverview.publications.percentage===null">--</ng-container>
64
          <ng-container *ngIf="countryOverview.publications?.percentage !=null">
65

  
66
            <span style="display: inline-block; float: right; padding-right: 10px;">
67
              <span style="float:left; padding-right: 5px;">{{countryOverview.publications.percentage | number}}% </span>
68
              <ng-container *ngIf="countryOverview.publications?.percentage !=null">
69
                <div class="progress">
70
                  <div [ngStyle]="{'width': countryOverview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
71
                </div>
72
              </ng-container>
73
            </span>
74

  
75
          </ng-container>
65 76
        </td>
66 77
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
67
          <ng-container *ngIf="countryOverview.datasets?.percentage !=null">{{countryOverview.datasets.percentage | number}}%</ng-container>
68 78
          <ng-container *ngIf="countryOverview.datasets===null || countryOverview.datasets.percentage===null">--</ng-container>
79
          <ng-container *ngIf="countryOverview.datasets?.percentage !=null">
80

  
81
            <span style="display: inline-block; float: right; padding-right: 10px;">
82
              <span style="float:left; padding-right: 5px;">{{countryOverview.datasets.percentage | number}}% </span>
83
              <ng-container *ngIf="countryOverview.datasets?.percentage !=null">
84
                <div class="progress">
85
                  <div [ngStyle]="{'width': countryOverview.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
86
                </div>
87
              </ng-container>
88
            </span>
89

  
90
          </ng-container>
69 91
        </td>
70 92
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
71
          <ng-container *ngIf="countryOverview.software?.percentage !=null">{{countryOverview.software.percentage | number}}%</ng-container>
72 93
          <ng-container *ngIf="countryOverview.software===null || countryOverview.software.percentage===null">--</ng-container>
94
          <ng-container *ngIf="countryOverview.software?.percentage !=null">
95

  
96
            <span style="display: inline-block; float: right; padding-right: 10px;">
97
              <span style="float:left; padding-right: 5px;">{{countryOverview.software.percentage | number}}% </span>
98
              <ng-container *ngIf="countryOverview.software?.percentage !=null">
99
                <div class="progress">
100
                  <div [ngStyle]="{'width': countryOverview.software.percentage+'%'}" class="progress-bar progress-bar-software animate-progress-bar"></div>
101
                </div>
102
              </ng-container>
103
            </span>
104

  
105
          </ng-container>
73 106
        </td>
74 107
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
75
          <ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">{{countryOverview.otherProducts.percentage | number}}%</ng-container>
76 108
          <ng-container *ngIf="countryOverview.otherProducts===null || countryOverview.otherProducts.percentage===null">--</ng-container>
109
          <ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">
110

  
111
            <span style="display: inline-block; float: right; padding-right: 10px;">
112
              <span style="float:left; padding-right: 5px;">{{countryOverview.otherProducts.percentage | number}}% </span>
113
              <ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">
114
                <div class="progress">
115
                  <div [ngStyle]="{'width': countryOverview.otherProducts.percentage+'%'}" class="progress-bar progress-bar-otherProducts animate-progress-bar"></div>
116
                </div>
117
              </ng-container>
118
            </span>
119

  
120
          </ng-container>
77 121
        </td>
78 122
      </tr>
79 123
    </ng-container>
......
93 137
          <ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.oa===null">--</ng-container>
94 138
        </td>
95 139
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
96
          <ng-container *ngIf="countryOverview.publications?.oa !=null">{{countryOverview.publications.oa | number}}</ng-container>
97 140
          <ng-container *ngIf="countryOverview.publications===null || countryOverview.publications.oa===null">--</ng-container>
141
          <ng-container *ngIf="countryOverview.publications?.oa !=null">
142

  
143
            <span style="display: inline-block; float: right; padding-right: 10px;">
144
              <span style="float:left; padding-right: 5px;">{{countryOverview.publications.oa | number}} </span>
145
              <ng-container *ngIf="countryOverview.publications?.percentage !=null">
146
                <div class="progress">
147
                  <div [ngStyle]="{'width': countryOverview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
148
                </div>
149
              </ng-container>
150
            </span>
151

  
152
          </ng-container>
98 153
        </td>
99 154
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
100
          <ng-container *ngIf="countryOverview.datasets?.oa !=null">{{countryOverview.datasets.oa | number}}</ng-container>
101 155
          <ng-container *ngIf="countryOverview.datasets===null || countryOverview.datasets.oa===null">--</ng-container>
156
          <ng-container *ngIf="countryOverview.datasets?.oa !=null">
157

  
158
            <span style="display: inline-block; float: right; padding-right: 10px;">
159
              <span style="float:left; padding-right: 5px;">{{countryOverview.datasets.oa | number}} </span>
160
              <ng-container *ngIf="countryOverview.datasets?.percentage !=null">
161
                <div class="progress">
162
                  <div [ngStyle]="{'width': countryOverview.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
163
                </div>
164
              </ng-container>
165
            </span>
166

  
167
          </ng-container>
102 168
        </td>
103 169
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
104
          <ng-container *ngIf="countryOverview.software?.oa !=null">{{countryOverview.software.oa | number}}</ng-container>
105 170
          <ng-container *ngIf="countryOverview.software===null || countryOverview.software.oa===null">--</ng-container>
171
          <ng-container *ngIf="countryOverview.software?.oa !=null">
172

  
173
            <span style="display: inline-block; float: right; padding-right: 10px;">
174
              <span style="float:left; padding-right: 5px;">{{countryOverview.software.oa | number}} </span>
175
              <ng-container *ngIf="countryOverview.software?.percentage !=null">
176
                <div class="progress">
177
                  <div [ngStyle]="{'width': countryOverview.software.percentage+'%'}" class="progress-bar progress-bar-software animate-progress-bar"></div>
178
                </div>
179
              </ng-container>
180
            </span>
181

  
182
          </ng-container>
106 183
        </td>
107 184
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
108
          <ng-container *ngIf="countryOverview.otherProducts?.oa !=null">{{countryOverview.otherProducts.oa | number}}</ng-container>
109 185
          <ng-container *ngIf="countryOverview.otherProducts===null || countryOverview.otherProducts.oa===null">--</ng-container>
186
          <ng-container *ngIf="countryOverview.otherProducts?.oa !=null">
187

  
188
            <span style="display: inline-block; float: right; padding-right: 10px;">
189
              <span style="float:left; padding-right: 5px;">{{countryOverview.otherProducts.oa | number}} </span>
190
              <ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">
191
                <div class="progress">
192
                  <div [ngStyle]="{'width': countryOverview.otherProducts.percentage+'%'}" class="progress-bar progress-bar-otherProducts animate-progress-bar"></div>
193
                </div>
194
              </ng-container>
195
            </span>
196

  
197
          </ng-container>
110 198
        </td>
111 199
      </tr>
112 200
    </ng-container>

Also available in: Unified diff