JSFiddle - React, Tailwind, and code Playground

by DimaGorbenko

HTML

<script src="http://visualizejs-preview.eng.jaspersoft.com:8080/jasperserver-pro-branch/client/visualize.js"></script>

<div id="container"></div>

CSS

body {background-color: grey;}
#container {
    width:300px;
    height: 600px;
}

JavaScript

var customOverlay = $("<div></div>").append($("<div></div>").css({
    margin: "15px auto 10px auto",
    width: 32,
    height: 32,
    background: "url('http://bit.ly/1lWxxrd') transparent"
})).append($("<div>Loading...</div>")).css({
    position: "absolute",
    top: 30,
    left: "calc(50% - 100px)",
    height: 100,
    width: 200,
    opacity: 1,
    "font-size": 24,
    "padding-top": 1,
    "text-align": "center",
    "background-color": "white",
    "box-shadow": "0 0 20px #aaa",
    "border-radius": 10
});

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "organization_1"
    }
}, function (v) {
    v.inputControls({
        container: "#container",
        resource: "/public/Samples/Reports/16g.InteractiveSalesReport",
        loadingOverlay: customOverlay,
        error: function (err) {
            alert(err);
        }
    });
});