SuperX
/
viz
6
0
Fork 0
Code Issues 8 Pull Requests Projects Releases Wiki Activity
Browse Source

commonChartProperties Formular und ausgewertet, css Formatierung #3

makro_datasrc
Daniel Quathamer 3 years ago
parent
adcbf29df9
commit
9dfbdbf7b0
2 changed files with 104 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 73
      superx/xml/js/viz/viz_functions.js
  2. 67
      superx/xml/viz_html_chart.xsl

73
superx/xml/js/viz/viz_functions.js
Unescape View File

@ -368,22 +368,40 @@ function renderForm(formDiv,chartProperties,myCommonChartProperties)
//here values, and then: //here values, and then:
tabElem.appendChild( rowElem); tabElem.appendChild( rowElem);
} }
/* for(var k=0;k < myCommonChartProperties.length;k++)
{
const rowElem = document.createElement("tr"); const rowElem = document.createElement("tr");
const tdCap = document.createElement("td"); const tdCap = document.createElement("td");
const textnode = document.createTextNode("Breite"); const textnode = document.createTextNode(myCommonChartProperties[k].caption);
tdCap.appendChild(textnode); tdCap.appendChild(textnode);
const tdInpElem = document.createElement("td");
const inpElem = document.createElement("input");
inpElem.id="viz_width";
inpElem.name="viz_width";
inpElem.type="text";
inpElem.value="800";
tdInpElem.appendChild(inpElem);
rowElem.appendChild(tdCap); rowElem.appendChild(tdCap);
rowElem.appendChild(tdInpElem); if(myCommonChartProperties[k].inputType==0)
tabElem.appendChild(rowElem); {
*/ //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
{ // Klappmenü:
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);
}
//here values, and then:
tabElem.appendChild( rowElem);
}
myForm.appendChild(tabElem); myForm.appendChild(tabElem);
//TODO: myCommonChartProperties auf separatem TAB //TODO: myCommonChartProperties auf separatem TAB
@ -721,19 +739,30 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
var options; var options;
var categoryDim=document.getElementById("dimension1").value; var categoryDim=document.getElementById("dimension1").value;
var measureDim=document.getElementById("measure1").value; var measureDim=document.getElementById("measure1").value;
var fontSizeDefault=getCommonChartProperty("fontSize"); var fontSizeDefault=getCommonChartProperty("fontSize")+"pt";
var chartWidth=getCommonChartProperty("chartWidth"); var chartWidth=getCommonChartProperty("chartWidth");
var myFontFamily=getCommonChartProperty("font-family");
var myBgColor=getCommonChartProperty("background-color");
var myColor=getCommonChartProperty("color");
var marginLeftDefault=chartWidth/5; //20% liner Rand var marginLeftDefault=chartWidth/5; //20% liner Rand
var marginBottomDefault=100; var marginBottomDefault=100;
var categoryLabel=getColumnCaption(categoryDim); var categoryLabel=getColumnCaption(categoryDim);
var measureLabel=getColumnCaption(measureDim); var measureLabel=getColumnCaption(measureDim);
var styles={
backgroundColor: myBgColor,
color: myColor,
fontFamily: myFontFamily,
fontSize: fontSizeDefault,
overflow: "visible"
}
if(chartOrientationVertical) if(chartOrientationVertical)
{ {
options={ options={
marginLeft:marginLeftDefault, marginLeft:marginLeftDefault,
marginBottom:marginBottomDefault, marginBottom:marginBottomDefault,
fontSize:fontSizeDefault, width:chartWidth,
x: { x: {
tickRotate: -45, tickRotate: -45,
label:categoryLabel label:categoryLabel
@ -743,7 +772,8 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
grid:true, grid:true,
label: measureLabel label: measureLabel
}, },
marks: marksArray marks: marksArray,
style: styles
} }
} }
else else
@ -751,7 +781,7 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
options={ options={
marginLeft:marginLeftDefault, marginLeft:marginLeftDefault,
marginBottom:marginBottomDefault, marginBottom:marginBottomDefault,
fontSize:fontSizeDefault, width:chartWidth,
y: { y: {
label:categoryLabel label:categoryLabel
}, },
@ -760,7 +790,8 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
grid:true, grid:true,
label: measureLabel label: measureLabel
}, },
marks: marksArray marks: marksArray,
style: styles
} }
@ -861,7 +892,13 @@ function getCommonChartProperty(name)
for (var i=0;i<commonChartProperties.length;i++) for (var i=0;i<commonChartProperties.length;i++)
{ {
if(commonChartProperties[i].name==name) if(commonChartProperties[i].name==name)
propertyValue=commonChartProperties[i].defaultValue; //TODO aus formular übersteuern {
propertyValue=document.forms["chartPropertiesForm"].elements[name].value;
if(propertyValue=="" && commonChartProperties[i].defaultValue!="")
{
propertyValue=commonChartProperties[i].defaultValue;
}
}
} }
return propertyValue; return propertyValue;
} }

67
superx/xml/viz_html_chart.xsl
Unescape View File

@ -106,7 +106,12 @@ text-align:right;
padding:3px; padding:3px;
} }
div.section
{
margin-bottom:30px;
padding-bottom:10px;
border-bottom:thick solid gray;
}
</style> </style>
@ -117,39 +122,65 @@ padding:3px;
<xsl:template name="tableJavascript_viz"> <xsl:template name="tableJavascript_viz">
<script language="Javascript" type="text/javascript" src="/superx/xml/js/viz/d3.min.js" /> <script language="Javascript" type="text/javascript" src="/superx/xml/js/viz/d3.min.js" />
<script language="Javascript" type="text/javascript" src="/superx/xml/js/viz/plot.js" /> <script language="Javascript" type="text/javascript" src="/superx/xml/js/viz/plot.js" />
<script><xsl:text> <script><xsl:text><![CDATA[
//document.body.append(Plot.plot(options)); //document.body.append(Plot.plot(options));
function commonChartProperty(name,caption,isOptional,staticValues,defaultValue) function commonChartProperty(name,caption,isMandatory,inputType,staticValues,defaultValue)
{ {
this.name=name; this.name=name;
this.caption=caption; this.caption=caption;
this.staticValues=staticValues; this.staticValues=staticValues;
this.isOptional=isOptional; this.isMandatory=isMandatory;
this.inputType=inputType;
this.defaultValue=defaultValue; this.defaultValue=defaultValue;
this.getValueResultset = function () {
var valueOptions=[];
var optionCounter=0;
var staticValueArray = staticValues.split(/\|/);
for(var j=0;j < staticValueArray.length;j++)
{
var isDefault=false;
if(staticValueArray[j])
{
if(staticValueArray[j]==this.defaultValue)
isDefault=true;
var o=new selectionPropertyValue(optionCounter,staticValueArray[j],staticValueArray[j],isDefault);
valueOptions[optionCounter]=o;
optionCounter++;
}
}
return valueOptions;
}
} }
var commonChartProperties=[]; var commonChartProperties=[];
var newCommonChartProperty = new commonChartProperty("valueLabelWidth","Werte-Label Breite", null,true,20); var newCommonChartProperty = new commonChartProperty("valueLabelWidth","Werte-Label Breite", false, 0,null,20);
commonChartProperties.push(newCommonChartProperty); commonChartProperties.push(newCommonChartProperty);
var newCommonChartProperty = new commonChartProperty("gridLabelHeight","Grid-Label Höhe", null,true,18); var newCommonChartProperty = new commonChartProperty("gridLabelHeight","Grid-Label Höhe", false,0, null,18);
commonChartProperties.push(newCommonChartProperty); commonChartProperties.push(newCommonChartProperty);
var newCommonChartProperty = new commonChartProperty("gridChartOffset","Grid Offset", null,true,3); var newCommonChartProperty = new commonChartProperty("background-color","Hintergrundfarbe", false,0, null,"#ffffeb");
commonChartProperties.push(newCommonChartProperty);
var newCommonChartProperty = new commonChartProperty("color","Farbe Text- und Diagrammelemente", false,0, null,"#3333ff");
commonChartProperties.push(newCommonChartProperty);
var newCommonChartProperty = new commonChartProperty("gridChartOffset","Grid Offset", false,0, null,3);
commonChartProperties.push(newCommonChartProperty); commonChartProperties.push(newCommonChartProperty);
var newCommonChartProperty = new commonChartProperty("fontSize","Schriftgröße", null,false,10); var newCommonChartProperty = new commonChartProperty("fontSize","Schriftgröße", false, 0, null,10);
commonChartProperties.push(newCommonChartProperty); commonChartProperties.push(newCommonChartProperty);
var newCommonChartProperty = new commonChartProperty("font-family","Schriftart", null,false,"sans-serif"); var newCommonChartProperty = new commonChartProperty("font-family","Schriftart", false, 1, "sans-serif|serif|monospace","sans-serif");
commonChartProperties.push(newCommonChartProperty); commonChartProperties.push(newCommonChartProperty);
var newCommonChartProperty = new commonChartProperty("chartWidth","Breite des Diagramms", null,false,"800"); var newCommonChartProperty = new commonChartProperty("chartWidth","Breite des Diagramms", false, 0,null,"800");
commonChartProperties.push(newCommonChartProperty); commonChartProperties.push(newCommonChartProperty);
var newCommonChartProperty = new commonChartProperty("chartCaption","Titel des Diagramms", null,false,"</xsl:text> var newCommonChartProperty = new commonChartProperty("chartCaption","Titel des Diagramms", false,0, null,"]]></xsl:text>
<xsl:value-of select="/ergebnisse/ergebnis/maskenname" /><xsl:text>"); <xsl:value-of select="/ergebnisse/ergebnis/maskenname" /><xsl:text>");
commonChartProperties.push(newCommonChartProperty); commonChartProperties.push(newCommonChartProperty);
@ -1185,7 +1216,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
</script> </script>
<div id="dataDiv"> <div id="dataDiv" class="section">
<div id="dataDivHeader"> <div id="dataDivHeader">
<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Datentabelle anzeigen" onClick="showDataTable('dataDivTable',rs,rsMetaData,10);" /> <input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Datentabelle anzeigen" onClick="showDataTable('dataDivTable',rs,rsMetaData,10);" />
</div> </div>
@ -1194,7 +1225,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
</div> </div>
</div> </div>
<div id="dataSelectionDiv"> <div id="dataSelectionDiv" class="section">
<div id="dataSelectionHeader"> <div id="dataSelectionHeader">
<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Datenselektion anzeigen" onClick="fillDataSelectionForm('dataSelectionFormDiv');" /> <input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Datenselektion anzeigen" onClick="fillDataSelectionForm('dataSelectionFormDiv');" />
@ -1239,7 +1270,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
</div> </div>
</div> </div>
<div id="selectionResultPreview"> <div id="selectionResultPreview" class="section">
<div id="selectionResultPreviewHeader"> <div id="selectionResultPreviewHeader">
<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Selektion anzeigen" onClick="selectionResultPreview('selectionResultPreviewTable');" /> <input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Selektion anzeigen" onClick="selectionResultPreview('selectionResultPreviewTable');" />
@ -1249,7 +1280,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
</div> </div>
<div id="chartProperties"> <div id="chartProperties" class="section">
<div id="chartPropertiesHeader"> <div id="chartPropertiesHeader">
<input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Diagramm-Format anzeigen" onClick="showChartPropertiesForm();" /> <input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Diagramm-Format anzeigen" onClick="showChartPropertiesForm();" />
</div> </div>
@ -1273,13 +1304,13 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
<div id="chartPropertiesFooter"> <div id="chartPropertiesFooter">
<input type="button" tabindex="10000" class="sx_buttondiv_submit" value="Diagramm erzeugen" onClick="createChart();" /> <input type="button" tabindex="10000" class="sx_buttondiv_submit" value="Diagramm erzeugen" onClick="createChart();" />
<button class="sx_buttondiv_submit" onClick="showOptionsCode();">Plot-Quellcode</button> <!--<button class="sx_buttondiv_submit" onClick="showOptionsCode();">Plot-Quellcode</button>-->
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<div id="chartCanvas"> <div id="chartCanvas" class="section">
<div id="chartCanvasHeader"> <div id="chartCanvasHeader">
</div> </div>
@ -1290,7 +1321,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
</div> </div>
</div> </div>
<div id="chartSVGsrcDiv"> <div id="chartSVGsrcDiv" class="section">
<div id="chartSVGsrcDivHeader"> <div id="chartSVGsrcDivHeader">
<button class="sx_buttondiv_submit" onClick="showSrcCode();">SVG-Quellcode</button> <button class="sx_buttondiv_submit" onClick="showSrcCode();">SVG-Quellcode</button>

Write Preview
Loading…
Cancel
Save