2023-10-19 15:33:04 +02:00
|
|
|
<div *ngIf="stakeholder && canEdit" class="uk-section">
|
|
|
|
|
<div *ngIf="numberSections">
|
|
|
|
|
<h5 class="uk-text-bold">Number Indicators</h5>
|
|
|
|
|
<div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
|
|
|
|
|
<div *ngFor="let number of numbers; let i=index">
|
|
|
|
|
<div class="section">
|
|
|
|
|
<div class="tools">
|
|
|
|
|
<div class="uk-flex uk-flex-middle">
|
|
|
|
|
<a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
|
|
|
|
|
uk-tooltip="Create a new section">
|
|
|
|
|
<icon name="add" [flex]="true"></icon>
|
|
|
|
|
</a>
|
|
|
|
|
<a *ngIf="!number.defaultId" [attr.uk-tooltip]="'Delete section'"
|
|
|
|
|
(click)="deleteSectionOpen(number, i, 'number', 'delete')">
|
|
|
|
|
<icon name="close" [flex]="true"></icon>
|
|
|
|
|
</a>
|
|
|
|
|
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
|
|
|
|
|
<!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"-->
|
|
|
|
|
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
|
|
|
|
|
<!-- (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">highlight_off</i>-->
|
|
|
|
|
<!-- </button>-->
|
|
|
|
|
<!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"-->
|
|
|
|
|
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
|
|
|
|
|
<!-- (click)="deleteSectionOpen(number, i, 'number', 'disconnect')"><i class="material-icons">link_off</i>-->
|
|
|
|
|
<!-- </button>-->
|
|
|
|
|
<!-- </ng-container>-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="numberSections.at(i)" class="uk-margin-medium-bottom">
|
|
|
|
|
<div input [formInput]="numberSections.at(i).get('title')"
|
|
|
|
|
(focusEmitter)="saveSection($event, numberSections.at(i), i, 'number')"
|
|
|
|
|
class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div [id]="'number-' + number._id" class="uk-grid uk-grid-small uk-grid-match" uk-sortable="group: number" uk-grid>
|
|
|
|
|
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
|
|
|
|
|
<div *ngIf="indicator" [id]="indicator._id"
|
|
|
|
|
[ngClass]="getNumberClassBySize(indicator.width)">
|
|
|
|
|
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative">
|
|
|
|
|
<div *ngIf="!dragging"
|
|
|
|
|
class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
|
|
|
|
|
<a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
|
2023-11-13 14:00:05 +01:00
|
|
|
<icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon>
|
2023-10-19 15:33:04 +02:00
|
|
|
<icon [flex]="true" name="more_vert"></icon>
|
|
|
|
|
</a>
|
|
|
|
|
<div #element class="uk-dropdown" uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
|
|
|
|
|
<ul class="uk-nav uk-dropdown-nav">
|
|
|
|
|
<ng-container *ngIf="isCurator">
|
|
|
|
|
<li><a (click)="editNumberIndicatorOpen(number, indicator._id); hide(element)">Edit</a></li>
|
|
|
|
|
</ng-container>
|
2023-11-13 14:00:05 +01:00
|
|
|
<ng-container *ngIf="showVisibility">
|
|
|
|
|
<li *ngIf="isCurator" class="uk-nav-divider"></li>
|
|
|
|
|
<ng-template ngFor [ngForOf]="stakeholderUtils.visibilities" let-v>
|
|
|
|
|
<li>
|
|
|
|
|
<a (click)="changeIndicatorStatus(number._id, indicator, v.value);hide(element)">
|
|
|
|
|
<div class="uk-flex uk-flex-middle">
|
|
|
|
|
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
|
|
|
|
|
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
|
|
|
|
|
<icon *ngIf="indicator.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ng-template>
|
|
|
|
|
</ng-container>
|
2023-10-19 15:33:04 +02:00
|
|
|
<ng-container *ngIf="!indicator.defaultId && !editing && isCurator">
|
|
|
|
|
<li class="uk-nav-divider">
|
|
|
|
|
<li><a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a></li>
|
|
|
|
|
</ng-container>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</ng-template>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="isCurator" class="uk-margin-top">
|
|
|
|
|
<div class="uk-grid uk-grid-small" uk-grid>
|
|
|
|
|
<div [ngClass]="getNumberClassBySize('small')">
|
|
|
|
|
<a class="uk-card uk-card-default number-card uk-padding-small uk-flex uk-flex-middle uk-link-reset" (click)="editNumberIndicatorOpen(number)">
|
|
|
|
|
<div class="uk-text-background uk-margin-right">
|
|
|
|
|
<icon name="add" [flex]="true" ratio="1.5"></icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="uk-text-bold uk-margin-remove">
|
|
|
|
|
Create a number Indicator
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<ng-container *ngTemplateOutlet="new_section; context:{type: 'number'}"></ng-container>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="chartSections" class="uk-margin-large-top">
|
|
|
|
|
<h5 class="uk-text-bold">Chart Indicators</h5>
|
|
|
|
|
<div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
|
|
|
|
|
<div *ngFor="let chart of charts; let i=index">
|
|
|
|
|
<div class="section uk-margin-top uk-padding-small">
|
|
|
|
|
<div class="tools">
|
|
|
|
|
<div class="uk-flex uk-flex-middle">
|
|
|
|
|
<a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
|
|
|
|
|
title="Create a new section">
|
|
|
|
|
<icon name="add" [flex]="true"></icon>
|
|
|
|
|
</a>
|
|
|
|
|
<a *ngIf="!chart.defaultId" [attr.uk-tooltip]="'Delete section'"
|
|
|
|
|
(click)="deleteSectionOpen(chart, i, 'chart', 'delete')">
|
|
|
|
|
<icon name="close" [flex]="true"></icon>
|
|
|
|
|
</a>
|
|
|
|
|
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
|
|
|
|
|
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
|
|
|
|
|
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
|
|
|
|
|
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i class="material-icons">highlight_off</i>-->
|
|
|
|
|
<!-- </button>-->
|
|
|
|
|
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
|
|
|
|
|
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
|
|
|
|
|
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'disconnect')"><i class="material-icons">link_off</i>-->
|
|
|
|
|
<!-- </button>-->
|
|
|
|
|
<!-- </ng-container>-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="chartSections.at(i)"
|
|
|
|
|
class="uk-margin-medium-bottom">
|
|
|
|
|
<div input [formInput]="chartSections.at(i).get('title')"
|
|
|
|
|
(focusEmitter)="saveSection($event, chartSections.at(i), i)"
|
|
|
|
|
class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div [id]="'chart-' + chart._id" class="uk-grid uk-grid-small uk-grid-match" uk-sortable="group: chart" uk-grid>
|
|
|
|
|
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
|
|
|
|
|
<div *ngIf="indicator" [id]="indicator._id" [ngClass]="getChartClassBySize(indicator.width)">
|
|
|
|
|
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
|
|
|
|
|
<div *ngIf="!dragging"
|
|
|
|
|
class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
|
|
|
|
|
<a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
|
2023-11-13 14:00:05 +01:00
|
|
|
<icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon>
|
2023-10-19 15:33:04 +02:00
|
|
|
<icon [flex]="true" name="more_vert"></icon>
|
|
|
|
|
</a>
|
|
|
|
|
<div #element class="uk-dropdown" uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
|
|
|
|
|
<ul class="uk-nav uk-dropdown-nav">
|
|
|
|
|
<ng-container *ngIf="isCurator">
|
|
|
|
|
<li><a (click)="editChartIndicatorOpen(chart, indicator._id); hide(element)">Edit</a></li>
|
|
|
|
|
</ng-container>
|
2023-11-13 14:00:05 +01:00
|
|
|
<ng-container *ngIf="showVisibility">
|
|
|
|
|
<li *ngIf="isCurator" class="uk-nav-divider"></li>
|
|
|
|
|
<ng-template ngFor [ngForOf]="stakeholderUtils.visibilities" let-v>
|
|
|
|
|
<li>
|
|
|
|
|
<a (click)="changeIndicatorStatus(chart._id, indicator, v.value);">
|
|
|
|
|
<div class="uk-flex uk-flex-middle">
|
|
|
|
|
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
|
|
|
|
|
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
|
|
|
|
|
<icon *ngIf="indicator.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ng-template>
|
|
|
|
|
</ng-container>
|
2023-10-19 15:33:04 +02:00
|
|
|
<ng-container *ngIf="!indicator.defaultId && !editing && isCurator">
|
|
|
|
|
<li class="uk-nav-divider">
|
|
|
|
|
<li><a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete</a></li>
|
|
|
|
|
</ng-container>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div *ngIf="indicator.name" class="uk-text-center uk-text-bold uk-margin-small-bottom">
|
|
|
|
|
{{indicator.name}}
|
|
|
|
|
</div>
|
|
|
|
|
<iframe *ngIf="!properties.disableFrameLoad && indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !=='image' &&
|
|
|
|
|
safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
|
|
|
|
|
allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"
|
|
|
|
|
[src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
|
|
|
|
|
class="uk-width-1-1" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
|
|
|
|
[class.uk-blend-multiply]="!isFullscreen"></iframe>
|
|
|
|
|
<div *ngIf="properties.disableFrameLoad && indicator.indicatorPaths &&
|
|
|
|
|
indicator.indicatorPaths.length > 0 && indicator.indicatorPaths[0].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>
|
|
|
|
|
<div *ngIf="indicator.indicatorPaths && indicator.indicatorPaths[0] &&
|
|
|
|
|
indicator.indicatorPaths[0].source === 'image'">
|
|
|
|
|
<img class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
|
|
|
|
[src]="indicator.indicatorPaths[0].url">
|
|
|
|
|
</div>
|
|
|
|
|
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</ng-template>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="isCurator" class="uk-margin-top">
|
|
|
|
|
<div class="uk-grid uk-grid-small uk-grid-match" uk-grid>
|
|
|
|
|
<div [ngClass]="getChartClassBySize('small')">
|
|
|
|
|
<div class=" uk-card uk-card-default uk-card-body clickable" (click)="editChartIndicatorOpen(chart)">
|
|
|
|
|
<h6 class="uk-text-bold uk-text-center">
|
|
|
|
|
Create a custom indicator
|
|
|
|
|
</h6>
|
|
|
|
|
<div class="uk-text-muted uk-text-small">
|
|
|
|
|
Use our advance tool to create a custom Indicator that suit the needs of your funding
|
|
|
|
|
KPI's.
|
|
|
|
|
</div>
|
|
|
|
|
<div class="uk-flex uk-flex-center uk-text-background uk-margin-medium-top">
|
|
|
|
|
<icon name="add" ratio="3" [flex]="true"></icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<modal-alert #editNumberModal
|
|
|
|
|
[large]="true" classTitle="uk-background-primary uk-light"
|
|
|
|
|
(alertOutput)="saveIndicator()"
|
|
|
|
|
[okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
|
|
|
|
|
<div *ngIf="editing" class="uk-position-relative uk-height-large">
|
|
|
|
|
<loading class="uk-position-center"></loading>
|
|
|
|
|
</div>
|
|
|
|
|
<div [class.uk-hidden]="editing" class="uk-padding-small">
|
|
|
|
|
<div *ngIf="numberIndicatorFb" class="uk-grid" [formGroup]="numberIndicatorFb" uk-grid>
|
|
|
|
|
<div input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('name')" placeholder="Title"></div>
|
|
|
|
|
<div *ngIf="stakeholder.defaultId != '-1' && ( (indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
|
|
|
|
|
input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('description')" placeholder="Profile description" type="textarea">
|
|
|
|
|
</div>
|
|
|
|
|
<div input class="uk-width-1-1" *ngIf="stakeholder.defaultId" [formInput]="numberIndicatorFb.get('additionalDescription')"
|
|
|
|
|
placeholder="Description" type="textarea">
|
|
|
|
|
</div>
|
2023-11-13 14:00:05 +01:00
|
|
|
<div *ngIf="showVisibility" input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('visibility')"
|
|
|
|
|
placeholder="Visibility" [options]="stakeholderUtils.visibilities" type="select">
|
2023-10-19 15:33:04 +02:00
|
|
|
</div>
|
|
|
|
|
<div input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')"
|
|
|
|
|
placeholder="Number Size" [options]="indicatorUtils.indicatorSizes" type="select">
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths">
|
|
|
|
|
<div *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index" [formGroupName]="i">
|
|
|
|
|
<div class="uk-grid" uk-grid>
|
|
|
|
|
<div class="uk-width-1-1">
|
|
|
|
|
<div class="uk-grid" uk-grid>
|
|
|
|
|
<div class="uk-width-1-1 uk-flex uk-flex-middle">
|
|
|
|
|
<div input class="uk-width-expand" [formInput]="indicatorPath.get('url')" placeholder="Number URL">
|
|
|
|
|
<div *ngIf="urlParameterizedMessage" warning>{{urlParameterizedMessage}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class='uk-padding-small'>
|
|
|
|
|
<a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)"><icon [flex]="true" name="content_copy"></icon></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="showCheckForSchemaEnhancements" class="uk-width-1-1">
|
|
|
|
|
<div class="uk-alert uk-alert-warning">
|
|
|
|
|
There are schema enhancements that can be applied in this query.<a
|
|
|
|
|
(click)="indicatorPath.get('url').setValue(indicatorUtils.applySchemaEnhancements(indicatorPath.get('url').value)); indicatorPath.get('url').markAsDirty()">Apply
|
|
|
|
|
now</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="uk-width-1-2@m">
|
|
|
|
|
<div input [formInput]="indicatorPath.get('source')" placeholder="Source"
|
|
|
|
|
[options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes" type="select">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="uk-width-1-2@m">
|
|
|
|
|
<div input [formInput]="indicatorPath.get('format')" placeholder="Format"
|
|
|
|
|
[options]="indicatorUtils.formats" type="select">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div formArrayName="jsonPath" class="uk-width-1-1">
|
|
|
|
|
<h6 class="uk-text-bold uk-margin-remove-bottom">
|
|
|
|
|
<span>JSON Path</span>
|
|
|
|
|
</h6>
|
|
|
|
|
<div *ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
|
|
|
|
|
<div class="uk-text-danger uk-text-small">
|
|
|
|
|
This JSON path is not valid or the result has not been calculated yet.
|
|
|
|
|
Please press calculate on box below to see the result.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-margin-top uk-flex-middle" uk-grid>
|
|
|
|
|
<div *ngFor="let jsonPath of getJsonPath(i).controls; let j=index" class="uk-flex uk-flex-middle">
|
|
|
|
|
<div input class="uk-width-1-1" [formInput]="jsonPath" [placeholder]="'Level ' + +(j + 1)"></div>
|
|
|
|
|
<a [class.uk-invisible]="getJsonPath(i).length === 1 || numberIndicatorFb.get('defaultId').value"
|
|
|
|
|
class="uk-margin-small-left uk-text-danger"
|
|
|
|
|
[class.uk-disabled]="getJsonPath(i).disabled"
|
|
|
|
|
(click)="removeJsonPath(i, j)">
|
|
|
|
|
<icon name="close"></icon>
|
|
|
|
|
</a>
|
|
|
|
|
<span [class.uk-invisible]="getJsonPath(i).disabled || j === (getJsonPath(i).controls.length - 1)" class="uk-text-center uk-margin-small-left">
|
|
|
|
|
<icon name="east"></icon>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="indicator.defaultId === null">
|
|
|
|
|
<button class="uk-icon-button uk-button-primary" (click)="addJsonPath(i)">
|
|
|
|
|
<icon name="add" [flex]="true"></icon>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="uk-width-1-1 uk-flex uk-flex-center">
|
|
|
|
|
<div class="uk-flex uk-position-relative">
|
|
|
|
|
<span class="uk-padding number number-preview uk-flex uk-flex-column uk-flex-center uk-text-center">
|
|
|
|
|
<span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value !== 0"
|
|
|
|
|
[innerHTML]="(numberIndicatorPaths.at(i).get('format').value == 'NUMBER'?(numberIndicatorPaths.at(i).get('result').value | numberRound: 2:1:stakeholder.locale):(numberIndicatorPaths.at(i).get('result').value | numberPercentage: stakeholder.locale))">
|
|
|
|
|
</span>
|
|
|
|
|
<span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value === 0">
|
|
|
|
|
--
|
|
|
|
|
</span>
|
|
|
|
|
</span>
|
|
|
|
|
<div *ngIf="numberIndicatorPaths.at(i).get('result').invalid"
|
|
|
|
|
class="uk-width-1-1 uk-height-1-1 refresh-indicator">
|
|
|
|
|
<div class="uk-position-relative uk-height-1-1">
|
|
|
|
|
<a class="uk-position-center uk-text-center uk-text-small uk-link-reset"
|
|
|
|
|
[class.uk-disabled]="numberIndicatorPaths.at(i).get('url').invalid"
|
|
|
|
|
(click)="validateJsonPath(i, true)">
|
|
|
|
|
<div>
|
|
|
|
|
<icon name="refresh"></icon>
|
|
|
|
|
</div>
|
|
|
|
|
<span *ngIf="numberIndicatorPaths.at(i).get('result').errors.required">Calculate</span>
|
|
|
|
|
<span *ngIf="numberIndicatorPaths.at(i).get('result').errors.validating">Calculating...</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div #editNumberNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</modal-alert>
|
|
|
|
|
<modal-alert #editChartModal [large]="true" (alertOutput)="saveIndicator()" classTitle="uk-background-primary uk-light"
|
|
|
|
|
[okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)">
|
|
|
|
|
<div *ngIf="editing" class="uk-position-relative uk-height-large">
|
|
|
|
|
<loading class="uk-position-center"></loading>
|
|
|
|
|
</div>
|
|
|
|
|
<div [class.uk-hidden]="editing" class="uk-padding-small">
|
|
|
|
|
<div *ngIf="chartIndicatorFb" [formGroup]="chartIndicatorFb" class="uk-grid" uk-grid>
|
|
|
|
|
<div input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" placeholder="Title"></div>
|
|
|
|
|
<div *ngIf="stakeholder.defaultId != '-1' && ((indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
|
|
|
|
|
input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('description')" placeholder="Default Description" type="textarea">
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="stakeholder.defaultId" input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('additionalDescription')"
|
|
|
|
|
placeholder="Description" type="textarea">
|
|
|
|
|
</div>
|
2023-11-13 14:00:05 +01:00
|
|
|
<div *ngIf="showVisibility" input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('visibility')"
|
|
|
|
|
placeholder="Status" [options]="stakeholderUtils.visibilities" type="select">
|
2023-10-19 15:33:04 +02:00
|
|
|
</div>
|
|
|
|
|
<div input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('width')" placeholder="Chart width"
|
|
|
|
|
[options]="indicatorUtils.indicatorSizes" type="select">
|
|
|
|
|
</div>
|
|
|
|
|
<div input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('height')" placeholder="Chart height"
|
|
|
|
|
[options]="indicatorUtils.indicatorSizes" type="select">
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths" class="uk-width-1-1">
|
|
|
|
|
<div *ngFor="let indicatorPath of chartIndicatorPaths.controls; let i=index;"
|
|
|
|
|
[formGroupName]="i" class="uk-grid" uk-grid>
|
|
|
|
|
<div class="uk-width-1-1 uk-flex uk-flex-middle">
|
|
|
|
|
<div input class="uk-width-expand" [title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
|
|
|
|
|
[formInput]="indicatorPath.get('url')" placeholder="Chart URL">
|
|
|
|
|
<div *ngIf="urlParameterizedMessage" warning>{{urlParameterizedMessage}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class='uk-padding-small'>
|
|
|
|
|
<a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)"><icon [flex]="true" name="content_copy"></icon></a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="showCheckForSchemaEnhancements" class=" uk-width-1-1 ">
|
|
|
|
|
<div class="uk-alert uk-alert-warning">
|
|
|
|
|
There are schema enhancements that can be applied in this query. <a
|
|
|
|
|
(click)="indicatorPath.get('url').setValue(indicatorUtils.applySchemaEnhancements(indicatorPath.get('url').value)); indicatorPath.get('url').markAsDirty()">Apply
|
|
|
|
|
now</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="uk-width-1-1" formArrayName="parameters">
|
|
|
|
|
<div class="uk-grid" uk-grid>
|
|
|
|
|
<div *ngIf="getParameter(i, 'title')" input class="uk-width-1-1" [formInput]="getParameter(i, 'title').get('value')"
|
|
|
|
|
placeholder="Chart Title"></div>
|
|
|
|
|
<div *ngIf="getParameter(i, 'subtitle')" input class="uk-width-1-1" placeholder="Chart Subtitle" [formInput]="getParameter(i, 'subtitle').get('value')" label="Chart Subtitle"></div>
|
|
|
|
|
<div *ngIf="!getParameter(i, 'type')" input class="uk-width-1-3@s" [formInput]="indicatorPath.get('type')" placeholder="Chart Type"
|
|
|
|
|
[options]="(indicatorPath.get('type').value == 'table' && getParameter(i, 'data_title_0'))?indicatorUtils.getChartTypes(indicatorPath.get('type').value):indicatorUtils.allChartTypes"
|
|
|
|
|
type="select"></div>
|
|
|
|
|
<div *ngIf="getParameter(i, 'type')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'type').get('value')" placeholder="Chart Type"
|
|
|
|
|
[options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)" type="select"></div>
|
|
|
|
|
<div *ngIf="getParameter(i, 'xAxisTitle')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'xAxisTitle').get('value')"
|
|
|
|
|
placeholder="X-Axis Title"></div>
|
|
|
|
|
<div *ngIf="getParameter(i, 'yAxisTitle')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'yAxisTitle').get('value')"
|
|
|
|
|
placeholder="Y-Axis Title"></div>
|
|
|
|
|
<div *ngIf="getParameter(i, 'data_title_0')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'data_title_0').get('value')"
|
|
|
|
|
placeholder="Data Title"></div>
|
|
|
|
|
<div *ngIf="getParameter(i, 'data_title_1')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'data_title_1').get('value')"
|
|
|
|
|
placeholder="Data Title"></div>
|
|
|
|
|
<div *ngIf="getParameter(i, 'start_year')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'start_year').get('value')"
|
|
|
|
|
placeholder="Year (From)"></div>
|
|
|
|
|
<div *ngIf="getParameter(i, 'end_year')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'end_year').get('value')"
|
|
|
|
|
placeholder="Year (To)"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="indicator && indicator.indicatorPaths[i] && indicator.indicatorPaths[i].safeResourceUrl"
|
|
|
|
|
class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-flex uk-flex-center">
|
|
|
|
|
<div *ngIf="(hasDifference(i)) && !indicatorPath.invalid"
|
|
|
|
|
class="uk-width-1-1 uk-height-large refresh-indicator">
|
|
|
|
|
<div class="uk-position-relative uk-height-1-1">
|
|
|
|
|
<a class="uk-position-center uk-text-center uk-link-reset" (click)="refreshIndicator()">
|
|
|
|
|
<div>
|
|
|
|
|
<icon name="refresh"></icon>
|
|
|
|
|
</div>
|
|
|
|
|
<span>Click to refresh the graph view</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'" [class.uk-blend-multiply]="!isFullscreen"
|
|
|
|
|
[src]="indicator.indicatorPaths[i].safeResourceUrl" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"
|
|
|
|
|
class="uk-width-1-1 uk-height-large"></iframe>
|
|
|
|
|
<!-- <div *ngIf="properties.disableFrameLoad && indicator.indicatorPaths[i].source !== 'image'" class="uk-alert uk-alert-danger uk-text-center">I frames-->
|
|
|
|
|
<!-- preview is disabled</div>-->
|
|
|
|
|
<div *ngIf="indicator.indicatorPaths[i].source === 'image'">
|
|
|
|
|
<img class="uk-width-1-1 uk-height-large uk-blend-multiply" [src]="indicator.indicatorPaths[i].url">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div #editChartNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</modal-alert>
|
|
|
|
|
<modal-alert #deleteModal (alertOutput)="deleteIndicator()" [overflowBody]="false" classTitle="uk-background-primary uk-light">
|
|
|
|
|
<div [class.uk-invisible]="editing" class="uk-position-relative">
|
|
|
|
|
<div *ngIf="editing">
|
|
|
|
|
<loading class="uk-position-center"></loading>
|
|
|
|
|
</div>
|
|
|
|
|
You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
|
|
|
|
|
"{{indicator.name ? indicator.name : (indicator.indicatorPaths[0]?.parameters?.title?indicator.indicatorPaths[0].parameters.title:'')}}"</span> indicator permanently.
|
|
|
|
|
<div *ngIf="indicatorChildrenActionOnDelete == 'delete'" class="uk-text-bold">
|
|
|
|
|
Indicators of all profiles based on this default indicator, will be deleted as well.
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <span *ngIf="indicatorChildrenActionOnDelete == 'disconnect'" class="uk-text-bold">-->
|
|
|
|
|
<!-- Indicators of all profiles based on this default indicator, will not be marked as copied from default anymore.-->
|
|
|
|
|
<!-- </span>-->
|
|
|
|
|
Are you sure you want to proceed?
|
|
|
|
|
<div #deleteNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</modal-alert>
|
|
|
|
|
<!--<modal-alert #deleteAllModal (alertOutput)="deleteIndicator('delete')">
|
|
|
|
|
You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
|
|
|
|
|
"{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
|
|
|
|
|
<span class="uk-text-bold">Indicators of all profiles based on this default indicator, will be deleted as well.</span>
|
|
|
|
|
Are you sure you want to proceed?
|
|
|
|
|
</modal-alert>
|
|
|
|
|
<modal-alert #deleteAndDisconnectModal (alertOutput)="deleteIndicator('disconnect')">
|
|
|
|
|
You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
|
|
|
|
|
"{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
|
|
|
|
|
<span class="uk-text-bold">Indicators of all profiles based on this default indicator, will not be marked as copied from default anymore.</span>
|
|
|
|
|
Are you sure you want to proceed?
|
|
|
|
|
</modal-alert>-->
|
|
|
|
|
<modal-alert #deleteSectionModal (alertOutput)="deleteSection()" [overflowBody]="false" classTitle="uk-background-primary uk-light">
|
|
|
|
|
<div [class.uk-invisible]="editing" class="uk-position-relative">
|
|
|
|
|
<div *ngIf="editing">
|
|
|
|
|
<loading class="uk-position-center"></loading>
|
|
|
|
|
</div>
|
|
|
|
|
You are about to delete this section and its indicators permanently.
|
|
|
|
|
<div *ngIf="sectionChildrenActionOnDelete == 'delete' && !stakeholder.defaultId" class="uk-text-bold">
|
|
|
|
|
Sections of all profiles based on this default section and their contents, will be deleted as well.
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <span *ngIf="sectionChildrenActionOnDelete == 'disconnect'" class="uk-text-bold">-->
|
|
|
|
|
<!-- Sections of all profiles based on this default section and their contents, will not be marked as copied from default anymore.-->
|
|
|
|
|
<!-- </span>-->
|
|
|
|
|
Are you sure you want to proceed?
|
|
|
|
|
</div>
|
|
|
|
|
</modal-alert>
|
|
|
|
|
<!--<modal-alert #deleteNumberSectionModal (alertOutput)="deleteSection('number')">
|
|
|
|
|
You are about to delete this section and its indicators permanently.
|
|
|
|
|
Are you sure you want to proceed?
|
|
|
|
|
</modal-alert>
|
|
|
|
|
<modal-alert #deleteChartSectionModal (alertOutput)="deleteSection()">
|
|
|
|
|
You are about to delete this section and its indicators permanently.
|
|
|
|
|
Are you sure you want to proceed?
|
|
|
|
|
</modal-alert>-->
|
|
|
|
|
<ng-template #new_section let-type="type">
|
|
|
|
|
<div class="section">
|
|
|
|
|
<div class="uk-flex uk-flex-center" (click)="createSection(-1, type)">
|
|
|
|
|
<button class="uk-button uk-button-primary uk-flex uk-flex-middle">
|
|
|
|
|
<icon name="add" [flex]="true"></icon>
|
|
|
|
|
<span class="uk-margin-small-left">New section</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</ng-template>
|
