WSO2 DAS仪表板-创建自定义小工具
[英]WSO2 DAS Dashboard - Creating custom gadget
问题描述
我正在尝试在WSO2 DAS仪表板中创建一个自定义小工具。 我已经创建了。 我可以将其拖放到仪表板设计器中的容器中，在那里，当我向表中添加新数据时，它就可以移动（小工具是一个仪表，它显示了DAS表中引入的最新值）。
问题是，当我单击“查看”时，小工具将从容器中消失。 如果我重新打开页面的设计视图，则该小工具不再存在。 如果我打开Chrome开发者控制台，则会出现错误消息，提示“未定义绘图”。 据我了解，您必须定义此“绘制”函数，以便页面可以在运行时呈现图形。
但是，在其他已经创建的小工具中，此函数使用wso2gadgets.js函数和某种包装器来使用VIZGrammar，但实际上，您仅限于几种类型的小工具（线，条，饼图，数字，也许一两个）更多），我们想使用d3创建更好，更复杂的图形和小工具。
可悲的是，“创建自定义小工具”这一东西的记载确实很少，即使您按照此处的WSO2教程https://docs.wso2.com/display/DAS310/Manually+Creating+a+Custom+Gadget进行操作单击“查看”时不起作用。
我在下面发布了我的gadget.xml的代码。
谢谢你们
<?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
如果您的要求是编写自定义小工具，则无需在脚本标签中包含任何带有脚本标签的库，除非您在计量小工具中使用它们。 WSO2 DAS能够呈现根据Google开放社交规范编写的任何小工具
因此，您可以尝试的一件事是尝试从下面删除未使用的脚本标签。
<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>
使用自定义日期创建Google Analytics（分析）信息中心
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.