From 8d3f90a66efe8bcd668223330304e9f3fc3517c0 Mon Sep 17 00:00:00 2001
From: Daniel Quathamer <danielq@memtext.de>
Date: Wed, 4 Jan 2023 07:55:58 +0100
Subject: [PATCH] Dynamische Elemente und Resultsets #5

---
 superx/xml/js/viz/viz_functions.js | 194 +++++++++++++++++++++++++----
 superx/xml/viz_html_chart.xsl      |  29 +++--
 2 files changed, 185 insertions(+), 38 deletions(-)

diff --git a/superx/xml/js/viz/viz_functions.js b/superx/xml/js/viz/viz_functions.js
index b29aeb5..51a9483 100644
--- a/superx/xml/js/viz/viz_functions.js
+++ b/superx/xml/js/viz/viz_functions.js
@@ -41,6 +41,7 @@ function chartModel(id,name,renderer,datasources)
 	this.renderer=renderer;
 	this.dataSources=datasources;
 	//this.globalProperties=globalproperties;
+	this.chartElements=new Array();
 	this.options=new Object;
 	this.options.marks=new Array();
 	//let globalProperties={};
@@ -63,7 +64,22 @@ function chartModel(id,name,renderer,datasources)
 	this.getChartSVGWithPlot=function ()
 	{
 		console.log("using Plot");
-		
+		//copy ChartElements to marks:
+		var marksArray=new Array();
+		for(var k=0;k< this.chartElements.length;k++)
+		{
+			marksArray[k]=renderChartElementWithPlot(this.chartElements[k]);
+			/*Plot.barX(rs_table0,
+	 	{
+    		          x: "gesamt", 
+    		          y: "eintrag",
+			  fill: "blue"
+    		        }
+    		        */
+			
+		}
+	
+	this.options["marks"].push(marksArray);
 		var svgPlot=Plot.plot(this.options);
 		return svgPlot;
 	}
@@ -83,6 +99,24 @@ this.isDefault=isDefault;
 
 }
 
+function usedVizType(nr,vizTypeUniquename,caption,datasource ) 
+    {
+this.nr=nr;
+this.vizTypeUniquename=vizTypeUniquename;
+this.caption=caption;
+this.datasource=datasource;
+this.elementTypeProperties=new Array();
+}
+
+function usedVizTypeProperty(nr,vizTypePropertyUniquename,caption,propertyValue ) 
+    {
+this.nr=nr;
+this.vizTypePropertyUniquename=vizTypePropertyUniquename;
+this.caption=caption;
+this.propertyValue=propertyValue;
+
+}
+
 function d3dataRow(nr,dimension1,dimension2,measure ) 
     {
 this.nr=nr;
@@ -135,16 +169,15 @@ var optionCounter=0;
 //selectionRsMetaData=fillSelectionResultMetaData();
 //console.log("felder"+selectionRsMetaData.length);
 var isDefault=true;
-	for(var j=0;j < rsColumnMetaData.length;j++)
+	for(var j=0;j < rsColumnMetaData[datasource].length;j++)
 		{
-			if(rsColumnMetaData[j].tableId==datasource
-			&& rsColumnMetaData[j].colcaption.trim() !="" 
+			if(rsColumnMetaData[datasource][j].colcaption.trim() !="" 
 			&& (
-				isMeasure==false || rsColumnMetaData[j].coltype == 4 || rsColumnMetaData[j].coltype == 3)
+				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[j].nr,rsColumnMetaData[j].colcaption,rsColumnMetaData[j].colname,isDefault);
+				var o=new selectionPropertyValue(rsColumnMetaData[datasource][j].nr,rsColumnMetaData[datasource][j].colcaption,rsColumnMetaData[datasource][j].colname,isDefault);
 				valueOptions[optionCounter]=o;
 				optionCounter++;
 				if(isDefault)
@@ -203,13 +236,15 @@ this.getValueResultset = function () {
     }
 }
 
-function updateChartModel(myChartModel)
+function updateChartModel()
 {
 	var optionsString="{";
 	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;
 	optionsString+="\"caption\":\""+chartName+"\"";
 
 	var myForm=document.forms["chartPropertiesForm"];
@@ -283,15 +318,7 @@ function updateChartModel(myChartModel)
 	console.log("Styles:"+ stylesString);
 	var styles=JSON.parse(stylesString); */
 	var chartOptions=JSON.parse(optionsString);
-	var marksArray=new Array();
-	marksArray[0]=Plot.barX(rs_table0,
-	 	{
-    		          x: "gesamt", 
-    		          y: "eintrag",
-			  fill: "blue"
-    		        }
-			);
-	chartOptions["marks"].push(marksArray);
+
 	myChartModel.options=chartOptions;
 
 	//console.log("options:"+ optionsString);
@@ -303,16 +330,14 @@ function updateChartModel(myChartModel)
 	return myChartModel;
 	
 }
-function renderChart(chartDiv)
+function renderChart(chartDiv,currentChartModel)
 {
 	
 	if(document.getElementById("chartName").value=="")
 		document.getElementById("chartName").value=vizInitialName;
 	var chartName=document.getElementById("chartName").value;
 	var renderer=document.getElementById('fldVizRenderer').value;
-	var myChartModel=new chartModel(1,chartName,renderer,rsTableMetaData);
-	myChartModel=updateChartModel(myChartModel);
-	var mySVG=myChartModel.getChartSVG();
+	var mySVG=currentChartModel.getChartSVG();
 	document.getElementById(chartDiv).innerHTML="";
 	document.getElementById(chartDiv).appendChild(mySVG);
 	
@@ -332,7 +357,7 @@ function prepareSelectionForm()
 return selectionProperties;
 }
 
-function createChartElementConfig1Form(renderer)
+function createChartElementConfig1Form(renderer,elemID)
 {
 	//first empty form:
 	var formChartElementConfig1=document.getElementById("ChartElementConfig1Div");
@@ -359,6 +384,11 @@ function createChartElementConfig1Form(renderer)
 		labelDatasource.appendChild(textnode);
 		labelDatasourceElem.appendChild(labelDatasource);
 		fieldDatasourceElem.appendChild(labelDatasourceElem);
+	const inpElemId = document.createElement("input");
+		inpElemId.name="chartElementID";
+		inpElemId.id="chartElementID";
+		inpElemId.type="hidden";
+		
 
 	const selDatasourceElem = document.createElement("select");
 		selDatasourceElem.name="chartElementDatasource";
@@ -371,6 +401,8 @@ function createChartElementConfig1Form(renderer)
 		};
 		fillSelectOptions(selDatasourceElem,rsTableMetaData,true);
 	fieldDatasourceElem.appendChild(selDatasourceElem);
+	fieldDatasourceElem.appendChild(inpElemId);
+	
 	elementDatasourceDiv.appendChild(fieldDatasourceElem);
 	formChartElementConfig1.appendChild(elementDatasourceDiv);
 	
@@ -459,7 +491,38 @@ function createChartElementsConfig2Form(renderer)
 
 function saveChartElementConfig()
 {
-	alert("Feierabend");
+	var elemID=document.getElementById("chartElementID").value;
+	var vizTypeUniquename=document.getElementById("chartElementVizType").value;
+	var datasource=document.getElementById("chartElementDatasource").value;
+	
+	if(elemID=="")
+		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).value !="")
+		{
+			var myUsedVizTypeProperty=new usedVizTypeProperty(propertyCounter,vizTypeProperties[k].propUniquename, vizTypeProperties[k].caption,document.getElementById(vizTypeProperties[k].propUniquename).value); //))nr,vizTypePropertyUniquename,caption,propertyValue )
+			myVizType.elementTypeProperties.push(myUsedVizTypeProperty); 
+		}
+	}
+	//myVizType.elementTypeProperties=null;
+	//TODO: Existenz abfangen, hier wird einfach hinzugefügt:
+	myChartModel.chartElements.push(myVizType);
+	
+	/*var marksArray=new Array();
+	marksArray[elemID]=Plot.barX(rs_table0,
+	 	{
+    		          x: "gesamt", 
+    		          y: "eintrag",
+			  fill: "blue"
+    		        }
+			);
+	chartOptions["marks"].push(marksArray);*/
+	
 }
 function getPossibleVizTypes(renderer)
 {
@@ -987,7 +1050,8 @@ function renderChartPropertyField(commonChartProperty)
 			}
 	
 			selElem.onchange= function () {  
-					renderChart('chartDiv');
+					updateChartModel();
+					renderChart('chartDiv',myChartModel);
 			};
 			fillSelectOptions(selElem,commonChartProperty.getValueResultset(),commonChartProperty.isMandatory);
 			inputElem.appendChild(selElem);
@@ -1008,7 +1072,8 @@ function renderChartPropertyField(commonChartProperty)
 			textAreaElem.id=commonChartProperty.name;
 			textAreaElem.value=commonChartProperty.defaultValue;
 			textAreaElem.onchange= function () {  
-					renderChart('chartDiv');
+					updateChartModel();
+					renderChart('chartDiv',myChartModel);
 			};
 			inputElem.appendChild(textAreaElem);
 			inputParaElem.appendChild(inputElem);
@@ -1037,7 +1102,8 @@ function renderChartPropertyField(commonChartProperty)
 			rangeElem.id=commonChartProperty.name;
 			rangeElem.value=commonChartProperty.defaultValue;
 			rangeElem.onchange= function () {  
-					renderChart('chartDiv');
+					updateChartModel();
+					renderChart('chartDiv',myChartModel);
 			};
 			inputElem.appendChild(rangeElem);
 			inputParaElem.appendChild(inputElem);
@@ -1060,7 +1126,8 @@ function renderChartPropertyField(commonChartProperty)
 			inpElem.id=commonChartProperty.name;
 			inpElem.value=commonChartProperty.defaultValue;
 			inpElem.onchange= function () {  
-					renderChart('chartDiv');
+					updateChartModel();
+					renderChart('chartDiv',myChartModel);
 			};
 			inputElem.appendChild(inpElem);
 			inputParaElem.appendChild(inputElem);
@@ -1171,7 +1238,7 @@ for(var col=0;col < metadata.length;col++)
 	}
 tabElem.appendChild(rowElem);
 
-for(row=1;row<rowcount;row++)
+for(row=0;row<rowcount;row++)
 {
 	if(data[row])
 	{
@@ -1252,6 +1319,53 @@ var myDiv=document.getElementById(chartDivElem);
 		myDiv.style.display="block";
 }
 
+function renderChartElementWithPlot(chartElem)
+{
+var plotMark=new Object;	
+var chartType=chartElem.vizTypeUniquename;
+/*
+var selectionRsMetaData=[];
+var selectionRs=[];
+
+
+selectionRsMetaData=fillSelectionResultMetaData();
+
+selectionRs=fillSelectionResult(selectionRsMetaData);
+*/
+	
+switch (chartType)
+{
+	case "sample":
+		makeSample();
+		break;
+	case "bar_x":
+		plotMark=renderBarXwithPlot(chartElem);
+	    break;
+	case "bar_x_stacked":
+		makeBarXStacked(chartDivElem,selectionRs);
+	break;
+	case "bar_x_alt":
+		makeBarX(svg,data);
+        break;
+	case "bar_y":
+		makeBarY(chartDivElem,selectionRs);
+        break;
+	case "area_y":
+		makeAreaY(chartDivElem,selectionRs);
+	break;
+	case "dot":
+		makeDot(chartDivElem,selectionRs);
+	break;
+	case "line":
+		makeLine(chartDivElem,selectionRs);
+		break;
+	default:
+		alert("Please select a chart type");
+	break;
+}
+return plotMark;
+}
+
 function createChart(chartDivElem)
 {
 	//OBSOLETE!
@@ -1524,7 +1638,33 @@ function makeBarX(chartDivElem,selectionRs) {
 	var svgPlot=Plot.plot(options);
 	document.getElementById(chartDivElem).appendChild(svgPlot);
 	}
+function renderBarXwithPlot(chartElem) {
+	var barXPlot=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";
+	barXPlot=Plot.barX(myDatasourceRs,
+	 	{
+    		          x: measureDim, 
+    		          y: categoryDim,
+			  fill: fillval
+    		        }
+			);
+	return barXPlot;
 	
+	}	
 function makeBarXStacked(chartDivElem,selectionRs) {
 	var categoryDim1=document.getElementById("y_horizontal").value;
 	var categoryDim2=document.getElementById("stroke_bar").value;
diff --git a/superx/xml/viz_html_chart.xsl b/superx/xml/viz_html_chart.xsl
index c06e8aa..da42cde 100644
--- a/superx/xml/viz_html_chart.xsl
+++ b/superx/xml/viz_html_chart.xsl
@@ -1347,6 +1347,7 @@ function tableMetaData(nr,value,name,isDefault)
 
 var rsTableMetaData=new Array();
 var rsColumnMetaData=new Array();
+var rs=new Array();
 
 </xsl:text>
 
@@ -1380,7 +1381,9 @@ rsTableMetaData.push(new tableMetaData(
 </xsl:choose>
 <xsl:text>
 ));
+rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]=new Array();
 
+var myChartModel=new chartModel(1,"","",rsTableMetaData);
 
 function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</xsl:text>
 <xsl:for-each select="sqlerg/complete_headers/header">
@@ -1405,16 +1408,17 @@ function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</x
 </xsl:for-each><xsl:text>
 }
 
-var rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>= new Array();
+rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]=new Array();
 
 </xsl:text>
 
+
 <xsl:for-each select="sqlerg/complete_headers/header">
 <xsl:variable name="rownr">
 <xsl:value-of select="position()"/>
 </xsl:variable>
 <xsl:text>
-rsColumnMetaData.push(new dataRowMetaData('</xsl:text>
+rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRowMetaData('</xsl:text>
 <xsl:value-of select="$tableId"/><xsl:text>',</xsl:text>
 <xsl:value-of select="$rownr"/>
 <xsl:text>,'</xsl:text>
@@ -1440,7 +1444,7 @@ rsColumnMetaData.push(new dataRowMetaData('</xsl:text>
 <xsl:value-of select="position()"/>
 </xsl:variable>
 <xsl:text>
-rsColumnMetaData[</xsl:text><xsl:value-of select="number($colnr)-1"/><xsl:text>].coltype=</xsl:text><xsl:value-of select="@typ"/>
+rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>][</xsl:text><xsl:value-of select="number($colnr)-1"/><xsl:text>].coltype=</xsl:text><xsl:value-of select="@typ"/>
 <xsl:text>;
 </xsl:text>
 </xsl:for-each>
@@ -1448,7 +1452,8 @@ rsColumnMetaData[</xsl:text><xsl:value-of select="number($colnr)-1"/><xsl:text>]
 </xsl:if>
 <!--now resultset-->
 <xsl:text>
-rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(</xsl:text><xsl:value-of select="$rownr"/>
+//rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]= new Array();
+rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(</xsl:text><xsl:value-of select="$rownr"/>
 <xsl:for-each select="col">
 <xsl:text>,</xsl:text>
 <xsl:choose>
@@ -1473,6 +1478,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
 </script>
 </xsl:template>
 <xsl:template name="diagrammdaten">
+
 <xsl:for-each select="ergebnis/ergebniselement">
 <p class="title is-5"><xsl:value-of select="../maskenname" /></p>
 <xsl:call-template name="legende" />
@@ -1480,14 +1486,14 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
   <xsl:call-template name="navigationsmenue" />
 </xsl:if>-->
 <xsl:call-template name="buildVizData" >
-<xsl:with-param name="tableId" select="concat('table' ,@ordnr)" />
+<xsl:with-param name="tableId" select="@ordnr" />
 </xsl:call-template>
 </xsl:for-each>
 <span class="separator">&#160;</span>
 
 <!--Aufruf/Anzeige Diagrammdaten-->
 <xsl:for-each select="ergebnis/ergebniselement">
-<xsl:variable name="tableId"><xsl:value-of select="concat('table' ,@ordnr)"/></xsl:variable>
+<xsl:variable name="tableId"><xsl:value-of select="@ordnr"/></xsl:variable>
 <div class="field is-grouped">
   <div class="label-container">
      <label class="label is-required is-small"><strong><xsl:text>Daten-Tabelle </xsl:text><xsl:value-of select="../maskenname"/></strong></label>
@@ -1507,8 +1513,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
   <xsl:attribute name="onClick">
   <xsl:text>showDataTable('dataDivTable</xsl:text>
   <xsl:value-of select="$tableId"/>
-  <xsl:text>',rs_</xsl:text><xsl:value-of select="$tableId"/>
-  <xsl:text>,rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>MetaData,10);</xsl:text>
+  <xsl:text>',rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>],rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>],10);</xsl:text>
   </xsl:attribute>
 	<span class="icon">
 		<img src="../images/icons/more.svg" title="Laden" /> 
@@ -1810,7 +1815,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
     <p class="bd-notification is-primary">
       Diagramm
     </p>
-    <p><span class="button is-link is-outlined is-small" onClick="renderChart('chartDiv');">Erzeugen</span></p>
+    <p><span class="button is-link is-outlined is-small" onClick="updateChartModel();renderChart('chartDiv',myChartModel);">Erzeugen</span></p>
   </div>
   <div class="column is-half">
   <div class="field is-grouped">
@@ -1821,7 +1826,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
 	  <div class="field is-active">
 	      <p class="control-new">
 	       <div class="select is-small is-fullwidth">
-	       <textarea  class="maskinput" id="chartName"  name="chartName" rows="3" cols="20" onChange="renderChart('chartDiv');"/>
+	       <textarea  class="maskinput" id="chartName"  name="chartName" rows="3" cols="20" onChange="updateChartModel();renderChart('chartDiv',myChartModel);"/>
 	       </div>
 	      </p>
 	  </div>
@@ -1898,7 +1903,9 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
    </div>
    <div id="ChartElementsDiv" style="display:none">
    <div id="ChartElementListDiv">
-   <a onClick="createChartElementConfig1Form(document.getElementById('fldVizRenderer').value)">Neues Element</a>
+   </div>
+   <div id="ChartElementListFooterDiv">
+   <a onClick="createChartElementConfig1Form(document.getElementById('fldVizRenderer').value,null)">Neues Element</a>
    </div>
     <div id="ChartElementConfig1Div"> </div>
    <div id="ChartElementConfig2Div"> </div>