/* SuperX-VIZ Modul (c) 2023 Daniel Quathamer */

function chartModel(id,name,renderer,datasources)
{
	this.version="0.2b";
	this.id=id;
	this.name=name;
	this.renderer=renderer;
	this.dataSources=datasources;
	//this.globalProperties=globalproperties;
	this.targetDiv=""; //only for d3
	this.chartElements=new Array();
	this.chartPropertiesUsed=new Array();
	this.dataTransformation=new Array();
	
}


function possibleVizType(elemID,value,name,explanation,isDefault ) 
    {
this.elemID=elemID;
this.value=value;
this.name=name;
this.explanation=explanation;
this.isDefault=isDefault;

}

function usedVizType(elemID,vizTypeUniquename,caption,datasource ) 
    {
this.elemID=elemID;
this.vizTypeUniquename=vizTypeUniquename;
this.caption=caption;
this.datasource=datasource;
this.elementTypeProperties=new Array();
}

function usedVizProperty(name,vizPropertyVariablename,propertyValue,propUnit ) 
    {
this.name=name;
this.vizPropertyVariablename=vizPropertyVariablename;
this.propertyValue=propertyValue;
this.propUnit=propUnit;

}
function usedVizTypeProperty(nr,vizTypePropertyUniquename,caption,propertyValue,propertyType ) 
    {
this.nr=nr;
this.vizTypePropertyUniquename=vizTypePropertyUniquename;
this.caption=caption;
this.propertyValue=propertyValue;
this.propertyType=propertyType;

}
function dataTransformationCol(tableId,colname,colfunction) 
    {
this.tableId=tableId;
this.colname=colname;
this.colfunction=colfunction;

}


function selectionRowMetaData(nr,targetColumn,colname,colcaption,coltype,colfunction)
{
this.nr=nr;
this.targetColumn=targetColumn;
this.colname=colname;
this.colcaption=colcaption;
this.coltype=coltype;
this.colfunction=colfunction;
}

function selectionPropertyValue(nr,name,value,isDefault ) 
    {
this.nr=nr;
this.name=name;
this.value=value;
this.isDefault=isDefault;

}



function dimFunction(nr,name,value,isDefault ) 
    {
this.nr=nr;
this.name=name;
this.value=value;
this.isDefault=isDefault;

}
function dimensionProperty(name,caption,explanation,isMeasure,isMandatory,datasource) 
{
this.name=name;
this.caption=caption;
this.isMeasure=isMeasure;
this.isMandatory=isMandatory;
this.explanation=explanation;
this.datasource=datasource;
this.getValueResultset = function () {
var valueOptions=[];
var optionCounter=0;
//selectionRsMetaData=fillSelectionResultMetaData();
//console.log("felder"+selectionRsMetaData.length);
var isDefault=false;
	for(var j=0;j < rsColumnMetaData[datasource].length;j++)
		{
			if(rsColumnMetaData[datasource][j].colcaption.trim() !="" 
			//&& (
			//	isMeasure==false || rsColumnMetaData[datasource][j].coltype == 4 || rsColumnMetaData[datasource][j].coltype == 3)
			//
			)
			{
					//console.log("feld "+rsColumnMetaData[j].nr+selectionRsMetaData[j].targetColumn);
				var o=new selectionPropertyValue(rsColumnMetaData[datasource][j].nr,rsColumnMetaData[datasource][j].colcaption,rsColumnMetaData[datasource][j].colname,isDefault);
				valueOptions[optionCounter]=o;
				optionCounter++;
				if(isDefault)
					isDefault=false;
			}
		}
	return valueOptions;
}

}


function selectionProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction) 
    {
	/*OBSOLETE*/
this.name=name;
this.caption=caption;
this.isDynamic=isDynamic;
this.isMeasure=isMeasure;
this.staticValues=staticValues;
this.isMandatory=isMandatory;
this.defaultValue=defaultValue;
this.optionalFunction=optionalFunction;
this.getValueResultset = function () {
        var valueOptions=[];
	var optionCounter=0;
	if(isDynamic)
	{
		for(var j=0;j < rsMetaData.length;j++)
			{
			var isDefault=false;
			if(rsMetaData[j].colcaption.trim() !="" &&
			(isMeasure==false || rsMetaData[j].coltype == 4 || rsMetaData[j].coltype == 3)
			)
				{
					if(rsMetaData[j].colcaption==defaultValue)
						isDefault=true;
					var o=new selectionPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].colname,isDefault);
					valueOptions[optionCounter]=o;
					optionCounter++;
				}
			}
	}
	else
	{
		var staticValuesArray = staticValues.split(/\|/);
		for(var k=0;k < staticValuesArray.length;k++)
		{
			var isDefault=false;
			if(rsMetaData[j].colcaption==defaultValue)
						isDefault=true;
			var o=new selectionPropertyValue(k,staticValuesArray[k],staticValuesArray[k],isDefault);
			valueOptions[k]=o;
		}
	}
	return valueOptions;
    }
}

/*Transfer form to model: */
function updateChartModel()
{
	
	var myChartPropertiesUsed=new Array();
	//first empty properties:
		/*for(var k=0;k< myChartModel.chartPropertiesUsed.length;k++)
		{
			myChartModel.chartPropertiesUsed[k].pop();
		}*/

	if(document.getElementById("chartName").value=="")
		document.getElementById("chartName").value=vizInitialName;
	var chartName=document.getElementById("chartName").value;
	//myChartModel.options.caption=chartName;
	if(myChartModel.renderer=="")
		myChartModel.renderer=document.getElementById("fldVizRenderer").value;
	var myCaption=new usedVizProperty("caption","caption",chartName);
	myChartPropertiesUsed.push(myCaption);
	//var myForm=document.forms["chartPropertiesForm"];
	for(var k=0;k < commonChartProperties.length;k++)
		{
			if(getCommonChartProperty(commonChartProperties[k].name)!="")
			{
				var myProp=new usedVizProperty(commonChartProperties[k].name,commonChartProperties[k].variableName,getCommonChartProperty(commonChartProperties[k].name),commonChartProperties[k].propUnit);
				myChartPropertiesUsed.push(myProp);
			}
		}

		//first Collect all groups:

	myChartModel.chartPropertiesUsed=myChartPropertiesUsed;
	
	//Update the source Code TEXTAREA:
	updateChartModelCode(myChartModel);
	return myChartModel;
	
}

function renderChart(chartDiv,currentChartModel,datasource,title)
{
	if(!datasource)
		var datasource=0;
	if(!title)
		var title=document.getElementById("chartName").value;
	/*if(document.getElementById("chartName").value=="")
		document.getElementById("chartName").value=vizInitialName;*/
	if(currentChartModel.chartElements.length>0 && currentChartModel.chartElements[0])
	{
		renderChartSVGFromModel(currentChartModel,chartDiv,datasource,title);
	}
	else
		document.getElementById(chartDiv).innerHTML="<svg style=\"width:100%;height: auto;\" viewBox=\"0 0 800 600\" width=\"800\" height=\"600\">"+
		"<rect x=\"0\" y=\"0\" width=\"800\" height=\"450\" fill=\"#cccccc\"></rect></svg>";
		//

}

function prepareSelectionForm()
{
	var selectionProperties=[];
	
	var myProp= new selectionProperty("dimension1","Dimension 1",true,false,true,null,null,true);
	selectionProperties[0]=myProp;
	var myProp= new selectionProperty("dimension2","Dimension 2",true,false,false,null,null,true);
	selectionProperties[1]=myProp;
	var myProp= new selectionProperty("measure1","Maß",true,true,true,null,null,true);
	selectionProperties[2]=myProp;

return selectionProperties;
}


function generateFormFieldHtml(labelText,fieldname,tooltiptext,inputElem)
{
	var zs="<div class='field is-grouped'>";
	zs+="<div class='label-container' lang='de'><span class='labelNormal has-tooltip-bottom' data-tooltip='"+tooltiptext+"'>"+labelText+"</span></div>";
	
	zs+="<div class='control'><div class='field'><div class='control is-expanded'>";
	zs+="<div class='select  is-small is-fullwidth is-focused'>";
	//zs+="<select id='"+fieldname+"''><option>TEST</option></select>";
	zs+=getOuterHTML(inputElem);
	zs+="</div></div></div></div>"; //Ende field body
	zs+="</div>";//Ende field
	return zs;
	
		
	
}
function getOuterHTML(element) {
    var container = document.createElement("div");
    container.appendChild(element.cloneNode(true));

    return container.innerHTML;
}

function createChartElementConfig1Form(renderer,elemID)
{
	//first empty form:
	var formChartElementConfig1=document.getElementById("ChartElementConfig1Div");
	while (formChartElementConfig1.firstChild) {
		formChartElementConfig1.removeChild(formChartElementConfig1.firstChild);
	}
	var formChartElementConfig2=document.getElementById("ChartElementConfig2Div");
	while (formChartElementConfig2.firstChild) {
		formChartElementConfig2.removeChild(formChartElementConfig2.firstChild);
	}
	//reset ElemID:
	document.getElementById("chartElementID").value=elemID;
	//any previous values?
	var myChartElem=null;
	if(myChartModel.chartElements && elemID !="")
	{
		var filtered=myChartModel.chartElements.filter(obj => obj.elemID == elemID);
		var myChartElem=filtered[0];
	}
		//First Datasource:
	//const elementDatasourceDiv=document.createElement("div");
	
	
	/*
	const fieldDatasourceElem = document.createElement("div");
	fieldDatasourceElem.classList.add("field");
	fieldDatasourceElem.classList.add("is-horizontal");
		//label:
	const labelDatasourceElem = document.createElement("div");
	labelDatasourceElem.classList.add("field-label");
	labelDatasourceElem.classList.add("is-small");
		const labelDatasource = document.createElement("label");
		labelDatasource.classList.add("label");
		labelDatasource.classList.add("is-required");
		labelDatasource.classList.add("is-small");
		labelDatasource.classList.add("has-tooltip-right");
		labelDatasource.setAttribute("data-tooltip","Datenquelle für das Diagrammelement");

		const textnode = document.createTextNode("Datenquelle");
		labelDatasource.appendChild(textnode);
		labelDatasourceElem.appendChild(labelDatasource);
		fieldDatasourceElem.appendChild(labelDatasourceElem);
	const selDatasourceFbodyElem = document.createElement("div");
	selDatasourceFbodyElem.classList.add("field-body");
	const selDatasourceElem = document.createElement("select");
		selDatasourceElem.name="chartElementDatasource";
		selDatasourceElem.id="chartElementDatasource";
		selDatasourceElem.classList.add("select");
		selDatasourceElem.classList.add("is-small");
		selDatasourceElem.style.width="100px";

		selDatasourceElem.onchange= function () {  
				createChartElementsConfig2Form(renderer);
		};
		fillSelectOptions(selDatasourceElem,rsTableMetaData,true,(myChartElem!=null?myChartElem.datasource:null));
		selDatasourceFbodyElem.appendChild(selDatasourceElem);
	fieldDatasourceElem.appendChild(selDatasourceFbodyElem);

	
	formChartElementConfig1.appendChild(fieldDatasourceElem);*/
	
	const selDatasourceElem = document.createElement("select");
		selDatasourceElem.name="chartElementDatasource";
		selDatasourceElem.id="chartElementDatasource";
		selDatasourceElem.classList.add("select");
		selDatasourceElem.classList.add("is-small");
		//selDatasourceElem.style.width="100px";

		fillSelectOptions(selDatasourceElem,rsTableMetaData,true,(myChartElem!=null?myChartElem.datasource:null));
		
	
	
	var datasourceFieldHtml=generateFormFieldHtml("Datenquelle","chartElementDatasource","Datenquelle für das Diagrammelement, bei Makroberichten wählen Sie die Tabellennnummer",selDatasourceElem);
	
	const selVizTypeElem = document.createElement("select");
		selVizTypeElem.name="chartElementVizType";
		selVizTypeElem.id="chartElementVizType";
		selVizTypeElem.classList.add("select");
		selVizTypeElem.classList.add("is-small");
		//selVizTypeElem.style.width="100px";
		
		fillSelectOptions(selVizTypeElem,getPossibleVizTypes(renderer),false,(myChartElem!=null?myChartElem.vizTypeUniquename:null));
	
	
	var vizTypeFieldHtml=generateFormFieldHtml("Grafikelement-Typ","chartElementVizType","Art des Grafikelements",selVizTypeElem);
	
	formChartElementConfig1.innerHTML=datasourceFieldHtml+vizTypeFieldHtml;
	//add onchange:
	document.getElementById("chartElementDatasource").addEventListener(
     'change',
     function() { createChartElementsConfig2Form(renderer); },
     false
  );
  document.getElementById("chartElementVizType").addEventListener(
     'change',
     function() { createChartElementsConfig2Form(renderer); },
     false
  );
	
		//Then vizType:
	/*
	const fieldVizTypeElem = document.createElement("div");
	fieldVizTypeElem.classList.add("field");
	fieldVizTypeElem.classList.add("is-horizontal");
		//label:
	const labelVizTypeElem = document.createElement("div");
	labelVizTypeElem.classList.add("field-label");
	labelVizTypeElem.classList.add("is-small");
		const labelVizType = document.createElement("label");
		labelVizType.classList.add("label");
		labelVizType.classList.add("is-required");
		labelVizType.classList.add("is-small");
		labelVizType.classList.add("has-tooltip-right");
		labelVizType.setAttribute("data-tooltip","Art des Grafikelements");

		const textnodeVizType = document.createTextNode("Grafikelement-Typ");
		labelVizType.appendChild(textnodeVizType);
		labelVizTypeElem.appendChild(labelVizType);
		fieldVizTypeElem.appendChild(labelVizTypeElem);

		const selVizTypeFbodyElem = document.createElement("div");
		selVizTypeFbodyElem.classList.add("field-body");
	
		const selVizTypeElem = document.createElement("select");
		selVizTypeElem.name="chartElementVizType";
		selVizTypeElem.id="chartElementVizType";
		selVizTypeElem.classList.add("select");
		selVizTypeElem.classList.add("is-small");
		selVizTypeElem.style.width="100px";
		selVizTypeElem.onchange= function () {  
				createChartElementsConfig2Form(renderer);
		};
		fillSelectOptions(selVizTypeElem,getPossibleVizTypes(renderer),false,(myChartElem!=null?myChartElem.vizTypeUniquename:null));
		
		selVizTypeFbodyElem.appendChild(selVizTypeElem);
	fieldVizTypeElem.appendChild(selVizTypeFbodyElem);
	
	formChartElementConfig1.appendChild(fieldVizTypeElem);
	*/
	//display Element if already saved:
	if(elemID!="")
		createChartElementsConfig2Form(renderer,elemID);
	
	}
function createChartElementsConfig2Form(renderer,elemID)
{	
	var dataSource=document.getElementById("chartElementDatasource").value;
	var vizType=document.getElementById("chartElementVizType").value;
	//now Elements:
	var formChartElementConfig2Div=document.getElementById("ChartElementConfig2Div");
	while (formChartElementConfig2Div.firstChild) {
		formChartElementConfig2Div.removeChild(formChartElementConfig2Div.firstChild);
	}
	//any previous values?
	//reset general properties:
	//renderGeneralChartPropertiesForm("generalChartPropertiesFormDiv",myCommonChartProperties,renderer);	

	const elementDivBox = document.createElement("div");
	//first only Dimensions and measures:
	var elementDivBoxHtml="";
	for(var k=0;k < vizTypeProperties.length;k++)
	{
		if(vizType==vizTypeProperties[k].typeUniquename && 
		(vizTypeProperties[k].groupUniquename=="CATEGORY"
		|| vizTypeProperties[k].groupUniquename=="MEASURE"
		)
		)
		{
			var selectedValue=getChartElementPropertyValue(elemID,vizTypeProperties[k].propUniquename);
			elementDivBoxHtml+=renderDimensionField(vizTypeProperties[k],dataSource,selectedValue);
			//elementDivBox.appendChild(renderDimensionField(vizTypeProperties[k],dataSource,selectedValue));
			}
	}
	elementDivBox.innerHTML=elementDivBoxHtml;
	//chartElement-specific properties:
	//without Dimensions and measures:
	
	/*for(var k=0;k < vizTypeProperties.length;k++)
	{
		if(vizType==vizTypeProperties[k].typeUniquename 
		&& vizTypeProperties[k].groupUniquename!="CATEGORY"
		&& vizTypeProperties[k].groupUniquename!="MEASURE"
		){
			
			var currentCommonChartProperties=commonChartProperties.filter(obj => obj.name == vizTypeProperties[k].propUniquename);
			if(currentCommonChartProperties.length >0)
			{
				
				elementDivBox.appendChild(renderChartPropertyField(elemID,currentCommonChartProperties[0],false));
				}
				else
				{
					const unknownFieldDiv = document.createElement("div");
					const unknownField=document.createTextNode("Unbekanntes Feld "+vizTypeProperties[k].propUniquename);
					unknownFieldDiv.appendChild(unknownField);
					elementDivBox.appendChild(unknownFieldDiv);
				}
				
			}
	}*/
	

	const saveBtnDiv = document.createElement("div");
	const saveBtn = document.createElement("input");
	saveBtn.type="BUTTON";
	saveBtn.value="Übernehmen";
	saveBtn.classList.add("button");
	saveBtn.classList.add("is-small");

	saveBtn.onclick =function() {
            saveChartElementConfig()
        }
	saveBtnDiv.appendChild(saveBtn);
	elementDivBox.appendChild(saveBtnDiv);
	
	formChartElementConfig2Div.appendChild(elementDivBox);
	
	
}
function getChartElementPropertyValue(elemID,propUniquename)
{
	var retVal=null;
	var myChartElem=null;
	if(myChartModel.chartElements && elemID !=null)
	{
		var filtered=myChartModel.chartElements.filter(obj => obj.elemID == elemID);
		var myChartElem=filtered[0];
		if(myChartElem.elementTypeProperties && myChartElem.elementTypeProperties.length)
		{
			for(var k=0;k < myChartElem.elementTypeProperties.length;k++)
			{
			myVizTypeProperty=myChartElem.elementTypeProperties[k];
			if(myVizTypeProperty.vizTypePropertyUniquename==propUniquename)
			{
				retVal=myVizTypeProperty.propertyValue;
			}
			}
		}
	}
	return retVal;
}
function loadChartElementConfig(myElem)
{
	var elemID=myElem.value;
	if(elemID=="")
		alert("Kein Grafikelement gefunden");
	else
	{
	var renderer=document.getElementById("fldVizRenderer").value;
	var myVizType=myChartModel.chartElements.filter(obj => obj.elemID == elemID);
	//var myVizType=myChartModel.chartElements[elemID];
	createChartElementConfig1Form(renderer,elemID);
	//document.getElementById("chartElementVizType").value=myVizType.vizTypeUniquename;
	//document.getElementById("chartElementDatasource").value=myVizType.datasource;
	}
}
function saveChartElementConfig()
{
	var elemID=document.getElementById("chartElementID").value;
	var vizTypeUniquename=document.getElementById("chartElementVizType").value;
	var datasource=document.getElementById("chartElementDatasource").value;
	var title=document.getElementById("chartName").value;
	var nextElemID=parseInt(document.getElementById("vizElementCounter").value) +1;
	var mode="update";
	if(elemID=="")
	{
	//insert mode:	
	mode="insert";
	if(myChartModel.chartElements)
		elemID=myChartModel.chartElements.length +1;
		else
		elemID="0";
	}
	var myVizType=new usedVizType(elemID,vizTypeUniquename,vizTypeUniquename,datasource); //nr,vizTypeUniquename,caption,datasource
	var propertyCounter=0;
	for(var k=0;k < vizTypeProperties.length;k++)
	{
		
		if(vizTypeUniquename==vizTypeProperties[k].typeUniquename
		&& document.getElementById(vizTypeProperties[k].propUniquename)
		&& document.getElementById(vizTypeProperties[k].propUniquename).value !="")
		{
			var myUsedVizTypeProperty=new usedVizTypeProperty(elemID,vizTypeProperties[k].propUniquename, vizTypeProperties[k].caption,document.getElementById(vizTypeProperties[k].propUniquename).value,vizTypeProperties[k].propertyType); //))nr,vizTypePropertyUniquename,caption,propertyValue )
			myVizType.elementTypeProperties.push(myUsedVizTypeProperty); 
		}
	}
	//myVizType.elementTypeProperties=null;
	//TODO: Existenz abfangen, hier wird einfach hinzugefügt:
	if(mode=="update")
	{
		for(var k=0;k<myChartModel.chartElements.length;k++)
		{
		if(myChartModel.chartElements[k].elemID==elemID)
				myChartModel.chartElements[k]=myVizType;
		}
		}
	else
		myChartModel.chartElements.push(myVizType);
	const chartElementListSelect=document.getElementById("chartElementID");
	chartElementListSelect.style="display:inline;";
	fillChartElementListSelect(chartElementListSelect,elemID);

	//document.getElementById("vizElementCounter").value=myChartModel.chartElements.length;
	renderChart('chartDiv',myChartModel,datasource,title);
	
	/*var marksArray=new Array();
	marksArray[elemID]=Plot.barX(rs_table0,
	 	{
    		          x: "gesamt", 
    		          y: "eintrag",
			  fill: "blue"
    		        }
			);
	chartOptions["marks"].push(marksArray);*/
	
}
function removeChartElementConfig()
{
	
	var elemID=document.getElementById("chartElementID").value;
	if(elemID!="")
	{
	var renderer=document.getElementById("fldVizRenderer").value;
		var filtered=myChartModel.chartElements.filter(obj => obj.elemID != elemID);
		myChartModel.chartElements=filtered;
		//myChartModel.chartElements.pop();
		//elemID--;
		//if(document.getElementById("chartElementID"))
		//	document.getElementById("chartElementID").value=elemID;
		document.getElementById("vizElementCounter").value=myChartModel.chartElements.length;
		const chartElementListSelect=document.getElementById("chartElementID");
		fillChartElementListSelect(chartElementListSelect);
		createChartElementConfig1Form(renderer,null);
		renderChart('chartDiv',myChartModel);
	}
}

function fillChartElementListSelect(mySelectElem,selectedValue)
{
	var chartElementListSelectOptionArray=new Array();
	if(myChartModel.chartElements.length>0)
	{
		
		for(var k=0;k < myChartModel.chartElements.length;k++)
		{
			var myOptionValue=new possibleVizType(myChartModel.chartElements[k].elemID,
			myChartModel.chartElements[k].elemID,
			myChartModel.chartElements[k].vizTypeUniquename + "-"+myChartModel.chartElements[k].datasource,
			"", //explanation
			(myChartModel.chartElements[k].elemID==selectedValue ? true:false) //isDefault
			);
			chartElementListSelectOptionArray.push(myOptionValue);
		}
	}
	fillSelectOptions(mySelectElem,chartElementListSelectOptionArray,false,selectedValue);

}

function showChartElementsBodyForm(elemID)
{
	//Reset Elements Form
	//elemID++;
	var filtered=myChartModel.chartElements.filter(obj => obj.elemID == elemID);
	
	document.getElementById("chartElementID").value=elemID;
	document.getElementById("chartElementVizType").value=filtered[0].vizTypeUniquename;
	var formChartElementConfig2Div=document.getElementById("ChartElementConfig2Div");
	while (formChartElementConfig2Div.firstChild) {
		formChartElementConfig2Div.removeChild(formChartElementConfig2Div.firstChild);
	}
	
}

function resetChartPropertiesForm(chosenRenderer)
{
	myChartModel=new chartModel(1,"",document.getElementById("fldVizRenderer").value,rsTableMetaData);
	renderChart('chartDiv',myChartModel);
	//Show Plot Code if renderer =plot:
	var myDiv=document.getElementById("chartCodeDiv");
	if(chosenRenderer=="plot" || chosenRenderer=="echarts")
		myDiv.style.display="block";
	else
		myDiv.style.display="none";
	createChartElementConfig1Form(chosenRenderer,null);
	return true;
}
function getPossibleVizTypes(renderer)
{
	
	var possibleVizTypes=new Array();
	for(var k=0;k < vizTypes.length;k++)
		{
		if(vizTypes[k].rendererUniquename==renderer)
			{
				var newVizType = new possibleVizType( //nr,value,name,explanation,isDefault 
				k,vizTypes[k].uniquename,vizTypes[k].caption,'',false);
				possibleVizTypes.push(newVizType);
				
				
			}
		}
		
	return possibleVizTypes;
}
function fillDimensionProperty(vizTypeProperty,datasource)
{
	var isMeasure=(vizTypeProperty.groupUniquename=="MEASURE")?true:false;
	var myProp= new dimensionProperty(vizTypeProperty.propUniquename,vizTypeProperty.caption,vizTypeProperty.explanation,isMeasure,vizTypeProperty.isMandatory,datasource);
	
	return myProp;
}
function showChartPropertiesFormDiv(formDiv,formElementsDiv,renderer)
{
	if(myChartModel != null)
	{
	var myDiv=document.getElementById(formDiv);
	switch (formDiv)
	{
		case "generalChartPropertiesFormDiv":
			renderGeneralChartPropertiesForm(formElementsDiv,commonChartProperties,myChartModel);
		break;
		case "ChartElementsDiv":
			createChartElementConfig1Form(myChartModel.renderer,null);
		break;
		default:
		//do nothing
		break;
		}
			

	if(myDiv.style.display=="block")
		myDiv.style.display="none";
	else
		myDiv.style.display="block";
}
}

function showSaveChartFormDiv(formDiv,renderer)
{
	var myDiv=document.getElementById(formDiv);
	
	if(myDiv.style.display=="block")
		myDiv.style.display="none";
	else
		myDiv.style.display="block";

}


function prepareForm(vizTypeUniquename,vizTypeProperties)
{
	var chartProperties=[];
	var propertyCounter=0;
	for(var k=0;k < vizTypeProperties.length;k++)
	{
	if(vizTypeUniquename==vizTypeProperties[k].typeUniquename)
	{
		var isMeasure=(vizTypeProperties[k].groupUniquename=="MEASURE")?true:false;
		var myProp= new dimensionProperty(vizTypeProperties[k].propUniquename,vizTypeProperties[k].caption,vizTypeProperties[k].explanation,isMeasure,vizTypeProperties[k].isMandatory);
		chartProperties.push(myProp);
		propertyCounter++;
	}
	}
	return chartProperties;
}
/*
function prepareBarXForm()
{
	var chartProperties=[];
	var propertyCounter=0;
	var myProp= new dimensionProperty("viz_dimension1","Kategorie-Dimension",false,true);
	chartProperties[0]=myProp;
	var myProp= new dimensionProperty("viz_measure1","Maß",true,true);
	chartProperties[1]=myProp;

return chartProperties;
}

function prepareBarYForm()
{
	var chartProperties=[];
	var propertyCounter=0;
	var myProp= new dimensionProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true);
	chartProperties[0]=myProp;
	var myProp= new dimensionProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true);
	chartProperties[1]=myProp;
	var myProp= new dimensionProperty("viz_measure1","Maß",true,true,true,null,null,true);
	chartProperties[2]=myProp;

return chartProperties;
}

function prepareLineForm()
{
	var chartProperties=[];
	var propertyCounter=0;
	var myProp= new dimensionProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true);
	chartProperties[0]=myProp;
	var myProp= new dimensionProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true);
	chartProperties[1]=myProp;
	var myProp= new dimensionProperty("viz_measure1","Maß",true,true,true,null,null,true);
	chartProperties[2]=myProp;

return chartProperties;
}

function prepareLineForm_alt()
{
	var chartProperties=[];
	var propertyCounter=0;
	var myProp= new dimensionProperty("dimension1","X-Achse",true,false,true,null,null,true);
	chartProperties[0]=myProp;
	var myProp= new dimensionProperty("measure1","Y-Achse",true,true,true,null,null,true);
	chartProperties[1]=myProp;

return chartProperties;
}
*/


function selectionResultPreview(myDiv)
{
	myDivElem=document.getElementById(myDiv);
if(myDivElem.style.display=="none")
{
	var selectionRs=[];
	var selectionRsMetaData=[];
	var rowcount=rs.length;
	var maxLenCategoryDim=0;
	var maxMeasure=0;
	selectionRsMetaData=fillSelectionResultMetaData();
	//alert(selectionRsMetaData[0].colname);
	selectionRs=fillSelectionResult(selectionRsMetaData);

	showSelectionTable("selectionResultPreviewTable",selectionRs,selectionRsMetaData,10);
	myDivElem.style.display="block";
}
else
	myDivElem.style.display="none";
}
function fillSelectionResultMetaData()
{
	var selectionRsMetaData=[];
	var dimension1=document.getElementById("dimension1").value;
	var dimension2=document.getElementById("dimension2").value;
	var measure=document.getElementById("measure1").value;
	
	var functionOfDimension1=document.getElementById("dimension1_fn").value;
	var functionOfDimension2=document.getElementById("dimension2_fn").value;
	var functionOfMeasureDim=document.getElementById("measure1_fn").value;
	
	//first fill metadata:

	var counter=1;
	selectionRsMetaData.push(new selectionRowMetaData(counter,"dimension1",dimension1,getColumnCaption(dimension1),0,functionOfDimension1));
	if(dimension2!="")
		{
		counter++;
		var dim2=new selectionRowMetaData(counter,"dimension2",dimension2,getColumnCaption(dimension2),0,functionOfDimension2);
		selectionRsMetaData.push(dim2 );
		}
	counter++;
	selectionRsMetaData.push(new selectionRowMetaData(counter,"measure",measure,getColumnCaption(measure),0),functionOfMeasureDim);
	
	return selectionRsMetaData;
}



function renderDimensionField(vizTypeProperty,datasource,selectedValue)
{
	const selElem = document.createElement("select");
		selElem.name=vizTypeProperty.propUniquename;
		selElem.id=vizTypeProperty.propUniquename;
		var dimensionProperty=fillDimensionProperty(vizTypeProperty,datasource);
		fillSelectOptions(selElem,dimensionProperty.getValueResultset(),dimensionProperty.isMandatory,selectedValue);

	var zs=generateFormFieldHtml(vizTypeProperty.caption,vizTypeProperty.propUniquename,"Je nach Grafikelement Festlegung der Achsen oder Dimensionen und Maße.",selElem); //TODO tooltip
	return zs;
}
function renderDimensionFieldAlt(vizTypeProperty,datasource,selectedValue)
{
		const fieldElem = document.createElement("div");
		fieldElem.classList.add("field");
		fieldElem.classList.add("is-horizontal");
		//label:
		const labelElem = document.createElement("div");
		labelElem.classList.add("field-label"); // is-normal
		labelElem.classList.add("is-small");
		const label = document.createElement("label");
		label.classList.add("label");
		label.classList.add("is-required");
		label.classList.add("is-small");
		label.classList.add("has-tooltip-right");
		//label.setAttribute("data-tooltip",dimensionProperty.explanation);

		const textnode = document.createTextNode(vizTypeProperty.caption);
		label.appendChild(textnode);
		labelElem.appendChild(label);
		fieldElem.appendChild(labelElem);
		//field body:
		const fbodyElem = document.createElement("div");
		fbodyElem.classList.add("field-body");
		
		//input:
		
		const inputFieldElem = document.createElement("div");
		inputFieldElem.classList.add("field");
		inputFieldElem.classList.add("is-active");
		inputFieldElem.style.width="100px";
		const inputSelectElem = document.createElement("div");
		inputSelectElem.classList.add("select");
		inputSelectElem.classList.add("is-small");
		//inputSelectElem.classList.add("is-fullwidth");
		
		const selElem = document.createElement("select");
		selElem.name=vizTypeProperty.propUniquename;
		selElem.id=vizTypeProperty.propUniquename;
/*	vermutlich unnötig:	selElem.onchange= function () {  
				renderChart('chartDiv'); 
		};*/
		var dimensionProperty=fillDimensionProperty(vizTypeProperty,datasource);
		fillSelectOptions(selElem,dimensionProperty.getValueResultset(),dimensionProperty.isMandatory,selectedValue);
		inputSelectElem.appendChild(selElem);
		inputFieldElem.appendChild(inputSelectElem);
		fbodyElem.appendChild(inputFieldElem);
		
		fieldElem.appendChild(fbodyElem);
		return fieldElem;

}

function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,currentChartModel)
{
	//first empty form:
	var myForm=document.getElementById(formDiv);
	while (myForm.firstChild) {
		myForm.removeChild(myForm.firstChild);
	}
	//first Collect all groups:
	var commonChartPropertyGroups=[];
	var previousGroup="";
	for(var k=0;k < myCommonChartProperties.length;k++)
	{
		if(myCommonChartProperties[k].rendererUniquename==currentChartModel.renderer || myCommonChartProperties[k].isGeneric==1)
		{
			var groupUniquename=myCommonChartProperties[k].groupUniquename;
			if(groupUniquename!="" 
				&& groupUniquename != previousGroup
				&& myCommonChartProperties[k].groupVariableName !=""
				)
			{
			var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,"");
			commonChartPropertyGroups.push(newcommonChartPropertyGroup);
			previousGroup=groupUniquename;
			}
		}
	
	}
	const columnDiv = document.createElement("div");
	for(var i=0;i < commonChartPropertyGroups.length;i++)
	{
	
		const columnGroupDiv = document.createElement("div");
		columnGroupDiv.id=commonChartPropertyGroups[i].groupUniquename;
		columnGroupDiv.classList.add("block");
		
		const columnGroupHeaderDiv = document.createElement("div");
		const colHeader = document.createTextNode(commonChartPropertyGroups[i].caption);
		const colHeaderBold = document.createElement("strong");
		colHeaderBold.appendChild(colHeader);
		const colHeaderParagraph = document.createElement("label");
		colHeaderParagraph.classList.add("label");
		colHeaderParagraph.classList.add("is-small");
		colHeaderParagraph.appendChild(colHeaderBold);
		//Toggle visibility:
		const colHeaderToggleBtn = document.createElement("a");
		colHeaderToggleBtn.id="openBody"+commonChartPropertyGroups[i].groupUniquename;
		//colHeaderToggleBtn.classList.add("is-small");
		colHeaderToggleBtn.onclick =function() {
            toggleGroupBodyDiv(this.id)
        }
		const colHeaderToggleBtnText = document.createTextNode(" ...");
		colHeaderToggleBtn.appendChild(colHeaderToggleBtnText);
		colHeaderParagraph.appendChild(colHeaderToggleBtn);
		columnGroupHeaderDiv.appendChild(colHeaderParagraph);
		//columnGroupHeaderDiv.appendChild(colHeaderToggleBtn);
		
		columnGroupDiv.appendChild(columnGroupHeaderDiv);
		const columnGroupBodyDiv = document.createElement("div");
		columnGroupBodyDiv.id="Body"+commonChartPropertyGroups[i].groupUniquename;
		columnGroupBodyDiv.style.display="none";
		for(var k=0;k < myCommonChartProperties.length;k++)
		{
			if(myCommonChartProperties[k].groupUniquename==commonChartPropertyGroups[i].groupUniquename
			&& myCommonChartProperties[k].variableName!=""
			//&& !isChartPropertyValidForChartelements(myCommonChartProperties[k],currentChartModel)
			&& (myCommonChartProperties[k].rendererUniquename==currentChartModel.renderer
			//|| myCommonChartProperties[k].isGeneric==1
			)
			)
			{
				columnGroupBodyDiv.appendChild(renderChartPropertyField(null,myCommonChartProperties[k],true));
				}
		}
		columnGroupDiv.appendChild(columnGroupBodyDiv);
	columnDiv.appendChild(columnGroupDiv);
	
	}
	myForm.appendChild(columnDiv);
	
}




function toggleGroupBodyDiv(groupBodyDiv)
{
	var bodyDiv=groupBodyDiv.substr(4); //remove "open" Prefix
	var myDiv=document.getElementById(bodyDiv);
	if(myDiv.style.display=="block")
		myDiv.style.display="none";
	else
		myDiv.style.display="block";

}

function renderChartPropertyField(elemID,chartProperty,isCommon)
{
		//Wenn im chartModel schon ein Wert vorhanden ist, wird er vorbelegt: if(chartProperty)
		var propValue="";
		if(myChartModel && isCommon && myChartModel.chartPropertiesUsed.length>0)
		{
			propValue=getChartPropertyFromModel(myChartModel.chartPropertiesUsed,chartProperty.name,isCommon );
		}
		if(myChartModel && !isCommon && myChartModel.chartElements.length >0)
		{
			var filtered=myChartModel.chartElements.filter(obj => obj.elemID == elemID);
			var myChartElem=filtered[0];
		if(myChartElem && myChartElem.elementTypeProperties && myChartElem.elementTypeProperties.length)
			{

 			propValue=getChartPropertyFromModel(myChartElem.elementTypeProperties,chartProperty.name,isCommon );
			}
		}
		const fieldElem = document.createElement("div");
		fieldElem.classList.add("field");
		fieldElem.classList.add("is-grouped");
		//label:
		const labelElem = document.createElement("div");
		labelElem.classList.add("label-container");
		const label = document.createElement("label");
		label.classList.add("label");
		label.classList.add("is-required");
		label.classList.add("is-small");
		label.classList.add("has-tooltip-bottom");
		label.setAttribute("data-tooltip",chartProperty.explanation);

		const textnode = document.createTextNode(chartProperty.caption);
		label.appendChild(textnode);
		labelElem.appendChild(label);
		fieldElem.appendChild(labelElem);
		//input:
		const inputControlElem = document.createElement("div");
		inputControlElem.classList.add("control");
		

		const inputFieldElem = document.createElement("div");
		inputFieldElem.classList.add("field");
		const inputElem = document.createElement("div");
		inputElem.classList.add("is-small");
		//inputElem.classList.add("is-fullwidth");
		
		switch (chartProperty.inputType) {
		case "SELECT":
			//select input:
			inputElem.classList.add("select");
			inputElem.classList.add("is-small");
			inputElem.style.width="100px";
			const selElem = document.createElement("select");
			selElem.name=chartProperty.name;
			selElem.id=chartProperty.name;
			//selElem.style="width:50px";
			if(chartProperty.variableName=="")
			{
				selElem.disabled="disabled";
				selElem.readonly="readonly";
			}
	
			selElem.onchange= function () {  
					updateChartModel();
					renderChart('chartDiv',myChartModel);
			};
			fillSelectOptions(selElem,chartProperty.getValueResultset(),chartProperty.isMandatory,propValue);
			selElem.value= (propValue=="")?chartProperty.defaultValue:propValue;
			inputElem.appendChild(selElem);
			inputFieldElem.appendChild(inputElem);

		break;
		case "TEXTAREA":
			//großes Texteingabefeld:
			const textAreaElem = document.createElement("textarea");
			textAreaElem.cols="20";
			textAreaElem.rows=3;
			if(chartProperty.variableName=="")
			{
				textAreaElem.disabled="disabled";
				textAreaElem.readonly="readonly";
			}
			textAreaElem.name=chartProperty.name;
			textAreaElem.id=chartProperty.name;
			textAreaElem.value= (propValue=="")?chartProperty.defaultValue:propValue;
			textAreaElem.onchange= function () {  
					updateChartModel();
					renderChart('chartDiv',myChartModel);
			};
			inputElem.appendChild(textAreaElem);
			inputFieldElem.appendChild(inputElem);
			
		break;
		case "RANGE":
		
			//Schieberegler:
			const rangeElem = document.createElement("input");
			rangeElem.type="NUMBER";
			rangeElem.size=5;
			if(chartProperty.variableName=="")
			{
				rangeElem.disabled="disabled";
				rangeElem.readonly="readonly";
			}
			
			/* klappt noch nicht:
			rangeElem.type="RANGE";
			rangeElem.min=chartProperty.range_from;
			rangeElem.max=chartProperty.range_to;
			rangeElem.step=50;
			*/

			rangeElem.name=chartProperty.name;
			rangeElem.id=chartProperty.name;
			rangeElem.value= (propValue=="")?chartProperty.defaultValue:propValue;
			rangeElem.onchange= function () {  
					updateChartModel();
					renderChart('chartDiv',myChartModel);
			};
			inputElem.appendChild(rangeElem);
			inputFieldElem.appendChild(inputElem);
		break;
		case "CHECKBOX2": //klappt noch nicht
		const checkboxElem = document.createElement("input");
			checkboxElem.type="CHECKBOX";
			//checkboxElem.value="1";
			if(chartProperty.variableName=="")
			{
				checkboxElem.disabled="disabled";
				checkboxElem.readonly="readonly";
			}
			checkboxElem.name=chartProperty.name;
			checkboxElem.id=chartProperty.name;
			checkboxElem.value= (propValue=="")?chartProperty.defaultValue:propValue;
			checkboxElem.onchange= function () {  
					updateChartModel();
					renderChart('chartDiv',myChartModel);
			};
			inputElem.appendChild(checkboxElem);
			inputFieldElem.appendChild(inputElem);
		break;
		default:
			//Einfaches Texteingabefeld:
			const inpElem = document.createElement("input");
			inpElem.type="TEXT";
			if(chartProperty.propValueType=="integer")
					inpElem.type="NUMBER";
			if(chartProperty.inputType=="COLOR")
					inpElem.type="color";
			inpElem.size=5;
			if(chartProperty.variableName=="")
			{
				inpElem.disabled="disabled";
				inpElem.readonly="readonly";
			}
			inpElem.name=chartProperty.name;
			inpElem.id=chartProperty.name;
			inpElem.value= (propValue=="")?chartProperty.defaultValue:propValue;
			inpElem.onchange= function () {  
					updateChartModel();
					renderChart('chartDiv',myChartModel);
			};
			inputElem.appendChild(inpElem);
			inputFieldElem.appendChild(inputElem);
			
		break;
		}
		
		
		inputControlElem.appendChild(inputFieldElem);
		fieldElem.appendChild(inputControlElem);
		return fieldElem;

}



function fillSelectOptions(myCombo,myValues,isMandatory,selectedValue)
{
var optionCounter=0;
var selectedOption=null;
while (myCombo.firstChild) {
    myCombo.removeChild(myCombo.firstChild);
}
var optionCounter=0;
if(!isMandatory)
{
	//add an empty option:
	var o=new Option("","");
	myCombo.options[optionCounter]=o;
	selectedOption=optionCounter;
	optionCounter++;
}
for(var j=0;j < myValues.length;j++)
{
	var defaultSelected=false;
	if(myValues[j].value==selectedValue)
	{
		selectedOption=j+(isMandatory?0:1);
		defaultSelected=true;
		}
	if(selectedOption==null && myValues[j].isDefault)
	{
		selectedOption=j+(isMandatory?0:1);
		defaultSelected=true;
		}
	
	var o=new Option(myValues[j].name,myValues[j].value,defaultSelected,null);
	myCombo.options[optionCounter]=o;
	optionCounter++;
}
if(selectedOption!=null)
	myCombo.selectedIndex=selectedOption;
}





function showDataTable(myTableDiv,tableId,mydata,metadata,maxRows)
{
	
tableDiv=document.getElementById(myTableDiv);
if(tableDiv.innerHTML=="")
{
var rowcount=mydata.length;
if(rowcount > maxRows)
	rowcount=maxRows;
const tabContainer= document.createElement("div");
tabContainer.classList.add("table-container");
const tabElem = document.createElement("table");
tabElem.classList.add("table");
tabElem.classList.add("is-bordered");
tabElem.classList.add("is-narrow");
 
tabElem.border="1";
tabElem.width="70%";
const rowElem = document.createElement("tr");
const thCap = document.createElement("th");
const textnode = document.createTextNode("Zeilennr.");
thCap.appendChild(textnode);
rowElem.appendChild(thCap);

for(var col=0;col < metadata.length;col++)
	{
	if(metadata[col].nr)
		{
		const thCap = document.createElement("th");
		const textnode = document.createTextNode(metadata[col].colcaption);
		thCap.appendChild(textnode);
		rowElem.appendChild(thCap);
		}
	}
tabElem.appendChild(rowElem);

//Variablennamen in Subheader
const rowElemSubHeader = document.createElement("tr");
const tdCap = document.createElement("td");
tdCap.style="font-family:monospace;font-size:smaller";
const textnodeSubHeader = document.createTextNode("(rownr)");
tdCap.appendChild(textnodeSubHeader);
rowElemSubHeader.appendChild(tdCap);

for(var col=0;col < metadata.length;col++)
	{
	if(metadata[col].nr)
		{
		const thCap = document.createElement("td");
		thCap.style="font-family:monospace;font-size:smaller";
		const textnode = document.createTextNode("("+metadata[col].colname+")");
		thCap.appendChild(textnode);
		rowElemSubHeader.appendChild(thCap);
		}
	}
tabElem.appendChild(rowElemSubHeader);

for(row=0;row<rowcount;row++)
{
	if(mydata[row])
	{
		const rowElem = document.createElement("tr");
		const tdCap = document.createElement("td");
		const textnode = document.createTextNode(row);
		tdCap.appendChild(textnode);
		rowElem.appendChild(tdCap);
		for(var col=0;col < metadata.length;col++)
			{
			if(metadata[col].nr)
				{
				const tdCap = document.createElement("td");
				const textnode = document.createTextNode(mydata[row][metadata[col].colname]);
				tdCap.appendChild(textnode);
				rowElem.appendChild(tdCap);
				}
			}
		tabElem.appendChild(rowElem);
	}
}

//Start Funktionen:
	var dimFunctions=[];
	var myFunction= new dimFunction(0,"Wort 1 ans Ende","switchWord1and2ff",false);
	dimFunctions[0]=myFunction;
	var myFunction= new dimFunction(1,"Nur Wort 1","justWord1",false);
	dimFunctions[1]=myFunction;
	var myFunction= new dimFunction(2,"Abkürzen (20)","abbreviate",false);
	dimFunctions[2]=myFunction;

		const rowElemFunc = document.createElement("tr");
		const tdCapFunc = document.createElement("td");
		const textnodeFunc = document.createTextNode("Funktion:");
		tdCapFunc.appendChild(textnodeFunc);
		rowElemFunc.appendChild(tdCapFunc);
		for(var col=0;col < metadata.length;col++)
			{
			if(metadata[col].nr)
				{
				const tdCapFunc = document.createElement("td");
				if(metadata[col].colcaption.trim() != "" && metadata[col].coltype==1) //String
				{
				//const textnode = document.createTextNode(data[row][metadata[col].colname]);
				const selElem = document.createElement("select");
				selElem.name=metadata[col].colname;
				selElem.id=metadata[col].colname;

		fillSelectOptions(selElem,dimFunctions,false);
				selElem.onchange= function () {  
				applyColFunction(myTableDiv,tableId,mydata,metadata,maxRows,this.name,this.value);
		};
					tdCapFunc.appendChild(selElem);
				}
				
				rowElemFunc.appendChild(tdCapFunc);
				}
			}
		tabElem.appendChild(rowElemFunc);
tabContainer.appendChild(tabElem);
tableDiv.appendChild(tabContainer);
}
else
	tableDiv.innerHTML=""; //reset table
}

function applyColFunction(myTableDiv,tableId,data,metadata,maxRows,colname,functionName)
{
	//first update chartModel:
	var myFunc=new dataTransformationCol(tableId,colname,functionName);
	myChartModel.dataTransformation.push(myFunc);

		for(var row=0;row < data.length;row++)
		{
			data[row][colname]=applyFunction(data[row][colname],functionName);
		}
		document.getElementById(myTableDiv).innerHTML="";
		showDataTable(myTableDiv,tableId,data,metadata,maxRows)
	
}


function showChartDiv(chartDivElem)
{
var myDiv=document.getElementById(chartDivElem);
	if(myDiv.style.display=="block")
		myDiv.style.display="none";
	else
		myDiv.style.display="block";
}





function makeAreaY(chartDivElem,selectionRs) {
	var categoryDim=document.getElementById("viz_dimension1").value;
	var measureDim=document.getElementById("viz_measure1").value;
	var marksArray=new Array();
	marksArray[0]=Plot.areaY(selectionRs,
    			    	{
    		          y: measureDim, 
    		          x: categoryDim
    		        });
	marksArray[1]=Plot.ruleY([0]);

	var options= getChartOptions(categoryDim,"",measureDim,marksArray,true);
	
	document.getElementById(chartDivElem).appendChild(Plot.plot(options));
	}
function makeDot(chartDivElem,selectionRs) {
	var categoryDim=document.getElementById("viz_dimension1").value;
	var measureDim=document.getElementById("viz_measure1").value;
	var marksArray=new Array();
	marksArray[0]=Plot.dot(selectionRs,
    			    	{
    		          y: measureDim, 
    		          x: categoryDim
    		        });
	marksArray[1]=Plot.ruleY([0]);
	//marksArray[2]=Plot.ruleX([0]);

	var options= getChartOptions(categoryDim,"",measureDim,marksArray,true);
	
	document.getElementById(chartDivElem).appendChild(Plot.plot(options));
	}
function makeLine(chartDivElem,selectionRs) {
	var categoryDim=document.getElementById("viz_dimension1").value;
	var measureDim=document.getElementById("viz_measure1").value;
	var marksArray=new Array();
	marksArray[0]=Plot.line(selectionRs,
    			    	{
    		          y: measureDim, 
    		          x: categoryDim,
    		          curve: "linear"
    		        });
	marksArray[1]=Plot.dot(selectionRs,
	    	{
          y: measureDim, 
          x: categoryDim
        });
	marksArray[2]=Plot.ruleY([0]);

	var options= getChartOptions(categoryDim,"",measureDim,marksArray,true);
	
	document.getElementById(chartDivElem).appendChild(Plot.plot(options));
	}


function showSrcCode(renderer)
{
var myChartDiv= document.getElementById("chartDiv2");
var mySrcDiv=document.getElementById("chartSVGsrc");
	if(mySrcDiv.style.display=="block")
		mySrcDiv.style.display="none";
	else
		mySrcDiv.style.display="block";

var numberOfChildNodes=myChartDiv.childNodes.length;
var svg_xml ="";

if(numberOfChildNodes>0)
{
	switch (renderer) {
		case "plot":
			for (var i=0;i<numberOfChildNodes;i++)
			{
				var myNode=myChartDiv.childNodes[i];
				var mySvg=myNode; 
			// Extract the data as SVG text string
				svg_xml += (new XMLSerializer).serializeToString(mySvg);
				}
		break;
		case "d3js":
		for (var i=0;i<numberOfChildNodes;i++)
			{
			var myNode=myChartDiv.childNodes[i];
			if(myNode.nodeName=="svg")
				{
			var mySvg=myNode; 
			// Extract the data as SVG text string
			svg_xml = (new XMLSerializer).serializeToString(mySvg);
				}
			}
			break;
		case "echarts":
		
		var myParentNode=myChartDiv.childNodes[0];
		var mySvgNode=null;
		if(myParentNode && myParentNode.childNodes.length>0)
		{
			 myNode=myParentNode.childNodes[0];
			if(myNode.nodeName=="svg")
				{
			
			// Extract the data as SVG text string
			svg_xml = (new XMLSerializer).serializeToString(myNode);
				}
			}
			break;
			default:
			document.getElementById("chartSrc").innerHTML="Unbekannter Renderer";
			break;
			}
		document.getElementById("chartSrc").innerHTML=svg_xml;
}
else
{
	document.getElementById("chartSrc").innerHTML="Kein Quellcode gefunden";
}


//document.getElementById("chartSVGsrc").style.visibility="visible";
/*
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(ergtabelle);
    selection.removeAllRanges();
    selection.addRange(range);

      document.execCommand('copy');
      selection.removeAllRanges();

    alert("Angezeigte Tabelle wurde in die Zwischenablage kopiert.");
    */
}



function showChartModelCode()
{
var mySrcDiv=document.getElementById("chartModelsrc");
	if(mySrcDiv.style.display=="block")
		mySrcDiv.style.display="none";
	else
		mySrcDiv.style.display="block";

updateChartModelCode(myChartModel);


}
function showChartCode()
{
var mySrcDiv=document.getElementById("chartCodeTextAreaDiv");
	if(mySrcDiv.style.display=="block")
		mySrcDiv.style.display="none";
	else
		mySrcDiv.style.display="block";

}

function updateChartModelCode(myChartModel)
{
var myCodeDiv= document.getElementById("chartModelSrcCode");
var myJson ="";
var myPrettyJason="";
if(myChartModel)
{
	myJson=JSON.stringify(myChartModel);
	myPrettyJson=prettifyJson(myJson);
	myCodeDiv.innerHTML=myPrettyJson;
	myCodeDiv.value=myPrettyJson;
}
else
{
	myCodeDiv.innerHTML="Kein Quellcode gefunden";
}

} 

function loadChartModelCode(chartModelSrcCodeTextarea,chartDiv)
{

var mySrc=document.getElementById(chartModelSrcCodeTextarea);
var myJsonString =mySrc.value;

if(myJsonString!="")
{
	myChartModel=JSON.parse(myJsonString);
	if(myChartModel)
	{
		document.getElementById("vizElementCounter").value=myChartModel.chartElements.length;
		renderChart(chartDiv,myChartModel);
		fillChartElementListSelect(document.getElementById("chartElementID"),null);
	}
}
}

function loadNativeCode(nativeSrcCodeTextarea,chartDiv)
{

var mySrc=document.getElementById(nativeSrcCodeTextarea);
var chartDivElem=document.getElementById(chartDiv);
var myJsonString =mySrc.value;

if(myJsonString!="")
{
	myOption=JSON.parse(myJsonString);
	var myChart = echarts.init(chartDivElem,null, { renderer: 'svg', locale: 'DE'});
	myChart.setOption(myOption);

}
}


function copySrcCode(mydiv)
{
var ergtabelle=document.getElementById(mydiv);
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(ergtabelle);
    selection.removeAllRanges();
    selection.addRange(range);

      document.execCommand('copy');
      selection.removeAllRanges();
}




function showVizNavTab(nr)
{
	
for (let i = 1; i < 4; i++) {
	var divName="tab-"+i;
	//alert(divName);
	tabDivElem=document.getElementById(divName);
	if(i==nr)
		tabDivElem.style.display="block";
	else
		tabDivElem.style.display="none";

}
}




function makeSunburstD3(myCommonChartProperties,svg,data,metaData,chartElem)
{
	var sorted = d3.sort(data, d => d.dimension1,d => d.dimension2, d => d.measure1);
//var group = d3.group(sorted, d => d.sos_stg_aggr_sem_rueck_beur_ein_str);
//console.log(group);

 
  
 var group = d3.group(sorted, d => d.dimension1,d => d.dimension2, d => d.measure1 );
 var hierarchy = d3.hierarchy(group);
 
 var level1count=hierarchy.children.length;
 console.log("level1count:"+level1count);
 var data_str = "{\"name\":\"root\",\"children\":[";
 
for(var i=0; i < level1count ; i++){
console.log("Zeile "+i+ ":" + hierarchy.children[i].data[0]);
data_str+="{\"name\":\""+hierarchy.children[i].data[0]+"\",\"children\":[";
var level2count=hierarchy.children[i].children.length;
for(var j=0; j < level2count ; j++){
console.log("unterZeile "+j+ ":" + hierarchy.children[i].children[j].data[0]);
data_str+="{\"name\":\""+hierarchy.children[i].children[j].data[0]+"\",\"children\":[";

/*var level3count=hierarchy.children[i].children[j].children.length;
console.log("level3count: "+level3count);

for(var k=0; k < level3count ; k++){
console.log("unterUnterZeile "+k+ ":" + hierarchy.children[i].children[j].children[k].data[0]);
data_str+="{\"name\":\""+hierarchy.children[i].children[j].children[k].data[0]+"\",\"value\":"+hierarchy.children[i].children[j].children[k].children[0].data[0] +"}";
if(k < level3count -1)
	data_str+=",";

}
*/
data_str+="]}";
if(j < level2count -1)
	data_str+=",";
}
data_str+="]}";
if(i < level1count -1)
	data_str+=",";
//console.log("Zeile "+i+ ":" + hierarchy.children[i].children[0].data);
}
data_str+="]}"
console.log(data_str);
var dataHierarchy=JSON.parse(data_str);

return renderSunburst(dataHierarchy,svg);
}
function renderSunburst(data,svg) {
  // Specify the chart’s dimensions.
  const width = 928;
  const height = width;
  const radius = width / 6;

  // Create the color scale.
  const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1));

  // Compute the layout.
  const hierarchy = d3.hierarchy(data)
      .sum(d => d.value)
      .sort((a, b) => b.value - a.value);
  const root = d3.partition()
      .size([2 * Math.PI, hierarchy.height + 1])
    (hierarchy);
  root.each(d => d.current = d);

  // Create the arc generator.
  const arc = d3.arc()
      .startAngle(d => d.x0)
      .endAngle(d => d.x1)
      .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
      .padRadius(radius * 1.5)
      .innerRadius(d => d.y0 * radius)
      .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1))

  // Create the SVG container.
   // Append the arcs.
  const path = svg.append("g")
    .selectAll("path")
    .data(root.descendants().slice(1))
    .join("path")
      .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
      .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0)
      .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none")

      .attr("d", d => arc(d.current));

  // Make them clickable if they have children.
  path.filter(d => d.children)
      .style("cursor", "pointer")
      .on("click", clicked);

  const format = d3.format(",d");
  path.append("title")
      .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);

  const label = svg.append("g")
      .attr("pointer-events", "none")
      .attr("text-anchor", "middle")
      .style("user-select", "none")
    .selectAll("text")
    .data(root.descendants().slice(1))
    .join("text")
      .attr("dy", "0.35em")
      .attr("fill-opacity", d => +labelVisible(d.current))
      .attr("transform", d => labelTransform(d.current))
      .text(d => d.data.name);

  const parent = svg.append("circle")
      .datum(root)
      .attr("r", radius)
      .attr("fill", "none")
      .attr("pointer-events", "all")
      .on("click", clicked);

  // Handle zoom on click.
  function clicked(event, p) {
    parent.datum(p.parent || root);

    root.each(d => d.target = {
      x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
      x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
      y0: Math.max(0, d.y0 - p.depth),
      y1: Math.max(0, d.y1 - p.depth)
    });

    const t = svg.transition().duration(750);

    // Transition the data on all arcs, even the ones that aren’t visible,
    // so that if this transition is interrupted, entering arcs will start
    // the next transition from the desired position.
    path.transition(t)
        .tween("data", d => {
          const i = d3.interpolate(d.current, d.target);
          return t => d.current = i(t);
        })
      .filter(function(d) {
        return +this.getAttribute("fill-opacity") || arcVisible(d.target);
      })
        .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0)
        .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") 

        .attrTween("d", d => () => arc(d.current));

    label.filter(function(d) {
        return +this.getAttribute("fill-opacity") || labelVisible(d.target);
      }).transition(t)
        .attr("fill-opacity", d => +labelVisible(d.target))
        .attrTween("transform", d => () => labelTransform(d.current));
  }
  
  function arcVisible(d) {
    return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0;
  }

  function labelVisible(d) {
    return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03;
  }

  function labelTransform(d) {
    const x = (d.x0 + d.x1) / 2 * 180 / Math.PI;
    const y = (d.y0 + d.y1) / 2 * radius;
    return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
  }

  return svg.node();

}


function openModalImage(ergebniselementOrdnr)
{
	var myModalCard=document.getElementById("modalCard"+ergebniselementOrdnr);
	myModalCard.classList.add('is-active');
}
function closeModalImage(ergebniselementOrdnr)
{
	var myModalCard=document.getElementById("modalCard"+ergebniselementOrdnr);
	myModalCard.classList.remove('is-active');
}

function exportDataTable(rs,rsMetaData)
{
	myRs=fillEchartsDataSetSimpleCopy(rs,rsMetaData);
	console.log(JSON.stringify(myRs));
}