diff --git a/src-modules/module/viz/schluesseltabellen/viz_property.unl b/src-modules/module/viz/schluesseltabellen/viz_property.unl index 85987af..2d81747 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_property.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_property.unl @@ -1,24 +1,24 @@ -1^Grafik-Höhe^height^450^px^1^ ^0^4^10^Diagrammhöhe (exkl. Skalenbeschriftung). Wird nur ausgewertet wenn es keine Y-Achse gibt!^101^^^integer^ -2^Grafik-Breite^width^650^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^20^Hintergrundfarbe der Grafik^201^^^string^ -5^Vordergrundfarbe^color^^ ^1^black^0^3^20^Farbe von Text- und Diagrammelementen^202^^^string^ +1^Grafik-Höhe^height^450^ ^1^ ^0^4^10^Diagrammhöhe (exkl. Skalenbeschriftung). Wird nur ausgewertet wenn es keine Y-Achse gibt!^101^^^integer^ +2^Grafik-Breite^width^650^ ^1^ ^0^4^10^Diagrammsbreite (exkl.Skalenbeschriftung)^102^100^2000^integer^ +3^Werte-Label-Breite^valueLabelWidth^^^1^^0^1^18^^^^^integer^ +4^Hintergrundfarbe^backgroundColor^#ffffff^ ^1^#ffffeb^0^3^11^Hintergrundfarbe der Grafik^201^^^string^ +5^Schriftfarbe^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^20^Nur für Grafikelement Flächen. Füllfarbe.^305^^^string^ +8^Flächenfarbe^fill_static^ ^ ^1^ ^0^3^11^Nur für Grafikelement Flächen. Füllfarbe.^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 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^Nur für Grafikelemente Balken und Linien: Farbtonschema für Serien.^303^^^string^ +16^Außenrand links^marginLeft^100^^1^ ^0^4^10^Abstand zwischen Grafik und linkem Hintergrundrand^103^^^integer^ +17^Außenrand rechts^marginRight^ ^^1^ ^0^4^10^Abstand zwischen Grafik und rechtem Hintergrundrand^104^^^integer^ +18^Außenrand oben^marginTop^ ^^1^ ^0^4^10^Abstand zwischen Grafik und oberem Hintergrundrand^105^^^integer^ +19^Außenrand unten^marginBottom^ ^^1^ ^0^4^10^Abstand zwischen Grafik und unterem Hintergrundrand^106^^^integer^ +20^Innenrand oben^insetTop^ ^^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung oben^107^^^integer^ +21^Innenrand unten^insetBottom^ ^^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung unten^108^^^integer^ +22^Innenrand links^insetLeft^ ^^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung links^109^^^integer^ +23^Innenrand rechts^insetRight^ ^^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung rechts^110^^^integer^ +24^Farbschema^scheme^ ^ ^1^blues|greens|greys|oranges|purples|reds^0^2^22^Nur für Grafikelemente Balken und Linien: Farbtonschema für Serien.^303^^^string^ 25^Farbtyp^type^^ ^1^einfarbig|mehrfarbig|zyklisch^0^2^20^Ein-/Mehrfarbigkeit von Diagrammelementen^302^^^string^ 43^Farbsättigung^fillOpacity^^ ^1^ ^0^4^20^Deckkraft der Füllfarbe von Diagrammelementen^306^^^string^ 45^Strichdicke^strokeWidth^^ ^1^ ^0^1^12^Strichdicke von Diagrammelementen (relevant für Plot.dot, Plot.tickX/Y)^308^^^string^ @@ -27,17 +27,17 @@ 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^20^Art der Farbverteilung in Diagrammelementen^304^^^string^ 61^Grafik-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^ +63^X: Label-Abstand^labelOffset_x^^^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^ +69^Maß: Label-Höhe^gridLabelHeight^^^1^ ^0^1^18^ ^608^^^integer^ 70^X-Achse^x^^ ^1^ ^0^1^5^ ^608^^^string^ 72^Y-Achse^y^^ ^1^ ^0^1^6^ ^608^^^string^ 73^Maß 1^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^11^ ^303^^^boolean^ +78^Legende^legend^ ^ ^1^true|false^0^2^22^ ^303^^^boolean^ 79^Beschriftung^text^ ^ ^1^ ^0^1^5^ ^608^^^string^ -80^Serienfarbe^fill^ ^ ^1^ ^0^1^20^Nur für Grafikelemente Balken und Linien: Merkmal der Serien-Dimension^305^^^string^ -81^Y: Label-Abstand^labelOffset_y^^px^1^ ^0^1^21^Label-Abstand von Achse^602^^^integer^ +80^Serienfarbe^fill^ ^ ^1^ ^0^1^22^Nur für Grafikelemente Balken und Linien: Merkmal der Serien-Dimension^305^^^string^ +81^Y: Label-Abstand^labelOffset_y^^^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^ 83^Y: Schriftgröße^tickSize_y^^ ^1^ ^0^1^21^Größe der Achsenwerte^603^^^integer^ 84^Y: Schriftneigung^tickRotate_y^^ ^1^ ^0^1^21^Neigungswinkel der Achsenwerte^604^^^integer^ diff --git a/src-modules/module/viz/schluesseltabellen/viz_property_group.unl b/src-modules/module/viz/schluesseltabellen/viz_property_group.unl index 6ef7632..da4119f 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_property_group.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_property_group.unl @@ -6,5 +6,5 @@ 15^SCALES^Skalen-Typen^100^ 18^TICKS_LABELS_X^X-Achsen-Beschriftung^60^ 19^TICKFORMATTING^Zahlen-, Datumsformat^90^ -20^COLOR^Farben^40^ 21^TICKS_LABELS_Y^Y-Achsen-Beschriftung^50^ +22^SERIES^Seriendimension^65^ diff --git a/src-modules/module/viz/schluesseltabellen/viz_property_group_renderer.unl b/src-modules/module/viz/schluesseltabellen/viz_property_group_renderer.unl index 59b1c77..926a685 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_property_group_renderer.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_property_group_renderer.unl @@ -3,3 +3,4 @@ 3^2^18^x^ 4^2^20^color^ 5^2^21^y^ +6^2^22^color^ diff --git a/src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl b/src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl index 42ce5b4..26f773b 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl @@ -1,5 +1,5 @@ 1^2^2^width^ -2^2^4^background^ +2^2^4^backgroundColor^ 3^2^5^color^ 4^2^7^fontFamily^ 5^2^6^fontSize^ diff --git a/src-modules/module/viz/schluesseltabellen/viz_type.unl b/src-modules/module/viz/schluesseltabellen/viz_type.unl index cf6a0f1..4422046 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_type.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_type.unl @@ -8,4 +8,4 @@ 9^box_y^Boxplot (vertikal)^2^ ^ ^V^ 10^text^Wertelabel^2^ ^ ^^ 11^bar_x_d3^Balken (horizontal)^1^^^H^ -12^sankey^Sankey^1^/superx/xml/js/viz/sankey.js^^H^ +12^sankey^Sankey^1^ ^^H^ diff --git a/src-modules/module/viz/schluesseltabellen/viz_type_property.unl b/src-modules/module/viz/schluesseltabellen/viz_type_property.unl index e4cdd8b..8ed9a80 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_type_property.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_type_property.unl @@ -10,11 +10,10 @@ 17^6^72^1^0^ 20^1^76^0^20^ 22^2^76^0^20^ -24^5^8^0^20^ +24^5^80^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^ diff --git a/superx/xml/30190_html_chart_sankey.xsl b/superx/xml/30190_html_chart_sankey.xsl index 953ecfa..3b48832 100644 --- a/superx/xml/30190_html_chart_sankey.xsl +++ b/superx/xml/30190_html_chart_sankey.xsl @@ -18,10 +18,9 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util - + - - + @@ -74,9 +73,9 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util - + + diff --git a/superx/xml/js/viz/viz_functions.js b/superx/xml/js/viz/viz_functions.js index bdf0345..ec22a97 100644 --- a/superx/xml/js/viz/viz_functions.js +++ b/superx/xml/js/viz/viz_functions.js @@ -164,11 +164,12 @@ this.datasource=datasource; this.elementTypeProperties=new Array(); } -function usedVizProperty(name,vizPropertyVariablename,propertyValue ) +function usedVizProperty(name,vizPropertyVariablename,propertyValue,propUnit ) { this.name=name; this.vizPropertyVariablename=vizPropertyVariablename; this.propertyValue=propertyValue; +this.propUnit=propUnit; } function usedVizTypeProperty(nr,vizTypePropertyUniquename,caption,propertyValue ) @@ -256,6 +257,7 @@ var isDefault=false; function selectionProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction) { + /*OBSOLETE*/ this.name=name; this.caption=caption; this.isDynamic=isDynamic; @@ -305,7 +307,7 @@ function renderChartSVGFromModel(currentChartModel,targetDiv) { switch (currentChartModel.renderer) { case "plot": - renderChartSVGWithPlot(currentChartModel,targetDiv); + renderChartSVGfromModelWithPlot(currentChartModel,targetDiv); break; case "d3js": renderChartSVGWithD3(currentChartModel,targetDiv); @@ -319,7 +321,7 @@ function renderChartSVGFromModel(currentChartModel,targetDiv) { } return true; } -function renderChartSVGWithPlot (currentChartModel,targetDiv) +function renderChartSVGfromModelWithPlot (currentChartModel,targetDiv) { console.log("using Plot"); var myOptions=new Object; @@ -352,11 +354,14 @@ function renderChartSVGWithPlot (currentChartModel,targetDiv) myOptions["marks"].push(marksArray); var svgPlot=Plot.plot(myOptions); + var srcPlot=JSON.stringify(myOptions); + document.getElementById("plotCodeTextArea").innerHTML=srcPlot; document.getElementById(targetDiv).innerHTML=""; document.getElementById(targetDiv).appendChild(svgPlot); //return svgPlot; } + function renderChartSVGWithD3 (currentChartModel,targetDiv) { console.log("using D3JS"); @@ -406,7 +411,7 @@ function updateChartModel() { if(getCommonChartProperty(commonChartProperties[k].name)!="") { - var myProp=new usedVizProperty(commonChartProperties[k].name,commonChartProperties[k].variableName,getCommonChartProperty(commonChartProperties[k].name)); + var myProp=new usedVizProperty(commonChartProperties[k].name,commonChartProperties[k].variableName,getCommonChartProperty(commonChartProperties[k].name),commonChartProperties[k].propUnit); myChartPropertiesUsed.push(myProp); } } @@ -451,7 +456,7 @@ function getPlotOptionsObj(chartPropertiesUsed) && commonChartProperties[k].variableName!="" && getChartPropertyValue(chartPropertiesUsed,commonChartProperties[k].name)!="") { - textDelim=(commonChartProperties[k].propValueType=="string")?"\"":""; + textDelim=(commonChartProperties[k].propValueType=="string" || commonChartProperties[k].propUnit!="")?"\"":""; optionsString+=",\""+commonChartProperties[k].variableName+"\":"+textDelim+getChartPropertyValue(chartPropertiesUsed,commonChartProperties[k].name)+textDelim; } } @@ -695,10 +700,17 @@ function removeChartElementConfig() } } -function resetChartPropertiesForm() +function resetChartPropertiesForm(chosenRenderer) { myChartModel=new chartModel(1,"",document.getElementById("fldVizRenderer").value,rsTableMetaData); renderChart('chartDiv',myChartModel); + //Show Plot Code if renderer =plot: + var myDiv=document.getElementById("plotCodeDiv"); + if(chosenRenderer=="plot") + myDiv.style.display="block"; + else + myDiv.style.display="none"; + return true; } function getPossibleVizTypes(renderer) @@ -830,7 +842,74 @@ function prepareLineForm_alt() return chartProperties; } */ -function fillDataSelectionForm(formDiv) +function fillDataTransformationForm(formDiv,tableId) +{ + /* OBSOLETE*/ +formDivElem=document.getElementById(formDiv); +if(formDivElem.style.display=="none") +{ + while (formDivElem.firstChild) { + formDivElem.removeChild(formDivElem.firstChild); + } + + const elementDivBox = document.createElement("div"); + + for(var k=0;k < rsColumnMetaData[tableId].length;k++) + { + const fieldElem = document.createElement("div"); + fieldElem.classList.add("field"); + fieldElem.classList.add("is-grouped"); + //label: + const labelElem = document.createElement("div"); + labelElem.classList.add("label-container"); + const label = document.createElement("label"); + label.classList.add("label"); + label.classList.add("is-required"); + label.classList.add("is-small"); + label.classList.add("has-tooltip-right"); + //label.setAttribute("data-tooltip",dimensionProperty.explanation); + + const textnode = document.createTextNode(rsColumnMetaData[tableId][k].colcaption); + label.appendChild(textnode); + labelElem.appendChild(label); + fieldElem.appendChild(labelElem); + //TODO: Funktionen + //input: + const inputFieldElem = document.createElement("div"); + inputFieldElem.classList.add("field"); + inputFieldElem.classList.add("is-active"); + const inputSelectElem = document.createElement("div"); + inputSelectElem.classList.add("select"); + inputSelectElem.classList.add("is-small"); + //inputSelectElem.classList.add("is-fullwidth"); + + const selElem = document.createElement("select"); + selElem.name=rsColumnMetaData[tableId][k].name+"_fn"; + selElem.id=rsColumnMetaData[tableId][k].name+"_fn"; + var dimFunctions=[]; + var myFunction= new dimFunction(0,"Wort 1 ans Ende","switchWord1and2ff",false); + dimFunctions[0]=myFunction; + var myFunction= new dimFunction(1,"Nur Wort 1","justWord1",false); + dimFunctions[1]=myFunction; + var myFunction= new dimFunction(2,"Abkürzen (20)","abbreviate",false); + dimFunctions[2]=myFunction; + + fillSelectOptions(selElem,dimFunctions,false); + inputSelectElem.appendChild(selElem); + inputFieldElem.appendChild(inputSelectElem); + fieldElem.appendChild(inputFieldElem); + elementDivBox.appendChild(fieldElem); + + } + formDivElem.appendChild(elementDivBox); + formDivElem.style.display="block"; +} +else + formDivElem.style.display="none"; + +} + +function fillDataSelectionForm(formDiv,tableId) { /* OBSOLETE*/ formDivElem=document.getElementById(formDiv); @@ -2308,7 +2387,9 @@ function getChartPropertyValue(propArray,propName) if(propArray[i].name==propName ) { propertyValue=propArray[i].propertyValue; - } + if(propArray[i].propUnit && propArray[i].propUnit !="") + propertyValue+=propArray[i].propUnit; + } } return propertyValue; @@ -2418,6 +2499,16 @@ updateChartModelCode(myChartModel); } +function showPlotCode() +{ +var mySrcDiv=document.getElementById("plotCodeTextAreaDiv"); + if(mySrcDiv.style.display=="block") + mySrcDiv.style.display="none"; + else + mySrcDiv.style.display="block"; + +} + function updateChartModelCode(myChartModel) { var myCodeDiv= document.getElementById("chartModelSrcCode"); diff --git a/superx/xml/viz_html_chart.xsl b/superx/xml/viz_html_chart.xsl index d44e5c8..fbac938 100644 --- a/superx/xml/viz_html_chart.xsl +++ b/superx/xml/viz_html_chart.xsl @@ -79,7 +79,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util