JSFiddle - React, Tailwind, and code Playground

by Pavel Savushchyk

HTML

<script src="http://localhost:8080/jrs1/client/visualize.js?_opt=false"></script>
<button id="changeFormat">changeFormat</button>
<button id="filter">Filter</button>
<div id="container2"></div>

CSS

#container2 {
    border: 1px solid black;
    height: 500px;
    width: 100%;
    overflow:auto;
}

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {


    //render report from provided resource
    var report = v.report({
        resource: "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
        error: handleError,
        isolateDom: false,
        container: "#container2",
        scale: 1,
        success: function (data) {
            console.log(data);

        },
        defaultJiveUi: {
            floatingTableHeadersEnabled: true,
            floatingCrosstabHeadersEnabled: true
        }
    });

    //show error
    function handleError(err) {
        console.log(err);
        alert(err.message);
    }


    $("#changeFormat").on("click", function () {
        report.updateComponent( "_detail_level__column_long", {
                detailsRowFormat: {
                    pattern: "[h]:mm:ss"
                }
            }).fail(handleError);
    });
    $("#filter").on("click", function () {
        report.updateComponent( "_detail_level__column_long", {
                filter: {
                	operator: "greater",
                	value: '0:0:1'
            	}
            }).fail(handleError);
    });
});