WSO2 DAS仪表板-创建自定义小工具
[英]WSO2 DAS Dashboard - Creating custom gadget
问题描述
I am trying to create a custom gadget in WSO2 DAS Dashboard. 
我正在尝试在WSO2 DAS仪表板中创建一个自定义小工具。 I already created it. 我已经创建了。 I can drag and drop it in a container in the dashboard designer, and there I can see it moving when I add new data to the table (the gadget is a gauge that shows the latest value introduced in a DAS table). 我可以将其拖放到仪表板设计器中的容器中，在那里，当我向表中添加新数据时，它就可以移动（小工具是一个仪表，它显示了DAS表中引入的最新值）。
The problem is, that when i click "view", the gadget disappears from the container. 问题是，当我单击“查看”时，小工具将从容器中消失。 If I reopen the design view of the page, the gadget is not longer there. 如果我重新打开页面的设计视图，则该小工具不再存在。 If I open the Chrome developer console, I have an error saying "draw is not defined". 如果我打开Chrome开发者控制台，则会出现错误消息，提示“未定义绘图”。 As far as I can understand, you have to define this "draw" function so that the page can render the graphic in runtime. 据我了解，您必须定义此“绘制”函数，以便页面可以在运行时呈现图形。
But, in other already created gadgets, this function uses wso2gadgets.js functions and some kind of wrapper to use VIZGrammar, but you are really limited to only a few type of gadgets(line, bar, pie, number, and perhaps one or two more), and we wanted to use d3 to create better and more complex graphs and gadgets. 但是，在其他已经创建的小工具中，此函数使用wso2gadgets.js函数和某种包装器来使用VIZGrammar，但实际上，您仅限于几种类型的小工具（线，条，饼图，数字，也许一两个）更多），我们想使用d3创建更好，更复杂的图形和小工具。
Sadly, this thing of "creating a custom gadget" is really poor documented, and even if you follow the WSO2 tutorial here https://docs.wso2.com/display/DAS310/Manually+Creating+a+Custom+Gadget it does not work when you click "view". 可悲的是，“创建自定义小工具”这一东西的记载确实很少，即使您按照此处的WSO2教程https://docs.wso2.com/display/DAS310/Manually+Creating+a+Custom+Gadget进行操作单击“查看”时不起作用。
I am posting the code for my gadget.xml below. 我在下面发布了我的gadget.xml的代码。
Thank you all 谢谢你们
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Gauge" description="This is a template gadget">
<Require feature="dynamic-height"/>
<Require feature="wso2-gadgets-identity"/>
</ModulePrefs>
<UserPref name="windowSize"
display_name="Window Size"
default_value="10"/>
<Content type="html">
<![CDATA[
<head>
<meta charset="utf-8">
<style>
.label{
font-size:22.5px;
fill:#ffffff;
text-anchor:middle;
alignment-baseline:middle;
}
.face{
stroke:#c8c8c8;
stroke-width:2;
}
.minorTicks{
stroke-width:2;
stroke:white;
}
.majorTicks{
stroke:white;
stroke-width:3;
}
</style>
<svg width="400" height="400"></svg>
<link href="/portal/libs/analytics-wso2-2.0.0/common.css" rel="stylesheet" type="text/css" >
<script src="/portal/libs/jquery_1.11.0/jquery-1.11.3.min.js"></script>
<script src="js/provider-libs/ws-client.js"></script>
<script src="http://vizjs.org/viz.v1.0.0.min.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/d3.min.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/vega.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/VizGrammar.min.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/wso2gadgets.js"></script>
<script src="/portal/libs/analytics-wso2-2.0.0/chart-utils.js"></script>
<script src="/portal/js/carbon-analytics.js"></script>
<script src="js/core/provider-client.js"></script>
<script src="js/core/gadget-util.js"></script>
<script src="js/core/gadget-core.js"></script>
<script>
var username = "********";
var password = "********";
var server_url = "https://localhost:9445/portal/apis/analytics";
var client = new AnalyticsClient().init(username,password,server_url);
var svg=d3.select("svg");
var g=svg.append("g").attr("transform","translate(200,200)");
var domain = [0,100];
var gg = viz.gg()
.domain(domain)
.outerRadius(150)
.innerRadius(30)
.value(0.5*(domain[1]+domain[0]))
.duration(1000);
gg.defs(svg);
g.call(gg);
var queryInfo = {
tableName : "ROBICON_DEBUG_GENERAL_COMPLETO", //table being queried
searchParams : {
query : "*:*", //lucene query to search the records
start : 0, //starting index of the matching record set
count : 100,
sortBy:
[
{
field: "Timestamp",
sortType: "DESC"
}
]
}
};
d3.select(self.frameElement).style("height", "400px");
setInterval(
function(){
client.tableExists("ROBICON_DEBUG_GENERAL_COMPLETO", function(data) {
console.log (data["message"]);
client.search(queryInfo, function(data) {
var datos = JSON.parse(data["message"]);
console.log (datos[0].values.LineSide_Voltage);
var LSV = datos[0].values.LineSide_Voltage;
gg.setNeedle(parseFloat(LSV).toFixed(2));
}, function(error) {
console.log("error occured: " + error);
gg.setNeedle(domain[0]+Math.random()*(domain[1]-domain[0]));
});
}, function(error) {
console.log("error occured: " + error);
});
},30000);
</script>
</head>
<body>
<div id="canvas"></div>
</body>
]]>
</Content>
</Module>
1 个解决方案
解决方案1
0 2017-08-30 12:30:59
If your requirement is to write a custom gadget,you don't need to include any of the libraries with script tags unless you use them in your gauge gadget. 如果您的要求是编写自定义小工具，则无需在脚本标签中包含任何带有脚本标签的库，除非您在计量小工具中使用它们。 WSO2 DAS is capable of rendering any gadget which is written following the google open social spec WSO2 DAS能够呈现根据Google开放社交规范编写的任何小工具
So one thing you can try is try removing unused script tags from below. 因此，您可以尝试的一件事是尝试从下面删除未使用的脚本标签。
<script src="/portal/libs/jquery_1.11.0/jquery-1.11.3.min.js"></script> <script src="js/provider-libs/ws-client.js"></script> <script src="http://vizjs.org/viz.v1.0.0.min.js"></script> <script src="/portal/libs/analytics-wso2-2.0.0/d3.min.js"></script> <script src="/portal/libs/analytics-wso2-2.0.0/vega.js"></script> <script src="/portal/libs/analytics-wso2-2.0.0/VizGrammar.min.js"></script> <script src="/portal/libs/analytics-wso2-2.0.0/wso2gadgets.js"></script> <script src="/portal/libs/analytics-wso2-2.0.0/chart-utils.js"></script> <script src="/portal/js/carbon-analytics.js"></script> <script src="js/core/provider-client.js"></script> <script src="js/core/gadget-util.js"></script> <script src="js/core/gadget-core.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.