Browse Source

Bugfixes Serienfarbe, FontSize #3

viz_worldmap
Daniel Quathamer 2 years ago
parent
commit
908c18aaad
  1. 40
      src-modules/module/viz/schluesseltabellen/viz_property.unl
  2. 2
      src-modules/module/viz/schluesseltabellen/viz_property_group.unl
  3. 1
      src-modules/module/viz/schluesseltabellen/viz_property_group_renderer.unl
  4. 2
      src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl
  5. 2
      src-modules/module/viz/schluesseltabellen/viz_type.unl
  6. 3
      src-modules/module/viz/schluesseltabellen/viz_type_property.unl
  7. 13
      superx/xml/30190_html_chart_sankey.xsl
  8. 105
      superx/xml/js/viz/viz_functions.js
  9. 39
      superx/xml/viz_html_chart.xsl

40
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^ 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^px^1^ ^0^4^10^Diagrammsbreite (exkl.Skalenbeschriftung)^102^100^2000^integer^ 2^Grafik-Breite^width^650^ ^1^ ^0^4^10^Diagrammsbreite (exkl.Skalenbeschriftung)^102^100^2000^integer^
3^Werte-Label-Breite^valueLabelWidth^^px^1^^0^1^18^^^^^integer^ 3^Werte-Label-Breite^valueLabelWidth^^^1^^0^1^18^^^^^integer^
4^Hintergrundfarbe^backgroundColor^#ffffff^ ^1^#ffffeb^0^3^20^Hintergrundfarbe der Grafik^201^^^string^ 4^Hintergrundfarbe^backgroundColor^#ffffff^ ^1^#ffffeb^0^3^11^Hintergrundfarbe der Grafik^201^^^string^
5^Vordergrundfarbe^color^^ ^1^black^0^3^20^Farbe von Text- und Diagrammelementen^202^^^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^ 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^ 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^ 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^ 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^ 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^ 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^ 16^Außenrand links^marginLeft^100^^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^ 17^Außenrand rechts^marginRight^ ^^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^ 18^Außenrand oben^marginTop^ ^^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^ 19^Außenrand unten^marginBottom^ ^^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^ 20^Innenrand oben^insetTop^ ^^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^ 21^Innenrand unten^insetBottom^ ^^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^ 22^Innenrand links^insetLeft^ ^^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^ 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^20^Nur für Grafikelemente Balken und Linien: Farbtonschema für Serien.^303^^^string^ 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^ 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^ 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^ 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^ 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^ 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^ 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^ 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^ 70^X-Achse^x^^ ^1^ ^0^1^5^ ^608^^^string^
72^Y-Achse^y^^ ^1^ ^0^1^6^ ^608^^^string^ 72^Y-Achse^y^^ ^1^ ^0^1^6^ ^608^^^string^
73^Maß 1^measure1^^ ^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^ 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^ 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^ 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^^px^1^ ^0^1^21^Label-Abstand von Achse^602^^^integer^ 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^ 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^ 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^ 84^Y: Schriftneigung^tickRotate_y^^ ^1^ ^0^1^21^Neigungswinkel der Achsenwerte^604^^^integer^

2
src-modules/module/viz/schluesseltabellen/viz_property_group.unl

@ -6,5 +6,5 @@
15^SCALES^Skalen-Typen^100^ 15^SCALES^Skalen-Typen^100^
18^TICKS_LABELS_X^X-Achsen-Beschriftung^60^ 18^TICKS_LABELS_X^X-Achsen-Beschriftung^60^
19^TICKFORMATTING^Zahlen-, Datumsformat^90^ 19^TICKFORMATTING^Zahlen-, Datumsformat^90^
20^COLOR^Farben^40^
21^TICKS_LABELS_Y^Y-Achsen-Beschriftung^50^ 21^TICKS_LABELS_Y^Y-Achsen-Beschriftung^50^
22^SERIES^Seriendimension^65^

1
src-modules/module/viz/schluesseltabellen/viz_property_group_renderer.unl

@ -3,3 +3,4 @@
3^2^18^x^ 3^2^18^x^
4^2^20^color^ 4^2^20^color^
5^2^21^y^ 5^2^21^y^
6^2^22^color^

2
src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl

@ -1,5 +1,5 @@
1^2^2^width^ 1^2^2^width^
2^2^4^background^ 2^2^4^backgroundColor^
3^2^5^color^ 3^2^5^color^
4^2^7^fontFamily^ 4^2^7^fontFamily^
5^2^6^fontSize^ 5^2^6^fontSize^

2
src-modules/module/viz/schluesseltabellen/viz_type.unl

@ -8,4 +8,4 @@
9^box_y^Boxplot (vertikal)^2^ ^ ^V^ 9^box_y^Boxplot (vertikal)^2^ ^ ^V^
10^text^Wertelabel^2^ ^ ^^ 10^text^Wertelabel^2^ ^ ^^
11^bar_x_d3^Balken (horizontal)^1^^^H^ 11^bar_x_d3^Balken (horizontal)^1^^^H^
12^sankey^Sankey^1^/superx/xml/js/viz/sankey.js^^H^ 12^sankey^Sankey^1^ ^^H^

3
src-modules/module/viz/schluesseltabellen/viz_type_property.unl

@ -10,11 +10,10 @@
17^6^72^1^0^ 17^6^72^1^0^
20^1^76^0^20^ 20^1^76^0^20^
22^2^76^0^20^ 22^2^76^0^20^
24^5^8^0^20^ 24^5^80^0^20^
26^3^76^0^20^ 26^3^76^0^20^
27^6^88^0^0^ 27^6^88^0^0^
29^6^89^0^0^ 29^6^89^0^0^
30^5^89^0^0^
33^7^70^1^0^ 33^7^70^1^0^
34^7^72^0^0^ 34^7^72^0^0^
35^9^70^0^0^ 35^9^70^0^0^

13
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
<!-- wichtig für DOJO!--> <!-- wichtig für DOJO!-->
<xsl:output method="xml" media-type="text/html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" <xsl:output method="xml" media-type="text/html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="DTD/xhtml1-strict.dtd" cdata-section-elements="script style" indent="yes" encoding="UTF-8"/> doctype-system="DTD/xhtml1-strict.dtd" cdata-section-elements="script style" indent="yes" encoding="UTF-8"/>
<xsl:variable name="defaultRenderer" select="'d3jsv3'" /> <xsl:variable name="defaultRenderer" select="'d3js'" />
<xsl:variable name="availableRendererPlot" select="'false'" /> <xsl:variable name="availableRendererPlot" select="'false'" />
<xsl:variable name="availableRendererD3" select="'false'" /> <xsl:variable name="availableRendererD3" select="'true'" />
<xsl:variable name="availableRendererD3V3" select="'true'" />
<xsl:template match="/"> <xsl:template match="/">
<xsl:call-template name="table"/> <xsl:call-template name="table"/>
@ -74,9 +73,9 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
</xsl:template> </xsl:template>
<!-- end main --> <!-- end main -->
<xsl:template name="importVizJavascriptLibs"> <xsl:template name="importVizJavascriptLibs">
<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.v3.min.js" /> <script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.min.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/viz_functions.js" /> <script language="Javascript" type="text/javascript" src="../xml/js/viz/plot.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/sankey_v3.js" /> <script language="Javascript" type="module" src="../xml/js/viz/d3-sankey.js" />
<script language="Javascript" type="text/javascript"> <script language="Javascript" type="text/javascript">
<xsl:text><![CDATA[ <xsl:text><![CDATA[
function createViewer() function createViewer()
@ -87,6 +86,8 @@ renderChart('chartDiv2',myChartModel);
} }
]]></xsl:text> ]]></xsl:text>
</script> </script>
<xsl:call-template name="importVizJavascriptLibs" />
</xsl:template> </xsl:template>
<xsl:template name="viz_canvas"> <xsl:template name="viz_canvas">

105
superx/xml/js/viz/viz_functions.js

@ -164,11 +164,12 @@ this.datasource=datasource;
this.elementTypeProperties=new Array(); this.elementTypeProperties=new Array();
} }
function usedVizProperty(name,vizPropertyVariablename,propertyValue ) function usedVizProperty(name,vizPropertyVariablename,propertyValue,propUnit )
{ {
this.name=name; this.name=name;
this.vizPropertyVariablename=vizPropertyVariablename; this.vizPropertyVariablename=vizPropertyVariablename;
this.propertyValue=propertyValue; this.propertyValue=propertyValue;
this.propUnit=propUnit;
} }
function usedVizTypeProperty(nr,vizTypePropertyUniquename,caption,propertyValue ) function usedVizTypeProperty(nr,vizTypePropertyUniquename,caption,propertyValue )
@ -256,6 +257,7 @@ var isDefault=false;
function selectionProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction) function selectionProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction)
{ {
/*OBSOLETE*/
this.name=name; this.name=name;
this.caption=caption; this.caption=caption;
this.isDynamic=isDynamic; this.isDynamic=isDynamic;
@ -305,7 +307,7 @@ function renderChartSVGFromModel(currentChartModel,targetDiv) {
switch (currentChartModel.renderer) { switch (currentChartModel.renderer) {
case "plot": case "plot":
renderChartSVGWithPlot(currentChartModel,targetDiv); renderChartSVGfromModelWithPlot(currentChartModel,targetDiv);
break; break;
case "d3js": case "d3js":
renderChartSVGWithD3(currentChartModel,targetDiv); renderChartSVGWithD3(currentChartModel,targetDiv);
@ -319,7 +321,7 @@ function renderChartSVGFromModel(currentChartModel,targetDiv) {
} }
return true; return true;
} }
function renderChartSVGWithPlot (currentChartModel,targetDiv) function renderChartSVGfromModelWithPlot (currentChartModel,targetDiv)
{ {
console.log("using Plot"); console.log("using Plot");
var myOptions=new Object; var myOptions=new Object;
@ -352,11 +354,14 @@ function renderChartSVGWithPlot (currentChartModel,targetDiv)
myOptions["marks"].push(marksArray); myOptions["marks"].push(marksArray);
var svgPlot=Plot.plot(myOptions); var svgPlot=Plot.plot(myOptions);
var srcPlot=JSON.stringify(myOptions);
document.getElementById("plotCodeTextArea").innerHTML=srcPlot;
document.getElementById(targetDiv).innerHTML=""; document.getElementById(targetDiv).innerHTML="";
document.getElementById(targetDiv).appendChild(svgPlot); document.getElementById(targetDiv).appendChild(svgPlot);
//return svgPlot; //return svgPlot;
} }
function renderChartSVGWithD3 (currentChartModel,targetDiv) function renderChartSVGWithD3 (currentChartModel,targetDiv)
{ {
console.log("using D3JS"); console.log("using D3JS");
@ -406,7 +411,7 @@ function updateChartModel()
{ {
if(getCommonChartProperty(commonChartProperties[k].name)!="") 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); myChartPropertiesUsed.push(myProp);
} }
} }
@ -451,7 +456,7 @@ function getPlotOptionsObj(chartPropertiesUsed)
&& commonChartProperties[k].variableName!="" && commonChartProperties[k].variableName!=""
&& getChartPropertyValue(chartPropertiesUsed,commonChartProperties[k].name)!="") && 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; 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); myChartModel=new chartModel(1,"",document.getElementById("fldVizRenderer").value,rsTableMetaData);
renderChart('chartDiv',myChartModel); 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; return true;
} }
function getPossibleVizTypes(renderer) function getPossibleVizTypes(renderer)
@ -830,7 +842,74 @@ function prepareLineForm_alt()
return chartProperties; 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*/ /* OBSOLETE*/
formDivElem=document.getElementById(formDiv); formDivElem=document.getElementById(formDiv);
@ -2308,6 +2387,8 @@ function getChartPropertyValue(propArray,propName)
if(propArray[i].name==propName ) if(propArray[i].name==propName )
{ {
propertyValue=propArray[i].propertyValue; propertyValue=propArray[i].propertyValue;
if(propArray[i].propUnit && propArray[i].propUnit !="")
propertyValue+=propArray[i].propUnit;
} }
} }
@ -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) function updateChartModelCode(myChartModel)
{ {
var myCodeDiv= document.getElementById("chartModelSrcCode"); var myCodeDiv= document.getElementById("chartModelSrcCode");

39
superx/xml/viz_html_chart.xsl

@ -79,7 +79,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<script language="Javascript" type="module" src="../xml/js/viz/d3-sankey.js" /> <script language="Javascript" type="module" src="../xml/js/viz/d3-sankey.js" />
<xsl:for-each select="/ergebnisse/ergebnis/ergebniselement/vizTypes/vizType[@srcpath !='/superx/xml/js/viz/d3.min.js' <xsl:for-each select="/ergebnisse/ergebnis/ergebniselement/vizTypes/vizType[@srcpath !='/superx/xml/js/viz/d3.min.js'
and @srcpath != '/superx/xml/js/viz/plot.js' and @srcpath != '/superx/xml/js/viz/plot.js'
and @srcpath != '/superx/xml/js/viz/sankey.js' and @srcpath != '/superx/xml/js/viz/d3-sankey.js'
and @srcpath != '' and @srcpath != ''
and (@renderer_uniquename='plot' or @renderer_uniquename='d3js') ]"> and (@renderer_uniquename='plot' or @renderer_uniquename='d3js') ]">
<script language="Javascript" type="text/javascript" src="{@srcpath}" /> <script language="Javascript" type="text/javascript" src="{@srcpath}" />
@ -103,6 +103,7 @@ staticValues,
range_from, range_from,
range_to, range_to,
defaultValue, defaultValue,
propUnit,
explanation, explanation,
groupCaption, groupCaption,
groupUniquename, groupUniquename,
@ -120,6 +121,7 @@ this.range_to=range_from;
this.isMandatory=isMandatory; this.isMandatory=isMandatory;
this.inputType=inputType; this.inputType=inputType;
this.defaultValue=defaultValue; this.defaultValue=defaultValue;
this.propUnit=propUnit;
this.explanation=explanation; this.explanation=explanation;
this.groupCaption=groupCaption; this.groupCaption=groupCaption;
this.groupUniquename=groupUniquename; this.groupUniquename=groupUniquename;
@ -178,6 +180,8 @@ var newCommonChartProperty = new commonChartProperty("</xsl:text>
<xsl:text>","</xsl:text> <xsl:text>","</xsl:text>
<xsl:value-of select="@prop_default" /> <xsl:value-of select="@prop_default" />
<xsl:text>","</xsl:text> <xsl:text>","</xsl:text>
<xsl:value-of select="@prop_unit" />
<xsl:text>","</xsl:text>
<xsl:value-of select="@explanation" /> <xsl:value-of select="@explanation" />
<xsl:text>","</xsl:text> <xsl:text>","</xsl:text>
<xsl:value-of select="@group_caption" /> <xsl:value-of select="@group_caption" />
@ -634,7 +638,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
<!-- <!--
<div class="field is-grouped"> <div class="field is-grouped">
<div class="label-container"> <div class="label-container">
<label class="label is-required is-small"><strong>Daten-Auswahl</strong></label> <label class="label is-required is-small"><strong>Daten-Transformation</strong></label>
</div> </div>
<span class="separator">&#160;</span> <span class="separator">&#160;</span>
@ -642,7 +646,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
<a <a
onClick="fillDataSelectionForm('dataSelectionFormDiv');"> onClick="fillDataTransformationForm('dataSelectionFormDiv',0);">
<span class="icon"> <span class="icon">
<img src="../images/icons/more.svg" title="Laden" /> <img src="../images/icons/more.svg" title="Laden" />
</span> </span>
@ -810,12 +814,15 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
<img src="../images/information_grey_liberation.svg" /> <img src="../images/information_grey_liberation.svg" />
</figure> </figure>
</span> </span>
</div> </div>
</div> </div>
</form> </form>
</div>--> </div>
-->
<!--Ende Formular Datenauswahl--> <!--Ende Formular Datenauswahl-->
<span class="separator">&#160;</span> <span class="separator">&#160;</span>
@ -889,7 +896,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
<div class="field is-active"> <div class="field is-active">
<p class="control-new"> <p class="control-new">
<div class="select is-small is-fullwidth"> <div class="select is-small is-fullwidth">
<select class="maskinputPflicht" id="fldVizRenderer" NAME="fldVizRenderer" tabindex="1" onChange="resetChartPropertiesForm();" > <select class="maskinputPflicht" id="fldVizRenderer" NAME="fldVizRenderer" tabindex="1" onChange="resetChartPropertiesForm(this.value);" >
<xsl:if test="$availableRendererPlot='true'"> <xsl:if test="$availableRendererPlot='true'">
<option class="maskinput" value="plot" selected="selected">Observable Plot</option> <option class="maskinput" value="plot" selected="selected">Observable Plot</option>
</xsl:if> </xsl:if>
@ -1009,6 +1016,26 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
<rect x="0" y="0" width="650" height="450" fill="#cccccc"></rect> <rect x="0" y="0" width="650" height="450" fill="#cccccc"></rect>
</svg></div> </svg></div>
</div>
<!--Beginn PlotCode-->
<div class="field is-grouped" id="plotCodeDiv" style="display:block">
<div class="label-container">
<label class="label is-required is-small"><strong>Plot-Code</strong></label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<a onClick="showPlotCode();">
<span class="icon">
<img src="../images/icons/more.svg" title="Laden" />
</span>
</a>
<div id="plotCodeTextAreaDiv" style="display:none">
<textarea id="plotCodeTextArea" name="plotCodeTextArea" class="textarea" placeholder="Plot-Quellcode..." readonly="readonly" disabled="disabled"> <!--cols="100" rows="20"-->
</textarea>
</div>
</div> </div>
</div> </div>
</div><!--Ende Eigenschaften + Vorschau viewBox="0 0 650 450"--> </div><!--Ende Eigenschaften + Vorschau viewBox="0 0 650 450"-->
@ -1110,7 +1137,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
<!--footer (BF nach unten verschoben)--> <!--footer (BF nach unten verschoben)-->
<footer class="card-footer"> <footer class="card-footer">
<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit" onClick="alert('noch nicht implementiert)');">Speichern</button></p> <p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit" onClick="alert('noch nicht implementiert)');">Speichern</button></p>
<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset" onClick="return resetChartPropertiesForm();">Zurücksetzen</button></p> <p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset" onClick="return resetChartPropertiesForm('plot');">Zurücksetzen</button></p>
</footer> </footer>
</xsl:template> </xsl:template>

Loading…
Cancel
Save