From 055a4f32a13ca9d8d6a35faf3a3fb3c545074678 Mon Sep 17 00:00:00 2001
From: Daniel Quathamer <danielq@memtext.de>
Date: Wed, 4 Jan 2023 16:05:45 +0100
Subject: [PATCH] Dynamische Elemente und Resultsets #5

---
 superx/xml/js/viz/viz_functions.js | 206 +++++++++++++++++++++++------
 superx/xml/viz_html_chart.xsl      |   8 +-
 2 files changed, 169 insertions(+), 45 deletions(-)

diff --git a/superx/xml/js/viz/viz_functions.js b/superx/xml/js/viz/viz_functions.js
index 51a9483..c4c1da7 100644
--- a/superx/xml/js/viz/viz_functions.js
+++ b/superx/xml/js/viz/viz_functions.js
@@ -64,8 +64,13 @@ function chartModel(id,name,renderer,datasources)
 	this.getChartSVGWithPlot=function ()
 	{
 		console.log("using Plot");
-		//copy ChartElements to marks:
 		var marksArray=new Array();
+		//first empty marks:
+		for(var k=0;k< this.options["marks"].length;k++)
+		{
+			delete this.options["marks"][k];
+		}
+		//copy ChartElements to marks:
 		for(var k=0;k< this.chartElements.length;k++)
 		{
 			marksArray[k]=renderChartElementWithPlot(this.chartElements[k]);
@@ -172,8 +177,9 @@ var isDefault=true;
 	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)
+			//&& (
+			//	isMeasure==false || rsColumnMetaData[datasource][j].coltype == 4 || rsColumnMetaData[datasource][j].coltype == 3)
+			//
 			)
 			{
 					//console.log("feld "+rsColumnMetaData[j].nr+selectionRsMetaData[j].targetColumn);
@@ -339,8 +345,10 @@ function renderChart(chartDiv,currentChartModel)
 	var renderer=document.getElementById('fldVizRenderer').value;
 	var mySVG=currentChartModel.getChartSVG();
 	document.getElementById(chartDiv).innerHTML="";
+	if(typeof mySVG === 'object')
+	{
 	document.getElementById(chartDiv).appendChild(mySVG);
-	
+	}
 }
 
 function prepareSelectionForm()
@@ -434,7 +442,7 @@ function createChartElementConfig1Form(renderer,elemID)
 		selVizTypeElem.onchange= function () {  
 				createChartElementsConfig2Form(renderer);
 		};
-		fillSelectOptions(selVizTypeElem,getPossibleVizTypes(renderer),true);
+		fillSelectOptions(selVizTypeElem,getPossibleVizTypes(renderer),false);
 	fieldVizTypeElem.appendChild(selVizTypeElem);
 	elementVizTypeDiv.appendChild(fieldVizTypeElem);
 	
@@ -462,11 +470,26 @@ function createChartElementsConfig2Form(renderer)
 	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);
+	//remove:
+	const removeBtnDiv = document.createElement("div");
+	const removeBtn = document.createElement("input");
+	removeBtn.type="BUTTON";
+	removeBtn.value="Entfernen";
+	removeBtn.classList.add("button");
+	removeBtn.classList.add("is-small");
+	removeBtn.onclick =function() {
+            removeChartElementConfig()
+        }
+	removeBtnDiv.appendChild(removeBtn);
+	elementDivBox.appendChild(removeBtnDiv);
 	formChartElementConfig2Div.appendChild(elementDivBox);
 	
 	/*columnsDiv.appendChild(columnDiv);
@@ -512,6 +535,16 @@ function saveChartElementConfig()
 	//myVizType.elementTypeProperties=null;
 	//TODO: Existenz abfangen, hier wird einfach hinzugefügt:
 	myChartModel.chartElements.push(myVizType);
+	//Reset Elements Form
+	elemID++;
+	document.getElementById("chartElementID").value=elemID;
+	document.getElementById("chartElementVizType").value="";
+	var formChartElementConfig2Div=document.getElementById("ChartElementConfig2Div");
+	while (formChartElementConfig2Div.firstChild) {
+		formChartElementConfig2Div.removeChild(formChartElementConfig2Div.firstChild);
+	}
+	
+	renderChart('chartDiv',myChartModel);
 	
 	/*var marksArray=new Array();
 	marksArray[elemID]=Plot.barX(rs_table0,
@@ -524,19 +557,41 @@ function saveChartElementConfig()
 	chartOptions["marks"].push(marksArray);*/
 	
 }
+function removeChartElementConfig()
+{
+	
+	var propertyCounter=myChartModel.chartElements.length;
+	var elemID=document.getElementById("chartElementID").value;
+	if(propertyCounter>0)
+	{
+		/*var filtered=myChartModel.chartElements.filter(obj => obj.nr !== propertyCounter-1);
+		myChartModel.chartElements=filtered;*/
+		delete myChartModel.chartElements[propertyCounter-1];
+		elemID--;
+		document.getElementById("chartElementID").value=elemID;
+
+		renderChart('chartDiv',myChartModel);
+	}
+}
+
+function resetChartPropertiesForm()
+{
+	myChartModel=new chartModel(1,"",document.getElementById("fldVizRenderer").value,rsTableMetaData);
+	renderChart('chartDiv',myChartModel);
+	return true;
+}
 function getPossibleVizTypes(renderer)
 {
 	
 	var possibleVizTypes=new Array();
 	for(var k=0;k < vizTypes.length;k++)
 		{
-		var isDefault=true;
 		if(vizTypes[k].rendererUniquename==renderer)
 			{
 				var newVizType = new possibleVizType( //nr,value,name,explanation,isDefault 
-				k,vizTypes[k].uniquename,vizTypes[k].caption,'',isDefault);
+				k,vizTypes[k].uniquename,vizTypes[k].caption,'',false);
 				possibleVizTypes.push(newVizType);
-				isDefault=false;
+				
 				
 			}
 		}
@@ -909,6 +964,7 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render
 		{
 			if((myCommonChartProperties[k].groupVariableName=="layout"
 			|| myCommonChartProperties[k].groupVariableName=="style"
+			|| myCommonChartProperties[k].groupVariableName=="x"
 			)
 			&& myCommonChartProperties[k].rendererUniquename==renderer)
 				divBox.appendChild(renderChartPropertyField(myCommonChartProperties[k]));
@@ -1155,6 +1211,7 @@ 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++)
@@ -1322,47 +1379,51 @@ var myDiv=document.getElementById(chartDivElem);
 function renderChartElementWithPlot(chartElem)
 {
 var plotMark=new Object;	
+if(chartElem)
+{
 var chartType=chartElem.vizTypeUniquename;
-/*
-var selectionRsMetaData=[];
-var selectionRs=[];
-
-
-selectionRsMetaData=fillSelectionResultMetaData();
-
-selectionRs=fillSelectionResult(selectionRsMetaData);
-*/
+var myDatasourceRs=rs[chartElem.datasource];
+var optionString="{\"dummy\": \"1\"";
+for(var k=0;k<chartElem.elementTypeProperties.length;k++)
+	{
+		if(chartElem.elementTypeProperties[k].propertyValue!="")
+		{
+				optionString+=",\""+chartElem.elementTypeProperties[k].vizTypePropertyUniquename+"\":\""+chartElem.elementTypeProperties[k].propertyValue+"\"";
+		}
 	
+	}
+optionString+=" }";
+	
+console.log("Mark-option for "+chartType+":"+ optionString);
+var markOptions=JSON.parse(optionString); 
 switch (chartType)
 {
-	case "sample":
-		makeSample();
-		break;
 	case "bar_x":
-		plotMark=renderBarXwithPlot(chartElem);
+		plotMark=Plot.barX(myDatasourceRs,markOptions);
 	    break;
 	case "bar_x_stacked":
-		makeBarXStacked(chartDivElem,selectionRs);
+		plotMark=Plot.barX(myDatasourceRs,markOptions);
 	break;
 	case "bar_x_alt":
 		makeBarX(svg,data);
         break;
 	case "bar_y":
-		makeBarY(chartDivElem,selectionRs);
+		plotMark=Plot.barY(myDatasourceRs,markOptions);
         break;
 	case "area_y":
-		makeAreaY(chartDivElem,selectionRs);
+		plotMark=Plot.areaY(myDatasourceRs,markOptions);
 	break;
 	case "dot":
-		makeDot(chartDivElem,selectionRs);
+		plotMark=Plot.dot(myDatasourceRs,markOptions);
 	break;
 	case "line":
-		makeLine(chartDivElem,selectionRs);
+		plotMark=Plot.line(myDatasourceRs,markOptions);
 		break;
 	default:
 		alert("Please select a chart type");
 	break;
 }
+}
 return plotMark;
 }
 
@@ -1540,6 +1601,7 @@ function makeSample()
 	}
 function getChartOptions(categoryDim1,categoryDim2,measureDim,marksArray,chartOrientationVertical)
 {
+		
 	var options;
 	//var categoryDim1=document.getElementById("viz_dimension1").value;
 	//var categoryDim2=document.getElementById("viz_dimension2").value;
@@ -1620,6 +1682,7 @@ function getChartOptions(categoryDim1,categoryDim2,measureDim,marksArray,chartOr
 	return options;
 }
 function makeBarX(chartDivElem,selectionRs) {
+		//OBSOLETE
 	var categoryDim=document.getElementById("viz_dimension1").value;
 	//var categoryDim2=document.getElementById("viz_dimension2").value;
 	var measureDim=document.getElementById("viz_measure1").value;
@@ -1638,12 +1701,16 @@ function makeBarX(chartDivElem,selectionRs) {
 	var svgPlot=Plot.plot(options);
 	document.getElementById(chartDivElem).appendChild(svgPlot);
 	}
-function renderBarXwithPlot(chartElem) {
+function renderBarXwithPlot(chartElem,markOptions,myDatasourceRs) {
+	//OBSOLETE
 	var barXPlot=new Object;
+	barXPlot=Plot.barX(myDatasourceRs,	markOptions	);
+
+/*
 	var categoryDim="";
 	var measureDim="";
 	var fillval="";
-	var myDatasourceRs=rs[chartElem.datasource];
+	
 	for(var k=0;k<chartElem.elementTypeProperties.length;k++)
 	{
 		if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="viz_dimension1")
@@ -1662,10 +1729,12 @@ function renderBarXwithPlot(chartElem) {
 			  fill: fillval
     		        }
 			);
+			*/
 	return barXPlot;
 	
 	}	
 function makeBarXStacked(chartDivElem,selectionRs) {
+		//OBSOLETE
 	var categoryDim1=document.getElementById("y_horizontal").value;
 	var categoryDim2=document.getElementById("stroke_bar").value;
 	var measureDim=document.getElementById("x_horizontal").value;
@@ -1697,6 +1766,7 @@ function makeBarXStacked(chartDivElem,selectionRs) {
 	document.getElementById(chartDivElem).appendChild(svgPlot);
 	}
 function makeBarY(chartDivElem,selectionRs) {
+	//OBSOLETE
 	var categoryDim=document.getElementById("viz_dimension1").value;
 	var measureDim=document.getElementById("viz_measure1").value;
 	var marksArray=new Array();
@@ -1711,6 +1781,36 @@ function makeBarY(chartDivElem,selectionRs) {
 	
 	document.getElementById(chartDivElem).appendChild(Plot.plot(options));
 	}
+	
+	function renderBarYwithPlot(chartElem) {
+			//OBSOLETE
+	var barYPlot=new Object;
+	var categoryDim="";
+	var measureDim="";
+	var fillval="";
+	var myDatasourceRs=rs[chartElem.datasource];
+	for(var k=0;k<chartElem.elementTypeProperties.length;k++)
+	{
+		if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="viz_dimension1")
+			categoryDim=chartElem.elementTypeProperties[k].propertyValue;
+		if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="viz_measure1")
+			measureDim=chartElem.elementTypeProperties[k].propertyValue;
+		if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="fill")
+			fillval=chartElem.elementTypeProperties[k].propertyValue;
+	}
+	if(fillval=="")
+		fillval="blue";
+	barYPlot=Plot.barY(myDatasourceRs,
+	 	{
+    		          y: measureDim, 
+    		          x: categoryDim,
+			  fill: fillval
+			  
+    		        }
+			);
+	return barYPlot;
+	
+	}
 function makeAreaY(chartDivElem,selectionRs) {
 	var categoryDim=document.getElementById("viz_dimension1").value;
 	var measureDim=document.getElementById("viz_measure1").value;
@@ -1819,7 +1919,7 @@ function getCommonChartProperty(name)
 }
 
 
-function showSrcCode()
+function showSrcCode(renderer)
 {
 var myChartDiv= document.getElementById("chartDiv2");
 var mySrcDiv=document.getElementById("chartSVGsrc");
@@ -1830,18 +1930,42 @@ var mySrcDiv=document.getElementById("chartSVGsrc");
 
 var numberOfChildNodes=myChartDiv.childNodes.length;
 var svg_xml ="";
-for (var i=0;i<numberOfChildNodes;i++)
-	{
-	var myNode=myChartDiv.childNodes[i];
-	if(myNode.nodeName=="svg")
-	{
-		var mySvg=myNode; //document.getElementById("chartSVG");
-		// Extract the data as SVG text string
-		svg_xml = (new XMLSerializer).serializeToString(mySvg);
-	}
-	}
-//alert(svg_xml);
-document.getElementById("chartSrc").innerHTML=svg_xml;
+
+if(numberOfChildNodes>0)
+{
+	switch (renderer) {
+		case "plot":
+		var myFigure=myChartDiv.childNodes[0];
+		if(myFigure.childNodes.length>0)
+			{
+			var mySvg=myFigure.childNodes[0];
+			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; //document.getElementById("chartSVG");
+			// Extract the data as SVG text string
+			svg_xml = (new XMLSerializer).serializeToString(mySvg);
+				}
+			}
+			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();
diff --git a/superx/xml/viz_html_chart.xsl b/superx/xml/viz_html_chart.xsl
index da42cde..1aa4359 100644
--- a/superx/xml/viz_html_chart.xsl
+++ b/superx/xml/viz_html_chart.xsl
@@ -2026,8 +2026,8 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
 
 <!--footer (BF nach unten verschoben)-->
 <footer class="card-footer">
-	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit">Speichern</button></p>
-	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset">Zurücksetzen</button></p>
+	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit" onClick="alert('noch nicht implementiert)');">Speichern</button></p>
+	<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset" onClick="return resetChartPropertiesForm();">Zurücksetzen</button></p>
 </footer>
 
 </xsl:template>
@@ -2048,7 +2048,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
 	</span>
   </button>-->
   <a  
-     onClick="showChartDiv('chartDiv2'); createChart('chartDiv2');">					
+     onClick="showChartDiv('chartDiv2'); renderChart('chartDiv2',myChartModel);">					
 	<span class="icon">
 		<img src="../images/icons/more.svg" title="Laden" /> 
 	</span>
@@ -2080,7 +2080,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
 	</span>
   </button>-->
   <a  
-     onClick="showSrcCode();">					
+     onClick="showSrcCode(myChartModel.renderer);">					
 	<span class="icon">
 		<img src="../images/icons/more.svg" title="Laden" /> 
 	</span>