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

Refactoring chartProperties für D3 #6

viz_worldmap
Daniel Quathamer 2 years ago
parent
732a3b84ea
commit
f75010b5b5
6 changed files with 359 additions and 1017 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. 18
      src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen.sql
  2. 124
      superx/xml/30190_html_chart_sankey.xsl
  3. 124
      superx/xml/30220_html_chart_sankey.xsl
  4. 53
      superx/xml/js/viz/sankey_v3.js
  5. 64
      superx/xml/js/viz/viz_functions.js
  6. 993
      superx/xml/viz_html_chart.xsl

18
src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen.sql
Unescape View File

@ -5,7 +5,8 @@ @@ -5,7 +5,8 @@
<#assign masken = [
{"mask":"16000", "filename":"tabelle_html_datenblatt.xsl", "ord":"1"},
{"mask":"16000", "filename":"viz_html_chart.xsl", "ord":"100"},
{"mask":"30220", "filename":"viz_html_chart_sankey.xsl", "ord":"120"}
{"mask":"30220", "filename":"viz_html_chart_sankey.xsl", "ord":"120"},
{"mask":"30220", "filename":"30220_html_chart_sankey.xsl", "ord":"130"}
] />
<#assign stylesheet = [
@ -16,9 +17,10 @@ @@ -16,9 +17,10 @@
"contenttype":"text/html",
"is_generic":"1"
},
{"filename":"viz_html_chart_sankey.xsl", "caption":"Übergangsdiagramm (Sankey-Diagramm)", "description":"Kreuztabelle Studienanfänger MA und vorheriger BA", "relation":"table", "contenttype":"text/html","is_generic":"0"}
] />
{"filename":"viz_html_chart_sankey.xsl", "caption":"Übergangsdiagramm (Sankey-Diagramm)", "description":"Kreuztabelle Studienanfänger MA und vorheriger BA", "relation":"table", "contenttype":"text/html","is_generic":"0"},
{"filename":"30220_html_chart_sankey.xsl", "caption":"Übergangsdiagramm-Viewer(Sankey-Diagramm)", "description":"Kreuztabelle Studienanfänger MA und vorheriger BA", "relation":"table", "contenttype":"text/html","is_generic":"0"}
] />
<#assign stylesheet_field = [
{"filename":"viz_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"abschluss_vorher_abschluss"},
{"filename":"viz_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"abschluss_vorher_abschlussart"},
@ -26,7 +28,15 @@ @@ -26,7 +28,15 @@
{"filename":"viz_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"einschr_nachher_abschlussart"},
{"filename":"viz_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"einschr_nachher_abschluss"},
{"filename":"viz_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"einschr_nachher_abschlusstyp"},
{"filename":"viz_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"summe"}
{"filename":"viz_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"summe"},
{"filename":"30220_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"abschluss_vorher_abschluss"},
{"filename":"30220_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"abschluss_vorher_abschlussart"},
{"filename":"30220_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"abschluss_vorher_abschlusstyp"},
{"filename":"30220_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"einschr_nachher_abschlussart"},
{"filename":"30220_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"einschr_nachher_abschluss"},
{"filename":"30220_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"einschr_nachher_abschlusstyp"},
{"filename":"30220_html_chart_sankey.xsl", "tablename":"erfolg_ba_ma_uebergang", "fieldname":"summe"}
] />
--Hier eventuell notwendige delete's auf die Tabellen sx_mask_style, sx_stylesheets oder stylesheet_field einfügen.

124
superx/xml/30190_html_chart_sankey.xsl
Unescape View File

@ -0,0 +1,124 @@ @@ -0,0 +1,124 @@
<?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="viz_html_chart.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="'d3jsv3'" />
<xsl:variable name="availableRendererPlot" select="'false'" />
<xsl:variable name="availableRendererD3" select="'false'" />
<xsl:variable name="availableRendererD3V3" 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: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';createViewer();"> <!-- 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>
</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 -->
<xsl:template name="importVizJavascriptLibs">
<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.v3.min.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/viz_functions.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/sankey_v3.js" />
<script language="Javascript" type="text/javascript">
<xsl:text><![CDATA[
function createViewer()
{
var myChartModelStr="{\"id\":1,\"name\":\"\",\"renderer\":\"d3jsv3\",\"dataSources\":[{\"value\":\"0\",\"nr\":1,\"name\":\"Tab. 1\",\"isDefault\":true}],\"targetDiv\":\"\",\"chartElements\":[{\"nr\":0,\"vizTypeUniquename\":\"sankey\",\"caption\":\"sankey\",\"datasource\":\"0\",\"elementTypeProperties\":[{\"nr\":0,\"vizTypePropertyUniquename\":\"viz_dimension1\",\"caption\":\"Kategorie-Dimension 1\",\"propertyValue\":\"abschluss_vorher_semester\"},{\"nr\":0,\"vizTypePropertyUniquename\":\"viz_dimension2\",\"caption\":\"Kategorie-Dimension 2\",\"propertyValue\":\"einschr_nachher_abschluss_str\"},{\"nr\":0,\"vizTypePropertyUniquename\":\"viz_measure1\",\"caption\":\"Maß 1\",\"propertyValue\":\"count\"}]}],\"chartPropertiesUsed\":[{\"name\":\"caption\",\"vizPropertyVariablename\":\"caption\",\"propertyValue\":\"Übergang BA-MA Datenblatt\"}]}";
myChartModel=JSON.parse(myChartModelStr);
renderChart('chartDiv2',myChartModel);
}
]]></xsl:text>
</script>
</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">
<div class="tab-content">
<div id="chartDiv2">
<a onclick="createViewer();"><span>Diagramm anzeigen</span></a>
</div>
</div><!--tab-content -->
</div> <!-- card-content -->
</div><!--card -->
</div> <!-- column -->
</section>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

124
superx/xml/30220_html_chart_sankey.xsl
Unescape View File

@ -0,0 +1,124 @@ @@ -0,0 +1,124 @@
<?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="viz_html_chart.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="'d3jsv3'" />
<xsl:variable name="availableRendererPlot" select="'false'" />
<xsl:variable name="availableRendererD3" select="'false'" />
<xsl:variable name="availableRendererD3V3" 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: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';createViewer();"> <!-- 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>
</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 -->
<xsl:template name="importVizJavascriptLibs">
<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.v3.min.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/viz_functions.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/sankey_v3.js" />
<script language="Javascript" type="text/javascript">
<xsl:text><![CDATA[
function createViewer()
{
var myChartModelStr="{\"id\":1,\"name\":\"\",\"renderer\":\"d3jsv3\",\"dataSources\":[{\"value\":\"0\",\"nr\":1,\"name\":\"Tab. 1\",\"isDefault\":true}],\"targetDiv\":\"chartDiv\",\"chartElements\":[{\"nr\":0,\"vizTypeUniquename\":\"sankey\",\"caption\":\"sankey\",\"datasource\":\"0\",\"elementTypeProperties\":[{\"nr\":0,\"vizTypePropertyUniquename\":\"viz_dimension1\",\"caption\":\"Kategorie-Dimension 1\",\"propertyValue\":\"erfolg_ba_ma_uebergang_abschluss_vorher_abschluss_str\"},{\"nr\":0,\"vizTypePropertyUniquename\":\"viz_dimension2\",\"caption\":\"Kategorie-Dimension 2\",\"propertyValue\":\"erfolg_ba_ma_uebergang_einschr_nachher_abschluss_str\"},{\"nr\":0,\"vizTypePropertyUniquename\":\"viz_measure1\",\"caption\":\"Maß 1\",\"propertyValue\":\"erfolg_ba_ma_uebergang_summe\"}]}],\"chartPropertiesUsed\":[{\"name\":\"caption\",\"vizPropertyVariablename\":\"caption\",\"propertyValue\":\"Übergang BA-MA Datenblatt (Neu)\"}]}";
myChartModel=JSON.parse(myChartModelStr);
renderChart('chartDiv2',myChartModel);
}
]]></xsl:text>
</script>
</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">
<div class="tab-content">
<div id="chartDiv2">
<a onclick="createViewer();"><span>Diagramm anzeigen</span></a>
</div>
</div><!--tab-content -->
</div> <!-- card-content -->
</div><!--card -->
</div> <!-- column -->
</section>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

53
superx/xml/js/viz/sankey_v3.js
Unescape View File

@ -1,66 +1,19 @@ @@ -1,66 +1,19 @@
/*
myNodes[0] = { "node": 0, "name": "Africa" };
myNodes[1] = { "node": 1, "name": "America" };
myNodes[2] = { "node": 2, "name": "Europe" };
myLinks[0] = { "source": 0, "target": 2, "value":1 };
myLinks[1] = { "source": 1, "target": 2, "value":20 };
let my_object1 = {};
my_object1.name = "Africa";
my_object1.node = 0;
myNodes.push(my_object1);
//let my_object2 = {};
my_object1.name = "America";
my_object1.node = 1;
myNodes.push(new Objectmy_object1);
let my_object3 = {};
my_object3.name = "Europe";
my_object3.node = 2;
myNodes.push(my_object3);
let my_Linkobject1 = {};
my_Linkobject1.source = 0;
my_Linkobject1.target = 2;
my_Linkobject1.value = 1;
myLinks.push(my_Linkobject1);
let my_Linkobject2 = {};
my_Linkobject2.source = 1;
my_Linkobject2.target = 2;
my_Linkobject2.value = 20;
myLinks.push(my_Linkobject2);
*/
/*var newNode = new myNode("0","Africa");
myNodes.push(myNode);
var newNode = new myNode("1","America");
myNodes.push(myNode);
var newNode = new myNode("2","Europe");
myNodes.push(myNode);
var newLink = new myLink("0","2",1);
myLinks.push(newLink);
var newLink = new myLink("1","2",2);
myLinks.push(newLink);
*/
function makeSankey(targetDiv,data,metaData,chartElem)
{
var measureCaption = getMeasureCaption(chartElem,metaData); //"Studierende";
var captionEmptyTarget="Kein Master (eigene HS)";
var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 700 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
width = 1200 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom;
var formatNumber = d3.format(",.0f"), // zero decimal places
format = function(d) { return measureCaption+": "+formatNumber(d); },
color = d3.scale.category20();
// append the svg canvas to the page
var clearCanvas=document.getElementById("chartDiv");
var clearCanvas=document.getElementById(targetDiv);
while (clearCanvas.firstChild) {
clearCanvas.removeChild(clearCanvas.firstChild);
}

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

@ -305,6 +305,37 @@ this.getValueResultset = function () { @@ -305,6 +305,37 @@ this.getValueResultset = function () {
}
}
/* Render Model:*/
function renderChartSVGFromModel(currentChartModel,targetDiv) {
var mySVG="";
switch (currentChartModel.renderer) {
case "plot":
mySVG=getChartSVGWithPlot(currentChartModel);
break;
case "d3js":
mySVG=getChartSVGWithD3(currentChartModel);
break;
case "d3jsv3":
renderChartSVGWithD3V3(currentChartModel,targetDiv);
break;
default:
alert("No renderer");
break;
}
return true;
}
function renderChartSVGWithD3V3 (currentChartModel,targetDiv)
{
console.log("using D3JS_v3");
var svgD3=new Object;
for(var k=0;k< currentChartModel.chartElements.length;k++)
{
svgD3=renderChartElementWithD3V3(currentChartModel.chartElements[k],targetDiv);
}
return svgD3;
}
/*Transfer form to model: */
function updateChartModel()
{
@ -413,8 +444,8 @@ function getPlotOptionsObj(chartPropertiesUsed) @@ -413,8 +444,8 @@ function getPlotOptionsObj(chartPropertiesUsed)
function renderChart(chartDiv,currentChartModel)
{
if(document.getElementById("chartName").value=="")
document.getElementById("chartName").value=vizInitialName;
/*if(document.getElementById("chartName").value=="")
document.getElementById("chartName").value=vizInitialName;*/
if(currentChartModel.chartElements.length>0 && currentChartModel.chartElements[0])
{
if(currentChartModel.renderer=="plot")
@ -429,8 +460,9 @@ function renderChart(chartDiv,currentChartModel) @@ -429,8 +460,9 @@ function renderChart(chartDiv,currentChartModel)
else
{
//d3js:
currentChartModel.targetDiv=chartDiv;
currentChartModel.renderChartSVG();
//currentChartModel.targetDiv=chartDiv;
//currentChartModel.renderChartSVG();
renderChartSVGFromModel(currentChartModel,chartDiv);
}
}
else
@ -2201,9 +2233,29 @@ else @@ -2201,9 +2233,29 @@ else
alert("Angezeigte Tabelle wurde in die Zwischenablage kopiert.");
*/
}
function showOptionsCode()
function showChartModelCode()
{
document.getElementById("chartOptionsFields").style.visibility="visible";
var myCodeDiv= document.getElementById("chartModelSrcCode");
var mySrcDiv=document.getElementById("chartModelsrc");
if(mySrcDiv.style.display=="block")
mySrcDiv.style.display="none";
else
mySrcDiv.style.display="block";
var myJson ="";
if(myChartModel)
{
myJson=JSON.stringify(myChartModel);
myCodeDiv.innerHTML=myJson;
}
else
{
myCodeDiv.innerHTML="Kein Quellcode gefunden";
}
}
function copySrcCode(mydiv)

993
superx/xml/viz_html_chart.xsl
View File

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