Browse Source

Sankey Chart #6

viz_worldmap
Daniel Quathamer 2 years ago
parent
commit
66ede59762
  1. 171
      src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen_ba_ma_sankey.sql
  2. 9
      superx/xml/30190_html_chart_sankey.xsl
  3. 19
      superx/xml/js/viz/sankey_v3.js
  4. 24
      superx/xml/viz_html_chart.xsl

171
src-modules/module/viz/schluesseltabellen/sx_stylesheets_einfuegen_ba_ma_sankey.sql

@ -0,0 +1,171 @@
--Freemarker Template
--Achtung: Macro fügt Inhalte ein
--Bitte nur Freemarker Variablen füllen
<#assign masken = [
{"mask":"30190", "filename":"30190_html_chart_sankey.xsl", "ord":"130"}
] />
<#assign stylesheet = [
{"filename":"30190_html_chart_sankey.xsl",
"caption":"BA-MA Übergang Diagramm erzeugen",
"description":"Sankey-Diagramm",
"relation":"table",
"contenttype":"text/html",
"is_generic":"0"
}
] />
<#assign stylesheet_field = [
] />
--Hier eventuell notwendige delete's auf die Tabellen sx_mask_style, sx_stylesheets oder stylesheet_field einfügen.
--Achtung: ab hier nicht ändern, Mutterdatei ist $SUPERX_DIR/db/module/sos/schluesseltabellen/sx_stylesheets_fuellen.sql
<@sx_stylesheets_insert
m_masken=masken
m_stylesheet=stylesheet
m_stylesheet_field=stylesheet_field
/>
<#macro sx_stylesheets_insert m_masken m_stylesheet m_stylesheet_field>
--Sicherstellen, dass keine Duplikate vorkommen:
--####################################################################################################
<#foreach column in m_masken>
delete from sx_mask_style where maskeninfo_id=${column.mask} and stylesheet_id in (select tid from sx_stylesheets where filename ='${column.filename}') and ord=${column.ord};
</#foreach>
<#foreach column in m_stylesheet_field>
delete from stylesheet_field where stylesheet_id in (select tid from sx_stylesheets where filename ='${column.filename}');
</#foreach>
-- Stylesheets füllen
--####################################################################################################
create temp table tmp_stylesheets (
tid serial not null,
filename CHAR(255) ,
caption CHAR(255) ,
description CHAR(255) ,
relation CHAR(10) ,
useragent CHAR(255) ,
contenttype CHAR(200) ,
is_generic smallint
);
create temp table tmp_hilf (tid integer);
insert into tmp_hilf select max(tid) from sx_stylesheets;
update tmp_hilf set tid=1 where tid is null;
<#assign counter_tid = 1 />
<#foreach column in m_stylesheet>
insert into tmp_stylesheets (tid,filename,caption,description,relation,contenttype,is_generic)
select max(tid)+${counter_tid},'${column.filename}',
'${column.caption}',
'${column.description}',
'${column.relation}',
'${column.contenttype}',
${column.is_generic}
from tmp_hilf;
<#assign counter_tid = counter_tid + 1 />
</#foreach>
<#if TableFieldExists?exists && TableFieldExists('sx_stylesheets','is_generic')>
update sx_stylesheets set is_generic=1
where filename in (select T.filename from tmp_stylesheets T where T.is_generic=1);
</#if>
--delete für tml_stylesheets hinzugefügt #ak 06.03.2013
delete from tmp_stylesheets where filename in (select filename from sx_stylesheets);
insert into sx_stylesheets (tid,
filename, caption, description, relation, useragent, contenttype
<#if TableFieldExists?exists && TableFieldExists('sx_stylesheets','is_generic')>
,is_generic
</#if>
)
SELECT tid, filename, caption, description, relation, useragent, contenttype
<#if TableFieldExists?exists && TableFieldExists('sx_stylesheets','is_generic')>
,is_generic
</#if>
FROM tmp_stylesheets;
drop table tmp_stylesheets;
-- Mask Style füllen
--####################################################################################################
create temp table tmp_mask_style (
tid serial not null,
maskeninfo_id INTEGER ,
stylesheet_id INTEGER ,
ord SMALLINT,
filename char(255)
);
delete from tmp_hilf;
insert into tmp_hilf select max(tid) from sx_mask_style;
update tmp_hilf set tid=1 where tid is null;
<#assign counter_tid = 1 />
<#foreach column in m_masken>
insert into tmp_mask_style (tid,maskeninfo_id,ord,filename)
select max(tid)+${counter_tid},${column.mask},${column.ord},'${column.filename}' from tmp_hilf;
update tmp_mask_style set stylesheet_id=(select max(tid) from sx_stylesheets where filename='${column.filename}')
where filename='${column.filename}';
<#assign counter_tid = counter_tid + 1 />
</#foreach>
insert into sx_mask_style ( tid, maskeninfo_id, stylesheet_id, ord)
SELECT tid, maskeninfo_id, stylesheet_id, ord
FROM tmp_mask_style;
drop table tmp_mask_style;
--Field zu Stylesheet Zuordnungen:
--####################################################################################################
CREATE temp TABLE tmp_stylesheet_field
(
tid serial NOT NULL,
stylesheet_id INTEGER,
tablename char(255),
fieldname char(255),
filename char(255)
);
delete from tmp_hilf;
insert into tmp_hilf select max(tid) from stylesheet_field;
update tmp_hilf set tid=1 where tid is null;
<#assign counter_tid = 1 />
<#foreach column in m_stylesheet_field>
INSERT INTO tmp_stylesheet_field (tid, filename, tablename, fieldname)
select max(tid)+${counter_tid}, '${column.filename}', '${column.tablename}', '${column.fieldname}' from tmp_hilf;
update tmp_stylesheet_field set stylesheet_id=(select max(tid) from sx_stylesheets where filename='${column.filename}')
where filename='${column.filename}';
<#assign counter_tid = counter_tid + 1 />
</#foreach>
insert into stylesheet_field ( tid, stylesheet_id, tablename, fieldname)
SELECT tid, stylesheet_id, tablename, fieldname
FROM tmp_stylesheet_field;
drop table tmp_stylesheet_field;
drop table tmp_hilf;
<#if SQLdialect='Postgres'>
select sp_update_sequence('sx_stylesheets');
select sp_update_sequence('sx_mask_style');
select sp_update_sequence('stylesheet_field');
</#if>
</#macro>

9
superx/xml/30190_html_chart_sankey.xsl

@ -81,7 +81,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<xsl:text><![CDATA[ <xsl:text><![CDATA[
function createViewer() 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\"}]}"; 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_abschluss_str\"},{\"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); myChartModel=JSON.parse(myChartModelStr);
renderChart('chartDiv2',myChartModel); renderChart('chartDiv2',myChartModel);
} }
@ -99,7 +99,11 @@ renderChart('chartDiv2',myChartModel);
<!-- end Kopf--> <!-- end Kopf-->
<!-- start Grafik--> <!-- start Grafik-->
<xsl:for-each select="ergebnisse"> <xsl:for-each select="ergebnisse">
<xsl:for-each select="ergebnis/ergebniselement">
<p class="title is-5"><xsl:value-of select="../maskenname" /></p>
<xsl:call-template name="legende" />
</xsl:for-each>
<span class="separator">&#160;</span>
<!--Beginn Selektions-Card--> <!--Beginn Selektions-Card-->
<!--Beginn Berichtstitel, Pfad, Knopfleiste--> <!--Beginn Berichtstitel, Pfad, Knopfleiste-->
<section class="hero-body has-background-light"> <section class="hero-body has-background-light">
@ -113,7 +117,6 @@ renderChart('chartDiv2',myChartModel);
<a onclick="createViewer();"><span>Diagramm anzeigen</span></a> <a onclick="createViewer();"><span>Diagramm anzeigen</span></a>
</div> </div>
</div><!--tab-content --> </div><!--tab-content -->
</div> <!-- card-content --> </div> <!-- card-content -->
</div><!--card --> </div><!--card -->

19
superx/xml/js/viz/sankey_v3.js

@ -63,18 +63,27 @@ var sLinks=getSankeyLinks(sNodes,data); //graph.links;
.attr("class", "node") .attr("class", "node")
.attr("transform", function(d) { .attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; }) return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.behavior.drag() /*.call(d3.behavior.drag()
.origin(function(d) { return d; }) .origin(function(d) { return d; })
.on("dragstart", function() { .on("dragstart", function() {
this.parentNode.appendChild(this); }) this.parentNode.appendChild(this); })
.on("drag", dragmove)); .on("drag", dragmove)
)*/
;
// add the rectangles for the nodes // add the rectangles for the nodes
node.append("rect") node.append("rect")
.attr("height", function(d) { return d.dy; }) .attr("height", function(d) { return d.dy; })
.attr("width", sankey.nodeWidth()) .attr("width", sankey.nodeWidth())
.style("fill", function(d) { .style("fill", function(d) {
return d.color = color(d.name.replace(/ .*/, "")); }) //return d.color = color(d.name.replace(/ .*/, ""));
//return d3.scaleLinear().domain([0,3,10]).range(["blue","white","red"]);
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
var col = "rgb(" + r + "," + g + "," + b + ")";
return d.color = col; //"red";
})
.style("stroke", function(d) { .style("stroke", function(d) {
return d3.rgb(d.color).darker(2); }) return d3.rgb(d.color).darker(2); })
.append("title") .append("title")
@ -89,7 +98,7 @@ var sLinks=getSankeyLinks(sNodes,data); //graph.links;
.attr("text-anchor", "end") .attr("text-anchor", "end")
.attr("transform", null) .attr("transform", null)
.text(function(d) { return d.name; }) .text(function(d) { return d.name; })
.filter(function(d) { return d.x < width / 2; }) .filter(function(d) { return d.x < width / 2; })
.attr("x", 6 + sankey.nodeWidth()) .attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start"); .attr("text-anchor", "start");
@ -207,7 +216,7 @@ function getMetadataOfVizTypeProperty(metaData,vizTypePropertyUniquename)
function dragmove(d) { function dragmove(d) {
d3.select(this).attr("transform", d3.select(this).attr("transform",
"translate(" + d.x + "," + ( "translate(" + d.x + "," + (
d.y = Math.max(0, Math.min(height - d.dy, d3.event.y)) d.y = Math.max(0, Math.min(d3.select(this).attr("height") - d.dy, d3.event.y))
) + ")"); ) + ")");
sankey.relayout(); sankey.relayout();
link.attr("d", path); link.attr("d", path);

24
superx/xml/viz_html_chart.xsl

@ -275,7 +275,29 @@ vizTypeProperties.push(newVizTypeProperty);
</script> </script>
<script language="Javascript" type="text/javascript" src="../xml/js/viz/viz_functions.js" /> <script language="Javascript" type="text/javascript" src="../xml/js/viz/viz_functions.js" />
<style type="text/css">
.node rect {
cursor: move;
fill-opacity: .9;
shape-rendering: crispEdges;
}
.node text {
pointer-events: none;
text-shadow: 0 1px 0 #fff;
}
.link {
fill: none;
stroke: #000;
stroke-opacity: .2;
}
.link:hover {
stroke-opacity: .5;
}
</style>
</xsl:template> </xsl:template>
<xsl:template name="viz_canvas"> <xsl:template name="viz_canvas">
@ -382,7 +404,7 @@ vizTypeProperties.push(newVizTypeProperty);
</xsl:otherwise> </xsl:otherwise>
</xsl:choose> </xsl:choose>
</xsl:variable> </xsl:variable>
<xsl:call-template name="navigationsmenue" /> <!--<xsl:call-template name="navigationsmenue" />-->
<script language="Javascript"> <script language="Javascript">
<xsl:text> <xsl:text>

Loading…
Cancel
Save