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:5980/jrs-pro-trunk/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="nano"><a class=".btn"></a></div>
<div id="normal"></div>

CSS

.line {
    margin-bottom: 1em
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: bold;
  line-height: 20px;
  color: #333;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-color: #eee;
  background-image: -webkit-linear-gradient(#fcfcfc, #eee);
  background-image: linear-gradient(#fcfcfc, #eee);
  background-repeat: repeat-x;
  border: 1px solid #d5d5d5;
  border-radius: 3px;
}


#nano {
    height: 15px;
    width: 15px;
    border: 1px solid black;
    margin-bottom: 1em;
}

#normal {
    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: "#normal",
     //   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.render();
        },

        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...