Visualize: Render report with pagination

Test plugins

by vysohanych

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type='text/javascript' src="http://build-master.jaspersoft.com:6980/jrs-pro-feature-profile-attributes/client/visualize.js"></script>

<div id="container">
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>

JavaScript

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

    var chartName = "01._Geographic_Results_by_Segment_Report",
        $select = buildControl("Chart types: ", v.report.chart.types),
        report = v.report({
            resource: "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
            container: "#container",
            success: selectDefaultChartType
        });

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

    function selectDefaultChartType(data) {
        var component = data.components[0];
        if (component) {
            console.log(component.chartType);

            $select.find("option[value='" + component.chartType + "']")
                .attr("selected", "selected");
        }
    }

    function buildOptions(options) {
        var template = "<option value='{value}'>{value}</option>",
            optionsTemplate = "";

        options.forEach(function (option) {
            optionsTemplate += template.replace(/{value}/g, option);
        });

        return optionsTemplate;
    }

    function buildControl(name, options) {

        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);
        $control.insertBefore($("#container"));
        return $control;
    }

});