197 lines
12 KiB
HTML
197 lines
12 KiB
HTML
<ng-container *ngIf="stakeholder; else nocommunity">
|
|
<div *ngIf="activeSubCategory" class="uk-section-small">
|
|
|
|
<div uk-slider class="uk-slider">
|
|
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
|
|
<!--<li class="uk-width-1-1 uk-padding">
|
|
<div [class.uk-margin-large-bottom]="activeSubCategory.numbers.length > 0 ">
|
|
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
|
|
<div *ngIf="!isMobile" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom" uk-grid
|
|
uk-height-match="target: .uk-card">
|
|
<h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
|
|
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
|
|
<div *ngIf="hasPermission(indicator.visibility)"
|
|
[ngClass]="getNumberClassBySize(indicator.width)">
|
|
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
|
|
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
|
|
<div *ngIf="!indicator.overlay">
|
|
<div
|
|
class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
|
|
<div class="number uk-text-small uk-text-bold">
|
|
<span *ngIf="numberResults.get(i + '-' + j)"
|
|
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
|
|
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
|
|
</div>
|
|
<div *ngIf="indicator.description || indicator.additionalDescription"
|
|
class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m">
|
|
<a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note"
|
|
(click)="changeOverlay($event, indicator, 'description')">
|
|
<span class="uk-flex uk-flex-middle">
|
|
<icon name="analytics" type="outlined" [flex]="true"></icon>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="indicator.overlay && (indicator.description || indicator.additionalDescription)"
|
|
click-outside-or-esc class="uk-overflow-auto"
|
|
(clickOutside)="closeOverlay($event, indicator)">
|
|
<div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
|
|
<a class="uk-display-inline-block uk-button uk-button-link"
|
|
(click)="changeOverlay($event, indicator, false)">
|
|
<span class="uk-flex uk-flex-middle">
|
|
<icon name="close" type="outlined" [flex]="true"></icon>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="uk-margin-small-top uk-margin-right">
|
|
<p *ngIf="indicator.description">
|
|
{{indicator.description}}
|
|
</p>
|
|
<p *ngIf="indicator.additionalDescription">
|
|
{{indicator.additionalDescription}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
<div *ngIf="isMobile">
|
|
<h6 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h6>
|
|
<div class="uk-card uk-card-default uk-padding-small number-card">
|
|
<div class="uk-grid uk-grid-small uk-child-width-1-1" uk-grid>
|
|
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
|
|
<div *ngIf="hasPermission(indicator.visibility)"
|
|
[ngClass]="getNumberClassBySize(indicator.width)">
|
|
<div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
|
|
<div *ngIf="!indicator.overlay">
|
|
<div
|
|
class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
|
|
<div class="number uk-text-small uk-text-bold">
|
|
<span *ngIf="numberResults.get(i + '-' + j)"
|
|
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
|
|
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</li>-->
|
|
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
|
|
<li *ngIf="chart && showSection(chart)" class="uk-width-1-1 uk-padding">
|
|
|
|
<div class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid uk-height-match="target: .uk-card">
|
|
|
|
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
|
|
<div *ngIf="showIndicator(indicator)"
|
|
[ngClass]="getChartClassBySize(indicator.width)">
|
|
<div class="uk-card uk-card-default uk-position-relative"
|
|
[class.semiFiltered]="getActiveIndicatorPath(indicator).filtersApplied < countSelectedFilters()">
|
|
<div class="uk-card-body uk-text-center uk-margin-small-bottom">
|
|
<h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
|
|
{{indicator.name + " "}}
|
|
</h6>
|
|
<!--<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
|
|
<button *ngFor="let indicatorPath of indicator.indicatorPaths;"
|
|
class="uk-button"
|
|
(click)="setActiveChart(i, j, indicatorPath.type)"
|
|
[class.uk-button-secondary]="getActiveIndicatorPath(indicator).url === indicatorPath.url">
|
|
{{indicatorPath.type}}
|
|
</button>
|
|
</div>-->
|
|
<iframe [class.uk-blend-multiply]="!isFullscreen"
|
|
*ngIf=" !properties.disableFrameLoad && getActiveIndicatorPath(indicator).source !== 'image'"
|
|
[src]="getActiveIndicatorPath(indicator).safeResourceUrl"
|
|
class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
|
|
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
|
|
<div *ngIf="properties.disableFrameLoad && getActiveIndicatorPath(indicator).source !== 'image'">
|
|
<img class="uk-width-1-1 uk-blend-multiply"
|
|
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
|
src="assets/chart-placeholder.png">
|
|
</div>
|
|
<img *ngIf="getActiveIndicatorPath(indicator).source === 'image'"
|
|
[src]="getActiveIndicatorPath(indicator).safeResourceUrl"
|
|
class="uk-width-1-1 uk-blend-multiply"
|
|
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
|
|
</div>
|
|
<div class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
|
|
<a *ngIf="indicator.description || indicator.additionalDescription"
|
|
class="uk-display-inline-block uk-button uk-button-link uk-margin-right"
|
|
(click)="changeOverlay($event, indicator, 'description')">
|
|
<span class="uk-flex uk-flex-middle">
|
|
<icon name="analytics" type="outlined" [flex]="true"></icon>
|
|
<span class="uk-margin-xsmall-left">Note</span>
|
|
</span>
|
|
</a>
|
|
<a class="uk-display-inline-block uk-button uk-button-link"
|
|
(click)="changeOverlay($event, indicator, 'embed')">
|
|
<span class="uk-flex uk-flex-middle">
|
|
<icon name="code" type="outlined" [flex]="true"></icon>
|
|
<span class="uk-margin-xsmall-left">Embed</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div *ngIf="indicator.overlay" class="indicator-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
|
|
<div *ngIf="indicator.overlay == 'description'" class="inner" click-outside-or-esc
|
|
(clickOutside)="closeOverlay($event, indicator)">
|
|
<div class="uk-padding-small">
|
|
<div class="uk-flex uk-flex-right">
|
|
<button class="uk-close uk-icon" (click)="changeOverlay($event, indicator, false)">
|
|
<icon name="close" ratio="1"></icon>
|
|
</button>
|
|
</div>
|
|
<div class="uk-padding-small uk-padding-remove-horizontal">
|
|
<p *ngIf="indicator.description">
|
|
{{indicator.description}}
|
|
</p>
|
|
<p *ngIf="indicator.additionalDescription">
|
|
{{indicator.additionalDescription}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="indicator.overlay === 'embed'" class="inner" click-outside-or-esc
|
|
(clickOutside)="closeOverlay($event, indicator)">
|
|
<div class="uk-padding-small">
|
|
<div class="uk-flex uk-flex-right">
|
|
<button class="uk-close uk-icon" (click)="changeOverlay($event, indicator, false)">
|
|
<icon name="close" ratio="1"></icon>
|
|
</button>
|
|
</div>
|
|
<div class="clipboard-wrapper uk-margin-top uk-margin-bottom">
|
|
<pre id="embed_content_id" class="uk-padding-small"><code><iframe width="500" height="500" <br> src="{{chartsActiveType.get(i + '-' + j).safeResourceUrl.changingThisBreaksApplicationSecurity}}" <br> allowfullscreen="true" mozallowfullscreen="true"><br></iframe></code></pre>
|
|
</div>
|
|
<div class="uk-flex uk-flex-right">
|
|
<a class="uk-link-reset copy clipboard_btn" data-clipboard-target="#embed_content_id" title="Copy code">
|
|
<icon [flex]="true" name="content_copy"></icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="printGap uk-hidden"></div>
|
|
</ng-template>
|
|
</div>
|
|
</li>
|
|
</ng-container>
|
|
</ul>
|
|
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin-medium-top"></ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</ng-container>
|
|
<ng-template #nocommunity>
|
|
<div class="uk-text-muted uk-text-center">
|
|
No community info available
|
|
</div>
|
|
</ng-template>
|