Browse Source

Dynamische Elemente und Resultsets #5

makro_datasrc
Daniel Quathamer 2 years ago
parent
commit
8d3f90a66e
  1. 192
      superx/xml/js/viz/viz_functions.js
  2. 29
      superx/xml/viz_html_chart.xsl

192
superx/xml/js/viz/viz_functions.js

@ -41,6 +41,7 @@ function chartModel(id,name,renderer,datasources) @@ -41,6 +41,7 @@ function chartModel(id,name,renderer,datasources)
this.renderer=renderer;
this.dataSources=datasources;
//this.globalProperties=globalproperties;
this.chartElements=new Array();
this.options=new Object;
this.options.marks=new Array();
//let globalProperties={};
@ -63,7 +64,22 @@ function chartModel(id,name,renderer,datasources) @@ -63,7 +64,22 @@ function chartModel(id,name,renderer,datasources)
this.getChartSVGWithPlot=function ()
{
console.log("using Plot");
//copy ChartElements to marks:
var marksArray=new Array();
for(var k=0;k< this.chartElements.length;k++)
{
marksArray[k]=renderChartElementWithPlot(this.chartElements[k]);
/*Plot.barX(rs_table0,
{
x: "gesamt",
y: "eintrag",
fill: "blue"
}
*/
}
this.options["marks"].push(marksArray);
var svgPlot=Plot.plot(this.options);
return svgPlot;
}
@ -83,6 +99,24 @@ this.isDefault=isDefault; @@ -83,6 +99,24 @@ 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 usedVizTypeProperty(nr,vizTypePropertyUniquename,caption,propertyValue )
{
this.nr=nr;
this.vizTypePropertyUniquename=vizTypePropertyUniquename;
this.caption=caption;
this.propertyValue=propertyValue;
}
function d3dataRow(nr,dimension1,dimension2,measure )
{
this.nr=nr;
@ -135,16 +169,15 @@ var optionCounter=0; @@ -135,16 +169,15 @@ var optionCounter=0;
//selectionRsMetaData=fillSelectionResultMetaData();
//console.log("felder"+selectionRsMetaData.length);
var isDefault=true;
for(var j=0;j < rsColumnMetaData.length;j++)
for(var j=0;j < rsColumnMetaData[datasource].length;j++)
{
if(rsColumnMetaData[j].tableId==datasource
&& rsColumnMetaData[j].colcaption.trim() !=""
if(rsColumnMetaData[datasource][j].colcaption.trim() !=""
&& (
isMeasure==false || rsColumnMetaData[j].coltype == 4 || rsColumnMetaData[j].coltype == 3)
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[j].nr,rsColumnMetaData[j].colcaption,rsColumnMetaData[j].colname,isDefault);
var o=new selectionPropertyValue(rsColumnMetaData[datasource][j].nr,rsColumnMetaData[datasource][j].colcaption,rsColumnMetaData[datasource][j].colname,isDefault);
valueOptions[optionCounter]=o;
optionCounter++;
if(isDefault)
@ -203,13 +236,15 @@ this.getValueResultset = function () { @@ -203,13 +236,15 @@ this.getValueResultset = function () {
}
}
function updateChartModel(myChartModel)
function updateChartModel()
{
var optionsString="{";
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;
optionsString+="\"caption\":\""+chartName+"\"";
var myForm=document.forms["chartPropertiesForm"];
@ -283,15 +318,7 @@ function updateChartModel(myChartModel) @@ -283,15 +318,7 @@ function updateChartModel(myChartModel)
console.log("Styles:"+ stylesString);
var styles=JSON.parse(stylesString); */
var chartOptions=JSON.parse(optionsString);
var marksArray=new Array();
marksArray[0]=Plot.barX(rs_table0,
{
x: "gesamt",
y: "eintrag",
fill: "blue"
}
);
chartOptions["marks"].push(marksArray);
myChartModel.options=chartOptions;
//console.log("options:"+ optionsString);
@ -303,16 +330,14 @@ function updateChartModel(myChartModel) @@ -303,16 +330,14 @@ function updateChartModel(myChartModel)
return myChartModel;
}
function renderChart(chartDiv)
function renderChart(chartDiv,currentChartModel)
{
if(document.getElementById("chartName").value=="")
document.getElementById("chartName").value=vizInitialName;
var chartName=document.getElementById("chartName").value;
var renderer=document.getElementById('fldVizRenderer').value;
var myChartModel=new chartModel(1,chartName,renderer,rsTableMetaData);
myChartModel=updateChartModel(myChartModel);
var mySVG=myChartModel.getChartSVG();
var mySVG=currentChartModel.getChartSVG();
document.getElementById(chartDiv).innerHTML="";
document.getElementById(chartDiv).appendChild(mySVG);
@ -332,7 +357,7 @@ function prepareSelectionForm() @@ -332,7 +357,7 @@ function prepareSelectionForm()
return selectionProperties;
}
function createChartElementConfig1Form(renderer)
function createChartElementConfig1Form(renderer,elemID)
{
//first empty form:
var formChartElementConfig1=document.getElementById("ChartElementConfig1Div");
@ -359,6 +384,11 @@ function createChartElementConfig1Form(renderer) @@ -359,6 +384,11 @@ function createChartElementConfig1Form(renderer)
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";
@ -371,6 +401,8 @@ function createChartElementConfig1Form(renderer) @@ -371,6 +401,8 @@ function createChartElementConfig1Form(renderer)
};
fillSelectOptions(selDatasourceElem,rsTableMetaData,true);
fieldDatasourceElem.appendChild(selDatasourceElem);
fieldDatasourceElem.appendChild(inpElemId);
elementDatasourceDiv.appendChild(fieldDatasourceElem);
formChartElementConfig1.appendChild(elementDatasourceDiv);
@ -459,7 +491,38 @@ function createChartElementsConfig2Form(renderer) @@ -459,7 +491,38 @@ function createChartElementsConfig2Form(renderer)
function saveChartElementConfig()
{
alert("Feierabend");
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);
/*var marksArray=new Array();
marksArray[elemID]=Plot.barX(rs_table0,
{
x: "gesamt",
y: "eintrag",
fill: "blue"
}
);
chartOptions["marks"].push(marksArray);*/
}
function getPossibleVizTypes(renderer)
{
@ -987,7 +1050,8 @@ function renderChartPropertyField(commonChartProperty) @@ -987,7 +1050,8 @@ function renderChartPropertyField(commonChartProperty)
}
selElem.onchange= function () {
renderChart('chartDiv');
updateChartModel();
renderChart('chartDiv',myChartModel);
};
fillSelectOptions(selElem,commonChartProperty.getValueResultset(),commonChartProperty.isMandatory);
inputElem.appendChild(selElem);
@ -1008,7 +1072,8 @@ function renderChartPropertyField(commonChartProperty) @@ -1008,7 +1072,8 @@ function renderChartPropertyField(commonChartProperty)
textAreaElem.id=commonChartProperty.name;
textAreaElem.value=commonChartProperty.defaultValue;
textAreaElem.onchange= function () {
renderChart('chartDiv');
updateChartModel();
renderChart('chartDiv',myChartModel);
};
inputElem.appendChild(textAreaElem);
inputParaElem.appendChild(inputElem);
@ -1037,7 +1102,8 @@ function renderChartPropertyField(commonChartProperty) @@ -1037,7 +1102,8 @@ function renderChartPropertyField(commonChartProperty)
rangeElem.id=commonChartProperty.name;
rangeElem.value=commonChartProperty.defaultValue;
rangeElem.onchange= function () {
renderChart('chartDiv');
updateChartModel();
renderChart('chartDiv',myChartModel);
};
inputElem.appendChild(rangeElem);
inputParaElem.appendChild(inputElem);
@ -1060,7 +1126,8 @@ function renderChartPropertyField(commonChartProperty) @@ -1060,7 +1126,8 @@ function renderChartPropertyField(commonChartProperty)
inpElem.id=commonChartProperty.name;
inpElem.value=commonChartProperty.defaultValue;
inpElem.onchange= function () {
renderChart('chartDiv');
updateChartModel();
renderChart('chartDiv',myChartModel);
};
inputElem.appendChild(inpElem);
inputParaElem.appendChild(inputElem);
@ -1171,7 +1238,7 @@ for(var col=0;col < metadata.length;col++) @@ -1171,7 +1238,7 @@ for(var col=0;col < metadata.length;col++)
}
tabElem.appendChild(rowElem);
for(row=1;row<rowcount;row++)
for(row=0;row<rowcount;row++)
{
if(data[row])
{
@ -1252,6 +1319,53 @@ var myDiv=document.getElementById(chartDivElem); @@ -1252,6 +1319,53 @@ var myDiv=document.getElementById(chartDivElem);
myDiv.style.display="block";
}
function renderChartElementWithPlot(chartElem)
{
var plotMark=new Object;
var chartType=chartElem.vizTypeUniquename;
/*
var selectionRsMetaData=[];
var selectionRs=[];
selectionRsMetaData=fillSelectionResultMetaData();
selectionRs=fillSelectionResult(selectionRsMetaData);
*/
switch (chartType)
{
case "sample":
makeSample();
break;
case "bar_x":
plotMark=renderBarXwithPlot(chartElem);
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;
}
return plotMark;
}
function createChart(chartDivElem)
{
//OBSOLETE!
@ -1524,7 +1638,33 @@ function makeBarX(chartDivElem,selectionRs) { @@ -1524,7 +1638,33 @@ function makeBarX(chartDivElem,selectionRs) {
var svgPlot=Plot.plot(options);
document.getElementById(chartDivElem).appendChild(svgPlot);
}
function renderBarXwithPlot(chartElem) {
var barXPlot=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";
barXPlot=Plot.barX(myDatasourceRs,
{
x: measureDim,
y: categoryDim,
fill: fillval
}
);
return barXPlot;
}
function makeBarXStacked(chartDivElem,selectionRs) {
var categoryDim1=document.getElementById("y_horizontal").value;
var categoryDim2=document.getElementById("stroke_bar").value;

29
superx/xml/viz_html_chart.xsl

@ -1347,6 +1347,7 @@ function tableMetaData(nr,value,name,isDefault) @@ -1347,6 +1347,7 @@ function tableMetaData(nr,value,name,isDefault)
var rsTableMetaData=new Array();
var rsColumnMetaData=new Array();
var rs=new Array();
</xsl:text>
@ -1380,7 +1381,9 @@ rsTableMetaData.push(new tableMetaData( @@ -1380,7 +1381,9 @@ rsTableMetaData.push(new tableMetaData(
</xsl:choose>
<xsl:text>
));
rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]=new Array();
var myChartModel=new chartModel(1,"","",rsTableMetaData);
function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</xsl:text>
<xsl:for-each select="sqlerg/complete_headers/header">
@ -1405,16 +1408,17 @@ function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</x @@ -1405,16 +1408,17 @@ function dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(rownr</x
</xsl:for-each><xsl:text>
}
var rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>= new Array();
rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]=new Array();
</xsl:text>
<xsl:for-each select="sqlerg/complete_headers/header">
<xsl:variable name="rownr">
<xsl:value-of select="position()"/>
</xsl:variable>
<xsl:text>
rsColumnMetaData.push(new dataRowMetaData('</xsl:text>
rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRowMetaData('</xsl:text>
<xsl:value-of select="$tableId"/><xsl:text>',</xsl:text>
<xsl:value-of select="$rownr"/>
<xsl:text>,'</xsl:text>
@ -1440,7 +1444,7 @@ rsColumnMetaData.push(new dataRowMetaData('</xsl:text> @@ -1440,7 +1444,7 @@ rsColumnMetaData.push(new dataRowMetaData('</xsl:text>
<xsl:value-of select="position()"/>
</xsl:variable>
<xsl:text>
rsColumnMetaData[</xsl:text><xsl:value-of select="number($colnr)-1"/><xsl:text>].coltype=</xsl:text><xsl:value-of select="@typ"/>
rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>][</xsl:text><xsl:value-of select="number($colnr)-1"/><xsl:text>].coltype=</xsl:text><xsl:value-of select="@typ"/>
<xsl:text>;
</xsl:text>
</xsl:for-each>
@ -1448,7 +1452,8 @@ rsColumnMetaData[</xsl:text><xsl:value-of select="number($colnr)-1"/><xsl:text>] @@ -1448,7 +1452,8 @@ rsColumnMetaData[</xsl:text><xsl:value-of select="number($colnr)-1"/><xsl:text>]
</xsl:if>
<!--now resultset-->
<xsl:text>
rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(</xsl:text><xsl:value-of select="$rownr"/>
//rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>]= new Array();
rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>(</xsl:text><xsl:value-of select="$rownr"/>
<xsl:for-each select="col">
<xsl:text>,</xsl:text>
<xsl:choose>
@ -1473,6 +1478,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl @@ -1473,6 +1478,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
</script>
</xsl:template>
<xsl:template name="diagrammdaten">
<xsl:for-each select="ergebnis/ergebniselement">
<p class="title is-5"><xsl:value-of select="../maskenname" /></p>
<xsl:call-template name="legende" />
@ -1480,14 +1486,14 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl @@ -1480,14 +1486,14 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
<xsl:call-template name="navigationsmenue" />
</xsl:if>-->
<xsl:call-template name="buildVizData" >
<xsl:with-param name="tableId" select="concat('table' ,@ordnr)" />
<xsl:with-param name="tableId" select="@ordnr" />
</xsl:call-template>
</xsl:for-each>
<span class="separator">&#160;</span>
<!--Aufruf/Anzeige Diagrammdaten-->
<xsl:for-each select="ergebnis/ergebniselement">
<xsl:variable name="tableId"><xsl:value-of select="concat('table' ,@ordnr)"/></xsl:variable>
<xsl:variable name="tableId"><xsl:value-of select="@ordnr"/></xsl:variable>
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong><xsl:text>Daten-Tabelle </xsl:text><xsl:value-of select="../maskenname"/></strong></label>
@ -1507,8 +1513,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl @@ -1507,8 +1513,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
<xsl:attribute name="onClick">
<xsl:text>showDataTable('dataDivTable</xsl:text>
<xsl:value-of select="$tableId"/>
<xsl:text>',rs_</xsl:text><xsl:value-of select="$tableId"/>
<xsl:text>,rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>MetaData,10);</xsl:text>
<xsl:text>',rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>],rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>],10);</xsl:text>
</xsl:attribute>
<span class="icon">
<img src="../images/icons/more.svg" title="Laden" />
@ -1810,7 +1815,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl @@ -1810,7 +1815,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
<p class="bd-notification is-primary">
Diagramm
</p>
<p><span class="button is-link is-outlined is-small" onClick="renderChart('chartDiv');">Erzeugen</span></p>
<p><span class="button is-link is-outlined is-small" onClick="updateChartModel();renderChart('chartDiv',myChartModel);">Erzeugen</span></p>
</div>
<div class="column is-half">
<div class="field is-grouped">
@ -1821,7 +1826,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl @@ -1821,7 +1826,7 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
<div class="field is-active">
<p class="control-new">
<div class="select is-small is-fullwidth">
<textarea class="maskinput" id="chartName" name="chartName" rows="3" cols="20" onChange="renderChart('chartDiv');"/>
<textarea class="maskinput" id="chartName" name="chartName" rows="3" cols="20" onChange="updateChartModel();renderChart('chartDiv',myChartModel);"/>
</div>
</p>
</div>
@ -1898,7 +1903,9 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl @@ -1898,7 +1903,9 @@ rs_</xsl:text><xsl:value-of select="$tableId"/><xsl:text>.push(new dataRow_</xsl
</div>
<div id="ChartElementsDiv" style="display:none">
<div id="ChartElementListDiv">
<a onClick="createChartElementConfig1Form(document.getElementById('fldVizRenderer').value)">Neues Element</a>
</div>
<div id="ChartElementListFooterDiv">
<a onClick="createChartElementConfig1Form(document.getElementById('fldVizRenderer').value,null)">Neues Element</a>
</div>
<div id="ChartElementConfig1Div"> </div>
<div id="ChartElementConfig2Div"> </div>

Loading…
Cancel
Save