[Monitor Dashboard| Trunk]
Indicator path type: if chart url is table -> set it to table if no type found in parameterization, allow to select type in the form if parameterized type is column, pie, bar, line don't allow to switch to table or other (will not be loaded properly) if parameterized type is table: don't allow to change to other types default type is "other" git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@58824 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
31824bf208
commit
892251bbd5
|
@ -3,7 +3,7 @@
|
||||||
<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 *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>
|
||||||
<div dashboard-input [formInput]="filters.get('chartType')"
|
<div dashboard-input [formInput]="filters.get('chartType')"
|
||||||
type="select" [options]="[all].concat(indicatorUtils.chartTypes)"
|
type="select" [options]="[all].concat(indicatorUtils.allChartTypes)"
|
||||||
label="Chart Type"></div>
|
label="Chart Type"></div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -358,9 +358,15 @@
|
||||||
label="Chart Subtitle"></div>
|
label="Chart Subtitle"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-grid-medium uk-form-row" uk-grid>
|
<div class="uk-grid-medium uk-form-row" uk-grid>
|
||||||
|
<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>
|
||||||
<div *ngIf="getParameter(i, 'type')" class="uk-width-1-3@s">
|
<div *ngIf="getParameter(i, 'type')" class="uk-width-1-3@s">
|
||||||
<div dashboard-input [formInput]="getParameter(i, 'type').get('value')"
|
<div dashboard-input [formInput]="getParameter(i, 'type').get('value')"
|
||||||
type="select" [options]="indicatorUtils.chartTypes"
|
type="select" [options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)"
|
||||||
label="Chart Type"></div>
|
label="Chart Type"></div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="getParameter(i, 'xAxisTitle')" class="uk-width-1-3@s">
|
<div *ngIf="getParameter(i, 'xAxisTitle')" class="uk-width-1-3@s">
|
||||||
|
|
|
@ -365,13 +365,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
||||||
return this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath));
|
return this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath));
|
||||||
}
|
}
|
||||||
|
|
||||||
public addIndicatorPath(value: string = '', parameters: FormArray = new FormArray([]), disableUrl: boolean = false) {
|
public addIndicatorPath(value: string = '', parameters: FormArray = new FormArray([]), disableUrl: boolean = false, type:string=null) {
|
||||||
this.indicatorPaths.push(this.fb.group({
|
this.indicatorPaths.push(this.fb.group({
|
||||||
url: this.fb.control(value, [Validators.required,
|
url: this.fb.control(value, [Validators.required,
|
||||||
Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
|
Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
|
||||||
'[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' +
|
'[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' +
|
||||||
'[a-zA-Z0-9]+\.[^\s]{2,}')]),
|
'[a-zA-Z0-9]+\.[^\s]{2,}')]),
|
||||||
parameters: parameters
|
parameters: parameters,
|
||||||
|
type: this.fb.control(type)
|
||||||
}
|
}
|
||||||
));
|
));
|
||||||
if(disableUrl) {
|
if(disableUrl) {
|
||||||
|
@ -382,7 +383,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
||||||
for(let index = 0; index < this.indicatorPaths.length; index++) {
|
for(let index = 0; index < this.indicatorPaths.length; index++) {
|
||||||
this.urlSubscriptions.push(this.indicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
|
this.urlSubscriptions.push(this.indicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
|
||||||
if (this.indicatorPaths.at(index).get('url').valid) {
|
if (this.indicatorPaths.at(index).get('url').valid) {
|
||||||
let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(value), value, 'bar', this.stakeholder);
|
let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(value), value, this.indicatorPaths.at(index).get('type').value, this.stakeholder);
|
||||||
if(indicatorPath.chartObject && Object.keys(indicatorPath.parameters).indexOf("index_id") ==-1 && Object.keys(indicatorPath.parameters).indexOf("index_name") ==-1 && Object.keys(indicatorPath.parameters).indexOf("index_shortName") ==-1 ){
|
if(indicatorPath.chartObject && Object.keys(indicatorPath.parameters).indexOf("index_id") ==-1 && Object.keys(indicatorPath.parameters).indexOf("index_name") ==-1 && Object.keys(indicatorPath.parameters).indexOf("index_shortName") ==-1 ){
|
||||||
// default profile
|
// default profile
|
||||||
if(this.stakeholder.defaultId == null){
|
if(this.stakeholder.defaultId == null){
|
||||||
|
@ -393,7 +394,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
||||||
}else {
|
}else {
|
||||||
this.urlParameterizedMessage = "";
|
this.urlParameterizedMessage = "";
|
||||||
}
|
}
|
||||||
console.debug(this.urlParameterizedMessage);
|
(this.indicatorPaths.at(index) as FormGroup).get('type').setValue(indicatorPath.type);
|
||||||
let parameters = this.getParametersAsFormArray(indicatorPath);
|
let parameters = this.getParametersAsFormArray(indicatorPath);
|
||||||
(this.indicatorPaths.at(index) as FormGroup).setControl('parameters', parameters);
|
(this.indicatorPaths.at(index) as FormGroup).setControl('parameters', parameters);
|
||||||
if (!this.indicator.indicatorPaths[index]) {
|
if (!this.indicator.indicatorPaths[index]) {
|
||||||
|
@ -455,7 +456,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
||||||
});
|
});
|
||||||
this.indicator.indicatorPaths.forEach(indicatorPath => {
|
this.indicator.indicatorPaths.forEach(indicatorPath => {
|
||||||
this.addIndicatorPath(this.getUrlByStakeHolder(indicatorPath),
|
this.addIndicatorPath(this.getUrlByStakeHolder(indicatorPath),
|
||||||
this.getParametersAsFormArray(indicatorPath), this.indicator.defaultId !== null);
|
this.getParametersAsFormArray(indicatorPath), this.indicator.defaultId !== null, indicatorPath.type);
|
||||||
indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
|
indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -148,7 +148,7 @@ export class StakeholderUtils {
|
||||||
|
|
||||||
export class IndicatorUtils {
|
export class IndicatorUtils {
|
||||||
|
|
||||||
chartTypes: Option[] = [
|
allChartTypes: Option[] = [
|
||||||
{value: 'pie', label: 'Pie'},
|
{value: 'pie', label: 'Pie'},
|
||||||
{value: 'table', label: 'Table'},
|
{value: 'table', label: 'Table'},
|
||||||
{value: 'line', label: 'Line'},
|
{value: 'line', label: 'Line'},
|
||||||
|
@ -156,7 +156,8 @@ export class IndicatorUtils {
|
||||||
{value: 'bar', label: 'Bar'},
|
{value: 'bar', label: 'Bar'},
|
||||||
{value: 'other', label: 'Other'}
|
{value: 'other', label: 'Other'}
|
||||||
];
|
];
|
||||||
|
basicChartTypes:IndicatorPathType[] =["pie", "line", "column", "bar"];
|
||||||
|
defaultChartType:IndicatorPathType = "other";
|
||||||
chartSizes: Option[] = [
|
chartSizes: Option[] = [
|
||||||
{value: 'small', label: 'Small'},
|
{value: 'small', label: 'Small'},
|
||||||
{value: 'medium', label: 'Medium'},
|
{value: 'medium', label: 'Medium'},
|
||||||
|
@ -181,7 +182,26 @@ export class IndicatorUtils {
|
||||||
['bar', 'notes'],
|
['bar', 'notes'],
|
||||||
['other', 'perm_media']
|
['other', 'perm_media']
|
||||||
]);
|
]);
|
||||||
|
getChartTypes(initialType){
|
||||||
|
let types: Option[]= [];
|
||||||
|
if(this.basicChartTypes.indexOf(initialType) != -1){
|
||||||
|
(this.allChartTypes).forEach(option => {
|
||||||
|
if(this.basicChartTypes.indexOf(option.value)!=-1){
|
||||||
|
types.push(option);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return types;
|
||||||
|
}else if(initialType == "table") {
|
||||||
|
(this.allChartTypes).forEach(option => {
|
||||||
|
if (initialType == option.value) {
|
||||||
|
types.push(option);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return types;
|
||||||
|
}else {
|
||||||
|
return this.allChartTypes;
|
||||||
|
}
|
||||||
|
}
|
||||||
isPublicIcon: Map<boolean, string> = new Map([
|
isPublicIcon: Map<boolean, string> = new Map([
|
||||||
[true, 'public'],
|
[true, 'public'],
|
||||||
[false, 'lock']
|
[false, 'lock']
|
||||||
|
@ -241,6 +261,7 @@ export class IndicatorUtils {
|
||||||
form.width, form.isActive, form.isPublic, indicatorPaths, form.defaultId);
|
form.width, form.isActive, form.isPublic, indicatorPaths, form.defaultId);
|
||||||
indicator._id = form.id;
|
indicator._id = form.id;
|
||||||
form.indicatorPaths.forEach((indicatorPath, index) => {
|
form.indicatorPaths.forEach((indicatorPath, index) => {
|
||||||
|
indicator.indicatorPaths[index].type = indicatorPath.type;
|
||||||
indicatorPath.parameters.forEach(parameter => {
|
indicatorPath.parameters.forEach(parameter => {
|
||||||
indicator.indicatorPaths[index].parameters[parameter.key] = parameter.value;
|
indicator.indicatorPaths[index].parameters[parameter.key] = parameter.value;
|
||||||
if (parameter.key === 'type') {
|
if (parameter.key === 'type') {
|
||||||
|
@ -252,7 +273,7 @@ export class IndicatorUtils {
|
||||||
}
|
}
|
||||||
|
|
||||||
generateIndicatorByChartUrl(source: SourceType, url: string, type: IndicatorPathType = null, stakeholder:Stakeholder): IndicatorPath {
|
generateIndicatorByChartUrl(source: SourceType, url: string, type: IndicatorPathType = null, stakeholder:Stakeholder): IndicatorPath {
|
||||||
let indicatorPath = new IndicatorPath('other', source, "", "", []);
|
let indicatorPath = new IndicatorPath(type, source, "", "", []);
|
||||||
try {
|
try {
|
||||||
if (source === 'stats-tool') {
|
if (source === 'stats-tool') {
|
||||||
indicatorPath.url = url.split("json=")[0] + "json=";
|
indicatorPath.url = url.split("json=")[0] + "json=";
|
||||||
|
@ -260,18 +281,19 @@ export class IndicatorUtils {
|
||||||
indicatorPath.chartObject = decodeURIComponent(url.split("json=")[1]);
|
indicatorPath.chartObject = decodeURIComponent(url.split("json=")[1]);
|
||||||
let chart = JSON.parse(indicatorPath.chartObject);
|
let chart = JSON.parse(indicatorPath.chartObject);
|
||||||
// console.debug(indicatorPath);
|
// console.debug(indicatorPath);
|
||||||
//HighCharts
|
|
||||||
if (indicatorPath.url == "chart?json=") {
|
if (indicatorPath.url == "chart?json=") {
|
||||||
if (chart["library"] && chart["library"] == "HighCharts") {
|
if (chart["library"] && (chart["library"] == "HighCharts" || chart["library"] == "eCharts" )) {
|
||||||
indicatorPath.type = this.extractType(chart, indicatorPath);
|
indicatorPath.type = this.extractType(chart, indicatorPath);
|
||||||
} else {
|
} else {
|
||||||
indicatorPath.type = "column"
|
indicatorPath.type = this.defaultChartType;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.extractTitle(chart, indicatorPath);
|
this.extractTitle(chart, indicatorPath);
|
||||||
this.extractSubTitle(chart, indicatorPath);
|
this.extractSubTitle(chart, indicatorPath);
|
||||||
this.extractXTitle(chart, indicatorPath);
|
this.extractXTitle(chart, indicatorPath);
|
||||||
this.extractYTitle(chart, indicatorPath);
|
this.extractYTitle(chart, indicatorPath);
|
||||||
|
}else if(indicatorPath.url == "table?json="){
|
||||||
|
indicatorPath.type = "table";
|
||||||
}
|
}
|
||||||
if (indicatorPath.url == "chart?json=" || indicatorPath.url == "table?json=") {
|
if (indicatorPath.url == "chart?json=" || indicatorPath.url == "table?json=") {
|
||||||
// common for tables and other chart types
|
// common for tables and other chart types
|
||||||
|
@ -303,6 +325,9 @@ export class IndicatorUtils {
|
||||||
}
|
}
|
||||||
// console.debug(indicatorPath.parameters);
|
// console.debug(indicatorPath.parameters);
|
||||||
// console.debug(indicatorPath.chartObject);
|
// console.debug(indicatorPath.chartObject);
|
||||||
|
if(indicatorPath.type == null){
|
||||||
|
indicatorPath.type = this.defaultChartType;
|
||||||
|
}
|
||||||
return indicatorPath;
|
return indicatorPath;
|
||||||
}
|
}
|
||||||
private getQueryObjectName(obj){
|
private getQueryObjectName(obj){
|
||||||
|
@ -313,10 +338,9 @@ export class IndicatorUtils {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
private extractType(obj, indicatorPath: IndicatorPath): IndicatorPathType {
|
private extractType(obj, indicatorPath: IndicatorPath): IndicatorPathType {
|
||||||
let defaultTypes = ["column", "bar", "pie"];
|
|
||||||
let type = obj["chartDescription"]["queries"][0]["type"];
|
let type = obj["chartDescription"]["queries"][0]["type"];
|
||||||
if (defaultTypes.indexOf(type) == -1) {
|
if (this.basicChartTypes.indexOf(type) == -1) {
|
||||||
type = defaultTypes [0];
|
type = this.defaultChartType;
|
||||||
} else {
|
} else {
|
||||||
obj["chartDescription"]["queries"][0]["type"] = ChartHelper.prefix + "type" + ChartHelper.suffix;
|
obj["chartDescription"]["queries"][0]["type"] = ChartHelper.prefix + "type" + ChartHelper.suffix;
|
||||||
indicatorPath.parameters['type'] = type;
|
indicatorPath.parameters['type'] = type;
|
||||||
|
|
Loading…
Reference in New Issue