Refactoring Objekt dataRow generisch #3

superx/xml/js/d3/viz_functions.js

@@ -50,7 +50,7 @@ this.getValueResultset = function () {
 				{
 					if(rsMetaData[j].colcaption==defaultValue)
 						isDefault=true;
-					var o=new chartPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].nr,isDefault);
+					var o=new chartPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].colname,isDefault);
 					valueOptions[optionCounter]=o;
 					optionCounter++;
 				}
@@ -318,7 +318,7 @@ if(document.getElementById("viz_category_dim").value=="" ||
 }
 */
 var data=[];
-data=prepareData();
+//data=prepareData();
 	
 var valueLabelWidth = getCommonChartProperty("valueLabelWidth"); 
 var fontFamily=getCommonChartProperty("fontFamily"); 
@@ -326,7 +326,7 @@ var gridLabelHeight =  getCommonChartProperty("gridLabelHeight");
 var gridChartOffset = getCommonChartProperty("gridChartOffset");
 var chartWidth=getCommonChartProperty("chartWidth");
 var fontSize=getCommonChartProperty("fontSize");
-
+svg,data
 document.getElementById("chartDiv").innerHTML=""; //reset canvas
 var svg = d3.select("#chartDiv").append("svg")
       .attr("width", chartWidth) //maxBarWidth + barLabelWidth + valueLabelWidth)
@@ -339,15 +339,21 @@ var svg = d3.select("#chartDiv").append("svg")
    
 switch (chartType)
 {
-	case "bar_x":
+case "sample":
+	makeSample();
+	break;
+case "bar_x":
+	makeBarX();
+    break;
+	case "bar_x_alt":
 		makeBarX(svg,data);
         break;
 	case "bar_y":
-		makeBarY(svg,data);
+		makeBarY();
         break;
 	
 	case "line":
-		makeLine(svg,data);
+		makeLine();
 		break;
 	default:
 		alert("Please select a chart type");
@@ -356,7 +362,7 @@ switch (chartType)
 
 }
 
-function makeBarX(svg,data)
+function makeBarX_alt(svg,data)
 {
 	var barHeight = 18; 
 	var barLabelWidth = 500; 
@@ -408,7 +414,7 @@ function makeBarX(svg,data)
 	      .text(d => d.name);
 }
 
-function makeLine(svg,data) {
+function makeLine_alt(svg,data) {
 var xLabel=rsMetaData[document.getElementById("viz_category_dim").value-1].colcaption;
 var yLabel=rsMetaData[document.getElementById("viz_measure_dim").value-1].colcaption;
 var fontSize=getCommonChartProperty("fontSize");
@@ -448,8 +454,122 @@ var options = {
   
  document.getElementById("chartDiv").appendChild(Plot.plot(options));
 }
+function makeSample()
+{
+	var sales =  [4];
+	sales = [
+		  {units: 10, fruit: "fig"},
+		  {units: 20, fruit: "date"},
+		  {units: 40, fruit: "plum"},
+		  {units: 30, fruit: "plum"}
+		];
+	document.getElementById("chartDiv").appendChild(Plot.dot(sales, 
+			{x: "units", y: "fruit"}
+	).plot());
+
+	}
+function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVertical)
+{
+	var options;
+	var categoryDim=document.getElementById("viz_category_dim").value;
+	var measureDim=document.getElementById("viz_measure_dim").value;
+	var fontSizeDefault=getCommonChartProperty("fontSize");
+	var chartWidth=getCommonChartProperty("chartWidth");
+	var marginLeftDefault=chartWidth/5; //20% liner Rand
+	var marginBottomDefault=100;
+	var categoryLabel=getColumnCaption(categoryDim);
+	var measureLabel=getColumnCaption(measureDim);
+
+	if(chartOrientationVertical)
+		{
+	 options={
+			marginLeft:marginLeftDefault,
+			marginBottom:marginBottomDefault,
+			fontSize:fontSizeDefault, 
+			x: {
+				    tickRotate: -45,
+				    label:categoryLabel
+				  },
+				  // set y axis options
+			y: {
+				    grid:true,
+				    label: measureLabel 
+			},
+			marks:	  marksArray
+	 		}
+		}
+	else
+		{
+		 options={
+					marginLeft:marginLeftDefault,
+					marginBottom:marginBottomDefault,					
+					fontSize:fontSizeDefault, 
+					y: {
+					    label:categoryLabel
+					  },
+					  x: {
+						tickRotate: -45,
+					    grid:true,
+					    label: measureLabel 
+					  },	
+					  marks:	  marksArray
+					  
+		 		}
 		
-function makeBarY(svg,data) {
+		}
+	document.getElementById("chartOptions").innerHTML=JSON.stringify(options);
+
+	return options;
+}
+function makeBarX() {
+	var categoryDim=document.getElementById("viz_category_dim").value;
+	var measureDim=document.getElementById("viz_measure_dim").value;
+	var marksArray=new Array();
+	marksArray[0]=Plot.barX(rs,
+    			    	{
+    		          x: measureDim, 
+    		          y: categoryDim
+    		        });
+
+	var options= getChartOptions(categoryDim,measureDim,marksArray,false);
+	
+	document.getElementById("chartDiv").appendChild(Plot.plot(options));
+	}
+function makeBarY() {
+	var categoryDim=document.getElementById("viz_category_dim").value;
+	var measureDim=document.getElementById("viz_measure_dim").value;
+	var marksArray=new Array();
+	marksArray[0]=Plot.barY(rs,
+    			    	{
+    		          y: measureDim, 
+    		          x: categoryDim
+    		        });
+
+	var options= getChartOptions(categoryDim,measureDim,marksArray,true);
+	
+	document.getElementById("chartDiv").appendChild(Plot.plot(options));
+	}
+function makeLine() {
+	var categoryDim=document.getElementById("viz_category_dim").value;
+	var measureDim=document.getElementById("viz_measure_dim").value;
+	var marksArray=new Array();
+	marksArray[0]=Plot.line(rs,
+    			    	{
+    		          y: measureDim, 
+    		          x: categoryDim,
+    		          curve: "linear"
+    		        });
+	marksArray[1]=Plot.dot(rs,
+	    	{
+          y: measureDim, 
+          x: categoryDim
+        });
+
+	var options= getChartOptions(categoryDim,measureDim,marksArray,true);
+	
+	document.getElementById("chartDiv").appendChild(Plot.plot(options));
+	}
+function makeBarY_alt(svg,data) {
 var xLabel=rsMetaData[document.getElementById("viz_category_dim").value-1].colcaption;
 var yLabel=rsMetaData[document.getElementById("viz_measure_dim").value-1].colcaption;
 var fontSize=getCommonChartProperty("fontSize");
@@ -530,7 +650,11 @@ document.getElementById("chartSrcFields").style.visibility="visible";
     alert("Angezeigte Tabelle wurde in die Zwischenablage kopiert.");
     */
 }
+function showOptionsCode()
+{
+document.getElementById("chartOptionsFields").style.visibility="visible";
 
+}
 function copySrcCode(mydiv)
 {
 var ergtabelle=document.getElementById(mydiv);
@@ -610,3 +734,14 @@ function switchWord1and2ff(theString)
 	ret+=" "+ word1;
 	return ret.trim();
 }
+
+function getColumnCaption(columnName)
+{
+	let rsMetaDataLen = rsMetaData.length;
+	var colCaption=columnName;
+	for (let i = 0; i < rsMetaDataLen; i++) {
+	  if(rsMetaData[i].colname ==columnName)
+		  colCaption=rsMetaData[i].colcaption;
+	}	
+	return colCaption;
+}

superx/xml/viz_html_chart.xsl

@@ -1094,6 +1094,29 @@ this.colcaption=colcaption;
 this.coltype=coltype;
 }
 
+function dataRow(rownr</xsl:text>
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:text>,</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template>
+</xsl:for-each>
+<xsl:text>
+)
+    {
+    this.rownr=rownr;
+    </xsl:text>
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:text>this.</xsl:text><xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template><xsl:text>=</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template><xsl:text>;
+</xsl:text>
+</xsl:for-each><xsl:text>
+}
+
 var rsMetaData=new Array();
 var rs= new Array();
 
@@ -1135,19 +1158,10 @@ rsMetaData[</xsl:text><xsl:value-of select="number($colnr)-1"/><xsl:text>].colty
 
 </xsl:if>
 <!--now resultset-->
-
 <xsl:text>
-rs[</xsl:text><xsl:value-of select="$rownr"/><xsl:text>] = new Array();
+rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
-</xsl:text>
-
 <xsl:for-each select="col">
-<xsl:variable name="colnr">
+<xsl:text>,</xsl:text>
-<xsl:value-of select="position()"/>
-</xsl:variable>
-<xsl:if test="string-length(wert)!=0">
-<xsl:text>
-rs[</xsl:text><xsl:value-of select="$rownr"/><xsl:text>][</xsl:text><xsl:value-of select="$colnr"/>
-<xsl:text>]= </xsl:text>
 <xsl:choose>
 <xsl:when test="@typ='1'"><xsl:text>'</xsl:text>
 <xsl:call-template name="remove_linebreaksAndQuot">
@@ -1155,21 +1169,24 @@ rs[</xsl:text><xsl:value-of select="$rownr"/><xsl:text>][</xsl:text><xsl:value-o
 </xsl:call-template>
 <xsl:text>'</xsl:text></xsl:when>
 <!--todo:Typ Datum --> 
+<xsl:when test="string-length(wert)=0"><xsl:text>null</xsl:text>
+</xsl:when>
 <xsl:otherwise>
 <xsl:value-of select="wert"/>
 </xsl:otherwise>
 </xsl:choose>
-<xsl:text>;
+</xsl:for-each>
+<xsl:text>));
 </xsl:text>
-</xsl:if>
 </xsl:for-each>
 
-</xsl:for-each>
+
 </script>
 <table border="0">
-<tr><td>Diagrammtyp:</td>
+<tr><td>Ausgabetyp:</td>
 <td><select class="maskinputPflicht" id="viz_chart_type" NAME="viz_chart_type" tabindex="200" onChange="prepareChartProperties(this.value)" >
     <option class="maskinput" value="">Bitte wählen</option>
+    <option class="maskinput" value="sample">Beispiel</option>
     <option class="maskinput" value="bar_x">Balkendiagramm horizontal (einfach)</option>
     <option class="maskinput" value="bar_y">Balkendiagramm vertikal (einfach)</option>
     <option class="maskinput" value="line">Liniendiagramm vertikal (einfach)</option>
@@ -1211,14 +1228,28 @@ Aggregatfunktion: <select class="maskinputPflicht" id="viz_measure_dim_func" NAM
 <div id="chartDiv" style="border:thin solid black">
 </div>
 <p>
-<button class="sx_buttondiv_submit" onClick="showSrcCode();">Quellcode</button>
+<button class="sx_buttondiv_submit" onClick="showSrcCode();">SVG-Quellcode</button>
+<button class="sx_buttondiv_submit" onClick="showOptionsCode();">Plot-Quellcode</button>
 </p>
 <div id="chartSrcFields"  style="visibility:hidden">
 <textarea id="chartSrc" name="chartSrc" class="textarea" placeholder="Quellcode..."  cols="100" rows="20"></textarea><button class="sx_buttondiv_submit" onClick="copySrcCode('chartSrc');">Kopieren</button>
 </div>
+<div id="chartOptionsFields"  style="visibility:hidden">
+<textarea id="chartOptions" name="chartOptions" class="textarea" placeholder="Quellcode..."  cols="100" rows="20"></textarea><button class="sx_buttondiv_submit" onClick="copySrcCode('chartOptions');">Kopieren</button>
+</div>
 <div id="tableDiv" style="border:thin solid black">
 </div> 
 </xsl:for-each>
 </xsl:template>
-
+<xsl:template name="getColumnNameJS">
+<xsl:param name="columnNameFromDB" />
+<xsl:choose>
+<xsl:when test="contains($columnNameFromDB,'?')">
+<xsl:value-of select="concat('column_',@id)"/>
+</xsl:when>
+<xsl:otherwise>
+<xsl:value-of select="$columnNameFromDB"/>
+</xsl:otherwise>
+</xsl:choose>
+</xsl:template>
 </xsl:stylesheet>