JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://infra-platforms-phase2-18418-anshinde.pfa.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<div id="app"></div>
CSS
.selected {
display: inline;
font-size: 1.3em;
color: #3C1A06;
}
#field {
margin-right: 20px;
}
#firstContainer {
height: 350px;
margin-bottom: 10px;
}
#backButton {
display:none;
outline: none;
position: relative;
float: right;
top: -10px;
margin-right: 10px;
margin-bottom: 5px;
font-size: 1.15em;
border: 1px solid #524236;
border-radius: 20px;
background-color: #E8E6DF;
color: #3C1A06;
}
React
function RenderVisualize () {
React.useEffect(function () {
var firstView = "/public/viz/Adhoc/Store_Sales3";
visualize({
auth: {
name: "joeuser",
password: "joeuser",
organization: "organization_1"
}
}, function(v) {
function renderView() {
$("#backButton").hide();
first = v.adhocView({
resource: firstView,
container: "#firstContainer",
linkOptions: {
events: {
click: function(ev, data, defaultHandler, extendedData) {
console.log(data);
var measureSelected = data.Measures;
var categorySelected = data.product_category;
$("#field").html("<span>Field: <b>" + data.product_category + "</b></span>")
updateView(measureSelected, categorySelected)
}
}
},
success: function() {
console.log("Available filters")
console.log(first.data().metadata.inputParameters);
},
error: function(e) {
console.log(e);
}
});
}
renderView()
function updateView(measure, category) {
var showCostView = "/public/viz/Adhoc/Store_Cost4";
var showSalesView = "/public/viz/Adhoc/Store_Sales4";
$("#backButton").show();
if (measure[0] === "store_cost") {
$("#measure").html("<span>Measure: <b>Store Cost</b></span>")
var costView = v.adhocView({
resource: showCostView,
container: "#firstContainer",
params: {
product_category_1: [category]
},
error: function(e) {
console.log(e);
}
});
} else {
$("#measure").html("<span>Measure: <b>Store Sales</b></span>")
var salesView = v.adhocView({
resource: showSalesView,
container: "#firstContainer",
...