Visualize: dashboard

Test plugins

by Yuriy Bablyukh

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js?_opt=true"></script>
<div id="ic_container">

</div>
<button id="apply">apply</button>

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

CSS

#container {
  height: 600px;
}

JavaScript

var dashboardUri = "/public/Samples/New_Dashboard",
  reportUri = "/public/Samples/Reports/9.CustomerDetailReport";


visualize({
  auth: {
    name: "superuser",
    password: "superuser"
  }
}, function(v) {
  var dashboard = v.dashboard({
    container: "#container",
    resource: dashboardUri,
    success: function(data) {
    	console.log(data);
    },
    error: function(error) {
      alert(error);
    }
  });

  var inputControls = v.inputControls({
    resource: reportUri,
    success: function(controls) {
      console.log(controls);
      controls.forEach(buildControls);
    },
  });

  function buildControls(control) {

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

    var template = "<label>{label}<select id='{id}'>{rows}</select></label>";
    content = template.replace("{label}", control.label).replace("{id}", control.id)
      .replace("{rows}", buildRows(control.state.options));

    $("#ic_container").append($(content));
  }


  function getSelection() {
    var selectedValues={
      "customerId": [$("#customerId").val()]
    }
    console.log(selectedValues);
    return selectedValues;
  }

  $("#apply").click(
    function() {
      dashboard.params(getSelection()).run()
            .fail(handleError);
    }
  );


}, handleError);

function handleError(e) {
    alert(e);
}