diff --git a/src-modules/module/viz/conf/includes.txt b/src-modules/module/viz/conf/includes.txt index 7adb6d0..28fa377 100644 --- a/src-modules/module/viz/conf/includes.txt +++ b/src-modules/module/viz/conf/includes.txt @@ -1,4 +1,7 @@ doku/viz_modul/viz.html +images/icons/into_excel_normal.svg +images/icons/into_pdf.svg +images/icons/into_word.svg images/icons/more.svg images/icons/chart-bar.svg images/information_grey_liberation.svg @@ -41,7 +44,7 @@ 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/viz_assistent.js xml/js/viz/world.geojson.license.txt xml/js/viz/world.geojson xml/pageComponents_html_final_viz.xsl.sam diff --git a/src-modules/module/viz/conf/viz.xml b/src-modules/module/viz/conf/viz.xml index 6f8a46f..080fdf7 100644 --- a/src-modules/module/viz/conf/viz.xml +++ b/src-modules/module/viz/conf/viz.xml @@ -129,6 +129,10 @@ rightname="CS_BIA_STANDARDREPORTS_ADMIN[VIZ]" /> CENTER,TOP,BOTTOM,LEFT,RIGHT,INLINE + in px + in px + in px + in px @@ -666,6 +670,8 @@ parent="Visualisierungen">Abfragen zur Administration von Visualisierungen + + @@ -755,8 +761,12 @@ mode="full"> - - + + + + + diff --git a/src-modules/module/viz/conf/viz_upgrade_man.sql b/src-modules/module/viz/conf/viz_upgrade_man.sql new file mode 100644 index 0000000..a9a30f1 --- /dev/null +++ b/src-modules/module/viz/conf/viz_upgrade_man.sql @@ -0,0 +1,7 @@ + +update viz_chart set chart_width=600 where chart_width is null; +update viz_chart set chart_height=400 where chart_height is null; + +update viz_chart set chart_miniature_width=600 where chart_miniature_width is null; +update viz_chart set chart_miniature_height=400 where chart_miniature_height is null; + diff --git a/src-modules/module/viz/masken/44190_felderinfo.unl b/src-modules/module/viz/masken/44190_felderinfo.unl index 3b0b94a..88c5eec 100644 --- a/src-modules/module/viz/masken/44190_felderinfo.unl +++ b/src-modules/module/viz/masken/44190_felderinfo.unl @@ -17,10 +17,11 @@ order by 1;^^<> SELECT 2,'2-spaltig' from xdummy^ 44203^Studiengang^6^0^0^140^150^50^char^30^0^12^<> select tid,name,sortnr from sichten where art in ('SOS-Kostenstellen-Sicht', 'SOS-Studiengang-Sicht') order by 3,2;^^^ 44204^Schlüssel anzeigen^150^0^0^100^100^1^integer^30^1^1^<> select 1,'Ja' from xdummy union select 0,'Nein' from xdummy^hidden^<> select 1,'Ja' from xdummy^ 44205^tablestylesheet^150^0^0^100^100^1^char^255^1^1^<> 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^ ^<> 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^ +44206^Kachelbreite^305^0^0^100^15^1^integer^5000^0^0^^^800^ 44207^Grafik^1000^300^-1^170^150^1^integer^30^0^1^<> select tid, caption from viz_chart order by 2;^hidden^ ^ 44208^Jahr^110^0^0^140^80^1^integer^30^0^13^ ^ ^ ^ 44209^Semestertyp^5^350^-1^140^80^1^integer^255^0^1^<> select 1,'nur Sommersemester' from xdummy union select 2,'nur Wintersemester' from xdummy^Eintrag^<> select 2,'nur Wintersemester' from xdummy^ 44210^##line##^30^0^0^100^100^1^char^5000^0^8^^^1^ 44211^Abschluss^7^0^0^140^170^5^char^30^0^1^<> select abint,dtxt from k_abint order by 2;^^^ -44212^Matrikel-Nr.^20^350^-1^150^180^1^char^200^0^13^^{InputCheck:matrikelnummern}^^ +44212^Kachelhöhe^310^0^0^100^15^1^integer^5000^0^0^^^600^ 44213^##line##^40^0^0^100^100^1^char^5000^0^8^^^1^ diff --git a/src-modules/module/viz/masken/44190_masken_felder_bez.unl b/src-modules/module/viz/masken/44190_masken_felder_bez.unl index 1dca4eb..a3e1e98 100644 --- a/src-modules/module/viz/masken/44190_masken_felder_bez.unl +++ b/src-modules/module/viz/masken/44190_masken_felder_bez.unl @@ -13,6 +13,7 @@ 44190^44203^ 44190^44204^ 44190^44205^ +44190^44206^ 44190^44207^ 44190^44208^ 44190^44209^ diff --git a/src-modules/module/viz/masken/44660_felderinfo.unl b/src-modules/module/viz/masken/44660_felderinfo.unl index 20578d8..5c36b0f 100644 --- a/src-modules/module/viz/masken/44660_felderinfo.unl +++ b/src-modules/module/viz/masken/44660_felderinfo.unl @@ -1,10 +1,11 @@ 44660^Köpfe oder Fälle ?^0^0^0^140^150^1^sql^70^0^1^<> select apnr, eintrag from koepfe_oder_faelle order by 2^apnr, eintrag^<> select apnr, eintrag from koepfe_oder_faelle where eintrag='Köpfe';^ -44661^Seit Semester^3^0^0^140^80^1^integer^30^0^1^<> select tid, eintrag from semester order by tid DESC;^Eintrag^<> select tid,eintrag from semester where today() between sem_beginn and sem_ende;^ +44661^Seit Semester^3^0^0^140^80^1^integer^30^0^1^<> select tid, eintrag from semester order by tid DESC;^Eintrag^<> select tid,eintrag from semester where today()-(3*365) between sem_beginn and sem_ende;^ 44662^Stichtag^1^350^-1^140^100^1^sql^30^0^1^<> select tid, name from sos_stichtag where stichtagsart='Studierende';^^<> select tid, name from sos_stichtag where stichtagsart='Studierende' and appl_key='0';^ 44663^Staatsangehörigkeit^36^0^0^130^150^10^char^30^0^12^<> select tid,name,sortnr from sichten where art='SOS-Staaten-Sicht' order by 3,2;^hidden^^ 44664^Status^14^350^-1^140^180^1^sql^30^0^1^<> select apnr,eintrag from sos_status order by 2^^<> select apnr,eintrag from sos_status where eintrag='Alle ohne Beurl.';^ 44665^Hörerstatus^33^0^0^140^170^1^sql^30^0^1^<> select apnr, eintrag from hoererstatus order by 2^apnr, eintrag^<> select apnr, eintrag from hoererstatus where eintrag='alle';^ -44666^Spaltenanzahl^300^0^0^140^80^1^integer^30^0^1^<> SELECT 1,'1-spaltig' from xdummy \ +44666^Spaltenanzahl^300^0^0^140^80^1^integer^30^0^1^<> SELECT 0,'Automatisch' 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 \ @@ -17,11 +18,12 @@ order by 1;^^<> SELECT 2,'2-spaltig' from xdummy^ 44672^Tabnr.^1000^0^0^140^80^1^integer^30^0^13^ ^^1^ 44673^Studiengang^6^0^0^140^150^50^char^30^0^12^<> select tid,name,sortnr from sichten where art in ('SOS-Kostenstellen-Sicht', 'SOS-Studiengang-Sicht') order by 3,2;^^^ 44674^Schlüssel anzeigen^150^0^0^100^100^1^integer^30^1^1^<> select 1,'Ja' from xdummy union select 0,'Nein' from xdummy^hidden^<> select 1,'Ja' from xdummy^ -44675^tablestylesheet^150^0^0^100^100^1^char^255^1^1^<> 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^ ^<> 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^ +44675^tablestylesheet^150^0^0^100^100^1^char^255^1^1^<> select filename,caption from sx_stylesheets S, sx_mask_style M where S.tid=M.stylesheet_id and M.maskeninfo_id=44660 order by ord^ ^<> select filename,caption from sx_stylesheets S, sx_mask_style M where S.tid=M.stylesheet_id and M.maskeninfo_id=44660 order by ord limit 1^ +44676^Kachelbreite^305^0^0^100^15^1^integer^5000^0^0^^^800^ 44677^Grafik^1000^300^-1^170^150^1^integer^30^0^1^<> select tid, caption from viz_chart order by 2;^hidden^ ^ 44678^Jahr^110^0^0^140^80^1^integer^30^0^13^ ^ ^ ^ 44679^Semestertyp^5^350^-1^140^80^1^integer^255^0^1^<> select 1,'nur Sommersemester' from xdummy union select 2,'nur Wintersemester' from xdummy^Eintrag^<> select 2,'nur Wintersemester' from xdummy^ 44680^##line##^30^0^0^100^100^1^char^5000^0^8^^^1^ 44681^Abschluss^7^0^0^140^170^5^char^30^0^1^<> select abint,dtxt from k_abint order by 2;^^^ -44682^Matrikel-Nr.^20^350^-1^150^180^1^char^200^0^13^^{InputCheck:matrikelnummern}^^ +44682^Kachelhöhe^310^0^0^100^15^1^integer^5000^0^0^^^600^ 44683^##line##^40^0^0^100^100^1^char^5000^0^8^^^1^ diff --git a/src-modules/module/viz/masken/44660_masken_felder_bez.unl b/src-modules/module/viz/masken/44660_masken_felder_bez.unl index bc29ed3..5c976e4 100644 --- a/src-modules/module/viz/masken/44660_masken_felder_bez.unl +++ b/src-modules/module/viz/masken/44660_masken_felder_bez.unl @@ -14,6 +14,7 @@ 44660^44673^ 44660^44674^ 44660^44675^ +44660^44676^ 44660^44677^ 44660^44678^ 44660^44679^ diff --git a/src-modules/module/viz/schluesseltabellen/customxmladd.sql b/src-modules/module/viz/schluesseltabellen/customxmladd.sql index 268c318..e6fc58e 100644 --- a/src-modules/module/viz/schluesseltabellen/customxmladd.sql +++ b/src-modules/module/viz/schluesseltabellen/customxmladd.sql @@ -39,7 +39,7 @@ SELECT R.uniquename, R.caption FROM viz_renderer R -order by 2 desc +order by 2 asc ; @@ -97,9 +97,14 @@ V.description, V.chart_position, --replace(V.chartcode,'"','§') as chartcode_escaped, --replace(V.datasource_def,'"','§') as datasource_def_escaped -R.uniquename as renderer_uniquename +R.uniquename as renderer_uniquename, +V.chart_width, +V.chart_height, +V.chart_miniature_width, +V.chart_miniature_height FROM viz_chart V, viz_renderer R where R.tid=V.renderer_id +and chart_active=1 order by 3 ; @@ -196,6 +201,10 @@ order by 3 chartmodel_miniature="${ch.chartmodel_miniature_escaped}" chart_position="${ch.chart_position}" renderer="${ch.renderer_uniquename}" + chart_width="${ch.chart_width}" + chart_height="${ch.chart_height}" + chart_miniature_width="${ch.chart_width}" + chart_miniature_height="${ch.chart_height}" /> diff --git a/src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen.sql b/src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen.sql index 6cbdf3b..35f0fc9 100755 --- a/src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen.sql +++ b/src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen.sql @@ -18,7 +18,7 @@ {"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.xsl", "ord":"40"}, -{"mask":"44190", "filename":"viz_report_44190.jrxml", "ord":"50"}, +{"mask":"44190", "filename":"viz_report_44190_xmlsource.jrxml", "ord":"50"}, {"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"}, @@ -62,7 +62,7 @@ {"mask":"44660", "filename":"tabelle_html_datenblatt.xsl", "ord":"20"}, {"mask":"44660", "filename":"viz_html_chart_viewer_grid.xsl", "ord":"1"}, {"mask":"44660", "filename":"viz_html_chart_viewer.xsl", "ord":"40"}, -{"mask":"44660", "filename":"viz_report_44660.jrxml", "ord":"50"} +{"mask":"44660", "filename":"viz_report_44660_xmlsource.jrxml", "ord":"50"} ] /> diff --git a/src-modules/module/viz/schluesseltabellen/viz_type_echarts_fuellen.sql b/src-modules/module/viz/schluesseltabellen/viz_type_echarts_fuellen.sql new file mode 100644 index 0000000..159b137 --- /dev/null +++ b/src-modules/module/viz/schluesseltabellen/viz_type_echarts_fuellen.sql @@ -0,0 +1,569 @@ +--Freemarker Template +<#include "SQL_lingua_franca"/> +<#include "SuperX_general"/> + + + + select tid from viz_renderer where uniquename='echarts'; + + + +<#assign viz_types = [ +{"uniquename":"echarts_bar_y", "caption":"Säulendiagramm (vertikal)", +"orientation":"V", +"description":"Vertikales Balkendiagramm", +"explanation":""}, +{"uniquename":"echarts_bar_x", "caption":"Balkendiagramm (horizontal)", +"orientation":"H", +"description":"Horizontales Balkendiagramm", +"explanation":""}, +{"uniquename":"echarts_line_y", "caption":"Liniendiagramm (vertikal)", +"orientation":"V", +"description":"Vertikales Liniendiagramm", +"explanation":""}, +{"uniquename":"echarts_line_x", "caption":"Liniendiagramm (horizontal)", +"orientation":"H", +"description":"Horizontales Liniendiagramm", +"explanation":""}, +{"uniquename":"echarts_pie", "caption":"Tortendiagramm", +"orientation":"Z", +"description":"Tortendiagramm oder Donut", +"explanation":""} + + +] +/> + +<#assign viz_properties = [ +{ "caption":"X-Achse", +"prop_uniquename":"x", +"explanation":"X-Achse", +"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":"Y-Achse", +"prop_uniquename":"y", +"explanation":"Y-Achse", +"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" +}, +{ "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":"610", +"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":"echarts_bar_y", +"viz_property_uniquename":"x", +"is_mandatory":"1", +"sortnr":"1"}, +{ "viz_type_uniquename":"echarts_bar_y", +"viz_property_uniquename":"y", +"is_mandatory":"1", +"sortnr":"10"}, +{ "viz_type_uniquename":"echarts_bar_x", +"viz_property_uniquename":"x", +"is_mandatory":"1", +"sortnr":"1"}, +{ "viz_type_uniquename":"echarts_bar_x", +"viz_property_uniquename":"y", +"is_mandatory":"1", +"sortnr":"10"}, +{ "viz_type_uniquename":"echarts_line_x", +"viz_property_uniquename":"x", +"is_mandatory":"1", +"sortnr":"1"}, +{ "viz_type_uniquename":"echarts_line_x", +"viz_property_uniquename":"y", +"is_mandatory":"1", +"sortnr":"10"}, +{ "viz_type_uniquename":"echarts_line_y", +"viz_property_uniquename":"x", +"is_mandatory":"1", +"sortnr":"1"}, +{ "viz_type_uniquename":"echarts_line_y", +"viz_property_uniquename":"y", +"is_mandatory":"1", +"sortnr":"10"}, +{ "viz_type_uniquename":"echarts_pie", +"viz_property_uniquename":"dimension1", +"is_mandatory":"1", +"sortnr":"10"}, +{ "viz_type_uniquename":"echarts_pie", +"viz_property_uniquename":"measure1", +"is_mandatory":"1", +"sortnr":"10"} + + +] +/> + +<#assign viz_type_properties_general = [ +] +/> + + + +<@create_temp_tables /> + +<@fill_viz_properties /> + +<#foreach viz_type in viz_types> + +<@fill_viz_type_properties_general viz_type_p=viz_type /> + +<@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 INTEGER , + 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/superx/images/icons/into_excel_normal.svg b/superx/images/icons/into_excel_normal.svg new file mode 100644 index 0000000..e1a5a4b --- /dev/null +++ b/superx/images/icons/into_excel_normal.svg @@ -0,0 +1,88 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + X + + diff --git a/superx/images/icons/into_pdf.svg b/superx/images/icons/into_pdf.svg new file mode 100644 index 0000000..69978af --- /dev/null +++ b/superx/images/icons/into_pdf.svg @@ -0,0 +1,94 @@ + + + + + + image/svg+xml + + + + + + + + + + + + pdf + + diff --git a/superx/images/icons/into_word.svg b/superx/images/icons/into_word.svg new file mode 100644 index 0000000..fe1371b --- /dev/null +++ b/superx/images/icons/into_word.svg @@ -0,0 +1,88 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + W + + diff --git a/superx/xml/js/viz/viz_assistent.js b/superx/xml/js/viz/viz_assistent.js new file mode 100644 index 0000000..7349f50 --- /dev/null +++ b/superx/xml/js/viz/viz_assistent.js @@ -0,0 +1,1774 @@ +/* SuperX-VIZ Modul (c) 2023 Daniel Quathamer */ + +function chartModel(id,name,renderer,datasources) +{ + this.version="0.2b"; + this.id=id; + this.name=name; + this.renderer=renderer; + this.dataSources=datasources; + //this.globalProperties=globalproperties; + this.targetDiv=""; //only for d3 + this.chartElements=new Array(); + this.chartPropertiesUsed=new Array(); + this.dataTransformation=new Array(); + +} + + +function possibleVizType(elemID,value,name,explanation,isDefault ) + { +this.elemID=elemID; +this.value=value; +this.name=name; +this.explanation=explanation; +this.isDefault=isDefault; + +} + +function usedVizType(elemID,vizTypeUniquename,caption,datasource ) + { +this.elemID=elemID; +this.vizTypeUniquename=vizTypeUniquename; +this.caption=caption; +this.datasource=datasource; +this.elementTypeProperties=new Array(); +} + +function usedVizProperty(name,vizPropertyVariablename,propertyValue,propUnit ) + { +this.name=name; +this.vizPropertyVariablename=vizPropertyVariablename; +this.propertyValue=propertyValue; +this.propUnit=propUnit; + +} +function usedVizTypeProperty(nr,vizTypePropertyUniquename,caption,propertyValue,propertyType ) + { +this.nr=nr; +this.vizTypePropertyUniquename=vizTypePropertyUniquename; +this.caption=caption; +this.propertyValue=propertyValue; +this.propertyType=propertyType; + +} +function dataTransformationCol(tableId,colname,colfunction) + { +this.tableId=tableId; +this.colname=colname; +this.colfunction=colfunction; + +} + + +function selectionRowMetaData(nr,targetColumn,colname,colcaption,coltype,colfunction) +{ +this.nr=nr; +this.targetColumn=targetColumn; +this.colname=colname; +this.colcaption=colcaption; +this.coltype=coltype; +this.colfunction=colfunction; +} + +function selectionPropertyValue(nr,name,value,isDefault ) + { +this.nr=nr; +this.name=name; +this.value=value; +this.isDefault=isDefault; + +} + + + +function dimFunction(nr,name,value,isDefault ) + { +this.nr=nr; +this.name=name; +this.value=value; +this.isDefault=isDefault; + +} +function dimensionProperty(name,caption,explanation,isMeasure,isMandatory,datasource) +{ +this.name=name; +this.caption=caption; +this.isMeasure=isMeasure; +this.isMandatory=isMandatory; +this.explanation=explanation; +this.datasource=datasource; +this.getValueResultset = function () { +var valueOptions=[]; +var optionCounter=0; +//selectionRsMetaData=fillSelectionResultMetaData(); +//console.log("felder"+selectionRsMetaData.length); +var isDefault=false; + for(var j=0;j < rsColumnMetaData[datasource].length;j++) + { + if(rsColumnMetaData[datasource][j].colcaption.trim() !="" + //&& ( + // isMeasure==false || rsColumnMetaData[datasource][j].coltype == 4 || rsColumnMetaData[datasource][j].coltype == 3) + // + ) + { + //console.log("feld "+rsColumnMetaData[j].nr+selectionRsMetaData[j].targetColumn); + var o=new selectionPropertyValue(rsColumnMetaData[datasource][j].nr,rsColumnMetaData[datasource][j].colcaption,rsColumnMetaData[datasource][j].colname,isDefault); + valueOptions[optionCounter]=o; + optionCounter++; + if(isDefault) + isDefault=false; + } + } + return valueOptions; +} + +} + + +function selectionProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction) + { + /*OBSOLETE*/ +this.name=name; +this.caption=caption; +this.isDynamic=isDynamic; +this.isMeasure=isMeasure; +this.staticValues=staticValues; +this.isMandatory=isMandatory; +this.defaultValue=defaultValue; +this.optionalFunction=optionalFunction; +this.getValueResultset = function () { + var valueOptions=[]; + var optionCounter=0; + if(isDynamic) + { + for(var j=0;j < rsMetaData.length;j++) + { + var isDefault=false; + if(rsMetaData[j].colcaption.trim() !="" && + (isMeasure==false || rsMetaData[j].coltype == 4 || rsMetaData[j].coltype == 3) + ) + { + if(rsMetaData[j].colcaption==defaultValue) + isDefault=true; + var o=new selectionPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].colname,isDefault); + valueOptions[optionCounter]=o; + optionCounter++; + } + } + } + else + { + var staticValuesArray = staticValues.split(/\|/); + for(var k=0;k < staticValuesArray.length;k++) + { + var isDefault=false; + if(rsMetaData[j].colcaption==defaultValue) + isDefault=true; + var o=new selectionPropertyValue(k,staticValuesArray[k],staticValuesArray[k],isDefault); + valueOptions[k]=o; + } + } + return valueOptions; + } +} + +/*Transfer form to model: */ +function updateChartModel() +{ + + var myChartPropertiesUsed=new Array(); + //first empty properties: + /*for(var k=0;k< myChartModel.chartPropertiesUsed.length;k++) + { + myChartModel.chartPropertiesUsed[k].pop(); + }*/ + + if(document.getElementById("chartName").value=="") + document.getElementById("chartName").value=vizInitialName; + var chartName=document.getElementById("chartName").value; + //myChartModel.options.caption=chartName; + if(myChartModel.renderer=="") + myChartModel.renderer=document.getElementById("fldVizRenderer").value; + var myCaption=new usedVizProperty("caption","caption",chartName); + myChartPropertiesUsed.push(myCaption); + //var myForm=document.forms["chartPropertiesForm"]; + for(var k=0;k < commonChartProperties.length;k++) + { + if(getCommonChartProperty(commonChartProperties[k].name)!="") + { + var myProp=new usedVizProperty(commonChartProperties[k].name,commonChartProperties[k].variableName,getCommonChartProperty(commonChartProperties[k].name),commonChartProperties[k].propUnit); + myChartPropertiesUsed.push(myProp); + } + } + + //first Collect all groups: + + myChartModel.chartPropertiesUsed=myChartPropertiesUsed; + + //Update the source Code TEXTAREA: + updateChartModelCode(myChartModel); + return myChartModel; + +} + +function renderChart(chartDiv,currentChartModel,datasource,title) +{ + + /*if(document.getElementById("chartName").value=="") + document.getElementById("chartName").value=vizInitialName;*/ + if(currentChartModel.chartElements.length>0 && currentChartModel.chartElements[0]) + { + renderChartSVGFromModel(currentChartModel,chartDiv,datasource,title); + } + else + document.getElementById(chartDiv).innerHTML=""+ + ""; + // + +} + +function prepareSelectionForm() +{ + var selectionProperties=[]; + + var myProp= new selectionProperty("dimension1","Dimension 1",true,false,true,null,null,true); + selectionProperties[0]=myProp; + var myProp= new selectionProperty("dimension2","Dimension 2",true,false,false,null,null,true); + selectionProperties[1]=myProp; + var myProp= new selectionProperty("measure1","Maß",true,true,true,null,null,true); + selectionProperties[2]=myProp; + +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: + var formChartElementConfig1=document.getElementById("ChartElementConfig1Div"); + while (formChartElementConfig1.firstChild) { + formChartElementConfig1.removeChild(formChartElementConfig1.firstChild); + } + var formChartElementConfig2=document.getElementById("ChartElementConfig2Div"); + while (formChartElementConfig2.firstChild) { + formChartElementConfig2.removeChild(formChartElementConfig2.firstChild); + } + //reset ElemID: + document.getElementById("chartElementID").value=elemID; + //any previous values? + var myChartElem=null; + if(myChartModel.chartElements && elemID !="") + { + var filtered=myChartModel.chartElements.filter(obj => obj.elemID == elemID); + var myChartElem=filtered[0]; + } + //First Datasource: + //const elementDatasourceDiv=document.createElement("div"); + + + /* + const fieldDatasourceElem = document.createElement("div"); + fieldDatasourceElem.classList.add("field"); + fieldDatasourceElem.classList.add("is-horizontal"); + //label: + const labelDatasourceElem = document.createElement("div"); + labelDatasourceElem.classList.add("field-label"); + labelDatasourceElem.classList.add("is-small"); + const labelDatasource = document.createElement("label"); + labelDatasource.classList.add("label"); + labelDatasource.classList.add("is-required"); + labelDatasource.classList.add("is-small"); + labelDatasource.classList.add("has-tooltip-right"); + labelDatasource.setAttribute("data-tooltip","Datenquelle für das Diagrammelement"); + + const textnode = document.createTextNode("Datenquelle"); + labelDatasource.appendChild(textnode); + labelDatasourceElem.appendChild(labelDatasource); + fieldDatasourceElem.appendChild(labelDatasourceElem); + 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)); + 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); + + 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 fieldVizTypeElem = document.createElement("div"); + fieldVizTypeElem.classList.add("field"); + fieldVizTypeElem.classList.add("is-horizontal"); + //label: + const labelVizTypeElem = document.createElement("div"); + labelVizTypeElem.classList.add("field-label"); + labelVizTypeElem.classList.add("is-small"); + const labelVizType = document.createElement("label"); + labelVizType.classList.add("label"); + labelVizType.classList.add("is-required"); + labelVizType.classList.add("is-small"); + labelVizType.classList.add("has-tooltip-right"); + labelVizType.setAttribute("data-tooltip","Art des Grafikelements"); + + const textnodeVizType = document.createTextNode("Grafikelement-Typ"); + labelVizType.appendChild(textnodeVizType); + labelVizTypeElem.appendChild(labelVizType); + fieldVizTypeElem.appendChild(labelVizTypeElem); + + 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)); + + selVizTypeFbodyElem.appendChild(selVizTypeElem); + fieldVizTypeElem.appendChild(selVizTypeFbodyElem); + + formChartElementConfig1.appendChild(fieldVizTypeElem); + */ + //display Element if already saved: + if(elemID!="") + createChartElementsConfig2Form(renderer,elemID); + + } +function createChartElementsConfig2Form(renderer,elemID) +{ + var dataSource=document.getElementById("chartElementDatasource").value; + var vizType=document.getElementById("chartElementVizType").value; + //now Elements: + var formChartElementConfig2Div=document.getElementById("ChartElementConfig2Div"); + while (formChartElementConfig2Div.firstChild) { + 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 && + (vizTypeProperties[k].groupUniquename=="CATEGORY" + || vizTypeProperties[k].groupUniquename=="MEASURE" + ) + ) + { + var selectedValue=getChartElementPropertyValue(elemID,vizTypeProperties[k].propUniquename); + 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 + && vizTypeProperties[k].groupUniquename!="CATEGORY" + && vizTypeProperties[k].groupUniquename!="MEASURE" + ){ + + var currentCommonChartProperties=commonChartProperties.filter(obj => obj.name == vizTypeProperties[k].propUniquename); + if(currentCommonChartProperties.length >0) + { + + elementDivBox.appendChild(renderChartPropertyField(elemID,currentCommonChartProperties[0],false)); + } + else + { + const unknownFieldDiv = document.createElement("div"); + const unknownField=document.createTextNode("Unbekanntes Feld "+vizTypeProperties[k].propUniquename); + unknownFieldDiv.appendChild(unknownField); + elementDivBox.appendChild(unknownFieldDiv); + } + + } + } + + + const saveBtnDiv = document.createElement("div"); + const saveBtn = document.createElement("input"); + saveBtn.type="BUTTON"; + saveBtn.value="Übernehmen"; + saveBtn.classList.add("button"); + saveBtn.classList.add("is-small"); + + saveBtn.onclick =function() { +            saveChartElementConfig() +        } + saveBtnDiv.appendChild(saveBtn); + elementDivBox.appendChild(saveBtnDiv); + + formChartElementConfig2Div.appendChild(elementDivBox); + + +} +function getChartElementPropertyValue(elemID,propUniquename) +{ + var retVal=null; + var myChartElem=null; + if(myChartModel.chartElements && elemID !=null) + { + var filtered=myChartModel.chartElements.filter(obj => obj.elemID == elemID); + var myChartElem=filtered[0]; + if(myChartElem.elementTypeProperties && myChartElem.elementTypeProperties.length) + { + for(var k=0;k < myChartElem.elementTypeProperties.length;k++) + { + myVizTypeProperty=myChartElem.elementTypeProperties[k]; + if(myVizTypeProperty.vizTypePropertyUniquename==propUniquename) + { + retVal=myVizTypeProperty.propertyValue; + } + } + } + } + return retVal; +} +function loadChartElementConfig(myElem) +{ + var elemID=myElem.value; + if(elemID=="") + alert("Kein Grafikelement gefunden"); + else + { + var renderer=document.getElementById("fldVizRenderer").value; + var myVizType=myChartModel.chartElements.filter(obj => obj.elemID == elemID); + //var myVizType=myChartModel.chartElements[elemID]; + createChartElementConfig1Form(renderer,elemID); + //document.getElementById("chartElementVizType").value=myVizType.vizTypeUniquename; + //document.getElementById("chartElementDatasource").value=myVizType.datasource; + } +} +function saveChartElementConfig() +{ + var elemID=document.getElementById("chartElementID").value; + var vizTypeUniquename=document.getElementById("chartElementVizType").value; + var datasource=document.getElementById("chartElementDatasource").value; + var title=document.getElementById("chartName").value; + var nextElemID=parseInt(document.getElementById("vizElementCounter").value) +1; + var mode="update"; + if(elemID=="") + { + //insert mode: + mode="insert"; + if(myChartModel.chartElements) + elemID=myChartModel.chartElements.length +1; + else + elemID="0"; + } + var myVizType=new usedVizType(elemID,vizTypeUniquename,vizTypeUniquename,datasource); //nr,vizTypeUniquename,caption,datasource + var propertyCounter=0; + for(var k=0;k < vizTypeProperties.length;k++) + { + + if(vizTypeUniquename==vizTypeProperties[k].typeUniquename + && document.getElementById(vizTypeProperties[k].propUniquename) + && document.getElementById(vizTypeProperties[k].propUniquename).value !="") + { + var myUsedVizTypeProperty=new usedVizTypeProperty(elemID,vizTypeProperties[k].propUniquename, vizTypeProperties[k].caption,document.getElementById(vizTypeProperties[k].propUniquename).value,vizTypeProperties[k].propertyType); //))nr,vizTypePropertyUniquename,caption,propertyValue ) + myVizType.elementTypeProperties.push(myUsedVizTypeProperty); + } + } + //myVizType.elementTypeProperties=null; + //TODO: Existenz abfangen, hier wird einfach hinzugefügt: + if(mode=="update") + { + for(var k=0;k obj.elemID != elemID); + myChartModel.chartElements=filtered; + //myChartModel.chartElements.pop(); + //elemID--; + //if(document.getElementById("chartElementID")) + // document.getElementById("chartElementID").value=elemID; + document.getElementById("vizElementCounter").value=myChartModel.chartElements.length; + const chartElementListSelect=document.getElementById("chartElementID"); + fillChartElementListSelect(chartElementListSelect); + createChartElementConfig1Form(renderer,null); + renderChart('chartDiv',myChartModel); + } +} + +function fillChartElementListSelect(mySelectElem,selectedValue) +{ + var chartElementListSelectOptionArray=new Array(); + if(myChartModel.chartElements.length>0) + { + + for(var k=0;k < myChartModel.chartElements.length;k++) + { + var myOptionValue=new possibleVizType(myChartModel.chartElements[k].elemID, + myChartModel.chartElements[k].elemID, + myChartModel.chartElements[k].vizTypeUniquename + "-"+myChartModel.chartElements[k].datasource, + "", //explanation + (myChartModel.chartElements[k].elemID==selectedValue ? true:false) //isDefault + ); + chartElementListSelectOptionArray.push(myOptionValue); + } + } + fillSelectOptions(mySelectElem,chartElementListSelectOptionArray,false,selectedValue); + +} + +function showChartElementsBodyForm(elemID) +{ + //Reset Elements Form + //elemID++; + var filtered=myChartModel.chartElements.filter(obj => obj.elemID == elemID); + + document.getElementById("chartElementID").value=elemID; + document.getElementById("chartElementVizType").value=filtered[0].vizTypeUniquename; + var formChartElementConfig2Div=document.getElementById("ChartElementConfig2Div"); + while (formChartElementConfig2Div.firstChild) { + formChartElementConfig2Div.removeChild(formChartElementConfig2Div.firstChild); + } + +} + +function resetChartPropertiesForm(chosenRenderer) +{ + myChartModel=new chartModel(1,"",document.getElementById("fldVizRenderer").value,rsTableMetaData); + renderChart('chartDiv',myChartModel); + //Show Plot Code if renderer =plot: + var myDiv=document.getElementById("plotCodeDiv"); + if(chosenRenderer=="plot") + myDiv.style.display="block"; + else + myDiv.style.display="none"; + createChartElementConfig1Form(chosenRenderer,null); + return true; +} +function getPossibleVizTypes(renderer) +{ + + var possibleVizTypes=new Array(); + for(var k=0;k < vizTypes.length;k++) + { + if(vizTypes[k].rendererUniquename==renderer) + { + var newVizType = new possibleVizType( //nr,value,name,explanation,isDefault + k,vizTypes[k].uniquename,vizTypes[k].caption,'',false); + possibleVizTypes.push(newVizType); + + + } + } + + return possibleVizTypes; +} +function fillDimensionProperty(vizTypeProperty,datasource) +{ + var isMeasure=(vizTypeProperty.groupUniquename=="MEASURE")?true:false; + var myProp= new dimensionProperty(vizTypeProperty.propUniquename,vizTypeProperty.caption,vizTypeProperty.explanation,isMeasure,vizTypeProperty.isMandatory,datasource); + + return myProp; +} +function showChartPropertiesFormDiv(formDiv,formElementsDiv,renderer) +{ + if(myChartModel != null) + { + var myDiv=document.getElementById(formDiv); + switch (formDiv) + { + case "generalChartPropertiesFormDiv": + renderGeneralChartPropertiesForm(formElementsDiv,commonChartProperties,myChartModel.renderer); + break; + case "ChartElementsDiv": + createChartElementConfig1Form(myChartModel.renderer,null); + break; + default: + //do nothing + break; + } + + + if(myDiv.style.display=="block") + myDiv.style.display="none"; + else + myDiv.style.display="block"; +} +} + +function showSaveChartFormDiv(formDiv,renderer) +{ + var myDiv=document.getElementById(formDiv); + + if(myDiv.style.display=="block") + myDiv.style.display="none"; + else + myDiv.style.display="block"; + +} + + +function prepareForm(vizTypeUniquename,vizTypeProperties) +{ + var chartProperties=[]; + var propertyCounter=0; + for(var k=0;k < vizTypeProperties.length;k++) + { + if(vizTypeUniquename==vizTypeProperties[k].typeUniquename) + { + var isMeasure=(vizTypeProperties[k].groupUniquename=="MEASURE")?true:false; + 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=[]; + var propertyCounter=0; + var myProp= new dimensionProperty("viz_dimension1","Kategorie-Dimension",false,true); + chartProperties[0]=myProp; + var myProp= new dimensionProperty("viz_measure1","Maß",true,true); + chartProperties[1]=myProp; + +return chartProperties; +} + +function prepareBarYForm() +{ + var chartProperties=[]; + var propertyCounter=0; + var myProp= new dimensionProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true); + chartProperties[0]=myProp; + var myProp= new dimensionProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true); + chartProperties[1]=myProp; + var myProp= new dimensionProperty("viz_measure1","Maß",true,true,true,null,null,true); + chartProperties[2]=myProp; + +return chartProperties; +} + +function prepareLineForm() +{ + var chartProperties=[]; + var propertyCounter=0; + var myProp= new dimensionProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true); + chartProperties[0]=myProp; + var myProp= new dimensionProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true); + chartProperties[1]=myProp; + var myProp= new dimensionProperty("viz_measure1","Maß",true,true,true,null,null,true); + chartProperties[2]=myProp; + +return chartProperties; +} + +function prepareLineForm_alt() +{ + var chartProperties=[]; + var propertyCounter=0; + var myProp= new dimensionProperty("dimension1","X-Achse",true,false,true,null,null,true); + chartProperties[0]=myProp; + var myProp= new dimensionProperty("measure1","Y-Achse",true,true,true,null,null,true); + chartProperties[1]=myProp; + +return chartProperties; +} +*/ + + +function selectionResultPreview(myDiv) +{ + myDivElem=document.getElementById(myDiv); +if(myDivElem.style.display=="none") +{ + var selectionRs=[]; + var selectionRsMetaData=[]; + var rowcount=rs.length; + var maxLenCategoryDim=0; + var maxMeasure=0; + selectionRsMetaData=fillSelectionResultMetaData(); + //alert(selectionRsMetaData[0].colname); + selectionRs=fillSelectionResult(selectionRsMetaData); + + showSelectionTable("selectionResultPreviewTable",selectionRs,selectionRsMetaData,10); + myDivElem.style.display="block"; +} +else + myDivElem.style.display="none"; +} +function fillSelectionResultMetaData() +{ + var selectionRsMetaData=[]; + var dimension1=document.getElementById("dimension1").value; + var dimension2=document.getElementById("dimension2").value; + var measure=document.getElementById("measure1").value; + + var functionOfDimension1=document.getElementById("dimension1_fn").value; + var functionOfDimension2=document.getElementById("dimension2_fn").value; + var functionOfMeasureDim=document.getElementById("measure1_fn").value; + + //first fill metadata: + + var counter=1; + selectionRsMetaData.push(new selectionRowMetaData(counter,"dimension1",dimension1,getColumnCaption(dimension1),0,functionOfDimension1)); + if(dimension2!="") + { + counter++; + var dim2=new selectionRowMetaData(counter,"dimension2",dimension2,getColumnCaption(dimension2),0,functionOfDimension2); + selectionRsMetaData.push(dim2 ); + } + counter++; + selectionRsMetaData.push(new selectionRowMetaData(counter,"measure",measure,getColumnCaption(measure),0),functionOfMeasureDim); + + return 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-horizontal"); + //label: + const labelElem = document.createElement("div"); + 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"); + label.classList.add("is-small"); + label.classList.add("has-tooltip-right"); + //label.setAttribute("data-tooltip",dimensionProperty.explanation); + + const textnode = document.createTextNode(vizTypeProperty.caption); + 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"); + //inputSelectElem.classList.add("is-fullwidth"); + + const selElem = document.createElement("select"); + selElem.name=vizTypeProperty.propUniquename; + selElem.id=vizTypeProperty.propUniquename; +/* vermutlich unnötig: selElem.onchange= function () { + renderChart('chartDiv'); + };*/ + var dimensionProperty=fillDimensionProperty(vizTypeProperty,datasource); + fillSelectOptions(selElem,dimensionProperty.getValueResultset(),dimensionProperty.isMandatory,selectedValue); + inputSelectElem.appendChild(selElem); + inputFieldElem.appendChild(inputSelectElem); + fbodyElem.appendChild(inputFieldElem); + + fieldElem.appendChild(fbodyElem); + return fieldElem; + +} + +function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,renderer) +{ + //first empty form: + var myForm=document.getElementById(formDiv); + while (myForm.firstChild) { + myForm.removeChild(myForm.firstChild); + } + //first Collect all groups: + var commonChartPropertyGroups=[]; + var previousGroup=""; + for(var k=0;k < myCommonChartProperties.length;k++) + { + if(myCommonChartProperties[k].rendererUniquename==renderer || myCommonChartProperties[k].isGeneric==1) + { + 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; + } + } + + } + const columnDiv = document.createElement("div"); + for(var i=0;i < commonChartPropertyGroups.length;i++) + { + + const columnGroupDiv = document.createElement("div"); + columnGroupDiv.id=commonChartPropertyGroups[i].groupUniquename; + columnGroupDiv.classList.add("block"); + + const columnGroupHeaderDiv = document.createElement("div"); + const colHeader = document.createTextNode(commonChartPropertyGroups[i].caption); + const colHeaderBold = document.createElement("strong"); + colHeaderBold.appendChild(colHeader); + const colHeaderParagraph = document.createElement("label"); + colHeaderParagraph.classList.add("label"); + colHeaderParagraph.classList.add("is-small"); + colHeaderParagraph.appendChild(colHeaderBold); + //Toggle visibility: + const colHeaderToggleBtn = document.createElement("a"); + colHeaderToggleBtn.id="openBody"+commonChartPropertyGroups[i].groupUniquename; + //colHeaderToggleBtn.classList.add("is-small"); + colHeaderToggleBtn.onclick =function() { +            toggleGroupBodyDiv(this.id) +        } + const colHeaderToggleBtnText = document.createTextNode(" ..."); + colHeaderToggleBtn.appendChild(colHeaderToggleBtnText); + colHeaderParagraph.appendChild(colHeaderToggleBtn); + columnGroupHeaderDiv.appendChild(colHeaderParagraph); + //columnGroupHeaderDiv.appendChild(colHeaderToggleBtn); + + columnGroupDiv.appendChild(columnGroupHeaderDiv); + const columnGroupBodyDiv = document.createElement("div"); + columnGroupBodyDiv.id="Body"+commonChartPropertyGroups[i].groupUniquename; + columnGroupBodyDiv.style.display="none"; + for(var k=0;k < myCommonChartProperties.length;k++) + { + if(myCommonChartProperties[k].groupUniquename==commonChartPropertyGroups[i].groupUniquename + && 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); + + } + myForm.appendChild(columnDiv); + +} + + + + +function toggleGroupBodyDiv(groupBodyDiv) +{ + var bodyDiv=groupBodyDiv.substr(4); //remove "open" Prefix + var myDiv=document.getElementById(bodyDiv); + if(myDiv.style.display=="block") + myDiv.style.display="none"; + else + myDiv.style.display="block"; + +} + +function renderChartPropertyField(elemID,chartProperty,isCommon) +{ + //Wenn im chartModel schon ein Wert vorhanden ist, wird er vorbelegt: if(chartProperty) + var propValue=""; + if(myChartModel && isCommon && myChartModel.chartPropertiesUsed.length>0) + { + propValue=getChartPropertyFromModel(myChartModel.chartPropertiesUsed,chartProperty.name,isCommon ); + } + if(myChartModel && !isCommon && myChartModel.chartElements.length >0) + { + var filtered=myChartModel.chartElements.filter(obj => obj.elemID == elemID); + var myChartElem=filtered[0]; + if(myChartElem && myChartElem.elementTypeProperties && myChartElem.elementTypeProperties.length) + { + + propValue=getChartPropertyFromModel(myChartElem.elementTypeProperties,chartProperty.name,isCommon ); + } + } + const fieldElem = document.createElement("div"); + fieldElem.classList.add("field"); + fieldElem.classList.add("is-grouped"); + //label: + const labelElem = document.createElement("div"); + labelElem.classList.add("label-container"); + const label = document.createElement("label"); + label.classList.add("label"); + label.classList.add("is-required"); + label.classList.add("is-small"); + label.classList.add("has-tooltip-bottom"); + label.setAttribute("data-tooltip",chartProperty.explanation); + + const textnode = document.createTextNode(chartProperty.caption); + label.appendChild(textnode); + labelElem.appendChild(label); + fieldElem.appendChild(labelElem); + //input: + const inputControlElem = document.createElement("div"); + inputControlElem.classList.add("control"); + + + const inputFieldElem = document.createElement("div"); + inputFieldElem.classList.add("field"); + const inputElem = document.createElement("div"); + inputElem.classList.add("is-small"); + //inputElem.classList.add("is-fullwidth"); + + switch (chartProperty.inputType) { + case "SELECT": + //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; + //selElem.style="width:50px"; + if(chartProperty.variableName=="") + { + selElem.disabled="disabled"; + selElem.readonly="readonly"; + } + + selElem.onchange= function () { + updateChartModel(); + renderChart('chartDiv',myChartModel); + }; + fillSelectOptions(selElem,chartProperty.getValueResultset(),chartProperty.isMandatory,propValue); + selElem.value= (propValue=="")?chartProperty.defaultValue:propValue; + inputElem.appendChild(selElem); + inputFieldElem.appendChild(inputElem); + + break; + case "TEXTAREA": + //großes Texteingabefeld: + const textAreaElem = document.createElement("textarea"); + textAreaElem.cols="20"; + textAreaElem.rows=3; + if(chartProperty.variableName=="") + { + textAreaElem.disabled="disabled"; + textAreaElem.readonly="readonly"; + } + textAreaElem.name=chartProperty.name; + textAreaElem.id=chartProperty.name; + textAreaElem.value= (propValue=="")?chartProperty.defaultValue:propValue; + textAreaElem.onchange= function () { + updateChartModel(); + renderChart('chartDiv',myChartModel); + }; + inputElem.appendChild(textAreaElem); + inputFieldElem.appendChild(inputElem); + + break; + case "RANGE": + + //Schieberegler: + const rangeElem = document.createElement("input"); + rangeElem.type="NUMBER"; + rangeElem.size=5; + if(chartProperty.variableName=="") + { + rangeElem.disabled="disabled"; + rangeElem.readonly="readonly"; + } + + /* klappt noch nicht: + rangeElem.type="RANGE"; + rangeElem.min=chartProperty.range_from; + rangeElem.max=chartProperty.range_to; + rangeElem.step=50; + */ + + rangeElem.name=chartProperty.name; + rangeElem.id=chartProperty.name; + rangeElem.value= (propValue=="")?chartProperty.defaultValue:propValue; + rangeElem.onchange= function () { + updateChartModel(); + renderChart('chartDiv',myChartModel); + }; + inputElem.appendChild(rangeElem); + inputFieldElem.appendChild(inputElem); + break; + case "CHECKBOX2": //klappt noch nicht + const checkboxElem = document.createElement("input"); + checkboxElem.type="CHECKBOX"; + //checkboxElem.value="1"; + if(chartProperty.variableName=="") + { + checkboxElem.disabled="disabled"; + checkboxElem.readonly="readonly"; + } + checkboxElem.name=chartProperty.name; + checkboxElem.id=chartProperty.name; + checkboxElem.value= (propValue=="")?chartProperty.defaultValue:propValue; + checkboxElem.onchange= function () { + updateChartModel(); + renderChart('chartDiv',myChartModel); + }; + inputElem.appendChild(checkboxElem); + inputFieldElem.appendChild(inputElem); + break; + default: + //Einfaches Texteingabefeld: + const inpElem = document.createElement("input"); + inpElem.type="TEXT"; + if(chartProperty.propValueType=="integer") + inpElem.type="NUMBER"; + if(chartProperty.inputType=="COLOR") + inpElem.type="color"; + inpElem.size=5; + if(chartProperty.variableName=="") + { + inpElem.disabled="disabled"; + inpElem.readonly="readonly"; + } + inpElem.name=chartProperty.name; + inpElem.id=chartProperty.name; + inpElem.value= (propValue=="")?chartProperty.defaultValue:propValue; + inpElem.onchange= function () { + updateChartModel(); + renderChart('chartDiv',myChartModel); + }; + inputElem.appendChild(inpElem); + inputFieldElem.appendChild(inputElem); + + break; + } + + + inputControlElem.appendChild(inputFieldElem); + fieldElem.appendChild(inputControlElem); + return fieldElem; + +} + + + +function fillSelectOptions(myCombo,myValues,isMandatory,selectedValue) +{ +var optionCounter=0; +var selectedOption=null; +while (myCombo.firstChild) { + myCombo.removeChild(myCombo.firstChild); +} +var optionCounter=0; +if(!isMandatory) +{ + //add an empty option: + var o=new Option("",""); + myCombo.options[optionCounter]=o; + selectedOption=optionCounter; + optionCounter++; +} +for(var j=0;j < myValues.length;j++) +{ + var defaultSelected=false; + if(myValues[j].value==selectedValue) + { + selectedOption=j+(isMandatory?0:1); + defaultSelected=true; + } + if(selectedOption==null && myValues[j].isDefault) + { + selectedOption=j+(isMandatory?0:1); + defaultSelected=true; + } + + var o=new Option(myValues[j].name,myValues[j].value,defaultSelected,null); + myCombo.options[optionCounter]=o; + optionCounter++; +} +if(selectedOption!=null) + myCombo.selectedIndex=selectedOption; +} + + + + + +function showDataTable(myTableDiv,tableId,mydata,metadata,maxRows) +{ + +tableDiv=document.getElementById(myTableDiv); +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="70%"; +const rowElem = document.createElement("tr"); +const thCap = document.createElement("th"); +const textnode = document.createTextNode("Zeilennr."); +thCap.appendChild(textnode); +rowElem.appendChild(thCap); + +for(var col=0;col < metadata.length;col++) + { + if(metadata[col].nr) + { + const thCap = document.createElement("th"); + const textnode = document.createTextNode(metadata[col].colcaption); + thCap.appendChild(textnode); + rowElem.appendChild(thCap); + } + } +tabElem.appendChild(rowElem); + +//Variablennamen in Subheader +const rowElemSubHeader = document.createElement("tr"); +const tdCap = document.createElement("td"); +tdCap.style="font-family:monospace;font-size:smaller"; +const textnodeSubHeader = document.createTextNode("(rownr)"); +tdCap.appendChild(textnodeSubHeader); +rowElemSubHeader.appendChild(tdCap); + +for(var col=0;col < metadata.length;col++) + { + if(metadata[col].nr) + { + const thCap = document.createElement("td"); + thCap.style="font-family:monospace;font-size:smaller"; + const textnode = document.createTextNode("("+metadata[col].colname+")"); + thCap.appendChild(textnode); + rowElemSubHeader.appendChild(thCap); + } + } +tabElem.appendChild(rowElemSubHeader); + +for(row=0;row0) +{ + switch (renderer) { + case "plot": + for (var i=0;i d.dimension1,d => d.dimension2, d => d.measure1); +//var group = d3.group(sorted, d => d.sos_stg_aggr_sem_rueck_beur_ein_str); +//console.log(group); + + + + var group = d3.group(sorted, d => d.dimension1,d => d.dimension2, d => d.measure1 ); + var hierarchy = d3.hierarchy(group); + + var level1count=hierarchy.children.length; + console.log("level1count:"+level1count); + var data_str = "{\"name\":\"root\",\"children\":["; + +for(var i=0; i < level1count ; i++){ +console.log("Zeile "+i+ ":" + hierarchy.children[i].data[0]); +data_str+="{\"name\":\""+hierarchy.children[i].data[0]+"\",\"children\":["; +var level2count=hierarchy.children[i].children.length; +for(var j=0; j < level2count ; j++){ +console.log("unterZeile "+j+ ":" + hierarchy.children[i].children[j].data[0]); +data_str+="{\"name\":\""+hierarchy.children[i].children[j].data[0]+"\",\"children\":["; + +/*var level3count=hierarchy.children[i].children[j].children.length; +console.log("level3count: "+level3count); + +for(var k=0; k < level3count ; k++){ +console.log("unterUnterZeile "+k+ ":" + hierarchy.children[i].children[j].children[k].data[0]); +data_str+="{\"name\":\""+hierarchy.children[i].children[j].children[k].data[0]+"\",\"value\":"+hierarchy.children[i].children[j].children[k].children[0].data[0] +"}"; +if(k < level3count -1) + data_str+=","; + +} +*/ +data_str+="]}"; +if(j < level2count -1) + data_str+=","; +} +data_str+="]}"; +if(i < level1count -1) + data_str+=","; +//console.log("Zeile "+i+ ":" + hierarchy.children[i].children[0].data); +} +data_str+="]}" +console.log(data_str); +var dataHierarchy=JSON.parse(data_str); + +return renderSunburst(dataHierarchy,svg); +} +function renderSunburst(data,svg) { + // Specify the chart’s dimensions. + const width = 928; + const height = width; + const radius = width / 6; + + // Create the color scale. + const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1)); + + // Compute the layout. + const hierarchy = d3.hierarchy(data) + .sum(d => d.value) + .sort((a, b) => b.value - a.value); + const root = d3.partition() + .size([2 * Math.PI, hierarchy.height + 1]) + (hierarchy); + root.each(d => d.current = d); + + // Create the arc generator. + const arc = d3.arc() + .startAngle(d => d.x0) + .endAngle(d => d.x1) + .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)) + .padRadius(radius * 1.5) + .innerRadius(d => d.y0 * radius) + .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1)) + + // Create the SVG container. + // Append the arcs. + const path = svg.append("g") + .selectAll("path") + .data(root.descendants().slice(1)) + .join("path") + .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) + .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0) + .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") + + .attr("d", d => arc(d.current)); + + // Make them clickable if they have children. + path.filter(d => d.children) + .style("cursor", "pointer") + .on("click", clicked); + + const format = d3.format(",d"); + path.append("title") + .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); + + const label = svg.append("g") + .attr("pointer-events", "none") + .attr("text-anchor", "middle") + .style("user-select", "none") + .selectAll("text") + .data(root.descendants().slice(1)) + .join("text") + .attr("dy", "0.35em") + .attr("fill-opacity", d => +labelVisible(d.current)) + .attr("transform", d => labelTransform(d.current)) + .text(d => d.data.name); + + const parent = svg.append("circle") + .datum(root) + .attr("r", radius) + .attr("fill", "none") + .attr("pointer-events", "all") + .on("click", clicked); + + // Handle zoom on click. + function clicked(event, p) { + parent.datum(p.parent || root); + + root.each(d => d.target = { + x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, + x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, + y0: Math.max(0, d.y0 - p.depth), + y1: Math.max(0, d.y1 - p.depth) + }); + + const t = svg.transition().duration(750); + + // Transition the data on all arcs, even the ones that aren’t visible, + // so that if this transition is interrupted, entering arcs will start + // the next transition from the desired position. + path.transition(t) + .tween("data", d => { + const i = d3.interpolate(d.current, d.target); + return t => d.current = i(t); + }) + .filter(function(d) { + return +this.getAttribute("fill-opacity") || arcVisible(d.target); + }) + .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) + .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") + + .attrTween("d", d => () => arc(d.current)); + + label.filter(function(d) { + return +this.getAttribute("fill-opacity") || labelVisible(d.target); + }).transition(t) + .attr("fill-opacity", d => +labelVisible(d.target)) + .attrTween("transform", d => () => labelTransform(d.current)); + } + + function arcVisible(d) { + return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; + } + + function labelVisible(d) { + return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; + } + + function labelTransform(d) { + const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; + const y = (d.y0 + d.y1) / 2 * radius; + return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; + } + + return svg.node(); + +} + + +function openModalImage(ergebniselementOrdnr) +{ + var myModalCard=document.getElementById("modalCard"+ergebniselementOrdnr); + myModalCard.classList.add('is-active'); +} +function closeModalImage(ergebniselementOrdnr) +{ + var myModalCard=document.getElementById("modalCard"+ergebniselementOrdnr); + myModalCard.classList.remove('is-active'); +} + + + + diff --git a/superx/xml/js/viz/viz_viewer.js b/superx/xml/js/viz/viz_viewer.js index 81d3fc2..4a0bd30 100644 --- a/superx/xml/js/viz/viz_viewer.js +++ b/superx/xml/js/viz/viz_viewer.js @@ -166,15 +166,15 @@ function fillEchartsDataSet(myRs,myRsMetaData,currentChartModel) //Identify dimensions and measures: switch (chartType) { case "echarts_pie": - var measure1Fldname=getChartElementPropertyValue(currentChartModel,"1","measure1"); - var dimension1Fldname=getChartElementPropertyValue(currentChartModel,"1","dimension1"); + var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1"); + var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","dimension1"); dataset=fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure1Fldname); break; case "echarts_bar_y_stack": //TODO klappt nich tnicht) - var measure1Fldname=getChartElementPropertyValue(currentChartModel,"1","measure1"); - var dimension1Fldname=getChartElementPropertyValue(currentChartModel,"1","dimension1"); - var dimension2Fldname=getChartElementPropertyValue(currentChartModel,"1","dimension2"); + var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1"); + var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","dimension1"); + var dimension2Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","dimension2"); dataset=fillEchartsDataSetCrosstab(myRs,myRsMetaData,dimension1Fldname,dimension2Fldname,measure1Fldname); break; default: @@ -339,7 +339,7 @@ function renderPlotD3Chart(chartDiv,currentChartModel,ergebniselementOrdnr) } /* Render Model:*/ -function renderChartSVGFromModel(currentChartModel,targetDiv,ergebniselementOrdnr) { +function renderChartSVGFromModel(currentChartModel,targetDiv,ergebniselementOrdnr,title) { //first update data if function is defined: if(currentChartModel.dataTransformation.length>0) { @@ -360,6 +360,9 @@ function renderChartSVGFromModel(currentChartModel,targetDiv,ergebniselementOrdn case "d3js": renderChartSVGWithD3(currentChartModel,targetDiv,ergebniselementOrdnr); break; + case "echarts": + renderEChart2(currentChartModel,targetDiv,ergebniselementOrdnr,title); + break; default: alert("No renderer"); break; @@ -459,17 +462,6 @@ var data=filld3data(rs[rsIndexNr],rsColumnMetaData[rsIndexNr],chartElem); console.log("Mark-option for "+chartType); switch (chartType) { - case "bar_x_d3": - var mySvg = d3.select("#"+targetDiv).append("svg") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) - .attr("viewBox", [0,0, width+ margin.left + margin.right, height+ margin.top + margin.bottom]) - .append("g") - .attr("transform", - "translate(" + margin.left + "," + margin.top + ")") - ; - mySvg=makeBarX_d3(currentChartModel.chartPropertiesUsed,mySvg,data,chartElem); - break; case "sankey": var mySvg = d3.select("#"+targetDiv).append("svg") .attr("width", width + margin.left + margin.right) @@ -1180,8 +1172,14 @@ function getPlotOptionsObj(chartPropertiesUsed,currentChartModel) /*echarts:*/ function renderEChart2(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitle) { + //first empty the element, if necessary: + var chartDivElem=document.getElementById(chartDiv); + while (chartDivElem.firstChild) { + chartDivElem.removeChild(chartDivElem.firstChild); + } // Initialize the echarts instance based on the prepared dom - var myChart = echarts.init(document.getElementById(chartDiv),null, { renderer: 'svg' }); + + var myChart = echarts.init(chartDivElem,null, { renderer: 'svg' }); var chartType=currentChartModel.chartElements[0].vizTypeUniquename; var titleText=chartTitle; if(chartTitle=="") @@ -1290,8 +1288,11 @@ if(orientation=="x") xAxisType="value"; } -var measure1Fldname=getChartPropertyValue(currentChartModel.chartPropertiesUsed,measure1Axis); -var dimension1Fldname=getChartPropertyValue(currentChartModel.chartPropertiesUsed,dimension1Axis); +//var measure1Fldname=getChartPropertyValue(currentChartModel.chartPropertiesUsed,measure1Axis); +var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,1,measure1Axis); +var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,1,dimension1Axis); + +//var dimension1Fldname=getChartPropertyValue(currentChartModel.chartPropertiesUsed,dimension1Axis); var subtitleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"subtitle"); var scheme = getChartPropertyValue(currentChartModel.chartPropertiesUsed,"scheme"); var myPalette=getSchemeArray(scheme); @@ -1390,8 +1391,8 @@ function getEchartOptionsNative(currentChartModel,myDataset) } function getEchartOptionsPie(currentChartModel,myDataset) { -var measure1Fldname=getChartElementPropertyValue(currentChartModel,"1","measure1"); -var dimension1Fldname=getChartElementPropertyValue(currentChartModel,"1","dimension1"); +var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1"); +var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","dimension1"); var titleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"caption"); var scheme = getChartPropertyValue(currentChartModel.chartPropertiesUsed,"scheme"); var myPalette=getSchemeArray(scheme); @@ -1463,7 +1464,7 @@ function getChartPropertyValue(propArray,propName) return propertyValue; } -function getChartElementPropertyValue(myChartModel,elemID,propUniquename) +function getChartElementPropertyValueFromModel(myChartModel,elemID,propUniquename) { var elemID="1"; var retVal=null; @@ -1924,6 +1925,7 @@ function openKachelDetails(ergebniselementOrdnr,formName,maskeninfoTID,grafikUni { document.forms[formName].elements["reuseresult"].value="false"; } + document.forms[formName].target="_blank"; document.forms[formName].submit(); } diff --git a/superx/xml/viz_components.xsl b/superx/xml/viz_components.xsl index 5a00655..20ac03d 100644 --- a/superx/xml/viz_components.xsl +++ b/superx/xml/viz_components.xsl @@ -974,6 +974,110 @@ Stand:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + +
+ + + + +
+ + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + +
+ + + @@ -981,13 +1085,15 @@ Stand:

+ - +
+
-
+
@@ -1008,16 +1114,21 @@ Stand:

Details... -
-

- + + |  + +javascript:neu=window.open('/superx/edit/viz/viz_chart_edit.jsp?tid= +','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=600'); return false; + + Bearbeiten... + + -

+ -
+ + @@ -1095,8 +1206,8 @@ Platzhalter - - + + " value=" " diff --git a/superx/xml/viz_html_chart.xsl b/superx/xml/viz_html_chart.xsl index a053c37..779a9f4 100644 --- a/superx/xml/viz_html_chart.xsl +++ b/superx/xml/viz_html_chart.xsl @@ -47,14 +47,14 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util -