diff --git a/superx/xml/js/viz/viz_functions.js b/superx/xml/js/viz/viz_functions.js index 741615a..4dbce34 100644 --- a/superx/xml/js/viz/viz_functions.js +++ b/superx/xml/js/viz/viz_functions.js @@ -1,4 +1,79 @@ /* d3 Code */ +/* +const chartModel={ + + id: "TEST", + name: "testname", + renderer: "plot" ,//renderer; + //this.dataSources=datasources; + //this.globalProperties=globalproperties; + options: [], + targetDiv: document.getElementById("chartDiv"), + renderChart : function () { + + //console.log(JSON.stringify(this)); + document.getElementById("chartDiv").innerHTML=""; //reset canvas + switch (this.renderer) { + case "plot": + this.renderChartWithPlot(); + break; + default: + alert("No renderer"); + break; + } + }, + + renderChartWithPlot: function () + { + console.log("using Plot"); + + var svgPlot=Plot.plot(this.options[0]); + document.getElementById("chartDiv").appendChild(svgPlot); + } + +} + +*/ +function chartModel(id,name,renderer,datasources) +{ + this.id=id; + this.name=name; + this.renderer=renderer; + this.dataSources=datasources; + //this.globalProperties=globalproperties; + this.options=new Object; + this.options.marks=new Array(); + //let globalProperties={}; + + this.getChartSVG = function () { + + //console.log(JSON.stringify(this)); + var mySVG=""; + switch (this.renderer) { + case "plot": + mySVG=this.getChartSVGWithPlot(); + break; + default: + alert("No renderer"); + break; + } + return mySVG; + } + + this.getChartSVGWithPlot=function () + { + console.log("using Plot"); + + var svgPlot=Plot.plot(this.options); + return svgPlot; + } + this.updateModel = function () { + + } +} + + + function d3dataRow(nr,dimension1,dimension2,measure ) { @@ -115,6 +190,81 @@ this.getValueResultset = function () { } } +function updateChartModel(myChartModel) +{ + var optionsString="{"; + if(document.getElementById("chartName").value=="") + document.getElementById("chartName").value=vizInitialName; + var chartName=document.getElementById("chartName").value; + //myChartModel.options.caption=chartName; + optionsString+="\"caption\":\""+chartName+"\""; + + var myForm=document.forms["chartPropertiesForm"]; + for(var k=0;k < commonChartProperties.length;k++) + { + for(var i=0;i < myForm.elements.length;i++) + { + if(commonChartProperties[k].name==myForm.elements[i].name + &&myForm.elements[i].value!="") + { + console.log("Feld ausgefüllt:" +commonChartProperties[k].name); + textDelim=(commonChartProperties[k].propValueType=="string")?"\"":""; + optionsString+=",\""+commonChartProperties[k].variableName+"\":"+textDelim+myForm.elements[i].value+textDelim; + } + + } + } + optionsString+= ", \"marks\":[]"; + optionsString+=" }"; //close tag + /* + var stylesString="{\"overflow\": \"visible\""; + + for(var k=0;k < commonChartProperties.length;k++) + { + if(commonChartProperties[k].groupUniquename=="STYLE" ) + { + stylesString+=",\""+commonChartProperties[k].variableName+"\":\""+getCommonChartProperty(commonChartProperties[k].name)+"\""; + } + + } + stylesString+=" }"; + + console.log("Styles:"+ stylesString); + var styles=JSON.parse(stylesString); */ + var chartOptions=JSON.parse(optionsString); + var marksArray=new Array(); + marksArray[0]=Plot.barX(rs0, + { + x: "gesamt", + y: "eintrag", + fill: "blue" + } + ); + chartOptions["marks"].push(marksArray); + myChartModel.options=chartOptions; + + //console.log("options:"+ optionsString); + //var globalProperties=JSON.parse(optionsString); + //globalProperties["marks"].push(marksArray); + + //myChartModel.options=globalProperties; + //myChartModel.options["marks"].push(marksArray); + return myChartModel; + +} +function renderChart(renderer,chartDiv) +{ + + if(document.getElementById("chartName").value=="") + document.getElementById("chartName").value=vizInitialName; + var chartName=document.getElementById("chartName").value; + var myChartModel=new chartModel(1,chartName,renderer,rsTableMetaData); + myChartModel=updateChartModel(myChartModel); + var mySVG=myChartModel.getChartSVG(); + document.getElementById(chartDiv).innerHTML=""; + document.getElementById(chartDiv).appendChild(mySVG); + +} function prepareSelectionForm() { @@ -130,9 +280,11 @@ function prepareSelectionForm() return selectionProperties; } -function showChartPropertiesForm() +function showGeneralChartPropertiesFormDiv(renderer) { - var myDiv=document.getElementById("chartPropertiesFormDetails"); + var myDiv=document.getElementById("generalChartPropertiesFormDiv"); + renderGeneralChartPropertiesForm("generalChartPropertiesFormElementsDiv",commonChartProperties,renderer); + if(myDiv.style.display=="block") myDiv.style.display="none"; else @@ -454,6 +606,38 @@ function renderDimensionField(dimensionProperty) } +function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,renderer) +{ + //first empty form: + var myForm=document.getElementById(formDiv); + while (myForm.firstChild) { + myForm.removeChild(myForm.firstChild); + } + + const divBox = document.createElement("div"); + //divBox.classList.add("box"); + //divBox.style="width: 300px"; + /* + const colHeader = document.createTextNode("Layout"); + const colHeaderParagraph = document.createElement("p"); + colHeaderParagraph.classList.add("title"); + colHeaderParagraph.classList.add("is-6"); + colHeaderParagraph.appendChild(colHeader); + divBox.appendChild(colHeaderParagraph); + */ + for(var k=0;k < myCommonChartProperties.length;k++) + { + if((myCommonChartProperties[k].groupVariableName=="layout" + || myCommonChartProperties[k].groupVariableName=="style" + ) + && myCommonChartProperties[k].rendererUniquename==renderer) + divBox.appendChild(renderChartPropertyField(myCommonChartProperties[k])); + } + + + myForm.appendChild(divBox); +} + function renderFormDetails(formDiv,myCommonChartProperties) { //first empty form: diff --git a/superx/xml/viz_demo.html b/superx/xml/viz_demo.html new file mode 100644 index 0000000..21e30a5 --- /dev/null +++ b/superx/xml/viz_demo.html @@ -0,0 +1,1044 @@ + + + + + + + + + + + + + + + +
+

 Laden...

+
+ +
+
+ +
+ +
+
+
    +
  1. +
+
+
+
+ + + + + + + + + +
+

Memtext University

+ 		Logo
+ +

Studierende Makro Test

+

+

+ Datensatz NaN - + von insgesamt + Sätzen. + +

+
+
+
+

Konfigurationsassistent Datenvisualisierung

+ +
+
+

Studierende nach Erst- und Neueinschreibung (Zeitreihe)

+ +

Köpfe oder Fälle ?:  + Köpfe + ; + Stichtag:  + Aktuelle Zahlen + ; + Seit Semester:  + SoSe 2017 + ; + Bis Semester:  + WiSe 2022/2023 + ; + Status:  + Alle ohne Beurl. + ; + Hörerstatus:  + alle + ; + + User: superx  + Stand: 10.08.2022 +

Prüfungen nach Notendurchschnitt (Zeitreihe)

+ +

Köpfe oder Fälle ?:  + Köpfe + ; + Stichtag Prüfungen:  + Aktuelle Zahlen + ; + Seit Semester:  + SoSe 2017 + ; + Bis Semester:  + WiSe 2022/2023 + ; + Prüfungsstatus:  + bestanden + ; + Studienabschnitt:  + Hauptprüfung + ; + + User: superx  + Stand: 10.08.2022 +

 
+
  
+
+
+
  
+
  
+
+
+
  
+
  
+
+
+ +
+
  
+
  
+
+ +
+
+

+

+
+
+ + +
+
+
+
+
+ + +
+
+ + + \ No newline at end of file diff --git a/superx/xml/viz_html_chart.xsl b/superx/xml/viz_html_chart.xsl index 807c1f1..2d40743 100644 --- a/superx/xml/viz_html_chart.xsl +++ b/superx/xml/viz_html_chart.xsl @@ -43,7 +43,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
-

 Laden...

+

 Laden...

@@ -120,8 +120,8 @@ padding-bottom:10px; - - + - + - - + + + + + +

+ + + + + + +  @@ -1750,8 +1764,97 @@ rs.push(new dataRow
+
+
+

+ Diagramm +

+

Erzeugen

+
+
+
+
+ +
+ +
+

+

+