commonChartProperties Formular und ausgewertet, css Formatierung #3

superx/xml/js/viz/viz_functions.js

@@ -368,22 +368,40 @@ function renderForm(formDiv,chartProperties,myCommonChartProperties)
 		//here values, and then:
 		tabElem.appendChild( rowElem);
 		}
-		/*
+	for(var k=0;k < myCommonChartProperties.length;k++)
+	{
 	const rowElem = document.createElement("tr");
 	const tdCap = document.createElement("td");
-	const textnode = document.createTextNode("Breite");
+	const textnode = document.createTextNode(myCommonChartProperties[k].caption);
 	tdCap.appendChild(textnode);
-	const tdInpElem = document.createElement("td");
-	const inpElem = document.createElement("input");
-	inpElem.id="viz_width";
-	inpElem.name="viz_width";
-	inpElem.type="text";
-	inpElem.value="800";
-	tdInpElem.appendChild(inpElem);
 	rowElem.appendChild(tdCap);
-	rowElem.appendChild(tdInpElem);
-	tabElem.appendChild(rowElem);
-	*/
+	if(myCommonChartProperties[k].inputType==0)
+		{
+		//Einfaches Texteingabefeld:
+		const tdInpElem = document.createElement("td");
+		const inpElem = document.createElement("input");
+		inpElem.id=myCommonChartProperties[k].name;
+		inpElem.name=myCommonChartProperties[k].name;
+		inpElem.type="text";
+		inpElem.value=myCommonChartProperties[k].defaultValue;
+		tdInpElem.appendChild(inpElem);
+		rowElem.appendChild(tdInpElem);
+
+		}
+	else
+		{ // Klappmenü:
+		const tdSelElem = document.createElement("td");
+		const selElem = document.createElement("select");
+		selElem.name=myCommonChartProperties[k].name;
+		selElem.id=myCommonChartProperties[k].name;
+		fillSelectOptions(selElem,myCommonChartProperties[k].getValueResultset(),myCommonChartProperties[k].isMandatory);
+		tdSelElem.appendChild(selElem);
+		rowElem.appendChild(tdSelElem);
+		}
+	//here values, and then:
+	tabElem.appendChild( rowElem);
+	}		
+
 	myForm.appendChild(tabElem);
 		
 	//TODO: myCommonChartProperties auf separatem TAB
@@ -721,19 +739,30 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
 	var options;
 	var categoryDim=document.getElementById("dimension1").value;
 	var measureDim=document.getElementById("measure1").value;
-	var fontSizeDefault=getCommonChartProperty("fontSize");
+	var fontSizeDefault=getCommonChartProperty("fontSize")+"pt";
 	var chartWidth=getCommonChartProperty("chartWidth");
+	var myFontFamily=getCommonChartProperty("font-family");
+	var myBgColor=getCommonChartProperty("background-color");
+	var myColor=getCommonChartProperty("color");
+
 	var marginLeftDefault=chartWidth/5; //20% liner Rand
 	var marginBottomDefault=100;
 	var categoryLabel=getColumnCaption(categoryDim);
 	var measureLabel=getColumnCaption(measureDim);
+	var styles={
+    backgroundColor: myBgColor,
+    color: myColor,
+    fontFamily: myFontFamily,
+    fontSize: fontSizeDefault,
+    overflow: "visible"
+  }
 
 	if(chartOrientationVertical)
 		{
 	 options={
 			marginLeft:marginLeftDefault,
 			marginBottom:marginBottomDefault,
-			fontSize:fontSizeDefault, 
+			width:chartWidth,
 			x: {
 				    tickRotate: -45,
 				    label:categoryLabel
@@ -743,7 +772,8 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
 				    grid:true,
 				    label: measureLabel 
 			},
-			marks:	  marksArray
+			marks:	  marksArray,
+	 		style: styles
 	 		}
 		}
 	else
@@ -751,7 +781,7 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
 		 options={
 					marginLeft:marginLeftDefault,
 					marginBottom:marginBottomDefault,					
-					fontSize:fontSizeDefault, 
+					width:chartWidth,
 					y: {
 					    label:categoryLabel
 					  },
@@ -760,7 +790,8 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
 					    grid:true,
 					    label: measureLabel 
 					  },	
-					  marks:	  marksArray
+					  marks:	  marksArray,
+				 		style: styles
 					  
 		 		}
 		
@@ -861,7 +892,13 @@ function getCommonChartProperty(name)
 	for (var i=0;i<commonChartProperties.length;i++)
 	{
 		if(commonChartProperties[i].name==name)
-			propertyValue=commonChartProperties[i].defaultValue; //TODO aus formular übersteuern
+			{
+			propertyValue=document.forms["chartPropertiesForm"].elements[name].value;
+			if(propertyValue=="" && commonChartProperties[i].defaultValue!="")
+				{
+			propertyValue=commonChartProperties[i].defaultValue;
+				}
+			}
 	}
 	return propertyValue;
 }

superx/xml/viz_html_chart.xsl

@@ -106,7 +106,12 @@ text-align:right;
 padding:3px;
 }
 
-
+div.section
+{
+margin-bottom:30px;
+padding-bottom:10px;
+border-bottom:thick solid gray;
+}
 
 </style>
 
@@ -117,39 +122,65 @@ padding:3px;
 <xsl:template name="tableJavascript_viz">
 <script language="Javascript" type="text/javascript" src="/superx/xml/js/viz/d3.min.js" />
 <script language="Javascript" type="text/javascript" src="/superx/xml/js/viz/plot.js" />
-<script><xsl:text>
+<script><xsl:text><![CDATA[
 
 //document.body.append(Plot.plot(options));
 
-function commonChartProperty(name,caption,isOptional,staticValues,defaultValue) 
+function commonChartProperty(name,caption,isMandatory,inputType,staticValues,defaultValue) 
 {
 this.name=name;
 this.caption=caption;
 this.staticValues=staticValues;
-this.isOptional=isOptional;
+this.isMandatory=isMandatory;
+this.inputType=inputType;
 this.defaultValue=defaultValue;
+this.getValueResultset = function () {
+var valueOptions=[];
+var optionCounter=0;
+var staticValueArray = staticValues.split(/\|/);
+	for(var j=0;j < staticValueArray.length;j++)
+		{
+		var isDefault=false;
+		if(staticValueArray[j])
+			{
+				if(staticValueArray[j]==this.defaultValue)
+					isDefault=true;
+				var o=new selectionPropertyValue(optionCounter,staticValueArray[j],staticValueArray[j],isDefault);
+				valueOptions[optionCounter]=o;
+				optionCounter++;
+			}
+		}
+	return valueOptions;
+}
 }
 
 var commonChartProperties=[];
-var newCommonChartProperty = new commonChartProperty("valueLabelWidth","Werte-Label Breite", null,true,20);
+var newCommonChartProperty = new commonChartProperty("valueLabelWidth","Werte-Label Breite", false, 0,null,20);
 commonChartProperties.push(newCommonChartProperty);
 
-var newCommonChartProperty = new commonChartProperty("gridLabelHeight","Grid-Label Höhe", null,true,18);
+var newCommonChartProperty = new commonChartProperty("gridLabelHeight","Grid-Label Höhe", false,0, null,18);
 commonChartProperties.push(newCommonChartProperty);
 
-var newCommonChartProperty = new commonChartProperty("gridChartOffset","Grid Offset", null,true,3);
+var newCommonChartProperty = new commonChartProperty("background-color","Hintergrundfarbe", false,0, null,"#ffffeb");
+commonChartProperties.push(newCommonChartProperty);
+
+var newCommonChartProperty = new commonChartProperty("color","Farbe Text- und Diagrammelemente", false,0, null,"#3333ff");
+commonChartProperties.push(newCommonChartProperty);
+
+
+var newCommonChartProperty = new commonChartProperty("gridChartOffset","Grid Offset", false,0, null,3);
 commonChartProperties.push(newCommonChartProperty);
 
-var newCommonChartProperty = new commonChartProperty("fontSize","Schriftgröße", null,false,10);
+var newCommonChartProperty = new commonChartProperty("fontSize","Schriftgröße", false, 0, null,10);
 commonChartProperties.push(newCommonChartProperty);
 
-var newCommonChartProperty = new commonChartProperty("font-family","Schriftart", null,false,"sans-serif");
+var newCommonChartProperty = new commonChartProperty("font-family","Schriftart", false, 1, "sans-serif|serif|monospace","sans-serif");
 commonChartProperties.push(newCommonChartProperty);
 
-var newCommonChartProperty = new commonChartProperty("chartWidth","Breite des Diagramms", null,false,"800");
+var newCommonChartProperty = new commonChartProperty("chartWidth","Breite des Diagramms", false, 0,null,"800");
 commonChartProperties.push(newCommonChartProperty);
 
-var newCommonChartProperty = new commonChartProperty("chartCaption","Titel des Diagramms", null,false,"</xsl:text>
+var newCommonChartProperty = new commonChartProperty("chartCaption","Titel des Diagramms", false,0, null,"]]></xsl:text>
 <xsl:value-of select="/ergebnisse/ergebnis/maskenname" /><xsl:text>");
 commonChartProperties.push(newCommonChartProperty);
 
@@ -1185,7 +1216,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 
 
 </script>
-<div id="dataDiv">
+<div id="dataDiv" class="section">
 <div id="dataDivHeader">
 <input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Datentabelle anzeigen" onClick="showDataTable('dataDivTable',rs,rsMetaData,10);" />
 </div>
@@ -1194,7 +1225,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 </div>
 </div>
 
-<div id="dataSelectionDiv">
+<div id="dataSelectionDiv" class="section">
 <div id="dataSelectionHeader">
 <input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Datenselektion anzeigen" onClick="fillDataSelectionForm('dataSelectionFormDiv');" />
 
@@ -1239,7 +1270,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 </div>
 </div>
 
-<div id="selectionResultPreview">
+<div id="selectionResultPreview" class="section">
 <div id="selectionResultPreviewHeader">
 <input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Selektion anzeigen" onClick="selectionResultPreview('selectionResultPreviewTable');" />
 
@@ -1249,7 +1280,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 
 </div>
 
-<div id="chartProperties">
+<div id="chartProperties" class="section">
 <div id="chartPropertiesHeader">
 <input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Diagramm-Format anzeigen" onClick="showChartPropertiesForm();" />
 </div>
@@ -1273,13 +1304,13 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 
 <div id="chartPropertiesFooter">
 <input type="button" tabindex="10000" class="sx_buttondiv_submit" value="Diagramm erzeugen" onClick="createChart();" />  
-<button class="sx_buttondiv_submit" onClick="showOptionsCode();">Plot-Quellcode</button>
+<!--<button class="sx_buttondiv_submit" onClick="showOptionsCode();">Plot-Quellcode</button>-->
 </div>
 </form>
 </div>
 </div>
 
-<div id="chartCanvas">
+<div id="chartCanvas" class="section">
 <div id="chartCanvasHeader">
 
 </div>
@@ -1290,7 +1321,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
 
 </div>
 </div>
-<div id="chartSVGsrcDiv">
+<div id="chartSVGsrcDiv" class="section">
 <div id="chartSVGsrcDivHeader">
 <button class="sx_buttondiv_submit" onClick="showSrcCode();">SVG-Quellcode</button>