Browse Source

Gruppierung Properties, CopyPaste ChartModel #5

viz_worldmap
Daniel Quathamer 2 years ago
parent
commit
3963c0c7d7
  1. 8
      src-modules/module/viz/conf/viz.xml
  2. 28
      src-modules/module/viz/schluesseltabellen/viz_property.unl
  3. 6
      src-modules/module/viz/schluesseltabellen/viz_property_group.unl
  4. 3
      src-modules/module/viz/schluesseltabellen/viz_renderer.unl
  5. 22
      src-modules/module/viz/schluesseltabellen/viz_type.unl
  6. 71
      src-modules/module/viz/schluesseltabellen/viz_type_property.unl
  7. 26
      superx/style/sx_viz_muster.css
  8. 355
      superx/xml/js/viz/viz_functions.js
  9. 213
      superx/xml/viz_html_chart.xsl

8
src-modules/module/viz/conf/viz.xml

@ -19,6 +19,7 @@ rightname="CS_BIA_STANDARDREPORTS_ADMIN[VIZ]" /> @@ -19,6 +19,7 @@ rightname="CS_BIA_STANDARDREPORTS_ADMIN[VIZ]" />
<column name="renderer_id" type="INTEGER" size="4" default="" notnull="false" description="Renderer" isKey="false"/>
<column name="srcpath" type="VARCHAR" size="255" default="" notnull="false" description="Pfad zum Quellcode" isKey="false"/>
<column name="method" type="VARCHAR" size="255" default="" notnull="false" description="Methode" isKey="false"/>
<column name="orientation" type="CHAR" size="1" default="" notnull="false" description="Orientierung" isKey="false"><comment>Grafik horizontal (H) oder vertikal (V)</comment></column>
</columns>
<primaryKeys><rs>
@ -202,6 +203,7 @@ rightname="CS_BIA_STANDARDREPORTS_ADMIN[VIZ]" /> @@ -202,6 +203,7 @@ rightname="CS_BIA_STANDARDREPORTS_ADMIN[VIZ]" />
<column name="viz_type_id" type="INTEGER" size="" default="" notnull="false" description="Diagrammtyp" isKey="true"/>
<column name="viz_property_id" type="INTEGER" size="255" default="" notnull="" description="Eigenschaft der Visualisierung" isKey="true"/>
<column name="is_mandatory" type="SMALLINT" size="255" default="0" notnull="false" description="Pflichteingabe" ><comment>1=ja, 0=nein</comment></column>
<column name="sortnr" type="SMALLINT" size="255" default="0" notnull="false" description="Sortiernr." sortable="true" ><comment></comment></column>
</columns>
<primaryKeys><rs>
@ -529,7 +531,7 @@ mode="full"> @@ -529,7 +531,7 @@ mode="full">
maxRows="1"
mode="full">
<description>In diesem Formular können Sie Diagramme verwalten.</description>
<description>In diesem Formular können Sie Diagrammelemente verwalten.</description>
<filters>
<filter mandatory="true" type="equals">tid</filter>
</filters>
@ -538,15 +540,17 @@ mode="full"> @@ -538,15 +540,17 @@ mode="full">
<customfield name="caption" visibleSize="50" nullFieldValue="" />
<customfield name="uniquename" visibleSize="10" nullFieldValue="" />
<customfield name="renderer_id" nullFieldValue="" visibleSize="30" />
<customfield name="orientation" nullFieldValue="" visibleSize="30" />
<customfield name="Dimensionen und Maße" type="subform" multipart="false" autoUpdate="false"
maxRows="*" table="viz_type_property" parentField="tid" childField="viz_type_id"
orderBy="viz_property_id" allowNew="true"
orderBy="sortnr" allowNew="true"
mode="full">
<field-selection complete="false" />
<customfield name="tid" nullFieldValue="" />
<customfield name="viz_type_id" type="hidden" overrideValue="tid" />
<customfield name="viz_property_id" nullFieldValue="" visibleSize="30" />
<customfield name="is_mandatory" visibleSize="10" nullFieldValue="" />
<customfield name="sortnr" visibleSize="10" nullFieldValue="" />
</customfield>
</form>

28
src-modules/module/viz/schluesseltabellen/viz_property.unl

@ -1,23 +1,23 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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^

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

@ -1,8 +1,8 @@ @@ -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^^

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

@ -1,2 +1,3 @@ @@ -1,2 +1,3 @@
1^d3js^D3JS^
1^d3js^D3JS (V7)^
2^plot^Observable Plot^
3^d3jsv3^D3JS (V3)^

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

@ -1,11 +1,11 @@ @@ -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^

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

@ -1,38 +1,33 @@ @@ -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^

26
superx/style/sx_viz_muster.css

@ -17,9 +17,6 @@ @@ -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 @@ @@ -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 @@ @@ -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%); }

355
superx/xml/js/viz/viz_functions.js

@ -36,6 +36,7 @@ const chartModel={ @@ -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) @@ -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) @@ -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) @@ -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) @@ -144,6 +137,7 @@ function chartModel(id,name,renderer,datasources)
return svgD3;
}
*/
}
@ -307,13 +301,13 @@ this.getValueResultset = function () { @@ -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) { @@ -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() @@ -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) @@ -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="<svg style=\"width:100%;height: auto;\" viewBox=\"0 0 800 600\" width=\"800\" height=\"600\"></svg>";
//"<rect x=\"0\" y=\"0\" width=\"800\" height=\"450\" fill=\"#cccccc\"></rect>";
document.getElementById(chartDiv).innerHTML="<svg style=\"width:100%;height: auto;\" viewBox=\"0 0 800 600\" width=\"800\" height=\"600\">"+
"<rect x=\"0\" y=\"0\" width=\"800\" height=\"450\" fill=\"#cccccc\"></rect></svg>";
//
}
@ -742,6 +750,7 @@ function showChartPropertiesFormDiv(formDiv,formElementsDiv,renderer) @@ -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; @@ -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 @@ -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 @@ -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++) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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"); @@ -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++) @@ -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<rowcount;row++)
{
if(data[row])
@ -1562,23 +1673,15 @@ var myDiv=document.getElementById(chartDivElem); @@ -1562,23 +1673,15 @@ var myDiv=document.getElementById(chartDivElem);
myDiv.style.display="block";
}
function renderChartElementWithPlot(chartElem)
function renderChartElementWithPlot(chartElem,targetDiv)
{
var plotMark=new Object;
if(chartElem)
{
var chartType=chartElem.vizTypeUniquename;
var myDatasourceRs=rs[chartElem.datasource];
var optionString="{\"dummy\": \"1\"";
for(var k=0;k<chartElem.elementTypeProperties.length;k++)
{
if(chartElem.elementTypeProperties[k].propertyValue!="")
{
optionString+=",\""+chartElem.elementTypeProperties[k].vizTypePropertyUniquename+"\":\""+chartElem.elementTypeProperties[k].propertyValue+"\"";
}
}
optionString+=" }";
var optionString=prepareChartPropertiesForPlotMark(chartType,chartElem);
console.log("Mark-option for "+chartType+":"+ optionString);
var markOptions=JSON.parse(optionString);
@ -1624,10 +1727,58 @@ switch (chartType) @@ -1624,10 +1727,58 @@ switch (chartType)
}
return plotMark;
}
function renderChartElementWithD3(chartElem)
function prepareChartPropertiesForPlotMark(chartType,chartElem)
{
var orientation=getVizTypeOrientation(chartElem.vizTypeUniquename);
var optionString="{\"dummy\": \"1\"";
for(var k=0;k<chartElem.elementTypeProperties.length;k++)
{
var propUniquename=chartElem.elementTypeProperties[k].vizTypePropertyUniquename;
var propValue=chartElem.elementTypeProperties[k].propertyValue;
if(propValue!="")
{
optionString+=",\""+propUniquename+"\":\""+propValue+"\"";
if(propUniquename=="stroke" && chartType!="line")
{
//Seriendimension hat immer fill
optionString+=",\"fill\":\""+propValue+"\"";
//optionString+=",\"sort\":\""+propValue+"\"";
}
if(propUniquename=="text")
{
//Wertelabel
optionString+=",\"textAnchor\":\"start\"";
}
if(propUniquename=="x" && orientation=="V")
{
//Vertikale Diagramme sortieren immer nach X-Achse
optionString+=",\"sort\":\""+propValue+"\"";
}
if(propUniquename=="y" && orientation=="H")
{
//Horizontale Diagramme sortieren immer nach Y-Achse
optionString+=",\"sort\":\""+propValue+"\"";
}
}
}
optionString+=" }";
return optionString;
}
function getVizTypeOrientation(vizTypeUniquename)
{
var orientation="";
for(var k=0;k<vizTypes.length;k++)
{
if(vizTypes[k].uniquename==vizTypeUniquename)
orientation=vizTypes[k].orientation;
}
return orientation;
}
function renderChartElementWithD3(chartElem,targetDiv)
{
var mySvg= d3.select("#chartDiv").selectAll("svg");//.append("svg");
var mySvg= d3.select("#"+targetDiv).selectAll("svg");//.append("svg");
if(chartElem)
{
var chartType=chartElem.vizTypeUniquename;
@ -1637,14 +1788,14 @@ console.log("Mark-option for "+chartType); @@ -1637,14 +1788,14 @@ console.log("Mark-option for "+chartType);
switch (chartType)
{
case "bar_x_d3":
makeBarX_d3(mySvg,data,chartElem);
mySvg=makeBarX_d3(mySvg,data,chartElem);
break;
default:
alert("Unknown chart type");
break;
}
}
//return mySvg;
return mySvg;
}
function renderChartElementWithD3V3(chartElem,targetDiv)
{
@ -1783,7 +1934,8 @@ function makeBarX_d3(svg,data,chartElem) @@ -1783,7 +1934,8 @@ function makeBarX_d3(svg,data,chartElem)
.attr("dy", "0.35em")
.attr("text-anchor","end")
.text(d => d.dimension1);
//return bar;
return bar;
}
function makeLine_alt(svg,data) {
@ -1842,7 +1994,7 @@ function makeSample() @@ -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 @@ -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)

213
superx/xml/viz_html_chart.xsl

@ -77,7 +77,10 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util @@ -77,7 +77,10 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<xsl:template name="importVizJavascriptLibs">
<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.min.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/plot.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']">
<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 != ''
and (@renderer_uniquename='plot' or @renderer_uniquename='d3js') ]">
<script language="Javascript" type="text/javascript" src="{@srcpath}" />
</xsl:for-each>
</xsl:template>
@ -213,11 +216,12 @@ commonChartProperties.push(newCommonChartProperty); @@ -213,11 +216,12 @@ commonChartProperties.push(newCommonChartProperty);
</xsl:text>-->
<xsl:text>
function vizType(uniquename,caption,rendererUniquename)
function vizType(uniquename,caption,rendererUniquename,orientation)
{
this.caption=caption;
this.uniquename=uniquename;
this.rendererUniquename=rendererUniquename;
this.rendererUniquename=rendererUniquename,
this.orientation=orientation;
}
var vizTypes=[];
@ -230,6 +234,8 @@ var newVizType = new vizType("</xsl:text> @@ -230,6 +234,8 @@ var newVizType = new vizType("</xsl:text>
<xsl:value-of select="@caption" />
<xsl:text>","</xsl:text>
<xsl:value-of select="@renderer_uniquename" />
<xsl:text>","</xsl:text>
<xsl:value-of select="@orientation" />
<xsl:text>");
vizTypes.push(newVizType);
</xsl:text>
@ -323,13 +329,13 @@ vizTypeProperties.push(newVizTypeProperty); @@ -323,13 +329,13 @@ vizTypeProperties.push(newVizTypeProperty);
<div class="tabs is-left is-small" id="viznav">
<ul>
<li data-target="viznav-tab1" id="1">
<a onclick="showVizNavTab(1);"><span>Diagramm-Daten</span></a>
<a onclick="showVizNavTab(1);"><span>Grafikdaten</span></a>
</li>
<li data-target="viznav-tab2" id="2">
<a onclick="updateChartModel();renderChart('chartDiv',myChartModel);showVizNavTab(2);"><span>Diagramm-Layout</span></a>
<a onclick="updateChartModel();renderChart('chartDiv',myChartModel);showVizNavTab(2);"><span>Grafiklayout</span></a>
</li>
<li data-target="viznav-tab3" id="3">
<a onclick="showVizNavTab(3);"><span>Diagramm-Nutzung</span></a>
<a onclick="showVizNavTab(3);"><span>Grafiknutzung</span></a>
</li>
</ul>
</div>
@ -337,15 +343,17 @@ vizTypeProperties.push(newVizTypeProperty); @@ -337,15 +343,17 @@ vizTypeProperties.push(newVizTypeProperty);
<div class="tab-content">
<!-- tab-1-->
<div class="viznav-tab1" id="tab-1" style="display:block"> <!--Diagramm-Daten-->
<xsl:call-template name="diagrammdaten" />
<xsl:call-template name="grafikdaten" />
</div>
<div class="viznav-tab2" id="tab-2" style="display:none"> <!--Diagramm-Layout-->
<xsl:call-template name="diagrammlayout" />
<xsl:call-template name="grafiklayout" />
</div>
<div class="viznav-tab3" id="tab-3" style="display:none"> <!--Diagramm-Nutzung-->
<xsl:call-template name="diagrammnutzung" />
<xsl:call-template name="grafiknutzung" />
</div>
@ -505,6 +513,10 @@ function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</x @@ -505,6 +513,10 @@ function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</x
rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]=new Array();
rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRowMetaData('</xsl:text>
<xsl:value-of select="$tableId"/><xsl:text>',</xsl:text>
<xsl:value-of select="0"/>
<xsl:text>,'rownr','Zeilennr.',0,4));
</xsl:text>
@ -539,7 +551,7 @@ rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(ne @@ -539,7 +551,7 @@ rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(ne
<xsl:value-of select="position()"/>
</xsl:variable>
<xsl:text>
rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>][</xsl:text><xsl:value-of select="number($colnr)-1"/><xsl:text>].coltype=</xsl:text><xsl:value-of select="@typ"/>
rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>][</xsl:text><xsl:value-of select="number($colnr)"/><xsl:text>].coltype=</xsl:text><xsl:value-of select="@typ"/>
<xsl:text>;
</xsl:text>
</xsl:for-each>
@ -572,7 +584,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs @@ -572,7 +584,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
</script>
</xsl:template>
<xsl:template name="diagrammdaten">
<xsl:template name="grafikdaten">
<xsl:for-each select="ergebnis/ergebniselement">
<p class="title is-5"><xsl:value-of select="../maskenname" /></p>
@ -588,19 +600,13 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs @@ -588,19 +600,13 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
<xsl:variable name="tableId"><xsl:value-of select="@ordnr"/></xsl:variable>
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong><xsl:text>Daten-Tabelle </xsl:text><xsl:value-of select="../maskenname"/></strong></label>
<label class="label is-required is-small"><strong>Datentabelle</strong></label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<!--<button class="button is-small is-rounded is-white is-outlined"
onClick="showDataTable('dataDivTable',rs,rsMetaData,10);">
<span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" />
</span>
</button>-->
<a>
<xsl:attribute name="onClick">
<xsl:text>showDataTable('dataDivTable</xsl:text>
@ -619,7 +625,6 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs @@ -619,7 +625,6 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
</div>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
</xsl:for-each>
@ -836,7 +841,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs @@ -836,7 +841,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
<div id="selectionResultPreviewTable" style="display:none"></div>
</div>
-->
<!--footer BF: nach unten verschoben-->
<!--footer-->
<footer class="card-footer">
<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" onclick="selectionResultPreview('selectionResultPreviewTable');">Daten-Vorschau</button></p>-->
<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit">Speichern</button></p>
@ -845,39 +850,39 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs @@ -845,39 +850,39 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
</xsl:template>
<xsl:template name="diagrammlayout">
<xsl:template name="grafiklayout">
<!--Formular Allg. Layoutmerkmale-->
<div id="chartProperties"> <!--class="section">-->
<form name="chartPropertiesForm">
<div class="columns">
<div class="column is-one-quarter">
<p class="bd-notification is-primary">
Diagramm
</p>
<div class="column is-four-fifth">
<!--<p><span class="button is-link is-outlined is-small" onClick="updateChartModel();renderChart('chartDiv',myChartModel);">Erzeugen</span></p>-->
</div>
<div class="column is-half">
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small">Name</label>
<label class="label is-required is-small"><strong>Grafiktitel</strong></label>
</div>
<div class="field is-active">
<p class="control-new">
<div class="select is-small is-fullwidth">
<textarea class="maskinput" id="chartName" name="chartName" rows="3" cols="20" onChange="updateChartModel();renderChart('chartDiv',myChartModel);"/>
<div class="chartName">
<textarea class="textarea is-small" id="chartName" name="chartName" rows="2" cols="20" onChange="updateChartModel();renderChart('chartDiv',myChartModel);"/>
</div>
</p>
</div>
<xsl:call-template name="Infobutton" />
</div>
</div>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<div class="column">
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small">Renderer</label>
<label class="label is-required is-small"><strong>Grafiktool</strong></label>
</div>
<div class="field is-active">
@ -904,63 +909,102 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs @@ -904,63 +909,102 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
</div>
</div>
<!-- Beginn Eigenschaften+ Vorschau-->
<!-- Beginn Grafikelemente+ Vorschau-->
<div class="columns">
<div class="column is-one-third">
<div class="field is-grouped">
<div class="column is-four-fifth">
<!-- Box Grafikelemente -->
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>Layoutmerkmale</strong></label>
<label class="label is-required is-small"><strong>Grafikelemente</strong></label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<a
onClick="showChartPropertiesFormDiv('generalChartPropertiesFormDiv','generalChartPropertiesFormElementsDiv',document.getElementById('fldVizRenderer').value);">
<a onClick="showChartPropertiesFormDiv('ChartElementsDiv','ChartElementListDiv',document.getElementById('fldVizRenderer').value);">
<span class="icon">
<img src="../images/icons/more.svg" title="Laden" />
</span>
</a>
</a>
</div>
<div id="generalChartPropertiesFormDiv" style="display:none">
<div id="generalChartPropertiesFormElementsDiv"> </div>
</div>
<!-- Box Diagrammelemente -->
<div id="ChartElementsDiv" style="display:none" class="box">
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small">Grafikelemente-Set</label>
</div>
<!--<div id="ChartElementListDiv"></div>-->
<div id="ChartElementListFooterDiv"><!--Elemente:--> <input class="is-small" type="text" size="1" name="vizElementCounter" id="vizElementCounter" value="0" readonly="readonly" style="background-color:#cccccc;"/>
<a onClick="createChartElementConfig1Form(document.getElementById('fldVizRenderer').value,null)">
<img src="../images/plus-circled.svg" width="12" height="12" title="Neues Element anlegen" />
</a>
<span class="separator">&#160;</span>
<a onClick="removeChartElementConfig()">
<img src="../images/minus-circled.svg" width="12" height="12" title="Letztes Element entfernen" />
</a>
</div>
</div>
<div id="ChartElementConfig1Div"> </div>
<div id="ChartElementConfig2Div"> </div>
</div> <!--Ende Grafikelemente-->
<!--Beginn Layoutmerkmale-->
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>Diagrammelemente</strong></label>
<label class="label is-required is-small"><strong>Layoutmerkmale</strong></label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<a onClick="showChartPropertiesFormDiv('generalChartPropertiesFormDiv','generalChartPropertiesFormElementsDiv',document.getElementById('fldVizRenderer').value);">
<span class="icon">
<img src="../images/icons/more.svg" title="Laden" />
</span>
</a>
</div>
<div id="generalChartPropertiesFormDiv" style="display:none">
<div id="generalChartPropertiesFormElementsDiv"> </div>
</div>
<a
onClick="showChartPropertiesFormDiv('ChartElementsDiv','ChartElementListDiv',document.getElementById('fldVizRenderer').value);">
<!--Beginn Quellcode-->
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>Quellcode</strong></label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<a onClick="showChartModelCode();">
<span class="icon">
<img src="../images/icons/more.svg" title="Laden" />
</span>
</a>
</div>
<div id="ChartElementsDiv" style="display:none">
<div id="ChartElementListDiv">
</div>
<div id="ChartElementListFooterDiv">
Elemente: <input class="is-small" type="text" size="1" name="vizElementCounter" id="vizElementCounter" value="0" readonly="readonly" style="background-color:#cccccc;"/>
<a onClick="createChartElementConfig1Form(document.getElementById('fldVizRenderer').value,null)"><img src="../images/plus-circled.svg" width="12" height="12" title="Neues Element anlegen" /></a>
<span class="separator">&#160;</span><a onClick="removeChartElementConfig()"><img src="../images/minus-circled.svg" width="12" height="12" title="Letztes Element entfernen" /></a>
</div>
<div id="ChartElementConfig1Div"> </div>
<div id="ChartElementConfig2Div"> </div>
</div>
</div> <!-- Ende der Spalte Eigenschaften -->
<div id="chartModelsrcDiv"> <!--class="section">-->
<div id="chartModelsrc" style="display:none">
<textarea id="chartModelSrcCode" name="chartModelSrcCode" class="textarea" placeholder="Quellcode..."> <!--cols="100" rows="20"--></textarea>
<a class="button" onClick="copySrcCode('chartModelSrcCode');">Kopieren</a>
<span class="separator">&#160;</span>
<a class="button" onClick="loadChartModelCode('chartModelSrcCode','chartDiv');">Laden</a>
</div>
</div>
</div>
<div class="column">
<p class="bd-notification is-fojeisj">Vorschau</p>
<div class="label-container">
<label class="label is-required is-small"><strong>Grafikvorschau</strong></label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<div id="chartCanvas">
<div id="chartDiv">
<svg>
@ -1072,11 +1116,11 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs @@ -1072,11 +1116,11 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
</footer>
</xsl:template>
<xsl:template name="diagrammnutzung">
<xsl:template name="grafiknutzung">
<!-- Aufruf/Anzeige Diagramm-Vorschau-->
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>Diagramm-Vorschau</strong></label>
<label class="label is-required is-small"><strong>Grafikvorschau</strong></label>
</div>
<span class="separator">&#160;</span>
@ -1108,19 +1152,13 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs @@ -1108,19 +1152,13 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
<!-- Aufruf/Anzeige SVG-Quellcode-->
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>Diagramm-Code (svg)</strong></label>
<label class="label is-required is-small"><strong>Grafikcode (svg)</strong></label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<!--<button class="button is-small is-rounded is-white is-outlined"
onClick="showSrcCode();">
<span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" />
</span>
</button>-->
<a
<a
onClick="showSrcCode(myChartModel.renderer);">
<span class="icon">
<img src="../images/icons/more.svg" title="Laden" />
@ -1134,27 +1172,8 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs @@ -1134,27 +1172,8 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
</div>
</div>
<!--chartModel-->
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>Diagramm-Code (js)</strong></label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<a
onClick="showChartModelCode();">
<span class="icon">
<img src="../images/icons/more.svg" title="Laden" />
</span>
</a>
</div>
<div id="chartModelsrcDiv"> <!--class="section">-->
<div id="chartModelsrc" style="display:none">
<textarea id="chartModelSrcCode" name="chartModelSrcCode" class="textarea" placeholder="Quellcode..."> <!--cols="100" rows="20"--></textarea><!--<button class="sx_buttondiv_submit" onClick="copySrcCode('chartSrc');">Kopieren</button>-->
</div>
</div>
<!--footer (BF eingefügt *** Klärungsbedarf bzgl. notwendiger Buttons)-->
<footer class="card-footer">

Loading…
Cancel
Save