Dynamische Elemente und Resultsets #5

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

@@ -1,16 +1,16 @@
 1^Diagramm-Höhe^height^^px^1^ ^0^4^10^Diagrammhöhe (exkl. Skalenbeschriftung). Wird nur ausgewertet wenn es keine Y-Achse gibt!^101^^^integer^
 2^Diagramm-Breite^width^^px^1^ ^0^4^10^Diagrammsbreite (exkl.Skalenbeschriftung)^102^100^2000^integer^
 3^Werte-Label-Breite^valueLabelWidth^^px^1^^0^1^18^^^^^integer^
-4^Hintergrundfarbe^backgroundColor^white^ ^1^#ffffeb^0^3^11^Hintergrundfarbe der Grafik^201^^^string^
+4^Hintergrundfarbe^backgroundColor^#ffffff^ ^1^#ffffeb^0^3^11^Hintergrundfarbe der Grafik^201^^^string^
 5^Vordergrundfarbe^color^^ ^1^black^0^3^11^Farbe von Text- und Diagrammelementen^202^^^string^
 6^Schriftgröße^fontSize^^px^1^ ^0^4^11^Schriftgröße der Skalenbeschriftung^204^^^integer^
 7^Schriftfamilie^fontFamily^^ ^1^serif|sans-serif|monospace|system_ui^0^2^11^Schriftfamlilie der Skalenbeschriftung^203^^^string^
-8^Flächenfarbe^fill^^ ^1^ ^0^1^10^Füllfarbe (nur) von Diagrammelementen (Flächen, Balken, Säulen, Streifen, Punkte)^305^^^string^
-11^Kat: Schriftneigung^tickRotate^^ ^1^ ^0^1^18^Neigungswinkel der Achsenwerte^604^^^integer^
-12^Kat: Skalierung^ticks^^ ^1^ ^0^1^18^Feinheit der Wertegliederung^605^^^integer^
-13^Kat: Schriftgröße^tickSize^^ ^1^ ^0^1^18^Größe der Achsenwerte^603^^^integer^
-15^Kat: Label-Ausrichtung^labelAnchor^^ ^1^left|center|right^0^2^18^Label-Position^601^^^string^
-16^Außenrand links^marginLeft^^px^1^ ^0^4^10^Abstand links neben der Grafik (inkl. Skala)^103^^^integer^
+8^Flächenfarbe^fill_static^^ ^1^ ^0^3^10^Füllfarbe (nur) von Diagrammelementen (Flächen, Balken, Säulen, Streifen, Punkte)^305^^^string^
+11^X: Schriftneigung^tickRotate_x^^ ^1^ ^0^1^18^Neigungswinkel der Achsenwerte^604^^^integer^
+12^X: Skalierung^ticks_x^^ ^1^ ^0^1^18^Feinheit der Wertegliederung^605^^^integer^
+13^X: Schriftgröße^tickSize_x^^ ^1^ ^0^1^18^Größe der Achsenwerte^603^^^integer^
+15^X: Label-Ausrichtung^labelAnchor_x^^ ^1^left|center|right^0^2^18^Label-Position^601^^^string^
+16^Außenrand links^marginLeft^100^px^1^ ^0^4^10^Abstand links neben der Grafik (inkl. Skala)^103^^^integer^
 17^Außenrand rechts^marginRight^^px^1^ ^0^4^10^Abstand rechts neben der Grafik (inkl. Skala)^104^^^integer^
 18^Außenrand oben^marginTop^^px^1^ ^0^4^10^Abstand oberhalb der Grafik^105^^^integer^
 19^Außenrand unten^marginBottom^^px^1^ ^0^4^10^ ^106^^^integer^
@@ -21,22 +21,28 @@
 24^Farbschema^scheme^^ ^1^blues|greens|greys|oranges|purples|reds^0^2^20^Farbschema von Diagrammelemente^303^^^string^
 25^Farbtyp^type^^ ^1^einfarbig|mehrfarbig|zyklisch^0^2^12^Ein-/Mehrfarbigkeit von Diagrammelementen^302^^^string^
 43^Farbsättigung^fillOpacity^^ ^1^ ^0^4^12^Deckkraft der Füllfarbe von Diagrammelementen^306^^^string^
-44^Strichfarbe^stroke^^ ^1^ ^0^1^12^Strichfarbe von Diagrammelementen (relevant für Plot.dot, Plot.tickX/Y)^307^^^string^
 45^Strichdicke^strokeWidth^^ ^1^ ^0^1^12^Strichdicke von Diagrammelementen (relevant für Plot.dot, Plot.tickX/Y)^308^^^string^
 56^Fortlaufende Skala^continous scales^^ ^1^identity|linear|log|pow|sqrt|symlog^0^2^15^Art der Skalen-Gliederung^401^^^string^
 57^Kategorie-Skala^categorical scales^^ ^1^point|band^0^2^15^Art der Skalen-Gliederung^402^^^string^
 58^Datums-Skala^date scales^^ ^1^time|utc^0^2^15^Art der Skalen-Gliederung^403^^^string^
 60^Farbschema-Typ^schemetype^^ ^1^linear|sqrt|pow|log|symlog|sequential|cyclical|quantile^0^2^12^Art der Farbverteilung in Diagrammelementen^304^^^string^
 61^Elementtyp^marks^^ ^1^Plot.line|Plot.dot|Plot.areaX|Plot.areaY.|Plot.barX|Plot.barY|Plot.rectX|Plot.rectY|Plot.ruleX|Plot.ruleY|Plot.tickX|Plot.tickY|Plot.arrow|Plot.cell|Plot.text|Plot.link|Plot.image^0^2^12^Ausrichtung und Form der Dialgrammelemente^301^^^string^
-63^Kat: Label-Abstand^labelOffset^^px^1^ ^0^1^18^Label-Abstand von Achse^602^^^integer^
+63^X: Label-Abstand^labelOffset_x^^px^1^ ^0^1^18^Label-Abstand von Achse^602^^^integer^
 68^Maß: Chart-Abstand^gridChartOffset^^ ^1^ ^0^1^18^ ^607^^^string^
 69^Maß: Label-Höhe^gridLabelHeight^^px^1^ ^0^1^18^ ^608^^^integer^
-70^Kategorie-Dimension 1^viz_dimension1^^ ^1^ ^0^1^5^ ^608^^^string^
+70^X-Achse^x^^ ^1^ ^0^1^5^ ^608^^^string^
 71^Kategorie-Dimension 2^viz_dimension2^^ ^1^ ^0^1^5^ ^608^^^string^
-72^Maß^viz_measure1^^ ^1^ ^0^1^6^ ^608^^^string^
+72^Y-Achse^y^^ ^1^ ^0^1^6^ ^608^^^string^
 73^Maß 2^viz_measure2^^ ^1^ ^0^1^6^ ^608^^^string^
-74^Maß^x_horizontal^^ ^1^ ^0^1^5^ ^608^^^string^
-75^Kategorie-Dimension^y_horizontal^^ ^1^ ^0^1^5^ ^608^^^string^
-76^Balkensegment^stroke_bar^^ ^1^ ^0^1^5^ ^608^^^string^
+76^Serien-Dimension^stroke^^ ^1^ ^0^1^5^ ^608^^^string^
 78^Legende^legend^^ ^1^true|false^0^2^20^ ^303^^^boolean^
 79^Textbeschriftung^text_horizontal^^ ^1^ ^0^1^5^ ^608^^^string^
+80^Serienfarbe^fill^^ ^1^ ^0^1^5^Füllfarbe (nur) von Diagrammelementen (Flächen, Balken, Säulen, Streifen, Punkte)^305^^^string^
+81^Y: Label-Abstand^labelOffset_y^^px^1^ ^0^1^21^Label-Abstand von Achse^602^^^integer^
+82^Y: Label-Ausrichtung^labelAnchor_y^^ ^1^left|center|right^0^2^21^Label-Position^601^^^string^
+83^Y: Schriftgröße^tickSize_y^^ ^1^ ^0^1^21^Größe der Achsenwerte^603^^^integer^
+84^Y: Schriftneigung^tickRotate_y^^ ^1^ ^0^1^21^Neigungswinkel der Achsenwerte^604^^^integer^
+85^Y: Skalierung^ticks_y^^ ^1^ ^0^1^21^Feinheit der Wertegliederung^605^^^integer^
+86^X: Label^label_x^^ ^1^ ^0^1^18^Label X-Achse^602^^^string^
+87^Y: Label^label_y^^ ^1^ ^0^1^21^Label Y-Achse^602^^^string^
+88^Punktdicke^r^^ ^1^ ^0^1^5^Punktdicke von Diagrammelementen (relevant für Plot.dot, Plot.tickX/Y)^308^^^string^

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

@@ -5,6 +5,7 @@
 12^MARKS^Diagramm-Elemente^30^
 15^SCALES^Skalen-Typen^40^
 17^AXIS^Achsen-Customizing^50^
-18^TICKS_LABELS^Achsen-Beschriftung^^
+18^TICKS_LABELS_X^X Achsen-Beschriftung^^
 19^TICKFORMATTING^Zahlen-, Datumsformat^80^
 20^COLOR^Farben^90^
+21^TICKS_LABELS_Y^Y Achsen-Beschriftung^^

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

@@ -2,3 +2,4 @@
 2^2^10^layout^
 3^2^18^x^
 4^2^20^color^
+5^2^21^y^

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

@@ -19,3 +19,6 @@
 20^2^21^insetBottom^
 21^2^22^insetLeft^
 22^2^23^insetRight^
+23^2^86^label^
+25^2^87^label^
+26^2^84^tickRotate^

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

@@ -1,6 +1,5 @@
-1^bar_x^Balkendiagramm (horizontal einfach)^2^/superx/xml/js/viz/viz_functions.js^makeBarX^
-2^bar_y^Balkendiagramm (vertikal)^2^/superx/xml/js/viz/viz_functions.js^makeBarY^
-3^line^Liniendiagramm (vertikal)^2^/superx/xml/js/viz/viz_functions.js^makeLine^
-4^bar_x_stacked^Balkendiagramm (horizontal gestapelt)^2^^^
-5^area_y^Flächendiagramm (vertikal)^2^^^
-6^dot^Punktediagramm (vertikal)^2^^^
+1^bar_x^Balken (horizontal)^2^/superx/xml/js/viz/viz_functions.js^makeBarX^
+2^bar_y^Balken (vertikal)^2^/superx/xml/js/viz/viz_functions.js^makeBarY^
+3^line^Linien (vertikal)^2^/superx/xml/js/viz/viz_functions.js^makeLine^
+5^area_y^Flächen (vertikal)^2^^^
+6^dot^Punkte (vertikal)^2^^^

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

@@ -1,8 +1,5 @@
 1^1^70^1^
 3^1^72^1^
-4^4^74^1^
-5^4^75^1^
-6^4^76^1^
 8^2^70^1^
 9^2^72^1^
 10^3^70^1^
@@ -11,4 +8,10 @@
 15^5^72^1^
 16^6^70^1^
 17^6^72^1^
-18^4^79^0^
+20^1^76^0^
+21^1^80^0^
+22^2^76^0^
+23^2^80^0^
+24^5^8^0^
+26^3^76^0^
+27^6^88^0^

superx/xml/js/viz/viz_functions.js

@@ -341,14 +341,18 @@ function renderChart(chartDiv,currentChartModel)
 	
 	if(document.getElementById("chartName").value=="")
 		document.getElementById("chartName").value=vizInitialName;
-	var chartName=document.getElementById("chartName").value;
-	var renderer=document.getElementById('fldVizRenderer').value;
-	var mySVG=currentChartModel.getChartSVG();
-	document.getElementById(chartDiv).innerHTML="";
-	if(typeof mySVG === 'object')
+	if(currentChartModel.chartElements.length>0)
 	{
-	document.getElementById(chartDiv).appendChild(mySVG);
+		var mySVG=currentChartModel.getChartSVG();
+		if(typeof mySVG === 'object')
+		{
+		document.getElementById(chartDiv).innerHTML="";
+		document.getElementById(chartDiv).appendChild(mySVG);
+		}
 	}
+	else
+		document.getElementById(chartDiv).innerHTML="";
+
 }
 
 function prepareSelectionForm()
@@ -965,6 +969,8 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render
 			if((myCommonChartProperties[k].groupVariableName=="layout"
 			|| myCommonChartProperties[k].groupVariableName=="style"
 			|| myCommonChartProperties[k].groupVariableName=="x"
+			|| myCommonChartProperties[k].groupVariableName=="y"
+			|| myCommonChartProperties[k].groupVariableName=="color"
 			)
 			&& myCommonChartProperties[k].rendererUniquename==renderer)
 				divBox.appendChild(renderChartPropertyField(myCommonChartProperties[k]));

superx/xml/viz_html_chart.xsl

@@ -1313,7 +1313,7 @@ var platform='superx';
 <xsl:value-of select="/ergebnisse/makro/name"/>
 </xsl:when>
 <xsl:otherwise>
-<xsl:value-of select="/ergebnisse/ergebnis/ergebniselement/maskenname" />
+<xsl:value-of select="/ergebnisse/ergebnis/maskenname" />
 </xsl:otherwise>
 </xsl:choose>
 </xsl:variable>
@@ -1533,6 +1533,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
 </xsl:for-each>
 
 <!--Aufruf/Anzeige Formular Datenauswahl-->
+<!--
 <div class="field is-grouped">
   <div class="label-container">
      <label class="label is-required is-small"><strong>Daten-Auswahl</strong></label>
@@ -1541,12 +1542,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
   <span class="separator">&#160;</span>
   <span class="separator">&#160;</span>
      
-  <!--<button class="button is-small is-rounded is-white is-outlined"  
-  onClick="fillDataSelectionForm('dataSelectionFormDiv');">
-	<span class="icon is-small"><i class="../images/more.svg"></i>
-		<img src="../images/more.svg" title="Laden" />
-	</span>
-  </button>-->
+ 
   <a  
   onClick="fillDataSelectionForm('dataSelectionFormDiv');">					
 	<span class="icon">
@@ -1556,7 +1552,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
   
 </div>
 
-<div id="dataSelectionDiv"> <!--class="section"-->
+<div id="dataSelectionDiv"> 
  <form name="dataSelectionForm" id="dataSelectionForm">
      
      <div id="dataSelectionFormDiv" style="display:none">
@@ -1572,7 +1568,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
 	      <p class="control-new">
 	       <div class="select is-small is-fullwidth is-focused">
 		 <select class="maskinputPflicht" id="dimension1" name="dimension1" tabindex="210">
-		    <option class="maskinput" value="" selected="selected"><!--211122BF Bitte wählen Sie Dimension 1--></option>
+		    <option class="maskinput" value="" selected="selected"></option>
 		 </select>
 	       </div>
 	      </p>
@@ -1624,7 +1620,7 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
 	      <p class="control-new">
 	       <div class="select is-small is-fullwidth is-focused">
 		 <select class="maskinputPflicht" id="dimension2" name="dimension2" tabindex="210">
-		    <option class="maskinput" value="" selected="selected"><!--211122BFBitte wählen Sie Dimension 2--></option>
+		    <option class="maskinput" value="" selected="selected"></option>
 		 </select>
 	       </div>
 	      </p>
@@ -1677,17 +1673,12 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
 	      <p class="control-new">
 	       <div class="select is-small is-fullwidth">
 		<select class="maskinputPflicht" id="measure1" name="measure1" tabindex="230" >
-		    <option class="maskinput" value="" selected="selected"><!--211122BF Bitte wählen Sie die Maßangabe--></option>
+		    <option class="maskinput" value="" selected="selected"></option>
 		</select>
 	       </div>
 	      </p>
 	   </div>
-	   <!--***Maß
-	   <select class="maskinputPflicht" id="measure1" name="measure1" tabindex="220">
-		 <option class="maskinput" value="" selected="selected">Bitte wählen</option></select>
-	   <select id="measure1_fn" name="measure1_fn" tabindex="230">
-		 <option class="maskinput" value="" selected="selected">vordefinierte Funktionen:</option></select>
-	   Maß***-->
+	
 	 
 	   <span class="separator">&#160;</span>
 	   <span class="separator">&#160;</span>
@@ -1723,67 +1714,24 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
 	   </span>
 	</div>
 	
-	<!--dq orig-->
-<!--
-<table>
-<tr><th>Dimension</th><th>Auswahl</th><th>Transformation (optional)</th></tr>
-<tr><td>Dimension 1:</td>
-<td><select class="maskinputPflicht" id="dimension1" NAME="dimension1" tabindex="210">
-    <option class="maskinput" value="">Bitte wählen</option>
-</select>
-</td>
-<td><select  id="dimension1_fn" NAME="dimension1_fn" tabindex="210">
-    <option class="maskinput" value="">vordefinierte Funktionen:</option>
-</select>
-</td>
-</tr>
-<tr><td>Dimension 2:</td>
-<td><select class="maskinputPflicht" id="dimension2" NAME="dimension2" tabindex="210">
-    <option class="maskinput" value="">Bitte wählen</option>
-</select>
-</td>
-<td><select  id="dimension2_fn" NAME="dimension2_fn" tabindex="210">
-    <option class="maskinput" value="">vordefinierte Funktionen:</option>
-</select>
-</td>
-</tr>
-<tr><td>Maß:</td>
-<td><select class="maskinputPflicht" id="measure1" NAME="measure1" tabindex="220">
-    <option class="maskinput" value="">Bitte wählen</option>
-</select>
-</td>
-<td>
-<select id="measure1_fn" NAME="measure1_fn" tabindex="230">
-    <option class="maskinput" value="">vordefinierte Funktionen:</option>
-</select>
-</td>
-</tr>
-</table>-->
 
   </div>
  </form>
-</div>
+</div>-->
 <!--Ende Formular Datenauswahl-->
 
 <span class="separator">&#160;</span>
 <span class="separator">&#160;</span>
 
 <!--Aufruf/Anzeige Daten-Vorschau-->
-<div class="field is-grouped">
+<!--<div class="field is-grouped">
   <div class="label-container">
      <label class="label is-required is-small"><strong>Daten-Vorschau</strong></label>
   </div> 
   
   <span class="separator">&#160;</span>
   <span class="separator">&#160;</span>
-  
-  <!--<button class="button is-small is-rounded is-white is-outlined"  
-  onClick="selectionResultPreview('selectionResultPreviewTable');">
-	<span class="icon is-small"><i class="../images/more.svg"></i>
-		<img src="../images/more.svg" title="Laden" />
-	</span>
-  </button>-->
-  <a  
+   <a  
      onClick="selectionResultPreview('selectionResultPreviewTable');">					
 	<span class="icon">
 		<img src="../images/icons/more.svg" title="Laden" /> 
@@ -1792,10 +1740,10 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
   
 </div>
 
-<div id="selectionResultPreview"> <!--class="section">-->     
+<div id="selectionResultPreview">    
      <div id="selectionResultPreviewTable" style="display:none"></div>
 </div>
-
+-->
 <!--footer BF: nach unten verschoben-->
 <footer class="card-footer">
 	<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" onclick="selectionResultPreview('selectionResultPreviewTable');">Daten-Vorschau</button></p>--> 
@@ -1860,9 +1808,6 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
 <!-- Beginn Eigenschaften+ Vorschau-->
 <div class="columns">
 <div class="column is-one-third">
-    <p class="bd-notification is-primary">
-      Eigenschaften
-    </p>
     <div class="field is-grouped">
      <div class="label-container">
 	     <label class="label is-required is-small"><strong>Layoutmerkmale</strong></label>