Project

General

Profile

« Previous | Next » 

Revision 58912

Working on the new version of the oso - started incorporating charts and created a treemap highcharts component

View differences:

continent-overview.component.html
6 6
      <!--LAPTOP & PAD LANDSCAPE-->
7 7
      <div class="uk-visible@m">
8 8
        <ul class="uk-breadcrumb">
9
          <li><a [routerLink]="['/home']">Home</a></li>
9
          <li><a routerLink="/home">Home</a></li>
10 10
          <li><span>{{continentName | titlecase}}</span></li>
11 11
        </ul>
12 12

  
......
312 312

  
313 313
        <!--LAPTOP & PAD LANDSCAPE-->
314 314
        <ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
315
          <li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>
316
          <li aria-expanded="false"><a href="#">Open Science</a></li>
315
          <li class="uk-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
316
          <li aria-expanded="false"><a (click)="changeTopView('openScience')">Open Science</a></li>
317 317
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
318 318
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
319 319
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
......
322 322

  
323 323
        <!--MOBILE & PAD PORTRAIT-->
324 324
        <ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
325
          <li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>
326
          <li aria-expanded="false"><a href="#">Open Science</a></li>
325
          <li class="uk-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
326
          <li aria-expanded="false"><a (click)="changeTopView('openScience')">Open Science</a></li>
327 327
          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
328 328
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
329 329
          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
......
337 337
            <div class="uk-margin tabContent">
338 338

  
339 339
              <!--<div class="uk-grid uk-child-width-1-4 uk-grid-match">-->
340
                <!--<div class="md-card">-->
341
                  <!--<div class="md-card-content">-->
342
                    <!--22.888-->
340

  
341
                <!--<div>-->
342
                  <!--<div class="md-card">-->
343
                    <!--<div class="md-card-content">-->
344

  
345
                      <!--<svg viewBox="0 0 36 36" class="circular-chart publications">-->
346
                        <!--<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>-->
347
                        <!--<path class="circle" stroke-dasharray="30, 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>-->
348
                        <!--<text x="18" y="20.35" class="percentage">30%</text>-->
349
                      <!--</svg>-->
350
                      <!--<div class="uk-margin-small-top uk-text-center">OA publications</div>-->
351
                    <!--</div>-->
343 352
                  <!--</div>-->
344 353
                <!--</div>-->
345
                <!--<div class="md-card">-->
346
                  <!--<div class="md-card-content">-->
347
                    <!--30% open access-->
354

  
355
                <!--<div>-->
356
                  <!--<div class="md-card">-->
357
                    <!--<div class="md-card-content">-->
358
                      <!--30% open access-->
359
                    <!--</div>-->
348 360
                  <!--</div>-->
349 361
                <!--</div>-->
350
                <!--<div class="md-card">-->
351
                  <!--<div class="md-card-content">-->
352
                    <!--18.165 closed access-->
362

  
363
                <!--<div>-->
364
                  <!--<div class="md-card">-->
365
                    <!--<div class="md-card-content">-->
366
                      <!--18.165 closed access-->
367
                    <!--</div>-->
353 368
                  <!--</div>-->
354 369
                <!--</div>-->
355
                <!--<div class="md-card">-->
356
                  <!--<div class="md-card-content">-->
357
                    <!--22.888-->
370

  
371
                <!--<div>-->
372
                  <!--<div class="md-card">-->
373
                    <!--<div class="md-card-content">-->
374
                      <!--22.888-->
375
                    <!--</div>-->
358 376
                  <!--</div>-->
359 377
                <!--</div>-->
378

  
360 379
              <!--</div>-->
361 380

  
362 381
              <div class="uk-grid uk-child-width-1-1">
......
364 383
                <div>
365 384
                  <div class="md-card chartCard">
366 385
                    <div class="md-card-content">
367
                      <iframe width="100%" height="550" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Publications%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22select%22%3A%5B%7B%22field%22%3A%22publication%22%2C%22aggregate%22%3A%22count%22%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22aggregate%22%3Anull%7D%5D%2C%22filters%22%3A%5B%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22publication.organization.country.continent%22%2C%22type%22%3A%22%3D%22%2C%22values%22%3A%5B%22Europe%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%2C%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220041%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220043%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220044%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%22Unknown%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%5D%2C%22entity%22%3A%22publication%22%2C%22profile%22%3A%22OpenAIRE%20All-inclusive%22%2C%22limit%22%3A%2230%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Publications%20by%20type%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22publications%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22type%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Afalse%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
386
                      <iframe width="100%" height="550" [src]="publicationsByTypeChartURL"></iframe>
368 387
                    </div>
369 388
                  </div>
370 389
                </div>
371 390

  
372 391
              </div>
373 392

  
374
              <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">
393
              <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-3@l uk-child-width-1-1@s">
375 394

  
376 395
                <div class="uk-grid-margin">
377 396
                  <div class="md-card chartCard">
378 397
                    <div class="md-card-content">
379
                      <iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Publications%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.publications%22%7D%7D%2C%7B%22name%22%3A%22OA%20Publications%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.publications.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Publications%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22publications%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
398
                      <iframe width="100%" height="550" [src]="publicationsByCountryChartURL"></iframe>
380 399
                    </div>
381 400
                  </div>
382 401
                </div>
......
384 403
                <div class="uk-grid-margin">
385 404
                  <div class="md-card chartCard">
386 405
                    <div class="md-card-content">
387
                      <iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Datasets%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.datasets%22%7D%7D%2C%7B%22name%22%3A%22OA%20Datasets%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.datasets.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Datasets%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22datasets%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
406
                      <iframe width="100%" height="550" [src]="publicationsByDatasourceChartURL"></iframe>
388 407
                    </div>
389 408
                  </div>
390 409
                </div>
......
392 411
                <div class="uk-grid-margin">
393 412
                  <div class="md-card chartCard">
394 413
                    <div class="md-card-content">
395
                      <iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Software%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.software%22%7D%7D%2C%7B%22name%22%3A%22OA%20Software%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.software.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Software%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22software%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
414
                      <iframe width="100%" height="550" [src]="publicationsByOrganizationChartURL"></iframe>
396 415
                    </div>
397 416
                  </div>
398 417
                </div>
......
400 419
                <div class="uk-grid-margin">
401 420
                  <div class="md-card chartCard">
402 421
                    <div class="md-card-content">
403
                      <iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Other%20Research%20Products%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.other%22%7D%7D%2C%7B%22name%22%3A%22OA%20Other%20Research%20Products%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.other.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Other%20research%20products%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22other%20research%20products%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
422
                      <iframe width="100%" height="550" [src]="datasetsByCountryChartURL"></iframe>
404 423
                    </div>
405 424
                  </div>
406 425
                </div>
407 426

  
427
                <div class="uk-grid-margin">
428
                  <div class="md-card chartCard">
429
                    <div class="md-card-content">
430
                      <iframe width="100%" height="550" [src]="datasetsByDatasourceChartURL"></iframe>
431
                    </div>
432
                  </div>
433
                </div>
408 434

  
435
                <div class="uk-grid-margin">
436
                  <div class="md-card chartCard">
437
                    <div class="md-card-content">
438
                      <iframe width="100%" height="550" [src]="datasetsByOrganizationChartURL"></iframe>
439
                    </div>
440
                  </div>
441
                </div>
442

  
443
                <div class="uk-grid-margin">
444
                  <div class="md-card chartCard">
445
                    <div class="md-card-content">
446
                      <iframe width="100%" height="550" [src]="softwareByCountryChartURL"></iframe>
447
                    </div>
448
                  </div>
449
                </div>
450

  
451
                <div class="uk-grid-margin">
452
                  <div class="md-card chartCard">
453
                    <div class="md-card-content">
454
                      <iframe width="100%" height="550" [src]="softwareByDatasourceChartURL"></iframe>
455
                    </div>
456
                  </div>
457
                </div>
458

  
459
                <div class="uk-grid-margin">
460
                  <div class="md-card chartCard">
461
                    <div class="md-card-content">
462
                      <iframe width="100%" height="550" [src]="softwareByOrganizationChartURL"></iframe>
463
                    </div>
464
                  </div>
465
                </div>
466

  
467
                <div class="uk-grid-margin">
468
                  <div class="md-card chartCard">
469
                    <div class="md-card-content">
470
                      <iframe width="100%" height="550" [src]="otherByCountryChartURL"></iframe>
471
                    </div>
472
                  </div>
473
                </div>
474

  
475
                <div class="uk-grid-margin">
476
                  <div class="md-card chartCard">
477
                    <div class="md-card-content">
478
                      <iframe width="100%" height="550" [src]="otherByDatasourceChartURL"></iframe>
479
                    </div>
480
                  </div>
481
                </div>
482

  
483
                <div class="uk-grid-margin">
484
                  <div class="md-card chartCard">
485
                    <div class="md-card-content">
486
                      <iframe width="100%" height="550" [src]="otherByOrganizationChartURL"></iframe>
487
                    </div>
488
                  </div>
489
                </div>
490

  
409 491
              </div>
410 492

  
411 493

  
412 494

  
495

  
413 496
              <!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->
414 497
            </div>
415 498
          </li>
499

  
416 500
          <!--OPEN SCIENCE tab-->
417 501
          <li aria-hidden="true" style="animation-duration: 200ms;">
418 502
            <div class="uk-margin tabContent">
419
              <app-data-view></app-data-view>
420
              <!--<app-countries-table [isPercentage]="false" [type]="'openScience'" [countries]="overviewData.countries"></app-countries-table>-->
503

  
504

  
505
              <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
506
                <li aria-expanded="true" class="uk-active">
507
                  <a class="publicationsSubnav" (click)="changeView('publications')">
508
                    <img src="../../../assets/img/icons/publications-icon.svg" width="15">
509
                  </a>
510
                </li>
511
                <li aria-expanded="false" class="">
512
                  <a class="datasetsSubnav" (click)="changeView('datasets')">
513
                    <img src="../../../assets/img/icons/datasets-icon.svg" width="15">
514
                  </a>
515
                </li>
516
                <li aria-expanded="false" class="">
517
                  <a class="softwareSubnav" (click)="changeView('software')">
518
                    <img src="../../../assets/img/icons/software-icon.svg" width="15">
519
                  </a>
520
                </li>
521
                <li aria-expanded="false" class="">
522
                  <a class="otherSubnav" (click)="changeView('other')">
523
                    <img src="../../../assets/img/icons/other-icon.svg" width="15">
524
                  </a>
525
                </li>
526
              </ul>
527

  
528
              <hr class="uk-visible@m">
529

  
530
              <ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >
531
                <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
532
                  <div>
533
                    Publications....
534
                  </div>
535
                </li>
536
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
537
                  <div>
538
                    Datasets...
539
                  </div>
540
                </li>
541
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
542
                  <div>
543
                    Software...
544
                  </div>
545
                </li>
546
                <li aria-hidden="true" style="animation-duration: 200ms;" class="">
547
                  <div>
548
                    Other...
549
                  </div>
550
                </li>
551
              </ul>
552

  
553

  
421 554
            </div>
422 555
          </li>
556

  
423 557
          <li aria-hidden="true">
424 558
            <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
425 559
            </div>
426 560
          </li>
561

  
427 562
          <li aria-hidden="true">
428 563
            <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
429 564
            </div>
430 565
          </li>
566

  
431 567
          <li aria-hidden="true">
432 568
            <div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
433 569
            </div>

Also available in: Unified diff