richbl/ng2-bootstrap-visualizejs

Angular Framework (Angular 2.0) demonstration using ng2-bootstrap and visualize.js libraries

Ng2-Bootstrap-Visualizejs

A demonstration application that draws Jaspersoft report/dashboard resources with the Visualize.js library using the tabs and alerts directives from the ng2-bootstrap library. All implemented using the Angular Framework (Angular 2.0).

Interested in implementing a Visualize.js solution without using the ng2-bootstrap library? Check out this related project instead.

User Login Screen

Tabbed Result Views

Based on Angular 2-Quickstart

This repository is based on the Angular 2-Quickstart, which is provided by Valor Software to demo a simple implementation of their Native Angular 2 Directives for Bootstrap.

Note that this project has not been forked from the Angular 2-Quickstart project, so no updates made to that project will be reflected in this project.

Prerequisites

• Jaspersoft software and server resources (i.e. JasperReports Server)
• Angular Framework (aka, Angular 2.0) library resources
• Ng2-Bootstrap library resources

Jaspersoft JasperReports Server

Required software and servers are well described on the Jaspersoft website.

Angular Framework

Node.js and npm are essential to Angular 2 development. Get them now if they're not already installed on your machine.

Verify that you are running at least node v5.x.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors.

This project was originally developed using Angular 2.0.0-RC3.

Ng2-Bootstrap

The ng2-bootstrap library is available as an npm package, which makes it extremely easy to implement in this or any Angular Framework project. When first installing npm packages, project dependencies should install the latest package.

Getting Started

Clone this repo into new project folder (e.g., my-proj).

git clone  https://github.com/richbl/ng2-bootstrap-visualizejs  my-proj
cd my-proj

Install npm Packages

See npm and nvm version notes above

Install the npm packages described in the package.json and verify that it works:

Attention Windows developers: you must run all of these commands in administrator mode.

npm install

Edit Visualize.js Configuration

Configuration details for the Visualize.js library are currently managed in two files:

-index.html: sets the library include for the Visualize.js library script (e.g., <script src="http://visualizejsdemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>) -app/vjs.config.service.ts: set user and resource details (i.e., reports and dashboards)

It's expected that future releases of this demonstration should permit for the dynamic loading of the Visualize.js library in the vjs.config.service.ts component.

Login credentials for this demo: joeuser/joeuser.

Start the Server

The npm start command first compiles the application, then simultaneously re-compiles and runs the lite-server. Both the compiler and the server watch for file changes.

npm start

By default, the server will be running on http://localhost:3000. Open a browser page on this URL and you should see the application running.

Shut it down manually with Ctrl-C.

You're ready to go!

ng2-bootstrap-visualizejs's Issues

Session timeout

DOES: The JasperReports Server appears to have a session timeout set for ~30 minutes. When the session times out and the user clicks a tab (after being idle for that period of time), server authentication fails. User does not see the resource draw.

SHOULD: Catch session timeout (rather, draw failure), and redirect to login component.

README Image

README Image

README image

export report

Hi Rich,
Do you know how to export the report to pdf? I'm trying to call something like:
function exportToPdf() {
report
.export({
outputFormat: "pdf"
});
}
v("#" + vjsConfig.resourceDetails[resourceIndex].id).report({...}).exportToPdf(); but report() always returns undefined.

README Image

angular 2 integration

Hey there!
I see you didnt update your repo for quite some time.
We are looking for scalable reporting machnism that would work in angular 2 application.
do you have a solution for us?
thanks.

FusionCharts cannot find DOM element

DOES: On occasion, an exception is generated where the graphing resource (either report or dashboard) cannot find the containing DOM element that it users to render into.

SHOULD: Not throw exception. It's possible that tabbing quickly between resources causes the DOM to lag in updating dynamic components, which in this case, are the containing elements expected by the graphing resource(s).