JSFiddle - React, Tailwind, and code Playground

by NesterOne

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://build-master.jaspersoft.com:8580/jrs-pro-feature-dashboard-improvements-for-jasper-mobile/client/visualize.js?_opt=true"></script>
<div id="dimention-original" class="line"><span></span>

</div>
<div id="dimention-container" class="line"><span></span>

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

CSS

.line {
    margin-bottom: 1em
}
#container {
    height: 700px;
    width: 500px;
    border: 1px solid black;
}

JavaScript

/**
    POC Adaptive Visualization. Tabular JSS/JR Report
        Original Report Size: 597x774
        Inital Container Size: 500x700
        
   Orientation:
       Portret (height > width )
    
    Phases:
        gigant - ?
        big -  ?
        normal - standart Report with scaling to fill container size
        small - graphic + KPI if any
        nano - KPI 
    
    Boundaries:
        gigant - ??x??
        big - ??x??
        normal - (450x550;800x1000)
        small - (;450x550]        
    
    @author nesterone
   
*/


visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "organization_1"
    }
}, function (v) {

    //start from 
    var report = adaptiveReport({
        resource: "/public/Samples/Reports/AllAccounts",
        container: "#container",
        autoresize: false,
        scale: "container",
        events: {
            reportCompleted: function () {

                display({
                    template: "Original: {w}x{h}",
                    dest: "#dimention-original span",
                    dimentionsOf: ".jrPage"
                });

            }
        },
        error: function (e) {
            alert(e);
        }
    });

    $("#container").resizable({

        resize: function () {
            display({
                template: "Container: {w}x{h}",
                dest: "#dimention-container span",
                dimentionsOf: "#container"
            });

            report.resize();
        },

        stop: function (event, ui) {

        }
    });


    function display(obj) {

        var $dst = obj ? $(obj.dest) : [],
            $src = obj ? $(obj.dimentionsOf) : [],
            tmpl = obj ? obj.template : "";

        if ($dst.length && $src.length) {
            $dst.text(
            widthAndHeight(tmpl, $src));
        } else if (!$src.length) {
            throw new Error("Can't find element to display it's dimention");
        } else if...