SuperX
/
viz
6
0
Fork 0
Code Issues 8 Pull Requests Projects Releases Wiki Activity
Browse Source

Bugfixes Serienfarbe, FontSize #3

viz_worldmap
Daniel Quathamer 2 years ago
parent
f9483e2da1
commit
908c18aaad
9 changed files with 164 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 107
      superx/xml/js/viz/viz_functions.js
  9. 39
      superx/xml/viz_html_chart.xsl

40
src-modules/module/viz/schluesseltabellen/viz_property.unl
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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">

107
superx/xml/js/viz/viz_functions.js
Unescape View File

@ -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,7 +2387,9 @@ 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;
}
} }
return propertyValue; 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) function updateChartModelCode(myChartModel)
{ {
var myCodeDiv= document.getElementById("chartModelSrcCode"); var myCodeDiv= document.getElementById("chartModelSrcCode");

39
superx/xml/viz_html_chart.xsl
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save