SuperX
/
viz
6
0
Fork 0
Code Issues 8 Pull Requests Projects Releases Wiki Activity
Browse Source

Formular Grafikelemente laden aus JSON Export #5

viz_kern51
Daniel Quathamer 1 month ago
parent
9520aa9a85
commit
d0c0f29a1c
7 changed files with 6022 additions and 401 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      src-modules/module/viz/schluesseltabellen/customxmladd.sql
  2. 385
      superx/xml/js/viz/viz_functions.js
  3. 99
      superx/xml/viz_components.xsl
  4. 143
      superx/xml/viz_html_chart.xsl
  5. 329
      superx/xml/viz_html_chart_viewer.xsl
  6. 2692
      test/webapps_superx/test_viz/stud_zeitreihe.html
  7. 2719
      test/webapps_superx/test_viz/stud_zeitreihe_plot.html

50
src-modules/module/viz/schluesseltabellen/customxmladd.sql
Unescape View File

@ -1,16 +1,5 @@
<#include "MAN_MAKROS"/><sqlvars> <sqlvar name="entries" type="hash">select R.catalogue_id,K.shortname,timeunit,sqlchunk,calcratio,decimalplaces,linksub,linktimeline,R.report_id,R.sortnr, R.sortnr2,R.grouping1,G.caption as group_caption from man_catalogue K,man_catalogue_rpt R left outer join man_grouping G on (G.id=R.grouping1) where K.id=R.catalogue_id and R.active=1 and K.id not in ('Bewerber') order by R.sortnr, R.sortnr2 </sqlvar> <#include "MAN_MAKROS"/><sqlvars> <sqlvar name="entries" type="hash">select R.catalogue_id,K.shortname,timeunit,sqlchunk,calcratio,decimalplaces,linksub,linktimeline,R.report_id,R.sortnr, R.sortnr2,R.grouping1,G.caption as group_caption from man_catalogue K,man_catalogue_rpt R left outer join man_grouping G on (G.id=R.grouping1) where K.id=R.catalogue_id and R.active=1 and K.id not in ('Bewerber') order by R.sortnr, R.sortnr2 </sqlvar>
<sqlvar name="commonChartProperties" type="hash"> <sqlvar name="commonChartProperties" type="hash">
SELECT tid,
caption,
prop_uniquename,
prop_default,
prop_unit
FROM viz_property
where is_generic=1
;
</sqlvar>
<sqlvar name="commonChartProperties" type="hash">
SELECT SELECT
P.tid, P.tid,
P.caption, P.caption,
@ -24,8 +13,8 @@ P.explanation,
P.sortnr, P.sortnr,
P.range_from, P.range_from,
P.range_to, P.range_to,
T.caption as input_type_caption, I.caption as input_type_caption,
T.uniquename as input_type_uniquename, I.uniquename as input_type_uniquename,
G.caption as group_caption, G.caption as group_caption,
G.sortnr as group_sortnr, G.sortnr as group_sortnr,
G.uniquename as group_uniquename, G.uniquename as group_uniquename,
@ -35,12 +24,12 @@ PR.variable_name,
P.prop_value_type, P.prop_value_type,
P.is_generic P.is_generic
FROM viz_property_input_type T, viz_property P left outer join viz_property_group G FROM viz_property_input_type I, viz_property P left outer join viz_property_group G
on (P.property_group_id=G.tid) on (P.property_group_id=G.tid)
left outer join viz_property_group_renderer GR on (GR.property_group_id=G.tid) left outer join viz_property_group_renderer GR on (GR.property_group_id=G.tid)
left outer join viz_renderer R on (R.tid=GR.renderer_id) left outer join viz_renderer R on (R.tid=GR.renderer_id)
left outer join viz_property_renderer PR on (P.tid=PR.property_id) left outer join viz_property_renderer PR on (P.tid=PR.property_id)
where T.tid=P.input_type_id where I.tid=P.input_type_id
--and P.is_generic=1 --and P.is_generic=1
order by G.sortnr,G.uniquename,P.sortnr,P.caption order by G.sortnr,G.uniquename,P.sortnr,P.caption
; ;
@ -70,14 +59,29 @@ order by 3
<sqlvar name="viz_type_properties" type="hash"> <sqlvar name="viz_type_properties" type="hash">
SELECT T.tid, SELECT T.tid,
T.uniquename as viz_type_uniquename, T.uniquename as viz_type_uniquename,
P.prop_uniquename,
P.caption, P.caption,
P.prop_uniquename,
P.prop_default,
P.prop_unit,
P.is_generic,
P.static_values,
P.is_mandatory,
P.explanation,
P.sortnr,
P.range_from,
P.range_to,
I.caption as input_type_caption,
I.uniquename as input_type_uniquename,
G.uniquename as viz_property_group_uniquename, G.uniquename as viz_property_group_uniquename,
TP.is_mandatory, TP.is_mandatory,
TP.sortnr TP.sortnr,
FROM viz_type T, viz_type_property TP, viz_property P, viz_property_group G P.prop_value_type,
P.is_generic
FROM viz_type T, viz_type_property TP, viz_property P,
viz_property_input_type I, viz_property_group G
where T.tid=TP.viz_type_id where T.tid=TP.viz_type_id
and P.tid=TP.viz_property_id and P.tid=TP.viz_property_id
and I.tid=P.input_type_id
and G.tid=P.property_group_id and G.tid=P.property_group_id
order by 2,TP.sortnr,P.caption order by 2,TP.sortnr,P.caption
; ;
@ -163,7 +167,15 @@ order by 3
viz_type_uniquename="${tp.viz_type_uniquename}" viz_type_uniquename="${tp.viz_type_uniquename}"
viz_property_group_uniquename="${tp.viz_property_group_uniquename}" viz_property_group_uniquename="${tp.viz_property_group_uniquename}"
is_mandatory="${tp.is_mandatory}" is_mandatory="${tp.is_mandatory}"
sortnr="${tp.sortnr}" prop_default="${tp.prop_default}"
static_values="${tp.static_values}"
input_type_uniquename="${tp.input_type_uniquename}"
prop_unit="${tp.prop_unit}"
prop_range_from="${tp.range_from}"
prop_range_to="${tp.range_to}"
propValueType="${tp.prop_value_type}"
explanation="${tp.explanation}"
isGeneric="${tp.is_generic}"
/> />
</#foreach> </#foreach>
</#if> </#if>

385
superx/xml/js/viz/viz_functions.js
Unescape View File

@ -16,9 +16,9 @@ function chartModel(id,name,renderer,datasources)
} }
function possibleVizType(nr,value,name,explanation,isDefault ) function possibleVizType(elemID,value,name,explanation,isDefault )
{ {
this.nr=nr; this.elemID=elemID;
this.value=value; this.value=value;
this.name=name; this.name=name;
this.explanation=explanation; this.explanation=explanation;
@ -26,9 +26,9 @@ this.isDefault=isDefault;
} }
function usedVizType(nr,vizTypeUniquename,caption,datasource ) function usedVizType(elemID,vizTypeUniquename,caption,datasource )
{ {
this.nr=nr; this.elemID=elemID;
this.vizTypeUniquename=vizTypeUniquename; this.vizTypeUniquename=vizTypeUniquename;
this.caption=caption; this.caption=caption;
this.datasource=datasource; this.datasource=datasource;
@ -383,7 +383,19 @@ function createChartElementConfig1Form(renderer,elemID)
while (formChartElementConfig1.firstChild) { while (formChartElementConfig1.firstChild) {
formChartElementConfig1.removeChild(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: //First Datasource:
const elementDatasourceDiv=document.createElement("div"); const elementDatasourceDiv=document.createElement("div");
const fieldDatasourceElem = document.createElement("div"); const fieldDatasourceElem = document.createElement("div");
@ -403,10 +415,10 @@ function createChartElementConfig1Form(renderer,elemID)
labelDatasource.appendChild(textnode); labelDatasource.appendChild(textnode);
labelDatasourceElem.appendChild(labelDatasource); labelDatasourceElem.appendChild(labelDatasource);
fieldDatasourceElem.appendChild(labelDatasourceElem); fieldDatasourceElem.appendChild(labelDatasourceElem);
const inpElemId = document.createElement("input"); /*const inpElemId = document.createElement("input");
inpElemId.name="chartElementID"; inpElemId.name="chartElementID";
inpElemId.id="chartElementID"; inpElemId.id="chartElementID";
inpElemId.type="hidden"; inpElemId.type="text";*/
const selDatasourceElem = document.createElement("select"); const selDatasourceElem = document.createElement("select");
@ -418,9 +430,9 @@ function createChartElementConfig1Form(renderer,elemID)
selDatasourceElem.onchange= function () { selDatasourceElem.onchange= function () {
createChartElementsConfig2Form(renderer); createChartElementsConfig2Form(renderer);
}; };
fillSelectOptions(selDatasourceElem,rsTableMetaData,true); fillSelectOptions(selDatasourceElem,rsTableMetaData,true,(myChartElem!=null?myChartElem.datasource:null));
fieldDatasourceElem.appendChild(selDatasourceElem); fieldDatasourceElem.appendChild(selDatasourceElem);
fieldDatasourceElem.appendChild(inpElemId); //fieldDatasourceElem.appendChild(inpElemId);
elementDatasourceDiv.appendChild(fieldDatasourceElem); elementDatasourceDiv.appendChild(fieldDatasourceElem);
formChartElementConfig1.appendChild(elementDatasourceDiv); formChartElementConfig1.appendChild(elementDatasourceDiv);
@ -453,14 +465,17 @@ function createChartElementConfig1Form(renderer,elemID)
selVizTypeElem.onchange= function () { selVizTypeElem.onchange= function () {
createChartElementsConfig2Form(renderer); createChartElementsConfig2Form(renderer);
}; };
fillSelectOptions(selVizTypeElem,getPossibleVizTypes(renderer),false); fillSelectOptions(selVizTypeElem,getPossibleVizTypes(renderer),false,(myChartElem!=null?myChartElem.vizTypeUniquename:null));
fieldVizTypeElem.appendChild(selVizTypeElem); fieldVizTypeElem.appendChild(selVizTypeElem);
elementVizTypeDiv.appendChild(fieldVizTypeElem); elementVizTypeDiv.appendChild(fieldVizTypeElem);
formChartElementConfig1.appendChild(elementVizTypeDiv); formChartElementConfig1.appendChild(elementVizTypeDiv);
//display Element if already saved:
if(elemID!="")
createChartElementsConfig2Form(renderer,elemID);
} }
function createChartElementsConfig2Form(renderer) function createChartElementsConfig2Form(renderer,elemID)
{ {
var dataSource=document.getElementById("chartElementDatasource").value; var dataSource=document.getElementById("chartElementDatasource").value;
var vizType=document.getElementById("chartElementVizType").value; var vizType=document.getElementById("chartElementVizType").value;
@ -469,6 +484,8 @@ function createChartElementsConfig2Form(renderer)
while (formChartElementConfig2Div.firstChild) { while (formChartElementConfig2Div.firstChild) {
formChartElementConfig2Div.removeChild(formChartElementConfig2Div.firstChild); formChartElementConfig2Div.removeChild(formChartElementConfig2Div.firstChild);
} }
//any previous values?
const elementDivBox = document.createElement("div"); const elementDivBox = document.createElement("div");
//first only Dimensions and measures: //first only Dimensions and measures:
@ -479,8 +496,39 @@ function createChartElementsConfig2Form(renderer)
|| vizTypeProperties[k].groupUniquename=="MEASURE" || vizTypeProperties[k].groupUniquename=="MEASURE"
) )
) )
elementDivBox.appendChild(renderDimensionField(vizTypeProperties[k],dataSource)); {
var selectedValue=getChartElementPropertyValue(elemID,vizTypeProperties[k].propUniquename);
elementDivBox.appendChild(renderDimensionField(vizTypeProperties[k],dataSource,selectedValue));
}
}
//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)
{
//var selectedValue=getChartElementPropertyValue(elemID,currentCommonChartProperties[0].propUniquename);
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 saveBtnDiv = document.createElement("div");
const saveBtn = document.createElement("input"); const saveBtn = document.createElement("input");
saveBtn.type="BUTTON"; saveBtn.type="BUTTON";
@ -496,35 +544,60 @@ function createChartElementsConfig2Form(renderer)
formChartElementConfig2Div.appendChild(elementDivBox); formChartElementConfig2Div.appendChild(elementDivBox);
/*columnsDiv.appendChild(columnDiv);
//title }
const columnDivTitle = document.createElement("div"); function getChartElementPropertyValue(elemID,propUniquename)
columnDivTitle.classList.add("column"); {
columnDivTitle.classList.add("is-narrow"); var retVal=null;
const columnDivBoxTitle = document.createElement("div"); var myChartElem=null;
columnDivBoxTitle.classList.add("box"); if(myChartModel.chartElements && elemID !=null)
columnDivBoxTitle.style="width: 500px"; {
for(var k=0;k < myCommonChartProperties.length;k++) var filtered=myChartModel.chartElements.filter(obj => obj.elemID == elemID);
var myChartElem=filtered[0];
if(myChartElem.elementTypeProperties && myChartElem.elementTypeProperties.length)
{ {
if(myCommonChartProperties[k].name=="caption") for(var k=0;k < myChartElem.elementTypeProperties.length;k++)
columnDivBoxTitle.appendChild(renderChartPropertyField(myCommonChartProperties[k])); {
myVizTypeProperty=myChartElem.elementTypeProperties[k];
if(myVizTypeProperty.vizTypePropertyUniquename==propUniquename)
{
retVal=myVizTypeProperty.propertyValue;
}
}
} }
}
columnDivTitle.appendChild(columnDivBoxTitle); return retVal;
columnsDiv.appendChild(columnDivTitle); }
myForm.appendChild(columnsDiv); function loadChartElementConfig(myElem)
*/ {
var elemID=myElem.value;
if(elemID=="")
alert("Kein Grafikelement gefunden");
else
{
var renderer=document.getElementById("fldVizRenderer").value;
var myVizType=myChartModel.chartElements[elemID];
createChartElementConfig1Form(renderer,elemID);
//document.getElementById("chartElementVizType").value=myVizType.vizTypeUniquename;
//document.getElementById("chartElementDatasource").value=myVizType.datasource;
}
} }
function saveChartElementConfig() function saveChartElementConfig()
{ {
var elemID=document.getElementById("chartElementID").value; var elemID=document.getElementById("chartElementID").value;
var vizTypeUniquename=document.getElementById("chartElementVizType").value; var vizTypeUniquename=document.getElementById("chartElementVizType").value;
var datasource=document.getElementById("chartElementDatasource").value; var datasource=document.getElementById("chartElementDatasource").value;
var nextElemID=parseInt(document.getElementById("vizElementCounter").value) +1;
var mode="update";
if(elemID=="") if(elemID=="")
elemID=0; {
//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 myVizType=new usedVizType(elemID,vizTypeUniquename,vizTypeUniquename,datasource); //nr,vizTypeUniquename,caption,datasource
var propertyCounter=0; var propertyCounter=0;
for(var k=0;k < vizTypeProperties.length;k++) for(var k=0;k < vizTypeProperties.length;k++)
@ -533,22 +606,27 @@ function saveChartElementConfig()
&& document.getElementById(vizTypeProperties[k].propUniquename) && document.getElementById(vizTypeProperties[k].propUniquename)
&& document.getElementById(vizTypeProperties[k].propUniquename).value !="") && document.getElementById(vizTypeProperties[k].propUniquename).value !="")
{ {
var myUsedVizTypeProperty=new usedVizTypeProperty(propertyCounter,vizTypeProperties[k].propUniquename, vizTypeProperties[k].caption,document.getElementById(vizTypeProperties[k].propUniquename).value); //))nr,vizTypePropertyUniquename,caption,propertyValue ) var myUsedVizTypeProperty=new usedVizTypeProperty(elemID,vizTypeProperties[k].propUniquename, vizTypeProperties[k].caption,document.getElementById(vizTypeProperties[k].propUniquename).value); //))nr,vizTypePropertyUniquename,caption,propertyValue )
myVizType.elementTypeProperties.push(myUsedVizTypeProperty); myVizType.elementTypeProperties.push(myUsedVizTypeProperty);
} }
} }
//myVizType.elementTypeProperties=null; //myVizType.elementTypeProperties=null;
//TODO: Existenz abfangen, hier wird einfach hinzugefügt: //TODO: Existenz abfangen, hier wird einfach hinzugefügt:
myChartModel.chartElements.push(myVizType); if(mode=="update")
//Reset Elements Form {
elemID++; for(var k=0;k<myChartModel.chartElements.length;k++)
document.getElementById("chartElementID").value=elemID; {
document.getElementById("chartElementVizType").value=""; if(myChartModel.chartElements[k].elemID==elemID)
var formChartElementConfig2Div=document.getElementById("ChartElementConfig2Div"); myChartModel.chartElements[k]=myVizType;
while (formChartElementConfig2Div.firstChild) { }
formChartElementConfig2Div.removeChild(formChartElementConfig2Div.firstChild); }
} else
document.getElementById("vizElementCounter").value=myChartModel.chartElements.length; myChartModel.chartElements.push(myVizType);
const chartElementListSelect=document.getElementById("chartElementID");
chartElementListSelect.style="display:inline;";
fillChartElementListSelect(chartElementListSelect,elemID);
//document.getElementById("vizElementCounter").value=myChartModel.chartElements.length;
renderChart('chartDiv',myChartModel); renderChart('chartDiv',myChartModel);
/*var marksArray=new Array(); /*var marksArray=new Array();
@ -565,22 +643,60 @@ function saveChartElementConfig()
function removeChartElementConfig() function removeChartElementConfig()
{ {
var propertyCounter=myChartModel.chartElements.length; var elemID=document.getElementById("chartElementID").value;
if(propertyCounter>0) if(elemID!="")
{ {
var elemID=myChartModel.chartElements[propertyCounter-1].nr; var renderer=document.getElementById("fldVizRenderer").value;
var filtered=myChartModel.chartElements.filter(obj => obj.elemID != elemID);
/*var filtered=myChartModel.chartElements.filter(obj => obj.nr !== propertyCounter-1); myChartModel.chartElements=filtered;
myChartModel.chartElements=filtered;*/ //myChartModel.chartElements.pop();
myChartModel.chartElements.pop(); //elemID--;
elemID--; //if(document.getElementById("chartElementID"))
if(document.getElementById("chartElementID")) // document.getElementById("chartElementID").value=elemID;
document.getElementById("chartElementID").value=elemID;
document.getElementById("vizElementCounter").value=myChartModel.chartElements.length; document.getElementById("vizElementCounter").value=myChartModel.chartElements.length;
const chartElementListSelect=document.getElementById("chartElementID");
fillChartElementListSelect(chartElementListSelect);
createChartElementConfig1Form(renderer,null);
renderChart('chartDiv',myChartModel); 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) function resetChartPropertiesForm(chosenRenderer)
{ {
myChartModel=new chartModel(1,"",document.getElementById("fldVizRenderer").value,rsTableMetaData); myChartModel=new chartModel(1,"",document.getElementById("fldVizRenderer").value,rsTableMetaData);
@ -621,13 +737,16 @@ function fillDimensionProperty(vizTypeProperty,datasource)
} }
function showChartPropertiesFormDiv(formDiv,formElementsDiv,renderer) function showChartPropertiesFormDiv(formDiv,formElementsDiv,renderer)
{ {
if(myChartModel != null)
{
var myDiv=document.getElementById(formDiv); var myDiv=document.getElementById(formDiv);
switch (formDiv) switch (formDiv)
{ {
case "generalChartPropertiesFormDiv": case "generalChartPropertiesFormDiv":
renderGeneralChartPropertiesForm(formElementsDiv,commonChartProperties,renderer); renderGeneralChartPropertiesForm(formElementsDiv,commonChartProperties,myChartModel.renderer);
break; break;
case "ChartElementDiv": case "ChartElementsDiv":
createChartElementConfig1Form(myChartModel.renderer,null);
break; break;
default: default:
//do nothing //do nothing
@ -639,7 +758,7 @@ function showChartPropertiesFormDiv(formDiv,formElementsDiv,renderer)
myDiv.style.display="none"; myDiv.style.display="none";
else else
myDiv.style.display="block"; myDiv.style.display="block";
}
} }
function showSaveChartFormDiv(formDiv,renderer) function showSaveChartFormDiv(formDiv,renderer)
@ -1012,7 +1131,7 @@ function fillSelectionResult(selectionRsMetaData)
} }
function renderDimensionField(vizTypeProperty,datasource) function renderDimensionField(vizTypeProperty,datasource,selectedValue)
{ {
const fieldElem = document.createElement("div"); const fieldElem = document.createElement("div");
fieldElem.classList.add("field"); fieldElem.classList.add("field");
@ -1047,7 +1166,7 @@ function renderDimensionField(vizTypeProperty,datasource)
renderChart('chartDiv'); renderChart('chartDiv');
};*/ };*/
var dimensionProperty=fillDimensionProperty(vizTypeProperty,datasource); var dimensionProperty=fillDimensionProperty(vizTypeProperty,datasource);
fillSelectOptions(selElem,dimensionProperty.getValueResultset(),dimensionProperty.isMandatory); fillSelectOptions(selElem,dimensionProperty.getValueResultset(),dimensionProperty.isMandatory,selectedValue);
inputSelectElem.appendChild(selElem); inputSelectElem.appendChild(selElem);
inputFieldElem.appendChild(inputSelectElem); inputFieldElem.appendChild(inputSelectElem);
fieldElem.appendChild(inputFieldElem); fieldElem.appendChild(inputFieldElem);
@ -1071,7 +1190,7 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render
if(groupUniquename!="" if(groupUniquename!=""
&& groupUniquename != previousGroup && groupUniquename != previousGroup
&& myCommonChartProperties[k].groupVariableName !="" && myCommonChartProperties[k].groupVariableName !=""
&& isChartPropertyValidForChartelements(myCommonChartProperties[k]) //&& isChartPropertyValidForChartelements(myCommonChartProperties[k])
) )
{ {
var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,""); var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,"");
@ -1086,7 +1205,7 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render
const columnGroupDiv = document.createElement("div"); const columnGroupDiv = document.createElement("div");
columnGroupDiv.id=commonChartPropertyGroups[i].groupUniquename; columnGroupDiv.id=commonChartPropertyGroups[i].groupUniquename;
columnGroupDiv.classList.add("box"); columnGroupDiv.classList.add("block");
const columnGroupHeaderDiv = document.createElement("div"); const columnGroupHeaderDiv = document.createElement("div");
const colHeader = document.createTextNode(commonChartPropertyGroups[i].caption); const colHeader = document.createTextNode(commonChartPropertyGroups[i].caption);
@ -1117,33 +1236,20 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render
{ {
if(myCommonChartProperties[k].groupUniquename==commonChartPropertyGroups[i].groupUniquename if(myCommonChartProperties[k].groupUniquename==commonChartPropertyGroups[i].groupUniquename
&& myCommonChartProperties[k].variableName!="" && myCommonChartProperties[k].variableName!=""
&& isChartPropertyValidForChartelements(myCommonChartProperties[k])) //&& isChartPropertyValidForChartelements(myCommonChartProperties[k])
columnGroupBodyDiv.appendChild(renderChartPropertyField(myCommonChartProperties[k])); )
columnGroupBodyDiv.appendChild(renderChartPropertyField(null,myCommonChartProperties[k],true));
} }
columnGroupDiv.appendChild(columnGroupBodyDiv); columnGroupDiv.appendChild(columnGroupBodyDiv);
columnDiv.appendChild(columnGroupDiv); columnDiv.appendChild(columnGroupDiv);
} }
myForm.appendChild(columnDiv); myForm.appendChild(columnDiv);
/*alte Liste flach:
const divBox = document.createElement("div");
for(var k=0;k < myCommonChartProperties.length;k++)
{
if((myCommonChartProperties[k].groupVariableName=="layout"
|| myCommonChartProperties[k].groupVariableName=="style"
|| myCommonChartProperties[k].groupVariableName=="x"
|| myCommonChartProperties[k].groupVariableName=="y"
|| myCommonChartProperties[k].groupVariableName=="color"
)
&& myCommonChartProperties[k].rendererUniquename==renderer)
divBox.appendChild(renderChartPropertyField(myCommonChartProperties[k]));
}
myForm.appendChild(divBox);
*/
} }
function isChartPropertyValidForChartelements(prop) function isChartPropertyValidForChartelements(prop)
{ {
var propValid=false; var propValid=false;
@ -1175,15 +1281,24 @@ function toggleGroupBodyDiv(groupBodyDiv)
} }
function renderChartPropertyField(commonChartProperty) function renderChartPropertyField(elemID,chartProperty,isCommon)
{ {
//Wenn im chartModel schon ein Wert vorhanden ist, wird er vorbelegt: if(commonChartProperty) //Wenn im chartModel schon ein Wert vorhanden ist, wird er vorbelegt: if(chartProperty)
var propValue=""; var propValue="";
if(myChartModel && myChartModel.chartPropertiesUsed.length>0) if(myChartModel && isCommon && myChartModel.chartPropertiesUsed.length>0)
{ {
propValue=getCommonChartPropertyFromModel(myChartModel.chartPropertiesUsed,commonChartProperty.name ); 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"); const fieldElem = document.createElement("div");
fieldElem.classList.add("field"); fieldElem.classList.add("field");
fieldElem.classList.add("is-grouped"); fieldElem.classList.add("is-grouped");
@ -1195,31 +1310,31 @@ function renderChartPropertyField(commonChartProperty)
label.classList.add("is-required"); label.classList.add("is-required");
label.classList.add("is-small"); label.classList.add("is-small");
label.classList.add("has-tooltip-right"); label.classList.add("has-tooltip-right");
label.setAttribute("data-tooltip",commonChartProperty.explanation); label.setAttribute("data-tooltip",chartProperty.explanation);
const textnode = document.createTextNode(commonChartProperty.caption); const textnode = document.createTextNode(chartProperty.caption);
label.appendChild(textnode); label.appendChild(textnode);
labelElem.appendChild(label); labelElem.appendChild(label);
fieldElem.appendChild(labelElem); fieldElem.appendChild(labelElem);
//input: //input:
const inputControlElem = document.createElement("div");
inputControlElem.classList.add("control-new");
const inputFieldElem = document.createElement("div"); const inputFieldElem = document.createElement("div");
inputFieldElem.classList.add("field"); inputFieldElem.classList.add("field");
const inputParaElem = document.createElement("p");
inputParaElem.classList.add("control-new");
const inputElem = document.createElement("div"); const inputElem = document.createElement("div");
inputElem.classList.add("is-small"); inputElem.classList.add("is-small");
//inputElem.classList.add("is-fullwidth"); //inputElem.classList.add("is-fullwidth");
switch (commonChartProperty.inputType) { switch (chartProperty.inputType) {
case "SELECT": case "SELECT":
//select input: //select input:
inputElem.classList.add("select"); inputElem.classList.add("select");
inputElem.classList.add("is-small"); inputElem.classList.add("is-small");
const selElem = document.createElement("select"); const selElem = document.createElement("select");
selElem.name=commonChartProperty.name; selElem.name=chartProperty.name;
selElem.id=commonChartProperty.name; selElem.id=chartProperty.name;
//selElem.style="width:50px"; //selElem.style="width:50px";
if(commonChartProperty.variableName=="") if(chartProperty.variableName=="")
{ {
selElem.disabled="disabled"; selElem.disabled="disabled";
selElem.readonly="readonly"; selElem.readonly="readonly";
@ -1229,10 +1344,10 @@ function renderChartPropertyField(commonChartProperty)
updateChartModel(); updateChartModel();
renderChart('chartDiv',myChartModel); renderChart('chartDiv',myChartModel);
}; };
fillSelectOptions(selElem,commonChartProperty.getValueResultset(),commonChartProperty.isMandatory); fillSelectOptions(selElem,chartProperty.getValueResultset(),chartProperty.isMandatory,propValue);
selElem.value= (propValue=="")?commonChartProperty.defaultValue:propValue; selElem.value= (propValue=="")?chartProperty.defaultValue:propValue;
inputElem.appendChild(selElem); inputElem.appendChild(selElem);
inputParaElem.appendChild(inputElem); inputFieldElem.appendChild(inputElem);
break; break;
case "TEXTAREA": case "TEXTAREA":
@ -1240,20 +1355,20 @@ function renderChartPropertyField(commonChartProperty)
const textAreaElem = document.createElement("textarea"); const textAreaElem = document.createElement("textarea");
textAreaElem.cols="20"; textAreaElem.cols="20";
textAreaElem.rows=3; textAreaElem.rows=3;
if(commonChartProperty.variableName=="") if(chartProperty.variableName=="")
{ {
textAreaElem.disabled="disabled"; textAreaElem.disabled="disabled";
textAreaElem.readonly="readonly"; textAreaElem.readonly="readonly";
} }
textAreaElem.name=commonChartProperty.name; textAreaElem.name=chartProperty.name;
textAreaElem.id=commonChartProperty.name; textAreaElem.id=chartProperty.name;
textAreaElem.value= (propValue=="")?commonChartProperty.defaultValue:propValue; textAreaElem.value= (propValue=="")?chartProperty.defaultValue:propValue;
textAreaElem.onchange= function () { textAreaElem.onchange= function () {
updateChartModel(); updateChartModel();
renderChart('chartDiv',myChartModel); renderChart('chartDiv',myChartModel);
}; };
inputElem.appendChild(textAreaElem); inputElem.appendChild(textAreaElem);
inputParaElem.appendChild(inputElem); inputFieldElem.appendChild(inputElem);
break; break;
case "RANGE": case "RANGE":
@ -1262,7 +1377,7 @@ function renderChartPropertyField(commonChartProperty)
const rangeElem = document.createElement("input"); const rangeElem = document.createElement("input");
rangeElem.type="NUMBER"; rangeElem.type="NUMBER";
rangeElem.size=5; rangeElem.size=5;
if(commonChartProperty.variableName=="") if(chartProperty.variableName=="")
{ {
rangeElem.disabled="disabled"; rangeElem.disabled="disabled";
rangeElem.readonly="readonly"; rangeElem.readonly="readonly";
@ -1270,58 +1385,58 @@ function renderChartPropertyField(commonChartProperty)
/* klappt noch nicht: /* klappt noch nicht:
rangeElem.type="RANGE"; rangeElem.type="RANGE";
rangeElem.min=commonChartProperty.range_from; rangeElem.min=chartProperty.range_from;
rangeElem.max=commonChartProperty.range_to; rangeElem.max=chartProperty.range_to;
rangeElem.step=50; rangeElem.step=50;
*/ */
rangeElem.name=commonChartProperty.name; rangeElem.name=chartProperty.name;
rangeElem.id=commonChartProperty.name; rangeElem.id=chartProperty.name;
rangeElem.value= (propValue=="")?commonChartProperty.defaultValue:propValue; rangeElem.value= (propValue=="")?chartProperty.defaultValue:propValue;
rangeElem.onchange= function () { rangeElem.onchange= function () {
updateChartModel(); updateChartModel();
renderChart('chartDiv',myChartModel); renderChart('chartDiv',myChartModel);
}; };
inputElem.appendChild(rangeElem); inputElem.appendChild(rangeElem);
inputParaElem.appendChild(inputElem); inputFieldElem.appendChild(inputElem);
break; break;
default: default:
//Einfaches Texteingabefeld: //Einfaches Texteingabefeld:
const inpElem = document.createElement("input"); const inpElem = document.createElement("input");
inpElem.type="TEXT"; inpElem.type="TEXT";
if(commonChartProperty.propValueType=="integer") if(chartProperty.propValueType=="integer")
inpElem.type="NUMBER"; inpElem.type="NUMBER";
if(commonChartProperty.inputType=="COLOR") if(chartProperty.inputType=="COLOR")
inpElem.type="color"; inpElem.type="color";
inpElem.size=5; inpElem.size=5;
if(commonChartProperty.variableName=="") if(chartProperty.variableName=="")
{ {
inpElem.disabled="disabled"; inpElem.disabled="disabled";
inpElem.readonly="readonly"; inpElem.readonly="readonly";
} }
inpElem.name=commonChartProperty.name; inpElem.name=chartProperty.name;
inpElem.id=commonChartProperty.name; inpElem.id=chartProperty.name;
inpElem.value= (propValue=="")?commonChartProperty.defaultValue:propValue; inpElem.value= (propValue=="")?chartProperty.defaultValue:propValue;
inpElem.onchange= function () { inpElem.onchange= function () {
updateChartModel(); updateChartModel();
renderChart('chartDiv',myChartModel); renderChart('chartDiv',myChartModel);
}; };
inputElem.appendChild(inpElem); inputElem.appendChild(inpElem);
inputParaElem.appendChild(inputElem); inputFieldElem.appendChild(inputElem);
break; break;
} }
inputFieldElem.appendChild(inputParaElem); inputControlElem.appendChild(inputFieldElem);
fieldElem.appendChild(inputFieldElem); fieldElem.appendChild(inputControlElem);
return fieldElem; return fieldElem;
} }
function fillSelectOptions(myCombo,myValues,isMandatory) function fillSelectOptions(myCombo,myValues,isMandatory,selectedValue)
{ {
var optionCounter=0; var optionCounter=0;
var selectedOption=null; var selectedOption=null;
@ -1339,8 +1454,10 @@ if(!isMandatory)
} }
for(var j=0;j < myValues.length;j++) for(var j=0;j < myValues.length;j++)
{ {
if(myValues[j].isDefault) if(myValues[j].value==selectedValue)
selectedOption=optionCounter; selectedOption=j+(isMandatory?0:1);
if(selectedOption==null && myValues[j].isDefault)
selectedOption=j+(isMandatory?0:1);
var o=new Option(myValues[j].name,myValues[j].value,null,null); var o=new Option(myValues[j].name,myValues[j].value,null,null);
myCombo.options[optionCounter]=o; myCombo.options[optionCounter]=o;
@ -1684,8 +1801,8 @@ function renderChartElementWithD3(currentChartModel,chartElemNr,targetDiv)
// append the svg canvas to the page // append the svg canvas to the page
var margin = { top: 10, right: 10, bottom: 10, left: 10 }, var margin = { top: 10, right: 10, bottom: 10, left: 10 },
//var margin = { top: 0, right: 50, bottom: 0, left: 0 }, //var margin = { top: 0, right: 50, bottom: 0, left: 0 },
width = getCommonChartPropertyFromModel(currentChartModel.chartPropertiesUsed,"width") - margin.left - margin.right, width = getChartPropertyFromModel(currentChartModel.chartPropertiesUsed,"width") - margin.left - margin.right,
height = getCommonChartPropertyFromModel(currentChartModel.chartPropertiesUsed,"height") - margin.top - margin.bottom; height = getChartPropertyFromModel(currentChartModel.chartPropertiesUsed,"height") - margin.top - margin.bottom;
var clearCanvas=document.getElementById(targetDiv); var clearCanvas=document.getElementById(targetDiv);
while (clearCanvas.firstChild) { while (clearCanvas.firstChild) {
@ -2086,17 +2203,20 @@ function getChartPropertyValue(propArray,propName)
} }
return propertyValue; return propertyValue;
} }
function getCommonChartPropertyFromModel(myCommonChartProperties,name) function getChartPropertyFromModel(myChartProperties,name,isCommon)
{ {
var propertyValue=""; var propertyValue="";
if(myCommonChartProperties && myCommonChartProperties.length>0) if(myChartProperties && myChartProperties.length>0)
{ {
let prop = myCommonChartProperties.find(o => o.name === name); let prop = myChartProperties.find(o => o.name === name);
if(!prop)
prop = myChartProperties.find(o => o.vizTypePropertyUniquename == name);
if(prop) if(prop)
propertyValue=prop.propertyValue; propertyValue=prop.propertyValue;
} }
//if no value is set from model, retrieve the default value: //if no value is set from model, retrieve the default value:
if(propertyValue=="") if(propertyValue=="" && isCommon)
propertyValue=getCommonChartProperty(name); propertyValue=getCommonChartProperty(name);
@ -2247,13 +2367,14 @@ if(myJsonString!="")
if(myChartModel) if(myChartModel)
{ {
document.getElementById("vizElementCounter").value=myChartModel.chartElements.length; document.getElementById("vizElementCounter").value=myChartModel.chartElements.length;
renderChart(chartDiv,myChartModel) renderChart(chartDiv,myChartModel);
fillChartElementListSelect(document.getElementById("chartElementID"),null);
} }
} }
}
}
function copySrcCode(mydiv) function copySrcCode(mydiv)
{ {
var ergtabelle=document.getElementById(mydiv); var ergtabelle=document.getElementById(mydiv);
@ -2402,7 +2523,7 @@ for (let i = 1; i < 4; i++) {
function makeWorldmapD3(myCommonChartProperties,mySvg,data,metaData,chartElem) function makeWorldmapD3(myCommonChartProperties,mySvg,data,metaData,chartElem)
{ {
// load the data // load the data
var captionEmptyTarget=getCommonChartPropertyFromModel(myCommonChartProperties,"null_value_mask"); var captionEmptyTarget=getChartPropertyFromModel(myCommonChartProperties,"null_value_mask");
renderWorldMap(myCommonChartProperties,mySvg,data); renderWorldMap(myCommonChartProperties,mySvg,data);
} }
@ -2484,7 +2605,7 @@ return myData;
function makeSankeyD3(myCommonChartProperties,mySvg,data,metaData,chartElem) function makeSankeyD3(myCommonChartProperties,mySvg,data,metaData,chartElem)
{ {
// load the data // load the data
var captionEmptyTarget=getCommonChartPropertyFromModel(myCommonChartProperties,"null_value_mask"); var captionEmptyTarget=getChartPropertyFromModel(myCommonChartProperties,"null_value_mask");
if(captionEmptyTarget=="") if(captionEmptyTarget=="")
captionEmptyTarget="Leer"; captionEmptyTarget="Leer";
var sNodes=getSankeyNodes(data,captionEmptyTarget); //graph.nodes; var sNodes=getSankeyNodes(data,captionEmptyTarget); //graph.nodes;
@ -2602,19 +2723,19 @@ function renderSankey(myCommonChartProperties,svg,sNodes,sLinks)
// set the dimensions and margins of the graph // set the dimensions and margins of the graph
var margin = { top: 10, right: 10, bottom: 10, left: 10 }, var margin = { top: 10, right: 10, bottom: 10, left: 10 },
//var margin = { top: 0, right: 50, bottom: 0, left: 0 }, //var margin = { top: 0, right: 50, bottom: 0, left: 0 },
width = getCommonChartPropertyFromModel(myCommonChartProperties,"width") - margin.left - margin.right, width = getChartPropertyFromModel(myCommonChartProperties,"width") - margin.left - margin.right,
height = getCommonChartPropertyFromModel(myCommonChartProperties,"height") - margin.top - margin.bottom; height = getChartPropertyFromModel(myCommonChartProperties,"height") - margin.top - margin.bottom;
// format variables // format variables
var formatNumber = d3.format(",.0f"), // zero decimal places var formatNumber = d3.format(",.0f"), // zero decimal places
format = function (d) { return formatNumber(d); }, format = function (d) { return formatNumber(d); },
color = d3.scaleOrdinal().range(["#002060ff", "#164490ff", "#4d75bcff", "#98b3e6ff", "#d5e2feff", "#008cb0ff"]); color = d3.scaleOrdinal().range(["#002060ff", "#164490ff", "#4d75bcff", "#98b3e6ff", "#d5e2feff", "#008cb0ff"]);
var textColor=getCommonChartPropertyFromModel(myCommonChartProperties,"color"); var textColor=getChartPropertyFromModel(myCommonChartProperties,"color");
if(textColor=="") if(textColor=="")
textColor="#3f3f3f"; textColor="#3f3f3f";
var fontSize=getCommonChartPropertyFromModel(myCommonChartProperties,"fontSize"); var fontSize=getChartPropertyFromModel(myCommonChartProperties,"fontSize");
if(fontSize=="") if(fontSize=="")
fontSize="12pt"; fontSize="12pt";
var fontFamily=getCommonChartPropertyFromModel(myCommonChartProperties,"fontFamily"); var fontFamily=getChartPropertyFromModel(myCommonChartProperties,"fontFamily");
if(fontFamily=="") if(fontFamily=="")
fontFamily="sans-serif"; fontFamily="sans-serif";
// append the svg object to the body of the page // append the svg object to the body of the page

99
superx/xml/viz_components.xsl
Unescape View File

@ -533,4 +533,103 @@ and (@renderer_uniquename='plot' or @renderer_uniquename='d3js') ]">
<script language="Javascript" type="text/javascript" src="{@srcpath}" /> <script language="Javascript" type="text/javascript" src="{@srcpath}" />
</xsl:for-each> </xsl:for-each>
</xsl:template> </xsl:template>
<xsl:template name="modalCards" >
<xsl:for-each select="/ergebnisse">
<xsl:for-each select="ergebnis/ergebniselement">
<xsl:variable name="chart_id"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
<xsl:variable name="ergebniselement_ordnr"><xsl:value-of select="@ordnr" /></xsl:variable>
<xsl:if test="$chart_id != ''">
<div class="modal modal-fx-3dSlit" id="{concat('modalCard',$ergebniselement_ordnr)}">
<div class="modal-background"></div>
<div class="modal-content is-huge is-image">
<!-- content -->
<div class="modal-content">
<div class="box" style="text-align:right">
<a href="{concat('javascript:closeModalImage(',$ergebniselement_ordnr,');')}">
<span class="button is-black is-outlined"> X </span>
</a>
</div>
<div class="box">
<div id="{concat('modalCardImage',$ergebniselement_ordnr)}">
Picture placeholder
</div>
</div>
</div>
</div>
</div>
<div class="modal modal-fx-3dSlit" id="{concat('modalCardDetail',$ergebniselement_ordnr)}">
<div class="modal-background"></div>
<div class="modal-content is-tiny">
<div class="box" style="text-align:right">
<h4><xsl:value-of select="viz_charts/viz_chart[@tid=$chart_id]/@caption"/></h4>
<a href="{concat('javascript:closeModalCardDetail(',$ergebniselement_ordnr,');')}">
<span class="button is-black is-outlined"> X </span>
</a>
</div>
<!-- content -->
<div class="card">
<div class="card-image">
<div id="{concat('modalCardDetailImage',$ergebniselement_ordnr)}">
Picture placeholder
</div>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p><xsl:value-of select="viz_charts/viz_chart[@tid=$chart_id]/@description"/></p>
<p class="legende">
<xsl:for-each select="../felder/feld">
<xsl:if test="(value !='' or sicht/@isFirstInGroup='false' or @isstandtoday='false') and @varname != 'sort' and @varname != 'maxoffset' and value_caption != ''">
<span class="feldname">
<xsl:choose>
<xsl:when test="string-length(caption_short) &gt; 0 and caption_short != 'null'" >
<![CDATA[]]><xsl:value-of select="caption_short" /><![CDATA[]]>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="@varname" />
</xsl:otherwise>
</xsl:choose></span>:&#160;
<xsl:if test="string-length(value_caption) &lt; 50">
<span class="feldwert"><xsl:value-of select="value_caption" /><![CDATA[]]></span>
</xsl:if>
<xsl:if test="string-length(value_caption) &gt; 49">
<span class="feldwert"><![CDATA[]]><xsl:value-of select="substring(value_caption,0,50)" /><![CDATA[]]>...</span>
</xsl:if>
<xsl:if test="sicht!=''">
<span><![CDATA[ (]]><xsl:value-of select="sicht" />
<xsl:if test="@stand!=''"><xsl:text> - Stand:</xsl:text><xsl:value-of select="@stand"/></xsl:if>
<xsl:text><![CDATA[)]]> </xsl:text></span>
</xsl:if>
;
</xsl:if>
</xsl:for-each>
User: <xsl:value-of select="/ergebnisse/user"/>&#160;
Stand: <xsl:value-of select="../stand" /></p>
<xsl:if test="../hinweis != ''">
<xsl:call-template name="newline_to_br">
<xsl:with-param name="string" select="../hinweis" />
</xsl:call-template>
</xsl:if>
</div>
<p align="right"><a href="{concat('javascript:closeModalCardDetail(',$ergebniselement_ordnr,');')}">
<span class="button is-black is-outlined"> X </span>
</a></p>
</div>
</div>
</div>
</div>
</div>
</xsl:if>
</xsl:for-each>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet> </xsl:stylesheet>

143
superx/xml/viz_html_chart.xsl
Unescape View File

@ -1,72 +1,89 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" <xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util.HtmlUtils"> xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util.HtmlUtils">
<xsl:import href="xsl_functions.xsl" />
<xsl:import href="resultset_html.xsl" /> <xsl:import href="resultset_html.xsl" />
<xsl:import href="interLinks_html.xsl" /> <xsl:import href="interLinks_html.xsl" />
<xsl:import href="nd_templates.xsl" />
<xsl:import href="pageComponents_html.xsl" /> <xsl:import href="pageComponents_html.xsl" />
<xsl:import href="pageComponents_html_final.xsl" />
<xsl:import href="menue_html_dojo.xsl" />
<xsl:import href="viz_components.xsl" /> <xsl:import href="viz_components.xsl" />
<!--In diesem Stylesheet können Sie individuelle templates unterbringen, <!--In diesem Stylesheet können Sie individuelle templates unterbringen,
die in ihrer Präzedenz das normale Stylesheet die in ihrer Präzedenz das normale Stylesheet
pageComponents_html.xsl überragt. --> pageComponents_html.xsl überragt. -->
<xsl:import href="pageComponents_html_final.xsl" /> <xsl:import href="pageComponents_html_final.xsl" />
<xsl:decimal-format name="German" grouping-separator="." NaN="" zero-digit ="0" decimal-separator="," /> <xsl:decimal-format name="German" grouping-separator="." NaN="" zero-digit ="0" decimal-separator="," />
<!-- wichtig für DOJO!--> <!-- wichtig für DOJO!-->
<xsl:output method="xml" media-type="text/html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" <xsl:output method="xml" media-type="text/html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="DTD/xhtml1-strict.dtd" cdata-section-elements="script style" indent="yes" encoding="UTF-8"/> doctype-system="DTD/xhtml1-strict.dtd" cdata-section-elements="script style" indent="yes" encoding="UTF-8"/>
<xsl:variable name="colon"><xsl:text>'</xsl:text></xsl:variable>
<xsl:variable name="defaultRenderer" select="'plot'" /> <xsl:variable name="defaultRenderer" select="'plot'" />
<xsl:variable name="availableRendererPlot" select="'true'" /> <xsl:variable name="availableRendererPlot" select="'true'" />
<xsl:variable name="availableRendererD3" select="'true'" /> <xsl:variable name="availableRendererD3" select="'true'" />
<xsl:template match="/">
<xsl:call-template name="table"/>
</xsl:template>
<!-- start table main--> <xsl:template match="/">
<xsl:template name="table"> <xsl:variable name="maskenname">
<html> <xsl:choose>
<xsl:choose> <xsl:when test="/ergebnisse/@isMakro='true'">
<xsl:when test="/ergebnisse/@hisinone_active='true'"> <xsl:value-of select="/ergebnisse/makro/name" />
<xsl:call-template name="head_hisinone_viz" ><xsl:with-param name="title" select="concat('Ergebnis ',/ergebnisse/ergebnis[ position()=1]/maskenname)" /></xsl:call-template>
</xsl:when> </xsl:when>
<xsl:otherwise> <xsl:otherwise>
<xsl:call-template name="head_superx_viz" ><xsl:with-param name="title" select="concat('Ergebnis ',/ergebnisse/ergebnis[ position()=1]/maskenname)" /></xsl:call-template> <xsl:value-of select="/ergebnisse/ergebnis/maskenname" />
</xsl:otherwise> </xsl:otherwise>
</xsl:choose> </xsl:choose>
</xsl:variable>
<html>
<head>
<xsl:call-template name="nd_htmlhead">
<xsl:with-param name="title" select="concat('Tabelle ',$maskenname)" />
</xsl:call-template>
<link rel="stylesheet" href="../style/sx_tabelle.css" />
<!--<link rel="stylesheet" href="../style/superx.css" />-->
</head>
<xsl:call-template name="nd_htmlscript" />
<xsl:call-template name="nd_tableJavascript" />
<xsl:call-template name="nd_tableCSS" />
<xsl:call-template name="tableJavascript_viz"></xsl:call-template> <xsl:call-template name="tableJavascript_viz"></xsl:call-template>
<!-- start Body--> <body class="has-navbar-fixed-top" onload="document.getElementById('progressbar').style.display='none';tableonload();initThemenbaumJs();">
<body onload="document.getElementById('progressbar').style.display='none';"> <!-- tableonload definiert in pageComponents.pccustomize position table_post_javascript --> <!--#Template Beginn Top-Navigation-->
<div id="progressbar" style="position:absolute; width:150px; height:150px; left:200px; top:200px; background:#AAAAAA"> <xsl:call-template name="nd_navi_top" />
<p>&#160;<b>Laden...</b><br/><img src="../images/progress_bar.gif"></img><br/></p></div> <!--#Template Ende Top-Navigation-->
<xsl:if test="/ergebnisse/@showNavigation='true'"> <div class="columns">
<xsl:for-each select="/ergebnisse/menue">
<xsl:call-template name="menuFrame" /> <!--#Template Beginn Navigations-Panel Auswertungen-->
</xsl:for-each> <xsl:if test="/ergebnisse/@showNavigation='true' and 1=0"><!-- erstmal kein Panel,weil der Asssistent schon recht breit ist -->
</xsl:if> <xsl:for-each select="/ergebnisse">
<div> <xsl:call-template name="nd_navi_panel" />
<xsl:if test="/ergebnisse/@showNavigation='true'"> </xsl:for-each>
<xsl:attribute name="class"><xsl:text>page-wrap</xsl:text></xsl:attribute>
<xsl:for-each select="/ergebnisse/menue">
<xsl:call-template name="topbar_menue" />
</xsl:for-each>
</xsl:if> </xsl:if>
<!--#Template Ende Navigations-Panel Auswertungen-->
<!--Beginn Seitentitel, Krümelpfad, Knopfleiste, Legende, Erläuterung-->
<section class="hero-body">
<div class="container">
<div class="columns is-mobile is-left">
<div class="column is-full">
<div class="card ">
<div class="card-content">
<xsl:call-template name="nd_progressbar" />
<div>
<xsl:if test="/ergebnisse/@showNavigation='true'">
<xsl:attribute name="id"><xsl:text>wrapper</xsl:text></xsl:attribute>
</xsl:if>
<xsl:call-template name="viz_canvas"/> <xsl:call-template name="viz_canvas"/>
<xsl:call-template name="bottombar" /> <xsl:call-template name="bottombar" />
<xsl:comment>customfooter</xsl:comment> <xsl:comment>customfooter</xsl:comment>
</div> </div> <!--Ende content -->
</div> </div> <!--Ende card-content-->
<xsl:call-template name="footer" /> </div> <!--Ende card-background -->
</div> <!--Ende column-->
</div> <!--Ende hero-columns-->
</section> <!--Ende hero = Berichts-Card-->
</div> <!--Ende site-columns-->
</body> </body>
<!-- end body --> <!-- end body -->
</html> </html>
@ -350,6 +367,27 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<!-- Beginn Grafikelemente+ Vorschau--> <!-- Beginn Grafikelemente+ Vorschau-->
<div class="columns"> <div class="columns">
<div class="column is-four-fifth"> <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 --> <!-- Box Grafikelemente -->
<div class="field is-grouped"> <div class="field is-grouped">
<div class="label-container"> <div class="label-container">
@ -370,18 +408,23 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<div class="field is-grouped"> <div class="field is-grouped">
<div class="label-container"> <div class="label-container">
<label class="label is-required is-small">Grafikelemente-Set</label> <label class="label is-required is-small">Grafikelement</label>
</div> </div>
<div class="select is-small"><select class="select is-small" id="chartElementID" name="chartElementID"
onchange="loadChartElementConfig(this);">
<option></option>
</select></div>
<!--<div id="ChartElementListDiv"></div>--> <!--<div id="ChartElementListDiv"></div>-->
<div id="ChartElementListFooterDiv"><!--Elemente:--> <input class="is-small" type="text" size="1" name="vizElementCounter" id="vizElementCounter" value="0" readonly="readonly" style="background-color:#cccccc;"/> <div id="ChartElementListFooterDiv"><!--Elemente:--> <input class="is-small" type="hidden" size="1" name="vizElementCounter" id="vizElementCounter" value="0" readonly="readonly" style="background-color:#cccccc;"/>
<a onClick="createChartElementConfig1Form(document.getElementById('fldVizRenderer').value,null)"> <a onClick="createChartElementConfig1Form(document.getElementById('fldVizRenderer').value,null)">
<img src="../images/plus-circled.svg" width="12" height="12" title="Neues Element anlegen" /> <img src="../images/plus-circled.svg" width="12" height="12" title="Neues Element anlegen" />
</a> </a>
<span class="separator">&#160;</span> <span class="separator">&#160;</span>
<a onClick="removeChartElementConfig()"> <a onClick="removeChartElementConfig()">
<img src="../images/minus-circled.svg" width="12" height="12" title="Letztes Element entfernen" /> <img src="../images/minus-circled.svg" width="12" height="12" title="Ausgewähltes Element entfernen" />
</a> </a>
</div> </div>
</div> </div>
@ -389,25 +432,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<div id="ChartElementConfig1Div"> </div> <div id="ChartElementConfig1Div"> </div>
<div id="ChartElementConfig2Div"> </div> <div id="ChartElementConfig2Div"> </div>
</div> <!--Ende Grafikelemente--> </div> <!--Ende Grafikelemente-->
<!--Beginn Layoutmerkmale-->
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>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" style="display:none">
<div id="generalChartPropertiesFormElementsDiv"> </div>
</div>
<!--Beginn Quellcode--> <!--Beginn Quellcode-->
<div class="field is-grouped"> <div class="field is-grouped">

329
superx/xml/viz_html_chart_viewer.xsl
Unescape View File

@ -1,143 +1,104 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" <xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util.HtmlUtils"> xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util.HtmlUtils">
<xsl:import href="xsl_functions.xsl" />
<xsl:import href="resultset_html.xsl" /> <xsl:import href="resultset_html.xsl" />
<xsl:import href="interLinks_html.xsl" /> <xsl:import href="interLinks_html.xsl" />
<xsl:import href="nd_templates.xsl" />
<xsl:import href="pageComponents_html.xsl" /> <xsl:import href="pageComponents_html.xsl" />
<xsl:import href="viz_html_chart.xsl" />
<xsl:import href="viz_components.xsl" /> <xsl:import href="viz_components.xsl" />
<xsl:import href="menue_html_dojo.xsl" />
<!--In diesem Stylesheet können Sie individuelle templates unterbringen, <!--In diesem Stylesheet können Sie individuelle templates unterbringen,
die in ihrer Präzedenz das normale Stylesheet die in ihrer Präzedenz das normale Stylesheet
pageComponents_html.xsl überragt. --> pageComponents_html.xsl überragt. -->
<xsl:import href="pageComponents_html_final.xsl" /> <xsl:import href="pageComponents_html_final.xsl" />
<xsl:decimal-format name="German" grouping-separator="." NaN="" zero-digit ="0" decimal-separator="," /> <xsl:decimal-format name="German" grouping-separator="." NaN="" zero-digit ="0" decimal-separator="," />
<!-- wichtig für DOJO!--> <!-- wichtig für DOJO!-->
<xsl:output method="xml" media-type="text/html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" <xsl:output method="xml" media-type="text/html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="DTD/xhtml1-strict.dtd" cdata-section-elements="script style" indent="yes" encoding="UTF-8"/> doctype-system="DTD/xhtml1-strict.dtd" cdata-section-elements="script style" indent="yes" encoding="UTF-8"/>
<xsl:variable name="defaultRenderer" select="'d3js'" />
<xsl:variable name="availableRendererPlot" select="'false'" /> <xsl:variable name="colon"><xsl:text>'</xsl:text></xsl:variable>
<xsl:variable name="quote"><xsl:text>"</xsl:text></xsl:variable>
<xsl:variable name="defaultRenderer" select="'plot'" />
<xsl:variable name="availableRendererPlot" select="'true'" />
<xsl:variable name="availableRendererD3" select="'true'" /> <xsl:variable name="availableRendererD3" select="'true'" />
<xsl:template match="/"> <xsl:template match="/">
<xsl:call-template name="table"/> <xsl:variable name="maskenname">
</xsl:template> <xsl:choose>
<!-- start table main--> <xsl:when test="/ergebnisse/@isMakro='true'">
<xsl:template name="table"> <xsl:value-of select="/ergebnisse/makro/name" />
<html>
<xsl:choose>
<xsl:when test="/ergebnisse/@hisinone_active='true'">
<xsl:call-template name="head_hisinone" ><xsl:with-param name="title" select="concat('Ergebnis ',/ergebnisse/ergebnis[ position()=1]/maskenname)" /></xsl:call-template>
</xsl:when> </xsl:when>
<xsl:otherwise> <xsl:otherwise>
<xsl:call-template name="head_superx_viz" ><xsl:with-param name="title" select="concat('Ergebnis ',/ergebnisse/ergebnis[ position()=1]/maskenname)" /></xsl:call-template> <xsl:value-of select="/ergebnisse/ergebnis/maskenname" />
</xsl:otherwise> </xsl:otherwise>
</xsl:choose> </xsl:choose>
</xsl:variable>
<html>
<head>
<xsl:call-template name="nd_htmlhead">
<xsl:with-param name="title" select="concat('Tabelle ',$maskenname)" />
</xsl:call-template>
<xsl:call-template name="tableJavascript_viz"></xsl:call-template> <link rel="stylesheet" href="../style/sx_tabelle.css" />
<!--<link rel="stylesheet" href="../style/superx.css" />-->
<!-- start Body--> </head>
<body onload="document.getElementById('progressbar').style.display='none';initPage();"> <!-- tableonload definiert in pageComponents.pccustomize position table_post_javascript --> <xsl:call-template name="nd_htmlscript" />
<div id="progressbar" style="position:absolute; width:150px; height:150px; left:200px; top:200px; background:#AAAAAA"> <xsl:call-template name="nd_tableJavascript" />
<p>&#160;<b>Laden...</b><br/><img src="../images/progress_bar.gif"></img><br/></p></div> <xsl:call-template name="nd_tableCSS" />
<xsl:call-template name="importVizJavascriptLibsViewer"></xsl:call-template>
<xsl:if test="/ergebnisse/@showNavigation='true'"> <body class="has-navbar-fixed-top" onload="document.getElementById('progressbar').style.display='none';initPage();">
<xsl:for-each select="/ergebnisse/menue"> <!--#Template Beginn Top-Navigation-->
<xsl:call-template name="menuFrame" /> <xsl:call-template name="nd_navi_top" />
</xsl:for-each> <!--#Template Ende Top-Navigation-->
</xsl:if>
<div> <div class="columns">
<xsl:if test="/ergebnisse/@showNavigation='true'">
<xsl:attribute name="class"><xsl:text>page-wrap</xsl:text></xsl:attribute> <!--#Template Beginn Navigations-Panel Auswertungen-->
<xsl:for-each select="/ergebnisse/menue"> <xsl:if test="/ergebnisse/@showNavigation='true' and 1=0"><!-- erstmal kein Panel,weil der Asssistent schon recht breit ist -->
<xsl:call-template name="topbar_menue" /> <xsl:for-each select="/ergebnisse">
</xsl:for-each> <xsl:call-template name="nd_navi_panel" />
</xsl:for-each>
</xsl:if> </xsl:if>
<!--#Template Ende Navigations-Panel Auswertungen-->
<!--Beginn Seitentitel, Krümelpfad, Knopfleiste, Legende, Erläuterung-->
<section class="hero-body">
<div class="container">
<div class="columns is-mobile is-left">
<div class="column is-full">
<div class="card ">
<div class="card-content">
<div> <xsl:call-template name="nd_progressbar" />
<xsl:if test="/ergebnisse/@showNavigation='true'">
<xsl:attribute name="id"><xsl:text>wrapper</xsl:text></xsl:attribute> <xsl:call-template name="viz_viewer_columnwise"/>
</xsl:if>
<xsl:call-template name="viz_canvas"/>
<xsl:call-template name="bottombar" /> <xsl:call-template name="bottombar" />
<xsl:comment>customfooter</xsl:comment> <xsl:comment>customfooter</xsl:comment>
</div> </div> <!--Ende content -->
</div> </div> <!--Ende card-content-->
<xsl:call-template name="footer" /> </div> <!--Ende card-background -->
<xsl:call-template name="modalCards" /> </div> <!--Ende column-->
</div> <!--Ende hero-columns-->
</section> <!--Ende hero = Berichts-Card-->
</div> <!--Ende site-columns-->
<xsl:call-template name="modalCards" />
</body> </body>
<!-- end body --> <!-- end body -->
</html> </html>
</xsl:template> </xsl:template>
<!-- end main --> <!-- end main -->
<xsl:template name="importVizJavascriptLibs">
<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.min.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/plot.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/viz_functions.js" />
<script language="Javascript" type="module" src="../xml/js/viz/d3-sankey.js" />
<script language="Javascript" type="text/javascript">
<xsl:variable name="quote"><xsl:text>"</xsl:text></xsl:variable>
<xsl:text><![CDATA[
function initPage()
{
var myChartModelStr="";
var myDiv="";
]]></xsl:text>
<xsl:for-each select="ergebnisse">
<xsl:for-each select="ergebnis/ergebniselement">
<xsl:variable name="chart_id"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
<xsl:variable name="ergebniselement_ordnr"><xsl:value-of select="@ordnr" /></xsl:variable>
<xsl:if test="$chart_id != ''">
<xsl:text><![CDATA[
myChartModelStr=']]></xsl:text>
<xsl:value-of select="translate(viz_charts/viz_chart[@tid=$chart_id]/@chartmodel,'§',$quote)" />
<xsl:text><![CDATA[';
myDiv="]]></xsl:text>
<xsl:value-of select="concat('chartDiv',$ergebniselement_ordnr)" />
<xsl:text><![CDATA[";
createViewer(myChartModelStr,myDiv);
myDiv="]]></xsl:text>
<xsl:value-of select="concat('modalCardImage',$ergebniselement_ordnr)" />
<xsl:text><![CDATA[";
createViewer(myChartModelStr,myDiv);
myDiv="]]></xsl:text>
<xsl:value-of select="concat('modalCardDetailImage',$ergebniselement_ordnr)" />
<xsl:text><![CDATA[";
createViewer(myChartModelStr,myDiv);
]]></xsl:text>
</xsl:if>
</xsl:for-each>
</xsl:for-each>
<xsl:text><![CDATA[
}
function createViewer(myChartModelStr,chartDiv)
{
myChartModel=JSON.parse(myChartModelStr);
renderChart(chartDiv,myChartModel);
}
function toggleLegendeDisplay(legendeDiv)
{
var myDiv=document.getElementById(legendeDiv);
if(myDiv.style.display=="block")
myDiv.style.display="none";
else
myDiv.style.display="block";
}
]]></xsl:text>
</script>
</xsl:template>
<xsl:template name="viz_canvas"> <xsl:template name="viz_viewer_columnwise">
<xsl:if test="/ergebnisse/@isMakro='true'"> <xsl:if test="/ergebnisse/@isMakro='true'">
<h1><xsl:value-of select="/ergebnisse/makro/name" /></h1> <h1><xsl:value-of select="/ergebnisse/makro/name" /></h1>
</xsl:if> </xsl:if>
@ -202,103 +163,95 @@ Formel: ANZ / 2 kaufm. gerundet
</section><!-- der letzten Kartenreihe --> </section><!-- der letzten Kartenreihe -->
</section><!-- des Portals --> </section><!-- des Portals -->
</xsl:template> </xsl:template>
<xsl:template name="modalCards" > <xsl:template name="viewer_kachel">
<xsl:for-each select="/ergebnisse"> <xsl:param name="caption" />
<xsl:for-each select="ergebnis/ergebniselement"> <xsl:param name="ergebniselement_ordnr" />
<xsl:variable name="chart_id"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable> <div class="card is-shady">
<xsl:variable name="ergebniselement_ordnr"><xsl:value-of select="@ordnr" /></xsl:variable> <div class="card-image">
<xsl:if test="$chart_id != ''"> <div id="{concat('chartDiv',$ergebniselement_ordnr)}">
<div class="modal modal-fx-3dSlit" id="{concat('modalCard',$ergebniselement_ordnr)}"> Platzhalter
<div class="modal-background"></div> </div>
<div class="modal-content is-huge is-image">
<!-- content -->
<div class="modal-content">
<div class="box" style="text-align:right">
<a href="{concat('javascript:closeModalImage(',$ergebniselement_ordnr,');')}">
<span class="button is-black is-outlined"> X </span>
</a>
</div>
<div class="box">
<div id="{concat('modalCardImage',$ergebniselement_ordnr)}">
Picture placeholder
</div>
</div>
</div>
</div>
</div> </div>
<p>
<a onClick="{concat('javascript:openModalImage(',$ergebniselement_ordnr,');')}">
<span class="button is-success is-small modal-button">Vergrößern ...</span></a>
<div class="modal modal-fx-3dSlit" id="{concat('modalCardDetail',$ergebniselement_ordnr)}"> <a onClick="{concat('javascript:openModalCardDetail(',$ergebniselement_ordnr,');')}">
<div class="modal-background"></div> <span class="button is-link is-small modal-button">Mehr Infos ...</span></a>
<div class="modal-content is-tiny">
<div class="box" style="text-align:right"> </p>
<h4><xsl:value-of select="viz_charts/viz_chart[@tid=$chart_id]/@caption"/></h4>
<a href="{concat('javascript:closeModalCardDetail(',$ergebniselement_ordnr,');')}"> <!-- <div class="card-content modal-button" data-target="modal-card11">
<span class="button is-black is-outlined"> X </span> <div class="content">
</a> <h4><xsl:value-of select="$caption" /></h4>
</div> <p> </p>
<!-- content -->
<div class="card"> <xsl:call-template name="legende_viz" >
<div class="card-image"> <xsl:with-param name="ordnr" select="$ergebniselement_ordnr" />
<div id="{concat('modalCardDetailImage',$ergebniselement_ordnr)}"> </xsl:call-template>-->
Picture placeholder
</div>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p><xsl:value-of select="viz_charts/viz_chart[@tid=$chart_id]/@description"/></p>
<p class="legende">
<xsl:for-each select="../felder/feld">
<xsl:if test="(value !='' or sicht/@isFirstInGroup='false' or @isstandtoday='false') and @varname != 'sort' and @varname != 'maxoffset' and value_caption != ''">
<span class="feldname">
<xsl:choose>
<xsl:when test="string-length(caption_short) &gt; 0 and caption_short != 'null'" >
<![CDATA[]]><xsl:value-of select="caption_short" /><![CDATA[]]>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="@varname" />
</xsl:otherwise>
</xsl:choose></span>:&#160;
<xsl:if test="string-length(value_caption) &lt; 50">
<span class="feldwert"><xsl:value-of select="value_caption" /><![CDATA[]]></span>
</xsl:if>
<xsl:if test="string-length(value_caption) &gt; 49">
<span class="feldwert"><![CDATA[]]><xsl:value-of select="substring(value_caption,0,50)" /><![CDATA[]]>...</span>
</xsl:if>
<xsl:if test="sicht!=''">
<span><![CDATA[ (]]><xsl:value-of select="sicht" />
<xsl:if test="@stand!=''"><xsl:text> - Stand:</xsl:text><xsl:value-of select="@stand"/></xsl:if>
<xsl:text><![CDATA[)]]> </xsl:text></span>
</xsl:if>
;
</xsl:if>
</xsl:for-each>
User: <xsl:value-of select="/ergebnisse/user"/>&#160;
Stand: <xsl:value-of select="../stand" /></p>
<xsl:if test="../hinweis != ''">
<xsl:call-template name="newline_to_br">
<xsl:with-param name="string" select="../hinweis" />
</xsl:call-template>
</xsl:if>
</div> </div>
<p align="right"><a href="{concat('javascript:closeModalCardDetail(',$ergebniselement_ordnr,');')}">
<span class="button is-black is-outlined"> X </span>
</a></p>
</div>
</div> </xsl:template>
</div> <xsl:template name="importVizJavascriptLibsViewer">
</div> <script language="Javascript" type="text/javascript" src="../xml/js/jquery-2.1.1.min.js" />
<script language="JavaScript" type="text/javascript" src="../xml/js/memtext/sx_functions.js"></script>
<xsl:call-template name="tableJavascript_viz" />
<script language="Javascript" type="text/javascript">
<xsl:text><![CDATA[
</div> function initPage()
{
var myChartModelStr="";
var myDiv="";
]]></xsl:text>
<xsl:for-each select="ergebnisse">
<xsl:for-each select="ergebnis/ergebniselement">
<xsl:variable name="chart_id"><xsl:value-of select="../felder/feld[@varname='Grafik']/value" /></xsl:variable>
<xsl:variable name="ergebniselement_ordnr"><xsl:value-of select="@ordnr" /></xsl:variable>
<xsl:if test="$chart_id != ''">
<xsl:text><![CDATA[
myChartModelStr=']]></xsl:text>
<xsl:value-of select="translate(viz_charts/viz_chart[@tid=$chart_id]/@chartmodel,'§',$quote)" />
<xsl:text><![CDATA[';
myDiv="]]></xsl:text>
<xsl:value-of select="concat('chartDiv',$ergebniselement_ordnr)" />
<xsl:text><![CDATA[";
createViewer(myChartModelStr,myDiv);
myDiv="]]></xsl:text>
<xsl:value-of select="concat('modalCardImage',$ergebniselement_ordnr)" />
<xsl:text><![CDATA[";
createViewer(myChartModelStr,myDiv);
myDiv="]]></xsl:text>
<xsl:value-of select="concat('modalCardDetailImage',$ergebniselement_ordnr)" />
<xsl:text><![CDATA[";
createViewer(myChartModelStr,myDiv);
]]></xsl:text>
</xsl:if> </xsl:if>
</xsl:for-each> </xsl:for-each>
</xsl:for-each> </xsl:for-each>
<xsl:text><![CDATA[
}
function createViewer(myChartModelStr,chartDiv)
{
myChartModel=JSON.parse(myChartModelStr);
renderChart(chartDiv,myChartModel);
}
function toggleLegendeDisplay(legendeDiv)
{
var myDiv=document.getElementById(legendeDiv);
if(myDiv.style.display=="block")
myDiv.style.display="none";
else
myDiv.style.display="block";
}
]]></xsl:text>
</script>
</xsl:template> </xsl:template>
</xsl:stylesheet> </xsl:stylesheet>

2692
test/webapps_superx/test_viz/stud_zeitreihe.html
View File

File diff suppressed because it is too large Load Diff

2719
test/webapps_superx/test_viz/stud_zeitreihe_plot.html
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save