From f7e1e7a817a10e6f134556c33a101043e4501d84 Mon Sep 17 00:00:00 2001 From: Daniel Quathamer Date: Tue, 3 Jan 2023 08:47:47 +0100 Subject: [PATCH] Dynamische Elemente und Resultsets #5 --- .../viz/schluesseltabellen/viz_property.unl | 84 ++--- superx/xml/js/viz/viz_functions.js | 290 +++++++++++++++--- superx/xml/viz_demo.html | 253 ++++++++------- superx/xml/viz_html_chart.xsl | 140 +++++++-- 4 files changed, 547 insertions(+), 220 deletions(-) diff --git a/src-modules/module/viz/schluesseltabellen/viz_property.unl b/src-modules/module/viz/schluesseltabellen/viz_property.unl index bc03e20..24fc908 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_property.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_property.unl @@ -1,42 +1,42 @@ -1^Diagramm-Höhe^height^400^px^1^ ^0^4^10^Diagrammhöhe (exkl. Skalenbeschriftung). Wird nur ausgewertet wenn es keine Y-Achse gibt!^101^^^integer^ -2^Diagramm-Breite^width^500^px^1^ ^0^4^10^Diagrammsbreite (exkl.Skalenbeschriftung)^102^100^2000^integer^ -3^Werte-Label-Breite^valueLabelWidth^20^px^1^^0^1^18^^^^^integer^ -4^Hintergrundfarbe^backgroundColor^#ccffcc^ ^1^#ffffeb^0^3^11^Hintergrundfarbe der Grafik^201^^^string^ -5^Vordergrundfarbe^color^black^ ^1^black^0^3^11^Farbe von Text- und Diagrammelementen^202^^^string^ -6^Schriftgröße^fontSize^10^px^1^ ^0^4^11^Schriftgröße der Skalenbeschriftung^204^^^integer^ -7^Schriftfamilie^fontFamily^serif^ ^1^serif|sans-serif|monospace|system_ui^0^2^11^Schriftfamlilie der Skalenbeschriftung^203^^^string^ -8^Flächenfarbe^fill^blue^ ^1^ ^0^1^10^Füllfarbe (nur) von Diagrammelementen (Flächen, Balken, Säulen, Streifen, Punkte)^305^^^string^ -11^Kat: Schriftneigung^tickRotate^-45^ ^1^ ^0^1^18^Neigungswinkel der Achsenwerte^604^^^integer^ -12^Kat: Skalierung^ticks^5^ ^1^ ^0^1^18^Feinheit der Wertegliederung^605^^^integer^ -13^Kat: Schriftgröße^tickSize^10^ ^1^ ^0^1^18^Größe der Achsenwerte^603^^^integer^ -15^Kat: Label-Ausrichtung^labelAnchor^center^ ^1^left|center|right^0^2^18^Label-Position^601^^^string^ -16^Außenrand links^marginLeft^ ^px^1^ ^0^4^10^Abstand links neben der Grafik (inkl. Skala)^103^^^integer^ -17^Außenrand rechts^marginRight^50^px^1^ ^0^4^10^Abstand rechts neben der Grafik (inkl. Skala)^104^^^integer^ -18^Außenrand oben^marginTop^50^px^1^ ^0^4^10^Abstand oberhalb der Grafik^105^^^integer^ -19^Außenrand unten^marginBottom^50^px^1^ ^0^4^10^ ^106^^^integer^ -20^Innenrand oben^insetTop^0^px^1^ ^0^4^10^Oberer Abstand zwischen Diagramm und Grafik^107^^^integer^ -21^Innenrand unten^insetBottom^0^px^1^ ^0^4^10^Unterer Abstand zwischen Diagramm und Grafik^108^^^integer^ -22^Innenrand links^insetLeft^0^px^1^ ^0^4^10^Linker Abstand zwischen Diagramm und Grafik^109^^^integer^ -23^Innenrand rechts^insetRight^0^px^1^ ^0^4^10^Rechter Abstand zwischen Diagramm und Grafik^110^^^integer^ -24^Farbschema^scheme^ ^ ^1^blues|greens|greys|oranges|purples|reds^0^2^20^Farbschema von Diagrammelemente^303^^^string^ -25^Farbtyp^type^ ^ ^1^einfarbig|mehrfarbig|zyklisch^0^2^12^Ein-/Mehrfarbigkeit von Diagrammelementen^302^^^string^ -43^Farbsättigung^fillOpacity^0,5^ ^1^ ^0^4^12^Deckkraft der Füllfarbe von Diagrammelementen^306^^^string^ -44^Strichfarbe^stroke^ ^ ^1^ ^0^1^12^Strichfarbe von Diagrammelementen (relevant für Plot.dot, Plot.tickX/Y)^307^^^string^ -45^Strichdicke^strokeWidth^ ^ ^1^ ^0^1^12^Strichdicke von Diagrammelementen (relevant für Plot.dot, Plot.tickX/Y)^308^^^string^ -56^Fortlaufende Skala^continous scales^ ^ ^1^identity|linear|log|pow|sqrt|symlog^0^2^15^Art der Skalen-Gliederung^401^^^string^ -57^Kategorie-Skala^categorical scales^ ^ ^1^point|band^0^2^15^Art der Skalen-Gliederung^402^^^string^ -58^Datums-Skala^date scales^ ^ ^1^time|utc^0^2^15^Art der Skalen-Gliederung^403^^^string^ -60^Farbschema-Typ^schemetype^ ^ ^1^linear|sqrt|pow|log|symlog|sequential|cyclical|quantile^0^2^12^Art der Farbverteilung in Diagrammelementen^304^^^string^ -61^Elementtyp^marks^ ^ ^1^Plot.line|Plot.dot|Plot.areaX|Plot.areaY.|Plot.barX|Plot.barY|Plot.rectX|Plot.rectY|Plot.ruleX|Plot.ruleY|Plot.tickX|Plot.tickY|Plot.arrow|Plot.cell|Plot.text|Plot.link|Plot.image^0^2^12^Ausrichtung und Form der Dialgrammelemente^301^^^string^ -63^Kat: Label-Abstand^labelOffset^ ^px^1^ ^0^1^18^Label-Abstand von Achse^602^^^integer^ -68^Maß: Chart-Abstand^gridChartOffset^3^ ^1^ ^0^1^18^ ^607^^^string^ -69^Maß: Label-Höhe^gridLabelHeight^18^px^1^ ^0^1^18^ ^608^^^integer^ -70^Kategorie-Dimension 1^viz_dimension1^ ^ ^1^ ^0^1^5^ ^608^^^string^ -71^Kategorie-Dimension 2^viz_dimension2^ ^ ^1^ ^0^1^5^ ^608^^^string^ -72^Maß^viz_measure1^ ^ ^1^ ^0^1^6^ ^608^^^string^ -73^Maß 2^viz_measure2^ ^ ^1^ ^0^1^6^ ^608^^^string^ -74^Maß^x_horizontal^ ^ ^1^ ^0^1^5^ ^608^^^string^ -75^Kategorie-Dimension^y_horizontal^ ^ ^1^ ^0^1^5^ ^608^^^string^ -76^Balkensegment^stroke_bar^ ^ ^1^ ^0^1^5^ ^608^^^string^ -78^Legende^legend^ ^ ^1^true|false^0^2^20^ ^303^^^boolean^ -79^Textbeschriftung^text_horizontal^ ^ ^1^ ^0^1^5^ ^608^^^string^ +1^Diagramm-Höhe^height^^px^1^ ^0^4^10^Diagrammhöhe (exkl. Skalenbeschriftung). Wird nur ausgewertet wenn es keine Y-Achse gibt!^101^^^integer^ +2^Diagramm-Breite^width^^px^1^ ^0^4^10^Diagrammsbreite (exkl.Skalenbeschriftung)^102^100^2000^integer^ +3^Werte-Label-Breite^valueLabelWidth^^px^1^^0^1^18^^^^^integer^ +4^Hintergrundfarbe^backgroundColor^white^ ^1^#ffffeb^0^3^11^Hintergrundfarbe der Grafik^201^^^string^ +5^Vordergrundfarbe^color^^ ^1^black^0^3^11^Farbe von Text- und Diagrammelementen^202^^^string^ +6^Schriftgröße^fontSize^^px^1^ ^0^4^11^Schriftgröße der Skalenbeschriftung^204^^^integer^ +7^Schriftfamilie^fontFamily^^ ^1^serif|sans-serif|monospace|system_ui^0^2^11^Schriftfamlilie der Skalenbeschriftung^203^^^string^ +8^Flächenfarbe^fill^^ ^1^ ^0^1^10^Füllfarbe (nur) von Diagrammelementen (Flächen, Balken, Säulen, Streifen, Punkte)^305^^^string^ +11^Kat: Schriftneigung^tickRotate^^ ^1^ ^0^1^18^Neigungswinkel der Achsenwerte^604^^^integer^ +12^Kat: Skalierung^ticks^^ ^1^ ^0^1^18^Feinheit der Wertegliederung^605^^^integer^ +13^Kat: Schriftgröße^tickSize^^ ^1^ ^0^1^18^Größe der Achsenwerte^603^^^integer^ +15^Kat: Label-Ausrichtung^labelAnchor^^ ^1^left|center|right^0^2^18^Label-Position^601^^^string^ +16^Außenrand links^marginLeft^^px^1^ ^0^4^10^Abstand links neben der Grafik (inkl. Skala)^103^^^integer^ +17^Außenrand rechts^marginRight^^px^1^ ^0^4^10^Abstand rechts neben der Grafik (inkl. Skala)^104^^^integer^ +18^Außenrand oben^marginTop^^px^1^ ^0^4^10^Abstand oberhalb der Grafik^105^^^integer^ +19^Außenrand unten^marginBottom^^px^1^ ^0^4^10^ ^106^^^integer^ +20^Innenrand oben^insetTop^^px^1^ ^0^4^10^Oberer Abstand zwischen Diagramm und Grafik^107^^^integer^ +21^Innenrand unten^insetBottom^^px^1^ ^0^4^10^Unterer Abstand zwischen Diagramm und Grafik^108^^^integer^ +22^Innenrand links^insetLeft^^px^1^ ^0^4^10^Linker Abstand zwischen Diagramm und Grafik^109^^^integer^ +23^Innenrand rechts^insetRight^^px^1^ ^0^4^10^Rechter Abstand zwischen Diagramm und Grafik^110^^^integer^ +24^Farbschema^scheme^^ ^1^blues|greens|greys|oranges|purples|reds^0^2^20^Farbschema von Diagrammelemente^303^^^string^ +25^Farbtyp^type^^ ^1^einfarbig|mehrfarbig|zyklisch^0^2^12^Ein-/Mehrfarbigkeit von Diagrammelementen^302^^^string^ +43^Farbsättigung^fillOpacity^^ ^1^ ^0^4^12^Deckkraft der Füllfarbe von Diagrammelementen^306^^^string^ +44^Strichfarbe^stroke^^ ^1^ ^0^1^12^Strichfarbe von Diagrammelementen (relevant für Plot.dot, Plot.tickX/Y)^307^^^string^ +45^Strichdicke^strokeWidth^^ ^1^ ^0^1^12^Strichdicke von Diagrammelementen (relevant für Plot.dot, Plot.tickX/Y)^308^^^string^ +56^Fortlaufende Skala^continous scales^^ ^1^identity|linear|log|pow|sqrt|symlog^0^2^15^Art der Skalen-Gliederung^401^^^string^ +57^Kategorie-Skala^categorical scales^^ ^1^point|band^0^2^15^Art der Skalen-Gliederung^402^^^string^ +58^Datums-Skala^date scales^^ ^1^time|utc^0^2^15^Art der Skalen-Gliederung^403^^^string^ +60^Farbschema-Typ^schemetype^^ ^1^linear|sqrt|pow|log|symlog|sequential|cyclical|quantile^0^2^12^Art der Farbverteilung in Diagrammelementen^304^^^string^ +61^Elementtyp^marks^^ ^1^Plot.line|Plot.dot|Plot.areaX|Plot.areaY.|Plot.barX|Plot.barY|Plot.rectX|Plot.rectY|Plot.ruleX|Plot.ruleY|Plot.tickX|Plot.tickY|Plot.arrow|Plot.cell|Plot.text|Plot.link|Plot.image^0^2^12^Ausrichtung und Form der Dialgrammelemente^301^^^string^ +63^Kat: Label-Abstand^labelOffset^^px^1^ ^0^1^18^Label-Abstand von Achse^602^^^integer^ +68^Maß: Chart-Abstand^gridChartOffset^^ ^1^ ^0^1^18^ ^607^^^string^ +69^Maß: Label-Höhe^gridLabelHeight^^px^1^ ^0^1^18^ ^608^^^integer^ +70^Kategorie-Dimension 1^viz_dimension1^^ ^1^ ^0^1^5^ ^608^^^string^ +71^Kategorie-Dimension 2^viz_dimension2^^ ^1^ ^0^1^5^ ^608^^^string^ +72^Maß^viz_measure1^^ ^1^ ^0^1^6^ ^608^^^string^ +73^Maß 2^viz_measure2^^ ^1^ ^0^1^6^ ^608^^^string^ +74^Maß^x_horizontal^^ ^1^ ^0^1^5^ ^608^^^string^ +75^Kategorie-Dimension^y_horizontal^^ ^1^ ^0^1^5^ ^608^^^string^ +76^Balkensegment^stroke_bar^^ ^1^ ^0^1^5^ ^608^^^string^ +78^Legende^legend^^ ^1^true|false^0^2^20^ ^303^^^boolean^ +79^Textbeschriftung^text_horizontal^^ ^1^ ^0^1^5^ ^608^^^string^ diff --git a/superx/xml/js/viz/viz_functions.js b/superx/xml/js/viz/viz_functions.js index 4dbce34..b29aeb5 100644 --- a/superx/xml/js/viz/viz_functions.js +++ b/superx/xml/js/viz/viz_functions.js @@ -67,14 +67,22 @@ function chartModel(id,name,renderer,datasources) var svgPlot=Plot.plot(this.options); return svgPlot; } - this.updateModel = function () { - - } + } +function possibleVizType(nr,value,name,explanation,isDefault ) + { +this.nr=nr; +this.value=value; +this.name=name; +this.explanation=explanation; +this.isDefault=isDefault; + +} + function d3dataRow(nr,dimension1,dimension2,measure ) { this.nr=nr; @@ -113,29 +121,34 @@ this.value=value; this.isDefault=isDefault; } -function dimensionProperty(name,caption,explanation,isMeasure,isMandatory) +function dimensionProperty(name,caption,explanation,isMeasure,isMandatory,datasource) { this.name=name; this.caption=caption; this.isMeasure=isMeasure; this.isMandatory=isMandatory; this.explanation=explanation; +this.datasource=datasource; this.getValueResultset = function () { var valueOptions=[]; var optionCounter=0; -selectionRsMetaData=fillSelectionResultMetaData(); -console.log("felder"+selectionRsMetaData.length); - for(var j=0;j < selectionRsMetaData.length;j++) +//selectionRsMetaData=fillSelectionResultMetaData(); +//console.log("felder"+selectionRsMetaData.length); +var isDefault=true; + for(var j=0;j < rsColumnMetaData.length;j++) { - var isDefault=false; - console.log("feld "+selectionRsMetaData[j].nr+selectionRsMetaData[j].targetColumn); - if(selectionRsMetaData[j].nr) + if(rsColumnMetaData[j].tableId==datasource + && rsColumnMetaData[j].colcaption.trim() !="" + && ( + isMeasure==false || rsColumnMetaData[j].coltype == 4 || rsColumnMetaData[j].coltype == 3) + ) { - if(selectionRsMetaData[j].targetColumn==this.name) - isDefault=true; - var o=new selectionPropertyValue(selectionRsMetaData[j].nr,selectionRsMetaData[j].colcaption,selectionRsMetaData[j].targetColumn,isDefault); + //console.log("feld "+rsColumnMetaData[j].nr+selectionRsMetaData[j].targetColumn); + var o=new selectionPropertyValue(rsColumnMetaData[j].nr,rsColumnMetaData[j].colcaption,rsColumnMetaData[j].colname,isDefault); valueOptions[optionCounter]=o; optionCounter++; + if(isDefault) + isDefault=false; } } return valueOptions; @@ -200,6 +213,44 @@ function updateChartModel(myChartModel) optionsString+="\"caption\":\""+chartName+"\""; var myForm=document.forms["chartPropertiesForm"]; + + //first Collect all groups: + var commonChartPropertyGroups=[]; + var previousGroup=""; + for(var k=0;k < commonChartProperties.length;k++) + { + var groupVariableName=commonChartProperties[k].groupVariableName; + if(groupVariableName!="" + && groupVariableName != previousGroup) + { + var newcommonChartPropertyGroup = new commonChartPropertyGroup(commonChartProperties[k].groupCaption,commonChartProperties[k].groupUniquename,groupVariableName); + commonChartPropertyGroups.push(newcommonChartPropertyGroup); + } + previousGroup=groupVariableName; + } + //Now create options Str with all groups: + var textDelim=""; + for(var i=0;i < commonChartPropertyGroups.length;i++) + { + if(commonChartPropertyGroups[i].groupVariableName!="layout") + optionsString+=",\""+commonChartPropertyGroups[i].groupVariableName+"\":{\"dummy1\":1"; + for(var k=0;k < commonChartProperties.length;k++) + { + + if(commonChartProperties[k].groupVariableName==commonChartPropertyGroups[i].groupVariableName + && commonChartProperties[k].variableName!="" + && getCommonChartProperty(commonChartProperties[k].name)!="") + { + textDelim=(commonChartProperties[k].propValueType=="string")?"\"":""; + optionsString+=",\""+commonChartProperties[k].variableName+"\":"+textDelim+getCommonChartProperty(commonChartProperties[k].name)+textDelim; + } + } + if(commonChartPropertyGroups[i].groupVariableName!="layout") + optionsString+=" }"; //close tag + } + + + /* for(var k=0;k < commonChartProperties.length;k++) { for(var i=0;i < myForm.elements.length;i++) @@ -213,7 +264,7 @@ function updateChartModel(myChartModel) } } - } + }*/ optionsString+= ", \"marks\":[]"; optionsString+=" }"; //close tag /* @@ -233,7 +284,7 @@ function updateChartModel(myChartModel) var styles=JSON.parse(stylesString); */ var chartOptions=JSON.parse(optionsString); var marksArray=new Array(); - marksArray[0]=Plot.barX(rs0, + marksArray[0]=Plot.barX(rs_table0, { x: "gesamt", y: "eintrag", @@ -252,12 +303,13 @@ function updateChartModel(myChartModel) return myChartModel; } -function renderChart(renderer,chartDiv) +function renderChart(chartDiv) { if(document.getElementById("chartName").value=="") document.getElementById("chartName").value=vizInitialName; var chartName=document.getElementById("chartName").value; + var renderer=document.getElementById('fldVizRenderer').value; var myChartModel=new chartModel(1,chartName,renderer,rsTableMetaData); myChartModel=updateChartModel(myChartModel); var mySVG=myChartModel.getChartSVG(); @@ -280,10 +332,176 @@ function prepareSelectionForm() return selectionProperties; } -function showGeneralChartPropertiesFormDiv(renderer) +function createChartElementConfig1Form(renderer) { - var myDiv=document.getElementById("generalChartPropertiesFormDiv"); - renderGeneralChartPropertiesForm("generalChartPropertiesFormElementsDiv",commonChartProperties,renderer); + //first empty form: + var formChartElementConfig1=document.getElementById("ChartElementConfig1Div"); + while (formChartElementConfig1.firstChild) { + formChartElementConfig1.removeChild(formChartElementConfig1.firstChild); + } + + //First Datasource: + const elementDatasourceDiv=document.createElement("div"); + const fieldDatasourceElem = document.createElement("div"); + fieldDatasourceElem.classList.add("field"); + fieldDatasourceElem.classList.add("is-grouped"); + //label: + const labelDatasourceElem = document.createElement("div"); + labelDatasourceElem.classList.add("label-container"); + const labelDatasource = document.createElement("label"); + labelDatasource.classList.add("label"); + labelDatasource.classList.add("is-required"); + labelDatasource.classList.add("is-small"); + labelDatasource.classList.add("has-tooltip-right"); + labelDatasource.setAttribute("data-tooltip","Datenquelle für das Diagrammelement"); + + const textnode = document.createTextNode("Datenquelle"); + labelDatasource.appendChild(textnode); + labelDatasourceElem.appendChild(labelDatasource); + fieldDatasourceElem.appendChild(labelDatasourceElem); + + const selDatasourceElem = document.createElement("select"); + selDatasourceElem.name="chartElementDatasource"; + selDatasourceElem.id="chartElementDatasource"; + selDatasourceElem.classList.add("select"); + selDatasourceElem.classList.add("is-small"); + + selDatasourceElem.onchange= function () { + createChartElementsConfig2Form(renderer); + }; + fillSelectOptions(selDatasourceElem,rsTableMetaData,true); + fieldDatasourceElem.appendChild(selDatasourceElem); + elementDatasourceDiv.appendChild(fieldDatasourceElem); + formChartElementConfig1.appendChild(elementDatasourceDiv); + + //Then vizType: + const elementVizTypeDiv=document.createElement("div"); + const fieldVizTypeElem = document.createElement("div"); + fieldVizTypeElem.classList.add("field"); + fieldVizTypeElem.classList.add("is-grouped"); + //label: + const labelVizTypeElem = document.createElement("div"); + labelVizTypeElem.classList.add("label-container"); + const labelVizType = document.createElement("label"); + labelVizType.classList.add("label"); + labelVizType.classList.add("is-required"); + labelVizType.classList.add("is-small"); + labelVizType.classList.add("has-tooltip-right"); + labelVizType.setAttribute("data-tooltip","Art des Diagrammelements"); + + const textnodeVizType = document.createTextNode("Diagrammelement-Typ"); + labelVizType.appendChild(textnodeVizType); + labelVizTypeElem.appendChild(labelVizType); + fieldVizTypeElem.appendChild(labelVizTypeElem); + + const selVizTypeElem = document.createElement("select"); + selVizTypeElem.name="chartElementVizType"; + selVizTypeElem.id="chartElementVizType"; + selVizTypeElem.classList.add("select"); + selVizTypeElem.classList.add("is-small"); + selVizTypeElem.onchange= function () { + createChartElementsConfig2Form(renderer); + }; + fillSelectOptions(selVizTypeElem,getPossibleVizTypes(renderer),true); + fieldVizTypeElem.appendChild(selVizTypeElem); + elementVizTypeDiv.appendChild(fieldVizTypeElem); + + formChartElementConfig1.appendChild(elementVizTypeDiv); + + } +function createChartElementsConfig2Form(renderer) +{ + var dataSource=document.getElementById("chartElementDatasource").value; + var vizType=document.getElementById("chartElementVizType").value; + //now Elements: + var formChartElementConfig2Div=document.getElementById("ChartElementConfig2Div"); + while (formChartElementConfig2Div.firstChild) { + formChartElementConfig2Div.removeChild(formChartElementConfig2Div.firstChild); + } + + const elementDivBox = document.createElement("div"); + + for(var k=0;k < vizTypeProperties.length;k++) + { + if(vizType==vizTypeProperties[k].typeUniquename) + elementDivBox.appendChild(renderDimensionField(vizTypeProperties[k],dataSource)); + } + const saveBtnDiv = document.createElement("div"); + const saveBtn = document.createElement("input"); + saveBtn.type="BUTTON"; + saveBtn.value="Übernehmen"; + saveBtn.onclick =function() { +            saveChartElementConfig() +        } + saveBtnDiv.appendChild(saveBtn); + elementDivBox.appendChild(saveBtnDiv); + formChartElementConfig2Div.appendChild(elementDivBox); + + /*columnsDiv.appendChild(columnDiv); + //title + const columnDivTitle = document.createElement("div"); + columnDivTitle.classList.add("column"); + columnDivTitle.classList.add("is-narrow"); + const columnDivBoxTitle = document.createElement("div"); + columnDivBoxTitle.classList.add("box"); + columnDivBoxTitle.style="width: 500px"; + for(var k=0;k < myCommonChartProperties.length;k++) + { + if(myCommonChartProperties[k].name=="caption") + columnDivBoxTitle.appendChild(renderChartPropertyField(myCommonChartProperties[k])); + } + + columnDivTitle.appendChild(columnDivBoxTitle); + columnsDiv.appendChild(columnDivTitle); + myForm.appendChild(columnsDiv); + */ +} + +function saveChartElementConfig() +{ + alert("Feierabend"); +} +function getPossibleVizTypes(renderer) +{ + + var possibleVizTypes=new Array(); + for(var k=0;k < vizTypes.length;k++) + { + var isDefault=true; + if(vizTypes[k].rendererUniquename==renderer) + { + var newVizType = new possibleVizType( //nr,value,name,explanation,isDefault + k,vizTypes[k].uniquename,vizTypes[k].caption,'',isDefault); + possibleVizTypes.push(newVizType); + isDefault=false; + + } + } + + return possibleVizTypes; +} +function fillDimensionProperty(vizTypeProperty,datasource) +{ + var isMeasure=(vizTypeProperty.groupUniquename=="MEASURE")?true:false; + var myProp= new dimensionProperty(vizTypeProperty.propUniquename,vizTypeProperty.caption,vizTypeProperty.explanation,isMeasure,vizTypeProperty.isMandatory,datasource); + + return myProp; +} +function showChartPropertiesFormDiv(formDiv,formElementsDiv,renderer) +{ + var myDiv=document.getElementById(formDiv); + switch (formDiv) + { + case "generalChartPropertiesFormDiv": + renderGeneralChartPropertiesForm(formElementsDiv,commonChartProperties,renderer); + break; + case "ChartElementDiv": + break; + default: + //do nothing + break; + } + if(myDiv.style.display=="block") myDiv.style.display="none"; @@ -522,6 +740,7 @@ function fillSelectionResult(selectionRsMetaData) function renderForm(formDiv,myChartProperties,myCommonChartProperties) { + //OBSOLETE: //first empty form: var myForm=document.getElementById(formDiv); while (myForm.firstChild) { @@ -561,7 +780,7 @@ function renderForm(formDiv,myChartProperties,myCommonChartProperties) } -function renderDimensionField(dimensionProperty) +function renderDimensionField(vizTypeProperty,datasource) { const fieldElem = document.createElement("div"); fieldElem.classList.add("field"); @@ -574,9 +793,9 @@ function renderDimensionField(dimensionProperty) label.classList.add("is-required"); label.classList.add("is-small"); label.classList.add("has-tooltip-right"); - label.setAttribute("data-tooltip",commonChartProperty.explanation); + //label.setAttribute("data-tooltip",dimensionProperty.explanation); - const textnode = document.createTextNode(dimensionProperty.caption); + const textnode = document.createTextNode(vizTypeProperty.caption); label.appendChild(textnode); labelElem.appendChild(label); fieldElem.appendChild(labelElem); @@ -584,23 +803,21 @@ function renderDimensionField(dimensionProperty) const inputFieldElem = document.createElement("div"); inputFieldElem.classList.add("field"); inputFieldElem.classList.add("is-active"); - const inputParaElem = document.createElement("p"); - inputParaElem.classList.add("control-new"); const inputSelectElem = document.createElement("div"); inputSelectElem.classList.add("select"); inputSelectElem.classList.add("is-small"); - inputSelectElem.classList.add("is-fullwidth"); + //inputSelectElem.classList.add("is-fullwidth"); const selElem = document.createElement("select"); - selElem.name=dimensionProperty.name; - selElem.id=dimensionProperty.name; - selElem.onchange= function () { - createChart('chartDiv'); - }; + selElem.name=vizTypeProperty.propUniquename; + selElem.id=vizTypeProperty.propUniquename; +/* vermutlich unnötig: selElem.onchange= function () { + renderChart('chartDiv'); + };*/ + var dimensionProperty=fillDimensionProperty(vizTypeProperty,datasource); fillSelectOptions(selElem,dimensionProperty.getValueResultset(),dimensionProperty.isMandatory); inputSelectElem.appendChild(selElem); - inputParaElem.appendChild(inputSelectElem); - inputFieldElem.appendChild(inputParaElem); + inputFieldElem.appendChild(inputSelectElem); fieldElem.appendChild(inputFieldElem); return fieldElem; @@ -770,7 +987,7 @@ function renderChartPropertyField(commonChartProperty) } selElem.onchange= function () { - createChart('chartDiv'); + renderChart('chartDiv'); }; fillSelectOptions(selElem,commonChartProperty.getValueResultset(),commonChartProperty.isMandatory); inputElem.appendChild(selElem); @@ -791,7 +1008,7 @@ function renderChartPropertyField(commonChartProperty) textAreaElem.id=commonChartProperty.name; textAreaElem.value=commonChartProperty.defaultValue; textAreaElem.onchange= function () { - createChart('chartDiv'); + renderChart('chartDiv'); }; inputElem.appendChild(textAreaElem); inputParaElem.appendChild(inputElem); @@ -820,7 +1037,7 @@ function renderChartPropertyField(commonChartProperty) rangeElem.id=commonChartProperty.name; rangeElem.value=commonChartProperty.defaultValue; rangeElem.onchange= function () { - createChart('chartDiv'); + renderChart('chartDiv'); }; inputElem.appendChild(rangeElem); inputParaElem.appendChild(inputElem); @@ -843,7 +1060,7 @@ function renderChartPropertyField(commonChartProperty) inpElem.id=commonChartProperty.name; inpElem.value=commonChartProperty.defaultValue; inpElem.onchange= function () { - createChart('chartDiv'); + renderChart('chartDiv'); }; inputElem.appendChild(inpElem); inputParaElem.appendChild(inputElem); @@ -1037,6 +1254,7 @@ var myDiv=document.getElementById(chartDivElem); function createChart(chartDivElem) { + //OBSOLETE! chartType=document.getElementById("viz_chart_type").value; var selectionRsMetaData=[]; diff --git a/superx/xml/viz_demo.html b/superx/xml/viz_demo.html index 21e30a5..0ee1ad9 100644 --- a/superx/xml/viz_demo.html +++ b/superx/xml/viz_demo.html @@ -41,7 +41,7 @@ padding-bottom:10px; /*border-bottom:thick solid gray;*/ } -

Prüfungen nach Notendurchschnitt (Zeitreihe)

Köpfe oder Fälle ?:  @@ -767,7 +796,7 @@ rs0.push(new dataRow0(11,'SoSe 2017',44,3,6.82,3,6.82,'',16,36.36,2,66.67,2,66.6 Aktuelle Zahlen ; Seit Semester:  - SoSe 2017 + WiSe 2017/2018 ; Bis Semester:  WiSe 2022/2023 @@ -783,11 +812,14 @@ rs0.push(new dataRow0(11,'SoSe 2017',44,3,6.82,3,6.82,'',16,36.36,2,66.67,2,66.6 Stand: 10.08.2022

 
-
  
+
  
-
+
  
-
  
+
  
-
+
  
  
@@ -948,14 +978,14 @@ rs1.push(new dataRow1(12,'Gesamt - Ø',77,1,'',2.257922078,2.130952381,2.4102857 Diagramm

-

Erzeugen

+

Erzeugen

-

+

  
@@ -980,10 +1010,17 @@ rs1.push(new dataRow1(12,'Gesamt - Ø',77,1,'',2.257922078,2.130952381,2.4102857

-
  
+
  
+
+
  
+

Vorschau

@@ -1027,7 +1064,7 @@ rs1.push(new dataRow1(12,'Gesamt - Ø',77,1,'',2.257922078,2.130952381,2.4102857
Superx-Projekt http://www.superx-projekt.de -   31.12.2022 +   02.01.2023
diff --git a/superx/xml/viz_html_chart.xsl b/superx/xml/viz_html_chart.xsl index 2d40743..c06e8aa 100644 --- a/superx/xml/viz_html_chart.xsl +++ b/superx/xml/viz_html_chart.xsl @@ -188,8 +188,6 @@ this.groupUniquename=groupUniquename; this.groupVariableName=groupVariableName; } - - var commonChartProperties=[]; ]]> @@ -253,13 +251,38 @@ commonChartProperties.push(newCommonChartProperty); --> -function vizTypeProperty(propUniquename,caption,typeUniquename,groupUniquename,isMandatory) + +function vizType(uniquename,caption,rendererUniquename) +{ +this.caption=caption; +this.uniquename=uniquename; +this.rendererUniquename=rendererUniquename; +} + +var vizTypes=[]; + + + +var newVizType = new vizType(" + +"," + +"," + +"); +vizTypes.push(newVizType); + + + + +function vizTypeProperty(propUniquename,caption,typeUniquename,groupUniquename,isMandatory,explanation) { this.propUniquename=propUniquename; this.caption=caption; this.groupUniquename=groupUniquename; this.typeUniquename=typeUniquename; this.isMandatory=isMandatory; +this.explanation=explanation; } var vizTypeProperties=[]; @@ -275,7 +298,8 @@ var newVizTypeProperty = new vizTypeProperty(" "," ", - + +,"" ); vizTypeProperties.push(newVizTypeProperty); @@ -1301,15 +1325,6 @@ var platform='superx'; var vizInitialName=''; -function tableMetaData(tableId,nr,name) -{ - this.tableId=tableId; - this.nr=nr; - this.name=name; - -} - - function dataRowMetaData(tableId,nr,colname,colcaption,coltype,colfunction) { this.tableId=tableId; @@ -1320,7 +1335,18 @@ this.coltype=coltype; this.colfunction=colfunction; } + +function tableMetaData(nr,value,name,isDefault) +{ + this.value=value; + this.nr=nr; + this.name=name + this.isDefault=isDefault; + +} + var rsTableMetaData=new Array(); +var rsColumnMetaData=new Array(); @@ -1330,18 +1356,33 @@ var rsTableMetaData=new Array(); +