Browse Source

Export JS-Code bei Assistent bei Echarts #11

master
Daniel Quathamer 5 days ago
parent
commit
8bde3f0528
  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

@ -648,8 +648,8 @@ function resetChartPropertiesForm(chosenRenderer) @@ -648,8 +648,8 @@ function resetChartPropertiesForm(chosenRenderer)
myChartModel=new chartModel(1,"",document.getElementById("fldVizRenderer").value,rsTableMetaData);
renderChart('chartDiv',myChartModel);
//Show Plot Code if renderer =plot:
var myDiv=document.getElementById("plotCodeDiv");
if(chosenRenderer=="plot")
var myDiv=document.getElementById("chartCodeDiv");
if(chosenRenderer=="plot" || chosenRenderer=="echarts")
myDiv.style.display="block";
else
myDiv.style.display="none";
@ -1515,9 +1515,9 @@ updateChartModelCode(myChartModel); @@ -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")
mySrcDiv.style.display="none";
else
@ -1543,13 +1543,6 @@ 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)
{
@ -1569,6 +1562,21 @@ if(myJsonString!="") @@ -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)
@ -1787,6 +1795,10 @@ function closeModalImage(ergebniselementOrdnr) @@ -1787,6 +1795,10 @@ function closeModalImage(ergebniselementOrdnr)
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

@ -404,8 +404,8 @@ function renderChartSVGfromModelWithPlot (currentChartModel,targetDiv,ergebnisel @@ -404,8 +404,8 @@ function renderChartSVGfromModelWithPlot (currentChartModel,targetDiv,ergebnisel
myOptions["marks"].push(marksArray);
var svgPlot=Plot.plot(myOptions);
var srcPlot=JSON.stringify(myOptions);
if(document.getElementById("plotCodeTextArea"))
document.getElementById("plotCodeTextArea").innerHTML=srcPlot;
if(document.getElementById("chartCodeTextArea"))
document.getElementById("chartCodeTextArea").innerHTML=srcPlot;
document.getElementById(targetDiv).innerHTML="";
document.getElementById(targetDiv).appendChild(svgPlot);
@ -1386,6 +1386,10 @@ function renderEChart2(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitl @@ -1386,6 +1386,10 @@ function renderEChart2(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitl
}
// Display the chart using the configuration items and data just specified.
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);
@ -2194,3 +2198,11 @@ function toggleSideBarDiv(mySidebarDivId) @@ -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

@ -673,7 +673,7 @@ rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(ne @@ -673,7 +673,7 @@ rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(ne
<xsl:text>,'rownr','Zeilennr.',0,4));
</xsl:text>
<xsl:variable name="headersCount" select="sqlerg/complete_headers/header" />
<xsl:for-each select="sqlerg/complete_headers/header">
<xsl:variable name="rownr">
<xsl:value-of select="position()"/>
@ -704,10 +704,12 @@ rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(ne @@ -704,10 +704,12 @@ rsColumnMetaData[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(ne
<xsl:variable name="colnr">
<xsl:value-of select="position()"/>
</xsl:variable>
<xsl:if test="$colnr &lt;= $headersCount">
<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"/>
<xsl:text>;
</xsl:text>
</xsl:if>
</xsl:for-each>
</xsl:if>
@ -749,7 +751,58 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs @@ -749,7 +751,58 @@ rs[</xsl:text><xsl:value-of select="$tableId"/><xsl:text>].push(new dataRow_</xs
</xsl:otherwise>
</xsl:choose>
</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-->
<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">
<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" />
@ -1559,8 +1612,7 @@ Platzhalter @@ -1559,8 +1612,7 @@ Platzhalter
</xsl:call-template>
</xsl:variable>
<xsl:if test="contains($importEcharts,'true')">
<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:call-template name="importEchartsLibs" />
</xsl:if>
<xsl:variable name="importD3js">
<xsl:call-template name="isRendererNeeded">
@ -1568,31 +1620,7 @@ Platzhalter @@ -1568,31 +1620,7 @@ Platzhalter
</xsl:call-template>
</xsl:variable>
<xsl:if test="contains($importD3js,'true')">
<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:call-template name="importd3jsLibs" />
</xsl:if>
<xsl:variable name="importPlot">
<xsl:call-template name="isRendererNeeded">
@ -1600,8 +1628,7 @@ Platzhalter @@ -1600,8 +1628,7 @@ Platzhalter
</xsl:call-template>
</xsl:variable>
<xsl:if test="contains($importPlot,'true')">
<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:call-template name="importPlotLibs" />
</xsl:if>
</xsl:template>
@ -1771,7 +1798,7 @@ td.integer { @@ -1771,7 +1798,7 @@ td.integer {
top: 120px; /*Abstand zur oberen Leiste*/
padding-top:2em;
padding-left:0.5em;
right: 0;
right: 1.5em;
bottom: 0;
width: 325px; /*Breite nach Bedarf */
background: white;

51
superx/xml/viz_html_chart.xsl

@ -46,6 +46,11 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util @@ -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_tableJavascript" />
<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>
<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 @@ -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>
</div>
<a onClick="exportDataTable(rs[0],rsColumnMetaData[0])">EXPORT</a>
<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 @@ -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="chartModelsrc" style="display:none">
<textarea id="chartModelSrcCode" name="chartModelSrcCode" class="textarea" placeholder="Quellcode..."> <!--cols="100" rows="20"--></textarea>
<a class="button" onClick="copySrcCode('chartModelSrcCode');">Kopieren</a>
<span class="separator">&#160;</span>
<a class="button" onClick="loadChartModelCode('chartModelSrcCode','chartDiv');">Laden</a>
<textarea id="chartModelSrcCode" name="chartModelSrcCode" class="editform" placeholder="Quellcode..."> <!--cols="100" rows="20"--></textarea>
<div class="field is-grouped">
<p class="control">
<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>
@ -488,22 +504,33 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util @@ -488,22 +504,33 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
</svg></div>
</div>
<!--Beginn PlotCode-->
<div class="field is-grouped" id="plotCodeDiv" style="display:block">
<!--Beginn chartCode-->
<div class="field is-grouped" id="chartCodeDiv" style="display:block">
<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>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<a onClick="showPlotCode();">
<a onClick="showChartCode();">
<span class="icon">
<img src="../images/icons/more.svg" title="Laden" />
</span>
</a>
<div id="plotCodeTextAreaDiv" style="display:none">
<textarea id="plotCodeTextArea" name="plotCodeTextArea" class="textarea" placeholder="Plot-Quellcode..." readonly="readonly" disabled="disabled"> <!--cols="100" rows="20"-->
<div id="chartCodeTextAreaDiv" style="display:none">
<textarea id="chartCodeTextArea" name="chartCodeTextArea" class="editform" placeholder="Chart-Quellcode..." > <!--readonly="readonly" disabled="disabled" cols="100" rows="20"-->
</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>

Loading…
Cancel
Save