Browse Source

Tooltips #5

makro_datasrc
Daniel Quathamer 2 years ago
parent
commit
04d4d047eb
  1. 7
      src-modules/module/viz/conf/includes.txt
  2. 58
      src-modules/module/viz/schluesseltabellen/viz_property.unl
  3. 2
      src-modules/module/viz/schluesseltabellen/viz_property_upload.x
  4. 21
      superx/style/LICENSE_bulma_tooltip_1.2.0.txt
  5. 2
      superx/style/bulma-tooltip.min.css
  6. 27
      superx/xml/js/viz/viz_functions.js
  7. 2
      superx/xml/viz_html_chart.xsl

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

@ -3,10 +3,13 @@ images/icons/more.svg @@ -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

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

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

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

@ -4,3 +4,5 @@ sx_auto_upload_table.x viz_property_group @@ -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

21
superx/style/LICENSE_bulma_tooltip_1.2.0.txt

@ -0,0 +1,21 @@ @@ -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.

2
superx/style/bulma-tooltip.min.css vendored

File diff suppressed because one or more lines are too long

27
superx/xml/js/viz/viz_functions.js

@ -38,12 +38,13 @@ this.value=value; @@ -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) @@ -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() @@ -218,6 +219,7 @@ function prepareLineForm_alt()
return chartProperties;
}
*/
function fillDataSelectionForm(formDiv)
{
formDivElem=document.getElementById(formDiv);
@ -419,6 +421,9 @@ function renderDimensionField(dimensionProperty) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) { @@ -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);

2
superx/xml/viz_html_chart.xsl

@ -1282,6 +1282,8 @@ var platform='superx'; @@ -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>

Loading…
Cancel
Save