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.