Formatierung Schrift Sankey Charts #6

src-modules/module/viz/schluesseltabellen/viz_property.unl

@@ -51,3 +51,4 @@
 94^Y: Linie^line_y^true^ ^0^true|false^0^2^21^Linie Y-Achse^602^^^boolean^
 95^Dimension 1^dimension1^^ ^0^ ^0^1^5^ ^608^^^string^
 96^Dimension 2^dimension2^^ ^0^ ^0^1^5^ ^608^^^string^
+97^Leerzeilen-Maskierung^null_value_mask^ ^ ^0^ ^0^1^10^Text, der ersetzt wird, wenn eine Dimension leer ist, z.B. *Andere Hochschule* bei BA-MA-Übergang^700^^^string^

src-modules/module/viz/schluesseltabellen/viz_property_group_renderer.unl

@@ -4,3 +4,4 @@
 4^2^20^color^
 5^2^21^y^
 6^2^22^color^
+7^1^19^values^

src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl

@@ -25,3 +25,4 @@
 27^2^79^text^
 28^2^93^line^
 29^2^94^line^
+30^1^97^null_value_mask^

src-modules/module/viz/schluesseltabellen/viz_type_property.unl

@@ -223,7 +223,6 @@
 241^7^5^0^202^
 242^7^6^0^204^
 243^7^7^0^203^
-244^7^8^0^305^
 245^7^11^0^604^
 246^7^12^0^605^
 247^7^13^0^603^
@@ -299,7 +298,6 @@
 317^9^5^0^202^
 318^9^6^0^204^
 319^9^7^0^203^
-320^9^8^0^305^
 321^9^11^0^604^
 322^9^12^0^605^
 323^9^13^0^603^
@@ -382,3 +380,7 @@
 400^3^24^0^410^
 401^6^78^0^400^
 402^6^24^0^410^
+403^12^97^0^100^
+404^12^6^10^0^
+405^12^7^0^0^
+406^12^5^20^0^

superx/xml/js/viz/viz_functions.js

@@ -1223,9 +1223,10 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render
 		{
 		var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,"");
 		commonChartPropertyGroups.push(newcommonChartPropertyGroup);
-		}
 		previousGroup=groupUniquename;
 		}
+	
+	}
 	const columnDiv = document.createElement("div");
 	for(var i=0;i < commonChartPropertyGroups.length;i++)
 	{
@@ -2529,11 +2530,12 @@ if(numberOfChildNodes>0)
 {
 	switch (renderer) {
 		case "plot":
-		var myFigure=myChartDiv.childNodes[0];
-		if(myFigure.childNodes.length>0)
+			for (var i=0;i<numberOfChildNodes;i++)
 			{
-			var mySvg=myFigure.childNodes[0];
-			svg_xml = (new XMLSerializer).serializeToString(mySvg);
+				var myNode=myChartDiv.childNodes[i];
+				var mySvg=myNode; 
+			// Extract the data as SVG text string
+				svg_xml += (new XMLSerializer).serializeToString(mySvg);
 				}
 		break;
 		case "d3js":
@@ -2542,7 +2544,7 @@ if(numberOfChildNodes>0)
 			var myNode=myChartDiv.childNodes[i];
 			if(myNode.nodeName=="svg")
 				{
-			var mySvg=myNode; //document.getElementById("chartSVG");
+			var mySvg=myNode; 
 			// Extract the data as SVG text string
 			svg_xml = (new XMLSerializer).serializeToString(mySvg);
 				}
@@ -2576,6 +2578,7 @@ else
 }
 
 
+
 function showChartModelCode()
 {
 var mySrcDiv=document.getElementById("chartModelsrc");
@@ -2781,7 +2784,9 @@ for (let i = 1; i < 4; i++) {
 function makeSankeyD3(myCommonChartProperties,mySvg,data,metaData,chartElem)
 {
 // load the data
-var captionEmptyTarget="Leer";
+var captionEmptyTarget=getCommonChartPropertyFromModel(myCommonChartProperties,"null_value_mask");
+if(captionEmptyTarget=="")
+	captionEmptyTarget="Leer";
 var sNodes=getSankeyNodes(data,captionEmptyTarget); //graph.nodes;
 var sLinks=getSankeyLinks(sNodes,data); //graph.links;
 renderSankey(myCommonChartProperties,mySvg,sNodes,sLinks);
@@ -2902,7 +2907,15 @@ var margin = { top: 10, right: 10, bottom: 10, left: 10 },
 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");
+if(textColor=="")
+	textColor="#3f3f3f";
+var fontSize=getCommonChartPropertyFromModel(myCommonChartProperties,"fontSize");
+if(fontSize=="")
+	fontSize="12pt";
+var fontFamily=getCommonChartPropertyFromModel(myCommonChartProperties,"fontFamily");
+if(fontFamily=="")
+	fontFamily="sans-serif";
 // append the svg object to the body of the page
 /*const sankeyDiv = svg.selectAll("g")
     .attr("transform",
@@ -2955,7 +2968,7 @@ var graph=sankey(data);
 		  var col = "rgb(" + r + "," + g + "," + b + ")";
 		  return d.color = col;
         })
-
+        /*.style("fill", d3.schemaPastel2)*/
 
 
 
@@ -2985,7 +2998,21 @@ var graph=sankey(data);
 
     // add in the title for the nodes
     node.append("text")
-        .style("fill", "#3f3f3f")
+        .style("fill", textColor)
+        .attr("x", function (d) { return d.x0 - 6; })
+        .attr("y", function (d) { return (d.y1 + d.y0) / 2; })
+        .attr("dy", "0.35em")
+		.attr("font-size",fontSize)
+		.attr("font-family",fontFamily)
+        .attr("text-anchor", "end")
+        .text(function (d) { return d.name; })
+        .filter(function (d) { return d.x0 < width / 2; })
+        .attr("x", function (d) { return d.x1 + 6; })
+        .attr("text-anchor", "start")
+        ;
+           // add in the title for the nodes
+    /*node.append("text")
+        .style("fill", textColor)
         .attr("x", function (d) { return d.x0 - 6; })
         .attr("y", function (d) { return (d.y1 + d.y0) / 2; })
         .attr("dy", "0.35em")
@@ -2995,5 +3022,19 @@ var graph=sankey(data);
         .filter(function (d) { return d.x0 < width / 2; })
         .attr("x", function (d) { return d.x1 + 6; })
         .attr("text-anchor", "start")
+        ;*/
+    // add in the value labels for the nodes
+    node.append("text")
+        .style("fill", textColor)
+        .attr("x", function (d) { return d.x0+20; }) //rechte Seite
+        .attr("y", function (d) { return (d.y1 + d.y0) / 2; })
+        .attr("dy", "0.35em")
+		.attr("font-size",fontSize)
+		.attr("font-family",fontFamily)
+        .attr("text-anchor", "start")
+        .text(function (d) { return d.value; })
+        .filter(function (d) { return d.x0 < width / 2; })
+        .attr("x", function (d) { return d.x1 -40; }) //linke Seite
+        .attr("text-anchor", "start")
         ;       
 }