JSFiddle - React, Tailwind, and code Playground

by obobruyko

HTML

<script src="http://localhost:8080/jrs-amber-dashboard-integration/client/visualize.js?_opt=false"></script>

<div>
    <input type="text" id="percent" size="10" value="100" disabled />%
    <button id="resize" disabled>Resize</button>
    <button id="plus" disabled>+</button>
    <button id="minus" disabled>-</button>
    <button id="width" disabled>Fit Width</button>
    <button id="height" disabled>Fit Height</button>
    <button id="fitContainer" disabled>Fit Container</button>
    <button id="getScale" disabled>Get Scale</button>
    <button id="pagePlus" disabled>Page +</button>
    <button id="pageMinus" disabled>Page -</button>
</div>
<div id="container"></div>

CSS

#container {
    border: 20px solid red;
    padding: 20px 21px 22px 23px;
    margin: 20px 21px 0px 23px;
    height: 350px;
    width: 1100px;
    overflow: auto;
    background-color: yellow;
}

JavaScript

var biComp,
    zoom = 1,
    percent = document.getElementById("percent"),
    resize = document.getElementById("resize"),
    plus = document.getElementById("plus"),
    minus = document.getElementById("minus"),
    width = document.getElementById("width"),
    height = document.getElementById("height"),
    container = document.getElementById("fitContainer"),
    getScale = document.getElementById("getScale"),
    pagePlus = document.getElementById("pagePlus"),
    pageMinus = document.getElementById("pageMinus");

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    
    biComp = v.report({
        container: "#container",
        resource: "/public/Samples/Reports/04._Product_Results_by_Store_Type_Report", // report and the chart
        scale: "container",
        pages: 1,
        success: function () {
            percent.removeAttribute("disabled");
            resize.removeAttribute("disabled");
            plus.removeAttribute("disabled");
            minus.removeAttribute("disabled");
            width.removeAttribute("disabled");
            height.removeAttribute("disabled");
            container.removeAttribute("disabled");
            getScale.removeAttribute("disabled");
            pagePlus.removeAttribute("disabled");
            pageMinus.removeAttribute("disabled");
        },
        error: function (err) {
            alert(err.message);
        }
    });
});

resize.onclick = function () {
    biComp.scale(percent.value / 100).run();
};

plus.onclick = function () {
    biComp.scale(zoom += 0.1).run();
};

minus.onclick = function () {
    biComp.scale((zoom -= 0.1) > 0 ? zoom : zoom = 0.1).run();
};

width.onclick = function () {
    biComp.scale("width").run();
};

height.onclick = function () {
    biComp.scale("height").run();
};

container.onclick = function () {
    biComp.scale("container").run();
};

getScale.onclick = function () {
    console.log("Report Scale is: ",...