JSFiddle - React, Tailwind, and code Playground
HTML
<button id="destroy">Destroy dashboard</button>
<button id="refresh">Refresh dashboard</button>
<button id="cancel" disabled>Cancel refreshing dashboard</button>
<button id="appl" disabled>Apply params</button>
<div id="container"></div><script type='text/javascript' src="http://build-master.jaspersoft.com:5980/jrs-pro-trunk/client/visualize.js?_opt=true&logEnabled=true"></script>
CSS
#container {
height: 800px;
}
JavaScript
function handleError(e) {
alert(e);
}
visualize({
auth: {
name: "superuser",
password: "superuser"
}
}, function (v) {
var initialParams = {};
var dashboard = v.dashboard({
resource: "/public/Samples/Dashboards/1._Supermart_Dashboard",
container: "#container",
error: handleError,
success: function() {
$("button").prop("disabled", false);
buildParamsInput();
}
});
function buildParamsInput() {
var params = dashboard.data().parameters;
for (var i = params.length-1; i >= 0; i--) {
var $el = $("<div>" + params[i].id + ": <input type='text' data-paramId='" + params[i].id + "'/></div>");
$("body").prepend($el);
$el.find("input").val(initialParams[params[i].id]);
}
}
$("button#appl").on("click", function() {
var params = {};
$("[data-paramId]").each(function() {
params[$(this).attr("data-paramId")] = $(this).val().indexOf("[") > -1 ? JSON.parse($(this).val()) : [$(this).val()];
});
$("button").prop("disabled", true);
console.dir(params);
dashboard.params(params).run()
.fail(handleError)
.always(function() { $("button").prop("disabled", false); });
});
$("#destroy").click(function() {
dashboard.destroy();
});
$("#cancel").click(function() {
$("#refresh").prop("disabled", true);
dashboard.cancel()
.done(function() {
console.log("dashboard refresh cancelled");
})
.fail(handleError)
.always(function() {
$("#refresh").prop("disabled", false);
});
});
$("#refresh").click(function() {
$("#cancel").prop("disabled", false);
dashboard.refresh()
...