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 3 months 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
Split 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. 335
      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 @@ @@ -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>
<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
P.tid,
P.caption,
@ -24,8 +13,8 @@ P.explanation, @@ -24,8 +13,8 @@ P.explanation,
P.sortnr,
P.range_from,
P.range_to,
T.caption as input_type_caption,
T.uniquename as input_type_uniquename,
I.caption as input_type_caption,
I.uniquename as input_type_uniquename,
G.caption as group_caption,
G.sortnr as group_sortnr,
G.uniquename as group_uniquename,
@ -35,12 +24,12 @@ PR.variable_name, @@ -35,12 +24,12 @@ PR.variable_name,
P.prop_value_type,
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)
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_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
order by G.sortnr,G.uniquename,P.sortnr,P.caption
;
@ -70,14 +59,29 @@ order by 3 @@ -70,14 +59,29 @@ order by 3
<sqlvar name="viz_type_properties" type="hash">
SELECT T.tid,
T.uniquename as viz_type_uniquename,
P.prop_uniquename,
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,
TP.is_mandatory,
TP.sortnr
FROM viz_type T, viz_type_property TP, viz_property P, viz_property_group G
TP.sortnr,
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
and P.tid=TP.viz_property_id
and I.tid=P.input_type_id
and G.tid=P.property_group_id
order by 2,TP.sortnr,P.caption
;
@ -163,7 +167,15 @@ order by 3 @@ -163,7 +167,15 @@ order by 3
viz_type_uniquename="${tp.viz_type_uniquename}"
viz_property_group_uniquename="${tp.viz_property_group_uniquename}"
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>
</#if>

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

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

143
superx/xml/viz_html_chart.xsl
Unescape View File

@ -1,72 +1,89 @@ @@ -1,72 +1,89 @@
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
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="interLinks_html.xsl" />
<xsl:import href="nd_templates.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" />
<!--In diesem Stylesheet können Sie individuelle templates unterbringen,
die in ihrer Präzedenz das normale Stylesheet
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="," />
<!-- wichtig für DOJO!-->
<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"/>
<xsl:variable name="colon"><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:template match="/">
<xsl:call-template name="table"/>
</xsl:template>
<!-- start table main-->
<xsl:template name="table">
<html>
<xsl:choose>
<xsl:when test="/ergebnisse/@hisinone_active='true'">
<xsl:call-template name="head_hisinone_viz" ><xsl:with-param name="title" select="concat('Ergebnis ',/ergebnisse/ergebnis[ position()=1]/maskenname)" /></xsl:call-template>
<xsl:template match="/">
<xsl:variable name="maskenname">
<xsl:choose>
<xsl:when test="/ergebnisse/@isMakro='true'">
<xsl:value-of select="/ergebnisse/makro/name" />
</xsl:when>
<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: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>
<!-- start Body-->
<body onload="document.getElementById('progressbar').style.display='none';"> <!-- tableonload definiert in pageComponents.pccustomize position table_post_javascript -->
<div id="progressbar" style="position:absolute; width:150px; height:150px; left:200px; top:200px; background:#AAAAAA">
<p>&#160;<b>Laden...</b><br/><img src="../images/progress_bar.gif"></img><br/></p></div>
<xsl:if test="/ergebnisse/@showNavigation='true'">
<xsl:for-each select="/ergebnisse/menue">
<xsl:call-template name="menuFrame" />
</xsl:for-each>
</xsl:if>
<div>
<xsl:if test="/ergebnisse/@showNavigation='true'">
<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>
<body class="has-navbar-fixed-top" onload="document.getElementById('progressbar').style.display='none';tableonload();initThemenbaumJs();">
<!--#Template Beginn Top-Navigation-->
<xsl:call-template name="nd_navi_top" />
<!--#Template Ende Top-Navigation-->
<div class="columns">
<!--#Template Beginn Navigations-Panel Auswertungen-->
<xsl:if test="/ergebnisse/@showNavigation='true' and 1=0"><!-- erstmal kein Panel,weil der Asssistent schon recht breit ist -->
<xsl:for-each select="/ergebnisse">
<xsl:call-template name="nd_navi_panel" />
</xsl:for-each>
</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="bottombar" />
<xsl:comment>customfooter</xsl:comment>
</div>
</div>
<xsl:call-template name="footer" />
</div> <!--Ende content -->
</div> <!--Ende card-content-->
</div> <!--Ende card-background -->
</div> <!--Ende column-->
</div> <!--Ende hero-columns-->
</section> <!--Ende hero = Berichts-Card-->
</div> <!--Ende site-columns-->
</body>
<!-- end body -->
</html>
@ -350,6 +367,27 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util @@ -350,6 +367,27 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<!-- Beginn Grafikelemente+ Vorschau-->
<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">
<div class="label-container">
@ -370,18 +408,23 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util @@ -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="label-container">
<label class="label is-required is-small">Grafikelemente-Set</label>
</div>
<label class="label is-required is-small">Grafikelement</label>
</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="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)">
<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="Letztes Element entfernen" />
<img src="../images/minus-circled.svg" width="12" height="12" title="Ausgewähltes Element entfernen" />
</a>
</div>
</div>
@ -389,25 +432,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util @@ -389,25 +432,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<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>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-->
<div class="field is-grouped">

335
superx/xml/viz_html_chart_viewer.xsl
Unescape View File

@ -1,143 +1,104 @@ @@ -1,143 +1,104 @@
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
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="interLinks_html.xsl" />
<xsl:import href="nd_templates.xsl" />
<xsl:import href="pageComponents_html.xsl" />
<xsl:import href="viz_html_chart.xsl" />
<xsl:import href="viz_components.xsl" />
<xsl:import href="menue_html_dojo.xsl" />
<!--In diesem Stylesheet können Sie individuelle templates unterbringen,
die in ihrer Präzedenz das normale Stylesheet
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="," />
<!-- wichtig für DOJO!-->
<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"/>
<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:template match="/">
<xsl:call-template name="table"/>
</xsl:template>
<!-- start table main-->
<xsl:template name="table">
<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:variable name="maskenname">
<xsl:choose>
<xsl:when test="/ergebnisse/@isMakro='true'">
<xsl:value-of select="/ergebnisse/makro/name" />
</xsl:when>
<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: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>
<!-- start Body-->
<body onload="document.getElementById('progressbar').style.display='none';initPage();"> <!-- tableonload definiert in pageComponents.pccustomize position table_post_javascript -->
<div id="progressbar" style="position:absolute; width:150px; height:150px; left:200px; top:200px; background:#AAAAAA">
<p>&#160;<b>Laden...</b><br/><img src="../images/progress_bar.gif"></img><br/></p></div>
<xsl:if test="/ergebnisse/@showNavigation='true'">
<xsl:for-each select="/ergebnisse/menue">
<xsl:call-template name="menuFrame" />
</xsl:for-each>
</xsl:if>
<div>
<xsl:if test="/ergebnisse/@showNavigation='true'">
<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>
<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="importVizJavascriptLibsViewer"></xsl:call-template>
<body class="has-navbar-fixed-top" onload="document.getElementById('progressbar').style.display='none';initPage();">
<!--#Template Beginn Top-Navigation-->
<xsl:call-template name="nd_navi_top" />
<!--#Template Ende Top-Navigation-->
<div class="columns">
<!--#Template Beginn Navigations-Panel Auswertungen-->
<xsl:if test="/ergebnisse/@showNavigation='true' and 1=0"><!-- erstmal kein Panel,weil der Asssistent schon recht breit ist -->
<xsl:for-each select="/ergebnisse">
<xsl:call-template name="nd_navi_panel" />
</xsl:for-each>
</xsl:if>
<!--#Template Ende Navigations-Panel Auswertungen-->
<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"/>
<!--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" />
<xsl:call-template name="viz_viewer_columnwise"/>
<xsl:call-template name="bottombar" />
<xsl:comment>customfooter</xsl:comment>
</div>
</div>
<xsl:call-template name="footer" />
<xsl:call-template name="modalCards" />
</div> <!--Ende content -->
</div> <!--Ende card-content-->
</div> <!--Ende card-background -->
</div> <!--Ende column-->
</div> <!--Ende hero-columns-->
</section> <!--Ende hero = Berichts-Card-->
</div> <!--Ende site-columns-->
<xsl:call-template name="modalCards" />
</body>
<!-- end body -->
</html>
</xsl:template>
<!-- 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'">
<h1><xsl:value-of select="/ergebnisse/makro/name" /></h1>
</xsl:if>
@ -201,104 +162,96 @@ Formel: ANZ / 2 kaufm. gerundet @@ -201,104 +162,96 @@ Formel: ANZ / 2 kaufm. gerundet
</div><!-- der columns -->
</section><!-- der letzten Kartenreihe -->
</section><!-- des Portals -->
</xsl:template>
<xsl:template name="viewer_kachel">
<xsl:param name="caption" />
<xsl:param name="ergebniselement_ordnr" />
<div class="card is-shady">
<div class="card-image">
<div id="{concat('chartDiv',$ergebniselement_ordnr)}">
Platzhalter
</div>
</div>
<p>
<a onClick="{concat('javascript:openModalImage(',$ergebniselement_ordnr,');')}">
<span class="button is-success is-small modal-button">Vergrößern ...</span></a>
<a onClick="{concat('javascript:openModalCardDetail(',$ergebniselement_ordnr,');')}">
<span class="button is-link is-small modal-button">Mehr Infos ...</span></a>
</p>
<!-- <div class="card-content modal-button" data-target="modal-card11">
<div class="content">
<h4><xsl:value-of select="$caption" /></h4>
<p> </p>
<xsl:call-template name="legende_viz" >
<xsl:with-param name="ordnr" select="$ergebniselement_ordnr" />
</xsl:call-template>-->
</div>
</xsl:template>
<xsl:template name="modalCards" >
<xsl:for-each select="/ergebnisse">
<xsl:template name="importVizJavascriptLibsViewer">
<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[
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 != ''">
<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: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: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: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: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