From 10dfc063967b3e08cc325c2abe9e4336c124e70b Mon Sep 17 00:00:00 2001 From: Daniel Quathamer Date: Thu, 29 Aug 2024 07:35:30 +0200 Subject: [PATCH] Tooltips Layout #5 --- src-modules/module/viz/conf/includes.txt | 3 - .../sx_stylesheets_einfuegen.sql | 8 +- .../viz/schluesseltabellen/viz_property.unl | 10 +- .../viz_property_renderer.unl | 5 + .../viz_type_d3js_fuellen.sql | 528 ++++++++++++++++++ .../schluesseltabellen/viz_type_property.unl | 10 +- superx/xml/js/viz/viz_functions.js | 195 +++++-- superx/xml/viz_html_chart.xsl | 97 ++-- 8 files changed, 755 insertions(+), 101 deletions(-) create mode 100644 src-modules/module/viz/schluesseltabellen/viz_type_d3js_fuellen.sql diff --git a/src-modules/module/viz/conf/includes.txt b/src-modules/module/viz/conf/includes.txt index 33ee8ea..6e676ad 100644 --- a/src-modules/module/viz/conf/includes.txt +++ b/src-modules/module/viz/conf/includes.txt @@ -5,9 +5,6 @@ images/information_grey_liberation.svg images/plus-circled.svg images/minus-circled.svg style/sx_viz_muster.css -style/bulma.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/d3.min.js xml/js/viz/d3-7.8.0-license.txt diff --git a/src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen.sql b/src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen.sql index f9c4149..d7328a6 100755 --- a/src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen.sql +++ b/src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen.sql @@ -24,10 +24,10 @@ "contenttype":"text/html", "is_generic":"1" }, -{"filename":"viz_html_chart_viewer_grid.xsl", "caption":"Dashboard", "description":"Viewer-Stylesheet für VIZ Charts in einer Kachelansicht ", "relation":"table", "contenttype":"text/html","is_generic":"1"}, -{"filename":"viz_html_chart_viewer_mask.xsl", "caption":"Diagramm + Maskenfelder", "description":"Viewer-Stylesheet für VIZ Charts mit Maskenfeldern", "relation":"table", "contenttype":"text/html","is_generic":"1"}, -{"filename":"tabelle_html_viz.xsl", "caption":"Tabelle + Visualisierung", "description":"Viewer-Stylesheet für Tabellen und VIZ Charts", "relation":"table", "contenttype":"text/html","is_generic":"1"}, -{"filename":"viz_html_chart_viewer.xsl", "caption":"Diagramm-Viewer (einfach)", "description":"Viewer-Stylesheet für VIZ Charts in einer Einzelansicht ", "relation":"table", "contenttype":"text/html","is_generic":"1"} +{"filename":"viz_html_chart_viewer_grid.xsl", "caption":"Dashboard", "description":"Viewer-Stylesheet für VIZ Charts in einer Kachelansicht ", "relation":"table", "contenttype":"text/html","is_generic":"0"}, +{"filename":"viz_html_chart_viewer_mask.xsl", "caption":"Diagramm + Maskenfelder", "description":"Viewer-Stylesheet für VIZ Charts mit Maskenfeldern", "relation":"table", "contenttype":"text/html","is_generic":"0"}, +{"filename":"tabelle_html_viz.xsl", "caption":"Tabelle + Visualisierung", "description":"Viewer-Stylesheet für Tabellen und VIZ Charts", "relation":"table", "contenttype":"text/html","is_generic":"0"}, +{"filename":"viz_html_chart_viewer.xsl", "caption":"Diagramm-Viewer (einfach)", "description":"Viewer-Stylesheet für VIZ Charts in einer Einzelansicht ", "relation":"table", "contenttype":"text/html","is_generic":"0"} ] /> <#assign stylesheet_field = [ diff --git a/src-modules/module/viz/schluesseltabellen/viz_property.unl b/src-modules/module/viz/schluesseltabellen/viz_property.unl index 29d8b3e..d217ae4 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_property.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_property.unl @@ -32,7 +32,7 @@ 69^Maß: Label-Höhe^gridLabelHeight^^^0^ ^0^1^18^ ^608^^^integer^ 70^X-Achse^x^ ^ ^0^ ^0^1^5^X-Achsendefinition^100^^^string^ 72^Y-Achse^y^ ^ ^0^ ^0^1^5^Y-Achsendefinition^200^^^string^ -73^Maß 1^measure1^^ ^0^ ^0^1^6^ ^608^^^string^ +73^Maß 1^measure1^ ^ ^0^ ^0^2^5^Maß^300^^^string^ 76^Serien-Dimension^stroke^ ^ ^0^ ^0^1^5^Serien-Dimension zusätzlich zu Achsen^300^^^string^ 78^Legende^legend^ ^ ^0^true|false^0^2^22^ ^303^^^boolean^ 79^Beschriftung^text^ ^ ^0^ ^0^1^5^Nur für Grafikelement Wertelabel^400^^^string^ @@ -49,11 +49,11 @@ 92^Ziel-Dimension 1^viz_target1^^ ^0^ ^0^1^5^ ^608^^^string^ 93^X: Linie^line_x^true^ ^0^true|false^0^2^18^Linie X-Achse^602^^^boolean^ 94^Y: Linie^line_y^true^ ^0^true|false^0^2^21^Linie Y-Achse^602^^^boolean^ -95^Dimension 1^dimension1^^ ^0^ ^0^1^5^ ^608^^^string^ -96^Dimension 2^dimension2^^ ^0^ ^0^1^5^ ^608^^^string^ +95^Dimension 1^dimension1^ ^ ^0^ ^0^2^5^Dimension 1^100^^^string^ +96^Dimension 2^dimension2^ ^ ^0^ ^0^2^5^Dimension 2^200^^^string^ 97^Leerzeilen-Maskierung^null_value_mask^ ^ ^0^ ^0^1^10^Text, der ersetzt wird, wenn eine Dimension leer ist, z.B. *Andere Hochschule* bei BA-MA-Übergang^700^^^string^ -98^Y-Wertebereich^domain^ ^ ^1^ ^0^1^21^Bittte Wertebereich mit [] eingeben, z.B. [0,100] für 0-100^1000^^^js^ -99^X: Skala^scale_x^band^ ^1^linear|identity|point|band|time^0^2^18^ ^1000^^^string^ +98^Y-Wertebereich^domain^ ^ ^0^ ^0^1^21^Bittte Wertebereich mit [] eingeben, z.B. [0,100] für 0-100^1000^^^js^ +99^X: Skala^scale_x^band^ ^0^linear|identity|point|band|time^0^2^18^ ^1000^^^string^ 100^Strichlinie Abstand-Intervalle^strokeDasharray^ ^ ^0^ ^0^1^11^Abstand von Bindestrichen (Komma-separierte Pixel), z.B. [10,5] für 10 und dann 5 Pixel Abstand^2000^^^string^ 101^Offset (horizontal)^dx^ ^px^0^ ^0^1^10^Horizontales Offset des Grafikelements in Pixel^1600^^^integer^ 102^Offset (vertikal)^dy^ ^px^0^ ^0^1^10^Vertikales Offset des Grafikelements in Pixel^1700^^^integer^ diff --git a/src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl b/src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl index fb59a91..1ef19ad 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl @@ -41,3 +41,8 @@ 259^2^106^opacity^ 260^2^100^strokeDasharray^ 261^2^45^strokeWidth^ +262^1^2^width^ +263^1^1^height^ +264^1^95^dimension1^ +265^1^96^dimension2^ +266^1^73^measure1^ diff --git a/src-modules/module/viz/schluesseltabellen/viz_type_d3js_fuellen.sql b/src-modules/module/viz/schluesseltabellen/viz_type_d3js_fuellen.sql new file mode 100644 index 0000000..9c9d7ba --- /dev/null +++ b/src-modules/module/viz/schluesseltabellen/viz_type_d3js_fuellen.sql @@ -0,0 +1,528 @@ +--Freemarker Template +<#include "SQL_lingua_franca"/> +<#include "SuperX_general"/> + + + + select tid from viz_renderer where uniquename='d3js'; + + + +<#assign viz_types = [ +{"uniquename":"sankey", "caption":"Sankey", +"orientation":"H", +"description":"Horizontales Sankeydiagramm", +"explanation":""} + +] +/> + +<#assign viz_properties = [ +{ "caption":"Dimension 1", +"prop_uniquename":"dimension1", +"explanation":"Dimension 1", +"prop_default":"", +"prop_unit":"", +"is_generic":"0", +"static_values":"", +"is_mandatory":"0", +"input_type_uniquename":"SELECT", +"property_group_uniquename":"CATEGORY", +"sortnr":"608", +"range_from":"", +"range_to":"", +"prop_value_type":"string" +}, +{ "caption":"Dimension 2", +"prop_uniquename":"dimension2", +"explanation":"Dimension 2", +"prop_default":"", +"prop_unit":"", +"is_generic":"0", +"static_values":"", +"is_mandatory":"0", +"input_type_uniquename":"SELECT", +"property_group_uniquename":"CATEGORY", +"sortnr":"609", +"range_from":"", +"range_to":"", +"prop_value_type":"string" +} +, +{ "caption":"Maß 1", +"prop_uniquename":"measure1", +"explanation":"Maß", +"prop_default":"", +"prop_unit":"", +"is_generic":"0", +"static_values":"", +"is_mandatory":"0", +"input_type_uniquename":"SELECT", +"property_group_uniquename":"CATEGORY", +"sortnr":"610", +"range_from":"", +"range_to":"", +"prop_value_type":"string" +} +] +/> + +<#assign viz_type_properties = [ +{ "viz_type_uniquename":"sankey", +"viz_property_uniquename":"dimension1", +"is_mandatory":"1", +"sortnr":"1"}, +{ "viz_type_uniquename":"sankey", +"viz_property_uniquename":"dimension2", +"is_mandatory":"1", +"sortnr":"10"}, +{ "viz_type_uniquename":"sankey", +"viz_property_uniquename":"measure1", +"is_mandatory":"1", +"sortnr":"20"}, +{ "viz_type_uniquename":"sankey", +"viz_property_uniquename":"fontSize", +"is_mandatory":"0", +"sortnr":"100"}, +{ "viz_type_uniquename":"sankey", +"viz_property_uniquename":"fontSize", +"is_mandatory":"0", +"sortnr":"100"}, +{ "viz_type_uniquename":"sankey", +"viz_property_uniquename":"fontFamily", +"is_mandatory":"0", +"sortnr":"110"}, +{ "viz_type_uniquename":"sankey", +"viz_property_uniquename":"color", +"is_mandatory":"0", +"sortnr":"120"} + + +] +/> + +<#assign viz_type_properties_general = [ +] +/> + + +--ab hier nicht mehr ändern: +--Die Sortierunmmer ergibt sich aus der Reihenfolge +--daher hier mit Bedacht ändern: + +<@create_temp_tables /> + +<@fill_viz_properties /> + +<#foreach viz_type in viz_types> + + +<@fill_viz_type_properties viz_type_p=viz_type /> + + + +<@drop_temp_tables /> + + +<#macro fill_viz_type_properties_general viz_type_p> +select 'Befülle Grafikelement ${viz_type_p.caption}' from xdummy; + +delete from tmp_viz_type; + +insert into tmp_viz_type(tid, + uniquename, + caption, + renderer_id, +-- srcpath, +-- method, + orientation, + explanation) + select T.tid, +'${viz_type_p.uniquename}', +'${viz_type_p.caption}', +${renderer}, +'${viz_type_p.orientation}', +'${viz_type_p.explanation}' + from xdummy left outer join viz_type T on ( + T.uniquename='${viz_type_p.uniquename}' + and T.renderer_id=${renderer} + ) +; + +insert into viz_type( + uniquename, + caption, + renderer_id, +-- srcpath, +-- method, + orientation) + select uniquename, + caption, + renderer_id, +-- srcpath, +-- method, + orientation + from tmp_viz_type T + where T.tid is null; + + + +update viz_type set + uniquename=T.uniquename, + caption=T.caption, + renderer_id=T.renderer_id, +-- srcpath, +-- method, + orientation=T.orientation, + explanation=T.explanation + from tmp_viz_type T + where T.tid=viz_type.tid + and viz_type.tid in (select distinct T.tid from tmp_viz_type); + + + + +delete from viz_type_property +where (viz_type_id, + viz_property_id) +in (select Y.tid as viz_type_id, + P.tid as viz_property_id +from tmp_viz_property T,viz_type Y, viz_property P +where Y.uniquename='${viz_type_p.uniquename}' +and Y.renderer_id=${renderer} +and P.prop_uniquename=T.prop_uniquename +and T.is_general=1) + + ; + +insert into viz_type_property( + viz_type_id, + viz_property_id, + is_mandatory, + sortnr) +select Y.tid as viz_type_id, + P.tid as viz_property_id, + P.is_mandatory, + T.sortnr +from tmp_viz_property T,viz_type Y, viz_property P +where Y.uniquename='${viz_type_p.uniquename}' +and Y.renderer_id=${renderer} +and P.prop_uniquename=T.prop_uniquename +and T.is_general=1; + + + + + +<#macro fill_viz_type_properties viz_type_p> + +<#foreach viz_prop in viz_type_properties> +<#if viz_prop.viz_type_uniquename==viz_type_p.uniquename > + +delete from viz_type_property +where (viz_type_id, + viz_property_id) +in (select Y.tid as viz_type_id, + P.tid as viz_property_id +from viz_type Y, viz_property P +where Y.uniquename='${viz_type_p.uniquename}' +and Y.renderer_id=${renderer} +and P.prop_uniquename='${viz_prop.viz_property_uniquename}') ; + + +insert into viz_type_property( + viz_type_id, + viz_property_id, + is_mandatory, + sortnr) +select Y.tid as viz_type_id, + P.tid as viz_property_id, + ${viz_prop.is_mandatory}, + ${viz_prop.sortnr} +from viz_type Y, viz_property P +where Y.uniquename='${viz_type_p.uniquename}' +and Y.renderer_id=${renderer} +and P.prop_uniquename='${viz_prop.viz_property_uniquename}' +; + + + + + + +<#macro create_temp_tables> +CREATE temp TABLE tmp_viz_type +( + tid serial NOT NULL, + uniquename varchar(255) NOT NULL, + caption varchar(255), + renderer_id integer, + srcpath varchar(255), + method varchar(255), + orientation char(1), + description text, + explanation text +); + +CREATE temp TABLE tmp_viz_type_property +( + tid serial NOT NULL, + viz_type_id integer, + viz_property_id integer, + is_mandatory smallint DEFAULT 0, + sortnr smallint DEFAULT 0 +); + + +CREATE temp TABLE tmp_viz_property_renderer +( + tid serial NOT NULL, + renderer_id integer NOT NULL, + property_id integer NOT NULL, + variable_name varchar(255) +); + +create temp table tmp_viz_property_group +( + tid serial NOT NULL, + uniquename varchar(255) NOT NULL, + caption varchar(255), + sortnr integer +); + +CREATE temp TABLE tmp_viz_property_group_renderer +( + tid serial NOT NULL, + renderer_id integer NOT NULL, + property_group_id integer NOT NULL, + variable_name varchar(255) +); + + + +CREATE temp TABLE tmp_viz_property +( + tid integer, + caption varchar(255), + prop_uniquename varchar(255), + prop_default varchar(255), + prop_unit varchar(255), + is_generic smallint DEFAULT 1, + static_values text, + is_mandatory smallint DEFAULT 0, + input_type_id integer DEFAULT 1, + input_type_uniquename varchar(255), + property_group_id integer, + property_group_uniquename varchar(255), + explanation text, + sortnr integer, + range_from integer, + range_to integer, + prop_value_type varchar(255) DEFAULT 'string'::character varying, + variable_name varchar(255), + is_general smallint +); + + +<#macro drop_temp_tables> + +drop table tmp_viz_type; +drop table tmp_viz_property_group; +drop table tmp_viz_property; +drop table tmp_viz_type_property; +drop table tmp_viz_property_renderer; +drop table tmp_viz_property_group_renderer; + + + +<#macro fill_viz_properties> + + +<#assign sortnr=0 /> +<#foreach viz_prop in viz_properties> +<#assign sortnr=sortnr+100 /> +insert into tmp_viz_property(tid, +caption, + prop_uniquename, + prop_default, + prop_unit, + is_generic, + static_values, + is_mandatory, + input_type_uniquename, + property_group_uniquename, + explanation, + sortnr, + range_from, + range_to, + prop_value_type, + variable_name, + is_general) +select P.tid, +'${viz_prop.caption}', +'${viz_prop.prop_uniquename}', +'${viz_prop.prop_default}', +'${viz_prop.prop_unit}', +${viz_prop.is_generic}, +'${viz_prop.static_values}', +${viz_prop.is_mandatory}, +'${viz_prop.input_type_uniquename}', +'${viz_prop.property_group_uniquename}', +'${viz_prop.explanation}', +${sortnr}, +val('${viz_prop.range_from}'), +val('${viz_prop.range_to}'), +'${viz_prop.prop_value_type}', +<#if viz_prop.variable_name?exists> +'${viz_prop.variable_name}', +<#else> +'', + +0 as is_general +from xdummy left outer join viz_property P +on (P.prop_uniquename='${viz_prop.prop_uniquename}') +; + + +<#assign sortnr=1000 /> +<#foreach viz_prop in viz_type_properties_general> +<#assign sortnr=sortnr+100 /> +insert into tmp_viz_property(tid, +caption, + prop_uniquename, + prop_default, + prop_unit, + is_generic, + static_values, + is_mandatory, + input_type_uniquename, + property_group_uniquename, + explanation, + sortnr, + range_from, + range_to, + prop_value_type, + variable_name, + is_general) +select P.tid, +'${viz_prop.caption}', +'${viz_prop.prop_uniquename}', +'${viz_prop.prop_default}', +'${viz_prop.prop_unit}', +${viz_prop.is_generic}, +'${viz_prop.static_values}', +${viz_prop.is_mandatory}, +'${viz_prop.input_type_uniquename}', +'${viz_prop.property_group_uniquename}', +'${viz_prop.explanation}', +${sortnr}, +val('${viz_prop.range_from}'), +val('${viz_prop.range_to}'), +'${viz_prop.prop_value_type}', +<#if viz_prop.variable_name?exists> +'${viz_prop.variable_name}', +<#else> +'', + +1 as is_general +from xdummy left outer join viz_property P +on (P.prop_uniquename='${viz_prop.prop_uniquename}') +; + + +update tmp_viz_property set input_type_id=T.tid +from viz_property_input_type T +where T.uniquename=tmp_viz_property.input_type_uniquename; + +select 'Warnung: Property ohne input_type: ' || prop_uniquename +from tmp_viz_property +where input_type_id is null; + + +update tmp_viz_property set property_group_id=T.tid +from viz_property_group T +where T.uniquename=tmp_viz_property.property_group_uniquename; + +select 'Warnung: Property ohne property_group: ' || prop_uniquename +from tmp_viz_property +where property_group_id is null; + + + + +--neue Datensätze: +insert into viz_property( +caption, + prop_uniquename, + prop_default, + prop_unit, + is_generic, + static_values, + is_mandatory, + input_type_id, + property_group_id, + explanation, + sortnr, + range_from, + range_to, + prop_value_type) + select +caption, + prop_uniquename, + prop_default, + prop_unit, + is_generic, + static_values, + is_mandatory, + input_type_id, + property_group_id, + explanation, + sortnr, + range_from, + range_to, + prop_value_type +from tmp_viz_property P +where P.tid is null; + +update viz_property +set caption=T.caption, + --prop_uniquename, + prop_default=T.prop_default, + prop_unit=T.prop_unit, + is_generic=T.is_generic, + static_values=T.static_values, + is_mandatory=T.is_mandatory, + input_type_id=T.input_type_id, + property_group_id=T.property_group_id, + explanation=T.explanation, + sortnr=T.sortnr, + range_from=T.range_from, + range_to=T.range_to, + prop_value_type=T.prop_value_type + from tmp_viz_property T + where T.tid=viz_property.tid + and viz_property.tid in (select T.tid from tmp_viz_property T); + + + --renderer: +delete from viz_property_renderer +where (renderer_id, property_id) +in (select ${renderer},P.tid +from tmp_viz_property P); + +delete from viz_property_renderer +where (renderer_id, property_id) +in (select ${renderer},P.tid +from tmp_viz_property P); + + +insert into viz_property_renderer( +renderer_id, +property_id, + variable_name) +select ${renderer}, +P.tid, +case when P.variable_name !='' then P.variable_name else P.prop_uniquename end +from tmp_viz_property P; + + diff --git a/src-modules/module/viz/schluesseltabellen/viz_type_property.unl b/src-modules/module/viz/schluesseltabellen/viz_type_property.unl index 53e2032..5c54c0f 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_type_property.unl +++ b/src-modules/module/viz/schluesseltabellen/viz_type_property.unl @@ -1,8 +1,5 @@ 44^11^95^1^0^ 45^11^73^1^0^ -46^12^73^1^20^ -47^12^95^1^1^ -48^12^96^1^10^ 407^13^73^1^10^ 408^13^95^1^1^ 605^8^70^0^100^ @@ -139,3 +136,10 @@ 1690^10^72^1^10^ 1691^10^76^0^20^ 1692^10^79^0^30^ +1693^12^97^0^100^ +1695^12^95^1^1^ +1696^12^96^1^10^ +1697^12^73^1^20^ +1699^12^6^0^100^ +1700^12^7^0^110^ +1701^12^5^0^120^ diff --git a/superx/xml/js/viz/viz_functions.js b/superx/xml/js/viz/viz_functions.js index bd03136..8db8684 100644 --- a/superx/xml/js/viz/viz_functions.js +++ b/superx/xml/js/viz/viz_functions.js @@ -379,6 +379,30 @@ function prepareSelectionForm() return selectionProperties; } + +function generateFormFieldHtml(labelText,fieldname,tooltiptext,inputElem) +{ + var zs="
"; + zs+="
"+labelText+"
"; + + zs+="
"; + zs+="
"; + //zs+=""; + zs+=getOuterHTML(inputElem); + zs+="
"; //Ende field body + zs+="
";//Ende field + return zs; + + + +} +function getOuterHTML(element) { + var container = document.createElement("div"); + container.appendChild(element.cloneNode(true)); + + return container.innerHTML; +} + function createChartElementConfig1Form(renderer,elemID) { //first empty form: @@ -400,13 +424,17 @@ function createChartElementConfig1Form(renderer,elemID) var myChartElem=filtered[0]; } //First Datasource: - const elementDatasourceDiv=document.createElement("div"); + //const elementDatasourceDiv=document.createElement("div"); + + + /* const fieldDatasourceElem = document.createElement("div"); fieldDatasourceElem.classList.add("field"); - fieldDatasourceElem.classList.add("is-grouped"); + fieldDatasourceElem.classList.add("is-horizontal"); //label: const labelDatasourceElem = document.createElement("div"); - labelDatasourceElem.classList.add("label-container"); + labelDatasourceElem.classList.add("field-label"); + labelDatasourceElem.classList.add("is-small"); const labelDatasource = document.createElement("label"); labelDatasource.classList.add("label"); labelDatasource.classList.add("is-required"); @@ -418,36 +446,72 @@ function createChartElementConfig1Form(renderer,elemID) labelDatasource.appendChild(textnode); labelDatasourceElem.appendChild(labelDatasource); fieldDatasourceElem.appendChild(labelDatasourceElem); - /*const inpElemId = document.createElement("input"); - inpElemId.name="chartElementID"; - inpElemId.id="chartElementID"; - inpElemId.type="text";*/ - - + const selDatasourceFbodyElem = document.createElement("div"); + selDatasourceFbodyElem.classList.add("field-body"); const selDatasourceElem = document.createElement("select"); selDatasourceElem.name="chartElementDatasource"; selDatasourceElem.id="chartElementDatasource"; selDatasourceElem.classList.add("select"); selDatasourceElem.classList.add("is-small"); + selDatasourceElem.style.width="100px"; selDatasourceElem.onchange= function () { createChartElementsConfig2Form(renderer); }; fillSelectOptions(selDatasourceElem,rsTableMetaData,true,(myChartElem!=null?myChartElem.datasource:null)); - fieldDatasourceElem.appendChild(selDatasourceElem); - //fieldDatasourceElem.appendChild(inpElemId); + selDatasourceFbodyElem.appendChild(selDatasourceElem); + fieldDatasourceElem.appendChild(selDatasourceFbodyElem); + + + formChartElementConfig1.appendChild(fieldDatasourceElem);*/ + + const selDatasourceElem = document.createElement("select"); + selDatasourceElem.name="chartElementDatasource"; + selDatasourceElem.id="chartElementDatasource"; + selDatasourceElem.classList.add("select"); + selDatasourceElem.classList.add("is-small"); + //selDatasourceElem.style.width="100px"; + + fillSelectOptions(selDatasourceElem,rsTableMetaData,true,(myChartElem!=null?myChartElem.datasource:null)); + + + + var datasourceFieldHtml=generateFormFieldHtml("Datenquelle","chartElementDatasource","Datenquelle für das Diagrammelement, bei Makroberichten wählen Sie die Tabellennnummer",selDatasourceElem); + + const selVizTypeElem = document.createElement("select"); + selVizTypeElem.name="chartElementVizType"; + selVizTypeElem.id="chartElementVizType"; + selVizTypeElem.classList.add("select"); + selVizTypeElem.classList.add("is-small"); + //selVizTypeElem.style.width="100px"; + + fillSelectOptions(selVizTypeElem,getPossibleVizTypes(renderer),false,(myChartElem!=null?myChartElem.vizTypeUniquename:null)); + + + var vizTypeFieldHtml=generateFormFieldHtml("Grafikelement-Typ","chartElementVizType","Art des Grafikelements",selVizTypeElem); - elementDatasourceDiv.appendChild(fieldDatasourceElem); - formChartElementConfig1.appendChild(elementDatasourceDiv); + formChartElementConfig1.innerHTML=datasourceFieldHtml+vizTypeFieldHtml; + //add onchange: + document.getElementById("chartElementDatasource").addEventListener( + 'change', + function() { createChartElementsConfig2Form(renderer); }, + false + ); + document.getElementById("chartElementVizType").addEventListener( + 'change', + function() { createChartElementsConfig2Form(renderer); }, + false + ); //Then vizType: - const elementVizTypeDiv=document.createElement("div"); + /* const fieldVizTypeElem = document.createElement("div"); fieldVizTypeElem.classList.add("field"); - fieldVizTypeElem.classList.add("is-grouped"); + fieldVizTypeElem.classList.add("is-horizontal"); //label: const labelVizTypeElem = document.createElement("div"); - labelVizTypeElem.classList.add("label-container"); + labelVizTypeElem.classList.add("field-label"); + labelVizTypeElem.classList.add("is-small"); const labelVizType = document.createElement("label"); labelVizType.classList.add("label"); labelVizType.classList.add("is-required"); @@ -460,19 +524,25 @@ function createChartElementConfig1Form(renderer,elemID) labelVizTypeElem.appendChild(labelVizType); fieldVizTypeElem.appendChild(labelVizTypeElem); - const selVizTypeElem = document.createElement("select"); + const selVizTypeFbodyElem = document.createElement("div"); + selVizTypeFbodyElem.classList.add("field-body"); + + const selVizTypeElem = document.createElement("select"); selVizTypeElem.name="chartElementVizType"; selVizTypeElem.id="chartElementVizType"; selVizTypeElem.classList.add("select"); selVizTypeElem.classList.add("is-small"); + selVizTypeElem.style.width="100px"; selVizTypeElem.onchange= function () { createChartElementsConfig2Form(renderer); }; fillSelectOptions(selVizTypeElem,getPossibleVizTypes(renderer),false,(myChartElem!=null?myChartElem.vizTypeUniquename:null)); - fieldVizTypeElem.appendChild(selVizTypeElem); - elementVizTypeDiv.appendChild(fieldVizTypeElem); + + selVizTypeFbodyElem.appendChild(selVizTypeElem); + fieldVizTypeElem.appendChild(selVizTypeFbodyElem); - formChartElementConfig1.appendChild(elementVizTypeDiv); + formChartElementConfig1.appendChild(fieldVizTypeElem); + */ //display Element if already saved: if(elemID!="") createChartElementsConfig2Form(renderer,elemID); @@ -488,10 +558,12 @@ function createChartElementsConfig2Form(renderer,elemID) formChartElementConfig2Div.removeChild(formChartElementConfig2Div.firstChild); } //any previous values? - + //reset general properties: + //renderGeneralChartPropertiesForm("generalChartPropertiesFormDiv",myCommonChartProperties,renderer); const elementDivBox = document.createElement("div"); //first only Dimensions and measures: + var elementDivBoxHtml=""; for(var k=0;k < vizTypeProperties.length;k++) { if(vizType==vizTypeProperties[k].typeUniquename && @@ -501,12 +573,14 @@ function createChartElementsConfig2Form(renderer,elemID) ) { var selectedValue=getChartElementPropertyValue(elemID,vizTypeProperties[k].propUniquename); - elementDivBox.appendChild(renderDimensionField(vizTypeProperties[k],dataSource,selectedValue)); + elementDivBoxHtml+=renderDimensionField(vizTypeProperties[k],dataSource,selectedValue); + //elementDivBox.appendChild(renderDimensionField(vizTypeProperties[k],dataSource,selectedValue)); } } - + elementDivBox.innerHTML=elementDivBoxHtml; //chartElement-specific properties: //without Dimensions and measures: + for(var k=0;k < vizTypeProperties.length;k++) { if(vizType==vizTypeProperties[k].typeUniquename @@ -517,8 +591,7 @@ function createChartElementsConfig2Form(renderer,elemID) var currentCommonChartProperties=commonChartProperties.filter(obj => obj.name == vizTypeProperties[k].propUniquename); if(currentCommonChartProperties.length >0) { - //var selectedValue=getChartElementPropertyValue(elemID,currentCommonChartProperties[0].propUniquename); - + elementDivBox.appendChild(renderChartPropertyField(elemID,currentCommonChartProperties[0],false)); } else @@ -531,6 +604,7 @@ function createChartElementsConfig2Form(renderer,elemID) } } + const saveBtnDiv = document.createElement("div"); const saveBtn = document.createElement("input"); @@ -711,7 +785,7 @@ function resetChartPropertiesForm(chosenRenderer) myDiv.style.display="block"; else myDiv.style.display="none"; - + createChartElementConfig1Form(chosenRenderer,null); return true; } function getPossibleVizTypes(renderer) @@ -1134,15 +1208,26 @@ function fillSelectionResult(selectionRsMetaData) } - function renderDimensionField(vizTypeProperty,datasource,selectedValue) +{ + const selElem = document.createElement("select"); + selElem.name=vizTypeProperty.propUniquename; + selElem.id=vizTypeProperty.propUniquename; + var dimensionProperty=fillDimensionProperty(vizTypeProperty,datasource); + fillSelectOptions(selElem,dimensionProperty.getValueResultset(),dimensionProperty.isMandatory,selectedValue); + + var zs=generateFormFieldHtml(vizTypeProperty.caption,vizTypeProperty.propUniquename,"Je nach Grafikelement Festlegung der Achsen oder Dimensionen und Maße.",selElem); //TODO tooltip + return zs; +} +function renderDimensionFieldAlt(vizTypeProperty,datasource,selectedValue) { const fieldElem = document.createElement("div"); fieldElem.classList.add("field"); - fieldElem.classList.add("is-grouped"); + fieldElem.classList.add("is-horizontal"); //label: const labelElem = document.createElement("div"); - labelElem.classList.add("label-container"); + labelElem.classList.add("field-label"); // is-normal + labelElem.classList.add("is-small"); const label = document.createElement("label"); label.classList.add("label"); label.classList.add("is-required"); @@ -1154,10 +1239,16 @@ function renderDimensionField(vizTypeProperty,datasource,selectedValue) label.appendChild(textnode); labelElem.appendChild(label); fieldElem.appendChild(labelElem); + //field body: + const fbodyElem = document.createElement("div"); + fbodyElem.classList.add("field-body"); + //input: + const inputFieldElem = document.createElement("div"); inputFieldElem.classList.add("field"); inputFieldElem.classList.add("is-active"); + inputFieldElem.style.width="100px"; const inputSelectElem = document.createElement("div"); inputSelectElem.classList.add("select"); inputSelectElem.classList.add("is-small"); @@ -1173,7 +1264,9 @@ function renderDimensionField(vizTypeProperty,datasource,selectedValue) fillSelectOptions(selElem,dimensionProperty.getValueResultset(),dimensionProperty.isMandatory,selectedValue); inputSelectElem.appendChild(selElem); inputFieldElem.appendChild(inputSelectElem); - fieldElem.appendChild(inputFieldElem); + fbodyElem.appendChild(inputFieldElem); + + fieldElem.appendChild(fbodyElem); return fieldElem; } @@ -1190,15 +1283,18 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render var previousGroup=""; for(var k=0;k < myCommonChartProperties.length;k++) { - var groupUniquename=myCommonChartProperties[k].groupUniquename; - if(groupUniquename!="" - && groupUniquename != previousGroup - && myCommonChartProperties[k].groupVariableName !="" - ) + if(myCommonChartProperties[k].rendererUniquename==renderer || myCommonChartProperties[k].isGeneric==1) { - var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,""); - commonChartPropertyGroups.push(newcommonChartPropertyGroup); - previousGroup=groupUniquename; + var groupUniquename=myCommonChartProperties[k].groupUniquename; + if(groupUniquename!="" + && groupUniquename != previousGroup + && myCommonChartProperties[k].groupVariableName !="" + ) + { + var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,""); + commonChartPropertyGroups.push(newcommonChartPropertyGroup); + previousGroup=groupUniquename; + } } } @@ -1241,8 +1337,12 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render && myCommonChartProperties[k].variableName!="" //&& isChartPropertyValidForChartelements(myCommonChartProperties[k]) && !isChartPropertyValidForChartelements(myCommonChartProperties[k]) + && (myCommonChartProperties[k].rendererUniquename==renderer + || myCommonChartProperties[k].isGeneric==1) ) + { columnGroupBodyDiv.appendChild(renderChartPropertyField(null,myCommonChartProperties[k],true)); + } } columnGroupDiv.appendChild(columnGroupBodyDiv); columnDiv.appendChild(columnGroupDiv); @@ -1313,7 +1413,7 @@ function renderChartPropertyField(elemID,chartProperty,isCommon) label.classList.add("label"); label.classList.add("is-required"); label.classList.add("is-small"); - label.classList.add("has-tooltip-right"); + label.classList.add("has-tooltip-bottom"); label.setAttribute("data-tooltip",chartProperty.explanation); const textnode = document.createTextNode(chartProperty.caption); @@ -1322,7 +1422,9 @@ function renderChartPropertyField(elemID,chartProperty,isCommon) fieldElem.appendChild(labelElem); //input: const inputControlElem = document.createElement("div"); - //inputControlElem.classList.add("control-new"); + inputControlElem.classList.add("control"); + + const inputFieldElem = document.createElement("div"); inputFieldElem.classList.add("field"); const inputElem = document.createElement("div"); @@ -1334,6 +1436,7 @@ function renderChartPropertyField(elemID,chartProperty,isCommon) //select input: inputElem.classList.add("select"); inputElem.classList.add("is-small"); + inputElem.style.width="100px"; const selElem = document.createElement("select"); selElem.name=chartProperty.name; selElem.id=chartProperty.name; @@ -1538,9 +1641,15 @@ if(tableDiv.innerHTML=="") var rowcount=mydata.length; if(rowcount > maxRows) rowcount=maxRows; +const tabContainer= document.createElement("div"); +tabContainer.classList.add("table-container"); const tabElem = document.createElement("table"); +tabElem.classList.add("table"); +tabElem.classList.add("is-bordered"); +tabElem.classList.add("is-narrow"); + tabElem.border="1"; -tabElem.width="100%"; +tabElem.width="70%"; const rowElem = document.createElement("tr"); const thCap = document.createElement("th"); const textnode = document.createTextNode("Zeilennr."); @@ -1640,8 +1749,8 @@ for(row=0;row -
+

Konfigurationsassistent Datenvisualisierung

@@ -148,9 +148,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
- - - + @@ -306,8 +304,8 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
-

-

+
@@ -368,25 +366,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
- -
-
- -
- -   -   - - - - - - -
- - +
@@ -407,33 +387,64 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util + +
+ +
+
+ + + + + + + + + +
- + +
+
+ +
+ +   +   + + + + + + +
+ +
@@ -594,7 +605,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util