From 3963c0c7d78c921e5fa2130c94879924a9b454ff Mon Sep 17 00:00:00 2001 From: Daniel Quathamer Date: Mon, 30 Jan 2023 12:41:24 +0100 Subject: [PATCH] Gruppierung Properties, CopyPaste ChartModel #5 --- src-modules/module/viz/conf/viz.xml | 8 +- .../viz/schluesseltabellen/viz_property.unl | 28 +- .../schluesseltabellen/viz_property_group.unl | 6 +- .../viz/schluesseltabellen/viz_renderer.unl | 3 +- .../viz/schluesseltabellen/viz_type.unl | 22 +- .../schluesseltabellen/viz_type_property.unl | 71 ++-- superx/style/sx_viz_muster.css | 26 +- superx/xml/js/viz/viz_functions.js | 355 +++++++++++++----- superx/xml/viz_html_chart.xsl | 213 ++++++----- 9 files changed, 462 insertions(+), 270 deletions(-) diff --git a/src-modules/module/viz/conf/viz.xml b/src-modules/module/viz/conf/viz.xml index de1191f..c343869 100644 --- a/src-modules/module/viz/conf/viz.xml +++ b/src-modules/module/viz/conf/viz.xml @@ -19,6 +19,7 @@ rightname="CS_BIA_STANDARDREPORTS_ADMIN[VIZ]" /> + Grafik horizontal (H) oder vertikal (V) @@ -202,6 +203,7 @@ rightname="CS_BIA_STANDARDREPORTS_ADMIN[VIZ]" /> 1=ja, 0=nein + @@ -529,7 +531,7 @@ mode="full"> maxRows="1" mode="full"> -In diesem Formular können Sie Diagramme verwalten. +In diesem Formular können Sie Diagrammelemente verwalten. tid @@ -538,15 +540,17 @@ mode="full"> + + diff --git a/src-modules/module/viz/schluesseltabellen/viz_property.unl b/src-modules/module/viz/schluesseltabellen/viz_property.unl index 79be4dc..7416293 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_property.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_property.unl @@ -1,23 +1,23 @@ -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^ +1^Grafik-Höhe^height^^px^1^ ^0^4^10^Diagrammhöhe (exkl. Skalenbeschriftung). Wird nur ausgewertet wenn es keine Y-Achse gibt!^101^^^integer^ +2^Grafik-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^#ffffff^ ^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_static^^ ^1^ ^0^3^10^Füllfarbe (nur) von Diagrammelementen (Flächen, Balken, Säulen, Streifen, Punkte)^305^^^string^ +8^Flächenfarbe^fill_static^^ ^1^ ^0^3^11^Füllfarbe (nur) von Diagrammelementen (Flächen, Balken, Säulen, Streifen, Punkte)^305^^^string^ 11^X: Schriftneigung^tickRotate_x^^ ^1^ ^0^1^18^Neigungswinkel der Achsenwerte^604^^^integer^ 12^X: Skalierung^ticks_x^^ ^1^ ^0^1^18^Feinheit der Wertegliederung^605^^^integer^ 13^X: Schriftgröße^tickSize_x^^ ^1^ ^0^1^18^Größe der Achsenwerte^603^^^integer^ 15^X: Label-Ausrichtung^labelAnchor_x^^ ^1^left|center|right^0^2^18^Label-Position^601^^^string^ -16^Außenrand links^marginLeft^100^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^ +16^Außenrand links^marginLeft^100^px^1^ ^0^4^10^Abstand zwischen Grafik und linkem Hintergrundrand^103^^^integer^ +17^Außenrand rechts^marginRight^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und rechtem Hintergrundrand^104^^^integer^ +18^Außenrand oben^marginTop^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und oberem Hintergrundrand^105^^^integer^ +19^Außenrand unten^marginBottom^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und unterem Hintergrundrand^106^^^integer^ +20^Innenrand oben^insetTop^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung oben^107^^^integer^ +21^Innenrand unten^insetBottom^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung unten^108^^^integer^ +22^Innenrand links^insetLeft^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung links^109^^^integer^ +23^Innenrand rechts^insetRight^ ^px^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung rechts^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^ @@ -26,7 +26,7 @@ 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^ +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 grafischen Elemente^301^^^string^ 63^X: Label-Abstand^labelOffset_x^^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^ @@ -36,7 +36,7 @@ 73^Maß 1^viz_measure1^^ ^1^ ^0^1^6^ ^608^^^string^ 76^Serien-Dimension^stroke^^ ^1^ ^0^1^5^ ^608^^^string^ 78^Legende^legend^^ ^1^true|false^0^2^20^ ^303^^^boolean^ -79^Textbeschriftung^text^^ ^1^ ^0^1^5^ ^608^^^string^ +79^Beschriftung^text^ ^ ^1^ ^0^1^5^ ^608^^^string^ 80^Serienfarbe^fill^^ ^1^ ^0^1^5^Füllfarbe (nur) von Diagrammelementen (Flächen, Balken, Säulen, Streifen, Punkte)^305^^^string^ 81^Y: Label-Abstand^labelOffset_y^^px^1^ ^0^1^21^Label-Abstand von Achse^602^^^integer^ 82^Y: Label-Ausrichtung^labelAnchor_y^^ ^1^left|center|right^0^2^21^Label-Position^601^^^string^ @@ -48,3 +48,5 @@ 88^Punktdicke^r^^ ^1^ ^0^1^5^Punktdicke von Diagrammelementen (relevant für Plot.dot, Plot.tickX/Y)^308^^^string^ 89^Sortierung^sort^^ ^1^ ^0^1^5^ ^608^^^string^ 90^Kategorie-Dimension 2^viz_dimension2^^ ^1^ ^0^1^5^ ^608^^^string^ +91^Quell-Dimension^viz_source^^ ^1^ ^0^1^5^ ^608^^^string^ +92^Ziel-Dimension 1^viz_target1^^ ^1^ ^0^1^5^ ^608^^^string^ diff --git a/src-modules/module/viz/schluesseltabellen/viz_property_group.unl b/src-modules/module/viz/schluesseltabellen/viz_property_group.unl index 42770d4..3e5fdb5 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_property_group.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_property_group.unl @@ -1,8 +1,8 @@ 5^CATEGORY^Kategorie-Achse^60^ 6^MEASURE^Maß-Achse^70^ -10^LAYOUT^Layout^10^ -11^STYLE^Style^20^ -12^MARKS^Diagramm-Elemente^30^ +10^LAYOUT^Größe und Ränder^10^ +11^STYLE^Formatierung^20^ +12^MARKS^Grafik-Elemente^30^ 15^SCALES^Skalen-Typen^40^ 17^AXIS^Achsen-Customizing^50^ 18^TICKS_LABELS_X^X Achsen-Beschriftung^^ diff --git a/src-modules/module/viz/schluesseltabellen/viz_renderer.unl b/src-modules/module/viz/schluesseltabellen/viz_renderer.unl index a3c85be..a47de29 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_renderer.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_renderer.unl @@ -1,2 +1,3 @@ -1^d3js^D3JS^ +1^d3js^D3JS (V7)^ 2^plot^Observable Plot^ +3^d3jsv3^D3JS (V3)^ diff --git a/src-modules/module/viz/schluesseltabellen/viz_type.unl b/src-modules/module/viz/schluesseltabellen/viz_type.unl index 1670cb4..e8aa58f 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_type.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_type.unl @@ -1,11 +1,11 @@ -1^bar_x^Balken (horizontal)^2^/superx/xml/js/viz/viz_functions.js^makeBarX^ -2^bar_y^Balken (vertikal)^2^/superx/xml/js/viz/viz_functions.js^makeBarY^ -3^line^Linien (vertikal)^2^/superx/xml/js/viz/viz_functions.js^makeLine^ -5^area_y^Flächen (vertikal)^2^^^ -6^dot^Punkte (vertikal)^2^^^ -7^box_x^Boxplot (horizontal)^2^ ^ ^ -8^area_x^Flächen (horizontal)^2^^^ -9^box_y^Boxplot (vertikal)^2^ ^ ^ -10^text^Wertelabel^2^ ^ ^ -11^bar_x_d3^Balken (horizontal)^1^^^ -12^sankey^Sankey^1^/superx/xml/js/viz/sankey.js^^ +1^bar_x^Balken (horizontal)^2^ ^ ^H^ +2^bar_y^Balken (vertikal)^2^ ^ ^V^ +3^line^Linien (vertikal)^2^ ^ ^V^ +5^area_y^Flächen (vertikal)^2^^^V^ +6^dot^Punkte (vertikal)^2^^^V^ +7^box_x^Boxplot (horizontal)^2^ ^ ^H^ +8^area_x^Flächen (horizontal)^2^^^H^ +9^box_y^Boxplot (vertikal)^2^ ^ ^V^ +10^text^Wertelabel^2^ ^ ^^ +11^bar_x_d3^Balken (horizontal)^1^^^H^ +12^sankey^Sankey^3^/superx/xml/js/viz/sankey.js^^C^ diff --git a/src-modules/module/viz/schluesseltabellen/viz_type_property.unl b/src-modules/module/viz/schluesseltabellen/viz_type_property.unl index 0413386..37555b9 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_type_property.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_type_property.unl @@ -1,38 +1,33 @@ -1^1^70^1^ -3^1^72^1^ -8^2^70^1^ -9^2^72^1^ -10^3^70^1^ -12^5^70^1^ -13^3^72^1^ -15^5^72^1^ -16^6^70^1^ -17^6^72^1^ -20^1^76^0^ -21^1^80^0^ -22^2^76^0^ -23^2^80^0^ -24^5^8^0^ -26^3^76^0^ -27^6^88^0^ -28^3^89^0^ -29^6^89^0^ -30^5^89^0^ -31^2^89^0^ -32^1^89^0^ -33^7^70^1^ -34^7^72^0^ -35^9^70^0^ -36^9^72^1^ -37^8^8^0^ -38^8^72^1^ -39^8^70^1^ -40^8^89^0^ -41^10^70^1^ -42^10^72^1^ -43^10^79^1^ -44^11^71^1^ -45^11^73^1^ -46^12^71^1^ -47^12^73^1^ -48^12^76^1^ +1^1^70^1^1^ +3^1^72^1^10^ +8^2^70^1^0^ +9^2^72^1^10^ +10^3^70^1^0^ +12^5^70^1^0^ +13^3^72^1^10^ +15^5^72^1^10^ +16^6^70^1^0^ +17^6^72^1^0^ +20^1^76^0^20^ +22^2^76^0^20^ +24^5^8^0^20^ +26^3^76^0^20^ +27^6^88^0^0^ +29^6^89^0^0^ +30^5^89^0^0^ +33^7^70^1^0^ +34^7^72^0^0^ +35^9^70^0^0^ +36^9^72^1^0^ +37^8^8^0^0^ +38^8^72^1^0^ +39^8^70^1^0^ +40^8^89^0^0^ +41^10^70^0^0^ +42^10^72^0^10^ +43^10^79^1^20^ +44^11^71^1^0^ +45^11^73^1^0^ +46^12^73^1^0^ +47^12^71^1^0^ +48^12^90^1^0^ diff --git a/superx/style/sx_viz_muster.css b/superx/style/sx_viz_muster.css index 383133c..449263e 100644 --- a/superx/style/sx_viz_muster.css +++ b/superx/style/sx_viz_muster.css @@ -17,9 +17,6 @@ margin-left: 0.15em; padding: 0.4rem 0.4rem 0.4rem 0.4rem; } /*für Padding: ob re un li*/ -.feldname { - color: hsl(0, 0%, 29%); } - /*Tabs, Selektionsfelder-Formular*/ .label-container { /*für Responsibility der Eingabefelder*/ display: flex; @@ -34,12 +31,6 @@ margin-left: 1.0em; margin-top: 0.4em; } -.select { /*für SELECT Elemente*/ - font-family: sans-serif; - font-weight: normal; - width:75px; -} - .control-new { /*für einheitliche Controlbreite*/ width: 17.0em; } @@ -49,15 +40,18 @@ font-weight: normal; } .tabs { /*für Tab-Namen*/ - font-size: 2rem; } - + font-size: 2rem; } + .input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder { - /*font-family: sans-serif;*/ font-size: 0.8rem; - color: black /*rgba(54, 54, 54, 0.3)*/; } + color: black; } .input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { - /*font-family: sans-serif;*/ font-size: 0.8rem; - color: black /*(54, 54, 54, 0.3);*/; } - + color: hsl(0, 0%, 29%); } + +.input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder, .select select::-webkit-input-selected { + font-size: 0.8rem; + color: hsl(0, 0%, 29%); } + + diff --git a/superx/xml/js/viz/viz_functions.js b/superx/xml/js/viz/viz_functions.js index fa59de6..58682f6 100644 --- a/superx/xml/js/viz/viz_functions.js +++ b/superx/xml/js/viz/viz_functions.js @@ -36,6 +36,7 @@ const chartModel={ */ function chartModel(id,name,renderer,datasources) { + this.version="0.2b"; this.id=id; this.name=name; this.renderer=renderer; @@ -46,7 +47,7 @@ function chartModel(id,name,renderer,datasources) this.chartPropertiesUsed=new Array(); //let globalProperties={}; - this.getChartSVG = function () { + /*this.getChartSVG = function () { //console.log(JSON.stringify(this)); var mySVG=""; @@ -96,9 +97,7 @@ function chartModel(id,name,renderer,datasources) myOptions=getPlotOptionsObj(this.chartPropertiesUsed); var marksArray=new Array(); - /*for(var k=0;k< myChartModel.chartPropertiesUsed.length;k++) - { - }*/ + //first empty marks: for(var k=0;k< myOptions["marks"].length;k++) { @@ -108,13 +107,7 @@ function chartModel(id,name,renderer,datasources) for(var k=0;k< this.chartElements.length;k++) { marksArray[k]=renderChartElementWithPlot(this.chartElements[k]); - /*Plot.barX(rs_table0, - { - x: "gesamt", - y: "eintrag", - fill: "blue" - } - */ + } @@ -144,6 +137,7 @@ function chartModel(id,name,renderer,datasources) return svgD3; } + */ } @@ -307,13 +301,13 @@ this.getValueResultset = function () { /* Render Model:*/ function renderChartSVGFromModel(currentChartModel,targetDiv) { - var mySVG=""; + switch (currentChartModel.renderer) { case "plot": - mySVG=getChartSVGWithPlot(currentChartModel); + renderChartSVGWithPlot(currentChartModel,targetDiv); break; case "d3js": - mySVG=getChartSVGWithD3(currentChartModel); + renderChartSVGWithD3(currentChartModel,targetDiv); break; case "d3jsv3": renderChartSVGWithD3V3(currentChartModel,targetDiv); @@ -324,6 +318,57 @@ function renderChartSVGFromModel(currentChartModel,targetDiv) { } return true; } +function renderChartSVGWithPlot (currentChartModel,targetDiv) + { + console.log("using Plot"); + var myOptions=new Object; + //myOptions.marks=new Array(); + //myOptions.sort=new Array(); + + myOptions=getPlotOptionsObj(currentChartModel.chartPropertiesUsed); + var marksArray=new Array(); + /*for(var k=0;k< myChartModel.chartPropertiesUsed.length;k++) + { + }*/ + //first empty marks: + for(var k=0;k< myOptions["marks"].length;k++) + { + myOptions["marks"][k].pop(); + } + //copy ChartElements to marks: + for(var k=0;k< currentChartModel.chartElements.length;k++) + { + marksArray[k]=renderChartElementWithPlot(currentChartModel.chartElements[k]); + /*Plot.barX(rs_table0, + { + x: "gesamt", + y: "eintrag", + fill: "blue" + } + */ + + } + + myOptions["marks"].push(marksArray); + var svgPlot=Plot.plot(myOptions); + document.getElementById(targetDiv).innerHTML=""; + document.getElementById(targetDiv).appendChild(svgPlot); + + //return svgPlot; + } +function renderChartSVGWithD3 (currentChartModel,targetDiv) + { + console.log("using D3JS"); + var svgD3=new Object; + for(var k=0;k< currentChartModel.chartElements.length;k++) + { + svgD3=renderChartElementWithD3(currentChartModel.chartElements[k],targetDiv); + } + + + //document.getElementById(targetDiv).innerHTML=""; + //document.getElementById(targetDiv).appendChild(svgD3); + } function renderChartSVGWithD3V3 (currentChartModel,targetDiv) { console.log("using D3JS_v3"); @@ -368,31 +413,9 @@ function updateChartModel() //first Collect all groups: myChartModel.chartPropertiesUsed=myChartPropertiesUsed; - /* - 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); */ - - - - //console.log("options:"+ optionsString); - //var globalProperties=JSON.parse(optionsString); - //globalProperties["marks"].push(marksArray); - - //myChartModel.options=globalProperties; - //myChartModel.options["marks"].push(marksArray); + //Update the source Code TEXTAREA: + updateChartModelCode(myChartModel); return myChartModel; } @@ -448,26 +471,11 @@ function renderChart(chartDiv,currentChartModel) document.getElementById("chartName").value=vizInitialName;*/ if(currentChartModel.chartElements.length>0 && currentChartModel.chartElements[0]) { - if(currentChartModel.renderer=="plot") - { - var mySVG=currentChartModel.getChartSVG(); - if(typeof mySVG === 'object') - { - document.getElementById(chartDiv).innerHTML=""; - document.getElementById(chartDiv).appendChild(mySVG); - } - } - else - { - //d3js: - //currentChartModel.targetDiv=chartDiv; - //currentChartModel.renderChartSVG(); - renderChartSVGFromModel(currentChartModel,chartDiv); - } + renderChartSVGFromModel(currentChartModel,chartDiv); } else - document.getElementById(chartDiv).innerHTML=""; - //""; + document.getElementById(chartDiv).innerHTML=""+ + ""; // } @@ -742,6 +750,7 @@ function showChartPropertiesFormDiv(formDiv,formElementsDiv,renderer) function prepareChartProperties(chartType) { + /*OBSOLETE*/ var chartProperties=[]; chartProperties=prepareForm(chartType,vizTypeProperties); renderForm("chartPropertiesForm",chartProperties,commonChartProperties); @@ -822,6 +831,7 @@ return chartProperties; */ function fillDataSelectionForm(formDiv) { + /* OBSOLETE*/ formDivElem=document.getElementById(formDiv); if(formDivElem.style.display=="none") { @@ -1132,18 +1142,67 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render while (myForm.firstChild) { myForm.removeChild(myForm.firstChild); } + //first Collect all groups: + var commonChartPropertyGroups=[]; + var previousGroup=""; + for(var k=0;k < myCommonChartProperties.length;k++) + { + var groupUniquename=myCommonChartProperties[k].groupUniquename; + if(groupUniquename!="" + && groupUniquename != previousGroup + && myCommonChartProperties[k].groupVariableName !="") + { + var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,""); + commonChartPropertyGroups.push(newcommonChartPropertyGroup); + } + previousGroup=groupUniquename; + } + const columnDiv = document.createElement("div"); + for(var i=0;i < commonChartPropertyGroups.length;i++) + { + + const columnGroupDiv = document.createElement("div"); + columnGroupDiv.id=commonChartPropertyGroups[i].groupUniquename; + columnGroupDiv.classList.add("box"); + + const columnGroupHeaderDiv = document.createElement("div"); + const colHeader = document.createTextNode(commonChartPropertyGroups[i].caption); + const colHeaderBold = document.createElement("strong"); + colHeaderBold.appendChild(colHeader); + const colHeaderParagraph = document.createElement("label"); + colHeaderParagraph.classList.add("label"); + colHeaderParagraph.classList.add("is-small"); + colHeaderParagraph.appendChild(colHeaderBold); + //Toggle visibility: + const colHeaderToggleBtn = document.createElement("a"); + colHeaderToggleBtn.id="openBody"+commonChartPropertyGroups[i].groupUniquename; + //colHeaderToggleBtn.classList.add("is-small"); + colHeaderToggleBtn.onclick =function() { +            toggleGroupBodyDiv(this.id) +        } + const colHeaderToggleBtnText = document.createTextNode(" ..."); + colHeaderToggleBtn.appendChild(colHeaderToggleBtnText); + colHeaderParagraph.appendChild(colHeaderToggleBtn); + columnGroupHeaderDiv.appendChild(colHeaderParagraph); + //columnGroupHeaderDiv.appendChild(colHeaderToggleBtn); + columnGroupDiv.appendChild(columnGroupHeaderDiv); + const columnGroupBodyDiv = document.createElement("div"); + columnGroupBodyDiv.id="Body"+commonChartPropertyGroups[i].groupUniquename; + columnGroupBodyDiv.style.display="none"; + for(var k=0;k < myCommonChartProperties.length;k++) + { + if(myCommonChartProperties[k].groupUniquename==commonChartPropertyGroups[i].groupUniquename + && myCommonChartProperties[k].variableName!="") + columnGroupBodyDiv.appendChild(renderChartPropertyField(myCommonChartProperties[k])); + } + columnGroupDiv.appendChild(columnGroupBodyDiv); + columnDiv.appendChild(columnGroupDiv); + + } + myForm.appendChild(columnDiv); + /*alte Liste flach: 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" @@ -1158,10 +1217,21 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render myForm.appendChild(divBox); + */ } +function toggleGroupBodyDiv(groupBodyDiv) +{ + var bodyDiv=groupBodyDiv.substr(4); //remove "open" Prefix + var myDiv=document.getElementById(bodyDiv); + if(myDiv.style.display=="block") + myDiv.style.display="none"; + else + myDiv.style.display="block"; +} function renderFormDetails(formDiv,myCommonChartProperties) { + /*OBSOLETE*/ //first empty form: var myForm=document.getElementById(formDiv); while (myForm.firstChild) { @@ -1250,6 +1320,13 @@ for(var k=0;k < myCommonChartProperties.length;k++) function renderChartPropertyField(commonChartProperty) { + //Wenn im chartModel schon ein Wert vorhanden ist, wird er vorbelegt: if(commonChartProperty) + var propValue=""; + if(myChartModel && myChartModel.chartPropertiesUsed.length>0) + { + propValue=getChartModelChartPropertyUsed(myChartModel.chartPropertiesUsed,commonChartProperty.name ); + } + const fieldElem = document.createElement("div"); fieldElem.classList.add("field"); fieldElem.classList.add("is-grouped"); @@ -1296,6 +1373,7 @@ function renderChartPropertyField(commonChartProperty) renderChart('chartDiv',myChartModel); }; fillSelectOptions(selElem,commonChartProperty.getValueResultset(),commonChartProperty.isMandatory); + selElem.value= (propValue=="")?commonChartProperty.defaultValue:propValue; inputElem.appendChild(selElem); inputParaElem.appendChild(inputElem); @@ -1312,7 +1390,7 @@ function renderChartPropertyField(commonChartProperty) } textAreaElem.name=commonChartProperty.name; textAreaElem.id=commonChartProperty.name; - textAreaElem.value=commonChartProperty.defaultValue; + textAreaElem.value= (propValue=="")?commonChartProperty.defaultValue:propValue; textAreaElem.onchange= function () { updateChartModel(); renderChart('chartDiv',myChartModel); @@ -1342,7 +1420,7 @@ function renderChartPropertyField(commonChartProperty) rangeElem.name=commonChartProperty.name; rangeElem.id=commonChartProperty.name; - rangeElem.value=commonChartProperty.defaultValue; + rangeElem.value= (propValue=="")?commonChartProperty.defaultValue:propValue; rangeElem.onchange= function () { updateChartModel(); renderChart('chartDiv',myChartModel); @@ -1366,7 +1444,7 @@ function renderChartPropertyField(commonChartProperty) } inpElem.name=commonChartProperty.name; inpElem.id=commonChartProperty.name; - inpElem.value=commonChartProperty.defaultValue; + inpElem.value= (propValue=="")?commonChartProperty.defaultValue:propValue; inpElem.onchange= function () { updateChartModel(); renderChart('chartDiv',myChartModel); @@ -1384,6 +1462,17 @@ function renderChartPropertyField(commonChartProperty) } +function getChartModelChartPropertyUsed(myChartPropertiesUsed,commonChartPropertyName) +{ + var propValue=""; + for(var k=0;k < myChartPropertiesUsed.length;k++) +{ + if(myChartPropertiesUsed[k].name==commonChartPropertyName) + propValue=myChartPropertiesUsed[k].propertyValue; +} +return propValue; +} + function fillSelectOptions(myCombo,myValues,isMandatory) { var optionCounter=0; @@ -1469,6 +1558,7 @@ const thCap = document.createElement("th"); const textnode = document.createTextNode("Zeilennr."); thCap.appendChild(textnode); rowElem.appendChild(thCap); + for(var col=0;col < metadata.length;col++) { if(metadata[col].nr) @@ -1481,6 +1571,27 @@ for(var col=0;col < metadata.length;col++) } tabElem.appendChild(rowElem); +//Variablennamen in Subheader +const rowElemSubHeader = document.createElement("tr"); +const tdCap = document.createElement("td"); +tdCap.style="font-family:monospace;font-size:smaller"; +const textnodeSubHeader = document.createTextNode("(rownr)"); +tdCap.appendChild(textnodeSubHeader); +rowElemSubHeader.appendChild(tdCap); + +for(var col=0;col < metadata.length;col++) + { + if(metadata[col].nr) + { + const thCap = document.createElement("td"); + thCap.style="font-family:monospace;font-size:smaller"; + const textnode = document.createTextNode("("+metadata[col].colname+")"); + thCap.appendChild(textnode); + rowElemSubHeader.appendChild(thCap); + } + } +tabElem.appendChild(rowElemSubHeader); + for(row=0;row d.dimension1); - //return bar; + + return bar; } function makeLine_alt(svg,data) { @@ -1842,7 +1994,7 @@ function makeSample() } function getChartOptions(categoryDim1,categoryDim2,measureDim,marksArray,chartOrientationVertical) { - + /*OBSOLETE*/ var options; //var categoryDim1=document.getElementById("viz_dimension1").value; //var categoryDim2=document.getElementById("viz_dimension2").value; @@ -2237,25 +2389,50 @@ else function showChartModelCode() { -var myCodeDiv= document.getElementById("chartModelSrcCode"); var mySrcDiv=document.getElementById("chartModelsrc"); if(mySrcDiv.style.display=="block") mySrcDiv.style.display="none"; else mySrcDiv.style.display="block"; -var myJson =""; +updateChartModelCode(myChartModel); + +} +function updateChartModelCode(myChartModel) +{ +var myCodeDiv= document.getElementById("chartModelSrcCode"); +var myJson =""; if(myChartModel) { myJson=JSON.stringify(myChartModel); myCodeDiv.innerHTML=myJson; + myCodeDiv.value=myJson; } else { myCodeDiv.innerHTML="Kein Quellcode gefunden"; } +} + +function loadChartModelCode(chartModelSrcCodeTextarea,chartDiv) +{ + +var mySrc=document.getElementById(chartModelSrcCodeTextarea); +var myJsonString =mySrc.value; + +if(myJsonString!="") +{ + myChartModel=JSON.parse(myJsonString); + if(myChartModel) + { + document.getElementById("vizElementCounter").value=myChartModel.chartElements.length; + renderChart(chartDiv,myChartModel) + } +} + + } function copySrcCode(mydiv) diff --git a/superx/xml/viz_html_chart.xsl b/superx/xml/viz_html_chart.xsl index c5d5f23..8d348c5 100644 --- a/superx/xml/viz_html_chart.xsl +++ b/superx/xml/viz_html_chart.xsl @@ -77,7 +77,10 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util - +

@@ -588,19 +600,13 @@ rs[].push(new dataRow_
- + +
    - - - + showDataTable('dataDivTable @@ -619,7 +625,6 @@ rs[].push(new dataRow_
-    @@ -836,7 +841,7 @@ rs[].push(new dataRow_ --> - +