Project

General

Profile

« Previous | Next » 

Revision 58922

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

View differences:

continent-overview.component.html
568 568

  
569 569
              <ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >
570 570
                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
571

  
571 572
                  <div>
572
                    Publications....
573

  
574
                    <div class="pidIndicator">
575
                      <h3>PID</h3>
576
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
577

  
578
                        <div class="uk-grid-margin">
579
                          <div class="md-card chartCard">
580
                            <div class="md-card-content">
581
                              <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
582
                            </div>
583
                          </div>
584
                        </div>
585

  
586
                        <div class="uk-grid-margin">
587
                          <div class="md-card chartCard">
588
                            <div class="md-card-content">
589
                              <iframe *ngIf="publicationsWithPIDByCountryChartURL" width="100%" height="550" [src]="publicationsWithPIDByCountryChartURL"></iframe>
590
                            </div>
591
                          </div>
592
                        </div>
593

  
594
                        <div class="uk-grid-margin">
595
                          <div class="md-card chartCard">
596
                            <div class="md-card-content">
597
                              <iframe *ngIf="publicationsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
598
                            </div>
599
                          </div>
600
                        </div>
601

  
602
                        <div class="uk-grid-margin">
603
                          <div class="md-card chartCard">
604
                            <div class="md-card-content">
605
                              <iframe *ngIf="publicationsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
606
                            </div>
607
                          </div>
608
                        </div>
609

  
610
                        <div class="uk-grid-margin">
611
                          <div class="md-card chartCard">
612
                            <div class="md-card-content">
613
                              <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData" [chartTitle]="'OA Publications with PID by funder'"
614
                                                     [chartData]="publicationsWithPIDByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
615
                            </div>
616
                          </div>
617
                        </div>
618

  
619
                      </div>
620
                    </div>
621

  
622
                    <div class="licenceIndicator uk-margin-medium-top">
623
                      <h3>Licence</h3>
624
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
625

  
626
                        <div class="uk-grid-margin">
627
                          <div class="md-card chartCard">
628
                            <div class="md-card-content">
629
                              <iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
630
                            </div>
631
                          </div>
632
                        </div>
633

  
634
                        <div class="uk-grid-margin">
635
                          <div class="md-card chartCard">
636
                            <div class="md-card-content">
637
                              <iframe *ngIf="publicationsWithLicenceByCountryChartURL" width="100%" height="550" [src]="publicationsWithLicenceByCountryChartURL"></iframe>
638
                            </div>
639
                          </div>
640
                        </div>
641

  
642
                        <div class="uk-grid-margin">
643
                          <div class="md-card chartCard">
644
                            <div class="md-card-content">
645
                              <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
646
                            </div>
647
                          </div>
648
                        </div>
649

  
650
                        <div class="uk-grid-margin">
651
                          <div class="md-card chartCard">
652
                            <div class="md-card-content">
653
                              <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
654
                            </div>
655
                          </div>
656
                        </div>
657

  
658
                        <div class="uk-grid-margin">
659
                          <div class="md-card chartCard">
660
                            <div class="md-card-content">
661
                              <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData" [chartTitle]="'OA Publications with licence by funder'"
662
                                                     [chartData]="publicationsWithLicenceByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
663
                            </div>
664
                          </div>
665
                        </div>
666

  
667
                      </div>
668
                    </div>
669

  
670
                    <div class="goldIndicator uk-margin-medium-top">
671
                      <h3>Gold</h3>
672
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
673

  
674
                        <div class="uk-grid-margin">
675
                          <div class="md-card chartCard">
676
                            <div class="md-card-content">
677
                              <iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
678
                            </div>
679
                          </div>
680
                        </div>
681

  
682
                        <div class="uk-grid-margin">
683
                          <div class="md-card chartCard">
684
                            <div class="md-card-content">
685
                              <iframe *ngIf="goldPublicationsByCountryChartURL" width="100%" height="550" [src]="goldPublicationsByCountryChartURL"></iframe>
686
                            </div>
687
                          </div>
688
                        </div>
689

  
690
                        <div class="uk-grid-margin">
691
                          <div class="md-card chartCard">
692
                            <div class="md-card-content">
693
                              <iframe *ngIf="goldPublicationsByDatasourceChartURL" width="100%" height="550" [src]="goldPublicationsByDatasourceChartURL"></iframe>
694
                            </div>
695
                          </div>
696
                        </div>
697

  
698
                        <div class="uk-grid-margin">
699
                          <div class="md-card chartCard">
700
                            <div class="md-card-content">
701
                              <iframe *ngIf="goldPublicationsByOrganizationChartURL" width="100%" height="550" [src]="goldPublicationsByOrganizationChartURL"></iframe>
702
                            </div>
703
                          </div>
704
                        </div>
705

  
706
                        <div class="uk-grid-margin">
707
                          <div class="md-card chartCard">
708
                            <div class="md-card-content">
709
                              <app-treemap-highchart *ngIf="goldPublicationsByFunderData" [chartTitle]="'Gold OA publications by funder'"
710
                                                     [chartData]="goldPublicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
711
                            </div>
712
                          </div>
713
                        </div>
714

  
715
                      </div>
716
                    </div>
717

  
718
                    <div class="greenIndicator uk-margin-medium-top">
719
                      <h3>Green</h3>
720
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
721

  
722
                        <div class="uk-grid-margin">
723
                          <div class="md-card chartCard">
724
                            <div class="md-card-content">
725
                              <iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
726
                            </div>
727
                          </div>
728
                        </div>
729

  
730
                        <div class="uk-grid-margin">
731
                          <div class="md-card chartCard">
732
                            <div class="md-card-content">
733
                              <iframe *ngIf="greenPublicationsByCountryChartURL" width="100%" height="550" [src]="greenPublicationsByCountryChartURL"></iframe>
734
                            </div>
735
                          </div>
736
                        </div>
737

  
738
                        <div class="uk-grid-margin">
739
                          <div class="md-card chartCard">
740
                            <div class="md-card-content">
741
                              <iframe *ngIf="greenPublicationsByDatasourceChartURL" width="100%" height="550" [src]="greenPublicationsByDatasourceChartURL"></iframe>
742
                            </div>
743
                          </div>
744
                        </div>
745

  
746
                        <div class="uk-grid-margin">
747
                          <div class="md-card chartCard">
748
                            <div class="md-card-content">
749
                              <iframe *ngIf="greenPublicationsByOrganizationChartURL" width="100%" height="550" [src]="greenPublicationsByOrganizationChartURL"></iframe>
750
                            </div>
751
                          </div>
752
                        </div>
753

  
754
                        <div class="uk-grid-margin">
755
                          <div class="md-card chartCard">
756
                            <div class="md-card-content">
757
                              <app-treemap-highchart *ngIf="greenPublicationsByFunderData" [chartTitle]="'Green OA publications by funder'"
758
                                                     [chartData]="greenPublicationsByFunderData" [color]="'#F181AE'"></app-treemap-highchart>
759
                            </div>
760
                          </div>
761
                        </div>
762

  
763
                      </div>
764
                    </div>
765

  
766
                    <div class="greenVsGoldIndicator uk-margin-medium-top">
767
                      <h3>Green vs. Gold</h3>
768
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
769

  
770
                        <div class="uk-grid-margin">
771
                          <div class="md-card chartCard">
772
                            <div class="md-card-content">
773
                              <iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
774
                            </div>
775
                          </div>
776
                        </div>
777

  
778
                      </div>
779
                    </div>
780

  
573 781
                  </div>
782

  
574 783
                </li>
575 784
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
785

  
576 786
                  <div>
577
                    Datasets...
787

  
788
                    <div class="pidIndicator">
789
                      <h3>PID</h3>
790
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
791

  
792
                        <div class="uk-grid-margin">
793
                          <div class="md-card chartCard">
794
                            <div class="md-card-content">
795
                              <iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>
796
                            </div>
797
                          </div>
798
                        </div>
799

  
800
                        <div class="uk-grid-margin">
801
                          <div class="md-card chartCard">
802
                            <div class="md-card-content">
803
                              <iframe *ngIf="datasetsWithPIDByCountryChartURL" width="100%" height="550" [src]="datasetsWithPIDByCountryChartURL"></iframe>
804
                            </div>
805
                          </div>
806
                        </div>
807

  
808
                        <div class="uk-grid-margin">
809
                          <div class="md-card chartCard">
810
                            <div class="md-card-content">
811
                              <iframe *ngIf="datasetsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
812
                            </div>
813
                          </div>
814
                        </div>
815

  
816
                        <div class="uk-grid-margin">
817
                          <div class="md-card chartCard">
818
                            <div class="md-card-content">
819
                              <iframe *ngIf="datasetsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
820
                            </div>
821
                          </div>
822
                        </div>
823

  
824
                        <div class="uk-grid-margin">
825
                          <div class="md-card chartCard">
826
                            <div class="md-card-content">
827
                              <app-treemap-highchart *ngIf="datasetsWithPIDByFunderData" [chartTitle]="'OA Datasets with PID by funder'"
828
                                                     [chartData]="datasetsWithPIDByFunderData" [color]="'#A98BD4'"></app-treemap-highchart>
829
                            </div>
830
                          </div>
831
                        </div>
832

  
833
                      </div>
834
                    </div>
835

  
836
                    <div class="licenceIndicator uk-margin-medium-top">
837
                      <h3>Licence</h3>
838
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
839

  
840
                        <div class="uk-grid-margin">
841
                          <div class="md-card chartCard">
842
                            <div class="md-card-content">
843
                              <iframe *ngIf="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></iframe>
844
                            </div>
845
                          </div>
846
                        </div>
847

  
848
                        <div class="uk-grid-margin">
849
                          <div class="md-card chartCard">
850
                            <div class="md-card-content">
851
                              <iframe *ngIf="datasetsWithLicenceByCountryChartURL" width="100%" height="550" [src]="datasetsWithLicenceByCountryChartURL"></iframe>
852
                            </div>
853
                          </div>
854
                        </div>
855

  
856
                        <div class="uk-grid-margin">
857
                          <div class="md-card chartCard">
858
                            <div class="md-card-content">
859
                              <iframe *ngIf="datasetsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
860
                            </div>
861
                          </div>
862
                        </div>
863

  
864
                        <div class="uk-grid-margin">
865
                          <div class="md-card chartCard">
866
                            <div class="md-card-content">
867
                              <iframe *ngIf="datasetsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>
868
                            </div>
869
                          </div>
870
                        </div>
871

  
872
                        <div class="uk-grid-margin">
873
                          <div class="md-card chartCard">
874
                            <div class="md-card-content">
875
                              <app-treemap-highchart *ngIf="datasetsWithLicenceByFunderData" [chartTitle]="'OA Datasets with licence by funder'"
876
                                                     [chartData]="datasetsWithLicenceByFunderData" [color]="'#A98BD4'"></app-treemap-highchart>
877
                            </div>
878
                          </div>
879
                        </div>
880

  
881
                      </div>
882
                    </div>
883

  
578 884
                  </div>
885

  
579 886
                </li>
580 887
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
888

  
581 889
                  <div>
582
                    Software...
890

  
891
                    <div class="pidIndicator">
892
                      <h3>PID</h3>
893
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
894

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

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

  
911
                        <div class="uk-grid-margin">
912
                          <div class="md-card chartCard">
913
                            <div class="md-card-content">
914
                              <iframe *ngIf="softwareWithPIDByDatasourceChartURL" width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
915
                            </div>
916
                          </div>
917
                        </div>
918

  
919
                        <div class="uk-grid-margin">
920
                          <div class="md-card chartCard">
921
                            <div class="md-card-content">
922
                              <iframe *ngIf="softwareWithPIDByOrganizationChartURL" width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
923
                            </div>
924
                          </div>
925
                        </div>
926

  
927
                        <div class="uk-grid-margin">
928
                          <div class="md-card chartCard">
929
                            <div class="md-card-content">
930
                              <app-treemap-highchart *ngIf="softwareWithPIDByFunderData" [chartTitle]="'OS Software with PID by funder'"
931
                                                     [chartData]="softwareWithPIDByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
932
                            </div>
933
                          </div>
934
                        </div>
935

  
936
                      </div>
937
                    </div>
938

  
939
                    <div class="licenceIndicator uk-margin-medium-top">
940
                      <h3>Licence</h3>
941
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
942

  
943
                        <div class="uk-grid-margin">
944
                          <div class="md-card chartCard">
945
                            <div class="md-card-content">
946
                              <iframe *ngIf="softwareWithLicenceTimeline" width="100%" height="550" [src]="softwareWithLicenceTimeline"></iframe>
947
                            </div>
948
                          </div>
949
                        </div>
950

  
951
                        <div class="uk-grid-margin">
952
                          <div class="md-card chartCard">
953
                            <div class="md-card-content">
954
                              <iframe *ngIf="softwareWithLicenceByCountryChartURL" width="100%" height="550" [src]="softwareWithLicenceByCountryChartURL"></iframe>
955
                            </div>
956
                          </div>
957
                        </div>
958

  
959
                        <div class="uk-grid-margin">
960
                          <div class="md-card chartCard">
961
                            <div class="md-card-content">
962
                              <iframe *ngIf="softwareWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
963
                            </div>
964
                          </div>
965
                        </div>
966

  
967
                        <div class="uk-grid-margin">
968
                          <div class="md-card chartCard">
969
                            <div class="md-card-content">
970
                              <iframe *ngIf="softwareWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
971
                            </div>
972
                          </div>
973
                        </div>
974

  
975
                        <div class="uk-grid-margin">
976
                          <div class="md-card chartCard">
977
                            <div class="md-card-content">
978
                              <app-treemap-highchart *ngIf="softwareWithLicenceByFunderData" [chartTitle]="'OS Software with licence by funder'"
979
                                                     [chartData]="softwareWithLicenceByFunderData" [color]="'#C2155A'"></app-treemap-highchart>
980
                            </div>
981
                          </div>
982
                        </div>
983

  
984
                      </div>
985
                    </div>
986

  
583 987
                  </div>
988

  
584 989
                </li>
585 990
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
991

  
586 992
                  <div>
587
                    Other...
993

  
994
                    <div class="pidIndicator">
995
                      <h3>PID</h3>
996
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
997

  
998
                        <div class="uk-grid-margin">
999
                          <div class="md-card chartCard">
1000
                            <div class="md-card-content">
1001
                              <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>
1002
                            </div>
1003
                          </div>
1004
                        </div>
1005

  
1006
                        <div class="uk-grid-margin">
1007
                          <div class="md-card chartCard">
1008
                            <div class="md-card-content">
1009
                              <iframe *ngIf="otherWithPIDByCountryChartURL" width="100%" height="550" [src]="otherWithPIDByCountryChartURL"></iframe>
1010
                            </div>
1011
                          </div>
1012
                        </div>
1013

  
1014
                        <div class="uk-grid-margin">
1015
                          <div class="md-card chartCard">
1016
                            <div class="md-card-content">
1017
                              <iframe *ngIf="otherWithPIDByDatasourceChartURL" width="100%" height="550" [src]="otherWithPIDByDatasourceChartURL"></iframe>
1018
                            </div>
1019
                          </div>
1020
                        </div>
1021

  
1022
                        <div class="uk-grid-margin">
1023
                          <div class="md-card chartCard">
1024
                            <div class="md-card-content">
1025
                              <iframe *ngIf="otherWithPIDByOrganizationChartURL" width="100%" height="550" [src]="otherWithPIDByOrganizationChartURL"></iframe>
1026
                            </div>
1027
                          </div>
1028
                        </div>
1029

  
1030
                        <div class="uk-grid-margin">
1031
                          <div class="md-card chartCard">
1032
                            <div class="md-card-content">
1033
                              <app-treemap-highchart *ngIf="otherWithPIDByFunderData" [chartTitle]="'OA Other research products with PID by funder'"
1034
                                                     [chartData]="otherWithPIDByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
1035
                            </div>
1036
                          </div>
1037
                        </div>
1038

  
1039
                      </div>
1040
                    </div>
1041

  
1042
                    <div class="licenceIndicator uk-margin-medium-top">
1043
                      <h3>Licence</h3>
1044
                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
1045

  
1046
                        <div class="uk-grid-margin">
1047
                          <div class="md-card chartCard">
1048
                            <div class="md-card-content">
1049
                              <iframe *ngIf="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></iframe>
1050
                            </div>
1051
                          </div>
1052
                        </div>
1053

  
1054
                        <div class="uk-grid-margin">
1055
                          <div class="md-card chartCard">
1056
                            <div class="md-card-content">
1057
                              <iframe *ngIf="otherWithLicenceByCountryChartURL" width="100%" height="550" [src]="otherWithLicenceByCountryChartURL"></iframe>
1058
                            </div>
1059
                          </div>
1060
                        </div>
1061

  
1062
                        <div class="uk-grid-margin">
1063
                          <div class="md-card chartCard">
1064
                            <div class="md-card-content">
1065
                              <iframe *ngIf="otherWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
1066
                            </div>
1067
                          </div>
1068
                        </div>
1069

  
1070
                        <div class="uk-grid-margin">
1071
                          <div class="md-card chartCard">
1072
                            <div class="md-card-content">
1073
                              <iframe *ngIf="otherWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
1074
                            </div>
1075
                          </div>
1076
                        </div>
1077

  
1078
                        <div class="uk-grid-margin">
1079
                          <div class="md-card chartCard">
1080
                            <div class="md-card-content">
1081
                              <app-treemap-highchart *ngIf="otherWithLicenceByFunderData" [chartTitle]="'OA Other research products with licence by funder'"
1082
                                                     [chartData]="otherWithLicenceByFunderData" [color]="'#00CCCC'"></app-treemap-highchart>
1083
                            </div>
1084
                          </div>
1085
                        </div>
1086

  
1087
                      </div>
1088
                    </div>
1089

  
588 1090
                  </div>
1091

  
589 1092
                </li>
590 1093
              </ul>
591 1094

  

Also available in: Unified diff