Echarts Viewer for bar/line/pie #11

src-modules/module/viz/conf/includes.txt

@@ -8,10 +8,13 @@ style/sx_viz_muster.css
 WEB-INF/conf/edustore/db/bin/SQL_ENV_viz.sam
 xml/js/viz/d3.min.js
 xml/js/viz/d3-7.8.0-license.txt
+xml/js/viz/echarts.min.js
+xml/js/viz/echarts-5.6.0-license.txt
 xml/js/viz/plot.js
 xml/js/viz/plot-0.6.1-license.txt
 xml/js/viz/d3-sankey.js
 xml/js/viz/d3-sankey-license.txt
+xml/js/viz/viz_viewer.js
 xml/js/viz/viz_functions.js
 xml/js/viz/world.geojson.license.txt
 xml/js/viz/world.geojson

src-modules/module/viz/masken/44130_maskeninfo.unl

@@ -1 +1 @@
-44130^Studierende nach Alter (Boxplot)^<sximport>select select_stmt from maskeninfo where tid=45000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=45000</sximport>^Studienfach^Anzahl bzw. Anteil^Datenblatt Studierendenstatistik^<sximport>select cleanup_stmt from maskeninfo where tid=45000</sximport>^^2^850^540^^1^<<SQL>>SELECT description FROM rpta_column_layout where tid=<<Spaltenlayout>>;^
+44130^Studierende nach Alter (Boxplot)^<sximport>select select_stmt from maskeninfo where tid=48000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=48000</sximport>^Studienfach^Anzahl bzw. Anteil^Datenblatt Studierendenstatistik^<sximport>select cleanup_stmt from maskeninfo where tid=48000</sximport>^^2^850^540^^1^<<SQL>>SELECT description FROM rpta_column_layout where tid=<<Spaltenlayout>>;^

src-modules/module/viz/masken/44220_maskeninfo.unl

@@ -1 +1 @@
-44220^Studierende nach Geschlecht^<sximport>select select_stmt from maskeninfo where tid=45000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=45000</sximport>^Studienfach^Anzahl bzw. Anteil^Ausgabe der Studierenden nach Geschlecht in verschiedenen Visualisierungen (z.B. Tortendiagramm)^<sximport>select cleanup_stmt from maskeninfo where tid=45000</sximport>^^2^850^540^^1^<<SQL>>SELECT description FROM rpta_column_layout where tid=<<Spaltenlayout>>;^
+44220^Studierende nach Geschlecht^<sximport>select select_stmt from maskeninfo where tid=48000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=48000</sximport>^Studienfach^Anzahl bzw. Anteil^Ausgabe der Studierenden nach Geschlecht in verschiedenen Visualisierungen (z.B. Tortendiagramm)^<sximport>select cleanup_stmt from maskeninfo where tid=48000</sximport>^^2^850^540^^1^<<SQL>>SELECT description FROM rpta_column_layout where tid=<<Spaltenlayout>>;^

src-modules/module/viz/masken/44250_maskeninfo.unl

@@ -1 +1 @@
-44250^Studierende nach Staaten^<sximport>select select_stmt from maskeninfo where tid=45000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=45000</sximport>^Studienfach^Anzahl bzw. Anteil^Ausgabe der Studierenden nach Staat (Staatsangehörigkeit, Staat der Hochschulzugangsberechtigung) als Datenblatt oder Weltkarte^<sximport>select cleanup_stmt from maskeninfo where tid=45000</sximport>^^2^850^540^^1^<<SQL>>SELECT description FROM rpta_column_layout where tid=<<Spaltenlayout>>;^
+44250^Studierende nach Staaten^<sximport>select select_stmt from maskeninfo where tid=48000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=48000</sximport>^Studienfach^Anzahl bzw. Anteil^Ausgabe der Studierenden nach Staat (Staatsangehörigkeit, Staat der Hochschulzugangsberechtigung) als Datenblatt oder Weltkarte^<sximport>select cleanup_stmt from maskeninfo where tid=48000</sximport>^^2^850^540^^1^<<SQL>>SELECT description FROM rpta_column_layout where tid=<<Spaltenlayout>>;^

src-modules/module/viz/masken/44280_maskeninfo.unl

@@ -1 +1 @@
-44280^Studierende nach Fakultät^<sximport>select select_stmt from maskeninfo where tid=45000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=45000</sximport>^Studienfach^Anzahl bzw. Anteil^Ausgabe der Studierenden nach Fakultät mit verschiedenen Visualisierungen (z.B. Tortendiagramm)^<sximport>select cleanup_stmt from maskeninfo where tid=45000</sximport>^^2^850^540^^1^<<SQL>>SELECT description FROM rpta_column_layout where tid=<<Spaltenlayout>>;^
+44280^Studierende nach Fakultät^<sximport>select select_stmt from maskeninfo where tid=48000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=48000</sximport>^Studienfach^Anzahl bzw. Anteil^Ausgabe der Studierenden nach Fakultät mit verschiedenen Visualisierungen (z.B. Tortendiagramm)^<sximport>select cleanup_stmt from maskeninfo where tid=48000</sximport>^^2^850^540^^1^<<SQL>>SELECT description FROM rpta_column_layout where tid=<<Spaltenlayout>>;^

src-modules/module/viz/masken/44510_maskeninfo.unl

@@ -1 +1 @@
-44510^Studienanfänger_innen nach Jahr^<sximport>select select_stmt from maskeninfo where tid=45000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=45000</sximport>^Studienfach^Anzahl bzw. Anteil^Ausgabe der Studierenden nach Geschlecht in verschiedenen Visualisierungen (z.B. Tortendiagramm)^<sximport>select cleanup_stmt from maskeninfo where tid=45000</sximport>^^2^850^540^^1^<<SQL>>SELECT description FROM rpta_column_layout where tid=<<Spaltenlayout>>;^
+44510^Studienanfänger_innen nach Jahr^<sximport>select select_stmt from maskeninfo where tid=48000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=48000</sximport>^Studienfach^Anzahl bzw. Anteil^Ausgabe der Studierenden nach Geschlecht in verschiedenen Visualisierungen (z.B. Tortendiagramm)^<sximport>select cleanup_stmt from maskeninfo where tid=48000</sximport>^^2^850^540^^1^<<SQL>>SELECT description FROM rpta_column_layout where tid=<<Spaltenlayout>>;^

src-modules/module/viz/masken/44570_maskeninfo.unl

@@ -1 +1 @@
-44570^Studierende nach Semester^<sximport>select select_stmt from maskeninfo where tid=45000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=45000</sximport>^Altersgruppe^Anzahl^Studienanfänger_innen als Zeitreihe, nach Gesschlecht und Fakultät in verschiedenen Visualisierungen^<sximport>select cleanup_stmt from maskeninfo where tid=45000</sximport>^^3^700^360^0^1^^
+44570^Studierende nach Semester^<sximport>select select_stmt from maskeninfo where tid=48000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=48000</sximport>^Altersgruppe^Anzahl^Studienanfänger_innen als Zeitreihe, nach Gesschlecht und Fakultät in verschiedenen Visualisierungen^<sximport>select cleanup_stmt from maskeninfo where tid=48000</sximport>^^3^700^360^0^1^^

src-modules/module/viz/masken/44600_maskeninfo.unl

@@ -1 +1 @@
-44600^Studierende nach Region^<sximport>select select_stmt from maskeninfo where tid=45000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=45000</sximport>^Studienfach^Anzahl bzw. Anteil^Ausgabe der Studierenden nach Landkreis/Bundesland^<sximport>select cleanup_stmt from maskeninfo where tid=45000</sximport>^^2^850^540^^1^<<SQL>>SELECT description FROM rpta_column_layout where tid=<<Spaltenlayout>>;^
+44600^Studierende nach Region^<sximport>select select_stmt from maskeninfo where tid=48000</sximport>^<sximport>select xil_proplist from maskeninfo where tid=48000</sximport>^Studienfach^Anzahl bzw. Anteil^Ausgabe der Studierenden nach Landkreis/Bundesland^<sximport>select cleanup_stmt from maskeninfo where tid=48000</sximport>^^2^850^540^^1^<<SQL>>SELECT description FROM rpta_column_layout where tid=<<Spaltenlayout>>;^

src-modules/module/viz/masken/44630_felderinfo.unl

@@ -0,0 +1,10 @@
+44645^tablestylesheet^150^0^0^100^100^1^char^255^1^1^<<SQL>> select filename,caption from sx_stylesheets S, sx_mask_style M where S.tid=M.stylesheet_id and M.maskeninfo_id=44190 order by ord^ ^<<SQL>> select filename,caption from sx_stylesheets S, sx_mask_style M where S.tid=M.stylesheet_id and M.maskeninfo_id=44190 order by ord limit 1^
+44647^Grafik^1000^300^-1^170^150^1^integer^30^0^1^<<SQL>> select tid, caption from viz_chart order by 2;^hidden^ ^
+44649^Spaltenanzahl^5^350^-1^140^80^1^integer^255^0^1^<<SQL>>  SELECT 0,'Dynamisch' from xdummy \
+union SELECT 1,'1-spaltig' from xdummy \
+union SELECT 2,'2-spaltig' from xdummy \
+union SELECT 3,'3-spaltig' from xdummy \
+union SELECT 4,'4-spaltig' from xdummy \
+order by 1;^ ^<<SQL>> SELECT 2,'2-spaltig' from xdummy;^
+44650^Kachelbreite^30^0^0^100^100^1^integer^5000^0^0^^^800^
+44653^Kachelhöhe^40^0^0^100^100^1^integer^5000^0^0^^^600^

src-modules/module/viz/masken/44630_maske_system_bez.unl

@@ -0,0 +1 @@
+44630^320^

src-modules/module/viz/masken/44630_masken_felder_bez.unl

@@ -0,0 +1,5 @@
+44630^44645^
+44630^44647^
+44630^44649^
+44630^44650^
+44630^44653^

src-modules/module/viz/masken/44630_maskeninfo.unl

@@ -0,0 +1 @@
+44630^VIZ-Dashboard Settings^ ^ ^ ^ ^Dashboard Inistialisierung^ ^^3^700^360^0^1^^

src-modules/module/viz/masken/44630_sachgeb_maske_bez.unl

@@ -0,0 +1 @@
+320^44630^

src-modules/module/viz/schluesseltabellen/customxmladd.sql

@@ -94,8 +94,12 @@ V.userinfo_id,
 replace(V.chartmodel,'"','§') as chartmodel_escaped,
 replace(V.chartmodel_miniature,'"','§') as chartmodel_miniature_escaped,
 V.description,
-V.chart_position
+V.chart_position,
-FROM viz_chart V
+--replace(V.chartcode,'"','§') as chartcode_escaped,
+--replace(V.datasource_def,'"','§') as datasource_def_escaped
+R.uniquename as renderer_uniquename
+FROM viz_chart V, viz_renderer R
+where R.tid=V.renderer_id
 order by 3
  ;
  </sqlvar>
@@ -191,6 +195,7 @@ order by 3
  chartmodel="${ch.chartmodel_escaped}" 
  chartmodel_miniature="${ch.chartmodel_miniature_escaped}" 
  chart_position="${ch.chart_position}" 
+ renderer="${ch.renderer_uniquename}"
    />
 </#foreach>
 </#if>

src-modules/module/viz/schluesseltabellen/macro_masken_bez_fuellen.sql

@@ -19,6 +19,7 @@
 {"makro":"44070", "tid":"44020", "sortnr":"70"},
 {"makro":"44070", "tid":"44020", "sortnr":"80"},
 
+{"makro":"44190", "tid":"44630", "sortnr":"0"},
 {"makro":"44190", "tid":"44570", "sortnr":"1"},
 {"makro":"44190", "tid":"44220", "sortnr":"10"},
 {"makro":"44190", "tid":"44280", "sortnr":"20"},
@@ -108,7 +109,7 @@
 
 {"makro":"44190", "sortnr":"30", "feldname":"Köpfe oder Fälle ?", "value":"studiengang_nr = 1 and fach_nr = 1"},
 {"makro":"44190", "sortnr":"30", "feldname":"Spaltenlayout", "value":"sos_stud_hzb_bland"},
-{"makro":"44190", "sortnr":"30", "feldname":"Grafik", "value":"STUDANF_FAK_BAR"},
+{"makro":"44190", "sortnr":"30", "feldname":"Grafik", "value":"STUDANF_HZB_LAND_BAR"},
 {"makro":"44190", "sortnr":"30", "feldname":"bis Fachsemester", "value":"1"},
 {"makro":"44190", "sortnr":"30", "feldname":"tablestylesheet", "value":"tabelle_html_datenblatt.xsl"}
 

src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen.sql

@@ -13,14 +13,16 @@
 {"mask":"44160", "filename":"viz_html_chart_viewer.xsl", "ord":"1"},
 {"mask":"44160", "filename":"tabelle_html_datenblatt.xsl", "ord":"20"},
 {"mask":"44160", "filename":"viz_html_chart_viewer_mask.xsl", "ord":"30"},
+{"mask":"44160", "filename":"viz_html_chart_viewer_mask_and_table.xsl", "ord":"40"},
+
 {"mask":"44190", "filename":"tabelle_html_datenblatt.xsl", "ord":"20"},
 {"mask":"44190", "filename":"viz_html_chart_viewer_grid.xsl", "ord":"1"},
-{"mask":"44190", "filename":"viz_html_chart_viewer_mask.xsl", "ord":"30"},
+{"mask":"44190", "filename":"viz_html_chart_viewer.xsl", "ord":"40"},
-{"mask":"44190", "filename":"viz_html_chart_viewer_echart.xsl", "ord":"40"},
 {"mask":"44220", "filename":"tabelle_html_datenblatt.xsl", "ord":"20"},
 {"mask":"44220", "filename":"viz_html_chart_viewer.xsl", "ord":"1"},
 {"mask":"44220", "filename":"viz_html_chart_viewer_mask.xsl", "ord":"30"},
 {"mask":"44220", "filename":"viz_html_chart_viewer_mask_and_table.xsl", "ord":"40"},
+
 {"mask":"44280", "filename":"tabelle_html_datenblatt.xsl", "ord":"20"},
 {"mask":"44280", "filename":"viz_html_chart_viewer.xsl", "ord":"1"},
 {"mask":"44280", "filename":"viz_html_chart_viewer_mask.xsl", "ord":"30"},
@@ -28,12 +30,18 @@
 {"mask":"44510", "filename":"tabelle_html_datenblatt.xsl", "ord":"20"},
 {"mask":"44510", "filename":"viz_html_chart_viewer.xsl", "ord":"1"},
 {"mask":"44510", "filename":"viz_html_chart_viewer_mask.xsl", "ord":"30"},
+{"mask":"44510", "filename":"viz_html_chart_viewer_mask_and_table.xsl", "ord":"40"},
+
+
 {"mask":"44250", "filename":"tabelle_html_datenblatt.xsl", "ord":"20"},
 {"mask":"44250", "filename":"viz_html_chart_viewer.xsl", "ord":"1"},
 {"mask":"44250", "filename":"viz_html_chart_viewer_mask.xsl", "ord":"30"},
+{"mask":"44250", "filename":"viz_html_chart_viewer_mask_and_table.xsl", "ord":"40"},
+
 {"mask":"44570", "filename":"tabelle_html_datenblatt.xsl", "ord":"20"},
 {"mask":"44570", "filename":"viz_html_chart_viewer.xsl", "ord":"1"},
 {"mask":"44570", "filename":"viz_html_chart_viewer_mask.xsl", "ord":"30"},
+{"mask":"44570", "filename":"viz_html_chart_viewer_mask_and_table.xsl", "ord":"40"},
 {"mask":"44600", "filename":"tabelle_html_datenblatt.xsl", "ord":"1"}
 ] />
 

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

@@ -1,2 +1,3 @@
 1^d3js^D3JS (V7)^
 2^plot^Observable Plot^
+3^echarts^Apache Echarts^

superx/xml/js/viz/echarts-5.6.0-license.txt

@@ -0,0 +1,222 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+
+
+
+
+========================================================================
+Apache ECharts Subcomponents:
+
+The Apache ECharts project contains subcomponents with separate copyright
+notices and license terms. Your use of the source code for these
+subcomponents is also subject to the terms and conditions of the following
+licenses.
+
+BSD 3-Clause (d3.js):
+The following files embed [d3.js](https://github.com/d3/d3) BSD 3-Clause:
+    `/src/chart/treemap/treemapLayout.ts`,
+    `/src/chart/tree/layoutHelper.ts`,
+    `/src/chart/graph/forceHelper.ts`,
+    `/src/util/number.ts`
+See `d3-7.8.0-license.txt` for details of the license.

superx/xml/viz_components.xsl

@@ -81,7 +81,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:sx="http://memtext.de">
 		</head>
 
 	</xsl:template>
-	<xsl:template name="tableJavascript_viz">
+	<xsl:template name="tableJavascript_viz_alt">
 <script language="Javascript" type="text/javascript" src="../xml/js/jquery-2.1.1.min.js" />
 <script language="JavaScript" type="text/javascript" src="../xml/js/memtext/sx_functions.js"></script>
 
@@ -329,6 +329,233 @@ vizTypeProperties.push(newVizTypeProperty);
   stroke-opacity: .5;
 }
 </style>
+</xsl:template>
+<xsl:template name="importVizViewer">
+<script language="Javascript" type="text/javascript" src="../xml/js/jquery-2.1.1.min.js" />
+<script language="JavaScript" type="text/javascript" src="../xml/js/memtext/sx_functions.js"></script>
+<xsl:call-template name="importRendererLibs" />
+
+<!--<script language="JavaScript" type="text/javascript" src="../xml/js/viz/echarts.min.js"></script>-->
+<script language="JavaScript" type="text/javascript" src="../xml/js/viz/viz_viewer.js"></script>
+<!--<script language="JavaScript" type="text/javascript" src="../xml/js/viz/viz_functions.js"></script>-->
+<!--<xsl:call-template name="tableJavascript_viz" />-->
+<script language="Javascript" type="text/javascript">
+<xsl:text><![CDATA[
+var commonChartProperties=[];
+]]></xsl:text>
+<xsl:for-each select="/ergebnisse/ergebnis[@ordnr='0']/ergebniselement/chartProperties/commonChartProperty">
+<xsl:text>
+var newCommonChartProperty = new commonChartProperty("</xsl:text>
+<xsl:value-of select="@prop_uniquename" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@caption" />
+<xsl:text>",</xsl:text><xsl:choose>
+<xsl:when test="@is_mandatory=1"><xsl:text>true</xsl:text>
+</xsl:when>
+<xsl:otherwise>false</xsl:otherwise>
+</xsl:choose>
+<xsl:text>,"</xsl:text>
+<xsl:value-of select="@input_type_uniquename" />
+<xsl:text>"
+,"</xsl:text>
+<xsl:value-of select="@static_values" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@prop_range_from" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@prop_range_to" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@prop_default" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@prop_unit" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@explanation" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@group_caption" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@group_uniquename" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@renderer_uniquename" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@group_variable_name" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@variable_name" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@propValueType" />
+<xsl:text>",</xsl:text>
+<xsl:value-of select="@isGeneric" />
+<xsl:text>);
+commonChartProperties.push(newCommonChartProperty);
+</xsl:text>
+</xsl:for-each>
+
+<xsl:text>
+function vizRenderer(uniquename,caption) 
+{
+this.caption=caption;
+this.uniquename=uniquename;
+}
+
+var vizRenderers=[];
+</xsl:text>
+<xsl:for-each select="/ergebnisse/ergebnis[@ordnr='0']/ergebniselement/vizRenderers/vizRenderer">
+<xsl:text>
+var newVizRenderer = new vizRenderer("</xsl:text>
+<xsl:value-of select="@uniquename" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@caption" />
+<xsl:text>");
+vizRenderers.push(newVizRenderer);
+</xsl:text>
+</xsl:for-each>
+<xsl:text>
+function vizType(uniquename,caption,rendererUniquename,orientation) 
+{
+this.caption=caption;
+this.uniquename=uniquename;
+this.rendererUniquename=rendererUniquename,
+this.orientation=orientation;
+}
+
+var vizTypes=[];
+</xsl:text>
+<xsl:for-each select="/ergebnisse/ergebnis[@ordnr='0']/ergebniselement/vizTypes/vizType">
+<xsl:text>
+var newVizType = new vizType("</xsl:text>
+<xsl:value-of select="@uniquename" />
+<xsl:text>","</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>
+</xsl:for-each>
+<xsl:text>
+
+function vizTypeProperty(propUniquename,caption,typeUniquename,groupUniquename,isMandatory,propertyType,explanation) 
+{
+this.propUniquename=propUniquename;
+this.caption=caption;
+this.groupUniquename=groupUniquename;
+this.typeUniquename=typeUniquename;
+this.isMandatory=isMandatory;
+this.propertyType=propertyType;
+this.explanation=explanation;
+}
+
+var vizTypeProperties=[];
+</xsl:text>
+<xsl:for-each select="/ergebnisse/ergebnis[@ordnr='0']/ergebniselement/viz_type_properties/viz_type_property">
+<xsl:text>
+var newVizTypeProperty = new vizTypeProperty("</xsl:text>
+<xsl:value-of select="@uniquename" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@caption" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@viz_type_uniquename" />
+<xsl:text>","</xsl:text>
+<xsl:value-of select="@viz_property_group_uniquename" />
+<xsl:text>",</xsl:text>
+<xsl:choose>
+<xsl:when test="@is_mandatory='1'">
+<xsl:text>true</xsl:text>
+</xsl:when>
+<xsl:otherwise>
+<xsl:text>false</xsl:text>
+</xsl:otherwise>
+</xsl:choose>
+<xsl:text>,"</xsl:text>
+<xsl:value-of select="@propValueType" />
+<xsl:text>","");
+vizTypeProperties.push(newVizTypeProperty);
+</xsl:text>
+</xsl:for-each>
+<xsl:text><![CDATA[
+function initPage()
+{
+//zuerst Miniatur:
+var myChartModelStr="";
+var myDiv="";
+var rsNr=0;
+]]></xsl:text>
+<xsl:for-each select="ergebnisse">
+<xsl:for-each select="ergebnis/ergebniselement">
+<xsl:variable name="chart_uniquename"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
+<xsl:variable name="ergebniselement_ordnr"><xsl:value-of select="@ordnr" /></xsl:variable>
+<xsl:if test="$chart_uniquename != ''">
+<xsl:text>
+var myRenderer='</xsl:text>
+<xsl:value-of select="viz_charts/viz_chart[@uniquename=$chart_uniquename]/@renderer" />
+<xsl:text>';
+</xsl:text>
+<xsl:text><![CDATA[
+var myChartModel=]]></xsl:text>
+<xsl:value-of select="translate(viz_charts/viz_chart[@uniquename=$chart_uniquename]/@chartmodel,'§',$quote)" />
+<!--<xsl:text><![CDATA[
+var myChartCode=]]></xsl:text>
+<xsl:value-of select="translate(viz_charts/viz_chart[@uniquename=$chart_uniquename]/@chartcode,'§',$quote)" />
+<xsl:text><![CDATA[;
+var myDatasourceDef=]]></xsl:text>
+<xsl:value-of select="translate(viz_charts/viz_chart[@uniquename=$chart_uniquename]/@datasource_def,'§',$quote)" />
+-->
+<xsl:text><![CDATA[;
+
+myDiv="]]></xsl:text>
+<xsl:value-of select="concat('chartDiv',$ergebniselement_ordnr)" />
+<xsl:text><![CDATA[";
+rsNr=]]></xsl:text>
+<xsl:value-of select="$ergebniselement_ordnr" />
+<xsl:text><![CDATA[;
+createChartsViewer(myChartModel,myDiv,rsNr,myRenderer);
+myDiv="]]></xsl:text>
+<!--<xsl:value-of select="concat('modalCardImage',$ergebniselement_ordnr)" />
+<xsl:text>";
+//Detailseite mit Legende:
+myChartModelStr='Platzhalter d';
+
+createEchartsViewer(myChartModel,myDiv,rsNr);
+myDiv="</xsl:text>
+-->
+<xsl:value-of select="concat('modalCardDetailImage',$ergebniselement_ordnr)" />
+<xsl:text>";
+myChartModelStr='Platzhalter_dl';
+createChartsViewer(myChartModel,myDiv,rsNr,myRenderer);
+</xsl:text>
+</xsl:if>
+</xsl:for-each>
+</xsl:for-each>
+<xsl:text><![CDATA[
+}
+
+function createChartsViewer(chartModel,chartDiv,rsNr,myRenderer)
+{
+if(myRenderer=="echarts")
+	{
+	renderEChart2(chartModel,chartDiv,rsNr);
+	}
+else
+{
+//d3js or plot:
+//myChartModel=JSON.parse(myChartModelStr);
+renderPlotD3Chart(chartDiv,chartModel,rsNr);
+}
+}
+
+function toggleLegendeDisplay(legendeDiv)
+{
+var myDiv=document.getElementById(legendeDiv);
+if(myDiv.style.display=="block")
+		myDiv.style.display="none";
+	else
+		myDiv.style.display="block";
+
+}
+
+]]></xsl:text>
+</script>
+
 </xsl:template>
 <xsl:template name="buildVizMetadata">
 <xsl:variable name="vizInitialName">
@@ -538,6 +765,9 @@ and (@renderer_uniquename='plot' or @renderer_uniquename='d3js') ]">
 </xsl:for-each>
 </xsl:template>
 <xsl:template name="modalCards" >
+<xsl:param name="kachelbreite" select="600"/>
+<xsl:param name="kachelhoehe" select="400"/>
+
 <xsl:for-each select="/ergebnisse">
 <xsl:for-each select="ergebnis/ergebniselement">
 <xsl:variable name="chart_uniquename"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
@@ -577,6 +807,10 @@ and (@renderer_uniquename='plot' or @renderer_uniquename='d3js') ]">
         <div class="card">
           <div class="card-image">
       <div id="{concat('modalCardDetailImage',$ergebniselement_ordnr)}">
+<xsl:attribute name="style"><xsl:value-of select="concat('width:',$kachelbreite,'px;height:',$kachelhoehe,'px;')" />
+</xsl:attribute>
+      <!--<div id="{concat('chartDiv',$ergebniselement_ordnr)}">
+</div>-->
       Picture placeholder
       </div>
       </div>
@@ -738,6 +972,36 @@ Stand: <xsl:value-of select="../stand" /></p>
 <xsl:template name="viewer_kachel">
 <xsl:param name="caption" />
 <xsl:param name="ergebniselement_ordnr" />
+<xsl:param name="kachelbreite" select="600"/>
+<xsl:param name="kachelhoehe" select="400"/>
+<xsl:param name="link_maskennummer" />
+<xsl:param name="link_chart_uniquename" />
+<xsl:param name="link_tablestylesheet" select="'viz_html_chart_viewer_mask_and_table.xsl'"/>
+
+<div class="card is-shady">
+<div class="card-image">
+<!--zum Debuggen: <a onClick="initPage()">Anzeigen</a><br />-->
+<a onClick="{concat('javascript:openModalCardDetail(',$ergebniselement_ordnr,');')}">
+<div id="{concat('chartDiv',$ergebniselement_ordnr)}" style="width: 600px;height:400px;"></div>
+</a> 
+<xsl:if test="$link_maskennummer!=''">
+<br /> <a href="{concat('../servlet/SuperXmlTabelle?tid=',$link_maskennummer,'&amp;Grafik=',$link_chart_uniquename,'&amp;tablestylesheet=',$link_tablestylesheet)}">Details...</a>
+</xsl:if>
+</div>
+<p>
+<!--<a onClick="{concat('javascript:openModalImage(',$ergebniselement_ordnr,');')}">
+<span class="button is-success is-small modal-button">Vergrößern ...</span></a>
+ -->
+
+
+</p>
+
+              </div>
+
+</xsl:template>
+<xsl:template name="viewer_kachel_alt">
+<xsl:param name="caption" />
+<xsl:param name="ergebniselement_ordnr" />
 <div class="card is-shady">
 <div class="card-image">
 
@@ -1065,5 +1329,61 @@ Platzhalter
 </xsl:variable>
 <xsl:value-of select="translate($chartModel,'§',$quote)"/>
 </xsl:template>
+<xsl:template name="viz_navi_top" >
+<!-- kann überlagert werden -->
+<xsl:call-template name="nd_navi_top" />
+</xsl:template>
+
+<xsl:template name="importRendererLibs">
+<xsl:variable name="importEcharts">
+<xsl:call-template name="isRendererNeeded">
+<xsl:with-param name="renderer" select="'echarts'" />
+</xsl:call-template>
+</xsl:variable>
+<xsl:if test="contains($importEcharts,'true')">
+<script language="JavaScript" type="text/javascript" src="../xml/js/viz/echarts.min.js"></script>
+</xsl:if>
+<xsl:variable name="importD3js">
+<xsl:call-template name="isRendererNeeded">
+<xsl:with-param name="renderer" select="'d3js'" />
+</xsl:call-template>
+</xsl:variable>
+<xsl:if test="contains($importD3js,'true')">
+<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.min.js" />
+</xsl:if>
+<xsl:variable name="importPlot">
+<xsl:call-template name="isRendererNeeded">
+<xsl:with-param name="renderer" select="'plot'" />
+</xsl:call-template>
+</xsl:variable>
+<xsl:if test="contains($importPlot,'true')">
+<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:if>
+</xsl:template>
+
+<xsl:template name="isRendererNeeded">
+<xsl:param name="renderer" />
+<xsl:for-each select="/ergebnisse/ergebnis/felder/feld[@varname='Grafik']" >
+<xsl:variable name="chart_uniquename" select="value" />
+<xsl:if test="count(viz_charts/viz_chart[@uniquename=$chart_uniquename]/@renderer =$renderer) !=0">
+<xsl:text>true</xsl:text>
+</xsl:if>
+</xsl:for-each>
+</xsl:template>
+<xsl:template name="displayTables">
+<!-- jetzt Tabelle-->
+<div style="margin-left:50px">
+<xsl:for-each select="/ergebnisse/ergebnis/ergebniselement">
+<p class="teiltabelle_titel">
+<xsl:text>Tabelle </xsl:text><a onclick="{concat('toggleTableVisibility(',$colon,'toggleBtnTable',@ordnr+1, $colon,',',$colon, 'table',@ordnr+1,$colon,');')}"> <img  id="{concat('toggleBtnTable',@ordnr+1)}" src="../images/minus-circled.svg" height="10px" border="0" /></a></p>
+
+<xsl:call-template name="nd_singleTable">
+<xsl:with-param name="ergebniselement_ordnr" select="@ordnr" />
+<xsl:with-param name="showPager" select="'none'" />
+</xsl:call-template>
+</xsl:for-each>
+</div>
+</xsl:template>
 
 </xsl:stylesheet>

superx/xml/viz_html_chart_viewer.xsl

@@ -19,12 +19,11 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 
 <xsl:variable name="colon"><xsl:text>'</xsl:text></xsl:variable>
 <xsl:variable name="quote"><xsl:text>"</xsl:text></xsl:variable>
-<xsl:variable name="colwidth"><xsl:text>is-full</xsl:text></xsl:variable>
 
-<xsl:variable name="defaultRenderer" select="'plot'" />
+<!--<xsl:variable name="defaultRenderer" select="'echarts'" />
 <xsl:variable name="availableRendererPlot" select="'true'" />
 <xsl:variable name="availableRendererD3" select="'true'" />
-
+-->
 <xsl:template match="/">
 <xsl:variable name="maskenname">
 <xsl:choose>
@@ -49,17 +48,20 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 <xsl:call-template name="nd_htmlscript" />
 <xsl:call-template name="nd_tableJavascript" />
 <xsl:call-template name="nd_tableCSS" />
-<xsl:call-template name="importVizJavascriptLibsViewer"></xsl:call-template> 
+<xsl:call-template name="ude_tableCSS" />
+<xsl:call-template name="importVizViewer"></xsl:call-template> 
 
 <body  class="has-navbar-fixed-top" onload="document.getElementById('progressbar').style.display='none';initPage();"> 
 <!--#Template Beginn Top-Navigation-->
-<xsl:call-template name="nd_navi_top" /> 
+<xsl:call-template name="viz_navi_top" />
+<!--<xsl:call-template name="ude_header_dashboard" />-->
+
+
 <!--#Template Ende Top-Navigation-->
 
 <div class="columns">
-
 <!--#Template Beginn Navigations-Panel Auswertungen-->
-<xsl:if test="/ergebnisse/@showNavigation='true' and 1=0"><!-- erstmal kein Panel,weil der Asssistent schon recht breit ist -->
+<xsl:if test="/ergebnisse/@showNavigation='true'"><!-- erstmal kein Panel,weil der Asssistent schon recht breit ist -->
 <xsl:for-each select="/ergebnisse">
 <xsl:call-template name="nd_navi_panel" />
 </xsl:for-each>
@@ -67,169 +69,530 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 <!--#Template Ende Navigations-Panel Auswertungen-->
 
 <!--Beginn Seitentitel, Krümelpfad, Knopfleiste, Legende, Erläuterung-->
-<section class="hero-body">
-<div class="container"> 
-<div class="columns is-mobile is-left">
-<div class="column is-full">
-<div class="card "> 
-<div class="card-content">
 
 <xsl:call-template name="nd_progressbar" /> 
 
+<div id="content">
+<!--#Template Beginn Seitentitel-->
+<xsl:variable name="masken_tid"><xsl:value-of select="/ergebnisse/ergebnis[@ordnr='0']/maskenname/@id"/></xsl:variable> 
 <xsl:call-template name="nd_pagetitle" >
-<xsl:with-param name="title" select="/ergebnisse/ergebnis/maskenname" />
+<xsl:with-param name="title" select="$maskenname" />
 <xsl:with-param name="subtitle" />
-<xsl:with-param name="icon_classname"  />
+<xsl:with-param name="icon_classname" select="/ergebnisse/menue/eintraege/eintrag[@isMaske='true' and tid=$masken_tid]/css_class" />
 
 </xsl:call-template>
 
-<xsl:call-template name="viz_viewer"/>
+<!--#Template Krümelpfad-->
-<xsl:call-template name="bottombar" />
+<xsl:call-template name="nd_breadcrumb" />        	
- <xsl:comment>customfooter</xsl:comment>
+<!--#Template Ende Krümelpfad-->
- </div> <!--Ende content -->
+<xsl:call-template name="buildVizMetadata" />
-</div> <!--Ende card-content-->
-</div> <!--Ende card-background -->
-</div> <!--Ende column-->
-</div> <!--Ende hero-columns-->
-
-</section> <!--Ende hero = Berichts-Card-->
-</div> <!--Ende site-columns-->
-<xsl:call-template name="modalCards" />
-</body>
-<!-- end body -->
-</html>
-</xsl:template>
-<!-- end main -->
-
-
 
+<!-- start tabellen-->
+<section class="hero-body">
+<xsl:for-each select="ergebnisse/ergebnis[felder/feld[@varname='Grafik']/value!='']/ergebniselement">
+<xsl:variable name="ergebniselement_counter" select="position()" />
+<xsl:variable name="ergebniselement_ordnr" select="@ordnr" />
+<xsl:variable name="chart_uniquename"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
+<xsl:if test="/ergebnisse/@isMakro='true'">
+<p class="teiltabelle_titel"><!--<xsl:value-of select="../felder/feld[@varname='Teiltabelle']/value_caption" />-->
+<xsl:call-template name="nd_getTeiltabelleName">
+<xsl:with-param name="ergebniselement_ordnr" select="$ergebniselement_ordnr"/>
+</xsl:call-template>
+<xsl:text> </xsl:text><a onclick="{concat('toggleTableVisibility(',$colon,'toggleBtnTable',$ergebniselement_ordnr+1, $colon,',',$colon, 'table',$ergebniselement_ordnr+1,$colon,');')}"> <img  id="{concat('toggleBtnTable',$ergebniselement_ordnr+1)}" src="../images/minus-circled.svg" height="10px" border="0" /></a></p>
 
+</xsl:if>
 
 
-<xsl:template name="viz_viewer">
+<section class="container" id="{concat('table',$ergebniselement_ordnr+1)}" style="display:block"> <!--Beginn Kartenreihe -->
-<xsl:param name="show_maskenfelder" select="'true'" />
-<xsl:if test="/ergebnisse/@isMakro='true'">
-<h1><xsl:value-of select="/ergebnisse/makro/name" /></h1>
-</xsl:if>
-<p></p>
-<xsl:call-template name="buildVizMetadata" />
 
-<!-- end Kopf-->
-<!-- start Grafiken-->
-<!-- Berechne den Umbruch der Spalten für die Kacheln
-z.B. 6 Grafiken ergibt einen Umbruch nach der 3. Teiltabelle
-Formel: ANZ / 2 kaufm. gerundet 
--->
-<span class="separator">&#160;</span>
-<!--Beginn Selektions-Card-->
-<!--Beginn Berichtstitel, Pfad, Knopfleiste-->
-<section class="hero-body has-background-light">
-<section class="container"> <!--Beginn Kartenreihe -->
 <div class="columns features is-mobile is-left"> <!--Beginn columns Kartenreihe -->
 
-<xsl:for-each select="ergebnisse/ergebnis[felder/feld[@varname='Grafik']/value!='']/ergebniselement">
-<xsl:variable name="ergebniselement_counter" select="position()" />
-<xsl:variable name="chart_uniquename"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
-<xsl:variable name="ergebniselement_ordnr"><xsl:value-of select="@ordnr" /></xsl:variable>
 
 
 <!--<p><xsl:value-of select="concat('Zähler: ',$ergebniselement_counter)"/></p>-->
 <div>
-<xsl:attribute name="class"><xsl:text>column is-</xsl:text><xsl:value-of select="$colwidth"/></xsl:attribute>
+<xsl:attribute name="class"><xsl:text>column is-full</xsl:text></xsl:attribute>
 <xsl:call-template name="viewer_kachel">
 <xsl:with-param name="caption" select="viz_charts/viz_chart[@uniquename=$chart_uniquename]/@caption"/>
 <xsl:with-param name="ergebniselement_ordnr" select="$ergebniselement_ordnr" />
 </xsl:call-template>
 <!--<p><xsl:value-of select="concat($spalten_anz,'-',$ergebniselement_counter,':',$ergebniselement_counter mod $spalten_anz)"/></p>-->
 </div>
-<!-- neue Zeile wenn counter mod Spaltenanz. =0 -->
 
+</div>
 
+</section>
 </xsl:for-each>
-</div><!-- der columns -->
+</section>
-</section><!-- der letzten Kartenreihe -->
+</div><!--content-div-->
-</section><!-- des Portals -->
+
+</div><!--columns für navipanel-->
+<xsl:call-template name="bottombar" />
+ <xsl:comment>customfooter</xsl:comment>
+
+<xsl:call-template name="modalCards" />
+</body>
+<!-- end body -->
+</html>
 </xsl:template>
-<!--<xsl:template name="viewer_kachel">
+<!-- end main -->
-<xsl:param name="caption" />
+
-<xsl:param name="ergebniselement_ordnr" />
+
-<div class="card is-shady">
+
-<div class="card-image">
+
-<div id="{concat('chartDiv',$ergebniselement_ordnr)}">
+
-Platzhalter
+
+
+
+
+<xsl:template name="ude_header_dashboard_alt">
+<header>
+<div class="hs_header">
+	
+               <div class="hs_header_box1"></div>
+                     <div class="hs_header_box2">
+		     	
+                     	<a class="button is-link is-outlined is-small" onclick="alert('todo');">Studienanfänger*innen</a>   
+			<a class="button is-link is-outlined is-small" onclick="alert('todo');">Studierende</a>   
+			<a class="button is-link is-outlined is-small" onclick="alert('todo');">Absolvent*innen</a>   
+			<a class="button is-link is-outlined is-small" onclick="alert('todo');">Doktorand*innen</a>   
+			
+			<!--<p class="cockpit_title">Universität Duisburg-Essen</p>-->
+			<div class="field"><span class="buttonlist">	     
+			    <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true" href="javascript:exportBooklet('application/pdf')">
+		 <img title="Ausgabe im PDF-Querformat" alt="Ausgabe im PDF-Querformat" src="../images/icons/into_pdf.svg" class="svg_icon" border="0" /></a>
+		 <span class="separator">&#160;</span>
+	     <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true" href="javascript:exportBooklet('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')">
+	     	<img title="Ausgabe in Excel" alt="Ausgabe in Excel" src="../images/icons/into_excel_normal.svg" class="svg_icon" border="0" /></a>
+		<span class="separator">&#160;</span>
+	     <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true" href="javascript:exportBooklet('application/vnd.openxmlformats-officedocument.wordprocessingml.document')">
+	     	<img title="Ausgabe in Word" alt="Ausgabe in Word" width="25px" height="25px" src="../images/icons/into_word.svg" class="svg_icon" border="0" /></a>
+	 
+	 </span>
+		  
 	</div>
+			<a href="https://www.uni-due.de/verwaltung/dtac/akademisches_controlling.php">
+                           <figure class="image is-64x64"><img src="../images/signet_ude_rgb.svg" title="UDE. Akademisches Controlling" /></figure></a>
 		     </div>
-<p>
-<a onClick="{concat('javascript:openModalImage(',$ergebniselement_ordnr,');')}">
-<span class="button is-success is-small modal-button">Vergrößern ...</span></a>
 
-<a onClick="{concat('javascript:openModalCardDetail(',$ergebniselement_ordnr,');')}">
-<span class="button is-link is-small modal-button">Mehr Infos ...</span></a>
 
-</p>
+	       <div class="hs_header_box1"></div>
        
 </div>
+</header>
+</xsl:template>
+<xsl:template name="ude_tableCSS">
+<!-- aus 800000280_datencockpit.xsl -->
+		<style type="text/css">
+.dojoDialog {background : #eee;	border : 1px solid #999;-moz-border-radius : 5px;padding : 4px;width:650;height:420px;overflow:scroll}
+.treebutton {
+      border:none;
+      margin: 0 4px 0 0;
+    }
+ @media print{
+.dontprint{display:none;}
+}
+
+/*Cockpit-Header*/
+.hs_header {
+  position: fixed; 
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 20;	 /*positioniert sich im flow am nähesten zum Betrachter*/ 
+}
+
+.cockpit_title {
+   color: #004C93;
+   font-size: 3.0em;
+   font-weight: 800;
+}   
+
+.hs_header_box1 {	   	/*für Balken-Box über/unter Cockpittitel*/
+   background: #004C93;
+   height: 1.0rem; 
+}
+
+.hs_header_box2 {	   	/*für Logo-/Cockpittitel-Box*/
+   display: flex;
+   height: 4.0rem; 
+   padding: 0.3rem 17.0rem 0rem 9.0rem;   /*für Padding: ob re un li*/
+   align-items: center;		    /*für vertikale Ausrichtung d Elemente*/
+   justify-content: space-between;  /*für gleichm. Leerraum zw. Elementen*/
+   background-color: white;
+}
+
+
+/*Buttons mit is-link=UDE-Blau*/
+.button.is-link {
+    background-color: #004C93;         /*link-Blau:#3273dc; UDE-Blau:#004C93*/
+    border-color: transparent;
+    color: #fff; }
+  .button.is-link:hover, .button.is-link.is-hovered {
+      background-color: #276cda;
+      border-color: transparent;
+      color: #fff; }
+    .button.is-link:focus, .button.is-link.is-focused {
+      border-color: transparent;
+      color: #fff; }
+      .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) {
+        box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); }
+    .button.is-link:active, .button.is-link.is-active {
+      background-color: #2366d1;
+      border-color: transparent;
+      color: #fff; }
+    .button.is-link[disabled],
+    fieldset[disabled] .button.is-link {
+      background-color: #004C93;
+      border-color: transparent;
+      box-shadow: none; }
+    .button.is-link.is-inverted {
+      background-color: #fff;
+      color: #004C93; }
+      .button.is-link.is-inverted:hover, .button.is-link.is-inverted.is-hovered {
+        background-color: #f2f2f2; }
+      .button.is-link.is-inverted[disabled],
+      fieldset[disabled] .button.is-link.is-inverted {
+        background-color: #fff;
+        border-color: transparent;
+        box-shadow: none;
+        color: #004C93; }
+    .button.is-link.is-loading::after {
+      border-color: transparent transparent #fff #fff !important; }
+    .button.is-link.is-outlined {
+      background-color: transparent;
+      border-color: #004C93;
+      color: #004C93; }
+      .button.is-link.is-outlined:hover, .button.is-link.is-outlined.is-hovered, .button.is-link.is-outlined:focus, .button.is-link.is-outlined.is-focused {
+        background-color: #004C93;
+        border-color: #004C93;
+        color: #fff; }
+      .button.is-link.is-outlined.is-loading::after {
+        border-color: transparent transparent #004C93; #004C93; !important; }
+      .button.is-link.is-outlined.is-loading:hover::after, .button.is-link.is-outlined.is-loading.is-hovered::after, .button.is-link.is-outlined.is-loading:focus::after, .button.is-link.is-outlined.is-loading.is-focused::after {
+        border-color: transparent transparent #fff #fff !important; }
+      .button.is-link.is-outlined[disabled],
+      fieldset[disabled] .button.is-link.is-outlined {
+        background-color: transparent;
+        border-color: #004C93;
+        box-shadow: none;
+        color: #004C93; }
+    .button.is-link.is-inverted.is-outlined {
+      background-color: transparent;
+      border-color: #fff;
+      color: #fff; }
+      .button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined.is-hovered, .button.is-link.is-inverted.is-outlined:focus, .button.is-link.is-inverted.is-outlined.is-focused {
+        background-color: #fff;
+        color: #004C93; }
+      .button.is-link.is-inverted.is-outlined.is-loading:hover::after, .button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-link.is-inverted.is-outlined.is-loading:focus::after, .button.is-link.is-inverted.is-outlined.is-loading.is-focused::after {
+        border-color: transparent transparent #004C93; #004C93; !important; }  
+     
+.exportoptions {
+   margin-top: 2.0em; 
+}
+   
+.buttonlist{			/*für resposive Buttonleiste*/
+   display: flex; 
+   flex-flow: no wrap;
+   justify-content: flex-start;
+   padding: 0.3rem 0rem 0.3rem 0rem; /*für Padding: ob re un li*/
+   }
+   
+.buttonlist img { 		/*für Icongröße in Buttonleiste*/
+    height: 2.5rem; 
+    width: auto; 
+    margin-top: 0em; }
+    
+/*Auswahlfelder*/
+.card {				/*für Auswahlfeldercard-Position*/
+   display: flex;
+   flex-flow: column;
+   margin-left: 0em;		
+   margin-top: 8em; 		
+   min-width: 10.0em;
+   width: 100%; 
+   } 		
+   
+.label-container, .button-label { /*für einh.responsive Feldbezeichner*/
+   display: flex;
+   justify-content: left;
+   background: ;	
+   min-width: 10.0em;		/*für kleine Viewports*/
+   width: 10%; }		/*für kleine Viewports*/
+   
+.control-new { 			/*für einheitliche Controls*/
+   min-width: 10.0em; 		/*für kleine Viewports*/
+   width: 10%; 			/*für große Viewports*/
+   }
+   
+.button {			/*für Button-Bezeichner-Ausrichtung*/
+   display: flex;
+   justify-content: left; }
+ 
+/*Erläuterungen/Legende*/
+.box-new {			/*für Kopfzeile mit Close-Button*/
+   display: flex;
+   justify-content: space-between;
+   font-weight: bold;
+}	
+
+.leg_erl {
+  background-color: whitesmoke; /*für Abschnitthintergrund, Schrift*/ 
+  font-size: 0.8em;
+}
+ 
+.dl_title {			/*für Texthervorhebungen*/ 
+   display: flex;
+   justify-content: center;
+   background: inherit;	
+   font-size: 1.2em;
+   font-weight: 400;   
+ }
+ /*Datentabellen*/
+.table-container {
+   z-index: 10; /*positioniert sich im flow hinter dem hs-header*/ 
+}
+ table.ergtabelle tr.listRowOdd td.leer
+ {
+ border:thin solid white;
+ background-color:white;
+ }
+  table.ergtabelle tr.listRowEven td.leer
+ {
+ border:thin solid white;
+ background-color:white;
+ }
+ table.ergtabelle tr td.leer
+ {
+ border:thin solid white;
+ background-color:white;
+ }
+ table.ergtabelle tr th.leer
+ {
+ border:thin solid white;
+ background-color:white;
+ }
+  table.ergtabelle tr th.header
+ {
+ vertical-align:center;
+text-align:center;
  
-</xsl:template>-->
+ }
-<xsl:template name="importVizJavascriptLibsViewer">
-<script language="Javascript" type="text/javascript" src="../xml/js/jquery-2.1.1.min.js" />
-<script language="JavaScript" type="text/javascript" src="../xml/js/memtext/sx_functions.js"></script>
-<xsl:call-template name="tableJavascript_viz" />
-<script language="Javascript" type="text/javascript">
-<xsl:text><![CDATA[
  
-function initPage()
+  table.ergtabelle
  {
-var myChartModelStr="";
+ border:thin solid white;
-var myDiv="";
-]]></xsl:text>
-<xsl:for-each select="ergebnisse">
-<xsl:for-each select="ergebnis/ergebniselement">
-<xsl:variable name="chart_uniquename"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
-<xsl:variable name="ergebniselement_ordnr"><xsl:value-of select="@ordnr" /></xsl:variable>
-<xsl:if test="$chart_uniquename != ''">
-<xsl:text><![CDATA[
-myChartModelStr=']]></xsl:text>
-<xsl:value-of select="translate(viz_charts/viz_chart[@uniquename=$chart_uniquename]/@chartmodel,'§',$quote)" />
-<xsl:text><![CDATA[';
-myDiv="]]></xsl:text>
-<xsl:value-of select="concat('chartDiv',$ergebniselement_ordnr)" />
-<xsl:text><![CDATA[";
-createViewer(myChartModelStr,myDiv);
-myDiv="]]></xsl:text>
-<xsl:value-of select="concat('modalCardImage',$ergebniselement_ordnr)" />
-<xsl:text><![CDATA[";
-createViewer(myChartModelStr,myDiv);
-myDiv="]]></xsl:text>
-<xsl:value-of select="concat('modalCardDetailImage',$ergebniselement_ordnr)" />
-<xsl:text><![CDATA[";
-createViewer(myChartModelStr,myDiv);
-
-]]></xsl:text>
-</xsl:if>
-</xsl:for-each>
-</xsl:for-each>
-<xsl:text><![CDATA[
  }
  
-function createViewer(myChartModelStr,chartDiv)
+ /* Zahlen rechtsbündig:*/
+   table.ergtabelle tbody tr.listRowEven td.integer
+ {
+ text-align:right;
+empty-cells:show
+vertical-align:center;
+ }
+    table.ergtabelle tbody tr.listRowOdd td.integer
+ {
+ text-align:right;
+empty-cells:show
+vertical-align:center;
+ }
+    table.ergtabelle tbody tr.listRowEven td.decimal
+ {
+ text-align:right;
+empty-cells:show
+vertical-align:center;
+ }
+    table.ergtabelle tbody tr.listRowOdd td.decimal
  {
-myChartModel=JSON.parse(myChartModelStr);
+ text-align:right;
-renderChart(chartDiv,myChartModel);
+empty-cells:show
+vertical-align:center;
  }
+</style>
+</xsl:template>
+
+<xsl:template name="buildVizMetadata">
+<xsl:variable name="vizInitialName">
+<xsl:choose>
+<xsl:when test="/ergebnisse/@isMakro='true'">
+<xsl:value-of select="/ergebnisse/makro/name"/>
+</xsl:when>
+<xsl:otherwise>
+<xsl:value-of select="/ergebnisse/ergebnis/maskenname" />
+</xsl:otherwise>
+</xsl:choose>
+</xsl:variable>
+  <!--<xsl:call-template name="navigationsmenue" />-->
+<script language="Javascript">
 
-function toggleLegendeDisplay(legendeDiv)
+<xsl:text>
+
+var vizInitialName='</xsl:text><xsl:value-of select="$vizInitialName"/><xsl:text>';
+
+
+function dataRowMetaData(tableId,nr,colname,colcaption,coltype,colfunction)
+    {
+    this.tableId=tableId;
+    this.nr=nr;
+this.colname=colname;
+this.colcaption=colcaption;
+this.coltype=coltype;
+this.colfunction=colfunction;
+}
+
+
+function tableMetaData(nr,value,name,isDefault)
 {
-var myDiv=document.getElementById(legendeDiv);
+    this.value=value;
-if(myDiv.style.display=="block")
+    this.nr=nr;
-		myDiv.style.display="none";
+    this.name=name
-	else
+    this.isDefault=isDefault;
-		myDiv.style.display="block";
 
 }
 
-]]></xsl:text>
+var rsTableMetaData=new Array();
+var rsColumnMetaData=new Array();
+var rs=new Array();
+
+</xsl:text>
+
+
+
 </script>
 
+
+<xsl:for-each select="/ergebnisse/ergebnis/ergebniselement">
+<xsl:call-template name="buildVizData" >
+<xsl:with-param name="tableId" select="@ordnr" />
+</xsl:call-template>
+</xsl:for-each>
+
+</xsl:template>
+<xsl:template name="buildVizData">
+<xsl:param name="tableId" />
+
+<script language="Javascript">
+
+<xsl:text>
+
+rsTableMetaData.push(new tableMetaData(
+</xsl:text>
+<xsl:value-of select="position()"/>
+<xsl:text>,'</xsl:text>
+<xsl:value-of select="$tableId"/>
+<xsl:text>','</xsl:text>
+<xsl:value-of select="concat('Tab. ',$tableId+1)"/>
+<xsl:text>',
+</xsl:text>
+<xsl:choose>
+<xsl:when test="position()=1">
+<xsl:text>true</xsl:text>
+</xsl:when>
+<xsl:otherwise>
+<xsl:text>false</xsl:text>
+</xsl:otherwise>
+</xsl:choose>
+<xsl:text>
+));
+rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]=new Array();
+
+//var myChartModel=new chartModel(1,"","",rsTableMetaData);
+
+function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</xsl:text>
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:text>,</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template>
+</xsl:for-each>
+<xsl:text>
+)
+    {
+    this.rownr=rownr;
+    </xsl:text>
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:text>this.</xsl:text><xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template><xsl:text>=</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template><xsl:text>;
+</xsl:text>
+</xsl:for-each><xsl:text>
+}
+
+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>
+
+
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:variable name="rownr">
+<xsl:value-of select="position()"/>
+</xsl:variable>
+<xsl:text>
+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="$rownr"/>
+<xsl:text>,'</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template>
+<xsl:text>','</xsl:text>
+<xsl:call-template name="remove_linebreaksAndQuot">
+<xsl:with-param name="volltext" select="wert" />
+</xsl:call-template>
+<xsl:text>',0,null));</xsl:text> <!--coltype noch unbekannt, colfunction unnötig-->
+</xsl:for-each>
+
+
+<xsl:for-each select="sqlerg/row">
+<xsl:variable name="rownr">
+<xsl:value-of select="position()"/>
+</xsl:variable>
+<xsl:if test="$rownr=1">
+<!-- first metadata -->
+<xsl:for-each select="col">
+<xsl:variable name="colnr">
+<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)"/><xsl:text>].coltype=</xsl:text><xsl:value-of select="@typ"/>
+<xsl:text>;
+</xsl:text>
+</xsl:for-each>
+
+</xsl:if>
+<!--now resultset-->
+<xsl:text>
+//rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]= new Array();
+rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(</xsl:text><xsl:value-of select="$rownr"/>
+<xsl:for-each select="col">
+<xsl:text>,</xsl:text>
+<xsl:choose>
+<xsl:when test="@typ='1'"><xsl:text>'</xsl:text>
+<xsl:call-template name="remove_linebreaksAndQuot">
+<xsl:with-param name="volltext" select="wert" />
+</xsl:call-template>
+<xsl:text>'</xsl:text></xsl:when>
+<!--todo:Typ Datum --> 
+<xsl:when test="string-length(wert)=0"><xsl:text>null</xsl:text>
+</xsl:when>
+<xsl:otherwise>
+<xsl:value-of select="wert"/>
+</xsl:otherwise>
+</xsl:choose>
+</xsl:for-each>
+<xsl:text>));
+</xsl:text>
+</xsl:for-each>
+
+
+</script>
 </xsl:template>
 </xsl:stylesheet>

superx/xml/viz_html_chart_viewer_grid.xsl

@@ -20,10 +20,10 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 <xsl:variable name="colon"><xsl:text>'</xsl:text></xsl:variable>
 <xsl:variable name="quote"><xsl:text>"</xsl:text></xsl:variable>
 
-<xsl:variable name="defaultRenderer" select="'plot'" />
+<!--<xsl:variable name="defaultRenderer" select="'echarts'" />
 <xsl:variable name="availableRendererPlot" select="'true'" />
 <xsl:variable name="availableRendererD3" select="'true'" />
-
+-->
 <xsl:template match="/">
 <xsl:variable name="maskenname">
 <xsl:choose>
@@ -48,14 +48,16 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 <xsl:call-template name="nd_htmlscript" />
 <xsl:call-template name="nd_tableJavascript" />
 <xsl:call-template name="nd_tableCSS" />
-<xsl:call-template name="importVizJavascriptLibsViewer"></xsl:call-template> 
+<xsl:call-template name="ude_tableCSS" />
+<xsl:call-template name="importVizViewer"></xsl:call-template> 
 
 <body  class="has-navbar-fixed-top" onload="document.getElementById('progressbar').style.display='none';initPage();"> 
 <!--#Template Beginn Top-Navigation-->
-<xsl:call-template name="nd_navi_top" /> 
+<xsl:call-template name="viz_navi_top" />
-<!--#Template Ende Top-Navigation-->
+<!--<xsl:call-template name="ude_header_dashboard" />-->
 
-<div class="columns">
+
+<!--#Template Ende Top-Navigation-->
 
 <!--#Template Beginn Navigations-Panel Auswertungen-->
 <xsl:if test="/ergebnisse/@showNavigation='true' and 1=0"><!-- erstmal kein Panel,weil der Asssistent schon recht breit ist -->
@@ -66,26 +68,33 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 <!--#Template Ende Navigations-Panel Auswertungen-->
 
 <!--Beginn Seitentitel, Krümelpfad, Knopfleiste, Legende, Erläuterung-->
-<section class="hero-body">
-<div class="container"> 
-<div class="columns is-mobile is-left">
-<div class="column is-full">
-<div class="card "> 
-<div class="card-content">
 
 <xsl:call-template name="nd_progressbar" /> 
 
-<xsl:call-template name="viz_viewer_columnwise"/>
+<div id="content" style="padding-left:1rem">
+<!--#Template Beginn Seitentitel-->
+<xsl:variable name="masken_tid"><xsl:value-of select="/ergebnisse/ergebnis[@ordnr='0']/maskenname/@id"/></xsl:variable> 
+<xsl:call-template name="nd_pagetitle" >
+<xsl:with-param name="title" select="$maskenname" />
+<xsl:with-param name="subtitle" />
+<xsl:with-param name="icon_classname" select="/ergebnisse/menue/eintraege/eintrag[@isMaske='true' and tid=$masken_tid]/css_class" />
+
+</xsl:call-template>
+
+<!--#Template Krümelpfad-->
+<!--<xsl:call-template name="nd_breadcrumb" />-->        	
+<!--#Template Ende Krümelpfad-->
+<xsl:call-template name="buildVizMetadata" />
+
+
+<xsl:call-template name="viz_viewer_grid" />
+
+</div><!--content-->
+
+
 <xsl:call-template name="bottombar" />
  <xsl:comment>customfooter</xsl:comment>
- </div> <!--Ende content -->
+
-</div> <!--Ende card-content-->
-</div> <!--Ende card-background -->
-</div> <!--Ende column-->
-</div> <!--Ende hero-columns-->
-
-</section> <!--Ende hero = Berichts-Card-->
-</div> <!--Ende site-columns-->
 <xsl:call-template name="modalCards" />
 </body>
 <!-- end body -->
@@ -98,166 +107,534 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 
 
 
-<xsl:template name="viz_viewer_columnwise">
-<xsl:if test="/ergebnisse/@isMakro='true'">
-<h1><xsl:value-of select="/ergebnisse/makro/name" /></h1>
-</xsl:if>
-<p></p>
-<xsl:call-template name="buildVizMetadata" />
 
-<!-- end Kopf-->
+<xsl:template name="viz_viewer_grid">
-<!-- start Grafiken-->
+
-<!-- Berechne den Umbruch der Spalten für die Kacheln
+<!-- Variableninitialisierung fürs Dashboard:
-z.B. 6 Grafiken ergibt einen Umbruch nach der 3. Teiltabelle
-Formel: ANZ / 2 kaufm. gerundet 
 -->
 <xsl:variable name="spalten_anz">
-<xsl:value-of select="max(number(/ergebnisse/ergebnis/felder/feld[@varname='Spaltenanzahl']/value))"/>
+<!--<xsl:value-of select="2"/>-->
+<xsl:value-of select="/ergebnisse/ergebnis/felder/feld[@varname='Spaltenanzahl']/value"/>
 </xsl:variable>
-<xsl:variable name="colwidth">
+<xsl:variable name="kachelbreite">
-<xsl:value-of select="12 div $spalten_anz"/>
+<xsl:value-of select="/ergebnisse/ergebnis/felder/feld[@varname='Kachelbreite']/value"/>
+</xsl:variable>
+<xsl:variable name="kachelhoehe">
+<xsl:value-of select="/ergebnisse/ergebnis/felder/feld[@varname='Kachelhöhe']/value"/>
 </xsl:variable>
 
 <xsl:variable name="ergebniselemente_anz">
 <xsl:value-of select="count(/ergebnisse/ergebnis[felder/feld[@varname='Grafik']])"/>
 </xsl:variable>
-<xsl:variable name="ergebniselemente_umbruch">
+<xsl:variable name="kachelbreite_rem">
-<xsl:value-of select="round($ergebniselemente_anz div max(number(/ergebnisse/ergebnis/felder/feld[@varname='Spaltenanzahl']/value)))"/>
+<xsl:value-of select="round($kachelbreite div 24)"/><!-- 1 em=16px, für bulma dann *1,5 -->
 </xsl:variable>
 <!--<p>plan: <xsl:value-of select="/ergebnisse/ergebnis/felder/feld[@varname='Spaltenanzahl']/value"/>
 </p>-->
-<span class="separator">&#160;</span>
+<!--<span class="separator">&#160;</span>-->
 <!--Beginn Selektions-Card-->
 <!--Beginn Berichtstitel, Pfad, Knopfleiste-->
-<section class="hero-body">
+<!--<section class="hero-body">
-<section class="container"> <!--Beginn Kartenreihe -->
+<section class="container">--> <!--Beginn Kartenreihe -->
-<div class="columns features is-mobile is-left"> <!--Beginn columns Kartenreihe -->
+<!--<div class="columns features is-mobile is-left">-->
+<div>
+<xsl:if test="$spalten_anz!='0'"><!--nicht dynamisch-->
+<xsl:attribute name="class"><xsl:value-of select="concat('fixed-grid has-',$spalten_anz,'-cols')" /> 
+</xsl:attribute>
+</xsl:if>
+<div><!--Beginn columns Kartenreihe -->
+<xsl:choose>
+<xsl:when test="$spalten_anz='0'"><!--dynamisch-->
+<!--klappt noch nicht, Bug in Bulma?-->
+<xsl:attribute name="class"><xsl:value-of select="concat('grid is-col-min-',$kachelbreite_rem)" />
+</xsl:attribute>
+</xsl:when>
+<xsl:otherwise>
+<xsl:attribute name="class"><xsl:text>grid</xsl:text></xsl:attribute>
+</xsl:otherwise>
+</xsl:choose>
+
 
 <xsl:for-each select="ergebnisse/ergebnis[felder/feld[@varname='Grafik']/value!='']/ergebniselement">
 <xsl:variable name="ergebniselement_counter" select="position()" />
 <xsl:variable name="chart_uniquename"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
 <xsl:variable name="ergebniselement_ordnr"><xsl:value-of select="@ordnr" /></xsl:variable>
+<xsl:variable name="maskennummer"><xsl:value-of select="@id" /></xsl:variable>
 
 
 <!--<p><xsl:value-of select="concat('Zähler: ',$ergebniselement_counter)"/></p>-->
+<!--
 <div>
-<xsl:attribute name="class"><xsl:text>column is-</xsl:text><xsl:value-of select="$colwidth"/></xsl:attribute>
+<xsl:attribute name="class"><xsl:text>column is-</xsl:text><xsl:value-of select="$colwidth"/></xsl:attribute>-->
+<div class="cell is-col-min-25">
 <xsl:call-template name="viewer_kachel">
 <xsl:with-param name="caption" select="viz_charts/viz_chart[@uniquename=$chart_uniquename]/@caption"/>
 <xsl:with-param name="ergebniselement_ordnr" select="$ergebniselement_ordnr" />
+<xsl:with-param name="kachelbreite" select="$kachelbreite"/>
+<xsl:with-param name="kachelhoehe" select="$kachelhoehe"/>
+<xsl:with-param name="link_maskennummer" select="$maskennummer"/>
+<xsl:with-param name="link_chart_uniquename" select="$chart_uniquename" />
+<xsl:with-param name="link_tablestylesheet" select="'viz_html_chart_viewer_mask_and_table.xsl'"/>
+
 </xsl:call-template>
 <!--<p><xsl:value-of select="concat($spalten_anz,'-',$ergebniselement_counter,':',$ergebniselement_counter mod $spalten_anz)"/></p>-->
 </div>
-<!-- neue Zeile wenn counter mod Spaltenanz. =0 -->
-
-<xsl:if test="$ergebniselement_counter &gt;= $spalten_anz and ($ergebniselement_counter mod $spalten_anz) =0">
-<xsl:text disable-output-escaping="yes"><![CDATA[
-</div>
-</section>
-<section class="container">
-<div class="columns features is-mobile is-left">
-]]></xsl:text>
-</xsl:if>
 </xsl:for-each>
-</div><!-- der columns -->
+</div><!-- des grid -->
-</section><!-- der letzten Kartenreihe -->
+</div><!--fixed-grid-->
-</section><!-- des Portals -->
+<!--
+</section>
+</section>--><!-- des Portals -->
 </xsl:template>	
-<!--<xsl:template name="viewer_kachel">
+
-<xsl:param name="caption" />
+<xsl:template name="ude_header_dashboard_alt">
-<xsl:param name="ergebniselement_ordnr" />
+<header>
-<div class="card is-shady">
+<div class="hs_header">
-<div class="card-image">
+	
-<div id="{concat('chartDiv',$ergebniselement_ordnr)}">
+               <div class="hs_header_box1"></div>
-Platzhalter
+                     <div class="hs_header_box2">
+		     	
+                     	<a class="button is-link is-outlined is-small" onclick="alert('todo');">Studienanfänger*innen</a>   
+			<a class="button is-link is-outlined is-small" onclick="alert('todo');">Studierende</a>   
+			<a class="button is-link is-outlined is-small" onclick="alert('todo');">Absolvent*innen</a>   
+			<a class="button is-link is-outlined is-small" onclick="alert('todo');">Doktorand*innen</a>   
+			
+			<!--<p class="cockpit_title">Universität Duisburg-Essen</p>-->
+			<div class="field"><span class="buttonlist">	     
+			    <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true" href="javascript:exportBooklet('application/pdf')">
+		 <img title="Ausgabe im PDF-Querformat" alt="Ausgabe im PDF-Querformat" src="../images/icons/into_pdf.svg" class="svg_icon" border="0" /></a>
+		 <span class="separator">&#160;</span>
+	     <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true" href="javascript:exportBooklet('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')">
+	     	<img title="Ausgabe in Excel" alt="Ausgabe in Excel" src="../images/icons/into_excel_normal.svg" class="svg_icon" border="0" /></a>
+		<span class="separator">&#160;</span>
+	     <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true" href="javascript:exportBooklet('application/vnd.openxmlformats-officedocument.wordprocessingml.document')">
+	     	<img title="Ausgabe in Word" alt="Ausgabe in Word" width="25px" height="25px" src="../images/icons/into_word.svg" class="svg_icon" border="0" /></a>
+	 
+	 </span>
+		  
 	</div>
+			<a href="https://www.uni-due.de/verwaltung/dtac/akademisches_controlling.php">
+                           <figure class="image is-64x64"><img src="../images/signet_ude_rgb.svg" title="UDE. Akademisches Controlling" /></figure></a>
 		     </div>
-<p>
-<a onClick="{concat('javascript:openModalImage(',$ergebniselement_ordnr,');')}">
-<span class="button is-success is-small modal-button">Vergrößern ...</span></a>
 
-<a onClick="{concat('javascript:openModalCardDetail(',$ergebniselement_ordnr,');')}">
-<span class="button is-link is-small modal-button">Mehr Infos ...</span></a>
 
-</p>
+	       <div class="hs_header_box1"></div>
        
 </div>
+</header>
+</xsl:template>
+<xsl:template name="ude_tableCSS">
+<!-- aus 800000280_datencockpit.xsl -->
+		<style type="text/css">
+.dojoDialog {background : #eee;	border : 1px solid #999;-moz-border-radius : 5px;padding : 4px;width:650;height:420px;overflow:scroll}
+.treebutton {
+      border:none;
+      margin: 0 4px 0 0;
+    }
+ @media print{
+.dontprint{display:none;}
+}
 
-</xsl:template>-->
+/*Cockpit-Header*/
-<xsl:template name="importVizJavascriptLibsViewer">
+.hs_header {
-<script language="Javascript" type="text/javascript" src="../xml/js/jquery-2.1.1.min.js" />
+  position: fixed; 
-<script language="JavaScript" type="text/javascript" src="../xml/js/memtext/sx_functions.js"></script>
+  top: 0;
-<xsl:call-template name="tableJavascript_viz" />
+  left: 0;
-<script language="Javascript" type="text/javascript">
+  right: 0;
-<xsl:text><![CDATA[
+  z-index: 20;	 /*positioniert sich im flow am nähesten zum Betrachter*/ 
+}
+
+.cockpit_title {
+   color: #004C93;
+   font-size: 3.0em;
+   font-weight: 800;
+}   
+
+.hs_header_box1 {	   	/*für Balken-Box über/unter Cockpittitel*/
+   background: #004C93;
+   height: 1.0rem; 
+}
+
+.hs_header_box2 {	   	/*für Logo-/Cockpittitel-Box*/
+   display: flex;
+   height: 4.0rem; 
+   padding: 0.3rem 17.0rem 0rem 9.0rem;   /*für Padding: ob re un li*/
+   align-items: center;		    /*für vertikale Ausrichtung d Elemente*/
+   justify-content: space-between;  /*für gleichm. Leerraum zw. Elementen*/
+   background-color: white;
+}
+
+
+/*Buttons mit is-link=UDE-Blau*/
+.button.is-link {
+    background-color: #004C93;         /*link-Blau:#3273dc; UDE-Blau:#004C93*/
+    border-color: transparent;
+    color: #fff; }
+  .button.is-link:hover, .button.is-link.is-hovered {
+      background-color: #276cda;
+      border-color: transparent;
+      color: #fff; }
+    .button.is-link:focus, .button.is-link.is-focused {
+      border-color: transparent;
+      color: #fff; }
+      .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) {
+        box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); }
+    .button.is-link:active, .button.is-link.is-active {
+      background-color: #2366d1;
+      border-color: transparent;
+      color: #fff; }
+    .button.is-link[disabled],
+    fieldset[disabled] .button.is-link {
+      background-color: #004C93;
+      border-color: transparent;
+      box-shadow: none; }
+    .button.is-link.is-inverted {
+      background-color: #fff;
+      color: #004C93; }
+      .button.is-link.is-inverted:hover, .button.is-link.is-inverted.is-hovered {
+        background-color: #f2f2f2; }
+      .button.is-link.is-inverted[disabled],
+      fieldset[disabled] .button.is-link.is-inverted {
+        background-color: #fff;
+        border-color: transparent;
+        box-shadow: none;
+        color: #004C93; }
+    .button.is-link.is-loading::after {
+      border-color: transparent transparent #fff #fff !important; }
+    .button.is-link.is-outlined {
+      background-color: transparent;
+      border-color: #004C93;
+      color: #004C93; }
+      .button.is-link.is-outlined:hover, .button.is-link.is-outlined.is-hovered, .button.is-link.is-outlined:focus, .button.is-link.is-outlined.is-focused {
+        background-color: #004C93;
+        border-color: #004C93;
+        color: #fff; }
+      .button.is-link.is-outlined.is-loading::after {
+        border-color: transparent transparent #004C93; #004C93; !important; }
+      .button.is-link.is-outlined.is-loading:hover::after, .button.is-link.is-outlined.is-loading.is-hovered::after, .button.is-link.is-outlined.is-loading:focus::after, .button.is-link.is-outlined.is-loading.is-focused::after {
+        border-color: transparent transparent #fff #fff !important; }
+      .button.is-link.is-outlined[disabled],
+      fieldset[disabled] .button.is-link.is-outlined {
+        background-color: transparent;
+        border-color: #004C93;
+        box-shadow: none;
+        color: #004C93; }
+    .button.is-link.is-inverted.is-outlined {
+      background-color: transparent;
+      border-color: #fff;
+      color: #fff; }
+      .button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined.is-hovered, .button.is-link.is-inverted.is-outlined:focus, .button.is-link.is-inverted.is-outlined.is-focused {
+        background-color: #fff;
+        color: #004C93; }
+      .button.is-link.is-inverted.is-outlined.is-loading:hover::after, .button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-link.is-inverted.is-outlined.is-loading:focus::after, .button.is-link.is-inverted.is-outlined.is-loading.is-focused::after {
+        border-color: transparent transparent #004C93; #004C93; !important; }  
+     
+.exportoptions {
+   margin-top: 2.0em; 
+}
+   
+.buttonlist{			/*für resposive Buttonleiste*/
+   display: flex; 
+   flex-flow: no wrap;
+   justify-content: flex-start;
+   padding: 0.3rem 0rem 0.3rem 0rem; /*für Padding: ob re un li*/
+   }
    
-function initPage()
+.buttonlist img { 		/*für Icongröße in Buttonleiste*/
+    height: 2.5rem; 
+    width: auto; 
+    margin-top: 0em; }
+    
+/*Auswahlfelder*/
+.card {				/*für Auswahlfeldercard-Position*/
+   display: flex;
+   flex-flow: column;
+   margin-left: 0em;		
+   margin-top: 8em; 		
+   min-width: 10.0em;
+   width: 100%; 
+   } 		
+   
+.label-container, .button-label { /*für einh.responsive Feldbezeichner*/
+   display: flex;
+   justify-content: left;
+   background: ;	
+   min-width: 10.0em;		/*für kleine Viewports*/
+   width: 10%; }		/*für kleine Viewports*/
+   
+.control-new { 			/*für einheitliche Controls*/
+   min-width: 10.0em; 		/*für kleine Viewports*/
+   width: 10%; 			/*für große Viewports*/
+   }
+   
+.button {			/*für Button-Bezeichner-Ausrichtung*/
+   display: flex;
+   justify-content: left; }
+ 
+/*Erläuterungen/Legende*/
+.box-new {			/*für Kopfzeile mit Close-Button*/
+   display: flex;
+   justify-content: space-between;
+   font-weight: bold;
+}	
+
+.leg_erl {
+  background-color: whitesmoke; /*für Abschnitthintergrund, Schrift*/ 
+  font-size: 0.8em;
+}
+ 
+.dl_title {			/*für Texthervorhebungen*/ 
+   display: flex;
+   justify-content: center;
+   background: inherit;	
+   font-size: 1.2em;
+   font-weight: 400;   
+ }
+ /*Datentabellen*/
+.table-container {
+   z-index: 10; /*positioniert sich im flow hinter dem hs-header*/ 
+}
+ table.ergtabelle tr.listRowOdd td.leer
  {
-var myChartModelStr="";
+ border:thin solid white;
-var myDiv="";
+ background-color:white;
-]]></xsl:text>
+ }
-<xsl:for-each select="ergebnisse">
+  table.ergtabelle tr.listRowEven td.leer
-<xsl:for-each select="ergebnis/ergebniselement">
+ {
-<xsl:variable name="chart_uniquename"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
+ border:thin solid white;
-<xsl:variable name="ergebniselement_ordnr"><xsl:value-of select="@ordnr" /></xsl:variable>
+ background-color:white;
-<xsl:if test="$chart_uniquename != ''">
+ }
-<xsl:text>
+ table.ergtabelle tr td.leer
-myChartModelStr='</xsl:text>
+ {
-<xsl:call-template name="getChartModel">
+ border:thin solid white;
-<xsl:with-param name="chart_uniquename" select="$chart_uniquename"/>
+ background-color:white;
-<xsl:with-param name="useMiniatureIfAvailable" select="'true'"/> 
+ }
-</xsl:call-template>
+ table.ergtabelle tr th.leer
-<xsl:text>';
+ {
-myDiv="</xsl:text>
+ border:thin solid white;
-<xsl:value-of select="concat('chartDiv',$ergebniselement_ordnr)" />
+ background-color:white;
-<xsl:text><![CDATA[";
+ }
-createViewer(myChartModelStr,myDiv);
+  table.ergtabelle tr th.header
-myDiv="]]></xsl:text>
+ {
-<xsl:value-of select="concat('modalCardImage',$ergebniselement_ordnr)" />
+ vertical-align:center;
-<xsl:text>";
+text-align:center;
-myChartModelStr='</xsl:text>
+ 
-<xsl:call-template name="getChartModel">
-<xsl:with-param name="chart_uniquename" select="$chart_uniquename"/>
-<xsl:with-param name="useMiniatureIfAvailable" select="'false'"/> 
-</xsl:call-template>
-<xsl:text>';
-
-createViewer(myChartModelStr,myDiv);
-myDiv="</xsl:text>
-<xsl:value-of select="concat('modalCardDetailImage',$ergebniselement_ordnr)" />
-<xsl:text>";
-myChartModelStr='</xsl:text>
-<xsl:call-template name="getChartModel">
-<xsl:with-param name="chart_uniquename" select="$chart_uniquename"/>
-<xsl:with-param name="useMiniatureIfAvailable" select="'false'"/> 
-</xsl:call-template>
-<xsl:text>';
-createViewer(myChartModelStr,myDiv);
-</xsl:text>
-</xsl:if>
-</xsl:for-each>
-</xsl:for-each>
-<xsl:text><![CDATA[
  }
  
-function createViewer(myChartModelStr,chartDiv)
+  table.ergtabelle
  {
-myChartModel=JSON.parse(myChartModelStr);
+ border:thin solid white;
-renderChart(chartDiv,myChartModel);
  }
  
-function toggleLegendeDisplay(legendeDiv)
+ /* Zahlen rechtsbündig:*/
+   table.ergtabelle tbody tr.listRowEven td.integer
+ {
+ text-align:right;
+empty-cells:show
+vertical-align:center;
+ }
+    table.ergtabelle tbody tr.listRowOdd td.integer
  {
-var myDiv=document.getElementById(legendeDiv);
+ text-align:right;
-if(myDiv.style.display=="block")
+empty-cells:show
-		myDiv.style.display="none";
+vertical-align:center;
-	else
+ }
-		myDiv.style.display="block";
+    table.ergtabelle tbody tr.listRowEven td.decimal
+ {
+ text-align:right;
+empty-cells:show
+vertical-align:center;
+ }
+    table.ergtabelle tbody tr.listRowOdd td.decimal
+ {
+ text-align:right;
+empty-cells:show
+vertical-align:center;
+ }
+</style>
+</xsl:template>
 
+<xsl:template name="buildVizMetadata">
+<xsl:variable name="vizInitialName">
+<xsl:choose>
+<xsl:when test="/ergebnisse/@isMakro='true'">
+<xsl:value-of select="/ergebnisse/makro/name"/>
+</xsl:when>
+<xsl:otherwise>
+<xsl:value-of select="/ergebnisse/ergebnis/maskenname" />
+</xsl:otherwise>
+</xsl:choose>
+</xsl:variable>
+  <!--<xsl:call-template name="navigationsmenue" />-->
+<script language="Javascript">
+
+<xsl:text>
+
+var vizInitialName='</xsl:text><xsl:value-of select="$vizInitialName"/><xsl:text>';
+
+
+function dataRowMetaData(tableId,nr,colname,colcaption,coltype,colfunction)
+    {
+    this.tableId=tableId;
+    this.nr=nr;
+this.colname=colname;
+this.colcaption=colcaption;
+this.coltype=coltype;
+this.colfunction=colfunction;
 }
 
-]]></xsl:text>
+
+function tableMetaData(nr,value,name,isDefault)
+{
+    this.value=value;
+    this.nr=nr;
+    this.name=name
+    this.isDefault=isDefault;
+
+}
+
+var rsTableMetaData=new Array();
+var rsColumnMetaData=new Array();
+var rs=new Array();
+
+</xsl:text>
+
+
+
 </script>
 
+
+<xsl:for-each select="/ergebnisse/ergebnis/ergebniselement">
+<xsl:call-template name="buildVizData" >
+<xsl:with-param name="tableId" select="@ordnr" />
+</xsl:call-template>
+</xsl:for-each>
+
+</xsl:template>
+<xsl:template name="buildVizData">
+<xsl:param name="tableId" />
+
+<script language="Javascript">
+
+<xsl:text>
+
+rsTableMetaData.push(new tableMetaData(
+</xsl:text>
+<xsl:value-of select="position()"/>
+<xsl:text>,'</xsl:text>
+<xsl:value-of select="$tableId"/>
+<xsl:text>','</xsl:text>
+<xsl:value-of select="concat('Tab. ',$tableId+1)"/>
+<xsl:text>',
+</xsl:text>
+<xsl:choose>
+<xsl:when test="position()=1">
+<xsl:text>true</xsl:text>
+</xsl:when>
+<xsl:otherwise>
+<xsl:text>false</xsl:text>
+</xsl:otherwise>
+</xsl:choose>
+<xsl:text>
+));
+rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]=new Array();
+
+//var myChartModel=new chartModel(1,"","",rsTableMetaData);
+
+function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</xsl:text>
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:text>,</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template>
+</xsl:for-each>
+<xsl:text>
+)
+    {
+    this.rownr=rownr;
+    </xsl:text>
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:text>this.</xsl:text><xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template><xsl:text>=</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template><xsl:text>;
+</xsl:text>
+</xsl:for-each><xsl:text>
+}
+
+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>
+
+
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:variable name="rownr">
+<xsl:value-of select="position()"/>
+</xsl:variable>
+<xsl:text>
+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="$rownr"/>
+<xsl:text>,'</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template>
+<xsl:text>','</xsl:text>
+<xsl:call-template name="remove_linebreaksAndQuot">
+<xsl:with-param name="volltext" select="wert" />
+</xsl:call-template>
+<xsl:text>',0,null));</xsl:text> <!--coltype noch unbekannt, colfunction unnötig-->
+</xsl:for-each>
+
+
+<xsl:for-each select="sqlerg/row">
+<xsl:variable name="rownr">
+<xsl:value-of select="position()"/>
+</xsl:variable>
+<xsl:if test="$rownr=1">
+<!-- first metadata -->
+<xsl:for-each select="col">
+<xsl:variable name="colnr">
+<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)"/><xsl:text>].coltype=</xsl:text><xsl:value-of select="@typ"/>
+<xsl:text>;
+</xsl:text>
+</xsl:for-each>
+
+</xsl:if>
+<!--now resultset-->
+<xsl:text>
+//rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]= new Array();
+rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(</xsl:text><xsl:value-of select="$rownr"/>
+<xsl:for-each select="col">
+<xsl:text>,</xsl:text>
+<xsl:choose>
+<xsl:when test="@typ='1'"><xsl:text>'</xsl:text>
+<xsl:call-template name="remove_linebreaksAndQuot">
+<xsl:with-param name="volltext" select="wert" />
+</xsl:call-template>
+<xsl:text>'</xsl:text></xsl:when>
+<!--todo:Typ Datum --> 
+<xsl:when test="string-length(wert)=0"><xsl:text>null</xsl:text>
+</xsl:when>
+<xsl:otherwise>
+<xsl:value-of select="wert"/>
+</xsl:otherwise>
+</xsl:choose>
+</xsl:for-each>
+<xsl:text>));
+</xsl:text>
+</xsl:for-each>
+
+
+</script>
 </xsl:template>
 </xsl:stylesheet>

superx/xml/viz_html_chart_viewer_mask.xsl

@@ -19,12 +19,11 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 
 <xsl:variable name="colon"><xsl:text>'</xsl:text></xsl:variable>
 <xsl:variable name="quote"><xsl:text>"</xsl:text></xsl:variable>
-<xsl:variable name="colwidth"><xsl:text>is-full</xsl:text></xsl:variable>
 
-<xsl:variable name="defaultRenderer" select="'plot'" />
+<!--<xsl:variable name="defaultRenderer" select="'echarts'" />
 <xsl:variable name="availableRendererPlot" select="'true'" />
 <xsl:variable name="availableRendererD3" select="'true'" />
-
+-->
 <xsl:template match="/">
 <xsl:variable name="maskenname">
 <xsl:choose>
@@ -49,12 +48,15 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 <xsl:call-template name="nd_htmlscript" />
 <xsl:call-template name="nd_tableJavascript" />
 <xsl:call-template name="nd_tableCSS" />
-<xsl:call-template name="importVizJavascriptLibsViewer"></xsl:call-template> 
+<xsl:call-template name="ude_tableCSS" />
-<xsl:call-template name="tableMaskenfelderJS" />
+<xsl:call-template name="importVizViewer"></xsl:call-template> 
 
 <body  class="has-navbar-fixed-top" onload="document.getElementById('progressbar').style.display='none';initPage();"> 
 <!--#Template Beginn Top-Navigation-->
-<xsl:call-template name="nd_navi_top" /> 
+<xsl:call-template name="viz_navi_top" />
+<!--<xsl:call-template name="ude_header_dashboard" />-->
+
+
 <!--#Template Ende Top-Navigation-->
 
 <div class="columns">
@@ -62,7 +64,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 <!--#Template Beginn Navigations-Panel Auswertungen-->
 <xsl:if test="/ergebnisse/@showNavigation='true' and 1=0"><!-- erstmal kein Panel,weil der Asssistent schon recht breit ist -->
 <xsl:for-each select="/ergebnisse">
-<!--kein Navi Panel bei Maskenfeldern <xsl:call-template name="nd_navi_panel" />-->
+<xsl:call-template name="nd_navi_panel" />
 </xsl:for-each>
 </xsl:if>
 <!--#Template Ende Navigations-Panel Auswertungen-->
@@ -71,24 +73,18 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 <section class="hero-body">
 <div class="container"> 
 <div class="columns is-mobile is-left">
-<div class="column is-two-thirds">
+<div class="column is-full">
 <div class="card "> 
 <div class="card-content">
 
 <xsl:call-template name="nd_progressbar" /> 
 
-<xsl:call-template name="viz_viewer"/>
+<xsl:call-template name="viz_viewer_columnwise"/>
 <xsl:call-template name="bottombar" />
  <xsl:comment>customfooter</xsl:comment>
  </div> <!--Ende content -->
 </div> <!--Ende card-content-->
 </div> <!--Ende card-background -->
-
-<div class="column">
-<xsl:if test="count(/ergebnisse/ergebnis[@ordnr='0']/completefields/feld[@art='1']) &gt; 0">
-<xsl:call-template name="renderTableDialogs" />
-</xsl:if>
-</div>
 </div> <!--Ende column-->
 </div> <!--Ende hero-columns-->
 
@@ -106,130 +102,501 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 
 
 
-<xsl:template name="viz_viewer">
+<xsl:template name="viz_viewer_columnwise">
-<xsl:param name="show_maskenfelder" select="'true'" />
 <xsl:if test="/ergebnisse/@isMakro='true'">
-<h1><xsl:value-of select="/ergebnisse/makro/name" /></h1>
+<p class="cockpit_title"><xsl:value-of select="/ergebnisse/makro/name" /></p>
 </xsl:if>
 <p></p>
 <xsl:call-template name="buildVizMetadata" />
 
 <!-- end Kopf-->
 <!-- start Grafiken-->
-<!-- Berechne den Umbruch der Spalten für die Kacheln
+
-z.B. 6 Grafiken ergibt einen Umbruch nach der 3. Teiltabelle
-Formel: ANZ / 2 kaufm. gerundet 
--->
 <span class="separator">&#160;</span>
 <!--Beginn Selektions-Card-->
 <!--Beginn Berichtstitel, Pfad, Knopfleiste-->
-<section class="hero-body has-background-light">
+<section class="hero-body">
 <section class="container"> <!--Beginn Kartenreihe -->
 <div class="columns features is-mobile is-left"> <!--Beginn columns Kartenreihe -->
+<div class="column is-two-thirds">
 
-<xsl:for-each select="/ergebnisse/ergebnis[felder/feld[@varname='Grafik']/value!='']/ergebniselement">
+<xsl:for-each select="ergebnisse/ergebnis[felder/feld[@varname='Grafik']/value!='']/ergebniselement">
 <xsl:variable name="ergebniselement_counter" select="position()" />
 <xsl:variable name="chart_uniquename"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
 <xsl:variable name="ergebniselement_ordnr"><xsl:value-of select="@ordnr" /></xsl:variable>
 
 
 <!--<p><xsl:value-of select="concat('Zähler: ',$ergebniselement_counter)"/></p>-->
-<div>
-<xsl:attribute name="class"><xsl:text>column is-</xsl:text><xsl:value-of select="$colwidth"/></xsl:attribute>
 <xsl:call-template name="viewer_kachel">
 <xsl:with-param name="caption" select="viz_charts/viz_chart[@uniquename=$chart_uniquename]/@caption"/>
 <xsl:with-param name="ergebniselement_ordnr" select="$ergebniselement_ordnr" />
 </xsl:call-template>
 <!--<p><xsl:value-of select="concat($spalten_anz,'-',$ergebniselement_counter,':',$ergebniselement_counter mod $spalten_anz)"/></p>-->
+
+</xsl:for-each>
 </div>
-<!-- neue Zeile wenn counter mod Spaltenanz. =0 -->
 
+<div class="column">
+<xsl:if test="count(/ergebnisse/ergebnis[@ordnr='0']/completefields/feld[@art='1']) &gt; 0">
+<xsl:call-template name="renderTableDialogs" />
+</xsl:if>
+</div><!--Ende column-->
+</div> <!--Ende hero-columns-->
 
-</xsl:for-each>
+
-</div><!-- der columns -->
+</section>
-</section><!-- der letzten Kartenreihe -->
 </section><!-- des Portals -->
 </xsl:template>	
-<!--<xsl:template name="viewer_kachel">
+
-<xsl:param name="caption" />
+
-<xsl:param name="ergebniselement_ordnr" />
+<xsl:template name="ude_header_dashboard_alt">
-<div class="card is-shady">
+<header>
-<div class="card-image">
+<div class="hs_header">
-<div id="{concat('chartDiv',$ergebniselement_ordnr)}">
+	
-Platzhalter
+               <div class="hs_header_box1"></div>
+                     <div class="hs_header_box2">
+		     	
+                     	<a class="button is-link is-outlined is-small" onclick="alert('todo');">Studienanfänger*innen</a>   
+			<a class="button is-link is-outlined is-small" onclick="alert('todo');">Studierende</a>   
+			<a class="button is-link is-outlined is-small" onclick="alert('todo');">Absolvent*innen</a>   
+			<a class="button is-link is-outlined is-small" onclick="alert('todo');">Doktorand*innen</a>   
+			
+			<!--<p class="cockpit_title">Universität Duisburg-Essen</p>-->
+			<div class="field"><span class="buttonlist">	     
+			    <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true" href="javascript:exportBooklet('application/pdf')">
+		 <img title="Ausgabe im PDF-Querformat" alt="Ausgabe im PDF-Querformat" src="../images/icons/into_pdf.svg" class="svg_icon" border="0" /></a>
+		 <span class="separator">&#160;</span>
+	     <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true" href="javascript:exportBooklet('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')">
+	     	<img title="Ausgabe in Excel" alt="Ausgabe in Excel" src="../images/icons/into_excel_normal.svg" class="svg_icon" border="0" /></a>
+		<span class="separator">&#160;</span>
+	     <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true" href="javascript:exportBooklet('application/vnd.openxmlformats-officedocument.wordprocessingml.document')">
+	     	<img title="Ausgabe in Word" alt="Ausgabe in Word" width="25px" height="25px" src="../images/icons/into_word.svg" class="svg_icon" border="0" /></a>
+	 
+	 </span>
+		  
 	</div>
+			<a href="https://www.uni-due.de/verwaltung/dtac/akademisches_controlling.php">
+                           <figure class="image is-64x64"><img src="../images/signet_ude_rgb.svg" title="UDE. Akademisches Controlling" /></figure></a>
 		     </div>
-<p>
-<a onClick="{concat('javascript:openModalImage(',$ergebniselement_ordnr,');')}">
-<span class="button is-success is-small modal-button">Vergrößern ...</span></a>
 
-<a onClick="{concat('javascript:openModalCardDetail(',$ergebniselement_ordnr,');')}">
-<span class="button is-link is-small modal-button">Mehr Infos ...</span></a>
 
-</p>
+	       <div class="hs_header_box1"></div>
        
 </div>
+</header>
+</xsl:template>
+<xsl:template name="ude_tableCSS">
+<!-- aus 800000280_datencockpit.xsl -->
+		<style type="text/css">
+.dojoDialog {background : #eee;	border : 1px solid #999;-moz-border-radius : 5px;padding : 4px;width:650;height:420px;overflow:scroll}
+.treebutton {
+      border:none;
+      margin: 0 4px 0 0;
+    }
+ @media print{
+.dontprint{display:none;}
+}
 
-</xsl:template>-->
+/*Cockpit-Header*/
-<xsl:template name="importVizJavascriptLibsViewer">
+.hs_header {
-<script language="Javascript" type="text/javascript" src="../xml/js/jquery-2.1.1.min.js" />
+  position: fixed; 
-<script language="JavaScript" type="text/javascript" src="../xml/js/memtext/sx_functions.js"></script>
+  top: 0;
-<xsl:call-template name="tableJavascript_viz" />
+  left: 0;
-<script language="Javascript" type="text/javascript">
+  right: 0;
-<xsl:text><![CDATA[
+  z-index: 20;	 /*positioniert sich im flow am nähesten zum Betrachter*/ 
+}
+
+.cockpit_title {
+   color: #004C93;
+   font-size: 3.0em;
+   font-weight: 800;
+}   
+
+.hs_header_box1 {	   	/*für Balken-Box über/unter Cockpittitel*/
+   background: #004C93;
+   height: 1.0rem; 
+}
+
+.hs_header_box2 {	   	/*für Logo-/Cockpittitel-Box*/
+   display: flex;
+   height: 4.0rem; 
+   padding: 0.3rem 17.0rem 0rem 9.0rem;   /*für Padding: ob re un li*/
+   align-items: center;		    /*für vertikale Ausrichtung d Elemente*/
+   justify-content: space-between;  /*für gleichm. Leerraum zw. Elementen*/
+   background-color: white;
+}
+
+
+/*Buttons mit is-link=UDE-Blau*/
+.button.is-link {
+    background-color: #004C93;         /*link-Blau:#3273dc; UDE-Blau:#004C93*/
+    border-color: transparent;
+    color: #fff; }
+  .button.is-link:hover, .button.is-link.is-hovered {
+      background-color: #276cda;
+      border-color: transparent;
+      color: #fff; }
+    .button.is-link:focus, .button.is-link.is-focused {
+      border-color: transparent;
+      color: #fff; }
+      .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) {
+        box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); }
+    .button.is-link:active, .button.is-link.is-active {
+      background-color: #2366d1;
+      border-color: transparent;
+      color: #fff; }
+    .button.is-link[disabled],
+    fieldset[disabled] .button.is-link {
+      background-color: #004C93;
+      border-color: transparent;
+      box-shadow: none; }
+    .button.is-link.is-inverted {
+      background-color: #fff;
+      color: #004C93; }
+      .button.is-link.is-inverted:hover, .button.is-link.is-inverted.is-hovered {
+        background-color: #f2f2f2; }
+      .button.is-link.is-inverted[disabled],
+      fieldset[disabled] .button.is-link.is-inverted {
+        background-color: #fff;
+        border-color: transparent;
+        box-shadow: none;
+        color: #004C93; }
+    .button.is-link.is-loading::after {
+      border-color: transparent transparent #fff #fff !important; }
+    .button.is-link.is-outlined {
+      background-color: transparent;
+      border-color: #004C93;
+      color: #004C93; }
+      .button.is-link.is-outlined:hover, .button.is-link.is-outlined.is-hovered, .button.is-link.is-outlined:focus, .button.is-link.is-outlined.is-focused {
+        background-color: #004C93;
+        border-color: #004C93;
+        color: #fff; }
+      .button.is-link.is-outlined.is-loading::after {
+        border-color: transparent transparent #004C93; #004C93; !important; }
+      .button.is-link.is-outlined.is-loading:hover::after, .button.is-link.is-outlined.is-loading.is-hovered::after, .button.is-link.is-outlined.is-loading:focus::after, .button.is-link.is-outlined.is-loading.is-focused::after {
+        border-color: transparent transparent #fff #fff !important; }
+      .button.is-link.is-outlined[disabled],
+      fieldset[disabled] .button.is-link.is-outlined {
+        background-color: transparent;
+        border-color: #004C93;
+        box-shadow: none;
+        color: #004C93; }
+    .button.is-link.is-inverted.is-outlined {
+      background-color: transparent;
+      border-color: #fff;
+      color: #fff; }
+      .button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined.is-hovered, .button.is-link.is-inverted.is-outlined:focus, .button.is-link.is-inverted.is-outlined.is-focused {
+        background-color: #fff;
+        color: #004C93; }
+      .button.is-link.is-inverted.is-outlined.is-loading:hover::after, .button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-link.is-inverted.is-outlined.is-loading:focus::after, .button.is-link.is-inverted.is-outlined.is-loading.is-focused::after {
+        border-color: transparent transparent #004C93; #004C93; !important; }  
+     
+.exportoptions {
+   margin-top: 2.0em; 
+}
    
-function initPage()
+.buttonlist{			/*für resposive Buttonleiste*/
+   display: flex; 
+   flex-flow: no wrap;
+   justify-content: flex-start;
+   padding: 0.3rem 0rem 0.3rem 0rem; /*für Padding: ob re un li*/
+   }
+   
+.buttonlist img { 		/*für Icongröße in Buttonleiste*/
+    height: 2.5rem; 
+    width: auto; 
+    margin-top: 0em; }
+    
+/*Auswahlfelder*/
+.card {				/*für Auswahlfeldercard-Position*/
+   display: flex;
+   flex-flow: column;
+   margin-left: 0em;		
+   margin-top: 8em; 		
+   min-width: 10.0em;
+   width: 100%; 
+   } 		
+   
+.label-container, .button-label { /*für einh.responsive Feldbezeichner*/
+   display: flex;
+   justify-content: left;
+   background: ;	
+   min-width: 10.0em;		/*für kleine Viewports*/
+   width: 10%; }		/*für kleine Viewports*/
+   
+.control-new { 			/*für einheitliche Controls*/
+   min-width: 10.0em; 		/*für kleine Viewports*/
+   width: 10%; 			/*für große Viewports*/
+   }
+   
+.button {			/*für Button-Bezeichner-Ausrichtung*/
+   display: flex;
+   justify-content: left; }
+ 
+/*Erläuterungen/Legende*/
+.box-new {			/*für Kopfzeile mit Close-Button*/
+   display: flex;
+   justify-content: space-between;
+   font-weight: bold;
+}	
+
+.leg_erl {
+  background-color: whitesmoke; /*für Abschnitthintergrund, Schrift*/ 
+  font-size: 0.8em;
+}
+ 
+.dl_title {			/*für Texthervorhebungen*/ 
+   display: flex;
+   justify-content: center;
+   background: inherit;	
+   font-size: 1.2em;
+   font-weight: 400;   
+ }
+ /*Datentabellen*/
+.table-container {
+   z-index: 10; /*positioniert sich im flow hinter dem hs-header*/ 
+}
+ table.ergtabelle tr.listRowOdd td.leer
  {
-var myChartModelStr="";
+ border:thin solid white;
-var myDiv="";
+ background-color:white;
-]]></xsl:text>
+ }
-<xsl:for-each select="ergebnisse">
+  table.ergtabelle tr.listRowEven td.leer
-<xsl:for-each select="ergebnis/ergebniselement">
+ {
-<xsl:variable name="chart_uniquename"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
+ border:thin solid white;
-<xsl:variable name="ergebniselement_ordnr"><xsl:value-of select="@ordnr" /></xsl:variable>
+ background-color:white;
-<xsl:if test="$chart_uniquename != ''">
+ }
-<xsl:text><![CDATA[
+ table.ergtabelle tr td.leer
-myChartModelStr=']]></xsl:text>
+ {
-<xsl:value-of select="translate(viz_charts/viz_chart[@uniquename=$chart_uniquename]/@chartmodel,'§',$quote)" />
+ border:thin solid white;
-<xsl:text><![CDATA[';
+ background-color:white;
-myDiv="]]></xsl:text>
+ }
-<xsl:value-of select="concat('chartDiv',$ergebniselement_ordnr)" />
+ table.ergtabelle tr th.leer
-<xsl:text><![CDATA[";
+ {
-createViewer(myChartModelStr,myDiv);
+ border:thin solid white;
-myDiv="]]></xsl:text>
+ background-color:white;
-<xsl:value-of select="concat('modalCardImage',$ergebniselement_ordnr)" />
+ }
-<xsl:text><![CDATA[";
+  table.ergtabelle tr th.header
-createViewer(myChartModelStr,myDiv);
+ {
-myDiv="]]></xsl:text>
+ vertical-align:center;
-<xsl:value-of select="concat('modalCardDetailImage',$ergebniselement_ordnr)" />
+text-align:center;
-<xsl:text><![CDATA[";
+ 
-createViewer(myChartModelStr,myDiv);
-
-]]></xsl:text>
-</xsl:if>
-</xsl:for-each>
-</xsl:for-each>
-<xsl:text><![CDATA[
  }
  
-function createViewer(myChartModelStr,chartDiv)
+  table.ergtabelle
  {
-myChartModel=JSON.parse(myChartModelStr);
+ border:thin solid white;
-renderChart(chartDiv,myChartModel);
  }
  
-function toggleLegendeDisplay(legendeDiv)
+ /* Zahlen rechtsbündig:*/
+   table.ergtabelle tbody tr.listRowEven td.integer
+ {
+ text-align:right;
+empty-cells:show
+vertical-align:center;
+ }
+    table.ergtabelle tbody tr.listRowOdd td.integer
+ {
+ text-align:right;
+empty-cells:show
+vertical-align:center;
+ }
+    table.ergtabelle tbody tr.listRowEven td.decimal
  {
-var myDiv=document.getElementById(legendeDiv);
+ text-align:right;
-if(myDiv.style.display=="block")
+empty-cells:show
-		myDiv.style.display="none";
+vertical-align:center;
-	else
+ }
-		myDiv.style.display="block";
+    table.ergtabelle tbody tr.listRowOdd td.decimal
+ {
+ text-align:right;
+empty-cells:show
+vertical-align:center;
+ }
+</style>
+</xsl:template>
+
+<xsl:template name="buildVizMetadata">
+<xsl:variable name="vizInitialName">
+<xsl:choose>
+<xsl:when test="/ergebnisse/@isMakro='true'">
+<xsl:value-of select="/ergebnisse/makro/name"/>
+</xsl:when>
+<xsl:otherwise>
+<xsl:value-of select="/ergebnisse/ergebnis/maskenname" />
+</xsl:otherwise>
+</xsl:choose>
+</xsl:variable>
+  <!--<xsl:call-template name="navigationsmenue" />-->
+<script language="Javascript">
+
+<xsl:text>
+
+var vizInitialName='</xsl:text><xsl:value-of select="$vizInitialName"/><xsl:text>';
+
+
+function dataRowMetaData(tableId,nr,colname,colcaption,coltype,colfunction)
+    {
+    this.tableId=tableId;
+    this.nr=nr;
+this.colname=colname;
+this.colcaption=colcaption;
+this.coltype=coltype;
+this.colfunction=colfunction;
+}
+
+
+function tableMetaData(nr,value,name,isDefault)
+{
+    this.value=value;
+    this.nr=nr;
+    this.name=name
+    this.isDefault=isDefault;
 
 }
 
-]]></xsl:text>
+var rsTableMetaData=new Array();
+var rsColumnMetaData=new Array();
+var rs=new Array();
+
+</xsl:text>
+
+
+
 </script>
 
+
+<xsl:for-each select="/ergebnisse/ergebnis/ergebniselement">
+<xsl:call-template name="buildVizData" >
+<xsl:with-param name="tableId" select="@ordnr" />
+</xsl:call-template>
+</xsl:for-each>
+
+</xsl:template>
+<xsl:template name="buildVizData">
+<xsl:param name="tableId" />
+
+<script language="Javascript">
+
+<xsl:text>
+
+rsTableMetaData.push(new tableMetaData(
+</xsl:text>
+<xsl:value-of select="position()"/>
+<xsl:text>,'</xsl:text>
+<xsl:value-of select="$tableId"/>
+<xsl:text>','</xsl:text>
+<xsl:value-of select="concat('Tab. ',$tableId+1)"/>
+<xsl:text>',
+</xsl:text>
+<xsl:choose>
+<xsl:when test="position()=1">
+<xsl:text>true</xsl:text>
+</xsl:when>
+<xsl:otherwise>
+<xsl:text>false</xsl:text>
+</xsl:otherwise>
+</xsl:choose>
+<xsl:text>
+));
+rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]=new Array();
+
+//var myChartModel=new chartModel(1,"","",rsTableMetaData);
+
+function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</xsl:text>
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:text>,</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template>
+</xsl:for-each>
+<xsl:text>
+)
+    {
+    this.rownr=rownr;
+    </xsl:text>
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:text>this.</xsl:text><xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template><xsl:text>=</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template><xsl:text>;
+</xsl:text>
+</xsl:for-each><xsl:text>
+}
+
+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>
+
+
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:variable name="rownr">
+<xsl:value-of select="position()"/>
+</xsl:variable>
+<xsl:text>
+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="$rownr"/>
+<xsl:text>,'</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template>
+<xsl:text>','</xsl:text>
+<xsl:call-template name="remove_linebreaksAndQuot">
+<xsl:with-param name="volltext" select="wert" />
+</xsl:call-template>
+<xsl:text>',0,null));</xsl:text> <!--coltype noch unbekannt, colfunction unnötig-->
+</xsl:for-each>
+
+
+<xsl:for-each select="sqlerg/row">
+<xsl:variable name="rownr">
+<xsl:value-of select="position()"/>
+</xsl:variable>
+<xsl:if test="$rownr=1">
+<!-- first metadata -->
+<xsl:for-each select="col">
+<xsl:variable name="colnr">
+<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)"/><xsl:text>].coltype=</xsl:text><xsl:value-of select="@typ"/>
+<xsl:text>;
+</xsl:text>
+</xsl:for-each>
+
+</xsl:if>
+<!--now resultset-->
+<xsl:text>
+//rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]= new Array();
+rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(</xsl:text><xsl:value-of select="$rownr"/>
+<xsl:for-each select="col">
+<xsl:text>,</xsl:text>
+<xsl:choose>
+<xsl:when test="@typ='1'"><xsl:text>'</xsl:text>
+<xsl:call-template name="remove_linebreaksAndQuot">
+<xsl:with-param name="volltext" select="wert" />
+</xsl:call-template>
+<xsl:text>'</xsl:text></xsl:when>
+<!--todo:Typ Datum --> 
+<xsl:when test="string-length(wert)=0"><xsl:text>null</xsl:text>
+</xsl:when>
+<xsl:otherwise>
+<xsl:value-of select="wert"/>
+</xsl:otherwise>
+</xsl:choose>
+</xsl:for-each>
+<xsl:text>));
+</xsl:text>
+</xsl:for-each>
+
+
+</script>
 </xsl:template>
 </xsl:stylesheet>

superx/xml/viz_html_chart_viewer_mask_and_table.xsl

@@ -19,12 +19,11 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 
 <xsl:variable name="colon"><xsl:text>'</xsl:text></xsl:variable>
 <xsl:variable name="quote"><xsl:text>"</xsl:text></xsl:variable>
-<xsl:variable name="colwidth"><xsl:text>is-full</xsl:text></xsl:variable>
 
-<xsl:variable name="defaultRenderer" select="'plot'" />
+<!--<xsl:variable name="defaultRenderer" select="'echarts'" />
 <xsl:variable name="availableRendererPlot" select="'true'" />
 <xsl:variable name="availableRendererD3" select="'true'" />
-
+-->
 <xsl:template match="/">
 <xsl:variable name="maskenname">
 <xsl:choose>
@@ -49,12 +48,15 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 <xsl:call-template name="nd_htmlscript" />
 <xsl:call-template name="nd_tableJavascript" />
 <xsl:call-template name="nd_tableCSS" />
-<xsl:call-template name="importVizJavascriptLibsViewer"></xsl:call-template> 
+<xsl:call-template name="ude_tableCSS" />
-<xsl:call-template name="tableMaskenfelderJS" />
+<xsl:call-template name="importVizViewer"></xsl:call-template> 
 
 <body  class="has-navbar-fixed-top" onload="document.getElementById('progressbar').style.display='none';initPage();"> 
 <!--#Template Beginn Top-Navigation-->
-<xsl:call-template name="nd_navi_top" /> 
+<xsl:call-template name="viz_navi_top" />
+<!--<xsl:call-template name="ude_header_dashboard" />-->
+
+
 <!--#Template Ende Top-Navigation-->
 
 <div class="columns">
@@ -62,7 +64,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 <!--#Template Beginn Navigations-Panel Auswertungen-->
 <xsl:if test="/ergebnisse/@showNavigation='true' and 1=0"><!-- erstmal kein Panel,weil der Asssistent schon recht breit ist -->
 <xsl:for-each select="/ergebnisse">
-<!--kein Navi Panel bei Maskenfeldern <xsl:call-template name="nd_navi_panel" />-->
+<xsl:call-template name="nd_navi_panel" />
 </xsl:for-each>
 </xsl:if>
 <!--#Template Ende Navigations-Panel Auswertungen-->
@@ -71,36 +73,19 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 <section class="hero-body">
 <div class="container"> 
 <div class="columns is-mobile is-left">
-<div class="column is-two-thirds">
+<div class="column is-full">
 <div class="card "> 
 <div class="card-content">
 
 <xsl:call-template name="nd_progressbar" /> 
 
-<xsl:call-template name="viz_viewer"/>
+<xsl:call-template name="viz_viewer_columnwise"/>
-<!-- jetzt Tabelle-->
-<div style="margin-left:50px">
-<xsl:for-each select="/ergebnisse/ergebnis/ergebniselement">
-<p class="teiltabelle_titel">
-<xsl:text>Tabelle </xsl:text><a onclick="{concat('toggleTableVisibility(',$colon,'toggleBtnTable',@ordnr+1, $colon,',',$colon, 'table',@ordnr+1,$colon,');')}"> <img  id="{concat('toggleBtnTable',@ordnr+1)}" src="../images/minus-circled.svg" height="10px" border="0" /></a></p>
 
-<xsl:call-template name="nd_singleTable">
-<xsl:with-param name="ergebniselement_ordnr" select="@ordnr" />
-<xsl:with-param name="showPager" select="'none'" />
-</xsl:call-template>
-</xsl:for-each>
-</div>
 <xsl:call-template name="bottombar" />
  <xsl:comment>customfooter</xsl:comment>
  </div> <!--Ende content -->
 </div> <!--Ende card-content-->
 </div> <!--Ende card-background -->
-
-<div class="column">
-<xsl:if test="count(/ergebnisse/ergebnis[@ordnr='0']/completefields/feld[@art='1']) &gt; 0">
-<xsl:call-template name="renderTableDialogs" />
-</xsl:if>
-</div>
 </div> <!--Ende column-->
 </div> <!--Ende hero-columns-->
 
@@ -118,144 +103,502 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 
 
 
-<xsl:template name="viz_viewer">
+<xsl:template name="viz_viewer_columnwise">
-<xsl:param name="show_maskenfelder" select="'true'" />
+<xsl:if test="/ergebnisse/@isMakro='true'">
-<xsl:variable name="pageTitle">
+<p class="cockpit_title"><xsl:value-of select="/ergebnisse/makro/name" /></p>
-<xsl:choose>
+</xsl:if>
-<xsl:when test="/ergebnisse/@isMakro='true'">
+<p></p>
-<xsl:value-of select="/ergebnisse/makro/name" />
-</xsl:when>
-<xsl:otherwise>
-<xsl:value-of select="/ergebnisse/ergebnis[@ordnr='0']/maskenname" />
-</xsl:otherwise>
-</xsl:choose>
-</xsl:variable>
-
 <xsl:call-template name="buildVizMetadata" />
 
 <!-- end Kopf-->
 <!-- start Grafiken-->
-<!-- Berechne den Umbruch der Spalten für die Kacheln
+
-z.B. 6 Grafiken ergibt einen Umbruch nach der 3. Teiltabelle
-Formel: ANZ / 2 kaufm. gerundet 
--->
 <span class="separator">&#160;</span>
 <!--Beginn Selektions-Card-->
 <!--Beginn Berichtstitel, Pfad, Knopfleiste-->
-<section class="hero-body has-background-light">
+<section class="hero-body">
-<xsl:call-template name="nd_pagetitle">
-<xsl:with-param name="title" select="$pageTitle" />
-<xsl:with-param name="subtitle" />
-<xsl:with-param name="icon_classname" />
-</xsl:call-template>
-
 <section class="container"> <!--Beginn Kartenreihe -->
 <div class="columns features is-mobile is-left"> <!--Beginn columns Kartenreihe -->
+<div class="column is-two-thirds">
 
-<xsl:for-each select="/ergebnisse/ergebnis[felder/feld[@varname='Grafik']/value!='']/ergebniselement">
+<xsl:for-each select="ergebnisse/ergebnis[felder/feld[@varname='Grafik']/value!='']/ergebniselement">
 <xsl:variable name="ergebniselement_counter" select="position()" />
 <xsl:variable name="chart_uniquename"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
 <xsl:variable name="ergebniselement_ordnr"><xsl:value-of select="@ordnr" /></xsl:variable>
 
 
 <!--<p><xsl:value-of select="concat('Zähler: ',$ergebniselement_counter)"/></p>-->
-
-<div>
-<xsl:attribute name="class"><xsl:text>column is-</xsl:text><xsl:value-of select="$colwidth"/></xsl:attribute>
 <xsl:call-template name="viewer_kachel">
 <xsl:with-param name="caption" select="viz_charts/viz_chart[@uniquename=$chart_uniquename]/@caption"/>
 <xsl:with-param name="ergebniselement_ordnr" select="$ergebniselement_ordnr" />
 </xsl:call-template>
 <!--<p><xsl:value-of select="concat($spalten_anz,'-',$ergebniselement_counter,':',$ergebniselement_counter mod $spalten_anz)"/></p>-->
+
+</xsl:for-each>
+<xsl:call-template name="displayTables" />
 </div>
-<!-- neue Zeile wenn counter mod Spaltenanz. =0 -->
+
+<div class="column">
+<xsl:if test="count(/ergebnisse/ergebnis[@ordnr='0']/completefields/feld[@art='1']) &gt; 0">
+<xsl:call-template name="renderTableDialogs" />
+</xsl:if>
+</div><!--Ende column-->
+</div> <!--Ende hero-columns-->
 
 
-</xsl:for-each>
+</section>
-</div><!-- der columns -->
-</section><!-- der letzten Kartenreihe -->
 </section><!-- des Portals -->
 </xsl:template>	
-<!--<xsl:template name="viewer_kachel">
+
-<xsl:param name="caption" />
+
-<xsl:param name="ergebniselement_ordnr" />
+<xsl:template name="ude_header_dashboard_alt">
-<div class="card is-shady">
+<header>
-<div class="card-image">
+<div class="hs_header">
-<div id="{concat('chartDiv',$ergebniselement_ordnr)}">
+	
-Platzhalter
+               <div class="hs_header_box1"></div>
+                     <div class="hs_header_box2">
+		     	
+                     	<a class="button is-link is-outlined is-small" onclick="alert('todo');">Studienanfänger*innen</a>   
+			<a class="button is-link is-outlined is-small" onclick="alert('todo');">Studierende</a>   
+			<a class="button is-link is-outlined is-small" onclick="alert('todo');">Absolvent*innen</a>   
+			<a class="button is-link is-outlined is-small" onclick="alert('todo');">Doktorand*innen</a>   
+			
+			<!--<p class="cockpit_title">Universität Duisburg-Essen</p>-->
+			<div class="field"><span class="buttonlist">	     
+			    <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true" href="javascript:exportBooklet('application/pdf')">
+		 <img title="Ausgabe im PDF-Querformat" alt="Ausgabe im PDF-Querformat" src="../images/icons/into_pdf.svg" class="svg_icon" border="0" /></a>
+		 <span class="separator">&#160;</span>
+	     <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true" href="javascript:exportBooklet('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')">
+	     	<img title="Ausgabe in Excel" alt="Ausgabe in Excel" src="../images/icons/into_excel_normal.svg" class="svg_icon" border="0" /></a>
+		<span class="separator">&#160;</span>
+	     <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true" href="javascript:exportBooklet('application/vnd.openxmlformats-officedocument.wordprocessingml.document')">
+	     	<img title="Ausgabe in Word" alt="Ausgabe in Word" width="25px" height="25px" src="../images/icons/into_word.svg" class="svg_icon" border="0" /></a>
+	 
+	 </span>
+		  
 	</div>
+			<a href="https://www.uni-due.de/verwaltung/dtac/akademisches_controlling.php">
+                           <figure class="image is-64x64"><img src="../images/signet_ude_rgb.svg" title="UDE. Akademisches Controlling" /></figure></a>
 		     </div>
-<p>
-<a onClick="{concat('javascript:openModalImage(',$ergebniselement_ordnr,');')}">
-<span class="button is-success is-small modal-button">Vergrößern ...</span></a>
 
-<a onClick="{concat('javascript:openModalCardDetail(',$ergebniselement_ordnr,');')}">
-<span class="button is-link is-small modal-button">Mehr Infos ...</span></a>
 
-</p>
+	       <div class="hs_header_box1"></div>
        
 </div>
+</header>
+</xsl:template>
+<xsl:template name="ude_tableCSS">
+<!-- aus 800000280_datencockpit.xsl -->
+		<style type="text/css">
+.dojoDialog {background : #eee;	border : 1px solid #999;-moz-border-radius : 5px;padding : 4px;width:650;height:420px;overflow:scroll}
+.treebutton {
+      border:none;
+      margin: 0 4px 0 0;
+    }
+ @media print{
+.dontprint{display:none;}
+}
+
+/*Cockpit-Header*/
+.hs_header {
+  position: fixed; 
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 20;	 /*positioniert sich im flow am nähesten zum Betrachter*/ 
+}
+
+.cockpit_title {
+   color: #004C93;
+   font-size: 3.0em;
+   font-weight: 800;
+}   
 
-</xsl:template>-->
+.hs_header_box1 {	   	/*für Balken-Box über/unter Cockpittitel*/
-<xsl:template name="importVizJavascriptLibsViewer">
+   background: #004C93;
-<script language="Javascript" type="text/javascript" src="../xml/js/jquery-2.1.1.min.js" />
+   height: 1.0rem; 
-<script language="JavaScript" type="text/javascript" src="../xml/js/memtext/sx_functions.js"></script>
+}
-<xsl:call-template name="tableJavascript_viz" />
+
-<script language="Javascript" type="text/javascript">
+.hs_header_box2 {	   	/*für Logo-/Cockpittitel-Box*/
-<xsl:text><![CDATA[
+   display: flex;
+   height: 4.0rem; 
+   padding: 0.3rem 17.0rem 0rem 9.0rem;   /*für Padding: ob re un li*/
+   align-items: center;		    /*für vertikale Ausrichtung d Elemente*/
+   justify-content: space-between;  /*für gleichm. Leerraum zw. Elementen*/
+   background-color: white;
+}
 
-function initPage()
+
+/*Buttons mit is-link=UDE-Blau*/
+.button.is-link {
+    background-color: #004C93;         /*link-Blau:#3273dc; UDE-Blau:#004C93*/
+    border-color: transparent;
+    color: #fff; }
+  .button.is-link:hover, .button.is-link.is-hovered {
+      background-color: #276cda;
+      border-color: transparent;
+      color: #fff; }
+    .button.is-link:focus, .button.is-link.is-focused {
+      border-color: transparent;
+      color: #fff; }
+      .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) {
+        box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); }
+    .button.is-link:active, .button.is-link.is-active {
+      background-color: #2366d1;
+      border-color: transparent;
+      color: #fff; }
+    .button.is-link[disabled],
+    fieldset[disabled] .button.is-link {
+      background-color: #004C93;
+      border-color: transparent;
+      box-shadow: none; }
+    .button.is-link.is-inverted {
+      background-color: #fff;
+      color: #004C93; }
+      .button.is-link.is-inverted:hover, .button.is-link.is-inverted.is-hovered {
+        background-color: #f2f2f2; }
+      .button.is-link.is-inverted[disabled],
+      fieldset[disabled] .button.is-link.is-inverted {
+        background-color: #fff;
+        border-color: transparent;
+        box-shadow: none;
+        color: #004C93; }
+    .button.is-link.is-loading::after {
+      border-color: transparent transparent #fff #fff !important; }
+    .button.is-link.is-outlined {
+      background-color: transparent;
+      border-color: #004C93;
+      color: #004C93; }
+      .button.is-link.is-outlined:hover, .button.is-link.is-outlined.is-hovered, .button.is-link.is-outlined:focus, .button.is-link.is-outlined.is-focused {
+        background-color: #004C93;
+        border-color: #004C93;
+        color: #fff; }
+      .button.is-link.is-outlined.is-loading::after {
+        border-color: transparent transparent #004C93; #004C93; !important; }
+      .button.is-link.is-outlined.is-loading:hover::after, .button.is-link.is-outlined.is-loading.is-hovered::after, .button.is-link.is-outlined.is-loading:focus::after, .button.is-link.is-outlined.is-loading.is-focused::after {
+        border-color: transparent transparent #fff #fff !important; }
+      .button.is-link.is-outlined[disabled],
+      fieldset[disabled] .button.is-link.is-outlined {
+        background-color: transparent;
+        border-color: #004C93;
+        box-shadow: none;
+        color: #004C93; }
+    .button.is-link.is-inverted.is-outlined {
+      background-color: transparent;
+      border-color: #fff;
+      color: #fff; }
+      .button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined.is-hovered, .button.is-link.is-inverted.is-outlined:focus, .button.is-link.is-inverted.is-outlined.is-focused {
+        background-color: #fff;
+        color: #004C93; }
+      .button.is-link.is-inverted.is-outlined.is-loading:hover::after, .button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-link.is-inverted.is-outlined.is-loading:focus::after, .button.is-link.is-inverted.is-outlined.is-loading.is-focused::after {
+        border-color: transparent transparent #004C93; #004C93; !important; }  
+     
+.exportoptions {
+   margin-top: 2.0em; 
+}
+   
+.buttonlist{			/*für resposive Buttonleiste*/
+   display: flex; 
+   flex-flow: no wrap;
+   justify-content: flex-start;
+   padding: 0.3rem 0rem 0.3rem 0rem; /*für Padding: ob re un li*/
+   }
+   
+.buttonlist img { 		/*für Icongröße in Buttonleiste*/
+    height: 2.5rem; 
+    width: auto; 
+    margin-top: 0em; }
+    
+/*Auswahlfelder*/
+.card {				/*für Auswahlfeldercard-Position*/
+   display: flex;
+   flex-flow: column;
+   margin-left: 0em;		
+   margin-top: 8em; 		
+   min-width: 10.0em;
+   width: 100%; 
+   } 		
+   
+.label-container, .button-label { /*für einh.responsive Feldbezeichner*/
+   display: flex;
+   justify-content: left;
+   background: ;	
+   min-width: 10.0em;		/*für kleine Viewports*/
+   width: 10%; }		/*für kleine Viewports*/
+   
+.control-new { 			/*für einheitliche Controls*/
+   min-width: 10.0em; 		/*für kleine Viewports*/
+   width: 10%; 			/*für große Viewports*/
+   }
+   
+.button {			/*für Button-Bezeichner-Ausrichtung*/
+   display: flex;
+   justify-content: left; }
+ 
+/*Erläuterungen/Legende*/
+.box-new {			/*für Kopfzeile mit Close-Button*/
+   display: flex;
+   justify-content: space-between;
+   font-weight: bold;
+}	
+
+.leg_erl {
+  background-color: whitesmoke; /*für Abschnitthintergrund, Schrift*/ 
+  font-size: 0.8em;
+}
+ 
+.dl_title {			/*für Texthervorhebungen*/ 
+   display: flex;
+   justify-content: center;
+   background: inherit;	
+   font-size: 1.2em;
+   font-weight: 400;   
+ }
+ /*Datentabellen*/
+.table-container {
+   z-index: 10; /*positioniert sich im flow hinter dem hs-header*/ 
+}
+ table.ergtabelle tr.listRowOdd td.leer
  {
-var myChartModelStr="";
+ border:thin solid white;
-var myDiv="";
+ background-color:white;
-]]></xsl:text>
-<xsl:for-each select="ergebnisse">
-<xsl:for-each select="ergebnis/ergebniselement">
-<xsl:variable name="chart_uniquename"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
-<xsl:variable name="ergebniselement_ordnr"><xsl:value-of select="@ordnr" /></xsl:variable>
-<xsl:if test="$chart_uniquename != ''">
-<xsl:text><![CDATA[
-myChartModelStr=']]></xsl:text>
-<xsl:value-of select="translate(viz_charts/viz_chart[@uniquename=$chart_uniquename]/@chartmodel,'§',$quote)" />
-<xsl:text><![CDATA[';
-myDiv="]]></xsl:text>
-<xsl:value-of select="concat('chartDiv',$ergebniselement_ordnr)" />
-<xsl:text><![CDATA[";
-createViewer(myChartModelStr,myDiv);
-myDiv="]]></xsl:text>
-<xsl:value-of select="concat('modalCardImage',$ergebniselement_ordnr)" />
-<xsl:text><![CDATA[";
-createViewer(myChartModelStr,myDiv);
-myDiv="]]></xsl:text>
-<xsl:value-of select="concat('modalCardDetailImage',$ergebniselement_ordnr)" />
-<xsl:text><![CDATA[";
-createViewer(myChartModelStr,myDiv);
-
-]]></xsl:text>
-</xsl:if>
-</xsl:for-each>
-</xsl:for-each>
-<xsl:text><![CDATA[
  }
+  table.ergtabelle tr.listRowEven td.leer
+ {
+ border:thin solid white;
+ background-color:white;
+ }
+ table.ergtabelle tr td.leer
+ {
+ border:thin solid white;
+ background-color:white;
+ }
+ table.ergtabelle tr th.leer
+ {
+ border:thin solid white;
+ background-color:white;
+ }
+  table.ergtabelle tr th.header
+ {
+ vertical-align:center;
+text-align:center;
+ 
+ }
+ 
+  table.ergtabelle
+ {
+ border:thin solid white;
+ }
+ 
+ /* Zahlen rechtsbündig:*/
+   table.ergtabelle tbody tr.listRowEven td.integer
+ {
+ text-align:right;
+empty-cells:show
+vertical-align:center;
+ }
+    table.ergtabelle tbody tr.listRowOdd td.integer
+ {
+ text-align:right;
+empty-cells:show
+vertical-align:center;
+ }
+    table.ergtabelle tbody tr.listRowEven td.decimal
+ {
+ text-align:right;
+empty-cells:show
+vertical-align:center;
+ }
+    table.ergtabelle tbody tr.listRowOdd td.decimal
+ {
+ text-align:right;
+empty-cells:show
+vertical-align:center;
+ }
+</style>
+</xsl:template>
+
+<xsl:template name="buildVizMetadata">
+<xsl:variable name="vizInitialName">
+<xsl:choose>
+<xsl:when test="/ergebnisse/@isMakro='true'">
+<xsl:value-of select="/ergebnisse/makro/name"/>
+</xsl:when>
+<xsl:otherwise>
+<xsl:value-of select="/ergebnisse/ergebnis/maskenname" />
+</xsl:otherwise>
+</xsl:choose>
+</xsl:variable>
+  <!--<xsl:call-template name="navigationsmenue" />-->
+<script language="Javascript">
 
-function createViewer(myChartModelStr,chartDiv)
+<xsl:text>
+
+var vizInitialName='</xsl:text><xsl:value-of select="$vizInitialName"/><xsl:text>';
+
+
+function dataRowMetaData(tableId,nr,colname,colcaption,coltype,colfunction)
     {
-myChartModel=JSON.parse(myChartModelStr);
+    this.tableId=tableId;
-renderChart(chartDiv,myChartModel);
+    this.nr=nr;
+this.colname=colname;
+this.colcaption=colcaption;
+this.coltype=coltype;
+this.colfunction=colfunction;
 }
 
-function toggleLegendeDisplay(legendeDiv)
+
+function tableMetaData(nr,value,name,isDefault)
 {
-var myDiv=document.getElementById(legendeDiv);
+    this.value=value;
-if(myDiv.style.display=="block")
+    this.nr=nr;
-		myDiv.style.display="none";
+    this.name=name
-	else
+    this.isDefault=isDefault;
-		myDiv.style.display="block";
 
 }
 
-]]></xsl:text>
+var rsTableMetaData=new Array();
+var rsColumnMetaData=new Array();
+var rs=new Array();
+
+</xsl:text>
+
+
+
 </script>
 
+
+<xsl:for-each select="/ergebnisse/ergebnis/ergebniselement">
+<xsl:call-template name="buildVizData" >
+<xsl:with-param name="tableId" select="@ordnr" />
+</xsl:call-template>
+</xsl:for-each>
+
+</xsl:template>
+<xsl:template name="buildVizData">
+<xsl:param name="tableId" />
+
+<script language="Javascript">
+
+<xsl:text>
+
+rsTableMetaData.push(new tableMetaData(
+</xsl:text>
+<xsl:value-of select="position()"/>
+<xsl:text>,'</xsl:text>
+<xsl:value-of select="$tableId"/>
+<xsl:text>','</xsl:text>
+<xsl:value-of select="concat('Tab. ',$tableId+1)"/>
+<xsl:text>',
+</xsl:text>
+<xsl:choose>
+<xsl:when test="position()=1">
+<xsl:text>true</xsl:text>
+</xsl:when>
+<xsl:otherwise>
+<xsl:text>false</xsl:text>
+</xsl:otherwise>
+</xsl:choose>
+<xsl:text>
+));
+rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]=new Array();
+
+//var myChartModel=new chartModel(1,"","",rsTableMetaData);
+
+function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</xsl:text>
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:text>,</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template>
+</xsl:for-each>
+<xsl:text>
+)
+    {
+    this.rownr=rownr;
+    </xsl:text>
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:text>this.</xsl:text><xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template><xsl:text>=</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template><xsl:text>;
+</xsl:text>
+</xsl:for-each><xsl:text>
+}
+
+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>
+
+
+<xsl:for-each select="sqlerg/complete_headers/header">
+<xsl:variable name="rownr">
+<xsl:value-of select="position()"/>
+</xsl:variable>
+<xsl:text>
+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="$rownr"/>
+<xsl:text>,'</xsl:text>
+<xsl:call-template name="getColumnNameJS">
+<xsl:with-param name="columnNameFromDB" select="f_name"/>
+</xsl:call-template>
+<xsl:text>','</xsl:text>
+<xsl:call-template name="remove_linebreaksAndQuot">
+<xsl:with-param name="volltext" select="wert" />
+</xsl:call-template>
+<xsl:text>',0,null));</xsl:text> <!--coltype noch unbekannt, colfunction unnötig-->
+</xsl:for-each>
+
+
+<xsl:for-each select="sqlerg/row">
+<xsl:variable name="rownr">
+<xsl:value-of select="position()"/>
+</xsl:variable>
+<xsl:if test="$rownr=1">
+<!-- first metadata -->
+<xsl:for-each select="col">
+<xsl:variable name="colnr">
+<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)"/><xsl:text>].coltype=</xsl:text><xsl:value-of select="@typ"/>
+<xsl:text>;
+</xsl:text>
+</xsl:for-each>
+
+</xsl:if>
+<!--now resultset-->
+<xsl:text>
+//rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]= new Array();
+rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(</xsl:text><xsl:value-of select="$rownr"/>
+<xsl:for-each select="col">
+<xsl:text>,</xsl:text>
+<xsl:choose>
+<xsl:when test="@typ='1'"><xsl:text>'</xsl:text>
+<xsl:call-template name="remove_linebreaksAndQuot">
+<xsl:with-param name="volltext" select="wert" />
+</xsl:call-template>
+<xsl:text>'</xsl:text></xsl:when>
+<!--todo:Typ Datum --> 
+<xsl:when test="string-length(wert)=0"><xsl:text>null</xsl:text>
+</xsl:when>
+<xsl:otherwise>
+<xsl:value-of select="wert"/>
+</xsl:otherwise>
+</xsl:choose>
+</xsl:for-each>
+<xsl:text>));
+</xsl:text>
+</xsl:for-each>
+
+
+</script>
 </xsl:template>
 </xsl:stylesheet>