/* d3 Code */

function d3dataRow(nr,name,value ) 
    {
this.nr=nr;
this.name=name;
this.value=value;

}

function chartPropertyValue(nr,name,value,isDefault ) 
    {
this.nr=nr;
this.name=name;
this.value=value;
this.isDefault=isDefault;

}

function chartProperty(name,caption,isDynamic,isMeasure,isOptional,staticValues,defaultValue) 
    {
this.name=name;
this.caption=caption;
this.isDynamic=isDynamic;
this.isMeasure=isMeasure;
this.staticValues=staticValues;
this.isOptional=isOptional;
this.defaultValue=defaultValue;
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 chartPropertyValue(rsMetaData[j].nr,rsMetaData[j].colcaption,rsMetaData[j].colcaption,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 chartPropertyValue(k,staticValuesArray[k],staticValuesArray[k],isDefault);
			valueOptions[k]=o;
		}
	}
	return valueOptions;
    }
}

function prepareChartProperties(chartType)
{
var chartProperties=[];
switch (chartType) {
		case "bar_x":
		chartProperties=prepareBarXForm();
		break;
		case "line":
		chartProperties=prepareLineForm();
		break;
		default:
		return false;
		break;
	}
renderForm("chartProperties",chartProperties,commonChartProperties);

return true;
}

function prepareBarXForm()
{
	var chartProperties=[];
	var propertyCounter=0;
	var myProp= new chartProperty("viz_category_dim","Kategorie-Dimension",true,false,false,null,null);
	chartProperties[0]=myProp;
	var myProp= new chartProperty("viz_measure_dim","Maß",true,true,false,null,null);
	chartProperties[1]=myProp;

return chartProperties;
}

function prepareLineForm()
{
	var chartProperties=[];
	var propertyCounter=0;
	var myProp= new chartProperty("viz_category_dim","X-Achse",true,false,false,null,null);
	chartProperties[0]=myProp;
	var myProp= new chartProperty("viz_measure_dim","Y-Achse",true,true,false,null,null);
	chartProperties[1]=myProp;

return chartProperties;
}

function renderForm(formDiv,chartProperties,myCommonChartProperties)
{
	//first empty form:
	var myForm=document.getElementById(formDiv);
	while (myForm.firstChild) {
		myForm.removeChild(myForm.firstChild);
	}
	//now fill it:
	const tabElem = document.createElement("table");
	myForm.appendChild(tabElem);
	for(var k=0;k < chartProperties.length;k++)
		{
		const rowElem = document.createElement("tr");
		const tdCap = document.createElement("td");
		const textnode = document.createTextNode(chartProperties[k].caption);
		tdCap.appendChild(textnode);
		const tdSelElem = document.createElement("td");
		const selElem = document.createElement("select");
		selElem.name=chartProperties[k].name;
		selElem.id=chartProperties[k].name;
		fillSelectOptions(selElem,chartProperties[k].getValueResultset());
		tdSelElem.appendChild(selElem);
		rowElem.appendChild(tdCap);
		rowElem.appendChild(tdSelElem);
		//here values, and then:
		tabElem.appendChild( rowElem);
		}
		/*
	const rowElem = document.createElement("tr");
	const tdCap = document.createElement("td");
	const textnode = document.createTextNode("Breite");
	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(tdInpElem);
	tabElem.appendChild(rowElem);
	*/
	myForm.appendChild(tabElem);
		
	//TODO: myCommonChartProperties auf separatem TAB
}



function fillSelectOptions(myCombo,chartPropertyValues)
{
var optionCounter=0;
var selectedOption=null;
while (myCombo.firstChild) {
    myCombo.removeChild(myCombo.firstChild);
}
for(var j=0;j < chartPropertyValues.length;j++)
{
	if(chartPropertyValues[j].isDefault)
		selectedOption=j;
	
	var o=new Option(chartPropertyValues[j].name,chartPropertyValues[j].nr,null,null);
	myCombo.options[optionCounter]=o;
	optionCounter++;
}
if(selectedOption!=null)
	myCombo.selectedIndex=selectedOption;
}

/* alt:*/
function fillSelectFields()
{
fillSelectOptions("viz_category_dim",false);
fillSelectOptions("viz_measure_dim",true);


return true;
}


function prepareData()
{
var data=[];

//TODO: filld3ArrayofObjects
var rowcount=rs.length;
var colnrOfCategorydimName=document.getElementById("viz_category_dim").value;
var colnrOfMeasure=document.getElementById("viz_measure_dim").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:
	{
	data.push(new d3dataRow(j,rs[j][colnrOfCategorydimName],rs[j][colnrOfMeasure]));
	//identify max String length to compute x axis size
	if(rs[j][colnrOfCategorydimName].length >maxLenName)
		maxLenName=rs[j][colnrOfCategorydimName].length;
	//the same for values:
	if(rs[j][colnrOfMeasure] >maxValue)
		maxValue=rs[j][colnrOfMeasure];
	}
	
}
return data;
}

function createChart()
{
chartType=document.getElementById("viz_chart_type").value;
/*
if(document.getElementById("viz_category_dim").value=="" || 
	document.getElementById("viz_measure_dim").value=="" )
{
	alert("Bitte wählen Sie eine Kategorie und ein Maß");
	return false;
}
*/
var data=[];
data=prepareData();
	
	var valueLabelWidth = getCommonChartProperty("valueLabelWidth"); 
	var fontFamily=getCommonChartProperty("fontFamily"); 
	var gridLabelHeight =  getCommonChartProperty("gridLabelHeight"); 
	var gridChartOffset = getCommonChartProperty("gridChartOffset");
	var chartWidth=getCommonChartProperty("chartWidth");
	var fontSize=getCommonChartProperty("fontSize");

	document.getElementById("chartDiv").innerHTML=""; //reset canvas
	var svg = d3.select("#chartDiv").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")
      ;
   
switch (chartType)
{
	case "bar_x":
		makeBarX(svg,data);
		//makeBarY(svg,data);
        break;
	case "line":
		makeLine(svg,data);
		break;
	default:
		alert("Please select a chart type");
	break;
}

}

function makeBarX(svg,data)
{
	var barHeight = 18; 
	var barLabelWidth = 500; 
	var barLabelPadding = 10; 
	var maxBarWidth = maxValue;
	var fontSize=getCommonChartProperty("fontSize");
	var chartWidth=getCommonChartProperty("chartWidth");
	var maxValue=d3.max(data, d => d.value);
	var maxLenName=d3.max(data, d => d.name.length);
	var maxLenNamePx=maxLenName*fontSize;
	var x = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).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.value)) //x)
	      .attr("height", y.bandwidth() - 1)
		
	;
	//value label:
	  bar.append("text")
	      .attr("fill", "white")
	      .attr("x", d => x(d.value)/2)
	      .attr("y", (y.bandwidth() - 1) / 2)
	      .attr("dy", "0.35em")
	      .attr("text-anchor","middle")
	      .text(d => d.value);
	      //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.name);
}

function makeLine(svg,data) {
var options = {
  marginBottom:100,
  x: {
    tickRotate: -45,
    ticks: 5,
    tickSize: 5,
    line: true,
    tickPadding: 10,
    labelAnchor: "left",
    labelOffset: 0,
    nice: true,
    label: "My label",
    type:"point"
  },
  // set y axis options
  y: {
    grid:true
  },
  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 makeBarY(svg,data) {
var options = {
  marginBottom:100,
  x: {
    tickRotate: -45,
    ticks: 5,
    tickSize: 5,
    line: true,
    tickPadding: 10,
    labelAnchor: "left",
    labelOffset: 0,
    nice: true,
    label: "My label"

  },
  // set y axis options
  y: {
    grid:true
  },
  sort: "nr",
  // define the marks we will use, dots and a line
    marks: [
    //Plot.barY(data, Plot.groupX({x: "name", y: "value" }))
    Plot.barY(
      data,
      Plot.groupX(
        { y: "sum" }, 
        { 
          x: "name", 
          y: "value", 
          sort: {x:"nr"}, 
          filter: null 
        }
      )
    )
  ]
    //Plot.dot(data, {x: "nr", y: "value",sort: { x: "nr" } })
  
  
};
  
  
 document.getElementById("chartDiv").appendChild(Plot.plot(options));
}

function getCommonChartProperty(name)
{
	var propertyValue="";
	for (var i=0;i<commonChartProperties.length;i++)
	{
		if(commonChartProperties[i].name==name)
			propertyValue=commonChartProperties[i].defaultValue; //TODO aus formular übersteuern
	}
	return propertyValue;
}


function showSrcCode()
{
	//alert(mydiv);
var mySvg=document.getElementById("chartSVG");
	// Extract the data as SVG text string
	var svg_xml = (new XMLSerializer).serializeToString(mySvg);
//alert(svg_xml);
document.getElementById("chartSrc").innerHTML=svg_xml;
document.getElementById("chartSrcFields").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 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) );
    } );
}