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 4 weeks 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
Split 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) @@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save