diff --git a/src-modules/module/viz/conf/viz.xml b/src-modules/module/viz/conf/viz.xml index 5853c93..0e03573 100644 --- a/src-modules/module/viz/conf/viz.xml +++ b/src-modules/module/viz/conf/viz.xml @@ -1180,7 +1180,6 @@ detail_chart_uniquename varchar(255) - @@ -1373,7 +1372,6 @@ detail_chart_uniquename varchar(255) - diff --git a/src-modules/module/viz/schluesseltabellen/viz_properties_echarts_fuellen.sql b/src-modules/module/viz/schluesseltabellen/viz_properties_echarts_fuellen.sql index 79f2b91..2c88b2e 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_properties_echarts_fuellen.sql +++ b/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", diff --git a/src-modules/module/viz/schluesseltabellen/viz_properties_echarts_line_bar_fuellen.sql b/src-modules/module/viz/schluesseltabellen/viz_properties_echarts_line_bar_fuellen.sql index 9220843..86d8ec1 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_properties_echarts_line_bar_fuellen.sql +++ b/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"}, diff --git a/src-modules/module/viz/schluesseltabellen/viz_properties_echarts_line_bar_series_fuellen.sql b/src-modules/module/viz/schluesseltabellen/viz_properties_echarts_line_bar_series_fuellen.sql index 6f5b499..bf39962 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_properties_echarts_line_bar_series_fuellen.sql +++ b/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"/> diff --git a/src-modules/module/viz/schluesseltabellen/viz_properties_echarts_pie_fuellen.sql b/src-modules/module/viz/schluesseltabellen/viz_properties_echarts_pie_fuellen.sql index aba30b3..6190406 100644 --- a/src-modules/module/viz/schluesseltabellen/viz_properties_echarts_pie_fuellen.sql +++ b/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"} diff --git a/src-modules/module/viz/upgrade/viz_upgrade_man.sql b/src-modules/module/viz/upgrade/viz_upgrade_man.sql index 2fd449e..3374322 100644 --- a/src-modules/module/viz/upgrade/viz_upgrade_man.sql +++ b/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'); + diff --git a/superx/xml/js/viz/viz_viewer.js b/superx/xml/js/viz/viz_viewer.js index 3a7f799..14f6a69 100644 --- a/superx/xml/js/viz/viz_viewer.js +++ b/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; - - datasetSourceCol=[dimension1Fldname,measure1Fldname]; + 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); + 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 option; - + return serieObj; } - function getEchartOptionsSankey(currentChartModel,myDataset) { var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1");