2020-05-12 13:05:53 +02:00
< div id = "page_content" >
2019-12-09 15:38:31 +01:00
< div class = "uk-padding-small md-bg-white" uk-grid >
< div * ngIf = "filters" class = "uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid >
< div >
< div dashboard-input [ formInput ] = " filters . get ( ' chartType ' ) "
2020-06-02 17:44:45 +02:00
type="select" [options]="[all].concat(indicatorUtils.allChartTypes)"
2019-12-09 15:38:31 +01:00
label="Chart Type">< / div >
< / div >
< div >
< div dashboard-input [ formInput ] = " filters . get ( ' privacy ' ) "
type="select" [options]="[all].concat(indicatorUtils.isPublic)"
label="Privacy">< / div >
< / div >
< div >
< div dashboard-input [ formInput ] = " filters . get ( ' status ' ) "
type="select" [options]="[all].concat(indicatorUtils.isActive)"
label="Status">< / div >
< / div >
< / div >
< div class = "uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right" >
< div class = "uk-inline uk-width-medium" >
< span class = "uk-position-center-right" > < i class = "material-icons" > search< / i > < / span >
< div dashboard-input [ formInput ] = " filters . get ( ' keyword ' ) " label = "Locate indicator" > < / div >
< / div >
< div [ class . uk-active ] = " grid " class = "uk-margin-small-left" >
< a [ routerLink ] = " " class = "uk-icon-button" ( click ) = " changeGrid ( true ) " > < i
class="material-icons">view_module< / i > < / a >
< / div >
< div [ class . uk-active ] = " ! grid " class = "uk-margin-small-left" >
< a [ routerLink ] = " " class = "uk-icon-button" ( click ) = " changeGrid ( false ) " > < i class = "material-icons" > list< / i > < / a >
< / div >
2019-11-08 16:47:47 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
< div * ngIf = "stakeholder && canEdit" id = "page_content_inner" >
< div class = "uk-child-width-1-2 uk-flex-middle" uk-grid >
< div >
< ul id = "breadcrumbs" >
< li > < span > {{stakeholder.topics[topicIndex].name}}< / span > < / li >
< li >
< span > {{stakeholder.topics[topicIndex].categories[categoryIndex].name}}< / span > < / li >
< li >
2019-11-12 16:55:37 +01:00
< span class = "md-color-blue-900 uk-text-bold" >
{{stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subcategoryIndex].name}}
< / span >
2019-12-09 15:38:31 +01:00
< / li >
< / ul >
< / div >
< div class = "uk-flex uk-flex-right" >
2020-01-10 15:20:42 +01:00
< a class = "md-btn md-btn-primary waves-button waves-effect" >
< i class = "material-icons uk-margin-small-right" > remove_red_eye< / i >
Preview
< i class = "material-icons uk-margin-small-left" > keyboard_arrow_down< / i >
< / a >
< div # element uk-dropdown = "mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
< ul class = "uk-nav uk-dropdown-nav" >
2020-01-14 20:48:13 +01:00
< li > < a target = "_blank" [ routerLink ] = " preview " [ queryParams ] = " { view: ' public ' } " ( click ) = " hide ( element ) " > Public< / a >
< / li >
< li > < a target = "_blank" [ routerLink ] = " preview " [ queryParams ] = " { view: ' private ' } " ( click ) = " hide ( element ) " > Private< / a >
< / li >
2020-01-10 15:20:42 +01:00
< / ul >
< / div >
2019-12-09 15:38:31 +01:00
< / div >
< / div >
< h4 class = "uk-text-bold" > Number Indicators< / h4 >
2020-01-14 20:48:13 +01:00
< div [ class . list-view ] = " ! grid " [ id ] = " number . _id "
2020-05-12 17:30:49 +02:00
class="uk-grid-match uk-grid-small"
2020-01-14 20:48:13 +01:00
*ngFor="let number of displayNumbers; let i = index"
uk-sortable="group: number" uk-grid>
2020-05-12 17:30:49 +02:00
<!-- <div *ngIf="grid" class="tools disable - sortable uk - sortable - nodrag">
2020-01-14 20:48:13 +01:00
< div class = "md-btn-group" >
< button class = "md-btn md-btn-mini" > < i class = "material-icons" > add< / i > < / button >
< button class = "md-btn md-btn-mini" > < i class = "material-icons rotate-90" > drag_indicator< / i > < / button >
< button class = "md-btn md-btn-mini" > < i class = "material-icons" > clear< / i > < / button >
< / div >
2020-05-12 17:30:49 +02:00
< / div > -->
2020-01-14 20:48:13 +01:00
< div * ngIf = "false"
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle disable-sortable uk-sortable-nodrag"
uk-grid>
< div dashboard-input class = "uk-width-2-3 uk-width-1-3@m" [ formInput ] = " null "
label="Add a section title">< / div >
< div class = "uk-width-expand" >
< button class = "md-btn md-btn-small" >
Save
< / button >
< / div >
< / div >
< div * ngIf = "!grid && number.title" class = "uk-width-1-1 disable-sortable uk-sortable-nodrag" >
2020-01-08 12:00:50 +01:00
< h4 > {{number.title}}< / h4 >
< / div >
< ng-template ngFor [ ngForOf ] = " number . indicators " let-indicator let-j = "index" >
2019-12-09 15:38:31 +01:00
< div * ngIf = "indicator" [ id ] = " indicator . _id "
[class.uk-width-1-3@m]="grid & & indicator.width === 'small'"
[class.uk-width-1-2@m]="grid & & indicator.width === 'medium'"
2020-01-08 12:00:50 +01:00
[class.uk-width-1-1@m]="!grid || indicator.width === 'large'"
2020-01-09 14:15:39 +01:00
[class.disable-sortable]="!canReorder"
2020-01-08 12:00:50 +01:00
[class.uk-sortable-nodrag]="!canReorder">
< div class = "md-card" [ class . md-card-hover ] = " canReorder " >
2019-12-09 15:38:31 +01:00
< div class = "md-card-toolbar" >
< div class = "md-card-toolbar-actions" [ class . uk-flex-middle ] = " ! grid " [ class . uk-flex ] = " ! grid " >
2020-01-09 14:15:39 +01:00
< ng-template [ ngIf ] = " ! grid " >
2020-01-14 20:48:13 +01:00
< div class = "uk-margin-medium-right uk-flex uk-flex-middle" >
< i class = "material-icons md-24 uk-margin-small-right" > {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}< / i >
{{(indicator.isPublic) ? 'Public' : 'Private'}}
< / div >
< div class = "uk-margin-medium-right uk-flex uk-flex-middle" >
< i class = "material-icons md-24 uk-margin-small-right"
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}< / i >
{{(indicator.isActive) ? 'Active' : 'Inactive'}}
< / div >
2020-01-09 14:15:39 +01:00
< / ng-template >
2019-12-09 15:38:31 +01:00
< div class = "md-card-dropdown uk-inline" >
< i class = "md-icon material-icons" > more_vert< / i >
2020-01-10 15:20:42 +01:00
< div # element uk-dropdown = "mode: click; pos: bottom-right; delay-hide: 0; flip: false"
2019-12-09 15:38:31 +01:00
class="uk-padding-remove-horizontal">
< ul class = "uk-nav uk-dropdown-nav" >
<!-- <li><a (click)="editChartIndicatorOpen(indicator._id)">Edit</a></li> -->
2020-01-10 15:20:42 +01:00
< li > < a ( click ) = " toggleIndicatorStatus ( number . _id , indicator ) ; hide ( element ) " >
2020-05-13 17:10:44 +02:00
{{indicator.isActive ? 'Inactive' : 'Active'}}< / a >
2019-12-09 15:38:31 +01:00
< / li >
2020-01-10 15:20:42 +01:00
< li > < a ( click ) = " toggleIndicatorAccess ( number . _id , indicator ) ; hide ( element ) " >
2020-05-13 17:10:44 +02:00
{{indicator.isPublic ? 'Private' : 'Public'}}< / a >
2019-12-09 16:52:08 +01:00
< / li >
2019-12-19 12:17:32 +01:00
< hr class = "uk-nav-divider" >
2020-01-10 15:20:42 +01:00
< li > < a ( click ) = " deleteIndicatorOpen ( number , indicator . _id , ' number ' ) ; hide ( element ) " > Delete< / a >
2019-12-09 15:38:31 +01:00
< / li >
< / ul >
< / div >
< / div >
< / div >
2019-12-09 16:02:57 +01:00
< div class = "md-card-toolbar-heading-text" >
2020-01-08 12:00:50 +01:00
{{indicator.name ? indicator.name : 'No title available'}}
2019-12-09 16:02:57 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
< div * ngIf = "grid" class = "md-card-content" >
< div class = "uk-flex uk-flex-center" uk-grid >
< div class = "uk-width-1-1" >
{{indicator.description}}
< / div >
2020-06-02 14:45:08 +02:00
< div class = "uk-width-1-2 uk-text-center" title = "{{indicator.isPublic?'Visible to all users':'Visible to members'}}" >
2019-12-09 15:38:31 +01:00
< i class = "material-icons md-24" > {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}< / i >
< div > {{(indicator.isPublic) ? 'Public' : 'Private'}}< / div >
2019-11-08 16:47:47 +01:00
< / div >
2020-06-02 14:45:08 +02:00
< div class = "uk-width-1-2 uk-text-center" title = "{{indicator.isActive?'Included in the indicators list':'Available only through administration dashboard'}}" >
2019-12-09 15:38:31 +01:00
< i class = "material-icons md-24"
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}< / i >
< div > {{(indicator.isActive) ? 'Active' : 'Inactive'}}< / div >
< / div >
< / div >
< / div >
< / div >
2019-11-08 16:47:47 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / ng-template >
2020-01-10 15:20:42 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< h4 class = "uk-text-bold" > Chart Indicators< / h4 >
2020-01-14 20:48:13 +01:00
< div * ngIf = "chartSections" >
2020-01-09 14:15:39 +01:00
< ng-template ngFor [ ngForOf ] = " displayCharts " let-chart let-i = "index" >
2020-01-14 20:48:13 +01:00
< div [ class . list-view ] = " ! grid " [ id ] = " ' chart- ' + chart . _id "
class="uk-grid-match section uk-grid-small uk-grid uk-margin-top"
uk-sortable="group: chart" uk-grid>
< div * ngIf = "grid" class = "tools disable-sortable uk-sortable-nodrag" >
2020-01-09 14:15:39 +01:00
< div class = "md-btn-group" >
2020-05-12 17:30:49 +02:00
< button class = "md-btn md-btn-mini" ( click ) = " createSection ( i ) " > < i class = "material-icons" > add< / i > < / button >
<!-- <button class="md - btn md - btn - mini"><i class="material - icons rotate - 90">drag_indicator</i></button> -->
< button class = "md-btn md-btn-mini" ( click ) = " deleteChartSectionOpen ( chart , i ) " > < i class = "material-icons" > clear< / i > < / button >
2020-01-09 14:15:39 +01:00
< / div >
< / div >
2020-01-14 20:48:13 +01:00
< div * ngIf = "grid && chartSections.at(i)"
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle uk-margin-bottom disable-sortable uk-sortable-nodrag"
uk-grid>
< div dashboard-input class = "uk-width-2-3 uk-width-1-3@m" [ formInput ] = " chartSections . at ( i ) . get ( ' title ' ) "
label="Add a section title">< / div >
2020-01-10 16:49:26 +01:00
< div class = "uk-width-expand" >
2020-05-12 17:30:49 +02:00
< button * ngIf = "chartSections.at(i).dirty" class = "md-btn" ( click ) = " saveSection ( chartSections . at ( i ) . value , i ) " >
2020-01-10 16:49:26 +01:00
Save
< / button >
< / div >
2020-01-09 14:15:39 +01:00
< / div >
2020-01-14 20:48:13 +01:00
< div * ngIf = "!grid && chart.title" class = "uk-width-1-1 disable-sortable uk-sortable-nodrag" >
< h4 > {{chart.title}}< / h4 >
< / div >
2020-01-09 14:15:39 +01:00
< ng-template ngFor [ ngForOf ] = " chart . indicators " let-indicator let-j = "index" >
< div * ngIf = "indicator" [ id ] = " indicator . _id "
[class.uk-width-1-3@m]="grid & & indicator.width === 'small'"
[class.uk-width-1-2@m]="grid & & indicator.width === 'medium'"
[class.uk-width-1-1@m]="!grid || indicator.width === 'large'"
[class.disable-sortable]="!canReorder"
[class.uk-sortable-nodrag]="!canReorder">
< div class = "md-card" [ class . md-card-hover ] = " canReorder " >
< div class = "md-card-toolbar" >
< div class = "md-card-toolbar-actions" [ class . uk-flex-middle ] = " ! grid " [ class . uk-flex ] = " ! grid " >
< ng-template [ ngIf ] = " ! grid " >
< div * ngFor = "let indicatorPath of indicator.indicatorPaths"
class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
< i class = "material-icons md-24 uk-margin-small-right" >
{{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
< / i >
{{indicatorPath.type + ' Chart'}}
< / div >
< / ng-template >
2020-06-02 14:45:08 +02:00
< div * ngIf = "!grid" class = "uk-margin-medium-right uk-flex uk-flex-middle" title = "{{indicator.isPublic?'Visible to all users':'Visible to members'}}" >
2020-01-09 14:15:39 +01:00
< i class = "material-icons md-24 uk-margin-small-right" >
{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
< / i >
{{(indicator.isPublic) ? 'Public' : 'Private'}}
< / div >
2020-06-02 14:45:08 +02:00
< div * ngIf = "!grid" class = "uk-margin-medium-right uk-flex uk-flex-middle" title = "{{indicator.isActive?'Included in the indicators list':'Available only through administration dashboard'}}" >
2020-01-09 14:15:39 +01:00
< i class = "material-icons md-24 uk-margin-small-right"
[class.md-color-green-300]="indicator.isActive">
{{indicatorUtils.isActiveIcon}}
< / i >
{{(indicator.isActive) ? 'Active' : 'Inactive'}}
< / div >
< div class = "md-card-dropdown uk-inline" >
< i class = "md-icon material-icons" > more_vert< / i >
2020-01-10 15:20:42 +01:00
< div # element uk-dropdown = "mode: click; pos: bottom-right; delay-hide: 0; flip: false"
2020-01-09 14:15:39 +01:00
class="uk-padding-remove-horizontal">
< ul class = "uk-nav uk-dropdown-nav" >
2020-01-10 15:20:42 +01:00
< li > < a ( click ) = " editChartIndicatorOpen ( chart , indicator . _id ) ; hide ( element ) " > Edit< / a > < / li >
< li > < a ( click ) = " toggleIndicatorStatus ( chart . _id , indicator ) ; hide ( element ) " >
2020-05-13 17:10:44 +02:00
{{indicator.isActive ? 'Inactive' : 'Active'}}< / a >
2020-01-09 14:15:39 +01:00
< / li >
2020-01-10 15:20:42 +01:00
< li > < a ( click ) = " toggleIndicatorAccess ( chart . _id , indicator ) ; hide ( element ) " >
2020-05-13 17:10:44 +02:00
{{indicator.isPublic ? 'Private' : 'Public'}}< / a >
2020-01-09 14:15:39 +01:00
< / li >
< hr class = "uk-nav-divider" >
2020-01-10 15:20:42 +01:00
< li > < a ( click ) = " deleteIndicatorOpen ( chart , indicator . _id ) ; hide ( element ) " > Delete< / a > < / li >
2020-01-09 14:15:39 +01:00
< / ul >
< / div >
2020-01-08 12:00:50 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
2020-01-09 14:15:39 +01:00
< div class = "md-card-toolbar-heading-text" >
{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters['title']}}
2020-01-08 12:00:50 +01:00
< / div >
2020-01-09 14:15:39 +01:00
< / div >
< div * ngIf = "grid" class = "md-card-content" >
< div class = "uk-flex uk-flex-center" uk-grid >
< div class = "uk-width-1-1" >
{{indicator.description ? indicator.description : ''}}
< / div >
< div class = "uk-width-1-3 uk-text-center"
[ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
< div * ngFor = "let indicatorPath of indicator.indicatorPaths" >
< i class = "material-icons md-24" >
{{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
< / i >
< div class = "uk-text-capitalize" > {{indicatorPath.type + ' Chart'}}< / div >
< / div >
< / div >
2020-06-02 14:45:08 +02:00
< div class = "uk-width-1-3 uk-text-center"
title="{{indicator.isPublic?'Visible to all users':'Visible to members'}}">
2020-01-08 12:00:50 +01:00
< i class = "material-icons md-24" >
2020-01-09 14:15:39 +01:00
{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
2020-01-08 12:00:50 +01:00
< / i >
2020-01-09 14:15:39 +01:00
< div > {{(indicator.isPublic) ? 'Public' : 'Private'}}< / div >
< / div >
2020-06-02 14:45:08 +02:00
< div class = "uk-width-1-3 uk-text-center"
title="{{indicator.isActive?'Included in the indicators list':'Available only through administration dashboard'}}">
2020-01-09 14:15:39 +01:00
< i class = "material-icons md-24" [ class . md-color-green-300 ] = " indicator . isActive " >
{{indicatorUtils.isActiveIcon}}
< / i >
< div > {{(indicator.isActive) ? 'Active' : 'Inactive'}}< / div >
2020-01-08 12:00:50 +01:00
< / div >
2020-05-13 17:10:44 +02:00
< iframe * ngIf = "indicator.indicatorPaths[0] & & indicator . indicatorPaths [ 0 ] . source ! = = ' image ' & &
2020-06-02 14:45:08 +02:00
safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
[src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
2020-05-12 13:05:53 +02:00
class="uk-width-1-1 uk-height-medium">< / iframe >
2020-05-12 17:30:49 +02:00
< div * ngIf = "indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'" >
2020-05-12 13:05:53 +02:00
< img class = "uk-width-1-1 uk-height-medium" [ src ] = " indicator . indicatorPaths [ i ] . url " >
< / div >
2019-12-09 15:38:31 +01:00
< / div >
< / div >
< / div >
< / div >
2020-01-09 14:15:39 +01:00
< / ng-template >
< div class = "disable-sortable uk-sortable-nodrag"
[class.uk-width-1-3@m]="grid"
[class.uk-width-1-1@m]="!grid">
< div class = "md-card clickable" ( click ) = " editChartIndicatorOpen ( chart ) " >
< div class = "md-card-toolbar" >
< div class = "md-card-toolbar-heading-text"
[class.uk-flex-middle]="!grid"
[class.uk-flex]="!grid"
[class.uk-flex-center]="!grid">
< i * ngIf = "!grid" class = "material-icons md-36" > add< / i >
< span > Create a custom Indicator< / span >
2020-01-08 12:00:50 +01:00
< / div >
2020-01-09 14:15:39 +01:00
< / div >
< div * ngIf = "grid" class = "md-card-content" >
< div uk-grid >
< div class = "uk-width-1-1" >
Use our advance tool to create a custom Indicator that suit the needs of your funding
KPI's.
< / div >
< div class = "uk-width-1-1 uk-flex uk-flex-center" >
< i class = "material-icons md-48" > add< / i >
< / div >
2020-01-08 12:00:50 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
2019-11-19 15:25:19 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
2020-01-10 15:20:42 +01:00
< / div >
2020-01-09 14:15:39 +01:00
< / ng-template >
2020-01-14 20:48:13 +01:00
< div * ngIf = "grid" class = "new-section uk-margin-top" >
< div class = "tools uk-flex uk-flex-middle" >
2020-05-12 17:30:49 +02:00
< button class = "md-btn uk-margin-small-right" ( click ) = " createSection ( ) " >
2020-01-14 20:48:13 +01:00
< i class = "material-icons md-24 md-color-white" > add< / i >
< / button >
< span > Create a new section< / span >
< / div >
< / div >
2020-01-09 14:15:39 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
2019-11-08 16:47:47 +01:00
< / div >
2019-12-19 12:17:32 +01:00
< modal-alert # editModal
2019-11-24 17:30:04 +01:00
[classBody]="'large-modal'"
2019-11-19 15:25:19 +01:00
(alertOutput)="saveIndicator()"
2019-12-16 16:47:10 +01:00
[okDisabled]="indicatorFb & & (indicatorFb.invalid || indicatorFb.pristine)">
2019-12-09 15:38:31 +01:00
< div * ngIf = "indicatorFb" class = "uk-padding-small" [ formGroup ] = " indicatorFb " >
< div dashboard-input class = "uk-form-row" [ formInput ] = " indicatorFb . get ( ' name ' ) " label = "Title" > < / div >
< div dashboard-input class = "uk-form-row" [ formInput ] = " indicatorFb . get ( ' description ' ) "
label="Description" type="textarea">
< / div >
< div class = "uk-form-row uk-flex uk-flex-middle" >
< div dashboard-input class = "uk-width-small" [ formInput ] = " indicatorFb . get ( ' isPublic ' ) "
label="Accessibility" [options]="indicatorUtils.isPublic" type="select">
< / div >
< div dashboard-input class = "uk-margin-small-left uk-width-small" [ formInput ] = " indicatorFb . get ( ' isActive ' ) "
label="Visibility" [options]="indicatorUtils.isActive" type="select">
< / div >
< div dashboard-input class = "uk-margin-small-left uk-width-small" [ formInput ] = " indicatorFb . get ( ' width ' ) "
type="select" [options]="indicatorUtils.chartSizes"
label="Chart Size">
< / div >
< / div >
2019-12-15 23:02:39 +01:00
< h5 class = "uk-text-bold uk-margin-top uk-margin-bottom" >
Chart Settings
< / h5 >
2019-12-09 15:38:31 +01:00
< div * ngIf = "indicatorPaths" formArrayName = "indicatorPaths" >
< div * ngFor = "let indicatorPath of indicatorPaths.controls; let i=index"
[formGroup]="indicatorPath">
2019-12-13 16:56:48 +01:00
< div dashboard-input class = "uk-form-row"
2020-06-02 14:45:08 +02:00
[title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
2019-12-13 16:56:48 +01:00
[formInput]="indicatorPath.get('url')"
label="Chart Url">< / div >
2020-06-02 14:45:08 +02:00
< div * ngIf = "urlParameterizedMessage.length > 0" class = "uk-alert-warning uk-alert" >
{{urlParameterizedMessage}}
< / div >
2019-12-09 15:38:31 +01:00
< div formArrayName = "parameters" >
< div * ngIf = "getParameter(i, 'title')" class = "uk-form-row" >
< div dashboard-input
[formInput]="getParameter(i, 'title').get('value')"
label="Chart Title">< / div >
< / div >
< div * ngIf = "getParameter(i, 'subtitle')" class = "uk-form-row" >
< div dashboard-input
[formInput]="getParameter(i, 'subtitle').get('value')"
label="Chart Subtitle">< / div >
< / div >
< div class = "uk-grid-medium uk-form-row" uk-grid >
2020-06-02 17:44:45 +02:00
< div * ngIf = "!getParameter(i, 'type')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " indicatorPath . get ( ' type ' ) "
type="select"
[options]="(indicatorPath.get('type').value == 'table' & & getParameter(i, 'data_title_0'))?indicatorUtils.getChartTypes(indicatorPath.get('type').value):indicatorUtils.allChartTypes"
label="Chart Type">< / div >
< / div >
2019-12-09 15:38:31 +01:00
< div * ngIf = "getParameter(i, 'type')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' type ' ) . get ( ' value ' ) "
2020-06-02 17:44:45 +02:00
type="select" [options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)"
2019-12-09 15:38:31 +01:00
label="Chart Type">< / div >
2019-11-24 17:30:04 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< div * ngIf = "getParameter(i, 'xAxisTitle')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' xAxisTitle ' ) . get ( ' value ' ) "
label="X-Axis Title">< / div >
2019-11-24 17:30:04 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< div * ngIf = "getParameter(i, 'yAxisTitle')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' yAxisTitle ' ) . get ( ' value ' ) "
label="Y-Axis Title">< / div >
2019-11-24 17:30:04 +01:00
< / div >
2020-05-28 11:35:57 +02:00
< div * ngIf = "getParameter(i, 'data_title_0')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' data_title_0 ' ) . get ( ' value ' ) "
label="Data title">< / div >
< / div >
< div * ngIf = "getParameter(i, 'data_title_1')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' data_title_1 ' ) . get ( ' value ' ) "
label="Data title">< / div >
< / div >
2019-12-09 15:38:31 +01:00
< div * ngIf = "getParameter(i, 'start_year')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' start_year ' ) . get ( ' value ' ) "
label="Year (From)">< / div >
< / div >
< div * ngIf = "getParameter(i, 'end_year')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' end_year ' ) . get ( ' value ' ) "
label="Year (To)">< / div >
< / div >
< / div >
2019-11-24 17:30:04 +01:00
< / div >
2019-12-13 16:56:48 +01:00
< div * ngIf = "indicator && indicator.indicatorPaths[i] && indicator.indicatorPaths[i].safeResourceUrl"
2019-12-09 15:38:31 +01:00
class="uk-margin-medium-top uk-position-relative">
2019-12-15 23:02:39 +01:00
< div * ngIf = "(hasDifference(i)) && !indicatorPath.invalid"
2019-12-09 15:38:31 +01:00
class="uk-width-1-1 uk-height-medium refresh-iframe">
< div class = "uk-position-relative uk-height-1-1" >
< div class = "uk-position-center md-color-white uk-text-center clickable"
(click)="refreshIndicator()">
< div > < i class = "material-icons md-color-white" > refresh< / i > < / div >
< span > Click to refresh the graph view< / span >
< / div >
2019-11-24 17:30:04 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
< iframe * ngIf = "indicator.indicatorPaths[i].source !== 'image'"
[src]="indicator.indicatorPaths[i].safeResourceUrl"
class="uk-width-1-1 uk-height-medium">< / iframe >
< div * ngIf = "indicator.indicatorPaths[i].source === 'image'" >
< img class = "uk-width-1-1 uk-height-medium" [ src ] = " indicator . indicatorPaths [ i ] . url " >
< / div >
2019-11-24 17:30:04 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
2019-11-19 15:25:19 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
2019-11-20 11:32:28 +01:00
< / modal-alert >
2019-12-19 12:17:32 +01:00
< modal-alert # deleteModal ( alertOutput ) = " deleteIndicator ( ) " >
You are about to delete < span class = "uk-text-bold" * ngIf = "indicator && index !== -1" >
2020-01-08 12:00:50 +01:00
"{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"< / span > indicator permanently.
2019-12-19 12:17:32 +01:00
Are you sure you want to proceed?
< / modal-alert >
2020-05-12 17:30:49 +02:00
< modal-alert # deleteChartSectionModal ( alertOutput ) = " deleteSection ( ) " >
You are about to delete this section and his indicators permanently.
Are you sure you want to proceed?
< / modal-alert >