|
|
@ -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(); |