<?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= "pageComponents_html.xsl" />
<xsl:import href= "pageComponents_html_final.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: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= "'plot'" />
<xsl:variable name= "availableRendererPlot" select= "'true'" />
<xsl:variable name= "availableRendererD3" select= "'true'" />
<xsl:variable name= "availableRendererD3V3" select= "'false'" />
<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: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:otherwise>
</xsl:choose>
<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 >   <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>
</xsl:if>
<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" />
</body>
<!-- end body -->
</html>
</xsl:template>
<!-- end main -->
<!-- start Javascript -->
<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" />
<xsl:for-each select= "/ergebnisse/ergebnis/ergebniselement/vizTypes/vizType[@srcpath !='/superx/xml/js/viz/d3.min.js' and @srcpath != '/superx/xml/js/viz/plot.js']" >
<script language= "Javascript" type= "text/javascript" src= "{@srcpath}" />
</xsl:for-each>
</xsl:template>
<xsl:template name= "tableJavascript_viz" >
<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= "importVizJavascriptLibs" />
<script > <xsl:text > < ![CDATA[
//document.body.append(Plot.plot(options));
function commonChartProperty(name,
caption,
isMandatory,
inputType,
staticValues,
range_from,
range_to,
defaultValue,
explanation,
groupCaption,
groupUniquename,
rendererUniquename,
groupVariableName,
variableName,
propValueType
)
{
this.name=name;
this.caption=caption;
this.staticValues=staticValues;
this.range_from=range_from;
this.range_to=range_from;
this.isMandatory=isMandatory;
this.inputType=inputType;
this.defaultValue=defaultValue;
this.explanation=explanation;
this.groupCaption=groupCaption;
this.groupUniquename=groupUniquename;
this.rendererUniquename=rendererUniquename;
this.groupVariableName=groupVariableName;
this.variableName=variableName;
this.propValueType=propValueType;
this.getValueResultset = function () {
var valueOptions=[];
var optionCounter=0;
var staticValueArray = staticValues.split(/\|/);
for(var j=0;j < staticValueArray.length ; j + + )
{
var isDefault=false;
if(staticValueArray[j])
{
if(staticValueArray[j]==this.defaultValue)
isDefault=true;
var o=new selectionPropertyValue(optionCounter,staticValueArray[j],staticValueArray[j],isDefault);
valueOptions[optionCounter]=o;
optionCounter++;
}
}
return valueOptions;
}
}
function commonChartPropertyGroup(caption,groupUniquename,groupVariableName)
{
this.caption=caption;
this.groupUniquename=groupUniquename;
this.groupVariableName=groupVariableName;
}
var commonChartProperties=[];
]]></xsl:text>
<xsl:for-each select= "/ergebnisse/ergebnis[@ordnr='0']/ergebniselement/chartProperties/commonChartProperty" >
<xsl:text >
var newCommonChartProperty = new commonChartProperty("</xsl:text>
<xsl:value-of select= "@prop_uniquename" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@caption" />
<xsl:text > ",</xsl:text> <xsl:choose >
<xsl:when test= "@is_mandatory=1" > <xsl:text > true</xsl:text>
</xsl:when>
<xsl:otherwise > false</xsl:otherwise>
</xsl:choose>
<xsl:text > ,"</xsl:text>
<xsl:value-of select= "@input_type_uniquename" />
<xsl:text > "
,"</xsl:text>
<xsl:value-of select= "@static_values" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@prop_range_from" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@prop_range_to" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@prop_default" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@explanation" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@group_caption" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@group_uniquename" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@renderer_uniquename" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@group_variable_name" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@variable_name" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@propValueType" />
<xsl:text > ");
commonChartProperties.push(newCommonChartProperty);
</xsl:text>
</xsl:for-each>
<!-- <xsl:text>
var newCommonChartProperty = new commonChartProperty("caption",
"Titel des Diagramms",
false,
"TEXTAREA",
"",
"",
"",
"</xsl:text>
<xsl:value-of select= "/ergebnisse/ergebnis[@ordnr='0']/maskenname" /> <xsl:text > ",
"wird unter dem Diagramm angezeigt",
"Diagrammkopf",
"",
"plot",
"layout",
"caption",
"string");
commonChartProperties.push(newCommonChartProperty);
</xsl:text> -->
<xsl:text >
function vizType(uniquename,caption,rendererUniquename)
{
this.caption=caption;
this.uniquename=uniquename;
this.rendererUniquename=rendererUniquename;
}
var vizTypes=[];
</xsl:text>
<xsl:for-each select= "/ergebnisse/ergebnis[@ordnr='0']/ergebniselement/vizTypes/vizType" >
<xsl:text >
var newVizType = new vizType("</xsl:text>
<xsl:value-of select= "@uniquename" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@caption" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@renderer_uniquename" />
<xsl:text > ");
vizTypes.push(newVizType);
</xsl:text>
</xsl:for-each>
<xsl:text >
function vizTypeProperty(propUniquename,caption,typeUniquename,groupUniquename,isMandatory,explanation)
{
this.propUniquename=propUniquename;
this.caption=caption;
this.groupUniquename=groupUniquename;
this.typeUniquename=typeUniquename;
this.isMandatory=isMandatory;
this.explanation=explanation;
}
var vizTypeProperties=[];
</xsl:text>
<xsl:for-each select= "/ergebnisse/ergebnis[@ordnr='0']/ergebniselement/viz_type_properties/viz_type_property" >
<xsl:text >
var newVizTypeProperty = new vizTypeProperty("</xsl:text>
<xsl:value-of select= "@uniquename" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@caption" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@viz_type_uniquename" />
<xsl:text > ","</xsl:text>
<xsl:value-of select= "@viz_property_group_uniquename" />
<xsl:text > ",</xsl:text>
<xsl:choose >
<xsl:when test= "@is_mandatory='1'" >
<xsl:text > true</xsl:text>
</xsl:when>
<xsl:otherwise >
<xsl:text > false</xsl:text>
</xsl:otherwise>
</xsl:choose>
<xsl:text > ,""
);
vizTypeProperties.push(newVizTypeProperty);
</xsl:text>
</xsl:for-each>
</script>
<script language= "Javascript" type= "text/javascript" src= "../xml/js/viz/viz_functions.js" />
</xsl:template>
<xsl:template name= "viz_canvas" >
<xsl:if test= "/ergebnisse/@isMakro='true'" >
<h1 > <xsl:value-of select= "/ergebnisse/makro/name" /> </h1>
</xsl:if>
<p > </p>
<xsl:call-template name= "buildVizMetadata" />
<!-- end Kopf -->
<!-- start Grafik -->
<xsl:for-each select= "ergebnisse" >
<!-- Beginn Selektions - Card -->
<!-- Beginn Berichtstitel, Pfad, Knopfleiste -->
<section class= "hero-body has-background-light" >
<div class= "columns is-mobile is-left" >
<div class= "card has-background-light" >
<div class= "card-content" >
<p class= "title is-4" > Konfigurationsassistent Datenvisualisierung</p>
<!-- Beginn NavTabs -->
<div class= "tabs is-left is-small" id= "viznav" >
<ul >
<li data-target= "viznav-tab1" id= "1" >
<a onclick= "showVizNavTab(1);" > <span > Diagramm-Daten</span> </a>
</li>
<li data-target= "viznav-tab2" id= "2" >
<a onclick= "updateChartModel();renderChart('chartDiv',myChartModel);showVizNavTab(2);" > <span > Diagramm-Layout</span> </a>
</li>
<li data-target= "viznav-tab3" id= "3" >
<a onclick= "showVizNavTab(3);" > <span > Diagramm-Nutzung</span> </a>
</li>
</ul>
</div>
<div class= "tab-content" >
<!-- tab - 1 -->
<div class= "viznav-tab1" id= "tab-1" style= "display:block" > <!-- Diagramm - Daten -->
<xsl:call-template name= "diagrammdaten" />
</div>
<div class= "viznav-tab2" id= "tab-2" style= "display:none" > <!-- Diagramm - Layout -->
<xsl:call-template name= "diagrammlayout" />
</div>
<div class= "viznav-tab3" id= "tab-3" style= "display:none" > <!-- Diagramm - Nutzung -->
<xsl:call-template name= "diagrammnutzung" />
</div>
</div> <!-- tab - content -->
</div> <!-- card - content -->
</div> <!-- card -->
</div> <!-- column -->
</section>
</xsl:for-each>
</xsl:template>
<xsl:template name= "getColumnNameJS" >
<xsl:param name= "columnNameFromDB" />
<xsl:choose >
<xsl:when test= "contains($columnNameFromDB,'?')" >
<xsl:value-of select= "concat('column_',@id+1)" />
</xsl:when>
<xsl:otherwise >
<xsl:value-of select= "$columnNameFromDB" />
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name= "head_superx_viz" >
<xsl:param name= "css" />
<xsl:param name= "title" />
<head >
<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" >
</meta> <!-- <link rel="stylesheet" type="text/css" href="../xml/his1/css.._menue_html.css" /> -->
<link rel= "stylesheet" type= "text/css" href= "../style/superx.css" />
<link rel= "stylesheet" type= "text/css" href= "../xml/menue_html.css" />
<link rel= "stylesheet" type= "text/css" href= "../xml/superxml_html.css" />
<link rel= "stylesheet" type= "text/css" href= "../xml/maske_html.css" />
<link rel= "stylesheet" type= "text/css" href= "../xml/tabelle_html.css" />
<link rel= "stylesheet" type= "text/css" href= "../xml/css/fontello-codes.css" />
<link rel= "stylesheet" type= "text/css" href= "../xml/css/start_portlet.css" />
<link rel= "stylesheet" type= "text/css" href= "../style/bulma.css" />
<link rel= "stylesheet" type= "text/css" href= "../style/bulma-tooltip.min.css" />
<link rel= "stylesheet" type= "text/css" href= "../style/sx_viz_muster.css" />
</head>
</xsl:template>
<xsl:template name= "buildVizMetadata" >
<xsl:variable name= "vizInitialName" >
<xsl:choose >
<xsl:when test= "/ergebnisse/@isMakro='true'" >
<xsl:value-of select= "/ergebnisse/makro/name" />
</xsl:when>
<xsl:otherwise >
<xsl:value-of select= "/ergebnisse/ergebnis/maskenname" />
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:call-template name= "navigationsmenue" />
<script language= "Javascript" >
<xsl:text >
var vizInitialName='</xsl:text> <xsl:value-of select= "$vizInitialName" /> <xsl:text > ';
function dataRowMetaData(tableId,nr,colname,colcaption,coltype,colfunction)
{
this.tableId=tableId;
this.nr=nr;
this.colname=colname;
this.colcaption=colcaption;
this.coltype=coltype;
this.colfunction=colfunction;
}
function tableMetaData(nr,value,name,isDefault)
{
this.value=value;
this.nr=nr;
this.name=name
this.isDefault=isDefault;
}
var rsTableMetaData=new Array();
var rsColumnMetaData=new Array();
var rs=new Array();
</xsl:text>
</script>
<xsl:for-each select= "/ergebnisse/ergebnis/ergebniselement" >
<xsl:call-template name= "buildVizData" >
<xsl:with-param name= "tableId" select= "@ordnr" />
</xsl:call-template>
</xsl:for-each>
</xsl:template>
<xsl:template name= "buildVizData" >
<xsl:param name= "tableId" />
<script language= "Javascript" >
<xsl:text >
rsTableMetaData.push(new tableMetaData(
</xsl:text>
<xsl:value-of select= "position()" />
<xsl:text > ,'</xsl:text>
<xsl:value-of select= "$tableId" />
<xsl:text > ','</xsl:text>
<xsl:value-of select= "concat('Tab. ',$tableId+1)" />
<xsl:text > ',
</xsl:text>
<xsl:choose >
<xsl:when test= "position()=1" >
<xsl:text > true</xsl:text>
</xsl:when>
<xsl:otherwise >
<xsl:text > false</xsl:text>
</xsl:otherwise>
</xsl:choose>
<xsl:text >
));
rs[</xsl:text> <xsl:value-of select= "$tableId" /> <xsl:text > ]=new Array();
var myChartModel=new chartModel(1,"","",rsTableMetaData);
function dataRow_</xsl:text> <xsl:value-of select= "$tableId" /> <xsl:text > (rownr</xsl:text>
<xsl:for-each select= "sqlerg/complete_headers/header" >
<xsl:text > ,</xsl:text>
<xsl:call-template name= "getColumnNameJS" >
<xsl:with-param name= "columnNameFromDB" select= "f_name" />
</xsl:call-template>
</xsl:for-each>
<xsl:text >
)
{
this.rownr=rownr;
</xsl:text>
<xsl:for-each select= "sqlerg/complete_headers/header" >
<xsl:text > this.</xsl:text> <xsl:call-template name= "getColumnNameJS" >
<xsl:with-param name= "columnNameFromDB" select= "f_name" />
</xsl:call-template> <xsl:text > =</xsl:text>
<xsl:call-template name= "getColumnNameJS" >
<xsl:with-param name= "columnNameFromDB" select= "f_name" />
</xsl:call-template> <xsl:text > ;
</xsl:text>
</xsl:for-each> <xsl:text >
}
rsColumnMetaData[</xsl:text> <xsl:value-of select= "$tableId" /> <xsl:text > ]=new Array();
</xsl:text>
<xsl:for-each select= "sqlerg/complete_headers/header" >
<xsl:variable name= "rownr" >
<xsl:value-of select= "position()" />
</xsl:variable>
<xsl:text >
rsColumnMetaData[</xsl:text> <xsl:value-of select= "$tableId" /> <xsl:text > ].push(new dataRowMetaData('</xsl:text>
<xsl:value-of select= "$tableId" /> <xsl:text > ',</xsl:text>
<xsl:value-of select= "$rownr" />
<xsl:text > ,'</xsl:text>
<xsl:call-template name= "getColumnNameJS" >
<xsl:with-param name= "columnNameFromDB" select= "f_name" />
</xsl:call-template>
<xsl:text > ','</xsl:text>
<xsl:call-template name= "remove_linebreaksAndQuot" >
<xsl:with-param name= "volltext" select= "wert" />
</xsl:call-template>
<xsl:text > ',0,null));</xsl:text> <!-- coltype noch unbekannt, colfunction unnötig -->
</xsl:for-each>
<xsl:for-each select= "sqlerg/row" >
<xsl:variable name= "rownr" >
<xsl:value-of select= "position()" />
</xsl:variable>
<xsl:if test= "$rownr=1" >
<!-- first metadata -->
<xsl:for-each select= "col" >
<xsl:variable name= "colnr" >
<xsl:value-of select= "position()" />
</xsl:variable>
<xsl:text >
rsColumnMetaData[</xsl:text> <xsl:value-of select= "$tableId" /> <xsl:text > ][</xsl:text> <xsl:value-of select= "number($colnr)-1" /> <xsl:text > ].coltype=</xsl:text> <xsl:value-of select= "@typ" />
<xsl:text > ;
</xsl:text>
</xsl:for-each>
</xsl:if>
<!-- now resultset -->
<xsl:text >
//rs[</xsl:text> <xsl:value-of select= "$tableId" /> <xsl:text > ]= new Array();
rs[</xsl:text> <xsl:value-of select= "$tableId" /> <xsl:text > ].push(new dataRow_</xsl:text> <xsl:value-of select= "$tableId" /> <xsl:text > (</xsl:text> <xsl:value-of select= "$rownr" />
<xsl:for-each select= "col" >
<xsl:text > ,</xsl:text>
<xsl:choose >
<xsl:when test= "@typ='1'" > <xsl:text > '</xsl:text>
<xsl:call-template name= "remove_linebreaksAndQuot" >
<xsl:with-param name= "volltext" select= "wert" />
</xsl:call-template>
<xsl:text > '</xsl:text> </xsl:when>
<!-- todo:Typ Datum -->
<xsl:when test= "string-length(wert)=0" > <xsl:text > null</xsl:text>
</xsl:when>
<xsl:otherwise >
<xsl:value-of select= "wert" />
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
<xsl:text > ));
</xsl:text>
</xsl:for-each>
</script>
</xsl:template>
<xsl:template name= "diagrammdaten" >
<xsl:for-each select= "ergebnis/ergebniselement" >
<p class= "title is-5" > <xsl:value-of select= "../maskenname" /> </p>
<xsl:call-template name= "legende" />
<!-- <xsl:if test="/ergebnisse/@isMakro!='true' and /ergebnisse/ergebnis/ergebniselement/sqlerg/@istreetable!='true' and /ergebnisse/ergebnis/ergebniselement/sqlerg/@max > 19">
<xsl:call-template name= "navigationsmenue" />
</xsl:if> -->
</xsl:for-each>
<span class= "separator" >   </span>
<!-- Aufruf/Anzeige Diagrammdaten -->
<xsl:for-each select= "ergebnis/ergebniselement" >
<xsl:variable name= "tableId" > <xsl:value-of select= "@ordnr" /> </xsl:variable>
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > <strong > <xsl:text > Daten-Tabelle </xsl:text> <xsl:value-of select= "../maskenname" /> </strong> </label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<!-- <button class="button is - small is - rounded is - white is - outlined"
onClick="showDataTable('dataDivTable',rs,rsMetaData,10);">
<span class= "icon is-small" > <i class= "../images/more.svg" > </i>
<img src= "../images/more.svg" title= "Laden" />
</span>
</button> -->
<a >
<xsl:attribute name= "onClick" >
<xsl:text > showDataTable('dataDivTable</xsl:text>
<xsl:value-of select= "$tableId" />
<xsl:text > ',rs[</xsl:text> <xsl:value-of select= "$tableId" /> <xsl:text > ],rsColumnMetaData[</xsl:text> <xsl:value-of select= "$tableId" /> <xsl:text > ],10);</xsl:text>
</xsl:attribute>
<span class= "icon" >
<img src= "../images/icons/more.svg" title= "Laden" />
</span>
</a>
</div>
<div id= "dataDiv" > <!-- class="section"> -->
<div id= "{concat('dataDivTable',$tableId)}" > <!-- style="border:thin solid black"> -->
</div>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
</xsl:for-each>
<!-- Aufruf/Anzeige Formular Datenauswahl -->
<!--
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > <strong > Daten-Auswahl</strong> </label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<a
onClick="fillDataSelectionForm('dataSelectionFormDiv');">
<span class= "icon" >
<img src= "../images/icons/more.svg" title= "Laden" />
</span>
</a>
</div>
<div id= "dataSelectionDiv" >
<form name= "dataSelectionForm" id= "dataSelectionForm" >
<div id= "dataSelectionFormDiv" style= "display:none" >
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > Dimension 1</label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<div class= "field is-active" >
<p class= "control-new" >
<div class= "select is-small is-fullwidth is-focused" >
<select class= "maskinputPflicht" id= "dimension1" name= "dimension1" tabindex= "210" >
<option class= "maskinput" value= "" selected= "selected" > </option>
</select>
</div>
</p>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "info" onclick= "window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');" >
<figure class= "image is-24x24" >
<img src= "../images/information_grey_liberation.svg" />
</figure>
</span>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<div class= "field is-active" >
<p class= "control-new" >
<div class= "select is-small is-fullwidth" >
<select id= "dimension1_fn" name= "dimension1_fn" tabindex= "210" >
<option class= "maskinput" value= "" selected= "selected" > Optional: Vordefinierte Transformation></option>
</select>
</div>
</p>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "info" onclick= "window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');" >
<figure class= "image is-24x24" >
<img src= "../images/information_grey_liberation.svg" />
</figure>
</span>
</div>
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > Dimension 2</label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<div class= "field is-active" >
<p class= "control-new" >
<div class= "select is-small is-fullwidth is-focused" >
<select class= "maskinputPflicht" id= "dimension2" name= "dimension2" tabindex= "210" >
<option class= "maskinput" value= "" selected= "selected" > </option>
</select>
</div>
</p>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "info" onclick= "window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');" >
<figure class= "image is-24x24" >
<img src= "../images/information_grey_liberation.svg" />
</figure>
</span>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<div class= "field is-active" >
<p class= "control-new" >
<div class= "select is-small is-fullwidth" >
<select id= "dimension2_fn" name= "dimension2_fn" tabindex= "210" >
<option class= "maskinput" value= "" selected= "selected" > Optional: Vordefinierte Transformation</option>
</select>
</div>
</p>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "info" onclick= "window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');" >
<figure class= "image is-24x24" >
<img src= "../images/information_grey_liberation.svg" />
</figure>
</span>
</div>
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > Maß</label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<div class= "field is-active" >
<p class= "control-new" >
<div class= "select is-small is-fullwidth" >
<select class= "maskinputPflicht" id= "measure1" name= "measure1" tabindex= "230" >
<option class= "maskinput" value= "" selected= "selected" > </option>
</select>
</div>
</p>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "info" onclick= "window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');" >
<figure class= "image is-24x24" >
<img src= "../images/information_grey_liberation.svg" />
</figure>
</span>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<div class= "field is-active" >
<p class= "control-new" >
<div class= "select is-small is-fullwidth is-focused" >
<select id= "measure1_fn" name= "measure1_fn" tabindex= "230" >
<option class= "maskinput" value= "" selected= "selected" > Optional: Vordefinierte Transformation</option>
</select>
</div>
</p>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "info" onclick= "window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');" >
<figure class= "image is-24x24" >
<img src= "../images/information_grey_liberation.svg" />
</figure>
</span>
</div>
</div>
</form>
</div> -->
<!-- Ende Formular Datenauswahl -->
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<!-- Aufruf/Anzeige Daten - Vorschau -->
<!-- <div class="field is - grouped">
<div class= "label-container" >
<label class= "label is-required is-small" > <strong > Daten-Vorschau</strong> </label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<a
onClick="selectionResultPreview('selectionResultPreviewTable');">
<span class= "icon" >
<img src= "../images/icons/more.svg" title= "Laden" />
</span>
</a>
</div>
<div id= "selectionResultPreview" >
<div id= "selectionResultPreviewTable" style= "display:none" > </div>
</div>
-->
<!-- footer BF: nach unten verschoben -->
<footer class= "card-footer" >
<!-- <p class="card - footer - item"><button class="button is - link is - outlined is - small" onclick="selectionResultPreview('selectionResultPreviewTable');">Daten - Vorschau</button></p> -->
<p class= "card-footer-item" > <button class= "button is-link is-outlined is-small" type= "submit" > Speichern</button> </p>
<p class= "card-footer-item" > <button class= "button is-link is-outlined is-small" type= "reset" > Zurücksetzen</button> </p>
</footer>
</xsl:template>
<xsl:template name= "diagrammlayout" >
<!-- Formular Allg. Layoutmerkmale -->
<div id= "chartProperties" > <!-- class="section"> -->
<form name= "chartPropertiesForm" >
<div class= "columns" >
<div class= "column is-one-quarter" >
<p class= "bd-notification is-primary" >
Diagramm
</p>
<!-- <p><span class="button is - link is - outlined is - small" onClick="updateChartModel();renderChart('chartDiv',myChartModel);">Erzeugen</span></p> -->
</div>
<div class= "column is-half" >
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > Name</label>
</div>
<div class= "field is-active" >
<p class= "control-new" >
<div class= "select is-small is-fullwidth" >
<textarea class= "maskinput" id= "chartName" name= "chartName" rows= "3" cols= "20" onChange= "updateChartModel();renderChart('chartDiv',myChartModel);" />
</div>
</p>
</div>
<xsl:call-template name= "Infobutton" />
</div>
</div>
<div class= "column" >
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > Renderer</label>
</div>
<div class= "field is-active" >
<p class= "control-new" >
<div class= "select is-small is-fullwidth" >
<select class= "maskinputPflicht" id= "fldVizRenderer" NAME= "fldVizRenderer" tabindex= "1" onChange= "resetChartPropertiesForm();" >
<xsl:if test= "$availableRendererPlot='true'" >
<option class= "maskinput" value= "plot" selected= "selected" > Observable Plot</option>
</xsl:if>
<xsl:if test= "$availableRendererD3='true'" >
<option class= "maskinput" value= "d3js" > D3JS</option>
</xsl:if>
<xsl:if test= "$availableRendererD3V3='true'" >
<option class= "maskinput" value= "d3jsv3" > D3JS (Version 3)</option>
</xsl:if>
</select>
</div>
</p>
</div>
<xsl:call-template name= "Infobutton" />
</div>
</div>
</div>
<!-- Beginn Eigenschaften+ Vorschau -->
<div class= "columns" >
<div class= "column is-one-third" >
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > <strong > Layoutmerkmale</strong> </label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </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>
<!-- Box Diagrammelemente -->
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > <strong > Diagrammelemente</strong> </label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<a
onClick="showChartPropertiesFormDiv('ChartElementsDiv','ChartElementListDiv',document.getElementById('fldVizRenderer').value);">
<span class= "icon" >
<img src= "../images/icons/more.svg" title= "Laden" />
</span>
</a>
</div>
<div id= "ChartElementsDiv" style= "display:none" >
<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;" />
<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" >   </span> <a onClick= "removeChartElementConfig()" > <img src= "../images/minus-circled.svg" width= "12" height= "12" title= "Letztes Element entfernen" /> </a>
</div>
<div id= "ChartElementConfig1Div" > </div>
<div id= "ChartElementConfig2Div" > </div>
</div>
</div> <!-- Ende der Spalte Eigenschaften -->
<div class= "column" >
<p class= "bd-notification is-fojeisj" > Vorschau</p>
<div id= "chartCanvas" >
<div id= "chartDiv" >
<svg >
<rect x= "0" y= "0" width= "650" height= "450" fill= "#cccccc" > </rect>
</svg> </div>
</div>
</div>
</div> <!-- Ende Eigenschaften + Vorschau viewBox="0 0 650 450" -->
</form>
</div>
<!--
<div class= "label-container" >
<label class= "label is-required is-small" > <strong > Basismerkmale</strong> </label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > Diagramm-Typ</label>
</div>
<div class= "field is-active" >
<p class= "control-new" >
<div class= "select is-small is-fullwidth" >
<select class= "maskinputPflicht" id= "viz_chart_type" NAME= "viz_chart_type" tabindex= "200" onChange= "prepareChartProperties(this.value)" >
<option class= "maskinput" value= "" selected= "selected" > Bitte wählen Sie</option>
<xsl:for-each select= "/ergebnisse/ergebnis/ergebniselement/vizTypes/vizType" >
<option class= "maskinput" value= "{@uniquename}" > <xsl:value-of select= "@caption" /> </option>
</xsl:for-each>
</select>
</div>
</p>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "info" onclick= "window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');" >
<figure class= "image is-24x24" >
<img src= "../images/information_grey_liberation.svg" />
</figure>
</span>
</div>
<div id= "chartPropertiesForm" > </div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
-->
<!-- Formular Erweiterte Layoutmerkmale -->
<!--
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > <strong > Zusatzmerkmale</strong> </label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<a
onClick="showChartPropertiesForm();">
<span class= "icon" >
<img src= "../images/icons/more.svg" title= "Laden" />
</span>
</a>
</div>
<div id= "chartPropertiesFormDetails" style= "display:none" > </div>
-->
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<!-- Aufruf/Anzeige Layout - Vorschau -->
<!--
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > <strong > Layout-Vorschau</strong> </label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<a
onClick="showChartDiv('chartDiv');">
<span class= "icon" >
<img src= "../images/icons/more.svg" title= "Laden" />
</span>
</a>
</div>
<div id= "chartCanvas" >
<div id= "chartDiv" > </div>
</div>
-->
<!-- footer (BF nach unten verschoben) -->
<footer class= "card-footer" >
<p class= "card-footer-item" > <button class= "button is-link is-outlined is-small" type= "submit" onClick= "alert('noch nicht implementiert)');" > Speichern</button> </p>
<p class= "card-footer-item" > <button class= "button is-link is-outlined is-small" type= "reset" onClick= "return resetChartPropertiesForm();" > Zurücksetzen</button> </p>
</footer>
</xsl:template>
<xsl:template name= "diagrammnutzung" >
<!-- Aufruf/Anzeige Diagramm - Vorschau -->
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > <strong > Diagramm-Vorschau</strong> </label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<!-- <button class="button is - small is - rounded is - white is - outlined"
onClick="createChart('chartDiv2');">
<span class= "icon is-small" > <i class= "../images/more.svg" > </i>
<img src= "../images/more.svg" title= "Laden" />
</span>
</button> -->
<a
onClick="showChartDiv('chartDiv2'); renderChart('chartDiv2',myChartModel);">
<span class= "icon" >
<img src= "../images/icons/more.svg" title= "Laden" />
</span>
</a>
</div>
<div id= "chartCanvas" > <!-- class="section" -->
<!-- <div id="chartCanvasHeader"> </div> -->
<div id= "chartDiv2" > </div>
<!-- <div id="chartCanvasFooter"></div> -->
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<!-- Aufruf/Anzeige SVG - Quellcode -->
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > <strong > Diagramm-Code (svg)</strong> </label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<!-- <button class="button is - small is - rounded is - white is - outlined"
onClick="showSrcCode();">
<span class= "icon is-small" > <i class= "../images/more.svg" > </i>
<img src= "../images/more.svg" title= "Laden" />
</span>
</button> -->
<a
onClick="showSrcCode(myChartModel.renderer);">
<span class= "icon" >
<img src= "../images/icons/more.svg" title= "Laden" />
</span>
</a>
</div>
<div id= "chartSVGsrcDiv" > <!-- class="section"> -->
<div id= "chartSVGsrc" style= "display:none" >
<textarea id= "chartSrc" name= "chartSrc" class= "textarea" placeholder= "Quellcode..." > <!-- cols="100" rows="20" --> </textarea> <!-- <button class="sx_buttondiv_submit" onClick="copySrcCode('chartSrc');">Kopieren</button> -->
</div>
</div>
<!-- chartModel -->
<div class= "field is-grouped" >
<div class= "label-container" >
<label class= "label is-required is-small" > <strong > Diagramm-Code (js)</strong> </label>
</div>
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<a
onClick="showChartModelCode();">
<span class= "icon" >
<img src= "../images/icons/more.svg" title= "Laden" />
</span>
</a>
</div>
<div id= "chartModelsrcDiv" > <!-- class="section"> -->
<div id= "chartModelsrc" style= "display:none" >
<textarea id= "chartModelSrcCode" name= "chartModelSrcCode" class= "textarea" placeholder= "Quellcode..." > <!-- cols="100" rows="20" --> </textarea> <!-- <button class="sx_buttondiv_submit" onClick="copySrcCode('chartSrc');">Kopieren</button> -->
</div>
</div>
<!-- footer (BF eingefügt *** Klärungsbedarf bzgl. notwendiger Buttons) -->
<footer class= "card-footer" >
<!-- <p class="card - footer - item"><button class="button is - link is - outlined is - small" onClick="createChart();">Diagramm - Vorschau</button></p> -->
<p class= "card-footer-item" > <button class= "button is-link is-outlined is-small" type= "submit" onClick= "copySrcCode('chartSrc');" > Kopieren</button> </p>
<!-- <p class="card - footer - item"><button class="button is - link is - outlined is - small" type="reset">Zurücksetzen</button></p> -->
</footer>
</xsl:template>
<xsl:template name= "Infobutton" >
<xsl:param name= "targetUrl" select= "'https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm'" />
<span class= "separator" >   </span>
<span class= "separator" >   </span>
<span class= "info" >
<xsl:attribute name= "onclick" >
<xsl:text > window.open('</xsl:text>
<xsl:value-of select= "$targetUrl" />
<xsl:text > ','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');</xsl:text>
</xsl:attribute>
<figure class= "image is-24x24" >
<img src= "../images/information_grey_liberation.svg" />
</figure>
</span>
</xsl:template>
</xsl:stylesheet>
