Visualize: Render report with pagination

Test plugins

by Pavel Savushchyk

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type='text/javascript' src="http://localhost:8080/jrs1/client/visualize.js?_opt=false"></script>
<div id="container" ></div>

CSS

#container{
    height:500px;
}

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    
    //persisted chart name
    var chartName = "geo_by_seg", 
        $select = buildControl("Chart types: ", v.report.chart.types),
        report = v.report({
            resource: "/public/viz/PersistedId/1._Geographic_Results_by_Segment_Report",
            container: "#container",
            isolateDom: true,
            defaultJiveUi:{
                enabled:false
            },
            success: selectDefaultChartType
        });

    $select.on("change", function () {
        report.updateComponent(chartName, {
                chartType: $(this).val()
            })
            .done(function (component) {
                chartComponent = component;
            })
            .fail(function (error) {
                alert(error);
            });
    });

    function selectDefaultChartType(data) {
        var component = data.components
                            .filter(function (c) {
                                   return c.name === chartName;
                            })
                            .pop();
        if (component) {
            $select.find("option[value='" + component.chartType + "']")
                   .attr("selected", "selected");
        }
    }

    function buildControl(name, options) {

        function buildOptions(options) {
            var template = "<option>{value}</option>";
            return options.reduce(function (memo, option) {
                return memo + template.replace("{value}", option);
            }, "")
        }

        console.log(options);

        if (!options.length) {
            console.log(options);
        }

        var template = "<label>{label}</label><select>{options}</select><br>",
            content = template.replace("{label}", name)
                .replace("{options}", buildOptions(options));

        var $control = $(content);
       ...