Browse Source

Refactoring Objekt dataRow generisch, Anpassung barX,barY,line #3

makro_datasrc
Daniel Quathamer 2 years ago
parent
commit
adcbf29df9
  1. 8
      src-modules/module/viz/conf/includes.txt
  2. 0
      superx/xml/js/viz/d3-7.0.0-license.txt
  3. 0
      superx/xml/js/viz/d3.min.js
  4. 0
      superx/xml/js/viz/plot-0.4.3-license.txt
  5. 0
      superx/xml/js/viz/plot.js
  6. 410
      superx/xml/js/viz/viz_functions.js
  7. 138
      superx/xml/viz_html_chart.xsl

8
src-modules/module/viz/conf/includes.txt

@ -1,9 +1,9 @@
doku/viz_modul/viz.html doku/viz_modul/viz.html
WEB-INF/conf/edustore/db/bin/SQL_ENV_viz.sam WEB-INF/conf/edustore/db/bin/SQL_ENV_viz.sam
xml/js/d3/viz_functions.js xml/js/viz/viz_functions.js
xml/js/d3/d3.min.js xml/js/viz/d3.min.js
xml/js/d3/d3-license.txt xml/js/viz/d3-license.txt
xml/viz_html_chart.xsl xml/viz_html_chart.xsl
images/icons/chart-bar.svg images/icons/chart-bar.svg
xml/js/d3/plot.js xml/js/viz/plot.js

0
superx/xml/js/d3/d3-7.0.0-license.txt → superx/xml/js/viz/d3-7.0.0-license.txt

0
superx/xml/js/d3/d3.min.js → superx/xml/js/viz/d3.min.js vendored

0
superx/xml/js/d3/plot-0.4.3-license.txt → superx/xml/js/viz/plot-0.4.3-license.txt

0
superx/xml/js/d3/plot.js → superx/xml/js/viz/plot.js

410
superx/xml/js/d3/viz_functions.js → superx/xml/js/viz/viz_functions.js

@ -1,14 +1,25 @@
/* d3 Code */ /* d3 Code */
function d3dataRow(nr,name,value ) function d3dataRow(nr,dimension1,dimension2,measure )
{ {
this.nr=nr; this.nr=nr;
this.name=name; this.dimension1=dimension1;
this.value=value; this.dimension2=dimension2;
this.measure=measure;
} }
function chartPropertyValue(nr,name,value,isDefault ) 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.nr=nr;
this.name=name; this.name=name;
@ -17,6 +28,8 @@ this.isDefault=isDefault;
} }
function dimFunction(nr,name,value,isDefault ) function dimFunction(nr,name,value,isDefault )
{ {
this.nr=nr; this.nr=nr;
@ -25,8 +38,37 @@ this.value=value;
this.isDefault=isDefault; this.isDefault=isDefault;
} }
function chartProperty(name,caption,isMeasure,isMandatory)
{
this.name=name;
this.caption=caption;
this.isMeasure=isMeasure;
this.isMandatory=isMandatory;
this.getValueResultset = function () {
var valueOptions=[];
var optionCounter=0;
selectionRsMetaData=fillSelectionResultMetaData();
console.log("felder"+selectionRsMetaData.length);
for(var j=0;j < selectionRsMetaData.length;j++)
{
var isDefault=false;
console.log("feld "+selectionRsMetaData[j].nr+selectionRsMetaData[j].targetColumn);
if(selectionRsMetaData[j].nr)
{
if(selectionRsMetaData[j].targetColumn==this.name)
isDefault=true;
var o=new selectionPropertyValue(selectionRsMetaData[j].nr,selectionRsMetaData[j].colcaption,selectionRsMetaData[j].targetColumn,isDefault);
valueOptions[optionCounter]=o;
optionCounter++;
}
}
return valueOptions;
}
function chartProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction) }
function selectionProperty(name,caption,isDynamic,isMeasure,isMandatory,staticValues,defaultValue,optionalFunction)
{ {
this.name=name; this.name=name;
this.caption=caption; this.caption=caption;
@ -50,7 +92,7 @@ this.getValueResultset = function () {
{ {
if(rsMetaData[j].colcaption==defaultValue) if(rsMetaData[j].colcaption==defaultValue)
isDefault=true; isDefault=true;
var o=new chartPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].colname,isDefault); var o=new selectionPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].colname,isDefault);
valueOptions[optionCounter]=o; valueOptions[optionCounter]=o;
optionCounter++; optionCounter++;
} }
@ -64,7 +106,7 @@ this.getValueResultset = function () {
var isDefault=false; var isDefault=false;
if(rsMetaData[j].colcaption==defaultValue) if(rsMetaData[j].colcaption==defaultValue)
isDefault=true; isDefault=true;
var o=new chartPropertyValue(k,staticValuesArray[k],staticValuesArray[k],isDefault); var o=new selectionPropertyValue(k,staticValuesArray[k],staticValuesArray[k],isDefault);
valueOptions[k]=o; valueOptions[k]=o;
} }
} }
@ -72,13 +114,30 @@ this.getValueResultset = function () {
} }
} }
function prepareChartProperties(chartType) function prepareSelectionForm()
{ {
var dimFunctions=[]; var selectionProperties=[];
var myFunction= new dimFunction(0,"Wort 1 ans Ende","switchWord1and2ff",false);
dimFunctions[0]=myFunction; 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 showChartPropertiesForm()
{
document.getElementById("chartPropertiesFormDiv").style.visibility="visible";
}
function prepareChartProperties(chartType)
{
var chartProperties=[]; var chartProperties=[];
//var chartWidth=getCommonChartProperty("chartWidth");
//document.forms["chartPropertiesForm"].elements["chartWidth"].value=chartWidth;
switch (chartType) { switch (chartType) {
case "bar_x": case "bar_x":
chartProperties=prepareBarXForm(); chartProperties=prepareBarXForm();
@ -92,19 +151,21 @@ function prepareChartProperties(chartType)
default: default:
return false; return false;
break; break;
} }
renderForm("chartProperties",chartProperties,commonChartProperties,dimFunctions); renderForm("chartPropertiesFormDetails",chartProperties,commonChartProperties);
return true; return true;
} }
function prepareBarXForm() function prepareBarXForm()
{ {
var chartProperties=[]; var chartProperties=[];
var propertyCounter=0; var propertyCounter=0;
var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,true,null,null,true); var myProp= new chartProperty("viz_dimension1","Kategorie-Dimension",false,true);
chartProperties[0]=myProp; chartProperties[0]=myProp;
var myProp= new chartProperty("viz_measure_dim","Maß",true,true,false,true,null,true); var myProp= new chartProperty("viz_measure1","Maß",true,true);
chartProperties[1]=myProp; chartProperties[1]=myProp;
return chartProperties; return chartProperties;
@ -114,11 +175,11 @@ function prepareBarYForm()
{ {
var chartProperties=[]; var chartProperties=[];
var propertyCounter=0; var propertyCounter=0;
var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,true,null,null,true); var myProp= new chartProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true);
chartProperties[0]=myProp; chartProperties[0]=myProp;
var myProp= new chartProperty("viz_series_dim","Serien-Dimension",true,false,false,null,null,true); var myProp= new chartProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true);
chartProperties[1]=myProp; chartProperties[1]=myProp;
var myProp= new chartProperty("viz_measure_dim","Maß",true,true,true,null,null,true); var myProp= new chartProperty("viz_measure1","Maß",true,true,true,null,null,true);
chartProperties[2]=myProp; chartProperties[2]=myProp;
return chartProperties; return chartProperties;
@ -128,23 +189,166 @@ function prepareLineForm()
{ {
var chartProperties=[]; var chartProperties=[];
var propertyCounter=0; var propertyCounter=0;
var myProp= new chartProperty("viz_category_dim","X-Achse",true,false,true,null,null,true); var myProp= new chartProperty("viz_dimension1","Kategorie-Dimension",true,false,true,null,null,true);
chartProperties[0]=myProp;
var myProp= new chartProperty("viz_dimension2","Serien-Dimension",true,false,false,null,null,true);
chartProperties[1]=myProp;
var myProp= new chartProperty("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 chartProperty("dimension1","X-Achse",true,false,true,null,null,true);
chartProperties[0]=myProp; chartProperties[0]=myProp;
var myProp= new chartProperty("viz_measure_dim","Y-Achse",true,true,true,null,null,true); var myProp= new chartProperty("measure1","Y-Achse",true,true,true,null,null,true);
chartProperties[1]=myProp; chartProperties[1]=myProp;
return chartProperties; return chartProperties;
} }
function fillDataSelectionForm(formDiv)
{
var selectionProperties=[];
var dimFunctions=[];
var myFunction= new dimFunction(0,"Wort 1 ans Ende","switchWord1and2ff",false);
dimFunctions[0]=myFunction;
function renderForm(formDiv,chartProperties,myCommonChartProperties,dimFunctions) 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);
}
}
}
function selectionResultPreview(myDiv)
{
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);
}
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++;
selectionRsMetaData.push(new selectionRowMetaData(counter,"dimension2",dimension2,getColumnCaption(dimension2),0),functionOfDimension2);
}
counter++;
selectionRsMetaData.push(new selectionRowMetaData(counter,"measure",measure,getColumnCaption(measure),0),functionOfMeasureDim);
return selectionRsMetaData;
}
function fillSelectionResult(selectionRsMetaData)
{
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,chartProperties,myCommonChartProperties)
{ {
//first empty form: //first empty form:
var myForm=document.getElementById(formDiv); var myForm=document.getElementById(formDiv);
while (myForm.firstChild) { while (myForm.firstChild) {
myForm.removeChild(myForm.firstChild); myForm.removeChild(myForm.firstChild);
} }
//now fill it:
const tabElem = document.createElement("table"); const tabElem = document.createElement("table");
//tabElem.caption="Eigenschaften";
myForm.appendChild(tabElem); myForm.appendChild(tabElem);
for(var k=0;k < chartProperties.length;k++) for(var k=0;k < chartProperties.length;k++)
{ {
@ -158,17 +362,6 @@ function renderForm(formDiv,chartProperties,myCommonChartProperties,dimFunctions
selElem.id=chartProperties[k].name; selElem.id=chartProperties[k].name;
fillSelectOptions(selElem,chartProperties[k].getValueResultset(),chartProperties[k].isMandatory); fillSelectOptions(selElem,chartProperties[k].getValueResultset(),chartProperties[k].isMandatory);
tdSelElem.appendChild(selElem); tdSelElem.appendChild(selElem);
if(chartProperties[k].optionalFunction)
{
const fnElemLabel = document.createTextNode(" opt. Fkt.: ");
const fnSelElem = document.createElement("select");
fnSelElem.name=chartProperties[k].name+"_fn";
fnSelElem.id=chartProperties[k].name+"_fn";
fillSelectOptions(fnSelElem,dimFunctions,false);
tdSelElem.appendChild(fnElemLabel);
tdSelElem.appendChild(fnSelElem);
}
rowElem.appendChild(tdCap); rowElem.appendChild(tdCap);
rowElem.appendChild(tdSelElem); rowElem.appendChild(tdSelElem);
@ -229,15 +422,15 @@ if(selectedOption!=null)
function prepareData() function prepareData_alt()
{ {
var data=[]; var data=[];
var rowcount=rs.length; var rowcount=rs.length;
var colnrOfCategorydimName=document.getElementById("viz_category_dim").value; var colnrOfCategorydimName=document.getElementById("dimension1").value;
var colnrOfMeasure=document.getElementById("viz_measure_dim").value; var colnrOfMeasure=document.getElementById("measure1").value;
var functionOfCategoryDim=document.getElementById("viz_category_dim_fn").value; var functionOfCategoryDim=document.getElementById("dimension1_fn").value;
var functionOfMeasureDim=document.getElementById("viz_measure_dim_fn").value; var functionOfMeasureDim=document.getElementById("measure1_fn").value;
var maxLenName=0; var maxLenName=0;
var maxValue=0; var maxValue=0;
for(j=1;j<rowcount;j++) for(j=1;j<rowcount;j++)
@ -245,16 +438,16 @@ for(j=1;j<rowcount;j++)
console.log(rs.length+"-"+j+"-"+colnrOfCategorydimName); console.log(rs.length+"-"+j+"-"+colnrOfCategorydimName);
if(rs[j][colnrOfCategorydimName]) //only if Name is not empty: if(rs[j][colnrOfCategorydimName]) //only if Name is not empty:
{ {
var categoryDimValue=rs[j][colnrOfCategorydimName]; var dimension1Value=rs[j][colnrOfCategorydimName];
var measureDimValue=rs[j][colnrOfMeasure]; var measureDimValue=rs[j][colnrOfMeasure];
if(functionOfCategoryDim !="") if(functionOfCategoryDim !="")
categoryDimValue=applyFunction(categoryDimValue,functionOfCategoryDim); dimension1Value=applyFunction(dimension1Value,functionOfCategoryDim);
if(functionOfMeasureDim !="") if(functionOfMeasureDim !="")
measureDimValue=applyFunction(measureDimValue,functionOfMeasureDim); measureDimValue=applyFunction(measureDimValue,functionOfMeasureDim);
data.push(new d3dataRow(j,categoryDimValue,measureDimValue)); data.push(new d3dataRow(j,dimension1Value,measureDimValue));
//identify max String length to compute x axis size //identify max String length to compute x axis size
if(categoryDimValue.length >maxLenName) if(dimension1Value.length >maxLenName)
maxLenName=categoryDimValue.length; maxLenName=dimension1Value.length;
//the same for values: //the same for values:
if(measureDimValue >maxValue) if(measureDimValue >maxValue)
maxValue=measureDimValue; maxValue=measureDimValue;
@ -265,60 +458,115 @@ return data;
} }
function showDataTable() function showDataTable(myTableDiv,data,metadata,maxRows)
{ {
tableDiv=document.getElementById("tableDiv");
tableDiv=document.getElementById(myTableDiv);
tableDiv.innerHTML=""; //reset table tableDiv.innerHTML=""; //reset table
var rowcount=rs.length; var rowcount=data.length;
if(rowcount > maxRows)
rowcount=maxRows;
const tabElem = document.createElement("table"); const tabElem = document.createElement("table");
tabElem.border="1"; tabElem.border="1";
tabElem.width="100%"; tabElem.width="100%";
const rowElem = document.createElement("tr"); const rowElem = document.createElement("tr");
for(var col=0;col < rsMetaData.length;col++) for(var col=0;col < metadata.length;col++)
{
if(metadata[col].nr)
{ {
const thCap = document.createElement("th"); const thCap = document.createElement("th");
const textnode = document.createTextNode(rsMetaData[col].colcaption); const textnode = document.createTextNode(metadata[col].colcaption);
thCap.appendChild(textnode); thCap.appendChild(textnode);
rowElem.appendChild(thCap); rowElem.appendChild(thCap);
} }
}
tabElem.appendChild(rowElem); tabElem.appendChild(rowElem);
for(row=1;row<rowcount;row++) for(row=1;row<rowcount;row++)
{ {
if(rs[row]) if(data[row])
{ {
const rowElem = document.createElement("tr"); const rowElem = document.createElement("tr");
for(var col=1;col < rs[row].length;col++) for(var col=0;col < metadata.length;col++)
{ {
const tdCap = document.createElement("td"); if(metadata[col].nr)
if(rs[row][col])
{ {
const textnode = document.createTextNode(rs[row][col]); const tdCap = document.createElement("td");
const textnode = document.createTextNode(data[row][metadata[col].colname]);
tdCap.appendChild(textnode); tdCap.appendChild(textnode);
}
rowElem.appendChild(tdCap); rowElem.appendChild(tdCap);
} }
}
tabElem.appendChild(rowElem); tabElem.appendChild(rowElem);
} }
} }
tableDiv.appendChild(tabElem); tableDiv.appendChild(tabElem);
} }
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 createChart() function createChart()
{ {
chartType=document.getElementById("viz_chart_type").value; chartType=document.getElementById("viz_chart_type").value;
/* /*
if(document.getElementById("viz_category_dim").value=="" || if(document.getElementById("dimension1").value=="" ||
document.getElementById("viz_measure_dim").value=="" ) document.getElementById("measure1").value=="" )
{ {
alert("Bitte wählen Sie eine Kategorie und ein Maß"); alert("Bitte wählen Sie eine Kategorie und ein Maß");
return false; return false;
} }
*/ */
var data=[]; var selectionRsMetaData=[];
var selectionRs=[];
//data=prepareData(); //data=prepareData();
selectionRsMetaData=fillSelectionResultMetaData();
//alert(selectionRsMetaData[0].colname);
selectionRs=fillSelectionResult(selectionRsMetaData);
var valueLabelWidth = getCommonChartProperty("valueLabelWidth"); var valueLabelWidth = getCommonChartProperty("valueLabelWidth");
var fontFamily=getCommonChartProperty("fontFamily"); var fontFamily=getCommonChartProperty("fontFamily");
@ -326,7 +574,7 @@ var gridLabelHeight = getCommonChartProperty("gridLabelHeight");
var gridChartOffset = getCommonChartProperty("gridChartOffset"); var gridChartOffset = getCommonChartProperty("gridChartOffset");
var chartWidth=getCommonChartProperty("chartWidth"); var chartWidth=getCommonChartProperty("chartWidth");
var fontSize=getCommonChartProperty("fontSize"); var fontSize=getCommonChartProperty("fontSize");
svg,data //svg,data
document.getElementById("chartDiv").innerHTML=""; //reset canvas document.getElementById("chartDiv").innerHTML=""; //reset canvas
var svg = d3.select("#chartDiv").append("svg") var svg = d3.select("#chartDiv").append("svg")
.attr("width", chartWidth) //maxBarWidth + barLabelWidth + valueLabelWidth) .attr("width", chartWidth) //maxBarWidth + barLabelWidth + valueLabelWidth)
@ -343,17 +591,17 @@ case "sample":
makeSample(); makeSample();
break; break;
case "bar_x": case "bar_x":
makeBarX(); makeBarX(selectionRs);
break; break;
case "bar_x_alt": case "bar_x_alt":
makeBarX(svg,data); makeBarX(svg,data);
break; break;
case "bar_y": case "bar_y":
makeBarY(); makeBarY(selectionRs);
break; break;
case "line": case "line":
makeLine(); makeLine(selectionRs);
break; break;
default: default:
alert("Please select a chart type"); alert("Please select a chart type");
@ -415,8 +663,8 @@ function makeBarX_alt(svg,data)
} }
function makeLine_alt(svg,data) { function makeLine_alt(svg,data) {
var xLabel=rsMetaData[document.getElementById("viz_category_dim").value-1].colcaption; var xLabel=rsMetaData[document.getElementById("dimension1").value-1].colcaption;
var yLabel=rsMetaData[document.getElementById("viz_measure_dim").value-1].colcaption; var yLabel=rsMetaData[document.getElementById("measure1").value-1].colcaption;
var fontSize=getCommonChartProperty("fontSize"); var fontSize=getCommonChartProperty("fontSize");
var maxLenName=d3.max(data, d => d.name.length); var maxLenName=d3.max(data, d => d.name.length);
var maxLenNamePx=maxLenName*fontSize/1.5; var maxLenNamePx=maxLenName*fontSize/1.5;
@ -471,8 +719,8 @@ function makeSample()
function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVertical) function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVertical)
{ {
var options; var options;
var categoryDim=document.getElementById("viz_category_dim").value; var categoryDim=document.getElementById("dimension1").value;
var measureDim=document.getElementById("viz_measure_dim").value; var measureDim=document.getElementById("measure1").value;
var fontSizeDefault=getCommonChartProperty("fontSize"); var fontSizeDefault=getCommonChartProperty("fontSize");
var chartWidth=getCommonChartProperty("chartWidth"); var chartWidth=getCommonChartProperty("chartWidth");
var marginLeftDefault=chartWidth/5; //20% liner Rand var marginLeftDefault=chartWidth/5; //20% liner Rand
@ -517,15 +765,15 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
} }
} }
document.getElementById("chartOptions").innerHTML=JSON.stringify(options); //document.getElementById("chartOptions").innerHTML=JSON.stringify(options);
return options; return options;
} }
function makeBarX() { function makeBarX(selectionRs) {
var categoryDim=document.getElementById("viz_category_dim").value; var categoryDim=document.getElementById("viz_dimension1").value;
var measureDim=document.getElementById("viz_measure_dim").value; var measureDim=document.getElementById("viz_measure1").value;
var marksArray=new Array(); var marksArray=new Array();
marksArray[0]=Plot.barX(rs, marksArray[0]=Plot.barX(selectionRs,
{ {
x: measureDim, x: measureDim,
y: categoryDim y: categoryDim
@ -535,11 +783,11 @@ function makeBarX() {
document.getElementById("chartDiv").appendChild(Plot.plot(options)); document.getElementById("chartDiv").appendChild(Plot.plot(options));
} }
function makeBarY() { function makeBarY(selectionRs) {
var categoryDim=document.getElementById("viz_category_dim").value; var categoryDim=document.getElementById("viz_dimension1").value;
var measureDim=document.getElementById("viz_measure_dim").value; var measureDim=document.getElementById("viz_measure1").value;
var marksArray=new Array(); var marksArray=new Array();
marksArray[0]=Plot.barY(rs, marksArray[0]=Plot.barY(selectionRs,
{ {
y: measureDim, y: measureDim,
x: categoryDim x: categoryDim
@ -549,11 +797,11 @@ function makeBarY() {
document.getElementById("chartDiv").appendChild(Plot.plot(options)); document.getElementById("chartDiv").appendChild(Plot.plot(options));
} }
function makeLine() { function makeLine(selectionRs) {
var categoryDim=document.getElementById("viz_category_dim").value; var categoryDim=document.getElementById("viz_dimension1").value;
var measureDim=document.getElementById("viz_measure_dim").value; var measureDim=document.getElementById("viz_measure1").value;
var marksArray=new Array(); var marksArray=new Array();
marksArray[0]=Plot.line(rs, marksArray[0]=Plot.line(selectionRs,
{ {
y: measureDim, y: measureDim,
x: categoryDim, x: categoryDim,
@ -570,8 +818,8 @@ function makeLine() {
document.getElementById("chartDiv").appendChild(Plot.plot(options)); document.getElementById("chartDiv").appendChild(Plot.plot(options));
} }
function makeBarY_alt(svg,data) { function makeBarY_alt(svg,data) {
var xLabel=rsMetaData[document.getElementById("viz_category_dim").value-1].colcaption; var xLabel=rsMetaData[document.getElementById("dimension1").value-1].colcaption;
var yLabel=rsMetaData[document.getElementById("viz_measure_dim").value-1].colcaption; var yLabel=rsMetaData[document.getElementById("measure1").value-1].colcaption;
var fontSize=getCommonChartProperty("fontSize"); var fontSize=getCommonChartProperty("fontSize");
var maxLenName=d3.max(data, d => d.name.length); var maxLenName=d3.max(data, d => d.name.length);
var maxLenNamePx=maxLenName*fontSize/1.5; var maxLenNamePx=maxLenName*fontSize/1.5;
@ -636,7 +884,7 @@ for (var i=0;i<numberOfChildNodes;i++)
} }
//alert(svg_xml); //alert(svg_xml);
document.getElementById("chartSrc").innerHTML=svg_xml; document.getElementById("chartSrc").innerHTML=svg_xml;
document.getElementById("chartSrcFields").style.visibility="visible"; document.getElementById("chartSVGsrc").style.visibility="visible";
/* /*
const selection = window.getSelection(); const selection = window.getSelection();
const range = document.createRange(); const range = document.createRange();

138
superx/xml/viz_html_chart.xsl

@ -1086,12 +1086,13 @@ var platform='superx';
<script language="Javascript"> <script language="Javascript">
<xsl:text> <xsl:text>
function dataRowMetaData(nr,colname,colcaption,coltype) function dataRowMetaData(nr,colname,colcaption,coltype,colfunction)
{ {
this.nr=nr; this.nr=nr;
this.colname=colname; this.colname=colname;
this.colcaption=colcaption; this.colcaption=colcaption;
this.coltype=coltype; this.coltype=coltype;
this.colfunction=colfunction;
} }
function dataRow(rownr</xsl:text> function dataRow(rownr</xsl:text>
@ -1130,12 +1131,14 @@ var rs= new Array();
rsMetaData.push(new dataRowMetaData(</xsl:text> rsMetaData.push(new dataRowMetaData(</xsl:text>
<xsl:value-of select="$rownr"/> <xsl:value-of select="$rownr"/>
<xsl:text>,'</xsl:text> <xsl:text>,'</xsl:text>
<xsl:value-of select="f_name"/> <xsl:call-template name="getColumnNameJS">
<xsl:with-param name="columnNameFromDB" select="f_name"/>
</xsl:call-template>
<xsl:text>','</xsl:text> <xsl:text>','</xsl:text>
<xsl:call-template name="remove_linebreaksAndQuot"> <xsl:call-template name="remove_linebreaksAndQuot">
<xsl:with-param name="volltext" select="wert" /> <xsl:with-param name="volltext" select="wert" />
</xsl:call-template> </xsl:call-template>
<xsl:text>',0));</xsl:text> <!--coltype noch unbekannt--> <xsl:text>',0,null));</xsl:text> <!--coltype noch unbekannt, colfunction unnötig-->
</xsl:for-each> </xsl:for-each>
@ -1182,70 +1185,129 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
</script> </script>
<table border="0"> <div id="dataDiv">
<tr><td>Ausgabetyp:</td> <div id="dataDivHeader">
<td><select class="maskinputPflicht" id="viz_chart_type" NAME="viz_chart_type" tabindex="200" onChange="prepareChartProperties(this.value)" > <input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Datentabelle anzeigen" onClick="showDataTable('dataDivTable',rs,rsMetaData,10);" />
</div>
<div id="dataDivTable" style="border:thin solid black">
</div>
</div>
<div id="dataSelectionDiv">
<div id="dataSelectionHeader">
<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Datenselektion anzeigen" onClick="fillDataSelectionForm('dataSelectionFormDiv');" />
</div>
<div id="dataSelectionFormDiv">
<form name="dataSelectionForm">
<table>
<tr><th>Dimension</th><th>Auswahl</th><th>Transformation (optional)</th></tr>
<tr><td>Dimension 1:</td>
<td><select class="maskinputPflicht" id="dimension1" NAME="dimension1" tabindex="210">
<option class="maskinput" value="">Bitte wählen</option> <option class="maskinput" value="">Bitte wählen</option>
<option class="maskinput" value="sample">Beispiel</option> </select>
<option class="maskinput" value="bar_x">Balkendiagramm horizontal (einfach)</option> </td>
<option class="maskinput" value="bar_y">Balkendiagramm vertikal (einfach)</option> <td><select id="dimension1_fn" NAME="dimension1_fn" tabindex="210">
<option class="maskinput" value="line">Liniendiagramm vertikal (einfach)</option> <option class="maskinput" value="">vordefinierte Funktionen:</option>
</select> </select>
</td> </td>
</tr> </tr>
</table> <tr><td>Dimension 2:</td>
<div id="chartProperties" style="background-color:ECEDEF;border:thin solid gray"> <td><select class="maskinputPflicht" id="dimension2" NAME="dimension2" tabindex="210">
</div>
<!--<tr><td>Kategorie-Dimension:</td>
<td><select class="maskinputPflicht" id="viz_category_dim" NAME="viz_category_dim" tabindex="210">
<option class="maskinput" value="">Bitte wählen</option> <option class="maskinput" value="">Bitte wählen</option>
</select> </select>
</td> </td>
<td><select id="dimension2_fn" NAME="dimension2_fn" tabindex="210">
<option class="maskinput" value="">vordefinierte Funktionen:</option>
</select>
</td>
</tr> </tr>
<tr><td>Maß:</td> <tr><td>Maß:</td>
<td><select class="maskinputPflicht" id="viz_measure_dim" NAME="viz_measure_dim" tabindex="220"> <td><select class="maskinputPflicht" id="measure1" NAME="measure1" tabindex="220">
<option class="maskinput" value="">Bitte wählen</option> <option class="maskinput" value="">Bitte wählen</option>
</select> </select>
Aggregatfunktion: <select class="maskinputPflicht" id="viz_measure_dim_func" NAME="viz_measure_dim_func" tabindex="230"> </td>
<option class="maskinput" value="sum">Summe</option> <td>
<select id="measure1_fn" NAME="measure1_fn" tabindex="230">
<option class="maskinput" value="">vordefinierte Funktionen:</option>
</select> </select>
</td> </td>
</tr> </tr>
<tr><td>Breite</td> </table>
<td><input type="text" class="maskinputPflicht" id="viz_width" NAME="viz_width" tabindex="240" size="5" value="800"/> px </form>
</div>
</div>
<div id="selectionResultPreview">
<div id="selectionResultPreviewHeader">
<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Selektion anzeigen" onClick="selectionResultPreview('selectionResultPreviewTable');" />
</div>
<div id="selectionResultPreviewTable" style="border:thin solid black">
</div>
</div>
<div id="chartProperties">
<div id="chartPropertiesHeader">
<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Diagramm-Format anzeigen" onClick="showChartPropertiesForm();" />
</div>
<div id="chartPropertiesFormDiv" style="visibility:hidden">
<form name="chartPropertiesForm">
<table border="0">
<tr><td>Ausgabetyp:</td>
<td><select class="maskinputPflicht" id="viz_chart_type" NAME="viz_chart_type" tabindex="200" onChange="prepareChartProperties(this.value)" >
<option class="maskinput" value="">Bitte wählen</option>
<option class="maskinput" value="sample">Beispiel</option>
<option class="maskinput" value="bar_x">Balkendiagramm horizontal (einfach)</option>
<option class="maskinput" value="bar_y">Balkendiagramm vertikal (einfach)</option>
<option class="maskinput" value="line">Liniendiagramm vertikal (einfach)</option>
</select>
</td> </td>
</tr> </tr>
<tr><td></td> </table>
<td> <div id="chartPropertiesFormDetails">
</td>
</tr> </div>
</table>-->
<p><input type="button" tabindex="10000" class="sx_buttondiv_submit" value="Diagramm erzeugen" onClick="createChart();" /> <div id="chartPropertiesFooter">
<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Datentabelle anzeigen" onClick="showDataTable();" /> <input type="button" tabindex="10000" class="sx_buttondiv_submit" value="Diagramm erzeugen" onClick="createChart();" />
</p> <button class="sx_buttondiv_submit" onClick="showOptionsCode();">Plot-Quellcode</button>
</div>
</form>
</div>
</div>
<div id="chartCanvas">
<div id="chartCanvasHeader">
</div>
<div id="chartDiv" style="border:thin solid black"> <div id="chartDiv" style="border:thin solid black">
</div> </div>
<p> <div id="chartCanvasFooter">
</div>
</div>
<div id="chartSVGsrcDiv">
<div id="chartSVGsrcDivHeader">
<button class="sx_buttondiv_submit" onClick="showSrcCode();">SVG-Quellcode</button> <button class="sx_buttondiv_submit" onClick="showSrcCode();">SVG-Quellcode</button>
<button class="sx_buttondiv_submit" onClick="showOptionsCode();">Plot-Quellcode</button>
</p>
<div id="chartSrcFields" style="visibility:hidden">
<textarea id="chartSrc" name="chartSrc" class="textarea" placeholder="Quellcode..." cols="100" rows="20"></textarea><button class="sx_buttondiv_submit" onClick="copySrcCode('chartSrc');">Kopieren</button>
</div> </div>
<div id="chartOptionsFields" style="visibility:hidden"> <div id="chartSVGsrc" style="visibility:hidden">
<textarea id="chartOptions" name="chartOptions" class="textarea" placeholder="Quellcode..." cols="100" rows="20"></textarea><button class="sx_buttondiv_submit" onClick="copySrcCode('chartOptions');">Kopieren</button> <textarea id="chartSrc" name="chartSrc" class="textarea" placeholder="Quellcode..." cols="100" rows="20"></textarea><button class="sx_buttondiv_submit" onClick="copySrcCode('chartSrc');">Kopieren</button>
</div> </div>
<div id="tableDiv" style="border:thin solid black">
</div> </div>
</xsl:for-each> </xsl:for-each>
</xsl:template> </xsl:template>
<xsl:template name="getColumnNameJS"> <xsl:template name="getColumnNameJS">
<xsl:param name="columnNameFromDB" /> <xsl:param name="columnNameFromDB" />
<xsl:choose> <xsl:choose>
<xsl:when test="contains($columnNameFromDB,'?')"> <xsl:when test="contains($columnNameFromDB,'?')">
<xsl:value-of select="concat('column_',@id)"/> <xsl:value-of select="concat('column_',@id+1)"/>
</xsl:when> </xsl:when>
<xsl:otherwise> <xsl:otherwise>
<xsl:value-of select="$columnNameFromDB"/> <xsl:value-of select="$columnNameFromDB"/>

Loading…
Cancel
Save