// Visualize: Isolate Report (5.6)
// ************ SETTINGS **********
var serverUrls = [
"http://localhost:8080/jasperserver-pro"
];
urlUsed = 0; // default used (one css loads from this server before visualize)
var reportsList = {};
// ********************************
function setupLoaderV() {
var html,
radioTpl = '<input id="#id" type="radio" value="#value" name="confServer" /><label for="#id" title="#title" >#label</label><br/>';
for (var i = 0, l = serverUrls.length; i < l; i++) {
html = radioTpl.replace(/#id/g, "serverUrl_" + i)
.replace(/#value/g, i)
.replace(/#title/g, serverUrls[i])
.replace("#label", serverUrls[i].split("/")[2]);
$("#serverUrlsDiv").append(html);
$("#serverUrl_" + i).prop("checked", i === urlUsed);
}
}
function onLoad() {
setupLoaderV();
$( "#buttons_ui button:first" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
}).next().button({
icons: {
primary: "ui-icon-locked"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
});
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
$("#datepicker-user").datepicker();
$("#datepicker-user2").datepicker();
$( "#tabs" ).tabs();
$("#loadV").click(loadV);
fillSheetList();
loadCSS();
$(window).on("keypress", function(e){
var char = e.charCode - 49;
if (char < 1 && char > 9) return;
var input = $("#sheetList > li > input")[char];
if (!input) return;
$(input).trigger( "click" )
});
$("#isolateDOM").change(function() {
$("#defaultJiveUi").attr({
"disabled": $(this).is(':checked') ? "disabled" : null,
"checked": false
});
});
}
function loadCSS() {
var CSSlibs = [
{ disable: true, href: serverUrls[urlUsed] + "/themes/reset.css" },
{ disable: true, href: "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" },
{ disable: true, href: "//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" },
{ disable: true, href: "//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" },
{ disable: true, href: "http://yui.yahooapis.com/3.16.0/build/cssreset/cssreset-min.css" },
{ disable: true, href: "http://tantek.com/log/2004/undohtml.css" },
{ disable: true, href: "//cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.css" },
//{ disable: true, href: serverUrls[urlUsed] + "/themes/visualizejs.css" },
{ disable: false, href: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/vader/jquery-ui.css" }
];
var head = $("head"),
link;
for (var i = 0, l = CSSlibs.length; i < l; i++) {
link = $("<link rel='stylesheet' type='text/css' href='" + CSSlibs[i].href + "' />");
head.append(link);
if (CSSlibs[i].disable) {
link.on("load", (function(link){
return function() {
$(link)[0].disabled = true;
fillSheetList();
}
})(link));
}
link.on("error", (function(link){
return function() {
$(link)[0].href += "-LOAD_ERROR"
fillSheetList();
}
})(link));
}
}
function loadV() {
var locale = $('#confLocale').val() || "en";
urlUsed = $('input[name="confServer"]:checked', '#containerLoadV').val();
var useOptimize = $('#confOptimized').is(":checked");
$.getScript(serverUrls[urlUsed] + "/client/visualize.js?_opt=" + useOptimize.toString(), function () {
visualize({
auth: {
name: "superuser",
password: "superuser",
locale: locale
}
}, function (v) {
fillSheetList();
$("#loadV").remove();
$("#loadReports").show();
$("#addReport").on("click", function(){
var uri = $(),
defaultJiveUi,
isolateDOM
createReport(
v,
$("#selected_resource").val(),
$("#defaultJiveUi").is(':checked'),
$("#isolateDOM").is(':checked')
);
});
});
});
$("#loadV").html("Loading...").attr("disabled", "disabled");
$("#containerLoadV").addClass("disabled").children("input").attr("disabled", "disabled");
}
function createReport(v, uri, defaultJiveUi, isolateDOM) {
var reportIndex = (+new Date() + "").substr(-5);
console.log(reportIndex)
reportsList[reportIndex] = "";
fillReportsList();
$("#reportContainer").append("<div id='vis_" + reportIndex + "'></div>");
$("#vis_" + reportIndex).addClass("qwe");
v.report({
server: serverUrls[urlUsed],
resource: uri,
container: "#vis_" + reportIndex,
error: function (err) {
alert(err.message);
},
defaultJiveUi: { enable: defaultJiveUi },
isolateDOM: isolateDOM || false,
success: function () {
fillSheetList();
reportsList[reportIndex] = uri;
fillReportsList();
//processIC(v, uri);
}
});
}
function processIC (v, reportUri) {
var inputControls = v.inputControls({
resource: reportUri,
success: function(data) {
console.log(data);
}
});
}
function fillReportsList() {
$("#reportsList").html("");
for (var reportIndex in reportsList) {
if (!reportsList.hasOwnProperty(reportIndex)) continue;
var uri = reportsList[reportIndex];
//if (uri)
var li = $("<li>" + (/[^\/][\w\.]+$/g.exec(reportsList[reportIndex]) || "Loading...") + " (<a href='#'>remove</a>)</li>");
$("#reportsList").append(li);
li.children("a").click((function (reportIndex) {
return function (e) {
e.preventDefault();
$("#vis_" + reportIndex).remove();
delete reportsList[reportIndex];
$(e.target).parent().remove();
};
})(reportIndex));
}
}
function fillSheetList() {
var sheets = $("link");
var checkboxLI = '<li>#index: <input type="checkbox" id="#id" checked="checked"><label for="#id" title="#title">#label</label></li>',
sheetPath = '',
sheetPathSplitted = '',
html = "";
$("#sheetList").html("");
for (var i = 0; i < sheets.length; i++) {
if (sheets[i].href === null) continue;
sheetPath = sheets[i].href;
sheetPathSplitted = sheetPath.split("/");
html = checkboxLI.replace(/#id/g, "sheetItem_" + i)
.replace(/#index/g, i+1)
.replace("#title", sheetPath)
.replace("#label", sheets[i].label || sheetPathSplitted[sheetPathSplitted.length - 1]);
$("#sheetList").append(html);
$("#sheetItem_" + i).change(function (e) {
var id = this.id.split("_")[1];
$("link")[id].disabled = !$(this).is(':checked');
});
$("#sheetItem_" + i)[0].checked = !$("link")[i].disabled;
}
}
<!-- Visualize: Isolate Report (5.6)
-->
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript">
window.addEventListener("load", onLoad);
</script>
<div style="width:327px;float: left;border-right:1px solid #333;margin-right:2px">
<h4>Settings</h4>
<div>
<div id="containerLoadV">
<div id="serverUrlsDiv"></div>
<label for="confLocale">Locale: </label>
<input id="confLocale" value="en" />
<!-- options -->
<br/>
<input id="confOptimized" type="checkbox" />
<label for="confOptimized" >- use optimized javascript </label>
<br/>
<button id="loadV">Load visualize</button>
<br/>
</div>
<div id="loadReports" style="display:none;">
<div>Add report:</div>
<input id="defaultJiveUi" type="checkbox" checked="checked" />
<label for="defaultJiveUi" >- default JIVE UI </label>
<br/>
<input id="isolateDOM" type="checkbox" />
<label for="isolateDOM" >- isolate DOM </label>
<br/>
<select id="selected_resource" name="report" style="width:195px">
<option value="">-</option>
<option value="/public/Samples/Reports/1._Geographic_Results_by_Segment_Report">1._Geographic_Results_by_Segment_Report</option>
<option value="/public/Samples/Reports/2_Sales_Mix_by_Demographic_Report">2_Sales_Mix_by_Demographic_Report</option>
<option value="/public/Samples/Reports/3_Store_Segment_Performance_Report">3_Store_Segment_Performance_Report</option>
<option value="/public/Samples/Reports/04._Product_Results_by_Store_Type_Report">04._Product_Results_by_Store_Type_Report</option>
<option value="/public/Samples/Reports/AllAccounts">AllAccounts</option>
<option value="/public/Samples/Reports/5g.AccountsReport">5g.AccountsReport</option>
<option value="/public/Samples/Reports/06g.ProfitDetailReport">06g.ProfitDetailReport</option>
<option value="/public/Samples/Reports/ProfitDetailReport">ProfitDetailReport</option>
<option value="/public/Samples/Reports/07g.RevenueDetailReport">07g.RevenueDetailReport</option>
<option value="/public/Samples/Reports/RevenueDetailReport">RevenueDetailReport</option>
<option value="/public/Samples/Reports/08g.UnitSalesDetailReport">08g.UnitSalesDetailReport</option>
<option value="/public/Samples/Reports/08.UnitSalesDetailReport">08.UnitSalesDetailReport</option>
<option value="/public/Samples/Reports/9.CustomerDetailReport">9.CustomerDetailReport</option>
<option value="/public/Samples/Reports/9g.CustomerDetailReport">9g.CustomerDetailReport</option>
<option value="/public/Samples/Reports/10g.PerformanceByStoreType">10g.PerformanceByStoreType</option>
<option value="/public/Samples/Reports/State_Performance">State_Performance</option>
<option value="/public/Samples/Reports/11g.SalesByMonthReport">11g.SalesByMonthReport</option>
<option value="/public/Samples/Reports/SalesByMonthReport">SalesByMonthReport</option>
<option value="/public/Samples/Reports/12g.PromotionDetailsReport">12g.PromotionDetailsReport</option>
<option value="/public/Samples/Reports/PromotionDetailsReport">PromotionDetailsReport</option>
<option value="/public/Samples/Reports/13g.TopFivesReport">13g.TopFivesReport</option>
<option value="/public/Samples/Reports/14.PerformanceSummary">14.PerformanceSummary (including fusion chart)</option>
<option value="/public/viz/twoTable">twoTable</option>
<option value="/organizations/organization_1/reports/interactive/MapReport">MapReport</option>
</select>
<button id="addReport">Add</button>
</div>
<p>Loaded reports list:</p>
<ul id="reportsList" style="overflow-wrap: break-word;display:inline;"></ul>
<div style="border-top:1px solid #333;width:100%"></div>
<h4>Stylesheets list:</h4>
<em>Use 1-9 keys to enable\disable css libs.</em>
<ul id="sheetList" style="display:inline;"></ul>
</div>
<div style="border-top:1px solid #333;width:100%"></div>
<div style="width:320px;">
<h4>User components</h4>
<!-- detepicker -->
<div style="height: 240px;">
<div id="datepicker-user"></div>
</div>
<input id="datepicker-user2"/>
<!-- /datepicker -->
<!-- autocomplete -->
<div class="ui-widget">
<label for="tags">Autocomplete</label>
<input id="tags"/>
</div>
<!-- autocomplete -->
<!-- tabs -->
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc</a></li>
<li><a href="#tabs-2">Pr dor</a></li>
<li><a href="#tabs-3">A laia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
<!-- /tabs -->
<!-- buttons -->
<div id="buttons_ui">
<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>
</div>
<!-- /buttons -->
</div>
</div>
<div style="margin-left:330px;height:100%">
<div id="reportContainer"></div>
</div>
.qwe {
height: 100%;
}
#reportContainer {
height: 100%;
}
body, html {
height: 100%;
}
#containerLoadV.disabled {
color: #666;
}
/**
Brake something
**/
table {
font-size: 25px;
}
External resources loaded into this fiddle: