Project

General

Profile

« Previous | Next » 

Revision 58939

Finished the charts for the open science tab of the country page

View differences:

country-page.component.html
211 211

  
212 212
                  </div>
213 213

  
214
                  <!--<div class="">-->
215
                  <!--<div class="md-card">-->
216
                  <!--<div class="md-card-content">-->
217
                  <!--<div class="uk-margin-top">-->
218
                  <!--<div class="uk-float-right uk-margin-small-right">-->
219
                  <!--<img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">-->
220
                  <!--</div>-->
221
                  <!--<h3 class="uk-margin-remove">-->
222
                  <!--<span *ngIf="!countryData || !countryData.journals || !countryData.journals.oa" class="number">&#45;&#45;</span>-->
223
                  <!--<span *ngIf="countryData?.journals?.oa" class="number">{{countryData.journals.oa | number}}</span>-->
224
                  <!--&lt;!&ndash;<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>&ndash;&gt;-->
225
                  <!--&lt;!&ndash;<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">&#45;&#45;</span>&ndash;&gt;-->
226
                  <!--</h3>-->
227
                  <!--</div>-->
228
                  <!--<div class="uk-margin-top">-->
229
                  <!--<span class=""><i>OA journals</i></span>-->
230
                  <!--</div>-->
231
                  <!--<div *ngIf="countryData.journals?.percentage" class="uk-margin-top">-->
232
                  <!--<span class="number">{{countryData.journals.percentage | number :'1.0-1'}}%</span> Certified-->
233
                  <!--<div class="progress uk-margin-small-top">-->
234
                  <!--<div [ngStyle]="{'width': countryData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>-->
235
                  <!--</div>-->
236
                  <!--</div>-->
237
                  <!--</div>-->
238
                  <!--</div>-->
239
                  <!--</div>-->
240 214

  
241 215
                  <div class="">
242 216

  
......
781 755

  
782 756
              <ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >
783 757
                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
758

  
784 759
                  <div>
785
                    Publications....
760

  
761
                    <div class="pidIndicator">
762
                      <h3>PID</h3>
763
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
764

  
765
                        <div class="uk-grid-margin">
766
                          <div class="md-card chartCard">
767
                            <div class="md-card-content">
768
                              <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
769
                            </div>
770
                          </div>
771
                        </div>
772

  
773
                        <div class="uk-grid-margin">
774
                          <div class="md-card chartCard">
775
                            <div class="md-card-content">
776
                              <iframe *ngIf="publicationsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
777
                            </div>
778
                          </div>
779
                        </div>
780

  
781
                        <div class="uk-grid-margin">
782
                          <div class="md-card chartCard">
783
                            <div class="md-card-content">
784
                              <iframe *ngIf="publicationsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
785
                            </div>
786
                          </div>
787
                        </div>
788

  
789
                        <div class="uk-grid-margin">
790
                          <div class="md-card chartCard">
791
                            <div class="md-card-content">
792
                              <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData" [chartTitle]="'OA Publications with PID by funder'"
793
                                                     [chartData]="publicationsWithPIDByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
794
                            </div>
795
                          </div>
796
                        </div>
797

  
798
                      </div>
799
                    </div>
800

  
801
                    <div class="licenceIndicator uk-margin-medium-top">
802
                      <h3>Licence</h3>
803
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
804

  
805
                        <div class="uk-grid-margin">
806
                          <div class="md-card chartCard">
807
                            <div class="md-card-content">
808
                              <iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
809
                            </div>
810
                          </div>
811
                        </div>
812

  
813
                        <div class="uk-grid-margin">
814
                          <div class="md-card chartCard">
815
                            <div class="md-card-content">
816
                              <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
817
                            </div>
818
                          </div>
819
                        </div>
820

  
821
                        <div class="uk-grid-margin">
822
                          <div class="md-card chartCard">
823
                            <div class="md-card-content">
824
                              <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
825
                            </div>
826
                          </div>
827
                        </div>
828

  
829
                        <div class="uk-grid-margin">
830
                          <div class="md-card chartCard">
831
                            <div class="md-card-content">
832
                              <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData" [chartTitle]="'OA Publications with licence by funder'"
833
                                                     [chartData]="publicationsWithLicenceByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
834
                            </div>
835
                          </div>
836
                        </div>
837

  
838
                      </div>
839
                    </div>
840

  
841
                    <div class="goldIndicator uk-margin-medium-top">
842
                      <h3>Gold</h3>
843
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
844

  
845
                        <div class="uk-grid-margin">
846
                          <div class="md-card chartCard">
847
                            <div class="md-card-content">
848
                              <iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
849
                            </div>
850
                          </div>
851
                        </div>
852

  
853
                        <div class="uk-grid-margin">
854
                          <div class="md-card chartCard">
855
                            <div class="md-card-content">
856
                              <iframe *ngIf="goldPublicationsByDatasourceChartURL" width="100%" height="550" [src]="goldPublicationsByDatasourceChartURL"></iframe>
857
                            </div>
858
                          </div>
859
                        </div>
860

  
861
                        <div class="uk-grid-margin">
862
                          <div class="md-card chartCard">
863
                            <div class="md-card-content">
864
                              <iframe *ngIf="goldPublicationsByOrganizationChartURL" width="100%" height="550" [src]="goldPublicationsByOrganizationChartURL"></iframe>
865
                            </div>
866
                          </div>
867
                        </div>
868

  
869
                        <div class="uk-grid-margin">
870
                          <div class="md-card chartCard">
871
                            <div class="md-card-content">
872
                              <app-treemap-highchart *ngIf="goldPublicationsByFunderData" [chartTitle]="'Gold OA publications by funder'"
873
                                                     [chartData]="goldPublicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
874
                            </div>
875
                          </div>
876
                        </div>
877

  
878
                      </div>
879
                    </div>
880

  
881
                    <div class="greenIndicator uk-margin-medium-top">
882
                      <h3>Green</h3>
883
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
884

  
885
                        <div class="uk-grid-margin">
886
                          <div class="md-card chartCard">
887
                            <div class="md-card-content">
888
                              <iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
889
                            </div>
890
                          </div>
891
                        </div>
892

  
893
                        <div class="uk-grid-margin">
894
                          <div class="md-card chartCard">
895
                            <div class="md-card-content">
896
                              <iframe *ngIf="greenPublicationsByDatasourceChartURL" width="100%" height="550" [src]="greenPublicationsByDatasourceChartURL"></iframe>
897
                            </div>
898
                          </div>
899
                        </div>
900

  
901
                        <div class="uk-grid-margin">
902
                          <div class="md-card chartCard">
903
                            <div class="md-card-content">
904
                              <iframe *ngIf="greenPublicationsByOrganizationChartURL" width="100%" height="550" [src]="greenPublicationsByOrganizationChartURL"></iframe>
905
                            </div>
906
                          </div>
907
                        </div>
908

  
909
                        <div class="uk-grid-margin">
910
                          <div class="md-card chartCard">
911
                            <div class="md-card-content">
912
                              <app-treemap-highchart *ngIf="greenPublicationsByFunderData" [chartTitle]="'Green OA publications by funder'"
913
                                                     [chartData]="greenPublicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
914
                            </div>
915
                          </div>
916
                        </div>
917

  
918
                      </div>
919
                    </div>
920

  
921
                    <div class="greenVsGoldIndicator uk-margin-medium-top">
922
                      <h3>Green vs. Gold</h3>
923
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
924

  
925
                        <div class="uk-grid-margin">
926
                          <div class="md-card chartCard">
927
                            <div class="md-card-content">
928
                              <iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
929
                            </div>
930
                          </div>
931
                        </div>
932

  
933
                      </div>
934
                    </div>
935

  
786 936
                  </div>
937

  
787 938
                </li>
788 939
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
940

  
789 941
                  <div>
790
                    Datasets...
942

  
943
                    <div class="pidIndicator">
944
                      <h3>PID</h3>
945
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
946

  
947
                        <div class="uk-grid-margin">
948
                          <div class="md-card chartCard">
949
                            <div class="md-card-content">
950
                              <iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>
951
                            </div>
952
                          </div>
953
                        </div>
954

  
955
                        <div class="uk-grid-margin">
956
                          <div class="md-card chartCard">
957
                            <div class="md-card-content">
958
                              <iframe *ngIf="datasetsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
959
                            </div>
960
                          </div>
961
                        </div>
962

  
963
                        <div class="uk-grid-margin">
964
                          <div class="md-card chartCard">
965
                            <div class="md-card-content">
966
                              <iframe *ngIf="datasetsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
967
                            </div>
968
                          </div>
969
                        </div>
970

  
971
                        <div class="uk-grid-margin">
972
                          <div class="md-card chartCard">
973
                            <div class="md-card-content">
974
                              <app-treemap-highchart *ngIf="datasetsWithPIDByFunderData" [chartTitle]="'OA Datasets with PID by funder'"
975
                                                     [chartData]="datasetsWithPIDByFunderData" [color]="'#A98BD4'"></app-treemap-highchart>
976
                            </div>
977
                          </div>
978
                        </div>
979

  
980
                      </div>
981
                    </div>
982

  
983
                    <div class="licenceIndicator uk-margin-medium-top">
984
                      <h3>Licence</h3>
985
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
986

  
987
                        <div class="uk-grid-margin">
988
                          <div class="md-card chartCard">
989
                            <div class="md-card-content">
990
                              <iframe *ngIf="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></iframe>
991
                            </div>
992
                          </div>
993
                        </div>
994

  
995
                        <div class="uk-grid-margin">
996
                          <div class="md-card chartCard">
997
                            <div class="md-card-content">
998
                              <iframe *ngIf="datasetsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
999
                            </div>
1000
                          </div>
1001
                        </div>
1002

  
1003
                        <div class="uk-grid-margin">
1004
                          <div class="md-card chartCard">
1005
                            <div class="md-card-content">
1006
                              <iframe *ngIf="datasetsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>
1007
                            </div>
1008
                          </div>
1009
                        </div>
1010

  
1011
                        <div class="uk-grid-margin">
1012
                          <div class="md-card chartCard">
1013
                            <div class="md-card-content">
1014
                              <app-treemap-highchart *ngIf="datasetsWithLicenceByFunderData" [chartTitle]="'OA Datasets with licence by funder'"
1015
                                                     [chartData]="datasetsWithLicenceByFunderData" [color]="'#A98BD4'"></app-treemap-highchart>
1016
                            </div>
1017
                          </div>
1018
                        </div>
1019

  
1020
                      </div>
1021
                    </div>
1022

  
791 1023
                  </div>
1024

  
792 1025
                </li>
793 1026
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1027

  
794 1028
                  <div>
795
                    Software...
1029

  
1030
                    <div class="pidIndicator">
1031
                      <h3>PID</h3>
1032
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1033

  
1034
                        <div class="uk-grid-margin">
1035
                          <div class="md-card chartCard">
1036
                            <div class="md-card-content">
1037
                              <iframe *ngIf="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></iframe>
1038
                            </div>
1039
                          </div>
1040
                        </div>
1041

  
1042
                        <div class="uk-grid-margin">
1043
                          <div class="md-card chartCard">
1044
                            <div class="md-card-content">
1045
                              <iframe *ngIf="softwareWithPIDByDatasourceChartURL" width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
1046
                            </div>
1047
                          </div>
1048
                        </div>
1049

  
1050
                        <div class="uk-grid-margin">
1051
                          <div class="md-card chartCard">
1052
                            <div class="md-card-content">
1053
                              <iframe *ngIf="softwareWithPIDByOrganizationChartURL" width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
1054
                            </div>
1055
                          </div>
1056
                        </div>
1057

  
1058
                        <div class="uk-grid-margin">
1059
                          <div class="md-card chartCard">
1060
                            <div class="md-card-content">
1061
                              <app-treemap-highchart *ngIf="softwareWithPIDByFunderData" [chartTitle]="'OS Software with PID by funder'"
1062
                                                     [chartData]="softwareWithPIDByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
1063
                            </div>
1064
                          </div>
1065
                        </div>
1066

  
1067
                      </div>
1068
                    </div>
1069

  
1070
                    <div class="licenceIndicator uk-margin-medium-top">
1071
                      <h3>Licence</h3>
1072
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1073

  
1074
                        <div class="uk-grid-margin">
1075
                          <div class="md-card chartCard">
1076
                            <div class="md-card-content">
1077
                              <iframe *ngIf="softwareWithLicenceTimeline" width="100%" height="550" [src]="softwareWithLicenceTimeline"></iframe>
1078
                            </div>
1079
                          </div>
1080
                        </div>
1081

  
1082
                        <div class="uk-grid-margin">
1083
                          <div class="md-card chartCard">
1084
                            <div class="md-card-content">
1085
                              <iframe *ngIf="softwareWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
1086
                            </div>
1087
                          </div>
1088
                        </div>
1089

  
1090
                        <div class="uk-grid-margin">
1091
                          <div class="md-card chartCard">
1092
                            <div class="md-card-content">
1093
                              <iframe *ngIf="softwareWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
1094
                            </div>
1095
                          </div>
1096
                        </div>
1097

  
1098
                        <div class="uk-grid-margin">
1099
                          <div class="md-card chartCard">
1100
                            <div class="md-card-content">
1101
                              <app-treemap-highchart *ngIf="softwareWithLicenceByFunderData" [chartTitle]="'OS Software with licence by funder'"
1102
                                                     [chartData]="softwareWithLicenceByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
1103
                            </div>
1104
                          </div>
1105
                        </div>
1106

  
1107
                      </div>
1108
                    </div>
1109

  
796 1110
                  </div>
1111

  
797 1112
                </li>
798 1113
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
1114

  
799 1115
                  <div>
800
                    Other...
1116

  
1117
                    <div class="pidIndicator">
1118
                      <h3>PID</h3>
1119
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1120

  
1121
                        <div class="uk-grid-margin">
1122
                          <div class="md-card chartCard">
1123
                            <div class="md-card-content">
1124
                              <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>
1125
                            </div>
1126
                          </div>
1127
                        </div>
1128

  
1129
                        <div class="uk-grid-margin">
1130
                          <div class="md-card chartCard">
1131
                            <div class="md-card-content">
1132
                              <iframe *ngIf="otherWithPIDByDatasourceChartURL" width="100%" height="550" [src]="otherWithPIDByDatasourceChartURL"></iframe>
1133
                            </div>
1134
                          </div>
1135
                        </div>
1136

  
1137
                        <div class="uk-grid-margin">
1138
                          <div class="md-card chartCard">
1139
                            <div class="md-card-content">
1140
                              <iframe *ngIf="otherWithPIDByOrganizationChartURL" width="100%" height="550" [src]="otherWithPIDByOrganizationChartURL"></iframe>
1141
                            </div>
1142
                          </div>
1143
                        </div>
1144

  
1145
                        <div class="uk-grid-margin">
1146
                          <div class="md-card chartCard">
1147
                            <div class="md-card-content">
1148
                              <app-treemap-highchart *ngIf="otherWithPIDByFunderData" [chartTitle]="'OA Other research products with PID by funder'"
1149
                                                     [chartData]="otherWithPIDByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
1150
                            </div>
1151
                          </div>
1152
                        </div>
1153

  
1154
                      </div>
1155
                    </div>
1156

  
1157
                    <div class="licenceIndicator uk-margin-medium-top">
1158
                      <h3>Licence</h3>
1159
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1160

  
1161
                        <div class="uk-grid-margin">
1162
                          <div class="md-card chartCard">
1163
                            <div class="md-card-content">
1164
                              <iframe *ngIf="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></iframe>
1165
                            </div>
1166
                          </div>
1167
                        </div>
1168

  
1169
                        <div class="uk-grid-margin">
1170
                          <div class="md-card chartCard">
1171
                            <div class="md-card-content">
1172
                              <iframe *ngIf="otherWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
1173
                            </div>
1174
                          </div>
1175
                        </div>
1176

  
1177
                        <div class="uk-grid-margin">
1178
                          <div class="md-card chartCard">
1179
                            <div class="md-card-content">
1180
                              <iframe *ngIf="otherWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
1181
                            </div>
1182
                          </div>
1183
                        </div>
1184

  
1185
                        <div class="uk-grid-margin">
1186
                          <div class="md-card chartCard">
1187
                            <div class="md-card-content">
1188
                              <app-treemap-highchart *ngIf="otherWithLicenceByFunderData" [chartTitle]="'OA Other research products with licence by funder'"
1189
                                                     [chartData]="otherWithLicenceByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
1190
                            </div>
1191
                          </div>
1192
                        </div>
1193

  
1194
                      </div>
1195
                    </div>
1196

  
801 1197
                  </div>
1198

  
802 1199
                </li>
803 1200
              </ul>
804 1201

  

Also available in: Unified diff