Added progress bars to the overview countries table

src/app/pages/home/countries-table.component.html

@@ -48,32 +48,76 @@
       <tr *ngFor="let countryOverview of countries">
         <td class=""><a [routerLink]="['/countryDashboard/' + countryOverview.country]">{{countryOverview.country}}</a></td>
         <td *ngIf="type=='overview'" class="uk-text-center">
-          <ng-container *ngIf="countryOverview.repositories?.percentage !=null">{{countryOverview.repositories.percentage | number}}%</ng-container>
-          <ng-container *ngIf="countryOverview.repositories===null || countryOverview.repositories.percentage===null">--</ng-container>
+          <ng-container *ngIf="countryOverview.repositories?.oa !=null">{{countryOverview.repositories.oa | number}}</ng-container>
+          <ng-container *ngIf="countryOverview.repositories===null || countryOverview.repositories.oa===null">--</ng-container>
         </td>
         <td *ngIf="type=='overview'" class="uk-text-center">
-          <ng-container *ngIf="countryOverview.journals?.percentage !=null">{{countryOverview.journals.percentage | number}}%</ng-container>
-          <ng-container *ngIf="countryOverview.journals===null || countryOverview.journals.percentage===null">--</ng-container>
+          <ng-container *ngIf="countryOverview.journals?.oa !=null">{{countryOverview.journals.oa | number}}</ng-container>
+          <ng-container *ngIf="countryOverview.journals===null || countryOverview.journals.oa===null">--</ng-container>
         </td>
         <td *ngIf="type=='overview'" class="uk-text-center">
-          <ng-container *ngIf="countryOverview.policies?.percentage !=null">{{countryOverview.policies.percentage | number}}%</ng-container>
-          <ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.percentage===null">--</ng-container>
+          <ng-container *ngIf="countryOverview.policies?.oa !=null">{{countryOverview.policies.oa | number}}</ng-container>
+          <ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.oa===null">--</ng-container>
         </td>
         <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
-          <ng-container *ngIf="countryOverview.publications?.percentage !=null">{{countryOverview.publications.percentage | number}}%</ng-container>
           <ng-container *ngIf="countryOverview.publications===null || countryOverview.publications.percentage===null">--</ng-container>
+          <ng-container *ngIf="countryOverview.publications?.percentage !=null">
+
+            <span style="display: inline-block; float: right; padding-right: 10px;">
+              <span style="float:left; padding-right: 5px;">{{countryOverview.publications.percentage | number}}% </span>
+              <ng-container *ngIf="countryOverview.publications?.percentage !=null">
+                <div class="progress">
+                  <div [ngStyle]="{'width': countryOverview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
+                </div>
+              </ng-container>
+            </span>
+
+          </ng-container>
         </td>
         <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
-          <ng-container *ngIf="countryOverview.datasets?.percentage !=null">{{countryOverview.datasets.percentage | number}}%</ng-container>
           <ng-container *ngIf="countryOverview.datasets===null || countryOverview.datasets.percentage===null">--</ng-container>
+          <ng-container *ngIf="countryOverview.datasets?.percentage !=null">
+
+            <span style="display: inline-block; float: right; padding-right: 10px;">
+              <span style="float:left; padding-right: 5px;">{{countryOverview.datasets.percentage | number}}% </span>
+              <ng-container *ngIf="countryOverview.datasets?.percentage !=null">
+                <div class="progress">
+                  <div [ngStyle]="{'width': countryOverview.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
+                </div>
+              </ng-container>
+            </span>
+
+          </ng-container>
         </td>
         <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
-          <ng-container *ngIf="countryOverview.software?.percentage !=null">{{countryOverview.software.percentage | number}}%</ng-container>
           <ng-container *ngIf="countryOverview.software===null || countryOverview.software.percentage===null">--</ng-container>
+          <ng-container *ngIf="countryOverview.software?.percentage !=null">
+
+            <span style="display: inline-block; float: right; padding-right: 10px;">
+              <span style="float:left; padding-right: 5px;">{{countryOverview.software.percentage | number}}% </span>
+              <ng-container *ngIf="countryOverview.software?.percentage !=null">
+                <div class="progress">
+                  <div [ngStyle]="{'width': countryOverview.software.percentage+'%'}" class="progress-bar progress-bar-software animate-progress-bar"></div>
+                </div>
+              </ng-container>
+            </span>
+
+          </ng-container>
         </td>
         <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
-          <ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">{{countryOverview.otherProducts.percentage | number}}%</ng-container>
           <ng-container *ngIf="countryOverview.otherProducts===null || countryOverview.otherProducts.percentage===null">--</ng-container>
+          <ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">
+
+            <span style="display: inline-block; float: right; padding-right: 10px;">
+              <span style="float:left; padding-right: 5px;">{{countryOverview.otherProducts.percentage | number}}% </span>
+              <ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">
+                <div class="progress">
+                  <div [ngStyle]="{'width': countryOverview.otherProducts.percentage+'%'}" class="progress-bar progress-bar-otherProducts animate-progress-bar"></div>
+                </div>
+              </ng-container>
+            </span>
+
+          </ng-container>
         </td>
       </tr>
     </ng-container>
@@ -93,20 +137,64 @@
           <ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.oa===null">--</ng-container>
         </td>
         <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
-          <ng-container *ngIf="countryOverview.publications?.oa !=null">{{countryOverview.publications.oa | number}}</ng-container>
           <ng-container *ngIf="countryOverview.publications===null || countryOverview.publications.oa===null">--</ng-container>
+          <ng-container *ngIf="countryOverview.publications?.oa !=null">
+
+            <span style="display: inline-block; float: right; padding-right: 10px;">
+              <span style="float:left; padding-right: 5px;">{{countryOverview.publications.oa | number}} </span>
+              <ng-container *ngIf="countryOverview.publications?.percentage !=null">
+                <div class="progress">
+                  <div [ngStyle]="{'width': countryOverview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
+                </div>
+              </ng-container>
+            </span>
+
+          </ng-container>
         </td>
         <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
-          <ng-container *ngIf="countryOverview.datasets?.oa !=null">{{countryOverview.datasets.oa | number}}</ng-container>
           <ng-container *ngIf="countryOverview.datasets===null || countryOverview.datasets.oa===null">--</ng-container>
+          <ng-container *ngIf="countryOverview.datasets?.oa !=null">
+
+            <span style="display: inline-block; float: right; padding-right: 10px;">
+              <span style="float:left; padding-right: 5px;">{{countryOverview.datasets.oa | number}} </span>
+              <ng-container *ngIf="countryOverview.datasets?.percentage !=null">
+                <div class="progress">
+                  <div [ngStyle]="{'width': countryOverview.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
+                </div>
+              </ng-container>
+            </span>
+
+          </ng-container>
         </td>
         <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
-          <ng-container *ngIf="countryOverview.software?.oa !=null">{{countryOverview.software.oa | number}}</ng-container>
           <ng-container *ngIf="countryOverview.software===null || countryOverview.software.oa===null">--</ng-container>
+          <ng-container *ngIf="countryOverview.software?.oa !=null">
+
+            <span style="display: inline-block; float: right; padding-right: 10px;">
+              <span style="float:left; padding-right: 5px;">{{countryOverview.software.oa | number}} </span>
+              <ng-container *ngIf="countryOverview.software?.percentage !=null">
+                <div class="progress">
+                  <div [ngStyle]="{'width': countryOverview.software.percentage+'%'}" class="progress-bar progress-bar-software animate-progress-bar"></div>
+                </div>
+              </ng-container>
+            </span>
+
+          </ng-container>
         </td>
         <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
-          <ng-container *ngIf="countryOverview.otherProducts?.oa !=null">{{countryOverview.otherProducts.oa | number}}</ng-container>
           <ng-container *ngIf="countryOverview.otherProducts===null || countryOverview.otherProducts.oa===null">--</ng-container>
+          <ng-container *ngIf="countryOverview.otherProducts?.oa !=null">
+
+            <span style="display: inline-block; float: right; padding-right: 10px;">
+              <span style="float:left; padding-right: 5px;">{{countryOverview.otherProducts.oa | number}} </span>
+              <ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">
+                <div class="progress">
+                  <div [ngStyle]="{'width': countryOverview.otherProducts.percentage+'%'}" class="progress-bar progress-bar-otherProducts animate-progress-bar"></div>
+                </div>
+              </ng-container>
+            </span>
+
+          </ng-container>
         </td>
       </tr>
     </ng-container>

src/assets/css/os-observatory-custom.css

@@ -467,3 +467,142 @@ a.backToOriginalInfoBox, a.backToOriginalInfoBox:hover, a.backToOriginalInfoBox:
 /*.contentSectionContainer .md-card-content {*/
   /*text-align: center;*/
 /*}*/
+
+
+/*progress {*/
+  /*border: none;*/
+  /*width: 400px;*/
+  /*height: 60px;*/
+  /*background: crimson;*/
+/*}*/
+
+/*progress {*/
+  /*color: lightblue;*/
+/*}*/
+
+/*progress::-webkit-progress-value {*/
+  /*background: lightblue;*/
+/*}*/
+
+/*progress::-moz-progress-bar {*/
+  /*background: lightcolor;*/
+/*}*/
+
+/*progress::-webkit-progress-value {*/
+  /*background: red;*/
+/*}*/
+
+/*progress::-webkit-progress-bar {*/
+  /*background: blue;*/
+/*}*/
+
+/*progress[value]::-webkit-progress-bar {*/
+  /*background-color: #eee;*/
+  /*border-radius: 2px;*/
+  /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;*/
+/*}*/
+
+
+/*progress[value] {*/
+  /*-webkit-appearance: none;*/
+  /*appearance: none;*/
+/*}*/
+
+/*progress[value]::-webkit-progress-bar {*/
+  /*background-color: 'green';*/
+/*}*/
+
+/*progress[value] {*/
+  /*-moz-appearance: none;*/
+  /*appearance: none;*/
+  /*border: none;                !* Firefox also renders a border *!*/
+/*}*/
+
+/*progress[value]::-moz-appearance {*/
+  /*background-color: 'green';*/
+/*}*/
+
+.progress {
+  height: 20px;
+  /*margin-bottom: 20px;*/
+  overflow: hidden;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+}
+
+.progress {
+  height: 12px;
+  background-color: #e9ecee;
+  background-image: none;
+  box-shadow: none;
+  filter: none;
+}
+
+.progress {
+  /*margin-bottom: 10px;*/
+}
+
+.progress {
+  margin-top: 3px;
+  width: 85px;
+  display: inline-block;
+}
+
+.progress-bar {
+
+  float: left;
+  width: 0;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #fff;
+  text-align: center;
+  background-color: #337ab7;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
+  -webkit-transition: width .6s ease;
+  -o-transition: width .6s ease;
+  transition: width .6s ease;
+
+}
+
+.progress-bar {
+
+  box-shadow: none;
+  border-radius: 3px;
+  background-color: #0090D9;
+  background-image: none;
+  -webkit-transition: all 1000ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  transition: all 1000ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  -webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  -moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  -ms-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  -o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  float: left;
+  filter: none;
+
+}
+
+.progress-bar-publications {
+  background-color: #19647E;
+  background-image: none;
+}
+
+.progress-bar-datasets {
+  background-color: #019A85;
+  background-image: none;
+}
+
+.progress-bar-software {
+  background-color: #F88306;
+  background-image: none;
+}
+
+.progress-bar-otherProducts {
+  background-color: #987CD6;
+  background-image: none;
+}