Browse Source

Tooltips Layout #5

viz_kern51
Daniel Quathamer 3 months ago
parent
commit
10dfc06396
  1. 3
      src-modules/module/viz/conf/includes.txt
  2. 8
      src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen.sql
  3. 10
      src-modules/module/viz/schluesseltabellen/viz_property.unl
  4. 5
      src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl
  5. 528
      src-modules/module/viz/schluesseltabellen/viz_type_d3js_fuellen.sql
  6. 10
      src-modules/module/viz/schluesseltabellen/viz_type_property.unl
  7. 195
      superx/xml/js/viz/viz_functions.js
  8. 97
      superx/xml/viz_html_chart.xsl

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

@ -5,9 +5,6 @@ images/information_grey_liberation.svg @@ -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

8
src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen.sql

@ -24,10 +24,10 @@ @@ -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 = [

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

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

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

@ -41,3 +41,8 @@ @@ -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^

528
src-modules/module/viz/schluesseltabellen/viz_type_d3js_fuellen.sql

@ -0,0 +1,528 @@ @@ -0,0 +1,528 @@
--Freemarker Template
<#include "SQL_lingua_franca"/>
<#include "SuperX_general"/>
<sqlvars>
<sqlvar name="renderer">
select tid from viz_renderer where uniquename='d3js';
</sqlvar>
</sqlvars>
<#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 />
</#foreach>
<@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>
<#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}'
;
</#if>
</#foreach>
</#macro>
<#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>
<#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>
<#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>
'',
</#if>
0 as is_general
from xdummy left outer join viz_property P
on (P.prop_uniquename='${viz_prop.prop_uniquename}')
;
</#foreach>
<#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>
'',
</#if>
1 as is_general
from xdummy left outer join viz_property P
on (P.prop_uniquename='${viz_prop.prop_uniquename}')
;
</#foreach>
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;
</#macro>

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

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

195
superx/xml/js/viz/viz_functions.js

@ -379,6 +379,30 @@ function prepareSelectionForm() @@ -379,6 +379,30 @@ function prepareSelectionForm()
return selectionProperties;
}
function generateFormFieldHtml(labelText,fieldname,tooltiptext,inputElem)
{
var zs="<div class='field is-grouped'>";
zs+="<div class='label-container' lang='de'><span class='labelNormal has-tooltip-bottom' data-tooltip='"+tooltiptext+"'>"+labelText+"</span></div>";
zs+="<div class='control'><div class='field'><div class='control is-expanded'>";
zs+="<div class='select is-small is-fullwidth is-focused'>";
//zs+="<select id='"+fieldname+"''><option>TEST</option></select>";
zs+=getOuterHTML(inputElem);
zs+="</div></div></div></div>"; //Ende field body
zs+="</div>";//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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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 @@ -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 @@ -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) @@ -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) @@ -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) @@ -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=="") @@ -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<rowcount;row++) @@ -1640,8 +1749,8 @@ for(row=0;row<rowcount;row++)
}
}
tabElem.appendChild(rowElemFunc);
tableDiv.appendChild(tabElem);
tabContainer.appendChild(tabElem);
tableDiv.appendChild(tabContainer);
}
else
tableDiv.innerHTML=""; //reset table

97
superx/xml/viz_html_chart.xsl

@ -108,9 +108,9 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util @@ -108,9 +108,9 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<!--Beginn Selektions-Card-->
<!--Beginn Berichtstitel, Pfad, Knopfleiste-->
<section class="hero-body has-background-light">
<div class="columns is-mobile is-left">
<!--<div class="columns is-mobile is-left">
<div class="card has-background-light">
<div class="card-content">
<div class="card-content">-->
<p class="title is-4">Konfigurationsassistent Datenvisualisierung</p>
<!--Beginn NavTabs-->
@ -148,9 +148,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util @@ -148,9 +148,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
</div><!--tab-content -->
</div> <!-- card-content -->
</div><!--card -->
</div> <!-- column -->
</section>
</xsl:for-each>
</xsl:template>
@ -306,8 +304,8 @@ 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
<!--footer-->
<footer class="card-footer">
<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" onclick="selectionResultPreview('selectionResultPreviewTable');">Daten-Vorschau</button></p>-->
<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit">Speichern</button></p>
<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset">Zurücksetzen</button></p>
<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit">Speichern</button></p>
<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset">Zurücksetzen</button></p>-->
</footer>
</xsl:template>
@ -368,25 +366,7 @@ 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
<div class="columns">
<div class="column is-four-fifth">
<!--Beginn Layoutmerkmale-->
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>Allgem. Layoutmerkmale</strong></label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<a onClick="showChartPropertiesFormDiv('generalChartPropertiesFormDiv','generalChartPropertiesFormElementsDiv',document.getElementById('fldVizRenderer').value);">
<span class="icon">
<img src="../images/icons/more.svg" title="Laden" />
</span>
</a>
</div>
<div id="generalChartPropertiesFormDiv" class="box" style="display:none">
<div id="generalChartPropertiesFormElementsDiv"> </div>
</div>
<!-- Box Grafikelemente -->
<div class="field is-grouped">
@ -407,33 +387,64 @@ 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
<div id="ChartElementsDiv" style="display:none" class="box">
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small">Grafikelement</label>
</div>
<div class="select is-small"><select class="select is-small" id="chartElementID" name="chartElementID"
<div class="label-container" lang="de"><span class="labelNormal has-tooltip-bottom" data-tooltip="Nur für Grafiktool Plot: Übersicht Grafikelemente, wählen Sie ein Element zum Bearbeiten, oder erzeugen einen neuen Grafikelementtyp. Sie können auch mehrere erzeugen bzw. entfernen mit dem + bzw - Button">
Grafikelement</span></div>
<div class="control">
<div class="field"><div class="control is-expanded">
<div class="select is-small is-fullwidth is-focused">
<select id="chartElementID" name="chartElementID"
onchange="loadChartElementConfig(this);">
<option></option>
</select></div>
<!--<div id="ChartElementListDiv"></div>-->
<div id="ChartElementListFooterDiv"><!--Elemente:--> <input class="is-small" type="hidden" size="1" name="vizElementCounter" id="vizElementCounter" value="0" readonly="readonly" style="background-color:#cccccc;"/>
<option>Bitte fügen Sie ein Element ein</option>
</select>
<input class="is-small" type="hidden" size="1" name="vizElementCounter" id="vizElementCounter" value="0" readonly="readonly" style="background-color:#cccccc;"/>
</div>
</div>
<div class="control">
<a onClick="createChartElementConfig1Form(document.getElementById('fldVizRenderer').value,null)">
<img src="../images/plus-circled.svg" width="12" height="12" title="Neues Element anlegen" />
</a>
<span class="separator">&#160;</span>
<a onClick="removeChartElementConfig()">
<img src="../images/minus-circled.svg" width="12" height="12" title="Ausgewähltes Element entfernen" />
</a>
</div>
</div>
</a>
</div>
</div>
</div>
</div><!--ende Feld Grafikelemente-->
<!--<div id="ChartElementListDiv"></div>-->
<div id="ChartElementConfig1Div"> </div>
<div id="ChartElementConfig2Div"> </div>
</div> <!--Ende Grafikelemente-->
<!--Beginn Layoutmerkmale-->
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>Allgem. Layoutmerkmale</strong></label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<a onClick="showChartPropertiesFormDiv('generalChartPropertiesFormDiv','generalChartPropertiesFormElementsDiv',document.getElementById('fldVizRenderer').value);">
<span class="icon">
<img src="../images/icons/more.svg" title="Laden" />
</span>
</a>
</div>
<div id="generalChartPropertiesFormDiv" class="box" style="display:none">
<div id="generalChartPropertiesFormElementsDiv"> </div>
</div>
<!--Beginn Quellcode-->
<div class="field is-grouped">
<div class="label-container">
@ -594,7 +605,7 @@ 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
<!--footer (BF nach unten verschoben)-->
<footer class="card-footer">
<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit" onClick="showSaveChartFormDiv('saveChartFormDiv','plot');">Speichern...</button></p>
<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit" onClick="showSaveChartFormDiv('saveChartFormDiv','plot');">Speichern...</button></p>-->
<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset" onClick="return resetChartPropertiesForm('plot');">Zurücksetzen</button></p>-->
<div id="saveChartFormDiv" style="display:none">
<form name="saveChart" target="_blank" action="../edit/viz/viz_chart_erzeugen.jsp">
@ -645,7 +656,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util @@ -645,7 +656,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<input type="submit" class="button is-link is-outlined is-small" value="Speichern"></input>
<!--<input type="submit" class="button is-link is-outlined is-small" value="Speichern"></input>-->
</div>

Loading…
Cancel
Save