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!