|
|
@ -4,7 +4,7 @@
|
|
|
|
<div class="uk-slider-container" style="height: 40px">
|
|
|
|
<div class="uk-slider-container" style="height: 40px">
|
|
|
|
<ul #list class="uk-slider-items uk-grid uk-grid-small uk-margin-small-right uk-flex-nowrap">
|
|
|
|
<ul #list class="uk-slider-items uk-grid uk-grid-small uk-margin-small-right uk-flex-nowrap">
|
|
|
|
<li *ngIf="periodFilter.selectedFromAndToValues.length > 0">
|
|
|
|
<li *ngIf="periodFilter.selectedFromAndToValues.length > 0">
|
|
|
|
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
|
|
|
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle">
|
|
|
|
<span
|
|
|
|
<span
|
|
|
|
class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
|
|
|
|
class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
|
|
|
|
<button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon"
|
|
|
|
<button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon"
|
|
|
@ -18,7 +18,7 @@
|
|
|
|
<ng-container *ngFor="let value of filter.values; let i = index;">
|
|
|
|
<ng-container *ngFor="let value of filter.values; let i = index;">
|
|
|
|
<ng-container *ngIf="value.selected">
|
|
|
|
<ng-container *ngIf="value.selected">
|
|
|
|
<li>
|
|
|
|
<li>
|
|
|
|
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
|
|
|
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle">
|
|
|
|
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{value.name}}</span>
|
|
|
|
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{value.name}}</span>
|
|
|
|
<button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)"
|
|
|
|
<button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)"
|
|
|
|
class="uk-close uk-icon" [disabled]="loading">
|
|
|
|
class="uk-close uk-icon" [disabled]="loading">
|
|
|
@ -104,12 +104,11 @@
|
|
|
|
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
|
|
|
|
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
|
|
|
|
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
|
|
|
|
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
|
|
|
|
<div *ngIf="!indicator.overlay">
|
|
|
|
<div *ngIf="!indicator.overlay">
|
|
|
|
<div
|
|
|
|
<div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</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">
|
|
|
|
<div class="number uk-text-small uk-text-bold">
|
|
|
|
<span *ngIf="numberResults.get(i + '-' + j)"
|
|
|
|
<span *ngIf="numberResults.get(i + '-' + j + '-' + 0)"
|
|
|
|
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
|
|
|
|
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-' + 0) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-' + 0) | numberPercentage: stakeholder.locale))"></span>
|
|
|
|
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
|
|
|
|
<span *ngIf="!numberResults.get(i + '-' + j + '-' + 0)">--</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div *ngIf="indicator.description || indicator.additionalDescription"
|
|
|
|
<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">
|
|
|
|
class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m">
|
|
|
@ -158,9 +157,9 @@
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</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">
|
|
|
|
<div class="number uk-text-small uk-text-bold">
|
|
|
|
<span *ngIf="numberResults.get(i + '-' + j)"
|
|
|
|
<span *ngIf="numberResults.get(i + '-' + j + '-' + 0)"
|
|
|
|
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
|
|
|
|
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-' + 0) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-' + 0) | numberPercentage: stakeholder.locale))"></span>
|
|
|
|
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
|
|
|
|
<span *ngIf="!numberResults.get(i + '-' + j + '-' + 0)">--</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -178,37 +177,39 @@
|
|
|
|
<h5 *ngIf="chart.title && !isMobile" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
|
|
|
|
<h5 *ngIf="chart.title && !isMobile" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
|
|
|
|
<h6 *ngIf="chart.title && isMobile" class="uk-width-1-1">{{chart.title}}</h6>
|
|
|
|
<h6 *ngIf="chart.title && isMobile" class="uk-width-1-1">{{chart.title}}</h6>
|
|
|
|
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
|
|
|
|
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
|
|
|
|
<div *ngIf="hasPermission(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
|
|
|
|
<div *ngIf="hasPermission(indicator.visibility)"
|
|
|
|
[ngClass]="getChartClassBySize(indicator.width)">
|
|
|
|
[ngClass]="getChartClassBySize(indicator.width)">
|
|
|
|
<div class="uk-card uk-card-default uk-position-relative"
|
|
|
|
<div class="uk-card uk-card-default uk-position-relative"
|
|
|
|
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
|
|
|
|
[class.semiFiltered]="getActiveIndicatorPath(indicator).filtersApplied < countSelectedFilters()">
|
|
|
|
<div class="uk-card-body uk-text-center uk-margin-small-bottom">
|
|
|
|
<div class="uk-card-body uk-margin-small-bottom">
|
|
|
|
<h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
|
|
|
|
<h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
|
|
|
|
{{indicator.name + " "}}
|
|
|
|
{{indicator.name + " "}}
|
|
|
|
</h6>
|
|
|
|
</h6>
|
|
|
|
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
|
|
|
|
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
|
|
|
|
<button *ngFor="let indicatorPath of indicator.indicatorPaths;"
|
|
|
|
<ul class="uk-subnav uk-subnav-pill uk-subnav-small">
|
|
|
|
class="uk-button"
|
|
|
|
<li *ngFor="let indicatorPath of indicator.indicatorPaths; let i=index"
|
|
|
|
(click)="setActiveChart(i, j, indicatorPath.type)"
|
|
|
|
class="uk-flex uk-margin-small-top"
|
|
|
|
[class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
|
|
|
|
[class.uk-active]="(!indicator.activePath && i == 0) || indicator.activePath === i">
|
|
|
|
{{indicatorPath.type}}
|
|
|
|
<a (click)="indicator.activePath = i">
|
|
|
|
</button>
|
|
|
|
<span>
|
|
|
|
|
|
|
|
{{indicatorPath.parameters.title ? indicatorPath.parameters.title : '--' }}
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--<div *ngIf="properties.environment === 'development'">
|
|
|
|
|
|
|
|
Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}} out of
|
|
|
|
|
|
|
|
{{countSelectedFilters()}}</div>-->
|
|
|
|
|
|
|
|
<iframe [class.uk-blend-multiply]="!isFullscreen"
|
|
|
|
<iframe [class.uk-blend-multiply]="!isFullscreen"
|
|
|
|
*ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
|
|
|
|
*ngIf=" !properties.disableFrameLoad && getActiveIndicatorPath(indicator).source !== 'image'"
|
|
|
|
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
|
|
|
|
[src]="getActiveIndicatorPath(indicator).safeResourceUrl"
|
|
|
|
class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
|
|
|
|
class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
|
|
|
|
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
|
|
|
|
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
|
|
|
|
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
|
|
|
|
<div *ngIf="properties.disableFrameLoad && getActiveIndicatorPath(indicator).source !== 'image'">
|
|
|
|
<img class="uk-width-1-1 uk-blend-multiply"
|
|
|
|
<img class="uk-width-1-1 uk-blend-multiply"
|
|
|
|
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
|
|
|
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
|
|
|
src="assets/chart-placeholder.png">
|
|
|
|
src="assets/chart-placeholder.png">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
|
|
|
|
<img *ngIf="getActiveIndicatorPath(indicator).source === 'image'"
|
|
|
|
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
|
|
|
|
[src]="getActiveIndicatorPath(indicator).safeResourceUrl"
|
|
|
|
class="uk-width-1-1 uk-blend-multiply"
|
|
|
|
class="uk-width-1-1 uk-blend-multiply"
|
|
|
|
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
|
|
|
|
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|