Visualisierungsmodul für SuperX
http://www.superx-projekt.de/doku/viz_modul/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3431 lines
101 KiB
3431 lines
101 KiB
|
|
|
|
/* |
|
function chartSkeleton(nr, |
|
title, |
|
subtitle, |
|
dimension1Fldname, |
|
dimension1Caption, |
|
hasDimension2, |
|
dimension2Fldname, |
|
dimension2Caption, |
|
measure1Fldname, |
|
measure1Caption, |
|
hasMeasure2, |
|
measure2Fldname, |
|
measure2Caption |
|
) |
|
{ |
|
this.nr=nr; |
|
this.title=title; |
|
this.subtitle=subtitle; |
|
this.dimension1Fldname=dimension1Fldname; |
|
this.dimension1Caption=dimension1Caption; |
|
this.dimension2Fldname=dimension2Fldname; |
|
this.dimension2Caption=dimension2Caption; |
|
this.measure1Fldname=measure1Fldname; |
|
this.measure1Caption=measure1Caption; |
|
this.measure2Fldname=measure2Fldname; |
|
this.measure2Caption=measure2Caption; |
|
this.hasDimension2 = function () { |
|
if(dimension2Fldname && dimension2Fldname !="") |
|
return true; |
|
else |
|
return false; |
|
} |
|
}*/ |
|
function d3dataRow(nr,dimension1,dimension2,measure1 ) |
|
{ |
|
this.nr=nr; |
|
this.dimension1=dimension1; |
|
this.dimension2=dimension2; |
|
this.measure1=measure1; |
|
|
|
} |
|
function commonChartProperty(name, |
|
caption, |
|
isMandatory, |
|
inputType, |
|
staticValues, |
|
range_from, |
|
range_to, |
|
defaultValue, |
|
propUnit, |
|
explanation, |
|
groupCaption, |
|
groupUniquename, |
|
rendererUniquename, |
|
groupVariableName, |
|
variableName, |
|
propValueType, |
|
isGeneric |
|
) |
|
{ |
|
this.name=name; |
|
this.caption=caption; |
|
this.staticValues=staticValues; |
|
this.range_from=range_from; |
|
this.range_to=range_from; |
|
this.isMandatory=isMandatory; |
|
this.inputType=inputType; |
|
this.defaultValue=defaultValue; |
|
this.propUnit=propUnit; |
|
this.explanation=explanation; |
|
this.groupCaption=groupCaption; |
|
this.groupUniquename=groupUniquename; |
|
this.rendererUniquename=rendererUniquename; |
|
this.groupVariableName=groupVariableName; |
|
this.variableName=variableName; |
|
this.propValueType=propValueType; |
|
this.isGeneric=isGeneric; |
|
this.getValueResultset = function () { |
|
var valueOptions=[]; |
|
var optionCounter=0; |
|
var staticValueArray = staticValues.split(/\|/); |
|
for(var j=0;j < staticValueArray.length;j++) |
|
{ |
|
var isDefault=false; |
|
if(staticValueArray[j]) |
|
{ |
|
if(staticValueArray[j]==this.defaultValue) |
|
isDefault=true; |
|
var o=new selectionPropertyValue(optionCounter,staticValueArray[j],staticValueArray[j],isDefault); |
|
valueOptions[optionCounter]=o; |
|
optionCounter++; |
|
} |
|
} |
|
return valueOptions; |
|
} |
|
} |
|
function commonChartPropertyGroup(caption,groupUniquename,groupVariableName) |
|
{ |
|
this.caption=caption; |
|
this.groupUniquename=groupUniquename; |
|
this.groupVariableName=groupVariableName; |
|
} |
|
|
|
function renderEChart(chartCode,chartDiv,ergebniselementOrdnr) |
|
{ |
|
/*obsolete*/ |
|
// Initialize the echarts instance based on the prepared dom |
|
var myChart = echarts.init(document.getElementById(chartDiv),null, { renderer: 'svg' }); |
|
|
|
var datasetSourceRow=new Array(); |
|
var datasetSourceCol=new Array(); |
|
//first header row: |
|
var columnCount=rsColumnMetaData[ergebniselementOrdnr].length; |
|
var rowCount=rs[ergebniselementOrdnr].length; |
|
datasetSourceCol=['Fakultät (Schlüssel)','Fakultät','Anzahl der Studierenden','Anteil der Studierenden (in %)']; |
|
|
|
datasetSourceRow.push(datasetSourceCol); |
|
//now the data: |
|
|
|
for(var i=0;i < rowCount;i++) |
|
{ |
|
var datasetSourceCol=new Array(); |
|
datasetSourceCol.push(rs[ergebniselementOrdnr][i].dim_studiengang_fb); |
|
datasetSourceCol.push(rs[ergebniselementOrdnr][i].dim_studiengang_fb_str); |
|
datasetSourceCol.push(rs[ergebniselementOrdnr][i].summe); |
|
datasetSourceCol.push(rs[ergebniselementOrdnr][i].anteil); |
|
|
|
datasetSourceRow.push(datasetSourceCol); |
|
} |
|
|
|
// Specify the configuration items and data for the chart |
|
var datasetObj={dataset: { |
|
source: datasetSourceRow |
|
} |
|
}; |
|
|
|
//var chartCodeObj = JSON.parse(chartCode); |
|
|
|
let optionsObj = { |
|
...datasetObj, |
|
...chartCode |
|
}; |
|
|
|
|
|
// Display the chart using the configuration items and data just specified. |
|
myChart.setOption(optionsObj); |
|
} |
|
|
|
|
|
|
|
function openModalCardDetail(ergebniselementOrdnr) |
|
{ |
|
var myModalCard=document.getElementById("modalCardDetail"+ergebniselementOrdnr); |
|
myModalCard.classList.add('is-active'); |
|
renderEChart("modalCardDetailImage"+ergebniselementOrdnr,ergebniselementOrdnr); |
|
|
|
} |
|
|
|
|
|
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"); |
|
var seriesFldname=getChartElementPropertyValueFromModel(currentChartModel,"1","stroke"); |
|
dataset0={source:fillEchartsDataSetNameValue(myRs,myRsMetaData,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"); |
|
dataset=fillEchartsDataSetSeries(myRs,myRsMetaData,dimension1Fldname,seriesSelectionLine,seriesSelectionColumn); |
|
break; |
|
case "echarts_generic": |
|
dataset=fillEchartsDataSetSimpleCopy(myRs,myRsMetaData); |
|
break; |
|
case "echarts_sankey": |
|
dataset=myRs; |
|
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=[]; |
|
var mySource=[]; |
|
var colCounter=0; |
|
var colNrOfdimension1Fldname=getColNrOfdimensionFldname(myRsMetaData,dimension1Fldname); |
|
linesWanted=getLineOrColumnNumberArray(myRs.length,seriesSelectionLine); |
|
colsWanted=getLineOrColumnNumberArray(myRsMetaData.length,seriesSelectionColumn); |
|
//zuerst Überschriftenzeile: |
|
var dataRow =[]; |
|
var rowCounter=0; |
|
myRsMetaData.forEach((row) => { |
|
rowCounter++; |
|
if(colsWanted[rowCounter] || rowCounter==colNrOfdimension1Fldname) |
|
{ |
|
for (var col in row) { |
|
{ |
|
if(col=="colcaption" && row[col]) |
|
{ |
|
dataRow.push(row[col]); |
|
} |
|
} |
|
} |
|
} |
|
}); |
|
mySource.push(dataRow); |
|
|
|
//Dann die Daten |
|
var rowCounter=0; |
|
myRs.forEach((row) => { |
|
rowCounter++; |
|
if(linesWanted[rowCounter]) |
|
{ |
|
var dataRow =[]; |
|
colCounter=0; |
|
for (var col in row) |
|
{ |
|
colCounter++; |
|
|
|
if(colsWanted[colCounter] || colCounter==colNrOfdimension1Fldname) |
|
{ |
|
dataRow.push(row[col]); |
|
} |
|
|
|
} |
|
mySource.push(dataRow); |
|
} |
|
}); |
|
|
|
console.log("Matrix:" + JSON.stringify(mySource)); |
|
//TODO:Sorting and filtering |
|
|
|
return {source: mySource }; |
|
} |
|
function getColNrOfdimensionFldname(myRsMetaData,dimensionFldname) |
|
{ |
|
var colnr=0; |
|
var rowCounter=0; |
|
myRsMetaData.forEach((row) => { |
|
rowCounter++; |
|
for (var col in row) { |
|
|
|
if(col=="colname" && row[col]==dimensionFldname) |
|
{ |
|
colnr=rowCounter; |
|
} |
|
} |
|
}); |
|
return colnr; |
|
|
|
} |
|
|
|
function getLineOrColumnNumberArray(elementcount,selectionString) |
|
{ |
|
//*Übergeben wird z.B. ">1",">1 and <5" oder "2,3,6,8" |
|
//alle user-Eingaben müssen -1 genommmen werden, weil der Array schon bei 0 beginnt |
|
var myArray=new Array(elementcount); |
|
var minElement=0; |
|
if(selectionString && selectionString.indexOf(">")!=-1) |
|
{ |
|
// find digit after ">": |
|
var p1=selectionString.split(">"); |
|
var p2=p1[1].split(" "); |
|
minElement=parseInt(p2[0])+2; //e.g. 2 |
|
} |
|
var maxElement=elementcount; |
|
if(selectionString && selectionString.indexOf("<")!=-1) |
|
{ |
|
// find digit before "<": |
|
var p1=selectionString.split("<"); |
|
var p2=p1[1].split(" "); |
|
maxElement=parseInt(p2[0])-1; |
|
} |
|
var singleElement=[]; |
|
if(selectionString && selectionString.indexOf(",")!=-1) |
|
{ |
|
singleElement=selectionString.split(","); |
|
} |
|
|
|
for(i=0;i<elementcount;i++) |
|
{ |
|
var isElementWanted=true; |
|
if(i<minElement || i>maxElement) |
|
isElementWanted=false; |
|
if(singleElement && singleElement.length>0) |
|
{ |
|
isElementWanted=false; |
|
for(j=0;j<singleElement.length;j++) |
|
{ |
|
if(i==parseInt(singleElement[j])-1) |
|
isElementWanted=true; |
|
} |
|
} |
|
myArray[i]=isElementWanted ; |
|
} |
|
return myArray; |
|
} |
|
|
|
function fillEchartsDataSetSimpleCopy(myRs,myRsMetaData) |
|
{ |
|
var myDimensions=[]; |
|
var mySource=[]; |
|
myRsMetaData.forEach((row) => { |
|
for (var col in row) { |
|
console.log(col +"-"+row[col]); |
|
if(col=="colname" && row[col]) |
|
{ |
|
myDimensions.push(row[col]); |
|
} |
|
} |
|
}); |
|
|
|
var rowcount=myRs.length; |
|
var rownr=1; |
|
console.log("Zeilenanzahl " +rowcount); |
|
myRs.forEach((row) => { |
|
mySource.push(row); |
|
rownr++; |
|
} |
|
); |
|
//TODO:Sorting and filtering |
|
|
|
return {dimensions:myDimensions, source: mySource }; |
|
} |
|
function fillEchartsDataSetCrosstab(myRs,myRsMetaData,dimension1Fldname,dimension2Fldname,measure1Fldname) |
|
{ |
|
//TODO, klappt noch nicht |
|
var datasetSourceRow=new Array(); |
|
var datasetSourceCol=new Array(); |
|
|
|
var columnCount=myRsMetaData.length; |
|
var rowCount=myRs.length; |
|
|
|
//zuerst die Überschrift: |
|
//erste Spalte enthält Dimension 1, die weiteren Spalten dann die Ausprägungen von Dimension 2: |
|
var dimension1Value; |
|
var dimension2Value; |
|
var previousDimension1Value=""; |
|
var previousDimension2Value=""; |
|
var measure1Value; |
|
var isFirstTargetRow=true; |
|
myRs.forEach((row) => { |
|
for (var col in row) { |
|
//console.log(col +"-"+row[col]); |
|
if(col==dimension1Fldname) |
|
dimension1Value=row[col]; |
|
if(col==dimension2Fldname) |
|
dimension2Value=row[col]; |
|
if(col==measure1Fldname) |
|
measure1Value=row[col]; |
|
|
|
if(dimension1Value!=previousDimension1Value) |
|
{ |
|
var datasetSourceRow=new Array(); |
|
var datasetSourceCol=new Array(); |
|
datasetSourceCol.push(dimension1Value); |
|
if(dimension2Value!=previousDimension2Value) |
|
datasetSourceCol.push(dimension2Value); |
|
|
|
} |
|
|
|
var datasetSourceCol=new Array(); |
|
datasetSourceCol.push(dimension1Value); |
|
datasetSourceCol.push(measure1Value); |
|
|
|
datasetSourceRow.push(datasetSourceCol); |
|
|
|
} |
|
}); |
|
|
|
//datasetSourceCol=[dimension1Fldname,dimension2Fldname,measure1Fldname]; |
|
|
|
//datasetSourceRow.push(datasetSourceCol); |
|
//now the data: |
|
//bei pie chartdimensions:myDimensionss ist die erste Spalte der Name, die zweite der Wert: |
|
|
|
|
|
|
|
/* |
|
for(var i=0;i < rowCount;i++) |
|
{ |
|
var datasetSourceCol=new Array(); |
|
datasetSourceCol.push(myRs[i].dim_studiengang_fb); |
|
datasetSourceCol.push(myRs[i].summe); |
|
|
|
datasetSourceRow.push(datasetSourceCol); |
|
}*/ |
|
return datasetSourceRow; |
|
} |
|
function fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure1Fldname,seriesFldname,seriesDistinctColumnValues) |
|
{ |
|
var datasetSourceRow=new Array(); |
|
var datasetSourceCol=new Array(); |
|
|
|
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) { |
|
//console.log(col +"-"+row[col]); |
|
if(col==dimension1Fldname) |
|
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); |
|
|
|
}); |
|
|
|
/* |
|
for(var i=0;i < rowCount;i++) |
|
{ |
|
var datasetSourceCol=new Array(); |
|
datasetSourceCol.push(myRs[i].dim_studiengang_fb); |
|
datasetSourceCol.push(myRs[i].summe); |
|
|
|
datasetSourceRow.push(datasetSourceCol); |
|
}*/ |
|
return datasetSourceRow; |
|
} |
|
|
|
/* plot and d3 start:*/ |
|
function renderPlotD3Chart(chartDiv,currentChartModel,ergebniselementOrdnr) |
|
{ |
|
|
|
/*if(document.getElementById("chartName").value=="") |
|
document.getElementById("chartName").value=vizInitialName;*/ |
|
if(currentChartModel.chartElements.length>0 && currentChartModel.chartElements[0]) |
|
{ |
|
renderChartSVGFromModel(currentChartModel,chartDiv,ergebniselementOrdnr); |
|
} |
|
else |
|
document.getElementById(chartDiv).innerHTML="<svg style=\"width:100%;height: auto;\" viewBox=\"0 0 800 600\" width=\"800\" height=\"600\">"+ |
|
"<rect x=\"0\" y=\"0\" width=\"800\" height=\"450\" fill=\"#cccccc\"></rect></svg>"; |
|
// |
|
|
|
} |
|
|
|
/* Render Model:*/ |
|
function renderChartSVGFromModel(currentChartModel,targetDiv,ergebniselementOrdnr,title) { |
|
//first update data if function is defined: |
|
if(currentChartModel.dataTransformation.length>0) |
|
{ |
|
for(var k=0;k< currentChartModel.dataTransformation.length;k++) |
|
{ |
|
var myFunc=currentChartModel.dataTransformation[k]; |
|
for(var row=0;row < rs[ergebniselementOrdnr].length;row++) |
|
{ |
|
rs[ergebniselementOrdnr][row][myFunc.colname]=applyFunction(rs[ergebniselementOrdnr][row][myFunc.colname],myFunc.colfunction); |
|
} |
|
|
|
} |
|
} |
|
switch (currentChartModel.renderer) { |
|
case "plot": |
|
renderChartSVGfromModelWithPlot(currentChartModel,targetDiv,ergebniselementOrdnr); |
|
break; |
|
case "d3js": |
|
renderChartSVGWithD3(currentChartModel,targetDiv,ergebniselementOrdnr); |
|
break; |
|
case "echarts": |
|
renderEChart2(currentChartModel,targetDiv,ergebniselementOrdnr,title); |
|
break; |
|
case "viz": |
|
renderVizBaseTools(currentChartModel,targetDiv,ergebniselementOrdnr,title); |
|
break; |
|
default: |
|
alert("No renderer"); |
|
break; |
|
} |
|
return true; |
|
} |
|
function renderChartSVGfromModelWithPlot (currentChartModel,targetDiv,ergebniselementOrdnr) |
|
{ |
|
console.log("using Plot"); |
|
var myOptions=new Object; |
|
//myOptions.marks=new Array(); |
|
//myOptions.sort=new Array(); |
|
|
|
myOptions=getPlotOptionsObj(currentChartModel.chartPropertiesUsed,currentChartModel); |
|
var marksArray=new Array(); |
|
/*for(var k=0;k< myChartModel.chartPropertiesUsed.length;k++) |
|
{ |
|
}*/ |
|
//first empty marks: |
|
for(var k=0;k< myOptions["marks"].length;k++) |
|
{ |
|
myOptions["marks"][k].pop(); |
|
} |
|
//copy ChartElements to marks: |
|
for(var k=0;k< currentChartModel.chartElements.length;k++) |
|
{ |
|
marksArray[k]=renderChartElementWithPlot(currentChartModel.chartElements[k],ergebniselementOrdnr); |
|
/*Plot.barX(rs_table0, |
|
{ |
|
x: "gesamt", |
|
y: "eintrag", |
|
fill: "blue" |
|
} |
|
*/ |
|
|
|
} |
|
|
|
myOptions["marks"].push(marksArray); |
|
var svgPlot=Plot.plot(myOptions); |
|
var srcPlot=JSON.stringify(myOptions); |
|
if(document.getElementById("chartCodeTextArea")) |
|
document.getElementById("chartCodeTextArea").innerHTML=srcPlot; |
|
document.getElementById(targetDiv).innerHTML=""; |
|
document.getElementById(targetDiv).appendChild(svgPlot); |
|
|
|
//return svgPlot; |
|
} |
|
|
|
function renderChartSVGWithD3 (currentChartModel,targetDiv,ergebniselementOrdnr) |
|
{ |
|
console.log("using D3JS"); |
|
var svgD3=new Object; |
|
for(var k=0;k< currentChartModel.chartElements.length;k++) |
|
{ |
|
svgD3=renderChartElementWithD3(currentChartModel,k,targetDiv,ergebniselementOrdnr); |
|
} |
|
|
|
|
|
//document.getElementById(targetDiv).innerHTML=""; |
|
//document.getElementById(targetDiv).appendChild(svgD3); |
|
} |
|
|
|
function renderChartElementWithD3(currentChartModel,chartElemNr,targetDiv,ergebniselementOrdnr) |
|
{ |
|
|
|
// append the svg canvas to the page |
|
var margin = { top: 10, right: 20, bottom: 10, left: 20 }; |
|
//var margin = { top: 0, right: 50, bottom: 0, left: 0 }, |
|
var width = Number(getChartPropertyFromModel(currentChartModel.chartPropertiesUsed,"width")) ;//margin.left - margin.right; |
|
var height = Number(getChartPropertyFromModel(currentChartModel.chartPropertiesUsed,"height"));//margin.top - margin.bottom; |
|
if(width <20) |
|
width=630; |
|
if(height <20) |
|
height=430; |
|
|
|
var clearCanvas=document.getElementById(targetDiv); |
|
while (clearCanvas.firstChild) { |
|
clearCanvas.removeChild(clearCanvas.firstChild); |
|
} |
|
//targetDiv |
|
|
|
|
|
|
|
chartElem=currentChartModel.chartElements[chartElemNr]; |
|
if(chartElem) |
|
{ |
|
var chartType=chartElem.vizTypeUniquename; |
|
var rsIndexNr=ergebniselementOrdnr; |
|
/*if(rs.length==1) |
|
{ |
|
//if only 1 datasource is given, the indexNr is ignored |
|
//this way a chartModel can be used in a macro *and* a single view |
|
rsIndexNr=0; |
|
}*/ |
|
var myDatasourceRs=rs[rsIndexNr]; |
|
var data=filld3data(rs[rsIndexNr],rsColumnMetaData[rsIndexNr],chartElem); |
|
console.log("Mark-option for "+chartType); |
|
switch (chartType) |
|
{ |
|
case "sankey": |
|
var mySvg = d3.select("#"+targetDiv).append("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.attr("viewBox", [0,0, width+ margin.left + margin.right, height+ margin.top + margin.bottom]) |
|
.append("g") |
|
.attr("transform", |
|
"translate(" + margin.left + "," + margin.top + ")") |
|
; |
|
mySvg=makeSankeyD3(currentChartModel.chartPropertiesUsed,mySvg,data,rsColumnMetaData[chartElem.datasource],chartElem); |
|
break; |
|
case "worldmap": |
|
var mySvg = d3.select("#"+targetDiv).append("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.attr("viewBox", [0,0, width+ margin.left + margin.right, height+ margin.top + margin.bottom]) |
|
.append("g") |
|
.attr("transform", |
|
"translate(" + margin.left + "," + margin.top + ")") |
|
; |
|
mySvg=makeWorldmapD3(currentChartModel.chartPropertiesUsed,mySvg,data,rsColumnMetaData[chartElem.datasource],chartElem); |
|
break; |
|
case "pie": |
|
var backgroundColorSelected=getChartPropertyFromModel(currentChartModel.chartPropertiesUsed,"backgroundColor",false); |
|
var mySvg = d3.select("#"+targetDiv).append("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.attr("viewBox", [-(width+ margin.left + margin.right) / 2, -(height+ margin.top + margin.bottom) / 2, width+ margin.left + margin.right, height+ margin.top + margin.bottom]) |
|
.style("background-color", backgroundColorSelected) |
|
.append("g") |
|
; |
|
mySvg=makePie_d3(currentChartModel.chartPropertiesUsed,mySvg,data,chartElem,width,height); |
|
break; |
|
case "sunburst": |
|
width = 928; |
|
height = width; |
|
|
|
var mySvg = d3.select("#"+targetDiv).append("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.attr("viewBox", [-(width+ margin.left + margin.right) / 2, -(height+ margin.top + margin.bottom) / 2, width+ margin.left + margin.right, height+ margin.top + margin.bottom]) |
|
.append("g") |
|
.attr("transform", |
|
"translate(" + margin.left + "," + margin.top + ")") |
|
; |
|
mySvg=makeSunburstD3(currentChartModel.chartPropertiesUsed,mySvg,rs[0],rsColumnMetaData[chartElem.datasource],chartElem); |
|
|
|
break; |
|
|
|
default: |
|
alert("Unknown chart type"); |
|
break; |
|
} |
|
} |
|
return mySvg; |
|
} |
|
|
|
function makeSunburstD3(myCommonChartProperties,svg,data,metaData,chartElem) |
|
{ |
|
var sorted = d3.sort(data, d => d.dim_studiengang_fb_str,d => d.dim_studiengang_abschluss_grp_str, d => d.dim_studiengang_stg_str, d => d.summe); |
|
var group = d3.group(sorted, d => d.dim_studiengang_fb_str,d => d.dim_studiengang_abschluss_grp_str, d => d.dim_studiengang_stg_str , d => d.summe ); |
|
|
|
//var sorted = d3.sort(data, d => d.dim_studiengang_fb_str,d => d.dim_studiengang_abschluss_grp_str, d => d.measure1); |
|
|
|
//var group = d3.group(sorted, d => d.sos_stg_aggr_sem_rueck_beur_ein_str); |
|
//console.log(group); |
|
|
|
|
|
|
|
//var group = d3.group(sorted, d => d.dim_studiengang_fb_str,d => d.dim_studiengang_abschluss_grp_str, d => d.measure1 ); |
|
var hierarchy = d3.hierarchy(group); |
|
|
|
var level1count=hierarchy.children.length; |
|
console.log("level1count:"+level1count); |
|
var data_str = "{\"name\":\"root\",\"children\":["; |
|
|
|
for(var i=0; i < level1count ; i++){ |
|
console.log("Zeile "+i+ ":" + hierarchy.children[i].data[0]); |
|
data_str+="{\"name\":\""+hierarchy.children[i].data[0]+"\",\"children\":["; |
|
var level2count=hierarchy.children[i].children.length; |
|
for(var j=0; j < level2count ; j++){ |
|
console.log("unterZeile "+j+ ":" + hierarchy.children[i].children[j].data[0]); |
|
data_str+="{\"name\":\""+hierarchy.children[i].children[j].data[0]+"\",\"children\":["; |
|
|
|
/*var level3count=hierarchy.children[i].children[j].children.length; |
|
console.log("level3count: "+level3count); |
|
|
|
for(var k=0; k < level3count ; k++){ |
|
console.log("unterUnterZeile "+k+ ":" + hierarchy.children[i].children[j].children[k].data[0]); |
|
data_str+="{\"name\":\""+hierarchy.children[i].children[j].children[k].data[0]+"\",\"value\":"+hierarchy.children[i].children[j].children[k].children[0].data[0] +"}"; |
|
if(k < level3count -1) |
|
data_str+=","; |
|
|
|
} |
|
*/ |
|
data_str+="]}"; |
|
if(j < level2count -1) |
|
data_str+=","; |
|
} |
|
data_str+="]}"; |
|
if(i < level1count -1) |
|
data_str+=","; |
|
//console.log("Zeile "+i+ ":" + hierarchy.children[i].children[0].data); |
|
} |
|
data_str+="]}" |
|
console.log(data_str); |
|
var dataHierarchy=JSON.parse(data_str); |
|
|
|
return renderSunburst(dataHierarchy,svg); |
|
} |
|
function renderSunburst(data,svg) { |
|
// Specify the chart’s dimensions. |
|
const width = 928; |
|
const height = width; |
|
const radius = width / 6; |
|
|
|
// Create the color scale. |
|
const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1)); |
|
|
|
// Compute the layout. |
|
const hierarchy = d3.hierarchy(data) |
|
.sum(d => d.value) |
|
.sort((a, b) => b.value - a.value); |
|
const root = d3.partition() |
|
.size([2 * Math.PI, hierarchy.height + 1]) |
|
(hierarchy); |
|
root.each(d => d.current = d); |
|
|
|
// Create the arc generator. |
|
const arc = d3.arc() |
|
.startAngle(d => d.x0) |
|
.endAngle(d => d.x1) |
|
.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)) |
|
.padRadius(radius * 1.5) |
|
.innerRadius(d => d.y0 * radius) |
|
.outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1)) |
|
|
|
// Create the SVG container. |
|
// Append the arcs. |
|
const path = svg.append("g") |
|
.selectAll("path") |
|
.data(root.descendants().slice(1)) |
|
.join("path") |
|
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) |
|
.attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0) |
|
.attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") |
|
|
|
.attr("d", d => arc(d.current)); |
|
|
|
// Make them clickable if they have children. |
|
path.filter(d => d.children) |
|
.style("cursor", "pointer") |
|
.on("click", clicked); |
|
|
|
const format = d3.format(",d"); |
|
path.append("title") |
|
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); |
|
|
|
const label = svg.append("g") |
|
.attr("pointer-events", "none") |
|
.attr("text-anchor", "middle") |
|
.style("user-select", "none") |
|
.selectAll("text") |
|
.data(root.descendants().slice(1)) |
|
.join("text") |
|
.attr("dy", "0.35em") |
|
.attr("fill-opacity", d => +labelVisible(d.current)) |
|
.attr("transform", d => labelTransform(d.current)) |
|
.text(d => d.data.name); |
|
|
|
const parent = svg.append("circle") |
|
.datum(root) |
|
.attr("r", radius) |
|
.attr("fill", "none") |
|
.attr("pointer-events", "all") |
|
.on("click", clicked); |
|
|
|
// Handle zoom on click. |
|
function clicked(event, p) { |
|
parent.datum(p.parent || root); |
|
|
|
root.each(d => d.target = { |
|
x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, |
|
x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, |
|
y0: Math.max(0, d.y0 - p.depth), |
|
y1: Math.max(0, d.y1 - p.depth) |
|
}); |
|
|
|
const t = svg.transition().duration(750); |
|
|
|
// Transition the data on all arcs, even the ones that aren’t visible, |
|
// so that if this transition is interrupted, entering arcs will start |
|
// the next transition from the desired position. |
|
path.transition(t) |
|
.tween("data", d => { |
|
const i = d3.interpolate(d.current, d.target); |
|
return t => d.current = i(t); |
|
}) |
|
.filter(function(d) { |
|
return +this.getAttribute("fill-opacity") || arcVisible(d.target); |
|
}) |
|
.attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) |
|
.attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") |
|
|
|
.attrTween("d", d => () => arc(d.current)); |
|
|
|
label.filter(function(d) { |
|
return +this.getAttribute("fill-opacity") || labelVisible(d.target); |
|
}).transition(t) |
|
.attr("fill-opacity", d => +labelVisible(d.target)) |
|
.attrTween("transform", d => () => labelTransform(d.current)); |
|
} |
|
|
|
function arcVisible(d) { |
|
return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; |
|
} |
|
|
|
function labelVisible(d) { |
|
return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; |
|
} |
|
|
|
function labelTransform(d) { |
|
const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; |
|
const y = (d.y0 + d.y1) / 2 * radius; |
|
return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; |
|
} |
|
|
|
return svg.node(); |
|
|
|
} |
|
|
|
function makePie_d3(myCommonChartProperties,svg,data,chartElem,width,height) |
|
{ |
|
//const width = 928; |
|
//const height = Math.min(width, 500); |
|
// Create the color scale. |
|
const radius = Math.min(width, height) / 2; |
|
var innerRadiusPercent = parseFloat(getChartPropertyFromModel(myCommonChartProperties,"innerRadius"),false); |
|
var innnerRadiusComputed= radius * innerRadiusPercent / 100; |
|
var myPalette=getChartPropertyFromModel(myCommonChartProperties,"scheme",false); |
|
var textColor=getChartPropertyFromModel(myCommonChartProperties,"stroke",false); |
|
var cornerRadius=getChartPropertyFromModel(myCommonChartProperties,"cornerRadius",false); |
|
var labelRadiusFactor=parseFloat(getChartPropertyFromModel(myCommonChartProperties,"labelRadiusFactor",false))/100; |
|
if(textColor=="") |
|
textColor="black"; |
|
/*const color = d3.scaleOrdinal() |
|
.domain(data.map(d => d.dimension1)) |
|
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse()) |
|
const color = d3.scaleOrdinal() |
|
.domain(data.map(d => d.dimension1)) |
|
.range(["#8cc277","#78a767","#1d71b8","#5b89c7","#2fac66"]); //Palette HMS |
|
*/ |
|
//const color = d3.scaleOrdinal(d3.schemeAccent); |
|
const color = d3.scaleOrdinal(getD3ColorScheme(myPalette)); |
|
|
|
/*const color = d3.scaleOrdinal() |
|
.domain(data.map(d => d.dimension1)) |
|
.range(d3.schemePastel2) |
|
; |
|
*/ |
|
// Create the pie layout and arc generator. |
|
const pie = d3.pie() |
|
.sort(null) |
|
.value(d => d.measure1); |
|
|
|
const arc = d3.arc() |
|
.innerRadius(innnerRadiusComputed ) |
|
.outerRadius(radius - 1) |
|
.cornerRadius(cornerRadius); |
|
|
|
const labelRadius = arc.outerRadius()() * labelRadiusFactor; |
|
|
|
// A separate arc generator for labels. |
|
const arcLabel = d3.arc() |
|
.innerRadius(labelRadius) |
|
.outerRadius(labelRadius+200); |
|
|
|
const arcs = pie(data); |
|
//svg.width=width; |
|
//svg.height=width; |
|
//d3.select(svg).attr("viewBox",[-width / 2, -height / 2, width, height]); |
|
//svg.style="max-width: 100%; height: auto; font: 10px sans-serif;"; |
|
|
|
/*const svg = d3.create("svg") |
|
.attr("width", width) |
|
.attr("height", height) |
|
.attr("viewBox", [-width / 2, -height / 2, width, height]) |
|
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); |
|
*/ |
|
// Add a sector path for each value. |
|
svg.append("g") |
|
.attr("stroke", "white") |
|
.selectAll() |
|
.data(arcs) |
|
.join("path") |
|
.attr("fill", d => color(d.data.dimension1)) |
|
.attr("d", arc) |
|
.append("title") |
|
.text(d => `${d.data.dimension1}: ${d.data.measure1.toLocaleString("de-DE")}`); |
|
|
|
// Create a new arc generator to place a label close to the edge. |
|
// The label shows the value if there is enough room. |
|
svg.append("g") |
|
.attr("text-anchor", "middle") |
|
.selectAll() |
|
.data(arcs) |
|
.join("text") |
|
.attr("transform", d => `translate(${arcLabel.centroid(d)})`) |
|
.call(text => text.append("tspan") |
|
.attr("y", "-0.4em") |
|
//.attr("font-weight", "bold") |
|
.attr("stroke", textColor) |
|
.attr("fill", textColor) |
|
.text(d => d.data.dimension1)) |
|
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") |
|
.attr("x", 0) |
|
.attr("y", "0.7em") |
|
.attr("fill-opacity", 0.7) |
|
.text(d => d.data.measure1.toLocaleString("de-DE"))); |
|
|
|
//return svg.node(); |
|
return svg.node(); |
|
} |
|
function makeWorldmapD3(myCommonChartProperties,mySvg,data,metaData,chartElem) |
|
{ |
|
// load the data |
|
var captionEmptyTarget=getChartPropertyFromModel(myCommonChartProperties,"null_value_mask"); |
|
renderWorldMap(myCommonChartProperties,mySvg,data); |
|
|
|
} |
|
function renderWorldMap(myCommonChartProperties,mySvg,data) |
|
{ |
|
const worldWidth = 670; |
|
const worldHeight = 450; |
|
|
|
const worldTooltip = d3.select(".vizTooltip"); |
|
|
|
const worldColor = d3.scaleSequential(d3.interpolateBlues) |
|
.domain([0, 1]); // Domain matches the output of logColor |
|
|
|
const worldLogColor = d3.scaleLog() |
|
.domain([1, 41227]) // Adjust this domain to fit your data range |
|
.range([0, 1]); |
|
|
|
const worldSvg = d3.select("#world-map") |
|
.attr("width", worldWidth) |
|
.attr("height", worldHeight); |
|
|
|
const worldProjection = d3.geoMercator() |
|
.scale(100) |
|
.translate([worldWidth / 2, worldHeight / 1.5]); |
|
|
|
const worldPath = d3.geoPath().projection(worldProjection); |
|
var d=getWorldMapData(data); |
|
// Load the world data files |
|
|
|
Promise.all([ |
|
/*d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"),*/ |
|
/*d3.csv("/superx/viz_worldmap/data.csv", d => ({ |
|
iso3: d.iso3, |
|
value: +d.value |
|
}))*/ |
|
d3.json("../xml/js/viz/world.geojson"), |
|
/*getLocalJson("/superx/xml/js/viz/world_superx2.geojson"),*/ |
|
d |
|
]).then(([worldGeojson, worldData]) => { |
|
const worldDataMap = new Map(worldData.map(d => [d.iso3, d.value])); |
|
|
|
mySvg.append("g") |
|
.selectAll("path") |
|
.data(worldGeojson.features) |
|
.enter().append("path") |
|
.attr("d", worldPath) |
|
.attr("fill", d => { |
|
const value = worldDataMap.get(d.id); // Use `d.id` to access ISO 3 codes |
|
if (value === 0) return "#ccc"; // Handle zero values separately |
|
return value ? worldColor(worldLogColor(value)) : "#ccc"; |
|
}) |
|
.on("mouseover", function (event, d) { |
|
const value = worldDataMap.get(d.id); |
|
worldTooltip.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
worldTooltip.html(d.properties.name + "<br>" + (value ? value : "No data")) |
|
.style("left", (event.pageX) + "px") |
|
.style("top", (event.pageY - 28) + "px"); |
|
}) |
|
.on("mouseout", function () { |
|
worldTooltip.transition() |
|
.duration(500) |
|
.style("opacity", 0); |
|
}); |
|
}).catch(error => { |
|
console.error('Error loading or parsing data:', error); |
|
}); |
|
|
|
async function getLocalJson(url) |
|
{ |
|
|
|
try { |
|
const response = await fetch(url); |
|
if (!response.ok) { |
|
throw new Error(`Serverantwort: ${response.status}`); |
|
} |
|
|
|
const myJson = await response.json(); |
|
return myJson; |
|
} catch (error) { |
|
console.log(error.message); |
|
} |
|
|
|
} |
|
|
|
function getWorldMapData(data) |
|
{ |
|
var myData=[]; |
|
|
|
var zs=""; |
|
for (var i = 0; i < data.length; i++) |
|
{ |
|
myData[i] = { "iso3": data[i].dimension1, "value": data[i].measure1 }; |
|
} |
|
return myData; |
|
} |
|
} |
|
|
|
function makeSankeyD3(myCommonChartProperties,mySvg,data,metaData,chartElem) |
|
{ |
|
// load the data |
|
var captionEmptyTarget=getChartPropertyFromModel(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); |
|
//var myChartSVG = SankeyChart(sNodes,sLinks); |
|
} |
|
|
|
|
|
function getSankeyNodes(data,captionEmptyTarget) |
|
{ |
|
//obsolet |
|
var myNodes=[]; |
|
|
|
var distinctSource = []; |
|
var zs=""; |
|
for (var i = 0; i < data.length; i++) |
|
{ |
|
if(zs.indexOf("_" + data[i].dimension1 +"_")<0) |
|
{ |
|
distinctSource.push(data[i].dimension1); |
|
zs+="_" + data[i].dimension1 +"_"; |
|
} |
|
} |
|
for (var i = 0; i < data.length; i++) |
|
{ |
|
if(zs.indexOf("_" + data[i].dimension2 +"_")<0) |
|
{ |
|
distinctSource.push(data[i].dimension2); |
|
zs+="_" + data[i].dimension2 +"_"; |
|
} |
|
} |
|
for (var i = 0; i < distinctSource.length; i++) |
|
{ |
|
myNodes[i] = { "node": i, "name": distinctSource[i] }; |
|
console.log("Abschluss: "+distinctSource[i]); |
|
} |
|
//Kein Abschluss: |
|
myNodes[i] = { "node": i, "name": captionEmptyTarget }; |
|
return myNodes; |
|
} |
|
|
|
function getSankeyLinks(myNodes,data) |
|
{ |
|
//obsolet |
|
var myLinks=[]; |
|
|
|
var linkIndex=0; |
|
for (var i = 0; i < data.length; i++) |
|
{ |
|
if(data[i].dimension2 !="") |
|
{ |
|
myLinks[linkIndex]={ "source": getSankeyNodeIndex(myNodes,data[i].dimension1), |
|
"target": getSankeyNodeIndex(myNodes,data[i].dimension2), "value":data[i].measure1 }; |
|
linkIndex++; |
|
} |
|
else |
|
{ |
|
myLinks[linkIndex]={ "source": getSankeyNodeIndex(myNodes,data[i].dimension1), |
|
"target": myNodes.length-1, "value":data[i].measure1 }; |
|
linkIndex++; |
|
} |
|
} |
|
return myLinks; |
|
} |
|
function getSankeyNodeIndex(myNodes,name) |
|
{ |
|
//obsolet |
|
var myIndex=0; |
|
for (var i = 0; i < myNodes.length; i++) |
|
{ |
|
if(myNodes[i].name==name) |
|
myIndex=i |
|
} |
|
return myIndex; |
|
} |
|
|
|
function getMeasureCaption(chartElem,metaData) |
|
{ |
|
var measureCaption=""; |
|
for(var k=0;k<chartElem.elementTypeProperties.length;k++) |
|
{ |
|
if(chartElem.elementTypeProperties[k].propertyValue!="") |
|
{ |
|
switch (chartElem.elementTypeProperties[k].vizTypePropertyUniquename) |
|
{ |
|
case "viz_measure1": |
|
measure1=chartElem.elementTypeProperties[k].propertyValue; |
|
measureCaption=getMetadataOfVizTypeProperty(metaData,measure1); |
|
if(measureCaption=="") |
|
measureCaption=measure1; |
|
break; |
|
default: |
|
break; |
|
|
|
} |
|
} |
|
|
|
} |
|
return measureCaption; |
|
} |
|
function getMetadataOfVizTypeProperty(metaData,vizTypePropertyUniquename) |
|
{ |
|
var caption=""; |
|
for(var k=0;k<metaData.length;k++) |
|
{ |
|
if(metaData[k].colname==vizTypePropertyUniquename) |
|
{ |
|
caption=metaData[k].colcaption; |
|
} |
|
|
|
|
|
} |
|
return caption; |
|
} |
|
function renderSankey(myCommonChartProperties,svg,sNodes,sLinks) |
|
{ |
|
//obsolet |
|
// set the dimensions and margins of the graph |
|
var margin = { top: 10, right: 10, bottom: 10, left: 10 }, |
|
//var margin = { top: 0, right: 50, bottom: 0, left: 0 }, |
|
width = getChartPropertyFromModel(myCommonChartProperties,"width") - margin.left - margin.right, |
|
height = getChartPropertyFromModel(myCommonChartProperties,"height") - margin.top - margin.bottom; |
|
if(width <20) |
|
width=630; |
|
if(height <20) |
|
height=430; |
|
|
|
// format variables |
|
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=getChartPropertyFromModel(myCommonChartProperties,"color"); |
|
if(textColor=="") |
|
textColor="#3f3f3f"; |
|
var fontSize=getChartPropertyFromModel(myCommonChartProperties,"fontSize"); |
|
if(fontSize=="") |
|
fontSize="12pt"; |
|
var fontFamily=getChartPropertyFromModel(myCommonChartProperties,"fontFamily"); |
|
if(fontFamily=="") |
|
fontFamily="sans-serif"; |
|
// append the svg object to the body of the page |
|
/*const sankeyDiv = svg.selectAll("g") |
|
.attr("transform", |
|
"translate(" + margin.left + "," + margin.top + ")"); |
|
*/ |
|
// Set the sankey diagram properties |
|
var sankey = d3.sankey() |
|
.nodeWidth(100) |
|
.nodePadding(40) |
|
.size([width, height]); |
|
|
|
var path = sankey.links(); |
|
var data=new Object; |
|
data.nodes=sNodes; |
|
data.links=sLinks; |
|
var graph=sankey(data); |
|
|
|
// add in the links |
|
var link = svg.append("g").selectAll(".link") |
|
.data(graph.links) |
|
.enter().append("path") |
|
.attr("class", "link") |
|
.attr("d", d3.sankeyLinkHorizontal()) |
|
.attr("stroke-width", function (d) { return d.width; }); |
|
|
|
// add the link titles |
|
link.append("title") |
|
.text(function (d) { |
|
return d.source.name + " → " + |
|
d.target.name+": "+d.value; |
|
}); |
|
|
|
// add in the nodes |
|
var node = svg.append("g").selectAll(".node") |
|
.data(graph.nodes) |
|
.enter().append("g") |
|
.attr("class", "node") |
|
|
|
|
|
// add the rectangles for the nodes |
|
node.append("rect") |
|
.attr("x", function (d) { return d.x0; }) |
|
.attr("y", function (d) { return d.y0; }) |
|
.attr("height", function (d) { return d.y1 - d.y0; }) |
|
.attr("width", sankey.nodeWidth()) |
|
.style("fill", function (d) { |
|
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; |
|
}) |
|
/*.style("fill", d3.schemaPastel2)*/ |
|
|
|
|
|
|
|
// Attempt at getting whole length of link to highlight |
|
.on("mouseover", function (d) { |
|
link |
|
.transition() |
|
.duration(300) |
|
.style("stroke-opacity", function (l) { |
|
return l.source === d || l.target === d ? 0.5 : 0.2; |
|
}); |
|
}) |
|
.on("mouseleave", function (d) { |
|
link |
|
.transition() |
|
.duration(300) |
|
.style("stroke-opacity", 0.2); |
|
}) |
|
|
|
|
|
|
|
// Node hover titles |
|
.append("title") |
|
.text(function (d) { |
|
return d.name + "\n" + format(d.value); |
|
}); |
|
|
|
// 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") |
|
.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") |
|
|
|
.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 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") |
|
; |
|
} |
|
function renderChartElementWithPlot(chartElem,ergebniselementOrdnr) |
|
{ |
|
var plotMark=new Object; |
|
if(chartElem) |
|
{ |
|
var chartType=chartElem.vizTypeUniquename; |
|
var rsIndexNr=ergebniselementOrdnr; |
|
/*if(rs.length==1) |
|
{ |
|
//if only 1 datasource is given, the indexNr is ignored |
|
//this way a chartModel can be used in a macro *and* a single view |
|
rsIndexNr=0; |
|
}*/ |
|
var myDatasourceRs=rs[rsIndexNr]; |
|
var optionString=prepareChartPropertiesForPlotMark(chartType,chartElem); |
|
|
|
console.log("Mark-option for "+chartType+":"+ optionString); |
|
var markOptions=JSON.parse(optionString); |
|
switch (chartType) |
|
{ |
|
case "bar_x": |
|
plotMark=Plot.barX(myDatasourceRs,markOptions); |
|
break; |
|
/* case "bar_x_stacked": |
|
plotMark=Plot.barX(myDatasourceRs,markOptions); |
|
break;*/ |
|
case "bar_x_alt": |
|
makeBarX(svg,data); |
|
break; |
|
case "bar_y": |
|
plotMark=Plot.barY(myDatasourceRs,markOptions); |
|
break; |
|
case "area_x": |
|
plotMark=Plot.areaX(myDatasourceRs,markOptions); |
|
break; |
|
case "area_y": |
|
plotMark=Plot.areaY(myDatasourceRs,markOptions); |
|
break; |
|
case "dot": |
|
plotMark=Plot.dot(myDatasourceRs,markOptions); |
|
break; |
|
case "line": |
|
plotMark=Plot.line(myDatasourceRs,markOptions); |
|
break; |
|
case "box_x": |
|
plotMark=Plot.boxX(myDatasourceRs,markOptions); |
|
break; |
|
case "box_y": |
|
plotMark=Plot.boxY(myDatasourceRs,markOptions); |
|
break; |
|
case "text": |
|
plotMark=Plot.text(myDatasourceRs,markOptions); |
|
break; |
|
default: |
|
alert("Unknown chart type"); |
|
break; |
|
} |
|
} |
|
return plotMark; |
|
} |
|
|
|
function prepareChartPropertiesForPlotMark(chartType,chartElem) |
|
{ |
|
var orientation=getVizTypeOrientation(chartElem.vizTypeUniquename); |
|
|
|
var optionString="{\"dummy\": \"1\""; |
|
for(var k=0;k<chartElem.elementTypeProperties.length;k++) |
|
{ |
|
var propUniquename=chartElem.elementTypeProperties[k].vizTypePropertyUniquename; |
|
var propValue=chartElem.elementTypeProperties[k].propertyValue; |
|
var propertyType=getVizTypePropertyType(propUniquename); |
|
var textDelim=""; |
|
if(propValue!="") |
|
{ |
|
|
|
textDelim="\""; |
|
//wg. Abwärtskompatibilität ist der Default delim STRING |
|
if(propertyType |
|
&& propertyType !="string") |
|
textDelim=""; |
|
|
|
optionString+=",\""+propUniquename+"\":"+textDelim+propValue+textDelim; |
|
if(propUniquename=="stroke" && chartType!="line") |
|
{ |
|
//Seriendimension hat immer fill |
|
optionString+=",\"fill\":\""+propValue+"\""; |
|
//optionString+=",\"sort\":\""+propValue+"\""; |
|
} |
|
if(propUniquename=="text") |
|
{ |
|
//Wertelabel |
|
optionString+=",\"textAnchor\":\"start\""; |
|
} |
|
|
|
if(propUniquename=="sortchannel" && propValue !="" && orientation=="V") |
|
{ |
|
//Zusätzliche Sortierung vertikale Diagramme: |
|
|
|
optionString+=",\"channels\": {\"sort1\": {\"value\": \""+propValue+"\"}},\"sort\": {\"x\": \"sort1\"}"; |
|
} |
|
if(propUniquename=="sortchannel" && propValue !="" && orientation=="H") |
|
{ |
|
//Zusätzliche Sortierung horizontale Diagramme: |
|
|
|
optionString+=",\"channels\": {\"sort1\": {\"value\": \""+propValue+"\"}},\"sort\": {\"y\": \"sort1\"}"; |
|
} |
|
if(propUniquename=="fill_static" ) |
|
{ |
|
if(optionString.indexOf("\"fill\"") ==-1) //nur wenn es nicht als channel genutzt wird |
|
optionString+=",\"fill\":\""+propValue+"\""; |
|
} |
|
if(propUniquename=="stroke_static" ) |
|
{ |
|
if(optionString.indexOf("\"stroke\"") ==-1) //nur wenn es nicht als channel genutzt wird |
|
optionString+=",\"stroke\":\""+propValue+"\""; |
|
} |
|
} |
|
|
|
} |
|
optionString+=" }"; |
|
return optionString; |
|
} |
|
function getVizTypeOrientation(vizTypeUniquename) |
|
{ |
|
var orientation=""; |
|
for(var k=0;k<vizTypes.length;k++) |
|
{ |
|
if(vizTypes[k].uniquename==vizTypeUniquename) |
|
orientation=vizTypes[k].orientation; |
|
} |
|
return orientation; |
|
} |
|
function getVizTypePropertyType(propUniquename) |
|
{ |
|
var propertyType=""; |
|
for(var k=0;k<commonChartProperties.length;k++) |
|
{ |
|
if(commonChartProperties[k].name==propUniquename) |
|
propertyType=commonChartProperties[k].propValueType; |
|
} |
|
return propertyType; |
|
} |
|
|
|
function getPlotOptionsObj(chartPropertiesUsed,currentChartModel) |
|
{ |
|
var commonChartPropertyGroups=[]; |
|
var previousGroup=""; |
|
var optionsString="{";//"\"width\":100,\"height\":100,"; |
|
|
|
optionsString+="\"caption\":\""+getChartPropertyValue(chartPropertiesUsed,"caption")+"\""; |
|
|
|
for(var k=0;k < commonChartProperties.length;k++) |
|
{ |
|
var groupVariableName=commonChartProperties[k].groupVariableName; |
|
if(groupVariableName!="" |
|
&& groupVariableName != previousGroup) |
|
{ |
|
var newcommonChartPropertyGroup = new commonChartPropertyGroup(commonChartProperties[k].groupCaption,commonChartProperties[k].groupUniquename,groupVariableName); |
|
commonChartPropertyGroups.push(newcommonChartPropertyGroup); |
|
} |
|
previousGroup=groupVariableName; |
|
} |
|
//Now create options Str with all groups: |
|
var textDelim=""; |
|
for(var i=0;i < commonChartPropertyGroups.length;i++) |
|
{ |
|
if(commonChartPropertyGroups[i].groupVariableName!="layout") |
|
optionsString+=",\""+commonChartPropertyGroups[i].groupVariableName+"\":{\"dummy1\":1"; |
|
for(var k=0;k < commonChartProperties.length;k++) |
|
{ |
|
|
|
if(commonChartProperties[k].groupVariableName==commonChartPropertyGroups[i].groupVariableName |
|
&& commonChartProperties[k].variableName!="" |
|
&& getChartPropertyValue(chartPropertiesUsed,commonChartProperties[k].name)!="" |
|
&& !isChartPropertyValidForChartelements(commonChartProperties[k],currentChartModel)) |
|
{ |
|
textDelim=(commonChartProperties[k].propValueType=="string" || commonChartProperties[k].propUnit!="")?"\"":""; |
|
optionsString+=",\""+commonChartProperties[k].variableName+"\":"+textDelim+getChartPropertyValue(chartPropertiesUsed,commonChartProperties[k].name)+textDelim; |
|
} |
|
} |
|
if(commonChartPropertyGroups[i].groupVariableName!="layout") |
|
optionsString+=" }"; //close tag |
|
} |
|
|
|
optionsString+= ", \"marks\":[]"; |
|
optionsString+=" }"; //close tag |
|
console.log("General Options: "+optionsString); |
|
var chartOptions=JSON.parse(optionsString); |
|
return chartOptions; |
|
|
|
} |
|
|
|
/*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) { |
|
chartDivElem.removeChild(chartDivElem.firstChild); |
|
} |
|
// Initialize the echarts instance based on the prepared dom |
|
if(echarts && chartDivElem!=null) |
|
echarts.dispose(chartDivElem); |
|
//echarts.registerLocale('DE', lang); |
|
var myChart = echarts.init(chartDivElem,null, { renderer: 'svg', locale: 'DE'}); |
|
var chartType=currentChartModel.chartElements[0].vizTypeUniquename; |
|
var titleText=chartTitle; |
|
if(chartTitle=="") |
|
titleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"caption"); |
|
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; |
|
myDataset=fillEchartsDataSetSeries(rs[ergebniselementOrdnr],rsColumnMetaData[ergebniselementOrdnr],"fibu_cifx_geldgebergruppe","2,3,4,5,6,7,8","3,4,5,6,7,8"); |
|
//myDataset={source: pivotTable(rs[ergebniselementOrdnr],rsColumnMetaData[ergebniselementOrdnr],) }; |
|
//option=getEchartOptionsNative(currentChartModel,myDataset,titleText); |
|
setTimeout(function () { |
|
option = { |
|
legend: {top:"bottom"}, |
|
tooltip: { |
|
trigger: 'axis', |
|
showContent: false |
|
}, |
|
dataset: myDataset, |
|
xAxis: { type: 'category' }, |
|
yAxis: { gridIndex: 0 }, |
|
grid: { top: '55%' }, |
|
series: [ |
|
{ |
|
type: 'line', |
|
smooth: true, |
|
seriesLayoutBy: 'row', |
|
emphasis: { focus: 'series' } //, |
|
//encode:{"x":"fibu_cifx_geldgebergruppe","y":"jahr_minus_4"} |
|
}, |
|
{ |
|
type: 'line', |
|
smooth: true, |
|
seriesLayoutBy: 'row', |
|
emphasis: { focus: 'series' } //, |
|
//encode:{"x":"fibu_cifx_geldgebergruppe","y":"jahr_minus_3"} |
|
}, |
|
{ |
|
type: 'line', |
|
smooth: true, |
|
seriesLayoutBy: 'row', |
|
emphasis: { focus: 'series' } //, |
|
//encode:{"x":"fibu_cifx_geldgebergruppe","y":"jahr_minus_3"} |
|
}, |
|
{ |
|
type: 'line', |
|
smooth: true, |
|
seriesLayoutBy: 'row', |
|
emphasis: { focus: 'series' } //, |
|
//encode:{"x":"fibu_cifx_geldgebergruppe","y":"jahr_minus_3"} |
|
}, |
|
{ |
|
type: 'line', |
|
smooth: true, |
|
seriesLayoutBy: 'row', |
|
emphasis: { focus: 'series' } //, |
|
//encode:{"x":"fibu_cifx_geldgebergruppe","y":"jahr_minus_3"} |
|
}, |
|
{ |
|
type: 'pie', |
|
id: 'pie', |
|
radius: '30%', |
|
center: ['50%', '25%'], |
|
emphasis: { |
|
focus: 'self' |
|
}, |
|
label: { |
|
formatter: '{b}: {@2020} ({d}%)' |
|
//formatter: '{c}' |
|
}, |
|
encode: { |
|
itemName: 'Geldgebergruppe', |
|
value: '2020', |
|
tooltip: '2020' |
|
} |
|
} |
|
] |
|
}; |
|
myChart.on('updateAxisPointer', function (event) { |
|
const xAxisInfo = event.axesInfo[0]; |
|
if (xAxisInfo) { |
|
const dimension = xAxisInfo.value + 1; |
|
console.log("DIM "+dimension); |
|
myChart.setOption({ |
|
series: { |
|
id: 'pie', |
|
label: { |
|
formatter: '{b}: {@[' + dimension + ']} ({d}%)' |
|
}, |
|
encode: { |
|
value: dimension, |
|
tooltip: dimension |
|
} |
|
} |
|
}); |
|
} |
|
}); |
|
myChart.setOption(option); |
|
}); |
|
} |
|
else |
|
{ |
|
var option; |
|
switch (chartType) |
|
{ |
|
case "echarts_bar_x": |
|
case "echarts_bar_y": |
|
case "echarts_line_x": |
|
case "echarts_line_y": |
|
case "echarts_bar_y": |
|
option=getEchartOptionsBarLine(currentChartModel,myDataset,chartType,titleText,seriesDistinctColumnValues); |
|
break; |
|
case "echarts_bar_y_series": |
|
case "echarts_line_y_series": |
|
option=getEchartOptionsBarLineSeries(currentChartModel,myDataset,chartType,titleText); |
|
break; |
|
case "echarts_pie": |
|
|
|
option=getEchartOptionsPie(currentChartModel,myDataset,seriesDistinctColumnValues); |
|
break; |
|
case "echarts_sankey": |
|
|
|
option=getEchartOptionsSankey(currentChartModel,myDataset); |
|
break; |
|
case "echarts_native": |
|
|
|
option=getEchartOptionsNative(currentChartModel,myDataset,titleText); |
|
break; |
|
default: |
|
alert("Unknown chart type"); |
|
break; |
|
} |
|
// Display the chart using the configuration items and data just specified. |
|
console.log("ECharts-SRC:"+JSON.stringify(option)); |
|
//im Assistenten den Code setzen: |
|
if(document.getElementById("chartCodeTextArea")) |
|
document.getElementById("chartCodeTextArea").innerHTML=prettifyJson(JSON.stringify(option)); |
|
|
|
myChart.setOption(option); |
|
window.addEventListener('resize', myChart.resize); |
|
|
|
} |
|
} |
|
|
|
function renderVizBaseTools(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitle) |
|
{ |
|
var chartType=currentChartModel.chartElements[0].vizTypeUniquename; |
|
var titleText=chartTitle; |
|
if(chartTitle=="") |
|
titleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"caption"); |
|
|
|
//first empty the element, if necessary: |
|
var chartDivElem=document.getElementById(chartDiv); |
|
while (chartDivElem.firstChild) { |
|
chartDivElem.removeChild(chartDivElem.firstChild); |
|
} |
|
switch (chartType) |
|
{ |
|
case "simpleTable": |
|
var zs=vizBaseToolSimpleTable(currentChartModel,rs[ergebniselementOrdnr],rsColumnMetaData[ergebniselementOrdnr],rs[ergebniselementOrdnr].length,titleText); |
|
break; |
|
case "simplePivotTable": |
|
|
|
|
|
var rowdim1Prop=currentChartModel.chartElements[0].elementTypeProperties.find(o => o.vizTypePropertyUniquename == "rowdim1"); |
|
var rowdim1 =rowdim1Prop?rowdim1Prop.propertyValue:null; |
|
var coldim1Prop=currentChartModel.chartElements[0].elementTypeProperties.find(o => o.vizTypePropertyUniquename == "coldim1"); |
|
var coldim1 =coldim1Prop?coldim1Prop.propertyValue:null; |
|
var measure1Prop=currentChartModel.chartElements[0].elementTypeProperties.find(o => o.vizTypePropertyUniquename == "measure1"); |
|
var measure1 =measure1Prop?measure1Prop.propertyValue:null; |
|
//TODO: rowdim2, coldim2 etc. |
|
var tableArray=generateCrosstab(rs[ergebniselementOrdnr],rsColumnMetaData[ergebniselementOrdnr],rowdim1,coldim1,measure1); |
|
zs=vizBaseToolArray2Table(currentChartModel,tableArray,tableArray.length,titleText) |
|
//zs=JSON.stringify(tableArray); |
|
break; |
|
default: |
|
zs="Unknown VIZ type"; |
|
break; |
|
} |
|
chartDivElem.innerHTML=zs; |
|
} |
|
function vizBaseToolSimpleTable(currentChartModel,mydata,metadata,rowcount,titleText) |
|
{ |
|
var tableClass=getCssClassAttr(currentChartModel,"tableCssClass"); |
|
var theadCssClass=getCssClassAttr(currentChartModel,"theadCssClass"); |
|
var thCssClass=getCssClassAttr(currentChartModel,"thCssClass"); |
|
var tdDataCssClass=getCssClassAttr(currentChartModel,"tdDataCssClass"); |
|
var tfootCssClass=getCssClassAttr(currentChartModel,"tfootCssClass"); |
|
var title_display=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title_display"); |
|
|
|
zs=vizBaseToolTableHead(titleText,tableClass,theadCssClass,title_display); |
|
zs+="<tr>"; |
|
for(var col=0;col < metadata.length;col++) |
|
{ |
|
if(metadata[col].nr) |
|
{ |
|
zs+="<th"+thCssClass+">"+metadata[col].colcaption+"</th>"; |
|
|
|
} |
|
|
|
} |
|
zs +="</tr></thead><tbody>"; |
|
for(row=0;row<rowcount;row++) |
|
{ |
|
if(mydata[row]) |
|
{ |
|
zs+="<tr>"; |
|
for(var col=0;col < metadata.length;col++) |
|
{ |
|
if(metadata[col].nr) |
|
{ |
|
zs+="<td"+tdDataCssClass+">"+mydata[row][metadata[col].colname]+"</td>"; |
|
|
|
} |
|
} |
|
zs+="</tr>"; |
|
} |
|
} |
|
zs+="</tbody>"; |
|
//TODO:tfoot wenn Summenzeile da ist |
|
zs+="</table>"; |
|
return zs; |
|
} |
|
function vizBaseToolTableHead(titleText,tableClass,theadCssClass,title_display) |
|
{ |
|
var zs="<table"+tableClass+">"; |
|
if(title_display=="embedded" ) |
|
{ |
|
zs+="<caption>"+titleText+"</caption>"; |
|
} |
|
zs+="<thead"+theadCssClass+">"; |
|
return zs; |
|
} |
|
function vizBaseToolArray2Table(currentChartModel,mydata,rowcount,titleText) |
|
{ |
|
var tableClass=getCssClassAttr(currentChartModel,"tableCssClass"); |
|
var theadCssClass=getCssClassAttr(currentChartModel,"theadCssClass"); |
|
var thCssClass=getCssClassAttr(currentChartModel,"thCssClass"); |
|
var tdDataCssClass=getCssClassAttr(currentChartModel,"tdDataCssClass"); |
|
var tfootCssClass=getCssClassAttr(currentChartModel,"tfootCssClass"); |
|
var title_display=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title_display"); |
|
|
|
zs=vizBaseToolTableHead(titleText,tableClass,theadCssClass,title_display); |
|
zs+="<tr>"; |
|
for(var col=0;col < mydata[0].length;col++) |
|
{ |
|
if(mydata[0][col]) |
|
{ |
|
zs+="<th"+thCssClass+">"+mydata[0][col]+"</th>"; |
|
|
|
} |
|
|
|
} |
|
zs +="</tr></thead><tbody>"; |
|
for(row=1;row<rowcount;row++) |
|
{ |
|
if(mydata[row]) |
|
{ |
|
zs+="<tr>"; |
|
for(var col=0;col < mydata[row].length;col++) |
|
{ |
|
if(mydata[row][col]) |
|
{ |
|
zs+="<td"+tdDataCssClass+">"+mydata[row][col]+"</td>"; |
|
|
|
} |
|
} |
|
zs+="</tr>"; |
|
} |
|
} |
|
zs+="</tbody></table>"; |
|
return zs; |
|
} |
|
function getCssClassAttr(currentChartModel,cssClassName) |
|
{ |
|
var ret=""; |
|
var propval=getChartPropertyValue(currentChartModel.chartPropertiesUsed,cssClassName); |
|
if(propval!="") |
|
{ |
|
ret=" class=\""+propval+"\""; |
|
} |
|
return ret; |
|
} |
|
/* |
|
function determineChartSkeleton(datasourceDef,ergebniselementOrdnr) |
|
{ |
|
var dsChartElement=datasourceDef.chartElements[ergebniselementOrdnr]; |
|
var dimension1Prop = dsChartElement.elementTypeProperties.find(o => o.vizTypePropertyUniquename == "dimension1"); |
|
var dimension1Caption=dimension1Prop.caption; |
|
var dimension1Fldname=dimension1Prop.propertyValue; |
|
var dimension2Prop = ""; |
|
var dimension2Caption=""; |
|
var dimension2Fldname=""; |
|
var dimension2Prop=dsChartElement.elementTypeProperties.find(o => o.vizTypePropertyUniquename == "dimension2"); |
|
if(dimension2Prop) |
|
{ |
|
dimension2Caption=dimension2Prop.caption; |
|
dimension2Fldname=dimension2Prop.propertyValue; |
|
} |
|
|
|
var measure1Prop = dsChartElement.elementTypeProperties.find(o => o.vizTypePropertyUniquename == "measure1"); |
|
var measure1Caption=measure1Prop.caption; |
|
var measure1Fldname=measure1Prop.propertyValue; |
|
|
|
|
|
var skel= new chartSkeleton(ergebniselementOrdnr, |
|
title, |
|
subtitle, |
|
dimension1Fldname, |
|
dimension1Caption, |
|
dimension2Fldname, |
|
dimension2Caption, |
|
measure1Fldname, |
|
measure1Caption, |
|
measure2Fldname, |
|
measure2Caption |
|
); |
|
|
|
chartSkeleton(nr, |
|
title, |
|
subtitle, |
|
dimension1Fldname, |
|
dimension1Caption, |
|
hasDimension2, |
|
dimension2Fldname, |
|
dimension2Caption, |
|
measure1Fldname, |
|
measure1Caption, |
|
hasMeasure2, |
|
measure2Fldname, |
|
measure2Caption |
|
} */ |
|
|
|
function closeModalCardDetail(ergebniselementOrdnr) |
|
{ |
|
var myModalCard=document.getElementById("modalCardDetail"+ergebniselementOrdnr); |
|
myModalCard.classList.remove('is-active'); |
|
} |
|
|
|
function getEchartOptionsBarLine(currentChartModel,myDataset,chartType,titleText,seriesDistinctColumnValues) |
|
{ |
|
//TODO: bar_x und y abfangen' |
|
var chartTypes = chartType.split(/_/); |
|
var scheme = getChartPropertyValue(currentChartModel.chartPropertiesUsed,"schemeArray"); |
|
var singleColor = getChartPropertyValue(currentChartModel.chartPropertiesUsed,"singleColor"); |
|
var myPalette=getPaletteArray(scheme,singleColor); |
|
var chartType=chartTypes[1]; |
|
var orientation=chartTypes[2]; |
|
var measure1Axis="y"; |
|
var dimension1Axis="x"; |
|
var xAxisType="category"; |
|
var yAxisType="value"; |
|
|
|
if(orientation=="x") |
|
{ |
|
measure1Axis="x"; |
|
dimension1Axis="y"; |
|
yAxisType="category"; |
|
xAxisType="value"; |
|
|
|
} |
|
var subtitleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"subtitle"); |
|
//var measure1Fldname=getChartPropertyValue(currentChartModel.chartPropertiesUsed,measure1Axis); |
|
|
|
var seriesArray=getEchartSeriesArray(currentChartModel,chartType,orientation,myDataset,dimension1Axis,measure1Axis,seriesDistinctColumnValues,myPalette); |
|
|
|
//var dimension1Fldname=getChartPropertyValue(currentChartModel.chartPropertiesUsed,dimension1Axis); |
|
|
|
var option = { |
|
dataset: myDataset, |
|
/*klappt nicht, noch testen: transfxAxis: { |
|
typeorm: { |
|
type: 'sort', |
|
config: { dimension: "dim_studiengang_fb", order: 'asc' } |
|
} |
|
,*/ |
|
legend: { |
|
show: (getChartPropertyValue(currentChartModel.chartPropertiesUsed,"legendShow")=="false")?false:true, //true |
|
type: (getChartPropertyValue(currentChartModel.chartPropertiesUsed,"legend.scroll")=="false")?"plain":"scroll", |
|
top:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"legend.top"), |
|
left:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"legend.left"), |
|
textStyle: { |
|
color: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"legend_fontcolor") |
|
} |
|
}, |
|
title: { |
|
text: titleText, |
|
subtext: subtitleText, |
|
left: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title.left"), //"center", |
|
top: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title.top"), //"top", |
|
textStyle: { |
|
fontSize: 20, |
|
color: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title_fontcolor") |
|
}, |
|
subtextStyle: { |
|
fontSize: 15, |
|
color: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title_fontcolor") |
|
} |
|
}, |
|
grid: { |
|
top: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"margin.top")+"%", |
|
bottom: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"margin.bottom")+"%", |
|
left: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"margin.left")+"%", |
|
right: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"margin.right")+"%" |
|
|
|
}, |
|
tooltip: { |
|
trigger: "axis", |
|
axisPointer: { |
|
type: "shadow" |
|
}, |
|
/*valueFormatter: (value) => numberFormatter(value,"value")*/ |
|
/*valueFormatter: (value) => '$' + value.toFixed(2)*/ |
|
/*valueFormatter: (value) => value.toString().replace(",",".")*/ |
|
valueFormatter: (value) => value.toLocaleString() |
|
}, |
|
xAxis: { |
|
type:xAxisType, //horizontal oder vertikal |
|
name:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"xAxisName"), |
|
nameLocation:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"xAxisNameLocation"), |
|
//type: 'category', |
|
axisLabel: { |
|
inside: false, |
|
margin: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"padding_x"), |
|
fontSize: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"fontsize_x"), |
|
width:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"width_x"), |
|
rotate: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"tickRotate_x"), |
|
/*formatter: function (value, index) { |
|
return numberFormatter(value,xAxisType); |
|
}*/ |
|
valueFormatter: (value) => value.toLocaleString(), |
|
color: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"fontcolor_x") |
|
} |
|
}, |
|
yAxis: { |
|
//type:'value', |
|
type: yAxisType, |
|
name:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"yAxisName"), |
|
axisLabel: { |
|
inside: false, |
|
margin: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"padding_y"), |
|
fontSize: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"fontsize_y"), |
|
width:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"width_y"), |
|
rotate: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"tickRotate_y"), |
|
distance:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"distance_y"), |
|
position:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"position_y"), |
|
formatter: (value) => value.toLocaleString(), |
|
color: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"fontcolor_y") |
|
} |
|
}, |
|
series: seriesArray, |
|
color:myPalette |
|
}; |
|
return option; |
|
|
|
} |
|
function getEchartSeriesArrayAlt(currentChartModel,chartType,orientation,dimension1Axis,measure1Axis,myPalette) |
|
{ |
|
//obsolet |
|
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 mySeriesObj={ |
|
type: chartType, //bar,line, |
|
name:measureCaption, |
|
smooth: true, |
|
encode: encodeObj, |
|
stack:(getChartPropertyValue(currentChartModel.chartPropertiesUsed,"barStacked")=="false")?"":"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) |
|
} |
|
|
|
}; |
|
seriesArray.push(mySeriesObj); |
|
} |
|
return seriesArray; |
|
|
|
} |
|
|
|
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:(getChartPropertyValue(currentChartModel.chartPropertiesUsed,"barStacked")=="false")?"":"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: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"valueLabelFontsize"), |
|
color: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"valueLabelColor"), |
|
distance:30, |
|
//offset:[30, 40], |
|
// position:"bottom", |
|
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' |
|
var chartTypes = chartType.split(/_/); |
|
var scheme = getChartPropertyValue(currentChartModel.chartPropertiesUsed,"schemeArray"); |
|
var singleColor = getChartPropertyValue(currentChartModel.chartPropertiesUsed,"singleColor"); |
|
var myPalette=getPaletteArray(scheme,singleColor); |
|
var subtitleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"subtitle"); |
|
var xAxisType="category"; |
|
var yAxisType="value"; |
|
|
|
var orientation=chartTypes[2]; |
|
var seriesFldname=getChartElementPropertyValueFromModel(currentChartModel,1,"stroke"); |
|
var seriesArray= new Array(); |
|
var i=0; |
|
myDataset.source.forEach((row) => { |
|
|
|
if(i>0) |
|
{ |
|
//Das erste Element ist immer die Serien-Dimension, wird daher übersprungen |
|
var mySeriesObj={ |
|
type: chartTypes[1], //bar,line, |
|
smooth: true, |
|
seriesLayoutBy: 'row', |
|
emphasis: { focus: 'series' }, |
|
stack:(getChartPropertyValue(currentChartModel.chartPropertiesUsed,"barStacked")=="false")?"":"myStack", |
|
name:row[0], |
|
label: { |
|
show: (getChartPropertyValue(currentChartModel.chartPropertiesUsed,"valueLabelShow")=="false")?false:true, //true |
|
fontWeight:'bolder', |
|
fontSize: 14, |
|
distance:30, |
|
//offset:[30, 40], |
|
// position:"bottom", |
|
position:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"position_valueLabel"), //"bottom", |
|
offset: getOffsetValuelabelArray(getChartPropertyValue(currentChartModel.chartPropertiesUsed,"offset_x_valueLabel"), |
|
getChartPropertyValue(currentChartModel.chartPropertiesUsed,"offset_y_valueLabel")), |
|
|
|
}, |
|
labelLayout(params) { |
|
return getLabelLayout(chartType,params,orientation) |
|
} |
|
}; |
|
seriesArray.push(mySeriesObj); |
|
} |
|
i++; |
|
}); |
|
/* |
|
var mySeriesObj2={ |
|
type: 'line', |
|
smooth: true, |
|
seriesLayoutBy: 'row', |
|
emphasis: { focus: 'series' } |
|
}; |
|
seriesArray.push(mySeriesObj2); |
|
*/ |
|
|
|
var option = { |
|
dataset: myDataset, |
|
/*klappt nicht, noch testen: transfxAxis: { |
|
typeorm: { |
|
type: 'sort', |
|
config: { dimension: "dim_studiengang_fb", order: 'asc' } |
|
} |
|
,*/ |
|
legend: { |
|
show: (getChartPropertyValue(currentChartModel.chartPropertiesUsed,"legendShow")=="false")?false:true, //true |
|
type: (getChartPropertyValue(currentChartModel.chartPropertiesUsed,"legend.scroll")=="false")?"plain":"scroll", |
|
top:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"legend.top"), |
|
left:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"legend.left") |
|
}, |
|
title: { |
|
text: titleText, |
|
subtext: subtitleText, |
|
left: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title.left"), //"center", |
|
top: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title.top"), //"top", |
|
textStyle: { |
|
fontSize: 20 |
|
}, |
|
subtextStyle: { |
|
fontSize: 15 |
|
} |
|
}, |
|
grid: { |
|
top: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"margin.top")+"%", |
|
bottom: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"margin.bottom")+"%", |
|
left: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"margin.left")+"%", |
|
right: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"margin.right")+"%" |
|
|
|
}, |
|
tooltip: { |
|
trigger: "axis", |
|
axisPointer: { |
|
type: "shadow" |
|
}, |
|
/*valueFormatter: (value) => numberFormatter(value,"value")*/ |
|
/*valueFormatter: (value) => '$' + value.toFixed(2)*/ |
|
/*valueFormatter: (value) => value.toString().replace(",",".")*/ |
|
valueFormatter: (value) => value.toLocaleString() |
|
}, |
|
xAxis: { |
|
type:xAxisType, //horizontal oder vertikal |
|
name:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"xAxisName"), |
|
//type: 'category', |
|
axisLabel: { |
|
inside: false, |
|
margin: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"padding_x"), |
|
fontSize: "1.5em", |
|
width:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"width_x"), |
|
rotate: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"tickRotate_x"), |
|
/*formatter: function (value, index) { |
|
return numberFormatter(value,xAxisType); |
|
}*/ |
|
valueFormatter: (value) => value.toLocaleString() |
|
} |
|
}, |
|
yAxis: { |
|
//type:'value', |
|
type: yAxisType, |
|
name:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"yAxisName"), |
|
nameLocation:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"xAxisNameLocation"), |
|
axisLabel: { |
|
inside: false, |
|
margin: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"padding_y"), |
|
fontSize: "1.5em", |
|
width:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"width_y"), |
|
rotate: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"tickRotate_y"), |
|
distance:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"distance_y"), |
|
position:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"position_y"), |
|
formatter: (value) => value.toLocaleString() |
|
|
|
} |
|
}, |
|
series: seriesArray, |
|
color:myPalette |
|
}; |
|
return option; |
|
|
|
} |
|
|
|
function getOffsetValuelabelArray(xOffset,yOffset) |
|
{ |
|
var offsetArray= new Array(); |
|
|
|
if(xOffset!="") |
|
offsetArray[0]=+xOffset; //String to INT |
|
else |
|
offsetArray[0]=0; |
|
if(yOffset!="") |
|
offsetArray[1]=+yOffset; |
|
else |
|
offsetArray[1]=0; |
|
return offsetArray; |
|
} |
|
/* Labels bei Balkendiagramm je nach Orientierung |
|
- horizontal: rechts neben Balken |
|
- vertikal: zentriert im Balken |
|
*/ |
|
function getLabelLayout(seriesType,params,orientation) |
|
{ |
|
if(seriesType=="bar") |
|
{if(orientation=="x") |
|
{ |
|
return { |
|
x: params.rect.x +params.rect.width+ 30, |
|
y: params.rect.y + params.rect.height / 2, |
|
verticalAlign: 'middle', |
|
align: 'right', |
|
hideOverlap: true |
|
|
|
}; |
|
} |
|
else |
|
return {verticalAlign: 'middle', |
|
hideOverlap: true}; |
|
} |
|
else |
|
{//line: |
|
return {verticalAlign: 'bottom', |
|
hideOverlap: true}; |
|
} |
|
|
|
|
|
} |
|
|
|
function getEchartOptionsNative(currentChartModel,myDataset) |
|
{ |
|
var options=currentChartModel.chartElements[0].sourceCode; |
|
options.dataset=myDataset; |
|
//var dataset ={dataset}; |
|
//dataset.source=myDataset; |
|
//options=Object.assign(myDataset,options); |
|
return options; |
|
|
|
} |
|
function getEchartOptionsPie(currentChartModel,myDataset,seriesDistinctColumnValues) |
|
{ |
|
var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1"); |
|
var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","dimension1"); |
|
var titleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"caption"); |
|
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 titleObj; |
|
if(titleTextArray && titleTextArray.length>0) |
|
{ |
|
titleObj=titleTextArray; |
|
} |
|
else |
|
{ |
|
titleObj={ |
|
text: titleText, |
|
subtext: subtitleText, |
|
left: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title.left"), //"center", |
|
top: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title.top"), //"top", |
|
textStyle: { |
|
fontSize: 20, |
|
color: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title_fontcolor") |
|
}, |
|
subtextStyle: { |
|
fontSize: 15, |
|
color: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title_fontcolor") |
|
} |
|
} |
|
} |
|
var option = { |
|
dataset: myDataset, |
|
title: titleObj, |
|
series: echartsSeriesPie |
|
}; |
|
|
|
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" |
|
}, |
|
stillShowZeroSum: false, |
|
/*label: { |
|
show: true, |
|
formatter: '{c}', |
|
width:200 |
|
|
|
},*/ |
|
label: { |
|
show: (getChartPropertyValue(currentChartModel.chartPropertiesUsed,"valueLabelShow")=="true")?true:false, //true |
|
fontWeight:'bolder', |
|
/*distance:10,*/ |
|
/* offset:[30, 40]*/ |
|
/*labelLayout:{}*/ |
|
//distance:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"distance_valueLabel"), //10, |
|
//position:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"position_valueLabel"), //"bottom", |
|
/*formatter: function (params) { |
|
return params.value.toLocaleString() |
|
}*/ |
|
formatter: '{c}', |
|
color: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"valueLabelColor") |
|
|
|
} , |
|
labelLine: { |
|
length: 50, |
|
length2: 50 |
|
} |
|
|
|
/*, |
|
labelLayout(params) { |
|
return getLabelLayout(chartTypes[1],params,orientation) |
|
}*/, |
|
|
|
fontSize: 12, |
|
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, |
|
top: "20%" |
|
} |
|
return serieObj; |
|
} |
|
function getEchartOptionsSankey(currentChartModel,myDataset) |
|
{ |
|
var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1"); |
|
var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","dimension1"); |
|
var dimension2Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","dimension2"); |
|
|
|
var titleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"caption"); |
|
var subtitleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"subtitle"); |
|
var scheme = getChartPropertyValue(currentChartModel.chartPropertiesUsed,"schemeArray"); |
|
var myPalette=getPaletteArray(scheme,""); |
|
var captionEmptyNode=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"null_value_mask"); |
|
if(captionEmptyNode=="") |
|
captionEmptyNode="Leer"; |
|
|
|
// bei sankey Diagrammen soll der Rand im default 0 sein, daher wird er 0 gesetzt, solange nicht anderes angegeben wird |
|
var marginLeft = getChartPropertyValue(currentChartModel.chartPropertiesUsed, "margin.left"); |
|
if (marginLeft == "20") { |
|
var marginLeft = 0; |
|
} |
|
|
|
var marginRight=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"margin.right"); |
|
var marginTop=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"margin.top"); |
|
var marginBottom=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"margin.bottom"); |
|
|
|
|
|
var valueLabelShow=(getChartPropertyValue(currentChartModel.chartPropertiesUsed,"valueLabelShow")=="true")?true:false; |
|
var valueLabelFontColor=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"valueLabelFontColor"); |
|
var valueLabelFontSize=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"valueLabelFontSize"); |
|
var valueLabelFontFamily=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"valueLabelFontFamily"); |
|
var position_valueLabel=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"position_valueLabel"); |
|
|
|
|
|
var dataNodeArray=new Array(); |
|
|
|
dataNodeArray=getDistinctColumnValuesAsSankeyNodes(myDataset,dimension1Fldname,dataNodeArray,captionEmptyNode); |
|
dataNodeArray=getDistinctColumnValuesAsSankeyNodes(myDataset,dimension2Fldname,dataNodeArray,captionEmptyNode); |
|
|
|
var linkArray=new Array(); |
|
|
|
myDataset.forEach(row => { |
|
var sourceName = row[dimension1Fldname].toString(); |
|
if(sourceName==""){ |
|
sourceName=captionEmptyNode; |
|
} |
|
var targetName = row[dimension2Fldname].toString(); |
|
if(targetName==""){ |
|
targetName=captionEmptyNode; |
|
} |
|
var linkValue=row[measure1Fldname]; |
|
|
|
|
|
var linkObj={source: sourceName, |
|
target:targetName, |
|
value: linkValue |
|
}; |
|
linkArray.push(linkObj); |
|
|
|
}); |
|
|
|
// ECharts Option |
|
var option = { |
|
title: { |
|
text: titleText, |
|
left: 'center', |
|
textStyle: { fontSize: "2em" } |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
triggerOn: 'mousemove', |
|
formatter: function (params) { |
|
if (params.dataType === 'node') { |
|
var nodeName = params.name; |
|
return nodeName + ': ' + params.value.toLocaleString(); |
|
|
|
} |
|
else |
|
{ //link: |
|
return params.data.source + ' --> ' + params.data.target + ': ' + params.data.value.toLocaleString(); |
|
} |
|
} |
|
}, |
|
series: { |
|
name: titleText, |
|
type: 'sankey', |
|
layout: 'center', |
|
//layoutIterations: 0, // Um automatische Sortierung zu deaktivieren |
|
//nodeOrder: ['Bachelor', 'Kein Master BUW','Master'] ,//'LA Bachelor', 'kein Bachelor an UzK', 'Master', 'LA Master', 'kein Master an UzK'], |
|
nodeAlign: 'left', |
|
nodeGap: 25, // Erhöhter vertikaler Abstand |
|
nodeWidth: 60, // Breite der Knoten |
|
edgeLabel:{ show: valueLabelShow, |
|
fontFamily:valueLabelFontFamily, |
|
color:valueLabelFontColor, |
|
fontSize:valueLabelFontSize, |
|
formatter: function (params) { |
|
return params.value.toLocaleString() |
|
} |
|
}, |
|
emphasis: { |
|
disabled:true |
|
//focus: 'self' //'adjacency' |
|
}, |
|
data: dataNodeArray, |
|
links: linkArray, |
|
label: { |
|
show: true, |
|
fontFamily:valueLabelFontFamily, |
|
color:valueLabelFontColor, |
|
fontSize:"1em", |
|
position:position_valueLabel, |
|
distance:1 |
|
}, |
|
lineStyle: { |
|
width: 2, |
|
color: "gradient" |
|
// , opacity: 0.9, |
|
// curveness: 0.3 |
|
}, |
|
left:marginLeft, |
|
top:marginTop, |
|
right:marginRight, |
|
bottom:marginBottom, |
|
width:"100%" |
|
|
|
} |
|
}; |
|
|
|
return option; |
|
|
|
} |
|
function getDistinctColumnValuesAsSankeyNodes(myRs,fieldname,nodes,captionEmptyNode) |
|
{ |
|
var distinctValues=new Array(); |
|
|
|
myRs.forEach(row => { |
|
var newName = row[fieldname].toString(); |
|
if(newName=="") |
|
newName=captionEmptyNode; |
|
|
|
if( distinctValues.length==0) |
|
{ |
|
distinctValues.push(newName); |
|
} |
|
else if( distinctValues.length>0 && !distinctValues.includes(newName)) |
|
{ |
|
|
|
distinctValues.push(newName); |
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
distinctValues.forEach(row => { |
|
var nameObj={name:row}; |
|
nodes.push(nameObj); |
|
}); |
|
return nodes; |
|
} |
|
|
|
|
|
function getChartPropertyValue(propArray,propName) |
|
{ |
|
var propertyValue=""; |
|
if(propArray) |
|
{ |
|
for (var i=0;i<propArray.length;i++) |
|
{ |
|
if(propArray[i].name==propName ) |
|
{ |
|
propertyValue=propArray[i].propertyValue; |
|
if(propArray[i].propUnit && propArray[i].propUnit !="") |
|
propertyValue+=propArray[i].propUnit; |
|
} |
|
|
|
} |
|
} |
|
//bei fehlenden Werten Defaults nachladen: |
|
if(propertyValue=="") |
|
{ |
|
let prop = commonChartProperties.find(o => o.name === propName); |
|
if(prop && prop.defaultValue!="") |
|
{ |
|
propertyValue=prop.defaultValue; |
|
} |
|
} |
|
|
|
return propertyValue; |
|
} |
|
|
|
function getChartElementPropertyValueFromModel(myChartModel,elemID,propUniquename) |
|
{ |
|
//var elemID="1"; |
|
var retVal=null; |
|
var myChartElem=null; |
|
if(myChartModel.chartElements && elemID !=null) |
|
{ |
|
var filtered=myChartModel.chartElements.filter(obj => obj.elemID == elemID); |
|
var myChartElem=filtered[0]; |
|
if(myChartElem.elementTypeProperties && myChartElem.elementTypeProperties.length) |
|
{ |
|
for(var k=0;k < myChartElem.elementTypeProperties.length;k++) |
|
{ |
|
myVizTypeProperty=myChartElem.elementTypeProperties[k]; |
|
if(myVizTypeProperty.vizTypePropertyUniquename==propUniquename) |
|
{ |
|
retVal=myVizTypeProperty.propertyValue; |
|
} |
|
} |
|
} |
|
} |
|
return retVal; |
|
} |
|
|
|
|
|
|
|
function getChartPropertyFromModel(myChartProperties,name,isCommon) |
|
{ |
|
var propertyValue=""; |
|
if(myChartProperties && myChartProperties.length>0) |
|
{ |
|
let prop = myChartProperties.find(o => o.name === name); |
|
if(!prop) |
|
prop = myChartProperties.find(o => o.vizTypePropertyUniquename == name); |
|
|
|
if(prop) |
|
propertyValue=prop.propertyValue; |
|
} |
|
//if no value is set from model, retrieve the default value: |
|
if(propertyValue=="" && isCommon) |
|
propertyValue=getCommonChartProperty(name); |
|
|
|
|
|
return propertyValue; |
|
} |
|
|
|
function getCommonChartProperty(name) |
|
{ |
|
var propertyValue=""; |
|
if(document.forms["chartPropertiesForm"] && document.forms["chartPropertiesForm"].elements[name]) |
|
{ |
|
propertyValue=document.forms["chartPropertiesForm"].elements[name].value; |
|
|
|
if(propertyValue=="") |
|
{ |
|
let prop = commonChartProperties.find(o => o.name === name); |
|
if(prop.defaultValue!="") |
|
{ |
|
propertyValue=prop.defaultValue; |
|
} |
|
} |
|
} |
|
/*for (var i=0;i<commonChartProperties.length;i++) |
|
{ |
|
if(commonChartProperties[i].name==name && document.forms["chartPropertiesForm"].elements[name]) |
|
{ |
|
propertyValue=document.forms["chartPropertiesForm"].elements[name].value; |
|
if(propertyValue=="" && commonChartProperties[i].defaultValue!="") |
|
{ |
|
propertyValue=commonChartProperties[i].defaultValue; |
|
} |
|
} |
|
}*/ |
|
return propertyValue; |
|
} |
|
|
|
function filld3data(myRs,MyRsMetaData,chartElem) |
|
{ |
|
//Identify dimensions and measures: |
|
var dimension1,dimension2,measure1; |
|
var data=[]; |
|
|
|
for(var k=0;k<chartElem.elementTypeProperties.length;k++) |
|
{ |
|
if(chartElem.elementTypeProperties[k].propertyValue!="") |
|
{ |
|
switch (chartElem.elementTypeProperties[k].vizTypePropertyUniquename) |
|
{ |
|
case "dimension1": |
|
dimension1=chartElem.elementTypeProperties[k].propertyValue; |
|
case "dimension2": |
|
dimension2=chartElem.elementTypeProperties[k].propertyValue; |
|
break; |
|
case "measure1": |
|
measure1=chartElem.elementTypeProperties[k].propertyValue; |
|
break; |
|
default: |
|
break; |
|
|
|
} |
|
} |
|
|
|
} |
|
|
|
//get MetaData: |
|
|
|
|
|
//alert(dimension1+"-"+dimension2+"-"+measure+"-"+ functionOfCategoryDim+"-"+functionOfDimension2+"-"+functionOfMeasureDim); |
|
//get and transform Data: |
|
var maxLenDimension1=0; |
|
var maxMeasure=0; |
|
var rowcount=myRs.length; |
|
var rownr=1; |
|
console.log("Zeilenanzahl " +rowcount); |
|
myRs.forEach((row) => { |
|
for (var col in row) { |
|
console.log(col +"-"+row[col]); |
|
if(col==dimension1) |
|
dimension1Value=row[col]; |
|
if(col==dimension2) |
|
dimension2Value=row[col]; |
|
if(col==measure1) |
|
measure1Value=row[col]; |
|
|
|
} |
|
data.push(new d3dataRow(rownr,dimension1Value,dimension2Value,measure1Value)); |
|
rownr++; |
|
} |
|
); |
|
/* |
|
console.log(rownr +"-" + dimension1Value +"-" +dimension2Value +"-" +measureDimValue); |
|
selectionRs.push(new d3dataRow(rownr,dimension1Value,dimension2Value,measureDimValue)); |
|
//identify max String length to compute x axis size |
|
if(dimension1Value.length >maxLenDimension1) |
|
maxLenDimension1=dimension1Value.length; |
|
//the same for values: |
|
if(measureDimValue >maxMeasure) |
|
maxMeasure=measureDimValue; |
|
|
|
|
|
} |
|
//TODO:Sorting and filtering |
|
*/ |
|
return data; |
|
|
|
} |
|
function isChartPropertyValidForChartelements(prop,currentChartModel) |
|
{ |
|
var propValid=false; |
|
if(prop.isGeneric==1) |
|
return true; |
|
var nrOfChartElements=currentChartModel.chartElements.length; |
|
for(var k=0;k < nrOfChartElements;k++) |
|
{ |
|
var usedVizTypeUniquename=currentChartModel.chartElements[k].vizTypeUniquename; |
|
for(var i=0;i < vizTypeProperties.length;i++) |
|
{ |
|
if(vizTypeProperties[i].propUniquename==prop.name |
|
&& vizTypeProperties[i].typeUniquename==usedVizTypeUniquename) |
|
propValid=true; |
|
} |
|
|
|
} |
|
return propValid; |
|
} |
|
function getD3ColorScheme(name,size) |
|
{ |
|
//blues|greens|greys|oranges|purples|reds|paired|set1|pastel1|pastel2|tableau10|category10|accent|dark2 |
|
if(size==null || size==0) |
|
size=9; |
|
switch (name) { |
|
case "blues": |
|
return d3.schemeBlues[size]; |
|
break; |
|
case "greens": |
|
return d3.schemeGreens[size]; |
|
break; |
|
case "greys": |
|
return d3.schemeGreys[size]; |
|
break; |
|
case "oranges": |
|
return d3.schemeOranges[size]; |
|
break; |
|
case "purples": |
|
return d3.schemePurples[size]; |
|
break; |
|
case "reds": |
|
return d3.schemeReds[size]; |
|
break; |
|
case "accent": |
|
return d3.schemeAccent; |
|
break; |
|
case "paired": |
|
return d3.schemePaired; |
|
break; |
|
case "set1": |
|
return d3.schemeSet1; |
|
break; |
|
case "category10": |
|
return d3.schemeCategory10; |
|
break; |
|
case "dark2": |
|
return d3.schemeDark2; |
|
break; |
|
case "pastel1": |
|
return d3.schemePastel1; |
|
break; |
|
case "pastel2": |
|
return d3.schemePastel2; |
|
break; |
|
case "tableau10": |
|
return d3.schemeTableau10; |
|
break; |
|
case "custom1": |
|
return ["#5b89c7","#2fac66","#8cc277","#78a767","#1d71b8"]; |
|
break; |
|
default: |
|
return d3.schemePastel2; |
|
break; |
|
|
|
} |
|
} |
|
|
|
function vizTabelleComboOderSichtLaden(maskentid,fname, caption,fnameEscaped,zeilenanzahl,feldart,referrerForm) { |
|
Feldname = fname; |
|
var callurl = '/superx/servlet/SuperXmlMaske'; |
|
callurl += "?tid=" + maskentid + "&getJSON_" + getEncoded(Feldname) + |
|
'=xxxxxx-xxxxxx@'; |
|
var params = ""; |
|
var myElements= new Array(); |
|
myElements=document.forms["Weiterverarbeitung"].elements; |
|
var e=document.forms["Weiterverarbeitung"].elements[fname]; |
|
for (var i = 1; i < felder.length; i++) |
|
{ |
|
e = myElements[felder[i]["htmlname"]]; |
|
if (e) { |
|
var t = e.type; |
|
var name = felder[i]["name"]; |
|
if (t == 'text') |
|
{ |
|
//todo bei startsWith select_ label_ auch überspringen |
|
|
|
if (e.value != '') //leere Felder müssen auch übergeben werden MB!! |
|
// 1/2016 MB dies geht nicht weil ISO kodiert |
|
//params+="&"+felder[i]["cb_name"]+"="+encodeURIComponent(e.value); |
|
params += "&" + getEncoded(felder[i]["htmlname"]) + "=" + getEncoded(e.value); |
|
else |
|
params += "&" + getEncoded(felder[i]["htmlname"]) + "=--leer--"; |
|
} |
|
} |
|
|
|
} |
|
|
|
console.log("PARAMS:"+params); |
|
//return false; |
|
|
|
var currentFieldValue=document.forms['Weiterverarbeitung'].elements[Feldname].value; |
|
/*var splitchar=","; |
|
if(currentFieldValue.indexOf("|")>-1) |
|
splitchar="\|"; |
|
var currentFieldValueArray = currentFieldValue.split(splitchar); |
|
var currentFieldValueCount=currentFieldValueArray.length; |
|
*/ |
|
|
|
params=encodeURIComponent(params); |
|
//alert(params); |
|
var jspPage="maske_combo_laden.jsp"; |
|
if(feldart==12) |
|
jspPage="maske_sicht_laden.jsp"; |
|
var editurl="/superx/edit/kern/"+jspPage+"?tid="+maskentid+ "&Feldname="+getEncoded(fname)+"&previousValue="+currentFieldValue; |
|
editurl +="&zeilenanzahl="+zeilenanzahl+"&referrerForm=Weiterverarbeitung¶ms="+params; |
|
neu2=window.open(editurl,"_blank","directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660"); |
|
|
|
|
|
|
|
} |
|
|
|
function applyFunction(theValue,theFunction) |
|
{ |
|
switch (theFunction) { |
|
case "switchWord1and2ff": |
|
var ret=switchWord1and2ff(theValue); |
|
break; |
|
case "justWord1": |
|
var ret=justWord1(theValue); |
|
break; |
|
case "abbreviate": |
|
var ret=abbreviate(theValue,20); |
|
break; |
|
default: |
|
var ret=theValue; |
|
break; |
|
} |
|
|
|
return ret; |
|
|
|
} |
|
|
|
function switchWord1and2ff(theString) |
|
{ |
|
//erzeugt z.B. aus "WiSe 2020/2021" den Wert "2020/2021", zum Sortieren |
|
var theWords = theString.split(/ /); |
|
var word1=theWords[0]; |
|
var word2=""; |
|
var ret=""; |
|
if(theWords.length >1) |
|
{ |
|
for(var k=1;k < theWords.length;k++) |
|
{ |
|
word2+= theWords[k]; |
|
} |
|
ret +=word2; |
|
} |
|
ret+=" "+ word1; |
|
return ret.trim(); |
|
} |
|
|
|
function justWord1(theString) |
|
{ |
|
//nur erstes Wort, zum Sortieren |
|
var word1End=-1; |
|
var i=0; |
|
var endFound=false; |
|
do{ |
|
var myChar=theString.substr(i,1); |
|
if(myChar=="|" || myChar==" "|| myChar=="-") |
|
{ |
|
endFound=true; |
|
word1End=i; |
|
} |
|
else |
|
i++; |
|
} |
|
while (endFound==false && i<=theString.length); |
|
if(word1End==-1) |
|
word1End=theString.length; |
|
return theString.substr(0,word1End); |
|
} |
|
|
|
function abbreviate(theString,theMaxLength) |
|
{ |
|
//nur erste x Zeichen |
|
if(theString.length > theMaxLength) |
|
{ |
|
var theCut = theString.substr(0,theMaxLength-3)+"..."; |
|
return theCut; |
|
} |
|
else return theString.trim(); |
|
} |
|
|
|
function getColumnCaption(columnName) |
|
{ |
|
let rsMetaDataLen = rsMetaData.length; |
|
var colCaption=columnName; |
|
for (let i = 0; i < rsMetaDataLen; i++) { |
|
if(rsMetaData[i].colname ==columnName) |
|
colCaption=rsMetaData[i].colcaption; |
|
} |
|
return colCaption; |
|
} |
|
|
|
function getPaletteArray(schemeName,singleColor) |
|
{ |
|
var schemeArray=new Array(); |
|
if(singleColor=="") |
|
{ |
|
if(schemeName=="") |
|
schemeName="D3_Tableau10"; //Default |
|
var srcScheme=vizColorSchemes.find(sc => sc.uniquename == schemeName); |
|
if(!srcScheme.specifier || srcScheme.specifier=="") |
|
{ |
|
|
|
var counter=0; |
|
var firstColorCode=""; |
|
for (let j = 0; j < vizColorSchemeElements.length; j++) { |
|
if(vizColorSchemeElements[j].colorscheme_uniquename == schemeName) |
|
{ |
|
if(firstColorCode=="") |
|
firstColorCode=vizColorSchemeElements[j].colorcode; |
|
schemeArray[counter]=vizColorSchemeElements[j].colorcode; |
|
counter++; |
|
} |
|
|
|
} |
|
//vizColorSchemeElements.find(el => el.colorscheme_uniquename == schemeName); |
|
if(schemeArray.length==0) |
|
{ |
|
schemeArray[0]=firstColorCode; |
|
} |
|
} |
|
else |
|
{ |
|
//D3 specifier: |
|
schemeArray=colorSpecifierToArray(srcScheme.specifier); |
|
} |
|
|
|
} |
|
else |
|
{ |
|
schemeArray=[ singleColor ]; |
|
} |
|
return schemeArray; |
|
} |
|
|
|
function openDashboardTab(tabnr,maskennr,originalStylesheet,optional_filter_name,optional_filter_value,myOptionalFilters) |
|
{ |
|
var myForm=document.forms["Weiterverarbeitung"]; |
|
myForm.elements["tid"].value=maskennr; |
|
myForm.elements["Tabnr."].value=tabnr; |
|
myForm.elements["reuseresult"].value="false"; |
|
//zuerst alle Filter resetten: |
|
if(myForm.elements["Booklet-Stylesheet"]) |
|
{ |
|
myForm.elements["Booklet-Stylesheet"].value=""; |
|
} |
|
if(myForm.elements["tablestylesheet"]) |
|
{ |
|
myForm.elements["tablestylesheet"].value=originalStylesheet; |
|
} |
|
if(myForm.elements["stylesheet"]) |
|
{ |
|
myForm.elements["stylesheet"].value=originalStylesheet; |
|
} |
|
myForm.elements["contenttype"].value="text/html"; |
|
|
|
if(myOptionalFilters.length>0) |
|
{ |
|
for(var j=0;j < myOptionalFilters.length;j++) |
|
{ |
|
var optionalFilterFldName=myOptionalFilters[j+1]; |
|
console.log("Resetting "+optionalFilterFldName); |
|
if(myForm.elements[optionalFilterFldName]) |
|
{ |
|
myForm.elements[optionalFilterFldName].value=""; |
|
} |
|
} |
|
} |
|
if(optional_filter_name != "") |
|
{ |
|
myForm.elements[optional_filter_name].value=optional_filter_value; |
|
} |
|
|
|
myForm.submit(); |
|
|
|
} |
|
function openKachelDetails(ergebniselementOrdnr,formName,maskeninfoTID,grafikUniquename,tablestylesheet,reuseResults) |
|
{ |
|
document.forms[formName].elements["tid"].value=maskeninfoTID; |
|
document.forms[formName].elements["Grafik"].value=grafikUniquename; |
|
document.forms[formName].elements["tablestylesheet"].value=tablestylesheet; |
|
if(document.forms[formName].elements["##line##"]) |
|
{ |
|
document.forms[formName].elements["##line##"].value=""; |
|
} |
|
if(!reuseResults) |
|
{ |
|
document.forms[formName].elements["reuseresult"].value="false"; |
|
} |
|
document.forms[formName].target="_blank"; |
|
document.forms[formName].submit(); |
|
|
|
} |
|
|
|
function exportVizBooklet(contenttype,stylesheet) |
|
{ |
|
document.forms['Weiterverarbeitung'].stylesheet.value = stylesheet; |
|
document.forms['Weiterverarbeitung'].tablestylesheet.value = stylesheet; |
|
document.forms['Weiterverarbeitung'].contenttype.value = contenttype; |
|
document.forms['Weiterverarbeitung'].target = '_blank'; |
|
document.forms['Weiterverarbeitung'].submit(); |
|
} |
|
|
|
function numberFormatter(value,axisType,digits,usedLocale) |
|
{ |
|
//TODO: digits auswerten |
|
if(axisType=="value") |
|
{ |
|
var myusedLocale="de-DE"; //default |
|
if(!usedLocale || usedLocale=="") |
|
myusedLocale=usedLocale; |
|
return new Intl.NumberFormat(myusedLocale).format(value); |
|
} |
|
else |
|
return value ; |
|
} |
|
function closeModalCard(elemId) |
|
{ |
|
var myModalCard=document.getElementById(elemId); |
|
myModalCard.classList.remove('is-active'); |
|
|
|
} |
|
|
|
|
|
function toggleSideBarDiv(mySidebarDivId) |
|
{ |
|
//first close all divs in the sidebar except the one seleced: |
|
const allSidebarDivs = document.getElementsByClassName("sidebar"); |
|
for (let i = 0; i < allSidebarDivs.length; i++) { |
|
if(allSidebarDivs[i].id!=mySidebarDivId) |
|
allSidebarDivs[i].style.display="none"; |
|
} |
|
//now toggle: |
|
var myDiv=document.getElementById(mySidebarDivId); |
|
if(myDiv.style.display=="block") |
|
{ |
|
myDiv.style.display="none"; |
|
myDiv.classList.remove("sidebar"); |
|
} |
|
else |
|
{ |
|
myDiv.style.display="block"; |
|
myDiv.classList.add("sidebar"); |
|
} |
|
|
|
} |
|
|
|
|
|
function prettifyJson(srcCode) |
|
{ |
|
var ret=""; |
|
ret=srcCode.replace(/],/g,"],\n"); |
|
ret=ret.replace(/},/g,"},\n"); |
|
return ret; |
|
} |
|
function pivotTable1(rsData,rsMetaData,srcColNr) |
|
{ |
|
rsData.forEach((row) => { |
|
for (var col in row) { |
|
console.log(col +"-"+row[col]); |
|
} |
|
} |
|
); |
|
} |
|
|
|
|
|
function pivotTable(rsData,rsMetaData,srcColNrStart) |
|
{ |
|
var rsDataPivot=new Array(); |
|
var nrSourceRows=rsData.length; |
|
var nrSouceCols=rsMetaData.length; |
|
var rsRow=new Array(); |
|
var zs=""; |
|
var targetRownr=0; |
|
//first line will have headers: |
|
var rownr=0; |
|
zs+="Zeile|"; |
|
rsRow[rownr]="Zeile"; |
|
rownr++; |
|
rsData.forEach((row) => { |
|
var colnr=0; |
|
for (var col in row) { |
|
|
|
if(colnr==srcColNrStart) |
|
{ |
|
zs+=row[col]+"|"; |
|
rsRow[rownr]=row[col]; |
|
} |
|
colnr++; |
|
} |
|
rownr++; |
|
} |
|
); |
|
zs +="\n"; |
|
targetRownr++; |
|
rsDataPivot.push(rsRow); |
|
//now the data: |
|
var metaDataColnr=0; |
|
|
|
rsMetaData.forEach((col) => { |
|
if(metaDataColnr>srcColNrStart && col.colcaption.trim()!="") |
|
{ |
|
//start a new row: |
|
var rsRow=new Array(); |
|
var colname=col.colname; |
|
zs+=col.colcaption +"|"; |
|
rsRow[0]=col.colcaption; |
|
var targetColnr=1; |
|
var rownr=0; |
|
rsData.forEach((row) => { |
|
var colnr=0; |
|
for (var col in row) { |
|
if(colnr==metaDataColnr) |
|
{ |
|
zs+=row[col]+"|"; |
|
rsRow[targetColnr]=row[col]; |
|
targetColnr++; |
|
} |
|
colnr++; |
|
}; |
|
rownr++; |
|
}); |
|
zs+="\n"; |
|
rsDataPivot.push(rsRow); |
|
|
|
|
|
} |
|
metaDataColnr++; |
|
}); |
|
|
|
|
|
|
|
//alert(zs); |
|
/* for(var row=0;row < nrSourceRows;row++) |
|
{ |
|
|
|
rsRow[row]=rsData[row][srcColNr]; |
|
} |
|
rsDataPivot.push(rsRow); |
|
//Now line 2 upwards: |
|
rsData.forEach((row) => { |
|
for (var col in row) { |
|
console.log(col +"-"+row[col]); |
|
} |
|
} |
|
); |
|
} |
|
|
|
for(var col=srcColNr+1;col < nrSouceCols;col++) |
|
{ |
|
var rsRow=new Array(); |
|
var srcColCounter=0; |
|
//first targetcolumn has name |
|
rsRow[0]=rsMetaData[col]; |
|
for(var row=0;row < nrSourceRows;row++) |
|
{ |
|
rsRow[row+1]=rsData[row][col]; |
|
|
|
} |
|
rsDataPivot.push(rsRow); |
|
} |
|
console.log(rsDataPivot); |
|
|
|
*/ |
|
return rsDataPivot; |
|
} |
|
|
|
function generateCrosstab(rsData,rsMetaData,rowdim1,coldim1,measure1) |
|
{ |
|
/*erzeugt einen Array als Kreuztabelle |
|
TODO: rowdim1 auswerten, derzeit noch nicht impl.*/ |
|
var rsDataPivot=new Array(); |
|
var nrSourceRows=rsData.length; |
|
var nrSouceCols=rsMetaData.length; |
|
var rsRow=new Array(); |
|
var zs=""; |
|
var targetRownr=0; |
|
var rowdim1Prop=rsMetaData.find(obj => obj.colname == rowdim1); |
|
var rowdim1Nr =rowdim1Prop?rowdim1Prop.nr:null; |
|
var coldim1Prop=rsMetaData.find(obj => obj.colname == coldim1); |
|
var coldim1Nr =coldim1Prop?coldim1Prop.nr:null; |
|
var measure1Prop=rsMetaData.find(obj => obj.colname == measure1); |
|
var measure1Nr =measure1Prop?measure1Prop.nr:null; |
|
|
|
|
|
var coldim1Caption=rsMetaData.find(obj => obj.colname == coldim1).colcaption; |
|
//first line will have headers: |
|
var rownr=0; |
|
//Variable zs ist nur zum Debuggen |
|
zs+=coldim1Caption+"|"; |
|
rsRow[rownr]=coldim1Caption; //TODO: rowdim1 |
|
rownr++; |
|
rsData.forEach((row) => { |
|
var colnr=0; |
|
for (var col in row) { |
|
|
|
if(colnr==coldim1Nr) |
|
{ |
|
zs+=row[col]+"|"; |
|
rsRow[rownr]=row[col]; |
|
} |
|
colnr++; |
|
} |
|
rownr++; |
|
} |
|
); |
|
zs +="\n"; |
|
targetRownr++; |
|
rsDataPivot.push(rsRow); |
|
//now the data: |
|
var metaDataColnr=0; |
|
|
|
rsMetaData.forEach((col) => { |
|
if(metaDataColnr>=measure1Nr && col.colcaption.trim()!="") |
|
{ |
|
//start a new row: |
|
var rsRow=new Array(); |
|
var colname=col.colname; |
|
zs+=col.colcaption +"|"; |
|
rsRow[0]=col.colcaption; |
|
var targetColnr=1; |
|
var rownr=0; |
|
rsData.forEach((row) => { |
|
var colnr=0; |
|
for (var col in row) { |
|
if(colnr==metaDataColnr) |
|
{ |
|
zs+=row[col]+"|"; |
|
rsRow[targetColnr]=row[col]; |
|
targetColnr++; |
|
} |
|
colnr++; |
|
}; |
|
rownr++; |
|
}); |
|
zs+="\n"; |
|
rsDataPivot.push(rsRow); |
|
|
|
|
|
} |
|
metaDataColnr++; |
|
}); |
|
|
|
|
|
|
|
return rsDataPivot; |
|
} |
|
/* color schemes from d3js */ |
|
function colorSpecifierToArray(specifier) { |
|
var n = specifier.length / 6 | 0, colors = new Array(n), i = 0; |
|
while (i < n) colors[i] = "#" + specifier.slice(i * 6, ++i * 6); |
|
return colors; |
|
} |
|
|
|
function toggleVizNavpanelFrame(buttonElem) { |
|
buttonElem.classList.toggle('is-active'); |
|
|
|
if(document.getElementById("navpanelFrame").style.display=="none") |
|
document.getElementById("navpanelFrame").style.display="flex"; |
|
else |
|
document.getElementById("navpanelFrame").style.display="none"; |
|
|
|
}
|
|
|