From 2a8830e2f46bab5f70a4a66ca493ae495d28df02 Mon Sep 17 00:00:00 2001 From: Daniel Quathamer Date: Mon, 16 May 2022 07:46:51 +0200 Subject: [PATCH] https://observablehq.com/plot refined #3 --- src-modules/module/viz/conf/includes.txt | 2 + superx/xml/js/d3/viz_functions.js | 218 ++++++++++++++---- .../xml/pageComponents_html_final_viz.xsl.sam | 20 +- superx/xml/viz_html_chart.xsl | 6 +- 4 files changed, 197 insertions(+), 49 deletions(-) diff --git a/src-modules/module/viz/conf/includes.txt b/src-modules/module/viz/conf/includes.txt index 2d50d7d..76dacfa 100644 --- a/src-modules/module/viz/conf/includes.txt +++ b/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 + diff --git a/superx/xml/js/d3/viz_functions.js b/superx/xml/js/d3/viz_functions.js index f37ec4e..6721770 100644 --- a/superx/xml/js/d3/viz_functions.js +++ b/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=[]; -switch (chartType) { + var dimFunctions=[]; + 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) - selectedOption=j; + //add an empty option: + 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;jmaxLenName) - maxLenName=rs[j][colnrOfCategorydimName].length; + if(categoryDimValue.length >maxLenName) + maxLenName=categoryDimValue.length; //the same for values: - if(rs[j][colnrOfMeasure] >maxValue) - maxValue=rs[j][colnrOfMeasure]; + if(measureDimValue >maxValue) + 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 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 mySvg=document.getElementById("chartSVG"); - // Extract the data as SVG text string - var svg_xml = (new XMLSerializer).serializeToString(mySvg); +var myChartDiv= document.getElementById("chartDiv"); +var numberOfChildNodes=myChartDiv.childNodes.length; +var svg_xml =""; +for (var i=0;i1) + { + for(var k=1;k < theWords.length;k++) + { + word2+= theWords[k]; + } + ret +=word2; + } + ret+=" "+ word1; + return ret.trim(); +} diff --git a/superx/xml/pageComponents_html_final_viz.xsl.sam b/superx/xml/pageComponents_html_final_viz.xsl.sam index 146d517..b02d5f4 100644 --- a/superx/xml/pageComponents_html_final_viz.xsl.sam +++ b/superx/xml/pageComponents_html_final_viz.xsl.sam @@ -10,6 +10,23 @@ xmlns:HtmlUtils="de.superx.util.HtmlUtils"> pageComponents_html.xsl überragt. --> +
@@ -25,11 +42,12 @@ xmlns:HtmlUtils="de.superx.util.HtmlUtils"> - javascript:prepareExport('chart') + javascript:prepareExportChart() + Ausgabe in Diagramm diff --git a/superx/xml/viz_html_chart.xsl b/superx/xml/viz_html_chart.xsl index 5eb779a..77b897d 100644 --- a/superx/xml/viz_html_chart.xsl +++ b/superx/xml/viz_html_chart.xsl @@ -1204,7 +1204,8 @@ Aggregatfunktion:
--> -

+

+

@@ -1214,7 +1215,8 @@ Aggregatfunktion: - +
+