https://observablehq.com/plot refined #3

src-modules/module/viz/conf/includes.txt

@@ -5,3 +5,5 @@ xml/js/d3/d3.min.js
 xml/js/d3/d3-license.txt
 xml/viz_html_chart.xsl
 images/icons/chart-bar.svg
+xml/js/d3/plot.js
+

superx/xml/js/d3/viz_functions.js

@@ -17,7 +17,16 @@ this.isDefault=isDefault;
 
 }
 
-function chartProperty(name,caption,isDynamic,isMeasure,isOptional,staticValues,defaultValue) 
+function dimFunction(nr,name,value,isDefault ) 
+    {
+this.nr=nr;
+this.name=name;
+this.value=value;
+this.isDefault=isDefault;
+
+}
+
+function chartProperty(name,caption,isDynamic,isMeasure,isOptional,staticValues,defaultValue,optionalFunction) 
     {
 this.name=name;
 this.caption=caption;
@@ -26,6 +35,7 @@ this.isMeasure=isMeasure;
 this.staticValues=staticValues;
 this.isOptional=isOptional;
 this.defaultValue=defaultValue;
+this.optionalFunction=optionalFunction;
 this.getValueResultset = function () {
         var valueOptions=[];
 	var optionCounter=0;
@@ -40,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].colcaption,isDefault);
+					var o=new chartPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].nr,isDefault);
 					valueOptions[optionCounter]=o;
 					optionCounter++;
 				}
@@ -64,8 +74,12 @@ this.getValueResultset = function () {
 
 function prepareChartProperties(chartType)
 {
-var chartProperties=[];
+	var dimFunctions=[];
-switch (chartType) {
+	var myFunction= new dimFunction(0,"Wort 1 ans Ende","switchWord1and2ff",false);
+	dimFunctions[0]=myFunction;
+
+	var chartProperties=[];
+	switch (chartType) {
 		case "bar_x":
 		chartProperties=prepareBarXForm();
 		break;
@@ -76,7 +90,7 @@ switch (chartType) {
 		return false;
 		break;
 	}
-renderForm("chartProperties",chartProperties,commonChartProperties);
+renderForm("chartProperties",chartProperties,commonChartProperties,dimFunctions);
 
 return true;
 }
@@ -85,9 +99,9 @@ function prepareBarXForm()
 {
 	var chartProperties=[];
 	var propertyCounter=0;
-	var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,false,null,null);
+	var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,false,null,null,true);
 	chartProperties[0]=myProp;
-	var myProp= new chartProperty("viz_measure_dim","Maß",true,true,false,null,null);
+	var myProp= new chartProperty("viz_measure_dim","Maß",true,true,false,null,null,true);
 	chartProperties[1]=myProp;
 
 return chartProperties;
@@ -97,15 +111,15 @@ function prepareLineForm()
 {
 	var chartProperties=[];
 	var propertyCounter=0;
-	var myProp= new chartProperty("viz_category_dim","X-Achse",true,false,false,null,null);
+	var myProp= new chartProperty("viz_category_dim","X-Achse",true,false,false,null,null,true);
 	chartProperties[0]=myProp;
-	var myProp= new chartProperty("viz_measure_dim","Y-Achse",true,true,false,null,null);
+	var myProp= new chartProperty("viz_measure_dim","Y-Achse",true,true,false,null,null,true);
 	chartProperties[1]=myProp;
 
 return chartProperties;
 }
 
-function renderForm(formDiv,chartProperties,myCommonChartProperties)
+function renderForm(formDiv,chartProperties,myCommonChartProperties,dimFunctions)
 {
 	//first empty form:
 	var myForm=document.getElementById(formDiv);
@@ -125,8 +139,20 @@ function renderForm(formDiv,chartProperties,myCommonChartProperties)
 		const selElem = document.createElement("select");
 		selElem.name=chartProperties[k].name;
 		selElem.id=chartProperties[k].name;
-		fillSelectOptions(selElem,chartProperties[k].getValueResultset());
+		fillSelectOptions(selElem,chartProperties[k].getValueResultset(),true);
 		tdSelElem.appendChild(selElem);
+		if(chartProperties[k].optionalFunction)
+		{
+			const fnElemLabel = document.createTextNode(" opt. Fkt.: ");
+			const fnSelElem = document.createElement("select");
+			fnSelElem.name=chartProperties[k].name+"_fn";
+			fnSelElem.id=chartProperties[k].name+"_fn";
+			fillSelectOptions(fnSelElem,dimFunctions,false);
+			tdSelElem.appendChild(fnElemLabel);
+			tdSelElem.appendChild(fnSelElem);
+			
+		}
+		
 		rowElem.appendChild(tdCap);
 		rowElem.appendChild(tdSelElem);
 		//here values, and then:
@@ -155,19 +181,27 @@ function renderForm(formDiv,chartProperties,myCommonChartProperties)
 
 
 
-function fillSelectOptions(myCombo,chartPropertyValues)
+function fillSelectOptions(myCombo,myValues,isMandatory)
 {
 var optionCounter=0;
 var selectedOption=null;
 while (myCombo.firstChild) {
     myCombo.removeChild(myCombo.firstChild);
 }
-for(var j=0;j < chartPropertyValues.length;j++)
+var optionCounter=0;
+if(!isMandatory)
 {
-	if(chartPropertyValues[j].isDefault)
+	//add an empty option:
-		selectedOption=j;
+	var o=new Option("","");
+	myCombo.options[optionCounter]=o;
+	optionCounter++;
+}
+for(var j=0;j < myValues.length;j++)
+{
+	if(myValues[j].isDefault)
+		selectedOption=optionCounter;
 	
-	var o=new Option(chartPropertyValues[j].name,chartPropertyValues[j].nr,null,null);
+	var o=new Option(myValues[j].name,myValues[j].value,null,null);
 	myCombo.options[optionCounter]=o;
 	optionCounter++;
 }
@@ -175,25 +209,18 @@ if(selectedOption!=null)
 	myCombo.selectedIndex=selectedOption;
 }
 
-/* alt:*/
-function fillSelectFields()
-{
-fillSelectOptions("viz_category_dim",false);
-fillSelectOptions("viz_measure_dim",true);
-
 
-return true;
-}
 
 
 function prepareData()
 {
 var data=[];
 
-//TODO: filld3ArrayofObjects
 var rowcount=rs.length;
 var colnrOfCategorydimName=document.getElementById("viz_category_dim").value;
 var colnrOfMeasure=document.getElementById("viz_measure_dim").value;
+var functionOfCategoryDim=document.getElementById("viz_category_dim_fn").value;
+var functionOfMeasureDim=document.getElementById("viz_measure_dim_fn").value;
 var maxLenName=0;
 var maxValue=0;
 for(j=1;j<rowcount;j++)
@@ -201,19 +228,67 @@ for(j=1;j<rowcount;j++)
 	console.log(rs.length+"-"+j+"-"+colnrOfCategorydimName);
 	if(rs[j][colnrOfCategorydimName]) //only if Name is not empty:
 	{
-	data.push(new d3dataRow(j,rs[j][colnrOfCategorydimName],rs[j][colnrOfMeasure]));
+	var categoryDimValue=rs[j][colnrOfCategorydimName];
+	var measureDimValue=rs[j][colnrOfMeasure];
+	if(functionOfCategoryDim !="")
+		categoryDimValue=applyFunction(categoryDimValue,functionOfCategoryDim);
+	if(functionOfMeasureDim !="")
+		measureDimValue=applyFunction(measureDimValue,functionOfMeasureDim);
+	data.push(new d3dataRow(j,categoryDimValue,measureDimValue));
 	//identify max String length to compute x axis size
-	if(rs[j][colnrOfCategorydimName].length >maxLenName)
+	if(categoryDimValue.length >maxLenName)
-		maxLenName=rs[j][colnrOfCategorydimName].length;
+		maxLenName=categoryDimValue.length;
 	//the same for values:
-	if(rs[j][colnrOfMeasure] >maxValue)
+	if(measureDimValue >maxValue)
-		maxValue=rs[j][colnrOfMeasure];
+		maxValue=measureDimValue;
 	}
 	
 }
 return data;
 }
 
+
+function showDataTable()
+{
+tableDiv=document.getElementById("tableDiv");
+tableDiv.innerHTML=""; //reset table
+var rowcount=rs.length;
+const tabElem = document.createElement("table");
+tabElem.border="1";
+tabElem.width="100%";
+const rowElem = document.createElement("tr");
+for(var col=0;col < rsMetaData.length;col++)
+	{
+	const thCap = document.createElement("th");
+	const textnode = document.createTextNode(rsMetaData[col].colcaption);
+	thCap.appendChild(textnode);
+	rowElem.appendChild(thCap);
+	}
+tabElem.appendChild(rowElem);
+
+for(row=1;row<rowcount;row++)
+{
+	if(rs[row])
+	{
+		const rowElem = document.createElement("tr");
+		for(var col=1;col < rs[row].length;col++)
+			{
+			const tdCap = document.createElement("td");
+			if(rs[row][col])
+			{
+				const textnode = document.createTextNode(rs[row][col]);
+				tdCap.appendChild(textnode);
+			}
+			rowElem.appendChild(tdCap);
+			}
+		tabElem.appendChild(rowElem);
+	}
+}
+tableDiv.appendChild(tabElem);
+}
+
+
+
 function createChart()
 {
 chartType=document.getElementById("viz_chart_type").value;
@@ -228,15 +303,15 @@ if(document.getElementById("viz_category_dim").value=="" ||
 var data=[];
 data=prepareData();
 	
-	var valueLabelWidth = getCommonChartProperty("valueLabelWidth"); 
+var valueLabelWidth = getCommonChartProperty("valueLabelWidth"); 
-	var fontFamily=getCommonChartProperty("fontFamily"); 
+var fontFamily=getCommonChartProperty("fontFamily"); 
-	var gridLabelHeight =  getCommonChartProperty("gridLabelHeight"); 
+var gridLabelHeight =  getCommonChartProperty("gridLabelHeight"); 
-	var gridChartOffset = getCommonChartProperty("gridChartOffset");
+var gridChartOffset = getCommonChartProperty("gridChartOffset");
-	var chartWidth=getCommonChartProperty("chartWidth");
+var chartWidth=getCommonChartProperty("chartWidth");
-	var fontSize=getCommonChartProperty("fontSize");
+var fontSize=getCommonChartProperty("fontSize");
 
-	document.getElementById("chartDiv").innerHTML=""; //reset canvas
+document.getElementById("chartDiv").innerHTML=""; //reset canvas
-	var svg = d3.select("#chartDiv").append("svg")
+var svg = d3.select("#chartDiv").append("svg")
       .attr("width", chartWidth) //maxBarWidth + barLabelWidth + valueLabelWidth)
       //.attr("height", y.range()[1])
       .attr("font-family", fontFamily)
@@ -314,8 +389,16 @@ function makeBarX(svg,data)
 }
 
 function makeLine(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");
+var maxLenName=d3.max(data, d => d.name.length);
+var maxLenNamePx=maxLenName*fontSize/1.5;
+var marginLeftPx=xLabel.length*fontSize;
+
 var options = {
-  marginBottom:100,
+  marginBottom:maxLenNamePx,
+  marginLeft:marginLeftPx,
   x: {
     tickRotate: -45,
     ticks: 5,
@@ -325,12 +408,13 @@ var options = {
     labelAnchor: "left",
     labelOffset: 0,
     nice: true,
-    label: "My label",
+    label: xLabel,
     type:"point"
   },
   // set y axis options
   y: {
-    grid:true
+    grid:true,
+    label: yLabel 
   },
   sort: "nr",
   // define the marks we will use, dots and a line
@@ -404,10 +488,19 @@ function getCommonChartProperty(name)
 
 function showSrcCode()
 {
-	//alert(mydiv);
+var myChartDiv= document.getElementById("chartDiv");
-var mySvg=document.getElementById("chartSVG");
+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
-	var svg_xml = (new XMLSerializer).serializeToString(mySvg);
+		svg_xml = (new XMLSerializer).serializeToString(mySvg);
+	}
+	}
 //alert(svg_xml);
 document.getElementById("chartSrc").innerHTML=svg_xml;
 document.getElementById("chartSrcFields").style.visibility="visible";
@@ -471,3 +564,36 @@ function makeHisto() {
         g.append( "g" ).call( d3.axisLeft(scY) );
     } );
 }
+function applyFunction(theValue,theFunction)
+{
+	switch (theFunction) {
+		case "switchWord1and2ff":
+			var ret=switchWord1and2ff(theValue);
+		break;
+		default:
+			var ret=theValue;
+		break;
+	}
+	
+        return ret;
+
+}
+
+function switchWord1and2ff(theString)
+{
+	//erzeugt z.B. aus "WiSe 2020/2021" den Wert "2020/2021", zum Sortieren
+	var theWords = theString.split(/ /);
+	var word1=theWords[0];
+	var word2="";
+	var ret="";
+	if(theWords.length >1)
+	{
+		for(var k=1;k < theWords.length;k++)
+		{
+			word2+= theWords[k];
+		}
+		ret +=word2;
+	}
+	ret+=" "+ word1;
+	return ret.trim();
+}

superx/xml/pageComponents_html_final_viz.xsl.sam

@@ -10,6 +10,23 @@ xmlns:HtmlUtils="de.superx.util.HtmlUtils">
   pageComponents_html.xsl überragt. -->
 
 <xsl:template name="exportButtons_superx" >
+<script language="Javascript">
+function prepareExportChart()
+{
+document.forms[0].stylesheet.value = 'viz_html_chart.xsl';
+document.forms[0].contenttype.value = 'text/html';
+document.forms[0].target = '_blank';
+
+	document.forms[0].offset.value='0';
+	document.forms[0].maxoffset.value = '1000000';
+	document.forms[0].reuseresult.value = 'true';
+	if (isTreeTable) {
+		dojo.widget.byId("ttexdlg").show(); //ruft function exportandhidedlg auf
+	} else {
+		startExport();
+	}	
+}
+</script>
 <table border="0"><tr><!-- <td>Export:</td> -->
 <td>
 <!-- druckversion übergibt maxoffset 10000000 damit alle Sätze angezeigt werden -->
@@ -25,11 +42,12 @@ xmlns:HtmlUtils="de.superx.util.HtmlUtils">
 </td>
 <td>
 <!-- druckversion übergibt maxoffset 10000000 damit alle Sätze angezeigt werden -->
-	<a onMouseOver="window.status='Export starten';return true" onFocus="window.status='Download starten';return true" onMouseOut="window.status='Download starten';return true"><xsl:attribute name="href"><xsl:text>javascript:prepareExport('chart')</xsl:text>
+	<a onMouseOver="window.status='Export starten';return true" onFocus="window.status='Download starten';return true" onMouseOut="window.status='Download starten';return true"><xsl:attribute name="href"><xsl:text>javascript:prepareExportChart()</xsl:text>
 	</xsl:attribute>
 	
 	<!-- <xsl:attribute name="title"><xsl:text>Druckversion</xsl:text></xsl:attribute>
 	<xsl:text>Druckversion</xsl:text> -->
+	<input type="hidden" name="usetreetable" />
 	<img title="Ausgabe als Diagramm" alt="Ausgabe in Diagramm"
 		src="../images/icons/chart-bar.svg" border="0" width="25px" height="25px" /><!--chart-bar.svg-->
 	</a>

superx/xml/viz_html_chart.xsl

@@ -1205,6 +1205,7 @@ Aggregatfunktion: <select class="maskinputPflicht" id="viz_measure_dim_func" NAM
 </tr>
 </table>-->
 <p><input type="button" tabindex="10000" class="sx_buttondiv_submit" value="Diagramm erzeugen" onClick="createChart();" /> 
+<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Datentabelle anzeigen" onClick="showDataTable();" />
 </p>
 <div id="chartDiv" style="border:thin solid black">
 </div>
@@ -1214,7 +1215,8 @@ Aggregatfunktion: <select class="maskinputPflicht" id="viz_measure_dim_func" NAM
 <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="tableDiv" style="border:thin solid black">
+</div> 
 </xsl:for-each>
 </xsl:template>