@ -38,7 +38,7 @@ this.value=value;
this . isDefault = isDefault ; this . isDefault = isDefault ;
} }
function chart Property( name , caption , isMeasure , isMandatory )
function dimension Property( name , caption , isMeasure , isMandatory )
{ {
this . name = name ; this . name = name ;
this . caption = caption ; this . caption = caption ;
@ -172,9 +172,9 @@ function prepareBarXForm()
{ {
var chartProperties = [ ] ; var chartProperties = [ ] ;
var propertyCounter = 0 ; var propertyCounter = 0 ;
var myProp = new chart Property( "viz_dimension1" , "Kategorie-Dimension" , false , true ) ; var myProp = new dimension Property( "viz_dimension1" , "Kategorie-Dimension" , false , true ) ;
chartProperties [ 0 ] = myProp ; chartProperties [ 0 ] = myProp ;
var myProp = new chart Property( "viz_measure1" , "Maß" , true , true ) ; var myProp = new dimension Property( "viz_measure1" , "Maß" , true , true ) ;
chartProperties [ 1 ] = myProp ; chartProperties [ 1 ] = myProp ;
return chartProperties ; return chartProperties ;
@ -184,11 +184,11 @@ function prepareBarYForm()
{ {
var chartProperties = [ ] ; var chartProperties = [ ] ;
var propertyCounter = 0 ; var propertyCounter = 0 ;
var myProp = new chart Property( "viz_dimension1" , "Kategorie-Dimension" , true , false , true , null , null , true ) ; var myProp = new dimension Property( "viz_dimension1" , "Kategorie-Dimension" , true , false , true , null , null , true ) ;
chartProperties [ 0 ] = myProp ; chartProperties [ 0 ] = myProp ;
var myProp = new chart Property( "viz_dimension2" , "Serien-Dimension" , true , false , false , null , null , true ) ; var myProp = new dimension Property( "viz_dimension2" , "Serien-Dimension" , true , false , false , null , null , true ) ;
chartProperties [ 1 ] = myProp ; chartProperties [ 1 ] = myProp ;
var myProp = new chart Property( "viz_measure1" , "Maß" , true , true , true , null , null , true ) ; var myProp = new dimension Property( "viz_measure1" , "Maß" , true , true , true , null , null , true ) ;
chartProperties [ 2 ] = myProp ; chartProperties [ 2 ] = myProp ;
return chartProperties ; return chartProperties ;
@ -198,11 +198,11 @@ function prepareLineForm()
{ {
var chartProperties = [ ] ; var chartProperties = [ ] ;
var propertyCounter = 0 ; var propertyCounter = 0 ;
var myProp = new chart Property( "viz_dimension1" , "Kategorie-Dimension" , true , false , true , null , null , true ) ; var myProp = new dimension Property( "viz_dimension1" , "Kategorie-Dimension" , true , false , true , null , null , true ) ;
chartProperties [ 0 ] = myProp ; chartProperties [ 0 ] = myProp ;
var myProp = new chart Property( "viz_dimension2" , "Serien-Dimension" , true , false , false , null , null , true ) ; var myProp = new dimension Property( "viz_dimension2" , "Serien-Dimension" , true , false , false , null , null , true ) ;
chartProperties [ 1 ] = myProp ; chartProperties [ 1 ] = myProp ;
var myProp = new chart Property( "viz_measure1" , "Maß" , true , true , true , null , null , true ) ; var myProp = new dimension Property( "viz_measure1" , "Maß" , true , true , true , null , null , true ) ;
chartProperties [ 2 ] = myProp ; chartProperties [ 2 ] = myProp ;
return chartProperties ; return chartProperties ;
@ -212,9 +212,9 @@ function prepareLineForm_alt()
{ {
var chartProperties = [ ] ; var chartProperties = [ ] ;
var propertyCounter = 0 ; var propertyCounter = 0 ;
var myProp = new chart Property( "dimension1" , "X-Achse" , true , false , true , null , null , true ) ; var myProp = new dimension Property( "dimension1" , "X-Achse" , true , false , true , null , null , true ) ;
chartProperties [ 0 ] = myProp ; chartProperties [ 0 ] = myProp ;
var myProp = new chart Property( "measure1" , "Y-Achse" , true , true , true , null , null , true ) ; var myProp = new dimension Property( "measure1" , "Y-Achse" , true , true , true , null , null , true ) ;
chartProperties [ 1 ] = myProp ; chartProperties [ 1 ] = myProp ;
return chartProperties ; return chartProperties ;
@ -396,6 +396,12 @@ function renderForm(formDiv,myChartProperties)
myForm . appendChild ( tabElem ) ; myForm . appendChild ( tabElem ) ;
* / * /
for ( var k = 0 ; k < myChartProperties . length ; k ++ ) for ( var k = 0 ; k < myChartProperties . length ; k ++ )
{
myForm . appendChild ( renderDimensionField ( myChartProperties [ k ] ) ) ;
}
}
function renderDimensionField ( dimensionProperty )
{ {
const fieldElem = document . createElement ( "div" ) ; const fieldElem = document . createElement ( "div" ) ;
fieldElem . classList . add ( "field" ) ; fieldElem . classList . add ( "field" ) ;
@ -407,7 +413,7 @@ function renderForm(formDiv,myChartProperties)
label . classList . add ( "label" ) ; label . classList . add ( "label" ) ;
label . classList . add ( "is-required" ) ; label . classList . add ( "is-required" ) ;
label . classList . add ( "is-small" ) ; label . classList . add ( "is-small" ) ;
const textnode = document . createTextNode ( myChartProperties [ k ] . caption ) ; const textnode = document . createTextNode ( dimensionProperty . caption ) ;
label . appendChild ( textnode ) ; label . appendChild ( textnode ) ;
labelElem . appendChild ( label ) ; labelElem . appendChild ( label ) ;
fieldElem . appendChild ( labelElem ) ; fieldElem . appendChild ( labelElem ) ;
@ -423,17 +429,18 @@ function renderForm(formDiv,myChartProperties)
inputSelectElem . classList . add ( "is-fullwidth" ) ; inputSelectElem . classList . add ( "is-fullwidth" ) ;
const selElem = document . createElement ( "select" ) ; const selElem = document . createElement ( "select" ) ;
selElem . name = myChartProperties [ k ] . name ; selElem . name = dimensionProperty . name ;
selElem . id = myChartProperties [ k ] . name ; selElem . id = dimensionProperty . name ;
fillSelectOptions ( selElem , myChartProperties [ k ] . getValueResultset ( ) , myChartProperties [ k ] . isMandatory ) ; selElem . onchange = function ( ) {
createChart ( 'chartDiv' ) ;
} ;
fillSelectOptions ( selElem , dimensionProperty . getValueResultset ( ) , dimensionProperty . isMandatory ) ;
inputSelectElem . appendChild ( selElem ) ; inputSelectElem . appendChild ( selElem ) ;
inputParaElem . appendChild ( inputSelectElem ) ; inputParaElem . appendChild ( inputSelectElem ) ;
inputFieldElem . appendChild ( inputParaElem ) ; inputFieldElem . appendChild ( inputParaElem ) ;
fieldElem . appendChild ( inputFieldElem ) ; fieldElem . appendChild ( inputFieldElem ) ;
return fieldElem ;
myForm . appendChild ( fieldElem ) ;
}
} }
function renderFormDetails ( formDiv , myCommonChartProperties ) function renderFormDetails ( formDiv , myCommonChartProperties )
@ -443,8 +450,8 @@ function renderFormDetails(formDiv,myCommonChartProperties)
while ( myForm . firstChild ) { while ( myForm . firstChild ) {
myForm . removeChild ( myForm . firstChild ) ; myForm . removeChild ( myForm . firstChild ) ;
} }
/ *
const tabElem = document . createElement ( "table" ) ; const tabElem = document . createElement ( "table" ) ;
//tabElem.caption="Eigenschaften";
for ( var k = 0 ; k < myCommonChartProperties . length ; k ++ ) for ( var k = 0 ; k < myCommonChartProperties . length ; k ++ )
{ {
const rowElem = document . createElement ( "tr" ) ; const rowElem = document . createElement ( "tr" ) ;
@ -452,7 +459,7 @@ function renderFormDetails(formDiv,myCommonChartProperties)
const textnode = document . createTextNode ( myCommonChartProperties [ k ] . caption ) ; const textnode = document . createTextNode ( myCommonChartProperties [ k ] . caption ) ;
tdCap . appendChild ( textnode ) ; tdCap . appendChild ( textnode ) ;
rowElem . appendChild ( tdCap ) ; rowElem . appendChild ( tdCap ) ;
if ( myCommonChartProperties [ k ] . inputType == 0 ) if ( myCommonChartProperties [ k ] . inputType == "TEXT" )
{ {
//Einfaches Texteingabefeld:
//Einfaches Texteingabefeld:
const tdInpElem = document . createElement ( "td" ) ; const tdInpElem = document . createElement ( "td" ) ;
@ -466,7 +473,7 @@ function renderFormDetails(formDiv,myCommonChartProperties)
} }
else else
{ // Klappmenü:
{
const tdSelElem = document . createElement ( "td" ) ; const tdSelElem = document . createElement ( "td" ) ;
const selElem = document . createElement ( "select" ) ; const selElem = document . createElement ( "select" ) ;
selElem . name = myCommonChartProperties [ k ] . name ; selElem . name = myCommonChartProperties [ k ] . name ;
@ -475,11 +482,76 @@ function renderFormDetails(formDiv,myCommonChartProperties)
tdSelElem . appendChild ( selElem ) ; tdSelElem . appendChild ( selElem ) ;
rowElem . appendChild ( tdSelElem ) ; rowElem . appendChild ( tdSelElem ) ;
} }
//here values, and then:
tabElem . appendChild ( rowElem ) ; tabElem . appendChild ( rowElem ) ;
} }
myForm . appendChild ( tabElem ) ; * /
//TODO: myCommonChartProperties auf separatem TAB
for ( var k = 0 ; k < myCommonChartProperties . length ; k ++ )
{
myForm . appendChild ( renderChartPropertyField ( myCommonChartProperties [ k ] ) ) ;
}
}
function renderChartPropertyField ( commonChartProperty )
{
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" ) ;
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" ) ;
//inputFieldElem.classList.add("is-active");
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" ) ;
if ( commonChartProperty . inputType == "TEXT" )
{
//Einfaches Texteingabefeld:
const inpElem = document . createElement ( "input" ) ;
inpElem . type = "TEXT" ;
inpElem . size = 15 ;
inpElem . title = commonChartProperty . explanation ;
inpElem . name = commonChartProperty . name ;
inpElem . id = commonChartProperty . name ;
inpElem . value = commonChartProperty . defaultValue ;
inpElem . onchange = function ( ) {
createChart ( 'chartDiv' ) ;
} ;
inputElem . appendChild ( inpElem ) ;
inputParaElem . appendChild ( inputElem ) ;
}
else
{
//select input:
inputElem . classList . add ( "select" ) ;
const selElem = document . createElement ( "select" ) ;
selElem . name = commonChartProperty . name ;
selElem . id = commonChartProperty . name ;
selElem . title = commonChartProperty . explanation ;
selElem . onchange = function ( ) {
createChart ( 'chartDiv' ) ;
} ;
fillSelectOptions ( selElem , commonChartProperty . getValueResultset ( ) , commonChartProperty . isMandatory ) ;
inputElem . appendChild ( selElem ) ;
inputParaElem . appendChild ( inputElem ) ;
}
inputFieldElem . appendChild ( inputParaElem ) ;
fieldElem . appendChild ( inputFieldElem ) ;
return fieldElem ;
} }
function fillSelectOptions ( myCombo , myValues , isMandatory ) function fillSelectOptions ( myCombo , myValues , isMandatory )
@ -642,15 +714,18 @@ for(row=1;row<rowcount;row++)
} }
tableDiv . appendChild ( tabElem ) ; tableDiv . appendChild ( tabElem ) ;
} }
function showChartDiv ( chartDivElem )
function createChart ( chartDivElem )
{ {
chartType = document . getElementById ( "viz_chart_type" ) . value ;
var myDiv = document . getElementById ( chartDivElem ) ; var myDiv = document . getElementById ( chartDivElem ) ;
if ( myDiv . style . display == "block" ) if ( myDiv . style . display == "block" )
myDiv . style . display = "none" ; myDiv . style . display = "none" ;
else else
myDiv . style . display = "block" ; myDiv . style . display = "block" ;
}
function createChart ( chartDivElem )
{
chartType = document . getElementById ( "viz_chart_type" ) . value ;
var selectionRsMetaData = [ ] ; var selectionRsMetaData = [ ] ;
var selectionRs = [ ] ; var selectionRs = [ ] ;
@ -677,6 +752,7 @@ var svg = d3.select("#"+chartDivElem).append("svg")
. attr ( "text-anchor" , "start" ) . attr ( "text-anchor" , "start" )
. attr ( "id" , "chartSVG" ) . attr ( "id" , "chartSVG" )
; ;
svg . width = 50 ;
switch ( chartType ) switch ( chartType )
{ {
@ -827,13 +903,27 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
var marginBottomDefault = 100 ; var marginBottomDefault = 100 ;
var categoryLabel = getColumnCaption ( categoryDim ) ; var categoryLabel = getColumnCaption ( categoryDim ) ;
var measureLabel = getColumnCaption ( measureDim ) ; var measureLabel = getColumnCaption ( measureDim ) ;
var styles = { var stylesString = "{\"overflow\": \"visible\"" ;
for ( var k = 0 ; k < commonChartProperties . length ; k ++ )
{
if ( commonChartProperties [ k ] . groupUniquename == "STYLES" )
{
stylesString += ",\"" + commonChartProperties [ k ] . name + "\":\"" + getCommonChartProperty ( commonChartProperties [ k ] . name ) + "\"" ;
}
}
stylesString += " }" ;
console . log ( "Styles:" + stylesString ) ;
var styles = JSON . parse ( stylesString ) ;
/ * v a r s t y l e s = {
backgroundColor : myBgColor , backgroundColor : myBgColor ,
color : myColor , color : myColor ,
fontFamily : myFontFamily , fontFamily : myFontFamily ,
fontSize : fontSizeDefault , fontSize : fontSizeDefault ,
overflow : "visible" overflow : "visible"
} } * /
if ( chartOrientationVertical ) if ( chartOrientationVertical )
{ {
