Echarts Erstellung von Serien in Diagrammen #17

src-modules/module/viz/conf/viz.xml

@@ -1180,7 +1180,6 @@ detail_chart_uniquename  varchar(255)
 
 <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_fuellen.sql" database=""/>
 <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_line_bar_fuellen.sql" database=""/>
-<nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_line_bar_series_fuellen.sql" database=""/>
 <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_pie_fuellen.sql" database=""/>
 
 <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_d3js_fuellen.sql" database=""/>
@@ -1373,7 +1372,6 @@ detail_chart_uniquename  varchar(255)
 
 <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_fuellen.sql" database=""/>
 <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_line_bar_fuellen.sql" database=""/>
-<nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_line_bar_series_fuellen.sql" database=""/>
 <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_pie_fuellen.sql" database=""/>
 
 <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_d3js_fuellen.sql" database=""/>

src-modules/module/viz/schluesseltabellen/viz_properties_echarts_fuellen.sql

@@ -764,7 +764,7 @@
 },
 { "caption":"Äußerer Radius in %",
 "prop_uniquename":"outerRadius",
-"explanation":"Äußerer Radius bei Tortendiagrammen (Faktor in %). Parameter definiert den Anteil des Kreises am ganzen Rechteck",
+"explanation":"Äußerer Radius bei Tortendiagrammen (Faktor in %). Parameter definiert den Anteil des Kreises am ganzen Rechteck. Wird bei Serien-Kreisdiagrammen nicht ausgewertet bzw. automatisch berechnet.",
 "prop_default":"80",
 "prop_unit":"%",
 "is_generic":"0",

src-modules/module/viz/schluesseltabellen/viz_properties_echarts_line_bar_fuellen.sql

@@ -37,6 +37,7 @@
 "is_mandatory":"1"},
 {"viz_property_uniquename":"y",
 "is_mandatory":"1"},
+{"viz_property_uniquename":"stroke","is_mandatory":"0"},
 {"viz_property_uniquename":"xAxisNode"},
 {"viz_property_uniquename":"xAxisName"},
 {"viz_property_uniquename":"xAxisNameLocation"},

src-modules/module/viz/schluesseltabellen/viz_properties_echarts_line_bar_series_fuellen.sql

@@ -1,4 +1,5 @@
 --Freemarker Template
+--obsolet
 <#include "SQL_lingua_franca"/>
 <#include "SuperX_general"/>
 <#include "VIZ-Makros"/>

src-modules/module/viz/schluesseltabellen/viz_properties_echarts_pie_fuellen.sql

@@ -21,6 +21,7 @@
 "is_mandatory":"1"},
 {"viz_property_uniquename":"measure1",
 "is_mandatory":"1"},
+{"viz_property_uniquename":"stroke","is_mandatory":"0"},
 {"viz_property_uniquename":"innerRadius"},
 {"viz_property_uniquename":"outerRadius"},
 {"viz_property_uniquename":"cornerRadiusRounded"}

src-modules/module/viz/upgrade/viz_upgrade_man.sql

@@ -51,3 +51,11 @@ alter table dim_studiengang add column ist_lehramt smallint default 0;
 update themenbaum set gueltig_bis=date_val('01.01.2000') where maskeninfo_id=44100;
 update viz_chart set chart_active=0
 where uniquename in ('STUD_FAK_ABGRP_STG_SUNBURST','STUD_FAK_KURZ_PIE','STUD_FAK_KURZ_DONUT_JB');
+
+delete from viz_type_property where viz_type_id in (
+select T.tid from viz_type T
+where T.uniquename in ('echarts_bar_x_series','echarts_bar_y_series','echarts_line_x_series','echarts_line_y_series'));
+
+delete from viz_type 
+where uniquename in ('echarts_bar_x_series','echarts_bar_y_series','echarts_line_x_series','echarts_line_y_series');
+

superx/xml/js/viz/viz_viewer.js

@@ -160,21 +160,29 @@ function openModalCardDetail(ergebniselementOrdnr)
 }
 
 
-function fillEchartsDataSet(myRs,myRsMetaData,currentChartModel)
+function fillEchartsDataSet(myRs,myRsMetaData,currentChartModel,seriesDistinctColumnValues)
 {
 	var dataset =new Array();
-	
+	var dataset0=new Array();
 	var chartType=(currentChartModel!=null)?currentChartModel.chartElements[0].vizTypeUniquename : "echarts_generic";
 	//Identify dimensions and measures:
 	switch (chartType) {
 			case "echarts_pie":
 				var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1");
 				var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","dimension1");
-     			dataset=fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure1Fldname);
+				var seriesFldname=getChartElementPropertyValueFromModel(currentChartModel,"1","stroke");
+				dataset0={source:fillEchartsDataSetNameValue(rs[0],rsColumnMetaData[0],dimension1Fldname,measure1Fldname,seriesFldname,seriesDistinctColumnValues)};
+				dataset.push(dataset0);
+     			//dataset=fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure1Fldname,seriesFldname,seriesDistinctColumnValues);
+     			if(seriesFldname && seriesDistinctColumnValues && seriesDistinctColumnValues.length>0)
+     			{
+				dataset=(getEchartsDatasetWithTransformFilters(dataset,seriesFldname,seriesDistinctColumnValues));
+				}
+			
 			break;
 			case "echarts_bar_y_series":
 			case "echarts_line_y_series":
-			
+			//obsolet
 				var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","stroke");
 				var seriesSelectionLine=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"series_selection_line");
 				var seriesSelectionColumn=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"series_selection_column");
@@ -182,14 +190,46 @@ function fillEchartsDataSet(myRs,myRsMetaData,currentChartModel)
 			break;
 			case "echarts_generic":
 				dataset=fillEchartsDataSetSimpleCopy(myRs,myRsMetaData);
-			break;			default:
-				dataset=fillEchartsDataSetSimpleCopy(myRs,myRsMetaData);
+			break;			
+			default:
+				//dataset=fillEchartsDataSetSimpleCopy(myRs,myRsMetaData);
+				var seriesFldname=getChartElementPropertyValueFromModel(currentChartModel,"1","stroke");
+				dataset0=fillEchartsDataSetSimpleCopy(myRs,myRsMetaData);
+				//{source:fillEchartsDataSetNameValue(rs[0],rsColumnMetaData[0],dimension1Fldname,measure1Fldname,seriesFldname,seriesDistinctColumnValues)};
+				dataset.push(dataset0);
+     			//dataset=fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure1Fldname,seriesFldname,seriesDistinctColumnValues);
+     			if(seriesFldname && seriesDistinctColumnValues && seriesDistinctColumnValues.length>0)
+     			{
+				dataset=(getEchartsDatasetWithTransformFilters(dataset,seriesFldname,seriesDistinctColumnValues));
+				}
+
 			break;
 			}
 	
 	
 	return dataset;
 }
+function getEchartsDatasetWithTransformFilters(myDataset,seriesFieldname,seriesDistinctColumnValues)
+{
+	
+	var i=0;
+	seriesDistinctColumnValues.forEach((row) => {
+		
+	var transformObj={
+      transform: {
+        type: 'filter',
+        config: { dimension: seriesFieldname, value: row}
+      }
+    }
+    i++;
+    if(i<10)
+    {
+		//mehr als 10 Serien sind nicht darstellbar, eigentlich sollten es 2-3 sein
+    	myDataset.push(transformObj);
+    	}
+    });
+    return myDataset;
+}
 function fillEchartsDataSetSeries(myRs,myRsMetaData,dimension1Fldname,seriesSelectionLine,seriesSelectionColumn)
 {
 		var myDimensions=[];
@@ -399,7 +439,7 @@ function fillEchartsDataSetCrosstab(myRs,myRsMetaData,dimension1Fldname,dimensio
 	}*/
 	return datasetSourceRow;
 }
-function fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure1Fldname)
+function fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure1Fldname,seriesFldname,seriesDistinctColumnValues)
 {
 	var datasetSourceRow=new Array();
       var datasetSourceCol=new Array();
@@ -407,13 +447,20 @@ function fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure
 	  var columnCount=myRsMetaData.length;
       var rowCount=myRs.length;
       
-
+	if(seriesFldname)
+	{
+      	datasetSourceCol=[dimension1Fldname,measure1Fldname,seriesFldname];
+      	}
+	else
+	     {
 			datasetSourceCol=[dimension1Fldname,measure1Fldname];
+			}
 	
 	datasetSourceRow.push(datasetSourceCol);
 	//now the data:
 	//bei pie chartdimensions:myDimensionss ist die erste Spalte der Name, die zweite der Wert:
 	var dimension1Value;
+	var seriesFldValue;
 	var measure1Value;
 		myRs.forEach((row) => {
 		for (var col in row) {
@@ -422,11 +469,17 @@ function fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure
 				dimension1Value=row[col];
 			if(col==measure1Fldname)
 				measure1Value=row[col];
+			if(col==seriesFldname)
+				seriesFldValue=row[col];
      			
 	}
 	var datasetSourceCol=new Array();
 	   datasetSourceCol.push(dimension1Value);
        datasetSourceCol.push(measure1Value);
+       if(seriesFldname)
+		{
+			datasetSourceCol.push(seriesFldValue);
+			}
 	      
 	datasetSourceRow.push(datasetSourceCol);
 	
@@ -1472,6 +1525,7 @@ function getPlotOptionsObj(chartPropertiesUsed,currentChartModel)
 /*echarts:*/
 function renderEChart2(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitle)
 {
+      var seriesDistinctColumnValues=new Array();
       //first empty the element, if necessary:
       var chartDivElem=document.getElementById(chartDiv);
       while (chartDivElem.firstChild) {
@@ -1486,7 +1540,12 @@ function renderEChart2(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitl
       var titleText=chartTitle;
       if(chartTitle=="")
       	titleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"caption");
-      var myDataset=fillEchartsDataSet(rs[ergebniselementOrdnr],rsColumnMetaData[ergebniselementOrdnr],currentChartModel);
+		var seriesFieldname=getChartElementPropertyValueFromModel(currentChartModel,"1","stroke");      
+      if(seriesFieldname && seriesFieldname!="")
+      {
+			seriesDistinctColumnValues=getDistinctColumnValues(rs[ergebniselementOrdnr],seriesFieldname);
+		}
+      var myDataset=fillEchartsDataSet(rs[ergebniselementOrdnr],rsColumnMetaData[ergebniselementOrdnr],currentChartModel,seriesDistinctColumnValues);
       if(chartType=="echarts_native_interactive")
       {
 		var option;
@@ -1592,7 +1651,7 @@ function renderEChart2(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitl
 		case "echarts_line_x":
 		case "echarts_line_y":
 		case "echarts_bar_y":
-			option=getEchartOptionsBarLine(currentChartModel,myDataset,chartType,titleText);
+			option=getEchartOptionsBarLine(currentChartModel,myDataset,chartType,titleText,seriesDistinctColumnValues);
 	    break;
 		case "echarts_bar_y_series":
 		case "echarts_line_y_series":
@@ -1600,7 +1659,7 @@ function renderEChart2(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitl
 		break;
 		case "echarts_pie":
       
-	      option=getEchartOptionsPie(currentChartModel,myDataset);
+	      option=getEchartOptionsPie(currentChartModel,myDataset,seriesDistinctColumnValues);
       	break;
 		case "echarts_sankey":
       
@@ -1821,7 +1880,7 @@ function closeModalCardDetail(ergebniselementOrdnr)
 	myModalCard.classList.remove('is-active');
 }
 
-function getEchartOptionsBarLine(currentChartModel,myDataset,chartType,titleText)
+function getEchartOptionsBarLine(currentChartModel,myDataset,chartType,titleText,seriesDistinctColumnValues)
 {
 	//TODO: bar_x und y abfangen'
 	var chartTypes = chartType.split(/_/);
@@ -1846,7 +1905,7 @@ if(orientation=="x")
 var subtitleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"subtitle");
 //var measure1Fldname=getChartPropertyValue(currentChartModel.chartPropertiesUsed,measure1Axis);
 
-var seriesArray=getEchartSeriesArray(currentChartModel,chartType,orientation,dimension1Axis,measure1Axis,myPalette);
+var seriesArray=getEchartSeriesArray(currentChartModel,chartType,orientation,myDataset,dimension1Axis,measure1Axis,seriesDistinctColumnValues,myPalette);
 
 //var dimension1Fldname=getChartPropertyValue(currentChartModel.chartPropertiesUsed,dimension1Axis);
 
@@ -1932,8 +1991,9 @@ var seriesArray=getEchartSeriesArray(currentChartModel,chartType,orientation,dim
 return option;
 
 }
-function getEchartSeriesArray(currentChartModel,chartType,orientation,dimension1Axis,measure1Axis,myPalette)
+function getEchartSeriesArrayAlt(currentChartModel,chartType,orientation,dimension1Axis,measure1Axis,myPalette)
 {
+	//obsolet
 	var seriesArray= new Array();
 	for(var k=0;k < currentChartModel.chartElements.length;k++)  {
 		
@@ -1991,6 +2051,111 @@ function getEchartSeriesArray(currentChartModel,chartType,orientation,dimension1
       
 }
 
+function getEchartSeriesArray(currentChartModel,chartType,orientation,myDataset,dimension1Axis,measure1Axis,seriesDistinctColumnValues,myPalette)
+{
+	var seriesArray= new Array();
+	for(var k=0;k < currentChartModel.chartElements.length;k++)  {
+		
+		var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,k+1,measure1Axis);
+		var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,k+1,dimension1Axis);
+		var encodeObj={x:dimension1Fldname,y:measure1Fldname};
+		var datasource=currentChartModel.dataSources[0].value;
+		var measureCaption=getMetadataOfVizTypeProperty(rsColumnMetaData[datasource],measure1Fldname);
+		
+		if(orientation=="x")
+		encodeObj={y:dimension1Fldname,x:measure1Fldname};
+		var seriesFldname=getChartElementPropertyValueFromModel(currentChartModel,k+1,"stroke");
+		if(seriesFldname && seriesFldname !="")
+		{
+		var dsIndex=1;
+		seriesDistinctColumnValues.forEach((row) => {
+			 var seriesObj=createBarLineSeriesObj(currentChartModel,chartType,orientation,row,encodeObj,dsIndex);
+			 seriesArray.push(seriesObj);
+			dsIndex++;
+			});
+    		  //var sdn=new sankeyDataNode(sourceName,sdnl);
+			
+		}
+		else
+		{ 
+			//keine Serien-Dimension:
+		
+			var mySeriesObj=createBarLineSeriesObj(currentChartModel,chartType,orientation,measureCaption,encodeObj,0);
+      		seriesArray.push(mySeriesObj);
+      }
+      } //Ende Schleife chartElements
+      return seriesArray;
+      
+}
+function getDistinctColumnValues(myRs,fieldname)
+{
+	var distinctValues=new Array();
+	myRs.forEach(row => {
+		  var newName = row[fieldname];
+		  if(newName !="")
+		  {
+			if( distinctValues.length==0)
+			{
+				distinctValues.push(newName);
+			}
+		  else if( distinctValues.length>0 && !distinctValues.includes(newName))
+		  {
+			
+     		  distinctValues.push(newName);
+			 		
+		  }
+		  
+		
+		  }
+		  });
+		  return distinctValues;
+}
+function createBarLineSeriesObj(currentChartModel,chartType,orientation,measureCaption,encodeObj,datasetIndex)
+{
+		var localSeriesObj={
+        type: chartType, //bar,line,
+        name:measureCaption,
+        smooth: true,
+        encode: encodeObj,
+        datasetIndex:datasetIndex,
+        stack:"myStack",
+      	barWidth: '30%',
+      	showBackground: true,
+      	backgroundStyle: {
+        	color: '#dfe4f2'
+      	},
+      	margin: 50,
+      	fontSize: "2em",
+      	colorBy: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"seriesColorBy"),//'series',// 'data',
+      	//color: myPalette,
+      	lineStyle: {
+      	width: 7
+    	},
+      	label: {
+      	show: (getChartPropertyValue(currentChartModel.chartPropertiesUsed,"valueLabelShow")=="false")?false:true, //true
+      	fontWeight:'bolder',
+      	fontSize: "2em",
+      	   distance:30,
+       //offset:[30, 40],
+ 	   //   position:"bottom",
+      /*labelLayout:{}*/
+      position:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"position_valueLabel"), //"bottom",
+      offset: getOffsetValuelabelArray(getChartPropertyValue(currentChartModel.chartPropertiesUsed,"offset_x_valueLabel"),
+      getChartPropertyValue(currentChartModel.chartPropertiesUsed,"offset_y_valueLabel")),
+      	 formatter: function (params) {
+	   	return params.value[params.dimensionNames[params.encode.y[0]]].toLocaleString()
+		}
+      
+    },
+    labelLayout(params) {
+    return getLabelLayout(chartType,params,orientation)
+	}
+
+      };
+      return localSeriesObj;
+}
+
+
 function getEchartOptionsBarLineSeries(currentChartModel,myDataset,chartType,titleText)
 {
 	//TODO: bar_x und y abfangen'
@@ -2180,7 +2345,7 @@ function getEchartOptionsNative(currentChartModel,myDataset)
 	return options;
 	
 }
-function getEchartOptionsPie(currentChartModel,myDataset)
+function getEchartOptionsPie(currentChartModel,myDataset,seriesDistinctColumnValues)
 {
 var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1");
 var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","dimension1");
@@ -2188,12 +2353,32 @@ var titleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"capti
 var subtitleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"subtitle");
 var scheme = getChartPropertyValue(currentChartModel.chartPropertiesUsed,"schemeArray");
 var myPalette=getPaletteArray(scheme,"");
+var echartsSeriesPie=new Array;
+var titleTextArray=new Array;
+if(seriesDistinctColumnValues && seriesDistinctColumnValues.length>1)
+{
+	var dsIndex=1;
+	//bei Serien bekommt jede Torte eine Überschrift:
+	titleTextArray=getSeriesTitleArray(seriesDistinctColumnValues);
+	seriesDistinctColumnValues.forEach((row) => {
+		echartsSeriesPie.push(getEchartsSeriesPie(dsIndex,seriesDistinctColumnValues.length,currentChartModel,myPalette));
+		dsIndex++;
+		});
+}
+else
+{
+	//nur eine Serie:
+	echartsSeriesPie.push(getEchartsSeriesPie(0,0,currentChartModel,myPalette));
+}
 
-var option = {
-  dataset: {
-    source: myDataset
-  },
-  title: {
+var titleObj;
+if(titleTextArray && titleTextArray.length>0)
+{
+	titleObj=titleTextArray;
+}
+else
+{
+	titleObj={
     text: titleText,
     subtext: subtitleText,
     left: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title.left"), //"center",
@@ -2204,15 +2389,54 @@ var option = {
     subtextStyle: {
       fontSize: 15
     }
-  },
+	}
+}
+var option = {
+  dataset: myDataset,
+  title: titleObj,
+  series: echartsSeriesPie
+};
 
-  series: [
+return option;
+
+}
+function getSeriesTitleArray(seriesDistinctColumnValues)
 {
+	var iMax=seriesDistinctColumnValues.length;
+	var titleArray=new Array();
+	var i=1;
+	seriesDistinctColumnValues.forEach((row) => {
+		var xCoord=(i*100/(iMax+1)).toString()+"%";
+		titleArray.push({text: row,left:xCoord });
+		i++;
+		});
+		return titleArray;
+}
+function getEchartsSeriesPie(dsIndex,dsIndexMax,currentChartModel,myPalette)
+{
+	var centerObj=new Array();
+	var outerRadius=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"outerRadius");
+	if(dsIndex==0)
+	{
+		centerObj.push("50%"); //horizontaler Einzug
+		centerObj.push("25%"); //vertikaler Einzug
+	}
+	else
+	{
+		var xCoord=dsIndex*100/(dsIndexMax+1);//bei 2 Grafiken startet die erste bei 33%, die zweite bei 66%
+		//bei 3 Grafiken wären es 25%,50% und 75% 
+		centerObj.push(xCoord.toString()+"%"); //horizontale Ausrichtung 
+		centerObj.push("25%"); //y-Coord
+		outerRadius=100/(dsIndexMax+1);
+		}
+		
+	 var serieObj={
       type: 'pie',// sunburst
       /*encode: {
         value: measure1Fldname,
         name: dimension1Fldname
       },*/
+      center:centerObj,
       tooltip: {
     trigger: "item"
       },
@@ -2242,22 +2466,18 @@ var option = {
 	}*/,
        
       fontSize: 12,
-      radius: [getChartPropertyValue(currentChartModel.chartPropertiesUsed,"innerRadius"),getChartPropertyValue(currentChartModel.chartPropertiesUsed,"outerRadius")],// ['30%', '80%'], //1. Parameter inside radius, macht ihn zum Donut. 2.Parameter definiert den Anteil des Kreises am ganzen Viewport"
+      radius: [getChartPropertyValue(currentChartModel.chartPropertiesUsed,"innerRadius"),outerRadius],// ['30%', '80%'], //1. Parameter inside radius, macht ihn zum Donut. 2.Parameter definiert den Anteil des Kreises am ganzen Viewport"
       color: myPalette,
       itemStyle: {
 		borderRadius: (getChartPropertyValue(currentChartModel.chartPropertiesUsed,"cornerRadiusRounded")=="true" ? [20, 5, 5, 10] :[]),
         //borderRadius: [20, 5, 5, 10], //abgerundete Ecken der Tortenstücke
         borderColor: '#fff',
         borderWidth: 2
+      },
+      datasetIndex: dsIndex
     }
+    return serieObj;
 }
-  ]
-};
-
-return option;
-
-}
-
 function getEchartOptionsSankey(currentChartModel,myDataset)
 {
 var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1");