finished first version of statistics monitor page layout

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@51207 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/statistics/statistics.component.html

@@ -7,17 +7,16 @@
         <div class="uk-grid">
             <ul class="uk-tab uk-tab-left uk-width-1-5 uk-margin-top" data-uk-tab="{connect:'#tabs'}">
                 <li (click)="charts.timelines.publications.load = true"><a href="#">Publications</a></li>
-                <li (click)="charts.timelines.datasets.load = true"><a href="#" disabled>Research Data</a></li>
+                <li (click)="charts.timelines.datasets.load = true"><a href="#">Research Data</a></li>
                 <li (click)="charts.timelines.software.load = true"><a href="#">Software</a></li>
             </ul>
 
             <ul id="tabs" class="uk-switcher uk-margin uk-width-4-5" style="min-height:450px; padding-left:40px;">
                 <li>
-                    <div>
                     <div class="uk-text-uppercase uk-text-bold uk-heading-divider">
-                            <h2>Publications statistics</h2>
+                        <h2>Research data statistics</h2>
                         <div *ngIf="statistics.publications.total" class="uk-text-small">
-                                <span>{{statistics.publications.total}} publications from {{statistics.total_projects}} projects.</span><br>
+                            <span>{{statistics.publications.total}} datasets from {{statistics.total_projects}} projects.</span><br>
                             <span>{{statistics.publications.open_access}} are OA</span>
                             <span *ngIf="statistics.publications.restricted && statistics.publications.restricted > 0">,
                                 {{statistics.publications.restricted}} are restricted
@@ -27,30 +26,12 @@
                             </span>
                         </div>
                     </div>
-                    </div>
                     <div *ngIf="statistics.publications.total">
-                        <ul class="uk-tab uk-margin-top" data-uk-tab="{connect: '#pubTimelines'">
-                            <li (click)="charts.timelines.publications.load = true"
-                                (toggle)="toggleLoadChart('timelines','publications')">
-                                <a href="#">Timeline</a></li>
-                            <li (click)="charts['graphs']['pubGraph']['load'] = true"
-                                (close)="charts.graphs.pubGraph.load = false"><a href="#">Graph</a></li>
-                        </ul>
-                        <ul id="pudTimelines" class="uk-switcher uk-margin">
-                            <li>
                         <div *ngIf="charts.timelines.publications.load">
                             <i-frame  [url]=charts.timelines.publications.url width="1000" height="450"></i-frame>
                         </div>
-                            </li>
-                            <li>
                         <div *ngIf="charts.graphs.pubGraph.load">
-                                    <i-frame  [url]=charts.graphs.pubGraph.url width="1000" height="450"></i-frame>
+                            <i-frame  [url]=charts.graphs.pubGraph.url width="1000" height="600"></i-frame>
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                    <div *ngIf="statistics.publications.total == 0" class="uk-alert uk-alert-primary">
-                        No publications available
                         </div>
                         <hr>
                         <div>
@@ -80,12 +61,15 @@
                                 </li>
                             </ul>
                         </div>
+                    </div>
+                    <div *ngIf="statistics.publications.total == 0" class="uk-alert uk-alert-primary">
+                        No research data available
+                    </div>
                 </li>
                 <li>
-                    <div>
                     <div class="uk-text-uppercase uk-text-bold uk-heading-divider">
                         <h2>Research data statistics</h2>
-                            <div class="uk-text-small">
+                        <div *ngIf="statistics.datasets.total" class="uk-text-small">
                             <span>{{statistics.datasets.total}} datasets from {{statistics.total_projects}} projects.</span><br>
                             <span>{{statistics.datasets.open_access}} are OA</span>
                             <span *ngIf="statistics.datasets.restricted && statistics.datasets.restricted > 0">,
@@ -96,12 +80,12 @@
                             </span>
                         </div>
                     </div>
-                    </div>
+                    <div *ngIf="statistics.datasets.total">
-                    <div *ngIf="charts.timelines.datasets.load && statistics.datasets.total > 0">
+                        <div *ngIf="charts.timelines.datasets.load">
                             <i-frame  [url]=charts.timelines.datasets.url width="1000" height="450"></i-frame>
                         </div>
-                    <div *ngIf="statistics.datasets.total == 0" class="uk-alert uk-alert-primary">
+                        <div *ngIf="charts.graphs.dataGraph.load">
-                        No research data available
+                            <i-frame  [url]=charts.graphs.dataGraph.url width="1000" height="450"></i-frame>
                         </div>
                         <hr>
                         <div>
@@ -131,13 +115,16 @@
                                 </li>
                             </ul>
                         </div>
+                    </div>
+                    <div *ngIf="statistics.datasets.total == 0" class="uk-alert uk-alert-primary">
+                        No research data available
+                    </div>
                 </li>
                 <li>
-                    <div>
                     <div class="uk-text-uppercase uk-text-bold uk-heading-divider">
                         <h2>Software statistics</h2>
-                            <div class="uk-text-small">
+                        <div *ngIf="statistics.software.total" class="uk-text-small">
-                                <span>{{statistics.software.total}} publications from {{statistics.total_projects}} projects.</span><br>
+                            <span>{{statistics.software.total}} datasets from {{statistics.total_projects}} projects.</span><br>
                             <span>{{statistics.software.open_access}} are OA</span>
                             <span *ngIf="statistics.software.restricted && statistics.software.restricted > 0">,
                                 {{statistics.software.restricted}} are restricted
@@ -147,12 +134,12 @@
                             </span>
                         </div>
                     </div>
-                    </div>
+                    <div *ngIf="statistics.software.total">
-                    <div *ngIf="charts.timelines.software.load && statistics.software.total > 0">
+                        <div *ngIf="charts.timelines.software.load">
                             <i-frame  [url]=charts.timelines.software.url width="1000" height="450"></i-frame>
                         </div>
-                    <div *ngIf="statistics.software.total == 0" class="uk-alert uk-alert-primary">
+                        <div *ngIf="charts.graphs.softwareGraph.load">
-                        No software available
+                            <i-frame  [url]=charts.graphs.softwareGraph.url width="1000" height="450"></i-frame>
                         </div>
                         <hr>
                         <div>
@@ -182,6 +169,10 @@
                                 </li>
                             </ul>
                         </div>
+                    </div>
+                    <div *ngIf="statistics.software.total == 0" class="uk-alert uk-alert-primary">
+                        No software available
+                    </div>
                 </li>
             </ul>
         </div>

src/app/statistics/statistics.component.ts

@@ -95,14 +95,14 @@ export class StatisticsComponent {
      this.charts = {
        graphs: {
            pubGraph:
-           {url: this.properties.statisticsFrameAPIURL +  'chart.php?com=query&data={"query":"comOAPubs","comId":"'+ this.communityId + '","table":"result","fields":[{"fld":"number","agg":"count","type":"pie","yaxis":1,"c":false}],"xaxis":{"name":"bestlicense","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"order":"d","yaxisheaders":[""],"fieldsheaders":[""],"in":[],"filters":[],"having":[],"incfilters":[],"inchaving":[],"title":"Publications by access mode","subtitle":"","xaxistitle":"","nulls":true}&w=50%&h=83%',
+           {url: this.properties.statisticsFrameAPIURL +  'chart.php?com=query&data={"query":"comOAPubs","comId":"'+ this.communityId + '","table":"result","fields":[{"fld":"number","agg":"count","type":"pie","yaxis":1,"c":false}],"xaxis":{"name":"bestlicense","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"order":"d","yaxisheaders":[""],"fieldsheaders":[""],"in":[],"filters":[],"having":[],"incfilters":[],"inchaving":[],"title":"Publications by access mode","subtitle":"","xaxistitle":"","nulls":true}&w=500&amph=600',
-           load:false},
+           load:true},
            dataGraph:
            {url: this.properties.statisticsFrameAPIURL + 'chart.php?com=query&data={"query":"comOAData","comId":"'+ this.communityId +'","table":"result","fields":[{"fld":"number","agg":"count","type":"pie","yaxis":1,"c":false}],"xaxis":{"name":"bestlicense","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"order":"d","yaxisheaders":[""],"fieldsheaders":[""],"in":[],"filters":[],"having":[],"incfilters":[],"inchaving":[],"title":"Datasets by access mode","subtitle":"","xaxistitle":"","nulls":true}&w=500&amph=600',
-           load: false},
+           load: true},
            softwareGraph:
            {url: this.properties.statisticsFrameAPIURL + 'chart.php?com=query&data={"query":"comOASoft","comId":"'+ this.communityId +'","table":"result","fields":[{"fld":"number","agg":"count","type":"pie","yaxis":1,"c":false}],"xaxis":{"name":"bestlicense","agg":"avg"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":"-","s":"-","l":"-","ft":"-","wt":"-"},"order":"d","yaxisheaders":[""],"fieldsheaders":[""],"in":[],"filters":[],"having":[],"incfilters":[],"inchaving":[],"title":"Software by access mode","subtitle":"","xaxistitle":"","nulls":true}&w=500&amph=600',
-           load:false}
+           load:true}
        },
        timelines: {
          publications: