SuperX
/
viz
7
0
Fork 0
Code Issues 10 Pull Requests Projects Releases Wiki Activity
Browse Source

Export JS-Code bei Assistent bei Echarts #11

master
Daniel Quathamer 3 months ago
parent
76c0c91555
commit
8bde3f0528
4 changed files with 135 additions and 57 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. 36
      superx/xml/js/viz/viz_assistent.js
  2. 16
      superx/xml/js/viz/viz_viewer.js
  3. 89
      superx/xml/viz_components.xsl
  4. 51
      superx/xml/viz_html_chart.xsl

36
superx/xml/js/viz/viz_assistent.js
Unescape View File

@ -648,8 +648,8 @@ function resetChartPropertiesForm(chosenRenderer)
myChartModel=new chartModel(1,"",document.getElementById("fldVizRenderer").value,rsTableMetaData); myChartModel=new chartModel(1,"",document.getElementById("fldVizRenderer").value,rsTableMetaData);
renderChart('chartDiv',myChartModel); renderChart('chartDiv',myChartModel);
//Show Plot Code if renderer =plot: //Show Plot Code if renderer =plot:
var myDiv=document.getElementById("plotCodeDiv"); var myDiv=document.getElementById("chartCodeDiv");
if(chosenRenderer=="plot") if(chosenRenderer=="plot" || chosenRenderer=="echarts")
myDiv.style.display="block"; myDiv.style.display="block";
else else
myDiv.style.display="none"; myDiv.style.display="none";
@ -1515,9 +1515,9 @@ updateChartModelCode(myChartModel);
} }
function showPlotCode() function showChartCode()
{ {
var mySrcDiv=document.getElementById("plotCodeTextAreaDiv"); var mySrcDiv=document.getElementById("chartCodeTextAreaDiv");
if(mySrcDiv.style.display=="block") if(mySrcDiv.style.display=="block")
mySrcDiv.style.display="none"; mySrcDiv.style.display="none";
else else
@ -1543,13 +1543,6 @@ else
} }
} }
function prettifyJson(srcCode)
{
var ret="";
ret=srcCode.replace(/],/g,"],\n");
ret=ret.replace(/},/g,"},\n");
return ret;
}
function loadChartModelCode(chartModelSrcCodeTextarea,chartDiv) function loadChartModelCode(chartModelSrcCodeTextarea,chartDiv)
{ {
@ -1569,6 +1562,21 @@ if(myJsonString!="")
} }
} }
function loadNativeCode(nativeSrcCodeTextarea,chartDiv)
{
var mySrc=document.getElementById(nativeSrcCodeTextarea);
var chartDivElem=document.getElementById(chartDiv);
var myJsonString =mySrc.value;
if(myJsonString!="")
{
myOption=JSON.parse(myJsonString);
var myChart = echarts.init(chartDivElem,null, { renderer: 'svg', locale: 'DE'});
myChart.setOption(myOption);
}
}
function copySrcCode(mydiv) function copySrcCode(mydiv)
@ -1787,6 +1795,10 @@ function closeModalImage(ergebniselementOrdnr)
myModalCard.classList.remove('is-active'); myModalCard.classList.remove('is-active');
} }
function exportDataTable(rs,rsMetaData)
{
myRs=fillEchartsDataSetSimpleCopy(rs,rsMetaData);
console.log(JSON.stringify(myRs));
}

16
superx/xml/js/viz/viz_viewer.js
Unescape View File

@ -404,8 +404,8 @@ function renderChartSVGfromModelWithPlot (currentChartModel,targetDiv,ergebnisel
myOptions["marks"].push(marksArray); myOptions["marks"].push(marksArray);
var svgPlot=Plot.plot(myOptions); var svgPlot=Plot.plot(myOptions);
var srcPlot=JSON.stringify(myOptions); var srcPlot=JSON.stringify(myOptions);
if(document.getElementById("plotCodeTextArea")) if(document.getElementById("chartCodeTextArea"))
document.getElementById("plotCodeTextArea").innerHTML=srcPlot; document.getElementById("chartCodeTextArea").innerHTML=srcPlot;
document.getElementById(targetDiv).innerHTML=""; document.getElementById(targetDiv).innerHTML="";
document.getElementById(targetDiv).appendChild(svgPlot); document.getElementById(targetDiv).appendChild(svgPlot);
@ -1386,6 +1386,10 @@ function renderEChart2(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitl
} }
// Display the chart using the configuration items and data just specified. // Display the chart using the configuration items and data just specified.
console.log("ECharts-SRC:"+JSON.stringify(option)); console.log("ECharts-SRC:"+JSON.stringify(option));
//im Assistenten den Code setzen:
if(document.getElementById("chartCodeTextArea"))
document.getElementById("chartCodeTextArea").innerHTML=prettifyJson(JSON.stringify(option));
myChart.setOption(option); myChart.setOption(option);
@ -2194,3 +2198,11 @@ function toggleSideBarDiv(mySidebarDivId)
} }
function prettifyJson(srcCode)
{
var ret="";
ret=srcCode.replace(/],/g,"],\n");
ret=ret.replace(/},/g,"},\n");
return ret;
}

89
superx/xml/viz_components.xsl
Unescape View File

@ -673,7 +673,7 @@ rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(ne
<xsl:text>,'rownr','Zeilennr.',0,4)); <xsl:text>,'rownr','Zeilennr.',0,4));
</xsl:text> </xsl:text>
<xsl:variable name="headersCount" select="sqlerg/complete_headers/header" />
<xsl:for-each select="sqlerg/complete_headers/header"> <xsl:for-each select="sqlerg/complete_headers/header">
<xsl:variable name="rownr"> <xsl:variable name="rownr">
<xsl:value-of select="position()"/> <xsl:value-of select="position()"/>
@ -704,10 +704,12 @@ rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(ne
<xsl:variable name="colnr"> <xsl:variable name="colnr">
<xsl:value-of select="position()"/> <xsl:value-of select="position()"/>
</xsl:variable> </xsl:variable>
<xsl:if test="$colnr &lt;= $headersCount">
<xsl:text> <xsl:text>
rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>][</xsl:text><xsl:value-of select="number($colnr)"/><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)"/><xsl:text>].coltype=</xsl:text><xsl:value-of select="@typ"/>
<xsl:text>; <xsl:text>;
</xsl:text> </xsl:text>
</xsl:if>
</xsl:for-each> </xsl:for-each>
</xsl:if> </xsl:if>
@ -749,7 +751,58 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
</xsl:otherwise> </xsl:otherwise>
</xsl:choose> </xsl:choose>
</xsl:template> </xsl:template>
<xsl:template name="vizAssistentCSS">
<style type="text/css">
textarea.editform {
height: 4em;
width: 100%;
padding: 3px;
transition: all 0.5s ease;
}
textarea.editform:focus {
height: 40em;
}
</style>
</xsl:template>
<!-- start Javascript--> <!-- start Javascript-->
<xsl:template name="importEchartsLibs">
<script language="JavaScript" type="text/javascript" src="../xml/js/viz/echarts.min.js"></script>
<script language="JavaScript" type="text/javascript" src="../xml/js/viz/echarts_langDE.js"></script>
</xsl:template>
<xsl:template name="importd3jsLibs">
<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.min.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3-sankey.js" />
<style type="text/css">
.node rect {
cursor: move;
fill-opacity: .9;
shape-rendering: crispEdges;
}
.node text {
pointer-events: none;
text-shadow: 0 1px 0 #fff;
}
.link {
fill: none;
stroke: #000;
stroke-opacity: .2;
}
.link:hover {
stroke-opacity: .5;
}
</style>
</xsl:template>
<xsl:template name="importPlotLibs">
<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.min.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/plot.js" />
</xsl:template>
<xsl:template name="importVizJavascriptLibs"> <xsl:template name="importVizJavascriptLibs">
<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.min.js" /> <script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.min.js" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/plot.js" /> <script language="Javascript" type="text/javascript" src="../xml/js/viz/plot.js" />
@ -1559,8 +1612,7 @@ Platzhalter
</xsl:call-template> </xsl:call-template>
</xsl:variable> </xsl:variable>
<xsl:if test="contains($importEcharts,'true')"> <xsl:if test="contains($importEcharts,'true')">
<script language="JavaScript" type="text/javascript" src="../xml/js/viz/echarts.min.js"></script> <xsl:call-template name="importEchartsLibs" />
<script language="JavaScript" type="text/javascript" src="../xml/js/viz/echarts_langDE.js"></script>
</xsl:if> </xsl:if>
<xsl:variable name="importD3js"> <xsl:variable name="importD3js">
<xsl:call-template name="isRendererNeeded"> <xsl:call-template name="isRendererNeeded">
@ -1568,31 +1620,7 @@ Platzhalter
</xsl:call-template> </xsl:call-template>
</xsl:variable> </xsl:variable>
<xsl:if test="contains($importD3js,'true')"> <xsl:if test="contains($importD3js,'true')">
<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.min.js" /> <xsl:call-template name="importd3jsLibs" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3-sankey.js" />
<style type="text/css">
.node rect {
cursor: move;
fill-opacity: .9;
shape-rendering: crispEdges;
}
.node text {
pointer-events: none;
text-shadow: 0 1px 0 #fff;
}
.link {
fill: none;
stroke: #000;
stroke-opacity: .2;
}
.link:hover {
stroke-opacity: .5;
}
</style>
</xsl:if> </xsl:if>
<xsl:variable name="importPlot"> <xsl:variable name="importPlot">
<xsl:call-template name="isRendererNeeded"> <xsl:call-template name="isRendererNeeded">
@ -1600,8 +1628,7 @@ Platzhalter
</xsl:call-template> </xsl:call-template>
</xsl:variable> </xsl:variable>
<xsl:if test="contains($importPlot,'true')"> <xsl:if test="contains($importPlot,'true')">
<script language="Javascript" type="text/javascript" src="../xml/js/viz/d3.min.js" /> <xsl:call-template name="importPlotLibs" />
<script language="Javascript" type="text/javascript" src="../xml/js/viz/plot.js" />
</xsl:if> </xsl:if>
</xsl:template> </xsl:template>
@ -1771,7 +1798,7 @@ td.integer {
top: 120px; /*Abstand zur oberen Leiste*/ top: 120px; /*Abstand zur oberen Leiste*/
padding-top:2em; padding-top:2em;
padding-left:0.5em; padding-left:0.5em;
right: 0; right: 1.5em;
bottom: 0; bottom: 0;
width: 325px; /*Breite nach Bedarf */ width: 325px; /*Breite nach Bedarf */
background: white; background: white;

51
superx/xml/viz_html_chart.xsl
Unescape View File

@ -46,6 +46,11 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<xsl:call-template name="nd_htmlscript" /> <xsl:call-template name="nd_htmlscript" />
<xsl:call-template name="nd_tableJavascript" /> <xsl:call-template name="nd_tableJavascript" />
<xsl:call-template name="nd_tableCSS" /> <xsl:call-template name="nd_tableCSS" />
<xsl:call-template name="importd3jsLibs" />
<xsl:call-template name="importEchartsLibs" />
<xsl:call-template name="importPlotLibs" />
<xsl:call-template name="vizAssistentCSS" />
<xsl:call-template name="importVizViewer"></xsl:call-template> <xsl:call-template name="importVizViewer"></xsl:call-template>
<script language="Javascript" type="text/javascript" src="../xml/js/viz/viz_assistent.js" /> <script language="Javascript" type="text/javascript" src="../xml/js/viz/viz_assistent.js" />
@ -218,7 +223,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<label class="label is-required is-small"><strong>Datentabelle</strong></label> <label class="label is-required is-small"><strong>Datentabelle</strong></label>
</div> </div>
<a onClick="exportDataTable(rs[0],rsColumnMetaData[0])">EXPORT</a>
<span class="separator">&#160;</span> <span class="separator">&#160;</span>
<span class="separator">&#160;</span> <span class="separator">&#160;</span>
@ -465,10 +470,21 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<div id="chartModelsrcDiv"> <!--class="section">--> <div id="chartModelsrcDiv"> <!--class="section">-->
<div id="chartModelsrc" style="display:none"> <div id="chartModelsrc" style="display:none">
<textarea id="chartModelSrcCode" name="chartModelSrcCode" class="textarea" placeholder="Quellcode..."> <!--cols="100" rows="20"--></textarea> <textarea id="chartModelSrcCode" name="chartModelSrcCode" class="editform" placeholder="Quellcode..."> <!--cols="100" rows="20"--></textarea>
<a class="button" onClick="copySrcCode('chartModelSrcCode');">Kopieren</a> <div class="field is-grouped">
<span class="separator">&#160;</span> <p class="control">
<a class="button" onClick="loadChartModelCode('chartModelSrcCode','chartDiv');">Laden</a> <button class="button is-small is-info is-outlined" onclick="copySrcCode('chartModelSrcCode');return false;">Kopieren</button>
</p>
<p class="control">
<button class="button is-small is-info is-inverted is-outlined" onclick="loadChartModelCode('chartModelSrcCode','chartDiv');return false;">Laden</button>
</p>
</div>
<!--<a class="button" onClick="copySrcCode('chartModelSrcCode');">Kopieren</a>-->
</div> </div>
</div> </div>
</div> </div>
@ -488,22 +504,33 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
</svg></div> </svg></div>
</div> </div>
<!--Beginn PlotCode--> <!--Beginn chartCode-->
<div class="field is-grouped" id="plotCodeDiv" style="display:block"> <div class="field is-grouped" id="chartCodeDiv" style="display:block">
<div class="label-container"> <div class="label-container">
<label class="label is-required is-small"><strong>Plot-Code</strong></label> <label class="label is-required is-small"><strong>Chart-Code</strong></label>
</div> </div>
<span class="separator">&#160;</span> <span class="separator">&#160;</span>
<span class="separator">&#160;</span> <span class="separator">&#160;</span>
<a onClick="showPlotCode();"> <a onClick="showChartCode();">
<span class="icon"> <span class="icon">
<img src="../images/icons/more.svg" title="Laden" /> <img src="../images/icons/more.svg" title="Laden" />
</span> </span>
</a> </a>
<div id="plotCodeTextAreaDiv" style="display:none"> <div id="chartCodeTextAreaDiv" style="display:none">
<textarea id="plotCodeTextArea" name="plotCodeTextArea" class="textarea" placeholder="Plot-Quellcode..." readonly="readonly" disabled="disabled"> <!--cols="100" rows="20"--> <textarea id="chartCodeTextArea" name="chartCodeTextArea" class="editform" placeholder="Chart-Quellcode..." > <!--readonly="readonly" disabled="disabled" cols="100" rows="20"-->
</textarea> </textarea>
<div class="field is-grouped">
<p class="control">
<button class="button is-small is-info is-outlined" onclick="copySrcCode('chartCodeTextArea');return false;">Kopieren</button>
</p>
<p class="control">
<button class="button is-small is-info is-inverted is-outlined" onclick="loadNativeCode('chartCodeTextArea','chartDiv');return false;">Laden</button>
</p>
</div>
</div> </div>

Write Preview
Loading…
Cancel
Save