MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

[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:
Argiro Kokogiannaki 2020-06-02 15:44:45 +00:00
parent 31824bf208
commit 892251bbd5
3 changed files with 48 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/topic/indicators.component.html
View File

@ -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>
<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>
</div>
<div>
@ -358,9 +358,15 @@
label="Chart Subtitle"></div>
</div>
<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 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>
</div>
<div *ngIf="getParameter(i, 'xAxisTitle')" class="uk-width-1-3@s">

11
src/app/topic/indicators.component.ts
View File

@ -365,13 +365,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
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({
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\.' +
'[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,}')]),
parameters: parameters
parameters: parameters,
type: this.fb.control(type)
}
));
if(disableUrl) {
@ -382,7 +383,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
for(let index = 0; index < this.indicatorPaths.length; index++) {
this.urlSubscriptions.push(this.indicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
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 ){
// default profile
if(this.stakeholder.defaultId == null){
@ -393,7 +394,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}else {
this.urlParameterizedMessage = "";
}
console.debug(this.urlParameterizedMessage);
(this.indicatorPaths.at(index) as FormGroup).get('type').setValue(indicatorPath.type);
let parameters = this.getParametersAsFormArray(indicatorPath);
(this.indicatorPaths.at(index) as FormGroup).setControl('parameters', parameters);
if (!this.indicator.indicatorPaths[index]) {
@ -455,7 +456,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
});
this.indicator.indicatorPaths.forEach(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);
});
} else {

44
src/app/utils/indicator-utils.ts
View File

@ -148,7 +148,7 @@ export class StakeholderUtils {
export class IndicatorUtils {
chartTypes: Option[] = [
allChartTypes: Option[] = [
{value: 'pie', label: 'Pie'},
{value: 'table', label: 'Table'},
{value: 'line', label: 'Line'},
@ -156,7 +156,8 @@ export class IndicatorUtils {
{value: 'bar', label: 'Bar'},
{value: 'other', label: 'Other'}
];
basicChartTypes:IndicatorPathType[] =["pie", "line", "column", "bar"];
defaultChartType:IndicatorPathType = "other";
chartSizes: Option[] = [
{value: 'small', label: 'Small'},
{value: 'medium', label: 'Medium'},
@ -181,7 +182,26 @@ export class IndicatorUtils {
['bar', 'notes'],
['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([
[true, 'public'],
[false, 'lock']
@ -241,6 +261,7 @@ export class IndicatorUtils {
form.width, form.isActive, form.isPublic, indicatorPaths, form.defaultId);
indicator._id = form.id;
form.indicatorPaths.forEach((indicatorPath, index) => {
indicator.indicatorPaths[index].type = indicatorPath.type;
indicatorPath.parameters.forEach(parameter => {
indicator.indicatorPaths[index].parameters[parameter.key] = parameter.value;
if (parameter.key === 'type') {
@ -252,7 +273,7 @@ export class IndicatorUtils {
}
generateIndicatorByChartUrl(source: SourceType, url: string, type: IndicatorPathType = null, stakeholder:Stakeholder): IndicatorPath {
let indicatorPath = new IndicatorPath('other', source, "", "", []);
let indicatorPath = new IndicatorPath(type, source, "", "", []);
try {
if (source === 'stats-tool') {
indicatorPath.url = url.split("json=")[0] + "json=";
@ -260,18 +281,19 @@ export class IndicatorUtils {
indicatorPath.chartObject = decodeURIComponent(url.split("json=")[1]);
let chart = JSON.parse(indicatorPath.chartObject);
// console.debug(indicatorPath);
//HighCharts
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);
} else {
indicatorPath.type = "column"
indicatorPath.type = this.defaultChartType;
}
this.extractTitle(chart, indicatorPath);
this.extractSubTitle(chart, indicatorPath);
this.extractXTitle(chart, indicatorPath);
this.extractYTitle(chart, indicatorPath);
}else if(indicatorPath.url == "table?json="){
indicatorPath.type = "table";
}
if (indicatorPath.url == "chart?json=" || indicatorPath.url == "table?json=") {
// common for tables and other chart types
@ -303,6 +325,9 @@ export class IndicatorUtils {
}
// console.debug(indicatorPath.parameters);
// console.debug(indicatorPath.chartObject);
if(indicatorPath.type == null){
indicatorPath.type = this.defaultChartType;
}
return indicatorPath;
}
private getQueryObjectName(obj){
@ -313,10 +338,9 @@ export class IndicatorUtils {
}
}
private extractType(obj, indicatorPath: IndicatorPath): IndicatorPathType {
let defaultTypes = ["column", "bar", "pie"];
let type = obj["chartDescription"]["queries"][0]["type"];
if (defaultTypes.indexOf(type) == -1) {
type = defaultTypes [0];
if (this.basicChartTypes.indexOf(type) == -1) {
type = this.defaultChartType;
} else {
obj["chartDescription"]["queries"][0]["type"] = ChartHelper.prefix + "type" + ChartHelper.suffix;
indicatorPath.parameters['type'] = type;