Revision 58912
Added by Stefania Martziou almost 4 years ago
| data-view.component.html | ||
|---|---|---|
| 17 | 17 |
</ul> |
| 18 | 18 |
|
| 19 | 19 |
<div class="goToDetailedViewLink uk-text-right"> |
| 20 |
<a class="" [routerLink]="['/overview/' + 'europe']">Detailed View of OA in Europe<i class="fas fa-arrow-right uk-margin-small-left"></i></a>
|
|
| 20 |
<a class="" [routerLink]="['/overview', 'europe']">Detailed View of OA in Europe<i class="fas fa-arrow-right uk-margin-small-left"></i></a>
|
|
| 21 | 21 |
</div> |
| 22 | 22 |
|
| 23 | 23 |
<hr> |
| ... | ... | |
| 58 | 58 |
</li> |
| 59 | 59 |
<li aria-hidden="true" style="animation-duration: 200ms;" class=""> |
| 60 | 60 |
<div id="graphs"> |
| 61 |
<div *ngIf="type=='overview'" class="uk-grid uk-margin-top"> |
|
| 62 |
<div class="uk-width-1-2"> |
|
| 63 |
<iframe *ngIf="oaJournalsURL" width="100%" height="440" [src]="oaJournalsURL"></iframe> |
|
| 61 |
|
|
| 62 |
<div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4@m uk-child-width-1-4@l uk-child-width-1-2@s uk-grid-match"> |
|
| 63 |
|
|
| 64 |
<div> |
|
| 65 |
<div class="md-card"> |
|
| 66 |
<div class="md-card-content"> |
|
| 67 |
<svg *ngIf="europeOverviewData.publications?.percentage" viewBox="0 0 36 36" class="circular-chart publications"> |
|
| 68 |
<path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path> |
|
| 69 |
<path class="circle" attr.stroke-dasharray="{{europeOverviewData.publications.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
|
|
| 70 |
<text x="18" y="20.35" class="percentage">{{europeOverviewData.publications.percentage | number : '1.0-1'}}%</text>
|
|
| 71 |
</svg> |
|
| 72 |
<div class="uk-margin-small-top uk-text-center">OA publications</div> |
|
| 73 |
</div> |
|
| 74 |
</div> |
|
| 64 | 75 |
</div> |
| 65 |
<div class="uk-width-1-2"> |
|
| 66 |
<iframe *ngIf="oaRepositoriesURL" width="100%" height="440" [src]="oaRepositoriesURL"></iframe> |
|
| 76 |
|
|
| 77 |
<div> |
|
| 78 |
<div class="md-card"> |
|
| 79 |
<div class="md-card-content"> |
|
| 80 |
<svg *ngIf="europeOverviewData.datasets?.percentage" viewBox="0 0 36 36" class="circular-chart datasets"> |
|
| 81 |
<path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path> |
|
| 82 |
<path class="circle" attr.stroke-dasharray="{{europeOverviewData.datasets.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
|
|
| 83 |
<text x="18" y="20.35" class="percentage">{{europeOverviewData.datasets.percentage | number : '1.0-1'}}%</text>
|
|
| 84 |
</svg> |
|
| 85 |
<div class="uk-margin-small-top uk-text-center">OA datasets</div> |
|
| 86 |
</div> |
|
| 87 |
</div> |
|
| 67 | 88 |
</div> |
| 68 |
</div> |
|
| 69 |
<div class="uk-grid uk-margin-top"> |
|
| 70 |
<div class="uk-width-1-2"> |
|
| 71 |
<iframe *ngIf="oaPublicationsURL" width="100%" height="440" [src]="oaPublicationsURL"></iframe> |
|
| 89 |
|
|
| 90 |
<div> |
|
| 91 |
<div class="md-card"> |
|
| 92 |
<div class="md-card-content"> |
|
| 93 |
<svg *ngIf="europeOverviewData.software?.percentage" viewBox="0 0 36 36" class="circular-chart software"> |
|
| 94 |
<path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path> |
|
| 95 |
<path class="circle" attr.stroke-dasharray="{{europeOverviewData.software.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
|
|
| 96 |
<text x="18" y="20.35" class="percentage">{{europeOverviewData.software.percentage | number : '1.0-1'}}%</text>
|
|
| 97 |
</svg> |
|
| 98 |
<div class="uk-margin-small-top uk-text-center">OS software</div> |
|
| 99 |
</div> |
|
| 100 |
</div> |
|
| 72 | 101 |
</div> |
| 73 |
<div class="uk-width-1-2"> |
|
| 74 |
<iframe *ngIf="oaDatasetsURL" width="100%" height="440" [src]="oaDatasetsURL"></iframe> |
|
| 102 |
|
|
| 103 |
<div> |
|
| 104 |
<div class="md-card"> |
|
| 105 |
<div class="md-card-content"> |
|
| 106 |
<svg *ngIf="europeOverviewData.other?.percentage" viewBox="0 0 36 36" class="circular-chart other"> |
|
| 107 |
<path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path> |
|
| 108 |
<path class="circle" attr.stroke-dasharray="{{europeOverviewData.other.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
|
|
| 109 |
<text x="18" y="20.35" class="percentage">{{europeOverviewData.other.percentage | number : '1.0-1'}}%</text>
|
|
| 110 |
</svg> |
|
| 111 |
<div class="uk-margin-small-top uk-text-center">OA other research products</div> |
|
| 112 |
</div> |
|
| 113 |
</div> |
|
| 75 | 114 |
</div> |
| 115 |
|
|
| 76 | 116 |
</div> |
| 77 |
<div class="uk-grid uk-margin-top"> |
|
| 78 |
<div class="uk-width-1-2"> |
|
| 79 |
<iframe *ngIf="oaSoftwareURL" width="100%" height="440" [src]="oaSoftwareURL"></iframe> |
|
| 117 |
|
|
| 118 |
<div class="uk-grid uk-grid-row-medium uk-margin-small-top uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s"> |
|
| 119 |
|
|
| 120 |
<div class="uk-grid-margin"> |
|
| 121 |
<div class="md-card chartCard"> |
|
| 122 |
<div class="md-card-content"> |
|
| 123 |
<iframe *ngIf="oaNoaPublicationsTimelineURL" width="100%" height="350" [src]="oaNoaPublicationsTimelineURL"></iframe> |
|
| 124 |
</div> |
|
| 125 |
</div> |
|
| 80 | 126 |
</div> |
| 81 |
<div class="uk-width-1-2"> |
|
| 82 |
<iframe *ngIf="oaOtherURL" width="100%" height="440" [src]="oaOtherURL"></iframe> |
|
| 127 |
|
|
| 128 |
<div class="uk-grid-margin"> |
|
| 129 |
<div class="md-card chartCard"> |
|
| 130 |
<div class="md-card-content"> |
|
| 131 |
<iframe *ngIf="oaNoaDatasetsTimelineURL" width="100%" height="350" [src]="oaNoaDatasetsTimelineURL"></iframe> |
|
| 132 |
</div> |
|
| 133 |
</div> |
|
| 83 | 134 |
</div> |
| 135 |
|
|
| 136 |
<div class="uk-grid-margin"> |
|
| 137 |
<div class="md-card chartCard"> |
|
| 138 |
<div class="md-card-content"> |
|
| 139 |
<iframe *ngIf="oaNoaSoftwareTimelineURL" width="100%" height="350" [src]="oaNoaSoftwareTimelineURL"></iframe> |
|
| 140 |
</div> |
|
| 141 |
</div> |
|
| 142 |
</div> |
|
| 143 |
|
|
| 144 |
<div class="uk-grid-margin"> |
|
| 145 |
<div class="md-card chartCard"> |
|
| 146 |
<div class="md-card-content"> |
|
| 147 |
<iframe *ngIf="oaNoaOtherTimelineURL" width="100%" height="350" [src]="oaNoaOtherTimelineURL"></iframe> |
|
| 148 |
</div> |
|
| 149 |
</div> |
|
| 150 |
</div> |
|
| 151 |
|
|
| 152 |
|
|
| 84 | 153 |
</div> |
| 154 |
|
|
| 155 |
<div class="uk-grid uk-grid-row-medium uk-margin-small-top uk-child-width-1-1@m uk-child-width-1-1@l uk-child-width-1-1@s"> |
|
| 156 |
<div class="uk-grid-margin"> |
|
| 157 |
<div class="md-card chartCard"> |
|
| 158 |
<div class="md-card-content"> |
|
| 159 |
<!--<app-treemap-highchart></app-treemap-highchart>--> |
|
| 160 |
<app-treemap-highchart *ngIf="fundersResultsData" [chartTitle]="'Funders for all research results'" |
|
| 161 |
[chartData]="fundersResultsData" [color]="'#072AE6'"></app-treemap-highchart> |
|
| 162 |
</div> |
|
| 163 |
</div> |
|
| 164 |
</div> |
|
| 165 |
</div> |
|
| 166 |
|
|
| 85 | 167 |
</div> |
| 86 | 168 |
</li> |
| 87 | 169 |
</ul> |
Also available in: Unified diff
Working on the new version of the oso - started incorporating charts and created a treemap highcharts component