Browse Source

Refactoring chartProperties für D3 #6

viz_worldmap
Daniel Quathamer 2 years ago
parent
commit
f75010b5b5
  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. 991
      superx/xml/viz_html_chart.xsl

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

@ -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

@ -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

@ -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

@ -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

@ -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)

991
superx/xml/viz_html_chart.xsl

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