Tooltips #5

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

@@ -3,10 +3,13 @@ images/icons/more.svg
 images/icons/chart-bar.svg
 images/information_grey_liberation.svg
 style/sx_viz_muster.css
+style/bulma-tooltip.min.css
+style/LICENSE_bulma_tooltip_1.2.0.txt
 WEB-INF/conf/edustore/db/bin/SQL_ENV_viz.sam
 xml/js/viz/viz_functions.js
 xml/js/viz/d3.min.js
-xml/js/viz/d3-license.txt
-xml/viz_html_chart.xsl
+xml/js/viz/d3-7.8.0-license.txt
 xml/js/viz/plot.js
+xml/js/viz/plot-0.6.1-license.txt
+xml/viz_html_chart.xsl
 

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

@@ -1,34 +1,34 @@
-1^Diagramm-Höhe^height^400^px^1^ ^0^4^10^(Wird nur ausgewertet wenn es keine Y-Achse gibt)^101^^^integer^
-2^Diagramm-Breite^width^500^px^1^ ^0^4^10^Äußere Breite des Diagramms  inkl. Ränder^102^100^2000^integer^
+1^Diagramm-Höhe^height^400^px^1^ ^0^4^10^Diagrammhöhe (exkl. Skalenbeschriftung). Wird nur ausgewertet wenn es keine Y-Achse gibt!^101^^^integer^
+2^Diagramm-Breite^width^500^px^1^ ^0^4^10^Diagrammsbreite (exkl.Skalenbeschriftung)^102^100^2000^integer^
 3^Werte-Label-Breite^valueLabelWidth^20^px^1^^0^1^18^^^^^integer^
-4^Hintergrundfarbe^backgroundColor^#ccffcc^ ^1^#ffffeb^0^3^11^ ^201^^^string^
-5^Vordergrundfarbe^color^black^ ^1^black^0^3^11^Text- und Diagrammelemente^202^^^string^
-6^Schriftgröße^fontSize^10^px^1^ ^0^4^11^Text- und Diagrammelemente^204^^^integer^
-7^Schriftfamilie^fontFamily^serif^ ^1^serif|sans-serif|monospace|system_ui^0^2^11^ ^203^^^string^
-8^Flächenfarbe^fill^blue^ ^1^ ^0^1^10^relevant für Flächen,Balken, Säulen, Streifen, Punkte^305^^^string^
-11^Kat: Schriftneigung^tickRotate^-45^ ^1^ ^0^1^18^ ^604^^^integer^
-12^Kat: Skalierung^ticks^5^ ^1^ ^0^1^18^ ^605^^^integer^
-13^Kat: Schriftgröße^tickSize^10^ ^1^ ^0^1^18^ ^603^^^integer^
-15^Kat: Label-Ausrichtung^labelAnchor^center^ ^1^left|center|right^0^2^18^ ^601^^^string^
-16^Außenrand links^marginLeft^ ^px^1^ ^0^4^10^ ^103^^^integer^
-17^Außenrand rechts^marginRight^50^px^1^ ^0^4^10^ ^104^^^integer^
-18^Außenrand oben^marginTop^50^px^1^ ^0^4^10^ ^105^^^integer^
+4^Hintergrundfarbe^backgroundColor^#ccffcc^ ^1^#ffffeb^0^3^11^Hintergrundfarbe der Grafik^201^^^string^
+5^Vordergrundfarbe^color^black^ ^1^black^0^3^11^Farbe von Text- und Diagrammelementen^202^^^string^
+6^Schriftgröße^fontSize^10^px^1^ ^0^4^11^Schriftgröße der Skalenbeschriftung^204^^^integer^
+7^Schriftfamilie^fontFamily^serif^ ^1^serif|sans-serif|monospace|system_ui^0^2^11^Schriftfamlilie der Skalenbeschriftung^203^^^string^
+8^Flächenfarbe^fill^blue^ ^1^ ^0^1^10^Füllfarbe (nur) von Diagrammelementen (Flächen, Balken, Säulen, Streifen, Punkte)^305^^^string^
+11^Kat: Schriftneigung^tickRotate^-45^ ^1^ ^0^1^18^Neigungswinkel der Achsenwerte^604^^^integer^
+12^Kat: Skalierung^ticks^5^ ^1^ ^0^1^18^Feinheit der Wertegliederung^605^^^integer^
+13^Kat: Schriftgröße^tickSize^10^ ^1^ ^0^1^18^Größe der Achsenwerte^603^^^integer^
+15^Kat: Label-Ausrichtung^labelAnchor^center^ ^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^
+17^Außenrand rechts^marginRight^50^px^1^ ^0^4^10^Abstand rechts neben der Grafik (inkl. Skala)^104^^^integer^
+18^Außenrand oben^marginTop^50^px^1^ ^0^4^10^Abstand oberhalb der Grafik^105^^^integer^
 19^Außenrand unten^marginBottom^50^px^1^ ^0^4^10^ ^106^^^integer^
-20^Innenrand oben^insetTop^0^px^1^ ^0^4^10^ ^107^^^integer^
-21^Innenrand unten^insetBottom^0^px^1^ ^0^4^10^ ^108^^^integer^
-22^Innenrand links^insetLeft^0^px^1^ ^0^4^10^ ^109^^^integer^
-23^Innenrand rechts^insetRight^0^px^1^ ^0^4^10^ ^110^^^integer^
-24^Farbschema^scheme^ ^ ^1^blues|greens|greys|oranges|purples|reds^0^2^20^ ^303^^^string^
-25^Farbtyp^type^ ^ ^1^einfarbig|mehrfarbig|zyklisch^0^2^12^ ^302^^^string^
-43^Farbsättigung^fillOpacity^0,5^ ^1^ ^0^4^12^ ^306^^^string^
-44^Strichfarbe^stroke^ ^ ^1^ ^0^1^12^sfsfsdf^307^^^string^
-45^Strichdicke^strokeWidth^ ^ ^1^ ^0^1^12^^308^^^string^
-56^Fortlaufende Skala^continous scales^ ^ ^1^identity|linear|log|pow|sqrt|symlog^0^2^15^ ^401^^^string^
-57^Kategorie-Skala^categorical scales^ ^ ^1^point|band^0^2^15^ ^402^^^string^
-58^Datums-Skala^date scales^ ^ ^1^time|utc^0^2^15^ ^403^^^string^
-60^Farbschema-Typ^schemetype^ ^ ^1^linear|sqrt|pow|log|symlog|sequential|cyclical|quantile^0^2^12^ ^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^ ^301^^^string^
-63^Kat: Label-Abstand^labelOffset^ ^px^1^ ^0^1^18^ ^602^^^integer^
+20^Innenrand oben^insetTop^0^px^1^ ^0^4^10^Oberer Abstand zwischen Diagramm und Grafik^107^^^integer^
+21^Innenrand unten^insetBottom^0^px^1^ ^0^4^10^Unterer Abstand zwischen Diagramm und Grafik^108^^^integer^
+22^Innenrand links^insetLeft^0^px^1^ ^0^4^10^Linker Abstand zwischen Diagramm und Grafik^109^^^integer^
+23^Innenrand rechts^insetRight^0^px^1^ ^0^4^10^Rechter Abstand zwischen Diagramm und Grafik^110^^^integer^
+24^Farbschema^scheme^ ^ ^1^blues|greens|greys|oranges|purples|reds^0^2^20^Farbschema von Diagrammelemente^303^^^string^
+25^Farbtyp^type^ ^ ^1^einfarbig|mehrfarbig|zyklisch^0^2^12^Ein-/Mehrfarbigkeit von Diagrammelementen^302^^^string^
+43^Farbsättigung^fillOpacity^0,5^ ^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^
 68^Maß: Chart-Abstand^gridChartOffset^3^ ^1^ ^0^1^18^ ^607^^^string^
 69^Maß: Label-Höhe^gridLabelHeight^18^px^1^ ^0^1^18^ ^608^^^integer^
 70^Kategorie-Dimension 1^viz_dimension1^ ^ ^1^ ^0^1^5^ ^608^^^string^

src-modules/module/viz/schluesseltabellen/viz_property_upload.x

@@ -4,3 +4,5 @@ sx_auto_upload_table.x viz_property_group
 sx_auto_upload_table.x viz_renderer
 sx_auto_upload_table.x viz_property_renderer
 sx_auto_upload_table.x viz_property_group_renderer
+sx_auto_upload_table.x viz_type
+sx_auto_upload_table.x viz_type_property

superx/style/LICENSE_bulma_tooltip_1.2.0.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 CreativeBulma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

superx/xml/js/viz/viz_functions.js

@@ -38,12 +38,13 @@ this.value=value;
 this.isDefault=isDefault;
 
 }
-function dimensionProperty(name,caption,isMeasure,isMandatory) 
+function dimensionProperty(name,caption,explanation,isMeasure,isMandatory) 
 {
 this.name=name;
 this.caption=caption;
 this.isMeasure=isMeasure;
 this.isMandatory=isMandatory;
+this.explanation=explanation;
 this.getValueResultset = function () {
 var valueOptions=[];
 var optionCounter=0;
@@ -159,14 +160,14 @@ function prepareForm(vizTypeUniquename,vizTypeProperties)
 	if(vizTypeUniquename==vizTypeProperties[k].typeUniquename)
 	{
 		var isMeasure=(vizTypeProperties[k].groupUniquename=="MEASURE")?true:false;
-		var myProp= new dimensionProperty(vizTypeProperties[k].propUniquename,vizTypeProperties[k].caption,isMeasure,vizTypeProperties[k].isMandatory);
+		var myProp= new dimensionProperty(vizTypeProperties[k].propUniquename,vizTypeProperties[k].caption,vizTypeProperties[k].explanation,isMeasure,vizTypeProperties[k].isMandatory);
 		chartProperties.push(myProp);
 		propertyCounter++;
 	}
 	}
 	return chartProperties;
 }
-
+/*
 function prepareBarXForm()
 {
 	var chartProperties=[];
@@ -218,6 +219,7 @@ function prepareLineForm_alt()
 
 return chartProperties;
 }
+*/
 function fillDataSelectionForm(formDiv)
 {
 formDivElem=document.getElementById(formDiv);
@@ -419,6 +421,9 @@ function renderDimensionField(dimensionProperty)
 		label.classList.add("label");
 		label.classList.add("is-required");
 		label.classList.add("is-small");
+		label.classList.add("has-tooltip-right");
+		label.setAttribute("data-tooltip",commonChartProperty.explanation);
+
 		const textnode = document.createTextNode(dimensionProperty.caption);
 		label.appendChild(textnode);
 		labelElem.appendChild(label);
@@ -549,6 +554,9 @@ function renderChartPropertyField(commonChartProperty)
 		label.classList.add("label");
 		label.classList.add("is-required");
 		label.classList.add("is-small");
+		label.classList.add("has-tooltip-right");
+		label.setAttribute("data-tooltip",commonChartProperty.explanation);
+
 		const textnode = document.createTextNode(commonChartProperty.caption);
 		label.appendChild(textnode);
 		labelElem.appendChild(label);
@@ -556,7 +564,6 @@ function renderChartPropertyField(commonChartProperty)
 		//input:
 		const inputFieldElem = document.createElement("div");
 		inputFieldElem.classList.add("field");
-		//inputFieldElem.classList.add("is-active");
 		const inputParaElem = document.createElement("p");
 		inputParaElem.classList.add("control-new");
 		const inputElem = document.createElement("div");
@@ -571,7 +578,6 @@ function renderChartPropertyField(commonChartProperty)
 			const selElem = document.createElement("select");
 			selElem.name=commonChartProperty.name;
 			selElem.id=commonChartProperty.name;
-			selElem.title=commonChartProperty.explanation;
 			//selElem.style="width:50px";
 			if(commonChartProperty.variableName=="")
 			{
@@ -597,7 +603,6 @@ function renderChartPropertyField(commonChartProperty)
 				textAreaElem.disabled="disabled";
 				textAreaElem.readonly="readonly";
 			}
-			textAreaElem.title=commonChartProperty.explanation;
 			textAreaElem.name=commonChartProperty.name;
 			textAreaElem.id=commonChartProperty.name;
 			textAreaElem.value=commonChartProperty.defaultValue;
@@ -627,7 +632,6 @@ function renderChartPropertyField(commonChartProperty)
 			rangeElem.step=50;
 			*/
 
-			rangeElem.title=commonChartProperty.explanation;
 			rangeElem.name=commonChartProperty.name;
 			rangeElem.id=commonChartProperty.name;
 			rangeElem.value=commonChartProperty.defaultValue;
@@ -640,14 +644,17 @@ function renderChartPropertyField(commonChartProperty)
 		default:
 			//Einfaches Texteingabefeld:
 			const inpElem = document.createElement("input");
-			inpElem.type=(commonChartProperty.propValueType=="integer")?"NUMBER":"TEXT";
+			inpElem.type="TEXT";
+			if(commonChartProperty.propValueType=="integer")
+					inpElem.type="NUMBER";
+			if(commonChartProperty.inputType=="COLOR")
+					inpElem.type="color";
 			inpElem.size=5;
 			if(commonChartProperty.variableName=="")
 			{
 				inpElem.disabled="disabled";
 				inpElem.readonly="readonly";
 			}
-			inpElem.title=commonChartProperty.explanation;
 			inpElem.name=commonChartProperty.name;
 			inpElem.id=commonChartProperty.name;
 			inpElem.value=commonChartProperty.defaultValue;
@@ -1187,7 +1194,7 @@ function makeDot(chartDivElem,selectionRs) {
     		          x: categoryDim
     		        });
 	marksArray[1]=Plot.ruleY([0]);
-	marksArray[2]=Plot.ruleX([0]);
+	//marksArray[2]=Plot.ruleX([0]);
 
 	var options= getChartOptions(categoryDim,"",measureDim,marksArray,true);
 	

superx/xml/viz_html_chart.xsl

@@ -1282,6 +1282,8 @@ var platform='superx';
 	<link rel="stylesheet" type="text/css" href="../xml/css/start_portlet.css" />
 
       <link rel="stylesheet" type="text/css" href="../style/bulma.css" />
+      <link rel="stylesheet" type="text/css" href="../style/bulma-tooltip.min.css" />
+      
       <link rel="stylesheet" type="text/css" href="../style/sx_viz_muster.css" />
    
 		</head>