JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://underscorejs.org/underscore.js"></script>
<!-- Provide the URL to visualize.js -->
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<div id="App"></div>
React
function RenderVisualize () {
React.useEffect(function () {
visualize({
auth: {
name: "joeuser",
password: "joeuser",
organization: "organization_1"
}
}, function (v) {
var reportOptions = collectReportProperties({
resource: "/public/viz/Hyperlinks/Drill_Reports_with_Controls/main_report",
linkOptions: {
beforeRender: function (linkToElemPairs) {
linkToElemPairs.forEach(showCursor);
},
events: {
"click": function (ev, link) {
if (link.type == "ReportExecution") {
openInNewTab({
resource: link.parameters._report,
params: convertToReportParams(link.parameters)
});
}
console.log(link);
}
}
},
error: function (err) {
alert(err.message);
}
});
v("#main").report(reportOptions);
function collectReportProperties(reportProperties) {
var newProperties = findReportProperties(location.href);
reportProperties = _.extend(reportProperties, newProperties);
console.log('Report Properties:' , JSON.stringify(reportProperties));
return reportProperties;
}
function convertToReportParams(linkParams){
return _.chain(linkParams)
.pairs()
.map(function (pair){
var key = pair[0],
val = pair[1];
if (!_.isArray(val)){
return [key, [val]];
}
return pair;
})
.object()
.value();
}
function findReportProperties(url) {
let parser = document.createElement('a');
parser.href = url;
var urlParams = parser.search,
result = {};
if...