WSO2 DAS Dashboard - Creating custom gadget
Question
I am trying to create a custom gadget in WSO2 DAS Dashboard. 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).
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". 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.
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".
I am posting the code for my gadget.xml below.
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 answers
solution1
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.