From adcbf29df90c92230c83936addda0420270a4bf6 Mon Sep 17 00:00:00 2001 From: Daniel Quathamer Date: Tue, 31 May 2022 08:04:13 +0200 Subject: [PATCH] Refactoring Objekt dataRow generisch, Anpassung barX,barY,line #3 --- src-modules/module/viz/conf/includes.txt | 8 +- .../xml/js/{d3 => viz}/d3-7.0.0-license.txt | 0 superx/xml/js/{d3 => viz}/d3.min.js | 0 .../xml/js/{d3 => viz}/plot-0.4.3-license.txt | 0 superx/xml/js/{d3 => viz}/plot.js | 0 superx/xml/js/{d3 => viz}/viz_functions.js | 446 ++++++++++++++---- superx/xml/viz_html_chart.xsl | 140 ++++-- 7 files changed, 452 insertions(+), 142 deletions(-) rename superx/xml/js/{d3 => viz}/d3-7.0.0-license.txt (100%) rename superx/xml/js/{d3 => viz}/d3.min.js (100%) rename superx/xml/js/{d3 => viz}/plot-0.4.3-license.txt (100%) rename superx/xml/js/{d3 => viz}/plot.js (100%) rename superx/xml/js/{d3 => viz}/viz_functions.js (57%) diff --git a/src-modules/module/viz/conf/includes.txt b/src-modules/module/viz/conf/includes.txt index 76dacfa..a610c5d 100644 --- a/src-modules/module/viz/conf/includes.txt +++ b/src-modules/module/viz/conf/includes.txt @@ -1,9 +1,9 @@ doku/viz_modul/viz.html WEB-INF/conf/edustore/db/bin/SQL_ENV_viz.sam -xml/js/d3/viz_functions.js -xml/js/d3/d3.min.js -xml/js/d3/d3-license.txt +xml/js/viz/viz_functions.js +xml/js/viz/d3.min.js +xml/js/viz/d3-license.txt xml/viz_html_chart.xsl images/icons/chart-bar.svg -xml/js/d3/plot.js +xml/js/viz/plot.js diff --git a/superx/xml/js/d3/d3-7.0.0-license.txt b/superx/xml/js/viz/d3-7.0.0-license.txt similarity index 100% rename from superx/xml/js/d3/d3-7.0.0-license.txt rename to superx/xml/js/viz/d3-7.0.0-license.txt diff --git a/superx/xml/js/d3/d3.min.js b/superx/xml/js/viz/d3.min.js similarity index 100% rename from superx/xml/js/d3/d3.min.js rename to superx/xml/js/viz/d3.min.js diff --git a/superx/xml/js/d3/plot-0.4.3-license.txt b/superx/xml/js/viz/plot-0.4.3-license.txt similarity index 100% rename from superx/xml/js/d3/plot-0.4.3-license.txt rename to superx/xml/js/viz/plot-0.4.3-license.txt diff --git a/superx/xml/js/d3/plot.js b/superx/xml/js/viz/plot.js similarity index 100% rename from superx/xml/js/d3/plot.js rename to superx/xml/js/viz/plot.js diff --git a/superx/xml/js/d3/viz_functions.js b/superx/xml/js/viz/viz_functions.js similarity index 57% rename from superx/xml/js/d3/viz_functions.js rename to superx/xml/js/viz/viz_functions.js index 657a868..bcffc66 100644 --- a/superx/xml/js/d3/viz_functions.js +++ b/superx/xml/js/viz/viz_functions.js @@ -1,14 +1,25 @@ /* d3 Code */ -function d3dataRow(nr,name,value ) +function d3dataRow(nr,dimension1,dimension2,measure ) { this.nr=nr; -this.name=name; -this.value=value; +this.dimension1=dimension1; +this.dimension2=dimension2; +this.measure=measure; } -function chartPropertyValue(nr,name,value,isDefault ) +function selectionRowMetaData(nr,targetColumn,colname,colcaption,coltype,colfunction) +{ +this.nr=nr; +this.targetColumn=targetColumn; +this.colname=colname; +this.colcaption=colcaption; +this.coltype=coltype; +this.colfunction=colfunction; +} + +function selectionPropertyValue(nr,name,value,isDefault ) { this.nr=nr; this.name=name; @@ -17,6 +28,8 @@ this.isDefault=isDefault; } + + function dimFunction(nr,name,value,isDefault ) { this.nr=nr; @@ -24,9 +37,38 @@ this.name=name; this.value=value; this.isDefault=isDefault; +} +function chartProperty(name,caption,isMeasure,isMandatory) +{ +this.name=name; +this.caption=caption; +this.isMeasure=isMeasure; +this.isMandatory=isMandatory; +this.getValueResultset = function () { +var valueOptions=[]; +var optionCounter=0; +selectionRsMetaData=fillSelectionResultMetaData(); +console.log("felder"+selectionRsMetaData.length); + for(var j=0;j < selectionRsMetaData.length;j++) + { + var isDefault=false; + console.log("feld "+selectionRsMetaData[j].nr+selectionRsMetaData[j].targetColumn); + if(selectionRsMetaData[j].nr) + { + if(selectionRsMetaData[j].targetColumn==this.name) + isDefault=true; + var o=new selectionPropertyValue(selectionRsMetaData[j].nr,selectionRsMetaData[j].colcaption,selectionRsMetaData[j].targetColumn,isDefault); + valueOptions[optionCounter]=o; + optionCounter++; + } + } + return valueOptions; +} + } -function chartProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction) + +function selectionProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction) { this.name=name; this.caption=caption; @@ -50,7 +92,7 @@ this.getValueResultset = function () { { if(rsMetaData[j].colcaption==defaultValue) isDefault=true; - var o=new chartPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].colname,isDefault); + var o=new selectionPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].colname,isDefault); valueOptions[optionCounter]=o; optionCounter++; } @@ -64,7 +106,7 @@ this.getValueResultset = function () { var isDefault=false; if(rsMetaData[j].colcaption==defaultValue) isDefault=true; - var o=new chartPropertyValue(k,staticValuesArray[k],staticValuesArray[k],isDefault); + var o=new selectionPropertyValue(k,staticValuesArray[k],staticValuesArray[k],isDefault); valueOptions[k]=o; } } @@ -72,39 +114,58 @@ this.getValueResultset = function () { } } -function prepareChartProperties(chartType) +function prepareSelectionForm() { - var dimFunctions=[]; - var myFunction= new dimFunction(0,"Wort 1 ans Ende","switchWord1and2ff",false); - dimFunctions[0]=myFunction; + var selectionProperties=[]; + + var myProp= new selectionProperty("dimension1","Dimension 1",true,false,true,null,null,true); + selectionProperties[0]=myProp; + var myProp= new selectionProperty("dimension2","Dimension 2",true,false,false,null,null,true); + selectionProperties[1]=myProp; + var myProp= new selectionProperty("measure1","Maß",true,true,true,null,null,true); + selectionProperties[2]=myProp; +return selectionProperties; +} + +function showChartPropertiesForm() +{ + document.getElementById("chartPropertiesFormDiv").style.visibility="visible"; +} + +function prepareChartProperties(chartType) +{ var chartProperties=[]; + //var chartWidth=getCommonChartProperty("chartWidth"); + //document.forms["chartPropertiesForm"].elements["chartWidth"].value=chartWidth; switch (chartType) { - case "bar_x": - chartProperties=prepareBarXForm(); - break; - case "bar_y": - chartProperties=prepareBarYForm(); - break; - case "line": - chartProperties=prepareLineForm(); - break; - default: - return false; - break; - } -renderForm("chartProperties",chartProperties,commonChartProperties,dimFunctions); + case "bar_x": + chartProperties=prepareBarXForm(); + break; + case "bar_y": + chartProperties=prepareBarYForm(); + break; + case "line": + chartProperties=prepareLineForm(); + break; + default: + return false; + break; +} +renderForm("chartPropertiesFormDetails",chartProperties,commonChartProperties); return true; + } + function prepareBarXForm() { var chartProperties=[]; var propertyCounter=0; - var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,true,null,null,true); + var myProp= new chartProperty("viz_dimension1","Kategorie-Dimension",false,true); chartProperties[0]=myProp; - var myProp= new chartProperty("viz_measure_dim","Maß",true,true,false,true,null,true); + var myProp= new chartProperty("viz_measure1","Maß",true,true); chartProperties[1]=myProp; return chartProperties; @@ -114,11 +175,11 @@ function prepareBarYForm() { var chartProperties=[]; var propertyCounter=0; - var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,true,null,null,true); + var myProp= new chartProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true); chartProperties[0]=myProp; - var myProp= new chartProperty("viz_series_dim","Serien-Dimension",true,false,false,null,null,true); + var myProp= new chartProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true); chartProperties[1]=myProp; - var myProp= new chartProperty("viz_measure_dim","Maß",true,true,true,null,null,true); + var myProp= new chartProperty("viz_measure1","Maß",true,true,true,null,null,true); chartProperties[2]=myProp; return chartProperties; @@ -128,23 +189,166 @@ function prepareLineForm() { var chartProperties=[]; var propertyCounter=0; - var myProp= new chartProperty("viz_category_dim","X-Achse",true,false,true,null,null,true); + var myProp= new chartProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true); chartProperties[0]=myProp; - var myProp= new chartProperty("viz_measure_dim","Y-Achse",true,true,true,null,null,true); + var myProp= new chartProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true); chartProperties[1]=myProp; + var myProp= new chartProperty("viz_measure1","Maß",true,true,true,null,null,true); + chartProperties[2]=myProp; return chartProperties; } -function renderForm(formDiv,chartProperties,myCommonChartProperties,dimFunctions) +function prepareLineForm_alt() +{ + var chartProperties=[]; + var propertyCounter=0; + var myProp= new chartProperty("dimension1","X-Achse",true,false,true,null,null,true); + chartProperties[0]=myProp; + var myProp= new chartProperty("measure1","Y-Achse",true,true,true,null,null,true); + chartProperties[1]=myProp; + +return chartProperties; +} +function fillDataSelectionForm(formDiv) +{ + var selectionProperties=[]; + var dimFunctions=[]; + var myFunction= new dimFunction(0,"Wort 1 ans Ende","switchWord1and2ff",false); + dimFunctions[0]=myFunction; + + selectionProperties=prepareSelectionForm(); + for(var k=0;k < selectionProperties.length;k++) + { + fillSelectOptions(document.getElementById(selectionProperties[k].name),selectionProperties[k].getValueResultset(),selectionProperties[k].isMandatory); + if(selectionProperties[k].optionalFunction) + { + var fnSelElem = document.getElementById(selectionProperties[k].name+"_fn"); + fillSelectOptions(fnSelElem,dimFunctions,false); + } + } + +} + +function selectionResultPreview(myDiv) +{ + var selectionRs=[]; + var selectionRsMetaData=[]; + var rowcount=rs.length; + var maxLenCategoryDim=0; + var maxMeasure=0; + selectionRsMetaData=fillSelectionResultMetaData(); + //alert(selectionRsMetaData[0].colname); + selectionRs=fillSelectionResult(selectionRsMetaData); + + showSelectionTable("selectionResultPreviewTable",selectionRs,selectionRsMetaData,10); + +} +function fillSelectionResultMetaData() +{ + var selectionRsMetaData=[]; + var dimension1=document.getElementById("dimension1").value; + var dimension2=document.getElementById("dimension2").value; + var measure=document.getElementById("measure1").value; + + var functionOfDimension1=document.getElementById("dimension1_fn").value; + var functionOfDimension2=document.getElementById("dimension2_fn").value; + var functionOfMeasureDim=document.getElementById("measure1_fn").value; + + //first fill metadata: + + var counter=1; + selectionRsMetaData.push(new selectionRowMetaData(counter,"dimension1",dimension1,getColumnCaption(dimension1),0,functionOfDimension1)); + if(dimension2!="") + { + counter++; + selectionRsMetaData.push(new selectionRowMetaData(counter,"dimension2",dimension2,getColumnCaption(dimension2),0),functionOfDimension2); + } + counter++; + selectionRsMetaData.push(new selectionRowMetaData(counter,"measure",measure,getColumnCaption(measure),0),functionOfMeasureDim); + + return selectionRsMetaData; +} +function fillSelectionResult(selectionRsMetaData) +{ + + var selectionRs=[]; + //get MetaData: + var dimension1,dimension2,measure, + functionOfDimension1,functionOfDimension2,functionOfMeasureDim; + for(rownr=0;rownrmaxLenDimension1) + maxLenDimension1=dimension1Value.length; + //the same for values: + if(measureDimValue >maxMeasure) + maxMeasure=measureDimValue; + + + } + //TODO:Sorting and filtering + return selectionRs; + +} + +function renderForm(formDiv,chartProperties,myCommonChartProperties) { //first empty form: var myForm=document.getElementById(formDiv); while (myForm.firstChild) { myForm.removeChild(myForm.firstChild); } - //now fill it: const tabElem = document.createElement("table"); + //tabElem.caption="Eigenschaften"; myForm.appendChild(tabElem); for(var k=0;k < chartProperties.length;k++) { @@ -158,18 +362,7 @@ function renderForm(formDiv,chartProperties,myCommonChartProperties,dimFunctions selElem.id=chartProperties[k].name; fillSelectOptions(selElem,chartProperties[k].getValueResultset(),chartProperties[k].isMandatory); 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: @@ -229,15 +422,15 @@ if(selectedOption!=null) -function prepareData() +function prepareData_alt() { var data=[]; 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 colnrOfCategorydimName=document.getElementById("dimension1").value; +var colnrOfMeasure=document.getElementById("measure1").value; +var functionOfCategoryDim=document.getElementById("dimension1_fn").value; +var functionOfMeasureDim=document.getElementById("measure1_fn").value; var maxLenName=0; var maxValue=0; for(j=1;jmaxLenName) - maxLenName=categoryDimValue.length; + if(dimension1Value.length >maxLenName) + maxLenName=dimension1Value.length; //the same for values: if(measureDimValue >maxValue) maxValue=measureDimValue; @@ -265,38 +458,44 @@ return data; } -function showDataTable() +function showDataTable(myTableDiv,data,metadata,maxRows) { -tableDiv=document.getElementById("tableDiv"); + +tableDiv=document.getElementById(myTableDiv); tableDiv.innerHTML=""; //reset table -var rowcount=rs.length; +var rowcount=data.length; +if(rowcount > maxRows) + rowcount=maxRows; const tabElem = document.createElement("table"); tabElem.border="1"; tabElem.width="100%"; const rowElem = document.createElement("tr"); -for(var col=0;col < rsMetaData.length;col++) +for(var col=0;col < metadata.length;col++) { - const thCap = document.createElement("th"); - const textnode = document.createTextNode(rsMetaData[col].colcaption); - thCap.appendChild(textnode); - rowElem.appendChild(thCap); + if(metadata[col].nr) + { + const thCap = document.createElement("th"); + const textnode = document.createTextNode(metadata[col].colcaption); + thCap.appendChild(textnode); + rowElem.appendChild(thCap); + } } tabElem.appendChild(rowElem); for(row=1;row maxRows) + rowcount=maxRows; +const tabElem = document.createElement("table"); +tabElem.border="1"; +tabElem.width="100%"; +const rowElem = document.createElement("tr"); +for(var col=0;col < metadata.length;col++) + { + if(metadata[col].nr) + { + const thCap = document.createElement("th"); + const textnode = document.createTextNode(metadata[col].colcaption); + thCap.appendChild(textnode); + rowElem.appendChild(thCap); + } + } +tabElem.appendChild(rowElem); +for(row=1;row d.name.length); var maxLenNamePx=maxLenName*fontSize/1.5; @@ -471,8 +719,8 @@ function makeSample() 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 categoryDim=document.getElementById("dimension1").value; + var measureDim=document.getElementById("measure1").value; var fontSizeDefault=getCommonChartProperty("fontSize"); var chartWidth=getCommonChartProperty("chartWidth"); var marginLeftDefault=chartWidth/5; //20% liner Rand @@ -517,15 +765,15 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti } } - document.getElementById("chartOptions").innerHTML=JSON.stringify(options); + //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; +function makeBarX(selectionRs) { + var categoryDim=document.getElementById("viz_dimension1").value; + var measureDim=document.getElementById("viz_measure1").value; var marksArray=new Array(); - marksArray[0]=Plot.barX(rs, + marksArray[0]=Plot.barX(selectionRs, { x: measureDim, y: categoryDim @@ -535,11 +783,11 @@ function makeBarX() { 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; +function makeBarY(selectionRs) { + var categoryDim=document.getElementById("viz_dimension1").value; + var measureDim=document.getElementById("viz_measure1").value; var marksArray=new Array(); - marksArray[0]=Plot.barY(rs, + marksArray[0]=Plot.barY(selectionRs, { y: measureDim, x: categoryDim @@ -549,11 +797,11 @@ function makeBarY() { 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; +function makeLine(selectionRs) { + var categoryDim=document.getElementById("viz_dimension1").value; + var measureDim=document.getElementById("viz_measure1").value; var marksArray=new Array(); - marksArray[0]=Plot.line(rs, + marksArray[0]=Plot.line(selectionRs, { y: measureDim, x: categoryDim, @@ -570,8 +818,8 @@ function makeLine() { 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 xLabel=rsMetaData[document.getElementById("dimension1").value-1].colcaption; +var yLabel=rsMetaData[document.getElementById("measure1").value-1].colcaption; var fontSize=getCommonChartProperty("fontSize"); var maxLenName=d3.max(data, d => d.name.length); var maxLenNamePx=maxLenName*fontSize/1.5; @@ -636,7 +884,7 @@ for (var i=0;i -function dataRowMetaData(nr,colname,colcaption,coltype) +function dataRowMetaData(nr,colname,colcaption,coltype,colfunction) { this.nr=nr; this.colname=colname; this.colcaption=colcaption; this.coltype=coltype; +this.colfunction=colfunction; } function dataRow(rownr @@ -1130,12 +1131,14 @@ var rs= new Array(); rsMetaData.push(new dataRowMetaData( ,' - + + + ',' -',0)); +',0,null)); @@ -1182,70 +1185,129 @@ rs.push(new dataRow( - - -
Ausgabetyp: + + +
+
+ + +
+
+ + +
+
+
+ + + + + -
DimensionAuswahlTransformation (optional)
Dimension 1: +
-
- -
- -

- -

+
+
+ +
+ +
+ + +
+ + + + +
+
+ +
+
-

+

+ +
+
+
+
- -

- + - -
-
+ + - +