|
|
/* d3 Code */ |
|
|
/* |
|
|
const chartModel={ |
|
|
|
|
|
id: "TEST", |
|
|
name: "testname", |
|
|
renderer: "plot" ,//renderer; |
|
|
//this.dataSources=datasources; |
|
|
//this.globalProperties=globalproperties; |
|
|
options: [], |
|
|
targetDiv: document.getElementById("chartDiv"), |
|
|
renderChart : function () { |
|
|
|
|
|
//console.log(JSON.stringify(this)); |
|
|
document.getElementById("chartDiv").innerHTML=""; //reset canvas |
|
|
switch (this.renderer) { |
|
|
case "plot": |
|
|
this.renderChartWithPlot(); |
|
|
break; |
|
|
default: |
|
|
alert("No renderer"); |
|
|
break; |
|
|
} |
|
|
}, |
|
|
|
|
|
renderChartWithPlot: function () |
|
|
{ |
|
|
console.log("using Plot"); |
|
|
|
|
|
var svgPlot=Plot.plot(this.options[0]); |
|
|
document.getElementById("chartDiv").appendChild(svgPlot); |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
*/ |
|
|
function chartModel(id,name,renderer,datasources) |
|
|
{ |
|
|
this.version="0.2b"; |
|
|
this.id=id; |
|
|
this.name=name; |
|
|
this.renderer=renderer; |
|
|
this.dataSources=datasources; |
|
|
//this.globalProperties=globalproperties; |
|
|
this.targetDiv=""; //only for d3 |
|
|
this.chartElements=new Array(); |
|
|
this.chartPropertiesUsed=new Array(); |
|
|
//let globalProperties={}; |
|
|
|
|
|
/*this.getChartSVG = function () { |
|
|
|
|
|
//console.log(JSON.stringify(this)); |
|
|
var mySVG=""; |
|
|
switch (this.renderer) { |
|
|
case "plot": |
|
|
mySVG=this.getChartSVGWithPlot(); |
|
|
break; |
|
|
case "d3js": |
|
|
mySVG=this.getChartSVGWithD3(); |
|
|
break; |
|
|
case "d3jsv3": |
|
|
mySVG=this.getChartSVGWithD3V3(); |
|
|
break; |
|
|
default: |
|
|
alert("No renderer"); |
|
|
break; |
|
|
} |
|
|
return mySVG; |
|
|
} |
|
|
this.renderChartSVG = function () { |
|
|
|
|
|
//console.log(JSON.stringify(this)); |
|
|
var mySVG=""; |
|
|
switch (this.renderer) { |
|
|
case "plot": |
|
|
mySVG=this.getChartSVGWithPlot(); |
|
|
break; |
|
|
case "d3js": |
|
|
mySVG=this.getChartSVGWithD3(); |
|
|
break; |
|
|
case "d3jsv3": |
|
|
this.renderChartSVGWithD3V3(); |
|
|
break; |
|
|
default: |
|
|
alert("No renderer"); |
|
|
break; |
|
|
} |
|
|
return true; |
|
|
} |
|
|
|
|
|
this.getChartSVGWithPlot=function () |
|
|
{ |
|
|
console.log("using Plot"); |
|
|
var myOptions=new Object; |
|
|
//myOptions.marks=new Array(); |
|
|
//myOptions.sort=new Array(); |
|
|
|
|
|
myOptions=getPlotOptionsObj(this.chartPropertiesUsed); |
|
|
var marksArray=new Array(); |
|
|
|
|
|
//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< this.chartElements.length;k++) |
|
|
{ |
|
|
marksArray[k]=renderChartElementWithPlot(this.chartElements[k]); |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
myOptions["marks"].push(marksArray); |
|
|
var svgPlot=Plot.plot(myOptions); |
|
|
return svgPlot; |
|
|
} |
|
|
this.getChartSVGWithD3=function () |
|
|
{ |
|
|
console.log("using D3JS"); |
|
|
var svgD3=new Object; |
|
|
for(var k=0;k< this.chartElements.length;k++) |
|
|
{ |
|
|
svgD3=renderChartElementWithD3(this.chartElements[k]); |
|
|
} |
|
|
|
|
|
return svgD3; |
|
|
} |
|
|
this.renderChartSVGWithD3V3=function () |
|
|
{ |
|
|
console.log("using D3JS_v3"); |
|
|
var svgD3=new Object; |
|
|
for(var k=0;k< this.chartElements.length;k++) |
|
|
{ |
|
|
svgD3=renderChartElementWithD3V3(this.chartElements[k],this.targetDiv); |
|
|
} |
|
|
|
|
|
return svgD3; |
|
|
} |
|
|
*/ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function possibleVizType(nr,value,name,explanation,isDefault ) |
|
|
{ |
|
|
this.nr=nr; |
|
|
this.value=value; |
|
|
this.name=name; |
|
|
this.explanation=explanation; |
|
|
this.isDefault=isDefault; |
|
|
|
|
|
} |
|
|
|
|
|
function usedVizType(nr,vizTypeUniquename,caption,datasource ) |
|
|
{ |
|
|
this.nr=nr; |
|
|
this.vizTypeUniquename=vizTypeUniquename; |
|
|
this.caption=caption; |
|
|
this.datasource=datasource; |
|
|
this.elementTypeProperties=new Array(); |
|
|
} |
|
|
|
|
|
function usedVizProperty(name,vizPropertyVariablename,propertyValue ) |
|
|
{ |
|
|
this.name=name; |
|
|
this.vizPropertyVariablename=vizPropertyVariablename; |
|
|
this.propertyValue=propertyValue; |
|
|
|
|
|
} |
|
|
function usedVizTypeProperty(nr,vizTypePropertyUniquename,caption,propertyValue ) |
|
|
{ |
|
|
this.nr=nr; |
|
|
this.vizTypePropertyUniquename=vizTypePropertyUniquename; |
|
|
this.caption=caption; |
|
|
this.propertyValue=propertyValue; |
|
|
|
|
|
} |
|
|
|
|
|
function d3dataRow(nr,dimension1,dimension2,measure1 ) |
|
|
{ |
|
|
this.nr=nr; |
|
|
this.dimension1=dimension1; |
|
|
this.dimension2=dimension2; |
|
|
this.measure1=measure1; |
|
|
|
|
|
} |
|
|
|
|
|
function selectionRowMetaData(nr,targetColumn,colname,colcaption,coltype,colfunction) |
|
|
{ |
|
|
this.nr=nr; |
|
|
this.targetColumn=targetColumn; |
|
|
this.colname=colname; |
|
|
this.colcaption=colcaption; |
|
|
this.coltype=coltype; |
|
|
this.colfunction=colfunction; |
|
|
} |
|
|
|
|
|
function selectionPropertyValue(nr,name,value,isDefault ) |
|
|
{ |
|
|
this.nr=nr; |
|
|
this.name=name; |
|
|
this.value=value; |
|
|
this.isDefault=isDefault; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function dimFunction(nr,name,value,isDefault ) |
|
|
{ |
|
|
this.nr=nr; |
|
|
this.name=name; |
|
|
this.value=value; |
|
|
this.isDefault=isDefault; |
|
|
|
|
|
} |
|
|
function dimensionProperty(name,caption,explanation,isMeasure,isMandatory,datasource) |
|
|
{ |
|
|
this.name=name; |
|
|
this.caption=caption; |
|
|
this.isMeasure=isMeasure; |
|
|
this.isMandatory=isMandatory; |
|
|
this.explanation=explanation; |
|
|
this.datasource=datasource; |
|
|
this.getValueResultset = function () { |
|
|
var valueOptions=[]; |
|
|
var optionCounter=0; |
|
|
//selectionRsMetaData=fillSelectionResultMetaData(); |
|
|
//console.log("felder"+selectionRsMetaData.length); |
|
|
var isDefault=false; |
|
|
for(var j=0;j < rsColumnMetaData[datasource].length;j++) |
|
|
{ |
|
|
if(rsColumnMetaData[datasource][j].colcaption.trim() !="" |
|
|
//&& ( |
|
|
// isMeasure==false || rsColumnMetaData[datasource][j].coltype == 4 || rsColumnMetaData[datasource][j].coltype == 3) |
|
|
// |
|
|
) |
|
|
{ |
|
|
//console.log("feld "+rsColumnMetaData[j].nr+selectionRsMetaData[j].targetColumn); |
|
|
var o=new selectionPropertyValue(rsColumnMetaData[datasource][j].nr,rsColumnMetaData[datasource][j].colcaption,rsColumnMetaData[datasource][j].colname,isDefault); |
|
|
valueOptions[optionCounter]=o; |
|
|
optionCounter++; |
|
|
if(isDefault) |
|
|
isDefault=false; |
|
|
} |
|
|
} |
|
|
return valueOptions; |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
function selectionProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction) |
|
|
{ |
|
|
this.name=name; |
|
|
this.caption=caption; |
|
|
this.isDynamic=isDynamic; |
|
|
this.isMeasure=isMeasure; |
|
|
this.staticValues=staticValues; |
|
|
this.isMandatory=isMandatory; |
|
|
this.defaultValue=defaultValue; |
|
|
this.optionalFunction=optionalFunction; |
|
|
this.getValueResultset = function () { |
|
|
var valueOptions=[]; |
|
|
var optionCounter=0; |
|
|
if(isDynamic) |
|
|
{ |
|
|
for(var j=0;j < rsMetaData.length;j++) |
|
|
{ |
|
|
var isDefault=false; |
|
|
if(rsMetaData[j].colcaption.trim() !="" && |
|
|
(isMeasure==false || rsMetaData[j].coltype == 4 || rsMetaData[j].coltype == 3) |
|
|
) |
|
|
{ |
|
|
if(rsMetaData[j].colcaption==defaultValue) |
|
|
isDefault=true; |
|
|
var o=new selectionPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].colname,isDefault); |
|
|
valueOptions[optionCounter]=o; |
|
|
optionCounter++; |
|
|
} |
|
|
} |
|
|
} |
|
|
else |
|
|
{ |
|
|
var staticValuesArray = staticValues.split(/\|/); |
|
|
for(var k=0;k < staticValuesArray.length;k++) |
|
|
{ |
|
|
var isDefault=false; |
|
|
if(rsMetaData[j].colcaption==defaultValue) |
|
|
isDefault=true; |
|
|
var o=new selectionPropertyValue(k,staticValuesArray[k],staticValuesArray[k],isDefault); |
|
|
valueOptions[k]=o; |
|
|
} |
|
|
} |
|
|
return valueOptions; |
|
|
} |
|
|
} |
|
|
|
|
|
/* Render Model:*/ |
|
|
function renderChartSVGFromModel(currentChartModel,targetDiv) { |
|
|
|
|
|
switch (currentChartModel.renderer) { |
|
|
case "plot": |
|
|
renderChartSVGWithPlot(currentChartModel,targetDiv); |
|
|
break; |
|
|
case "d3js": |
|
|
renderChartSVGWithD3(currentChartModel,targetDiv); |
|
|
break; |
|
|
case "d3jsv3": |
|
|
renderChartSVGWithD3V3(currentChartModel,targetDiv); |
|
|
break; |
|
|
default: |
|
|
alert("No renderer"); |
|
|
break; |
|
|
} |
|
|
return true; |
|
|
} |
|
|
function renderChartSVGWithPlot (currentChartModel,targetDiv) |
|
|
{ |
|
|
console.log("using Plot"); |
|
|
var myOptions=new Object; |
|
|
//myOptions.marks=new Array(); |
|
|
//myOptions.sort=new Array(); |
|
|
|
|
|
myOptions=getPlotOptionsObj(currentChartModel.chartPropertiesUsed); |
|
|
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]); |
|
|
/*Plot.barX(rs_table0, |
|
|
{ |
|
|
x: "gesamt", |
|
|
y: "eintrag", |
|
|
fill: "blue" |
|
|
} |
|
|
*/ |
|
|
|
|
|
} |
|
|
|
|
|
myOptions["marks"].push(marksArray); |
|
|
var svgPlot=Plot.plot(myOptions); |
|
|
document.getElementById(targetDiv).innerHTML=""; |
|
|
document.getElementById(targetDiv).appendChild(svgPlot); |
|
|
|
|
|
//return svgPlot; |
|
|
} |
|
|
function renderChartSVGWithD3 (currentChartModel,targetDiv) |
|
|
{ |
|
|
console.log("using D3JS"); |
|
|
var svgD3=new Object; |
|
|
for(var k=0;k< currentChartModel.chartElements.length;k++) |
|
|
{ |
|
|
svgD3=renderChartElementWithD3(currentChartModel.chartElements[k],targetDiv); |
|
|
} |
|
|
|
|
|
|
|
|
//document.getElementById(targetDiv).innerHTML=""; |
|
|
//document.getElementById(targetDiv).appendChild(svgD3); |
|
|
} |
|
|
function renderChartSVGWithD3V3 (currentChartModel,targetDiv) |
|
|
{ |
|
|
console.log("using D3JS_v3"); |
|
|
var svgD3=new Object; |
|
|
for(var k=0;k< currentChartModel.chartElements.length;k++) |
|
|
{ |
|
|
svgD3=renderChartElementWithD3V3(currentChartModel.chartElements[k],targetDiv); |
|
|
} |
|
|
|
|
|
return svgD3; |
|
|
} |
|
|
|
|
|
/*Transfer form to model: */ |
|
|
function updateChartModel() |
|
|
{ |
|
|
|
|
|
var myChartPropertiesUsed=new Array(); |
|
|
//first empty properties: |
|
|
/*for(var k=0;k< myChartModel.chartPropertiesUsed.length;k++) |
|
|
{ |
|
|
myChartModel.chartPropertiesUsed[k].pop(); |
|
|
}*/ |
|
|
|
|
|
if(document.getElementById("chartName").value=="") |
|
|
document.getElementById("chartName").value=vizInitialName; |
|
|
var chartName=document.getElementById("chartName").value; |
|
|
//myChartModel.options.caption=chartName; |
|
|
if(myChartModel.renderer=="") |
|
|
myChartModel.renderer=document.getElementById("fldVizRenderer").value; |
|
|
var myCaption=new usedVizProperty("caption","caption",chartName); |
|
|
myChartPropertiesUsed.push(myCaption); |
|
|
//var myForm=document.forms["chartPropertiesForm"]; |
|
|
for(var k=0;k < commonChartProperties.length;k++) |
|
|
{ |
|
|
if(getCommonChartProperty(commonChartProperties[k].name)!="") |
|
|
{ |
|
|
var myProp=new usedVizProperty(commonChartProperties[k].name,commonChartProperties[k].variableName,getCommonChartProperty(commonChartProperties[k].name)); |
|
|
myChartPropertiesUsed.push(myProp); |
|
|
} |
|
|
} |
|
|
|
|
|
//first Collect all groups: |
|
|
|
|
|
myChartModel.chartPropertiesUsed=myChartPropertiesUsed; |
|
|
|
|
|
//Update the source Code TEXTAREA: |
|
|
updateChartModelCode(myChartModel); |
|
|
return myChartModel; |
|
|
|
|
|
} |
|
|
function getPlotOptionsObj(chartPropertiesUsed) |
|
|
{ |
|
|
var commonChartPropertyGroups=[]; |
|
|
var previousGroup=""; |
|
|
var optionsString="{"; |
|
|
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)!="") |
|
|
{ |
|
|
textDelim=(commonChartProperties[k].propValueType=="string")?"\"":""; |
|
|
optionsString+=",\""+commonChartProperties[k].variableName+"\":"+textDelim+getChartPropertyValue(chartPropertiesUsed,commonChartProperties[k].name)+textDelim; |
|
|
} |
|
|
} |
|
|
if(commonChartPropertyGroups[i].groupVariableName!="layout") |
|
|
optionsString+=" }"; //close tag |
|
|
} |
|
|
|
|
|
optionsString+= ", \"marks\":[]"; |
|
|
optionsString+=" }"; //close tag |
|
|
var chartOptions=JSON.parse(optionsString); |
|
|
return chartOptions; |
|
|
|
|
|
} |
|
|
function renderChart(chartDiv,currentChartModel) |
|
|
{ |
|
|
|
|
|
/*if(document.getElementById("chartName").value=="") |
|
|
document.getElementById("chartName").value=vizInitialName;*/ |
|
|
if(currentChartModel.chartElements.length>0 && currentChartModel.chartElements[0]) |
|
|
{ |
|
|
renderChartSVGFromModel(currentChartModel,chartDiv); |
|
|
} |
|
|
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>"; |
|
|
// |
|
|
|
|
|
} |
|
|
|
|
|
function prepareSelectionForm() |
|
|
{ |
|
|
var selectionProperties=[]; |
|
|
|
|
|
var myProp= new selectionProperty("dimension1","Dimension 1",true,false,true,null,null,true); |
|
|
selectionProperties[0]=myProp; |
|
|
var myProp= new selectionProperty("dimension2","Dimension 2",true,false,false,null,null,true); |
|
|
selectionProperties[1]=myProp; |
|
|
var myProp= new selectionProperty("measure1","Maß",true,true,true,null,null,true); |
|
|
selectionProperties[2]=myProp; |
|
|
|
|
|
return selectionProperties; |
|
|
} |
|
|
|
|
|
function createChartElementConfig1Form(renderer,elemID) |
|
|
{ |
|
|
//first empty form: |
|
|
var formChartElementConfig1=document.getElementById("ChartElementConfig1Div"); |
|
|
while (formChartElementConfig1.firstChild) { |
|
|
formChartElementConfig1.removeChild(formChartElementConfig1.firstChild); |
|
|
} |
|
|
|
|
|
//First Datasource: |
|
|
const elementDatasourceDiv=document.createElement("div"); |
|
|
const fieldDatasourceElem = document.createElement("div"); |
|
|
fieldDatasourceElem.classList.add("field"); |
|
|
fieldDatasourceElem.classList.add("is-grouped"); |
|
|
//label: |
|
|
const labelDatasourceElem = document.createElement("div"); |
|
|
labelDatasourceElem.classList.add("label-container"); |
|
|
const labelDatasource = document.createElement("label"); |
|
|
labelDatasource.classList.add("label"); |
|
|
labelDatasource.classList.add("is-required"); |
|
|
labelDatasource.classList.add("is-small"); |
|
|
labelDatasource.classList.add("has-tooltip-right"); |
|
|
labelDatasource.setAttribute("data-tooltip","Datenquelle für das Diagrammelement"); |
|
|
|
|
|
const textnode = document.createTextNode("Datenquelle"); |
|
|
labelDatasource.appendChild(textnode); |
|
|
labelDatasourceElem.appendChild(labelDatasource); |
|
|
fieldDatasourceElem.appendChild(labelDatasourceElem); |
|
|
const inpElemId = document.createElement("input"); |
|
|
inpElemId.name="chartElementID"; |
|
|
inpElemId.id="chartElementID"; |
|
|
inpElemId.type="hidden"; |
|
|
|
|
|
|
|
|
const selDatasourceElem = document.createElement("select"); |
|
|
selDatasourceElem.name="chartElementDatasource"; |
|
|
selDatasourceElem.id="chartElementDatasource"; |
|
|
selDatasourceElem.classList.add("select"); |
|
|
selDatasourceElem.classList.add("is-small"); |
|
|
|
|
|
selDatasourceElem.onchange= function () { |
|
|
createChartElementsConfig2Form(renderer); |
|
|
}; |
|
|
fillSelectOptions(selDatasourceElem,rsTableMetaData,true); |
|
|
fieldDatasourceElem.appendChild(selDatasourceElem); |
|
|
fieldDatasourceElem.appendChild(inpElemId); |
|
|
|
|
|
elementDatasourceDiv.appendChild(fieldDatasourceElem); |
|
|
formChartElementConfig1.appendChild(elementDatasourceDiv); |
|
|
|
|
|
//Then vizType: |
|
|
const elementVizTypeDiv=document.createElement("div"); |
|
|
const fieldVizTypeElem = document.createElement("div"); |
|
|
fieldVizTypeElem.classList.add("field"); |
|
|
fieldVizTypeElem.classList.add("is-grouped"); |
|
|
//label: |
|
|
const labelVizTypeElem = document.createElement("div"); |
|
|
labelVizTypeElem.classList.add("label-container"); |
|
|
const labelVizType = document.createElement("label"); |
|
|
labelVizType.classList.add("label"); |
|
|
labelVizType.classList.add("is-required"); |
|
|
labelVizType.classList.add("is-small"); |
|
|
labelVizType.classList.add("has-tooltip-right"); |
|
|
labelVizType.setAttribute("data-tooltip","Art des Diagrammelements"); |
|
|
|
|
|
const textnodeVizType = document.createTextNode("Diagrammelement-Typ"); |
|
|
labelVizType.appendChild(textnodeVizType); |
|
|
labelVizTypeElem.appendChild(labelVizType); |
|
|
fieldVizTypeElem.appendChild(labelVizTypeElem); |
|
|
|
|
|
const selVizTypeElem = document.createElement("select"); |
|
|
selVizTypeElem.name="chartElementVizType"; |
|
|
selVizTypeElem.id="chartElementVizType"; |
|
|
selVizTypeElem.classList.add("select"); |
|
|
selVizTypeElem.classList.add("is-small"); |
|
|
selVizTypeElem.onchange= function () { |
|
|
createChartElementsConfig2Form(renderer); |
|
|
}; |
|
|
fillSelectOptions(selVizTypeElem,getPossibleVizTypes(renderer),false); |
|
|
fieldVizTypeElem.appendChild(selVizTypeElem); |
|
|
elementVizTypeDiv.appendChild(fieldVizTypeElem); |
|
|
|
|
|
formChartElementConfig1.appendChild(elementVizTypeDiv); |
|
|
|
|
|
} |
|
|
function createChartElementsConfig2Form(renderer) |
|
|
{ |
|
|
var dataSource=document.getElementById("chartElementDatasource").value; |
|
|
var vizType=document.getElementById("chartElementVizType").value; |
|
|
//now Elements: |
|
|
var formChartElementConfig2Div=document.getElementById("ChartElementConfig2Div"); |
|
|
while (formChartElementConfig2Div.firstChild) { |
|
|
formChartElementConfig2Div.removeChild(formChartElementConfig2Div.firstChild); |
|
|
} |
|
|
|
|
|
const elementDivBox = document.createElement("div"); |
|
|
|
|
|
for(var k=0;k < vizTypeProperties.length;k++) |
|
|
{ |
|
|
if(vizType==vizTypeProperties[k].typeUniquename) |
|
|
elementDivBox.appendChild(renderDimensionField(vizTypeProperties[k],dataSource)); |
|
|
} |
|
|
const saveBtnDiv = document.createElement("div"); |
|
|
const saveBtn = document.createElement("input"); |
|
|
saveBtn.type="BUTTON"; |
|
|
saveBtn.value="Übernehmen"; |
|
|
saveBtn.classList.add("button"); |
|
|
saveBtn.classList.add("is-small"); |
|
|
|
|
|
saveBtn.onclick =function() { |
|
|
saveChartElementConfig() |
|
|
} |
|
|
saveBtnDiv.appendChild(saveBtn); |
|
|
elementDivBox.appendChild(saveBtnDiv); |
|
|
|
|
|
formChartElementConfig2Div.appendChild(elementDivBox); |
|
|
|
|
|
/*columnsDiv.appendChild(columnDiv); |
|
|
//title |
|
|
const columnDivTitle = document.createElement("div"); |
|
|
columnDivTitle.classList.add("column"); |
|
|
columnDivTitle.classList.add("is-narrow"); |
|
|
const columnDivBoxTitle = document.createElement("div"); |
|
|
columnDivBoxTitle.classList.add("box"); |
|
|
columnDivBoxTitle.style="width: 500px"; |
|
|
for(var k=0;k < myCommonChartProperties.length;k++) |
|
|
{ |
|
|
if(myCommonChartProperties[k].name=="caption") |
|
|
columnDivBoxTitle.appendChild(renderChartPropertyField(myCommonChartProperties[k])); |
|
|
} |
|
|
|
|
|
columnDivTitle.appendChild(columnDivBoxTitle); |
|
|
columnsDiv.appendChild(columnDivTitle); |
|
|
myForm.appendChild(columnsDiv); |
|
|
*/ |
|
|
} |
|
|
|
|
|
function saveChartElementConfig() |
|
|
{ |
|
|
var elemID=document.getElementById("chartElementID").value; |
|
|
var vizTypeUniquename=document.getElementById("chartElementVizType").value; |
|
|
var datasource=document.getElementById("chartElementDatasource").value; |
|
|
|
|
|
if(elemID=="") |
|
|
elemID=0; |
|
|
|
|
|
var myVizType=new usedVizType(elemID,vizTypeUniquename,vizTypeUniquename,datasource); //nr,vizTypeUniquename,caption,datasource |
|
|
var propertyCounter=0; |
|
|
for(var k=0;k < vizTypeProperties.length;k++) |
|
|
{ |
|
|
if(vizTypeUniquename==vizTypeProperties[k].typeUniquename |
|
|
&& document.getElementById(vizTypeProperties[k].propUniquename).value !="") |
|
|
{ |
|
|
var myUsedVizTypeProperty=new usedVizTypeProperty(propertyCounter,vizTypeProperties[k].propUniquename, vizTypeProperties[k].caption,document.getElementById(vizTypeProperties[k].propUniquename).value); //))nr,vizTypePropertyUniquename,caption,propertyValue ) |
|
|
myVizType.elementTypeProperties.push(myUsedVizTypeProperty); |
|
|
} |
|
|
} |
|
|
//myVizType.elementTypeProperties=null; |
|
|
//TODO: Existenz abfangen, hier wird einfach hinzugefügt: |
|
|
myChartModel.chartElements.push(myVizType); |
|
|
//Reset Elements Form |
|
|
elemID++; |
|
|
document.getElementById("chartElementID").value=elemID; |
|
|
document.getElementById("chartElementVizType").value=""; |
|
|
var formChartElementConfig2Div=document.getElementById("ChartElementConfig2Div"); |
|
|
while (formChartElementConfig2Div.firstChild) { |
|
|
formChartElementConfig2Div.removeChild(formChartElementConfig2Div.firstChild); |
|
|
} |
|
|
document.getElementById("vizElementCounter").value=myChartModel.chartElements.length; |
|
|
renderChart('chartDiv',myChartModel); |
|
|
|
|
|
/*var marksArray=new Array(); |
|
|
marksArray[elemID]=Plot.barX(rs_table0, |
|
|
{ |
|
|
x: "gesamt", |
|
|
y: "eintrag", |
|
|
fill: "blue" |
|
|
} |
|
|
); |
|
|
chartOptions["marks"].push(marksArray);*/ |
|
|
|
|
|
} |
|
|
function removeChartElementConfig() |
|
|
{ |
|
|
|
|
|
var propertyCounter=myChartModel.chartElements.length; |
|
|
if(propertyCounter>0) |
|
|
{ |
|
|
var elemID=myChartModel.chartElements[propertyCounter-1].nr; |
|
|
|
|
|
/*var filtered=myChartModel.chartElements.filter(obj => obj.nr !== propertyCounter-1); |
|
|
myChartModel.chartElements=filtered;*/ |
|
|
myChartModel.chartElements.pop(); |
|
|
elemID--; |
|
|
if(document.getElementById("chartElementID")) |
|
|
document.getElementById("chartElementID").value=elemID; |
|
|
document.getElementById("vizElementCounter").value=myChartModel.chartElements.length; |
|
|
renderChart('chartDiv',myChartModel); |
|
|
} |
|
|
} |
|
|
|
|
|
function resetChartPropertiesForm() |
|
|
{ |
|
|
myChartModel=new chartModel(1,"",document.getElementById("fldVizRenderer").value,rsTableMetaData); |
|
|
renderChart('chartDiv',myChartModel); |
|
|
return true; |
|
|
} |
|
|
function getPossibleVizTypes(renderer) |
|
|
{ |
|
|
|
|
|
var possibleVizTypes=new Array(); |
|
|
for(var k=0;k < vizTypes.length;k++) |
|
|
{ |
|
|
if(vizTypes[k].rendererUniquename==renderer) |
|
|
{ |
|
|
var newVizType = new possibleVizType( //nr,value,name,explanation,isDefault |
|
|
k,vizTypes[k].uniquename,vizTypes[k].caption,'',false); |
|
|
possibleVizTypes.push(newVizType); |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
return possibleVizTypes; |
|
|
} |
|
|
function fillDimensionProperty(vizTypeProperty,datasource) |
|
|
{ |
|
|
var isMeasure=(vizTypeProperty.groupUniquename=="MEASURE")?true:false; |
|
|
var myProp= new dimensionProperty(vizTypeProperty.propUniquename,vizTypeProperty.caption,vizTypeProperty.explanation,isMeasure,vizTypeProperty.isMandatory,datasource); |
|
|
|
|
|
return myProp; |
|
|
} |
|
|
function showChartPropertiesFormDiv(formDiv,formElementsDiv,renderer) |
|
|
{ |
|
|
var myDiv=document.getElementById(formDiv); |
|
|
switch (formDiv) |
|
|
{ |
|
|
case "generalChartPropertiesFormDiv": |
|
|
renderGeneralChartPropertiesForm(formElementsDiv,commonChartProperties,renderer); |
|
|
break; |
|
|
case "ChartElementDiv": |
|
|
break; |
|
|
default: |
|
|
//do nothing |
|
|
break; |
|
|
} |
|
|
|
|
|
|
|
|
if(myDiv.style.display=="block") |
|
|
myDiv.style.display="none"; |
|
|
else |
|
|
myDiv.style.display="block"; |
|
|
|
|
|
} |
|
|
|
|
|
function prepareChartProperties(chartType) |
|
|
{ |
|
|
/*OBSOLETE*/ |
|
|
var chartProperties=[]; |
|
|
chartProperties=prepareForm(chartType,vizTypeProperties); |
|
|
renderForm("chartPropertiesForm",chartProperties,commonChartProperties); |
|
|
renderFormDetails("chartPropertiesFormDetails",commonChartProperties); |
|
|
|
|
|
return true; |
|
|
|
|
|
} |
|
|
|
|
|
function prepareForm(vizTypeUniquename,vizTypeProperties) |
|
|
{ |
|
|
var chartProperties=[]; |
|
|
var propertyCounter=0; |
|
|
for(var k=0;k < vizTypeProperties.length;k++) |
|
|
{ |
|
|
if(vizTypeUniquename==vizTypeProperties[k].typeUniquename) |
|
|
{ |
|
|
var isMeasure=(vizTypeProperties[k].groupUniquename=="MEASURE")?true:false; |
|
|
var myProp= new dimensionProperty(vizTypeProperties[k].propUniquename,vizTypeProperties[k].caption,vizTypeProperties[k].explanation,isMeasure,vizTypeProperties[k].isMandatory); |
|
|
chartProperties.push(myProp); |
|
|
propertyCounter++; |
|
|
} |
|
|
} |
|
|
return chartProperties; |
|
|
} |
|
|
/* |
|
|
function prepareBarXForm() |
|
|
{ |
|
|
var chartProperties=[]; |
|
|
var propertyCounter=0; |
|
|
var myProp= new dimensionProperty("viz_dimension1","Kategorie-Dimension",false,true); |
|
|
chartProperties[0]=myProp; |
|
|
var myProp= new dimensionProperty("viz_measure1","Maß",true,true); |
|
|
chartProperties[1]=myProp; |
|
|
|
|
|
return chartProperties; |
|
|
} |
|
|
|
|
|
function prepareBarYForm() |
|
|
{ |
|
|
var chartProperties=[]; |
|
|
var propertyCounter=0; |
|
|
var myProp= new dimensionProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true); |
|
|
chartProperties[0]=myProp; |
|
|
var myProp= new dimensionProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true); |
|
|
chartProperties[1]=myProp; |
|
|
var myProp= new dimensionProperty("viz_measure1","Maß",true,true,true,null,null,true); |
|
|
chartProperties[2]=myProp; |
|
|
|
|
|
return chartProperties; |
|
|
} |
|
|
|
|
|
function prepareLineForm() |
|
|
{ |
|
|
var chartProperties=[]; |
|
|
var propertyCounter=0; |
|
|
var myProp= new dimensionProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true); |
|
|
chartProperties[0]=myProp; |
|
|
var myProp= new dimensionProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true); |
|
|
chartProperties[1]=myProp; |
|
|
var myProp= new dimensionProperty("viz_measure1","Maß",true,true,true,null,null,true); |
|
|
chartProperties[2]=myProp; |
|
|
|
|
|
return chartProperties; |
|
|
} |
|
|
|
|
|
function prepareLineForm_alt() |
|
|
{ |
|
|
var chartProperties=[]; |
|
|
var propertyCounter=0; |
|
|
var myProp= new dimensionProperty("dimension1","X-Achse",true,false,true,null,null,true); |
|
|
chartProperties[0]=myProp; |
|
|
var myProp= new dimensionProperty("measure1","Y-Achse",true,true,true,null,null,true); |
|
|
chartProperties[1]=myProp; |
|
|
|
|
|
return chartProperties; |
|
|
} |
|
|
*/ |
|
|
function fillDataSelectionForm(formDiv) |
|
|
{ |
|
|
/* OBSOLETE*/ |
|
|
formDivElem=document.getElementById(formDiv); |
|
|
if(formDivElem.style.display=="none") |
|
|
{ |
|
|
var selectionProperties=[]; |
|
|
var dimFunctions=[]; |
|
|
var myFunction= new dimFunction(0,"Wort 1 ans Ende","switchWord1and2ff",false); |
|
|
dimFunctions[0]=myFunction; |
|
|
var myFunction= new dimFunction(1,"Nur Wort 1","justWord1",false); |
|
|
dimFunctions[1]=myFunction; |
|
|
var myFunction= new dimFunction(2,"Abkürzen (20)","abbreviate",false); |
|
|
dimFunctions[2]=myFunction; |
|
|
|
|
|
selectionProperties=prepareSelectionForm(); |
|
|
for(var k=0;k < selectionProperties.length;k++) |
|
|
{ |
|
|
fillSelectOptions(document.getElementById(selectionProperties[k].name),selectionProperties[k].getValueResultset(),selectionProperties[k].isMandatory); |
|
|
if(selectionProperties[k].optionalFunction) |
|
|
{ |
|
|
var fnSelElem = document.getElementById(selectionProperties[k].name+"_fn"); |
|
|
fillSelectOptions(fnSelElem,dimFunctions,false); |
|
|
} |
|
|
} |
|
|
formDivElem.style.display="block"; |
|
|
} |
|
|
else |
|
|
formDivElem.style.display="none"; |
|
|
|
|
|
} |
|
|
|
|
|
function selectionResultPreview(myDiv) |
|
|
{ |
|
|
myDivElem=document.getElementById(myDiv); |
|
|
if(myDivElem.style.display=="none") |
|
|
{ |
|
|
var selectionRs=[]; |
|
|
var selectionRsMetaData=[]; |
|
|
var rowcount=rs.length; |
|
|
var maxLenCategoryDim=0; |
|
|
var maxMeasure=0; |
|
|
selectionRsMetaData=fillSelectionResultMetaData(); |
|
|
//alert(selectionRsMetaData[0].colname); |
|
|
selectionRs=fillSelectionResult(selectionRsMetaData); |
|
|
|
|
|
showSelectionTable("selectionResultPreviewTable",selectionRs,selectionRsMetaData,10); |
|
|
myDivElem.style.display="block"; |
|
|
} |
|
|
else |
|
|
myDivElem.style.display="none"; |
|
|
} |
|
|
function fillSelectionResultMetaData() |
|
|
{ |
|
|
var selectionRsMetaData=[]; |
|
|
var dimension1=document.getElementById("dimension1").value; |
|
|
var dimension2=document.getElementById("dimension2").value; |
|
|
var measure=document.getElementById("measure1").value; |
|
|
|
|
|
var functionOfDimension1=document.getElementById("dimension1_fn").value; |
|
|
var functionOfDimension2=document.getElementById("dimension2_fn").value; |
|
|
var functionOfMeasureDim=document.getElementById("measure1_fn").value; |
|
|
|
|
|
//first fill metadata: |
|
|
|
|
|
var counter=1; |
|
|
selectionRsMetaData.push(new selectionRowMetaData(counter,"dimension1",dimension1,getColumnCaption(dimension1),0,functionOfDimension1)); |
|
|
if(dimension2!="") |
|
|
{ |
|
|
counter++; |
|
|
var dim2=new selectionRowMetaData(counter,"dimension2",dimension2,getColumnCaption(dimension2),0,functionOfDimension2); |
|
|
selectionRsMetaData.push(dim2 ); |
|
|
} |
|
|
counter++; |
|
|
selectionRsMetaData.push(new selectionRowMetaData(counter,"measure",measure,getColumnCaption(measure),0),functionOfMeasureDim); |
|
|
|
|
|
return selectionRsMetaData; |
|
|
} |
|
|
|
|
|
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 "viz_dimension1": |
|
|
dimension1=chartElem.elementTypeProperties[k].propertyValue; |
|
|
case "viz_dimension2": |
|
|
dimension2=chartElem.elementTypeProperties[k].propertyValue; |
|
|
break; |
|
|
case "viz_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 fillSelectionResult(selectionRsMetaData) |
|
|
{ |
|
|
//OBSOLETE: |
|
|
var selectionRs=[]; |
|
|
//get MetaData: |
|
|
var dimension1,dimension2,measure, |
|
|
functionOfDimension1,functionOfDimension2,functionOfMeasureDim; |
|
|
for(rownr=0;rownr<selectionRsMetaData.length;rownr++) |
|
|
{ |
|
|
if(selectionRsMetaData[rownr].targetColumn=="dimension1") |
|
|
{ |
|
|
dimension1=selectionRsMetaData[rownr].colname; |
|
|
functionOfDimension1=selectionRsMetaData[rownr].colfunction; |
|
|
} |
|
|
|
|
|
if(selectionRsMetaData[rownr].targetColumn=="dimension2") |
|
|
{ |
|
|
dimension2=selectionRsMetaData[rownr].colname; |
|
|
functionOfDimension2=selectionRsMetaData[rownr].colfunction; |
|
|
} |
|
|
if(selectionRsMetaData[rownr].targetColumn=="measure") |
|
|
{ |
|
|
measure=selectionRsMetaData[rownr].colname; |
|
|
functionOfMeasureDim=selectionRsMetaData[rownr].colfunction; |
|
|
} |
|
|
|
|
|
} |
|
|
//alert(dimension1+"-"+dimension2+"-"+measure+"-"+ functionOfCategoryDim+"-"+functionOfDimension2+"-"+functionOfMeasureDim); |
|
|
//get and transform Data: |
|
|
var maxLenDimension1=0; |
|
|
var maxMeasure=0; |
|
|
var rowcount=rs.length; |
|
|
//alert("Zeilenanzahl " +rowcount); |
|
|
for(rownr=0;rownr<rowcount;rownr++) |
|
|
{ |
|
|
var dimension1Value=rs[rownr][dimension1]; |
|
|
if(functionOfDimension1) |
|
|
{ |
|
|
dimension1Value=applyFunction(dimension1Value,functionOfDimension1); |
|
|
} |
|
|
var dimension2Value; |
|
|
if(dimension2) |
|
|
{ |
|
|
var dimension2Value=rs[rownr][dimension2]; |
|
|
if(functionOfDimension2!="") |
|
|
{ |
|
|
dimension2Value=applyFunction(dimension2,functionOfDimension2); |
|
|
} |
|
|
} |
|
|
|
|
|
var measureDimValue=rs[rownr][measure]; |
|
|
if(functionOfMeasureDim) |
|
|
{ |
|
|
measureDimValue=applyFunction(measureDimValue,functionOfMeasureDim); |
|
|
} |
|
|
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 selectionRs; |
|
|
|
|
|
} |
|
|
|
|
|
function renderForm(formDiv,myChartProperties,myCommonChartProperties) |
|
|
{ |
|
|
//OBSOLETE: |
|
|
//first empty form: |
|
|
var myForm=document.getElementById(formDiv); |
|
|
while (myForm.firstChild) { |
|
|
myForm.removeChild(myForm.firstChild); |
|
|
} |
|
|
const columnsDiv = document.createElement("div"); |
|
|
columnsDiv.classList.add("columns"); |
|
|
const columnDiv = document.createElement("div"); |
|
|
columnDiv.classList.add("column"); |
|
|
columnDiv.classList.add("is-narrow"); |
|
|
const columnDivBox = document.createElement("div"); |
|
|
columnDivBox.classList.add("box"); |
|
|
columnDivBox.style="width: 500px"; |
|
|
|
|
|
for(var k=0;k < myChartProperties.length;k++) |
|
|
{ |
|
|
columnDivBox.appendChild(renderDimensionField(myChartProperties[k])); |
|
|
} |
|
|
columnDiv.appendChild(columnDivBox); |
|
|
columnsDiv.appendChild(columnDiv); |
|
|
//title |
|
|
const columnDivTitle = document.createElement("div"); |
|
|
columnDivTitle.classList.add("column"); |
|
|
columnDivTitle.classList.add("is-narrow"); |
|
|
const columnDivBoxTitle = document.createElement("div"); |
|
|
columnDivBoxTitle.classList.add("box"); |
|
|
columnDivBoxTitle.style="width: 500px"; |
|
|
for(var k=0;k < myCommonChartProperties.length;k++) |
|
|
{ |
|
|
if(myCommonChartProperties[k].name=="caption") |
|
|
columnDivBoxTitle.appendChild(renderChartPropertyField(myCommonChartProperties[k])); |
|
|
} |
|
|
|
|
|
columnDivTitle.appendChild(columnDivBoxTitle); |
|
|
columnsDiv.appendChild(columnDivTitle); |
|
|
myForm.appendChild(columnsDiv); |
|
|
|
|
|
} |
|
|
|
|
|
function renderDimensionField(vizTypeProperty,datasource) |
|
|
{ |
|
|
const fieldElem = document.createElement("div"); |
|
|
fieldElem.classList.add("field"); |
|
|
fieldElem.classList.add("is-grouped"); |
|
|
//label: |
|
|
const labelElem = document.createElement("div"); |
|
|
labelElem.classList.add("label-container"); |
|
|
const label = document.createElement("label"); |
|
|
label.classList.add("label"); |
|
|
label.classList.add("is-required"); |
|
|
label.classList.add("is-small"); |
|
|
label.classList.add("has-tooltip-right"); |
|
|
//label.setAttribute("data-tooltip",dimensionProperty.explanation); |
|
|
|
|
|
const textnode = document.createTextNode(vizTypeProperty.caption); |
|
|
label.appendChild(textnode); |
|
|
labelElem.appendChild(label); |
|
|
fieldElem.appendChild(labelElem); |
|
|
//input: |
|
|
const inputFieldElem = document.createElement("div"); |
|
|
inputFieldElem.classList.add("field"); |
|
|
inputFieldElem.classList.add("is-active"); |
|
|
const inputSelectElem = document.createElement("div"); |
|
|
inputSelectElem.classList.add("select"); |
|
|
inputSelectElem.classList.add("is-small"); |
|
|
//inputSelectElem.classList.add("is-fullwidth"); |
|
|
|
|
|
const selElem = document.createElement("select"); |
|
|
selElem.name=vizTypeProperty.propUniquename; |
|
|
selElem.id=vizTypeProperty.propUniquename; |
|
|
/* vermutlich unnötig: selElem.onchange= function () { |
|
|
renderChart('chartDiv'); |
|
|
};*/ |
|
|
var dimensionProperty=fillDimensionProperty(vizTypeProperty,datasource); |
|
|
fillSelectOptions(selElem,dimensionProperty.getValueResultset(),dimensionProperty.isMandatory); |
|
|
inputSelectElem.appendChild(selElem); |
|
|
inputFieldElem.appendChild(inputSelectElem); |
|
|
fieldElem.appendChild(inputFieldElem); |
|
|
return fieldElem; |
|
|
|
|
|
} |
|
|
|
|
|
function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,renderer) |
|
|
{ |
|
|
//first empty form: |
|
|
var myForm=document.getElementById(formDiv); |
|
|
while (myForm.firstChild) { |
|
|
myForm.removeChild(myForm.firstChild); |
|
|
} |
|
|
//first Collect all groups: |
|
|
var commonChartPropertyGroups=[]; |
|
|
var previousGroup=""; |
|
|
for(var k=0;k < myCommonChartProperties.length;k++) |
|
|
{ |
|
|
var groupUniquename=myCommonChartProperties[k].groupUniquename; |
|
|
if(groupUniquename!="" |
|
|
&& groupUniquename != previousGroup |
|
|
&& myCommonChartProperties[k].groupVariableName !="") |
|
|
{ |
|
|
var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,""); |
|
|
commonChartPropertyGroups.push(newcommonChartPropertyGroup); |
|
|
} |
|
|
previousGroup=groupUniquename; |
|
|
} |
|
|
const columnDiv = document.createElement("div"); |
|
|
for(var i=0;i < commonChartPropertyGroups.length;i++) |
|
|
{ |
|
|
|
|
|
const columnGroupDiv = document.createElement("div"); |
|
|
columnGroupDiv.id=commonChartPropertyGroups[i].groupUniquename; |
|
|
columnGroupDiv.classList.add("box"); |
|
|
|
|
|
const columnGroupHeaderDiv = document.createElement("div"); |
|
|
const colHeader = document.createTextNode(commonChartPropertyGroups[i].caption); |
|
|
const colHeaderBold = document.createElement("strong"); |
|
|
colHeaderBold.appendChild(colHeader); |
|
|
const colHeaderParagraph = document.createElement("label"); |
|
|
colHeaderParagraph.classList.add("label"); |
|
|
colHeaderParagraph.classList.add("is-small"); |
|
|
colHeaderParagraph.appendChild(colHeaderBold); |
|
|
//Toggle visibility: |
|
|
const colHeaderToggleBtn = document.createElement("a"); |
|
|
colHeaderToggleBtn.id="openBody"+commonChartPropertyGroups[i].groupUniquename; |
|
|
//colHeaderToggleBtn.classList.add("is-small"); |
|
|
colHeaderToggleBtn.onclick =function() { |
|
|
toggleGroupBodyDiv(this.id) |
|
|
} |
|
|
const colHeaderToggleBtnText = document.createTextNode(" ..."); |
|
|
colHeaderToggleBtn.appendChild(colHeaderToggleBtnText); |
|
|
colHeaderParagraph.appendChild(colHeaderToggleBtn); |
|
|
columnGroupHeaderDiv.appendChild(colHeaderParagraph); |
|
|
//columnGroupHeaderDiv.appendChild(colHeaderToggleBtn); |
|
|
|
|
|
columnGroupDiv.appendChild(columnGroupHeaderDiv); |
|
|
const columnGroupBodyDiv = document.createElement("div"); |
|
|
columnGroupBodyDiv.id="Body"+commonChartPropertyGroups[i].groupUniquename; |
|
|
columnGroupBodyDiv.style.display="none"; |
|
|
for(var k=0;k < myCommonChartProperties.length;k++) |
|
|
{ |
|
|
if(myCommonChartProperties[k].groupUniquename==commonChartPropertyGroups[i].groupUniquename |
|
|
&& myCommonChartProperties[k].variableName!="") |
|
|
columnGroupBodyDiv.appendChild(renderChartPropertyField(myCommonChartProperties[k])); |
|
|
} |
|
|
columnGroupDiv.appendChild(columnGroupBodyDiv); |
|
|
columnDiv.appendChild(columnGroupDiv); |
|
|
|
|
|
} |
|
|
myForm.appendChild(columnDiv); |
|
|
/*alte Liste flach: |
|
|
const divBox = document.createElement("div"); |
|
|
for(var k=0;k < myCommonChartProperties.length;k++) |
|
|
{ |
|
|
if((myCommonChartProperties[k].groupVariableName=="layout" |
|
|
|| myCommonChartProperties[k].groupVariableName=="style" |
|
|
|| myCommonChartProperties[k].groupVariableName=="x" |
|
|
|| myCommonChartProperties[k].groupVariableName=="y" |
|
|
|| myCommonChartProperties[k].groupVariableName=="color" |
|
|
) |
|
|
&& myCommonChartProperties[k].rendererUniquename==renderer) |
|
|
divBox.appendChild(renderChartPropertyField(myCommonChartProperties[k])); |
|
|
} |
|
|
|
|
|
|
|
|
myForm.appendChild(divBox); |
|
|
*/ |
|
|
} |
|
|
function toggleGroupBodyDiv(groupBodyDiv) |
|
|
{ |
|
|
var bodyDiv=groupBodyDiv.substr(4); //remove "open" Prefix |
|
|
var myDiv=document.getElementById(bodyDiv); |
|
|
if(myDiv.style.display=="block") |
|
|
myDiv.style.display="none"; |
|
|
else |
|
|
myDiv.style.display="block"; |
|
|
|
|
|
} |
|
|
function renderFormDetails(formDiv,myCommonChartProperties) |
|
|
{ |
|
|
/*OBSOLETE*/ |
|
|
//first empty form: |
|
|
var myForm=document.getElementById(formDiv); |
|
|
while (myForm.firstChild) { |
|
|
myForm.removeChild(myForm.firstChild); |
|
|
} |
|
|
const columnsDiv = document.createElement("div"); |
|
|
columnsDiv.classList.add("columns"); |
|
|
|
|
|
/* |
|
|
const tabElem = document.createElement("table"); |
|
|
for(var k=0;k < myCommonChartProperties.length;k++) |
|
|
{ |
|
|
const rowElem = document.createElement("tr"); |
|
|
const tdCap = document.createElement("td"); |
|
|
const textnode = document.createTextNode(myCommonChartProperties[k].caption); |
|
|
tdCap.appendChild(textnode); |
|
|
rowElem.appendChild(tdCap); |
|
|
if(myCommonChartProperties[k].inputType=="TEXT") |
|
|
{ |
|
|
//Einfaches Texteingabefeld: |
|
|
const tdInpElem = document.createElement("td"); |
|
|
const inpElem = document.createElement("input"); |
|
|
inpElem.id=myCommonChartProperties[k].name; |
|
|
inpElem.name=myCommonChartProperties[k].name; |
|
|
inpElem.type="text"; |
|
|
inpElem.value=myCommonChartProperties[k].defaultValue; |
|
|
tdInpElem.appendChild(inpElem); |
|
|
rowElem.appendChild(tdInpElem); |
|
|
|
|
|
} |
|
|
else |
|
|
{ |
|
|
const tdSelElem = document.createElement("td"); |
|
|
const selElem = document.createElement("select"); |
|
|
selElem.name=myCommonChartProperties[k].name; |
|
|
selElem.id=myCommonChartProperties[k].name; |
|
|
fillSelectOptions(selElem,myCommonChartProperties[k].getValueResultset(),myCommonChartProperties[k].isMandatory); |
|
|
tdSelElem.appendChild(selElem); |
|
|
rowElem.appendChild(tdSelElem); |
|
|
} |
|
|
tabElem.appendChild( rowElem); |
|
|
} |
|
|
*/ |
|
|
|
|
|
//first Collect all groups: |
|
|
var commonChartPropertyGroups=[]; |
|
|
var previousGroup=""; |
|
|
for(var k=0;k < myCommonChartProperties.length;k++) |
|
|
{ |
|
|
var groupUniquename=myCommonChartProperties[k].groupUniquename; |
|
|
if(groupUniquename!="" |
|
|
&& groupUniquename != previousGroup |
|
|
&& myCommonChartProperties[k].groupVariableName !="") |
|
|
{ |
|
|
var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,""); |
|
|
commonChartPropertyGroups.push(newcommonChartPropertyGroup); |
|
|
} |
|
|
previousGroup=groupUniquename; |
|
|
} |
|
|
for(var i=0;i < commonChartPropertyGroups.length;i++) |
|
|
{ |
|
|
const columnDiv = document.createElement("div"); |
|
|
columnDiv.classList.add("column"); |
|
|
columnDiv.classList.add("is-narrow"); |
|
|
const columnDivBox = document.createElement("div"); |
|
|
columnDivBox.classList.add("box"); |
|
|
columnDivBox.style="width: 300px"; |
|
|
|
|
|
const colHeader = document.createTextNode(commonChartPropertyGroups[i].caption); |
|
|
const colHeaderParagraph = document.createElement("p"); |
|
|
colHeaderParagraph.classList.add("title"); |
|
|
colHeaderParagraph.classList.add("is-6"); |
|
|
colHeaderParagraph.appendChild(colHeader); |
|
|
columnDivBox.appendChild(colHeaderParagraph); |
|
|
|
|
|
for(var k=0;k < myCommonChartProperties.length;k++) |
|
|
{ |
|
|
if(myCommonChartProperties[k].groupUniquename==commonChartPropertyGroups[i].groupUniquename) |
|
|
columnDivBox.appendChild(renderChartPropertyField(myCommonChartProperties[k])); |
|
|
} |
|
|
columnDiv.appendChild(columnDivBox); |
|
|
columnsDiv.appendChild(columnDiv); |
|
|
} |
|
|
myForm.appendChild(columnsDiv); |
|
|
} |
|
|
|
|
|
function renderChartPropertyField(commonChartProperty) |
|
|
{ |
|
|
//Wenn im chartModel schon ein Wert vorhanden ist, wird er vorbelegt: if(commonChartProperty) |
|
|
var propValue=""; |
|
|
if(myChartModel && myChartModel.chartPropertiesUsed.length>0) |
|
|
{ |
|
|
propValue=getChartModelChartPropertyUsed(myChartModel.chartPropertiesUsed,commonChartProperty.name ); |
|
|
} |
|
|
|
|
|
const fieldElem = document.createElement("div"); |
|
|
fieldElem.classList.add("field"); |
|
|
fieldElem.classList.add("is-grouped"); |
|
|
//label: |
|
|
const labelElem = document.createElement("div"); |
|
|
labelElem.classList.add("label-container"); |
|
|
const label = document.createElement("label"); |
|
|
label.classList.add("label"); |
|
|
label.classList.add("is-required"); |
|
|
label.classList.add("is-small"); |
|
|
label.classList.add("has-tooltip-right"); |
|
|
label.setAttribute("data-tooltip",commonChartProperty.explanation); |
|
|
|
|
|
const textnode = document.createTextNode(commonChartProperty.caption); |
|
|
label.appendChild(textnode); |
|
|
labelElem.appendChild(label); |
|
|
fieldElem.appendChild(labelElem); |
|
|
//input: |
|
|
const inputFieldElem = document.createElement("div"); |
|
|
inputFieldElem.classList.add("field"); |
|
|
const inputParaElem = document.createElement("p"); |
|
|
inputParaElem.classList.add("control-new"); |
|
|
const inputElem = document.createElement("div"); |
|
|
inputElem.classList.add("is-small"); |
|
|
//inputElem.classList.add("is-fullwidth"); |
|
|
|
|
|
switch (commonChartProperty.inputType) { |
|
|
case "SELECT": |
|
|
//select input: |
|
|
inputElem.classList.add("select"); |
|
|
inputElem.classList.add("is-small"); |
|
|
const selElem = document.createElement("select"); |
|
|
selElem.name=commonChartProperty.name; |
|
|
selElem.id=commonChartProperty.name; |
|
|
//selElem.style="width:50px"; |
|
|
if(commonChartProperty.variableName=="") |
|
|
{ |
|
|
selElem.disabled="disabled"; |
|
|
selElem.readonly="readonly"; |
|
|
} |
|
|
|
|
|
selElem.onchange= function () { |
|
|
updateChartModel(); |
|
|
renderChart('chartDiv',myChartModel); |
|
|
}; |
|
|
fillSelectOptions(selElem,commonChartProperty.getValueResultset(),commonChartProperty.isMandatory); |
|
|
selElem.value= (propValue=="")?commonChartProperty.defaultValue:propValue; |
|
|
inputElem.appendChild(selElem); |
|
|
inputParaElem.appendChild(inputElem); |
|
|
|
|
|
break; |
|
|
case "TEXTAREA": |
|
|
//großes Texteingabefeld: |
|
|
const textAreaElem = document.createElement("textarea"); |
|
|
textAreaElem.cols="20"; |
|
|
textAreaElem.rows=3; |
|
|
if(commonChartProperty.variableName=="") |
|
|
{ |
|
|
textAreaElem.disabled="disabled"; |
|
|
textAreaElem.readonly="readonly"; |
|
|
} |
|
|
textAreaElem.name=commonChartProperty.name; |
|
|
textAreaElem.id=commonChartProperty.name; |
|
|
textAreaElem.value= (propValue=="")?commonChartProperty.defaultValue:propValue; |
|
|
textAreaElem.onchange= function () { |
|
|
updateChartModel(); |
|
|
renderChart('chartDiv',myChartModel); |
|
|
}; |
|
|
inputElem.appendChild(textAreaElem); |
|
|
inputParaElem.appendChild(inputElem); |
|
|
|
|
|
break; |
|
|
case "RANGE": |
|
|
|
|
|
//Schieberegler: |
|
|
const rangeElem = document.createElement("input"); |
|
|
rangeElem.type="NUMBER"; |
|
|
rangeElem.size=5; |
|
|
if(commonChartProperty.variableName=="") |
|
|
{ |
|
|
rangeElem.disabled="disabled"; |
|
|
rangeElem.readonly="readonly"; |
|
|
} |
|
|
|
|
|
/* klappt noch nicht: |
|
|
rangeElem.type="RANGE"; |
|
|
rangeElem.min=commonChartProperty.range_from; |
|
|
rangeElem.max=commonChartProperty.range_to; |
|
|
rangeElem.step=50; |
|
|
*/ |
|
|
|
|
|
rangeElem.name=commonChartProperty.name; |
|
|
rangeElem.id=commonChartProperty.name; |
|
|
rangeElem.value= (propValue=="")?commonChartProperty.defaultValue:propValue; |
|
|
rangeElem.onchange= function () { |
|
|
updateChartModel(); |
|
|
renderChart('chartDiv',myChartModel); |
|
|
}; |
|
|
inputElem.appendChild(rangeElem); |
|
|
inputParaElem.appendChild(inputElem); |
|
|
break; |
|
|
default: |
|
|
//Einfaches Texteingabefeld: |
|
|
const inpElem = document.createElement("input"); |
|
|
inpElem.type="TEXT"; |
|
|
if(commonChartProperty.propValueType=="integer") |
|
|
inpElem.type="NUMBER"; |
|
|
if(commonChartProperty.inputType=="COLOR") |
|
|
inpElem.type="color"; |
|
|
inpElem.size=5; |
|
|
if(commonChartProperty.variableName=="") |
|
|
{ |
|
|
inpElem.disabled="disabled"; |
|
|
inpElem.readonly="readonly"; |
|
|
} |
|
|
inpElem.name=commonChartProperty.name; |
|
|
inpElem.id=commonChartProperty.name; |
|
|
inpElem.value= (propValue=="")?commonChartProperty.defaultValue:propValue; |
|
|
inpElem.onchange= function () { |
|
|
updateChartModel(); |
|
|
renderChart('chartDiv',myChartModel); |
|
|
}; |
|
|
inputElem.appendChild(inpElem); |
|
|
inputParaElem.appendChild(inputElem); |
|
|
|
|
|
break; |
|
|
} |
|
|
|
|
|
|
|
|
inputFieldElem.appendChild(inputParaElem); |
|
|
fieldElem.appendChild(inputFieldElem); |
|
|
return fieldElem; |
|
|
|
|
|
} |
|
|
|
|
|
function getChartModelChartPropertyUsed(myChartPropertiesUsed,commonChartPropertyName) |
|
|
{ |
|
|
var propValue=""; |
|
|
for(var k=0;k < myChartPropertiesUsed.length;k++) |
|
|
{ |
|
|
if(myChartPropertiesUsed[k].name==commonChartPropertyName) |
|
|
propValue=myChartPropertiesUsed[k].propertyValue; |
|
|
} |
|
|
return propValue; |
|
|
} |
|
|
|
|
|
function fillSelectOptions(myCombo,myValues,isMandatory) |
|
|
{ |
|
|
var optionCounter=0; |
|
|
var selectedOption=null; |
|
|
while (myCombo.firstChild) { |
|
|
myCombo.removeChild(myCombo.firstChild); |
|
|
} |
|
|
var optionCounter=0; |
|
|
if(!isMandatory) |
|
|
{ |
|
|
//add an empty option: |
|
|
var o=new Option("",""); |
|
|
myCombo.options[optionCounter]=o; |
|
|
selectedOption=optionCounter; |
|
|
optionCounter++; |
|
|
} |
|
|
for(var j=0;j < myValues.length;j++) |
|
|
{ |
|
|
if(myValues[j].isDefault) |
|
|
selectedOption=optionCounter; |
|
|
|
|
|
var o=new Option(myValues[j].name,myValues[j].value,null,null); |
|
|
myCombo.options[optionCounter]=o; |
|
|
optionCounter++; |
|
|
} |
|
|
if(selectedOption!=null) |
|
|
myCombo.selectedIndex=selectedOption; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function prepareData_alt() |
|
|
{ |
|
|
var data=[]; |
|
|
|
|
|
var rowcount=rs.length; |
|
|
var colnrOfCategorydimName=document.getElementById("dimension1").value; |
|
|
var colnrOfMeasure=document.getElementById("measure1").value; |
|
|
var functionOfCategoryDim=document.getElementById("dimension1_fn").value; |
|
|
var functionOfMeasureDim=document.getElementById("measure1_fn").value; |
|
|
var maxLenName=0; |
|
|
var maxValue=0; |
|
|
for(j=1;j<rowcount;j++) |
|
|
{ |
|
|
console.log(rs.length+"-"+j+"-"+colnrOfCategorydimName); |
|
|
if(rs[j][colnrOfCategorydimName]) //only if Name is not empty: |
|
|
{ |
|
|
var dimension1Value=rs[j][colnrOfCategorydimName]; |
|
|
var measureDimValue=rs[j][colnrOfMeasure]; |
|
|
if(functionOfCategoryDim !="") |
|
|
dimension1Value=applyFunction(dimension1Value,functionOfCategoryDim); |
|
|
if(functionOfMeasureDim !="") |
|
|
measureDimValue=applyFunction(measureDimValue,functionOfMeasureDim); |
|
|
data.push(new d3dataRow(j,dimension1Value,measureDimValue)); |
|
|
//identify max String length to compute x axis size |
|
|
if(dimension1Value.length >maxLenName) |
|
|
maxLenName=dimension1Value.length; |
|
|
//the same for values: |
|
|
if(measureDimValue >maxValue) |
|
|
maxValue=measureDimValue; |
|
|
} |
|
|
|
|
|
} |
|
|
return data; |
|
|
} |
|
|
|
|
|
|
|
|
function showDataTable(myTableDiv,data,metadata,maxRows) |
|
|
{ |
|
|
|
|
|
tableDiv=document.getElementById(myTableDiv); |
|
|
if(tableDiv.innerHTML=="") |
|
|
{ |
|
|
var rowcount=data.length; |
|
|
if(rowcount > maxRows) |
|
|
rowcount=maxRows; |
|
|
const tabElem = document.createElement("table"); |
|
|
tabElem.border="1"; |
|
|
tabElem.width="100%"; |
|
|
const rowElem = document.createElement("tr"); |
|
|
const thCap = document.createElement("th"); |
|
|
const textnode = document.createTextNode("Zeilennr."); |
|
|
thCap.appendChild(textnode); |
|
|
rowElem.appendChild(thCap); |
|
|
|
|
|
for(var col=0;col < metadata.length;col++) |
|
|
{ |
|
|
if(metadata[col].nr) |
|
|
{ |
|
|
const thCap = document.createElement("th"); |
|
|
const textnode = document.createTextNode(metadata[col].colcaption); |
|
|
thCap.appendChild(textnode); |
|
|
rowElem.appendChild(thCap); |
|
|
} |
|
|
} |
|
|
tabElem.appendChild(rowElem); |
|
|
|
|
|
//Variablennamen in Subheader |
|
|
const rowElemSubHeader = document.createElement("tr"); |
|
|
const tdCap = document.createElement("td"); |
|
|
tdCap.style="font-family:monospace;font-size:smaller"; |
|
|
const textnodeSubHeader = document.createTextNode("(rownr)"); |
|
|
tdCap.appendChild(textnodeSubHeader); |
|
|
rowElemSubHeader.appendChild(tdCap); |
|
|
|
|
|
for(var col=0;col < metadata.length;col++) |
|
|
{ |
|
|
if(metadata[col].nr) |
|
|
{ |
|
|
const thCap = document.createElement("td"); |
|
|
thCap.style="font-family:monospace;font-size:smaller"; |
|
|
const textnode = document.createTextNode("("+metadata[col].colname+")"); |
|
|
thCap.appendChild(textnode); |
|
|
rowElemSubHeader.appendChild(thCap); |
|
|
} |
|
|
} |
|
|
tabElem.appendChild(rowElemSubHeader); |
|
|
|
|
|
for(row=0;row<rowcount;row++) |
|
|
{ |
|
|
if(data[row]) |
|
|
{ |
|
|
const rowElem = document.createElement("tr"); |
|
|
const tdCap = document.createElement("td"); |
|
|
const textnode = document.createTextNode(row); |
|
|
tdCap.appendChild(textnode); |
|
|
rowElem.appendChild(tdCap); |
|
|
for(var col=0;col < metadata.length;col++) |
|
|
{ |
|
|
if(metadata[col].nr) |
|
|
{ |
|
|
const tdCap = document.createElement("td"); |
|
|
const textnode = document.createTextNode(data[row][metadata[col].colname]); |
|
|
tdCap.appendChild(textnode); |
|
|
rowElem.appendChild(tdCap); |
|
|
} |
|
|
} |
|
|
tabElem.appendChild(rowElem); |
|
|
} |
|
|
} |
|
|
tableDiv.appendChild(tabElem); |
|
|
} |
|
|
else |
|
|
tableDiv.innerHTML=""; //reset table |
|
|
} |
|
|
|
|
|
function showSelectionTable(myTableDiv,data,metadata,maxRows) |
|
|
{ |
|
|
|
|
|
tableDiv=document.getElementById(myTableDiv); |
|
|
tableDiv.innerHTML=""; //reset table |
|
|
var rowcount=data.length; |
|
|
if(rowcount > maxRows) |
|
|
rowcount=maxRows; |
|
|
const tabElem = document.createElement("table"); |
|
|
tabElem.border="1"; |
|
|
tabElem.width="100%"; |
|
|
const rowElem = document.createElement("tr"); |
|
|
for(var col=0;col < metadata.length;col++) |
|
|
{ |
|
|
if(metadata[col].nr) |
|
|
{ |
|
|
const thCap = document.createElement("th"); |
|
|
const textnode = document.createTextNode(metadata[col].colcaption); |
|
|
thCap.appendChild(textnode); |
|
|
rowElem.appendChild(thCap); |
|
|
} |
|
|
} |
|
|
tabElem.appendChild(rowElem); |
|
|
|
|
|
for(row=1;row<rowcount;row++) |
|
|
{ |
|
|
if(data[row]) |
|
|
{ |
|
|
const rowElem = document.createElement("tr"); |
|
|
for(var col=0;col < metadata.length;col++) |
|
|
{ |
|
|
if(metadata[col].nr) |
|
|
{ |
|
|
const tdCap = document.createElement("td"); |
|
|
const textnode = document.createTextNode(data[row][metadata[col].targetColumn]); |
|
|
tdCap.appendChild(textnode); |
|
|
rowElem.appendChild(tdCap); |
|
|
} |
|
|
} |
|
|
tabElem.appendChild(rowElem); |
|
|
} |
|
|
} |
|
|
tableDiv.appendChild(tabElem); |
|
|
} |
|
|
function showChartDiv(chartDivElem) |
|
|
{ |
|
|
var myDiv=document.getElementById(chartDivElem); |
|
|
if(myDiv.style.display=="block") |
|
|
myDiv.style.display="none"; |
|
|
else |
|
|
myDiv.style.display="block"; |
|
|
} |
|
|
|
|
|
function renderChartElementWithPlot(chartElem,targetDiv) |
|
|
{ |
|
|
var plotMark=new Object; |
|
|
if(chartElem) |
|
|
{ |
|
|
var chartType=chartElem.vizTypeUniquename; |
|
|
var myDatasourceRs=rs[chartElem.datasource]; |
|
|
|
|
|
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; |
|
|
if(propValue!="") |
|
|
{ |
|
|
optionString+=",\""+propUniquename+"\":\""+propValue+"\""; |
|
|
if(propUniquename=="stroke" && chartType!="line") |
|
|
{ |
|
|
//Seriendimension hat immer fill |
|
|
optionString+=",\"fill\":\""+propValue+"\""; |
|
|
//optionString+=",\"sort\":\""+propValue+"\""; |
|
|
} |
|
|
if(propUniquename=="text") |
|
|
{ |
|
|
//Wertelabel |
|
|
optionString+=",\"textAnchor\":\"start\""; |
|
|
} |
|
|
|
|
|
if(propUniquename=="x" && orientation=="V") |
|
|
{ |
|
|
//Vertikale Diagramme sortieren immer nach X-Achse |
|
|
optionString+=",\"sort\":\""+propValue+"\""; |
|
|
} |
|
|
if(propUniquename=="y" && orientation=="H") |
|
|
{ |
|
|
//Horizontale Diagramme sortieren immer nach Y-Achse |
|
|
optionString+=",\"sort\":\""+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 renderChartElementWithD3(chartElem,targetDiv) |
|
|
{ |
|
|
var mySvg= d3.select("#"+targetDiv).selectAll("svg");//.append("svg"); |
|
|
if(chartElem) |
|
|
{ |
|
|
var chartType=chartElem.vizTypeUniquename; |
|
|
var myDatasourceRs=rs[chartElem.datasource]; |
|
|
var data=filld3data(rs[chartElem.datasource],rsColumnMetaData[chartElem.datasource],chartElem); |
|
|
console.log("Mark-option for "+chartType); |
|
|
switch (chartType) |
|
|
{ |
|
|
case "bar_x_d3": |
|
|
mySvg=makeBarX_d3(mySvg,data,chartElem); |
|
|
break; |
|
|
default: |
|
|
alert("Unknown chart type"); |
|
|
break; |
|
|
} |
|
|
} |
|
|
return mySvg; |
|
|
} |
|
|
function renderChartElementWithD3V3(chartElem,targetDiv) |
|
|
{ |
|
|
if(chartElem) |
|
|
{ |
|
|
var chartType=chartElem.vizTypeUniquename; |
|
|
var myDatasourceRs=rs[chartElem.datasource]; |
|
|
var data=filld3data(rs[chartElem.datasource],rsColumnMetaData[chartElem.datasource],chartElem); |
|
|
console.log("Mark-option for "+chartType); |
|
|
switch (chartType) |
|
|
{ |
|
|
case "sankey": |
|
|
makeSankey(targetDiv,data,rsColumnMetaData[chartElem.datasource],chartElem); |
|
|
break; |
|
|
default: |
|
|
alert("Unknown chart type"); |
|
|
break; |
|
|
} |
|
|
} |
|
|
//return mySvg; |
|
|
} |
|
|
|
|
|
function createChart(chartDivElem) |
|
|
{ |
|
|
//OBSOLETE! |
|
|
chartType=document.getElementById("viz_chart_type").value; |
|
|
|
|
|
var selectionRsMetaData=[]; |
|
|
var selectionRs=[]; |
|
|
|
|
|
//data=prepareData(); |
|
|
selectionRsMetaData=fillSelectionResultMetaData(); |
|
|
//alert(selectionRsMetaData[0].colname); |
|
|
selectionRs=fillSelectionResult(selectionRsMetaData); |
|
|
|
|
|
|
|
|
var valueLabelWidth = getCommonChartProperty("valueLabelWidth"); |
|
|
var fontFamily=getCommonChartProperty("fontFamily"); |
|
|
var gridLabelHeight = getCommonChartProperty("gridLabelHeight"); |
|
|
var gridChartOffset = getCommonChartProperty("gridChartOffset"); |
|
|
var chartWidth=getCommonChartProperty("chartWidth"); |
|
|
var fontSize=getCommonChartProperty("fontSize"); |
|
|
//svg,data |
|
|
document.getElementById(chartDivElem).innerHTML=""; //reset canvas |
|
|
/* |
|
|
var svg = d3.select("#"+chartDivElem).append("svg") |
|
|
.attr("width", chartWidth) //maxBarWidth + barLabelWidth + valueLabelWidth) |
|
|
//.attr("height", y.range()[1]) |
|
|
.attr("font-family", fontFamily) |
|
|
.attr("font-size", fontSize) |
|
|
.attr("text-anchor", "start") |
|
|
.attr("id", "chartSVG") |
|
|
; |
|
|
svg.width=50; |
|
|
*/ |
|
|
switch (chartType) |
|
|
{ |
|
|
case "sample": |
|
|
makeSample(); |
|
|
break; |
|
|
case "bar_x": |
|
|
makeBarX(chartDivElem,selectionRs); |
|
|
break; |
|
|
case "bar_x_stacked": |
|
|
makeBarXStacked(chartDivElem,selectionRs); |
|
|
break; |
|
|
case "bar_x_alt": |
|
|
makeBarX(svg,data); |
|
|
break; |
|
|
case "bar_y": |
|
|
makeBarY(chartDivElem,selectionRs); |
|
|
break; |
|
|
case "area_y": |
|
|
makeAreaY(chartDivElem,selectionRs); |
|
|
break; |
|
|
case "dot": |
|
|
makeDot(chartDivElem,selectionRs); |
|
|
break; |
|
|
case "line": |
|
|
makeLine(chartDivElem,selectionRs); |
|
|
break; |
|
|
default: |
|
|
alert("Please select a chart type"); |
|
|
break; |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
function makeBarX_d3(svg,data,chartElem) |
|
|
{ |
|
|
var barHeight = 18; |
|
|
//var barLabelWidth = 500; |
|
|
//var barLabelPadding = 10; |
|
|
//var maxBarWidth = maxValue; |
|
|
var fontSize=12;//getCommonChartProperty("fontSize"); |
|
|
var chartWidth=800;//getCommonChartProperty("chartWidth"); |
|
|
var maxValue=d3.max(data, d => d.measure1); |
|
|
var maxLenName=d3.max(data, d => d.dimension1.length); |
|
|
var maxLenNamePx=maxLenName*fontSize; |
|
|
var x = d3.scaleLinear().domain([0, d3.max(data, d => d.measure1)]).range([0, chartWidth]); |
|
|
var y = d3.scaleBand().domain(data.map(d => d.nr)).range([0, barHeight * data.length]); |
|
|
const bar = svg.selectAll("g") |
|
|
.data(data) |
|
|
.join("g") |
|
|
.attr("transform", d => `translate(${maxLenNamePx},${y(d.nr)})`) |
|
|
; |
|
|
|
|
|
bar.append("rect") |
|
|
.attr("fill", "steelblue") |
|
|
.on("mouseover",function(){ |
|
|
d3.select(this).attr("fill", "red"); |
|
|
}) |
|
|
.on("mouseout",function(){ |
|
|
d3.select(this).attr("fill", "steelblue"); |
|
|
}) |
|
|
.transition() |
|
|
.duration(750) |
|
|
.delay(function(d, i) { return i * 10; }) |
|
|
.attr("width", d => x(d.measure1)) //x) |
|
|
.attr("height", y.bandwidth() - 1) |
|
|
|
|
|
; |
|
|
//value label: |
|
|
bar.append("text") |
|
|
.attr("fill", "white") |
|
|
.attr("x", d => x(d.measure1)/2) |
|
|
.attr("y", (y.bandwidth() - 1) / 2) |
|
|
.attr("dy", "0.35em") |
|
|
.attr("text-anchor","middle") |
|
|
.text(d => d.measure1); |
|
|
//label: |
|
|
bar.append("text") |
|
|
.attr("fill", "black") |
|
|
.attr("x", 0) |
|
|
.attr("y", (y.bandwidth() - 1) / 2) |
|
|
.attr("dy", "0.35em") |
|
|
.attr("text-anchor","end") |
|
|
.text(d => d.dimension1); |
|
|
|
|
|
return bar; |
|
|
} |
|
|
|
|
|
function makeLine_alt(svg,data) { |
|
|
var xLabel=rsMetaData[document.getElementById("dimension1").value-1].colcaption; |
|
|
var yLabel=rsMetaData[document.getElementById("measure1").value-1].colcaption; |
|
|
var fontSize=getCommonChartProperty("fontSize"); |
|
|
var maxLenName=d3.max(data, d => d.name.length); |
|
|
var maxLenNamePx=maxLenName*fontSize/1.5; |
|
|
var marginLeftPx=xLabel.length*fontSize; |
|
|
|
|
|
var options = { |
|
|
marginBottom:maxLenNamePx, |
|
|
marginLeft:marginLeftPx, |
|
|
x: { |
|
|
tickRotate: -45, |
|
|
ticks: 5, |
|
|
tickSize: 5, |
|
|
line: true, |
|
|
tickPadding: 10, |
|
|
labelAnchor: "left", |
|
|
labelOffset: 0, |
|
|
nice: true, |
|
|
label: xLabel, |
|
|
type:"point" |
|
|
}, |
|
|
// set y axis options |
|
|
y: { |
|
|
grid:true, |
|
|
label: yLabel |
|
|
}, |
|
|
sort: "nr", |
|
|
// define the marks we will use, dots and a line |
|
|
marks: [ |
|
|
Plot.line(data, {x: "name", y: "value",curve:"linear"}), |
|
|
Plot.dot(data, {x: "name", y: "value" }) |
|
|
] |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
document.getElementById("chartDiv").appendChild(Plot.plot(options)); |
|
|
} |
|
|
function makeSample() |
|
|
{ |
|
|
var sales = [4]; |
|
|
sales = [ |
|
|
{units: 10, fruit: "fig"}, |
|
|
{units: 20, fruit: "date"}, |
|
|
{units: 40, fruit: "plum"}, |
|
|
{units: 30, fruit: "plum"} |
|
|
]; |
|
|
document.getElementById("chartDiv").appendChild(Plot.dot(sales, |
|
|
{x: "units", y: "fruit"} |
|
|
).plot()); |
|
|
|
|
|
} |
|
|
function getChartOptions(categoryDim1,categoryDim2,measureDim,marksArray,chartOrientationVertical) |
|
|
{ |
|
|
/*OBSOLETE*/ |
|
|
var options; |
|
|
//var categoryDim1=document.getElementById("viz_dimension1").value; |
|
|
//var categoryDim2=document.getElementById("viz_dimension2").value; |
|
|
//var measureDim=document.getElementById("viz_measure1").value; |
|
|
var chartWidth=getCommonChartProperty("width"); |
|
|
var marginLeftValue=chartWidth/5; //Default 20% linker Rand |
|
|
//if(getCommonChartProperty("marginLeft")!="") |
|
|
// marginLeftValue=getCommonChartProperty("marginLeft"); |
|
|
var fontSizeDefault=getCommonChartProperty("fontSize")+"pt"; |
|
|
var myCaption=getCommonChartProperty("caption"); |
|
|
var myFontFamily=getCommonChartProperty("font-family"); |
|
|
var myBgColor=getCommonChartProperty("background-color"); |
|
|
var myColor=getCommonChartProperty("color"); |
|
|
var marginBottomValue=100;//getCommonChartProperty("marginBottom");; |
|
|
var categoryLabel1=getColumnCaption(categoryDim1); |
|
|
var categoryLabel2=getColumnCaption(categoryDim2); |
|
|
var measureLabel=getColumnCaption(measureDim); |
|
|
|
|
|
var optionsString="{\"dummy\":1"; |
|
|
//first Collect all groups: |
|
|
var commonChartPropertyGroups=[]; |
|
|
var previousGroup=""; |
|
|
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!="" |
|
|
&& getCommonChartProperty(commonChartProperties[k].name)!="") |
|
|
{ |
|
|
textDelim=(commonChartProperties[k].propValueType=="string")?"\"":""; |
|
|
optionsString+=",\""+commonChartProperties[k].variableName+"\":"+textDelim+getCommonChartProperty(commonChartProperties[k].name)+textDelim; |
|
|
} |
|
|
} |
|
|
if(commonChartPropertyGroups[i].groupVariableName!="layout") |
|
|
optionsString+=" }"; //close tag |
|
|
} |
|
|
//optionsString+= ",\"y\":{\"label\":\"Semester\"}"; |
|
|
optionsString+= ", \"marks\":[]"; |
|
|
//optionsString+= ", \"marks\":"+JSON.stringify(marksArray)+""; |
|
|
optionsString+= ", \"caption\":\""+myCaption+"\""; |
|
|
optionsString+=" }"; //close options tag |
|
|
console.log("options:"+ optionsString); |
|
|
|
|
|
var stylesString="{\"overflow\": \"visible\""; |
|
|
|
|
|
for(var k=0;k < commonChartProperties.length;k++) |
|
|
{ |
|
|
if(commonChartProperties[k].groupUniquename=="STYLE" ) |
|
|
{ |
|
|
stylesString+=",\""+commonChartProperties[k].variableName+"\":\""+getCommonChartProperty(commonChartProperties[k].name)+"\""; |
|
|
} |
|
|
|
|
|
} |
|
|
stylesString+=" }"; |
|
|
|
|
|
console.log("Styles:"+ stylesString); |
|
|
var styles=JSON.parse(stylesString); |
|
|
var chartOptions=JSON.parse(optionsString); |
|
|
chartOptions["marks"].push(marksArray); |
|
|
options=chartOptions; |
|
|
|
|
|
return options; |
|
|
} |
|
|
function makeBarX(chartDivElem,selectionRs) { |
|
|
//OBSOLETE |
|
|
var categoryDim=document.getElementById("viz_dimension1").value; |
|
|
//var categoryDim2=document.getElementById("viz_dimension2").value; |
|
|
var measureDim=document.getElementById("viz_measure1").value; |
|
|
var fillval=document.getElementById("fill").value; |
|
|
var marksArray=new Array(); |
|
|
marksArray[0]=Plot.barX(selectionRs, |
|
|
{ |
|
|
x: measureDim, |
|
|
y: categoryDim, |
|
|
fill: fillval |
|
|
} |
|
|
); |
|
|
|
|
|
var options= getChartOptions(categoryDim,"",measureDim,marksArray,false); |
|
|
console.log("Options:"+ JSON.stringify(options)); |
|
|
var svgPlot=Plot.plot(options); |
|
|
document.getElementById(chartDivElem).appendChild(svgPlot); |
|
|
} |
|
|
function renderBarXwithPlot(chartElem,markOptions,myDatasourceRs) { |
|
|
//OBSOLETE |
|
|
var barXPlot=new Object; |
|
|
barXPlot=Plot.barX(myDatasourceRs, markOptions ); |
|
|
|
|
|
/* |
|
|
var categoryDim=""; |
|
|
var measureDim=""; |
|
|
var fillval=""; |
|
|
|
|
|
for(var k=0;k<chartElem.elementTypeProperties.length;k++) |
|
|
{ |
|
|
if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="viz_dimension1") |
|
|
categoryDim=chartElem.elementTypeProperties[k].propertyValue; |
|
|
if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="viz_measure1") |
|
|
measureDim=chartElem.elementTypeProperties[k].propertyValue; |
|
|
if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="fill") |
|
|
fillval=chartElem.elementTypeProperties[k].propertyValue; |
|
|
} |
|
|
if(fillval=="") |
|
|
fillval="blue"; |
|
|
barXPlot=Plot.barX(myDatasourceRs, |
|
|
{ |
|
|
x: measureDim, |
|
|
y: categoryDim, |
|
|
fill: fillval |
|
|
} |
|
|
); |
|
|
*/ |
|
|
return barXPlot; |
|
|
|
|
|
} |
|
|
function makeBarXStacked(chartDivElem,selectionRs) { |
|
|
//OBSOLETE |
|
|
var categoryDim1=document.getElementById("y_horizontal").value; |
|
|
var categoryDim2=document.getElementById("stroke_bar").value; |
|
|
var measureDim=document.getElementById("x_horizontal").value; |
|
|
var textDim=document.getElementById("text_horizontal").value; |
|
|
//var fillDim=document.getElementById("fill").value; |
|
|
var marksArray=new Array(); |
|
|
marksArray[0]=Plot.barX(selectionRs, |
|
|
{ |
|
|
x: measureDim, |
|
|
y: categoryDim1, |
|
|
stroke: categoryDim2, |
|
|
fill: categoryDim2 |
|
|
}) |
|
|
; |
|
|
marksArray[1]=Plot.ruleX([0]); |
|
|
if(textDim !="") |
|
|
marksArray[2]=Plot.text(selectionRs, |
|
|
{ |
|
|
x: measureDim, |
|
|
y: categoryDim1, |
|
|
text: textDim |
|
|
}) |
|
|
; |
|
|
|
|
|
var options= getChartOptions(categoryDim1,categoryDim2,measureDim,marksArray,false); |
|
|
|
|
|
console.log("Options:"+ JSON.stringify(options)); |
|
|
var svgPlot=Plot.plot(options); |
|
|
document.getElementById(chartDivElem).appendChild(svgPlot); |
|
|
} |
|
|
function makeBarY(chartDivElem,selectionRs) { |
|
|
//OBSOLETE |
|
|
var categoryDim=document.getElementById("viz_dimension1").value; |
|
|
var measureDim=document.getElementById("viz_measure1").value; |
|
|
var marksArray=new Array(); |
|
|
marksArray[0]=Plot.barY(selectionRs, |
|
|
{ |
|
|
y: measureDim, |
|
|
x: categoryDim |
|
|
}); |
|
|
marksArray[1]=Plot.ruleY([0]); |
|
|
|
|
|
var options= getChartOptions(categoryDim,"",measureDim,marksArray,true); |
|
|
|
|
|
document.getElementById(chartDivElem).appendChild(Plot.plot(options)); |
|
|
} |
|
|
|
|
|
function renderBarYwithPlot(chartElem) { |
|
|
//OBSOLETE |
|
|
var barYPlot=new Object; |
|
|
var categoryDim=""; |
|
|
var measureDim=""; |
|
|
var fillval=""; |
|
|
var myDatasourceRs=rs[chartElem.datasource]; |
|
|
for(var k=0;k<chartElem.elementTypeProperties.length;k++) |
|
|
{ |
|
|
if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="viz_dimension1") |
|
|
categoryDim=chartElem.elementTypeProperties[k].propertyValue; |
|
|
if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="viz_measure1") |
|
|
measureDim=chartElem.elementTypeProperties[k].propertyValue; |
|
|
if(chartElem.elementTypeProperties[k].vizTypePropertyUniquename=="fill") |
|
|
fillval=chartElem.elementTypeProperties[k].propertyValue; |
|
|
} |
|
|
if(fillval=="") |
|
|
fillval="blue"; |
|
|
barYPlot=Plot.barY(myDatasourceRs, |
|
|
{ |
|
|
y: measureDim, |
|
|
x: categoryDim, |
|
|
fill: fillval |
|
|
|
|
|
} |
|
|
); |
|
|
return barYPlot; |
|
|
|
|
|
} |
|
|
function makeAreaY(chartDivElem,selectionRs) { |
|
|
var categoryDim=document.getElementById("viz_dimension1").value; |
|
|
var measureDim=document.getElementById("viz_measure1").value; |
|
|
var marksArray=new Array(); |
|
|
marksArray[0]=Plot.areaY(selectionRs, |
|
|
{ |
|
|
y: measureDim, |
|
|
x: categoryDim |
|
|
}); |
|
|
marksArray[1]=Plot.ruleY([0]); |
|
|
|
|
|
var options= getChartOptions(categoryDim,"",measureDim,marksArray,true); |
|
|
|
|
|
document.getElementById(chartDivElem).appendChild(Plot.plot(options)); |
|
|
} |
|
|
function makeDot(chartDivElem,selectionRs) { |
|
|
var categoryDim=document.getElementById("viz_dimension1").value; |
|
|
var measureDim=document.getElementById("viz_measure1").value; |
|
|
var marksArray=new Array(); |
|
|
marksArray[0]=Plot.dot(selectionRs, |
|
|
{ |
|
|
y: measureDim, |
|
|
x: categoryDim |
|
|
}); |
|
|
marksArray[1]=Plot.ruleY([0]); |
|
|
//marksArray[2]=Plot.ruleX([0]); |
|
|
|
|
|
var options= getChartOptions(categoryDim,"",measureDim,marksArray,true); |
|
|
|
|
|
document.getElementById(chartDivElem).appendChild(Plot.plot(options)); |
|
|
} |
|
|
function makeLine(chartDivElem,selectionRs) { |
|
|
var categoryDim=document.getElementById("viz_dimension1").value; |
|
|
var measureDim=document.getElementById("viz_measure1").value; |
|
|
var marksArray=new Array(); |
|
|
marksArray[0]=Plot.line(selectionRs, |
|
|
{ |
|
|
y: measureDim, |
|
|
x: categoryDim, |
|
|
curve: "linear" |
|
|
}); |
|
|
marksArray[1]=Plot.dot(selectionRs, |
|
|
{ |
|
|
y: measureDim, |
|
|
x: categoryDim |
|
|
}); |
|
|
marksArray[2]=Plot.ruleY([0]); |
|
|
|
|
|
var options= getChartOptions(categoryDim,"",measureDim,marksArray,true); |
|
|
|
|
|
document.getElementById(chartDivElem).appendChild(Plot.plot(options)); |
|
|
} |
|
|
function makeBarY_alt(svg,data) { |
|
|
var xLabel=rsMetaData[document.getElementById("dimension1").value-1].colcaption; |
|
|
var yLabel=rsMetaData[document.getElementById("measure1").value-1].colcaption; |
|
|
var fontSize=getCommonChartProperty("fontSize"); |
|
|
var maxLenName=d3.max(data, d => d.name.length); |
|
|
var maxLenNamePx=maxLenName*fontSize/1.5; |
|
|
var marginLeftPx=xLabel.length*fontSize; |
|
|
|
|
|
var options = { |
|
|
marginBottom:maxLenNamePx, |
|
|
marginLeft:marginLeftPx, |
|
|
x: { |
|
|
tickRotate: -45 |
|
|
}, |
|
|
// set y axis options |
|
|
y: { |
|
|
grid:true, |
|
|
label: yLabel |
|
|
}, |
|
|
|
|
|
marks: [ |
|
|
Plot.barY(data, |
|
|
Plot.groupX( |
|
|
{y: "sum"}, |
|
|
{ |
|
|
x: "name", |
|
|
y: "value" |
|
|
} |
|
|
) |
|
|
) |
|
|
] |
|
|
} |
|
|
|
|
|
document.getElementById("chartDiv").appendChild(Plot.plot(options)); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function getChartPropertyValue(propArray,propName) |
|
|
{ |
|
|
var propertyValue=""; |
|
|
for (var i=0;i<propArray.length;i++) |
|
|
{ |
|
|
if(propArray[i].name==propName ) |
|
|
{ |
|
|
propertyValue=propArray[i].propertyValue; |
|
|
} |
|
|
|
|
|
} |
|
|
return propertyValue; |
|
|
} |
|
|
|
|
|
function getCommonChartProperty(name) |
|
|
{ |
|
|
var propertyValue=""; |
|
|
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 showSrcCode(renderer) |
|
|
{ |
|
|
var myChartDiv= document.getElementById("chartDiv2"); |
|
|
var mySrcDiv=document.getElementById("chartSVGsrc"); |
|
|
if(mySrcDiv.style.display=="block") |
|
|
mySrcDiv.style.display="none"; |
|
|
else |
|
|
mySrcDiv.style.display="block"; |
|
|
|
|
|
var numberOfChildNodes=myChartDiv.childNodes.length; |
|
|
var svg_xml =""; |
|
|
|
|
|
if(numberOfChildNodes>0) |
|
|
{ |
|
|
switch (renderer) { |
|
|
case "plot": |
|
|
var myFigure=myChartDiv.childNodes[0]; |
|
|
if(myFigure.childNodes.length>0) |
|
|
{ |
|
|
var mySvg=myFigure.childNodes[0]; |
|
|
svg_xml = (new XMLSerializer).serializeToString(mySvg); |
|
|
} |
|
|
break; |
|
|
case "d3js": |
|
|
for (var i=0;i<numberOfChildNodes;i++) |
|
|
{ |
|
|
var myNode=myChartDiv.childNodes[i]; |
|
|
if(myNode.nodeName=="svg") |
|
|
{ |
|
|
var mySvg=myNode; //document.getElementById("chartSVG"); |
|
|
// Extract the data as SVG text string |
|
|
svg_xml = (new XMLSerializer).serializeToString(mySvg); |
|
|
} |
|
|
} |
|
|
break; |
|
|
default: |
|
|
document.getElementById("chartSrc").innerHTML="Unbekannter Renderer"; |
|
|
break; |
|
|
} |
|
|
document.getElementById("chartSrc").innerHTML=svg_xml; |
|
|
} |
|
|
else |
|
|
{ |
|
|
document.getElementById("chartSrc").innerHTML="Kein Quellcode gefunden"; |
|
|
} |
|
|
|
|
|
|
|
|
//document.getElementById("chartSVGsrc").style.visibility="visible"; |
|
|
/* |
|
|
const selection = window.getSelection(); |
|
|
const range = document.createRange(); |
|
|
range.selectNodeContents(ergtabelle); |
|
|
selection.removeAllRanges(); |
|
|
selection.addRange(range); |
|
|
|
|
|
document.execCommand('copy'); |
|
|
selection.removeAllRanges(); |
|
|
|
|
|
alert("Angezeigte Tabelle wurde in die Zwischenablage kopiert."); |
|
|
*/ |
|
|
} |
|
|
|
|
|
|
|
|
function showChartModelCode() |
|
|
{ |
|
|
var mySrcDiv=document.getElementById("chartModelsrc"); |
|
|
if(mySrcDiv.style.display=="block") |
|
|
mySrcDiv.style.display="none"; |
|
|
else |
|
|
mySrcDiv.style.display="block"; |
|
|
|
|
|
updateChartModelCode(myChartModel); |
|
|
|
|
|
|
|
|
} |
|
|
function updateChartModelCode(myChartModel) |
|
|
{ |
|
|
var myCodeDiv= document.getElementById("chartModelSrcCode"); |
|
|
var myJson =""; |
|
|
if(myChartModel) |
|
|
{ |
|
|
myJson=JSON.stringify(myChartModel); |
|
|
myCodeDiv.innerHTML=myJson; |
|
|
myCodeDiv.value=myJson; |
|
|
} |
|
|
else |
|
|
{ |
|
|
myCodeDiv.innerHTML="Kein Quellcode gefunden"; |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
function loadChartModelCode(chartModelSrcCodeTextarea,chartDiv) |
|
|
{ |
|
|
|
|
|
var mySrc=document.getElementById(chartModelSrcCodeTextarea); |
|
|
var myJsonString =mySrc.value; |
|
|
|
|
|
if(myJsonString!="") |
|
|
{ |
|
|
myChartModel=JSON.parse(myJsonString); |
|
|
if(myChartModel) |
|
|
{ |
|
|
document.getElementById("vizElementCounter").value=myChartModel.chartElements.length; |
|
|
renderChart(chartDiv,myChartModel) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
function copySrcCode(mydiv) |
|
|
{ |
|
|
var ergtabelle=document.getElementById(mydiv); |
|
|
const selection = window.getSelection(); |
|
|
const range = document.createRange(); |
|
|
range.selectNodeContents(ergtabelle); |
|
|
selection.removeAllRanges(); |
|
|
selection.addRange(range); |
|
|
|
|
|
document.execCommand('copy'); |
|
|
selection.removeAllRanges(); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function makeHisto() { |
|
|
d3.csv( "/superx/xml/js/d3/dense.csv" ).then( function( data ) { |
|
|
var histo = d3.histogram().value( d=>+d.A )( data ); |
|
|
var height=400; |
|
|
var scX = d3.scaleBand().padding( 0.2 ).round( true ) |
|
|
.range( [15, 515] ).domain( histo ); |
|
|
|
|
|
var scY = d3.scaleLinear().range( [height, 0] ) |
|
|
.domain( [0, d3.max( histo, d=>d.length ) ] ).nice(); |
|
|
|
|
|
var g = d3.select("#chartDiv").append("svg") |
|
|
.append( "g" ).attr( "transform", "translate( 40,50 )" ) |
|
|
|
|
|
g.selectAll( "rect" ).data( histo ).enter() |
|
|
.append( "rect" ).attr( "width", scX.bandwidth() ) |
|
|
.attr( "x", scX ).attr( "y", d=>scY(d.length) ) |
|
|
.attr( "height", d => height-scY(d.length) ) |
|
|
.attr( "fill", "red" ).attr( "fill-opacity", 0.2 ) |
|
|
.attr( "stroke", "red" ).attr( "stroke-width", 2 ) |
|
|
|
|
|
g.selectAll( "text" ).data( histo ).enter().append( "text" ) |
|
|
.attr( "text-anchor", "middle" ) |
|
|
.attr( "font-family", "sans-serif" ) |
|
|
.attr( "font-size", 14 ) |
|
|
.attr( "x", d => scX(d)+0.5*scX.bandwidth() ) |
|
|
.attr( "y", 225 ) |
|
|
.text( d=>(d.x0+d.x1)/2 ); |
|
|
|
|
|
g.append( "g" ).call( d3.axisLeft(scY) ); |
|
|
} ); |
|
|
} |
|
|
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 showVizNavTab(nr) |
|
|
{ |
|
|
|
|
|
for (let i = 1; i < 4; i++) { |
|
|
var divName="tab-"+i; |
|
|
//alert(divName); |
|
|
tabDivElem=document.getElementById(divName); |
|
|
if(i==nr) |
|
|
tabDivElem.style.display="block"; |
|
|
else |
|
|
tabDivElem.style.display="none"; |
|
|
|
|
|
} |
|
|
}
|
|
|
|
