Browse Source

Exclude unused Properties when using renderer d3js #6

viz_worldmap
Daniel Quathamer 2 years ago
parent
commit
2675724827
  1. 102
      src-modules/module/viz/schluesseltabellen/viz_property.unl
  2. 354
      src-modules/module/viz/schluesseltabellen/viz_type_property.unl
  3. 4
      superx/xml/30190_html_chart_sankey.xsl
  4. 242
      superx/xml/js/viz/viz_functions.js
  5. 178
      superx/xml/viz_html_chart.xsl

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

@ -1,53 +1,53 @@
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^ 1^Grafik-Höhe^height^450^ ^1^ ^0^4^10^Diagrammhöhe (exkl. Skalenbeschriftung). Wird nur ausgewertet wenn es keine Y-Achse gibt!^101^^^integer^
2^Grafik-Breite^width^650^ ^1^ ^0^4^10^Diagrammsbreite (exkl.Skalenbeschriftung)^102^100^2000^integer^ 2^Grafik-Breite^width^650^ ^1^ ^0^4^10^Diagrammsbreite (exkl.Skalenbeschriftung)^102^100^2000^integer^
3^Werte-Label-Breite^valueLabelWidth^^^1^^0^1^18^^^^^integer^ 3^Werte-Label-Breite^valueLabelWidth^^^0^^0^1^18^^^^^integer^
4^Hintergrundfarbe^backgroundColor^#ffffff^ ^1^#ffffeb^0^3^11^Hintergrundfarbe der Grafik^201^^^string^ 4^Hintergrundfarbe^backgroundColor^#ffffff^ ^0^#ffffeb^0^3^11^Hintergrundfarbe der Grafik^201^^^string^
5^Schriftfarbe^color^ ^ ^1^black^0^3^11^Farbe von Text- und Diagrammelementen^202^^^string^ 5^Schriftfarbe^color^ ^ ^0^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^0^ ^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^^ ^0^serif|sans-serif|monospace|system_ui^0^2^11^Schriftfamlilie der Skalenbeschriftung^203^^^string^
8^Flächenfarbe^fill_static^ ^ ^1^ ^0^3^11^Nur für Grafikelement Flächen. Füllfarbe.^305^^^string^ 8^Flächenfarbe^fill_static^ ^ ^0^ ^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^^ ^0^ ^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^^ ^0^ ^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^^ ^0^ ^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^^ ^0^left|center|right^0^2^18^Label-Position^601^^^string^
16^Außenrand links^marginLeft^100^^1^ ^0^4^10^Abstand zwischen Grafik und linkem Hintergrundrand^103^^^integer^ 16^Außenrand links^marginLeft^100^^0^ ^0^4^10^Abstand zwischen Grafik und linkem Hintergrundrand^103^^^integer^
17^Außenrand rechts^marginRight^ ^^1^ ^0^4^10^Abstand zwischen Grafik und rechtem Hintergrundrand^104^^^integer^ 17^Außenrand rechts^marginRight^ ^^0^ ^0^4^10^Abstand zwischen Grafik und rechtem Hintergrundrand^104^^^integer^
18^Außenrand oben^marginTop^ ^^1^ ^0^4^10^Abstand zwischen Grafik und oberem Hintergrundrand^105^^^integer^ 18^Außenrand oben^marginTop^ ^^0^ ^0^4^10^Abstand zwischen Grafik und oberem Hintergrundrand^105^^^integer^
19^Außenrand unten^marginBottom^ ^^1^ ^0^4^10^Abstand zwischen Grafik und unterem Hintergrundrand^106^^^integer^ 19^Außenrand unten^marginBottom^ ^^0^ ^0^4^10^Abstand zwischen Grafik und unterem Hintergrundrand^106^^^integer^
20^Innenrand oben^insetTop^ ^^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung oben^107^^^integer^ 20^Innenrand oben^insetTop^ ^^0^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung oben^107^^^integer^
21^Innenrand unten^insetBottom^ ^^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung unten^108^^^integer^ 21^Innenrand unten^insetBottom^ ^^0^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung unten^108^^^integer^
22^Innenrand links^insetLeft^ ^^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung links^109^^^integer^ 22^Innenrand links^insetLeft^ ^^0^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung links^109^^^integer^
23^Innenrand rechts^insetRight^ ^^1^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung rechts^110^^^integer^ 23^Innenrand rechts^insetRight^ ^^0^ ^0^4^10^Abstand zwischen Grafik und Achsenbeschriftung rechts^110^^^integer^
24^Farbschema^scheme^ ^ ^1^blues|greens|greys|oranges|purples|reds^0^2^22^Nur für Grafikelemente Balken und Linien: Farbtonschema für Serien.^303^^^string^ 24^Farbschema^scheme^ ^ ^0^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^^ ^0^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^^ ^0^ ^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^^ ^0^ ^0^1^12^Strichdicke von Diagrammelementen (relevant für Plot.dot, Plot.tickX/Y)^308^^^string^
56^Fortlaufende Skala^continous scales^^ ^1^identity|linear|log|pow|sqrt|symlog^0^2^15^Art der Skalen-Gliederung^401^^^string^ 56^Fortlaufende Skala^continous scales^^ ^0^identity|linear|log|pow|sqrt|symlog^0^2^15^Art der Skalen-Gliederung^401^^^string^
57^Kategorie-Skala^categorical scales^^ ^1^point|band^0^2^15^Art der Skalen-Gliederung^402^^^string^ 57^Kategorie-Skala^categorical scales^^ ^0^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^ 58^Datums-Skala^date scales^^ ^0^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^^ ^0^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^ ^ ^0^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^^^1^ ^0^1^18^Label-Abstand von Achse^602^^^integer^ 63^X: Label-Abstand^labelOffset_x^^^0^ ^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^^ ^0^ ^0^1^18^ ^607^^^string^
69^Maß: Label-Höhe^gridLabelHeight^^^1^ ^0^1^18^ ^608^^^integer^ 69^Maß: Label-Höhe^gridLabelHeight^^^0^ ^0^1^18^ ^608^^^integer^
70^X-Achse^x^^ ^1^ ^0^1^5^ ^608^^^string^ 70^X-Achse^x^^ ^0^ ^0^1^5^ ^608^^^string^
72^Y-Achse^y^^ ^1^ ^0^1^6^ ^608^^^string^ 72^Y-Achse^y^^ ^0^ ^0^1^6^ ^608^^^string^
73^Maß 1^measure1^^ ^1^ ^0^1^6^ ^608^^^string^ 73^Maß 1^measure1^^ ^0^ ^0^1^6^ ^608^^^string^
76^Serien-Dimension^stroke^^ ^1^ ^0^1^5^ ^608^^^string^ 76^Serien-Dimension^stroke^^ ^0^ ^0^1^5^ ^608^^^string^
78^Legende^legend^ ^ ^1^true|false^0^2^22^ ^303^^^boolean^ 78^Legende^legend^ ^ ^0^true|false^0^2^22^ ^303^^^boolean^
79^Beschriftung^text^ ^ ^1^ ^0^1^5^ ^608^^^string^ 79^Beschriftung^text^ ^ ^0^ ^0^1^5^ ^608^^^string^
80^Serienfarbe^fill^ ^ ^1^ ^0^1^22^Nur für Grafikelemente Balken und Linien: Merkmal der Serien-Dimension^305^^^string^ 80^Serienfarbe^fill^ ^ ^0^ ^0^1^22^Nur für Grafikelemente Balken und Linien: Merkmal der Serien-Dimension^305^^^string^
81^Y: Label-Abstand^labelOffset_y^^^1^ ^0^1^21^Label-Abstand von Achse^602^^^integer^ 81^Y: Label-Abstand^labelOffset_y^^^0^ ^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^^ ^0^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^^ ^0^ ^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^^ ^0^ ^0^1^21^Neigungswinkel der Achsenwerte^604^^^integer^
85^Y: Skalierung^ticks_y^^ ^1^ ^0^1^21^Feinheit der Wertegliederung^605^^^integer^ 85^Y: Skalierung^ticks_y^^ ^0^ ^0^1^21^Feinheit der Wertegliederung^605^^^integer^
86^X: Label^label_x^^ ^1^ ^0^1^18^Label X-Achse^602^^^string^ 86^X: Label^label_x^^ ^0^ ^0^1^18^Label X-Achse^602^^^string^
87^Y: Label^label_y^^ ^1^ ^0^1^21^Label Y-Achse^602^^^string^ 87^Y: Label^label_y^^ ^0^ ^0^1^21^Label Y-Achse^602^^^string^
88^Punktdicke^r^^ ^1^ ^0^1^5^Punktdicke von Diagrammelementen (relevant für Plot.dot, Plot.tickX/Y)^308^^^string^ 88^Punktdicke^r^^ ^0^ ^0^1^5^Punktdicke von Diagrammelementen (relevant für Plot.dot, Plot.tickX/Y)^308^^^string^
91^Quell-Dimension^viz_source^^ ^1^ ^0^1^5^ ^608^^^string^ 91^Quell-Dimension^viz_source^^ ^0^ ^0^1^5^ ^608^^^string^
92^Ziel-Dimension 1^viz_target1^^ ^1^ ^0^1^5^ ^608^^^string^ 92^Ziel-Dimension 1^viz_target1^^ ^0^ ^0^1^5^ ^608^^^string^
93^X: Linie^line_x^true^ ^1^true|false^0^2^18^Linie X-Achse^602^^^boolean^ 93^X: Linie^line_x^true^ ^0^true|false^0^2^18^Linie X-Achse^602^^^boolean^
94^Y: Linie^line_y^true^ ^1^true|false^0^2^21^Linie Y-Achse^602^^^boolean^ 94^Y: Linie^line_y^true^ ^0^true|false^0^2^21^Linie Y-Achse^602^^^boolean^
95^Dimension 1^dimension1^^ ^1^ ^0^1^5^ ^608^^^string^ 95^Dimension 1^dimension1^^ ^0^ ^0^1^5^ ^608^^^string^
96^Dimension 2^dimension2^^ ^1^ ^0^1^5^ ^608^^^string^ 96^Dimension 2^dimension2^^ ^0^ ^0^1^5^ ^608^^^string^

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

@ -29,3 +29,357 @@
46^12^73^1^20^ 46^12^73^1^20^
47^12^95^1^1^ 47^12^95^1^1^
48^12^96^1^10^ 48^12^96^1^10^
49^1^3^0^^
50^1^4^0^201^
51^1^5^0^202^
52^1^6^0^204^
53^1^7^0^203^
54^1^8^0^305^
55^1^11^0^604^
56^1^12^0^605^
57^1^13^0^603^
58^1^15^0^601^
59^1^16^0^103^
60^1^17^0^104^
61^1^18^0^105^
62^1^19^0^106^
63^1^20^0^107^
64^1^21^0^108^
65^1^22^0^109^
66^1^23^0^110^
67^1^25^0^302^
68^1^43^0^306^
69^1^45^0^308^
70^1^56^0^401^
71^1^57^0^402^
72^1^58^0^403^
73^1^60^0^304^
74^1^61^0^301^
75^1^63^0^602^
76^1^68^0^607^
77^1^69^0^608^
78^1^81^0^602^
79^1^82^0^601^
80^1^83^0^603^
81^1^84^0^604^
82^1^85^0^605^
83^1^86^0^602^
84^1^87^0^602^
85^1^93^0^602^
86^1^94^0^602^
87^2^3^0^^
88^2^4^0^201^
89^2^5^0^202^
90^2^6^0^204^
91^2^7^0^203^
92^2^8^0^305^
93^2^11^0^604^
94^2^12^0^605^
95^2^13^0^603^
96^2^15^0^601^
97^2^16^0^103^
98^2^17^0^104^
99^2^18^0^105^
100^2^19^0^106^
101^2^20^0^107^
102^2^21^0^108^
103^2^22^0^109^
104^2^23^0^110^
105^2^25^0^302^
106^2^43^0^306^
107^2^45^0^308^
108^2^56^0^401^
109^2^57^0^402^
110^2^58^0^403^
111^2^60^0^304^
112^2^61^0^301^
113^2^63^0^602^
114^2^68^0^607^
115^2^69^0^608^
116^2^81^0^602^
117^2^82^0^601^
118^2^83^0^603^
119^2^84^0^604^
120^2^85^0^605^
121^2^86^0^602^
122^2^87^0^602^
123^2^93^0^602^
124^2^94^0^602^
125^3^3^0^^
126^3^4^0^201^
127^3^5^0^202^
128^3^6^0^204^
129^3^7^0^203^
130^3^8^0^305^
131^3^11^0^604^
132^3^12^0^605^
133^3^13^0^603^
134^3^15^0^601^
135^3^16^0^103^
136^3^17^0^104^
137^3^18^0^105^
138^3^19^0^106^
139^3^20^0^107^
140^3^21^0^108^
141^3^22^0^109^
142^3^23^0^110^
143^3^25^0^302^
144^3^43^0^306^
145^3^45^0^308^
146^3^56^0^401^
147^3^57^0^402^
148^3^58^0^403^
149^3^60^0^304^
150^3^61^0^301^
151^3^63^0^602^
152^3^68^0^607^
153^3^69^0^608^
154^3^81^0^602^
155^3^82^0^601^
156^3^83^0^603^
157^3^84^0^604^
158^3^85^0^605^
159^3^86^0^602^
160^3^87^0^602^
161^3^93^0^602^
162^3^94^0^602^
163^5^3^0^^
164^5^4^0^201^
165^5^5^0^202^
166^5^6^0^204^
167^5^7^0^203^
168^5^8^0^305^
169^5^11^0^604^
170^5^12^0^605^
171^5^13^0^603^
172^5^15^0^601^
173^5^16^0^103^
174^5^17^0^104^
175^5^18^0^105^
176^5^19^0^106^
177^5^20^0^107^
178^5^21^0^108^
179^5^22^0^109^
180^5^23^0^110^
181^5^25^0^302^
182^5^43^0^306^
183^5^45^0^308^
184^5^56^0^401^
185^5^57^0^402^
186^5^58^0^403^
187^5^60^0^304^
188^5^61^0^301^
189^5^63^0^602^
190^5^68^0^607^
191^5^69^0^608^
192^5^81^0^602^
193^5^82^0^601^
194^5^83^0^603^
195^5^84^0^604^
196^5^85^0^605^
197^5^86^0^602^
198^5^87^0^602^
199^5^93^0^602^
200^5^94^0^602^
201^6^3^0^^
202^6^4^0^201^
203^6^5^0^202^
204^6^6^0^204^
205^6^7^0^203^
206^6^8^0^305^
207^6^11^0^604^
208^6^12^0^605^
209^6^13^0^603^
210^6^15^0^601^
211^6^16^0^103^
212^6^17^0^104^
213^6^18^0^105^
214^6^19^0^106^
215^6^20^0^107^
216^6^21^0^108^
217^6^22^0^109^
218^6^23^0^110^
219^6^25^0^302^
220^6^43^0^306^
221^6^45^0^308^
222^6^56^0^401^
223^6^57^0^402^
224^6^58^0^403^
225^6^60^0^304^
226^6^61^0^301^
227^6^63^0^602^
228^6^68^0^607^
229^6^69^0^608^
230^6^81^0^602^
231^6^82^0^601^
232^6^83^0^603^
233^6^84^0^604^
234^6^85^0^605^
235^6^86^0^602^
236^6^87^0^602^
237^6^93^0^602^
238^6^94^0^602^
239^7^3^0^^
240^7^4^0^201^
241^7^5^0^202^
242^7^6^0^204^
243^7^7^0^203^
244^7^8^0^305^
245^7^11^0^604^
246^7^12^0^605^
247^7^13^0^603^
248^7^15^0^601^
249^7^16^0^103^
250^7^17^0^104^
251^7^18^0^105^
252^7^19^0^106^
253^7^20^0^107^
254^7^21^0^108^
255^7^22^0^109^
256^7^23^0^110^
257^7^25^0^302^
258^7^43^0^306^
259^7^45^0^308^
260^7^56^0^401^
261^7^57^0^402^
262^7^58^0^403^
263^7^60^0^304^
264^7^61^0^301^
265^7^63^0^602^
266^7^68^0^607^
267^7^69^0^608^
268^7^81^0^602^
269^7^82^0^601^
270^7^83^0^603^
271^7^84^0^604^
272^7^85^0^605^
273^7^86^0^602^
274^7^87^0^602^
275^7^93^0^602^
276^7^94^0^602^
277^8^3^0^^
278^8^4^0^201^
279^8^5^0^202^
280^8^6^0^204^
281^8^7^0^203^
282^8^8^0^305^
283^8^11^0^604^
284^8^12^0^605^
285^8^13^0^603^
286^8^15^0^601^
287^8^16^0^103^
288^8^17^0^104^
289^8^18^0^105^
290^8^19^0^106^
291^8^20^0^107^
292^8^21^0^108^
293^8^22^0^109^
294^8^23^0^110^
295^8^25^0^302^
296^8^43^0^306^
297^8^45^0^308^
298^8^56^0^401^
299^8^57^0^402^
300^8^58^0^403^
301^8^60^0^304^
302^8^61^0^301^
303^8^63^0^602^
304^8^68^0^607^
305^8^69^0^608^
306^8^81^0^602^
307^8^82^0^601^
308^8^83^0^603^
309^8^84^0^604^
310^8^85^0^605^
311^8^86^0^602^
312^8^87^0^602^
313^8^93^0^602^
314^8^94^0^602^
315^9^3^0^^
316^9^4^0^201^
317^9^5^0^202^
318^9^6^0^204^
319^9^7^0^203^
320^9^8^0^305^
321^9^11^0^604^
322^9^12^0^605^
323^9^13^0^603^
324^9^15^0^601^
325^9^16^0^103^
326^9^17^0^104^
327^9^18^0^105^
328^9^19^0^106^
329^9^20^0^107^
330^9^21^0^108^
331^9^22^0^109^
332^9^23^0^110^
333^9^25^0^302^
334^9^43^0^306^
335^9^45^0^308^
336^9^56^0^401^
337^9^57^0^402^
338^9^58^0^403^
339^9^60^0^304^
340^9^61^0^301^
341^9^63^0^602^
342^9^68^0^607^
343^9^69^0^608^
344^9^81^0^602^
345^9^82^0^601^
346^9^83^0^603^
347^9^84^0^604^
348^9^85^0^605^
349^9^86^0^602^
350^9^87^0^602^
351^9^93^0^602^
352^9^94^0^602^
353^10^3^0^^
354^10^4^0^201^
355^10^5^0^202^
356^10^6^0^204^
357^10^7^0^203^
358^10^8^0^305^
359^10^11^0^604^
360^10^12^0^605^
361^10^13^0^603^
362^10^15^0^601^
363^10^16^0^103^
364^10^17^0^104^
365^10^18^0^105^
366^10^19^0^106^
367^10^20^0^107^
368^10^21^0^108^
369^10^22^0^109^
370^10^23^0^110^
371^10^25^0^302^
372^10^43^0^306^
373^10^45^0^308^
374^10^56^0^401^
375^10^57^0^402^
376^10^58^0^403^
377^10^60^0^304^
378^10^61^0^301^
379^10^63^0^602^
380^10^68^0^607^
381^10^69^0^608^
382^10^81^0^602^
383^10^82^0^601^
384^10^83^0^603^
385^10^84^0^604^
386^10^85^0^605^
387^10^86^0^602^
388^10^87^0^602^
389^10^93^0^602^
390^10^94^0^602^
391^2^78^0^300^
392^2^24^0^400^
393^1^78^0^400^
394^1^24^0^410^
395^8^78^0^400^
396^8^24^0^410^
397^5^78^0^400^
398^5^24^0^410^
399^3^78^0^400^
400^3^24^0^410^
401^6^78^0^400^
402^6^24^0^410^

4
superx/xml/30190_html_chart_sankey.xsl

@ -75,18 +75,18 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<xsl:template name="importVizJavascriptLibs"> <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/d3.min.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/plot.js" /> <script language="Javascript" type="text/javascript" src="../xml/js/viz/plot.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/viz_functions.js" />
<script language="Javascript" type="module" src="../xml/js/viz/d3-sankey.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()
{ {
var myChartModelStr="{\"id\":1,\"name\":\"\",\"renderer\":\"d3jsv3\",\"dataSources\":[{\"value\":\"0\",\"nr\":1,\"name\":\"Tab. 1\",\"isDefault\":true}],\"targetDiv\":\"\",\"chartElements\":[{\"nr\":0,\"vizTypeUniquename\":\"sankey\",\"caption\":\"sankey\",\"datasource\":\"0\",\"elementTypeProperties\":[{\"nr\":0,\"vizTypePropertyUniquename\":\"viz_dimension1\",\"caption\":\"Kategorie-Dimension 1\",\"propertyValue\":\"abschluss_vorher_abschluss_str\"},{\"nr\":0,\"vizTypePropertyUniquename\":\"viz_dimension2\",\"caption\":\"Kategorie-Dimension 2\",\"propertyValue\":\"einschr_nachher_abschluss_str\"},{\"nr\":0,\"vizTypePropertyUniquename\":\"viz_measure1\",\"caption\":\"Maß 1\",\"propertyValue\":\"count\"}]}],\"chartPropertiesUsed\":[{\"name\":\"caption\",\"vizPropertyVariablename\":\"caption\",\"propertyValue\":\"Übergang BA-MA Datenblatt\"}]}"; var myChartModelStr="{\"version\":\"0.2b\",\"id\":1,\"name\":\"\",\"renderer\":\"d3js\",\"dataSources\":[{\"value\":\"0\",\"nr\":1,\"name\":\"Tab. 1\",\"isDefault\":true}],\"targetDiv\":\"\",\"chartElements\":[{\"nr\":0,\"vizTypeUniquename\":\"sankey\",\"caption\":\"sankey\",\"datasource\":\"0\",\"elementTypeProperties\":[{\"nr\":0,\"vizTypePropertyUniquename\":\"dimension1\",\"caption\":\"Dimension 1\",\"propertyValue\":\"abschluss_vorher_abschluss_str\"},{\"nr\":0,\"vizTypePropertyUniquename\":\"dimension2\",\"caption\":\"Dimension 2\",\"propertyValue\":\"einschr_nachher_abschluss_str\"},{\"nr\":0,\"vizTypePropertyUniquename\":\"measure1\",\"caption\":\"Maß 1\",\"propertyValue\":\"count\"}]}],\"chartPropertiesUsed\":[{\"name\":\"caption\",\"vizPropertyVariablename\":\"caption\",\"propertyValue\":\"Übergang BA-MA Datenblatt\"},{\"name\":\"height\",\"vizPropertyVariablename\":\"height\",\"propertyValue\":\"850\",\"propUnit\":\"\"},{\"name\":\"width\",\"vizPropertyVariablename\":\"width\",\"propertyValue\":\"950\",\"propUnit\":\"\"},{\"name\":\"marginLeft\",\"vizPropertyVariablename\":\"marginLeft\",\"propertyValue\":\"100\",\"propUnit\":\"\"},{\"name\":\"backgroundColor\",\"vizPropertyVariablename\":\"backgroundColor\",\"propertyValue\":\"#ffffff\",\"propUnit\":\"\"},{\"name\":\"color\",\"vizPropertyVariablename\":\"color\",\"propertyValue\":\"#000000\",\"propUnit\":\"\"},{\"name\":\"fill_static\",\"vizPropertyVariablename\":\"fill\",\"propertyValue\":\"#000000\",\"propUnit\":\"\"},{\"name\":\"line_y\",\"vizPropertyVariablename\":\"line\",\"propertyValue\":\"true\",\"propUnit\":\"\"},{\"name\":\"line_x\",\"vizPropertyVariablename\":\"line\",\"propertyValue\":\"true\",\"propUnit\":\"\"}]}";
myChartModel=JSON.parse(myChartModelStr); myChartModel=JSON.parse(myChartModelStr);
renderChart('chartDiv2',myChartModel); renderChart('chartDiv2',myChartModel);
} }
]]></xsl:text> ]]></xsl:text>
</script> </script>
<xsl:call-template name="importVizJavascriptLibs" />
</xsl:template> </xsl:template>

242
superx/xml/js/viz/viz_functions.js

@ -1,39 +1,4 @@
/* d3 Code */ /* SuperX-VIZ Modul (c) 2023 Daniel Quathamer */
/*
const chartModel={
id: "TEST",
name: "testname",
renderer: "plot" ,//renderer;
//this.dataSources=datasources;
//this.globalProperties=globalproperties;
options: [],
targetDiv: document.getElementById("chartDiv"),
renderChart : function () {
//console.log(JSON.stringify(this));
document.getElementById("chartDiv").innerHTML=""; //reset canvas
switch (this.renderer) {
case "plot":
this.renderChartWithPlot();
break;
default:
alert("No renderer");
break;
}
},
renderChartWithPlot: function ()
{
console.log("using Plot");
var svgPlot=Plot.plot(this.options[0]);
document.getElementById("chartDiv").appendChild(svgPlot);
}
}
*/
function chartModel(id,name,renderer,datasources) function chartModel(id,name,renderer,datasources)
{ {
@ -46,6 +11,7 @@ function chartModel(id,name,renderer,datasources)
this.targetDiv=""; //only for d3 this.targetDiv=""; //only for d3
this.chartElements=new Array(); this.chartElements=new Array();
this.chartPropertiesUsed=new Array(); this.chartPropertiesUsed=new Array();
this.dataTransformation=new Array();
//let globalProperties={}; //let globalProperties={};
/*this.getChartSVG = function () { /*this.getChartSVG = function () {
@ -180,7 +146,13 @@ this.caption=caption;
this.propertyValue=propertyValue; this.propertyValue=propertyValue;
} }
function dataTransformationCol(tableId,colname,colfunction)
{
this.tableId=tableId;
this.colname=colname;
this.colfunction=colfunction;
}
function d3dataRow(nr,dimension1,dimension2,measure1 ) function d3dataRow(nr,dimension1,dimension2,measure1 )
{ {
this.nr=nr; this.nr=nr;
@ -304,7 +276,19 @@ this.getValueResultset = function () {
/* Render Model:*/ /* Render Model:*/
function renderChartSVGFromModel(currentChartModel,targetDiv) { function renderChartSVGFromModel(currentChartModel,targetDiv) {
//first update data if function is defined:
if(currentChartModel.dataTransformation.length>0)
{
for(var k=0;k< currentChartModel.dataTransformation.length;k++)
{
var myFunc=currentChartModel.dataTransformation[k];
for(var row=0;row < rs[myFunc.tableId].length;row++)
{
rs[myFunc.tableId][row][myFunc.colname]=applyFunction(rs[myFunc.tableId][row][myFunc.colname],myFunc.colfunction);
}
}
}
switch (currentChartModel.renderer) { switch (currentChartModel.renderer) {
case "plot": case "plot":
renderChartSVGfromModelWithPlot(currentChartModel,targetDiv); renderChartSVGfromModelWithPlot(currentChartModel,targetDiv);
@ -312,9 +296,6 @@ function renderChartSVGFromModel(currentChartModel,targetDiv) {
case "d3js": case "d3js":
renderChartSVGWithD3(currentChartModel,targetDiv); renderChartSVGWithD3(currentChartModel,targetDiv);
break; break;
case "d3jsv3":
renderChartSVGWithD3V3(currentChartModel,targetDiv);
break;
default: default:
alert("No renderer"); alert("No renderer");
break; break;
@ -368,7 +349,7 @@ function renderChartSVGWithD3 (currentChartModel,targetDiv)
var svgD3=new Object; var svgD3=new Object;
for(var k=0;k< currentChartModel.chartElements.length;k++) for(var k=0;k< currentChartModel.chartElements.length;k++)
{ {
svgD3=renderChartElementWithD3(currentChartModel.chartElements[k],targetDiv); svgD3=renderChartElementWithD3(currentChartModel,k,targetDiv);
} }
@ -377,6 +358,7 @@ function renderChartSVGWithD3 (currentChartModel,targetDiv)
} }
function renderChartSVGWithD3V3 (currentChartModel,targetDiv) function renderChartSVGWithD3V3 (currentChartModel,targetDiv)
{ {
/*OBSOLETE*/
console.log("using D3JS_v3"); console.log("using D3JS_v3");
var svgD3=new Object; var svgD3=new Object;
for(var k=0;k< currentChartModel.chartElements.length;k++) for(var k=0;k< currentChartModel.chartElements.length;k++)
@ -595,10 +577,14 @@ function createChartElementsConfig2Form(renderer)
} }
const elementDivBox = document.createElement("div"); const elementDivBox = document.createElement("div");
//first only Dimensions and measures:
for(var k=0;k < vizTypeProperties.length;k++) for(var k=0;k < vizTypeProperties.length;k++)
{ {
if(vizType==vizTypeProperties[k].typeUniquename) if(vizType==vizTypeProperties[k].typeUniquename &&
(vizTypeProperties[k].groupUniquename=="CATEGORY"
|| vizTypeProperties[k].groupUniquename=="MEASURE"
)
)
elementDivBox.appendChild(renderDimensionField(vizTypeProperties[k],dataSource)); elementDivBox.appendChild(renderDimensionField(vizTypeProperties[k],dataSource));
} }
const saveBtnDiv = document.createElement("div"); const saveBtnDiv = document.createElement("div");
@ -650,6 +636,7 @@ function saveChartElementConfig()
for(var k=0;k < vizTypeProperties.length;k++) for(var k=0;k < vizTypeProperties.length;k++)
{ {
if(vizTypeUniquename==vizTypeProperties[k].typeUniquename if(vizTypeUniquename==vizTypeProperties[k].typeUniquename
&& document.getElementById(vizTypeProperties[k].propUniquename)
&& document.getElementById(vizTypeProperties[k].propUniquename).value !="") && document.getElementById(vizTypeProperties[k].propUniquename).value !="")
{ {
var myUsedVizTypeProperty=new usedVizTypeProperty(propertyCounter,vizTypeProperties[k].propUniquename, vizTypeProperties[k].caption,document.getElementById(vizTypeProperties[k].propUniquename).value); //))nr,vizTypePropertyUniquename,caption,propertyValue ) var myUsedVizTypeProperty=new usedVizTypeProperty(propertyCounter,vizTypeProperties[k].propUniquename, vizTypeProperties[k].caption,document.getElementById(vizTypeProperties[k].propUniquename).value); //))nr,vizTypePropertyUniquename,caption,propertyValue )
@ -1230,7 +1217,9 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render
var groupUniquename=myCommonChartProperties[k].groupUniquename; var groupUniquename=myCommonChartProperties[k].groupUniquename;
if(groupUniquename!="" if(groupUniquename!=""
&& groupUniquename != previousGroup && groupUniquename != previousGroup
&& myCommonChartProperties[k].groupVariableName !="") && myCommonChartProperties[k].groupVariableName !=""
&& isChartPropertyValidForChartelements(myCommonChartProperties[k])
)
{ {
var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,""); var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,"");
commonChartPropertyGroups.push(newcommonChartPropertyGroup); commonChartPropertyGroups.push(newcommonChartPropertyGroup);
@ -1273,7 +1262,8 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render
for(var k=0;k < myCommonChartProperties.length;k++) for(var k=0;k < myCommonChartProperties.length;k++)
{ {
if(myCommonChartProperties[k].groupUniquename==commonChartPropertyGroups[i].groupUniquename if(myCommonChartProperties[k].groupUniquename==commonChartPropertyGroups[i].groupUniquename
&& myCommonChartProperties[k].variableName!="") && myCommonChartProperties[k].variableName!=""
&& isChartPropertyValidForChartelements(myCommonChartProperties[k]))
columnGroupBodyDiv.appendChild(renderChartPropertyField(myCommonChartProperties[k])); columnGroupBodyDiv.appendChild(renderChartPropertyField(myCommonChartProperties[k]));
} }
columnGroupDiv.appendChild(columnGroupBodyDiv); columnGroupDiv.appendChild(columnGroupBodyDiv);
@ -1299,6 +1289,27 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render
myForm.appendChild(divBox); myForm.appendChild(divBox);
*/ */
} }
function isChartPropertyValidForChartelements(prop)
{
var propValid=false;
if(prop.isGeneric==1)
return true;
var nrOfChartElements=myChartModel.chartElements.length;
for(var k=0;k < nrOfChartElements;k++)
{
var usedVizTypeUniquename=myChartModel.chartElements[k].vizTypeUniquename;
for(var i=0;i < vizTypeProperties.length;i++)
{
if(vizTypeProperties[i].propUniquename==prop.name
&& vizTypeProperties[i].typeUniquename==usedVizTypeUniquename)
propValid=true;
}
}
return propValid;
}
function toggleGroupBodyDiv(groupBodyDiv) function toggleGroupBodyDiv(groupBodyDiv)
{ {
var bodyDiv=groupBodyDiv.substr(4); //remove "open" Prefix var bodyDiv=groupBodyDiv.substr(4); //remove "open" Prefix
@ -1404,7 +1415,7 @@ function renderChartPropertyField(commonChartProperty)
var propValue=""; var propValue="";
if(myChartModel && myChartModel.chartPropertiesUsed.length>0) if(myChartModel && myChartModel.chartPropertiesUsed.length>0)
{ {
propValue=getChartModelChartPropertyUsed(myChartModel.chartPropertiesUsed,commonChartProperty.name ); propValue=getCommonChartPropertyFromModel(myChartModel.chartPropertiesUsed,commonChartProperty.name );
} }
const fieldElem = document.createElement("div"); const fieldElem = document.createElement("div");
@ -1542,16 +1553,7 @@ 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) function fillSelectOptions(myCombo,myValues,isMandatory)
{ {
@ -1621,13 +1623,13 @@ return data;
} }
function showDataTable(myTableDiv,data,metadata,maxRows) function showDataTable(myTableDiv,tableId,mydata,metadata,maxRows)
{ {
tableDiv=document.getElementById(myTableDiv); tableDiv=document.getElementById(myTableDiv);
if(tableDiv.innerHTML=="") if(tableDiv.innerHTML=="")
{ {
var rowcount=data.length; var rowcount=mydata.length;
if(rowcount > maxRows) if(rowcount > maxRows)
rowcount=maxRows; rowcount=maxRows;
const tabElem = document.createElement("table"); const tabElem = document.createElement("table");
@ -1674,7 +1676,7 @@ tabElem.appendChild(rowElemSubHeader);
for(row=0;row<rowcount;row++) for(row=0;row<rowcount;row++)
{ {
if(data[row]) if(mydata[row])
{ {
const rowElem = document.createElement("tr"); const rowElem = document.createElement("tr");
const tdCap = document.createElement("td"); const tdCap = document.createElement("td");
@ -1686,7 +1688,7 @@ for(row=0;row<rowcount;row++)
if(metadata[col].nr) if(metadata[col].nr)
{ {
const tdCap = document.createElement("td"); const tdCap = document.createElement("td");
const textnode = document.createTextNode(data[row][metadata[col].colname]); const textnode = document.createTextNode(mydata[row][metadata[col].colname]);
tdCap.appendChild(textnode); tdCap.appendChild(textnode);
rowElem.appendChild(tdCap); rowElem.appendChild(tdCap);
} }
@ -1694,15 +1696,69 @@ for(row=0;row<rowcount;row++)
tabElem.appendChild(rowElem); tabElem.appendChild(rowElem);
} }
} }
//Start Funktionen:
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;
const rowElemFunc = document.createElement("tr");
const tdCapFunc = document.createElement("td");
const textnodeFunc = document.createTextNode("Funktion:");
tdCapFunc.appendChild(textnodeFunc);
rowElemFunc.appendChild(tdCapFunc);
for(var col=0;col < metadata.length;col++)
{
if(metadata[col].nr)
{
const tdCapFunc = document.createElement("td");
if(metadata[col].colcaption.trim() != "" && metadata[col].coltype==1) //String
{
//const textnode = document.createTextNode(data[row][metadata[col].colname]);
const selElem = document.createElement("select");
selElem.name=metadata[col].colname;
selElem.id=metadata[col].colname;
fillSelectOptions(selElem,dimFunctions,false);
selElem.onchange= function () {
applyColFunction(myTableDiv,tableId,mydata,metadata,maxRows,this.name,this.value);
};
tdCapFunc.appendChild(selElem);
}
rowElemFunc.appendChild(tdCapFunc);
}
}
tabElem.appendChild(rowElemFunc);
tableDiv.appendChild(tabElem); tableDiv.appendChild(tabElem);
} }
else else
tableDiv.innerHTML=""; //reset table tableDiv.innerHTML=""; //reset table
} }
function showSelectionTable(myTableDiv,data,metadata,maxRows) function applyColFunction(myTableDiv,tableId,data,metadata,maxRows,colname,functionName)
{ {
//first update chartModel:
var myFunc=new dataTransformationCol(tableId,colname,functionName);
myChartModel.dataTransformation.push(myFunc);
for(var row=0;row < data.length;row++)
{
data[row][colname]=applyFunction(data[row][colname],functionName);
}
document.getElementById(myTableDiv).innerHTML="";
showDataTable(myTableDiv,tableId,data,metadata,maxRows)
}
function showSelectionTable(myTableDiv,data,metadata,maxRows)
{
/*OBSOLETE*/
tableDiv=document.getElementById(myTableDiv); tableDiv=document.getElementById(myTableDiv);
tableDiv.innerHTML=""; //reset table tableDiv.innerHTML=""; //reset table
var rowcount=data.length; var rowcount=data.length;
@ -1856,11 +1912,28 @@ function getVizTypeOrientation(vizTypeUniquename)
} }
return orientation; return orientation;
} }
function renderChartElementWithD3(chartElem,targetDiv) function renderChartElementWithD3(currentChartModel,chartElemNr,targetDiv)
{ {
d3.select("#"+targetDiv).selectAll("svg").selectAll("g").remove();
d3.select("#"+targetDiv).selectAll("svg").selectAll("rect").remove(); // append the svg canvas to the page
var mySvg= d3.select("#"+targetDiv).selectAll("svg");//.append("svg"); var margin = { top: 10, right: 10, bottom: 10, left: 10 },
//var margin = { top: 0, right: 50, bottom: 0, left: 0 },
width = getCommonChartPropertyFromModel(currentChartModel.chartPropertiesUsed,"width") - margin.left - margin.right,
height = getCommonChartPropertyFromModel(currentChartModel.chartPropertiesUsed,"height") - margin.top - margin.bottom;
var clearCanvas=document.getElementById(targetDiv);
while (clearCanvas.firstChild) {
clearCanvas.removeChild(clearCanvas.firstChild);
}
//targetDiv
var mySvg = d3.select("#"+targetDiv).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
chartElem=currentChartModel.chartElements[chartElemNr];
if(chartElem) if(chartElem)
{ {
var chartType=chartElem.vizTypeUniquename; var chartType=chartElem.vizTypeUniquename;
@ -1870,10 +1943,10 @@ console.log("Mark-option for "+chartType);
switch (chartType) switch (chartType)
{ {
case "bar_x_d3": case "bar_x_d3":
mySvg=makeBarX_d3(mySvg,data,chartElem); mySvg=makeBarX_d3(currentChartModel.chartPropertiesUsed,mySvg,data,chartElem);
break; break;
case "sankey": case "sankey":
mySvg=makeSankeyD3(mySvg,data,rsColumnMetaData[chartElem.datasource],chartElem); mySvg=makeSankeyD3(currentChartModel.chartPropertiesUsed,mySvg,data,rsColumnMetaData[chartElem.datasource],chartElem);
break; break;
default: default:
alert("Unknown chart type"); alert("Unknown chart type");
@ -1884,6 +1957,7 @@ return mySvg;
} }
function renderChartElementWithD3V3(chartElem,targetDiv) function renderChartElementWithD3V3(chartElem,targetDiv)
{ {
/*OBSOLETE*/
if(chartElem) if(chartElem)
{ {
var chartType=chartElem.vizTypeUniquename; var chartType=chartElem.vizTypeUniquename;
@ -1969,7 +2043,7 @@ switch (chartType)
} }
function makeBarX_d3(svg,data,chartElem) function makeBarX_d3(myCommonChartProperties,svg,data,chartElem)
{ {
var barHeight = 18; var barHeight = 18;
//var barLabelWidth = 500; //var barLabelWidth = 500;
@ -2394,11 +2468,26 @@ function getChartPropertyValue(propArray,propName)
} }
return propertyValue; return propertyValue;
} }
function getCommonChartPropertyFromModel(myCommonChartProperties,name)
{
var propertyValue="";
if(myCommonChartProperties && myCommonChartProperties.length>0)
{
let prop = myCommonChartProperties.find(o => o.name === name);
if(prop)
propertyValue=prop.propertyValue;
}
//if no value is set from model, retrieve the default value:
if(propertyValue=="")
propertyValue=getCommonChartProperty(name);
return propertyValue;
}
function getCommonChartProperty(name) function getCommonChartProperty(name)
{ {
var propertyValue=""; var propertyValue="";
if(document.forms["chartPropertiesForm"].elements[name]) if(document.forms["chartPropertiesForm"] && document.forms["chartPropertiesForm"].elements[name])
{ {
propertyValue=document.forms["chartPropertiesForm"].elements[name].value; propertyValue=document.forms["chartPropertiesForm"].elements[name].value;
} }
@ -2689,13 +2778,13 @@ for (let i = 1; i < 4; i++) {
} }
} }
function makeSankeyD3(mySvg,data,metaData,chartElem) function makeSankeyD3(myCommonChartProperties,mySvg,data,metaData,chartElem)
{ {
// load the data // load the data
var captionEmptyTarget="Kein Abschluss"; var captionEmptyTarget="Leer";
var sNodes=getSankeyNodes(data,captionEmptyTarget); //graph.nodes; var sNodes=getSankeyNodes(data,captionEmptyTarget); //graph.nodes;
var sLinks=getSankeyLinks(sNodes,data); //graph.links; var sLinks=getSankeyLinks(sNodes,data); //graph.links;
renderSankey(mySvg,sNodes,sLinks); renderSankey(myCommonChartProperties,mySvg,sNodes,sLinks);
//var myChartSVG = SankeyChart(sNodes,sLinks); //var myChartSVG = SankeyChart(sNodes,sLinks);
} }
@ -2802,14 +2891,13 @@ function getMetadataOfVizTypeProperty(metaData,vizTypePropertyUniquename)
} }
return caption; return caption;
} }
function renderSankey(svg,sNodes,sLinks) function renderSankey(myCommonChartProperties,svg,sNodes,sLinks)
{ {
// set the dimensions and margins of the graph // set the dimensions and margins of the graph
var margin = { top: 10, right: 10, bottom: 10, left: 10 }, var margin = { top: 10, right: 10, bottom: 10, left: 10 },
//var margin = { top: 0, right: 50, bottom: 0, left: 0 }, //var margin = { top: 0, right: 50, bottom: 0, left: 0 },
width = getCommonChartProperty("width") - margin.left - margin.right, width = getCommonChartPropertyFromModel(myCommonChartProperties,"width") - margin.left - margin.right,
height = getCommonChartProperty("height") - margin.top - margin.bottom; height = getCommonChartPropertyFromModel(myCommonChartProperties,"height") - margin.top - margin.bottom;
// format variables // format variables
var formatNumber = d3.format(",.0f"), // zero decimal places var formatNumber = d3.format(",.0f"), // zero decimal places
format = function (d) { return formatNumber(d); }, format = function (d) { return formatNumber(d); },

178
superx/xml/viz_html_chart.xsl

@ -110,7 +110,8 @@ groupUniquename,
rendererUniquename, rendererUniquename,
groupVariableName, groupVariableName,
variableName, variableName,
propValueType propValueType,
isGeneric
) )
{ {
this.name=name; this.name=name;
@ -129,6 +130,7 @@ this.rendererUniquename=rendererUniquename;
this.groupVariableName=groupVariableName; this.groupVariableName=groupVariableName;
this.variableName=variableName; this.variableName=variableName;
this.propValueType=propValueType; this.propValueType=propValueType;
this.isGeneric=isGeneric;
this.getValueResultset = function () { this.getValueResultset = function () {
var valueOptions=[]; var valueOptions=[];
var optionCounter=0; var optionCounter=0;
@ -195,7 +197,9 @@ var newCommonChartProperty = new commonChartProperty("</xsl:text>
<xsl:value-of select="@variable_name" /> <xsl:value-of select="@variable_name" />
<xsl:text>","</xsl:text> <xsl:text>","</xsl:text>
<xsl:value-of select="@propValueType" /> <xsl:value-of select="@propValueType" />
<xsl:text>"); <xsl:text>",</xsl:text>
<xsl:value-of select="@isGeneric" />
<xsl:text>);
commonChartProperties.push(newCommonChartProperty); commonChartProperties.push(newCommonChartProperty);
</xsl:text> </xsl:text>
</xsl:for-each> </xsl:for-each>
@ -616,7 +620,9 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
<xsl:attribute name="onClick"> <xsl:attribute name="onClick">
<xsl:text>showDataTable('dataDivTable</xsl:text> <xsl:text>showDataTable('dataDivTable</xsl:text>
<xsl:value-of select="$tableId"/> <xsl:value-of select="$tableId"/>
<xsl:text>',rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>],rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>],10);</xsl:text> <xsl:text>',</xsl:text>
<xsl:value-of select="$tableId"/>
<xsl:text>,rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>],rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>],10);</xsl:text>
</xsl:attribute> </xsl:attribute>
<span class="icon"> <span class="icon">
<img src="../images/icons/more.svg" title="Laden" /> <img src="../images/icons/more.svg" title="Laden" />
@ -634,8 +640,8 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
</xsl:for-each> </xsl:for-each>
<!--Aufruf/Anzeige Formular Datenauswahl--> <!--Aufruf/Anzeige Formular Datenauswahl
<!--
<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-Transformation</strong></label> <label class="label is-required is-small"><strong>Daten-Transformation</strong></label>
@ -651,7 +657,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
<img src="../images/icons/more.svg" title="Laden" /> <img src="../images/icons/more.svg" title="Laden" />
</span> </span>
</a> </a>
</div> </div>
<div id="dataSelectionDiv"> <div id="dataSelectionDiv">
@ -659,167 +665,9 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
<div id="dataSelectionFormDiv" style="display:none"> <div id="dataSelectionFormDiv" style="display:none">
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small">Dimension 1</label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<div class="field is-active">
<p class="control-new">
<div class="select is-small is-fullwidth is-focused">
<select class="maskinputPflicht" id="dimension1" name="dimension1" tabindex="210">
<option class="maskinput" value="" selected="selected"></option>
</select>
</div>
</p>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
<figure class="image is-24x24">
<img src="../images/information_grey_liberation.svg" />
</figure>
</span>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<div class="field is-active">
<p class="control-new">
<div class="select is-small is-fullwidth">
<select id="dimension1_fn" name="dimension1_fn" tabindex="210">
<option class="maskinput" value="" selected="selected">Optional: Vordefinierte Transformation></option>
</select>
</div>
</p>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
<figure class="image is-24x24">
<img src="../images/information_grey_liberation.svg" />
</figure>
</span>
</div>
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small">Dimension 2</label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<div class="field is-active">
<p class="control-new">
<div class="select is-small is-fullwidth is-focused">
<select class="maskinputPflicht" id="dimension2" name="dimension2" tabindex="210">
<option class="maskinput" value="" selected="selected"></option>
</select>
</div>
</p>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
<figure class="image is-24x24">
<img src="../images/information_grey_liberation.svg" />
</figure>
</span>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<div class="field is-active">
<p class="control-new">
<div class="select is-small is-fullwidth">
<select id="dimension2_fn" name="dimension2_fn" tabindex="210">
<option class="maskinput" value="" selected="selected">Optional: Vordefinierte Transformation</option>
</select>
</div>
</p>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
<figure class="image is-24x24">
<img src="../images/information_grey_liberation.svg" />
</figure>
</span>
</div>
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small">Maß</label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<div class="field is-active">
<p class="control-new">
<div class="select is-small is-fullwidth">
<select class="maskinputPflicht" id="measure1" name="measure1" tabindex="230" >
<option class="maskinput" value="" selected="selected"></option>
</select>
</div>
</p>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
<figure class="image is-24x24">
<img src="../images/information_grey_liberation.svg" />
</figure>
</span>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<div class="field is-active">
<p class="control-new">
<div class="select is-small is-fullwidth is-focused">
<select id="measure1_fn" name="measure1_fn" tabindex="230">
<option class="maskinput" value="" selected="selected">Optional: Vordefinierte Transformation</option>
</select>
</div>
</p>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
<figure class="image is-24x24">
<img src="../images/information_grey_liberation.svg" />
</figure>
</span>
</div>
</div> </div>
</form> </form>
</div> </div>
--> -->

Loading…
Cancel
Save