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://code.jquery.com/jquery-2.1.0.js"></script>
<script   src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"   integrity="sha256-xI/qyl9vpwWFOXz7+x/9WkG5j/SVnSw21viy8fWwbeE="   crossorigin="anonymous"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js?_opt=true"></script>
<p>Date: <input type="text" id="datepicker"></p>
<div id="filters"></div>
<div id="container"></div>

CSS

input.jr[type="email"],
input.jr[type="number"],
input.jr[type="password"],
input.jr[type="text"] {
  color: red;
}

#filters .jr-mInput-check-label.jr,
#filters .jr-mInput-radio-label.jr,
#filters .jr-mInput-boolean-label.jr {
  color: #218c00;
}

#filters .jr-mInput-label.jr {
  color: #218c00;
}

#filters .jr-mInput-radio.jr,
#filters .jr-mInput-check.jr {
  padding: 0.4em;
}

#filters .jr-mInput-radio.jr:hover,
#filters .jr-mInput-check.jr:hover {
  background-color: #bbe8c0;
}

#filters .jr-isDisabled .jr-mInput-radio.jr:hover,
#filters .jr-isDisabled .jr-mInput-check.jr:hover {
  background-color: white;
}

#filters .jr .ui-state-default,
.jr .ui-widget-content .ui-state-default,
.jr .ui-widget-header .ui-state-default {
  background: #0087f5;
}

#filters .jr-mMultiselect-toggle-label.jr {
  color: #000000;
  font-weight: 600;
}

#filters .jr-mSelectlist-item.jr {
  color: #218c00;
  background-color: inherit;
}

#filters .jr-mSelectlist-item.jr :hover,.jr-mSingleselect-dropdown .jr-mSelectlist-item.jr:hover, .jr-mSingleselect-dropdown .jr-mSelectlist-item.jr-isSelected.jr {
  color: #21610d;
  background-color: #bbe8c0;
}


#filters .jr-mSelectlist-item.jr.jr-isSelected{
  color: #21610d;
  background-color: #89e693;
}


#filters .jr-mSingleselect-input.jr, .jr-mSingleselect-dropdown .jr-mSelectlist-item .jr{
  color: #218c00;
  background-color: inherit;
}

JavaScript

$( function() {
    $( "#datepicker" ).datepicker();
  } );
  
var reportUri = "/public/Controls/New_Dashboard_1";

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

var query = v.resourcesSearch({
folderUri: "/public",
recursive: false,
runImmediately : false,
success:function(results){
console.log(results);
}
}));


query.run().done(function(results){
console.log(results);
})

    v.dashboard({
        container:"#filters",
        resource: reportUri
    });
    

});